@danxbot/ui 1.0.0 → 2.1.0

package/dist/theme.css

@@ -0,0 +1,276 @@
+/* @danxbot/ui — Tailwind theme bridge for consuming applications.
+ *
+ * GENERATED by scripts/postbuild-css.mjs from the @theme blocks in
+ * src/styles/. Do not edit; edit the source stylesheets.
+ *
+ * Import it alongside the compiled stylesheet, after Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@danxbot/ui/theme.css";    <- teaches YOUR build bg-surface etc.
+ *   @import "@danxbot/ui/styles.css";   <- the token values and component CSS
+ *   @import "@danxbot/ui/fonts.css";
+ *
+ * Without this file a consumer's own semantic utilities compile to nothing,
+ * with no error anywhere.
+ */
+
+/* from src/styles/index.css */
+@theme inline {
+  /* --- Surfaces + structure --- */
+  --color-canvas: var(--canvas);
+  --color-canvas-subtle: var(--canvas-subtle);
+  --color-surface: var(--surface);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-inset: var(--surface-inset);
+  --color-surface-hover: var(--surface-hover);
+  --color-surface-active: var(--surface-active);
+  --color-surface-selected: var(--surface-selected);
+
+  --color-border-subtle: var(--border-subtle);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-border-interactive: var(--border-interactive);
+
+  /* --- Content --- */
+  --color-primary: var(--text-primary);
+  --color-secondary: var(--text-secondary);
+  --color-tertiary: var(--text-tertiary);
+  --color-disabled: var(--text-disabled);
+  --color-inverse: var(--text-inverse);
+
+  /* --- Accent (celadon) --- */
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-accent-subtle: var(--accent-subtle);
+  --color-accent-subtle-hover: var(--accent-subtle-hover);
+  --color-accent-border: var(--accent-border);
+  --color-accent-text: var(--accent-text);
+  --color-accent-contrast: var(--accent-contrast);
+
+  /* --- Brand (ember) --- */
+  --color-brand: var(--brand);
+  --color-brand-hover: var(--brand-hover);
+  --color-brand-subtle: var(--brand-subtle);
+  --color-brand-text: var(--brand-text);
+  --color-brand-contrast: var(--brand-contrast);
+
+  /* --- Status --- */
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-success-text: var(--success-text);
+  --color-success-border: var(--success-border);
+
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-warning-text: var(--warning-text);
+  --color-warning-border: var(--warning-border);
+
+  --color-danger: var(--danger);
+  --color-danger-hover: var(--danger-hover);
+  --color-danger-subtle: var(--danger-subtle);
+  --color-danger-text: var(--danger-text);
+  --color-danger-border: var(--danger-border);
+  --color-danger-contrast: var(--danger-contrast);
+
+  --color-info: var(--info);
+  --color-info-subtle: var(--info-subtle);
+  --color-info-text: var(--info-text);
+  --color-info-border: var(--info-border);
+
+  /* --- Fields --- */
+  --color-field: var(--field-bg);
+  --color-field-hover: var(--field-bg-hover);
+  --color-field-border: var(--field-border);
+  --color-field-border-hover: var(--field-border-hover);
+  --color-field-placeholder: var(--field-placeholder);
+
+  --color-scrim: var(--scrim);
+  --color-veil: var(--veil);
+  --color-focus-halo: var(--focus-halo);
+  --color-control-knob: var(--control-knob);
+  --color-control-knob-on: var(--control-knob-on);
+  --color-switch-track-off: var(--switch-track-off);
+  --color-focus-ring: var(--focus-ring);
+
+  /* --- Type --- */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  --text-2xs: var(--text-2xs);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-md: var(--text-md);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --text-3xl: var(--text-3xl);
+  --text-4xl: var(--text-4xl);
+  --text-5xl: var(--text-5xl);
+
+  /* Remap Tailwind's weight utilities onto the non-integer ramp, so
+     `font-medium` / `font-bold` pick up 510 / 680 rather than 500 / 700. */
+  --font-weight-normal: var(--weight-normal);
+  --font-weight-medium: var(--weight-medium);
+  --font-weight-semibold: var(--weight-semibold);
+  --font-weight-bold: var(--weight-bold);
+
+  --leading-tight: var(--leading-tight);
+  --leading-snug: var(--leading-snug);
+  --leading-normal: var(--leading-normal);
+  --leading-relaxed: var(--leading-relaxed);
+
+  --tracking-tighter: var(--tracking-tighter);
+  --tracking-tight: var(--tracking-tight);
+  --tracking-normal: var(--tracking-normal);
+  --tracking-wide: var(--tracking-wide);
+  --tracking-widest: var(--tracking-widest);
+
+  /* --- Shape --- */
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+
+  /* --- Control heights, exposed as sizing utilities (h-control-md etc.) --- */
+  /* Tailwind's spacing BASE, retargeted through the size multiplier.
+     This one line is what makes every `p-4`, `gap-3`, `size-5` in every
+     component respond to the size control — without it the utilities keep
+     Tailwind's fixed 0.25rem and only the hand-written control heights move,
+     which is why the first version of the control read as "changes padding
+     slightly" and nothing else. */
+  --spacing: calc(0.25rem * var(--ui-scale));
+
+  --spacing-control-xs: var(--control-xs);
+  --spacing-control-sm: var(--control-sm);
+  --spacing-control-md: var(--control-md);
+  --spacing-control-lg: var(--control-lg);
+  --spacing-control-xl: var(--control-xl);
+
+  /* --- Elevation --- */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-tooltip: var(--shadow-tooltip);
+  --shadow-glow-accent: var(--shadow-glow-accent);
+
+  /* --- Motion ---
+     The curves, durations and `animate-*` utilities are owned by motion.css,
+     which declares them directly in Tailwind's own namespaces. All that is
+     left here is retargeting the framework's bare `transition` default off
+     its Material-1-era `cubic-bezier(0.4, 0, 0.2, 1)` @ 150ms.              */
+  --default-transition-duration: var(--dur-base);
+  --default-transition-timing-function: var(--ease-standard);
+}
+
+/* from src/styles/tokens.css */
+@theme inline {
+  --color-surface-selected-hover: var(--surface-selected-hover);
+  --color-danger-subtle-hover: var(--danger-subtle-hover);
+}
+
+/* from src/styles/motion.css */
+@theme static {
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* on-screen to on-screen  */
+  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);   /* decelerate IN           */
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);       /* accelerate OUT          */
+  --ease-emphasis: cubic-bezier(0.05, 0.7, 0.1, 1);
+  /* y1 = 1: hits full speed instantly, then decelerates. This is why hover
+     feedback with it reads as instantaneous. */
+  --ease-hover: cubic-bezier(0.4, 1, 0.6, 1);
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-strong: cubic-bezier(0.32, 0, 0.67, 0);
+
+  /* --- Springs, baked as linear() ---------------------------------------
+     Generated by integrating the damped-spring ODE and sampling 50 points.
+     Fewer than ~25 points reads robotic; 50 is indistinguishable from a real
+     spring.
+
+     KEY PROPERTY: a linear() curve encodes SHAPE ONLY — it is a function of
+     the damping ratio alone. Replaying it over any duration yields a real,
+     physically-valid spring. So there is one curve per damping ratio, and
+     duration stays a free parameter chosen from the bands below.
+
+     Zero JS. A JS spring runtime costs 35-40 KB to do what these do free. */
+
+  /* zeta 0.751 — 2.8% overshoot. The UI default. */
+  --ease-snappy: linear(0, 0.0118, 0.0436, 0.0903, 0.1478, 0.2123, 0.281,
+    0.3513, 0.4214, 0.4896, 0.5549, 0.6164, 0.6734, 0.7257, 0.773, 0.8154,
+    0.853, 0.8858, 0.9143, 0.9386, 0.9591, 0.9762, 0.9901, 1.0013, 1.0101,
+    1.0168, 1.0216, 1.025, 1.027, 1.028, 1.0282, 1.0276, 1.0266, 1.0252,
+    1.0235, 1.0216, 1.0197, 1.0177, 1.0157, 1.0138, 1.012, 1.0103, 1.0087,
+    1.0073, 1.006, 1.0049, 1.0038, 1.003, 1.0022, 1.0015, 1);
+
+  /* zeta 1.000 — critically damped, ZERO overshoot. Use where overshoot would
+     lie: progress, numeric values, destructive confirmations. */
+  --ease-smooth: linear(0, 0.0151, 0.0535, 0.107, 0.1694, 0.2361, 0.304,
+    0.3707, 0.4346, 0.4949, 0.551, 0.6025, 0.6494, 0.6918, 0.7299, 0.7638,
+    0.7941, 0.8208, 0.8444, 0.8651, 0.8832, 0.8991, 0.913, 0.925, 0.9354,
+    0.9445, 0.9524, 0.9591, 0.965, 0.97, 0.9743, 0.9781, 0.9813, 0.984,
+    0.9864, 0.9884, 0.9901, 0.9916, 0.9928, 0.9939, 0.9948, 0.9956, 0.9963,
+    0.9968, 0.9973, 0.9977, 0.9981, 0.9984, 0.9986, 0.9988, 1);
+
+  /* zeta 0.400 — 25.3% overshoot. Rare, deliberate delight only. */
+  --ease-bouncy: linear(0, 0.0552, 0.1966, 0.3883, 0.5977, 0.7985, 0.9716,
+    1.1054, 1.1955, 1.243, 1.2533, 1.2343, 1.1953, 1.1451, 1.0919, 1.042,
+    0.9998, 0.968, 0.9472, 0.9371, 0.9361, 0.9421, 0.9527, 0.9658, 0.9792,
+    0.9916, 1.0018, 1.0094, 1.0141, 1.0162, 1.016, 1.0142, 1.0114, 1.008,
+    1.0046, 1.0016, 0.9991, 0.9973, 0.9963, 0.9959, 0.996, 0.9965, 0.9973,
+    0.9981, 0.999, 0.9997, 1.0003, 1.0007, 1.001, 1.0011, 1);
+
+  /* zeta 0.899 — 0.2% overshoot. A kiss of spring, for large surfaces. */
+  --ease-gentle: linear(0, 0.0128, 0.0462, 0.0941, 0.1516, 0.2146, 0.2804,
+    0.3465, 0.4112, 0.4734, 0.5321, 0.5869, 0.6375, 0.6837, 0.7255, 0.7631,
+    0.7966, 0.8264, 0.8526, 0.8756, 0.8955, 0.9129, 0.9278, 0.9406, 0.9515,
+    0.9607, 0.9685, 0.975, 0.9804, 0.9849, 0.9886, 0.9916, 0.994, 0.996,
+    0.9975, 0.9987, 0.9996, 1.0003, 1.0008, 1.0011, 1.0014, 1.0015, 1.0016,
+    1.0016, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1);
+
+  /* Pen curve for the checkbox tick: slows at the stroke's corner (29.5% of
+     duration, dipping to 52% speed) and decelerates into the tip. Tuned to
+     the specific path `M5 12.5 L10 17.5 L19 7`, whose corner sits at 33.83%
+     of arc length — regenerate for a different path. */
+  --ease-pen: linear(0, 0.0426, 0.085, 0.1271, 0.1683, 0.2077, 0.2443, 0.2766,
+    0.3043, 0.3282, 0.3507, 0.3743, 0.4012, 0.4319, 0.4657, 0.5012, 0.5374,
+    0.5735, 0.609, 0.6438, 0.6776, 0.7106, 0.7427, 0.7737, 0.8037, 0.8325,
+    0.8602, 0.8868, 0.9121, 0.9361, 0.9588, 0.9801, 1);
+}
+
+/* from src/styles/motion.css */
+@theme static {
+  --animate-fade-in: dx-fade-in var(--dur-base) var(--ease-entrance) both;
+  --animate-rise-in: dx-rise-in var(--dur-base) var(--ease-entrance) both;
+  --animate-scale-in: dx-scale-in var(--dur-fast) var(--ease-snappy) both;
+  --animate-fade-out: dx-fade-in var(--dur-exit) var(--ease-exit) reverse both;
+
+  /* The 500ms delay is deliberate — a skeleton sits still before it starts
+     breathing, which reads as composed rather than instantly agitated. */
+  --animate-pulse: dx-pulse 1.8s var(--ease-standard) 0.5s infinite;
+  --animate-sweep: dx-sweep 1.6s var(--ease-standard) infinite;
+  /* A spinner is the one animation someone WATCHES rather than glances at, and
+     a fast one reads as frantic — it makes a two-second wait feel like the app
+     is struggling. Slow enough to look composed, fast enough to look alive.
+
+     The two rates are deliberately not multiples of each other: 1.4s against
+     2.2s means the arc's growth lands in a different place on every rotation,
+     so the motion never settles into a pattern the eye can predict and start
+     ignoring. */
+  --animate-spin: dx-spin 1.4s linear infinite;
+  --animate-spinner-dash: dx-spinner-dash 2.2s var(--ease-standard) infinite;
+
+  /* Live TEXT — "Thinking…", "Ran 3 commands". Distinct from the skeleton
+     sweep above, which stands in for content that has not arrived; this one
+     marks content that IS here and still changing. Slow, because it sits
+     beside prose someone is reading and a fast highlight travelling through a
+     sentence makes it harder to read, not more obviously alive. */
+  --animate-shimmer: dx-shimmer 2.4s var(--ease-standard) infinite;
+}

