@miragon/mcp-toolkit-ui 2.7.0 → 2.8.1

package/dist/components/KpiGrid.js

@@ -1,57 +1,124 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FOCUS_RING_INSET } from "../lib/focus-ring.js";
-import { TONE_DOT } from "../lib/tone-utils.js";
+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";
 /**
- * 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).
+ * 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: "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, size }) {
-    return _jsx("span", { "aria-hidden": "true", className: `${size} shrink-0 rounded-full ${TONE_DOT[tone]}` });
+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 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.
+ * 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.
  */
-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] }));
+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 }))] }));
 }
-/** 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 })] }));
+/**
+ * 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. A cell's `tone` shows as a status dot next to its
- * label; figures stay in the foreground colour.
+ * 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-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 = _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));
-                }) })] }));
+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"}

package/dist/components/ListFooter.d.ts

@@ -1,3 +1,4 @@
+import type { ListFooterMessages } from "../locale/message-types.js";
 export interface ListFooterProps {
     /** How many rows are currently rendered. */
     shown: number;
@@ -11,13 +12,39 @@ export interface ListFooterProps {
     onLoadMore: () => void;
     /** Plural noun for the count, e.g. `"instances"`. Default: the locale's word for rows. */
     noun?: string;
+    /**
+     * A new first page is in flight while these rows stay on screen (a search,
+     * a filter, a refetch): the status line adds a visible "Updating…".
+     */
+    refreshing?: boolean;
+    /**
+     * The rows on screen are the PREVIOUS result (a changed search or filter is
+     * in flight or failed): the count and "Load more" hide, so the old count
+     * never reads as the new search's answer.
+     */
+    stale?: boolean;
+    /** Override strings of the active catalog's `listFooter` section. */
+    labels?: Partial<ListFooterMessages>;
+    /**
+     * Make the count line a polite live region (`role="status"`). Default
+     * `true`. Set `false` only where the caller already announces the count in
+     * a live region of its own, so a screen reader hears it once.
+     */
+    announce?: boolean;
+    className?: string;
 }
 /**
  * Footer for a paginated list: an honest "Showing X of Y" total plus an
  * explicit "Load more" control. Deliberately not infinite scroll — the user
- * gets the total, a reachable footer, and control over fetching. Renders
- * nothing when `total` is 0. Text and number format follow the active locale
- * (`LocaleProvider`, else the host's inside `McpAppView`).
+ * gets the total, a reachable footer, and control over fetching. The count
+ * is a polite live region (`role="status"`), so a keyboard or screen-reader
+ * user hears the new total after "Load more" or a filter change; while a
+ * first page is in flight it also says "Updating…". With nothing to count and
+ * nothing in flight it shows nothing, but the live region stays mounted
+ * (visually hidden) and says "No entries": a search that finds nothing is
+ * announced too, and the region is never re-created with its news already in
+ * it (a screen reader stays silent then). Text and number format follow the
+ * active locale (`LocaleProvider`, else the host's inside `McpAppView`).
  */
-export declare function ListFooter({ shown, total, hasMore, loadingMore, onLoadMore, noun, }: ListFooterProps): import("react").JSX.Element | null;
+export declare function ListFooter({ shown, total, hasMore, loadingMore, onLoadMore, noun, refreshing, stale, labels, announce, className, }: ListFooterProps): import("react").JSX.Element | null;
 //# sourceMappingURL=ListFooter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListFooter.d.ts","sourceRoot":"","sources":["../../src/components/ListFooter.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAA;IAChB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mDAAmD;IACnD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,UAAU,EACV,IAAI,GACL,EAAE,eAAe,sCAyBjB"}
