@nadicodeai/ui 6.5.0 → 6.6.1

package/AGENTS.md

@@ -21,3 +21,10 @@ validation policy is in `../../docs/agents/develop.md`.
 When the brand-icon allow-list changes, run `generate:brand-icons`.
 Use current shadcn or assistant-ui discovery for their components;
 `--overwrite` requires authorization to replace the affected component.
+
+Charts are shadcn charts: `src/components/chart.tsx` is shadcn's `chart` over
+Recharts, and the `chart-*.tsx` kit is built on it. A surface takes its chart
+from this kit. When the kit lacks one, look it up in the shadcn registry
+(`npx shadcn@latest search @shadcn -q chart`, run here) and add it to the kit
+with NadicodeAI tokens before any app draws its own. `recharts` is a dependency
+of this package only.

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

@@ -1 +1 @@
-{"version":3,"file":"action-status.d.ts","sourceRoot":"","sources":["../../src/components/action-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AACD,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAe,EAAE,EAAE,iBAAiB,+BAiBpF;AACD,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"action-status.d.ts","sourceRoot":"","sources":["../../src/components/action-status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AACD,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAe,EAAE,EAAE,iBAAiB,+BAapF;AACD,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/action-status.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon, Loader2Icon } from "lucide-react";
+import { CheckIcon } from "lucide-react";
+import { ActivityOrb } from "./activity-orb.js";
 function ActionStatus({ state, idle, busy, done, idleIcon = null }) {
-    return (_jsxs(_Fragment, { children: [state === "saving" ? (_jsx(Loader2Icon, { "aria-hidden": "true", className: "motion-safe:animate-spin motion-reduce:animate-pulse", "data-icon": "inline-start" })) : state === "done" ? (_jsx(CheckIcon, { "aria-hidden": "true", "data-icon": "inline-start" })) : (idleIcon), state === "saving" ? busy : state === "done" ? done : idle] }));
+    return (_jsxs(_Fragment, { children: [state === "saving" ? (_jsx(ActivityOrb, { activity: "processing", "data-icon": "inline-start", decorative: true })) : state === "done" ? (_jsx(CheckIcon, { "aria-hidden": "true", "data-icon": "inline-start" })) : (idleIcon), state === "saving" ? busy : state === "done" ? done : idle] }));
 }
 export { ActionStatus };

package/dist/components/card-row.d.ts

@@ -0,0 +1,19 @@
+import { useRender } from "@base-ui/react/use-render";
+type CardRowColumns = 2 | 3 | 4 | "auto";
+type CardRowFrom = "sm" | "md" | "lg" | "xl";
+/**
+ * The row sibling cards sit in. The grid stretches its cells and every direct
+ * card child fills the one it lands in, so a shorter card grows to the tallest
+ * in the row instead of leaving a ragged bottom edge
+ * (`rule/card-row-equal-height`). Below `from` the row is one column, where
+ * each card is its own row and stretching means nothing.
+ *
+ * Callers pass layout — `columns`, `from`, and a `gap-*` on `className` when
+ * the default rhythm is wrong. Appearance stays with `Card`.
+ */
+declare function CardRow({ className, columns, from, render, ...props }: useRender.ComponentProps<"div"> & {
+    columns?: CardRowColumns;
+    from?: CardRowFrom;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { CardRow, type CardRowColumns, type CardRowFrom };
+//# sourceMappingURL=card-row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../src/components/card-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AACzC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAkC7C;;;;;;;;;GASG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAW,EACX,IAAW,EACX,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,8FAgBA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/card-row.js

@@ -0,0 +1,55 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "../lib/utils.js";
+/**
+ * One column below `from`, then `columns` columns — `auto` giving each card an
+ * equal share of the row however many there are. Written out so every class
+ * string is literal and the Tailwind scanner can see it.
+ */
+const columnClasses = {
+    sm: {
+        2: "sm:grid-cols-2",
+        3: "sm:grid-cols-3",
+        4: "sm:grid-cols-4",
+        auto: "sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+    },
+    md: {
+        2: "md:grid-cols-2",
+        3: "md:grid-cols-3",
+        4: "md:grid-cols-4",
+        auto: "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+    },
+    lg: {
+        2: "lg:grid-cols-2",
+        3: "lg:grid-cols-3",
+        4: "lg:grid-cols-4",
+        auto: "lg:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+    },
+    xl: {
+        2: "xl:grid-cols-2",
+        3: "xl:grid-cols-3",
+        4: "xl:grid-cols-4",
+        auto: "xl:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+    },
+};
+/**
+ * The row sibling cards sit in. The grid stretches its cells and every direct
+ * card child fills the one it lands in, so a shorter card grows to the tallest
+ * in the row instead of leaving a ragged bottom edge
+ * (`rule/card-row-equal-height`). Below `from` the row is one column, where
+ * each card is its own row and stretching means nothing.
+ *
+ * Callers pass layout — `columns`, `from`, and a `gap-*` on `className` when
+ * the default rhythm is wrong. Appearance stays with `Card`.
+ */
+function CardRow({ className, columns = 2, from = "md", render, ...props }) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps({
+            className: cn("grid grid-cols-1 items-stretch gap-4 [&>[data-slot=card]]:h-full [&>li]:flex [&>li>[data-slot=card]]:h-full [&>li>[data-slot=card]]:w-full", columnClasses[from][columns], className),
+        }, props),
+        render,
+        state: { columns: String(columns), from, slot: "card-row" },
+    });
+}
+export { CardRow };

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

@@ -9,6 +9,8 @@ import * as React from "react";
  */
 type DeltaDirection = "up" | "down" | "flat";
 type DeltaTone = "positive" | "negative" | "neutral";
+declare const DELTA_DIRECTION_TEXT: Record<DeltaDirection, string>;
+declare const DELTA_TONE_CLASSES: Record<DeltaTone, string>;
 /**
  * Maps a delta direction onto its tone: direction crossed with whether up is
  * good in this context. A flat delta is always neutral.
@@ -23,6 +25,6 @@ declare function Delta({ value, direction, upIsGood, vsLabel, className, ...prop
     /** The named comparison period, rendered as "vs {vsLabel}". */
     vsLabel?: string;
 }): React.JSX.Element;
-export { Delta, deltaTone };
+export { Delta, deltaTone, DELTA_DIRECTION_TEXT, DELTA_TONE_CLASSES };
 export type { DeltaDirection, DeltaTone };
 //# sourceMappingURL=chart-delta.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-delta.d.ts","sourceRoot":"","sources":["../../src/components/chart-delta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAoBrD;;;GAGG;AACH,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,GAAG,SAAS,CAMxE;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,QAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,qBAqBA;AAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"chart-delta.d.ts","sourceRoot":"","sources":["../../src/components/chart-delta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAQrD,QAAA,MAAM,oBAAoB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIxD,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIjD,CAAC;AAEF;;;GAGG;AACH,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,GAAG,SAAS,CAMxE;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,QAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,qBAqBA;AAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/chart-delta.js

@@ -29,4 +29,4 @@ function Delta({ value, direction, upIsGood = true, vsLabel, className, ...props
     const tone = deltaTone(direction, upIsGood);
     return (_jsxs("span", { "data-slot": "delta", "data-direction": direction, "data-tone": tone, className: cn("inline-flex items-baseline gap-1 text-sm font-medium", DELTA_TONE_CLASSES[tone], className), ...props, children: [_jsx("span", { "aria-hidden": "true", children: DELTA_GLYPHS[direction] }), _jsx("span", { className: "sr-only", children: DELTA_DIRECTION_TEXT[direction] }), _jsx("span", { children: value }), vsLabel ? _jsxs("span", { className: "font-normal text-muted-foreground", children: ["vs ", vsLabel] }) : null] }));
 }
-export { Delta, deltaTone };
+export { Delta, deltaTone, DELTA_DIRECTION_TEXT, DELTA_TONE_CLASSES };

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

@@ -9,7 +9,7 @@ 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. */
+    /** A volume change keeps its arrow, which is a fact, and takes no tone, which would be a judgment. */
     neutral?: boolean;
 };
 type KpiStatTone = "default" | "warning" | "critical";

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;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"}
+{"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;AAOtD,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAGlC,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,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAyCtD,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,17 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
+import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
 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";
+import { Badge } from "./badge.js";
+import { DELTA_DIRECTION_TEXT, DELTA_TONE_CLASSES, deltaTone, } from "./chart-delta.js";
 import { Sparkline } from "./chart-sparkline.js";
 const valueTones = {
     default: "text-foreground",
     warning: "text-(--nc-warning-deep)",
     critical: "text-(--nc-error-deep)",
 };
+const trendIcons = {
+    up: TrendingUpIcon,
+    down: TrendingDownIcon,
+    flat: MinusIcon,
+};
+/*
+ * The change sits top right as an arrow plus a number, the way shadcn's
+ * dashboard-01 card shows it (`rule/kpi-card-trend-top-right`). The arrow is
+ * the direction glyph DESIGN.md requires; tone still comes from direction
+ * crossed with `upIsGood`. A neutral change keeps its arrow and takes no tone.
+ * The badge is a grid cell, so a long change wraps the label instead of
+ * covering it.
+ */
+function KpiStatTrend({ delta }) {
+    const Icon = trendIcons[delta.direction];
+    const tone = delta.neutral ? "neutral" : deltaTone(delta.direction, delta.upIsGood);
+    return (_jsx("dd", { "data-slot": "kpi-stat-trend", "data-direction": delta.direction, "data-tone": tone, className: "col-start-2 row-start-1 justify-self-end", children: _jsxs(Badge, { variant: "outline", className: cn("tabular-nums", DELTA_TONE_CLASSES[tone]), children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: DELTA_DIRECTION_TEXT[delta.direction] }), delta.value] }) }));
+}
 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] })] }));
