@charcuterie/ui 3.0.0 → 3.1.0

package/README.md

@@ -38,6 +38,16 @@ The router is **injected** rather than depended on — `RouterLinkProvider` at t
 with `@charcuterie/ui/react-router` as an optional subpath adapter and a plain `<a>` when
 nothing is provided. Recipe: **Guides/Routing** in Storybook.
 
+**`Board` is the first component whose own operation is a write**, and the first to declare
+two nested containers. Lanes with honest counts, priority bars, per-card footers for a live
+run line, real empty states and a `+ n more` overflow — the board's own box decides how many
+lanes are on screen, each lane's box decides whether a card is two lines, one line, or a card.
+There is **no media query in it**, because a lane in a three-up board is ~500px on a maximised
+1600px window and a browser at 175% zoom reports ~860 effective pixels for a 1500px one.
+Moving a card takes **no drag-and-drop dependency**: one handle per card, a `Menu` of the
+other lanes as the primary path, Pointer-Event dragging at 1.4 KB gzip beside it
+([decision](../../docs/decisions/2026-08-19-the-board-owns-the-move-and-takes-no-drag-and-drop-dependency.md)).
+
 **The unified app shell adds four**: `Shell`, `Header`, `Rail`, `Main` — the fleet's largest
 single duplication, where ten of twelve UI repos hand-roll the page chrome and three of them
 have a file named `AppShell.tsx` (two of those headers are a *byte-identical* class string,

package/dist/Badge/Badge.d.ts

@@ -1,9 +1,25 @@
-import type { IntentName } from "@charcuterie/tokens";
+import type { CategoricalIndex, IntentName } from "@charcuterie/tokens";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import type { BadgeSize } from "../controlStyles.ts";
 import type { IntentAppearance } from "../intentStyles.ts";
 export type BadgeProps = ComponentPropsWithRef<"span"> & {
     appearance?: Exclude<IntentAppearance, "ghost">;
+    /**
+     * A numbered, **non-semantic** colour: 1–10, no meaning attached.
+     *
+     * For a badge whose colour the user picked — a Docket label, a
+     * project, a chart series — where `intent` would be a lie. A
+     * "Homelab" label is not a `danger`, and the palette is curated
+     * and contrast-gated in both schemes precisely so the user cannot
+     * pick one that is unreadable. `getCategoricalIndex(key)` from
+     * `@charcuterie/tokens` is the stable fallback for a row nobody
+     * has chosen a colour for yet.
+     *
+     * Mutually exclusive with `intent` **in the type**: a badge is one
+     * colour, and passing both is a question with no answer rather
+     * than a precedence rule to remember.
+     */
+    categorical?: CategoricalIndex;
     children: ReactNode;
     icon?: ReactNode;
     intent?: IntentName;
@@ -19,7 +35,11 @@ export type BadgeProps = ComponentPropsWithRef<"span"> & {
      */
     overflow?: "truncate" | "wrap";
     size?: BadgeSize;
-};
+} & ({
+    categorical?: never;
+} | {
+    intent?: never;
+});
 /**
  * Four repos, and rip-deck declares the **identical** `TONE_CLASS`
  * map twice — `VerdictBadge.tsx` and `TowerAlerts.tsx`, same five
@@ -44,11 +64,21 @@ export type BadgeProps = ComponentPropsWithRef<"span"> & {
  * asserts the text is queryable, which is what an agent actually
  * matches on.
  *
+ * **`intent` or `categorical`, never both.** The two families are
+ * both seven roles wide and both paint a pill, and they answer
+ * opposite questions: an intent is a *claim* the design system
+ * makes (`danger` says what happens if you press the thing), and a
+ * categorical index is a claim about nothing at all — it is a
+ * colour a user picked for a label. Which is why the exclusivity is
+ * in the type rather than in a precedence rule: a badge is one
+ * colour, and `<Badge intent="danger" categorical={3}>` is a
+ * question with no answer.
+ *
  * **It is capped at its container.** `shrink-0` and
  * `whitespace-nowrap` alone let a long label paint straight through
  * the neighbouring column — no clipping, no error, just a pill lying
  * across the next cell. `max-inline-size: 100%` is what stops it, and
  * `overflow` is what happens next.
  */
-export declare const Badge: ({ appearance, children, className, icon, intent, overflow, size, title, ...spanProps }: BadgeProps) => ReactNode;
+export declare const Badge: ({ appearance, categorical, children, className, icon, intent, overflow, size, title, ...spanProps }: BadgeProps) => ReactNode;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAK1D,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;IAC/C,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,KAAK,GAAI,wFAUnB,UAAU,KAAG,SAyDf,CAAA"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,UAAU,EACX,MAAM,qBAAqB,CAAA;AAC5B,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAK1D,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,GAAG;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAA;IAC/C;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAA;CAQjB,GAAG,CAAC;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAA;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,KAAK,GAAI,qGAWnB,UAAU,KAAG,SAiEf,CAAA"}

package/dist/Badge/Badge.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CATEGORICAL_APPEARANCE_CLASS } from "../categoricalStyles.js";
 import { BADGE_SIZE_CLASS } from "../controlStyles.js";
 import { INTENT_APPEARANCE_CLASS } from "../intentStyles.js";
 import { toClassName } from "../toClassName.js";
@@ -27,13 +28,23 @@ import { useIsTextClipped } from "./useIsTextClipped.js";
  * asserts the text is queryable, which is what an agent actually
  * matches on.
  *
+ * **`intent` or `categorical`, never both.** The two families are
+ * both seven roles wide and both paint a pill, and they answer
+ * opposite questions: an intent is a *claim* the design system
+ * makes (`danger` says what happens if you press the thing), and a
+ * categorical index is a claim about nothing at all — it is a
+ * colour a user picked for a label. Which is why the exclusivity is
+ * in the type rather than in a precedence rule: a badge is one
+ * colour, and `<Badge intent="danger" categorical={3}>` is a
+ * question with no answer.
+ *
  * **It is capped at its container.** `shrink-0` and
  * `whitespace-nowrap` alone let a long label paint straight through
  * the neighbouring column — no clipping, no error, just a pill lying
  * across the next cell. `max-inline-size: 100%` is what stops it, and
  * `overflow` is what happens next.
  */
