Kanban

Drag cards between columns (or use the per-card move buttons revealed on hover/focus — the keyboard path). Every move submits one hidden form with card, column, and index; the server applies the move and re-renders the board. The htmx board swaps via hx-post, the Datastar board via @post with form encoding — same component, same endpoint shape. Each column header also carries an Action add-card slot (a ghost Button wired in the board's dialect) and a Tone status dot. The move form carries a server-issued CSRF token; the bodyless add/reset POSTs enforce same-origin instead, and an add to an unknown column 404s. Each board header has a Reset button that restores the starting layout. Moves apply optimistically (ADR-0041): the card moves the moment you drop it and wears a spinner until the server's re-render lands — the move endpoint deliberately waits 800ms so you can see the pending state. A failed move snaps back with a red flash and a screen-reader alert.

props.Wire = &wire.Action{URL: "/api/kanban/htmx"}                                  // hx-post
props.Wire = &wire.Action{Transport: wire.TransportDatastar, URL: "/api/kanban/datastar"} // data-on:submit="@post(...)"
props.CSRFToken = sessionToken                                                            // hidden input in the move form
col.Action = display.Button(display.ButtonProps{Wire: &wire.Action{Method: wire.MethodPost, URL: "/api/kanban/htmx/add/" + col.ID}}) // mutations set Method
col.Tone = display.KanbanToneBlue // status dot: gray, blue, green, yellow, red, purple