No Tasks Empty State Block for React

The cards live in the page's state: reload and the board is empty, and Start over empties it without a reload. Nothing is saved or sent. To wire it for real, create the task with your API where the code says so and add the card from the response, with its column and a stable id; the select that moves a card should update the task's column the same way.

Each column always has three rows: its cards, then dashed slots for what is left, and its Add task and the inline field share one grid cell. That is also why a column holds three cards in this demo: a full column says so and its Add task stays in the tab order with the reason in the status line. With a real board, let the column grow and keep the dashed slots for the empty state.

Every card has a select with the three columns; choosing one puts the card at the end of that column and keeps focus on its select, so the move can be repeated from the keyboard. A column that is full shows as unavailable in the list. Dragging is a different feature, with its own pointer handling, and belongs in a full kanban block.

Tab visits each column's Add task and each card's select. Add task opens the field and moves focus into it; Enter adds and keeps the field open for the next task, and Escape closes it and returns focus to Add task. Each Add task button says which column it is for, each card's select says which card it moves, and every change is written to a polite status line ("Added Order paper samples to To do").

The three columns scroll sideways inside the board with snapping, the first one filling most of the width with the next one showing, so nothing makes the page scroll sideways. The message band and its button come under the board.

It is one inline SVG of six dashed slots with a sticky card leaning on them, hidden from screen readers. For each task, up to six, one slot gets a solid copy that fades in over it; reduced motion switches the fade off. The words are the heading and the status line next to it.