@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/roadmap/RoadmapItemCard.js

@@ -0,0 +1,96 @@
+import { jsxs as r, jsx as e, Fragment as A } from "react/jsx-runtime";
+import { useState as j, useId as E } from "react";
+import { Badge as i } from "../Badge.js";
+import { Card as F } from "../Card.js";
+import { Icon as R } from "../Icon.js";
+import { cn as d } from "../../lib/cn.js";
+import { toneForIndex as h } from "./chip-tones.js";
+import { deriveRoadmapItemStatus as T, trackIds as _ } from "./derive.js";
+import { UseCaseCard as B } from "./UseCaseCard.js";
+import { useUiStrings as D } from "../../lib/i18n/provider.js";
+import { useNumberFormat as M } from "../../lib/i18n/number-format.js";
+const U = {
+  planned: { tone: "neutral" },
+  "in-progress": { tone: "warning", live: !0 },
+  shipped: { tone: "success" },
+  unresolved: { tone: "danger" }
+};
+function W({
+  item: o,
+  domain: g,
+  domainIndex: v,
+  phase: y,
+  phaseIndex: b,
+  useCases: n,
+  tracks: l,
+  onUseCaseStatusChange: c,
+  onUseCaseBuiltChange: p,
+  defaultExpanded: N = !1,
+  className: w
+}) {
+  const f = D().roadmap, I = M(), [a, S] = j(N), x = T(n, _(l)), s = U[x], u = E();
+  return /* @__PURE__ */ r(F, { variant: "raised", padding: "md", className: d("gap-3", w), children: [
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+      /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ e(i, { size: "sm", tone: "neutral", className: "font-mono", children: o.ref }),
+        /* @__PURE__ */ e("h4", { className: "min-w-0 truncate font-display text-md font-semibold text-primary", children: o.title })
+      ] }),
+      /* @__PURE__ */ e(i, { size: "sm", tone: s.tone, dot: s.live, pulse: s.live, children: f.itemStatus[x] })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ e(i, { size: "sm", tone: h(v), children: g.name }),
+      /* @__PURE__ */ e(i, { size: "sm", tone: h(b), children: y.name })
+    ] }),
+    o.summary && /* @__PURE__ */ e("p", { className: "text-sm text-secondary text-pretty", children: o.summary }),
+    n.length > 0 && /* @__PURE__ */ r(A, { children: [
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          onClick: () => S((t) => !t),
+          "aria-expanded": a,
+          "aria-controls": u,
+          className: d(
+            "dx-tap flex w-fit items-center gap-1.5 rounded-md px-2 py-1",
+            "text-xs font-medium text-tertiary transition-colors duration-(--dur-fast)",
+            "hover:bg-surface-hover hover:text-primary"
+          ),
+          children: [
+            /* @__PURE__ */ e(
+              R,
+              {
+                name: "chevron-right",
+                size: "xs",
+                className: d(
+                  /* The colour half is not optional: naming a transition REPLACES
+                     the global one, so a bare `transition-transform` leaves this
+                     chevron cutting between themes while the label beside it
+                     fades. `audit:motion` counts that, and it was not run when
+                     this shipped. */
+                  "transition-[var(--tx-colors),transform] duration-(--dur-base) ease-snappy",
+                  a && "rotate-90"
+                )
+              }
+            ),
+            f.toggleUseCases(n.length, I(n.length), a)
+          ]
+        }
+      ),
+      a && /* @__PURE__ */ e("div", { id: u, className: "flex flex-col gap-2 border-t border-border-subtle pt-3", children: n.map((t) => /* @__PURE__ */ e(
+        B,
+        {
+          useCase: t,
+          tracks: l,
+          onStatusChange: c ? (m) => c(t.ref, m) : void 0,
+          onBuiltChange: p ? (m, z) => p(t.ref, m, z) : void 0
+        },
+        t.ref
+      )) })
+    ] })
+  ] });
+}
+export {
+  U as ROADMAP_ITEM_STATUS_BADGE,
+  W as RoadmapItemCard
+};
+//# sourceMappingURL=RoadmapItemCard.js.map

