@nadicodeai/ui 0.5.2 → 0.5.3

package/AGENTS.md

@@ -26,7 +26,7 @@ skills.
 - **Named shadcn blocks stay named.** When a user, plan, or issue selects a shadcn block/example such as `login-02`, `signup-02`, `dashboard-01`, or `sidebar-*`, use that registry item as the source of truth through shadcn CLI/MCP. Do not replace it with a package-authored abstraction unless the plan explicitly records the substitution, the reason, and the true consumer route that proves it.
 - **Package surface is source-backed.** `src/components/` is intentionally flat shadcn-style source. Do not document folders or package namespaces that do not exist. Do not add top-level exports for recipes, blocks, agent, or terminal groupings unless a later package API decision adds concrete source, built files, docs, and tests in the same change.
 - **Auth routes are consumer-owned shadcn block work.** Login, signup, OTP, two-factor, magic-link, and provider-button flows start from the selected shadcn block/example in the consuming app, with app-owned Better Auth behavior. Do not ship generic auth, signup, OTP, federated-login, or provider abstractions from this package unless a later explicit boundary decision replaces the selected shadcn block.
-- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, AI Elements, brand adapters, React adapters, reusable sections, and presentational product components such as settings, shells, plugin boundaries, installer states, agent chat, artifacts, files, diffs, and redacted terminal summaries. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, customer management, or other product-domain use cases. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions. Those screens live in the consuming app and are built from `@nadicodeai/ui` components and first-party shadcn blocks/examples.
+- **Standard components, not app-owned product features.** This package ships primitives, standard UI components, AI Elements, brand adapters, React adapters, reusable sections, and presentational product components such as settings, shells, plugin boundaries, installer states, agent chat, artifacts, files, diffs, and redacted terminal summaries. It must not ship app-specific feature/use-case screens or names such as operator-login, portal activation, customer credential control, customer management, or other product-domain use cases. Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions. Those screens live in the consuming app and are built from `@nadicodeai/ui` components and first-party shadcn blocks/examples. The console chart kit (`chart-kpi-stat`, `chart-sparkline`, `chart-time-series`, `chart-bullet-bar`, `chart-breakdown-table`, `chart-delta`, `chart-entity-colors`, `chart-date-range`, `chart-date-range-control`) is plan-approved package surface per issue #166 and ADR 0010; chart *cards* — the app screens that arrange these widgets — remain app-owned. Every data-shaped chart names a data alternative (a visually hidden `<table>` twin for the time-series charts, a real `<table>` for `chart-breakdown-table`, an sr-only value list for a standalone `chart-sparkline`); `chart-bullet-bar` (data in `aria-valuetext` plus the visible value) and `chart-kpi-stat` (data in visible text) carry no separate table twin by design.
 - **Design-system geometry remains the foundation.** React components compose the kept `nc-*` page grammar and display CSS components; they do not redefine frame math, marker placement, token values, or raw CSS geometry. Use parent-paints-plus-gap for bordered cell grids and keep every visible seam single-owner.
 - **Reusable sections and compositions live here after proof.** Bento grids, media mounts, demo surfaces, page frames, section intros, CTA bands, proof slots, benefits grids, generic shells, and homepage/use-case sections belong in `@nadicodeai/ui` when a second concrete consumer, a plan-approved shared component, or a named validation slice proves the package boundary. Website, portal, and sibling Nadia routes should pass data and media children into existing compositions instead of rebuilding layout locally.
 - **Brand renderers live here for React consumers.** `BrandMark` is the logo mark, and `BrandWordmark` is the text-only wordmark. A full lockup is exactly one `BrandMark` followed by one `BrandWordmark`; compact mark-only usage uses `BrandMark` alone. These adapters are the only place React code imports the raw `@nadicodeai/design-system/assets/*` logo SVG exports. Website, portal, and sibling routes use these adapters instead of importing logo assets directly, drawing brand SVG inline, masking/recoloring assets, or embedding the mark inside the wordmark.
@@ -94,6 +94,15 @@ Use public component subpaths for product UI:
 - `@nadicodeai/ui/components/agent-tool-approval`
 - `@nadicodeai/ui/components/artifact-panel`
 - `@nadicodeai/ui/components/automation-section`
+- `@nadicodeai/ui/components/chart-breakdown-table`
+- `@nadicodeai/ui/components/chart-bullet-bar`
+- `@nadicodeai/ui/components/chart-date-range`
+- `@nadicodeai/ui/components/chart-date-range-control`
+- `@nadicodeai/ui/components/chart-delta`
+- `@nadicodeai/ui/components/chart-entity-colors`
+- `@nadicodeai/ui/components/chart-kpi-stat`
+- `@nadicodeai/ui/components/chart-sparkline`
+- `@nadicodeai/ui/components/chart-time-series`
 - `@nadicodeai/ui/components/dashboard-shell`
 - `@nadicodeai/ui/components/desktop-shell`
 - `@nadicodeai/ui/components/feedback-state`

package/README.md

@@ -114,7 +114,15 @@ runtime adapters, analytics, and product-specific copy.
 Generic product widgets that shadcn already ships as first-party registry
 source, such as data tables, command palettes, and chart cards, are app-owned
 shadcn block/example adaptations. Do not add a second package abstraction over
-those registry items.
+those registry items. The console chart kit subpaths (`chart-*`) are the
+plan-approved exception (issue #166, ADR 0010): they mechanize the
+design-system dataviz grammar on the Recharts chart foundation, while chart
+cards — the app screens that arrange those widgets — stay app-owned. Every
+data-shaped chart names a data alternative (a visually hidden `<table>` twin for
+the time-series charts, a real `<table>` for `BreakdownTable`, an sr-only value
+list for a standalone `Sparkline`); `BulletBar` and `KpiStat` carry their data
+fully in `aria-valuetext`/visible text and so have no separate table twin by
+design.
 
 Current product subpaths:
 
@@ -125,6 +133,15 @@ Current product subpaths:
 - `@nadicodeai/ui/components/agent-tool-approval`
 - `@nadicodeai/ui/components/artifact-panel`
 - `@nadicodeai/ui/components/automation-section`
+- `@nadicodeai/ui/components/chart-breakdown-table`
+- `@nadicodeai/ui/components/chart-bullet-bar`
+- `@nadicodeai/ui/components/chart-date-range`
+- `@nadicodeai/ui/components/chart-date-range-control`
+- `@nadicodeai/ui/components/chart-delta`
+- `@nadicodeai/ui/components/chart-entity-colors`
+- `@nadicodeai/ui/components/chart-kpi-stat`
+- `@nadicodeai/ui/components/chart-sparkline`
+- `@nadicodeai/ui/components/chart-time-series`
 - `@nadicodeai/ui/components/dashboard-shell`
 - `@nadicodeai/ui/components/desktop-shell`
 - `@nadicodeai/ui/components/feedback-state`

package/dist/components/chart-breakdown-table.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Table } from "./table";
+import { type EntityColorMap } from "./chart-entity-colors";
+/**
+ * chart-breakdown-table — entity breakdown with proportion bars for the
+ * console chart kit (issue #166; DESIGN.md "Entity-color assignment",
+ * proportion-bar carve-out per ADR 0010 D1).
+ *
+ * Real `<table>` semantics: each entity row reads name + value + proportion
+ * bar + share of total, with the entity-color dot resolved from the shared
+ * page-context assignment map. `topN` folds the tail into a single
+ * "everything else" rollup row on the neutral register — never an extra hue.
+ */
+type BreakdownEntity = {
+    /** Stable entity id — the key the entity-color map assigns by. */
+    id: string;
+    label: React.ReactNode;
+    value: number;
+};
+declare function BreakdownTable({ entities, entityColorMap, label, topN, valueFormatter, columnLabels, otherLabel, className, ...props }: Omit<React.ComponentProps<typeof Table>, "children"> & {
+    entities: readonly BreakdownEntity[];
+    /** The shared page-context entity-color assignment map. */
+    entityColorMap: EntityColorMap;
+    /** REQUIRED accessible name, rendered as a visually hidden caption. */
+    label: string;
+    /** Keep the top N entities by value; the rest fold into one rollup row. */
+    topN?: number;
+    valueFormatter?: (value: number) => string;
+    columnLabels?: {
+        entity?: string;
+        value?: string;
+        share?: string;
+    };
+    /** Label for the neutral rollup row. */
+    otherLabel?: React.ReactNode;
+}): React.JSX.Element;
+export { BreakdownTable };
+export type { BreakdownEntity };
+//# sourceMappingURL=chart-breakdown-table.d.ts.map

