@ceebee/ui 1.8.0 → 1.9.0

package/dist/client.css

@@ -11,3 +11,284 @@
   font-size: var(--cb-text-sm);
   line-height: var(--cb-leading-normal);
 }
+
+/* src/data/board/board.css */
+.cb-board {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-3);
+  font-family: var(--cb-font-sans);
+}
+.cb-board__surface {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cb-space-3);
+  overflow-x: auto;
+  padding-bottom: var(--cb-space-2);
+}
+.cb-board__surface[data-lanes] {
+  overflow-x: visible;
+}
+.cb-board__column {
+  flex: 0 0 auto;
+  inline-size: 17rem;
+  max-inline-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  padding: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-lg);
+  background: var(--cb-bg-subtle);
+}
+.cb-board__surface[data-lanes] .cb-board__column {
+  flex: 1 1 auto;
+  inline-size: 100%;
+}
+.cb-board__column[data-over] {
+  border-color: var(--cb-tone-brand);
+  background: color-mix(in oklch, var(--cb-tone-brand) 8%, var(--cb-bg-subtle));
+}
+.cb-board__column[data-refuses] {
+  background: var(--cb-bg);
+  border-style: dashed;
+}
+.cb-board__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+.cb-board__name {
+  font-size: var(--cb-text-sm);
+  font-weight: 600;
+  color: var(--cb-fg);
+}
+.cb-board__count {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+  padding: 0 var(--cb-space-2);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-bg);
+  border: var(--cb-border-width) solid var(--cb-border);
+}
+.cb-board__count[data-over-limit] {
+  color: var(--cb-tone-warning);
+  border-color: var(--cb-tone-warning);
+}
+.cb-board__over,
+.cb-board__refusal {
+  margin: 0;
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+.cb-board__over {
+  color: var(--cb-tone-warning);
+}
+.cb-board__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  min-block-size: var(--cb-space-8);
+}
+.cb-board__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-1);
+  padding: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-bg);
+  box-shadow: var(--cb-shadow-sm);
+  cursor: grab;
+  transition: box-shadow var(--cb-duration-fast) var(--cb-ease-standard), transform var(--cb-duration-base) var(--cb-ease-standard);
+}
+.cb-board__card:hover {
+  box-shadow: var(--cb-shadow-md);
+}
+.cb-board__card:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-board__card[data-held] {
+  box-shadow: var(--cb-shadow-lg);
+  border-color: var(--cb-tone-brand);
+}
+.cb-board__card[data-dragging] {
+  opacity: 0.4;
+}
+.cb-board__card[data-disabled] {
+  cursor: not-allowed;
+  color: var(--cb-fg-muted);
+  background: var(--cb-bg-subtle);
+  box-shadow: var(--cb-shadow-none);
+}
+.cb-board__card--lift {
+  cursor: grabbing;
+  box-shadow: var(--cb-shadow-lg);
+  transform: rotate(1.5deg);
+}
+.cb-board__title {
+  font-size: var(--cb-text-sm);
+  color: var(--cb-fg);
+  line-height: var(--cb-leading-tight);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.cb-board__meta {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+.cb-board__marker {
+  block-size: var(--cb-space-1);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-tone-brand);
+  list-style: none;
+}
+.cb-board__empty {
+  padding: var(--cb-space-4) var(--cb-space-3);
+  border: var(--cb-border-width) dashed var(--cb-border-strong);
+  border-radius: var(--cb-radius-md);
+  text-align: center;
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+.cb-board__lanes {
+  display: flex;
+  gap: var(--cb-space-1);
+  overflow-x: auto;
+}
+.cb-board__lane {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cb-space-2);
+  min-block-size: var(--cb-control-floor);
+  padding: 0 var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-bg);
+  color: var(--cb-fg-muted);
+  font: inherit;
+  font-size: var(--cb-text-sm);
+  cursor: pointer;
+}
+.cb-board__lane[aria-selected=true] {
+  background: color-mix(in oklch, var(--cb-tone-brand) 12%, var(--cb-bg));
+  border-color: var(--cb-tone-brand);
+  color: var(--cb-fg);
+}
+.cb-board__lane:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-board__undo button {
+  min-block-size: var(--cb-control-floor);
+  padding: 0 var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-bg);
+  color: var(--cb-fg-link);
+  font: inherit;
+  font-size: var(--cb-text-sm);
+  cursor: pointer;
+}
+.cb-board__undo button:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-board__live {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.cb-board__ghost,
+.cb-board__ghost-card {
+  border-radius: var(--cb-radius-md);
+  background: color-mix(in oklch, var(--cb-fg-subtle) 18%, transparent);
+}
+.cb-board__ghost--name {
+  inline-size: var(--cb-space-8);
+  block-size: var(--cb-space-3);
+}
+.cb-board__ghost--count {
+  inline-size: var(--cb-space-4);
+  block-size: var(--cb-space-3);
+}
+.cb-board__ghost-card {
+  block-size: var(--cb-space-8);
+  border: 0;
+  box-shadow: var(--cb-shadow-none);
+}
+@media (prefers-reduced-motion: reduce) {
+  .cb-board__card {
+    transition: none;
+  }
+  .cb-board__card--lift {
+    transform: none;
+  }
+}
+.cb-board[data-motion=off] .cb-board__card {
+  transition: none;
+}
+.cb-board[data-motion=off] .cb-board__card--lift {
+  transform: none;
+}
+@media (forced-colors: active) {
+  .cb-board__column,
+  .cb-board__card {
+    border-color: CanvasText;
+  }
+  .cb-board__marker {
+    background: Highlight;
+  }
+  .cb-board__card[data-held] {
+    outline: var(--cb-focus-width) solid Highlight;
+  }
+}
+.cb-board__card[data-handle] {
+  cursor: default;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: "handle title" ". meta";
+  column-gap: var(--cb-space-2);
+  align-items: start;
+}
+.cb-board__card[data-handle] .cb-board__title {
+  grid-area: title;
+}
+.cb-board__card[data-handle] .cb-board__meta {
+  grid-area: meta;
+}
+.cb-board__handle {
+  grid-area: handle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--cb-space-5);
+  min-block-size: var(--cb-space-5);
+  padding: 0;
+  border: 0;
+  border-radius: var(--cb-radius-sm);
+  background: transparent;
+  color: var(--cb-fg-subtle);
+  font: inherit;
+  line-height: var(--cb-leading-tight);
+  cursor: grab;
+}
+.cb-board__handle:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+.cb-board__handle:disabled {
+  cursor: not-allowed;
+}