package/dist/components/roadmap/RoadmapItemCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoadmapItemCard.js","sources":["../../../src/components/roadmap/RoadmapItemCard.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport { Badge, type BadgeProps } from \"../Badge\";\nimport { Card } from \"../Card\";\nimport { Icon } from \"../Icon\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { toneForIndex } from \"./chip-tones\";\nimport { deriveRoadmapItemStatus, trackIds } from \"./derive\";\nimport type { Domain, Phase, RoadmapItem, RoadmapItemStatus, Track, UseCase, UseCaseStatus } from \"./types\";\nimport { UseCaseCard } from \"./UseCaseCard\";\n\n/* ----------------------------------------------------------------------------\n   ROADMAP ITEM CARD\n\n   Exported so `RoadmapSwimlaneBoard` can label its per-status counts with the\n   same tones without a second lookup table drifting out of sync with this one.\n   Keyed on `RoadmapItemStatus`, a closed 4-value union owned by `types.ts` —\n   fixed structure, not consumer data, so this is not the hardcoded-domain\n   violation the rest of the file works hard to avoid.\n   -------------------------------------------------------------------------- */\nexport const ROADMAP_ITEM_STATUS_BADGE: Record<RoadmapItemStatus, { tone: BadgeProps[\"tone\"]; live?: boolean }> = {\n  planned: { tone: \"neutral\" },\n  \"in-progress\": { tone: \"warning\", live: true },\n  shipped: { tone: \"success\" },\n  unresolved: { tone: \"danger\" },\n};\n\nexport interface RoadmapItemCardProps {\n  item: RoadmapItem;\n  domain: Domain;\n  /** `domain`'s position in the FULL `domains[]` list the caller was handed —\n      computed once by the caller (`domains.findIndex(...)`, or a `.map()`\n      index), never re-derived here. Drives the domain Badge's cycling tone\n      via `toneForIndex`, the same \"the card computes nothing it wasn't\n      explicitly handed\" pattern already used for `useCases` below. */\n  domainIndex: number;\n  phase: Phase;\n  /** Same pattern as `domainIndex`, for `phase`. */\n  phaseIndex: number;\n  /** This item's OWN use cases (already filtered by `goalRef === item.ref`) —\n      the card computes its status from exactly this list and renders nothing\n      more, so a caller handing it the wrong slice silently mis-derives status\n      rather than the card silently re-filtering a different assumption. */\n  useCases: UseCase[];\n  /** The consumer's build tracks, in display order. Threaded straight through\n      to every `UseCaseCard`, and used for this item's own status rollup —\n      \"shipped\" means every live use case is verified AND built on all of them,\n      so an item cannot report shipped off a built interface alone. */\n  tracks: readonly Track[];\n  /** Forwarded to each `UseCaseCard`'s `onStatusChange` as\n      `onUseCaseStatusChange(useCase.ref, status)`. Omitted (the default,\n      `RoadmapSwimlaneBoard`'s customer-facing use) keeps every `UseCaseCard`\n      read-only — see `UseCaseCard`'s own `onStatusChange` doc. */\n  onUseCaseStatusChange?: (ref: string, status: UseCaseStatus) => void;\n  /** Same forwarding as `onUseCaseStatusChange`, for the build chips. */\n  onUseCaseBuiltChange?: (ref: string, trackId: string, built: boolean) => void;\n  defaultExpanded?: boolean;\n  className?: string;\n}\n\n/**\n * A single roadmap item, expandable to reveal the use cases behind it.\n *\n * COLLAPSED BY DEFAULT, REVEALED BY A CLICK — this is the literal \"click a\n * roadmap item to see the use cases inside it\" interaction from the product\n * spec, not a static list that happens to render inside a card. A disclosure\n * button (`aria-expanded` + `aria-controls`) rather than making the whole card\n * clickable: a card-sized hit target with no visible affordance is the classic\n * \"is this a link or a label\" ambiguity, and a card is also where a consumer\n * may reasonably want to add its OWN click behaviour (e.g. deep-linking) later\n * without fighting this one for the same element.\n */\nexport function RoadmapItemCard({\n  item,\n  domain,\n  domainIndex,\n  phase,\n  phaseIndex,\n  useCases,\n  tracks,\n  onUseCaseStatusChange,\n  onUseCaseBuiltChange,\n  defaultExpanded = false,\n  className,\n}: RoadmapItemCardProps) {\n  const strings = useUiStrings().roadmap;\n  const fmt = useNumberFormat();\n  const [expanded, setExpanded] = useState(defaultExpanded);\n  const itemStatus = deriveRoadmapItemStatus(useCases, trackIds(tracks));\n  const status = ROADMAP_ITEM_STATUS_BADGE[itemStatus];\n  const panelId = useId();\n\n  return (\n    <Card variant=\"raised\" padding=\"md\" className={cn(\"gap-3\", className)}>\n      <div className=\"flex flex-wrap items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n          <Badge size=\"sm\" tone=\"neutral\" className=\"font-mono\">\n            {item.ref}\n          </Badge>\n          <h4 className=\"min-w-0 truncate font-display text-md font-semibold text-primary\">\n            {item.title}\n          </h4>\n        </div>\n        <Badge size=\"sm\" tone={status.tone} dot={status.live} pulse={status.live}>\n          {strings.itemStatus[itemStatus]}\n        </Badge>\n      </div>\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {/* Domain and Phase are both open-vocabulary, user-managed lists —\n            neither carries a fixed meaning the way a status enum does, so\n            their tone is cycled by list POSITION rather than hardcoded. Two\n            Badges rather than a Badge + plain text now that Phase is a real\n            managed entity (`types.ts`) and not free text. */}\n        <Badge size=\"sm\" tone={toneForIndex(domainIndex)}>\n          {domain.name}\n        </Badge>\n        <Badge size=\"sm\" tone={toneForIndex(phaseIndex)}>\n          {phase.name}\n        </Badge>\n      </div>\n\n      {item.summary && <p className=\"text-sm text-secondary text-pretty\">{item.summary}</p>}\n\n      {useCases.length > 0 && (\n        <>\n          <button\n            type=\"button\"\n            onClick={() => setExpanded((current) => !current)}\n            aria-expanded={expanded}\n            aria-controls={panelId}\n            className={cn(\n              \"dx-tap flex w-fit items-center gap-1.5 rounded-md px-2 py-1\",\n              \"text-xs font-medium text-tertiary transition-colors duration-(--dur-fast)\",\n              \"hover:bg-surface-hover hover:text-primary\",\n            )}\n          >\n            <Icon\n              name=\"chevron-right\"\n              size=\"xs\"\n              className={cn(\n                /* The colour half is not optional: naming a transition REPLACES\n                   the global one, so a bare `transition-transform` leaves this\n                   chevron cutting between themes while the label beside it\n                   fades. `audit:motion` counts that, and it was not run when\n                   this shipped. */\n                \"transition-[var(--tx-colors),transform] duration-(--dur-base) ease-snappy\",\n                expanded && \"rotate-90\",\n              )}\n            />\n            {strings.toggleUseCases(useCases.length, fmt(useCases.length), expanded)}\n          </button>\n\n          {expanded && (\n            <div id={panelId} className=\"flex flex-col gap-2 border-t border-border-subtle pt-3\">\n              {useCases.map((useCase) => (\n                <UseCaseCard\n                  key={useCase.ref}\n                  useCase={useCase}\n                  tracks={tracks}\n                  onStatusChange={\n                    onUseCaseStatusChange\n                      ? (status) => onUseCaseStatusChange(useCase.ref, status)\n                      : undefined\n                  }\n                  onBuiltChange={\n                    onUseCaseBuiltChange\n                      ? (trackId, built) => onUseCaseBuiltChange(useCase.ref, trackId, built)\n                      : undefined\n                  }\n                />\n              ))}\n            </div>\n          )}\n        </>\n      )}\n    </Card>\n  );\n}\n"],"names":["ROADMAP_ITEM_STATUS_BADGE","RoadmapItemCard","item","domain","domainIndex","phase","phaseIndex","useCases","tracks","onUseCaseStatusChange","onUseCaseBuiltChange","defaultExpanded","className","strings","useUiStrings","fmt","useNumberFormat","expanded","setExpanded","useState","itemStatus","deriveRoadmapItemStatus","trackIds","status","panelId","useId","jsxs","Card","cn","jsx","Badge","toneForIndex","Fragment","current","Icon","useCase","UseCaseCard","trackId","built"],"mappings":"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"}

package/dist/components/roadmap/RoadmapPage.js

@@ -0,0 +1,34 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cn as n } from "../../lib/cn.js";
+import { RoadmapSwimlaneBoard as p } from "./RoadmapSwimlaneBoard.js";
+import { useUiStrings as c } from "../../lib/i18n/provider.js";
+function h({
+  domains: t,
+  phases: o,
+  items: i,
+  useCases: l,
+  tracks: m,
+  className: s
+}) {
+  const a = c().roadmap;
+  return /* @__PURE__ */ r("div", { className: n("flex min-w-0 flex-col gap-6", s), children: [
+    /* @__PURE__ */ r("header", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e("h1", { className: "font-display text-lg font-semibold text-primary", children: a.pageTitle }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-secondary", children: a.pageSubtitle })
+    ] }),
+    /* @__PURE__ */ e(
+      p,
+      {
+        domains: t,
+        phases: o,
+        items: i,
+        useCases: l,
+        tracks: m
+      }
+    )
+  ] });
+}
+export {
+  h as RoadmapPage
+};
+//# sourceMappingURL=RoadmapPage.js.map

package/dist/components/roadmap/RoadmapPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoadmapPage.js","sources":["../../../src/components/roadmap/RoadmapPage.tsx"],"sourcesContent":["import { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { RoadmapSwimlaneBoard } from \"./RoadmapSwimlaneBoard\";\nimport type { Domain, Phase, RoadmapItem, Track, UseCase } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ROADMAP PAGE — the customer-facing shell.\n\n   Deliberately thin: every filtering decision (customer-visibility, the\n   planned/in-progress/shipped columns, dropping \"unresolved\") lives in\n   `RoadmapSwimlaneBoard`. Duplicating even one of those rules here would give\n   the same behaviour two places to drift apart from each other.\n   -------------------------------------------------------------------------- */\n\nexport interface RoadmapPageProps {\n  domains: Domain[];\n  phases: Phase[];\n  items: RoadmapItem[];\n  useCases: UseCase[];\n  /** Passed straight through — see `RoadmapSwimlaneBoard` for why the build\n      tracks stay visible on the customer-facing board. */\n  tracks: Track[];\n  className?: string;\n}\n\nexport function RoadmapPage({\n  domains,\n  phases,\n  items,\n  useCases,\n  tracks,\n  className,\n}: RoadmapPageProps) {\n  const strings = useUiStrings().roadmap;\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-6\", className)}>\n      <header className=\"flex flex-col gap-1\">\n        <h1 className=\"font-display text-lg font-semibold text-primary\">{strings.pageTitle}</h1>\n        <p className=\"text-sm text-secondary\">{strings.pageSubtitle}</p>\n      </header>\n\n      <RoadmapSwimlaneBoard\n        domains={domains}\n        phases={phases}\n        items={items}\n        useCases={useCases}\n        tracks={tracks}\n      />\n    </div>\n  );\n}\n"],"names":["RoadmapPage","domains","phases","items","useCases","tracks","className","strings","useUiStrings","cn","jsxs","jsx","RoadmapSwimlaneBoard"],"mappings":";;;;AAyBO,SAASA,EAAY;AAAA,EAC1B,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAUC,IAAe;AAC/B,2BACG,OAAA,EAAI,WAAWC,EAAG,+BAA+BH,CAAS,GACzD,UAAA;AAAA,IAAA,gBAAAI,EAAC,UAAA,EAAO,WAAU,uBAChB,UAAA;AAAA,MAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,mDAAmD,UAAAJ,EAAQ,WAAU;AAAA,MACnF,gBAAAI,EAAC,KAAA,EAAE,WAAU,0BAA0B,YAAQ,aAAA,CAAa;AAAA,IAAA,GAC9D;AAAA,IAEA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAX;AAAA,QACA,QAAAC;AAAA,QACA,OAAAC;AAAA,QACA,UAAAC;AAAA,QACA,QAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/roadmap/RoadmapSwimlaneBoard.js