package/dist/components/chart-breakdown-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-breakdown-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-breakdown-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,EAON,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAA;AAEzC;;;;;;;;;GASG;AAEH,KAAK,eAAe,GAAG;IACrB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAoED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,KAAK,EACL,IAAI,EACJ,cAA8B,EAC9B,YAAY,EACZ,UAA8B,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;IACpC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,YAAY,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,wCAAwC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B,qBAiDA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA;AACzB,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/chart-breakdown-table.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./table.js";
+import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
+function percentOf(value, total) {
+    return total > 0 ? (value / total) * 100 : 0;
+}
+function formatShare(share) {
+    return `${share.toFixed(1)}%`;
+}
+function defaultFormat(value) {
+    return value.toLocaleString("en-US");
+}
+function BreakdownRow({ label, value, share, color, valueFormatter, ...props }) {
+    return (_jsxs(TableRow, { ...props, children: [_jsx(TableCell, { className: "font-medium", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { "data-slot": "breakdown-table-dot", "aria-hidden": "true", className: "size-2 shrink-0 rounded-[2px]", style: { backgroundColor: color } }), label] }) }), _jsx(TableCell, { className: "text-right font-mono tabular-nums", children: valueFormatter(value) }), _jsx(TableCell, { children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { "data-slot": "breakdown-table-bar", "aria-hidden": "true", className: "h-1.5 flex-1 overflow-hidden rounded-[2px] bg-muted", children: _jsx("span", { className: "block h-full rounded-r-[2px]", style: {
+                                    width: `${Number(share.toFixed(3))}%`,
+                                    backgroundColor: color,
+                                } }) }), _jsx("span", { className: "w-12 text-right font-mono text-xs text-muted-foreground tabular-nums", children: formatShare(share) })] }) })] }));
+}
+function BreakdownTable({ entities, entityColorMap, label, topN, valueFormatter = defaultFormat, columnLabels, otherLabel = "Everything else", className, ...props }) {
+    const total = entities.reduce((sum, entity) => sum + entity.value, 0);
+    const sorted = [...entities].sort((a, b) => b.value - a.value);
+    const visible = topN !== undefined && topN < sorted.length ? sorted.slice(0, topN) : sorted;
+    const foldedValue = sorted
+        .slice(visible.length)
+        .reduce((sum, entity) => sum + entity.value, 0);
+    return (_jsxs(Table, { "data-slot": "breakdown-table", className: cn("text-sm", className), ...props, children: [_jsx(TableCaption, { className: "sr-only", children: label }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: columnLabels?.entity ?? "Entity" }), _jsx(TableHead, { className: "text-right", children: columnLabels?.value ?? "Value" }), _jsx(TableHead, { children: columnLabels?.share ?? "Share of total" })] }) }), _jsxs(TableBody, { children: [visible.map((entity) => (_jsx(BreakdownRow, { label: entity.label, value: entity.value, share: percentOf(entity.value, total), color: entityColor(entityColorMap, entity.id), valueFormatter: valueFormatter }, entity.id))), visible.length < sorted.length ? (_jsx(BreakdownRow, { "data-slot": "breakdown-table-other", label: otherLabel, value: foldedValue, share: percentOf(foldedValue, total), color: CHART_ENTITY_OTHER_COLOR, valueFormatter: valueFormatter })) : null] })] }));
+}
+export { BreakdownTable };

package/dist/components/chart-bullet-bar.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+/**
+ * chart-bullet-bar — the cap / included-usage meter for the console chart kit
+ * (issue #166; DESIGN.md "Meter and bullet grammar").
+ *
+ * The bar carries a positional threshold tick at the product-configured
+ * warning fraction (`thresholdFraction` is a REQUIRED consumer input, never a
+ * constant of this component — 0.8 is the common product default) and a cap
+ * tick at 100%. Overflow renders as a distinct segment continuing past the
+ * cap tick, never clamped away. Severity state tokens reinforce position,
+ * never act as the sole signal. The current value reads at the bar tip.
+ *
+ * Accessibility: `role="meter"` with a REQUIRED accessible name (`label`);
+ * `aria-valuenow` clamps to the meter maximum while `aria-valuetext` conveys
+ * the true value including overflow.
+ */
+type BulletBarSeverity = "ok" | "warn" | "over";
+declare function BulletBar({ value, max, thresholdFraction, label, valueFormatter, valueText, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    value: number;
+    /** The cap (included usage / limit) the meter measures against. */
+    max: number;
+    /**
+     * REQUIRED product-configured warning fraction of the cap (0–1) for the
+     * positional threshold tick. 0.8 is the common product default, but the
+     * fraction is a consumer input, never a constant of this contract.
+     */
+    thresholdFraction: number;
+    /** REQUIRED accessible name for the meter. */
+    label: string;
+    valueFormatter?: (value: number) => string;
+    /** Optional override for the generated `aria-valuetext`. */
+    valueText?: string;
+}): React.JSX.Element;
+export { BulletBar };
+export type { BulletBarSeverity };
+//# sourceMappingURL=chart-bullet-bar.d.ts.map

package/dist/components/chart-bullet-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bullet-bar.d.ts","sourceRoot":"","sources":["../../src/components/chart-bullet-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;GAcG;AAEH,KAAK,iBAAiB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;AAgB/C,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,GAAG,EACH,iBAAiB,EACjB,KAAK,EACL,cAA8B,EAC9B,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAA;IACzB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,qBAsFA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/chart-bullet-bar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const BULLET_BAR_VALUE_TONE = {
+    ok: "text-foreground",
+    warn: "text-(--nc-state-review)",
+    over: "text-(--nc-state-blocked)",
+};
+function percent(fraction) {
+    return `${Number((fraction * 100).toFixed(3))}%`;
+}
+function defaultFormat(value) {
+    return value.toLocaleString("en-US");
+}
+function BulletBar({ value, max, thresholdFraction, label, valueFormatter = defaultFormat, valueText, className, ...props }) {
+    const overflow = Math.max(value - max, 0);
+    const total = Math.max(value, max);
+    const fillFraction = total > 0 ? Math.min(value, max) / total : 0;
+    const overflowFraction = total > 0 ? overflow / total : 0;
+    const capFraction = total > 0 ? max / total : 1;
+    const thresholdTickFraction = capFraction * thresholdFraction;
+    const tipFraction = fillFraction + overflowFraction;
+    const severity = overflow > 0 ? "over" : value >= thresholdFraction * max ? "warn" : "ok";
+    const meterValueText = valueText ??
+        `${valueFormatter(value)} of ${valueFormatter(max)}${overflow > 0 ? ` (${valueFormatter(overflow)} over the cap)` : ""}`;
+    return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, className: cn("flex flex-col gap-1", className), ...props, children: [_jsxs("div", { role: "meter", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": Math.min(value, max), "aria-valuetext": meterValueText, className: "relative h-3 w-full", children: [_jsx("div", { "data-slot": "bullet-bar-track", className: "absolute inset-y-0 rounded-r-[4px] bg-(--nc-chart-seq-1)", style: { left: 0, width: percent(capFraction) } }), _jsx("div", { "data-slot": "bullet-bar-fill", className: cn("absolute inset-y-0 bg-(--nc-chart-seq-3)", overflow === 0 && "rounded-r-[4px]"), style: { left: 0, width: percent(fillFraction) } }), overflow > 0 ? (_jsx("div", { "data-slot": "bullet-bar-overflow", className: "absolute inset-y-0 rounded-r-[4px] bg-(--nc-state-blocked)", style: {
+                            left: percent(fillFraction),
+                            width: percent(overflowFraction),
+                        } })) : null, _jsx("div", { "data-slot": "bullet-bar-threshold-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(thresholdTickFraction) } }), _jsx("div", { "data-slot": "bullet-bar-cap-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(capFraction) } })] }), _jsx("div", { className: "relative h-4 w-full text-xs", "aria-hidden": "true", children: _jsx("span", { "data-slot": "bullet-bar-value", className: cn("absolute font-mono whitespace-nowrap tabular-nums", tipFraction > 0.6 && "-translate-x-full", BULLET_BAR_VALUE_TONE[severity]), style: { left: percent(tipFraction) }, children: valueFormatter(value) }) })] }));
+}
+export { BulletBar };