package/dist/client.d.ts

@@ -377,6 +377,122 @@ declare const PanZoomCanvas: typeof PanZoomCanvasRoot & {
     Skeleton: typeof PanZoomCanvasSkeleton;
 };
 
+interface BoardSkeletonProps {
+    /** How many columns to stand in for — the same shape the real board will draw. */
+    columns?: number;
+    /** Cards per column. */
+    cards?: number;
+    label?: string;
+}
+/**
+ * The board's placeholder, built from the same geometry as the board itself, so the page does not
+ * reflow when the real columns arrive.
+ */
+declare function BoardSkeleton({ columns, cards, label }: BoardSkeletonProps): react.JSX.Element;
+
+/** One card on the board. `disabled` refuses movement without hiding the card. */
+interface BoardCard {
+    id: string;
+    title: ReactNode;
+    /**
+     * The card's name in an announcement and on the drag handle, when `title` is a node rather than a
+     * string. Without it a node-titled card is announced by its id, which is a uuid read aloud.
+     */
+    label?: string;
+    /** Whatever a person triages by — an owner, an age, a due date, a blocked marker. */
+    meta?: ReactNode;
+    /** A card that cannot move: it stays visible, is not a drag source, and is skipped by the keyboard path. */
+    disabled?: boolean;
+    /** Why it cannot move, announced when a move is attempted on it. */
+    disabledReason?: string;
+}
+/** One column: a state of the workflow, not a category of thing. */
+interface BoardColumn {
+    id: string;
+    name: ReactNode;
+    /**
+     * The column's accessible name, when `name` is a node rather than a string — a header carrying
+     * status tags still has to be nameable. Without it a node-named column has no accessible name.
+     */
+    label?: string;
+    cards: BoardCard[];
+    /** A work-in-progress limit, shown beside the count; exceeding it marks the column, never blocks a move. */
+    limit?: number;
+    /** Shown when the column holds no cards. An empty column must still invite one. */
+    empty?: ReactNode;
+    /** A column that takes no cards — an end state, say. Dropping onto it is refused with `refusal`. */
+    accepts?: boolean;
+    /** Why this column refuses a card, announced and shown on an attempted drop. */
+    refusal?: string;
+}
+/** Where a card is, or is going. `index` is its position within the column, 0-based. */
+interface BoardPosition {
+    columnId: string;
+    index: number;
+}
+/** A move the consumer is asked to validate and apply. */
+interface BoardMove {
+    cardId: string;
+    from: BoardPosition;
+    to: BoardPosition;
+}
+/**
+ * What the consumer answers with. Resolving accepts the move; rejecting — or resolving with a
+ * `refused` reason — rolls the board back and says why.
+ */
+type BoardMoveResult = void | {
+    refused: string;
+};
+/** The shape the pure logic needs: ids and order, no React. */
+interface BoardShape {
+    id: string;
+    cards: {
+        id: string;
+        disabled?: boolean;
+    }[];
+    accepts?: boolean;
+}
+
+interface BoardLabels {
+    pickUp: string;
+    dropped: (card: string, column: string) => string;
+    cancelled: string;
+    refused: (reason: string) => string;
+    undo: string;
+    /** The drag handle's accessible name, when cards carry their own actions. */
+    move: (card: string) => string;
+    undone: string;
+    lanes: string;
+    over: (count: number, limit: number) => string;
+}
+interface BoardProps {
+    columns: BoardColumn[];
+    /**
+     * The one path every move takes, from the pointer and from the keyboard alike. Return nothing to
+     * accept it; return `{ refused }` or reject to roll the board back and say why.
+     */
+    onMove: (move: BoardMove) => BoardMoveResult | Promise<BoardMoveResult>;
+    /** `auto` switches to lanes on a narrow viewport; force either to prove one in a test. */
+    layout?: 'auto' | 'board' | 'lanes';
+    /** What `auto` calls narrow. */
+    phoneQuery?: string;
+    labels?: Partial<BoardLabels>;
+    motion?: boolean;
+    /**
+     * Put the grab on a handle instead of the whole card. Use it whenever a card carries its own
+     * buttons: a card that is itself a control has **presentational children**, so anything
+     * interactive inside it disappears from the accessibility tree. With a handle the card is plain
+     * markup, its buttons stay reachable, and the handle is the one thing that drags and takes the
+     * keyboard.
+     */
+    handle?: boolean;
+    'aria-label'?: string;
+}
+declare function BoardRoot({ columns, onMove, layout, phoneQuery, labels, motion, handle, 'aria-label': ariaLabel, }: BoardProps): react.JSX.Element;
+declare const Board: typeof BoardRoot & {
+    Skeleton: typeof BoardSkeleton;
+};
+
 interface DiagramSkeletonProps {
     label?: string;
 }
