@tensor_1/react 2.27.0 → 2.28.0

package/README.md

@@ -308,3 +308,26 @@ const toRoute = (p: UixLinkProps) => <NextLink {...p} />;
 - **`CollapsibleSection`** stays a JS-free `<details>` unless you pass `lazy`, `persistKey` or `openRequest`. `lazy` unmounts a closed body; `lazy="keep"` keeps it after the first open.
 - **`ConfirmDialog`** focuses the type-to-confirm field, else Cancel when `destructive`. `Popconfirm` is for low-risk, easily undone actions; use `ConfirmDialog` for anything hard to undo.
 - **`KbdCombo`** renders the non-Apple glyphs on the server and switches to ⌘/⇧/⌥ after mount, so hydration matches. Pass `platform` to pin it.
+
+### Imperative toasts (2.28.0)
+
+`toast()` queues a toast from anywhere on the client (a mutation hook, a tRPC error handler); every mounted
+`<Toaster />` renders the queue (UIx HAR-1363; replaces `sonner` in TENSOR and MOTUS).
+
+```tsx
+<Toaster position="bottom-end" limit={3} />                       // once, in the app shell
+
+toast.success('Saved', { description: 'Change CHG-1042 updated.' });
+toast.error('Could not save', { action: { label: 'Copy details', onClick: copy } });   // stays until dismissed
+toast.warning('Export is taking longer than usual');
+const id = toast.loading('Exporting…'); toast.update(id, { kind: 'success', message: 'Exported' });
+toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: (e) => `Failed: ${message(e)}` });
+toast.undoable('Ticket closed', { onUndo: reopen, onCommit: close });   // TENSOR C2 useUndoableAction
+toast.dismiss(id);   // or toast.dismiss() for all
+```
+
+- **Timing:** success, info and default toasts stay 5 s, warnings 8 s; errors and loading toasts stay until dismissed or updated. Pass `duration` (ms, or `null`) to override. Timers pause while the pointer or focus is inside the toaster and while the tab is hidden.
+- **Stacking:** at most `limit` toasts show (default 3). The rest wait their turn. Reusing an `id` replaces a toast in place.
+- **Accessibility:** errors are `role="alert"`. Everything else is announced through the toaster's polite live region, and a loading toast that settles is announced again. Esc closes the focused toast. Tone glyphs are decorative; the text carries the meaning.
+- **Stores:** `toast` writes to a default store that `<Toaster />` reads. `createToastApi(createToastStore())` gives a separate queue (tests, embedded apps); pass its `store` to `<Toaster store>`. The store has no React dependency.
+- `<Toaster>` still renders hand-managed `<Toast>` children first. `Toast` gains `tone="warning"` and an `action` slot.

package/dist/components/Toast.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { ToastStore } from '../toast-store.js';
 
-type ToastTone = 'success' | 'danger' | 'info';
+type ToastTone = 'success' | 'danger' | 'info' | 'warning';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     dismissLabel?: string;
@@ -9,15 +10,26 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     message?: ReactNode;
     tone?: ToastTone;
     icon?: ReactNode;
+    /** A button (or link) after the text, e.g. "Undo" or "Copy details" (HAR-1363). */
+    action?: ReactNode;
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     regionLabel?: string;
+    /**
+     * The queue to render (HAR-1363). Default: the store behind the exported `toast()`.
+     * Children still render first, so a hand-managed `<Toast>` keeps working.
+     */
+    store?: ToastStore;
+    /** At most this many store toasts on screen; later ones wait their turn. Default 3. */
+    limit?: number;
+    /** Corner of the viewport. Default `bottom-end`. */
+    position?: 'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center';
     children?: ReactNode;
 }
-declare function Toaster({ children, regionLabel: regionLabelProp, className, ...props }: ToasterProps): react.JSX.Element;
+declare function Toaster({ children, regionLabel: regionLabelProp, store, limit, position, className, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }: ToasterProps): react.JSX.Element;
 
 export { Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps };

package/dist/components/Toast.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { toast as defaultToast } from "../toast-store.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
+function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
   const uixLabels = useUixLabels();
   const dismissLabel = dismissLabelProp ?? uixLabels.toast?.dismiss ?? "Dismiss";
   const assertive = tone === "danger";
@@ -42,12 +43,106 @@ function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dis
           title && /* @__PURE__ */ jsx("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
+        action != null && /* @__PURE__ */ jsx("div", { className: "uix-toast__action-slot", children: action }),
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
       ]
     }
   );
 }
