import {
  Meta,
  Title,
  Subtitle,
  Description,
  Primary,
  Controls,
  Stories,
} from '@storybook/addon-docs/blocks';
import * as KanbanStories from './kanban.stories';

<Meta of={KanbanStories} />

<Title />
<Subtitle>Board with columns of draggable cards, operable by pointer and by keyboard.</Subtitle>

<Description />

<Primary />

<Controls />

---

## Variations

<Stories />

---

## AI Best Practices

> [!IMPORTANT]
>
> - **The board is controlled — apply the move yourself.** `onMove={m => setColumns(applyMove(columns, m))}`. Without that nothing happens on screen, because ordering belongs with the data, not inside a widget.
> - **Set `limit` on the columns that have one.** Capping work in progress is what Kanban is _for_; a board with no limits is a list of lists.
> - **Keep card ids stable.** Drag, selection and the screen-reader announcements all key off them.
> - **Do not add your own drag handlers.** `renderCard` replaces the card's content, not its behaviour — wrapping it in a second drag implementation breaks both.
> - Dragging works from the keyboard: focus a card, Space to grab, arrows to move, Space to drop, Escape to cancel. Every step is announced. This is why the component does not use HTML5 drag-and-drop, which cannot be driven from a keyboard at all.