@nadicodeai/ui 6.0.1 → 6.1.0

package/dist/components/action-menu.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type ActionMenuProps = {
+    label: string;
+    triggerId?: string;
+    children: ReactNode;
+};
+export declare function ActionMenu({ label, triggerId, children }: ActionMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=action-menu.d.ts.map

package/dist/components/action-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-menu.d.ts","sourceRoot":"","sources":["../../src/components/action-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,+BAazE"}

package/dist/components/action-menu.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EllipsisIcon } from "lucide-react";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu.js";
+export function ActionMenu({ label, triggerId, children }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { id: triggerId, "aria-label": label, render: _jsx(Button, { variant: "ghost", size: "icon-sm" }), children: _jsx(EllipsisIcon, { "aria-hidden": "true" }) }), _jsx(DropdownMenuContent, { align: "end", children: children })] }));
+}

package/dist/components/card.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useRender } from "@base-ui/react/use-render";
-type CardSurface = "plain" | "resting" | "raised";
+type CardSurface = "plain" | "resting" | "raised" | "outlined";
 type CardVariant = "default" | "interactive" | "link";
 declare function Card({ className, render, size, surface, variant, ...props }: useRender.ComponentProps<"div"> & {
     size?: "default" | "sm";

package/dist/components/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAClD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,MAAM,EACN,IAAgB,EAChB,OAAmB,EACnB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,0EAmBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAazD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC/D,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;AAEtD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,MAAM,EACN,IAAgB,EAChB,OAAmB,EACnB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,0EAsBA;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,qBAazD;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAIxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,WAAW,GACjB,CAAC"}

package/dist/components/card.js

@@ -3,11 +3,13 @@ import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cn } from "../lib/utils.js";
 function Card({ className, render, size = "default", surface = "resting", variant = "default", ...props }) {
+    const structure = cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint");
+    const surfaceClassName = surface === "outlined"
+        ? cn(structure, "rounded-lg border border-border", className)
+        : cn(structure, "rounded-3xl border-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
     return useRender({
         defaultTagName: "div",
-        props: mergeProps({
-            className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-3xl border-0 bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-3xl *:[img:last-child]:rounded-b-3xl", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint", className),
-        }, props),
+        props: mergeProps({ className: surfaceClassName }, props),
         render,
         state: { size, slot: "card", surface, variant },
     });

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

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { Table } from "./table.js";
 import { type EntityColorMap } from "./chart-entity-colors.js";
 /**
  * chart-breakdown-table — entity breakdown with proportion bars for the
@@ -20,7 +19,7 @@ type BreakdownEntity = {
     label: React.ReactNode;
     value: number;
 };
-declare function BreakdownTable({ entities, entityColorMap, label, topN, otherValue, valueFormatter, columnLabels, otherLabel, className, ...props }: Omit<React.ComponentProps<typeof Table>, "children"> & {
+declare function BreakdownTable({ entities, entityColorMap, label, topN, otherValue, valueFormatter, columnLabels, otherLabel, totalLabel, }: {
     entities: readonly BreakdownEntity[];
     /** The shared page-context entity-color assignment map. */
     entityColorMap: EntityColorMap;
@@ -42,6 +41,8 @@ declare function BreakdownTable({ entities, entityColorMap, label, topN, otherVa
     };
     /** Label for the neutral rollup row. */
     otherLabel?: React.ReactNode;
+    /** When provided, adds the sum of all entities and the remainder below the rows. */
+    totalLabel?: React.ReactNode;
 }): React.JSX.Element;
 export { BreakdownTable };
 export type { BreakdownEntity };

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

@@ -1 +1 @@
-{"version":3,"file":"chart-breakdown-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-breakdown-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,KAAK,EAON,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;GAYG;AAEH,KAAK,eAAe,GAAG;IACrB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkEF,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,cAA8B,EAC9B,YAAY,EACZ,UAA8B,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxD,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,wCAAwC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,qBA8CA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"chart-breakdown-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-breakdown-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;GAYG;AAEH,KAAK,eAAe,GAAG;IACrB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA+EF,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,cAA8B,EAC9B,YAAY,EACZ,UAA8B,EAC9B,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,wCAAwC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oFAAoF;IACpF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,qBAmEA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,eAAe,EAAE,CAAC"}

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

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

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

@@ -7,16 +7,15 @@ import * as React from "react";
  * warning fraction (`thresholdFraction` is a REQUIRED consumer input, never a
  * constant of this component — 0.8 is the common product default) and a cap
  * tick at 100%. Overflow renders as a distinct segment continuing past the
- * cap tick, never clamped away. Severity state tokens reinforce position,
- * never act as the sole signal. The current value reads at the bar tip.
+ * cap tick, never clamped away. The required product-owned tone communicates
+ * consequence independently of position: a full included allowance can have
+ * funded extra available. The current value reads at the bar tip.
  *
  * Two scales, one meter owner. The default `panel` scale is the full grammar
- * above. The `row` scale is the exception slot of a membership row, where the
- * meter appears only past the warning rung and is therefore a warning, not a
- * gauge: one line carrying a percent and a thin bar, no ticks and no tip value
- * line. It drops the ticks because a row has no room to encode position, so it
- * encodes register instead; it keeps the overflow segment, because an over-run
- * is never clamped away at either scale.
+ * above. The `row` scale carries a percent and a thin bar without ticks or a
+ * second value line, so measurements align in compact tables and membership
+ * rows. Its tone still comes from the product; compact does not mean warning.
+ * Overflow remains visible at either scale.
  *
  * Accessibility: `role="meter"` with a REQUIRED accessible name (`label`);
  * `aria-valuenow` clamps to the meter maximum while `aria-valuetext` conveys
@@ -24,9 +23,9 @@ import * as React from "react";
  * place the words live — the row prints no caption — so the caller passes a
  * label that reads as a sentence, not a bare noun.
  */
-type BulletBarSeverity = "ok" | "warn" | "over";
+type BulletBarTone = "neutral" | "warning" | "danger";
 type BulletBarSize = "panel" | "row";
-declare function BulletBar({ value, max, thresholdFraction, label, size, valueFormatter, valueText, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+declare function BulletBar({ value, max, thresholdFraction, tone, label, size, valueFormatter, valueText, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
     value: number;
     /** The cap (included usage / limit) the meter measures against. */
     max: number;
@@ -36,11 +35,13 @@ declare function BulletBar({ value, max, thresholdFraction, label, size, valueFo
      * fraction is a consumer input, never a constant of this contract.
      */
     thresholdFraction: number;
+    /** REQUIRED product consequence; not derived from the measurement. */
+    tone: BulletBarTone;
     /** REQUIRED accessible name for the meter. */
     label: string;
     /**
      * `panel` (default) is the full meter grammar. `row` is the single-line
-     * exception-slot scale: percent plus a thin bar, no ticks, no value line.
+     * compact comparison scale: percent plus a thin bar, no ticks, no value line.
      */
     size?: BulletBarSize;
     valueFormatter?: (value: number) => string;
@@ -48,5 +49,5 @@ declare function BulletBar({ value, max, thresholdFraction, label, size, valueFo
     valueText?: string;
 }): React.JSX.Element;
 export { BulletBar };
-export type { BulletBarSeverity };
+export type { BulletBarTone };
 //# sourceMappingURL=chart-bullet-bar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-bullet-bar.d.ts","sourceRoot":"","sources":["../../src/components/chart-bullet-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,KAAK,iBAAiB,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAChD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAuCrC,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,GAAG,EACH,iBAAiB,EACjB,KAAK,EACL,IAAc,EACd,cAA8B,EAC9B,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAgJA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"chart-bullet-bar.d.ts","sourceRoot":"","sources":["../../src/components/chart-bullet-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACtD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAmCrC,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,GAAG,EACH,iBAAiB,EACjB,IAAI,EACJ,KAAK,EACL,IAAc,EACd,cAA8B,EAC9B,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sEAAsE;IACtE,IAAI,EAAE,aAAa,CAAC;IACpB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAgIA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,aAAa,EAAE,CAAC"}

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

@@ -5,27 +5,22 @@ import { cn } from "../lib/utils.js";
  * 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.
+ * percentage stays readable in both modes when the product signals attention.
  */
 const BULLET_BAR_VALUE_CLASS = {
-    ok: "text-foreground",
-    warn: "text-(--nc-warning-deep)",
-    over: "text-(--nc-error-deep)",
+    neutral: "text-foreground",
+    warning: "text-(--nc-warning-deep)",
+    danger: "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_CLASS = {
-    ok: "bg-(--nc-chart-seq-3)",
-    warn: "bg-(--nc-state-review)",
-    over: "bg-(--nc-state-blocked)",
+    neutral: "bg-(--nc-chart-seq-3)",
+    warning: "bg-(--nc-state-review)",
+    danger: "bg-(--nc-state-blocked)",
+};
+const BULLET_BAR_OVERFLOW_CLASS = {
+    neutral: "bg-(--nc-chart-seq-4)",
+    warning: "bg-(--nc-warning-deep)",
+    danger: "bg-(--nc-error-deep)",
 };
 function percent(fraction) {
     return `${Number((fraction * 100).toFixed(3))}%`;
@@ -33,7 +28,7 @@ function percent(fraction) {
 function defaultFormat(value) {
     return value.toLocaleString("en-US");
 }
-function BulletBar({ value, max, thresholdFraction, label, size = "panel", valueFormatter = defaultFormat, valueText, className, ...props }) {
+function BulletBar({ value, max, thresholdFraction, tone, 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;
@@ -41,29 +36,14 @@ function BulletBar({ value, max, thresholdFraction, label, size = "panel", value
     const capFraction = total > 0 ? max / total : 1;
     const thresholdTickFraction = capFraction * thresholdFraction;
     const tipFraction = fillFraction + overflowFraction;
-    // 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)` : ""}`;
-    // 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_CLASS[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: {
+                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_CLASS[tone], overflow === 0 && "rounded-r-sm"), style: { left: 0, width: percent(fillFraction) } }), overflow > 0 ? (_jsx("div", { "data-slot": "bullet-bar-overflow", className: cn("absolute inset-y-0 rounded-r-sm", BULLET_BAR_OVERFLOW_CLASS[tone]), style: {
                     left: percent(fillFraction),
                     width: percent(overflowFraction),
                 } })) : null] }));
@@ -76,8 +56,8 @@ function BulletBar({ value, max, thresholdFraction, label, size = "panel", value
         "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_CLASS[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-tone": tone, "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_CLASS[tone]), 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_CLASS[severity]), style: { left: percent(tipFraction) }, children: valueFormatter(value) }) })] }));
+    return (_jsxs("div", { "data-slot": "bullet-bar", "data-tone": tone, "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_CLASS[tone]), style: { left: percent(tipFraction) }, children: valueFormatter(value) }) })] }));
 }
 export { BulletBar };

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

@@ -1,17 +1,6 @@
 import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { type DeltaDirection } from "./chart-delta.js";
-/**
- * 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;
@@ -20,14 +9,36 @@ type KpiStatDelta = {
     upIsGood?: boolean;
     /** The named comparison period, e.g. "previous 30 days". */
     vsLabel: string;
+    /** A volume change has direction without implying success or failure. */
+    neutral?: boolean;
 };
-declare function KpiStat({ label, value, delta, sparkline, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+type KpiStatTone = "default" | "warning" | "critical";
+declare function KpiStat({ label, value, delta, sparkline, note, tone, className, ...props }: Omit<React.ComponentProps<"dl">, "children"> & {
     label: React.ReactNode;
     value: React.ReactNode;
     delta?: KpiStatDelta;
     /** Optional decorative sparkline slot (e.g. a `Sparkline` element). */
     sparkline?: React.ReactNode;
+    note?: React.ReactNode;
+    tone?: KpiStatTone;
 }): React.JSX.Element;
-export { KpiStat };
-export type { KpiStatDelta };
+type KpiStatGroupItem = Pick<React.ComponentProps<typeof KpiStat>, "label" | "value" | "delta" | "note" | "tone"> & {
+    id: string;
+    sparkline?: {
+        data: readonly number[];
+        baseline: number;
+    };
+    /** Bind an app link or data attributes without replacing the tile's presentation. */
+    render?: useRender.ComponentProps<"div">["render"];
+    interactive?: boolean;
+};
+declare function KpiStatGroup({ items, heading, }: {
+    items: readonly KpiStatGroupItem[];
+    heading?: {
+        title: string;
+        description?: string;
+    };
+}): React.JSX.Element | null;
+export { KpiStat, KpiStatGroup };
+export type { KpiStatDelta, KpiStatTone, KpiStatGroupItem };
 //# sourceMappingURL=chart-kpi-stat.d.ts.map

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,qBAkCA;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;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,OAAO,EAAS,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAGtE,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;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAQtD,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAChD,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;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,qBA+CA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EACpC,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAC9C,GAAG;IACF,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqBF,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD,4BA2BA;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACjC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -1,7 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { cn } from "../lib/utils.js";
+import { Card, CardDescription, CardHeader, CardTitle } from "./card.js";
+import { Separator } from "./separator.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: "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] }));
+import { Sparkline } from "./chart-sparkline.js";
+const valueTones = {
+    default: "text-foreground",
+    warning: "text-(--nc-warning-deep)",
+    critical: "text-(--nc-error-deep)",
+};
+function KpiStat({ label, value, delta, sparkline, note, tone = "default", className, ...props }) {
+    return (_jsxs("dl", { "data-slot": "kpi-stat", className: cn("@container/kpi-stat flex min-w-0 flex-col gap-1.5", className), ...props, children: [_jsx("dt", { "data-slot": "kpi-stat-label", className: "min-h-8 text-xs font-medium text-muted-foreground", children: label }), _jsxs("dd", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("div", { "data-slot": "kpi-stat-value", className: cn("min-w-0 shrink-0 text-[clamp(1.125rem,12cqw,1.875rem)] leading-none font-semibold", valueTones[tone]), children: value }), sparkline ? (_jsx("div", { "data-slot": "kpi-stat-sparkline", "aria-hidden": "true", className: "hidden min-w-0 max-w-24 @[15rem]/kpi-stat:block [&>svg]:h-auto [&>svg]:max-w-full", children: sparkline })) : null] }), delta?.neutral ? (_jsxs("p", { className: "text-sm tabular-nums text-muted-foreground", children: [delta.value, " \u00B7 ", delta.vsLabel] })) : delta ? (_jsx(Delta, { value: delta.value, direction: delta.direction, upIsGood: delta.upIsGood, vsLabel: delta.vsLabel })) : null, note ? _jsx("p", { className: "text-sm font-medium text-muted-foreground", children: note }) : null] })] }));
 }
-export { KpiStat };
+function KpiStatTile({ render, interactive, sparkline, ...stat }) {
+    return useRender({
+        defaultTagName: "div",
+        render,
+        props: {
+            className: cn("block h-full min-w-0 p-4", interactive && "nc-transition-paint rounded-md hover:bg-accent"),
+            children: (_jsx(KpiStat, { ...stat, ...(sparkline ? { sparkline: _jsx(Sparkline, { ...sparkline, width: 96, height: 28 }) } : {}) })),
+        },
+    });
+}
+function KpiStatGroup({ items, heading, }) {
+    if (items.length === 0)
+        return null;
+    return (_jsxs(Card, { className: "gap-0 py-0", children: [heading ? (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { className: "py-4", children: [_jsx(CardTitle, { children: _jsx("h2", { children: heading.title }) }), heading.description ? _jsx(CardDescription, { children: heading.description }) : null] }), _jsx(Separator, {})] })) : null, _jsx("div", { "data-slot": "kpi-stat-group", className: "grid min-w-0 grid-cols-1 divide-y divide-border sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))] sm:divide-x sm:divide-y-0", children: items.map(({ id, ...item }) => (_jsx("div", { className: "min-w-0", children: _jsx(KpiStatTile, { ...item }) }, id))) })] }));
+}
+export { KpiStat, KpiStatGroup };

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