@@ -0,0 +1,91 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { Badge as I } from "../Badge.js";
+import { cn as x } from "../../lib/cn.js";
+import { trackIds as R, deriveRoadmapItemStatus as S } from "./derive.js";
+import { ROADMAP_ITEM_STATUS_BADGE as B, RoadmapItemCard as A } from "./RoadmapItemCard.js";
+import { useUiStrings as C } from "../../lib/i18n/provider.js";
+const k = ["planned", "in-progress", "shipped"];
+function E(l) {
+  const r = /* @__PURE__ */ new Map();
+  for (const s of l) {
+    const i = r.get(s.goalRef);
+    i ? i.push(s) : r.set(s.goalRef, [s]);
+  }
+  return r;
+}
+function G(l, r) {
+  const s = l.findIndex((i) => i.id === r);
+  if (s === -1) throw new Error(`No Phase with id "${r}" in the phases[] list.`);
+  return { phase: l[s], index: s };
+}
+function P({
+  domains: l,
+  phases: r,
+  items: s,
+  useCases: i,
+  tracks: f,
+  className: g
+}) {
+  const o = C().roadmap, u = E(i), b = R(f), w = s.filter((e) => e.customerVisible), h = l.map((e, c) => ({
+    domain: e,
+    domainIndex: c,
+    items: w.filter((d) => d.domainSlug === e.slug)
+  })).filter((e) => e.items.length > 0);
+  return h.length === 0 ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: x(
+        "rounded-xl border border-dashed border-border-subtle bg-surface-sunken p-8 text-center",
+        g
+      ),
+      children: /* @__PURE__ */ t("p", { className: "text-sm text-tertiary", children: o.empty })
+    }
+  ) : /* @__PURE__ */ t("div", { className: x("flex min-w-0 flex-col gap-8", g), children: h.map(({ domain: e, domainIndex: c, items: d }) => /* @__PURE__ */ p("section", { "aria-labelledby": `swimlane-${e.slug}`, className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ t(
+      "h3",
+      {
+        id: `swimlane-${e.slug}`,
+        className: "font-display text-md font-semibold text-primary",
+        children: e.name
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: k.map((a) => {
+      const m = d.filter(
+        (n) => S(u.get(n.ref) ?? [], b) === a
+      ), y = B[a].tone;
+      return /* @__PURE__ */ p(
+        "div",
+        {
+          className: "flex min-w-0 flex-col gap-3 rounded-lg bg-surface-sunken p-3",
+          children: [
+            /* @__PURE__ */ p("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ t("span", { className: "text-2xs font-semibold uppercase tracking-widest text-tertiary", children: o.itemStatus[a] }),
+              /* @__PURE__ */ t(I, { size: "sm", tone: y, children: m.length })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex flex-col gap-3", children: m.length === 0 ? /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: o.cellEmpty }) : m.map((n) => {
+              const { phase: N, index: v } = G(r, n.phaseId);
+              return /* @__PURE__ */ t(
+                A,
+                {
+                  item: n,
+                  domain: e,
+                  domainIndex: c,
+                  phase: N,
+                  phaseIndex: v,
+                  useCases: u.get(n.ref) ?? [],
+                  tracks: f
+                },
+                n.ref
+              );
+            }) })
+          ]
+        },
+        a
+      );
+    }) })
+  ] }, e.slug)) });
+}
+export {
+  P as RoadmapSwimlaneBoard
+};
+//# sourceMappingURL=RoadmapSwimlaneBoard.js.map

package/dist/components/roadmap/RoadmapSwimlaneBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoadmapSwimlaneBoard.js","sources":["../../../src/components/roadmap/RoadmapSwimlaneBoard.tsx"],"sourcesContent":["import { Badge } from \"../Badge\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { deriveRoadmapItemStatus, trackIds } from \"./derive\";\nimport { ROADMAP_ITEM_STATUS_BADGE, RoadmapItemCard } from \"./RoadmapItemCard\";\nimport type { Domain, Phase, RoadmapItem, RoadmapItemStatus, Track, UseCase } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   ROADMAP SWIMLANE BOARD — the customer-facing view.\n\n   ONLY THREE COLUMNS EXIST HERE, deliberately omitting \"unresolved\" from the\n   list below rather than rendering it and hiding it with CSS. \"Unresolved\"\n   means a roadmap item has no live (non-rejected) use case backing it — that\n   is an internal signal that someone needs to make a call, not something to\n   show a prospect evaluating the product. Because the column filter below is a\n   plain `status === column.status` match, an unresolved item simply never\n   matches ANY column and drops out on its own — the same \"falls out of the\n   filter naturally\" mechanism that removes an all-internal domain's row,\n   applied one level down. No second special case needed.\n   -------------------------------------------------------------------------- */\n\nconst BOARD_COLUMNS: Exclude<RoadmapItemStatus, \"unresolved\">[] = [\"planned\", \"in-progress\", \"shipped\"];\n\n/** Buckets use cases by their parent item's `ref` once, so an N-item board does\n    N lookups instead of N full scans of the whole use-case list. */\nfunction groupByGoalRef(useCases: UseCase[]): Map<string, UseCase[]> {\n  const byGoal = new Map<string, UseCase[]>();\n  for (const useCase of useCases) {\n    const bucket = byGoal.get(useCase.goalRef);\n    if (bucket) bucket.push(useCase);\n    else byGoal.set(useCase.goalRef, [useCase]);\n  }\n  return byGoal;\n}\n\n/** Same reasoning as `groupByGoalRef` above: a shared helper for a five-line\n    lookup would be more indirection than the duplication it removes. A\n    `RoadmapItem.phaseId` is required — no \"no phase\" state — so a miss here\n    is bad data, not an absent-value case to quietly default around. */\nfunction resolvePhase(phases: Phase[], phaseId: string): { phase: Phase; index: number } {\n  const index = phases.findIndex((phase) => phase.id === phaseId);\n  if (index === -1) throw new Error(`No Phase with id \"${phaseId}\" in the phases[] list.`);\n  return { phase: phases[index], index };\n}\n\nexport interface RoadmapSwimlaneBoardProps {\n  domains: Domain[];\n  phases: Phase[];\n  items: RoadmapItem[];\n  useCases: UseCase[];\n  /** The consumer's build tracks — shown on every use case here too, NOT\n      hidden from the customer-facing view. It is tempting to drop the second\n      track from a prospect's board, and it is the wrong instinct: \"the\n      interface is built and the service behind it lands on this date\" is a\n      stronger and more honest thing to show than a single ambiguous tick. */\n  tracks: readonly Track[];\n  className?: string;\n}\n\nexport function RoadmapSwimlaneBoard({\n  domains,\n  phases,\n  items,\n  useCases,\n  tracks,\n  className,\n}: RoadmapSwimlaneBoardProps) {\n  const strings = useUiStrings().roadmap;\n  const useCasesByGoal = groupByGoalRef(useCases);\n  const ids = trackIds(tracks);\n  const visibleItems = items.filter((item) => item.customerVisible);\n\n  const rows = domains\n    .map((domain, domainIndex) => ({\n      domain,\n      domainIndex,\n      items: visibleItems.filter((item) => item.domainSlug === domain.slug),\n    }))\n    /* A domain with zero customer-visible items renders NO row at all. This is\n       not a guard clause bolted on top — it is what filtering-then-mapping\n       naturally produces, so a domain that is entirely internal (every item in\n       it `customerVisible: false`) simply never appears, with no branch in this\n       file that even mentions \"internal domain\" as a concept. */\n    .filter((row) => row.items.length > 0);\n\n  if (rows.length === 0) {\n    return (\n      <div\n        className={cn(\n          \"rounded-xl border border-dashed border-border-subtle bg-surface-sunken p-8 text-center\",\n          className,\n        )}\n      >\n        <p className=\"text-sm text-tertiary\">{strings.empty}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-8\", className)}>\n      {rows.map(({ domain, domainIndex, items: domainItems }) => (\n        <section key={domain.slug} aria-labelledby={`swimlane-${domain.slug}`} className=\"flex flex-col gap-3\">\n          <h3\n            id={`swimlane-${domain.slug}`}\n            className=\"font-display text-md font-semibold text-primary\"\n          >\n            {domain.name}\n          </h3>\n\n          {/* CSS grid, not a <table> — these are cards grouped into three\n              buckets, not tabular data with row/column relationships a screen\n              reader should announce as a grid. */}\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n            {BOARD_COLUMNS.map((column) => {\n              const cellItems = domainItems.filter(\n                (item) =>\n                  deriveRoadmapItemStatus(useCasesByGoal.get(item.ref) ?? [], ids) === column,\n              );\n              const columnTone = ROADMAP_ITEM_STATUS_BADGE[column].tone;\n\n              return (\n                <div\n                  key={column}\n                  className=\"flex min-w-0 flex-col gap-3 rounded-lg bg-surface-sunken p-3\"\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"text-2xs font-semibold uppercase tracking-widest text-tertiary\">\n                      {strings.itemStatus[column]}\n                    </span>\n                    <Badge size=\"sm\" tone={columnTone}>\n                      {cellItems.length}\n                    </Badge>\n                  </div>\n\n                  <div className=\"flex flex-col gap-3\">\n                    {cellItems.length === 0 ? (\n                      <p className=\"text-xs text-tertiary\">{strings.cellEmpty}</p>\n                    ) : (\n                      cellItems.map((item) => {\n                        const { phase, index: phaseIndex } = resolvePhase(phases, item.phaseId);\n                        return (\n                          <RoadmapItemCard\n                            key={item.ref}\n                            item={item}\n                            domain={domain}\n                            domainIndex={domainIndex}\n                            phase={phase}\n                            phaseIndex={phaseIndex}\n                            useCases={useCasesByGoal.get(item.ref) ?? []}\n                            tracks={tracks}\n                          />\n                        );\n                      })\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </section>\n      ))}\n    </div>\n  );\n}\n"],"names":["BOARD_COLUMNS","groupByGoalRef","useCases","byGoal","useCase","bucket","resolvePhase","phases","phaseId","index","phase","RoadmapSwimlaneBoard","domains","items","tracks","className","strings","useUiStrings","useCasesByGoal","ids","trackIds","visibleItems","item","rows","domain","domainIndex","row","jsx","cn","domainItems","jsxs","column","cellItems","deriveRoadmapItemStatus","columnTone","ROADMAP_ITEM_STATUS_BADGE","Badge","phaseIndex","RoadmapItemCard"],"mappings":"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"}

