@miragon/mcp-toolkit-ui 2.6.0 → 2.7.0

package/dist/app/widget-renderer.js

@@ -1,13 +1,34 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Component } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, createRef, useMemo, } from "react";
 import { normalizeLayout } from "@miragon/mcp-toolkit-core";
+import { ErrorState } from "../components/ErrorState.js";
 import { GridLayout, GridItem } from "../components/GridLayout.js";
-import { Card, CardContent } from "../primitives/card.js";
+import { useToolkitMessages } from "../locale/locale-provider.js";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../primitives/tabs.js";
+/**
+ * True when two reset-key lists differ (length or any entry by identity).
+ * Exported for tests: it decides when a crashed widget gets a fresh render.
+ */
+export function resetKeysChanged(prev, next) {
+    if (prev === next)
+        return false;
+    if (!prev || !next || prev.length !== next.length)
+        return true;
+    return prev.some((value, idx) => !Object.is(value, next[idx]));
+}
 /**
  * Catches render-time crashes from a single widget so one broken widget
  * can't take down the entire iframe view (or the builder canvas/preview).
  *
+ * The fallback is localized, names what happened, keeps the raw error under
+ * "Details" and offers a retry. The boundary resets itself when its
+ * `resetKeys` change, so new data (a refresh, a new tool result, a builder
+ * edit) gets a fresh render instead of a latched failure (toolkit#176 N24).
+ * When a retry crashes again, keyboard focus moves to the new retry button
+ * instead of falling back to the document (the pressed one unmounted). After
+ * a retry that renders, the widget's own markup is unknown here, so focus
+ * returns to the document.
+ *
  * Exported so the visual builder's canvas + preview render sites reuse the
  * same isolation the rendered `WidgetRenderer` already had — every place a
  * widget component is rendered goes through {@link RenderedWidget}, which
@@ -15,19 +36,50 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "../primitives/tabs.js"
  */
 export class WidgetErrorBoundary extends Component {
     state = { error: null };
+    /** Set by the user's retry; consumed by the next update. */
+    retryFocusOwed = false;
+    fallbackRef = createRef();
     static getDerivedStateFromError(error) {
         return { error };
     }
     componentDidCatch(error, info) {
         console.error(`Widget ${this.props.widgetId} crashed:`, error, info);
     }
+    componentDidUpdate(prevProps) {
+        if (this.retryFocusOwed) {
+            this.retryFocusOwed = false;
+            if (this.state.error)
+                this.fallbackRef.current?.querySelector("button")?.focus();
+        }
+        if (this.state.error && resetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) {
+            this.reset();
+        }
+    }
+    reset = () => {
+        this.setState({ error: null });
+    };
+    /** The fallback's retry: a reset that keeps keyboard focus if the widget crashes again. */
+    retry = () => {
+        this.retryFocusOwed = true;
+        this.reset();
+    };
     render() {
         if (this.state.error) {
-            return (_jsx(Card, { children: _jsxs(CardContent, { className: "text-muted-foreground py-3 text-sm", children: ["Widget \"", this.props.widgetId, "\" failed to render."] }) }));
+            return (_jsx("div", { ref: this.fallbackRef, "data-slot": "widget-crash", children: _jsx(WidgetCrashFallback, { widgetId: this.props.widgetId, error: this.state.error, onRetry: this.retry }) }));
         }
         return this.props.children;
     }
 }
+/** The localized crash fallback of {@link WidgetErrorBoundary}. */
+export function WidgetCrashFallback({ widgetId, error, onRetry, }) {
+    const messages = useToolkitMessages();
+    return (_jsx(ErrorState, { variant: "inline", title: messages.renderer.widgetCrashed, details: `${widgetId}: ${error.message}`, onRetry: onRetry }));
+}
+/** A layout cell names a widget the bundle does not contain: say so, quietly. */
+export function UnavailableWidget({ widgetId, className = "text-muted-foreground rounded-md border border-dashed p-4 text-sm", }) {
+    const messages = useToolkitMessages();
+    return (_jsxs("div", { "data-slot": "widget-unavailable", "data-widget-id": widgetId, className: className, children: [_jsx("p", { children: messages.renderer.widgetUnavailable }), _jsx("p", { className: "mt-1 font-mono text-xs break-all", children: widgetId })] }));
+}
 /**
  * True when the pipeline context carries no widget data at all — no step
  * results and no keys. A widget rendered against an empty context typically
@@ -45,7 +97,7 @@ export function contextHasNoData(context) {
  * The single render site for a layout cell's widget, shared across the
  * rendered view (`RowsRenderer`), the builder canvas, and the builder
  * preview so all three isolate crashes identically:
- *   - missing component → "not bundled" fallback,
+ *   - missing component → a localized "not available in this version" note,
  *   - render crash → caught by {@link WidgetErrorBoundary} (Finding [1]),
  *   - (builder only, opt-in) empty pipeline context → a dezent
  *     "no data yet" hint (Finding [4]).
@@ -59,43 +111,42 @@ export function contextHasNoData(context) {
  * `notBundledClassName` lets each surface match its own chrome (the builder
  * uses denser padding/text than the rendered view).
  */
-export function RenderedWidget({ widget: Widget, widgetId, props, cellProps, showEmptyHint = false, notBundledClassName = "text-muted-foreground rounded border border-dashed p-4 text-center text-xs", }) {
-    if (!Widget) {
-        return _jsxs("div", { className: notBundledClassName, children: ["Widget \"", widgetId, "\" not bundled."] });
-    }
+export function RenderedWidget({ widget: Widget, widgetId, props, cellProps, showEmptyHint = false, notBundledClassName, }) {
+    if (!Widget)
+        return _jsx(UnavailableWidget, { widgetId: widgetId, className: notBundledClassName });
     if (showEmptyHint && contextHasNoData(props.context)) {
-        return (_jsx("div", { className: notBundledClassName, children: "No data for this widget yet \u2014 it appears after a refresh." }));
+        return _jsx(NoDataYet, { className: notBundledClassName });
     }
-    return (_jsx(WidgetErrorBoundary, { widgetId: widgetId, children: _jsx(Widget, { ...props, widgetProps: cellProps }) }));
+    return (_jsx(WidgetErrorBoundary, { widgetId: widgetId, resetKeys: [props.context, props.keys, cellProps], children: _jsx(Widget, { ...props, widgetProps: cellProps }) }));
+}
+function NoDataYet({ className = "text-muted-foreground rounded-md border border-dashed p-4 text-sm", }) {
+    const messages = useToolkitMessages();
+    return _jsx("div", { className: className, children: messages.renderer.noDataYet });
 }
 function RowsRenderer({ rows, props, widgets, }) {
     return (_jsx("div", { className: "flex flex-col gap-4", children: rows.map((row, rowIdx) => (_jsx(GridLayout, { children: row.row.map((cell, cellIdx) => {
                 const WidgetComponent = widgets[cell.widget];
-                // Keep the rendered view's original behaviour of skipping cells
-                // whose component isn't bundled (no placeholder in the shipped
-                // view), while still routing the resolvable ones through the
-                // shared `RenderedWidget` for error-boundary + empty-state.
-                if (!WidgetComponent)
-                    return null;
-                // Use a composite key so the same widget can appear in multiple
-                // cells of one row (e.g. side-by-side scoped dashboards) without
-                // colliding on React's reconciliation key.
+                // An unknown widget id renders the localized "not available"
+                // note in its cell instead of vanishing (an empty page reads as
+                // broken). The composite key lets the same widget appear in
+                // several cells of one row (e.g. side-by-side scoped dashboards)
+                // without colliding on React's reconciliation key.
                 return (_jsx(GridItem, { span: cell.span ?? 12, children: _jsx(RenderedWidget, { widget: WidgetComponent, widgetId: cell.widget, props: props, cellProps: cell.props }) }, `${cell.widget}-${cellIdx}`));
             }) }, rowIdx))) }));
 }
-export function WidgetRenderer({ layout, keys, stepData, errors, widgets }) {
+/**
+ * The pipeline context widgets read. `WidgetRenderer` rebuilds it only when
+ * the view data changes — its identity is the error boundaries' reset key.
+ */
+export function buildPipelineContext(keys, stepData, errors) {
     const steps = {};
-    if (stepData) {
-        for (const [id, result] of Object.entries(stepData)) {
-            steps[id] = { ...result, _step: id };
-        }
+    for (const [id, result] of Object.entries(stepData ?? {})) {
+        steps[id] = { ...result, _step: id };
     }
-    const pipelineContext = {
-        steps,
-        keys,
-        errors,
-    };
-    const widgetProps = { keys, context: pipelineContext };
+    return { steps, keys, errors };
+}
+export function WidgetRenderer({ layout, keys, stepData, errors, widgets }) {
+    const widgetProps = useMemo(() => ({ keys, context: buildPipelineContext(keys, stepData, errors) }), [keys, stepData, errors]);
     const normalized = normalizeLayout(layout);
     if ("tabs" in normalized) {
         return (_jsxs(Tabs, { defaultValue: normalized.tabs[0]?.label, children: [_jsx(TabsList, { children: normalized.tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.label, children: tab.label }, tab.label))) }), normalized.tabs.map((tab) => (_jsx(TabsContent, { value: tab.label, children: _jsx(RowsRenderer, { rows: tab.rows, props: widgetProps, widgets: widgets }) }, tab.label)))] }));

package/dist/app/widget-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-renderer.js","sourceRoot":"","sources":["../../src/app/widget-renderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsD,MAAM,OAAO,CAAA;AAErF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAIhF;;;;;;;;GAQG;AACH,MAAM,OAAO,mBAAoB,SAAQ,SAGxC;IACU,KAAK,GAA4B,EAAE,KAAK,EAAE,IAAI,EAAE,CAAA;IACzD,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IACQ,iBAAiB,CAAC,KAAY,EAAE,IAAe;QACtD,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,CAAA;IACtE,CAAC;IACQ,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO,CACL,KAAC,IAAI,cACH,MAAC,WAAW,IAAC,SAAS,EAAC,oCAAoC,0BAChD,IAAI,CAAC,KAAK,CAAC,QAAQ,4BAChB,GACT,CACR,CAAA;QACH,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC5B,CAAC;CACF;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAAwB;IACvD,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAA;AAC1F,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,MAAM,EAAE,MAAM,EACd,QAAQ,EACR,KAAK,EACL,SAAS,EACT,aAAa,GAAG,KAAK,EACrB,mBAAmB,GAAG,4EAA4E,GAQnG;IACC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,eAAK,SAAS,EAAE,mBAAmB,0BAAW,QAAQ,uBAAqB,CAAA;IACpF,CAAC;IACD,IAAI,aAAa,IAAI,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;QACrD,OAAO,CACL,cAAK,SAAS,EAAE,mBAAmB,+EAE7B,CACP,CAAA;IACH,CAAC;IACD,OAAO,CACL,KAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,YACrC,KAAC,MAAM,OAAK,KAAK,EAAE,WAAW,EAAE,SAAS,GAAI,GACzB,CACvB,CAAA;AACH,CAAC;AAmBD,SAAS,YAAY,CAAC,EACpB,IAAI,EACJ,KAAK,EACL,OAAO,GAKR;IACC,OAAO,CACL,cAAK,SAAS,EAAC,qBAAqB,YACjC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CACzB,KAAC,UAAU,cACR,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;gBAC7B,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC5C,gEAAgE;gBAChE,+DAA+D;gBAC/D,6DAA6D;gBAC7D,4DAA4D;gBAC5D,IAAI,CAAC,eAAe;oBAAE,OAAO,IAAI,CAAA;gBACjC,gEAAgE;gBAChE,iEAAiE;gBACjE,2CAA2C;gBAC3C,OAAO,CACL,KAAC,QAAQ,IAAmC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,YAC/D,KAAC,cAAc,IACb,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,KAAK,GACrB,IANW,GAAG,IAAI,CAAC,MAAM,IAAI,OAAO,EAAE,CAO/B,CACZ,CAAA;YACH,CAAC,CAAC,IArBa,MAAM,CAsBV,CACd,CAAC,GACE,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAuB;IAC7F,MAAM,KAAK,GAAqD,EAAE,CAAA;IAClE,IAAI,QAAQ,EAAE,CAAC;QACb,KAAK,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpD,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;QACtC,CAAC;IACH,CAAC;IACD,MAAM,eAAe,GAAoB;QACvC,KAAK;QACL,IAAI;QACJ,MAAM;KACP,CAAA;IACD,MAAM,WAAW,GAAgB,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA;IACnE,MAAM,UAAU,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IAE1C,IAAI,MAAM,IAAI,UAAU,EAAE,CAAC;QACzB,OAAO,CACL,MAAC,IAAI,IAAC,YAAY,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,aAC3C,KAAC,QAAQ,cACN,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5B,KAAC,WAAW,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,YAC1C,GAAG,CAAC,KAAK,IADM,GAAG,CAAC,KAAK,CAEb,CACf,CAAC,GACO,EACV,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5B,KAAC,WAAW,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,YAC3C,KAAC,YAAY,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,IADtD,GAAG,CAAC,KAAK,CAEb,CACf,CAAC,IACG,CACR,CAAA;IACH,CAAC;IAED,OAAO,KAAC,YAAY,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CAAA;AACtF,CAAC"}
+{"version":3,"file":"widget-renderer.js","sourceRoot":"","sources":["../../src/app/widget-renderer.tsx"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DrillButton.d.ts","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAchG"}
+{"version":3,"file":"DrillButton.d.ts","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAA;IACnB,mFAAmF;IACnF,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,sFAAsF;IACtF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAchG"}

package/dist/components/DrillButton.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_RING } from "../lib/focus-ring.js";
 /**
  * The single, deterministic in-widget navigation control: a neutral outline
  * button with a trailing → that drills into a detail/sub-view. Use it for
@@ -8,6 +9,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 export function DrillButton({ children, onDrill, icon, size = "sm", ariaLabel }) {
     const pad = size === "md" ? "px-3 py-1.5 text-sm" : "px-2.5 py-1 text-xs";
-    return (_jsxs("button", { type: "button", onClick: onDrill, "aria-label": ariaLabel, className: `border-border text-foreground hover:bg-muted focus-visible:ring-ring inline-flex items-center gap-1 rounded-md border font-medium transition-colors outline-none focus-visible:ring-2 ${pad}`, children: [icon && _jsx("span", { "aria-hidden": "true", children: icon }), children, _jsx("span", { "aria-hidden": "true", children: "\u2192" })] }));
+    return (_jsxs("button", { type: "button", onClick: onDrill, "aria-label": ariaLabel, className: `border-border text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground inline-flex items-center gap-1 rounded-md border font-medium transition-colors ${FOCUS_RING} ${pad}`, children: [icon && _jsx("span", { "aria-hidden": "true", children: icon }), children, _jsx("span", { "aria-hidden": "true", children: "\u2192" })] }));
 }
 //# sourceMappingURL=DrillButton.js.map

package/dist/components/DrillButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrillButton.js","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":";AAeA;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAoB;IAC/F,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAA;IACzE,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,SAAS,EAAE,yLAAyL,GAAG,EAAE,aAExM,IAAI,IAAI,8BAAkB,MAAM,YAAE,IAAI,GAAQ,EAC9C,QAAQ,EACT,8BAAkB,MAAM,uBAAS,IAC1B,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"DrillButton.js","sourceRoot":"","sources":["../../src/components/DrillButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAejD;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAoB;IAC/F,MAAM,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAA;IACzE,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,SAAS,EAAE,gLAAgL,UAAU,IAAI,GAAG,EAAE,aAE7M,IAAI,IAAI,8BAAkB,MAAM,YAAE,IAAI,GAAQ,EAC9C,QAAQ,EACT,8BAAkB,MAAM,uBAAS,IAC1B,CACV,CAAA;AACH,CAAC"}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+/** Heading element for an empty/error state title (the surface decides the outline level). */
+export type StateHeadingLevel = "h2" | "h3" | "h4" | "p";
+export interface EmptyStateProps {
+    /**
+     * Icon or mark above the title, rendered decoratively (`aria-hidden`): a
+     * Lucide icon for the concrete situation (e.g. `<CircleCheck />` for "all
+     * done"), or a brand mark (an app passes its logo; a customer brand passes
+     * its own or nothing). An SVG renders at 24 px unless it carries its own
+     * `size-*` class, so a mark can be larger (`<Komet className="size-12" />`).
+     */
+    icon?: ReactNode;
+    /** Colour of the icon slot: `"neutral"` (muted, default) or `"success"` ("all done"). */
+    tone?: "neutral" | "success";
+    /** What is empty, in plain words ("No open incidents"). */
+    title: ReactNode;
+    /** One help line: why it is empty or what to do next. */
+    description?: ReactNode;
+    /** The primary next step (a `Button`). */
+    action?: ReactNode;
+    /** An optional second, quieter step. Empty states carry at most two actions. */
+    secondaryAction?: ReactNode;
+    /** Element of the title. Default `"h3"` (inside a widget below its own heading). */
+    titleAs?: StateHeadingLevel;
+    className?: string;
+}
+/**
+ * The one empty-state pattern: icon or mark, a title (600), one help line and
+ * up to two actions, centred in the space the content would take. Static (no
+ * live region): it replaces content, it does not announce a change.
+ */
+export declare function EmptyState({ icon, tone, title, description, action, secondaryAction, titleAs: Title, className, }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,8FAA8F;AAC9F,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAA;AAExD,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,yFAAyF;IACzF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC5B,2DAA2D;IAC3D,KAAK,EAAE,SAAS,CAAA;IAChB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,gFAAgF;IAChF,eAAe,CAAC,EAAE,SAAS,CAAA;IAC3B,oFAAoF;IACpF,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAQD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAgB,EAChB,KAAK,EACL,WAAW,EACX,MAAM,EACN,eAAe,EACf,OAAO,EAAE,KAAY,EACrB,SAAS,GACV,EAAE,eAAe,+BA6BjB"}

package/dist/components/EmptyState.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TONE_ICON } from "../lib/tone-utils.js";
+import { cn } from "../lib/utils.js";
+/** The icon slot in the tone's icon colour (`TONE_ICON`): quiet, or the success tone. */
+const ICON_TONE = {
+    neutral: TONE_ICON.neutral,
+    success: TONE_ICON.success,
+};
+/**
+ * The one empty-state pattern: icon or mark, a title (600), one help line and
+ * up to two actions, centred in the space the content would take. Static (no
+ * live region): it replaces content, it does not announce a change.
+ */
+export function EmptyState({ icon, tone = "neutral", title, description, action, secondaryAction, titleAs: Title = "h3", className, }) {
+    return (_jsxs("div", { "data-slot": "empty-state", className: cn("flex flex-col items-center gap-2 px-4 py-8 text-center", className), children: [icon && (_jsx("div", { "aria-hidden": "true", className: cn("mb-1 flex items-center justify-center [&_svg:not([class*='size-'])]:size-6", ICON_TONE[tone]), children: icon })), _jsx(Title, { className: "text-foreground text-base font-semibold", children: title }), description && (_jsx("p", { className: "text-muted-foreground max-w-prose text-sm text-balance", children: description })), (action || secondaryAction) && (_jsxs("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-2", children: [action, secondaryAction] }))] }));
+}
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AA6BpC,yFAAyF;AACzF,MAAM,SAAS,GAAyD;IACtE,OAAO,EAAE,SAAS,CAAC,OAAO;IAC1B,OAAO,EAAE,SAAS,CAAC,OAAO;CAC3B,CAAA;AAED;;;;GAIG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,WAAW,EACX,MAAM,EACN,eAAe,EACf,OAAO,EAAE,KAAK,GAAG,IAAI,EACrB,SAAS,GACO;IAChB,OAAO,CACL,4BACY,aAAa,EACvB,SAAS,EAAE,EAAE,CAAC,wDAAwD,EAAE,SAAS,CAAC,aAEjF,IAAI,IAAI,CACP,6BACc,MAAM,EAClB,SAAS,EAAE,EAAE,CACX,4EAA4E,EAC5E,SAAS,CAAC,IAAI,CAAC,CAChB,YAEA,IAAI,GACD,CACP,EACD,KAAC,KAAK,IAAC,SAAS,EAAC,yCAAyC,YAAE,KAAK,GAAS,EACzE,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,wDAAwD,YAAE,WAAW,GAAK,CACxF,EACA,CAAC,MAAM,IAAI,eAAe,CAAC,IAAI,CAC9B,eAAK,SAAS,EAAC,uDAAuD,aACnE,MAAM,EACN,eAAe,IACZ,CACP,IACG,CACP,CAAA;AACH,CAAC"}

package/dist/components/ErrorState.d.ts

@@ -0,0 +1,50 @@
+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. */
+    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, 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,kFAAkF;IAClF,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;AAmCD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,OAAO,EACP,YAAY,EACZ,OAAO,EACP,UAAU,EACV,OAAO,EACP,IAAe,EACf,IAAI,EACJ,OAAiB,EACjB,IAAc,EACd,OAAO,EACP,SAAS,GACV,EAAE,eAAe,+BAmCjB"}

package/dist/components/ErrorState.js

@@ -0,0 +1,60 @@
+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 { 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,
+};
+/** Per-variant geometry: `block` replaces a surface, `inline` sits above content. */
+const VARIANT = {
+    block: {
+        box: "gap-4 p-4",
+        icon: "size-5",
+        title: "text-base",
+        defaultTitleAs: "h2",
+        retry: "default",
+    },
+    inline: {
+        box: "gap-3 px-4 py-3 text-sm",
+        icon: "size-4",
+        title: "text-sm",
+        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 = "danger", icon, variant = "block", role = "alert", titleAs, className, }) {
+    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: "text-sm break-words", 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-xs", 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

@@ -11,7 +11,7 @@ export interface FilterChip {
 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;
     /** Called with the new search text on every keystroke. */
     onSearchChange: (next: string) => void;

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":"AAIA,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,yEAAyE;IACzE,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,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,YAAY,GACb,EAAE,cAAc,+BAgChB"}

package/dist/components/FilterBar.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOCUS_RING } from "../lib/focus-ring.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.
  */
-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, onSearchChange, chips, onChipToggle, }) {
+    const messages = useToolkitMessages();
+    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 ?? messages.filterBar.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-sm border px-2.5 py-1 text-xs font-medium transition-colors ${FOCUS_RING} ${chip.active
+                        ? "bg-accent border-focus 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: "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,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AA0B9C;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,YAAY,GACG;IACf,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAA;IACrC,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,IAAI,QAAQ,CAAC,SAAS,CAAC,iBAAiB,EACtE,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,wGAAwG,UAAU,IAC3H,IAAI,CAAC,MAAM;wBACT,CAAC,CAAC,6DAA6D;wBAC/D,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,0BAA0B,YAAE,IAAI,CAAC,KAAK,GAAQ,CAC/D,KAXI,IAAI,CAAC,EAAE,CAYL,CACV,CAAC,GACE,IACF,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

@@ -9,9 +9,15 @@ export interface KpiCell {
     fraction?: ReactNode;
     /** Optional trend line under the value (e.g. `"+12% vs last week"`). */
     trend?: ReactNode;
-    /** Colours the trend line. `up` reads as bad (danger), `down` as good (success). */
+    /**
+     * Tones the trend line's dot. `up` reads as bad (danger), `down` as good
+     * (success); the trend text itself stays in the foreground.
+     */
     trendDirection?: "up" | "down" | "flat";
-    /** Tone applied to the value text (e.g. `"danger"` for a breached metric). */
+    /**
+     * Status of the metric (e.g. `"danger"` for a breached one), shown as a dot
+     * before the label. The figure itself stays in the foreground colour.
+     */
     tone?: ToneVariant;
     /** When set, the cell renders as a button — turns a metric into a nav entry point. */
     onClick?: () => void;
@@ -37,7 +43,8 @@ export interface KpiGridProps {
  * 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.
+ * lighter `border-y` strip. A cell's `tone` shows as a status dot next to its
+ * label; figures stay in the foreground colour.
  */
 export declare function KpiGrid({ cells, boxed, header }: KpiGridProps): import("react").JSX.Element;
 //# 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,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAYjE,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;;;OAGG;IACH,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;IACvC;;;OAGG;IACH,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;AAsDD;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAa,EAAE,MAAM,EAAE,EAAE,YAAY,+BAwCrE"}

package/dist/components/KpiGrid.js

@@ -1,10 +1,14 @@
 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 { FOCUS_RING_INSET } from "../lib/focus-ring.js";
+import { TONE_DOT } from "../lib/tone-utils.js";
+/**
+ * Trend direction → tone. The tone shows ONLY as a dot before the trend line;
+ * the figures stay in the foreground (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 COL_CLASS = {
     1: "grid-cols-1",
@@ -14,22 +18,40 @@ const COL_CLASS = {
     5: "grid-cols-5",
     6: "grid-cols-6",
 };
+/** A small status dot; decorative — the label next to it carries the meaning. */
+function ToneDot({ tone, size }) {
+    return _jsx("span", { "aria-hidden": "true", className: `${size} shrink-0 rounded-full ${TONE_DOT[tone]}` });
+}
+/**
+ * The trend line under a value: a tone dot plus the trend text in the
+ * foreground — never in a tone colour. Without a tone it stays quiet text.
+ */
+function KpiTrend({ trend, direction, }) {
+    const tone = direction ? TREND_TONE[direction] : "neutral";
+    const textClass = tone === "neutral" ? "text-muted-foreground" : "text-foreground";
+    return (_jsxs("div", { className: `mt-1.5 inline-flex items-center gap-1.5 text-xs ${textClass}`, children: [tone !== "neutral" && _jsx(ToneDot, { tone: tone, size: "size-1.5" }), trend] }));
+}
+/** One cell's label row, figure and optional trend — status as dots, never as coloured digits. */
+function KpiCellContent({ cell }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between gap-2 text-xs font-medium", children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [cell.tone && cell.tone !== "neutral" && _jsx(ToneDot, { tone: cell.tone, size: "size-2" }), _jsx("span", { children: cell.label })] }), cell.onClick && (_jsx("span", { "aria-hidden": "true", className: "text-sm leading-none", children: "\u203A" }))] }), _jsxs("div", { className: "text-foreground mt-1.5 text-2xl leading-none font-bold tracking-tight tabular-nums", children: [cell.value, cell.fraction && (_jsx("span", { className: "text-muted-foreground ml-0.5 text-sm font-normal", children: cell.fraction }))] }), cell.trend && _jsx(KpiTrend, { trend: cell.trend, direction: cell.trendDirection })] }));
+}
 /**
  * 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.
+ * lighter `border-y` strip. A cell's `tone` shows as a status dot next to its
+ * label; figures stay in the foreground colour.
  */
 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) => {
+    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-sm 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));
+                    const content = _jsx(KpiCellContent, { cell: cell });
+                    return cell.onClick ? (_jsx("button", { type: "button", onClick: cell.onClick, "aria-label": cell.ariaLabel, className: `hover:bg-muted cursor-pointer px-5 py-4 text-left transition-colors ${FOCUS_RING_INSET} ${borderClass}`, children: content }, idx)) : (_jsx("div", { className: `px-5 py-4 ${borderClass}`, children: content }, idx));
                 }) })] }));
 }
 //# sourceMappingURL=KpiGrid.js.map