@@ -467,4 +583,4 @@ declare const DiagramEditor: typeof DiagramEditorRoot & {
     Skeleton: typeof DiagramSkeleton;
 };
 
-export { type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, Diagram, type DiagramEdge, DiagramEditor, type DiagramEditorProps, type DiagramNode, type DiagramPosition, type DiagramProps, type DiagramRemoval, type DiagramRenameTarget, type DiagramShape, type DiagramSkeletonProps, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { Board, type BoardCard, type BoardColumn, type BoardLabels, type BoardMove, type BoardMoveResult, type BoardPosition, type BoardProps, type BoardShape, type BoardSkeletonProps, type CeebeeAntStyleCache, CeebeeAntStyleProvider, type CeebeeAntStyleProviderProps, Checklist, type ChecklistProps, type ChecklistTask, type Command, CommandPalette, type CommandPaletteProps, DEFAULT_LABELS, Diagram, type DiagramEdge, DiagramEditor, type DiagramEditorProps, type DiagramNode, type DiagramPosition, type DiagramProps, type DiagramRemoval, type DiagramRenameTarget, type DiagramShape, type DiagramSkeletonProps, type DurationToken, type Labels, LabelsProvider, type LabelsProviderProps, Modal, type ModalProps, type MotionHelpers, MotionProvider, type MotionProviderProps, type MotionSettings, type NavItem, type NavSection, type PaletteCommand, PanZoomCanvas, type PanZoomCanvasProps, type PanZoomCanvasSkeletonProps, type RankedCommand, Reveal, type RevealProps, Sidebar, type SidebarProps, type SpringPreset, Stagger, type StaggerProps, StickerGroup, type StickerGroupProps, type StickerGroupSkeletonProps, type StickerItem, ThemeBridge, type ThemeBridgeProps, type ThemeChoice, ThemeProvider, type ThemeProviderProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, TopBar, type TopBarProps, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/client.js

@@ -1,6 +1,7 @@
 "use client";
 import { Modal as Modal$1, Button, theme, ConfigProvider, Progress } from 'antd';
 export * from 'antd';
+import * as React from 'react';
 import { createContext, useId, useRef, useCallback, useInsertionEffect, useLayoutEffect, useState, useEffect, useMemo, useContext, Children } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
@@ -13,6 +14,9 @@ import { X, Minus, Plus, RotateCcw, Minimize2, Maximize2, Search, Check, Chevron
 import { Toast } from '@base-ui/react/toast';
 import { Popover } from '@base-ui/react/popover';
 import { AnimatePresence, motion } from 'motion/react';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCorners, DragOverlay, useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { ReactFlow, ConnectionMode, Background, Controls, applyNodeChanges, MarkerType, Handle, Position } from '@xyflow/react';
 
 // src/lib/cn.ts
@@ -1673,6 +1677,364 @@ function PanZoomCanvasRoot({
   ] });
 }
 var PanZoomCanvas = Object.assign(PanZoomCanvasRoot, { Skeleton: PanZoomCanvasSkeleton });
+function BoardSkeleton({ columns = 3, cards = 3, label = "Loading board" }) {
+  return /* @__PURE__ */ jsx("div", { className: "cb-board", "aria-busy": "true", "aria-label": label, children: /* @__PURE__ */ jsx("div", { className: "cb-board__surface", children: Array.from({ length: columns }, (_, column) => /* @__PURE__ */ jsxs("section", { className: "cb-board__column", children: [
+    /* @__PURE__ */ jsxs("header", { className: "cb-board__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-board__ghost cb-board__ghost cb-board__ghost--name" }),
+      /* @__PURE__ */ jsx("span", { className: "cb-board__ghost cb-board__ghost cb-board__ghost--count" })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { className: "cb-board__list", children: Array.from({ length: cards }, (_2, card) => /* @__PURE__ */ jsx("li", { className: "cb-board__card cb-board__ghost-card" }, card)) })
+  ] }, column)) }) });
+}
+
+// src/data/board/board.math.ts
+function locate(columns, cardId) {
+  for (const column of columns) {
+    const index = column.cards.findIndex((card) => card.id === cardId);
+    if (index !== -1) return { columnId: column.id, index };
+  }
+  return null;
+}
+var columnOf = (columns, columnId) => columns.find((c) => c.id === columnId);
+function canPickUp(columns, cardId) {
+  const at = locate(columns, cardId);
+  if (!at) return false;
+  return !columnOf(columns, at.columnId)?.cards.find((c) => c.id === cardId)?.disabled;
+}
+function refusalFor(columns, move) {
+  if (!canPickUp(columns, move.cardId)) return "this card cannot be moved";
+  const target = columnOf(columns, move.to.columnId);
+  if (!target) return "that column is not on the board";
+  if (target.accepts === false) return "that column does not take cards";
+  return null;
+}
+function isNoop(move) {
+  return move.from.columnId === move.to.columnId && move.from.index === move.to.index;
+}
+function applyMove(columns, move) {
+  const card = columnOf(columns, move.from.columnId)?.cards[move.from.index];
+  if (!card || card.id !== move.cardId) return [...columns];
+  return columns.map((column) => {
+    if (column.id === move.from.columnId && column.id === move.to.columnId) {
+      const rest = column.cards.filter((_, i) => i !== move.from.index);
+      rest.splice(clamp(move.to.index, rest.length), 0, card);
+      return { ...column, cards: rest };
+    }
+    if (column.id === move.from.columnId) {
+      return { ...column, cards: column.cards.filter((_, i) => i !== move.from.index) };
+    }
+    if (column.id === move.to.columnId) {
+      const next = [...column.cards];
+      next.splice(clamp(move.to.index, next.length), 0, card);
+      return { ...column, cards: next };
+    }
+    return column;
+  });
+}
+var clamp = (value, max) => Math.max(0, Math.min(value, max));
+function nextTarget(columns, held, direction) {
+  const at = columns.findIndex((c) => c.id === held.columnId);
+  const current = columns[at];
+  if (!current) return null;
+  if (direction === "up" || direction === "down") {
+    const size = current.cards.length;
+    const index = held.index + (direction === "down" ? 1 : -1);
+    return index < 0 || index > size - 1 ? null : { columnId: held.columnId, index };
+  }
+  const step = direction === "right" ? 1 : -1;
+  for (let i = at + step; i >= 0 && i < columns.length; i += step) {
+    const column = columns[i];
+    if (!column || column.accepts === false) continue;
+    return { columnId: column.id, index: clamp(held.index, column.cards.length) };
+  }
+  return null;
+}
+function columnLoad(column) {
+  const count = column.cards.length;
+  return { count, over: typeof column.limit === "number" && count > column.limit };
+}
+var DEFAULTS = {
+  pickUp: "Picked up. Use the arrow keys to move it, Space to drop, Escape to cancel.",
+  dropped: (card, column) => `${card} moved to ${column}.`,
+  cancelled: "Move cancelled.",
+  refused: (reason) => `Move refused: ${reason}`,
+  undo: "Undo",
+  move: (card) => `Move ${card}`,
+  undone: "Move undone.",
+  lanes: "Column",
+  over: (count, limit) => `${count} of ${limit}, over the limit`
+};
+var textOf = (node, fallback) => typeof node === "string" ? node : fallback;
+function BoardRoot({
+  columns,
+  onMove,
+  layout = "auto",
+  phoneQuery = "(max-width: 640px)",
+  labels,
+  motion: motion3 = true,
+  handle = false,
+  "aria-label": ariaLabel = "Board"
+}) {
+  const text = { ...DEFAULTS, ...labels };
+  const [optimistic, setOptimistic] = React.useState(null);
+  const [held, setHeld] = React.useState(null);
+  const [dragging, setDragging] = React.useState(null);
+  const [announcement, setAnnouncement] = React.useState("");
+  const [undoable, setUndoable] = React.useState(null);
+  const [lane, setLane] = React.useState(0);
+  const view = optimistic ?? columns;
+  React.useEffect(() => setOptimistic(null), [columns]);
+  const narrow = useNarrow(layout === "auto" ? phoneQuery : null);
+  const lanes = layout === "lanes" || layout === "auto" && narrow;
+  const nameOf = (columnId) => {
+    const column = view.find((c) => c.id === columnId);
+    return column?.label ?? textOf(column?.name, columnId);
+  };
+  const commit = React.useCallback(
+    async (move, announceAs) => {
+      if (isNoop(move)) return;
+      const refusal = refusalFor(view, move);
+      if (refusal) {
+        setAnnouncement(text.refused(refusal));
+        return;
+      }
+      const before = view;
+      setOptimistic(applyMove(view, move));
+      setAnnouncement(announceAs ?? text.dropped(titleOf(view, move.cardId), nameOf(move.to.columnId)));
+      try {
+        const result = await onMove(move);
+        if (result && "refused" in result) {
+          setOptimistic(before);
+          setAnnouncement(text.refused(result.refused));
+          return;
+        }
+        setUndoable({ cardId: move.cardId, from: move.to, to: move.from });
+      } catch (e) {
+        setOptimistic(before);
+        setAnnouncement(text.refused(e instanceof Error ? e.message : String(e)));
+      }
+    },
+    [view, onMove, text]
+  );
+  const onCardKeyDown = (event, cardId) => {
+    const DIRECTIONS = {
+      ArrowLeft: "left",
+      ArrowRight: "right",
+      ArrowUp: "up",
+      ArrowDown: "down"
+    };
+    if (event.key === "Escape" && held) {
+      event.preventDefault();
+      setHeld(null);
+      setAnnouncement(text.cancelled);
+      return;
+    }
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      if (!held) {
+        if (!canPickUp(view, cardId)) {
+          const card = view.flatMap((c) => c.cards).find((c) => c.id === cardId);
+          setAnnouncement(text.refused(card?.disabledReason ?? "this card cannot be moved"));
+          return;
+        }
+        const at = locate(view, cardId);
+        if (at) {
+          setHeld({ cardId, at });
+          setAnnouncement(text.pickUp);
+        }
+        return;
+      }
+      const from = locate(view, held.cardId);
+      if (from) void commit({ cardId: held.cardId, from, to: held.at });
+      setHeld(null);
+      return;
+    }
+    const direction = DIRECTIONS[event.key];
+    if (!direction || !held) return;
+    event.preventDefault();
+    const target = nextTarget(view, held.at, direction);
+    if (!target) return;
+    setHeld({ ...held, at: target });
+    setAnnouncement(`${nameOf(target.columnId)}, ${target.index + 1}`);
+  };
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
+  const onDragEnd = (event) => {
+    setDragging(null);
+    const cardId = String(event.active.id);
+    const over = event.over ? String(event.over.id) : null;
+    if (!over) return;
+    const from = locate(view, cardId);
+    if (!from) return;
+    const onColumn = view.find((c) => c.id === over);
+    const to = onColumn ? { columnId: onColumn.id, index: onColumn.cards.length } : locate(view, over);
+    if (to) void commit({ cardId, from, to });
+  };
+  const laneColumn = view[Math.min(lane, Math.max(view.length - 1, 0))];
+  const shown = lanes ? laneColumn ? [laneColumn] : [] : view;
+  return /* @__PURE__ */ jsxs("div", { className: "cb-board", "data-motion": motion3 ? void 0 : "off", children: [
+    lanes ? /* @__PURE__ */ jsx("div", { className: "cb-board__lanes", role: "tablist", "aria-label": text.lanes, children: view.map((column, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": i === lane,
+        className: "cb-board__lane",
+        onClick: () => setLane(i),
+        children: [
+          column.name,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "cb-board__count", children: column.cards.length })
+        ]
+      },
+      column.id
+    )) }) : null,
+    /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCorners,
+        onDragStart: (e) => setDragging(String(e.active.id)),
+        onDragCancel: () => setDragging(null),
+        onDragEnd,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "cb-board__surface", role: "group", "aria-label": ariaLabel, "data-lanes": lanes ? "" : void 0, children: shown.map((column) => /* @__PURE__ */ jsx(Column, { column, held, onCardKeyDown, labels: text, handle }, column.id)) }),
+          /* @__PURE__ */ jsx(DragOverlay, { children: dragging ? /* @__PURE__ */ jsx("div", { className: "cb-board__card cb-board__card--lift", children: cardTitle(view, dragging) }) : null })
+        ]
+      }
+    ),
+    undoable ? /* @__PURE__ */ jsx("div", { className: "cb-board__undo", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const move = undoable;
+          setUndoable(null);
+          void commit(move, text.undone);
+        },
+        children: text.undo
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "cb-board__live", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+}
+var cardTitle = (columns, cardId) => columns.flatMap((c) => c.cards).find((c) => c.id === cardId)?.title ?? null;
+var titleOf = (columns, cardId) => {
+  const card = columns.flatMap((c) => c.cards).find((c) => c.id === cardId);
+  return card?.label ?? textOf(card?.title, cardId);
+};
+function Column({
+  column,
+  held,
+  onCardKeyDown,
+  labels,
+  handle
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: column.id });
+  const load = columnLoad(column);
+  const holding = held?.at.columnId === column.id;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: setNodeRef,
+      className: "cb-board__column",
+      "data-over": isOver ? "" : void 0,
+      "data-refuses": column.accepts === false ? "" : void 0,
+      "aria-label": column.label ?? (typeof column.name === "string" ? column.name : void 0),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "cb-board__head", children: [
+          /* @__PURE__ */ jsx("span", { className: "cb-board__name", children: column.name }),
+          /* @__PURE__ */ jsx("span", { className: "cb-board__count", "data-over-limit": load.over ? "" : void 0, children: typeof column.limit === "number" ? `${load.count}/${column.limit}` : load.count })
+        ] }),
+        /* @__PURE__ */ jsx(SortableContext, { items: column.cards.map((c) => c.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs("ol", { className: "cb-board__list", children: [
+          column.cards.map((card, index) => /* @__PURE__ */ jsx(
+            Card,
+            {
+              card,
+              held: held?.cardId === card.id,
+              marker: holding && held?.at.index === index,
+              onKeyDown: onCardKeyDown,
+              handle,
+              labels
+            },
+            card.id
+          )),
+          holding && held.at.index >= column.cards.length ? /* @__PURE__ */ jsx("li", { className: "cb-board__marker", "aria-hidden": true }) : null
+        ] }) }),
+        column.cards.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cb-board__empty", children: column.empty ?? null }) : null,
+        column.accepts === false && column.refusal ? /* @__PURE__ */ jsx("p", { className: "cb-board__refusal", children: column.refusal }) : null,
+        load.over && typeof column.limit === "number" ? /* @__PURE__ */ jsx("p", { className: "cb-board__over", children: labels.over(load.count, column.limit) }) : null
+      ]
+    }
+  );
+}
+function Card({
+  card,
+  held,
+  marker,
+  onKeyDown,
+  handle,
+  labels
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: card.id,
+    disabled: card.disabled
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    marker ? /* @__PURE__ */ jsx("li", { className: "cb-board__marker", "aria-hidden": true }) : null,
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref: setNodeRef,
+        style: { transform: CSS.Transform.toString(transform), transition },
+        className: "cb-board__card",
+        "data-dragging": isDragging ? "" : void 0,
+        "data-held": held ? "" : void 0,
+        "data-disabled": card.disabled ? "" : void 0,
+        "data-handle": handle ? "" : void 0,
+        ...handle ? {} : {
+          ...attributes,
+          ...card.disabled ? {} : listeners,
+          tabIndex: 0,
+          "aria-roledescription": "draggable card",
+          "aria-disabled": card.disabled || void 0,
+          onKeyDown: (event) => onKeyDown(event, card.id)
+        },
+        children: [
+          handle ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "cb-board__handle",
+              ...attributes,
+              ...card.disabled ? {} : listeners,
+              "aria-label": labels.move(card.label ?? (typeof card.title === "string" ? card.title : card.id)),
+              "aria-roledescription": "drag handle",
+              "aria-disabled": card.disabled || void 0,
+              disabled: card.disabled,
+              onKeyDown: (event) => onKeyDown(event, card.id),
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u283F" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "cb-board__title", children: card.title }),
+          card.meta ? /* @__PURE__ */ jsx("div", { className: "cb-board__meta", children: card.meta }) : null
+        ]
+      }
+    )
+  ] });
+}
+function useNarrow(query) {
+  const [narrow, setNarrow] = React.useState(false);
+  React.useEffect(() => {
+    if (!query || typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const read = () => setNarrow(mql.matches);
+    read();
+    mql.addEventListener("change", read);
+    return () => mql.removeEventListener("change", read);
+  }, [query]);
+  return narrow;
+}
+var Board = Object.assign(BoardRoot, { Skeleton: BoardSkeleton });
 function DiagramNodeView({ data, selected }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1980,4 +2342,4 @@ function DiagramEditorRoot(props) {
 }
 var DiagramEditor = Object.assign(DiagramEditorRoot, { Skeleton: DiagramSkeleton });
 
-export { CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, Diagram, DiagramEditor, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };
+export { Board, CeebeeAntStyleProvider, Checklist, CommandPalette, DEFAULT_LABELS, Diagram, DiagramEditor, LabelsProvider, Modal, MotionProvider, PanZoomCanvas, Reveal, Sidebar, Stagger, StickerGroup, ThemeBridge, ThemeProvider, ToastProvider, TopBar, createCeebeeAntStyleCache, extractCeebeeAntStyles, filterCommands, groupCommands, rankCommand, useLabels, useMotionSettings, useTheme, useToast };

package/dist/styles.css

@@ -1360,6 +1360,326 @@ svg.react-flow__connectionline {
   line-height: var(--cb-leading-normal);
 }
 
+/* data/board/board.css */
+/* Board — columns of cards a person moves by pointer or by keyboard.
+   Every value is a Token. The drag lift, the gap animation and the drop marker all have a
+   reduced-motion rendering: transform drops, the marker stays, so a move is never invisible. */
+
+.cb-board {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-3);
+  font-family: var(--cb-font-sans);
+}
+
+.cb-board__surface {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cb-space-3);
+  overflow-x: auto;
+  padding-bottom: var(--cb-space-2);
+}
+
+.cb-board__surface[data-lanes] {
+  overflow-x: visible;
+}
+
+/* ── column ── */
+
+.cb-board__column {
+  flex: 0 0 auto;
+  inline-size: 17rem;
+  max-inline-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  padding: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-lg);
+  background: var(--cb-bg-subtle);
+}
+
+.cb-board__surface[data-lanes] .cb-board__column {
+  flex: 1 1 auto;
+  inline-size: 100%;
+}
+
+/* The column a pointer is over: named by a ring rather than a fill, so a tinted card keeps its tone. */
+.cb-board__column[data-over] {
+  border-color: var(--cb-tone-brand);
+  background: color-mix(in oklch, var(--cb-tone-brand) 8%, var(--cb-bg-subtle));
+}
+
+/* A column that takes no cards says so before a drop is attempted. */
+.cb-board__column[data-refuses] {
+  background: var(--cb-bg);
+  border-style: dashed;
+}
+
+.cb-board__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+
+.cb-board__name {
+  font-size: var(--cb-text-sm);
+  font-weight: 600;
+  color: var(--cb-fg);
+}
+
+.cb-board__count {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+  padding: 0 var(--cb-space-2);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-bg);
+  border: var(--cb-border-width) solid var(--cb-border);
+}
+
+/* Over a WIP limit is marked, never blocked — the board reports, the consumer decides. */
+.cb-board__count[data-over-limit] {
+  color: var(--cb-tone-warning);
+  border-color: var(--cb-tone-warning);
+}
+
+.cb-board__over,
+.cb-board__refusal {
+  margin: 0;
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+.cb-board__over { color: var(--cb-tone-warning); }
+
+/* ── cards ── */
+
+.cb-board__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  min-block-size: var(--cb-space-8);
+}
+
+.cb-board__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-1);
+  padding: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-bg);
+  box-shadow: var(--cb-shadow-sm);
+  cursor: grab;
+  transition: box-shadow var(--cb-duration-fast) var(--cb-ease-standard),
+    transform var(--cb-duration-base) var(--cb-ease-standard);
+}
+
+.cb-board__card:hover {
+  box-shadow: var(--cb-shadow-md);
+}
+
+.cb-board__card:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* Held by the keyboard: the same lift a pointer drag gives, so both paths look alike. */
+.cb-board__card[data-held] {
+  box-shadow: var(--cb-shadow-lg);
+  border-color: var(--cb-tone-brand);
+}
+
+.cb-board__card[data-dragging] {
+  opacity: 0.4;
+}
+
+.cb-board__card[data-disabled] {
+  cursor: not-allowed;
+  color: var(--cb-fg-muted);
+  background: var(--cb-bg-subtle);
+  box-shadow: var(--cb-shadow-none);
+}
+
+/* What follows the pointer. It is out of flow, so it carries the lift on its own. */
+.cb-board__card--lift {
+  cursor: grabbing;
+  box-shadow: var(--cb-shadow-lg);
+  transform: rotate(1.5deg);
+}
+
+.cb-board__title {
+  font-size: var(--cb-text-sm);
+  color: var(--cb-fg);
+  line-height: var(--cb-leading-tight);
+  /* A long title clamps rather than stretching its own card and the cards beside it. The full name
+     belongs in a tooltip the consumer supplies around the title. */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.cb-board__meta {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+/* Where the held card would land. It is the one affordance that must survive reduced motion. */
+.cb-board__marker {
+  block-size: var(--cb-space-1);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-tone-brand);
+  list-style: none;
+}
+
+.cb-board__empty {
+  padding: var(--cb-space-4) var(--cb-space-3);
+  border: var(--cb-border-width) dashed var(--cb-border-strong);
+  border-radius: var(--cb-radius-md);
+  text-align: center;
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+/* ── lanes: the phone rendering, chosen rather than a squeezed board ── */
+
+.cb-board__lanes {
+  display: flex;
+  gap: var(--cb-space-1);
+  overflow-x: auto;
+}
+
+.cb-board__lane {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cb-space-2);
+  min-block-size: var(--cb-control-floor);
+  padding: 0 var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-bg);
+  color: var(--cb-fg-muted);
+  font: inherit;
+  font-size: var(--cb-text-sm);
+  cursor: pointer;
+}
+
+.cb-board__lane[aria-selected='true'] {
+  background: color-mix(in oklch, var(--cb-tone-brand) 12%, var(--cb-bg));
+  border-color: var(--cb-tone-brand);
+  color: var(--cb-fg);
+}
+
+.cb-board__lane:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* ── undo ── */
+
+.cb-board__undo button {
+  min-block-size: var(--cb-control-floor);
+  padding: 0 var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-bg);
+  color: var(--cb-fg-link);
+  font: inherit;
+  font-size: var(--cb-text-sm);
+  cursor: pointer;
+}
+
+.cb-board__undo button:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* The announcement is for a screen reader, not the page. */
+.cb-board__live {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* ── skeleton ── */
+
+.cb-board__ghost,
+.cb-board__ghost-card {
+  border-radius: var(--cb-radius-md);
+  background: color-mix(in oklch, var(--cb-fg-subtle) 18%, transparent);
+}
+
+.cb-board__ghost--name { inline-size: var(--cb-space-8); block-size: var(--cb-space-3); }
+.cb-board__ghost--count { inline-size: var(--cb-space-4); block-size: var(--cb-space-3); }
+.cb-board__ghost-card { block-size: var(--cb-space-8); border: 0; box-shadow: var(--cb-shadow-none); }
+
+/* ── renderings that are not decoration ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-board__card { transition: none; }
+  /* The lift's tilt is decoration; the shadow that says "this one is moving" stays. */
+  .cb-board__card--lift { transform: none; }
+}
+
+.cb-board[data-motion='off'] .cb-board__card { transition: none; }
+.cb-board[data-motion='off'] .cb-board__card--lift { transform: none; }
+
+@media (forced-colors: active) {
+  .cb-board__column,
+  .cb-board__card { border-color: CanvasText; }
+  .cb-board__marker { background: Highlight; }
+  .cb-board__card[data-held] { outline: var(--cb-focus-width) solid Highlight; }
+}
+
+/* A card that carries its own buttons puts the grab on a handle instead of the card. A card that is
+   itself a control has presentational children, so anything interactive inside it leaves the
+   accessibility tree — the handle is what keeps those buttons reachable. */
+.cb-board__card[data-handle] {
+  cursor: default;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: 'handle title' '. meta';
+  column-gap: var(--cb-space-2);
+  align-items: start;
+}
+
+.cb-board__card[data-handle] .cb-board__title { grid-area: title; }
+.cb-board__card[data-handle] .cb-board__meta { grid-area: meta; }
+
+.cb-board__handle {
+  grid-area: handle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--cb-space-5);
+  min-block-size: var(--cb-space-5);
+  padding: 0;
+  border: 0;
+  border-radius: var(--cb-radius-sm);
+  background: transparent;
+  color: var(--cb-fg-subtle);
+  font: inherit;
+  line-height: var(--cb-leading-tight);
+  cursor: grab;
+}
+
+.cb-board__handle:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+.cb-board__handle:disabled { cursor: not-allowed; }
+
 /* data/diagram/diagram.css */
 /* Diagram and DiagramEditor run on React Flow. Its base stylesheet (bundled before this file) owns layout and
    reads its colours from `--xy-*` custom properties; here those are pointed at Tokens, and the node React

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {
@@ -55,6 +55,9 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "2.1.2",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@xyflow/react": "12.11.6",
     "antd": "6.6.1",
     "dayjs": "1.11.18"