@@ -0,0 +1,6 @@
+export type TimeSeriesSize = "sm" | "default" | "lg" | "fill";
+export declare const timeSeriesLayouts: Record<TimeSeriesSize, {
+    frame: string;
+    chart: string;
+}>;
+//# sourceMappingURL=chart-time-series-layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-time-series-layout.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series-layout.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9D,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,cAAc,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAKtF,CAAC"}

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

@@ -0,0 +1,6 @@
+export const timeSeriesLayouts = {
+    sm: { frame: "", chart: "h-48" },
+    default: { frame: "", chart: "h-64" },
+    lg: { frame: "", chart: "h-80" },
+    fill: { frame: "h-full flex-1", chart: "h-full min-h-48 flex-1" },
+};

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type TimeSeriesSize } from "./chart-time-series-layout.js";
 import { type EntityColorMap } from "./chart-entity-colors.js";
 type TimeSeriesSeries = {
     /** Stable entity id — the data key in each datum and the color-map key. */
@@ -7,10 +8,13 @@ type TimeSeriesSeries = {
 };
 type TimeSeriesDatum = Record<string, number | string>;
 type TimeSeriesProps = Omit<React.ComponentProps<"figure">, "children"> & {
+    size?: TimeSeriesSize;
     data: readonly TimeSeriesDatum[];
     /** The datum key carrying the period (e.g. the day). */
     xKey: string;
     series: readonly TimeSeriesSeries[];
+    /** Stable entity-id datum key for horizontal categorical bars; omitted for time series. */
+    barCategoryKey?: string;
     /** The shared page-context entity-color assignment map. */
     entityColorMap: EntityColorMap;
     /** REQUIRED accessible name for the chart and its table alternative. */
@@ -26,8 +30,8 @@ type TimeSeriesProps = Omit<React.ComponentProps<"figure">, "children"> & {
     /** 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;
+declare function TimeSeriesBars({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, otherLabel, barCategoryKey, size, className, ...props }: TimeSeriesProps): React.JSX.Element;
+declare function TimeSeriesArea({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, otherLabel, size, 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

@@ -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;AAiH1C,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"}
+{"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;AAgB/B,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAS/F,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAkH1C,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,CAAC,EAAE,cAAc,CAAC;IACtB,IAAI,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,wDAAwD;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,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,cAAc,EACd,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAqKjB;AAED,iBAAS,cAAc,CAAC,EACtB,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,cAAc,EACd,KAAK,EACL,MAAiB,EACjB,cAA8B,EAC9B,UAAU,EACV,UAAoB,EACpB,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBA6FjB;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

@@ -1,11 +1,12 @@
 "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 { Area, AreaChart, Bar, BarChart, BarStack, CartesianGrid, Rectangle, Text, XAxis, YAxis, } from "recharts";
 import { cn } from "../lib/utils.js";
+import { timeSeriesLayouts } from "./chart-time-series-layout.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
+ * chart-time-series — stacked time-series and categorical bars for the console chart
  * kit (issue #166), built on the Recharts foundation
  * (ChartContainer / ChartTooltip / ChartLegend; chart.tsx untouched).
  *
@@ -17,8 +18,9 @@ import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js
  *   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.
+ * - Series and categorical bar colors resolve from the shared page-context
+ *   entity-color map, never from array index. Categorical bars run horizontally
+ *   with every entity label visible; time-series axes keep their even stride.
  * - 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.
@@ -166,17 +168,29 @@ function TimeSeriesTableAlternative({ data, xKey, xLabel, series, label, valueFo
 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 }) {
+function TimeSeriesBars({ data, xKey, series, entityColorMap, label, xLabel = "Period", valueFormatter = defaultFormat, yAxisWidth, otherLabel = "Other", barCategoryKey, size = "default", className, ...props }) {
+    if (barCategoryKey) {
+        const config = seriesChartConfig(series, entityColorMap);
+        const coloredData = data.map((datum) => ({
+            ...datum,
+            fill: entityColor(entityColorMap, String(datum[barCategoryKey] ?? "")),
+        }));
+        const domainMax = niceYDomainMax(data, series);
+        return (_jsxs(TimeSeriesFrame, { "data-slot": "categorical-bars", label: label, className: className, ...props, children: [_jsx(ChartContainer, { config: config, className: cn("w-full aspect-auto", CHART_SURFACE_FOCUS_CLASS), style: { height: Math.max(256, data.length * 64 + 40) }, children: _jsxs(BarChart, { accessibilityLayer: true, title: label, data: coloredData, layout: "vertical", children: [_jsx(CartesianGrid, { horizontal: false }), _jsx(XAxis, { type: "number", tickLine: false, axisLine: false, tickCount: 3, ...(domainMax === undefined ? {} : { domain: [0, domainMax] }), tickFormatter: (value) => valueFormatter(Number(value)) }), _jsx(YAxis, { type: "category", dataKey: xKey, width: 120, interval: 0, tickLine: false, axisLine: false, tick: ({ x, y, payload }) => (_jsx(Text, { x: x, y: y, width: 108, breakAll: true, maxLines: 2, "aria-label": String(payload.value), textAnchor: "end", verticalAnchor: "middle", className: "fill-muted-foreground", children: String(payload.value) })) }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { formatter: (value, name, item) => tooltipRowFormatter(series, valueFormatter)(value, name, {
+                                        ...item,
+                                        color: item.payload?.fill,
+                                    }, 0, []) }) }), series.map((entry) => (_jsx(Bar, { dataKey: entry.id, isAnimationActive: false, maxBarSize: 24, shape: ({ x, y, width, height, originalDataIndex }) => (_jsx(Rectangle, { x: x, y: y, width: width, height: height, radius: [0, 4, 4, 0], fill: coloredData[originalDataIndex]?.fill })) }, entry.id)))] }) }), _jsx(TimeSeriesTableAlternative, { data: data, xKey: xKey, xLabel: xLabel, series: series, label: label, valueFormatter: valueFormatter })] }));
+    }
     const folded = foldNeutralSeries(series, entityColorMap, data, otherLabel);
     const config = seriesChartConfig(folded.series, entityColorMap);
     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 })] }));
+    return (_jsxs(TimeSeriesFrame, { "data-slot": "time-series-bars", label: label, className: cn(timeSeriesLayouts[size].frame, className), ...props, children: [_jsx(ChartContainer, { config: config, className: cn("w-full aspect-auto", timeSeriesLayouts[size].chart, 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, { 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 }) {
+function TimeSeriesArea({ data, xKey, series, entityColorMap, label, xLabel = "Period", valueFormatter = defaultFormat, yAxisWidth, otherLabel = "Other", size = "default", className, ...props }) {
     const folded = foldNeutralSeries(series, entityColorMap, data, otherLabel);
     const config = seriesChartConfig(folded.series, entityColorMap);
     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) => {
+    return (_jsxs(TimeSeriesFrame, { "data-slot": "time-series-area", label: label, className: cn(timeSeriesLayouts[size].frame, className), ...props, children: [_jsx(ChartContainer, { config: config, className: cn("w-full aspect-auto", timeSeriesLayouts[size].chart, 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, 
                                 // DESIGN.md mark specs: an area fill reads as a light wash
@@ -185,7 +199,11 @@ function TimeSeriesArea({ data, xKey, series, entityColorMap, label, xLabel = "P
                                 // 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));
+                                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

@@ -39,7 +39,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
     const chartId = sanitizeChartToken(`chart-${id ?? uniqueId.replace(/:/g, "")}`);
     return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn(
             // eslint-disable-next-line no-restricted-syntax -- the hexes here are MATCH KEYS for Recharts' hardcoded default strokes (#ccc grid and reference lines, #fff dot and sector outlines), remapped onto theme tokens. None of them is a colour this component emits.
-            "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+            "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick-label_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
 }
 const ChartStyle = ({ id, config }) => {
     const chartId = sanitizeChartToken(id);