Kanban Card Movement

1"use client";
2 
3/* --------------------------------------------------------------------------
4 * KanbanCardMovement — a presentation-only *card movement interaction layer*
5 * for a board. It is NOT a project-management app: the host application owns
6 * the columns, the cards, WIP limits, validation, and persistence. This
7 * component renders that data and owns only the *movement UX* — pointer drag,
8 * touch drag, keyboard pick-up-and-move, a non-drag "Move" menu, drop
9 * validation, drop indicators, and optimistic movement with failure rollback.
10 *
11 * Movement is implemented CLEAN-ROOM on native Pointer events + CSS transforms
12 * (Motion for React is used only for the layout/FLIP reflow when cards settle
13 * into a new slot). There is deliberately **no** third-party drag-and-drop
14 * dependency (no dnd-kit / react-dnd / sortable) so the component stays small
15 * and isolated.
16 *
17 * Accessibility (never drag-only):
18 *  - Every card is a keyboard "pick up → arrow → drop" target (Space/Enter to
19 *    grab, arrows to move between columns + positions, Enter to drop, Escape to
20 *    cancel and return to origin).
21 *  - Every card also exposes an always-available **Move** menu — a full non-drag
22 *    path to move between columns with a mouse, keyboard, or switch device.
23 *  - Origin + destination are announced in a polite live region; focus returns
24 *    to the moved card after any move (drag, keyboard, menu, or rollback).
25 *  - Columns/drop targets are labelled; WIP-limit state is conveyed with text
26 *    (e.g. "Full"), never colour alone; reduced motion drops all transforms.
27 *
28 * Performance:
29 *  - During a pointer drag only the dragged card is repositioned, via a CSS
30 *    transform written straight to its ref inside requestAnimationFrame — there
31 *    is **no** React state update per `pointermove`. The only state that changes
32 *    mid-drag is the drop-slot index, and cards are `React.memo`'d so the rest
33 *    of the board does not re-render as the indicator moves.
34 *  - For very large boards, virtualize each column's card list (e.g.
35 *    `@tanstack/react-virtual`) and feed only the visible cards in as `cards`;
36 *    the movement math here is O(cards) per commit, not per frame, so it stays
37 *    cheap. Keep column card counts bounded or windowed for 60fps drag.
38 *
39 * Clean-room original.
40 * ----------------------------------------------------------------------- */
41 
42import * as React from "react";
43import { motion } from "motion/react";
44 
45// … truncated