package/dist/components/roadmap/TrackManager.js

@@ -0,0 +1,58 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Badge as g } from "../Badge.js";
+import { OrderedEntityManager as f } from "../OrderedEntityManager.js";
+import { trackProgress as k } from "./derive.js";
+import { useUiStrings as h } from "../../lib/i18n/provider.js";
+import { useNumberFormat as L } from "../../lib/i18n/number-format.js";
+function B({
+  tracks: s,
+  useCases: n,
+  onCreate: d,
+  onRename: c,
+  onReorder: l,
+  onDelete: m,
+  className: p
+}) {
+  const e = h().trackManager, t = L();
+  function u(a) {
+    const { built: r, live: b } = k(n, a.id), o = r > 0;
+    return {
+      /* Progress is the reading this row exists to give: how far the whole
+         ledger has got along THIS axis. It doubles as the visible reason the
+         delete guard applies, so a disabled button never stands alone
+         without one — unlike `PhaseManager`'s badge, this one is ALWAYS
+         shown, not just while blocked. */
+      badge: /* @__PURE__ */ i(g, { size: "sm", tone: o ? "success" : "neutral", className: "shrink-0 tabular", children: e.progress(r, t(r), t(b)) }),
+      /* The reason used to be folded into `aria-label`, which put it in the
+         NAME slot: it renamed the control for a screen reader and told a
+         sighted user nothing at all, because the natively-disabled button
+         could not be hovered. `disabledReason` keeps the name stable and
+         carries the explanation as a description both audiences can
+         actually reach. */
+      disabledReason: o ? e.deleteBlocked(r, t(r), a.name) : void 0
+    };
+  }
+  return /* @__PURE__ */ i(
+    f,
+    {
+      items: s,
+      title: e.title,
+      description: e.description,
+      emptyMessage: e.empty,
+      addFieldLabel: e.addFieldLabel,
+      addPlaceholder: e.addPlaceholder,
+      containerId: "tracks",
+      containerLabel: e.containerLabel,
+      onCreate: d,
+      onRename: c,
+      onReorder: l,
+      onDelete: m,
+      rowStatus: u,
+      className: p
+    }
+  );
+}
+export {
+  B as TrackManager
+};
+//# sourceMappingURL=TrackManager.js.map

