@mieweb/ui 0.10.0-dev.1 → 0.10.0-dev.11

package/dist/chunk-XVW5DPPP.js

@@ -0,0 +1,429 @@
+import { defaultViewLabels, accentClasses } from './chunk-3YBS4WUQ.js';
+import { Spinner } from './chunk-UA7E7PDS.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { useSensors, useSensor, PointerSensor, DndContext, pointerWithin, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
+import { cva } from 'class-variance-authority';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var defaultBoardLabels = {
+  ...defaultViewLabels,
+  empty: "Nothing in this stage",
+  board: "Board",
+  moved: "{item} moved to {stage}",
+  moveFailed: "Could not move {item}",
+  moveHint: "Press Control with the arrow keys to move between stages"
+};
+var cardVariants = cva(
+  [
+    "w-full rounded-md border border-border bg-card p-2 text-start",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  ],
+  {
+    variants: {
+      density: {
+        comfortable: "p-3",
+        compact: "p-2"
+      },
+      interactive: { true: "hover:border-primary-500/40", false: "" },
+      selected: { true: "ring-2 ring-primary-500/50", false: "" },
+      pending: { true: "opacity-60", false: "" }
+    },
+    defaultVariants: {
+      density: "comfortable",
+      interactive: false,
+      selected: false,
+      pending: false
+    }
+  }
+);
+var fill = (template, values) => template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
+function BoardCard({
+  id,
+  title,
+  subtitle,
+  accent,
+  selected,
+  pending,
+  draggable,
+  hint,
+  href,
+  className,
+  children,
+  onOpen,
+  onKeyDown
+}) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id,
+    disabled: !draggable
+  });
+  const body = children ?? /* @__PURE__ */ jsxs("span", { className: "flex items-start gap-2", children: [
+    accent && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "mt-1.5 size-2 shrink-0 rounded-full",
+          accentClasses[accent].marker
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-foreground block text-sm font-medium", children: title }),
+      subtitle && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block truncate text-xs", children: subtitle })
+    ] })
+  ] });
+  const onCardKeyDown = (event) => {
+    if (onOpen && !href && (event.key === "Enter" || event.key === " ")) {
+      if (!event.ctrlKey && !event.metaKey) {
+        event.preventDefault();
+        onOpen();
+        return;
+      }
+    }
+    onKeyDown?.(event);
+  };
+  const shared = {
+    ref: setNodeRef,
+    // Only the pointer listeners are shared. dnd-kit's `attributes` carry
+    // `role="button"` and a `tabIndex`, which on an `<a href>` would override
+    // the native link role — the card would announce as a button, and the
+    // middle-click / "copy link" affordance this branch exists to preserve
+    // would no longer be what assistive tech describes. The non-link card takes
+    // them below, where button semantics are the correct answer.
+    ...draggable ? listeners : {},
+    "aria-current": selected ? "true" : void 0,
+    "aria-describedby": hint,
+    "aria-busy": pending || void 0,
+    "data-slot": "board-view-card",
+    className: cn(className, isDragging && "opacity-40")
+  };
+  return /* @__PURE__ */ jsx("li", { children: href ? (
+    // An anchor, like every other view: the card stays middle-clickable and
+    // "copy link" works. dnd-kit's listeners still own the drag.
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...shared,
+        href,
+        onKeyDown: onCardKeyDown,
+        onClick: (event) => {
+          if (!onOpen || event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0)
+            return;
+          event.preventDefault();
+          onOpen();
+        },
+        children: body
+      }
+    )
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...shared,
+      ...draggable ? attributes : {},
+      role: onOpen ? "button" : void 0,
+      tabIndex: draggable || onOpen ? 0 : void 0,
+      onKeyDown: onCardKeyDown,
+      onClick: onOpen,
+      children: body
+    }
+  ) });
+}
+function BoardColumn({
+  stage,
+  headerId,
+  count,
+  headingLevel: Heading,
+  droppable,
+  classNames,
+  children
+}) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: stage.id,
+    disabled: !droppable
+  });
+  const accent = stage.accent ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: setNodeRef,
+      "data-slot": "board-view-column",
+      "data-over": isOver || void 0,
+      className: cn(
+        "bg-muted/40 flex min-w-0 flex-col rounded-lg border",
+        isOver ? accentClasses[accent].border : "border-border",
+        "sm:w-72 sm:shrink-0",
+        classNames?.column
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            id: headerId,
+            "data-slot": "board-view-column-header",
+            className: cn(
+              "border-border text-muted-foreground flex items-center gap-2 border-b px-3 py-2 text-xs font-semibold tracking-wide uppercase",
+              classNames?.columnHeader
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: cn(
+                    "size-2 shrink-0 rounded-full",
+                    accentClasses[accent].marker
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: stage.label }),
+              /* @__PURE__ */ jsx("span", { className: "ms-auto font-normal tabular-nums", children: count })
+            ]
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+function BoardView({
+  items,
+  accessors,
+  stages,
+  loading = false,
+  error = null,
+  selectedId = null,
+  onOpen,
+  getHref,
+  onMove,
+  renderItem,
+  emptyState,
+  labels,
+  density,
+  className,
+  classNames,
+  headingLevel = "h3"
+}) {
+  const text = { ...defaultBoardLabels, ...labels };
+  const hintId = React.useId();
+  const baseId = React.useId();
+  const [announcement, setAnnouncement] = React.useState("");
+  const [draggingId, setDraggingId] = React.useState(null);
+  const [pending, setPending] = React.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const byId = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) map.set(accessors.getId(item), item);
+    return map;
+  }, [items, accessors]);
+  const stageOf = React.useCallback(
+    (item) => pending.get(accessors.getId(item)) ?? accessors.getStatus?.(item),
+    [pending, accessors]
+  );
+  const columns = React.useMemo(() => {
+    const buckets = new Map(stages.map((s) => [s.id, []]));
+    const extra = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const key = stageOf(item) ?? "";
+      const bucket = buckets.get(key);
+      if (bucket) bucket.push(item);
+      else {
+        const spill = extra.get(key);
+        if (spill) spill.push(item);
+        else extra.set(key, [item]);
+      }
+    }
+    return [
+      ...stages.map((stage) => ({
+        stage,
+        declared: true,
+        items: buckets.get(stage.id) ?? []
+      })),
+      // Never silently drop a record whose status matches no stage. These are
+      // shown so the record stays visible, but they are not drop targets: their
+      // ids were never declared, and `onMove` promises a named stage.
+      ...[...extra].map(([key, bucket]) => ({
+        stage: { id: key, label: key || text.ungrouped },
+        declared: false,
+        items: bucket
+      }))
+    ];
+  }, [items, stages, stageOf, text.ungrouped]);
+  const commit = React.useCallback(
+    async (id, toStage) => {
+      const item = byId.get(id);
+      if (!item || !onMove) return;
+      if (pending.has(id)) return;
+      const stage = stages.find((s) => s.id === toStage);
+      if (!stage) return;
+      const from = accessors.getStatus?.(item);
+      if (from === toStage) return;
+      const title = accessors.getTitle(item);
+      setPending((prev) => new Map(prev).set(id, toStage));
+      setAnnouncement(
+        fill(text.moved, { item: title, stage: stage.label ?? toStage })
+      );
+      try {
+        await onMove(id, toStage, item);
+      } catch {
+        setAnnouncement(fill(text.moveFailed, { item: title }));
+      } finally {
+        setPending((prev) => {
+          const next = new Map(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    },
+    [byId, onMove, pending, accessors, stages, text.moved, text.moveFailed]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
+  );
+  const onDragStart = (event) => setDraggingId(String(event.active.id));
+  const onDragEnd = (event) => {
+    setDraggingId(null);
+    if (event.over) void commit(String(event.active.id), String(event.over.id));
+  };
+  const onCardKeyDown = (event, id, columnIndex) => {
+    if (!onMove || !(event.ctrlKey || event.metaKey)) return;
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    let delta = 0;
+    if (event.key === "ArrowRight") delta = rtl ? -1 : 1;
+    else if (event.key === "ArrowLeft") delta = rtl ? 1 : -1;
+    else return;
+    let target;
+    for (let i = columnIndex + delta; i >= 0 && i < columns.length; i += delta) {
+      if (columns[i].declared) {
+        target = columns[i];
+        break;
+      }
+    }
+    if (!target) return;
+    event.preventDefault();
+    void commit(id, target.stage.id);
+  };
+  const state = (content) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "board-view-state",
+      className: cn(
+        "border-border bg-card text-muted-foreground flex flex-col items-center justify-center gap-2 rounded-lg border px-4 py-10 text-center text-sm",
+        classNames?.state
+      ),
+      children: content
+    }
+  );
+  if (error) {
+    return state(
+      /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive", children: text.error })
+    );
+  }
+  if (loading) {
+    return state(
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "sm", label: text.loading }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: text.loading })
+      ] })
+    );
+  }
+  if (items.length === 0 && emptyState) return /* @__PURE__ */ jsx(Fragment, { children: emptyState });
+  const draggingItem = draggingId ? byId.get(draggingId) : void 0;
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: pointerWithin,
+      onDragStart,
+      onDragEnd,
+      onDragCancel: () => setDraggingId(null),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "board-view",
+            tabIndex: 0,
+            role: "group",
+            "aria-label": text.board,
+            className: cn(
+              // Columns on one scrolling row once there is room; stacked below it,
+              // because five 288px columns on a phone is a horizontal maze.
+              "flex flex-col gap-3 sm:flex-row sm:overflow-x-auto sm:pb-2",
+              className
+            ),
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx(
+              BoardColumn,
+              {
+                stage: column.stage,
+                droppable: column.declared && Boolean(onMove),
+                headerId: `${baseId}-col-${columnIndex}`,
+                count: column.items.length,
+                headingLevel,
+                classNames,
+                children: /* @__PURE__ */ jsxs(
+                  "ul",
+                  {
+                    "aria-labelledby": `${baseId}-col-${columnIndex}`,
+                    className: "flex flex-1 flex-col gap-2 p-2",
+                    children: [
+                      column.items.map((item) => {
+                        const id = accessors.getId(item);
+                        return /* @__PURE__ */ jsx(
+                          BoardCard,
+                          {
+                            id,
+                            title: accessors.getTitle(item),
+                            subtitle: accessors.getSubtitle?.(item),
+                            accent: accessors.getAccent?.(item),
+                            selected: id === selectedId,
+                            pending: pending.has(id),
+                            draggable: Boolean(onMove),
+                            hint: onMove ? hintId : void 0,
+                            href: getHref?.(id, item),
+                            className: cn(
+                              cardVariants({
+                                density,
+                                interactive: Boolean(onOpen),
+                                selected: id === selectedId,
+                                pending: pending.has(id)
+                              }),
+                              classNames?.card,
+                              id === selectedId && classNames?.selectedCard
+                            ),
+                            onOpen: onOpen ? () => onOpen(id, item) : void 0,
+                            onKeyDown: (event) => onCardKeyDown(event, id, columnIndex),
+                            children: renderItem?.(item, { view: "board" })
+                          },
+                          id
+                        );
+                      }),
+                      column.items.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-muted-foreground px-1 py-2 text-xs", children: text.empty })
+                    ]
+                  }
+                )
+              },
+              column.stage.id
+            ))
+          }
+        ),
+        onMove && /* @__PURE__ */ jsx("span", { id: hintId, className: "sr-only", children: text.moveHint }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "board-view-announcer",
+            role: "status",
+            "aria-live": "polite",
+            className: "sr-only",
+            children: announcement
+          }
+        ),
+        /* @__PURE__ */ jsx(DragOverlay, { children: draggingItem && /* @__PURE__ */ jsx("div", { className: cn(cardVariants({ density }), "shadow-lg"), children: /* @__PURE__ */ jsx("span", { className: "text-foreground block text-sm font-medium", children: accessors.getTitle(draggingItem) }) }) })
+      ]
+    }
+  );
+}
+
+export { BoardView, cardVariants, defaultBoardLabels };
+//# sourceMappingURL=chunk-XVW5DPPP.js.map
+//# sourceMappingURL=chunk-XVW5DPPP.js.map

