@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

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;
@@ -9,14 +10,41 @@ export interface ListFooterProps {
     loadingMore?: boolean;
     /** Called when the user asks for the next page. */
     onLoadMore: () => void;
-    /** Plural noun for the count, e.g. `"instances"`. Default `"rows"`. */
+    /** 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.
+ * 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":"AAAA,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,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,UAAU,EACV,IAAa,GACd,EAAE,eAAe,sCAmBjB"}
+{"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,13 +1,42 @@
-import { jsxs as _jsxs, jsx as _jsx } 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.
+ * 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 = "rows", }) {
-    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: [_jsxs("span", { children: ["Showing ", shown.toLocaleString(), " of ", total.toLocaleString(), " ", noun] }), hasMore && (_jsx("button", { type: "button", onClick: onLoadMore, disabled: loadingMore, className: "border-border text-foreground hover:bg-muted focus-visible:ring-ring inline-flex items-center gap-1 rounded-md border px-3 py-1.5 font-medium outline-none focus-visible:ring-2 disabled:opacity-50", children: loadingMore ? "Loading…" : "Load more" }))] }));
+    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 ?? 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":";AAeA;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,IAAI,GAAG,MAAM,GACG;IAChB,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,IAAI,CAAA;IAC3B,OAAO,CACL,eAAK,SAAS,EAAC,iFAAiF,aAC9F,uCACW,KAAK,CAAC,cAAc,EAAE,UAAM,KAAK,CAAC,cAAc,EAAE,OAAG,IAAI,IAC7D,EACN,OAAO,IAAI,CACV,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,WAAW,EACrB,SAAS,EAAC,qMAAqM,YAE9M,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,GAChC,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,25 +1,49 @@
-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. Default `"info"`. */
-    tone?: ToneVariant;
-    /** Pill label. Defaults to `"Live"`. */
+    /** Status tone driving the dot, tint and border. Default `"info"`. */
+    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
- * the data is live/real-time. Tone-based, so it inherits the active theme.
+ * 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 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. Default `"neutral"`. */
-    tone?: ToneVariant;
+    /** Status tone driving the tint and border. Default `"neutral"`. */
+    tone?: ToneName;
     /** The count/value to display (tabular numbers). */
     children: ReactNode;
+    className?: string;
 }
 /**
- * Compact count badge — tabular numbers on a tinted background. Use as the
- * right-aligned indicator on a list/group row (e.g. a per-group item count).
+ * 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. 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;AACtC,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAE5E,MAAM,WAAW,aAAa;IAC5B,4DAA4D;IAC5D,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAa,EAAE,QAAQ,EAAE,EAAE,aAAa,+BASlE;AAED,MAAM,WAAW,cAAc;IAC7B,yDAAyD;IACzD,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;GAGG;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,17 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TONE_DOT, TONE_SOFT } from "../lib/tone-utils.js";
+import { useToolkitMessages } from "../locale/locale-provider.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, so it inherits the active theme.
+ * 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 }) {
-    return (_jsxs("span", { className: `inline-flex items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-semibold ${TONE_SOFT[tone]}`, children: [_jsx("span", { className: `size-1.5 animate-pulse rounded-full ${TONE_DOT[tone]}` }), children ?? "Live"] }));
+export function LivePill({ tone = "info", children, className }) {
+    const messages = useToolkitMessages();
+    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] }));
 }
 /**
- * Compact count badge — tabular numbers on a tinted background. Use as the
- * right-aligned indicator on a list/group row (e.g. a per-group item count).
+ * 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 CountPill({ tone = "neutral", children }) {
-    return (_jsx("span", { className: `inline-flex min-w-[2.5rem] items-center justify-center rounded-md px-2.5 py-0.5 text-sm font-semibold tabular-nums ${TONE_SOFT[tone]}`, children: children }));
+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. A count
+ * without a state stays `neutral`.
+ */
+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,QAAQ,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAA;AAS5E;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAiB;IACjE,OAAO,CACL,gBACE,SAAS,EAAE,iFAAiF,SAAS,CAAC,IAAI,CAAC,EAAE,aAE7G,eAAM,SAAS,EAAE,uCAAuC,QAAQ,CAAC,IAAI,CAAC,EAAE,GAAI,EAC3E,QAAQ,IAAI,MAAM,IACd,CACR,CAAA;AACH,CAAC;AASD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAkB;IACtE,OAAO,CACL,eACE,SAAS,EAAE,sHAAsH,SAAS,CAAC,IAAI,CAAC,EAAE,YAEjJ,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"}