+{"version":3,"file":"ListFooter.d.ts","sourceRoot":"","sources":["../../src/components/ListFooter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAGpE,MAAM,WAAW,eAAe;IAC9B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAA;IAChB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mDAAmD;IACnD,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA;IACpC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,UAAU,EACV,IAAI,EACJ,UAAkB,EAClB,KAAa,EACb,MAAM,EACN,QAAe,EACf,SAAS,GACV,EAAE,eAAe,sCAwCjB"}

package/dist/components/ListFooter.js

@@ -1,23 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { FOCUS_RING } from "../lib/focus-ring.js";
+import { cn } from "../lib/utils.js";
 import { useToolkitLocale, useToolkitMessages } from "../locale/locale-provider.js";
 import { formatCount } from "../locale/toolkit-messages.js";
 /**
  * Footer for a paginated list: an honest "Showing X of Y" total plus an
  * explicit "Load more" control. Deliberately not infinite scroll — the user
- * gets the total, a reachable footer, and control over fetching. Renders
- * nothing when `total` is 0. Text and number format follow the active locale
- * (`LocaleProvider`, else the host's inside `McpAppView`).
+ * gets the total, a reachable footer, and control over fetching. The count
+ * is a polite live region (`role="status"`), so a keyboard or screen-reader
+ * user hears the new total after "Load more" or a filter change; while a
+ * first page is in flight it also says "Updating…". With nothing to count and
+ * nothing in flight it shows nothing, but the live region stays mounted
+ * (visually hidden) and says "No entries": a search that finds nothing is
+ * announced too, and the region is never re-created with its news already in
+ * it (a screen reader stays silent then). Text and number format follow the
+ * active locale (`LocaleProvider`, else the host's inside `McpAppView`).
  */
-export function ListFooter({ shown, total, hasMore, loadingMore = false, onLoadMore, noun, }) {
-    const locale = useToolkitLocale();
-    const { listFooter } = useToolkitMessages();
-    if (total <= 0)
+export function ListFooter({ shown, total, hasMore, loadingMore = false, onLoadMore, noun, refreshing = false, stale = false, labels, announce = true, className, }) {
+    const listFooter = { ...useToolkitMessages().listFooter, ...labels };
+    const counted = total > 0 && !stale;
+    const visible = counted || refreshing;
+    // Without a live region of its own there is nothing to keep mounted.
+    if (!visible && !announce)
         return null;
-    return (_jsxs("div", { className: "text-muted-foreground flex items-center justify-between gap-3 px-1 py-2 text-xs", children: [_jsx("span", { children: listFooter.showing({
+    return (_jsxs("div", { "data-slot": "list-footer", 
+        // The same element tree in both states, so React keeps the live region.
+        className: visible ? cn(FOOTER_CLASS, className) : "sr-only", children: [_jsx("p", { role: announce ? "status" : undefined, "data-slot": "list-footer-status", className: "flex flex-wrap items-center gap-x-2", children: _jsx(StatusLine, { messages: listFooter, shown: shown, total: total, noun: noun, counted: counted, refreshing: refreshing, 
+                    // Zero rows, not a stale previous result (its failure the caller reports).
+                    empty: !visible && !stale }) }), counted && hasMore && (_jsx("button", { type: "button", onClick: onLoadMore, disabled: loadingMore, className: `border-border text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground inline-flex items-center gap-1 rounded-md border px-3 py-1.5 font-medium transition-colors disabled:opacity-50 ${FOCUS_RING}`, children: loadingMore ? listFooter.loadingMore : listFooter.loadMore }))] }));
+}
+const FOOTER_CLASS = "text-small text-muted-foreground flex items-center justify-between gap-3 px-1 py-2";
+/** What the live region says: the count, "Updating…", or "No entries" at zero rows. */
+function StatusLine({ messages, shown, total, noun, counted, refreshing, empty, }) {
+    const locale = useToolkitLocale();
+    return (_jsxs(_Fragment, { children: [empty && _jsx("span", { children: messages.noResults }), counted && (_jsx("span", { children: messages.showing({
                     shown: formatCount(shown, locale),
                     total: formatCount(total, locale),
-                    noun: noun ?? listFooter.defaultNoun,
-                }) }), hasMore && (_jsx("button", { type: "button", onClick: onLoadMore, disabled: loadingMore, className: `border-border text-foreground hover:border-focus hover:bg-accent hover:text-accent-foreground inline-flex items-center gap-1 rounded-md border px-3 py-1.5 font-medium transition-colors disabled:opacity-50 ${FOCUS_RING}`, children: loadingMore ? listFooter.loadingMore : listFooter.loadMore }))] }));
+                    noun: noun ?? messages.defaultNoun,
+                }) })), refreshing && _jsx("span", { "data-slot": "list-footer-updating", children: messages.updating })] }));
 }
 //# sourceMappingURL=ListFooter.js.map

package/dist/components/ListFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListFooter.js","sourceRoot":"","sources":["../../src/components/ListFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAiB3D;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,IAAI,GACY;IAChB,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAA;IACjC,MAAM,EAAE,UAAU,EAAE,GAAG,kBAAkB,EAAE,CAAA;IAC3C,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAC3B,OAAO,CACL,eAAK,SAAS,EAAC,iFAAiF,aAC9F,yBACG,UAAU,CAAC,OAAO,CAAC;oBAClB,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;oBACjC,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;oBACjC,IAAI,EAAE,IAAI,IAAI,UAAU,CAAC,WAAW;iBACrC,CAAC,GACG,EACN,OAAO,IAAI,CACV,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,gNAAgN,UAAU,EAAE,YAEtO,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,GACpD,CACV,IACG,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"ListFooter.js","sourceRoot":"","sources":["../../src/components/ListFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAEnF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAqC3D;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,IAAI,EACJ,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,KAAK,EACb,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,SAAS,GACO;IAChB,MAAM,UAAU,GAAG,EAAE,GAAG,kBAAkB,EAAE,CAAC,UAAU,EAAE,GAAG,MAAM,EAAE,CAAA;IACpE,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAA;IACnC,MAAM,OAAO,GAAG,OAAO,IAAI,UAAU,CAAA;IACrC,qEAAqE;IACrE,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAA;IACtC,OAAO,CACL,4BACY,aAAa;QACvB,wEAAwE;QACxE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,aAE5D,YACE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC3B,oBAAoB,EAC9B,SAAS,EAAC,qCAAqC,YAE/C,KAAC,UAAU,IACT,QAAQ,EAAE,UAAU,EACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU;oBACtB,2EAA2E;oBAC3E,KAAK,EAAE,CAAC,OAAO,IAAI,CAAC,KAAK,GACzB,GACA,EACH,OAAO,IAAI,OAAO,IAAI,CACrB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAE,gNAAgN,UAAU,EAAE,YAEtO,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,GACpD,CACV,IACG,CACP,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAChB,oFAAoF,CAAA;AAEtF,uFAAuF;AACvF,SAAS,UAAU,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,UAAU,EACV,KAAK,GASN;IACC,MAAM,MAAM,GAAG,gBAAgB,EAAE,CAAA;IACjC,OAAO,CACL,8BACG,KAAK,IAAI,yBAAO,QAAQ,CAAC,SAAS,GAAQ,EAC1C,OAAO,IAAI,CACV,yBACG,QAAQ,CAAC,OAAO,CAAC;oBAChB,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;oBACjC,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;oBACjC,IAAI,EAAE,IAAI,IAAI,QAAQ,CAAC,WAAW;iBACnC,CAAC,GACG,CACR,EACA,UAAU,IAAI,4BAAgB,sBAAsB,YAAE,QAAQ,CAAC,QAAQ,GAAQ,IAC/E,CACJ,CAAA;AACH,CAAC"}

package/dist/components/PagedListFooter.d.ts

@@ -0,0 +1,57 @@
+import type { ListFooterMessages } from "../locale/message-types.js";
+/**
+ * What {@link PagedListFooter} reads from a paged list — structural, so a
+ * paged-query hook's result (`items`, `total`, `loadMore`, …) passes as is.
+ */
+export interface PagedListState {
+    /** The rows on screen (all loaded pages); its length is the "shown" count. */
+    items: readonly unknown[];
+    /** The server's total for the rows on screen. */
+    total: number;
+    /** Whether another page exists. */
+    hasMore: boolean;
+    /** Fetch the next page (also the retry of a failed load-more). */
+    loadMore: () => void;
+    /** A next page is in flight. */
+    loadingMore?: boolean;
+    /** A first page is in flight while rows are on screen (a search, a filter, a refetch). */
+    refreshing?: boolean;
+    /** The rows on screen are the previous result: a changed search or filter is in flight or failed. */
+    stale?: boolean;
+    /**
+     * The first page that is on screen, if any. A first-page {@link error} only
+     * belongs in the footer while one is shown; without rows on screen it is
+     * the load error the caller's loading guard renders.
+     */
+    firstPage?: unknown;
+    /** The first-page failure (see {@link firstPage}). */
+    error?: Error | null;
+    /** Re-run the first page — the retry of {@link error}. */
+    retry?: () => void;
+    /** The last load-more failure; {@link loadMore} retries it, the rows above stay current. */
+    loadMoreError?: Error | null;
+}
+export interface PagedListFooterProps {
+    /** The paged list's state. */
+    paged: PagedListState;
+    /** Plural noun for "Showing X of Y {noun}". Default: the locale's word for rows. */
+    noun?: string;
+    /** Override strings of the active catalog's `listFooter` section. */
+    labels?: Partial<ListFooterMessages>;
+    /** Retry button label of both error lines. Default: the locale's "Try again". */
+    retryLabel?: string;
+}
+/**
+ * The tail of a paged list: its failures and the honest {@link ListFooter}.
+ * Two failures stay apart because their retries differ — a failed first page
+ * over the rows still on screen ("You're seeing the previous result", its
+ * retry re-runs page 0) and a failed load-more ("The entries above are
+ * current", its retry fetches the next offset). Each is an inline
+ * `ErrorState` (role="alert") with the raw reason under "Details". The
+ * footer's count line is a polite live region that says "Updating…" while a
+ * first page is in flight, hides the count while the rows are stale, and
+ * stays mounted at zero rows ("No entries", visually hidden), so a search
+ * that finds nothing is announced.
+ */
+export declare function PagedListFooter({ paged, noun, labels, retryLabel }: PagedListFooterProps): import("react").JSX.Element;
+//# sourceMappingURL=PagedListFooter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PagedListFooter.d.ts","sourceRoot":"","sources":["../../src/components/PagedListFooter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAIpE;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,8EAA8E;IAC9E,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAA;IAChB,kEAAkE;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0FAA0F;IAC1F,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qGAAqG;IACrG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACpB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;IAClB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;CAC7B;AAED,MAAM,WAAW,oBAAoB;IACnC,8BAA8B;IAC9B,KAAK,EAAE,cAAc,CAAA;IACrB,oFAAoF;IACpF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA;IACpC,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAOD;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,oBAAoB,+BAwCxF"}

package/dist/components/PagedListFooter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useToolkitMessages } from "../locale/locale-provider.js";
+import { ErrorState } from "./ErrorState.js";
+import { ListFooter } from "./ListFooter.js";
+/** The raw reason of a failure, for the "Details" disclosure (never the sentence). */
+function rawReason(error) {
+    return error.message || error.name;
+}
+/**
+ * The tail of a paged list: its failures and the honest {@link ListFooter}.
+ * Two failures stay apart because their retries differ — a failed first page
+ * over the rows still on screen ("You're seeing the previous result", its
+ * retry re-runs page 0) and a failed load-more ("The entries above are
+ * current", its retry fetches the next offset). Each is an inline
+ * `ErrorState` (role="alert") with the raw reason under "Details". The
+ * footer's count line is a polite live region that says "Updating…" while a
+ * first page is in flight, hides the count while the rows are stale, and
+ * stays mounted at zero rows ("No entries", visually hidden), so a search
+ * that finds nothing is announced.
+ */
+export function PagedListFooter({ paged, noun, labels, retryLabel }) {
+    const catalog = useToolkitMessages().listFooter;
+    const L = { ...catalog, ...labels };
+    const refreshError = paged.firstPage != null ? (paged.error ?? null) : null;
+    return (_jsxs("div", { "data-slot": "paged-list-footer", className: "flex flex-col gap-2", children: [refreshError && (_jsx(ErrorState, { variant: "inline", tone: "warning", title: L.refreshFailed, description: L.refreshFailedHint, details: rawReason(refreshError), onRetry: paged.retry, retryLabel: retryLabel })), paged.loadMoreError && (_jsx(ErrorState, { variant: "inline", title: L.loadMoreFailed, description: L.loadMoreFailedHint, details: rawReason(paged.loadMoreError), onRetry: paged.loadMore, retryLabel: retryLabel })), _jsx(ListFooter, { shown: paged.items.length, total: paged.total, hasMore: paged.hasMore, loadingMore: paged.loadingMore, onLoadMore: paged.loadMore, noun: noun, refreshing: paged.refreshing, stale: paged.stale, labels: labels })] }));
+}
+//# sourceMappingURL=PagedListFooter.js.map

package/dist/components/PagedListFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PagedListFooter.js","sourceRoot":"","sources":["../../src/components/PagedListFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AAEjE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AA8C5C,sFAAsF;AACtF,SAAS,SAAS,CAAC,KAAY;IAC7B,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAA;AACpC,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAwB;IACvF,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC,UAAU,CAAA;IAC/C,MAAM,CAAC,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,MAAM,EAAE,CAAA;IACnC,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAC3E,OAAO,CACL,4BAAe,mBAAmB,EAAC,SAAS,EAAC,qBAAqB,aAC/D,YAAY,IAAI,CACf,KAAC,UAAU,IACT,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,CAAC,CAAC,aAAa,EACtB,WAAW,EAAE,CAAC,CAAC,iBAAiB,EAChC,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,EAChC,OAAO,EAAE,KAAK,CAAC,KAAK,EACpB,UAAU,EAAE,UAAU,GACtB,CACH,EACA,KAAK,CAAC,aAAa,IAAI,CACtB,KAAC,UAAU,IACT,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,CAAC,cAAc,EACvB,WAAW,EAAE,CAAC,CAAC,kBAAkB,EACjC,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,EACvC,OAAO,EAAE,KAAK,CAAC,QAAQ,EACvB,UAAU,EAAE,UAAU,GACtB,CACH,EACD,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EACzB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,UAAU,EAAE,KAAK,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,MAAM,EAAE,MAAM,GACd,IACE,CACP,CAAA;AACH,CAAC"}

package/dist/components/Pills.d.ts

@@ -1,10 +1,11 @@
-import type { ReactNode } from "react";
-import { type ToneVariant } from "../lib/tone-utils.js";
+import type { ReactElement, ReactNode } from "react";
+import { type ToneName } from "../lib/tone-utils.js";
 export interface LivePillProps {
     /** Status tone driving the dot, tint and border. Default `"info"`. */
-    tone?: ToneVariant;
+    tone?: ToneName;
     /** Pill label. Defaults to the locale's "Live". */
     children?: ReactNode;
+    className?: string;
 }
 /**
  * Small tinted pill with a pulsing dot. Use in a widget header to signal that
@@ -12,18 +13,37 @@ export interface LivePillProps {
  * text in the foreground), so it inherits the active theme. The pulse stops
  * under `prefers-reduced-motion`.
  */
-export declare function LivePill({ tone, children }: LivePillProps): import("react").JSX.Element;
+export declare function LivePill({ tone, children, className }: LivePillProps): import("react").JSX.Element;
+/** The words a {@link StatusBadge} must carry: text, a number or an element — never nothing. */
+export type StatusBadgeText = string | number | ReactElement | (string | number | ReactElement)[];
+export interface StatusBadgeProps {
+    /** The state, in words ("Suspended", "3 open incidents"). Required: colour is never the only signal. */
+    children: StatusBadgeText;
+    /** The state's tone: tint, edge and dot. */
+    tone: ToneName;
+    className?: string;
+}
+/**
+ * A state in words, marked in its tone: tint, edge and a static dot next to
+ * foreground text (CI §3.3: the colour marks the state, the words say it).
+ * For a detail-page header (`WidgetHeader`'s `badge`) or a table cell. The
+ * text is required — a badge without words would make colour the only
+ * signal. The pulsing dot is {@link LivePill}'s live-data semantic.
+ */
+export declare function StatusBadge({ children, tone, className }: StatusBadgeProps): import("react").JSX.Element;
 export interface CountPillProps {
     /** Status tone driving the tint and border. Default `"neutral"`. */
-    tone?: ToneVariant;
+    tone?: ToneName;
     /** The count/value to display (tabular numbers). */
     children: ReactNode;
+    className?: string;
 }
 /**
  * Compact count badge — tabular numbers on a tinted background with a border
  * in the tone. Use as the right-aligned indicator on a list/group row (e.g. a
  * per-group item count). The number stays in the foreground in every tone
- * (no coloured digits): the tint and the border carry the tone.
+ * (no coloured digits): the tint and the border carry the tone. A count
+ * without a state stays `neutral`.
  */
-export declare function CountPill({ tone, children }: CountPillProps): import("react").JSX.Element;
+export declare function CountPill({ tone, children, className }: CountPillProps): import("react").JSX.Element;
 //# sourceMappingURL=Pills.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pills.d.ts","sourceRoot":"","sources":["../../src/components/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAEzF,MAAM,WAAW,aAAa;IAC5B,sEAAsE;IACtE,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAa,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAalE;AAED,MAAM,WAAW,cAAc;IAC7B,oEAAoE;IACpE,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAQvE"}
+{"version":3,"file":"Pills.d.ts","sourceRoot":"","sources":["../../src/components/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAiD,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAGnG,MAAM,WAAW,aAAa;IAC5B,sEAAsE;IACtE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,aAAa,+BAmB7E;AAED,gGAAgG;AAChG,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC,EAAE,CAAA;AAEjG,MAAM,WAAW,gBAAgB;IAC/B,wGAAwG;IACxG,QAAQ,EAAE,eAAe,CAAA;IACzB,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAiB1E;AAED,MAAM,WAAW,cAAc;IAC7B,oEAAoE;IACpE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,cAAc,+BAclF"}

package/dist/components/Pills.js

@@ -1,23 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useToolkitMessages } from "../locale/locale-provider.js";
-import { TONE_BORDER, TONE_DOT, TONE_SOFT } from "../lib/tone-utils.js";
+import { resolveTone, TONE_BORDER, TONE_DOT, TONE_SOFT } from "../lib/tone-utils.js";
+import { cn } from "../lib/utils.js";
 /**
  * Small tinted pill with a pulsing dot. Use in a widget header to signal that
  * the data is live/real-time. Tone-based (tint, border and dot in the tone,
  * text in the foreground), so it inherits the active theme. The pulse stops
  * under `prefers-reduced-motion`.
  */
-export function LivePill({ tone = "info", children }) {
+export function LivePill({ tone = "info", children, className }) {
     const messages = useToolkitMessages();
-    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 text-xs font-semibold ${TONE_SOFT[tone]} ${TONE_BORDER[tone]}`, children: [_jsx("span", { "aria-hidden": "true", className: `size-1.5 animate-pulse rounded-full ${TONE_DOT[tone]}` }), children ?? messages.pills.live] }));
+    const t = resolveTone(tone, "info");
+    return (_jsxs("span", { className: cn("text-small inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 font-semibold", TONE_SOFT[t], TONE_BORDER[t], className), children: [_jsx("span", { "aria-hidden": "true", className: cn("size-1.5 rounded-full motion-safe:animate-pulse", TONE_DOT[t]) }), children ?? messages.pills.live] }));
+}
+/**
+ * A state in words, marked in its tone: tint, edge and a static dot next to
+ * foreground text (CI §3.3: the colour marks the state, the words say it).
+ * For a detail-page header (`WidgetHeader`'s `badge`) or a table cell. The
+ * text is required — a badge without words would make colour the only
+ * signal. The pulsing dot is {@link LivePill}'s live-data semantic.
+ */
+export function StatusBadge({ children, tone, className }) {
+    const t = resolveTone(tone);
+    return (_jsxs("span", { "data-slot": "status-badge", "data-tone": t, className: cn("text-small inline-flex w-fit items-center gap-1.5 rounded-sm border px-2.5 py-0.5 font-semibold", TONE_SOFT[t], TONE_BORDER[t], className), children: [_jsx("span", { "aria-hidden": "true", className: cn("size-1.5 shrink-0 rounded-full", TONE_DOT[t]) }), children] }));
 }
 /**
  * Compact count badge — tabular numbers on a tinted background with a border
  * in the tone. Use as the right-aligned indicator on a list/group row (e.g. a
  * per-group item count). The number stays in the foreground in every tone
- * (no coloured digits): the tint and the border carry the tone.
+ * (no coloured digits): the tint and the border carry the tone. A count
+ * without a state stays `neutral`.
  */
-export function CountPill({ tone = "neutral", children }) {
-    return (_jsx("span", { className: `inline-flex min-w-[2.5rem] items-center justify-center rounded-sm border px-2.5 py-0.5 text-sm font-semibold tabular-nums ${TONE_SOFT[tone]} ${TONE_BORDER[tone]}`, children: children }));
+export function CountPill({ tone = "neutral", children, className }) {
+    const t = resolveTone(tone);
+    return (_jsx("span", { className: cn("text-dense inline-flex min-w-10 items-center justify-center rounded-sm border px-2.5 py-0.5 font-semibold tabular-nums", TONE_SOFT[t], TONE_BORDER[t], className), children: children }));
 }
 //# sourceMappingURL=Pills.js.map

package/dist/components/Pills.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pills.js","sourceRoot":"","sources":["../../src/components/Pills.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAA;AASzF;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAiB;IACjE,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAA;IACrC,OAAO,CACL,gBACE,SAAS,EAAE,wFAAwF,SAAS,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,aAEzI,8BACc,MAAM,EAClB,SAAS,EAAE,uCAAuC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAClE,EACD,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,IAC3B,CACR,CAAA;AACH,CAAC;AASD;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAkB;IACtE,OAAO,CACL,eACE,SAAS,EAAE,6HAA6H,SAAS,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,YAE7K,QAAQ,GACJ,CACR,CAAA;AACH,CAAC"}
+{"version":3,"file":"Pills.js","sourceRoot":"","sources":["../../src/components/Pills.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAiB,MAAM,sBAAsB,CAAA;AACnG,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAUpC;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAiB;IAC5E,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAA;IACrC,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IACnC,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CACX,yFAAyF,EACzF,SAAS,CAAC,CAAC,CAAC,EACZ,WAAW,CAAC,CAAC,CAAC,EACd,SAAS,CACV,aAED,8BACc,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAC7E,EACD,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,IAC3B,CACR,CAAA;AACH,CAAC;AAaD;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAoB;IACzE,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAC3B,OAAO,CACL,6BACY,cAAc,eACb,CAAC,EACZ,SAAS,EAAE,EAAE,CACX,iGAAiG,EACjG,SAAS,CAAC,CAAC,CAAC,EACZ,WAAW,CAAC,CAAC,CAAC,EACd,SAAS,CACV,aAED,8BAAkB,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAI,EACxF,QAAQ,IACJ,CACR,CAAA;AACH,CAAC;AAUD;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAkB;IACjF,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;IAC3B,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,wHAAwH,EACxH,SAAS,CAAC,CAAC,CAAC,EACZ,WAAW,CAAC,CAAC,CAAC,EACd,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAA;AACH,CAAC"}

package/dist/components/SectionHeading.d.ts

@@ -10,7 +10,9 @@ export interface SectionHeadingProps {
 /**
  * Section title row — a small semibold heading with an optional muted hint or
  * control on the right. Use to label a block inside a widget body (e.g. a list
- * or sub-table) without the visual weight of a full card header.
+ * or sub-table) without the visual weight of a full card header. The title is
+ * a caption ({@link MICRO_LABEL}: 13 px semibold, normal case); a section that
+ * needs a real heading takes `text-section` (21 px) instead.
  */
 export declare function SectionHeading({ title, hint, trailing }: SectionHeadingProps): import("react").JSX.Element;
 //# sourceMappingURL=SectionHeading.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SectionHeading.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,WAAW,mBAAmB;IAClC,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,mBAAmB,+BAS5E"}
+{"version":3,"file":"SectionHeading.d.ts","sourceRoot":"","sources":["../../src/components/SectionHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,mBAAmB;IAClC,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,mBAAmB,+BAW5E"}

package/dist/components/SectionHeading.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MICRO_LABEL } from "../lib/typography.js";
+import { cn } from "../lib/utils.js";
 /**
  * Section title row — a small semibold heading with an optional muted hint or
  * control on the right. Use to label a block inside a widget body (e.g. a list
- * or sub-table) without the visual weight of a full card header.
+ * or sub-table) without the visual weight of a full card header. The title is
+ * a caption ({@link MICRO_LABEL}: 13 px semibold, normal case); a section that
+ * needs a real heading takes `text-section` (21 px) instead.
  */
 export function SectionHeading({ title, hint, trailing }) {
-    return (_jsxs("div", { className: "text-muted-foreground mb-3 flex items-center justify-between text-sm font-semibold", children: [_jsx("span", { children: title }), (hint || trailing) && (_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: trailing ?? hint }))] }));
+    return (_jsxs("div", { className: cn("text-muted-foreground mb-3 flex items-center justify-between", MICRO_LABEL), children: [_jsx("span", { children: title }), (hint || trailing) && (_jsx("span", { className: "text-muted-foreground text-small font-medium", children: trailing ?? hint }))] }));
 }
 //# sourceMappingURL=SectionHeading.js.map

package/dist/components/SectionHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeading.js","sourceRoot":"","sources":["../../src/components/SectionHeading.tsx"],"names":[],"mappings":";AAWA;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAuB;IAC3E,OAAO,CACL,eAAK,SAAS,EAAC,oFAAoF,aACjG,yBAAO,KAAK,GAAQ,EACnB,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CACrB,eAAM,SAAS,EAAC,2CAA2C,YAAE,QAAQ,IAAI,IAAI,GAAQ,CACtF,IACG,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"SectionHeading.js","sourceRoot":"","sources":["../../src/components/SectionHeading.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAA;AAWpC;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAuB;IAC3E,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,8DAA8D,EAAE,WAAW,CAAC,aAE1F,yBAAO,KAAK,GAAQ,EACnB,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CACrB,eAAM,SAAS,EAAC,8CAA8C,YAAE,QAAQ,IAAI,IAAI,GAAQ,CACzF,IACG,CACP,CAAA;AACH,CAAC"}