-function Toaster({ children, regionLabel: regionLabelProp, className, ...props }) {
+const KIND_TONE = {
+  success: "success",
+  error: "danger",
+  warning: "warning",
+  info: "info",
+  loading: "info",
+  default: void 0
+};
+const svg = (path) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: path });
+const KIND_GLYPH = {
+  success: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.75 10.25l2.25 2.25 4.25-4.75" })
+  ] })),
+  error: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 6.25v4.5M10 13.5v.25" })
+  ] })),
+  warning: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 3.25l7.25 13H2.75z" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 8.25v3.5M10 14v.25" })
+  ] })),
+  info: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 9.25v4.5M10 6.5v.25" })
+  ] })),
+  loading: /* @__PURE__ */ jsx("span", { className: "uix-spinner uix-toast__spinner" })
+};
+function StoreToast({ record, store }) {
+  const action = record.action && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "uix-toast__action",
+      onClick: () => {
+        record.action.onClick();
+        store.dismiss(record.id, "action");
+      },
+      children: record.action.label
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      "data-toast-id": record.id,
+      tone: KIND_TONE[record.kind],
+      icon: record.icon ?? KIND_GLYPH[record.kind],
+      title: record.message,
+      message: record.description,
+      action,
+      leaving: record.leaving,
+      "aria-busy": record.kind === "loading" || void 0,
+      onClose: () => store.dismiss(record.id, "close")
+    }
+  );
+}
+function useToastTimers(store, visible, paused) {
+  const timers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const now = Date.now();
+    const map = timers.current;
+    const live = new Map(visible.filter((r) => !r.leaving && r.duration != null).map((r) => [r.id, r]));
+    for (const [id, timer] of map) {
+      const record = live.get(id);
+      if (!record || record.version !== timer.version) {
+        if (timer.handle != null) clearTimeout(timer.handle);
+        map.delete(id);
+      }
+    }
+    for (const record of live.values()) {
+      let timer = map.get(record.id);
+      if (!timer) {
+        timer = { version: record.version, remaining: record.duration, start: now };
+        map.set(record.id, timer);
+      }
+      if (paused) {
+        if (timer.handle != null) {
+          clearTimeout(timer.handle);
+          timer.handle = void 0;
+          timer.remaining -= now - timer.start;
+        }
+      } else if (timer.handle == null) {
+        timer.start = now;
+        const id = record.id;
+        timer.handle = window.setTimeout(() => store.dismiss(id, "timeout"), Math.max(0, timer.remaining));
+      }
+    }
+  });
+  useEffect(() => () => {
+    for (const timer of timers.current.values()) if (timer.handle != null) clearTimeout(timer.handle);
+    timers.current.clear();
+  }, []);
+}
+function Toaster({ children, regionLabel: regionLabelProp, store = defaultToast.store, limit = 3, position = "bottom-end", className, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }) {
   const uixLabels = useUixLabels();
   const regionLabel = regionLabelProp ?? uixLabels.toaster?.region ?? "Notifications";
   const [announced, setAnnounced] = useState("");
@@ -61,10 +156,59 @@ function Toaster({ children, regionLabel: regionLabelProp, className, ...props }
     if (clearTimer.current != null) clearTimeout(clearTimer.current);
   }, []);
   const ctx = useMemo(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-toaster", className), role: "region", "aria-label": regionLabel, ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
-    children
-  ] }) });
+  const records = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const visible = useMemo(() => records.slice(-Math.max(1, limit)), [records, limit]);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  useEffect(() => {
+    const sync = () => setHidden(document.visibilityState === "hidden");
+    sync();
+    document.addEventListener("visibilitychange", sync);
+    return () => document.removeEventListener("visibilitychange", sync);
+  }, []);
+  useToastTimers(store, visible, hovered || focused || hidden);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.key !== "Escape") return;
+    const id = event.target.closest("[data-toast-id]")?.dataset.toastId;
+    if (!id) return;
+    event.preventDefault();
+    event.stopPropagation();
+    store.dismiss(id, "close");
+  };
+  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-toaster", className),
+      role: "region",
+      "aria-label": regionLabel,
+      "data-position": position === "bottom-end" ? void 0 : position,
+      onMouseEnter: (e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+        onBlur?.(e);
+      },
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
+        children,
+        visible.map((record) => /* @__PURE__ */ jsx(StoreToast, { record, store }, `${record.id}:${record.kind}`))
+      ]
+    }
+  ) });
 }
 export {
   Toast,

package/dist/index.cjs

@@ -161,6 +161,7 @@ __export(src_exports, {
   Steps: () => Steps,
   SubNavItem: () => SubNavItem,
   Switch: () => Switch,
+  TOAST_LEAVE_MS: () => TOAST_LEAVE_MS,
   Tab: () => Tab,
   TabPanel: () => TabPanel,
   Table: () => Table,
@@ -194,6 +195,8 @@ __export(src_exports, {
   clusterIdFor: () => clusterIdFor,
   computePosition: () => computePosition,
   contrastRatio: () => contrastRatio,
+  createToastApi: () => createToastApi,
+  createToastStore: () => createToastStore,
   cx: () => cx,
   enumerateDateSpan: () => enumerateDateSpan,
   filterComboboxOptions: () => filterComboboxOptions,
@@ -241,6 +244,7 @@ __export(src_exports, {
   summarizeDiff: () => summarizeDiff,
   summarizeRule: () => summarizeRule,
   toDateKey: () => toDateKey,
+  toast: () => toast,
   toggleId: () => toggleId,
   togglePage: () => togglePage,
   toggleSort: () => toggleSort,
@@ -3283,9 +3287,117 @@ function Alert({ tone, title, icon, children, className, ...props }) {
 
 // src/components/Toast.tsx
 var import_react31 = require("react");
+
+// src/toast-store.ts
+var DEFAULT_DURATION = {
+  success: 5e3,
+  info: 5e3,
+  default: 5e3,
+  warning: 8e3,
+  error: null,
+  loading: null
+};
+var TOAST_LEAVE_MS = 200;
+var counter = 0;
+function createToastStore() {
+  let records = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const listener of listeners) listener();
+  };
+  const set = (next) => {
+    records = next;
+    emit();
+  };
+  const show = (kind, message, options = {}) => {
+    const id = options.id ?? `uix-toast-${++counter}`;
+    const record = {
+      id,
+      kind,
+      message,
+      description: options.description,
+      duration: options.duration === void 0 ? DEFAULT_DURATION[kind] : options.duration,
+      action: options.action,
+      icon: options.icon,
+      onDismiss: options.onDismiss,
+      version: 0
+    };
+    const existing = records.find((r) => r.id === id);
+    set(existing ? records.map((r) => r.id === id ? { ...record, version: r.version + 1 } : r) : [...records, record]);
+    return id;
+  };
+  const update = (id, patch) => {
+    if (!records.some((r) => r.id === id)) return;
+    set(records.map((r) => {
+      if (r.id !== id) return r;
+      const kind = patch.kind ?? r.kind;
+      const duration = "duration" in patch ? patch.duration ?? null : patch.kind ? DEFAULT_DURATION[kind] : r.duration;
+      return { ...r, ...patch, kind, duration, leaving: false, version: r.version + 1 };
+    }));
+  };
+  const dismiss = (id, reason = "programmatic") => {
+    const closing = records.filter((r) => (id === void 0 || r.id === id) && !r.leaving);
+    if (closing.length === 0) return;
+    const ids = new Set(closing.map((r) => r.id));
+    set(records.map((r) => ids.has(r.id) ? { ...r, leaving: true } : r));
+    for (const r of closing) r.onDismiss?.(reason);
+    const remove = () => set(records.filter((r) => !(ids.has(r.id) && r.leaving)));
+    if (typeof setTimeout === "function") setTimeout(remove, TOAST_LEAVE_MS);
+    else remove();
+  };
+  return {
+    show,
+    update,
+    dismiss,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => records
+  };
+}
+function createToastApi(store) {
+  const api = ((message, options) => store.show("default", message, options));
+  api.success = (message, options) => store.show("success", message, options);
+  api.error = (message, options) => store.show("error", message, options);
+  api.warning = (message, options) => store.show("warning", message, options);
+  api.info = (message, options) => store.show("info", message, options);
+  api.loading = (message, options) => store.show("loading", message, options);
+  api.dismiss = (id) => store.dismiss(id, "programmatic");
+  api.update = (id, patch) => store.update(id, patch);
+  api.promise = (promise, messages, options) => {
+    const id = store.show("loading", messages.loading, options);
+    promise.then(
+      (value) => store.update(id, { kind: "success", message: typeof messages.success === "function" ? messages.success(value) : messages.success }),
+      (error) => store.update(id, { kind: "error", message: typeof messages.error === "function" ? messages.error(error) : messages.error })
+    );
+    return promise;
+  };
+  api.undoable = (message, { onUndo, onCommit, undoLabel = "Undo", duration = 6e3, ...options }) => {
+    let undone = false;
+    return store.show("default", message, {
+      ...options,
+      duration,
+      action: { label: undoLabel, onClick: () => {
+        undone = true;
+        onUndo();
+      } },
+      onDismiss: () => {
+        if (!undone) onCommit();
+      }
+    });
+  };
+  api.store = store;
+  return api;
+}
+var toast = createToastApi(createToastStore());
+
+// src/components/Toast.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var ToasterContext = (0, import_react31.createContext)(null);
-function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
+function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
   const uixLabels = useUixLabels();
   const dismissLabel = dismissLabelProp ?? uixLabels.toast?.dismiss ?? "Dismiss";
   const assertive = tone === "danger";
@@ -3323,12 +3435,106 @@ function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dis
           title && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
+        action != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "uix-toast__action-slot", children: action }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
       ]
     }
   );
 }
-function Toaster({ children, regionLabel: regionLabelProp, className, ...props }) {
+var KIND_TONE = {
+  success: "success",
+  error: "danger",
+  warning: "warning",
+  info: "info",
+  loading: "info",
+  default: void 0
+};
+var svg = (path) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: path });
+var KIND_GLYPH = {
+  success: svg(/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M6.75 10.25l2.25 2.25 4.25-4.75" })
+  ] })),
+  error: svg(/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M10 6.25v4.5M10 13.5v.25" })
+  ] })),
+  warning: svg(/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M10 3.25l7.25 13H2.75z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M10 8.25v3.5M10 14v.25" })
+  ] })),
+  info: svg(/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M10 9.25v4.5M10 6.5v.25" })
+  ] })),
+  loading: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-spinner uix-toast__spinner" })
+};
+function StoreToast({ record, store }) {
+  const action = record.action && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "uix-toast__action",
+      onClick: () => {
+        record.action.onClick();
+        store.dismiss(record.id, "action");
+      },
+      children: record.action.label
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    Toast,
+    {
+      "data-toast-id": record.id,
+      tone: KIND_TONE[record.kind],
+      icon: record.icon ?? KIND_GLYPH[record.kind],
+      title: record.message,
+      message: record.description,
+      action,
+      leaving: record.leaving,
+      "aria-busy": record.kind === "loading" || void 0,
+      onClose: () => store.dismiss(record.id, "close")
+    }
+  );
+}
+function useToastTimers(store, visible, paused) {
+  const timers = (0, import_react31.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react31.useEffect)(() => {
+    const now = Date.now();
+    const map = timers.current;
+    const live = new Map(visible.filter((r) => !r.leaving && r.duration != null).map((r) => [r.id, r]));
+    for (const [id, timer] of map) {
+      const record = live.get(id);
+      if (!record || record.version !== timer.version) {
+        if (timer.handle != null) clearTimeout(timer.handle);
+        map.delete(id);
+      }
+    }
+    for (const record of live.values()) {
+      let timer = map.get(record.id);
+      if (!timer) {
+        timer = { version: record.version, remaining: record.duration, start: now };
+        map.set(record.id, timer);
+      }
+      if (paused) {
+        if (timer.handle != null) {
+          clearTimeout(timer.handle);
+          timer.handle = void 0;
+          timer.remaining -= now - timer.start;
+        }
+      } else if (timer.handle == null) {
+        timer.start = now;
+        const id = record.id;
+        timer.handle = window.setTimeout(() => store.dismiss(id, "timeout"), Math.max(0, timer.remaining));
+      }
+    }
+  });
+  (0, import_react31.useEffect)(() => () => {
+    for (const timer of timers.current.values()) if (timer.handle != null) clearTimeout(timer.handle);
+    timers.current.clear();
+  }, []);
+}
+function Toaster({ children, regionLabel: regionLabelProp, store = toast.store, limit = 3, position = "bottom-end", className, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }) {
   const uixLabels = useUixLabels();
   const regionLabel = regionLabelProp ?? uixLabels.toaster?.region ?? "Notifications";
   const [announced, setAnnounced] = (0, import_react31.useState)("");
@@ -3342,10 +3548,59 @@ function Toaster({ children, regionLabel: regionLabelProp, className, ...props }
     if (clearTimer.current != null) clearTimeout(clearTimer.current);
   }, []);
   const ctx = (0, import_react31.useMemo)(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("uix-toaster", className), role: "region", "aria-label": regionLabel, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
-    children
-  ] }) });
+  const records = (0, import_react31.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const visible = (0, import_react31.useMemo)(() => records.slice(-Math.max(1, limit)), [records, limit]);
+  const [hovered, setHovered] = (0, import_react31.useState)(false);
+  const [focused, setFocused] = (0, import_react31.useState)(false);
+  const [hidden, setHidden] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
+    const sync = () => setHidden(document.visibilityState === "hidden");
+    sync();
+    document.addEventListener("visibilitychange", sync);
+    return () => document.removeEventListener("visibilitychange", sync);
+  }, []);
+  useToastTimers(store, visible, hovered || focused || hidden);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.key !== "Escape") return;
+    const id = event.target.closest("[data-toast-id]")?.dataset.toastId;
+    if (!id) return;
+    event.preventDefault();
+    event.stopPropagation();
+    store.dismiss(id, "close");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    "div",
+    {
+      className: cx("uix-toaster", className),
+      role: "region",
+      "aria-label": regionLabel,
+      "data-position": position === "bottom-end" ? void 0 : position,
+      onMouseEnter: (e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+        onBlur?.(e);
+      },
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
+        children,
+        visible.map((record) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StoreToast, { record, store }, `${record.id}:${record.kind}`))
+      ]
+    }
+  ) });
 }
 
 // src/components/Table.tsx