package/dist/components/roadmap/TrackManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackManager.js","sources":["../../../src/components/roadmap/TrackManager.tsx"],"sourcesContent":["import { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { Badge } from \"../Badge\";\nimport { OrderedEntityManager, type OrderedEntityRowStatus } from \"../OrderedEntityManager\";\nimport { trackProgress } from \"./derive\";\nimport type { Track, UseCase } from \"./types\";\n\n/* ============================================================================\n   TRACK MANAGER — dev-only CRUD surface for the `Track` list.\n\n   The sibling of `PhaseManager`, and deliberately built to the same shape: it\n   reads plain props and fires callbacks, with no idea whether a store or a\n   real API is on the other side. Mounted inside `UseCaseLedgerPage`, never\n   `RoadmapPage` — which axes a team builds along is an internal planning\n   concern, even though the resulting build state is shown publicly. The\n   shared state machine and row chrome live in `OrderedEntityManager` (DX-3254)\n   — this file's only job is `rowStatus`, below.\n\n   THE DELETE GUARD IS DIFFERENT FROM PHASE'S, ON PURPOSE. A phase is blocked\n   from deletion by any reference at all, because `RoadmapItem.phaseId` is\n   required and an orphaned id is unrepresentable. A track has no such\n   structural requirement — `UseCase.built` is a map, and a key nobody reads is\n   merely dead, not invalid. So the guard here blocks only on a track that\n   something is actually recorded as BUILT on: deleting that discards a real\n   record of work, which is a decision this component must not make quietly.\n   A track nothing is built on yet is free to delete, and says so by simply\n   enabling the button.\n   ========================================================================= */\n\nexport interface TrackManagerProps {\n  tracks: Track[];\n  /** Read-only — used only to compute progress and the delete guard below. */\n  useCases: UseCase[];\n  /** `order` is pre-computed by this component (next after the current max)\n      so the caller only has to assign an id and persist. */\n  onCreate: (track: { name: string; order: number }) => void;\n  onRename: (id: string, name: string) => void;\n  /** The full track list, reordered and renumbered (`order` === new index) —\n      the caller persists each row's new `order`, e.g. one `update` per id. */\n  onReorder: (tracks: Track[]) => void;\n  onDelete: (id: string) => void;\n  className?: string;\n}\n\nexport function TrackManager({\n  tracks,\n  useCases,\n  onCreate,\n  onRename,\n  onReorder,\n  onDelete,\n  className,\n}: TrackManagerProps) {\n  const strings = useUiStrings().trackManager;\n  const fmt = useNumberFormat();\n  function rowStatus(track: Track): OrderedEntityRowStatus {\n    const { built, live } = trackProgress(useCases, track.id);\n    const blocked = built > 0;\n    return {\n      /* Progress is the reading this row exists to give: how far the whole\n         ledger has got along THIS axis. It doubles as the visible reason the\n         delete guard applies, so a disabled button never stands alone\n         without one — unlike `PhaseManager`'s badge, this one is ALWAYS\n         shown, not just while blocked. */\n      badge: (\n        <Badge size=\"sm\" tone={blocked ? \"success\" : \"neutral\"} className=\"shrink-0 tabular\">\n          {strings.progress(built, fmt(built), fmt(live))}\n        </Badge>\n      ),\n      /* The reason used to be folded into `aria-label`, which put it in the\n         NAME slot: it renamed the control for a screen reader and told a\n         sighted user nothing at all, because the natively-disabled button\n         could not be hovered. `disabledReason` keeps the name stable and\n         carries the explanation as a description both audiences can\n         actually reach. */\n      disabledReason: blocked\n        ? strings.deleteBlocked(built, fmt(built), track.name)\n        : undefined,\n    };\n  }\n\n  return (\n    <OrderedEntityManager\n      items={tracks}\n      title={strings.title}\n      description={strings.description}\n      emptyMessage={strings.empty}\n      addFieldLabel={strings.addFieldLabel}\n      addPlaceholder={strings.addPlaceholder}\n      containerId=\"tracks\"\n      containerLabel={strings.containerLabel}\n      onCreate={onCreate}\n      onRename={onRename}\n      onReorder={onReorder}\n      onDelete={onDelete}\n      rowStatus={rowStatus}\n      className={className}\n    />\n  );\n}\n"],"names":["TrackManager","tracks","useCases","onCreate","onRename","onReorder","onDelete","className","strings","useUiStrings","fmt","useNumberFormat","rowStatus","track","built","live","trackProgress","blocked","Badge","jsx","OrderedEntityManager"],"mappings":";;;;;;AA2CO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAAUC,IAAe,cACzBC,IAAMC,EAAA;AACZ,WAASC,EAAUC,GAAsC;AACvD,UAAM,EAAE,OAAAC,GAAO,MAAAC,EAAA,IAASC,EAAcd,GAAUW,EAAM,EAAE,GAClDI,IAAUH,IAAQ;AACxB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAML,yBACGI,GAAA,EAAM,MAAK,MAAK,MAAMD,IAAU,YAAY,WAAW,WAAU,oBAC/D,UAAAT,EAAQ,SAASM,GAAOJ,EAAII,CAAK,GAAGJ,EAAIK,CAAI,CAAC,GAChD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQF,gBAAgBE,IACZT,EAAQ,cAAcM,GAAOJ,EAAII,CAAK,GAAGD,EAAM,IAAI,IACnD;AAAA,IAAA;AAAA,EAER;AAEA,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOnB;AAAA,MACP,OAAOO,EAAQ;AAAA,MACf,aAAaA,EAAQ;AAAA,MACrB,cAAcA,EAAQ;AAAA,MACtB,eAAeA,EAAQ;AAAA,MACvB,gBAAgBA,EAAQ;AAAA,MACxB,aAAY;AAAA,MACZ,gBAAgBA,EAAQ;AAAA,MACxB,UAAAL;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAM;AAAA,MACA,WAAAL;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/roadmap/UseCaseCard.js

@@ -0,0 +1,93 @@
+import { jsxs as i, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { Accordion as f, AccordionItem as g } from "../Accordion.js";
+import { Badge as d } from "../Badge.js";
+import { Icon as a } from "../Icon.js";
+import { StatusSelect as N } from "../StatusSelect.js";
+import { cn as z } from "../../lib/cn.js";
+import { useUiStrings as y } from "../../lib/i18n/provider.js";
+const c = {
+  pending: { tone: "neutral", icon: /* @__PURE__ */ e(a, { name: "circle-dashed", size: "xs" }) },
+  "in-progress": {
+    tone: "warning",
+    icon: /* @__PURE__ */ e(a, { name: "loader-circle", size: "xs", className: "animate-spin" }),
+    live: !0
+  },
+  verified: { tone: "success", icon: /* @__PURE__ */ e(a, { name: "circle-check", size: "xs" }) },
+  rejected: { tone: "danger", icon: /* @__PURE__ */ e(a, { name: "circle-x", size: "xs" }) }
+};
+function w(r) {
+  return Object.keys(c).map((t) => ({
+    value: t,
+    label: r[t],
+    tone: c[t].tone,
+    icon: c[t].icon,
+    dot: c[t].live,
+    pulse: c[t].live
+  }));
+}
+function F({
+  useCase: r,
+  tracks: t,
+  onStatusChange: m,
+  onBuiltChange: p,
+  className: h
+}) {
+  const l = y().useCaseCard, o = c[r.status];
+  return /* @__PURE__ */ i(
+    "article",
+    {
+      className: z(
+        "flex min-w-0 flex-col gap-2 rounded-lg border border-border-subtle bg-surface-sunken p-3",
+        h
+      ),
+      children: [
+        /* @__PURE__ */ i("header", { className: "flex flex-wrap items-start justify-between gap-2", children: [
+          /* @__PURE__ */ i("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ e(d, { size: "sm", tone: "neutral", className: "font-mono", children: r.ref }),
+            /* @__PURE__ */ e("h5", { className: "min-w-0 truncate text-sm font-semibold text-primary", children: r.title })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "flex shrink-0 flex-wrap items-center gap-1.5", children: [
+            m ? /* @__PURE__ */ e(
+              N,
+              {
+                size: "sm",
+                "aria-label": l.statusFor(r.ref),
+                value: r.status,
+                options: w(l.status),
+                onValueChange: m
+              }
+            ) : /* @__PURE__ */ e(d, { size: "sm", tone: o.tone, icon: o.icon, dot: o.live, pulse: o.live, children: l.status[r.status] }),
+            t.map((n) => {
+              const s = r.built[n.id] === !0, u = l.trackBuilt(n.name, s), x = /* @__PURE__ */ i(b, { children: [
+                /* @__PURE__ */ e(a, { name: s ? "circle-check" : "circle-dashed", size: "xs" }),
+                /* @__PURE__ */ e("span", { "aria-hidden": "true", children: n.name }),
+                /* @__PURE__ */ e("span", { className: "sr-only", children: u })
+              ] });
+              return p ? /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": s,
+                  "aria-label": u,
+                  onClick: () => p(n.id, !s),
+                  className: "dx-tap rounded-full",
+                  children: /* @__PURE__ */ e(d, { size: "sm", tone: s ? "success" : "neutral", className: "gap-1", children: /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ e(a, { name: s ? "circle-check" : "circle-dashed", size: "xs" }),
+                    n.name
+                  ] }) })
+                },
+                n.id
+              ) : /* @__PURE__ */ e(d, { size: "sm", tone: s ? "success" : "neutral", className: "gap-1", children: x }, n.id);
+            })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-secondary text-pretty", children: r.description }),
+        r.background && /* @__PURE__ */ e(f, { className: "-mx-3 -mb-3 border-t border-border-subtle px-3", children: /* @__PURE__ */ e(g, { value: `${r.ref}-background`, title: l.background, className: "border-b-0", children: /* @__PURE__ */ e("p", { className: "text-secondary text-pretty", children: r.background }) }) })
+      ]
+    }
+  );
+}
+export {
+  F as UseCaseCard
+};
+//# sourceMappingURL=UseCaseCard.js.map

package/dist/components/roadmap/UseCaseCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseCaseCard.js","sources":["../../../src/components/roadmap/UseCaseCard.tsx"],"sourcesContent":["import { Accordion, AccordionItem } from \"../Accordion\";\nimport { Badge, type BadgeProps } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { StatusSelect, type StatusOption } from \"../StatusSelect\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport type { Track, UseCase, UseCaseStatus } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   USE-CASE CARD — the leaf of the Domain -> RoadmapItem -> UseCase hierarchy.\n\n   The status/tone table below is keyed on `UseCaseStatus`, which is a closed\n   4-value union OWNED BY THIS LIBRARY (`types.ts`), not consumer data — so this\n   is structure, not the \"never hardcode a domain name\" violation the ledger is\n   built to avoid. A consumer's use-case TITLES and DESCRIPTIONS never appear on\n   the left of a lookup table in this file; only the fixed status enum does.\n\n   \"in-progress\" is the only status that pulses (the Badge) / spins (its icon).\n   Both are reserved for something genuinely live (see Badge's own rationale for\n   `pulse`) — \"pending\" and \"verified\" are settled states, so animating them\n   would just be noise that never turns off.\n   ---------------------------------------------------------------------------- */\n\nconst STATUS_BADGE: Record<\n  UseCaseStatus,\n  { tone: BadgeProps[\"tone\"]; icon: React.ReactNode; live?: boolean }\n> = {\n  pending: { tone: \"neutral\", icon: <Icon name=\"circle-dashed\" size=\"xs\" /> },\n  \"in-progress\": {\n    tone: \"warning\",\n    icon: <Icon name=\"loader-circle\" size=\"xs\" className=\"animate-spin\" />,\n    live: true,\n  },\n  verified: { tone: \"success\", icon: <Icon name=\"circle-check\" size=\"xs\" /> },\n  rejected: { tone: \"danger\", icon: <Icon name=\"circle-x\" size=\"xs\" /> },\n};\n\n/** One source of truth for `StatusSelect`'s option list, so it can never\n    drift out of sync with `STATUS_BADGE`'s tones/icons/labels. */\nfunction statusOptions(labels: Record<UseCaseStatus, string>): StatusOption<UseCaseStatus>[] {\n  return (Object.keys(STATUS_BADGE) as UseCaseStatus[]).map((value) => ({\n    value,\n    label: labels[value],\n    tone: STATUS_BADGE[value].tone,\n    icon: STATUS_BADGE[value].icon,\n    dot: STATUS_BADGE[value].live,\n    pulse: STATUS_BADGE[value].live,\n  }));\n}\n\nexport interface UseCaseCardProps {\n  useCase: UseCase;\n  /**\n   * The build tracks to report against, in display order — the consumer's own\n   * list, whatever it named them. A track absent from `useCase.built` reads as\n   * not built.\n   *\n   * Required rather than optional: a card that silently renders no build state\n   * because a caller forgot the prop is exactly the \"looks finished, says\n   * nothing\" failure the ledger exists to prevent.\n   */\n  tracks: readonly Track[];\n  /**\n   * Makes `status` user-settable: supplying this swaps the read-only status\n   * Badge for a `Select`. Omitted (the default) keeps the Badge — so\n   * `RoadmapPage`'s customer-facing rendering of this card, if it ever\n   * renders one directly, is never forced into an editable control just\n   * because this component knows how to be one.\n   */\n  onStatusChange?: (status: UseCaseStatus) => void;\n  /**\n   * Same opt-in shape as `onStatusChange`, for the build chips: supply it and\n   * each track chip becomes a toggle button; omit it and they stay plain\n   * badges. The customer-facing roadmap omits it.\n   */\n  onBuiltChange?: (trackId: string, built: boolean) => void;\n  className?: string;\n}\n\nexport function UseCaseCard({\n  useCase,\n  tracks,\n  onStatusChange,\n  onBuiltChange,\n  className,\n}: UseCaseCardProps) {\n  const strings = useUiStrings().useCaseCard;\n  const status = STATUS_BADGE[useCase.status];\n\n  return (\n    <article\n      className={cn(\n        \"flex min-w-0 flex-col gap-2 rounded-lg border border-border-subtle bg-surface-sunken p-3\",\n        className,\n      )}\n    >\n      <header className=\"flex flex-wrap items-start justify-between gap-2\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <Badge size=\"sm\" tone=\"neutral\" className=\"font-mono\">\n            {useCase.ref}\n          </Badge>\n          <h5 className=\"min-w-0 truncate text-sm font-semibold text-primary\">{useCase.title}</h5>\n        </div>\n\n        {/* Grouped as one unit so they wrap together rather than the implemented\n            badge ever landing alone on its own line under the status badge. */}\n        <div className=\"flex shrink-0 flex-wrap items-center gap-1.5\">\n          {onStatusChange ? (\n            <StatusSelect\n              size=\"sm\"\n              aria-label={strings.statusFor(useCase.ref)}\n              value={useCase.status}\n              options={statusOptions(strings.status)}\n              onValueChange={onStatusChange}\n            />\n          ) : (\n            <Badge size=\"sm\" tone={status.tone} icon={status.icon} dot={status.live} pulse={status.live}>\n              {strings.status[useCase.status]}\n            </Badge>\n          )}\n          {tracks.map((track) => {\n            const built = useCase.built[track.id] === true;\n            /* THE TRACK NAME IS ALWAYS ON THE CHIP, never just a tick. A bare\n               checkmark makes the reader remember which axis this column was —\n               and the entire reason tracks exist is that two of them disagree,\n               so the one place the name must never be implied is here. */\n            const label = strings.trackBuilt(track.name, built);\n            const content = (\n              <>\n                <Icon name={built ? \"circle-check\" : \"circle-dashed\"} size=\"xs\" />\n                <span aria-hidden=\"true\">{track.name}</span>\n                <span className=\"sr-only\">{label}</span>\n              </>\n            );\n\n            return onBuiltChange ? (\n              <button\n                key={track.id}\n                type=\"button\"\n                aria-pressed={built}\n                aria-label={label}\n                onClick={() => onBuiltChange(track.id, !built)}\n                className=\"dx-tap rounded-full\"\n              >\n                <Badge size=\"sm\" tone={built ? \"success\" : \"neutral\"} className=\"gap-1\">\n                  <span aria-hidden=\"true\" className=\"flex items-center gap-1\">\n                    <Icon name={built ? \"circle-check\" : \"circle-dashed\"} size=\"xs\" />\n                    {track.name}\n                  </span>\n                </Badge>\n              </button>\n            ) : (\n              <Badge key={track.id} size=\"sm\" tone={built ? \"success\" : \"neutral\"} className=\"gap-1\">\n                {content}\n              </Badge>\n            );\n          })}\n        </div>\n      </header>\n\n      <p className=\"text-sm text-secondary text-pretty\">{useCase.description}</p>\n\n      {/* Only rendered when there is something to collapse — an Accordion\n          wrapping empty content would still draw a trigger row for a section\n          that can never say anything. */}\n      {useCase.background && (\n        <Accordion className=\"-mx-3 -mb-3 border-t border-border-subtle px-3\">\n          <AccordionItem value={`${useCase.ref}-background`} title={strings.background} className=\"border-b-0\">\n            <p className=\"text-secondary text-pretty\">{useCase.background}</p>\n          </AccordionItem>\n        </Accordion>\n      )}\n    </article>\n  );\n}\n"],"names":["STATUS_BADGE","jsx","Icon","statusOptions","labels","value","UseCaseCard","useCase","tracks","onStatusChange","onBuiltChange","className","strings","useUiStrings","status","jsxs","cn","Badge","StatusSelect","track","built","label","content","Fragment","Accordion","AccordionItem"],"mappings":"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"}