+    return (_jsxs("dl", { "data-slot": "kpi-stat", className: cn("@container/kpi-stat grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1.5", className), ...props, children: [_jsx("dt", { "data-slot": "kpi-stat-label", className: "col-start-1 row-start-1 min-h-8 min-w-0 text-xs font-medium text-muted-foreground", children: label }), delta ? _jsx(KpiStatTrend, { delta: delta }) : null, _jsxs("dd", { className: "col-span-2 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 ? (_jsxs("p", { "data-slot": "kpi-stat-comparison", className: "text-sm text-muted-foreground", children: ["vs ", delta.vsLabel] })) : null, note ? _jsx("p", { className: "text-sm font-medium text-muted-foreground", children: note }) : null] })] }));
 }
 function KpiStatTile({ render, interactive, sparkline, ...stat }) {
     return useRender({

package/dist/eslint/index.js

@@ -1,5 +1,6 @@
 import { readFileSync } from "node:fs";
 
+import { cardRowOwner } from "./rules/card-row-owner.js";
 import { confirmDestructiveAction } from "./rules/confirm-destructive-action.js";
 import { iconControlAccessibleName } from "./rules/icon-control-accessible-name.js";
 import { noAppFeatureComponent } from "./rules/no-app-feature-component.js";
@@ -55,6 +56,7 @@ function readPublishedVersion() {
 }
 
 export const strictDesignSystemRules = {
+  "nadicodeai/card-row-owner": "error",
   "nadicodeai/icon-control-accessible-name": "error",
   "nadicodeai/no-invalid-token-utility": "error",
   "nadicodeai/no-native-visible-control": "error",
@@ -75,6 +77,7 @@ const plugin = {
   },
   configs: {},
   rules: {
+    "card-row-owner": cardRowOwner,
     "confirm-destructive-action": confirmDestructiveAction,
     "icon-control-accessible-name": iconControlAccessibleName,
     "no-app-feature-component": noAppFeatureComponent,

package/dist/eslint/rules/card-row-owner.js

@@ -0,0 +1,167 @@
+/*
+ * Cards that share a row share one height, and one component makes that true.
+ *
+ * What is read is a JSX element's OWN class utilities together with its OWN
+ * direct children: the utilities say whether the element puts its children side
+ * by side — a grid with more than one column, or a flex that is not a column —
+ * and the children say whether those are cards. A `Card`, anything whose name
+ * ends in `Card` (`OverviewChartCard`), and a `.map()` whose callback returns
+ * one all count, because a mapped list is the row that goes ragged first.
+ *
+ * Why: a hand-written row leaves each card at its content's height, so three
+ * cards with 4, 5 and 5 rows end on three different lines and a finished
+ * analytics surface reads as broken (`rule/card-row-equal-height`). `CardRow`
+ * from `@nadicodeai/ui` stretches its cells and makes each card fill the one it
+ * lands in; a row written by hand has to remember both halves and usually
+ * remembers neither.
+ *
+ * A vertical stack is not a row and is never reported: `flex-col`, a `grid`
+ * with one column or no column count at all, and `space-y-*` each put one card
+ * under the next, where equal height means nothing.
+ *
+ * What it cannot see, by design, because each would need another file: a card
+ * behind an intermediate wrapper element, a card a child component renders from
+ * its own file, and a class list the shared reader's one hop cannot resolve.
+ * Those stay review findings. `packages/ui/src` is exempt by default, since that
+ * is where `CardRow` and the package's own compositions are built;
+ * `packageOwnedPrimitives: "lint"` holds the package to the rule too.
+ *
+ * Standard tool checked first: `better-tailwindcss/no-restricted-classes`
+ * matches a class wherever it is written and would have to ban `grid-cols-2`
+ * outright; it cannot ask what the element carrying it contains. "A multi-column
+ * container whose children are cards" is a relationship between a class list and
+ * a child list, so it is read here, on the shared class and component-name
+ * readers.
+ */
+import {
+  jsxComponentName,
+  openingElementClassUtilities,
+  packageOwnedPrimitivesSchema,
+  skipsPackageOwnedPrimitive,
+} from "./jsx-class-utility.js";
+
+const OWNER = "CardRow";
+
+function withoutVariants(token) {
+  let bracketDepth = 0;
+  let start = 0;
+  for (let index = 0; index < token.length; index += 1) {
+    if (token[index] === "[") bracketDepth += 1;
+    if (token[index] === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    if (token[index] === ":" && bracketDepth === 0) start = index + 1;
+  }
+  return token.slice(start);
+}
+
+/**
+ * The utility that makes this element a row, or undefined. A `grid-cols-*` of
+ * anything but one, an arbitrary column template, an explicit `flex-row`, or a
+ * bare `flex` that no `flex-col` turns on its side — at any breakpoint, since a
+ * row at `lg` is still a row.
+ */
+function rowUtility(utilities) {
+  const unqualified = utilities.map(withoutVariants);
+  for (const utility of unqualified) {
+    if (!utility.startsWith("grid-cols-")) continue;
+    const columns = utility.slice("grid-cols-".length);
+    if (columns !== "1") return utility;
+  }
+  if (unqualified.includes("flex-row")) return "flex-row";
+  if (unqualified.includes("flex") && !unqualified.includes("flex-col")) return "flex";
+  return undefined;
+}
+
+function isCardName(name) {
+  return typeof name === "string" && (name === "Card" || /Card$/.test(name));
+}
+
+/** The element a `.map()` or `Array.from()` callback renders, descended through its return. */
+function mappedElement(expression) {
+  if (expression?.type !== "CallExpression") return undefined;
+  const { callee } = expression;
+  if (callee.type !== "MemberExpression" || callee.computed) return undefined;
+  if (callee.property.name !== "map" && callee.property.name !== "from") return undefined;
+  const callback = expression.arguments.find(
+    (argument) =>
+      argument.type === "ArrowFunctionExpression" || argument.type === "FunctionExpression",
+  );
+  if (!callback) return undefined;
+  if (callback.body.type !== "BlockStatement") return returnedElement(callback.body);
+  for (const statement of callback.body.body) {
+    if (statement.type !== "ReturnStatement") continue;
+    const element = returnedElement(statement.argument);
+    if (element) return element;
+  }
+  return undefined;
+}
+
+/** The JSX element one expression renders, through parentheses and conditionals. */
+function returnedElement(node) {
+  if (!node) return undefined;
+  switch (node.type) {
+    case "JSXElement":
+      return node;
+    case "ConditionalExpression":
+      return returnedElement(node.consequent) ?? returnedElement(node.alternate);
+    case "LogicalExpression":
+      return returnedElement(node.right);
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * How many cards this element lays out directly. A `.map()` counts as two: one
+ * expression stands for however many records there are, which is the case the
+ * ragged edge shows up in. A card behind a condition counts as one.
+ */
+function cardChildCount(node, context) {
+  let count = 0;
+  for (const child of node.children) {
+    if (child.type === "JSXElement") {
+      if (isCardName(jsxComponentName(child.openingElement, context))) count += 1;
+      continue;
+    }
+    if (child.type !== "JSXExpressionContainer") continue;
+    const mapped = mappedElement(child.expression);
+    if (mapped) {
+      if (isCardName(jsxComponentName(mapped.openingElement, context))) count += 2;
+      continue;
+    }
+    const conditional = returnedElement(child.expression);
+    if (conditional && isCardName(jsxComponentName(conditional.openingElement, context)))
+      count += 1;
+  }
+  return count;
+}
+
+export const cardRowOwner = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Require the shared CardRow owner for a row of sibling cards",
+    },
+    schema: [packageOwnedPrimitivesSchema],
+    messages: {
+      cardRowOwner:
+        '"{{utility}}" lays these cards side by side without the owner of that row. An alignment class or a wrapper around a card is then enough for the shortest card to stop at its content and the row to end on a ragged edge. Use CardRow from @nadicodeai/ui, which stretches its cells and makes every card fill the one it lands in, wrapped in a list item or not (rule/card-row-equal-height).',
+    },
+  },
+  create(context) {
+    if (skipsPackageOwnedPrimitive(context)) return {};
+    return {
+      JSXElement(node) {
+        if (jsxComponentName(node.openingElement, context) === OWNER) return;
+        const utility = rowUtility(openingElementClassUtilities(node.openingElement, context));
+        if (!utility) return;
+        const count = cardChildCount(node, context);
+        if (count < 2) return;
+        context.report({
+          node: node.openingElement,
+          messageId: "cardRowOwner",
+          data: { utility },
+        });
+      },
+    };
+  },
+};

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/collection-scope.js";
 export * from "./components/card-marketing.js";
+export * from "./components/card-row.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
 export * from "./components/chart-breakdown-table.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -23,6 +23,7 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/collection-scope.js";
 export * from "./components/card-marketing.js";
+export * from "./components/card-row.js";
 export * from "./components/carousel.js";
 export * from "./components/chart.js";
 export * from "./components/chart-breakdown-table.js";

package/docs/activity.md

@@ -65,6 +65,10 @@ Use 20 CSS pixels inline, including buttons and rows with room for that size;
 separately tuned, and must not be obtained by shrinking the 64 preset. The 88
 extent uses the 64 preset. A 12–16 pixel badge slot keeps its existing compact
 spinner until its surrounding component explicitly accommodates this family.
+Nadia's desktop accommodates it once, in the spinner itself: the spinner's box
+stays one text line tall and at least 20 pixels wide, and the 20 pixel orb sits
+centred in it and overhangs it above and below, so a row keeps its height and
+the orb never meets the text beside it.
 
 ## React
 

package/docs/contract.md

@@ -145,6 +145,7 @@ this same renderer.
 - **Package surface is source-backed.** Public components stay flat under `src/components/`. Reviewed registry source under `src/internal/` is implementation, not a package namespace. Do not add top-level exports for recipes, blocks, agent, terminal, or vendor groupings unless a later package API decision adds concrete public source, built files, docs, and tests in the same change.
 - **Agents is the client-only conversation interface.** `@nadicodeai/ui/agents` re-exports the complete `@assistant-ui/react` runtime and primitive API plus the reviewed, branded registry composition held under `src/internal/assistant-ui/`. Its built entry retains `"use client"`. Consumers receive Thread, attachments, Markdown, reasoning, tools, suggestions, providers, runtimes, hooks, and types from that one domain namespace. Agent identity components use their direct component subpaths so server compositions do not import the conversation runtime. The vendor name is not a public NadicodeAI subpath, and the package does not rename, wrap, or rebuild assistant-ui behavior.
 - **Base UI is the active primitive base.** `components.json` must resolve through a Base style, currently `base-nova`, and `npx shadcn@latest info --json` must report `base: "base"`. Do not reintroduce `radix-ui`, `@radix-ui/*`, or `vaul` to package source, dependencies, or app optimizer configuration. Registry-owned shadcn primitives stay aligned with current `shadcn@latest` Base UI output; use Base UI `render` composition instead of Radix `asChild`. `cmdk` is allowed only for the stock shadcn Command component while the current `base-nova` registry declares that dependency; do not use it elsewhere or replace it without a shadcn/compatibility decision and tests.
+- **Charts are shadcn charts.** `chart.tsx` is shadcn's `chart` component over Recharts (`ChartContainer`, `ChartTooltip`, `ChartLegend`, theme-keyed `ChartConfig`), and the chart kit (`chart-time-series`, `chart-breakdown-table`, `chart-sparkline`, `chart-bullet-bar`, `chart-kpi-stat`, `chart-delta`, `chart-date-range-control`, `chart-entity-colors`) is built on it. An app composes these and never imports `recharts` or draws SVG charts of its own; `recharts` is declared by this package alone. A chart the kit lacks is first looked up in the shadcn registry through the CLI or MCP, then added to the kit with NadicodeAI tokens and the chart accessibility contract. What a chart shows is decided by the product; how it is drawn comes from here.
 - **Named shadcn blocks stay named.** When a user, plan, or issue selects a shadcn block/example such as `login-02`, `signup-02`, `dashboard-01`, or `sidebar-*`, use that registry item as the source of truth through shadcn CLI/MCP. Do not replace it with a package-authored abstraction unless the plan explicitly records the substitution, the reason, and the true consumer route that proves it.
 - **A change to what the package ships bumps the version.** Any change to exported components, `src/index.ts`, package `exports`, `globals.css`, theme behavior, package docs, or design-system token, CSS, or theme output this package consumes bumps both package versions in lockstep before handoff, and `npm pack --dry-run -w @nadicodeai/ui` shows exactly what consumers receive (procedure: `../../../docs/agents/publish.md`).
 
@@ -215,6 +216,16 @@ it. Both stay centered, so the column agrees with the centered page heading
 above it at either width. Consumers supply the sections inside it and do not set
 their own container width or centering around them.
 
+`CardRow` owns a row of sibling cards. The grid stretches its cells and every
+direct card child fills the one it lands in, so cards that share a row share one
+height instead of ending on a ragged edge (`rule/card-row-equal-height`).
+`columns` takes 2, 3, 4, or `auto` for an equal share however many cards there
+are, and `from` names the breakpoint the row starts at (`sm`, `md`, `lg`, `xl`);
+below it the row is one column, where each card is its own row. Consumers pass
+layout — the two props, a `gap-*` when the default rhythm is wrong, and `render`
+when the row is a `section` or a list — never appearance. `nadicodeai/card-row-owner`
+reports a multi-column grid or row flex of cards written without it.
+
 `SettingsSection` composes Card's named header, divider, FieldGroup body, and
 optional divided `footer` for local save actions and feedback. The caller owns
 the form transaction and controls; the section owns their shared geometry.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "6.5.0",
+  "version": "6.6.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -70,7 +70,7 @@
     "@assistant-ui/react": "0.15.18",
     "@assistant-ui/react-markdown": "0.14.14",
     "@base-ui/react": "^1.8.0",
-    "@nadicodeai/design-system": "6.5.0",
+    "@nadicodeai/design-system": "6.6.1",
     "@paper-design/shaders": "0.0.80",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",