@@ -8752,6 +9007,7 @@ function DiffViewer({
   Steps,
   SubNavItem,
   Switch,
+  TOAST_LEAVE_MS,
   Tab,
   TabPanel,
   Table,
@@ -8785,6 +9041,8 @@ function DiffViewer({
   clusterIdFor,
   computePosition,
   contrastRatio,
+  createToastApi,
+  createToastStore,
   cx,
   enumerateDateSpan,
   filterComboboxOptions,
@@ -8832,6 +9090,7 @@ function DiffViewer({
   summarizeDiff,
   summarizeRule,
   toDateKey,
+  toast,
   toggleId,
   togglePage,
   toggleSort,

package/dist/index.d.cts

@@ -1344,7 +1344,102 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare function Spinner({ size, accent, label, className, ...props }: SpinnerProps): react.JSX.Element;
 
-type ToastTone = 'success' | 'danger' | 'info';
+/**
+ * The imperative toast queue behind `toast()` (HAR-1363; TENSOR A2/C3, MOTUS A3/A4/C-13).
+ * Plain module state, no React: mutation helpers and server-action wrappers can call
+ * `toast.success(...)` from anywhere on the client; every mounted `Toaster` subscribed to
+ * the store renders it. Timing (auto-dismiss, pause on hover/focus/hidden tab) belongs to the
+ * `Toaster`, because it depends on what the user is looking at.
+ */
+type ToastKind = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'default';
+interface ToastAction {
+    label: string;
+    /** Runs, then the toast closes (reason `"action"`). */
+    onClick: () => void;
+}
+/** Why a toast closed. */
+type ToastDismissReason = 'timeout' | 'close' | 'action' | 'programmatic';
+interface ToastOptions {
+    /** Reuse an id to replace a toast in place instead of stacking a duplicate. */
+    id?: string;
+    /** A second, quieter line. */
+    description?: ReactNode;
+    /**
+     * Milliseconds on screen while visible and not paused. `null` keeps it until dismissed.
+     * Defaults: success/info/default 5 s, warning 8 s, error and loading stay.
+     */
+    duration?: number | null;
+    action?: ToastAction;
+    /** Replaces the tone glyph. */
+    icon?: ReactNode;
+    /** Called once when the toast closes, with the reason. */
+    onDismiss?: (reason: ToastDismissReason) => void;
+}
+interface ToastRecord {
+    id: string;
+    kind: ToastKind;
+    message: ReactNode;
+    description?: ReactNode;
+    duration: number | null;
+    action?: ToastAction;
+    icon?: ReactNode;
+    /** Set while the leave animation runs; the record is removed after it. */
+    leaving?: boolean;
+    /** Bumped on every update, so a Toaster restarts the toast's timer. */
+    version: number;
+    onDismiss?: (reason: ToastDismissReason) => void;
+}
+interface ToastPromiseMessages<T> {
+    loading: ReactNode;
+    success: ReactNode | ((value: T) => ReactNode);
+    error: ReactNode | ((error: unknown) => ReactNode);
+}
+interface UndoableToastOptions extends Omit<ToastOptions, 'action' | 'onDismiss'> {
+    /** The user pressed Undo: revert the optimistic change. `onCommit` is not called. */
+    onUndo: () => void;
+    /** The toast closed without Undo (timeout, ×, or a later dismiss): make the change final. */
+    onCommit: () => void;
+    /** Default "Undo". */
+    undoLabel?: string;
+}
+interface ToastStore {
+    show: (kind: ToastKind, message: ReactNode, options?: ToastOptions) => string;
+    update: (id: string, patch: Partial<Omit<ToastRecord, 'id' | 'version'>>) => void;
+    dismiss: (id?: string, reason?: ToastDismissReason) => void;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => readonly ToastRecord[];
+}
+/** How long the leave animation gets before the record is removed. */
+declare const TOAST_LEAVE_MS = 200;
+/** A separate queue, e.g. per test or per embedded app. Most products use the default `toast`. */
+declare function createToastStore(): ToastStore;
+interface ToastApi {
+    (message: ReactNode, options?: ToastOptions): string;
+    success: (message: ReactNode, options?: ToastOptions) => string;
+    error: (message: ReactNode, options?: ToastOptions) => string;
+    warning: (message: ReactNode, options?: ToastOptions) => string;
+    info: (message: ReactNode, options?: ToastOptions) => string;
+    loading: (message: ReactNode, options?: ToastOptions) => string;
+    /** Close one toast, or every toast without an id. */
+    dismiss: (id?: string) => void;
+    /** Change a toast in place (message, kind, description, duration, action). */
+    update: (id: string, patch: Partial<Omit<ToastRecord, 'id' | 'version'>>) => void;
+    /** A loading toast that turns into success or error when the promise settles. Returns the promise. */
+    promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>, options?: ToastOptions) => Promise<T>;
+    /**
+     * An optimistic action with an Undo button (TENSOR C2 `useUndoableAction`): `onCommit` runs
+     * when the toast closes without Undo; `onUndo` runs instead when Undo is pressed.
+     */
+    undoable: (message: ReactNode, options: UndoableToastOptions) => string;
+    /** The store this API writes to; pass it to `<Toaster store>` for a non-default queue. */
+    store: ToastStore;
+}
+/** Binds the `toast()` API to a store. */
+declare function createToastApi(store: ToastStore): ToastApi;
+/** The default queue; a `<Toaster />` without a `store` prop renders it. */
+declare const toast: ToastApi;
+
+type ToastTone = 'success' | 'danger' | 'info' | 'warning';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     dismissLabel?: string;
@@ -1352,16 +1447,27 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     message?: ReactNode;
     tone?: ToastTone;
     icon?: ReactNode;
+    /** A button (or link) after the text, e.g. "Undo" or "Copy details" (HAR-1363). */
+    action?: ReactNode;
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     regionLabel?: string;
+    /**
+     * The queue to render (HAR-1363). Default: the store behind the exported `toast()`.
+     * Children still render first, so a hand-managed `<Toast>` keeps working.
+     */
+    store?: ToastStore;
+    /** At most this many store toasts on screen; later ones wait their turn. Default 3. */
+    limit?: number;
+    /** Corner of the viewport. Default `bottom-end`. */
+    position?: 'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center';
     children?: ReactNode;
 }
-declare function Toaster({ children, regionLabel: regionLabelProp, className, ...props }: ToasterProps): react.JSX.Element;
+declare function Toaster({ children, regionLabel: regionLabelProp, store, limit, position, className, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }: ToasterProps): react.JSX.Element;
 
 interface TableWrapProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -3366,4 +3472,4 @@ declare function hsvToHex(value: HsvColor): string;
 declare function contrastRatio(background: string, foreground: string): number | undefined;
 declare function meetsContrast(background: string, foreground: string, minimum?: number): boolean;
 
-export { type AccessStateProps, Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, type AppliedBrandProfileSnapshot, type AsyncOperationState, AsyncOperationStatus, type AsyncOperationStatusProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BoundedRelationshipGraph, type BrandProfile, BrandProfileEditor, type BrandProfileEditorLabels, type BrandProfileEditorProps, type BrandProfileLogo, type BrandProfileTypography, BrandProfiles, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BuilderCanvas, type BuilderCanvasItem, type BuilderCanvasLabels, type BuilderCanvasProps, type BuilderPaletteItem, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarDay, type CalendarWeekday, Card, CardLink, type CardLinkProps, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ColorPicker, type ColorPickerLabels, type ColorPickerProps, type ColumnFilter, Combobox, type ComboboxOption, type ComboboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ConfirmDialog, type ConfirmDialogProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, CopyButton, type CopyButtonProps, DEFAULT_BRAND_PROFILE_EDITOR_LABELS, DEFAULT_BUILDER_CANVAS_LABELS, DEFAULT_COLOR_PICKER_LABELS, DEFAULT_DATE_RANGE_PICKER_LABELS, DEFAULT_DIFF_VIEWER_LABELS, DEFAULT_MATCH_REVIEW_LABELS, DEFAULT_PAGINATION_LABELS, DEFAULT_RELATIONSHIP_GRAPH_LABELS, DEFAULT_RULE_BUILDER_LABELS, DEFAULT_SAVE_STATUS_LABELS, DEFAULT_SCHEDULING_CALENDAR_LABELS, DEFAULT_STEP_STATE_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, type DateRangeValue, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, DetailPage, type DetailPageLinkProps, type DetailPageMetric, type DetailPageProps, type DetailPageTab, type DiffEntry, type DiffKind, type DiffResolution, type DiffSummary, DiffViewer, type DiffViewerLabels, type DiffViewerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FilterOption, FilterPopover, type FilterPopoverProps, FilteredEmptyState, type FlatNode, Flow, FlowNode, type FlowNodeProps, type FlowNodeState, type FlowProps, type FlowVariant, type FoldedText, ForbiddenState, Highlighted, type HighlightedProps, type HsvColor, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, type JsonPrimitive, type JsonValue, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps, Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps, Label, type LabelProps, type LayeredColumn, type LayeredEdgeClassification, type LayeredEdgeKind, type LayeredItem, type LayeredLayout, type LayeredLayoutOptions, type LayeredNavigationKey, LicensePositionBar, type LicensePositionBarProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, type MatchBulkResult, MatchReview, type MatchReviewAction, type MatchReviewCandidate, type MatchReviewField, type MatchReviewLabels, type MatchReviewProps, Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, Meter, type MeterProps, type MeterTone, MetricInput, type MetricInputProps, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, NotFoundState, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationLabels, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Pipeline, type PipelineProps, PipelineStage, type PipelineStageProps, type PipelineStageState, Placement, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, type PositionedRelationshipNode, type Primitive, Progress, type ProgressProps, PromptDialog, type PromptDialogProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RelatedLinkItem, RelatedLinks, type RelatedLinksProps, RelationshipGraph, type RelationshipGraphArrow, type RelationshipGraphCluster, type RelationshipGraphEdge, type RelationshipGraphLabels, type RelationshipGraphLegendItem, type RelationshipGraphNode, type RelationshipGraphProps, RelativeTime, type RelativeTimeFormatContext, type RelativeTimeProps, type RelativeTimeUnit, type RelativeTimeValue, ResourceGrid, type ResourceGridProps, type RgbColor, type RoutedEdge, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, type RuleAction, type RuleActionDefinition, RuleBuilder, type RuleBuilderLabels, type RuleBuilderProps, type RuleCondition, type RuleDefinition, type RuleFieldDefinition, type RuleGroup, type RuleOperatorDefinition, type RuleValidationIssue, type RuleValueEditorProps, SaveStatus, type SaveStatusLabels, type SaveStatusProps, type SaveStatusState, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, type SavedViewSection, SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingDatePart, type SchedulingEntryState, type SchedulingOverlayKind, type SearchSegment, SearchSuggest, type SearchSuggestAction, type SearchSuggestOption, type SearchSuggestProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, type StateVariant, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, Step, type StepProps, type StepState, type StepStateLabels, Steps, type StepsProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, ToggleRow, type ToggleRowProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UixLabels, UixLabelsProvider, type UixLabelsProviderProps, type UixLinkProps, type UixRenderLink, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, type UseVirtualRowsOptions, type UseVirtualRowsResult, UserChip, type UserChipProps, ViewMenu, type ViewMenuColumn, type ViewMenuColumnLabels, type ViewMenuProps, type ViewState, type VirtualWindow, type ZonedDateSpan, addCalendarDays, addCalendarMonths, appendRuleNode, applyBrandProfile, applyFilters, boundRelationshipGraph, buildMonthGrid, buildThreeWayDiff, clampMetricValue, clampWidth, classifyLayeredEdges, clusterIdFor, contrastRatio, cx, enumerateDateSpan, filterComboboxOptions, findRuleNodeDepth, flattenTree, foldForSearch, hexToRgb, highlightSegments, hsvToHex, hsvToRgb, isDateInRange, isDateUnavailable, isRuleGroup, layeredNeighbor, layoutLayeredGraph, layoutRelationshipGraph, mapRuleGroup, matchFilter, meetsContrast, mergePinned, moveRuleNode, multiSort, nextSortDir, normalizeHex, parseDateValue, parseMetricValue, parseView, relationshipNeighbors, relativeTimeValue, removeRuleNode, renderPlainLink, reorder, restoreBrandProfile, rgbToHex, rgbToHsv, ruleDepth, searchRows, searchSegments, selectAllState, selectRangeDate, serializeView, shouldVirtualize, startOfMonth, stepMetricValue, summarizeDiff, summarizeRule, toDateKey, toggleId, togglePage, toggleSort, traverseRelationshipNode, treeNav, useAnchoredPosition, useDialog, useTable, useUixLabels, useVirtualRows, validateRuleDefinition, virtualWindow, wrapEdgeLabel, zonedDateKey, zonedDateSpan };
+export { type AccessStateProps, Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, type AppliedBrandProfileSnapshot, type AsyncOperationState, AsyncOperationStatus, type AsyncOperationStatusProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type BoundedRelationshipGraph, type BrandProfile, BrandProfileEditor, type BrandProfileEditorLabels, type BrandProfileEditorProps, type BrandProfileLogo, type BrandProfileTypography, BrandProfiles, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, BuilderCanvas, type BuilderCanvasItem, type BuilderCanvasLabels, type BuilderCanvasProps, type BuilderPaletteItem, BulkBar, type BulkBarProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarDay, type CalendarWeekday, Card, CardLink, type CardLinkProps, type CardProps, CellStrong, CellSub, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, CollapsibleSection, type CollapsibleSectionProps, ColorPicker, type ColorPickerLabels, type ColorPickerProps, type ColumnFilter, Combobox, type ComboboxOption, type ComboboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, Composer, ComposerBar, type ComposerBarProps, type ComposerProps, ConfirmDialog, type ConfirmDialogProps, ContentList, ContentListItem, type ContentListItemProps, type ContentListProps, CopyButton, type CopyButtonProps, DEFAULT_BRAND_PROFILE_EDITOR_LABELS, DEFAULT_BUILDER_CANVAS_LABELS, DEFAULT_COLOR_PICKER_LABELS, DEFAULT_DATE_RANGE_PICKER_LABELS, DEFAULT_DIFF_VIEWER_LABELS, DEFAULT_MATCH_REVIEW_LABELS, DEFAULT_PAGINATION_LABELS, DEFAULT_RELATIONSHIP_GRAPH_LABELS, DEFAULT_RULE_BUILDER_LABELS, DEFAULT_SAVE_STATUS_LABELS, DEFAULT_SCHEDULING_CALENDAR_LABELS, DEFAULT_STEP_STATE_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps, type DateRangeValue, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, DetailPage, type DetailPageLinkProps, type DetailPageMetric, type DetailPageProps, type DetailPageTab, type DiffEntry, type DiffKind, type DiffResolution, type DiffSummary, DiffViewer, type DiffViewerLabels, type DiffViewerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, EventRow, type EventRowProps, ExpandToggle, type ExpandToggleProps, FeaturedRundown, FeaturedRundownItem, type FeaturedRundownItemProps, type FeaturedRundownProps, FeaturedStage, type FeaturedStageProps, Field, type FieldProps, type FilterKind, type FilterOp, type FilterOption, FilterPopover, type FilterPopoverProps, FilteredEmptyState, type FlatNode, Flow, FlowNode, type FlowNodeProps, type FlowNodeState, type FlowProps, type FlowVariant, type FoldedText, ForbiddenState, Highlighted, type HighlightedProps, type HsvColor, Inbox, InboxDetail, type InboxDetailProps, InboxItem, type InboxItemProps, InboxList, type InboxListProps, type InboxProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, type JsonPrimitive, type JsonValue, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps, Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps, Label, type LabelProps, type LayeredColumn, type LayeredEdgeClassification, type LayeredEdgeKind, type LayeredItem, type LayeredLayout, type LayeredLayoutOptions, type LayeredNavigationKey, LicensePositionBar, type LicensePositionBarProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Mark, type MarkProps, type MatchBulkResult, MatchReview, type MatchReviewAction, type MatchReviewCandidate, type MatchReviewField, type MatchReviewLabels, type MatchReviewProps, Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, Meter, type MeterProps, type MeterTone, MetricInput, type MetricInputProps, Modal, type ModalProps, type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NewsLead, type NewsLeadProps, NotFoundState, Note, type NoteProps, type NoteTone, NoticeQueue, type NoticeQueueProps, PageHeader, type PageHeaderProps, PageIntro, type PageIntroProps, Pagination, type PaginationLabels, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Pipeline, type PipelineProps, PipelineStage, type PipelineStageProps, type PipelineStageState, Placement, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, type PositionedRelationshipNode, type Primitive, Progress, type ProgressProps, PromptDialog, type PromptDialogProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RelatedLinkItem, RelatedLinks, type RelatedLinksProps, RelationshipGraph, type RelationshipGraphArrow, type RelationshipGraphCluster, type RelationshipGraphEdge, type RelationshipGraphLabels, type RelationshipGraphLegendItem, type RelationshipGraphNode, type RelationshipGraphProps, RelativeTime, type RelativeTimeFormatContext, type RelativeTimeProps, type RelativeTimeUnit, type RelativeTimeValue, ResourceGrid, type ResourceGridProps, type RgbColor, type RoutedEdge, type Row, RowAction, type RowActionProps, RowActions, type RowActionsProps, type RuleAction, type RuleActionDefinition, RuleBuilder, type RuleBuilderLabels, type RuleBuilderProps, type RuleCondition, type RuleDefinition, type RuleFieldDefinition, type RuleGroup, type RuleOperatorDefinition, type RuleValidationIssue, type RuleValueEditorProps, SaveStatus, type SaveStatusLabels, type SaveStatusProps, type SaveStatusState, type SavedViewItem, SavedViewMenu, type SavedViewMenuProps, type SavedViewSection, SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingDatePart, type SchedulingEntryState, type SchedulingOverlayKind, type SearchSegment, SearchSuggest, type SearchSuggestAction, type SearchSuggestOption, type SearchSuggestProps, SectionHead, type SectionHeadProps, type Segment, Segmented, SegmentedOption, type SegmentedOptionProps, type SegmentedProps, Select, type SelectAllState, type SelectProps, type ShellNav, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDir, type SortDirection, type SortKey, Spinner, type SpinnerProps, StarButton, type StarButtonProps, Stat, StatLine, type StatLineItem, type StatLineProps, type StatProps, type StatTrend, type StateVariant, StatusPill, type StatusPillProps, StatusRow, type StatusRowProps, Step, type StepProps, type StepState, type StepStateLabels, Steps, type StepsProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, TOAST_LEAVE_MS, Tab, TabPanel, type TabPanelProps, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastAction, type ToastApi, type ToastDismissReason, type ToastKind, type ToastOptions, type ToastPromiseMessages, type ToastProps, type ToastRecord, type ToastStore, type ToastTone, Toaster, type ToasterProps, ToggleRow, type ToggleRowProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeLike, type TreeNavAction, type TreeNodeData, type TreeNodeProps, type TreeProps, type UixLabels, UixLabelsProvider, type UixLabelsProviderProps, type UixLinkProps, type UixRenderLink, type UndoableToastOptions, type UseAnchoredPositionOptions, type UseTableOptions, type UseTableResult, type UseVirtualRowsOptions, type UseVirtualRowsResult, UserChip, type UserChipProps, ViewMenu, type ViewMenuColumn, type ViewMenuColumnLabels, type ViewMenuProps, type ViewState, type VirtualWindow, type ZonedDateSpan, addCalendarDays, addCalendarMonths, appendRuleNode, applyBrandProfile, applyFilters, boundRelationshipGraph, buildMonthGrid, buildThreeWayDiff, clampMetricValue, clampWidth, classifyLayeredEdges, clusterIdFor, contrastRatio, createToastApi, createToastStore, cx, enumerateDateSpan, filterComboboxOptions, findRuleNodeDepth, flattenTree, foldForSearch, hexToRgb, highlightSegments, hsvToHex, hsvToRgb, isDateInRange, isDateUnavailable, isRuleGroup, layeredNeighbor, layoutLayeredGraph, layoutRelationshipGraph, mapRuleGroup, matchFilter, meetsContrast, mergePinned, moveRuleNode, multiSort, nextSortDir, normalizeHex, parseDateValue, parseMetricValue, parseView, relationshipNeighbors, relativeTimeValue, removeRuleNode, renderPlainLink, reorder, restoreBrandProfile, rgbToHex, rgbToHsv, ruleDepth, searchRows, searchSegments, selectAllState, selectRangeDate, serializeView, shouldVirtualize, startOfMonth, stepMetricValue, summarizeDiff, summarizeRule, toDateKey, toast, toggleId, togglePage, toggleSort, traverseRelationshipNode, treeNav, useAnchoredPosition, useDialog, useTable, useUixLabels, useVirtualRows, validateRuleDefinition, virtualWindow, wrapEdgeLabel, zonedDateKey, zonedDateSpan };

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { NavFavouriteItem, NavFavourites, NavFavouritesLabels, NavFavouritesProp
 export { Alert, AlertProps, AlertTone } from './components/Alert.js';
 export { Spinner, SpinnerProps } from './components/Spinner.js';
 export { Toast, ToastProps, ToastTone, Toaster, ToasterProps } from './components/Toast.js';
+export { TOAST_LEAVE_MS, ToastAction, ToastApi, ToastDismissReason, ToastKind, ToastOptions, ToastPromiseMessages, ToastRecord, ToastStore, UndoableToastOptions, createToastApi, createToastStore, toast } from './toast-store.js';
 export { BulkBar, BulkBarProps, CellStrong, CellSub, ExpandToggle, ExpandToggleProps, Highlighted, HighlightedProps, Mark, MarkProps, RowAction, RowActionProps, RowActions, RowActionsProps, SortDirection, Table, TableDensity, TableProps, TableWrap, TableWrapProps, Td, TdProps, Th, ThProps, Tr, TrProps } from './components/Table.js';
 export { ColumnFilter, FilterKind, FilterOp, Primitive, Row, Segment, SelectAllState, SortDir, SortKey, ViewState, VirtualWindow, applyFilters, clampWidth, highlightSegments, matchFilter, mergePinned, multiSort, nextSortDir, parseView, reorder, searchRows, selectAllState, serializeView, shouldVirtualize, toggleId, togglePage, toggleSort, virtualWindow } from './table-engine.js';
 export { DEFAULT_PAGINATION_LABELS, Pagination, PaginationLabels, PaginationProps } from './components/Pagination.js';

package/dist/index.js

@@ -41,6 +41,7 @@ import { NavFavourites } from "./components/NavFavourites.js";
 import { Alert } from "./components/Alert.js";
 import { Spinner } from "./components/Spinner.js";
 import { Toast, Toaster } from "./components/Toast.js";
+import { toast, createToastStore, createToastApi, TOAST_LEAVE_MS } from "./toast-store.js";
 import {
   TableWrap,
   Table,
@@ -285,6 +286,7 @@ export {
   Steps,
   SubNavItem,
   Switch,
+  TOAST_LEAVE_MS,
   Tab,
   TabPanel,
   Table,
@@ -316,6 +318,8 @@ export {
   clusterIdFor,
   computePosition,
   contrastRatio,
+  createToastApi,
+  createToastStore,
   cx,
   enumerateDateSpan,
   filterComboboxOptions,
@@ -352,6 +356,7 @@ export {
   summarizeDiff,
   summarizeRule,
   toDateKey,
+  toast,
   traverseRelationshipNode,
   treeNav,
   useAnchoredPosition,

package/dist/toast-store.d.ts

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+
+/**
+ * The imperative toast queue behind `toast()` (HAR-1363; TENSOR A2/C3, MOTUS A3/A4/C-13).
+ * Plain module state, no React: mutation helpers and server-action wrappers can call
+ * `toast.success(...)` from anywhere on the client; every mounted `Toaster` subscribed to
+ * the store renders it. Timing (auto-dismiss, pause on hover/focus/hidden tab) belongs to the
+ * `Toaster`, because it depends on what the user is looking at.
+ */
+type ToastKind = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'default';
+interface ToastAction {
+    label: string;
+    /** Runs, then the toast closes (reason `"action"`). */
+    onClick: () => void;
+}
+/** Why a toast closed. */
+type ToastDismissReason = 'timeout' | 'close' | 'action' | 'programmatic';
+interface ToastOptions {
+    /** Reuse an id to replace a toast in place instead of stacking a duplicate. */
+    id?: string;
+    /** A second, quieter line. */
+    description?: ReactNode;
+    /**
+     * Milliseconds on screen while visible and not paused. `null` keeps it until dismissed.
+     * Defaults: success/info/default 5 s, warning 8 s, error and loading stay.
+     */
+    duration?: number | null;
+    action?: ToastAction;
+    /** Replaces the tone glyph. */
+    icon?: ReactNode;
+    /** Called once when the toast closes, with the reason. */
+    onDismiss?: (reason: ToastDismissReason) => void;
+}
+interface ToastRecord {
+    id: string;
+    kind: ToastKind;
+    message: ReactNode;
+    description?: ReactNode;
+    duration: number | null;
+    action?: ToastAction;
+    icon?: ReactNode;
+    /** Set while the leave animation runs; the record is removed after it. */
+    leaving?: boolean;
+    /** Bumped on every update, so a Toaster restarts the toast's timer. */
+    version: number;
+    onDismiss?: (reason: ToastDismissReason) => void;
+}
+interface ToastPromiseMessages<T> {
+    loading: ReactNode;
+    success: ReactNode | ((value: T) => ReactNode);
+    error: ReactNode | ((error: unknown) => ReactNode);
+}
+interface UndoableToastOptions extends Omit<ToastOptions, 'action' | 'onDismiss'> {
+    /** The user pressed Undo: revert the optimistic change. `onCommit` is not called. */
+    onUndo: () => void;
+    /** The toast closed without Undo (timeout, ×, or a later dismiss): make the change final. */
+    onCommit: () => void;
+    /** Default "Undo". */
+    undoLabel?: string;
+}
+interface ToastStore {
+    show: (kind: ToastKind, message: ReactNode, options?: ToastOptions) => string;
+    update: (id: string, patch: Partial<Omit<ToastRecord, 'id' | 'version'>>) => void;
+    dismiss: (id?: string, reason?: ToastDismissReason) => void;
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => readonly ToastRecord[];
+}
+/** How long the leave animation gets before the record is removed. */
+declare const TOAST_LEAVE_MS = 200;
+/** A separate queue, e.g. per test or per embedded app. Most products use the default `toast`. */
+declare function createToastStore(): ToastStore;
+interface ToastApi {
+    (message: ReactNode, options?: ToastOptions): string;
+    success: (message: ReactNode, options?: ToastOptions) => string;
+    error: (message: ReactNode, options?: ToastOptions) => string;
+    warning: (message: ReactNode, options?: ToastOptions) => string;
+    info: (message: ReactNode, options?: ToastOptions) => string;
+    loading: (message: ReactNode, options?: ToastOptions) => string;
+    /** Close one toast, or every toast without an id. */
+    dismiss: (id?: string) => void;
+    /** Change a toast in place (message, kind, description, duration, action). */
+    update: (id: string, patch: Partial<Omit<ToastRecord, 'id' | 'version'>>) => void;
+    /** A loading toast that turns into success or error when the promise settles. Returns the promise. */
+    promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages<T>, options?: ToastOptions) => Promise<T>;
+    /**
+     * An optimistic action with an Undo button (TENSOR C2 `useUndoableAction`): `onCommit` runs
+     * when the toast closes without Undo; `onUndo` runs instead when Undo is pressed.
+     */
+    undoable: (message: ReactNode, options: UndoableToastOptions) => string;
+    /** The store this API writes to; pass it to `<Toaster store>` for a non-default queue. */
+    store: ToastStore;
+}
+/** Binds the `toast()` API to a store. */
+declare function createToastApi(store: ToastStore): ToastApi;
+/** The default queue; a `<Toaster />` without a `store` prop renders it. */
+declare const toast: ToastApi;
+
+export { TOAST_LEAVE_MS, type ToastAction, type ToastApi, type ToastDismissReason, type ToastKind, type ToastOptions, type ToastPromiseMessages, type ToastRecord, type ToastStore, type UndoableToastOptions, createToastApi, createToastStore, toast };

package/dist/toast-store.js

@@ -0,0 +1,110 @@
+const DEFAULT_DURATION = {
+  success: 5e3,
+  info: 5e3,
+  default: 5e3,
+  warning: 8e3,
+  error: null,
+  loading: null
+};
+const TOAST_LEAVE_MS = 200;
+let counter = 0;
+function createToastStore() {
+  let records = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const listener of listeners) listener();
+  };
+  const set = (next) => {
+    records = next;
+    emit();
+  };
+  const show = (kind, message, options = {}) => {
+    const id = options.id ?? `uix-toast-${++counter}`;
+    const record = {
+      id,
+      kind,
+      message,
+      description: options.description,
+      duration: options.duration === void 0 ? DEFAULT_DURATION[kind] : options.duration,
+      action: options.action,
+      icon: options.icon,
+      onDismiss: options.onDismiss,
+      version: 0
+    };
+    const existing = records.find((r) => r.id === id);
+    set(existing ? records.map((r) => r.id === id ? { ...record, version: r.version + 1 } : r) : [...records, record]);
+    return id;
+  };
+  const update = (id, patch) => {
+    if (!records.some((r) => r.id === id)) return;
+    set(records.map((r) => {
+      if (r.id !== id) return r;
+      const kind = patch.kind ?? r.kind;
+      const duration = "duration" in patch ? patch.duration ?? null : patch.kind ? DEFAULT_DURATION[kind] : r.duration;
+      return { ...r, ...patch, kind, duration, leaving: false, version: r.version + 1 };
+    }));
+  };
+  const dismiss = (id, reason = "programmatic") => {
+    const closing = records.filter((r) => (id === void 0 || r.id === id) && !r.leaving);
+    if (closing.length === 0) return;
+    const ids = new Set(closing.map((r) => r.id));
+    set(records.map((r) => ids.has(r.id) ? { ...r, leaving: true } : r));
+    for (const r of closing) r.onDismiss?.(reason);
+    const remove = () => set(records.filter((r) => !(ids.has(r.id) && r.leaving)));
+    if (typeof setTimeout === "function") setTimeout(remove, TOAST_LEAVE_MS);
+    else remove();
+  };
+  return {
+    show,
+    update,
+    dismiss,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getSnapshot: () => records
+  };
+}
+function createToastApi(store) {
+  const api = ((message, options) => store.show("default", message, options));
+  api.success = (message, options) => store.show("success", message, options);
+  api.error = (message, options) => store.show("error", message, options);
+  api.warning = (message, options) => store.show("warning", message, options);
+  api.info = (message, options) => store.show("info", message, options);
+  api.loading = (message, options) => store.show("loading", message, options);
+  api.dismiss = (id) => store.dismiss(id, "programmatic");
+  api.update = (id, patch) => store.update(id, patch);
+  api.promise = (promise, messages, options) => {
+    const id = store.show("loading", messages.loading, options);
+    promise.then(
+      (value) => store.update(id, { kind: "success", message: typeof messages.success === "function" ? messages.success(value) : messages.success }),
+      (error) => store.update(id, { kind: "error", message: typeof messages.error === "function" ? messages.error(error) : messages.error })
+    );
+    return promise;
+  };
+  api.undoable = (message, { onUndo, onCommit, undoLabel = "Undo", duration = 6e3, ...options }) => {
+    let undone = false;
+    return store.show("default", message, {
+      ...options,
+      duration,
+      action: { label: undoLabel, onClick: () => {
+        undone = true;
+        onUndo();
+      } },
+      onDismiss: () => {
+        if (!undone) onCommit();
+      }
+    });
+  };
+  api.store = store;
+  return api;
+}
+const toast = createToastApi(createToastStore());
+export {
+  TOAST_LEAVE_MS,
+  createToastApi,
+  createToastStore,
+  toast
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.27.0",
+  "version": "2.28.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",