package/dist/components/roadmap/UseCaseLedgerPage.js

@@ -0,0 +1,98 @@
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import { useState as b, useMemo as h } from "react";
+import { Field as v } from "../Field.js";
+import { Select as w, SelectItem as g } from "../Select.js";
+import { cn as M } from "../../lib/cn.js";
+import { trackIds as D, deriveRoadmapItemStatus as E } from "./derive.js";
+import { RoadmapItemCard as G } from "./RoadmapItemCard.js";
+import { useUiStrings as P } from "../../lib/i18n/provider.js";
+const T = ["all", "planned", "in-progress", "shipped", "unresolved"], x = "all";
+function V(s) {
+  const r = /* @__PURE__ */ new Map();
+  for (const t of s) {
+    const a = r.get(t.goalRef);
+    a ? a.push(t) : r.set(t.goalRef, [t]);
+  }
+  return r;
+}
+function _(s, r) {
+  const t = s.findIndex((a) => a.id === r);
+  if (t === -1) throw new Error(`No Phase with id "${r}" in the phases[] list.`);
+  return { phase: s[t], index: t };
+}
+function J({
+  domains: s,
+  phases: r,
+  items: t,
+  useCases: a,
+  tracks: p,
+  onUseCaseStatusChange: C,
+  onUseCaseBuiltChange: I,
+  className: F
+}) {
+  const N = P(), n = N.useCaseLedger, [m, L] = b(x), [f, R] = b("all"), u = h(() => V(a), [a]), S = h(() => D(p), [p]), y = h(() => s.map((e, c) => ({ domain: e, domainIndex: c })).filter(({ domain: e }) => m === x || e.slug === m).map(({ domain: e, domainIndex: c }) => ({
+    domain: e,
+    domainIndex: c,
+    items: t.filter((d) => d.domainSlug === e.slug).filter((d) => {
+      if (f === "all") return !0;
+      const i = u.get(d.ref) ?? [];
+      return E(i, S) === f;
+    })
+  })).filter((e) => e.items.length > 0), [s, t, m, f, u, S]);
+  return /* @__PURE__ */ o("div", { className: M("flex min-w-0 flex-col gap-6", F), children: [
+    /* @__PURE__ */ o("header", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ l("h1", { className: "font-display text-lg font-semibold text-primary", children: n.title }),
+      /* @__PURE__ */ l("p", { className: "text-sm text-secondary", children: n.subtitle })
+    ] }),
+    /* @__PURE__ */ o("div", { className: "flex flex-wrap items-end gap-3", children: [
+      /* @__PURE__ */ l(v, { label: n.domain, className: "w-48", children: /* @__PURE__ */ o(w, { value: m, onValueChange: (e) => L(String(e)), children: [
+        /* @__PURE__ */ l(g, { value: x, children: n.allDomains }),
+        s.map((e) => /* @__PURE__ */ l(g, { value: e.slug, children: e.name }, e.slug))
+      ] }) }),
+      /* @__PURE__ */ l(v, { label: n.status, className: "w-48", children: /* @__PURE__ */ l(
+        w,
+        {
+          value: f,
+          onValueChange: (e) => R(e),
+          children: T.map((e) => /* @__PURE__ */ l(g, { value: e, children: e === "all" ? n.allStatuses : N.roadmap.itemStatus[e] }, e))
+        }
+      ) })
+    ] }),
+    y.length === 0 ? /* @__PURE__ */ l("p", { className: "text-sm text-tertiary", children: n.noMatch }) : /* @__PURE__ */ l("div", { className: "flex flex-col gap-8", children: y.map(({ domain: e, domainIndex: c, items: d }) => /* @__PURE__ */ o(
+      "section",
+      {
+        "aria-labelledby": `ledger-${e.slug}`,
+        className: "flex flex-col gap-3",
+        children: [
+          /* @__PURE__ */ o("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ l("h2", { id: `ledger-${e.slug}`, className: "font-display text-md font-semibold text-primary", children: e.name }),
+            e.description && /* @__PURE__ */ l("p", { className: "text-sm text-secondary", children: e.description })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "flex flex-col gap-3", children: d.map((i) => {
+            const { phase: U, index: A } = _(r, i.phaseId);
+            return /* @__PURE__ */ l(
+              G,
+              {
+                item: i,
+                domain: e,
+                domainIndex: c,
+                phase: U,
+                phaseIndex: A,
+                useCases: u.get(i.ref) ?? [],
+                tracks: p,
+                onUseCaseStatusChange: C,
+                onUseCaseBuiltChange: I
+              },
+              i.ref
+            );
+          }) })
+        ]
+      },
+      e.slug
+    )) })
+  ] });
+}
+export {
+  J as UseCaseLedgerPage
+};
+//# sourceMappingURL=UseCaseLedgerPage.js.map

