@nadicodeai/ui 0.20.0 → 0.22.0

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

@@ -1,9 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+/**
+ * The tip value is TEXT, so it takes the feedback pair's deep tone, not the
+ * rail tone the segments wear: `--nc-state-review` / `--nc-state-blocked` are
+ * fill tones (0.85 amber reads at 1.6:1 on the light canvas), while
+ * `--nc-warning-deep` and `--nc-error-deep` are authored light AND dark so the
+ * percentage stays readable in both modes — and it is loudest exactly when it
+ * crosses a threshold.
+ */
 const BULLET_BAR_VALUE_TONE = {
     ok: "text-foreground",
-    warn: "text-(--nc-state-review)",
-    over: "text-(--nc-state-blocked)",
+    warn: "text-(--nc-warning-deep)",
+    over: "text-(--nc-error-deep)",
+};
+/**
+ * The consumed length carries the severity too, not only the tip figure: a
+ * meter at its cap and a meter at 40% drew the same calm ramp fill, so the one
+ * state where the reader is actually blocked was legible only from a 10px
+ * percentage. Position stays the primary signal (the threshold and cap ticks
+ * do not move); the tone reinforces it, per DESIGN.md's meter grammar. These
+ * are the rail tones of the feedback pairs, the same register the overflow
+ * segment already wears.
+ */
+const BULLET_BAR_FILL_TONE = {
+    ok: "bg-(--nc-chart-seq-3)",
+    warn: "bg-(--nc-state-review)",
+    over: "bg-(--nc-state-blocked)",
 };
 function percent(fraction) {
     return `${Number((fraction * 100).toFixed(3))}%`;
@@ -11,7 +33,7 @@ function percent(fraction) {
 function defaultFormat(value) {
     return value.toLocaleString("en-US");
 }
-function BulletBar({ value, max, thresholdFraction, label, valueFormatter = defaultFormat, valueText, className, ...props }) {
+function BulletBar({ value, max, thresholdFraction, label, size = "panel", 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;
@@ -19,12 +41,43 @@ function BulletBar({ value, max, thresholdFraction, label, valueFormatter = defa
     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";
+    // Reaching the cap IS the blocked state, not merely the last warning step:
+    // an allowance consumed to exactly 100% stops the work the same way 104%
+    // does, so both read as `over`. A zero cap with no value stays `ok` — an
+    // unconfigured meter is not an exhausted one.
+    const severity = overflow > 0 || (max > 0 && value >= max)
+        ? "over"
+        : max > 0 && 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) }) })] }));
+    // The row scale prints this instead of the tip value: at row scale the
+    // reader is asking "how close to the wall", not "how many".
+    const consumedPercent = max > 0 ? Math.round((value / max) * 100) : 0;
+    const segments = (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "bullet-bar-track", 
+                // One step darker than the surface it sits on, in both themes: at
+                // `bg-muted` an empty meter on the light canvas read as a hairline
+                // rather than as a track with nothing in it.
+                className: "absolute inset-y-0 rounded-r-sm bg-muted-foreground/20", style: { left: 0, width: percent(capFraction) } }), _jsx("div", { "data-slot": "bullet-bar-fill", className: cn("absolute inset-y-0", BULLET_BAR_FILL_TONE[severity], overflow === 0 && "rounded-r-sm"), style: { left: 0, width: percent(fillFraction) } }), overflow > 0 ? (_jsx("div", { "data-slot": "bullet-bar-overflow", 
+                // A darker step of the same error family: now that the consumed
+                // length is itself red at the cap, the over-run has to stay a
+                // DISTINCT segment (DESIGN.md), which one shared tone would erase.
+                className: "absolute inset-y-0 rounded-r-sm bg-(--nc-error-deep)", style: {
+                    left: percent(fillFraction),
+                    width: percent(overflowFraction),
+                } })) : null] }));
+    const meterAria = {
+        role: "meter",
+        "aria-label": label,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": Math.min(value, max),
+        "aria-valuetext": meterValueText,
+    };
+    if (size === "row") {
+        return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, "data-size": "row", className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("span", { "data-slot": "bullet-bar-percent", "aria-hidden": "true", className: cn("font-mono text-xs tabular-nums", BULLET_BAR_VALUE_TONE[severity]), children: [consumedPercent, "%"] }), _jsx("div", { ...meterAria, className: "relative h-1 min-w-0 flex-1", children: segments })] }));
+    }
+    return (_jsxs("div", { "data-slot": "bullet-bar", "data-severity": severity, "data-size": "panel", className: cn("flex flex-col gap-1", className), ...props, children: [_jsxs("div", { ...meterAria, className: "relative h-3 w-full", children: [segments, _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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type DateRangePreset, type DateRangeValue } from "./chart-date-range";
-declare function DateRangeControl({ value, onChange, label, presets, presetLabels, customLabel, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
+declare function DateRangeControl({ value, onChange, label, presets, presetLabels, customLabel, formatCustomValue, className, ...props }: Omit<React.ComponentProps<"div">, "children" | "onChange"> & {
     value: DateRangeValue;
     onChange: (value: DateRangeValue) => void;
     /** Accessible name for the control group. */
@@ -12,6 +12,16 @@ declare function DateRangeControl({ value, onChange, label, presets, presetLabel
     presets?: readonly DateRangePreset[];
     presetLabels?: Partial<Record<DateRangePreset, string>>;
     customLabel?: string;
+    /**
+     * Renders the selected custom window as a finished, localized label. The
+     * package owns no locale, so without it the trigger falls back to the ISO
+     * pair the codec stores — a storage format, never a label a reader should
+     * meet. Every locale-aware consumer passes this.
+     */
+    formatCustomValue?: (value: {
+        from: string;
+        to: string;
+    }) => string;
 }): React.JSX.Element;
 export { DateRangeControl };
 //# sourceMappingURL=chart-date-range-control.d.ts.map

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

@@ -1 +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,CAAC;AAQ/B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AA0BvC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,OAA4B,EAC5B,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,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,qBA2EA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"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,CAAC;AAQ/B,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,+BAA+B,CAAC;AAmCvC,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,KAAoB,EACpB,OAA4B,EAC5B,YAAY,EACZ,WAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC9D,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;CACrE,qBAoFA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -23,13 +23,20 @@ import { DATE_RANGE_PRESETS, formatIsoDay, parseIsoDay, } from "./chart-date-ran
  * (`DATE_RANGE_PRESETS`) is unchanged, so a URL arriving with an un-offered but
  * valid preset token still decodes; the consumer decides its fallback.
  */
+// Which range the chart is showing is a selection, and this row is the only
+// thing that says it. A soft neutral fill sits about 1.1:1 against the page in
+// both modes, which is a state no sighted reader can find, so the selected
+// preset wears the navigation-selection role: the same colour the console
+// marks a chosen destination with, and the only neutral-safe token that clears
+// the 3:1 a state-bearing control owes.
+const SELECTED_PRESET_CLASS = "bg-(--nc-navigation-selection-bg) text-(--nc-navigation-selection-fg) hover:bg-(--nc-navigation-selection-hover) hover:text-(--nc-navigation-selection-fg)";
 const DEFAULT_PRESET_LABELS = {
     "7d": "7d",
     "14d": "14d",
     "30d": "30d",
     cycle: "This cycle",
 };
-function DateRangeControl({ value, onChange, label = "Date range", presets = DATE_RANGE_PRESETS, presetLabels, customLabel = "Custom", className, ...props }) {
+function DateRangeControl({ value, onChange, label = "Date range", presets = DATE_RANGE_PRESETS, presetLabels, customLabel = "Custom", formatCustomValue, className, ...props }) {
     const [open, setOpen] = React.useState(false);
     const [pending, setPending] = React.useState(undefined);
     const isCustom = value.kind === "custom";
@@ -56,7 +63,10 @@ function DateRangeControl({ value, onChange, label = "Date range", presets = DAT
     }
     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: [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 }) })] })] }));
+                return (_jsx(Button, { size: "sm", variant: "ghost", "aria-pressed": active, className: active ? SELECTED_PRESET_CLASS : undefined, 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: "ghost", "aria-pressed": isCustom, className: isCustom ? SELECTED_PRESET_CLASS : undefined, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), isCustom
+                                    ? (formatCustomValue?.({ from: value.from, to: value.to }) ??
+                                        `${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-entity-colors.d.ts

@@ -17,8 +17,14 @@ declare const CHART_ENTITY_COLOR_TOKENS: readonly ["var(--nc-chart-1)", "var(--n
 /**
  * The neutral register for folded "everything else" entities. A muted ink
  * token, never an extra categorical hue.
+ *
+ * `--nc-muted` and not the `--muted-foreground` role: the role resolves to the
+ * body-text tone, which in dark is near-white (L 0.83) — as a mark it becomes
+ * the loudest thing in the chart, so the tail outshouts every named entity.
+ * `--nc-muted` is authored as a mid grey in both modes (L 0.53 light / 0.65
+ * dark), which is what a folded tail should read as either way.
  */
-declare const CHART_ENTITY_OTHER_COLOR = "var(--muted-foreground)";
+declare const CHART_ENTITY_OTHER_COLOR = "var(--nc-muted)";
 type EntityColorMap = Readonly<Record<string, string>>;
 /**
  * Assigns `var(--nc-chart-1..6)` in fixed order by FIRST APPEARANCE of each

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

@@ -1 +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,CAAC;AAEX;;;GAGG;AACH,QAAA,MAAM,wBAAwB,4BAA4B,CAAC;AAE3D,KAAK,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEvD;;;;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,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,WAAW,EAAE,CAAC;AAClG,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"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,CAAC;AAEX;;;;;;;;;GASG;AACH,QAAA,MAAM,wBAAwB,oBAAoB,CAAC;AAEnD,KAAK,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEvD;;;;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,EAAE,yBAAyB,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,WAAW,EAAE,CAAC;AAClG,YAAY,EAAE,cAAc,EAAE,CAAC"}

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

@@ -24,8 +24,14 @@ const CHART_ENTITY_COLOR_TOKENS = [
 /**
  * The neutral register for folded "everything else" entities. A muted ink
  * token, never an extra categorical hue.
+ *
+ * `--nc-muted` and not the `--muted-foreground` role: the role resolves to the
+ * body-text tone, which in dark is near-white (L 0.83) — as a mark it becomes
+ * the loudest thing in the chart, so the tail outshouts every named entity.
+ * `--nc-muted` is authored as a mid grey in both modes (L 0.53 light / 0.65
+ * dark), which is what a folded tail should read as either way.
  */
-const CHART_ENTITY_OTHER_COLOR = "var(--muted-foreground)";
+const CHART_ENTITY_OTHER_COLOR = "var(--nc-muted)";
 /**
  * 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

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

@@ -1 +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,CAAC;AAG/B,OAAO,EAAS,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtE;;;;;;;;;;;GAWG;AAEH,KAAK,YAAY,GAAG;IAClB,yCAAyC;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,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,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,qBA6BA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"chart-kpi-stat.d.ts","sourceRoot":"","sources":["../../src/components/chart-kpi-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAS,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtE;;;;;;;;;;;GAWG;AAEH,KAAK,YAAY,GAAG;IAClB,yCAAyC;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,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,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,qBAkCA;AAED,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,YAAY,EAAE,YAAY,EAAE,CAAC"}

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

@@ -2,6 +2,6 @@ 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] }));
+    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: "text-xs font-medium text-muted-foreground", 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-time-series.d.ts.map

@@ -1 +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,CAAC;AAY/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAsD1C,KAAK,gBAAgB,GAAG;IACtB,2EAA2E;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAsJF,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,qBA+CjB;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,qBAwDjB;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"chart-time-series.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AA+G1C,KAAK,gBAAgB,GAAG;IACtB,2EAA2E;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvD,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAsJF,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,qBAyDjB;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,qBA6EjB;AAED,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -43,6 +43,59 @@ import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js
 const CHART_SURFACE_FOCUS_CLASS = "[&_.recharts-surface:focus-visible]:outline-2 " +
     "[&_.recharts-surface:focus-visible]:outline-ring " +
     "[&_.recharts-surface:focus-visible]:outline-offset-2";
+/**
+ * The x ticks land at ONE constant stride across the range, and the stride is
+ * the smallest one whose labels still clear each other at the width the chart
+ * actually has. Recharts' default `preserveEnd` fitting is greedy on label
+ * width, so a 30-day axis draws the narrow early labels daily and then switches
+ * to every other day once "Jul 10" is wider than "Jul 1" — the rhythm breaks
+ * mid-chart, differently per locale. `equidistantPreserveStart` evaluates one
+ * stride against every label and raises it until the whole run fits, so the
+ * axis is even by construction AND survives a narrow viewport: a count fixed at
+ * the wide case superimposed eight labels into an unreadable smear on a phone,
+ * and worse in locales whose date labels run longer.
+ */
+const X_AXIS_MIN_TICK_GAP = 48;
+/**
+ * How many ticks the y axis draws, ends included. Recharts divides the data's
+ * own maximum by this count when it is left to itself, which produces steps of
+ * whatever the data happens to reach: one console chart read $0/$5/$10 while the
+ * chart beside it read EUR0/9/18/27/36, and the two stopped sharing a numeric
+ * register. The domain is rounded up to a step a person counts in instead.
+ */
+const Y_AXIS_TICK_COUNT = 5;
+/** The steps a reader counts in, per order of magnitude. */
+const NICE_STEP_MULTIPLES = [1, 2, 2.5, 5, 10];
+function niceStep(rawStep) {
+    if (!Number.isFinite(rawStep) || rawStep <= 0)
+        return 1;
+    const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+    const normalized = rawStep / magnitude;
+    const multiple = NICE_STEP_MULTIPLES.find((candidate) => normalized <= candidate) ?? 10;
+    return multiple * magnitude;
+}
+/**
+ * The stacked maximum across the data, rounded up to a whole number of nice
+ * steps. Returns `undefined` when there is nothing to bound, so the axis falls
+ * back to recharts' own domain rather than pinning itself to zero.
+ */
+function niceYDomainMax(data, series) {
+    let max = 0;
+    for (const datum of data) {
+        let total = 0;
+        for (const entry of series) {
+            const value = datum[entry.id];
+            if (typeof value === "number" && Number.isFinite(value))
+                total += value;
+        }
+        if (total > max)
+            max = total;
+    }
+    if (max <= 0)
+        return undefined;
+    const step = niceStep(max / (Y_AXIS_TICK_COUNT - 1));
+    return step * (Y_AXIS_TICK_COUNT - 1);
+}
 /**
  * Synthetic id/key for the single aggregated neutral series. Entities past the
  * sixth resolve to the neutral register, and rendering each as its own
@@ -63,7 +116,7 @@ function defaultFormat(value) {
  */
 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) })] })] }));
+    return (value, name, item) => (_jsxs(_Fragment, { children: [_jsx("span", { "data-slot": "time-series-tooltip-swatch", className: "size-2.5 shrink-0 rounded-xs", 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) => [
@@ -114,14 +167,19 @@ function TimeSeriesFrame({ label, className, children, ...props }) {
 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, isAnimationActive: false, 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 })] }));
+    const yDomainMax = niceYDomainMax(folded.data, folded.series);
+    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, interval: "equidistantPreserveStart", minTickGap: X_AXIS_MIN_TICK_GAP }), _jsx(YAxis, { tickLine: false, axisLine: false, width: yAxisWidth ?? "auto", tickCount: Y_AXIS_TICK_COUNT, ...(yDomainMax === undefined ? {} : { domain: [0, yDomainMax] }), 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, isAnimationActive: false, 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 yDomainMax = niceYDomainMax(folded.data, folded.series);
+    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, margin: { top: 5, right: 20, bottom: 5, left: 20 }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: xKey, tickLine: false, axisLine: false, tickMargin: 8, interval: "equidistantPreserveStart", minTickGap: X_AXIS_MIN_TICK_GAP }), _jsx(YAxis, { tickLine: false, axisLine: false, width: yAxisWidth ?? "auto", tickCount: Y_AXIS_TICK_COUNT, ...(yDomainMax === undefined ? {} : { domain: [0, yDomainMax] }), 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, isAnimationActive: false, stackId: "stacked", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", fill: color, fillOpacity: 0.1, 
+                            return (_jsx(Area, { type: "monotone", dataKey: entry.id, isAnimationActive: false, stackId: "stacked", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", fill: color, 
+                                // DESIGN.md mark specs: an area fill reads as a light wash
+                                // (roughly 10% opacity) under a full-strength line.
+                                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.

package/dist/components/chart.js

@@ -89,7 +89,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                     const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
                     const indicatorColor = color ?? item.payload?.fill ?? item.color;
-                    return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                    return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
                                         "h-2.5 w-2.5": indicator === "dot",
                                         "w-1": indicator === "line",
                                         "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
@@ -113,7 +113,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
             .map((item, index) => {
             const key = `${nameKey ?? item.dataKey ?? "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+            return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-xs", style: {
                             backgroundColor: item.color,
                         } })), itemConfig?.label] }, index));
         }) }));

