# File and photo uploader

A drop zone plus a numbered photo strip you can reorder by drag (or keyboard). Each slot shows whether its alt text is written. Files show progress, done and failed rows.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** composed
- **Build:** Composed: `Button` + `Progress`; ordering with `@dnd-kit/sortable` (installed).
- **In apps/admin today:** @dnd-kit is installed (website menu sections); no uploader component.
- **Client component:** yes. 

## Content rules

- Hint lists formats and size: "JPG or PNG, up to 10 MB, 3:4".

## Do

- Mark slot 1 as the main photo.

## Don't

- Upload without alt text status.

## Accessibility

- **Keyboard:** Browse is a real button. Slot: Space picks up, ← → moves, Space drops, Escape cancels (dnd-kit keyboard sensor).
- **ARIA:** Live region announces moves ("Photo 3 moved to position 1").
- **Focus:** Focus follows the moved slot.

## Tokens

`--r-pill` `--border` `--muted-foreground` `--motion-hover` `--warning` `--destructive` `--s-4` `--s-5` `--secondary-border` `--r-card` `--muted` `--r-control` `--background` `--w-semibold` `--text-card` `--font-voice` `--text-small` `--ring` `--accent` `--s-3` `--w-medium` `--text-body` `--font-ui` `--primary` `--success` `--studio` `--foreground` `--motion-press` `--r-chip` `--text-micro` `--primary-foreground`

## Files

`uploader.html` live specimen · `uploader.css` kit rules · `uploader.d.ts` props · full page: `docs/components/uploader/` (phone: `m/`).