package/dist/components/chart-date-range-control.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { type DateRangePreset, type DateRangeValue } from "./chart-date-range";
+declare function DateRangeControl({ value, onChange, label, presetLabels, customLabel, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    /** Accessible name for the control group. */
+    label?: string;
+    presetLabels?: Partial<Record<DateRangePreset, string>>;
+    customLabel?: string;
+}): React.JSX.Element;
+export { DateRangeControl };
+//# sourceMappingURL=chart-date-range-control.d.ts.map

package/dist/components/chart-date-range-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-date-range-control.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range-control.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAA;AAqBtC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,YAAY,EACZ,WAAsB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IACzC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,qBAmFA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/chart-date-range-control.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "./popover.js";
+import { DATE_RANGE_PRESETS, formatIsoDay, parseIsoDay, } from "./chart-date-range.js";
+/**
+ * chart-date-range-control — the console date-range picker for the chart kit
+ * (issue #166): relative presets (7d / 14d / 30d / this-cycle) plus a custom
+ * calendar range.
+ *
+ * Fully controlled: the consumer owns the value and typically round-trips it
+ * through URL state with `encodeDateRange` / `decodeDateRange` from
+ * `chart-date-range` (kept in a separate server-safe module because the
+ * package owns no routing). Preset buttons expose their pressed state via
+ * `aria-pressed`.
+ */
+const DEFAULT_PRESET_LABELS = {
+    "7d": "7d",
+    "14d": "14d",
+    "30d": "30d",
+    cycle: "This cycle",
+};
+function DateRangeControl({ value, onChange, label = "Date range", presetLabels, customLabel = "Custom", className, ...props }) {
+    const [open, setOpen] = React.useState(false);
+    const [pending, setPending] = React.useState(undefined);
+    const isCustom = value.kind === "custom";
+    const selected = pending ??
+        (isCustom
+            ? { from: parseIsoDay(value.from), to: parseIsoDay(value.to) }
+            : undefined);
+    function handleOpenChange(nextOpen) {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+            setPending(undefined);
+        }
+    }
+    function handleSelect(range) {
+        if (range?.from && range?.to) {
+            setPending(undefined);
+            setOpen(false);
+            onChange({
+                kind: "custom",
+                from: formatIsoDay(range.from),
+                to: formatIsoDay(range.to),
+            });
+            return;
+        }
+        setPending(range);
+    }
+    return (_jsxs("div", { "data-slot": "date-range-control", role: "group", "aria-label": label, className: cn("flex flex-wrap items-center gap-1", className), ...props, children: [DATE_RANGE_PRESETS.map((preset) => {
+                const active = value.kind === "preset" && value.preset === preset;
+                return (_jsx(Button, { size: "sm", variant: active ? "secondary" : "ghost", "aria-pressed": active, onClick: () => onChange({ kind: "preset", preset }), children: presetLabels?.[preset] ?? DEFAULT_PRESET_LABELS[preset] }, preset));
+            }), _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { size: "sm", variant: isCustom ? "secondary" : "ghost", "aria-pressed": isCustom, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), isCustom ? `${value.from} – ${value.to}` : customLabel] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto p-0", children: _jsx(Calendar, { mode: "range", numberOfMonths: 2, defaultMonth: selected?.from, selected: selected, onSelect: handleSelect }) })] })] }));
+}
+export { DateRangeControl };

package/dist/components/chart-date-range.d.ts

@@ -0,0 +1,38 @@
+/**
+ * chart-date-range — the date-range value model and URL-state codec for the
+ * console chart kit (issue #166).
+ *
+ * This module is intentionally server-safe (no "use client" directive): the
+ * package owns no routing, so consumers wire `encodeDateRange` /
+ * `decodeDateRange` to their own searchParams — often in a Server Component,
+ * where importing a pure function from a client module would break. The
+ * interactive picker lives in `chart-date-range-control`.
+ */
+declare const DATE_RANGE_PRESETS: readonly ["7d", "14d", "30d", "cycle"];
+type DateRangePreset = (typeof DATE_RANGE_PRESETS)[number];
+type DateRangeValue = {
+    kind: "preset";
+    preset: DateRangePreset;
+} | {
+    kind: "custom";
+    from: string;
+    to: string;
+};
+/**
+ * Encodes a date-range value for URL state: a preset encodes as its token
+ * ("7d", "cycle", …) and a custom range as "yyyy-mm-dd..yyyy-mm-dd".
+ */
+declare function encodeDateRange(value: DateRangeValue): string;
+/**
+ * Decodes a URL-state string back into a date-range value. Returns null for
+ * anything malformed (unknown preset, bad date shape, inverted range) so
+ * consumers fall back to their own default.
+ */
+declare function decodeDateRange(raw: string | null | undefined): DateRangeValue | null;
+/** Parses a "yyyy-mm-dd" day as a LOCAL date (no timezone shifting). */
+declare function parseIsoDay(iso: string): Date;
+/** Formats a local date as "yyyy-mm-dd". */
+declare function formatIsoDay(date: Date): string;
+export { DATE_RANGE_PRESETS, decodeDateRange, encodeDateRange, formatIsoDay, parseIsoDay, };
+export type { DateRangePreset, DateRangeValue };
+//# sourceMappingURL=chart-date-range.d.ts.map

package/dist/components/chart-date-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-date-range.d.ts","sourceRoot":"","sources":["../../src/components/chart-date-range.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,QAAA,MAAM,kBAAkB,wCAAyC,CAAA;AAEjE,KAAK,eAAe,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE1D,KAAK,cAAc,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,eAAe,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAKhD;;;GAGG;AACH,iBAAS,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAItD;AAED;;;;GAIG;AACH,iBAAS,eAAe,CACtB,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC7B,cAAc,GAAG,IAAI,CAwBvB;AAED,wEAAwE;AACxE,iBAAS,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAGtC;AAED,4CAA4C;AAC5C,iBAAS,YAAY,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAKxC;AAMD,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,YAAY,EACZ,WAAW,GACZ,CAAA;AACD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/chart-date-range.js

@@ -0,0 +1,63 @@
+/**
+ * chart-date-range — the date-range value model and URL-state codec for the
+ * console chart kit (issue #166).
+ *
+ * This module is intentionally server-safe (no "use client" directive): the
+ * package owns no routing, so consumers wire `encodeDateRange` /
+ * `decodeDateRange` to their own searchParams — often in a Server Component,
+ * where importing a pure function from a client module would break. The
+ * interactive picker lives in `chart-date-range-control`.
+ */
+const DATE_RANGE_PRESETS = ["7d", "14d", "30d", "cycle"];
+const ISO_DAY = /^\d{4}-\d{2}-\d{2}$/;
+const CUSTOM_SEPARATOR = "..";
+/**
+ * Encodes a date-range value for URL state: a preset encodes as its token
+ * ("7d", "cycle", …) and a custom range as "yyyy-mm-dd..yyyy-mm-dd".
+ */
+function encodeDateRange(value) {
+    return value.kind === "preset"
+        ? value.preset
+        : `${value.from}${CUSTOM_SEPARATOR}${value.to}`;
+}
+/**
+ * Decodes a URL-state string back into a date-range value. Returns null for
+ * anything malformed (unknown preset, bad date shape, inverted range) so
+ * consumers fall back to their own default.
+ */
+function decodeDateRange(raw) {
+    if (!raw) {
+        return null;
+    }
+    if (DATE_RANGE_PRESETS.includes(raw)) {
+        return { kind: "preset", preset: raw };
+    }
+    const parts = raw.split(CUSTOM_SEPARATOR);
+    if (parts.length !== 2) {
+        return null;
+    }
+    const [from, to] = parts;
+    if (!ISO_DAY.test(from) || !ISO_DAY.test(to) || from > to) {
+        return null;
+    }
+    if (!isRealIsoDay(from) || !isRealIsoDay(to)) {
+        return null;
+    }
+    return { kind: "custom", from, to };
+}
+/** Parses a "yyyy-mm-dd" day as a LOCAL date (no timezone shifting). */
+function parseIsoDay(iso) {
+    const [year, month, day] = iso.split("-").map(Number);
+    return new Date(year, month - 1, day);
+}
+/** Formats a local date as "yyyy-mm-dd". */
+function formatIsoDay(date) {
+    const year = String(date.getFullYear()).padStart(4, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+function isRealIsoDay(iso) {
+    return formatIsoDay(parseIsoDay(iso)) === iso;
+}
+export { DATE_RANGE_PRESETS, decodeDateRange, encodeDateRange, formatIsoDay, parseIsoDay, };

package/dist/components/chart-delta.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * chart-delta — shared delta/trend encoding for the console chart kit
+ * (issue #166; DESIGN.md "Delta and trend encoding").
+ *
+ * A change reads as a direction glyph (▲ ▼) plus a tone token, never bare
+ * signed text and never color alone. Tone follows direction crossed with
+ * whether up is good in the surrounding context (`upIsGood`).
+ */
+type DeltaDirection = "up" | "down" | "flat";
+type DeltaTone = "positive" | "negative" | "neutral";
+/**
+ * Maps a delta direction onto its tone: direction crossed with whether up is
+ * good in this context. A flat delta is always neutral.
+ */
+declare function deltaTone(direction: DeltaDirection, upIsGood?: boolean): DeltaTone;
+declare function Delta({ value, direction, upIsGood, vsLabel, className, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
+    /** The formatted change, e.g. "+12%" or "3.4k". */
+    value: React.ReactNode;
+    direction: DeltaDirection;
+    /** Whether an upward move is good in this context. Defaults to true. */
+    upIsGood?: boolean;
+    /** The named comparison period, rendered as "vs {vsLabel}". */
+    vsLabel?: string;
+}): React.JSX.Element;
+export { Delta, deltaTone };
+export type { DeltaDirection, DeltaTone };
+//# sourceMappingURL=chart-delta.d.ts.map

package/dist/components/chart-delta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-delta.d.ts","sourceRoot":"","sources":["../../src/components/chart-delta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;GAOG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;AAC5C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAA;AAoBpD;;;GAGG;AACH,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,GAAG,SAAS,CAMxE;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,QAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;IACzB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,qBAuBA;AAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA;AAC3B,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/chart-delta.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const DELTA_GLYPHS = {
+    up: "▲",
+    down: "▼",
+    flat: "–",
+};
+const DELTA_DIRECTION_TEXT = {
+    up: "up",
+    down: "down",
+    flat: "unchanged",
+};
+const DELTA_TONE_CLASSES = {
+    positive: "text-(--nc-state-complete)",
+    negative: "text-(--nc-state-blocked)",
+    neutral: "text-muted-foreground",
+};
+/**
+ * Maps a delta direction onto its tone: direction crossed with whether up is
+ * good in this context. A flat delta is always neutral.
+ */
+function deltaTone(direction, upIsGood = true) {
+    if (direction === "flat") {
+        return "neutral";
+    }
+    return (direction === "up") === upIsGood ? "positive" : "negative";
+}
+function Delta({ value, direction, upIsGood = true, vsLabel, className, ...props }) {
+    const tone = deltaTone(direction, upIsGood);
+    return (_jsxs("span", { "data-slot": "delta", "data-direction": direction, "data-tone": tone, className: cn("inline-flex items-baseline gap-1 text-sm font-medium", DELTA_TONE_CLASSES[tone], className), ...props, children: [_jsx("span", { "aria-hidden": "true", children: DELTA_GLYPHS[direction] }), _jsx("span", { className: "sr-only", children: DELTA_DIRECTION_TEXT[direction] }), _jsx("span", { children: value }), vsLabel ? (_jsxs("span", { className: "font-normal text-muted-foreground", children: ["vs ", vsLabel] })) : null] }));
+}
+export { Delta, deltaTone };

package/dist/components/chart-entity-colors.d.ts

@@ -0,0 +1,37 @@
+/**
+ * chart-entity-colors — the entity-color assignment helper for the console
+ * chart kit (issue #166; DESIGN.md "Entity-color assignment").
+ *
+ * Categorical hues assign in fixed order to entities per page context, and the
+ * assignment follows the entity identity, never rank, sort position, or array
+ * index. Callers build ONE map from the full page-context entity list (not a
+ * filtered or re-sorted view) and pass it to every chart widget on that
+ * surface, so a filter or re-sort never repaints the entities that remain on
+ * screen. Beyond six entities the tail folds into a single neutral "other"
+ * register, never a seventh hue.
+ *
+ * The map is a plain serializable record so a Server Component can compute it
+ * and pass it across the RSC boundary to client chart widgets.
+ */
+declare const CHART_ENTITY_COLOR_TOKENS: readonly ["var(--nc-chart-1)", "var(--nc-chart-2)", "var(--nc-chart-3)", "var(--nc-chart-4)", "var(--nc-chart-5)", "var(--nc-chart-6)"];
+/**
+ * The neutral register for folded "everything else" entities. A muted ink
+ * token, never an extra categorical hue.
+ */
+declare const CHART_ENTITY_OTHER_COLOR = "var(--muted-foreground)";
+type EntityColorMap = Readonly<Record<string, string>>;
+/**
+ * Assigns `var(--nc-chart-1..6)` in fixed order by FIRST APPEARANCE of each
+ * stable entity id. Duplicate ids keep their first assignment. Entities past
+ * the sixth unique id fold to the neutral "other" register.
+ */
+declare function createEntityColorMap(entityIds: readonly string[]): EntityColorMap;
+/**
+ * Resolves an entity's assigned color. Ids missing from the map (an entity the
+ * page context never registered) read as the neutral "other" register instead
+ * of silently minting a new hue.
+ */
+declare function entityColor(map: EntityColorMap, entityId: string): string;
+export { CHART_ENTITY_COLOR_TOKENS, CHART_ENTITY_OTHER_COLOR, createEntityColorMap, entityColor, };
+export type { EntityColorMap };
+//# sourceMappingURL=chart-entity-colors.d.ts.map

package/dist/components/chart-entity-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-entity-colors.d.ts","sourceRoot":"","sources":["../../src/components/chart-entity-colors.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,QAAA,MAAM,yBAAyB,yIAOrB,CAAA;AAEV;;;GAGG;AACH,QAAA,MAAM,wBAAwB,4BAA4B,CAAA;AAE1D,KAAK,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAEtD;;;;GAIG;AACH,iBAAS,oBAAoB,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,GAAG,cAAc,CA2B1E;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,GAAG,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMlE;AAED,OAAO,EACL,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,WAAW,GACZ,CAAA;AACD,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/chart-entity-colors.js

@@ -0,0 +1,68 @@
+/**
+ * chart-entity-colors — the entity-color assignment helper for the console
+ * chart kit (issue #166; DESIGN.md "Entity-color assignment").
+ *
+ * Categorical hues assign in fixed order to entities per page context, and the
+ * assignment follows the entity identity, never rank, sort position, or array
+ * index. Callers build ONE map from the full page-context entity list (not a
+ * filtered or re-sorted view) and pass it to every chart widget on that
+ * surface, so a filter or re-sort never repaints the entities that remain on
+ * screen. Beyond six entities the tail folds into a single neutral "other"
+ * register, never a seventh hue.
+ *
+ * The map is a plain serializable record so a Server Component can compute it
+ * and pass it across the RSC boundary to client chart widgets.
+ */
+const CHART_ENTITY_COLOR_TOKENS = [
+    "var(--nc-chart-1)",
+    "var(--nc-chart-2)",
+    "var(--nc-chart-3)",
+    "var(--nc-chart-4)",
+    "var(--nc-chart-5)",
+    "var(--nc-chart-6)",
+];
+/**
+ * The neutral register for folded "everything else" entities. A muted ink
+ * token, never an extra categorical hue.
+ */
+const CHART_ENTITY_OTHER_COLOR = "var(--muted-foreground)";
+/**
+ * Assigns `var(--nc-chart-1..6)` in fixed order by FIRST APPEARANCE of each
+ * stable entity id. Duplicate ids keep their first assignment. Entities past
+ * the sixth unique id fold to the neutral "other" register.
+ */
+function createEntityColorMap(entityIds) {
+    // Assign through a Map so ids that collide with Object.prototype members
+    // ("toString", "__proto__", "constructor") key and dedupe safely during the
+    // build — a Map never confuses an entity id with an inherited prototype
+    // method, and never triggers the `__proto__` accessor.
+    const assignments = new Map();
+    for (const entityId of entityIds) {
+        if (assignments.has(entityId)) {
+            continue;
+        }
+        assignments.set(entityId, assignments.size < CHART_ENTITY_COLOR_TOKENS.length
+            ? CHART_ENTITY_COLOR_TOKENS[assignments.size]
+            : CHART_ENTITY_OTHER_COLOR);
+    }
+    // Return a PLAIN, serializable object so a Server Component can compute the
+    // map and pass it across the RSC boundary to client chart widgets (React
+    // rejects a null-prototype object). `Object.fromEntries` writes OWN data
+    // properties, so an id like "__proto__" becomes an own key with its hue
+    // instead of mutating the object's prototype — and `entityColor` reads
+    // membership with `Object.hasOwn`, so inherited members never leak.
+    return Object.fromEntries(assignments);
+}
+/**
+ * Resolves an entity's assigned color. Ids missing from the map (an entity the
+ * page context never registered) read as the neutral "other" register instead
+ * of silently minting a new hue.
+ */
+function entityColor(map, entityId) {
+    // Object.hasOwn, not `map[entityId] ??`: the map is serialized across the RSC
+    // boundary and rehydrates with Object.prototype, so a bare index on an id like
+    // "toString" or "constructor" would return an inherited method instead of
+    // folding to the neutral register.
+    return Object.hasOwn(map, entityId) ? map[entityId] : CHART_ENTITY_OTHER_COLOR;
+}
+export { CHART_ENTITY_COLOR_TOKENS, CHART_ENTITY_OTHER_COLOR, createEntityColorMap, entityColor, };

package/dist/components/chart-kpi-stat.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type DeltaDirection } from "./chart-delta";
+/**
+ * chart-kpi-stat — the package KPI stat for the console chart kit
+ * (issue #166). The portal's KpiTile stays app-owned; this is the package
+ * sibling that adds the contracted delta and sparkline behavior.
+ *
+ * The value renders semibold with proportional figures (no tabular-nums —
+ * a single stat is read, not columnar-scanned). The delta reads as a
+ * direction glyph plus tone token with a named comparison period
+ * ("vs {vsLabel}"), per DESIGN.md "Delta and trend encoding". The sparkline
+ * slot is decorative here: the stat carries the accessible name, so the slot
+ * wrapper is `aria-hidden`.
+ */
+type KpiStatDelta = {
+    /** The formatted change, e.g. "+12%". */
+    value: React.ReactNode;
+    direction: DeltaDirection;
+    /** Whether an upward move is good for this KPI. Defaults to true. */
+    upIsGood?: boolean;
+    /** The named comparison period, e.g. "previous 30 days". */
+    vsLabel: string;
+};
+declare function KpiStat({ label, value, delta, sparkline, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    delta?: KpiStatDelta;
+    /** Optional decorative sparkline slot (e.g. a `Sparkline` element). */
+    sparkline?: React.ReactNode;
+}): React.JSX.Element;
+export { KpiStat };
+export type { KpiStatDelta };
+//# sourceMappingURL=chart-kpi-stat.d.ts.map

package/dist/components/chart-kpi-stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-kpi-stat.d.ts","sourceRoot":"","sources":["../../src/components/chart-kpi-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAS,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAErE;;;;;;;;;;;GAWG;AAEH,KAAK,YAAY,GAAG;IAClB,yCAAyC;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,SAAS,EAAE,cAAc,CAAA;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,uEAAuE;IACvE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,qBAoCA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA;AAClB,YAAY,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/chart-kpi-stat.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Delta } from "./chart-delta.js";
+function KpiStat({ label, value, delta, sparkline, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "kpi-stat", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx("div", { "data-slot": "kpi-stat-label", className: "font-mono text-xs text-muted-foreground uppercase", children: label }), _jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("div", { "data-slot": "kpi-stat-value", className: "text-3xl leading-none font-semibold text-foreground", children: value }), sparkline ? (_jsx("div", { "data-slot": "kpi-stat-sparkline", "aria-hidden": "true", children: sparkline })) : null] }), delta ? (_jsx(Delta, { value: delta.value, direction: delta.direction, upIsGood: delta.upIsGood, vsLabel: delta.vsLabel })) : null] }));
+}
+export { KpiStat };