package/dist/components/Toast.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+import { type ToastItem, type ToastOptions } from "../lib/toast-model.js";
+export type { ToastOptions, ToastTone } from "../lib/toast-model.js";
+/** What {@link useToast} returns. */
+export interface ToastApi {
+    /** Show a toast; returns its id (for an early {@link ToastApi.dismiss}). */
+    show: (options: ToastOptions) => number;
+    /** Remove a toast before its timer runs out. */
+    dismiss: (id: number) => void;
+}
+/**
+ * Raise toasts from anywhere below a {@link ToastProvider}: `show({ tone,
+ * title })` after a write succeeded or failed, never a silent `console` line.
+ * Outside a provider it returns a no-op API, so a widget rendered in a bare
+ * fixture never crashes on feedback.
+ */
+export declare function useToast(): ToastApi;
+/**
+ * The stack of toasts — a presentational view over a list (the provider owns
+ * the state). The container is ONE persistent live region
+ * (`aria-live="polite"`, mounted before the first toast so that toast is
+ * announced, each new toast on its own: `aria-atomic="false"`), without
+ * stealing focus. Its attributes never change: a role or name that switched
+ * on with the first toast would make the browser rebuild the region in the
+ * same commit that inserts the toast, and a region created with its content
+ * already in it is not announced. So it carries no role (a generic element
+ * takes no name either): an idle stack is no second "status" next to a view's
+ * own loading status. Bottom centre, above dialogs (z 60), per CI §5/§8.
+ */
+export declare function ToastViewport({ toasts, onDismiss, }: {
+    toasts: readonly ToastItem[];
+    onDismiss: (id: number) => void;
+}): import("react").JSX.Element;
+/**
+ * Provide toasts to a subtree and render their stack. Idempotent: nested
+ * inside another `ToastProvider` it adds nothing, so the app shell and an
+ * embedded builder share one stack and one live region. `McpAppView` mounts
+ * one for you.
+ */
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAMd,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,YAAY,EAGlB,MAAM,uBAAuB,CAAA;AAE9B,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEpE,qCAAqC;AACrC,MAAM,WAAW,QAAQ;IACvB,4EAA4E;IAC5E,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAA;IACvC,gDAAgD;IAChD,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAOD;;;;;GAKG;AACH,wBAAgB,QAAQ,IAAI,QAAQ,CAEnC;AA0BD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,SAAS,SAAS,EAAE,CAAA;IAC5B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC,+BAmBA;AAoFD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+TAGlE"}