package/dist/types/components/provenance/ConfidenceMeter.d.ts

@@ -0,0 +1,15 @@
+export interface ConfidenceMeterProps {
+    /** 0..1, or null when nothing scored it. */
+    confidence: number | null;
+    /**
+     * What to say when there is no score.
+     *
+     * Rendered as text rather than an empty bar, because a bar at zero and a bar
+     * with nothing to show look identical and mean opposite things.
+     */
+    unscoredLabel?: string;
+    /** Hides the band name, for dense rows where the bar is enough. */
+    compact?: boolean;
+    className?: string;
+}
+export declare function ConfidenceMeter({ confidence, unscoredLabel, compact, className, }: ConfidenceMeterProps): import("react").JSX.Element;

package/dist/types/components/provenance/ProvenanceBadge.d.ts

@@ -0,0 +1,12 @@
+import type { ProvenanceState } from "./types";
+export interface ProvenanceBadgeProps {
+    state: ProvenanceState;
+    /** Render the badge even for states that are quiet by default. */
+    alwaysShow?: boolean;
+    size?: "sm" | "md";
+    className?: string;
+}
+export declare function ProvenanceBadge({ state, alwaysShow, size, className, }: ProvenanceBadgeProps): import("react").JSX.Element | null;
+/** The words this library uses for each state. Exported so a consumer's own
+    filters and legends read the same as its badges. */
+export declare function provenanceStateLabel(state: ProvenanceState): string;

package/dist/types/components/provenance/ProvenanceDisclosure.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { ProvenanceRecord } from "./types";
+export interface ProvenanceDisclosureProps {
+    record: ProvenanceRecord;
+    /**
+     * Rendered at the foot of the panel — sign-off, correction, "open the source".
+     *
+     * A slot rather than props, because the actions a consumer offers over an
+     * extracted value are theirs: this library has no idea who is allowed to sign
+     * one, or what correcting it should do.
+     */
+    actions?: ReactNode;
+    /** Shown in place of the value when there is none and it did not fail. */
+    emptyLabel?: string;
+    /** Shown in place of the value when the viewer may not see it. */
+    redactedLabel?: string;
+    className?: string;
+}
+export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, className, }: ProvenanceDisclosureProps): import("react").JSX.Element;

package/dist/types/components/provenance/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./ConfidenceMeter";
+export * from "./ProvenanceBadge";
+export * from "./ProvenanceDisclosure";

package/dist/types/components/provenance/types.d.ts

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+export type ProvenanceState = 
+/** Machine-extracted, and the check passed. */
+"verified"
+/** A person signed it — on top of the machine's verdict, never instead. */
+ | "human"
+/** Extracted, but nothing confirmed it. The value stands, flagged. */
+ | "unverified"
+/** The check actively failed. There is no value. */
+ | "failed";
+/** Where a value came from, precisely enough to go and look. */
+export interface ProvenanceSource {
+    /** The thing it came from — a document title, a URL, a table name. */
+    label: string;
+    /** Where inside it: "page 4", "line 82", "§3.1". Null when there is no locus. */
+    locus: string | null;
+    /** The exact text at that locus. */
+    quote: string | null;
+}
+/**
+ * The verdict of whatever check the consumer ran.
+ *
+ * `passed` is a tri-state on purpose: `true`, `false`, and `null` for "no check
+ * was run" — which is a different claim from "a check ran and failed", and
+ * collapsing the two would let an unchecked value read as a passing one.
+ */
+export interface ProvenanceCheck {
+    passed: boolean | null;
+    /** How it was checked, or why it could not be. */
+    detail: string;
+}
+/** The model call that produced the value. */
+export interface ProvenanceCall {
+    model: string;
+    tokensIn: number;
+    tokensOut: number;
+    latencyMs: number;
+}
+/** A person's signature over the value. */
+export interface ProvenanceSignoff {
+    by: string;
+    at: string;
+    note: string | null;
+    /**
+     * What the value was before they changed it.
+     *
+     * Null when they signed without correcting. Present means the value was
+     * replaced — and the original is kept, because a correction whose previous
+     * value is gone is an assertion rather than a record.
+     */
+    replaced: string | null;
+}
+export interface ProvenanceRecord {
+    /** What this value IS. Always shown, even when the value is hidden. */
+    label: string;
+    /** Null when it failed, or when the viewer may not see it. */
+    value: ReactNode | null;
+    state: ProvenanceState;
+    /** 0..1. Null when nothing scored it. */
+    confidence: number | null;
+    source: ProvenanceSource | null;
+    reasoning: string | null;
+    check: ProvenanceCheck | null;
+    call: ProvenanceCall | null;
+    signoff: ProvenanceSignoff | null;
+    /**
+     * Withheld from this viewer.
+     *
+     * Distinct from a null value: the label and the verification state still
+     * render, so a reader can see that a value EXISTS and was checked without
+     * seeing it. Hiding the row entirely would make the record look thinner than
+     * it is to the person least able to tell.
+     */
+    redacted?: boolean;
+}
+/** 0..1 to a band. A bare percentage invites false precision. */
+export type ConfidenceBand = "high" | "moderate" | "low";
+export declare function confidenceBand(confidence: number): ConfidenceBand;

