@nadicodeai/ui 0.5.2 → 0.6.0

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/components/chart.js

@@ -94,7 +94,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
         return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
+    return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-md border border-border bg-popover px-nadicode-sm py-nadicode-filter-chip-gap text-xs text-popover-foreground shadow-tooltip", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
                     .filter((item) => item.type !== "none")
                     .map((item, index) => {
                     const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;

package/dist/components/checkbox.js

@@ -4,6 +4,6 @@ import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cn } from "../lib/utils.js";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-md border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 focus-visible:border-ring focus-visible:ring-focus focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-focus aria-invalid:ring-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };