# Kanban

Production stages as columns (Awaiting, Cutting, Stitching, Finishing, Packed, Shipped) with order cards you drag or move with the keyboard. WIP limits warn when a column is full or over. Phone: stage tabs.

- **Group:** Data display · **family:** `data-display` · **shadcn:** Card
- **Build:** `@dnd-kit/core` + `sortable` (installed) with `Card`; phone `Tabs`.
- **In apps/admin today:** @dnd-kit installed.
- **Client component:** yes. 

## Content rules

- Stage names are production stages, not status chips.

## Do

- Confirm moves that notify the customer.

## Don't

- Columns that scroll vertically inside a scrolling page without a header.

## Accessibility

- **Keyboard:** Space lifts a card; ← → change column; ↑ ↓ reorder; Space drops; Escape cancels.
- **ARIA:** Live region announces moves ("RJC-20418 moved to Stitching").
- **Focus:** Focus stays on the moved card.

## Tokens

`--text-micro` `--muted-foreground` `--s-3` `--s-4` `--muted` `--s-2` `--r-card` `--motion-hover` `--s-1` `--w-semibold` `--text-card` `--font-voice` `--font-stretch-title` `--w-medium` `--font-ui` `--r-chip` `--background` `--border` `--warning` `--status-soft-alpha` `--destructive` `--accent` `--ring` `--text-small` `--foreground` `--secondary-border` `--r-control` `--card` `--e-1` `--motion-focus` `--motion-press` `--e-card-hover` `--focus-ring` `--e-pop` `--e-rail-strong-warning` `--e-rail-strong-destructive` `--control-h-m` `--text-btn-sm` `--primary` `--primary-foreground` `--text-10` `--text-body`

## Files

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