package/dist/components/code-editor-mockup.js

@@ -24,7 +24,7 @@ import { cn } from "../lib/utils.js";
  *   dots    -> bg-[color-mix(in_srgb,var(--nc-line)_24%,var(--nc-canvas)_22%)]
  */
 function CodeEditorMockup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "code-editor-mockup", className: cn("grid content-start overflow-hidden rounded-[var(--nc-rounded-md)] bg-primary text-primary-foreground", className), ...props }));
+    return (_jsx("div", { "data-slot": "code-editor-mockup", className: cn("grid content-start overflow-hidden rounded-md bg-primary text-primary-foreground", className), ...props }));
 }
 function CodeEditorMockupChrome({ className, children, ...props }) {
     return (_jsxs("div", { "data-slot": "code-editor-mockup-chrome", className: cn("flex items-center gap-2 border-b border-b-[color-mix(in_srgb,var(--nc-line)_24%,var(--nc-canvas)_22%)] px-6 py-3", className), ...props, children: [_jsxs("span", { "data-slot": "code-editor-mockup-dots", "aria-hidden": "true", className: "flex flex-none gap-2", children: [_jsx("span", { className: "size-[11px] rounded-full bg-[color-mix(in_srgb,var(--nc-line)_24%,var(--nc-canvas)_22%)]" }), _jsx("span", { className: "size-[11px] rounded-full bg-[color-mix(in_srgb,var(--nc-line)_24%,var(--nc-canvas)_22%)]" }), _jsx("span", { className: "size-[11px] rounded-full bg-[color-mix(in_srgb,var(--nc-line)_24%,var(--nc-canvas)_22%)]" })] }), children] }));

package/dist/components/nav-bar.js

@@ -28,7 +28,7 @@ function NavBarLogo({ className, ...props }) {
 function NavBarLinks({ className, ...props }) {
     return (_jsx("div", { "data-slot": "nav-bar-links", className: cn("hidden items-center justify-center gap-1 text-sm text-muted-foreground lg:inline-flex", 
         // each link reads as a flat pill with hover/focus affordance against the glass.
-        "[&_a]:rounded-[var(--nc-rounded-sm)] [&_a]:px-3 [&_a]:py-2 [&_a]:text-inherit [&_a]:no-underline [&_a]:transition-colors", "[&_a:hover]:bg-accent [&_a:hover]:text-foreground", "[&_a[data-active]]:text-foreground", "[&_a:focus-visible]:outline [&_a:focus-visible]:outline-1 [&_a:focus-visible]:[outline-color:var(--ring)] [&_a:focus-visible]:outline-offset-2", className), ...props }));
+        "[&_a]:rounded-sm [&_a]:px-3 [&_a]:py-2 [&_a]:text-inherit [&_a]:no-underline [&_a]:transition-colors", "[&_a:hover]:bg-accent [&_a:hover]:text-foreground", "[&_a[data-active]]:text-foreground", "[&_a:focus-visible]:outline [&_a:focus-visible]:outline-1 [&_a:focus-visible]:[outline-color:var(--ring)] [&_a:focus-visible]:outline-offset-2", className), ...props }));
 }
 function NavBarCta({ className, ...props }) {
     return (_jsx("div", { "data-slot": "nav-bar-cta", className: cn("inline-flex items-center gap-3 justify-self-end", className), ...props }));

package/dist/components/radio-group.d.ts

@@ -1,6 +1,6 @@
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props): import("react").JSX.Element;
-declare function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props): import("react").JSX.Element;
+declare function RadioGroupItem({ children, className, ...props }: RadioPrimitive.Root.Props): import("react").JSX.Element;
 export { RadioGroup, RadioGroupItem };
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,KAAK,+BAQrE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,+BAkBzE;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,KAAK,+BAQrE;AAED,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,+BAoBnF;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/radio-group.js