package/dist/components/chart-sparkline.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+/**
+ * chart-sparkline — hand-rolled SVG sparkline for the console chart kit
+ * (issue #166; ADR 0010 D1 sparkline carve-out; DESIGN.md "Delta and trend
+ * encoding", "Mark specs").
+ *
+ * Sparklines normalize against a meaningful baseline, never the visible
+ * min–max span alone: the vertical domain always includes the provided
+ * baseline, so a flat-ish series near a distant baseline reads as flat, not
+ * as dramatic noise. Marks render in real pixel space (uniform viewBox, no
+ * non-uniform scaling), single stroke of at least 2px with round joins/caps.
+ *
+ * When rendered inside a named stat (KpiStat), the sparkline is decorative
+ * and stays `aria-hidden`; when standalone, pass `label` so it carries its
+ * own accessible name. A standalone sparkline also renders a visually hidden
+ * data alternative next to the `role="img"` svg — the point values in order —
+ * so the trend is not vision-only. The decorative (aria-hidden) variant emits
+ * no such list.
+ */
+type SparklinePoint = {
+    x: number;
+    y: number;
+};
+/**
+ * Baseline-anchored normalization: the vertical domain is
+ * [min(baseline, data), max(baseline, data)] — never the visible data
+ * min–max alone. Points are inset by half the stroke width so the stroke
+ * never clips at the edges. A zero-span domain centers the line vertically.
+ */
+declare function normalizeSparklinePoints(data: readonly number[], baseline: number, width: number, height: number, strokeWidth?: number): SparklinePoint[];
+declare function Sparkline({ data, baseline, label, width, height, stroke, strokeWidth, className, ...props }: Omit<React.ComponentProps<"svg">, "children" | "height" | "viewBox" | "width"> & {
+    data: readonly number[];
+    /** The meaningful comparison baseline the vertical domain anchors to. */
+    baseline: number;
+    /** Accessible name for standalone use; omit inside a named stat. */
+    label?: string;
+    width?: number;
+    height?: number;
+    /** Stroke token: ink or one chart token, never a raw color. */
+    stroke?: string;
+    strokeWidth?: number;
+}): React.JSX.Element;
+export { Sparkline, normalizeSparklinePoints };
+export type { SparklinePoint };
+//# sourceMappingURL=chart-sparkline.d.ts.map

package/dist/components/chart-sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-sparkline.d.ts","sourceRoot":"","sources":["../../src/components/chart-sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;GAiBG;AAEH,KAAK,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAE9C;;;;;GAKG;AACH,iBAAS,wBAAwB,CAC/B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,WAAW,SAAI,GACd,cAAc,EAAE,CAqBlB;AAED,iBAAS,SAAS,CAAC,EACjB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAW,EACX,MAAW,EACX,MAA4B,EAC5B,WAAe,EACf,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CACL,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAC5C,GAAG;IACF,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;IACvB,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,qBAqDA;AAED,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAA;AAC9C,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/chart-sparkline.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * Baseline-anchored normalization: the vertical domain is
+ * [min(baseline, data), max(baseline, data)] — never the visible data
+ * min–max alone. Points are inset by half the stroke width so the stroke
+ * never clips at the edges. A zero-span domain centers the line vertically.
+ */
+function normalizeSparklinePoints(data, baseline, width, height, strokeWidth = 2) {
+    if (data.length === 0) {
+        return [];
+    }
+    const min = Math.min(baseline, ...data);
+    const max = Math.max(baseline, ...data);
+    const span = max - min;
+    const pad = strokeWidth / 2;
+    const usableWidth = Math.max(width - strokeWidth, 0);
+    const usableHeight = Math.max(height - strokeWidth, 0);
+    return data.map((value, index) => ({
+        x: pad +
+            (data.length === 1
+                ? usableWidth / 2
+                : (index / (data.length - 1)) * usableWidth),
+        y: span === 0 ? height / 2 : pad + (1 - (value - min) / span) * usableHeight,
+    }));
+}
+function Sparkline({ data, baseline, label, width = 120, height = 32, stroke = "var(--nc-chart-1)", strokeWidth = 2, className, ...props }) {
+    // The 2px minimum is a DESIGN.md contract floor ("single stroke of at least
+    // 2px"); clamp the public prop so a caller passing a thinner stroke still
+    // renders at the floor and the normalization inset matches the painted line.
+    const effectiveStrokeWidth = Math.max(strokeWidth, 2);
+    const points = normalizeSparklinePoints(data, baseline, width, height, effectiveStrokeWidth);
+    const svg = (_jsx("svg", { "data-slot": "sparkline", width: width, height: height, viewBox: `0 0 ${width} ${height}`, className: cn("shrink-0", className), ...(label
+            ? { role: "img", "aria-label": label }
+            : { "aria-hidden": true }), ...props, children: points.length >= 2 ? (_jsx("polyline", { fill: "none", stroke: stroke, strokeWidth: effectiveStrokeWidth, strokeLinejoin: "round", strokeLinecap: "round", points: points.map((point) => `${point.x},${point.y}`).join(" ") })) : null }));
+    // Decorative inside a named stat: emit the bare svg, no data twin.
+    if (!label) {
+        return svg;
+    }
+    // Standalone: pair the graphic with a visually hidden ordered value list so
+    // the trend is available to assistive tech, not vision-only.
+    return (_jsxs("span", { "data-slot": "sparkline-standalone", className: "inline-flex", children: [svg, _jsx("span", { "data-slot": "sparkline-values", className: "sr-only", children: `${label}: ${data.join(", ")}` })] }));
+}
+export { Sparkline, normalizeSparklinePoints };