package/dist/components/Toast.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, } from "react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { useToolkitMessages } from "../locale/locale-provider.js";
+import { FOCUS_RING } from "../lib/focus-ring.js";
+import { TONE_ICON } from "../lib/tone-utils.js";
+import { cn } from "../lib/utils.js";
+import { createToast, createToastTimer, toastReducer, } from "../lib/toast-model.js";
+const ToastContext = createContext(null);
+/** Outside a provider `useToast()` degrades to a no-op instead of throwing. */
+const NOOP_TOASTS = { show: () => -1, dismiss: () => { } };
+/**
+ * Raise toasts from anywhere below a {@link ToastProvider}: `show({ tone,
+ * title })` after a write succeeded or failed, never a silent `console` line.
+ * Outside a provider it returns a no-op API, so a widget rendered in a bare
+ * fixture never crashes on feedback.
+ */
+export function useToast() {
+    return useContext(ToastContext) ?? NOOP_TOASTS;
+}
+/**
+ * Status edge per tone — the status colour as border, never as text. Repeated
+ * under `dark:` so the card's dark 3:1 rim (`dark:border-input`, a later rule)
+ * does not paint over it.
+ */
+const TONE_EDGE = {
+    success: "border-l-success dark:border-l-success",
+    warning: "border-l-warning dark:border-l-warning",
+    danger: "border-l-danger dark:border-l-danger",
+    info: "border-l-info dark:border-l-info",
+};
+/**
+ * Lucide icon per tone, drawn in the tone colour (`TONE_ICON`, CI §3.3: status
+ * as edge and icon). The title next to it carries the message, so success and
+ * warning stay CI-exempt from 3:1 on light like every other status icon.
+ */
+const TOAST_ICON = {
+    success: CircleCheck,
+    warning: TriangleAlert,
+    danger: CircleAlert,
+    info: Info,
+};
+/**
+ * The stack of toasts — a presentational view over a list (the provider owns
+ * the state). The container is ONE persistent live region
+ * (`aria-live="polite"`, mounted before the first toast so that toast is
+ * announced, each new toast on its own: `aria-atomic="false"`), without
+ * stealing focus. Its attributes never change: a role or name that switched
+ * on with the first toast would make the browser rebuild the region in the
+ * same commit that inserts the toast, and a region created with its content
+ * already in it is not announced. So it carries no role (a generic element
+ * takes no name either): an idle stack is no second "status" next to a view's
+ * own loading status. Bottom centre, above dialogs (z 60), per CI §5/§8.
+ */
+export function ToastViewport({ toasts, onDismiss, }) {
+    const messages = useToolkitMessages();
+    return (_jsx("div", { "data-slot": "toast-viewport", "aria-live": "polite", "aria-atomic": "false", className: "pointer-events-none fixed inset-x-0 bottom-4 z-60 flex flex-col items-center gap-2 px-4", children: toasts.map((toast) => (_jsx(ToastCard, { toast: toast, dismissLabel: messages.common.dismiss, onDismiss: onDismiss }, toast.id))) }));
+}
+function ToastCard({ toast, dismissLabel, onDismiss, }) {
+    // Hover or keyboard focus holds the toast; on leave it resumes with the
+    // time that was LEFT (createToastTimer), never a fresh full duration.
+    const timer = useRef(null);
+    useEffect(() => {
+        const countdown = createToastTimer(toast.duration, () => onDismiss(toast.id));
+        timer.current = countdown;
+        return () => {
+            countdown.cancel();
+            timer.current = null;
+        };
+    }, [onDismiss, toast.id, toast.duration]);
+    const releaseFocus = (event) => {
+        // Focus moving inside the toast (card → close button) keeps the hold.
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+            timer.current?.release("focus");
+        }
+    };
+    const Icon = TOAST_ICON[toast.tone];
+    return (_jsxs("div", { "data-slot": "toast", "data-tone": toast.tone, onMouseEnter: () => timer.current?.hold("pointer"), onMouseLeave: () => timer.current?.release("pointer"), onFocus: () => timer.current?.hold("focus"), onBlur: releaseFocus, className: cn(
+        // An overlay like Dialog/Sheet: shadow-2 on light, the 3:1 input rim on
+        // dark (shadows vanish on the ground). Its words are running text (16 px).
+        "bg-popover text-popover-foreground dark:border-input shadow-2 text-body pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-md border border-l-4 px-4 py-3", "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-bottom-2 motion-safe:duration-(--motion-base) motion-safe:ease-(--ease)", TONE_EDGE[toast.tone]), children: [_jsx(Icon, { "aria-hidden": "true", className: cn("mt-1 size-4 shrink-0", TONE_ICON[toast.tone]) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-medium break-words", children: toast.title }), toast.description && (_jsx("p", { className: "text-muted-foreground mt-0.5 break-words", children: toast.description }))] }), _jsx("button", { type: "button", "aria-label": dismissLabel, onClick: () => onDismiss(toast.id), className: `text-muted-foreground hover:text-foreground -mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-sm ${FOCUS_RING}`, children: _jsx(X, { "aria-hidden": "true", className: "size-4" }) })] }));
+}
+function ToastRoot({ children }) {
+    const [toasts, dispatch] = useReducer(toastReducer, []);
+    const nextId = useRef(0);
+    const dismiss = useCallback((id) => dispatch({ type: "dismiss", id }), []);
+    const show = useCallback((options) => {
+        nextId.current += 1;
+        const id = nextId.current;
+        dispatch({ type: "add", toast: createToast(id, options) });
+        return id;
+    }, []);
+    const api = useMemo(() => ({ show, dismiss }), [show, dismiss]);
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx(ToastViewport, { toasts: toasts, onDismiss: dismiss })] }));
+}
+/**
+ * Provide toasts to a subtree and render their stack. Idempotent: nested
+ * inside another `ToastProvider` it adds nothing, so the app shell and an
+ * embedded builder share one stack and one live region. `McpAppView` mounts
+ * one for you.
+ */
+export function ToastProvider({ children }) {
+    const parent = useContext(ToastContext);
+    return parent ? children : _jsx(ToastRoot, { children: children });
+}
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast.js.map

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

package/dist/components/WidgetHeader.d.ts

@@ -1,21 +1,45 @@
 import type { ReactNode } from "react";
-import { type ToneVariant } from "../lib/tone-utils.js";
+import { type ToneName } from "../lib/tone-utils.js";
+/** Heading element of a {@link WidgetHeader} title. */
+export type WidgetHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export interface WidgetHeaderProps {
-    /** Optional icon/glyph rendered in a tinted tile above the title. */
-    icon?: ReactNode;
-    /** Tone for the icon tile. Default `"neutral"`. */
-    iconTone?: ToneVariant;
     /** The widget title. */
     title: ReactNode;
-    /** Subtitle/meta row under the title (e.g. a live pill + counts). */
+    /**
+     * Heading element of the title. Default `"h1"`: the widget is the page.
+     * Pick the level that keeps ONE outline per view — below a toolbar title
+     * (`McpAppView` `titleMode="show"`, an h2 by default) use `"h3"`, inside a
+     * composed view under its own heading one level below it. The size follows
+     * `size`, not the level.
+     */
+    as?: WidgetHeadingLevel;
+    /**
+     * `"default"`: the page title (28 px / 700, the CI h2 style). `"detail"`:
+     * the compact detail-page title (21 px / 600, the CI h3 style).
+     */
+    size?: "default" | "detail";
+    /** Inline after the title inside the heading (e.g. a version chip). */
+    titleSuffix?: ReactNode;
+    /** Above the title — a `StatusBadge` that says the state in words. */
+    badge?: ReactNode;
+    /** Subtitle/meta row under the title (e.g. a live pill + counts), a 13 px caption row. */
     sub?: ReactNode;
     /** Right-aligned actions slot (buttons, drill controls). */
     actions?: ReactNode;
+    /**
+     * @deprecated A glyph in a tinted tile above every title is the icon-tile
+     * pattern the CI rules out (anti-slop U2). Say a state in words with a
+     * `StatusBadge` in {@link WidgetHeaderProps.badge}. Still rendered when set.
+     */
+    icon?: ReactNode;
+    /** @deprecated Tone of the deprecated {@link WidgetHeaderProps.icon} tile. */
+    iconTone?: ToneName;
+    className?: string;
 }
 /**
- * Page-level header for the top of a dashboard widget: an optional tinted icon
- * tile, a large title, a subtitle/meta row, and a right-aligned actions slot.
- * Use once per widget surface to anchor it.
+ * Page-level header at the top of a widget: an optional state badge, the
+ * title (heading level per `as`, size per `size`), a subtitle/meta row and a
+ * right-aligned actions slot. Use once per widget surface to anchor it.
  */
-export declare function WidgetHeader({ icon, iconTone, title, sub, actions, }: WidgetHeaderProps): import("react").JSX.Element;
+export declare function WidgetHeader({ title, as: Heading, size, titleSuffix, badge, sub, actions, icon, iconTone, className, }: WidgetHeaderProps): import("react").JSX.Element;
 //# sourceMappingURL=WidgetHeader.d.ts.map