# Receiving Manifest

> A receiving-dock manifest dropzone — the whole paper sheet is the drop target, and dropped files land as numbered ledger line-items with dotted-leader progress fills, quiet completion states, and refusal notes in the error tone for rejected consignments. Fully token-driven and design-system agnostic.

- Category: Dropzone
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: upload, drag-and-drop
- Page: https://builder.atheros.ai/components/receiving-manifest
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_receiving_manifest/preview-45b8c3ace8c2.webp

## 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

## Keyboard shortcuts

- `Enter / Space` — Open file picker when the intake zone is focused
- `Escape` — Clear drag-over state and hold all receiving items

## Common questions

**Which frameworks is Receiving Manifest available in?**

Receiving Manifest ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Receiving Manifest dropzone component free?**

Receiving Manifest is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Receiving Manifest support dark mode?**

Yes. Receiving Manifest ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Receiving Manifest live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/receiving-manifest

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt