@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

package/dist/components/ErrorState.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import { type LucideIcon } from "lucide-react";
+import type { StateHeadingLevel } from "./EmptyState.js";
+/** Status tone of an {@link ErrorState}. */
+export type ErrorStateTone = "danger" | "warning" | "info";
+export interface ErrorStateProps {
+    /** What happened, in plain words ("This view couldn't be loaded"). */
+    title: ReactNode;
+    /** What you can do next — or the human reason, when you can map the raw one. */
+    description?: ReactNode;
+    /**
+     * The raw technical reason (engine exception, HTTP status), shown collapsed
+     * under a "Details" disclosure so it informs without leading.
+     */
+    details?: ReactNode;
+    /** Summary text of the details disclosure. Default: the locale's "Details". */
+    detailsLabel?: string;
+    /** Renders a retry button when set. */
+    onRetry?: () => void;
+    /** Retry button label. Default: the locale's "Try again". */
+    retryLabel?: string;
+    /** Further actions after the retry button (e.g. a link to another view). */
+    actions?: ReactNode;
+    /**
+     * Default `"danger"`. `"warning"` for partial failures, `"info"` for
+     * notices. An untyped retired name still resolves (`error` → `danger`).
+     */
+    tone?: ErrorStateTone;
+    /** Replace the tone's default Lucide icon. */
+    icon?: LucideIcon;
+    /**
+     * `"block"` (default): the state that replaces a whole view or widget body.
+     * `"inline"`: a compact alert above content that still renders.
+     */
+    variant?: "block" | "inline";
+    /**
+     * Live-region role. Default `"alert"` — an error that appears after the
+     * fact is announced. Use `"status"` for a quieter notice, or `"none"` when
+     * the state is part of the first paint.
+     */
+    role?: "alert" | "status" | "none";
+    /** Element of the title. Default `"h2"` for `block`, `"p"` for `inline`. */
+    titleAs?: StateHeadingLevel;
+    className?: string;
+}
+/**
+ * The one error pattern: a Lucide icon, a title that says what happened, a
+ * line that says what you can do, the raw reason collapsed under "Details",
+ * and a retry. `inline` is the alert form above content that still renders
+ * (failed data steps); `block` replaces a whole view or widget body.
+ */
+export declare function ErrorState({ title, description, details, detailsLabel, onRetry, retryLabel, actions, tone: toneProp, icon, variant, role, titleAs, className, }: ErrorStateProps): import("react").JSX.Element;
+//# sourceMappingURL=ErrorState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.d.ts","sourceRoot":"","sources":["../../src/components/ErrorState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAA+C,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAM3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAExD,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;AAE1D,MAAM,WAAW,eAAe;IAC9B,sEAAsE;IACtE,KAAK,EAAE,SAAS,CAAA;IAChB,gFAAgF;IAChF,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqDD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,OAAO,EACP,YAAY,EACZ,OAAO,EACP,UAAU,EACV,OAAO,EACP,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,OAAiB,EACjB,IAAc,EACd,OAAO,EACP,SAAS,GACV,EAAE,eAAe,+BAoCjB"}

package/dist/components/ErrorState.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleAlert, Info, RefreshCw, TriangleAlert } from "lucide-react";
+import { useToolkitMessages } from "../locale/locale-provider.js";
+import { Button } from "../primitives/button.js";
+import { FOCUS_RING } from "../lib/focus-ring.js";
+import { resolveTone, TONE_BORDER, TONE_ICON, TONE_SOFT } from "../lib/tone-utils.js";
+import { cn } from "../lib/utils.js";
+const STATE_ICON = {
+    danger: CircleAlert,
+    warning: TriangleAlert,
+    info: Info,
+};
+/**
+ * The state's tone from whatever arrives: its three tones as is, a retired
+ * name through `resolveTone` (`error` → `danger`, `notice` → `info`), any
+ * other tone or unknown name as the default `danger`. A tone from untyped
+ * data (plain JS, the wire) never crashes the view on a missing icon.
+ */
+function stateTone(name) {
+    const tone = resolveTone(name, "danger");
+    return tone === "warning" || tone === "info" ? tone : "danger";
+}
+/**
+ * Per-variant geometry: `block` replaces a surface and reads as running text
+ * (16 px), `inline` is the compact alert box above content that still renders
+ * (14 px, the dense-controls exception of the type scale).
+ */
+const VARIANT = {
+    block: {
+        box: "gap-4 p-4",
+        icon: "size-5",
+        title: "text-body",
+        description: "text-body",
+        defaultTitleAs: "h2",
+        retry: "default",
+    },
+    inline: {
+        box: "gap-3 px-4 py-3 text-dense",
+        icon: "size-4",
+        title: "text-dense",
+        description: "text-dense",
+        defaultTitleAs: "p",
+        retry: "outline",
+    },
+};
+/**
+ * The one error pattern: a Lucide icon, a title that says what happened, a
+ * line that says what you can do, the raw reason collapsed under "Details",
+ * and a retry. `inline` is the alert form above content that still renders
+ * (failed data steps); `block` replaces a whole view or widget body.
+ */
+export function ErrorState({ title, description, details, detailsLabel, onRetry, retryLabel, actions, tone: toneProp, icon, variant = "block", role = "alert", titleAs, className, }) {
+    const tone = stateTone(toneProp);
+    const style = VARIANT[variant];
+    const Icon = icon ?? STATE_ICON[tone];
+    const Title = titleAs ?? style.defaultTitleAs;
+    // The status colour as rim, tint and icon; every word on the tint is the
+    // foreground (TONE_SOFT, CI §3.3). On dark the tint is transparent and the
+    // rim carries the tone.
+    return (_jsxs("div", { "data-slot": "error-state", "data-variant": variant, "data-tone": tone, role: role === "none" ? undefined : role, className: cn("flex items-start rounded-md border", style.box, TONE_SOFT[tone], TONE_BORDER[tone], className), children: [_jsx(Icon, { "aria-hidden": "true", className: cn("mt-0.5 shrink-0", style.icon, TONE_ICON[tone]) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx(Title, { className: cn("font-semibold", style.title), children: title }), description && _jsx("div", { className: cn("break-words", style.description), children: description }), details && _jsx(ErrorDetails, { label: detailsLabel, children: details }), _jsx(ErrorActions, { onRetry: onRetry, retryLabel: retryLabel, retryVariant: style.retry, actions: actions })] })] }));
+}
+/**
+ * The raw reason, collapsed: a native disclosure (keyboard + screen-reader
+ * ready). It sits on the tint, so its text stays the foreground; the collapse
+ * and the small mono type keep it quieter than the title.
+ */
+function ErrorDetails({ label, children }) {
+    const messages = useToolkitMessages();
+    return (_jsxs("details", { className: "text-small", children: [_jsx("summary", { className: `w-fit cursor-pointer rounded-sm py-0.5 select-none ${FOCUS_RING}`, children: label ?? messages.common.details }), _jsx("pre", { className: "mt-1 font-mono break-words whitespace-pre-wrap", children: children })] }));
+}
+function ErrorActions({ onRetry, retryLabel, retryVariant, actions, }) {
+    const messages = useToolkitMessages();
+    if (!onRetry && !actions)
+        return null;
+    return (_jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [onRetry && (_jsxs(Button, { type: "button", size: "sm", variant: retryVariant, onClick: onRetry, children: [_jsx(RefreshCw, { "aria-hidden": "true" }), retryLabel ?? messages.common.retry] })), actions] }));
+}
+//# sourceMappingURL=ErrorState.js.map

package/dist/components/ErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../src/components/ErrorState.tsx"],"names":[],"mappings":"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"}

package/dist/components/FilterBar.d.ts

@@ -1,28 +1,39 @@
 export interface FilterChip {
     /** Stable id passed back to `onChipToggle`. */
     id: string;
-    /** Visible chip label. */
+    /** Visible chip label (its accessible name, with the count). */
     label: string;
     /** Optional count rendered after the label. */
     count?: number | string;
-    /** Whether the chip is currently active. */
+    /** Whether the chip is currently active (`aria-pressed`). */
     active?: boolean;
 }
 export interface FilterBarProps {
     /** Current search text (controlled). */
     search: string;
-    /** Placeholder for the search input. Default `"Filter…"`. */
+    /** Placeholder for the search input. Default: the locale's "Filter…". */
     searchPlaceholder?: string;
+    /**
+     * Accessible name of the search input. Default: the locale's "Filter" — a
+     * placeholder is no label (it disappears while you type).
+     */
+    searchAriaLabel?: string;
     /** Called with the new search text on every keystroke. */
     onSearchChange: (next: string) => void;
     /** Filter chips rendered to the right of the search input. */
     chips: FilterChip[];
     /** Called with a chip id when it is toggled. */
     onChipToggle: (id: string) => void;
+    /** Names the chip row (`role="group"`). Default: the locale's "Filters". */
+    chipsAriaLabel?: string;
+    className?: string;
 }
 /**
  * Search input + toggleable chip row for filtering a list/table of widget
- * items. Pair with `useDebouncedValue` to avoid re-querying on every keystroke.
+ * items. The input is labelled; every chip is a toggle button whose state is
+ * `aria-pressed`. An active chip is a selection in the CI pattern: the info
+ * tint and edge around foreground text. Pair with `useDebouncedValue` to
+ * avoid re-querying on every keystroke.
  */
-export declare function FilterBar({ search, searchPlaceholder, onSearchChange, chips, onChipToggle, }: FilterBarProps): import("react").JSX.Element;
+export declare function FilterBar({ search, searchPlaceholder, searchAriaLabel, onSearchChange, chips, onChipToggle, chipsAriaLabel, className, }: FilterBarProps): import("react").JSX.Element;
 //# sourceMappingURL=FilterBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAA;IACV,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAA;IACd,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,0DAA0D;IAC1D,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,8DAA8D;IAC9D,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,gDAAgD;IAChD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,iBAA6B,EAC7B,cAAc,EACd,KAAK,EACL,YAAY,GACb,EAAE,cAAc,+BA+BhB"}
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,UAAU;IACzB,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAA;IACV,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAA;IACd,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0DAA0D;IAC1D,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,8DAA8D;IAC9D,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,gDAAgD;IAChD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,KAAK,EACL,YAAY,EACZ,cAAc,EACd,SAAS,GACV,EAAE,cAAc,+BA0ChB"}

package/dist/components/FilterBar.js

@@ -1,12 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_RING } from "../lib/focus-ring.js";
+import { TONE_BORDER, TONE_SOFT } from "../lib/tone-utils.js";
+import { cn } from "../lib/utils.js";
+import { useToolkitMessages } from "../locale/locale-provider.js";
 import { Input } from "../primitives/input.js";
 /**
  * Search input + toggleable chip row for filtering a list/table of widget
- * items. Pair with `useDebouncedValue` to avoid re-querying on every keystroke.
+ * items. The input is labelled; every chip is a toggle button whose state is
+ * `aria-pressed`. An active chip is a selection in the CI pattern: the info
+ * tint and edge around foreground text. Pair with `useDebouncedValue` to
+ * avoid re-querying on every keystroke.
  */
-export function FilterBar({ search, searchPlaceholder = "Filter…", onSearchChange, chips, onChipToggle, }) {
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Input, { type: "search", value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder, className: "h-9 min-w-[220px] flex-1 text-sm" }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: chips.map((chip) => (_jsxs("button", { type: "button", onClick: () => onChipToggle(chip.id), className: `inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ${chip.active
-                        ? "bg-accent border-border text-accent-foreground font-semibold"
-                        : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"}`, children: [chip.label, chip.count !== undefined && chip.count !== "" && (_jsx("span", { className: "tabular-nums opacity-60", children: chip.count }))] }, chip.id))) })] }));
+export function FilterBar({ search, searchPlaceholder, searchAriaLabel, onSearchChange, chips, onChipToggle, chipsAriaLabel, className, }) {
+    const { filterBar } = useToolkitMessages();
+    return (_jsxs("div", { "data-slot": "filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [_jsx(Input, { type: "search", value: search, onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder ?? filterBar.searchPlaceholder, "aria-label": searchAriaLabel ?? filterBar.searchLabel, className: "text-dense md:text-dense h-9 min-w-[220px] flex-1" }), chips.length > 0 && (_jsx("div", { role: "group", "aria-label": chipsAriaLabel ?? filterBar.chipsLabel, className: "flex flex-wrap gap-1.5", children: chips.map((chip) => (_jsxs("button", { type: "button", onClick: () => onChipToggle(chip.id), "aria-pressed": Boolean(chip.active), className: cn("text-small inline-flex items-center gap-1.5 rounded-sm border px-2.5 py-1 font-medium transition-colors", FOCUS_RING, chip.active
+                        ? cn(TONE_SOFT.info, TONE_BORDER.info, "font-semibold")
+                        : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"), children: [chip.label, chip.count !== undefined && chip.count !== "" && (_jsx("span", { className: "font-normal tabular-nums", children: chip.count }))] }, chip.id))) }))] }));
 }
 //# sourceMappingURL=FilterBar.js.map

package/dist/components/FilterBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AA0B9C;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,GAAG,SAAS,EAC7B,cAAc,EACd,KAAK,EACL,YAAY,GACG;IACf,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,WAAW,EAAE,iBAAiB,EAC9B,SAAS,EAAC,kCAAkC,GAC5C,EACF,cAAK,SAAS,EAAC,wBAAwB,YACpC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,kBACE,IAAI,EAAC,QAAQ,EAEb,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,SAAS,EAAE,wGACT,IAAI,CAAC,MAAM;wBACT,CAAC,CAAC,8DAA8D;wBAChE,CAAC,CAAC,wFACN,EAAE,aAED,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,CAChD,eAAM,SAAS,EAAC,yBAAyB,YAAE,IAAI,CAAC,KAAK,GAAQ,CAC9D,KAXI,IAAI,CAAC,EAAE,CAYL,CACV,CAAC,GACE,IACF,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../src/components/FilterBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAkC9C;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,KAAK,EACL,YAAY,EACZ,cAAc,EACd,SAAS,GACM;IACf,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAC1C,OAAO,CACL,4BAAe,YAAY,EAAC,SAAS,EAAE,EAAE,CAAC,mCAAmC,EAAE,SAAS,CAAC,aACvF,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,WAAW,EAAE,iBAAiB,IAAI,SAAS,CAAC,iBAAiB,gBACjD,eAAe,IAAI,SAAS,CAAC,WAAW,EACpD,SAAS,EAAC,mDAAmD,GAC7D,EACD,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CACnB,cACE,IAAI,EAAC,OAAO,gBACA,cAAc,IAAI,SAAS,CAAC,UAAU,EAClD,SAAS,EAAC,wBAAwB,YAEjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,kBACE,IAAI,EAAC,QAAQ,EAEb,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,kBACtB,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAClC,SAAS,EAAE,EAAE,CACX,yGAAyG,EACzG,UAAU,EACV,IAAI,CAAC,MAAM;wBACT,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,eAAe,CAAC;wBACvD,CAAC,CAAC,wFAAwF,CAC7F,aAEA,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,CAChD,eAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,KAAK,GAAQ,CAC/D,KAdI,IAAI,CAAC,EAAE,CAeL,CACV,CAAC,GACE,CACP,IACG,CACP,CAAA;AACH,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"GroupCard.d.ts","sourceRoot":"","sources":["../../src/components/GroupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjE,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,+BA8BlF"}
+{"version":3,"file":"GroupCard.d.ts","sourceRoot":"","sources":["../../src/components/GroupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjE,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAA;IACjB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,sEAAsE;IACtE,OAAO,EAAE,SAAS,CAAA;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,cAAc,+BA8BlF"}

package/dist/components/GroupCard.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_RING_INSET } from "../lib/focus-ring.js";
 /**
  * Bordered card with a clickable summary bar and a collapsible body. Use to
  * group related rows behind an expandable header (e.g. items grouped by a key).
@@ -19,6 +20,6 @@ export function GroupCard({ expanded, onToggle, summary, children }) {
             return;
         onToggle();
     }
-    return (_jsxs("div", { className: "border-border mb-2 overflow-hidden rounded-lg border", children: [_jsx("div", { role: "button", tabIndex: 0, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, className: `bg-card hover:bg-muted focus-visible:ring-ring/50 cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 ${expanded ? "border-border border-b" : ""}`, children: summary }), expanded && children && _jsx("div", { children: children })] }));
+    return (_jsxs("div", { className: "border-border mb-2 overflow-hidden rounded-md border", children: [_jsx("div", { role: "button", tabIndex: 0, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, className: `bg-card hover:bg-muted cursor-pointer transition-colors ${FOCUS_RING_INSET} ${expanded ? "border-border border-b" : ""}`, children: summary }), expanded && children && _jsx("div", { children: children })] }));
 }
 //# sourceMappingURL=GroupCard.js.map

package/dist/components/GroupCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupCard.js","sourceRoot":"","sources":["../../src/components/GroupCard.tsx"],"names":[],"mappings":";AAaA;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAkB;IACjF,SAAS,aAAa,CAAC,CAAgC;QACrD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC;IAED,SAAS,WAAW,CAAC,CAA6B;QAChD,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,2CAA2C,CAAC;YAAE,OAAM;QAC1F,QAAQ,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,sDAAsD,aACnE,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,QAAQ,EACvB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,8HACT,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACxC,EAAE,YAED,OAAO,GACJ,EACL,QAAQ,IAAI,QAAQ,IAAI,wBAAM,QAAQ,GAAO,IAC1C,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"GroupCard.js","sourceRoot":"","sources":["../../src/components/GroupCard.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAavD;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAkB;IACjF,SAAS,aAAa,CAAC,CAAgC;QACrD,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC;IAED,SAAS,WAAW,CAAC,CAA6B;QAChD,IAAK,CAAC,CAAC,MAAsB,CAAC,OAAO,CAAC,2CAA2C,CAAC;YAAE,OAAM;QAC1F,QAAQ,EAAE,CAAA;IACZ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,sDAAsD,aACnE,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,QAAQ,EACvB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,2DAA2D,gBAAgB,IACpF,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EACxC,EAAE,YAED,OAAO,GACJ,EACL,QAAQ,IAAI,QAAQ,IAAI,wBAAM,QAAQ,GAAO,IAC1C,CACP,CAAA;AACH,CAAC"}

package/dist/components/KpiGrid.d.ts

@@ -1,43 +1,95 @@
-import type { ReactNode } from "react";
-import { type ToneVariant } from "../lib/tone-utils.js";
+import { type ReactNode } from "react";
+import { type ToneName } from "../lib/tone-utils.js";
+type TrendDirection = "up" | "down" | "flat";
 export interface KpiCell {
-    /** Caption shown above the value. */
+    /** Caption shown above the value. Part of the cell's accessible name. */
     label: ReactNode;
     /** The headline figure. Pre-format numbers for locale/currency. */
     value: ReactNode;
     /** Small fraction shown next to the value, e.g. ` /14`. */
     fraction?: ReactNode;
-    /** Optional trend line under the value (e.g. `"+12% vs last week"`). */
+    /** Optional trend line under the value (e.g. `"+12% vs last week"`); its words stay neutral. */
     trend?: ReactNode;
-    /** Colours the trend line. `up` reads as bad (danger), `down` as good (success). */
-    trendDirection?: "up" | "down" | "flat";
-    /** Tone applied to the value text (e.g. `"danger"` for a breached metric). */
-    tone?: ToneVariant;
+    /**
+     * Draws a Lucide direction icon (TrendingUp / TrendingDown / Minus) before
+     * the trend line, in the trend's tone: `up` reads as bad (danger), `down`
+     * as good (success) unless {@link KpiCell.trendTone} says otherwise.
+     */
+    trendDirection?: TrendDirection;
+    /**
+     * Explicit tone of the trend — overrides the direction's default. Shown as
+     * the direction icon's colour, or as a dot when there is no direction.
+     */
+    trendTone?: ToneName;
+    /**
+     * The state the figure stands for (e.g. `"danger"` for a breached metric),
+     * shown as a dot next to the label (strip) or as the card's tint and edge
+     * (`variant="soft"`). The figure itself stays in the foreground colour.
+     */
+    tone?: ToneName;
     /** When set, the cell renders as a button — turns a metric into a nav entry point. */
     onClick?: () => void;
-    /** Accessible label for the clickable cell (recommended when `onClick` is set). */
+    /**
+     * What activating the cell does ("Opens the incidents dashboard"). Read as
+     * the button's DESCRIPTION (`aria-describedby`), so its accessible name
+     * stays the visible label and value (WCAG 2.5.3, label in name).
+     */
+    actionHint?: string;
+    /**
+     * @deprecated Replaces the accessible name with text a voice-control user
+     * cannot see (WCAG 2.5.3). Say what the click does in
+     * {@link KpiCell.actionHint}; the visible label and value name the cell.
+     */
     ariaLabel?: string;
 }
+/** The responsive column classes for `count` cells (clamped to 1–6). */
+export declare function kpiColumns(count: number): string;
 export interface KpiGridHeader {
-    /** Group label, rendered uppercase in the strip header. */
+    /** Group label of the strip header (13 px semibold, normal case). */
     label: ReactNode;
     /** Optional muted badge to the right of the label. */
     badge?: ReactNode;
 }
 export interface KpiGridProps {
-    /** The metric cells, flowed as columns (1–6, clamped). */
+    /** The metric cells, flowed as columns (1–6; more wrap onto further rows). */
     cells: KpiCell[];
     /** Wrap the strip in a bordered card with an optional group `header`. Default `false`. */
     boxed?: boolean;
-    /** Group header shown above the strip when `boxed`. */
+    /** Group header above the strip (strip variant), usually with `boxed`. */
     header?: KpiGridHeader;
+    /**
+     * `"strip"` (default): one bordered strip, the tone as a dot next to the
+     * label. `"soft"`: one card per cell in its tone's tint and edge (`boxed`
+     * and `header` don't apply).
+     */
+    variant?: "strip" | "soft";
+    /** Names the group of metrics (`role="group"`); omit when a heading right above names it. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * A row of headline metrics — the canonical way to show KPIs in a widget
+ * (replaces the single-metric KPICard). Cells flow as columns (1–6), falling
+ * back to 2 columns in narrow frames. A cell's `tone` shows as a dot next to
+ * its label (or as a soft card's tint and edge); figures stay in the
+ * foreground colour. A clickable cell is a button whose accessible name is
+ * its visible label and value; `actionHint` describes what the click does.
+ */
+export declare function KpiGrid({ cells, boxed, header, variant, ariaLabel, className, }: KpiGridProps): import("react").JSX.Element;
+export interface KpiGridSkeletonProps {
+    /** How many cells the loaded grid will have. */
+    cells: number;
+    /** The loaded grid's variant. Default `"strip"`. */
+    variant?: "strip" | "soft";
+    /** The loaded grid's `boxed`. Default `false`. */
+    boxed?: boolean;
+    className?: string;
 }
 /**
- * Bordered strip of KPI cells — the canonical way to show a row of headline
- * metrics in a widget (replaces the single-metric KPICard). Cells flow as
- * columns (1–6) and can be made clickable to drill into a detail view. Use
- * `boxed` + `header` for a labelled metric block; unboxed (default) renders the
- * lighter `border-y` strip.
+ * Loading placeholder with {@link KpiGrid}'s geometry (same wrapper, grid and
+ * cell padding in both variants), so the layout doesn't jump when the data
+ * arrives. `aria-busy`; pair it with a status line if the wait is long.
  */
-export declare function KpiGrid({ cells, boxed, header }: KpiGridProps): import("react").JSX.Element;
+export declare function KpiGridSkeleton({ cells, variant, boxed, className, }: KpiGridSkeletonProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=KpiGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"KpiGrid.d.ts","sourceRoot":"","sources":["../../src/components/KpiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AASlE,MAAM,WAAW,OAAO;IACtB,qCAAqC;IACrC,KAAK,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,KAAK,EAAE,SAAS,CAAA;IAChB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oFAAoF;IACpF,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACvC,8EAA8E;IAC9E,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAWD,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,KAAK,EAAE,SAAS,CAAA;IAChB,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,0DAA0D;IAC1D,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,uDAAuD;IACvD,MAAM,CAAC,EAAE,aAAa,CAAA;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAa,EAAE,MAAM,EAAE,EAAE,YAAY,+BAwErE"}
+{"version":3,"file":"KpiGrid.d.ts","sourceRoot":"","sources":["../../src/components/KpiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG7C,OAAO,EAML,KAAK,QAAQ,EAEd,MAAM,sBAAsB,CAAA;AAK7B,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;AAmB5C,MAAM,WAAW,OAAO;IACtB,yEAAyE;IACzE,KAAK,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,KAAK,EAAE,SAAS,CAAA;IAChB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gGAAgG;IAChG,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;OAIG;IACH,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAA;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,wEAAwE;AACxE,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGhD;AAED,MAAM,WAAW,aAAa;IAC5B,qEAAqE;IACrE,KAAK,EAAE,SAAS,CAAA;IAChB,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,8EAA8E;IAC9E,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,6FAA6F;IAC7F,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqJD;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAa,EACb,MAAM,EACN,OAAiB,EACjB,SAAS,EACT,SAAS,GACV,EAAE,YAAY,+BAiCd;AAED,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAiB,EACjB,KAAa,EACb,SAAS,GACV,EAAE,oBAAoB,+BAgCtB"}

package/dist/components/KpiGrid.js

@@ -1,35 +1,124 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TONE_TEXT } from "../lib/tone-utils.js";
-/** Trend direction → tone for the small trend line under a value. */
+import { useId } from "react";
+import { ChevronRight, Minus, TrendingDown, TrendingUp } from "lucide-react";
+import { FOCUS_RING_INSET, FOCUS_RING } from "../lib/focus-ring.js";
+import { resolveTone, TONE_BORDER, TONE_DOT, TONE_ICON, TONE_TINT, } from "../lib/tone-utils.js";
+import { MICRO_LABEL } from "../lib/typography.js";
+import { cn } from "../lib/utils.js";
+import { Skeleton } from "../primitives/skeleton.js";
+/**
+ * Direction → tone when no `trendTone` is set (incident-biased: up reads as
+ * worse). The tone shows ONLY as the direction icon's colour or a dot; the
+ * trend words stay neutral (no coloured digits, CI §3.3).
+ */
 const TREND_TONE = {
-    up: "text-danger",
-    down: "text-success",
-    flat: "text-muted-foreground",
+    up: "danger",
+    down: "success",
+    flat: "neutral",
+};
+const TREND_ICON = {
+    up: TrendingUp,
+    down: TrendingDown,
+    flat: Minus,
 };
+/**
+ * Columns per cell count. 4+ cells fall back to 2 columns in narrow frames
+ * (inline chat views are often under 500 px, where five cells side by side
+ * leave ~40 px each); 6 steps through 3.
+ */
 const COL_CLASS = {
     1: "grid-cols-1",
     2: "grid-cols-2",
     3: "grid-cols-3",
-    4: "grid-cols-4",
-    5: "grid-cols-5",
-    6: "grid-cols-6",
+    4: "grid-cols-2 sm:grid-cols-4",
+    5: "grid-cols-2 sm:grid-cols-5",
+    6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
 };
+/** The responsive column classes for `count` cells (clamped to 1–6). */
+export function kpiColumns(count) {
+    const cols = Math.min(Math.max(Math.trunc(count) || 1, 1), 6);
+    return COL_CLASS[cols] ?? "grid-cols-1";
+}
+/** A small status dot; decorative — the label next to it carries the meaning. */
+function ToneDot({ tone, className }) {
+    return (_jsx("span", { "aria-hidden": "true", "data-tone": tone, className: cn("shrink-0 rounded-full", className, TONE_DOT[tone]) }));
+}
+/**
+ * The trend line: neutral words (the foreground next to a state, quiet
+ * without one) and the state beside them as a direction icon or a dot in the
+ * tone — never as coloured digits.
+ */
+function TrendLine({ cell }) {
+    const direction = cell.trendDirection;
+    const tone = cell.trendTone !== undefined
+        ? resolveTone(cell.trendTone)
+        : direction
+            ? TREND_TONE[direction]
+            : "neutral";
+    const marked = tone !== "neutral";
+    const Icon = direction ? TREND_ICON[direction] : undefined;
+    return (_jsxs("div", { "data-slot": "kpi-trend", className: "text-small mt-1.5 flex items-center gap-1.5", children: [Icon ? (_jsx(Icon, { "aria-hidden": "true", className: cn("size-4 shrink-0", TONE_ICON[tone]) })) : (marked && _jsx(ToneDot, { tone: tone, className: "size-1.5" })), _jsx("span", { className: marked ? "text-foreground" : "text-muted-foreground", children: cell.trend })] }));
+}
+/** Label, figure, fraction and trend — shared by the strip and soft variants. */
+function KpiCellBody({ cell, variant }) {
+    const tone = resolveTone(cell.tone);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn("text-small flex items-center justify-between gap-2 font-medium", variant === "strip" ? "text-muted-foreground" : "text-foreground"), children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [variant === "strip" && tone !== "neutral" && _jsx(ToneDot, { tone: tone, className: "size-2" }), _jsx("span", { className: "min-w-0 break-words", children: cell.label })] }), cell.onClick && _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 shrink-0" })] }), _jsxs("div", { className: "text-title text-foreground mt-1.5 leading-none tracking-tight break-words tabular-nums", children: [cell.value, cell.fraction && (_jsx("span", { className: "text-dense text-muted-foreground ml-0.5 font-normal", children: cell.fraction }))] }), cell.trend && _jsx(TrendLine, { cell: cell })] }));
+}
+/** One cell: a button when clickable (named by its visible text), else a plain box. */
+function KpiCellView({ cell, variant, className, }) {
+    const hintId = useId();
+    const body = _jsx(KpiCellBody, { cell: cell, variant: variant });
+    const tone = cell.tone === undefined ? undefined : resolveTone(cell.tone);
+    if (!cell.onClick) {
+        return (_jsx("div", { "data-tone": tone, className: className, children: body }));
+    }
+    return (_jsxs("button", { type: "button", onClick: cell.onClick, "aria-label": cell.ariaLabel, "aria-describedby": cell.actionHint ? hintId : undefined, "data-tone": tone, className: cn("cursor-pointer text-left transition-colors", variant === "strip" ? cn("hover:bg-muted", FOCUS_RING_INSET) : FOCUS_RING, className), children: [body, cell.actionHint && (_jsx("span", { id: hintId, hidden: true, children: cell.actionHint }))] }));
+}
+/** A soft card: the tone's tint and edge around neutral text. */
+function softCardClass(tone) {
+    const t = resolveTone(tone);
+    return cn("text-foreground rounded-lg border p-4", TONE_TINT[t], TONE_BORDER[t]);
+}
+/**
+ * The strip's dividers. Each cell draws its own right and bottom rule, and the
+ * grid reaches 1 px past its clipping frame, so the rules on the outer edges
+ * fall away at any column count. An empty track in a short last row (5 cells
+ * in 2 columns, 7 in 6) keeps the card colour: a `gap-px` grid on a
+ * `bg-border` container would paint it as a solid block of the divider colour.
+ */
+const STRIP_FRAME = "bg-card overflow-hidden";
+const STRIP_GRID = "-mr-px -mb-px grid";
+const STRIP_CELL = "border-border min-w-0 border-r border-b px-5 py-4";
+function KpiStripHeader({ header }) {
+    return (_jsxs("div", { className: cn("border-border bg-muted text-muted-foreground flex items-center gap-2 border-b px-4 py-2", MICRO_LABEL), children: [_jsx("span", { children: header.label }), header.badge && (_jsx("span", { className: "border-border bg-card text-muted-foreground text-small rounded-sm border px-1.5 font-medium", children: header.badge }))] }));
+}
+/**
+ * A row of headline metrics — the canonical way to show KPIs in a widget
+ * (replaces the single-metric KPICard). Cells flow as columns (1–6), falling
+ * back to 2 columns in narrow frames. A cell's `tone` shows as a dot next to
+ * its label (or as a soft card's tint and edge); figures stay in the
+ * foreground colour. A clickable cell is a button whose accessible name is
+ * its visible label and value; `actionHint` describes what the click does.
+ */
+export function KpiGrid({ cells, boxed = false, header, variant = "strip", ariaLabel, className, }) {
+    const colClass = kpiColumns(cells.length);
+    const group = ariaLabel ? { role: "group", "aria-label": ariaLabel } : {};
+    if (variant === "soft") {
+        return (_jsx("div", { ...group, "data-slot": "kpi-grid", className: cn("grid gap-4", colClass, className), children: cells.map((cell, idx) => (_jsx(KpiCellView, { cell: cell, variant: "soft", className: cn("min-w-0", softCardClass(cell.tone)) }, idx))) }));
+    }
+    return (_jsxs("div", { ...group, "data-slot": "kpi-grid", className: cn(boxed && "border-border overflow-hidden rounded-lg border", className), children: [header && _jsx(KpiStripHeader, { header: header }), _jsx("div", { "data-slot": "kpi-strip", className: cn(STRIP_FRAME, !boxed && "border-border border-y"), children: _jsx("div", { className: cn(STRIP_GRID, colClass), children: cells.map((cell, idx) => (_jsx(KpiCellView, { cell: cell, variant: "strip", className: STRIP_CELL }, idx))) }) })] }));
+}
 /**
- * Bordered strip of KPI cells — the canonical way to show a row of headline
- * metrics in a widget (replaces the single-metric KPICard). Cells flow as
- * columns (1–6) and can be made clickable to drill into a detail view. Use
- * `boxed` + `header` for a labelled metric block; unboxed (default) renders the
- * lighter `border-y` strip.
+ * Loading placeholder with {@link KpiGrid}'s geometry (same wrapper, grid and
+ * cell padding in both variants), so the layout doesn't jump when the data
+ * arrives. `aria-busy`; pair it with a status line if the wait is long.
  */
-export function KpiGrid({ cells, boxed = false, header }) {
-    const cols = Math.min(Math.max(cells.length, 1), 6);
-    const colClass = COL_CLASS[cols] ?? "grid-cols-4";
-    const wrapperClass = boxed ? "border-border overflow-hidden rounded-lg border" : "";
-    const stripClass = boxed ? "" : "border-border border-y";
-    return (_jsxs("div", { className: wrapperClass, children: [header && (_jsxs("div", { className: "border-border bg-muted text-muted-foreground flex items-center gap-2 border-b px-4 py-2 text-[11px] font-semibold tracking-wide uppercase", children: [_jsx("span", { children: header.label }), header.badge && (_jsx("span", { className: "border-border bg-card text-muted-foreground rounded border px-1.5 py-0 text-[10px] font-medium normal-case", children: header.badge }))] })), _jsx("div", { className: `grid ${colClass} ${stripClass}`, children: cells.map((cell, idx) => {
-                    const borderClass = idx < cells.length - 1 ? "border-border border-r" : "";
-                    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between gap-2 text-xs font-medium", children: [_jsx("span", { children: cell.label }), cell.onClick && (_jsx("span", { "aria-hidden": "true", className: "text-sm leading-none", children: "\u203A" }))] }), _jsxs("div", { className: `mt-1.5 text-2xl leading-none font-bold tracking-tight tabular-nums ${(cell.tone && TONE_TEXT[cell.tone]) || "text-foreground"}`, children: [cell.value, cell.fraction && (_jsx("span", { className: "text-muted-foreground ml-0.5 text-sm font-normal", children: cell.fraction }))] }), cell.trend && (_jsx("div", { className: `mt-1.5 text-xs ${cell.trendDirection ? TREND_TONE[cell.trendDirection] : "text-muted-foreground"}`, children: cell.trend }))] }));
-                    return cell.onClick ? (_jsx("button", { type: "button", onClick: cell.onClick, "aria-label": cell.ariaLabel, className: `hover:bg-muted focus-visible:ring-ring cursor-pointer px-5 py-4 text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-inset ${borderClass}`, children: content }, idx)) : (_jsx("div", { className: `px-5 py-4 ${borderClass}`, children: content }, idx));
-                }) })] }));
+export function KpiGridSkeleton({ cells, variant = "strip", boxed = false, className, }) {
+    const colClass = kpiColumns(cells);
+    const count = Math.max(Math.trunc(cells) || 0, 0);
+    if (variant === "soft") {
+        return (_jsx("div", { "aria-busy": "true", className: cn("grid gap-4", colClass, className), children: Array.from({ length: count }, (_, idx) => (_jsxs("div", { className: "bg-muted border-border rounded-lg border p-4", children: [_jsx(Skeleton, { className: "h-4 w-20" }), _jsx(Skeleton, { className: "mt-2 h-7 w-14" })] }, idx))) }));
+    }
+    return (_jsx("div", { "aria-busy": "true", className: cn(boxed && "border-border overflow-hidden rounded-lg border", className), children: _jsx("div", { "data-slot": "kpi-strip", className: cn(STRIP_FRAME, !boxed && "border-border border-y"), children: _jsx("div", { className: cn(STRIP_GRID, colClass), children: Array.from({ length: count }, (_, idx) => (_jsxs("div", { className: STRIP_CELL, children: [_jsx(Skeleton, { className: "h-4 w-16" }), _jsx(Skeleton, { className: "mt-2.5 h-7 w-14" })] }, idx))) }) }) }));
 }
 //# sourceMappingURL=KpiGrid.js.map

package/dist/components/KpiGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"KpiGrid.js","sourceRoot":"","sources":["../../src/components/KpiGrid.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"KpiGrid.js","sourceRoot":"","sources":["../../src/components/KpiGrid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAkB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC7F,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EACL,WAAW,EACX,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAS,GAGV,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAIpD;;;;GAIG;AACH,MAAM,UAAU,GAAwC;IACtD,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,UAAU,GAAuC;IACrD,EAAE,EAAE,UAAU;IACd,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,KAAK;CACZ,CAAA;AA4CD;;;;GAIG;AACH,MAAM,SAAS,GAA2B;IACxC,CAAC,EAAE,aAAa;IAChB,CAAC,EAAE,aAAa;IAChB,CAAC,EAAE,aAAa;IAChB,CAAC,EAAE,4BAA4B;IAC/B,CAAC,EAAE,4BAA4B;IAC/B,CAAC,EAAE,2CAA2C;CAC/C,CAAA;AAED,wEAAwE;AACxE,MAAM,UAAU,UAAU,CAAC,KAAa;IACtC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC7D,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,aAAa,CAAA;AACzC,CAAC;AA2BD,iFAAiF;AACjF,SAAS,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,EAA4C;IAC5E,OAAO,CACL,8BACc,MAAM,eACP,IAAI,EACf,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,GACjE,CACH,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,SAAS,SAAS,CAAC,EAAE,IAAI,EAAqB;IAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAA;IACrC,MAAM,IAAI,GACR,IAAI,CAAC,SAAS,KAAK,SAAS;QAC1B,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7B,CAAC,CAAC,SAAS;YACT,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC;YACvB,CAAC,CAAC,SAAS,CAAA;IACjB,MAAM,MAAM,GAAG,IAAI,KAAK,SAAS,CAAA;IACjC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC1D,OAAO,CACL,4BAAe,WAAW,EAAC,SAAS,EAAC,6CAA6C,aAC/E,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,IAAI,mBAAa,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,GAAI,CAC/E,CAAC,CAAC,CAAC,CACF,MAAM,IAAI,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,UAAU,GAAG,CACvD,EACD,eAAM,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,uBAAuB,YAAG,IAAI,CAAC,KAAK,GAAQ,IACtF,CACP,CAAA;AACH,CAAC;AAED,iFAAiF;AACjF,SAAS,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAgD;IAClF,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACnC,OAAO,CACL,8BACE,eACE,SAAS,EAAE,EAAE,CACX,gEAAgE,EAChE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAClE,aAED,gBAAM,SAAS,EAAC,0CAA0C,aACvD,OAAO,KAAK,OAAO,IAAI,IAAI,KAAK,SAAS,IAAI,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,QAAQ,GAAG,EACxF,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,CAAC,KAAK,GAAQ,IACpD,EACN,IAAI,CAAC,OAAO,IAAI,KAAC,YAAY,mBAAa,MAAM,EAAC,SAAS,EAAC,iBAAiB,GAAG,IAC5E,EACN,eAAK,SAAS,EAAC,wFAAwF,aACpG,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAI,CAChB,eAAM,SAAS,EAAC,qDAAqD,YAClE,IAAI,CAAC,QAAQ,GACT,CACR,IACG,EACL,IAAI,CAAC,KAAK,IAAI,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,GAAI,IACvC,CACJ,CAAA;AACH,CAAC;AAED,uFAAuF;AACvF,SAAS,WAAW,CAAC,EACnB,IAAI,EACJ,OAAO,EACP,SAAS,GAKV;IACC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAA;IACtB,MAAM,IAAI,GAAG,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;IAC1D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QAClB,OAAO,CACL,2BAAgB,IAAI,EAAE,SAAS,EAAE,SAAS,YACvC,IAAI,GACD,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,gBACT,IAAI,CAAC,SAAS,sBACR,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eAC3C,IAAI,EACf,SAAS,EAAE,EAAE,CACX,4CAA4C,EAC5C,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,UAAU,EACzE,SAAS,CACV,aAEA,IAAI,EAEJ,IAAI,CAAC,UAAU,IAAI,CAClB,eAAM,EAAE,EAAE,MAAM,EAAE,MAAM,kBACrB,IAAI,CAAC,UAAU,GACX,CACR,IACM,CACV,CAAA;AACH,CAAC;AAED,iEAAiE;AACjE,SAAS,aAAa,CAAC,IAA0B;IAC/C,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAC3B,OAAO,EAAE,CAAC,uCAAuC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;AAClF,CAAC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,GAAG,yBAAyB,CAAA;AAC7C,MAAM,UAAU,GAAG,oBAAoB,CAAA;AACvC,MAAM,UAAU,GAAG,mDAAmD,CAAA;AAEtE,SAAS,cAAc,CAAC,EAAE,MAAM,EAA6B;IAC3D,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,yFAAyF,EACzF,WAAW,CACZ,aAED,yBAAO,MAAM,CAAC,KAAK,GAAQ,EAC1B,MAAM,CAAC,KAAK,IAAI,CACf,eAAM,SAAS,EAAC,6FAA6F,YAC1G,MAAM,CAAC,KAAK,GACR,CACR,IACG,CACP,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,GAAG,KAAK,EACb,MAAM,EACN,OAAO,GAAG,OAAO,EACjB,SAAS,EACT,SAAS,GACI;IACb,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACzC,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAClF,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACvB,OAAO,CACL,iBAAS,KAAK,eAAY,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,YAClF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CACxB,KAAC,WAAW,IAEV,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,MAAM,EACd,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAH7C,GAAG,CAIR,CACH,CAAC,GACE,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,kBACM,KAAK,eACC,UAAU,EACpB,SAAS,EAAE,EAAE,CAAC,KAAK,IAAI,iDAAiD,EAAE,SAAS,CAAC,aAEnF,MAAM,IAAI,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,EAC7C,2BAAe,WAAW,EAAC,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI,wBAAwB,CAAC,YACvF,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YACrC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CACxB,KAAC,WAAW,IAAW,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,UAAU,IAAtD,GAAG,CAAuD,CAC7E,CAAC,GACE,GACF,IACF,CACP,CAAA;AACH,CAAC;AAYD;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,GAAG,OAAO,EACjB,KAAK,GAAG,KAAK,EACb,SAAS,GACY;IACrB,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;IAClC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;IACjD,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACvB,OAAO,CACL,2BAAe,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,QAAQ,EAAE,SAAS,CAAC,YACnE,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,eAAe,SAAS,EAAC,8CAA8C,aACrE,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,KAF9B,GAAG,CAGP,CACP,CAAC,GACE,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,2BACY,MAAM,EAChB,SAAS,EAAE,EAAE,CAAC,KAAK,IAAI,iDAAiD,EAAE,SAAS,CAAC,YAEpF,2BAAe,WAAW,EAAC,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI,wBAAwB,CAAC,YACvF,cAAK,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YACrC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,eAAe,SAAS,EAAE,UAAU,aAClC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,iBAAiB,GAAG,KAFhC,GAAG,CAGP,CACP,CAAC,GACE,GACF,GACF,CACP,CAAA;AACH,CAAC"}