package/dist/chunk-XVW5DPPP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BoardView/BoardView.tsx"],"names":[],"mappings":"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","file":"chunk-XVW5DPPP.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  PointerSensor,\n  pointerWithin,\n  useDraggable,\n  useDroppable,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type DragStartEvent,\n} from '@dnd-kit/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from '../Spinner';\nimport {\n  accentClasses,\n  defaultViewLabels,\n  type Accent,\n  type Stage,\n  type ViewBaseProps,\n  type ViewLabels,\n} from '../../views/types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type BoardViewSlot =\n  | 'column'\n  | 'columnHeader'\n  | 'card'\n  | 'selectedCard'\n  | 'state';\n\nexport interface BoardLabels extends ViewLabels {\n  /** Accessible name of the scrollable board region. */\n  board: string;\n  /** Announced when a card starts moving. `{item}` and `{stage}` are substituted. */\n  moved: string;\n  /** Announced when `onMove` rejects. */\n  moveFailed: string;\n  /** Hint on a focusable card describing the keyboard move. */\n  moveHint: string;\n}\n\nexport const defaultBoardLabels: BoardLabels = {\n  ...defaultViewLabels,\n  empty: 'Nothing in this stage',\n  board: 'Board',\n  moved: '{item} moved to {stage}',\n  moveFailed: 'Could not move {item}',\n  moveHint: 'Press Control with the arrow keys to move between stages',\n};\n\nexport interface BoardViewProps<T>\n  extends ViewBaseProps<T>, VariantProps<typeof cardVariants> {\n  /** Columns, in order. A board without stages has nothing to draw. */\n  stages: readonly Stage[];\n  /**\n   * Commits a move. The board shows the card in its new column while this is\n   * pending and puts it back if the promise rejects, so the caller never has to\n   * re-render it home.\n   */\n  onMove?: (id: string, toStage: string, item: T) => void | Promise<void>;\n  labels?: Partial<BoardLabels>;\n  classNames?: Partial<Record<BoardViewSlot, string>>;\n  /** Heading level for column headers, under the page's own heading. */\n  headingLevel?: 'h2' | 'h3' | 'h4';\n}\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst cardVariants = cva(\n  [\n    'w-full rounded-md border border-border bg-card p-2 text-start',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: 'p-3',\n        compact: 'p-2',\n      },\n      interactive: { true: 'hover:border-primary-500/40', false: '' },\n      selected: { true: 'ring-2 ring-primary-500/50', false: '' },\n      pending: { true: 'opacity-60', false: '' },\n    },\n    defaultVariants: {\n      density: 'comfortable',\n      interactive: false,\n      selected: false,\n      pending: false,\n    },\n  }\n);\n\nconst fill = (template: string, values: Record<string, string>) =>\n  template.replace(/\\{(\\w+)\\}/g, (_, key) => values[key] ?? '');\n\n// =============================================================================\n// Card\n// =============================================================================\n\ninterface CardProps {\n  id: string;\n  title: string;\n  subtitle?: string;\n  accent?: Accent;\n  selected: boolean;\n  pending: boolean;\n  draggable: boolean;\n  hint?: string;\n  href?: string;\n  className?: string;\n  children?: React.ReactNode;\n  onOpen?: () => void;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n}\n\nfunction BoardCard({\n  id,\n  title,\n  subtitle,\n  accent,\n  selected,\n  pending,\n  draggable,\n  hint,\n  href,\n  className,\n  children,\n  onOpen,\n  onKeyDown,\n}: CardProps) {\n  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({\n    id,\n    disabled: !draggable,\n  });\n\n  const body = children ?? (\n    <span className=\"flex items-start gap-2\">\n      {accent && (\n        <span\n          aria-hidden\n          className={cn(\n            'mt-1.5 size-2 shrink-0 rounded-full',\n            accentClasses[accent].marker\n          )}\n        />\n      )}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"text-foreground block text-sm font-medium\">\n          {title}\n        </span>\n        {subtitle && (\n          <span className=\"text-muted-foreground block truncate text-xs\">\n            {subtitle}\n          </span>\n        )}\n      </span>\n    </span>\n  );\n\n  const onCardKeyDown = (event: React.KeyboardEvent) => {\n    if (onOpen && !href && (event.key === 'Enter' || event.key === ' ')) {\n      // Space is dnd-kit's pick-up key only while dragging; here the card is at\n      // rest, so it activates like any other button.\n      if (!event.ctrlKey && !event.metaKey) {\n        event.preventDefault();\n        onOpen();\n        return;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  const shared = {\n    ref: setNodeRef,\n    // Only the pointer listeners are shared. dnd-kit's `attributes` carry\n    // `role=\"button\"` and a `tabIndex`, which on an `<a href>` would override\n    // the native link role — the card would announce as a button, and the\n    // middle-click / \"copy link\" affordance this branch exists to preserve\n    // would no longer be what assistive tech describes. The non-link card takes\n    // them below, where button semantics are the correct answer.\n    ...(draggable ? listeners : {}),\n    'aria-current': selected ? ('true' as const) : undefined,\n    'aria-describedby': hint,\n    'aria-busy': pending || undefined,\n    'data-slot': 'board-view-card',\n    className: cn(className, isDragging && 'opacity-40'),\n  };\n\n  return (\n    <li>\n      {href ? (\n        // An anchor, like every other view: the card stays middle-clickable and\n        // \"copy link\" works. dnd-kit's listeners still own the drag.\n        <a\n          {...shared}\n          href={href}\n          onKeyDown={onCardKeyDown}\n          onClick={(event) => {\n            if (\n              !onOpen ||\n              event.defaultPrevented ||\n              event.metaKey ||\n              event.ctrlKey ||\n              event.shiftKey ||\n              event.button !== 0\n            )\n              return;\n            event.preventDefault();\n            onOpen();\n          }}\n        >\n          {body}\n        </a>\n      ) : (\n        <div\n          {...shared}\n          {...(draggable ? attributes : {})}\n          role={onOpen ? 'button' : undefined}\n          tabIndex={draggable || onOpen ? 0 : undefined}\n          onKeyDown={onCardKeyDown}\n          onClick={onOpen}\n        >\n          {body}\n        </div>\n      )}\n    </li>\n  );\n}\n\n// =============================================================================\n// Column\n// =============================================================================\n\nfunction BoardColumn({\n  stage,\n  headerId,\n  count,\n  headingLevel: Heading,\n  droppable,\n  classNames,\n  children,\n}: {\n  stage: Stage;\n  droppable: boolean;\n  headerId: string;\n  count: number;\n  headingLevel: 'h2' | 'h3' | 'h4';\n  classNames?: BoardViewProps<unknown>['classNames'];\n  children: React.ReactNode;\n}) {\n  const { setNodeRef, isOver } = useDroppable({\n    id: stage.id,\n    disabled: !droppable,\n  });\n  const accent = stage.accent ?? 'neutral';\n  return (\n    <section\n      ref={setNodeRef}\n      data-slot=\"board-view-column\"\n      data-over={isOver || undefined}\n      className={cn(\n        'bg-muted/40 flex min-w-0 flex-col rounded-lg border',\n        isOver ? accentClasses[accent].border : 'border-border',\n        'sm:w-72 sm:shrink-0',\n        classNames?.column\n      )}\n    >\n      <Heading>\n        <span\n          id={headerId}\n          data-slot=\"board-view-column-header\"\n          className={cn(\n            'border-border text-muted-foreground flex items-center gap-2 border-b px-3 py-2 text-xs font-semibold tracking-wide uppercase',\n            classNames?.columnHeader\n          )}\n        >\n          <span\n            aria-hidden\n            className={cn(\n              'size-2 shrink-0 rounded-full',\n              accentClasses[accent].marker\n            )}\n          />\n          <span>{stage.label}</span>\n          <span className=\"ms-auto font-normal tabular-nums\">{count}</span>\n        </span>\n      </Heading>\n      {children}\n    </section>\n  );\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport function BoardView<T>({\n  items,\n  accessors,\n  stages,\n  loading = false,\n  error = null,\n  selectedId = null,\n  onOpen,\n  getHref,\n  onMove,\n  renderItem,\n  emptyState,\n  labels,\n  density,\n  className,\n  classNames,\n  headingLevel = 'h3',\n}: BoardViewProps<T>) {\n  const text = { ...defaultBoardLabels, ...labels };\n  const hintId = React.useId();\n  // Ids come from position, not from the stage id: two distinct statuses can\n  // normalise to the same string, and a duplicate id makes `aria-labelledby`\n  // resolve to the wrong heading.\n  const baseId = React.useId();\n  const [announcement, setAnnouncement] = React.useState('');\n  const [draggingId, setDraggingId] = React.useState<string | null>(null);\n  // Where a card is shown while its move is in flight, so the column it landed\n  // in is the one the user sees before the caller's data catches up.\n  // A Map, not an object. Ids come from the caller's `getId` and are only\n  // typed `string`, so a collection keyed by user data can legitimately produce\n  // `toString`, `constructor` or `__proto__`. On a plain object `'toString' in\n  // pending` is true before anything is pending, which would pin that card as\n  // permanently in-flight and make it impossible to move.\n  const [pending, setPending] = React.useState<Map<string, string>>(\n    () => new Map()\n  );\n\n  const byId = React.useMemo(() => {\n    const map = new Map<string, T>();\n    for (const item of items) map.set(accessors.getId(item), item);\n    return map;\n  }, [items, accessors]);\n\n  const stageOf = React.useCallback(\n    (item: T) =>\n      pending.get(accessors.getId(item)) ?? accessors.getStatus?.(item),\n    [pending, accessors]\n  );\n\n  const columns = React.useMemo(() => {\n    const buckets = new Map<string, T[]>(stages.map((s) => [s.id, []]));\n    const extra = new Map<string, T[]>();\n    for (const item of items) {\n      const key = stageOf(item) ?? '';\n      const bucket = buckets.get(key);\n      if (bucket) bucket.push(item);\n      else {\n        const spill = extra.get(key);\n        if (spill) spill.push(item);\n        else extra.set(key, [item]);\n      }\n    }\n    return [\n      ...stages.map((stage) => ({\n        stage,\n        declared: true,\n        items: buckets.get(stage.id) ?? [],\n      })),\n      // Never silently drop a record whose status matches no stage. These are\n      // shown so the record stays visible, but they are not drop targets: their\n      // ids were never declared, and `onMove` promises a named stage.\n      ...[...extra].map(([key, bucket]) => ({\n        stage: { id: key, label: key || text.ungrouped } as Stage,\n        declared: false,\n        items: bucket,\n      })),\n    ];\n  }, [items, stages, stageOf, text.ungrouped]);\n\n  const commit = React.useCallback(\n    async (id: string, toStage: string) => {\n      const item = byId.get(id);\n      if (!item || !onMove) return;\n      // One move per card at a time: a second would overwrite the first's\n      // pending stage, and the first `finally` would then clear it, snapping\n      // the card home while the second mutation is still in flight.\n      if (pending.has(id)) return;\n      const stage = stages.find((s) => s.id === toStage);\n      // `onMove` promises a move to a stage the caller declared. Columns\n      // synthesized for unknown statuses exist so a record is never silently\n      // dropped, not as somewhere to put things — accepting a drop there would\n      // hand back an id that was never in `stages`.\n      if (!stage) return;\n      const from = accessors.getStatus?.(item);\n      if (from === toStage) return;\n      const title = accessors.getTitle(item);\n\n      setPending((prev) => new Map(prev).set(id, toStage));\n      setAnnouncement(\n        fill(text.moved, { item: title, stage: stage.label ?? toStage })\n      );\n      try {\n        await onMove(id, toStage, item);\n      } catch {\n        setAnnouncement(fill(text.moveFailed, { item: title }));\n      } finally {\n        setPending((prev) => {\n          const next = new Map(prev);\n          next.delete(id);\n          return next;\n        });\n      }\n    },\n    [byId, onMove, pending, accessors, stages, text.moved, text.moveFailed]\n  );\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } })\n  );\n\n  const onDragStart = (event: DragStartEvent) =>\n    setDraggingId(String(event.active.id));\n\n  const onDragEnd = (event: DragEndEvent) => {\n    setDraggingId(null);\n    if (event.over) void commit(String(event.active.id), String(event.over.id));\n  };\n\n  // Pointer drag has no keyboard equivalent that is pleasant to use, so moving\n  // by keyboard is its own command on the focused card rather than a simulated\n  // drag: Ctrl/Cmd with the arrow keys steps it between adjacent stages.\n  const onCardKeyDown = (\n    event: React.KeyboardEvent,\n    id: string,\n    columnIndex: number\n  ) => {\n    if (!onMove || !(event.ctrlKey || event.metaKey)) return;\n    const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';\n    let delta = 0;\n    if (event.key === 'ArrowRight') delta = rtl ? -1 : 1;\n    else if (event.key === 'ArrowLeft') delta = rtl ? 1 : -1;\n    else return;\n    // Step to the next *declared* stage. A fallback column is not a move\n    // target, so stopping on one would strand the card there; skipping it\n    // keeps arrowing continuous and still lets a card leave one.\n    let target;\n    for (\n      let i = columnIndex + delta;\n      i >= 0 && i < columns.length;\n      i += delta\n    ) {\n      if (columns[i].declared) {\n        target = columns[i];\n        break;\n      }\n    }\n    if (!target) return;\n    event.preventDefault();\n    void commit(id, target.stage.id);\n  };\n\n  const state = (content: React.ReactNode) => (\n    <div\n      data-slot=\"board-view-state\"\n      className={cn(\n        'border-border bg-card text-muted-foreground flex flex-col items-center justify-center gap-2 rounded-lg border px-4 py-10 text-center text-sm',\n        classNames?.state\n      )}\n    >\n      {content}\n    </div>\n  );\n\n  if (error) {\n    return state(\n      <p role=\"alert\" className=\"text-destructive\">\n        {text.error}\n      </p>\n    );\n  }\n  if (loading) {\n    return state(\n      <span className=\"flex items-center gap-2\">\n        <Spinner size=\"sm\" label={text.loading} />\n        <span aria-hidden>{text.loading}</span>\n      </span>\n    );\n  }\n  if (items.length === 0 && emptyState) return <>{emptyState}</>;\n\n  const draggingItem = draggingId ? byId.get(draggingId) : undefined;\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={pointerWithin}\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onDragCancel={() => setDraggingId(null)}\n    >\n      <div\n        data-slot=\"board-view\"\n        // Scrollable content must be keyboard operable (WCAG 2.1.1), which axe\n        // enforces as scrollable-region-focusable. jsx-a11y disagrees for\n        // non-interactive elements; the success criterion wins.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        role=\"group\"\n        aria-label={text.board}\n        className={cn(\n          // Columns on one scrolling row once there is room; stacked below it,\n          // because five 288px columns on a phone is a horizontal maze.\n          'flex flex-col gap-3 sm:flex-row sm:overflow-x-auto sm:pb-2',\n          className\n        )}\n      >\n        {columns.map((column, columnIndex) => (\n          <BoardColumn\n            key={column.stage.id}\n            stage={column.stage}\n            droppable={column.declared && Boolean(onMove)}\n            headerId={`${baseId}-col-${columnIndex}`}\n            count={column.items.length}\n            headingLevel={headingLevel}\n            classNames={classNames}\n          >\n            <ul\n              aria-labelledby={`${baseId}-col-${columnIndex}`}\n              className=\"flex flex-1 flex-col gap-2 p-2\"\n            >\n              {column.items.map((item) => {\n                const id = accessors.getId(item);\n                return (\n                  <BoardCard\n                    key={id}\n                    id={id}\n                    title={accessors.getTitle(item)}\n                    subtitle={accessors.getSubtitle?.(item)}\n                    accent={accessors.getAccent?.(item)}\n                    selected={id === selectedId}\n                    pending={pending.has(id)}\n                    draggable={Boolean(onMove)}\n                    hint={onMove ? hintId : undefined}\n                    href={getHref?.(id, item)}\n                    className={cn(\n                      cardVariants({\n                        density,\n                        interactive: Boolean(onOpen),\n                        selected: id === selectedId,\n                        pending: pending.has(id),\n                      }),\n                      classNames?.card,\n                      id === selectedId && classNames?.selectedCard\n                    )}\n                    onOpen={onOpen ? () => onOpen(id, item) : undefined}\n                    onKeyDown={(event) => onCardKeyDown(event, id, columnIndex)}\n                  >\n                    {renderItem?.(item, { view: 'board' })}\n                  </BoardCard>\n                );\n              })}\n              {column.items.length === 0 && (\n                <li className=\"text-muted-foreground px-1 py-2 text-xs\">\n                  {text.empty}\n                </li>\n              )}\n            </ul>\n          </BoardColumn>\n        ))}\n      </div>\n\n      {onMove && (\n        <span id={hintId} className=\"sr-only\">\n          {text.moveHint}\n        </span>\n      )}\n      {/* Separate from dnd-kit's own drag live region: this announces moves\n          made by keyboard command, which are not drags. */}\n      <span\n        data-slot=\"board-view-announcer\"\n        role=\"status\"\n        aria-live=\"polite\"\n        className=\"sr-only\"\n      >\n        {announcement}\n      </span>\n\n      <DragOverlay>\n        {draggingItem && (\n          <div className={cn(cardVariants({ density }), 'shadow-lg')}>\n            <span className=\"text-foreground block text-sm font-medium\">\n              {accessors.getTitle(draggingItem)}\n            </span>\n          </div>\n        )}\n      </DragOverlay>\n    </DndContext>\n  );\n}\n\nexport { cardVariants as boardViewCardVariants };\n"]}