@@ -5,7 +5,7 @@ import { cn } from "../lib/utils.js";
 function RadioGroup({ className, ...props }) {
     return (_jsx(RadioGroupPrimitive, { "data-slot": "radio-group", className: cn("grid w-full gap-2", className), ...props }));
 }
-function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none 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-[length:var(--ring-width-focus)] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[length:var(--ring-width-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(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex size-4 items-center justify-center", children: _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" }) }) }));
+function RadioGroupItem({ children, className, ...props }) {
+    return (_jsx(RadioPrimitive.Root, { "data-slot": "radio-group-item", className: cn("group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none 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-[length:var(--ring-width-focus)] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[length:var(--ring-width-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: children ?? (_jsx(RadioPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex size-4 items-center justify-center", children: _jsx("span", { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" }) })) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/components/theme-mode-switcher.d.ts

@@ -1,17 +1,24 @@
 import * as React from "react";
-import { ToggleGroup } from "./toggle-group";
+import { RadioGroup } from "./radio-group";
 import { isThemeMode, themeModes, type ThemeMode } from "../lib/theme-mode";
 export { isThemeMode, themeModes };
 export type { ThemeMode };
 export type ThemeModeOptionLabels = Record<ThemeMode, string>;
-export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof ToggleGroup>, "children" | "defaultValue" | "onValueChange" | "type" | "value"> & {
+export type ThemeModeOption = {
+    Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    label: string;
+    mode: ThemeMode;
+    selected: boolean;
+};
+export type ThemeModeSwitcherProps = Omit<React.ComponentProps<typeof RadioGroup>, "children" | "defaultValue" | "onValueChange" | "value"> & {
     "aria-label": string;
     compact?: boolean;
     itemClassName?: string;
     labels: ThemeModeOptionLabels;
     onValueChange: (value: ThemeMode) => void;
+    renderItem?: (option: ThemeModeOption) => React.ReactNode;
     value: ThemeMode;
 };
-declare function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact, disabled, itemClassName, labels, onValueChange, value, ...props }: ThemeModeSwitcherProps): React.JSX.Element;
+declare function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }: ThemeModeSwitcherProps): React.JSX.Element;
 export { ThemeModeSwitcher };
 //# sourceMappingURL=theme-mode-switcher.d.ts.map

package/dist/components/theme-mode-switcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAmB,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,MAAM,GAAG,OAAO,CACjE,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBAmCxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"theme-mode-switcher.d.ts","sourceRoot":"","sources":["../../src/components/theme-mode-switcher.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAkB,MAAM,0BAA0B,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AACnC,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EACvC,UAAU,GAAG,cAAc,GAAG,eAAe,GAAG,OAAO,CACxD,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,qBAAqB,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAQF,iBAAS,iBAAiB,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,OAAe,EACf,QAAQ,EACR,aAAa,EACb,MAAM,EACN,aAAa,EACb,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACT,EAAE,sBAAsB,qBAkDxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/theme-mode-switcher.js

@@ -1,7 +1,8 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
-import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { toggleVariants } from "./toggle.js";
 import { isThemeMode, themeModes } from "../lib/theme-mode.js";
 import { cn } from "../lib/utils.js";
 export { isThemeMode, themeModes };
@@ -10,16 +11,22 @@ const themeModeIcons = {
     dark: MoonIcon,
     system: MonitorIcon,
 };
-function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, value, ...props }) {
-    return (_jsx(ToggleGroup, { "aria-label": ariaLabel, className: cn("max-w-full", className), disabled: disabled, onValueChange: (nextValue) => {
-            const nextMode = nextValue[0];
+function ThemeModeSwitcher({ "aria-label": ariaLabel, className, compact = false, disabled, itemClassName, labels, onValueChange, renderItem, value, ...props }) {
+    return (_jsx(RadioGroup, { "aria-label": ariaLabel, className: cn("max-w-full", className), disabled: disabled, onValueChange: (nextMode) => {
             if (isThemeMode(nextMode)) {
                 onValueChange(nextMode);
             }
-        }, value: [value], variant: "outline", ...props, children: themeModes.map((mode) => {
+        }, value: value, ...props, children: themeModes.map((mode) => {
             const Icon = themeModeIcons[mode];
             const label = labels[mode];
-            return (_jsxs(ToggleGroupItem, { "aria-label": label, className: cn("min-w-0 gap-1.5 px-2.5", compact ? "h-8 text-xs" : "h-9", itemClassName), disabled: disabled, value: mode, children: [_jsx(Icon, { "aria-hidden": "true", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] }, mode));
+            const selected = value === mode;
+            return (_jsx(RadioGroupItem, { "aria-label": label, className: cn(toggleVariants({ variant: "outline" }), 
+                // The selected tile takes the muted interaction surface the
+                // toggle uses for its own on-state, so it takes that surface's
+                // foreground with it. Left on the radio primitive's on-primary
+                // foreground, the selected label reads white on near-white in
+                // light and black on black in dark.
+                "aspect-auto w-auto min-w-0 gap-1.5 px-2.5 data-checked:bg-muted data-checked:text-foreground", compact ? "h-8 text-xs" : "h-9", itemClassName), disabled: disabled, value: mode, children: renderItem ? (renderItem({ Icon, label, mode, selected })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": "true", "data-icon": true }), _jsx("span", { className: "min-w-0 truncate", children: label })] })) }, mode));
         }) }));
 }
 export { ThemeModeSwitcher };

package/dist/components/use-case-bento.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { type DemoSurfaceLabels, type DemoSurfaceScript } from "./demo-surface";
-declare function UseCaseBento({ kicker, title, body, proof, proofLabel, media, mediaClassName, demo, demoLabels, className, ...props }: React.ComponentProps<"article"> & {
+declare function UseCaseBento({ kicker, title, body, proof, proofLabel, media, mediaClassName, demo, className, ...props }: React.ComponentProps<"article"> & {
     kicker: string;
     title: string;
     body: string;
@@ -8,8 +7,7 @@ declare function UseCaseBento({ kicker, title, body, proof, proofLabel, media, m
     proofLabel?: string;
     media: React.ReactNode;
     mediaClassName?: string;
-    demo: DemoSurfaceScript;
-    demoLabels?: Partial<DemoSurfaceLabels>;
+    demo: React.ReactNode;
 }): React.JSX.Element;
 export { UseCaseBento };
 //# sourceMappingURL=use-case-bento.d.ts.map

package/dist/components/use-case-bento.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-case-bento.d.ts","sourceRoot":"","sources":["../../src/components/use-case-bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAG7F,iBAAS,YAAY,CAAC,EACpB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAmC,EACnC,KAAK,EACL,cAAc,EACd,IAAI,EACJ,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,iBAAiB,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACzC,qBAqCA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"use-case-bento.d.ts","sourceRoot":"","sources":["../../src/components/use-case-bento.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,iBAAS,YAAY,CAAC,EACpB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAmC,EACnC,KAAK,EACL,cAAc,EACd,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB,qBAmCA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/use-case-bento.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Bento, BentoCopy, BentoDemo, BentoItem, BentoMedia } from "./bento.js";
-import { DemoSurface } from "./demo-surface.js";
 import { MediaMount } from "./media-mount.js";
-function UseCaseBento({ kicker, title, body, proof, proofLabel = "What the agent shows", media, mediaClassName, demo, demoLabels, className, ...props }) {
-    return (_jsx("article", { "data-slot": "use-case-bento", className: className, ...props, children: _jsxs(Bento, { height: "primary", children: [_jsxs(BentoItem, { span: 3, children: [_jsx("div", { className: "nc-artifact-surface pointer-events-none absolute inset-0 border-0 p-0 opacity-60", "aria-hidden": "true" }), _jsxs(BentoCopy, { children: [_jsx("p", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: kicker }), _jsx("h3", { className: "nc-type-title-md text-foreground", children: title }), _jsx("p", { className: "nc-type-body-sm text-[var(--nc-body)]", children: body }), _jsxs("div", { className: "grid gap-2 border-t border-border pt-4", children: [_jsx("p", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: proofLabel }), _jsx("p", { className: "nc-type-body-sm text-foreground", children: proof })] })] })] }), _jsx(BentoItem, { span: 5, flush: true, stretch: true, className: "min-h-[var(--nc-h-bento-primary)]", children: _jsx(BentoMedia, { children: _jsx(MediaMount, { ratio: "auto", className: cn("!h-full min-h-[var(--nc-h-bento-primary)]", mediaClassName), children: media }) }) }), _jsx(BentoItem, { span: 4, surface: "soft", stretch: true, className: "min-h-0 p-[var(--nc-sm)]", children: _jsx(BentoDemo, { children: _jsx(DemoSurface, { labels: demoLabels, script: demo, title: title }) }) })] }) }));
+function UseCaseBento({ kicker, title, body, proof, proofLabel = "What the agent shows", media, mediaClassName, demo, className, ...props }) {
+    return (_jsx("article", { "data-slot": "use-case-bento", className: className, ...props, children: _jsxs(Bento, { height: "primary", children: [_jsxs(BentoItem, { span: 3, children: [_jsx("div", { className: "nc-artifact-surface pointer-events-none absolute inset-0 border-0 p-0 opacity-60", "aria-hidden": "true" }), _jsxs(BentoCopy, { children: [_jsx("p", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: kicker }), _jsx("h3", { className: "nc-type-title-md text-foreground", children: title }), _jsx("p", { className: "nc-type-body-sm text-[var(--nc-body)]", children: body }), _jsxs("div", { className: "grid gap-2 border-t border-border pt-4", children: [_jsx("p", { className: "nc-type-caption-mono text-muted-foreground uppercase", children: proofLabel }), _jsx("p", { className: "nc-type-body-sm text-foreground", children: proof })] })] })] }), _jsx(BentoItem, { span: 5, flush: true, stretch: true, className: "min-h-[var(--nc-h-bento-primary)]", children: _jsx(BentoMedia, { children: _jsx(MediaMount, { ratio: "auto", className: cn("!h-full min-h-[var(--nc-h-bento-primary)]", mediaClassName), children: media }) }) }), _jsx(BentoItem, { span: 4, surface: "soft", stretch: true, className: "min-h-0 p-[var(--nc-sm)]", children: _jsx(BentoDemo, { children: demo }) })] }) }));
 }
 export { UseCaseBento };