@mieweb/ui 0.10.0-dev.6 → 0.10.0-dev.8

package/agent/mieweb-ui.instructions.md

@@ -168,7 +168,19 @@ Tailwind: on Tailwind 4, add an `@source` for `@mieweb/ui` so library classes ar
 
 If JSDoc, the console, or the docs mark something deprecated (`AGGrid` today), do not use it in new code and do not suppress the warning. Use the documented replacement.
 
-## Rule 14: When existing components do not meet the need
+## Rule 14: A component that renders a collection takes it through props
+
+Anything that displays a list, board, calendar, timeline or inbox of records the caller owns is a **headless module**. It receives `items` / `loading` / `error` as props, hands changes back through `on*` callbacks typed `void | Promise<void>`, and navigates through `onOpen(id)` / `getHref(id)`.
+
+Never fetch, subscribe, read a store, or import a router or app framework inside such a component — `meteor/*`, `next/*`, `react-router*`, `@tanstack/react-query` and `@fortawesome/*` are blocked by ESLint. Make it generic over the item type with accessor props (`getId`, `getStatus`, `getStart`, …), put domain rendering in `render*` slots, return a token _name_ for colour (never a class string), and make every user-facing string overridable through `labels`.
+
+Declare it with `parameters.catalog.collection: true`; `pnpm catalog:check` then requires an **Empty**, **Loading** and **Error** story. Full contract:
+[component-policy → Tier 2.5](https://github.com/mieweb/ui/blob/main/lessons/component-policy.md#tier-25-headless-modules).
+
+Wiring one to an app's data layer — accessors, awaited mutations, `onOpen` plus `getHref`, where filter state lives:
+[wiring-headless-modules.md](https://github.com/mieweb/ui/blob/main/lessons/wiring-headless-modules.md).
+
+## Rule 15: When existing components do not meet the need
 
 Before creating or materially extending a reusable component, read the
 [upstream contribution guide](https://github.com/mieweb/ui/blob/main/CONTRIBUTING.md)

package/dist/brands/index.cjs

@@ -6,10 +6,10 @@ var chunkNM7O7RY5_cjs = require('../chunk-NM7O7RY5.cjs');
 var chunkLCQGAOAZ_cjs = require('../chunk-LCQGAOAZ.cjs');
 var chunkZ5J4NTPL_cjs = require('../chunk-Z5J4NTPL.cjs');
 var chunkU7VQUOLS_cjs = require('../chunk-U7VQUOLS.cjs');
-var chunkNGQRS7AW_cjs = require('../chunk-NGQRS7AW.cjs');
 var chunkWNJRS7Y7_cjs = require('../chunk-WNJRS7Y7.cjs');
 var chunkUCGUA3QV_cjs = require('../chunk-UCGUA3QV.cjs');
 var chunkRR2MJBGV_cjs = require('../chunk-RR2MJBGV.cjs');
+var chunkNGQRS7AW_cjs = require('../chunk-NGQRS7AW.cjs');
 require('../chunk-EUAMEVVI.cjs');
 
 
@@ -38,18 +38,6 @@ Object.defineProperty(exports, "webchartBrand", {
   enumerable: true,
   get: function () { return chunkU7VQUOLS_cjs.webchartBrand; }
 });
-Object.defineProperty(exports, "createBrandPreset", {
-  enumerable: true,
-  get: function () { return chunkNGQRS7AW_cjs.createBrandPreset; }
-});
-Object.defineProperty(exports, "generateBrandCSS", {
-  enumerable: true,
-  get: function () { return chunkNGQRS7AW_cjs.generateBrandCSS; }
-});
-Object.defineProperty(exports, "generateTailwindTheme", {
-  enumerable: true,
-  get: function () { return chunkNGQRS7AW_cjs.generateTailwindTheme; }
-});
 Object.defineProperty(exports, "bluehiveBrand", {
   enumerable: true,
   get: function () { return chunkWNJRS7Y7_cjs.bluehiveBrand; }
@@ -62,5 +50,17 @@ Object.defineProperty(exports, "ozwellBrand", {
   enumerable: true,
   get: function () { return chunkRR2MJBGV_cjs.ozwellBrand; }
 });
+Object.defineProperty(exports, "createBrandPreset", {
+  enumerable: true,
+  get: function () { return chunkNGQRS7AW_cjs.createBrandPreset; }
+});
+Object.defineProperty(exports, "generateBrandCSS", {
+  enumerable: true,
+  get: function () { return chunkNGQRS7AW_cjs.generateBrandCSS; }
+});
+Object.defineProperty(exports, "generateTailwindTheme", {
+  enumerable: true,
+  get: function () { return chunkNGQRS7AW_cjs.generateTailwindTheme; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/brands/index.js

@@ -4,10 +4,10 @@ export { enterpriseHealthBrand } from '../chunk-Q77TE5DZ.js';
 export { miewebBrand } from '../chunk-NERS5ZT6.js';
 export { wagglelineBrand } from '../chunk-2NTYAALC.js';
 export { webchartBrand } from '../chunk-CW66SO5O.js';
-export { createBrandPreset, generateBrandCSS, generateTailwindTheme } from '../chunk-5GOWFNQ6.js';
 export { bluehiveBrand } from '../chunk-3T7QGLNB.js';
 export { ccmeBrand } from '../chunk-SCQRJPSV.js';
 export { ozwellBrand } from '../chunk-5YUBQIC7.js';
+export { createBrandPreset, generateBrandCSS, generateTailwindTheme } from '../chunk-5GOWFNQ6.js';
 import '../chunk-PX6F3LHL.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/chunk-3YBS4WUQ.js

@@ -0,0 +1,52 @@
+import { DateTime } from 'luxon';
+
+// src/views/types.ts
+var defaultViewLabels = {
+  viewSwitcher: "View",
+  loading: "Loading",
+  empty: "Nothing to show",
+  error: "Could not load this view",
+  retry: "Try again",
+  ungrouped: "Ungrouped"
+};
+function toDateTime(value, zone) {
+  if (value == null) return null;
+  const dt = value instanceof Date ? DateTime.fromJSDate(value, { zone }) : DateTime.fromISO(value, { zone });
+  return dt.isValid ? dt : null;
+}
+var accentClasses = {
+  primary: {
+    tint: "bg-primary-500/10",
+    border: "border-primary-500/40",
+    marker: "bg-primary-500"
+  },
+  success: {
+    tint: "bg-success/10",
+    border: "border-success/40",
+    marker: "bg-success"
+  },
+  warning: {
+    tint: "bg-warning/10",
+    border: "border-warning/40",
+    marker: "bg-warning"
+  },
+  destructive: {
+    tint: "bg-destructive/10",
+    border: "border-destructive/40",
+    marker: "bg-destructive"
+  },
+  info: {
+    tint: "bg-info/10",
+    border: "border-info/40",
+    marker: "bg-info"
+  },
+  neutral: {
+    tint: "bg-muted",
+    border: "border-border",
+    marker: "bg-muted-foreground"
+  }
+};
+
+export { accentClasses, defaultViewLabels, toDateTime };
+//# sourceMappingURL=chunk-3YBS4WUQ.js.map
+//# sourceMappingURL=chunk-3YBS4WUQ.js.map

package/dist/chunk-3YBS4WUQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/views/types.ts"],"names":[],"mappings":";;;AAmFO,IAAM,iBAAA,GAAgC;AAAA,EAC3C,YAAA,EAAc,MAAA;AAAA,EACd,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,iBAAA;AAAA,EACP,KAAA,EAAO,0BAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,SAAA,EAAW;AACb;AAoCO,SAAS,UAAA,CACd,OACA,IAAA,EACiB;AACjB,EAAA,IAAI,KAAA,IAAS,MAAM,OAAO,IAAA;AAC1B,EAAA,MAAM,EAAA,GACJ,KAAA,YAAiB,IAAA,GACb,QAAA,CAAS,WAAW,KAAA,EAAO,EAAE,IAAA,EAAM,IACnC,QAAA,CAAS,OAAA,CAAQ,KAAA,EAAO,EAAE,MAAM,CAAA;AACtC,EAAA,OAAO,EAAA,CAAG,UAAU,EAAA,GAAK,IAAA;AAC3B;AAWO,IAAM,aAAA,GAGT;AAAA,EACF,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,mBAAA;AAAA,IACN,MAAA,EAAQ,uBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,eAAA;AAAA,IACN,MAAA,EAAQ,mBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,eAAA;AAAA,IACN,MAAA,EAAQ,mBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,WAAA,EAAa;AAAA,IACX,IAAA,EAAM,mBAAA;AAAA,IACN,MAAA,EAAQ,uBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,YAAA;AAAA,IACN,MAAA,EAAQ,gBAAA;AAAA,IACR,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,UAAA;AAAA,IACN,MAAA,EAAQ,eAAA;AAAA,IACR,MAAA,EAAQ;AAAA;AAEZ","file":"chunk-3YBS4WUQ.js","sourcesContent":["/**\n * The contract every component in the `Modules/Views` family reads through.\n *\n * A page describes its collection once — which field is the id, the title, the\n * status, the start date — and every view understands it. That is the whole\n * reason the family exists: without it each view needs its own adapter and you\n * end up re-implementing the same board per entity.\n *\n * Views are headless. Nothing here fetches, subscribes, or navigates.\n * See CONTRIBUTING → \"Modules: headless data components\".\n */\nimport type * as React from 'react';\nimport { DateTime } from 'luxon';\n\n/**\n * Which layout is on screen. `overview` and `table` are rendered by the host\n * through `ViewSet` slots rather than by a component in this family — a tabular\n * collection is `DataVisNitroGrid`, and an overview is domain content.\n */\nexport type ViewId =\n  | 'overview'\n  | 'list'\n  | 'board'\n  | 'calendar'\n  | 'gantt'\n  | 'roadmap'\n  | 'table';\n\n/**\n * A semantic colour name, resolved to `--mieweb-*` tokens by each view.\n *\n * Accessors return one of these rather than a class string so a caller cannot\n * hardcode a palette that breaks under another brand or in dark mode.\n */\nexport type Accent =\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'destructive'\n  | 'info'\n  | 'neutral';\n\n/** A named stage: a board column, and the segments of a stage bar. */\nexport interface Stage {\n  id: string;\n  label: string;\n  accent?: Accent;\n}\n\n/**\n * How a view reads one item. Only `getId` and `getTitle` are always required;\n * each view documents which of the rest it needs (a board needs `getStatus`, a\n * Gantt needs `getStart`) and renders an explanatory empty state without them.\n */\nexport interface ViewAccessors<T> {\n  getId: (item: T) => string;\n  getTitle: (item: T) => string;\n  /** Secondary line under the title. */\n  getSubtitle?: (item: T) => string | undefined;\n  /** Board column and list group; matched against `Stage['id']`. */\n  getStatus?: (item: T) => string;\n  /** Gantt bar start, calendar placement. */\n  getStart?: (item: T) => Date | string | null | undefined;\n  /** Gantt bar end, calendar span. Falls back to the start when absent. */\n  getEnd?: (item: T) => Date | string | null | undefined;\n  /** Swimlane in a roadmap, row group in a Gantt. */\n  getGroup?: (item: T) => string | undefined;\n  getAccent?: (item: T) => Accent;\n}\n\n/** Strings a view renders. Every one is overridable; the defaults are English. */\nexport interface ViewLabels {\n  /** Accessible name of the view switcher group. */\n  viewSwitcher: string;\n  loading: string;\n  empty: string;\n  error: string;\n  /** Action on the error state. */\n  retry: string;\n  /** Heading for the group a record with no status or group falls into. */\n  ungrouped: string;\n}\n\nexport const defaultViewLabels: ViewLabels = {\n  viewSwitcher: 'View',\n  loading: 'Loading',\n  empty: 'Nothing to show',\n  error: 'Could not load this view',\n  retry: 'Try again',\n  ungrouped: 'Ungrouped',\n};\n\n/**\n * Props every view accepts. Views are controlled: selection, the active view and\n * filter state live in the page, and every change is handed back.\n */\nexport interface ViewBaseProps<T> {\n  items: T[];\n  accessors: ViewAccessors<T>;\n  loading?: boolean;\n  error?: Error | null;\n  selectedId?: string | null;\n  /** Called when the user activates an item. */\n  onOpen?: (id: string, item: T) => void;\n  /** Return a URL to render each item as a real anchor — middle-clickable and crawlable. */\n  getHref?: (id: string, item: T) => string;\n  /** Render one item. Receives the active view so one function can serve several. */\n  renderItem?: (item: T, context: { view: ViewId }) => React.ReactNode;\n  /** Replaces the built-in empty state. */\n  emptyState?: React.ReactNode;\n  labels?: Partial<ViewLabels>;\n  /** Pins \"today\" so stories, tests and visual snapshots stay deterministic. */\n  now?: Date;\n  className?: string;\n}\n\n/**\n * Reads an accessor's date in the view's zone.\n *\n * `DateTime.fromISO` is what makes this correct for both shapes an accessor may\n * return. A date-only string is a wall date — `2026-03-10` means that calendar\n * day where the collection lives, not UTC midnight, which is the 9th in the\n * Americas — while a full timestamp is an instant and gets converted. Going via\n * `new Date()` would collapse the first case into the second and shift the item\n * onto the previous day in every zone behind UTC.\n */\nexport function toDateTime(\n  value: Date | string | null | undefined,\n  zone: string\n): DateTime | null {\n  if (value == null) return null;\n  const dt =\n    value instanceof Date\n      ? DateTime.fromJSDate(value, { zone })\n      : DateTime.fromISO(value, { zone });\n  return dt.isValid ? dt : null;\n}\n\n/**\n * Tailwind classes per accent, so every view tints the same way.\n *\n * There is deliberately no text colour here. `--mieweb-success` and friends are\n * fill tokens: as ink on a surface — even their own 10% wash — they fail WCAG AA\n * contrast, which axe catches as a serious violation. So an accent is carried by\n * a wash, a border and a solid marker, and label text always uses a foreground\n * token. That also means colour is never the only signal.\n */\nexport const accentClasses: Record<\n  Accent,\n  { tint: string; border: string; marker: string }\n> = {\n  primary: {\n    tint: 'bg-primary-500/10',\n    border: 'border-primary-500/40',\n    marker: 'bg-primary-500',\n  },\n  success: {\n    tint: 'bg-success/10',\n    border: 'border-success/40',\n    marker: 'bg-success',\n  },\n  warning: {\n    tint: 'bg-warning/10',\n    border: 'border-warning/40',\n    marker: 'bg-warning',\n  },\n  destructive: {\n    tint: 'bg-destructive/10',\n    border: 'border-destructive/40',\n    marker: 'bg-destructive',\n  },\n  info: {\n    tint: 'bg-info/10',\n    border: 'border-info/40',\n    marker: 'bg-info',\n  },\n  neutral: {\n    tint: 'bg-muted',\n    border: 'border-border',\n    marker: 'bg-muted-foreground',\n  },\n};\n"]}

package/dist/chunk-4IS3QCOQ.cjs

@@ -0,0 +1,453 @@
+'use strict';
+
+var chunk4NCDU5IG_cjs = require('./chunk-4NCDU5IG.cjs');
+var chunkXXVUHLQN_cjs = require('./chunk-XXVUHLQN.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var defaultBoardLabels = {
+  ...chunk4NCDU5IG_cjs.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 = classVarianceAuthority.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 } = core.useDraggable({
+    id,
+    disabled: !draggable
+  });
+  const body = children ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-start gap-2", children: [
+    accent && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: chunkS5RVSXDV_cjs.cn(
+          "mt-1.5 size-2 shrink-0 rounded-full",
+          chunk4NCDU5IG_cjs.accentClasses[accent].marker
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground block text-sm font-medium", children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.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: chunkS5RVSXDV_cjs.cn(className, isDragging && "opacity-40")
+  };
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 } = core.useDroppable({
+    id: stage.id,
+    disabled: !droppable
+  });
+  const accent = stage.accent ?? "neutral";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ref: setNodeRef,
+      "data-slot": "board-view-column",
+      "data-over": isOver || void 0,
+      className: chunkS5RVSXDV_cjs.cn(
+        "bg-muted/40 flex min-w-0 flex-col rounded-lg border",
+        isOver ? chunk4NCDU5IG_cjs.accentClasses[accent].border : "border-border",
+        "sm:w-72 sm:shrink-0",
+        classNames?.column
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            id: headerId,
+            "data-slot": "board-view-column-header",
+            className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: chunkS5RVSXDV_cjs.cn(
+                    "size-2 shrink-0 rounded-full",
+                    chunk4NCDU5IG_cjs.accentClasses[accent].marker
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: stage.label }),
+              /* @__PURE__ */ jsxRuntime.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__namespace.useId();
+  const baseId = React__namespace.useId();
+  const [announcement, setAnnouncement] = React__namespace.useState("");
+  const [draggingId, setDraggingId] = React__namespace.useState(null);
+  const [pending, setPending] = React__namespace.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const byId = React__namespace.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) map.set(accessors.getId(item), item);
+    return map;
+  }, [items, accessors]);
+  const stageOf = React__namespace.useCallback(
+    (item) => pending.get(accessors.getId(item)) ?? accessors.getStatus?.(item),
+    [pending, accessors]
+  );
+  const columns = React__namespace.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__namespace.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 = core.useSensors(
+    core.useSensor(core.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "board-view-state",
+      className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-destructive", children: text.error })
+    );
+  }
+  if (loading) {
+    return state(
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(chunkXXVUHLQN_cjs.Spinner, { size: "sm", label: text.loading }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: text.loading })
+      ] })
+    );
+  }
+  if (items.length === 0 && emptyState) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: emptyState });
+  const draggingItem = draggingId ? byId.get(draggingId) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.DndContext,
+    {
+      sensors,
+      collisionDetection: core.pointerWithin,
+      onDragStart,
+      onDragEnd,
+      onDragCancel: () => setDraggingId(null),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "board-view",
+            tabIndex: 0,
+            role: "group",
+            "aria-label": text.board,
+            className: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx(
+              BoardColumn,
+              {
+                stage: column.stage,
+                droppable: column.declared && Boolean(onMove),
+                headerId: `${baseId}-col-${columnIndex}`,
+                count: column.items.length,
+                headingLevel,
+                classNames,
+                children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: chunkS5RVSXDV_cjs.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__ */ jsxRuntime.jsx("li", { className: "text-muted-foreground px-1 py-2 text-xs", children: text.empty })
+                    ]
+                  }
+                )
+              },
+              column.stage.id
+            ))
+          }
+        ),
+        onMove && /* @__PURE__ */ jsxRuntime.jsx("span", { id: hintId, className: "sr-only", children: text.moveHint }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "board-view-announcer",
+            role: "status",
+            "aria-live": "polite",
+            className: "sr-only",
+            children: announcement
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: draggingItem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkS5RVSXDV_cjs.cn(cardVariants({ density }), "shadow-lg"), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground block text-sm font-medium", children: accessors.getTitle(draggingItem) }) }) })
+      ]
+    }
+  );
+}
+
+exports.BoardView = BoardView;
+exports.cardVariants = cardVariants;
+exports.defaultBoardLabels = defaultBoardLabels;
+//# sourceMappingURL=chunk-4IS3QCOQ.cjs.map
+//# sourceMappingURL=chunk-4IS3QCOQ.cjs.map