package/dist/components/chart-time-series.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type EntityColorMap } from "./chart-entity-colors";
+type TimeSeriesSeries = {
+    /** Stable entity id — the data key in each datum and the color-map key. */
+    id: string;
+    label: string;
+};
+type TimeSeriesDatum = Record<string, number | string>;
+type TimeSeriesProps = Omit<React.ComponentProps<"figure">, "children"> & {
+    data: readonly TimeSeriesDatum[];
+    /** The datum key carrying the period (e.g. the day). */
+    xKey: string;
+    series: readonly TimeSeriesSeries[];
+    /** The shared page-context entity-color assignment map. */
+    entityColorMap: EntityColorMap;
+    /** REQUIRED accessible name for the chart and its table alternative. */
+    label: string;
+    /** Column header for the period column in the table alternative. */
+    xLabel?: string;
+    valueFormatter?: (value: number) => string;
+    /**
+     * Y-axis width. Defaults to `"auto"` (recharts 3.8 sizes the gutter to the
+     * formatted ticks); pass a number to pin it.
+     */
+    yAxisWidth?: number;
+    /** Label for the folded neutral "Other" series (entities past the sixth). */
+    otherLabel?: string;
+};
+declare function TimeSeriesBars({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, otherLabel, className, ...props }: TimeSeriesProps): React.JSX.Element;
+declare function TimeSeriesArea({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, otherLabel, className, ...props }: TimeSeriesProps): React.JSX.Element;
+export { TimeSeriesArea, TimeSeriesBars };
+export type { TimeSeriesDatum, TimeSeriesProps, TimeSeriesSeries };
+//# sourceMappingURL=chart-time-series.d.ts.map

