Receiving Manifest

Features

• Window-level drag detection — dragging files anywhere over the page lights the intake crop marks before the cursor reaches the zone
• Valid / invalid drag-over states — the intake inspects dragged item types and flips to a red REFUSED treatment for unaccepted types
• Ledger queue — each file becomes a numbered mono line-item with a dotted leader that fills as receiving progresses
• Status semantics — completed items settle to a filled leader with no extra chrome, rejected items show a red refused note with an inline reason line
• Per-item hold / resume / restart / strike controls with delegated listeners
• Client-side validation from js/data.js config — accepted types and a 20 MB per-file limit
• Two-at-a-time receiving simulation with queued items and a totals dotted leader
• Keyboard operable — the intake zone is focusable, Enter/Space opens the picker, Escape holds all receiving
• aria-live status region announcing additions, completions, refusals, and clears

Accessibility

ARIA labels

All buttons and the intake zone carry aria-label

Decorative icons

Generated and static SVGs are hidden from assistive technology

Keyboard navigation

Intake zone is focusable (role="button"), Enter/Space opens the picker, Escape holds receiving

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Live regions

Visually-hidden role="status" aria-live="polite" region announces adds, completions, refusals

Viewport

100dvh for mobile-safe viewport height

Content escaping

File names escaped via esc() using textContent

Locale formatting

File sizes use Intl.NumberFormat; the manifest date uses Intl.DateTimeFormat

Touch targets

Dense row controls retain the audited 24×24px minimum; clear and intake controls use touch manipulation

Customise it with AI

Open Receiving Manifest in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dropzone is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.