package/dist/types/components/roadmap/RoadmapItemCard.d.ts

@@ -1,5 +1,5 @@
 import { type BadgeProps } from "../Badge";
-import type { Domain, Phase, RoadmapItem, RoadmapItemStatus, UseCase, UseCaseStatus } from "./types";
+import type { Domain, Phase, RoadmapItem, RoadmapItemStatus, Track, UseCase, UseCaseStatus } from "./types";
 export declare const ROADMAP_ITEM_STATUS_BADGE: Record<RoadmapItemStatus, {
     tone: BadgeProps["tone"];
     label: string;
@@ -22,11 +22,18 @@ export interface RoadmapItemCardProps {
         more, so a caller handing it the wrong slice silently mis-derives status
         rather than the card silently re-filtering a different assumption. */
     useCases: UseCase[];
+    /** The consumer's build tracks, in display order. Threaded straight through
+        to every `UseCaseCard`, and used for this item's own status rollup —
+        "shipped" means every live use case is verified AND built on all of them,
+        so an item cannot report shipped off a built interface alone. */
+    tracks: readonly Track[];
     /** Forwarded to each `UseCaseCard`'s `onStatusChange` as
         `onUseCaseStatusChange(useCase.ref, status)`. Omitted (the default,
         `RoadmapSwimlaneBoard`'s customer-facing use) keeps every `UseCaseCard`
         read-only — see `UseCaseCard`'s own `onStatusChange` doc. */
     onUseCaseStatusChange?: (ref: string, status: UseCaseStatus) => void;
+    /** Same forwarding as `onUseCaseStatusChange`, for the build chips. */
+    onUseCaseBuiltChange?: (ref: string, trackId: string, built: boolean) => void;
     defaultExpanded?: boolean;
     className?: string;
 }
@@ -42,4 +49,4 @@ export interface RoadmapItemCardProps {
  * may reasonably want to add its OWN click behaviour (e.g. deep-linking) later
  * without fighting this one for the same element.
  */
-export declare function RoadmapItemCard({ item, domain, domainIndex, phase, phaseIndex, useCases, onUseCaseStatusChange, defaultExpanded, className, }: RoadmapItemCardProps): import("react").JSX.Element;
+export declare function RoadmapItemCard({ item, domain, domainIndex, phase, phaseIndex, useCases, tracks, onUseCaseStatusChange, onUseCaseBuiltChange, defaultExpanded, className, }: RoadmapItemCardProps): import("react").JSX.Element;

package/dist/types/components/roadmap/RoadmapPage.d.ts

@@ -1,9 +1,12 @@
-import type { Domain, Phase, RoadmapItem, UseCase } from "./types";
+import type { Domain, Phase, RoadmapItem, Track, UseCase } from "./types";
 export interface RoadmapPageProps {
     domains: Domain[];
     phases: Phase[];
     items: RoadmapItem[];
     useCases: UseCase[];
+    /** Passed straight through — see `RoadmapSwimlaneBoard` for why the build
+        tracks stay visible on the customer-facing board. */
+    tracks: Track[];
     className?: string;
 }
-export declare function RoadmapPage({ domains, phases, items, useCases, className }: RoadmapPageProps): import("react").JSX.Element;
+export declare function RoadmapPage({ domains, phases, items, useCases, tracks, className, }: RoadmapPageProps): import("react").JSX.Element;

package/dist/types/components/roadmap/RoadmapSwimlaneBoard.d.ts

@@ -1,9 +1,15 @@
-import type { Domain, Phase, RoadmapItem, UseCase } from "./types";
+import type { Domain, Phase, RoadmapItem, Track, UseCase } from "./types";
 export interface RoadmapSwimlaneBoardProps {
     domains: Domain[];
     phases: Phase[];
     items: RoadmapItem[];
     useCases: UseCase[];
+    /** The consumer's build tracks — shown on every use case here too, NOT
+        hidden from the customer-facing view. It is tempting to drop the second
+        track from a prospect's board, and it is the wrong instinct: "the
+        interface is built and the service behind it lands on this date" is a
+        stronger and more honest thing to show than a single ambiguous tick. */
+    tracks: readonly Track[];
     className?: string;
 }
-export declare function RoadmapSwimlaneBoard({ domains, phases, items, useCases, className, }: RoadmapSwimlaneBoardProps): import("react").JSX.Element;
+export declare function RoadmapSwimlaneBoard({ domains, phases, items, useCases, tracks, className, }: RoadmapSwimlaneBoardProps): import("react").JSX.Element;

package/dist/types/components/roadmap/TrackManager.d.ts

@@ -0,0 +1,19 @@
+import type { Track, UseCase } from "./types";
+export interface TrackManagerProps {
+    tracks: Track[];
+    /** Read-only — used only to compute progress and the delete guard below. */
+    useCases: UseCase[];
+    /** `order` is pre-computed by this component (next after the current max)
+        so the caller only has to assign an id and persist. */
+    onCreate: (track: {
+        name: string;
+        order: number;
+    }) => void;
+    onRename: (id: string, name: string) => void;
+    /** The full track list, reordered and renumbered (`order` === new index) —
+        the caller persists each row's new `order`, e.g. one `update` per id. */
+    onReorder: (tracks: Track[]) => void;
+    onDelete: (id: string) => void;
+    className?: string;
+}
+export declare function TrackManager({ tracks, useCases, onCreate, onRename, onReorder, onDelete, className, }: TrackManagerProps): import("react").JSX.Element;

package/dist/types/components/roadmap/UseCaseCard.d.ts

@@ -1,6 +1,16 @@
-import type { UseCase, UseCaseStatus } from "./types";
+import type { Track, UseCase, UseCaseStatus } from "./types";
 export interface UseCaseCardProps {
     useCase: UseCase;
+    /**
+     * The build tracks to report against, in display order — the consumer's own
+     * list, whatever it named them. A track absent from `useCase.built` reads as
+     * not built.
+     *
+     * Required rather than optional: a card that silently renders no build state
+     * because a caller forgot the prop is exactly the "looks finished, says
+     * nothing" failure the ledger exists to prevent.
+     */
+    tracks: readonly Track[];
     /**
      * Makes `status` user-settable: supplying this swaps the read-only status
      * Badge for a `Select`. Omitted (the default) keeps the Badge — so
@@ -9,6 +19,12 @@ export interface UseCaseCardProps {
      * because this component knows how to be one.
      */
     onStatusChange?: (status: UseCaseStatus) => void;
+    /**
+     * Same opt-in shape as `onStatusChange`, for the build chips: supply it and
+     * each track chip becomes a toggle button; omit it and they stay plain
+     * badges. The customer-facing roadmap omits it.
+     */
+    onBuiltChange?: (trackId: string, built: boolean) => void;
     className?: string;
 }
-export declare function UseCaseCard({ useCase, onStatusChange, className }: UseCaseCardProps): import("react").JSX.Element;
+export declare function UseCaseCard({ useCase, tracks, onStatusChange, onBuiltChange, className, }: UseCaseCardProps): import("react").JSX.Element;

package/dist/types/components/roadmap/UseCaseLedgerPage.d.ts

@@ -1,14 +1,22 @@
-import type { Domain, Phase, RoadmapItem, UseCase, UseCaseStatus } from "./types";
+import type { Domain, Phase, RoadmapItem, Track, UseCase, UseCaseStatus } from "./types";
 export interface UseCaseLedgerPageProps {
     domains: Domain[];
     phases: Phase[];
     items: RoadmapItem[];
     useCases: UseCase[];
+    /** The consumer's build tracks, in display order — every use case reports
+        against all of them, and an item is only "shipped" once each live case is
+        verified and built on every one. Mount `TrackManager` beside this page
+        to manage the list. */
+    tracks: Track[];
     /** Forwarded to every `RoadmapItemCard` -> `UseCaseCard` on this page,
         making every use case's status genuinely user-settable here. Omitted
         keeps every status read-only, the same default `UseCaseCard` itself
         carries. */
     onUseCaseStatusChange?: (ref: string, status: UseCaseStatus) => void;
+    /** Same forwarding, for the build chips: supply it and every track chip on
+        this page becomes a toggle. Omitted keeps them read-only badges. */
+    onUseCaseBuiltChange?: (ref: string, trackId: string, built: boolean) => void;
     className?: string;
 }
 /**
@@ -18,4 +26,4 @@ export interface UseCaseLedgerPageProps {
  * one still "unresolved" because a use case needs a human decision, is
  * supposed to be visible.
  */
-export declare function UseCaseLedgerPage({ domains, phases, items, useCases, onUseCaseStatusChange, className, }: UseCaseLedgerPageProps): import("react").JSX.Element;
+export declare function UseCaseLedgerPage({ domains, phases, items, useCases, tracks, onUseCaseStatusChange, onUseCaseBuiltChange, className, }: UseCaseLedgerPageProps): import("react").JSX.Element;

package/dist/types/components/roadmap/derive.d.ts

@@ -1,4 +1,8 @@
-import type { RoadmapItemStatus, UseCase } from "./types";
+import type { RoadmapItemStatus, Track, UseCase } from "./types";
+/** Built on every track in `trackIds`. An absent key is not built. */
+export declare function isFullyBuilt(useCase: UseCase, trackIds: readonly string[]): boolean;
+/** Built on none of them. */
+export declare function isUnbuilt(useCase: UseCase, trackIds: readonly string[]): boolean;
 /**
  * A RoadmapItem's status is derived from its own UseCases, never hand-set —
  * the same reasoning as any parent whose state depends on its children:
@@ -8,5 +12,28 @@ import type { RoadmapItemStatus, UseCase } from "./types";
  * A goal left with no live cases (everything rejected) is "unresolved" rather
  * than defaulting to "planned", which would misreport a goal that needs a
  * human decision as one that simply hasn't started.
+ *
+ * SHIPPED REQUIRES EVERY TRACK, and that is the point of tracks existing. A
+ * team building its interface ahead of its backend would otherwise roll up to
+ * "shipped" on a screen with nothing behind it — the ledger's single most
+ * damaging possible lie, because "shipped" is exactly the word people stop
+ * checking.
+ *
+ * `trackIds` is required rather than defaulted. There is no sensible default:
+ * an empty list would make `every` vacuously true and quietly restore the old
+ * one-bit behaviour under a new name, which is worse than an argument.
+ */
+export declare function deriveRoadmapItemStatus(useCases: UseCase[], trackIds: readonly string[]): RoadmapItemStatus;
+/** `Track.id`s in display order — what every rollup above wants. */
+export declare function trackIds(tracks: readonly Track[]): string[];
+/**
+ * How far a set of use cases has got along ONE track: `{ built, live }`.
+ *
+ * Counted over live cases only, for the same reason the rollup ignores them:
+ * a rejected case can never be built, so including it would cap every
+ * progress reading below 100% forever.
  */
-export declare function deriveRoadmapItemStatus(useCases: UseCase[]): RoadmapItemStatus;
+export declare function trackProgress(useCases: UseCase[], trackId: string): {
+    built: number;
+    live: number;
+};

package/dist/types/components/roadmap/index.d.ts

@@ -7,3 +7,4 @@ export * from "./RoadmapSwimlaneBoard";
 export * from "./UseCaseLedgerPage";
 export * from "./RoadmapPage";
 export * from "./PhaseManager";
+export * from "./TrackManager";

package/dist/types/components/roadmap/types.d.ts

@@ -31,6 +31,30 @@ export interface RoadmapItem {
     /** Gates whether this item (and its rollup status) appears on the public Roadmap. */
     customerVisible: boolean;
 }
+/**
+ * A build track — an independent axis along which a `UseCase` can be built.
+ *
+ * WHY THIS EXISTS. "Built" is not one bit for most real products. A team that
+ * builds its interface first and the service behind it afterwards needs both
+ * states on the same card, because a screen that works against simulated data
+ * and a screen backed by a real endpoint are different claims, and collapsing
+ * them into one boolean makes the ledger say "shipped" about something with
+ * nothing behind it.
+ *
+ * Consumer-managed, exactly like `Domain` and `Phase`: this library ships no
+ * vocabulary. It does not know what "UI" or "Backend" means, only that some
+ * tracks were named and use cases were marked against them. CRUD lives in
+ * `TrackManager`.
+ *
+ * A consumer with genuinely one axis passes one track, and the ledger reads
+ * the way it always did.
+ */
+export interface Track {
+    id: string;
+    name: string;
+    /** Display/sort order — lower sorts first. */
+    order: number;
+}
 export interface UseCaseDecision {
     timestamp: string;
     note: string;
@@ -46,9 +70,17 @@ export interface UseCase {
     background?: string;
     /** User-managed. Verified and Rejected are the only end states. */
     status: UseCaseStatus;
-    /** Claude-managed. */
-    implemented: boolean;
-    implementedNote?: string;
+    /**
+     * Agent-managed. Keyed by `Track.id`.
+     *
+     * AN ABSENT KEY MEANS NOT BUILT — there is no third state. A tri-state here
+     * ("built" / "not built" / "unknown") would be ambiguity this data does not
+     * actually have: nobody has ever needed to record that they do not know
+     * whether they built something.
+     */
+    built: Record<string, boolean>;
+    /** Optional per-track note — same keying as `built`. */
+    builtNotes?: Record<string, string>;
     /** Append-only decision log — caveats, reversals, "why it landed here". */
     decisions?: UseCaseDecision[];
 }