package/dist/components/chart-time-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-time-series.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAA;AAsDzC,KAAK,gBAAgB,GAAG;IACtB,2EAA2E;IAC3E,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAEtD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,SAAS,eAAe,EAAE,CAAA;IAChC,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACnC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAA;IAC9B,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAiKD,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,MAAiB,EACjB,cAA8B,EAC9B,UAAU,EACV,UAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAuDjB;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,MAAiB,EACjB,cAA8B,EAC9B,UAAU,EACV,UAAoB,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAgEjB;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/chart-time-series.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Area, AreaChart, Bar, BarChart, BarStack, CartesianGrid, XAxis, YAxis, } from "recharts";
+import { cn } from "../lib/utils.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "./chart.js";
+import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
+/**
+ * chart-time-series — daily stacked time-series charts for the console chart
+ * kit (issue #166), built on the ADR 0010 Recharts foundation
+ * (ChartContainer / ChartTooltip / ChartLegend; chart.tsx untouched).
+ *
+ * Contract highlights (DESIGN.md "Mark specs", "Legends and labels"):
+ * - A y-axis is ALWAYS present — never axisless stacks.
+ * - Stacked segments keep a surface gap; the whole stack is wrapped in a
+ *   Recharts `BarStack` so the 4px rounded data-ends sit on the visible top of
+ *   the stack (anchored square at the baseline) even when the last series is
+ *   zero-valued — the radius rounds the stack, not one hard-coded series.
+ * - The public `valueFormatter` reaches every value surface — the table twin,
+ *   the y-axis ticks, and the tooltip value — not only the hidden table cells.
+ * - Series colors resolve from the shared page-context entity-color map,
+ *   never from array index.
+ * - Direct labels are not feasible on stacked dailies, so at two or more
+ *   series a legend identifies every series; a single series is titled by
+ *   the accessible name, not legended.
+ * - Every chart names a built-in table alternative: a visually hidden
+ *   `<table>` twin renders the same series, and the chart root carries the
+ *   accessible name. Recharts' `accessibilityLayer` (ARIA + arrow-key data
+ *   navigation) stays enabled, and the focusable chart svg carries its own
+ *   `title` so the accessibility tree names the graphic, not just the figure.
+ */
+/**
+ * The stock `ChartContainer` suppresses the Recharts svg outline
+ * (`[&_.recharts-surface]:outline-hidden`) so the default browser focus ring
+ * never shows, which would leave the `accessibilityLayer` keyboard path with
+ * no visible focus. chart.tsx is untouched, so we restore a tokenized ring
+ * through the `className` we pass to our own `ChartContainer` instances: the
+ * base rule sets `outline: 2px solid transparent` on `.recharts-surface`, and
+ * these `:focus-visible` overrides sit on a distinct arbitrary-variant selector
+ * (a different tailwind-merge group AND modifier, so `cn()` keeps both) with
+ * higher CSS specificity, flipping the outline color to the `--ring` role only
+ * while the svg is keyboard-focused.
+ */
+const CHART_SURFACE_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:outline-2 " +
+    "[&_.recharts-surface:focus-visible]:outline-ring " +
+    "[&_.recharts-surface:focus-visible]:outline-offset-2";
+/**
+ * Synthetic id/key for the single aggregated neutral series. Entities past the
+ * sixth resolve to the neutral register, and rendering each as its own
+ * indistinguishable neutral mark is unreadable, so they fold into ONE "Other"
+ * series (values summed per bucket) in the marks, the legend, and the table
+ * twin. Unknown to any entity-color map, so `entityColor` resolves it to the
+ * neutral register.
+ */
+const OTHER_SERIES_ID = "__nc-other-series__";
+function defaultFormat(value) {
+    return value.toLocaleString("en-US");
+}
+/**
+ * Route the public `valueFormatter` through the visible tooltip, not only the
+ * table twin. The stock shadcn tooltip takes a full-row `formatter`, so this
+ * re-renders the stock row shape — entity swatch, series label, formatted
+ * value — with the formatter applied to the number.
+ */
+function tooltipRowFormatter(series, valueFormatter) {
+    const labelById = new Map(series.map((entry) => [entry.id, entry.label]));
+    return (value, name, item) => (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "time-series-tooltip-swatch", className: "size-2.5 shrink-0 rounded-[2px]", style: { backgroundColor: item.color ?? item.payload?.fill } }), _jsxs("span", { className: "flex flex-1 items-center justify-between gap-2 leading-none", children: [_jsx("span", { className: "text-muted-foreground", children: labelById.get(String(name)) ?? name }), _jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof value === "number" ? valueFormatter(value) : String(value) })] })] }));
+}
+function seriesChartConfig(series, entityColorMap) {
+    return Object.fromEntries(series.map((entry) => [
+        entry.id,
+        { label: entry.label, color: entityColor(entityColorMap, entry.id) },
+    ]));
+}
+/**
+ * Fold every series whose entity color resolves to the neutral "other"
+ * register into ONE aggregated "Other" series (values summed per bucket).
+ * Beyond six entities the color map returns the neutral register, and drawing
+ * each tail entity as its own indistinguishable neutral mark is unreadable —
+ * so the marks, legend, and table twin all show at most one neutral series.
+ * Series resolving to a hue pass through unchanged; with no neutral series the
+ * inputs return untouched (so ≤6 series are never rewritten).
+ */
+function foldNeutralSeries(series, entityColorMap, data, otherLabel) {
+    const isNeutral = (entry) => entityColor(entityColorMap, entry.id) === CHART_ENTITY_OTHER_COLOR;
+    const neutral = series.filter(isNeutral);
+    if (neutral.length === 0) {
+        return { series: [...series], data: [...data] };
+    }
+    const hued = series.filter((entry) => !isNeutral(entry));
+    const foldedSeries = [
+        ...hued,
+        { id: OTHER_SERIES_ID, label: otherLabel },
+    ];
+    const foldedData = data.map((datum) => {
+        const otherSum = neutral.reduce((sum, entry) => {
+            const value = datum[entry.id];
+            return sum + (typeof value === "number" ? value : 0);
+        }, 0);
+        const next = { ...datum };
+        for (const entry of neutral) {
+            delete next[entry.id];
+        }
+        next[OTHER_SERIES_ID] = otherSum;
+        return next;
+    });
+    return { series: foldedSeries, data: foldedData };
+}
+function TimeSeriesTableAlternative({ data, xKey, xLabel, series, label, valueFormatter, }) {
+    return (_jsxs("table", { className: "sr-only", children: [_jsx("caption", { className: "sr-only", children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: xLabel }), series.map((entry) => (_jsx("th", { scope: "col", children: entry.label }, entry.id)))] }) }), _jsx("tbody", { children: data.map((datum, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: String(datum[xKey] ?? "") }), series.map((entry) => {
+                            const value = datum[entry.id];
+                            return (_jsx("td", { children: typeof value === "number"
+                                    ? valueFormatter(value)
+                                    : String(value ?? "") }, entry.id));
+                        })] }, index))) })] }));
+}
+function TimeSeriesFrame({ label, className, children, ...props }) {
+    return (_jsx("figure", { "aria-label": label, className: cn("m-0 flex w-full flex-col", className), ...props, children: children }));
+}
+function TimeSeriesBars({ data, xKey, series, entityColorMap, label, xLabel = "Period", valueFormatter = defaultFormat, yAxisWidth, otherLabel = "Other", className, ...props }) {
+    const folded = foldNeutralSeries(series, entityColorMap, data, otherLabel);
+    const config = seriesChartConfig(folded.series, entityColorMap);
+    return (_jsxs(TimeSeriesFrame, { "data-slot": "time-series-bars", label: label, className: className, ...props, children: [_jsx(ChartContainer, { config: config, className: cn("w-full", CHART_SURFACE_FOCUS_CLASS), children: _jsxs(BarChart, { accessibilityLayer: true, title: label, data: folded.data, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, width: yAxisWidth ?? "auto", tickFormatter: (value) => valueFormatter(Number(value)) }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { formatter: tooltipRowFormatter(folded.series, valueFormatter) }) }), folded.series.length > 1 ? (_jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) })) : null, _jsx(BarStack, { stackId: "stacked", radius: [4, 4, 0, 0], children: folded.series.map((entry) => (_jsx(Bar, { dataKey: entry.id, maxBarSize: 24, fill: entityColor(entityColorMap, entry.id), stroke: "var(--background)", strokeWidth: 2 }, entry.id))) })] }) }), _jsx(TimeSeriesTableAlternative, { data: folded.data, xKey: xKey, xLabel: xLabel, series: folded.series, label: label, valueFormatter: valueFormatter })] }));
+}
+function TimeSeriesArea({ data, xKey, series, entityColorMap, label, xLabel = "Period", valueFormatter = defaultFormat, yAxisWidth, otherLabel = "Other", className, ...props }) {
+    const folded = foldNeutralSeries(series, entityColorMap, data, otherLabel);
+    const config = seriesChartConfig(folded.series, entityColorMap);
+    return (_jsxs(TimeSeriesFrame, { "data-slot": "time-series-area", label: label, className: className, ...props, children: [_jsx(ChartContainer, { config: config, className: cn("w-full", CHART_SURFACE_FOCUS_CLASS), children: _jsxs(AreaChart, { accessibilityLayer: true, title: label, data: folded.data, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8 }), _jsx(YAxis, { tickLine: false, axisLine: false, width: yAxisWidth ?? "auto", tickFormatter: (value) => valueFormatter(Number(value)) }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { formatter: tooltipRowFormatter(folded.series, valueFormatter) }) }), folded.series.length > 1 ? (_jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) })) : null, folded.series.map((entry) => {
+                            const color = entityColor(entityColorMap, entry.id);
+                            return (_jsx(Area, { type: "monotone", dataKey: entry.id, stackId: "stacked", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", fill: color, fillOpacity: 0.1, 
+                                // Recharts' default activeDot ring is stroke #fff, which the
+                                // chart foundation remaps to transparent — an explicit surface
+                                // ring keeps the DESIGN.md 2px marker-ring spec on hover/focus.
+                                activeDot: { r: 4, stroke: "var(--background)", strokeWidth: 2 } }, entry.id));
+                        })] }) }), _jsx(TimeSeriesTableAlternative, { data: folded.data, xKey: xKey, xLabel: xLabel, series: folded.series, label: label, valueFormatter: valueFormatter })] }));
+}
+export { TimeSeriesArea, TimeSeriesBars };