-export const Badge = ({ appearance = "soft", children, className, icon, intent = "neutral", overflow = "truncate", size = "md", title, ...spanProps }) => {
+export const Badge = ({ appearance = "soft", categorical, children, className, icon, intent = "neutral", overflow = "truncate", size = "md", title, ...spanProps }) => {
     const [labelRef, clippedText] = useIsTextClipped();
     return (_jsxs("span", { ...spanProps, className: toClassName("inline-flex shrink-0 items-center rounded-full border font-medium", 
         // The cap. Without it every other rule here is decoration.
@@ -42,7 +53,14 @@ export const Badge = ({ appearance = "soft", children, className, icon, intent =
                 // rendering fault rather than a badge, so the wrapping
                 // pill relaxes to a rounded rectangle.
                 "rounded-2xl"
-            : "rounded-full", BADGE_SIZE_CLASS[size], INTENT_APPEARANCE_CLASS[intent][appearance], className), 
+            : "rounded-full", BADGE_SIZE_CLASS[size], 
+        // A ternary rather than a merged map: the two are indexed
+        // by different keys, and `undefined` is the only honest
+        // discriminant once the type has already refused the case
+        // where both arrive.
+        categorical === undefined
+            ? INTENT_APPEARANCE_CLASS[intent][appearance]
+            : CATEGORICAL_APPEARANCE_CLASS[categorical][appearance], className), 
         // Only when something is actually hidden. A tooltip on every
         // short pill in a bay list is noise, and a `title` that
         // duplicates fully-visible text is a screen-reader duplicate

package/dist/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAqBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,UAAU,GAAG,MAAM,EACnB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACD,EAAa,EAAE;IAC1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,gBAAgB,EAAE,CAAA;IAElD,OAAO,CACL,mBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,mEAAmE;QACnE,2DAA2D;QAC3D,YAAY,EACZ,QAAQ,KAAK,MAAM;YACjB,CAAC,CAAC,mDAAmD;gBACnD,uDAAuD;gBACvD,uCAAuC;gBACvC,aAAa;YACf,CAAC,CAAC,cAAc,EAClB,gBAAgB,CAAC,IAAI,CAAC,EACtB,uBAAuB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,EAC3C,SAAS,CACV;QACD,6DAA6D;QAC7D,wDAAwD;QACxD,6DAA6D;QAC7D,eAAe;QACf,KAAK,EAAE,KAAK,IAAI,WAAW,aAE1B,IAAI,CAAC,CAAC,CAAC,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,mBAAmB,YAE5B,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,EAYR,eACE,SAAS,EACP,QAAQ,KAAK,MAAM;oBACjB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,yDAAyD,EAE/D,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACJ,IACF,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,4BAA4B,EAAE,MAAM,yBAAyB,CAAA;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AA4CxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EACpB,UAAU,GAAG,MAAM,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,GAAG,SAAS,EAClB,QAAQ,GAAG,UAAU,EACrB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,GAAG,SAAS,EACD,EAAa,EAAE;IAC1B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,gBAAgB,EAAE,CAAA;IAElD,OAAO,CACL,mBACM,SAAS,EACb,SAAS,EAAE,WAAW,CACpB,mEAAmE;QACnE,2DAA2D;QAC3D,YAAY,EACZ,QAAQ,KAAK,MAAM;YACjB,CAAC,CAAC,mDAAmD;gBACnD,uDAAuD;gBACvD,uCAAuC;gBACvC,aAAa;YACf,CAAC,CAAC,cAAc,EAClB,gBAAgB,CAAC,IAAI,CAAC;QACtB,0DAA0D;QAC1D,wDAAwD;QACxD,0DAA0D;QAC1D,qBAAqB;QACrB,WAAW,KAAK,SAAS;YACvB,CAAC,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC;YAC7C,CAAC,CAAC,4BAA4B,CAAC,WAAW,CAAC,CACvC,UAAU,CACX,EACL,SAAS,CACV;QACD,6DAA6D;QAC7D,wDAAwD;QACxD,6DAA6D;QAC7D,eAAe;QACf,KAAK,EAAE,KAAK,IAAI,WAAW,aAE1B,IAAI,CAAC,CAAC,CAAC,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,mBAAmB,YAE5B,IAAI,GACA,CACR,CAAC,CAAC,CAAC,IAAI,EAYR,eACE,SAAS,EACP,QAAQ,KAAK,MAAM;oBACjB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,yDAAyD,EAE/D,GAAG,EAAE,QAAQ,YAEZ,QAAQ,GACJ,IACF,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/Board/Board.d.ts

@@ -0,0 +1,119 @@
+import type { ReactNode } from "react";
+import type { BoardLane } from "./BoardLaneList.tsx";
+export type BoardMove = {
+    /** Where the card was, in `fromLane.items`. */
+    fromIndex: number;
+    fromLaneKey: string;
+    itemKey: string;
+    /**
+     * Where it goes, **already corrected for its own removal** — so a
+     * consumer's handler is `splice(fromIndex, 1)` then
+     * `splice(toIndex, 0, item)` with no arithmetic of its own. A
+     * within-lane move quoted against the un-spliced list is one too
+     * high for every position below the origin, and that off-by-one is
+     * the single most common bug in a hand-rolled board.
+     */
+    toIndex: number;
+    toLaneKey: string;
+};
+export type BoardProps = {
+    className?: string;
+    /**
+     * What level the lane headings are. The caller's, because only the
+     * caller knows what the board sits under: a board directly below a
+     * page `<h1>` wants `2`, and one inside an already-deep section
+     * wants `4`. Getting it wrong is an axe `heading-order` failure and
+     * a broken screen-reader outline.
+     */
+    headingLevel?: 2 | 3 | 4 | 5;
+    /** The board's accessible name. Required — it is a landmark. */
+    label: string;
+    lanes: readonly BoardLane[];
+    /**
+     * What the move handle shows instead of the word "Move". The
+     * library ships no icons and no symbol glyphs in a default —
+     * they render as nothing where the font lacks them, which
+     * includes this sandbox's chromium, the kiosk image and the
+     * ePaper build — so the default is a word and an app that owns a
+     * glyph set passes one. On a dense board it is worth ~55px a row.
+     */
+    moveIcon?: ReactNode;
+    /**
+     * Which lane is on screen below `cq-lg`. **Initial only** — the
+     * segmented control owns it from then on, matching every other
+     * uncontrolled control in this library.
+     */
+    narrowLaneKey?: string;
+    /**
+     * The one thing that makes a board a board. **Absent means
+     * read-only**: no handles, no menus, no drag, and nothing
+     * announcing itself. A board with no `onMove` is a legitimate
+     * thing — a dashboard, an ePaper render — and it should not be
+     * carrying affordances that do nothing.
+     */
+    onMove?: (move: BoardMove) => void;
+};
+/**
+ * Lanes of cards, sized by their **container**, moved by keyboard or
+ * by pointer.
+ *
+ * ### The container rule, which is the whole point
+ *
+ * There is no media query in this component, and adding one would be
+ * a defect rather than a shortcut. Two facts make window width
+ * useless here and they compound:
+ *
+ *  - **A lane in a three-up board is narrow on any monitor.** Three
+ *    lanes across 1600px is ~500px each, which is a phone's worth of
+ *    room, on a 4K display, in a maximised window.
+ *  - **The owner browses zoomed in.** A 1500px window at 175% zoom
+ *    is ~860 effective CSS pixels, so the number a media query reads
+ *    is not the number of pixels anything actually has.
+ *
+ * So there are **two nested containers**, and they answer two
+ * different questions:
+ *
+ *  - The board's own box decides *how many lanes are on screen* —
+ *    three-up at `cq-lg` and wider, one lane plus a segmented
+ *    control below it.
+ *  - Each lane's list decides *what shape a card is* — two lines,
+ *    one line, or its own card. See `BoardCard`.
+ *
+ * Both are `@container`, and neither is queried by the element that
+ * declares it, because a container query matches descendants only.
+ *
+ * ### There is no horizontal scroll, at any width
+ *
+ * *"No horizontal scroll, ever. The board becomes a segmented
+ * control, never a pan surface."* A board that pans sideways hides
+ * lanes behind a gesture with no affordance, and on a trackpad it
+ * fights the browser's own back-navigation. So the narrow layout
+ * shows one lane at a time and names the others in a `radiogroup`
+ * that says how many cards each holds.
+ *
+ * ### Moving a card is a first-class operation, and it is not a drag
+ *
+ * The move is a **`Menu` on every card**, listing the other lanes.
+ * That is the primary path, not an accessibility fallback: it is the
+ * only one that works from the keyboard, the only one a screen
+ * reader can drive, and the only one available in the Narrow View
+ * where the other lanes are not on screen to drop onto. Pointer
+ * dragging is layered on the same handle and commits through the
+ * same callback.
+ *
+ * **No drag-and-drop dependency is taken.** The reasoning — licence,
+ * provenance, bundle cost, and what a general DnD library would
+ * actually be buying for one card going into one lane — is in
+ * [the decision](../../../docs/decisions/2026-08-19-the-board-owns-the-move-and-takes-no-drag-and-drop-dependency.md).
+ *
+ * ### What this component deliberately does not do
+ *
+ * Lanes, counts, truncation, empty states and the move; **not**
+ * data, not virtualisation, and not the cross-lane "needs attention"
+ * summary. A board is a view of a list the consumer owns, the lane
+ * truncates by construction so there is nothing to virtualise, and a
+ * panel that reaches across every lane is not a lane — it is an
+ * `Alert` above the board, which is how the docs page composes it.
+ */
+export declare const Board: ({ className, headingLevel, label, lanes, moveIcon, narrowLaneKey, onMove, }: BoardProps) => ReactNode;
+//# sourceMappingURL=Board.d.ts.map

package/dist/Board/Board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.d.ts","sourceRoot":"","sources":["../../src/Board/Board.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AASpD,MAAM,MAAM,SAAS,GAAG;IACtB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;;OAOG;IACH,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACnC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,eAAO,MAAM,KAAK,GAAI,6EAQnB,UAAU,KAAG,SAgMf,CAAA"}

package/dist/Board/Board.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { BoardLaneList } from "./BoardLaneList.js";
+import { describeMove, getIsMoveMeaningful, toSettledIndex, } from "./boardMove.js";
+import { useBoardDrag } from "./useBoardDrag.js";
+/**
+ * Lanes of cards, sized by their **container**, moved by keyboard or
+ * by pointer.
+ *
+ * ### The container rule, which is the whole point
+ *
+ * There is no media query in this component, and adding one would be
+ * a defect rather than a shortcut. Two facts make window width
+ * useless here and they compound:
+ *
+ *  - **A lane in a three-up board is narrow on any monitor.** Three
+ *    lanes across 1600px is ~500px each, which is a phone's worth of
+ *    room, on a 4K display, in a maximised window.
+ *  - **The owner browses zoomed in.** A 1500px window at 175% zoom
+ *    is ~860 effective CSS pixels, so the number a media query reads
+ *    is not the number of pixels anything actually has.
+ *
+ * So there are **two nested containers**, and they answer two
+ * different questions:
+ *
+ *  - The board's own box decides *how many lanes are on screen* —
+ *    three-up at `cq-lg` and wider, one lane plus a segmented
+ *    control below it.
+ *  - Each lane's list decides *what shape a card is* — two lines,
+ *    one line, or its own card. See `BoardCard`.
+ *
+ * Both are `@container`, and neither is queried by the element that
+ * declares it, because a container query matches descendants only.
+ *
+ * ### There is no horizontal scroll, at any width
+ *
+ * *"No horizontal scroll, ever. The board becomes a segmented
+ * control, never a pan surface."* A board that pans sideways hides
+ * lanes behind a gesture with no affordance, and on a trackpad it
+ * fights the browser's own back-navigation. So the narrow layout
+ * shows one lane at a time and names the others in a `radiogroup`
+ * that says how many cards each holds.
+ *
+ * ### Moving a card is a first-class operation, and it is not a drag
+ *
+ * The move is a **`Menu` on every card**, listing the other lanes.
+ * That is the primary path, not an accessibility fallback: it is the
+ * only one that works from the keyboard, the only one a screen
+ * reader can drive, and the only one available in the Narrow View
+ * where the other lanes are not on screen to drop onto. Pointer
+ * dragging is layered on the same handle and commits through the
+ * same callback.
+ *
+ * **No drag-and-drop dependency is taken.** The reasoning — licence,
+ * provenance, bundle cost, and what a general DnD library would
+ * actually be buying for one card going into one lane — is in
+ * [the decision](../../../docs/decisions/2026-08-19-the-board-owns-the-move-and-takes-no-drag-and-drop-dependency.md).
+ *
+ * ### What this component deliberately does not do
+ *
+ * Lanes, counts, truncation, empty states and the move; **not**
+ * data, not virtualisation, and not the cross-lane "needs attention"
+ * summary. A board is a view of a list the consumer owns, the lane
+ * truncates by construction so there is nothing to virtualise, and a
+ * panel that reaches across every lane is not a lane — it is an
+ * `Alert` above the board, which is how the docs page composes it.
+ */
+export const Board = ({ className, headingLevel = 3, label, lanes, moveIcon, narrowLaneKey, onMove, }) => {
+    const [visibleLaneKey, setVisibleLaneKey] = useState(narrowLaneKey ?? lanes[0]?.key ?? "");
+    /**
+     * What the live region last said. A string rather than a boolean
+     * plus a lookup, because the region's job is to have the sentence
+     * ready the moment it changes — and because a move announced as
+     * "moved" with no destination tells a screen-reader user strictly
+     * less than watching the card land tells everyone else.
+     */
+    const [moveAnnouncement, setMoveAnnouncement] = useState("");
+    const commitMove = useCallback((move) => {
+        const toLane = lanes.find((one) => one.key === move.toLaneKey);
+        if (!toLane) {
+            return;
+        }
+        const item = lanes
+            .flatMap((one) => one.items)
+            .find((one) => one.key === move.itemKey);
+        setMoveAnnouncement(describeMove({
+            index: move.toIndex,
+            laneLabel: toLane.label,
+            laneSize: move.fromLaneKey === move.toLaneKey
+                ? (toLane.itemCount ?? toLane.items.length)
+                : (toLane.itemCount ?? toLane.items.length) +
+                    1,
+            title: item?.title ?? move.itemKey,
+        }));
+        onMove?.(move);
+    }, [lanes, onMove]);
+    const { drag, registerLane, startDrag } = useBoardDrag({
+        onDrop: (origin, target) => {
+            if (!getIsMoveMeaningful({
+                fromIndex: origin.fromIndex,
+                fromLaneKey: origin.fromLaneKey,
+                toIndex: target.index,
+                toLaneKey: target.laneKey,
+            })) {
+                return;
+            }
+            commitMove({
+                fromIndex: origin.fromIndex,
+                fromLaneKey: origin.fromLaneKey,
+                itemKey: origin.itemKey,
+                toIndex: toSettledIndex({
+                    fromIndex: origin.fromIndex,
+                    fromLaneKey: origin.fromLaneKey,
+                    toIndex: target.index,
+                    toLaneKey: target.laneKey,
+                }),
+                toLaneKey: target.laneKey,
+            });
+        },
+    });
+    return (_jsxs("section", { "aria-label": label, className: toClassName("@container", className), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(SegmentedControl, { className: "max-w-full flex-wrap cq-lg:hidden", items: lanes.map((lane) => ({
+                            // Stacked rather than `Todo (6)`, because the count is
+                            // the reason to look: a lane picker that reads
+                            // "In Progress (5)" on one line is a long label with a
+                            // number in it, and at 15rem three of them do not fit
+                            // on any line at all.
+                            label: (_jsxs("span", { className: "flex flex-col items-center leading-tight", children: [_jsx("span", { children: lane.label }), _jsx("span", { className: "font-normal text-content-muted text-xs", children: String(lane.itemCount ?? lane.items.length) })] })),
+                            value: lane.key,
+                        })), label: `${label} lanes`, onChange: (value) => {
+                            setVisibleLaneKey(value ?? "");
+                        }, selectedValue: visibleLaneKey }), _jsx("div", { className: "flex flex-col gap-4 cq-lg:flex-row cq-lg:items-start", children: lanes.map((lane) => (_jsx(BoardLaneList, { headingLevel: headingLevel, dropIndicatorOffset: drag?.target?.laneKey === lane.key
+                                ? drag.indicatorOffset
+                                : null, isVisibleWhenNarrow: lane.key === visibleLaneKey, lane: lane, moveIcon: moveIcon, moveTargets: lanes
+                                .filter((one) => one.key !== lane.key)
+                                .map((one) => ({
+                                key: one.key,
+                                label: one.label,
+                            })), onMoveToLane: onMove
+                                ? (itemKey, toLaneKey) => {
+                                    const toLane = lanes.find((one) => one.key === toLaneKey);
+                                    commitMove({
+                                        fromIndex: lane.items.findIndex((one) => one.key === itemKey),
+                                        fromLaneKey: lane.key,
+                                        itemKey,
+                                        // A menu move appends. There is no pointer
+                                        // to read a position off, and "the end of
+                                        // the lane you just sent it to" is the one
+                                        // answer that needs no second question.
+                                        toIndex: toLane?.items.length ?? 0,
+                                        toLaneKey,
+                                    });
+                                }
+                                : undefined, onStartDrag: onMove
+                                ? (pointerEvent, origin) => {
+                                    startDrag(pointerEvent, {
+                                        ...origin,
+                                        fromLaneKey: lane.key,
+                                    });
+                                }
+                                : undefined, registerListElement: registerLane(lane.key) }, lane.key))) })] }), _jsx(VisuallyHidden, { "aria-label": `${label} activity`, role: "status", children: moveAnnouncement })] }));
+};
+//# sourceMappingURL=Board.js.map

package/dist/Board/Board.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Board.js","sourceRoot":"","sources":["../../src/Board/Board.tsx"],"names":[],"mappings":"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"}

package/dist/Board/BoardCard.d.ts

@@ -0,0 +1,120 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type BoardItem = {
+    /**
+     * The leading colour bar. Priority, in the consumer this was built
+     * for — *"Priority is styled as a leading colour bar, and **never**
+     * a coloured word before the title."*
+     *
+     * Pair it with `accentLabel`. A bar is colour and nothing else, so
+     * on its own it fails WCAG 1.4.1 outright and is invisible to
+     * every screen reader; the label rides along in a
+     * `VisuallyHidden` so the same fact reaches both channels. Docket's
+     * first board painted these `--color-danger-9` — a Radix-style
+     * scale this token set has never had — so every bar was
+     * transparent while every "is it rendered" assertion passed. The
+     * families here are `--color-intent-<intent>-<role>`; there is no
+     * numeric scale to reach for.
+     */
+    accentIntent?: IntentName;
+    /** What the bar means, in words. "Priority 0". */
+    accentLabel?: string;
+    /**
+     * Under the title and metadata, spanning the card: a live run
+     * line, a gate explanation, a due date. A `ProgressBar` goes here.
+     */
+    footer?: ReactNode;
+    /** Where the title navigates. Routed through `RouterLinkProvider`. */
+    href?: string;
+    /**
+     * Visibly present but not actionable — Docket's *gated*: a task
+     * whose phase has not opened yet. Paint only; it does not disable
+     * the title, because being able to read a thing you cannot start
+     * yet is the entire point of showing it.
+     */
+    isDimmed?: boolean;
+    key: string;
+    /**
+     * Small status marks rendered immediately before the title —
+     * running, blocked, stale. Each one needs its own accessible name;
+     * a bare coloured dot is the same WCAG 1.4.1 failure as the bar.
+     */
+    marks?: ReactNode;
+    /**
+     * Chips. Under the title when the lane is narrow, right-aligned
+     * beside it when there is room. `Badge` is what goes here.
+     */
+    meta?: ReactNode;
+    /** Fires when there is no `href` — for a board that opens a modal. */
+    onSelect?: () => void;
+    title: string;
+    /** The trailing cluster: an assignee avatar, an elapsed-time chip. */
+    trailing?: ReactNode;
+};
+export type BoardCardProps = {
+    item: BoardItem;
+    laneLabel: string;
+    /**
+     * Shown on the move handle instead of the word "Move". The
+     * library ships no icons, so the default is words — a `⋮` renders
+     * as nothing where the font lacks it, which includes the kiosk
+     * image and the ePaper build. An app that already owns a glyph
+     * set passes one and buys back the ~55px per row that a word
+     * costs, which in a 500px lane is the difference between twenty
+     * characters of title and thirty.
+     */
+    moveIcon?: ReactNode;
+    /** The lanes this card can be sent to — never its own. */
+    moveTargets: readonly {
+        key: string;
+        label: string;
+    }[];
+    /** Absent on a read-only board, and then so is the handle. */
+    onMoveToLane?: (toLaneKey: string) => void;
+    onStartDrag?: (pointerEvent: {
+        clientX: number;
+        clientY: number;
+        currentTarget: EventTarget & Element;
+        pointerId: number;
+    }) => void;
+};
+/**
+ * One row on the board — and *row* is only what it is at some
+ * widths.
+ *
+ * ### The three shapes are one component, chosen by the lane
+ *
+ * The requirement this was built against is unusually specific, and
+ * it is specific because the owner answered "which row style?" with
+ * *"all three, depending"*:
+ *
+ * | The lane is | The card is |
+ * | --- | --- |
+ * | narrower than `cq-sm` (24rem) | **two lines** — title clamped to two, metadata underneath, only the trailing slot beside it |
+ * | `cq-sm` to `cq-lg` | **one line** — title ellipsised, metadata right-aligned |
+ * | `cq-lg` (48rem) and wider | **a card** — its own border, surface and elevation, instead of a divider in a list |
+ *
+ * Every one of those is a **container** query against the lane's
+ * list, never a media query, and the difference is not pedantry: a
+ * lane in a three-up board is narrow on a 4K display, and the owner
+ * browses zoomed in, so a 1500px window at 175% zoom is ~860
+ * effective CSS pixels. Window width is not a proxy for the space
+ * this card has. A `@media (max-width: …)` anywhere in this file
+ * would be a defect.
+ *
+ * It also dissolved a bug rather than only satisfying a preference:
+ * a *fixed* two-line row collapsed its title to `a…` inside a narrow
+ * lane, because the metadata beside it could not shrink. A card
+ * sized by its container has no such state to be in.
+ *
+ * ### The move handle is a button first and a drag handle second
+ *
+ * One control, two drivers. Pressing it opens a `Menu` of the other
+ * lanes — the keyboard and screen-reader path, which also works on
+ * touch, and works in the Narrow View where the other lanes are not
+ * on screen at all. Dragging from it moves the card directly. Both
+ * commit through the same callback, so there is no second code path
+ * to keep honest and neither is a fallback for the other.
+ */
+export declare const BoardCard: ({ item, laneLabel, moveIcon, moveTargets, onMoveToLane, onStartDrag, }: BoardCardProps) => ReactNode;
+//# sourceMappingURL=BoardCard.d.ts.map

package/dist/Board/BoardCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoardCard.d.ts","sourceRoot":"","sources":["../../src/Board/BoardCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAatC,MAAM,MAAM,SAAS,GAAG;IACtB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,0DAA0D;IAC1D,WAAW,EAAE,SAAS;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACtD,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE;QAC3B,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,aAAa,EAAE,WAAW,GAAG,OAAO,CAAA;QACpC,SAAS,EAAE,MAAM,CAAA;KAClB,KAAK,IAAI,CAAA;CACX,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,SAAS,GAAI,wEAOvB,cAAc,KAAG,SAyJnB,CAAA"}

package/dist/Board/BoardCard.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../Button/Button.js";
+import { FOCUS_RING_CLASS, INTENT_SOLID_FILL_CLASS, } from "../intentStyles.js";
+import { Menu } from "../Menu/Menu.js";
+import { TextLink } from "../TextLink/TextLink.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+/**
+ * One row on the board — and *row* is only what it is at some
+ * widths.
+ *
+ * ### The three shapes are one component, chosen by the lane
+ *
+ * The requirement this was built against is unusually specific, and
+ * it is specific because the owner answered "which row style?" with
+ * *"all three, depending"*:
+ *
+ * | The lane is | The card is |
+ * | --- | --- |
+ * | narrower than `cq-sm` (24rem) | **two lines** — title clamped to two, metadata underneath, only the trailing slot beside it |
+ * | `cq-sm` to `cq-lg` | **one line** — title ellipsised, metadata right-aligned |
+ * | `cq-lg` (48rem) and wider | **a card** — its own border, surface and elevation, instead of a divider in a list |
+ *
+ * Every one of those is a **container** query against the lane's
+ * list, never a media query, and the difference is not pedantry: a
+ * lane in a three-up board is narrow on a 4K display, and the owner
+ * browses zoomed in, so a 1500px window at 175% zoom is ~860
+ * effective CSS pixels. Window width is not a proxy for the space
+ * this card has. A `@media (max-width: …)` anywhere in this file
+ * would be a defect.
+ *
+ * It also dissolved a bug rather than only satisfying a preference:
+ * a *fixed* two-line row collapsed its title to `a…` inside a narrow
+ * lane, because the metadata beside it could not shrink. A card
+ * sized by its container has no such state to be in.
+ *
+ * ### The move handle is a button first and a drag handle second
+ *
+ * One control, two drivers. Pressing it opens a `Menu` of the other
+ * lanes — the keyboard and screen-reader path, which also works on
+ * touch, and works in the Narrow View where the other lanes are not
+ * on screen at all. Dragging from it moves the card directly. Both
+ * commit through the same callback, so there is no second code path
+ * to keep honest and neither is a fallback for the other.
+ */
+export const BoardCard = ({ item, laneLabel, moveIcon, moveTargets, onMoveToLane, onStartDrag, }) => {
+    const [isMenuVisible, setIsMenuVisible] = useState(false);
+    const titleContent = (_jsx("span", { className: "line-clamp-2 cq-sm:line-clamp-none cq-sm:block cq-sm:truncate", children: item.title }));
+    return (_jsxs("li", { className: toClassName("group relative flex gap-2 border-border-subtle border-b py-2 pe-1 last:border-b-0", 
+        // At `cq-lg` the list stops being a list of rows: the
+        // divider goes and each card grows its own box. The *list*
+        // cannot do this to itself — it is the container, and a
+        // container query never matches its own container.
+        "cq-lg:mb-2 cq-lg:rounded-lg cq-lg:border cq-lg:bg-surface-raised cq-lg:p-3 cq-lg:shadow-low", item.isDimmed && "opacity-60"), "data-board-card": item.key, children: [item.accentIntent ? (_jsx("span", { className: toClassName("w-1 shrink-0 self-stretch rounded-full", INTENT_SOLID_FILL_CLASS[item.accentIntent]), children: item.accentLabel ? (_jsx(VisuallyHidden, { children: item.accentLabel })) : null })) : null, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1 cq-sm:flex-row cq-sm:items-center cq-sm:gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-1.5 text-sm leading-snug", children: [item.marks ? (_jsx("span", { className: "flex shrink-0 items-center gap-1 pt-1", children: item.marks })) : null, item.href ? (_jsx(TextLink, { appearance: "standalone", className: "min-w-0 max-w-full font-normal", href: item.href, intent: "neutral", children: titleContent })) : item.onSelect ? (_jsx("button", { className: toClassName("min-w-0 max-w-full cursor-pointer rounded-xs text-start text-intent-neutral-content hover:underline", FOCUS_RING_CLASS), onClick: item.onSelect, type: "button", children: titleContent })) : (titleContent)] }), item.meta ? (_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1 cq-sm:shrink-0 cq-sm:flex-nowrap cq-sm:justify-end", children: item.meta })) : null] }), item.trailing || onMoveToLane ? (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [item.trailing, onMoveToLane && moveTargets.length > 0 ? (_jsx(Menu, { isVisible: isMenuVisible, items: moveTargets.map((target) => ({
+                                            key: target.key,
+                                            label: target.label,
+                                            onSelect: () => {
+                                                onMoveToLane(target.key);
+                                            },
+                                        })), onDismiss: () => {
+                                            setIsMenuVisible(false);
+                                        }, placement: "bottom-end", trigger: _jsxs(Button, { appearance: "ghost", intent: "neutral", 
+                                            // `touch-none` so a touch drag is a drag
+                                            // rather than a page scroll. Only the handle
+                                            // needs it; the rest of the gesture is covered
+                                            // by `preventDefault` on the captured
+                                            // `pointermove`.
+                                            className: "touch-none opacity-70 group-hover:opacity-100", onClick: () => {
+                                                setIsMenuVisible((isVisible) => !isVisible);
+                                            }, onPointerDown: (pointerEvent) => {
+                                                onStartDrag?.(pointerEvent);
+                                            }, size: "sm", sizing: moveIcon ? "icon" : "control", children: [moveIcon ?? "Move", _jsx(VisuallyHidden, { children: moveIcon
+                                                        ? `Move ${item.title}, currently in ${laneLabel}`
+                                                        : ` ${item.title}, currently in ${laneLabel}` })] }) })) : null] })) : null] }), item.footer ? (_jsx("div", { className: "min-w-0 text-content-secondary text-xs", children: item.footer })) : null] })] }));
+};
+//# sourceMappingURL=BoardCard.js.map