package/dist/components/roadmap/UseCaseLedgerPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseCaseLedgerPage.js","sources":["../../../src/components/roadmap/UseCaseLedgerPage.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { Field } from \"../Field\";\nimport { Select, SelectItem } from \"../Select\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiStrings } from \"../../lib/i18n\";\nimport { deriveRoadmapItemStatus, trackIds } from \"./derive\";\nimport { RoadmapItemCard } from \"./RoadmapItemCard\";\nimport type { Domain, Phase, RoadmapItem, RoadmapItemStatus, Track, UseCase, UseCaseStatus } from \"./types\";\n\ntype StatusFilter = \"all\" | RoadmapItemStatus;\n\nconst STATUS_FILTER_VALUES: StatusFilter[] = [\"all\", \"planned\", \"in-progress\", \"shipped\", \"unresolved\"];\n\n// I18N-ALLOW: sentinel filter value meaning every domain\nconst ALL_DOMAINS = \"all\";\n\n/** Buckets use cases by their parent item's `ref` once per render rather than\n    once per item — the same shape `RoadmapSwimlaneBoard` uses, kept local here\n    because a shared helper for a four-line loop would be more indirection than\n    the duplication it removes. */\nfunction groupByGoalRef(useCases: UseCase[]): Map<string, UseCase[]> {\n  const byGoal = new Map<string, UseCase[]>();\n  for (const useCase of useCases) {\n    const bucket = byGoal.get(useCase.goalRef);\n    if (bucket) bucket.push(useCase);\n    else byGoal.set(useCase.goalRef, [useCase]);\n  }\n  return byGoal;\n}\n\n/** Same reasoning as `groupByGoalRef` above: a shared helper for a five-line\n    lookup would be more indirection than the duplication it removes. A\n    `RoadmapItem.phaseId` is required — no \"no phase\" state — so a miss here\n    is bad data, not an absent-value case to quietly default around. */\nfunction resolvePhase(phases: Phase[], phaseId: string): { phase: Phase; index: number } {\n  const index = phases.findIndex((phase) => phase.id === phaseId);\n  if (index === -1) throw new Error(`No Phase with id \"${phaseId}\" in the phases[] list.`);\n  return { phase: phases[index], index };\n}\n\nexport interface UseCaseLedgerPageProps {\n  domains: Domain[];\n  phases: Phase[];\n  items: RoadmapItem[];\n  useCases: UseCase[];\n  /** The consumer's build tracks, in display order — every use case reports\n      against all of them, and an item is only \"shipped\" once each live case is\n      verified and built on every one. Mount `TrackManager` beside this page\n      to manage the list. */\n  tracks: Track[];\n  /** Forwarded to every `RoadmapItemCard` -> `UseCaseCard` on this page,\n      making every use case's status genuinely user-settable here. Omitted\n      keeps every status read-only, the same default `UseCaseCard` itself\n      carries. */\n  onUseCaseStatusChange?: (ref: string, status: UseCaseStatus) => void;\n  /** Same forwarding, for the build chips: supply it and every track chip on\n      this page becomes a toggle. Omitted keeps them read-only badges. */\n  onUseCaseBuiltChange?: (ref: string, trackId: string, built: boolean) => void;\n  className?: string;\n}\n\n/**\n * Dev-facing ledger — the operator's view of EVERYTHING, unlike `RoadmapPage`\n * which filters to `customerVisible` items only. No visibility filtering\n * happens here on purpose: this is the surface where an internal-only item, or\n * one still \"unresolved\" because a use case needs a human decision, is\n * supposed to be visible.\n */\nexport function UseCaseLedgerPage({\n  domains,\n  phases,\n  items,\n  useCases,\n  tracks,\n  onUseCaseStatusChange,\n  onUseCaseBuiltChange,\n  className,\n}: UseCaseLedgerPageProps) {\n  const strings = useUiStrings();\n  const ledger = strings.useCaseLedger;\n  const [domainFilter, setDomainFilter] = useState<string>(ALL_DOMAINS);\n  const [statusFilter, setStatusFilter] = useState<StatusFilter>(\"all\");\n\n  const useCasesByGoal = useMemo(() => groupByGoalRef(useCases), [useCases]);\n  const ids = useMemo(() => trackIds(tracks), [tracks]);\n\n  const rows = useMemo(() => {\n    return domains\n      /* Indexed BEFORE the domain filter narrows the list, so `domainIndex`\n         (and therefore the tone `RoadmapItemCard` cycles from it) reflects\n         each domain's position in the FULL list — stable regardless of which\n         filter is currently applied. */\n      .map((domain, domainIndex) => ({ domain, domainIndex }))\n      .filter(({ domain }) => domainFilter === ALL_DOMAINS || domain.slug === domainFilter)\n      .map(({ domain, domainIndex }) => ({\n        domain,\n        domainIndex,\n        items: items\n          .filter((item) => item.domainSlug === domain.slug)\n          .filter((item) => {\n            if (statusFilter === \"all\") return true;\n            const itemUseCases = useCasesByGoal.get(item.ref) ?? [];\n            return deriveRoadmapItemStatus(itemUseCases, ids) === statusFilter;\n          }),\n      }))\n      .filter((row) => row.items.length > 0);\n  }, [domains, items, domainFilter, statusFilter, useCasesByGoal, ids]);\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-6\", className)}>\n      <header className=\"flex flex-col gap-1\">\n        <h1 className=\"font-display text-lg font-semibold text-primary\">{ledger.title}</h1>\n        <p className=\"text-sm text-secondary\">\n          {ledger.subtitle}\n        </p>\n      </header>\n\n      <div className=\"flex flex-wrap items-end gap-3\">\n        <Field label={ledger.domain} className=\"w-48\">\n          <Select value={domainFilter} onValueChange={(value) => setDomainFilter(String(value))}>\n            <SelectItem value={ALL_DOMAINS}>{ledger.allDomains}</SelectItem>\n            {domains.map((domain) => (\n              <SelectItem key={domain.slug} value={domain.slug}>\n                {domain.name}\n              </SelectItem>\n            ))}\n          </Select>\n        </Field>\n\n        <Field label={ledger.status} className=\"w-48\">\n          <Select\n            value={statusFilter}\n            onValueChange={(value) => setStatusFilter(value as StatusFilter)}\n          >\n            {STATUS_FILTER_VALUES.map((value) => (\n              <SelectItem key={value} value={value}>\n                {value === \"all\" ? ledger.allStatuses : strings.roadmap.itemStatus[value]}\n              </SelectItem>\n            ))}\n          </Select>\n        </Field>\n      </div>\n\n      {rows.length === 0 ? (\n        <p className=\"text-sm text-tertiary\">{ledger.noMatch}</p>\n      ) : (\n        <div className=\"flex flex-col gap-8\">\n          {rows.map(({ domain, domainIndex, items: domainItems }) => (\n            <section\n              key={domain.slug}\n              aria-labelledby={`ledger-${domain.slug}`}\n              className=\"flex flex-col gap-3\"\n            >\n              <div className=\"flex flex-col gap-1\">\n                <h2 id={`ledger-${domain.slug}`} className=\"font-display text-md font-semibold text-primary\">\n                  {domain.name}\n                </h2>\n                {domain.description && <p className=\"text-sm text-secondary\">{domain.description}</p>}\n              </div>\n\n              <div className=\"flex flex-col gap-3\">\n                {domainItems.map((item) => {\n                  const { phase, index: phaseIndex } = resolvePhase(phases, item.phaseId);\n                  return (\n                    <RoadmapItemCard\n                      key={item.ref}\n                      item={item}\n                      domain={domain}\n                      domainIndex={domainIndex}\n                      phase={phase}\n                      phaseIndex={phaseIndex}\n                      useCases={useCasesByGoal.get(item.ref) ?? []}\n                      tracks={tracks}\n                      onUseCaseStatusChange={onUseCaseStatusChange}\n                      onUseCaseBuiltChange={onUseCaseBuiltChange}\n                    />\n                  );\n                })}\n              </div>\n            </section>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["STATUS_FILTER_VALUES","ALL_DOMAINS","groupByGoalRef","useCases","byGoal","useCase","bucket","resolvePhase","phases","phaseId","index","phase","UseCaseLedgerPage","domains","items","tracks","onUseCaseStatusChange","onUseCaseBuiltChange","className","strings","useUiStrings","ledger","domainFilter","setDomainFilter","useState","statusFilter","setStatusFilter","useCasesByGoal","useMemo","ids","trackIds","rows","domain","domainIndex","item","itemUseCases","deriveRoadmapItemStatus","row","cn","jsxs","jsx","Field","Select","value","SelectItem","domainItems","phaseIndex","RoadmapItemCard"],"mappings":"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"}

package/dist/components/roadmap/chip-tones.js

@@ -0,0 +1,9 @@
+const n = ["accent", "brand", "info", "success", "warning", "neutral"];
+function t(e) {
+  return n[e % n.length];
+}
+export {
+  n as CATEGORY_TONES,
+  t as toneForIndex
+};
+//# sourceMappingURL=chip-tones.js.map

package/dist/components/roadmap/chip-tones.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-tones.js","sources":["../../../src/components/roadmap/chip-tones.ts"],"sourcesContent":["/* ----------------------------------------------------------------------------\n   CHIP TONE CYCLING — deterministic by list position, not by name.\n\n   Keying off a stable list INDEX (rather than hashing a slug/name) is what\n   makes two items in the SAME position always agree across renders, with no\n   memoization required and no chance of two differently-spelled names\n   colliding on the same hash bucket. The caller computes the index once from\n   the full list (`domains.findIndex(...)`, or simply a `.map()` index) and\n   hands it down — see `RoadmapItemCard`'s `domainIndex` / `phaseIndex` props.\n\n   `danger` IS DELIBERATELY EXCLUDED. It is already load-bearing for the\n   semantic \"Rejected\" / \"Unresolved\" status Badges a few pixels away on the\n   same card (`UseCaseCard`, `RoadmapItemCard`) — reusing it for \"this happens\n   to be the Nth domain/phase in the list\" would read as an error where none\n   exists.\n   ---------------------------------------------------------------------------- */\n\nexport const CATEGORY_TONES = [\"accent\", \"brand\", \"info\", \"success\", \"warning\", \"neutral\"] as const;\n\nexport function toneForIndex(i: number): (typeof CATEGORY_TONES)[number] {\n  return CATEGORY_TONES[i % CATEGORY_TONES.length];\n}\n"],"names":["CATEGORY_TONES","toneForIndex","i"],"mappings":"AAiBO,MAAMA,IAAiB,CAAC,UAAU,SAAS,QAAQ,WAAW,WAAW,SAAS;AAElF,SAASC,EAAaC,GAA4C;AACvE,SAAOF,EAAeE,IAAIF,EAAe,MAAM;AACjD;"}