package/dist/index.d.ts

@@ -23,6 +23,15 @@ export * from "./components/card";
 export * from "./components/card-marketing";
 export * from "./components/carousel";
 export * from "./components/chart";
+export * from "./components/chart-breakdown-table";
+export * from "./components/chart-bullet-bar";
+export * from "./components/chart-date-range";
+export * from "./components/chart-date-range-control";
+export * from "./components/chart-delta";
+export * from "./components/chart-entity-colors";
+export * from "./components/chart-kpi-stat";
+export * from "./components/chart-sparkline";
+export * from "./components/chart-time-series";
 export * from "./components/checkbox";
 export * from "./components/code-editor-mockup";
 export * from "./components/collapsible";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,oBAAoB,CAAA;AAClC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA;AACjD,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kCAAkC,CAAA;AAChD,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -23,6 +23,15 @@ export * from "./components/card.js";
 export * from "./components/card-marketing.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
+export * from "./components/chart-breakdown-table.js";
+export * from "./components/chart-bullet-bar.js";
+export * from "./components/chart-date-range.js";
+export * from "./components/chart-date-range-control.js";
+export * from "./components/chart-delta.js";
+export * from "./components/chart-entity-colors.js";
+export * from "./components/chart-kpi-stat.js";
+export * from "./components/chart-sparkline.js";
+export * from "./components/chart-time-series.js";
 export * from "./components/checkbox.js";
 export * from "./components/code-editor-mockup.js";
 export * from "./components/collapsible.js";

package/docs/agents/nadicodeai-ui.md

@@ -79,6 +79,15 @@ Current shipped product subpaths:
 - `@nadicodeai/ui/components/agent-tool-approval`
 - `@nadicodeai/ui/components/artifact-panel`
 - `@nadicodeai/ui/components/automation-section`
+- `@nadicodeai/ui/components/chart-breakdown-table`
+- `@nadicodeai/ui/components/chart-bullet-bar`
+- `@nadicodeai/ui/components/chart-date-range`
+- `@nadicodeai/ui/components/chart-date-range-control`
+- `@nadicodeai/ui/components/chart-delta`
+- `@nadicodeai/ui/components/chart-entity-colors`
+- `@nadicodeai/ui/components/chart-kpi-stat`
+- `@nadicodeai/ui/components/chart-sparkline`
+- `@nadicodeai/ui/components/chart-time-series`
 - `@nadicodeai/ui/components/dashboard-shell`
 - `@nadicodeai/ui/components/desktop-shell`
 - `@nadicodeai/ui/components/feedback-state`
@@ -103,7 +112,21 @@ product-specific copy in the consuming app.
 Generic data tables, command palettes, and chart cards are app-owned shadcn
 registry adaptations. Start from `@shadcn/data-table-demo`,
 `@shadcn/command-dialog`, `@shadcn/chart`, or the relevant `@shadcn/chart-*`
-block/example instead of importing a NadicodeAI product abstraction.
+block/example instead of importing a NadicodeAI product abstraction. The
+console chart kit subpaths (`chart-*`) are the plan-approved exception
+(issue #166, ADR 0010): use them for KPI stats, sparklines, stacked
+time-series, cap meters, breakdown tables, entity-color assignment, and the
+date-range control; the chart cards that arrange those widgets stay app-owned.
+The URL codec in `chart-date-range` is server-safe; import it (not
+`chart-date-range-control`) from Server Components.
+
+Every data-shaped chart names a data alternative so its data is reachable
+without vision: the time-series charts ship a visually hidden `<table>` twin,
+`BreakdownTable` is itself a real `<table>`, and a standalone `Sparkline`
+renders an sr-only ordered list of its point values beside the `role="img"`
+svg. `BulletBar` (data fully in `aria-valuetext` plus the visible value) and
+`KpiStat` (data fully in visible text) carry no separate table twin by design;
+this narrowing is deliberate, not a gap.
 
 Recommended migration order:
 

package/llms.txt

@@ -32,6 +32,15 @@ Component surface:
   - `@nadicodeai/ui/components/agent-tool-approval`
   - `@nadicodeai/ui/components/artifact-panel`
   - `@nadicodeai/ui/components/automation-section`
+  - `@nadicodeai/ui/components/chart-breakdown-table`
+  - `@nadicodeai/ui/components/chart-bullet-bar`
+  - `@nadicodeai/ui/components/chart-date-range`
+  - `@nadicodeai/ui/components/chart-date-range-control`
+  - `@nadicodeai/ui/components/chart-delta`
+  - `@nadicodeai/ui/components/chart-entity-colors`
+  - `@nadicodeai/ui/components/chart-kpi-stat`
+  - `@nadicodeai/ui/components/chart-sparkline`
+  - `@nadicodeai/ui/components/chart-time-series`
   - `@nadicodeai/ui/components/dashboard-shell`
   - `@nadicodeai/ui/components/desktop-shell`
   - `@nadicodeai/ui/components/feedback-state`
@@ -46,7 +55,8 @@ Package surface:
 - Do not add top-level exports for recipes, blocks, agent, or terminal groupings without concrete source, built files, docs, and tests in the same package API decision.
 - App routes own routing, persistence, auth behavior, runtime adapters, server state, app-specific copy, and app-owned product features/use cases.
 - Product-specific names such as `operator-login`, portal activation, and customer credential control stay out of package components.
-- Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions.
+- Generic data tables, command palettes, and chart cards are app-owned shadcn registry adaptations, not NadicodeAI package abstractions. The `chart-*` console chart kit subpaths are plan-approved package surface (issue #166, ADR 0010); chart cards that arrange them stay app-owned.
+- The date-range URL codec (`encodeDateRange`/`decodeDateRange`) ships server-safe from `@nadicodeai/ui/components/chart-date-range`; the interactive picker is `@nadicodeai/ui/components/chart-date-range-control`.
 - Consumer migration order: web admin or portal validation slice first, installer second, desktop shell third, desktop chat last, TUI through `docs/terminal-tui-semantics.md`.
 - Read `docs/migration/nadia-consumer-readiness.md` before migrating a consumer; it records CSS requirements, public import paths, fixture rules, and readiness gates.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@nadicodeai/design-system": "0.5.2",
+    "@nadicodeai/design-system": "0.5.3",
     "@rive-app/react-webgl2": "^4.29.1",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",