@dorsk/tsumikit 0.81.0 → 0.82.1

package/dist/components/molecules/Tabs.svelte

@@ -11,6 +11,8 @@
 		title?: string;
 		/** Per-tab override of the strip's `closable` (pin one tab open). */
 		closable?: boolean;
+		/** Render this tab as a real link; overrides the strip's `href`. */
+		href?: string;
 		/**
 		 * Extra attributes for this tab's button — `data-*`, `title`…
 		 * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
@@ -37,11 +39,13 @@
 	import Icon from '../atoms/Icon.svelte';
 	import IconButton from './IconButton.svelte';
 	import { playSound } from '../../sound';
+	import { isModifiedClick } from '../../url-state.svelte';
 
 	let {
 		tabs,
 		value = $bindable(),
 		label = 'Tabs',
+		href,
 		panel,
 		closable = false,
 		onclose,
@@ -60,6 +64,8 @@
 		tabs: TabItem[];
 		value?: string;
 		label?: string;
+		/** Tabs become real links (`<a aria-current>`): middle-click opens the tab's URL in a new tab. */
+		href?: (id: string) => string;
 		/** Content for the active tab. Omit it for a strip-only tablist. */
 		panel?: Snippet<[string]>;
 		/** Every tab gets a close control; Delete and middle-click close too. */
@@ -101,6 +107,10 @@
 	function canClose(t: TabItem): boolean {
 		return t.closable ?? closable;
 	}
+	function linkTo(t: TabItem): string | undefined {
+		if (t.disabled || canClose(t)) return undefined;
+		return t.href ?? href?.(t.id);
+	}
 
 	// One indicator slides under the selected tab on translate/scale (never
 	// width/left). It snaps on mount and on reflow, and only animates on a
@@ -288,6 +298,27 @@
 							}}
 						/>
 					</div>
+				{:else if linkTo(t) !== undefined}
+					<a
+						{...t.attrs as HTMLAttributes<HTMLAnchorElement>}
+						href={linkTo(t)}
+						role="tab"
+						id="{baseId}-tab-{t.id}"
+						title={t.title ?? t.attrs?.title}
+						aria-selected={value === t.id}
+						aria-current={value === t.id ? 'page' : undefined}
+						aria-controls={panelId}
+						tabindex={stop?.id === t.id ? 0 : -1}
+						class="tab"
+						class:selected={value === t.id}
+						onclick={(e) => {
+							if (isModifiedClick(e)) return;
+							inkFrom(e);
+							select(t.id);
+						}}
+					>
+						{@render body(t)}
+					</a>
 				{:else}
 					<button
 						type="button"
@@ -362,6 +393,7 @@
 		border: none;
 		background: none;
 		color: var(--text-muted);
+		text-decoration: none;
 		font-size: var(--control-fs-md);
 		font-weight: var(--fw-medium);
 		--icon-size: var(--control-icon-md);

package/dist/components/molecules/Tabs.svelte.d.ts

@@ -10,6 +10,8 @@ export interface TabItem {
     title?: string;
     /** Per-tab override of the strip's `closable` (pin one tab open). */
     closable?: boolean;
+    /** Render this tab as a real link; overrides the strip's `href`. */
+    href?: string;
     /**
      * Extra attributes for this tab's button — `data-*`, `title`…
      * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
@@ -23,6 +25,8 @@ type Own = {
     tabs: TabItem[];
     value?: string;
     label?: string;
+    /** Tabs become real links (`<a aria-current>`): middle-click opens the tab's URL in a new tab. */
+    href?: (id: string) => string;
     /** Content for the active tab. Omit it for a strip-only tablist. */
     panel?: Snippet<[string]>;
     /** Every tab gets a close control; Delete and middle-click close too. */

package/dist/components/molecules/ThemePicker.svelte

@@ -181,7 +181,7 @@
 		--c-bg: #0f1115;
 		--c-surface: #21262f;
 		--c-text: #e6e9ef;
-		--c-accent: #5ad6a0;
+		--c-accent: #4cc3f0;
 	}
 	.q {
 		display: block;
@@ -212,7 +212,7 @@
 		font-size: var(--fs-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	.grid {
 		display: grid;
@@ -297,7 +297,7 @@
 	}
 	.auto-help {
 		font-size: var(--fs-xs);
-		color: var(--text-faint);
+		color: var(--text-muted);
 		white-space: normal;
 	}
 	.auto-pair {

package/dist/components/molecules/VolumeSlider.svelte.d.ts

@@ -27,6 +27,6 @@ type Own = {
     style?: string;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
-declare const VolumeSlider: import("svelte").Component<$$ComponentProps, {}, "muted" | "value">;
+declare const VolumeSlider: import("svelte").Component<$$ComponentProps, {}, "value" | "muted">;
 type VolumeSlider = ReturnType<typeof VolumeSlider>;
 export default VolumeSlider;

package/dist/components/organisms/DataTable.svelte

@@ -631,7 +631,7 @@
 	[data-stacked] td[data-role='meta']::before {
 		content: attr(data-label) ' ';
 		font-family: var(--font-sans);
-		color: var(--text-faint);
+		color: var(--text-muted);
 	}
 	[data-stacked] td[data-role='detail'][data-stack-label='false'] {
 		flex: 0 1 auto;
@@ -675,7 +675,7 @@
 	}
 	.dt-empty {
 		text-align: center;
-		color: var(--text-faint);
+		color: var(--text-muted);
 		padding: var(--sp-8);
 	}
 	.dt-more {

package/dist/dev-audit.d.ts

@@ -0,0 +1,19 @@
+export type DesignIssueKind = 'multiple-primary' | 'unnamed-control' | 'small-target' | 'text-over-image';
+export type DesignIssue = {
+    kind: DesignIssueKind;
+    el: Element;
+    message: string;
+};
+export type DesignAuditOptions = {
+    root?: ParentNode;
+    /** Debounce window after a DOM mutation, in ms. */
+    delay?: number;
+    /** Minimum hit box, in px; defaults to the `--touch-target` token (44px). */
+    touchTarget?: number;
+    /** Treat the pointer as coarse regardless of the media query. */
+    coarse?: boolean;
+};
+export declare function auditDesign(options?: DesignAuditOptions): DesignIssue[];
+export declare function reportDesignIssues(issues: DesignIssue[]): DesignIssue[];
+/** Idempotent: a second call while running returns the same stop function. */
+export declare function startDesignAudit(options?: DesignAuditOptions): () => void;

package/dist/dev-audit.js

@@ -0,0 +1,259 @@
+const PRIMARY = '[data-tsu="Button"].btn-primary';
+const CONTROL = '[data-tsu="Button"], [data-tsu="IconButton"]';
+const LANDMARK = 'dialog, [role="dialog"], [role="alertdialog"], main, [role="main"]';
+const INTERACTIVE = 'a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [role="switch"], [role="tab"], [role="menuitem"], [role="option"], [role="slider"]';
+const SCRIM = '[data-tsu="Scrim"], .scrim, [data-scrim]';
+function view(el) {
+    return el.ownerDocument.defaultView ?? window;
+}
+function isVisible(el) {
+    if (el.closest('[hidden], [inert]'))
+        return false;
+    const win = view(el);
+    for (let node = el; node; node = node.parentElement) {
+        const style = win.getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return false;
+    }
+    return true;
+}
+function isDisabled(el) {
+    return el.matches(':disabled, [aria-disabled="true"]');
+}
+function ownText(el) {
+    let out = '';
+    for (const node of el.childNodes) {
+        if (node.nodeType === 3)
+            out += node.textContent ?? '';
+        else if (node.nodeType === 1 &&
+            !node.matches('[aria-hidden="true"], script, style'))
+            out += ownText(node);
+    }
+    return out;
+}
+function accessibleName(el) {
+    const label = el.getAttribute('aria-label')?.trim();
+    if (label)
+        return label;
+    const by = el.getAttribute('aria-labelledby');
+    if (by) {
+        const text = by
+            .split(/\s+/)
+            .map((id) => el.ownerDocument.getElementById(id)?.textContent?.trim() ?? '')
+            .join(' ')
+            .trim();
+        if (text)
+            return text;
+    }
+    const text = ownText(el).trim();
+    if (text)
+        return text;
+    for (const child of el.querySelectorAll('img[alt], svg title, [aria-label]')) {
+        const alt = child.getAttribute('alt') ?? child.getAttribute('aria-label') ?? child.textContent;
+        if (alt?.trim())
+            return alt.trim();
+    }
+    return el.getAttribute('title')?.trim() ?? '';
+}
+function describe(el) {
+    const tsu = el.getAttribute('data-tsu');
+    return tsu ? `<${tsu}>` : `<${el.tagName.toLowerCase()}>`;
+}
+function landmarkOf(el) {
+    return el.closest(LANDMARK) ?? el.ownerDocument.body;
+}
+function landmarkName(el) {
+    return el === el.ownerDocument.body
+        ? 'page'
+        : el.matches('main, [role="main"]')
+            ? 'main'
+            : 'dialog';
+}
+function readToken(root, name, fallback) {
+    const doc = root.ownerDocument ?? root;
+    const raw = doc.defaultView?.getComputedStyle(doc.documentElement).getPropertyValue(name);
+    const n = Number.parseFloat(raw ?? '');
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+/* Kit controls are sized to --touch-target-compact by design (see tokens.css). */
+function isKitControl(el) {
+    return el.matches('[data-tsu], .btn');
+}
+/** Kit controls stretch their hit box with an absolutely positioned ::before/::after slab. */
+function hasHitSlab(el) {
+    const win = view(el);
+    for (const pseudo of ['::before', '::after']) {
+        const s = win.getComputedStyle(el, pseudo);
+        if (s.position === 'absolute' && s.content && s.content !== 'none' && s.content !== 'normal')
+            return true;
+    }
+    return false;
+}
+function hitBox(el) {
+    const own = el.getBoundingClientRect();
+    const label = el.closest('label');
+    if (!label || label === el)
+        return own;
+    const lr = label.getBoundingClientRect();
+    return lr.width * lr.height > own.width * own.height ? lr : own;
+}
+function hasOpaqueBackground(el) {
+    const s = view(el).getComputedStyle(el);
+    if (s.backgroundImage && s.backgroundImage !== 'none')
+        return true;
+    const bg = s.backgroundColor;
+    return (!!bg && bg !== 'transparent' && !/^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)$/.test(bg));
+}
+function hasOwnText(el) {
+    for (const node of el.childNodes)
+        if (node.nodeType === 3 && node.textContent?.trim())
+            return true;
+    return false;
+}
+function imageUnder(text) {
+    const artwork = text.closest('[data-tsu="Artwork"]');
+    if (artwork)
+        return text.matches('[data-tsu="Artwork"] > .initials') ? null : artwork;
+    const win = view(text);
+    let positioned = false;
+    for (let node = text; node; node = node.parentElement) {
+        const pos = win.getComputedStyle(node).position;
+        if (pos === 'absolute' || pos === 'fixed')
+            positioned = true;
+        if (!positioned)
+            continue;
+        if (pos !== 'static' && node !== text) {
+            const img = node.querySelector('img, picture, video, [data-tsu="Artwork"]');
+            if (img && !img.contains(text))
+                return node;
+        }
+    }
+    return null;
+}
+function scrimmed(text, container) {
+    if (container.querySelector(SCRIM))
+        return true;
+    for (let node = text; node && node !== container; node = node.parentElement)
+        if (hasOpaqueBackground(node))
+            return true;
+    return false;
+}
+function coarsePointer(root) {
+    const win = (root.ownerDocument ?? root).defaultView;
+    return !!win?.matchMedia?.('(pointer: coarse)').matches;
+}
+export function auditDesign(options = {}) {
+    if (typeof document === 'undefined' && !options.root)
+        return [];
+    const root = options.root ?? document;
+    const issues = [];
+    const byLandmark = new Map();
+    for (const btn of root.querySelectorAll(PRIMARY)) {
+        if (!isVisible(btn))
+            continue;
+        const lm = landmarkOf(btn);
+        const list = byLandmark.get(lm) ?? [];
+        list.push(btn);
+        byLandmark.set(lm, list);
+    }
+    for (const [lm, list] of byLandmark) {
+        if (list.length < 2)
+            continue;
+        for (const el of list.slice(1))
+            issues.push({
+                kind: 'multiple-primary',
+                el,
+                message: `${list.length} primary Buttons visible in the same ${landmarkName(lm)}; keep one primary per view`,
+            });
+    }
+    for (const el of root.querySelectorAll(CONTROL)) {
+        if (accessibleName(el))
+            continue;
+        issues.push({ kind: 'unnamed-control', el, message: `${describe(el)} has no accessible name` });
+    }
+    const coarse = options.coarse ?? coarsePointer(root);
+    if (coarse) {
+        const target = options.touchTarget ?? readToken(root, '--touch-target', 44);
+        const compact = Math.min(target, readToken(root, '--touch-target-compact', 40));
+        for (const el of root.querySelectorAll(INTERACTIVE)) {
+            if (el.matches('.hit-compact, [tabindex="-1"]') || isDisabled(el) || !isVisible(el))
+                continue;
+            const box = hitBox(el);
+            if (box.width === 0 || box.height === 0)
+                continue;
+            const min = isKitControl(el) ? compact : target;
+            if (box.width >= min && box.height >= min)
+                continue;
+            if (hasHitSlab(el))
+                continue;
+            issues.push({
+                kind: 'small-target',
+                el,
+                message: `${describe(el)} hit box is ${Math.round(box.width)}x${Math.round(box.height)}px, under the ${min}px touch target`,
+            });
+        }
+    }
+    for (const el of root.querySelectorAll('*')) {
+        if (!hasOwnText(el) || el.closest('[aria-hidden="true"]'))
+            continue;
+        const container = imageUnder(el);
+        if (!container || scrimmed(el, container))
+            continue;
+        issues.push({
+            kind: 'text-over-image',
+            el,
+            message: `${describe(el)} text sits on an image without a Scrim`,
+        });
+    }
+    return issues;
+}
+const reported = new WeakMap();
+export function reportDesignIssues(issues) {
+    const fresh = [];
+    for (const issue of issues) {
+        const seen = reported.get(issue.el) ?? new Set();
+        if (seen.has(issue.kind))
+            continue;
+        seen.add(issue.kind);
+        reported.set(issue.el, seen);
+        fresh.push(issue);
+        console.warn(`[tsumikit] ${issue.message}`, issue.el);
+    }
+    return fresh;
+}
+let active;
+/** Idempotent: a second call while running returns the same stop function. */
+export function startDesignAudit(options = {}) {
+    if (!import.meta.env.DEV || typeof document === 'undefined')
+        return () => { };
+    if (active)
+        return active;
+    const root = options.root ?? document;
+    const win = (root.ownerDocument ?? root).defaultView ?? window;
+    const delay = options.delay ?? 250;
+    let timer;
+    const run = () => {
+        timer = undefined;
+        reportDesignIssues(auditDesign(options));
+    };
+    const schedule = () => {
+        if (timer !== undefined)
+            win.clearTimeout(timer);
+        timer = win.setTimeout(run, delay);
+    };
+    const observer = new win.MutationObserver(schedule);
+    observer.observe(root === document ? document.documentElement : root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        characterData: true,
+    });
+    schedule();
+    active = () => {
+        observer.disconnect();
+        if (timer !== undefined)
+            win.clearTimeout(timer);
+        active = undefined;
+    };
+    return active;
+}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export type { AnchorAttributes } from './anchor';
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
 export { avatarHue, avatarInitial } from './avatar';
+export { type Breakpoint, breakpoints, breakpointsPx, maxWidth, minWidth } from './breakpoints';
 export { copyToClipboard } from './clipboard';
 export { default as Artwork } from './components/atoms/Artwork.svelte';
 export { default as Avatar } from './components/atoms/Avatar.svelte';
@@ -35,6 +36,7 @@ export { default as Thinking } from './components/atoms/Thinking.svelte';
 export { default as TimeDisplay } from './components/atoms/TimeDisplay.svelte';
 export { default as AppShell } from './components/layouts/AppShell.svelte';
 export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
+export { default as Backdrop } from './components/layouts/Backdrop.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
 export { default as MasterDetail } from './components/layouts/MasterDetail.svelte';
@@ -116,7 +118,9 @@ export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './e
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export { DEFAULT_FX, FX, FX_FAMILIES, type FxFamily, type FxSettings, type FxVariant, fxAttr, fxDiff, fxPrepaint, isFxVariant, parseFx, } from './fx';
 export { escapeHtml, type Highlight, type RenderMarkdownOptions, renderMarkdown, stripAnsi, } from './markdown';
+export { type Media, media, mq } from './media.svelte';
 export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time';
+export { PENDING_DELAY_MS, PENDING_MIN_MS, type Pending, type PendingOptions, pending, } from './pending.svelte';
 export { trackPointer } from './pointer';
 export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, singleQuery, suggest, suggestSingle, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
@@ -127,9 +131,10 @@ export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.sve
 export { FX_PREPAINT, fx } from './stores/fx.svelte';
 export { sound } from './stores/sound.svelte';
 export { type Mode, THEME_PREPAINT, THEMES, theme } from './stores/theme.svelte';
-export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
+export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, UNDO_FAIL_MESSAGE, type UndoOptions, } from './stores/toast.svelte';
 export { AUTO_THEME, chooseTheme, DEFAULT_LOOK, DEFAULT_THEME_PREFERENCE, LOOKS, type LookId, type LookStatus, parseLook, pickerValue, preferenceFrom, resolveTheme, type SlotOf, type ThemeChoice, type ThemePreference, type ThemeSlot, themePrepaint, } from './theme-mode';
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { canonicalTone, type Tone } from './tone';
 export { pathCandidates, type TruncateMode, type TruncateOptions, truncate } from './truncate';
+export { isModifiedClick, type UrlState, type UrlStateOptions, urlState } from './url-state.svelte';
 export { normalizeWorkingDir, type WorkingDirOptions, workingDirCandidates } from './working-dir';

package/dist/index.js

@@ -7,6 +7,7 @@
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
 export { avatarHue, avatarInitial } from './avatar';
+export { breakpoints, breakpointsPx, maxWidth, minWidth } from './breakpoints';
 export { copyToClipboard } from './clipboard';
 export { default as Artwork } from './components/atoms/Artwork.svelte';
 export { default as Avatar } from './components/atoms/Avatar.svelte';
@@ -39,6 +40,7 @@ export { default as TimeDisplay } from './components/atoms/TimeDisplay.svelte';
 // ---- layouts ----
 export { default as AppShell } from './components/layouts/AppShell.svelte';
 export { default as AutoGrid } from './components/layouts/AutoGrid.svelte';
+export { default as Backdrop } from './components/layouts/Backdrop.svelte';
 export { default as Cluster } from './components/layouts/Cluster.svelte';
 export { default as Container } from './components/layouts/Container.svelte';
 export { default as MasterDetail } from './components/layouts/MasterDetail.svelte';
@@ -124,7 +126,9 @@ export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export { DEFAULT_FX, FX, FX_FAMILIES, fxAttr, fxDiff, fxPrepaint, isFxVariant, parseFx, } from './fx';
 export { escapeHtml, renderMarkdown, stripAnsi, } from './markdown';
+export { media, mq } from './media.svelte';
 export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time';
+export { PENDING_DELAY_MS, PENDING_MIN_MS, pending, } from './pending.svelte';
 export { trackPointer } from './pointer';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
@@ -136,9 +140,10 @@ export { FX_PREPAINT, fx } from './stores/fx.svelte';
 // ---- stores / actions ----
 export { sound } from './stores/sound.svelte';
 export { THEME_PREPAINT, THEMES, theme } from './stores/theme.svelte';
-export { toasts, } from './stores/toast.svelte';
+export { toasts, UNDO_FAIL_MESSAGE, } from './stores/toast.svelte';
 export { AUTO_THEME, chooseTheme, DEFAULT_LOOK, DEFAULT_THEME_PREFERENCE, LOOKS, parseLook, pickerValue, preferenceFrom, resolveTheme, themePrepaint, } from './theme-mode';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { canonicalTone } from './tone';
 export { pathCandidates, truncate } from './truncate';
+export { isModifiedClick, urlState } from './url-state.svelte';
 export { normalizeWorkingDir, workingDirCandidates } from './working-dir';

package/dist/media.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Breakpoint } from './breakpoints';
+export interface Media {
+    /** Reactive inside effects and templates; `false` during SSR. */
+    readonly matches: boolean;
+}
+export declare function media(query: string): Media;
+/** `mq.md` is true when the viewport is at least `breakpoints.md` wide. */
+export declare const mq: Readonly<Record<Breakpoint, boolean>>;

package/dist/media.svelte.js

@@ -0,0 +1,26 @@
+import { MediaQuery } from 'svelte/reactivity';
+import { breakpoints, minWidth } from './breakpoints';
+const cache = new Map();
+export function media(query) {
+    let m = cache.get(query);
+    if (!m) {
+        if (typeof window === 'undefined') {
+            m = { matches: false };
+        }
+        else {
+            const mq = new MediaQuery(query);
+            m = {
+                get matches() {
+                    return mq.current;
+                },
+            };
+        }
+        cache.set(query, m);
+    }
+    return m;
+}
+/** `mq.md` is true when the viewport is at least `breakpoints.md` wide. */
+export const mq = Object.defineProperties({}, Object.fromEntries(Object.keys(breakpoints).map((bp) => [
+    bp,
+    { enumerable: true, get: () => media(minWidth(bp)).matches },
+])));

package/dist/pending.svelte.d.ts

@@ -0,0 +1,16 @@
+/** Default show delay (ms): work that finishes sooner never shows an indicator. */
+export declare const PENDING_DELAY_MS = 200;
+/** Default minimum visible time (ms) once an indicator has appeared. */
+export declare const PENDING_MIN_MS = 500;
+export interface PendingOptions {
+    /** Wait this long before showing; 0 shows at once. */
+    delay?: number;
+    /** Once shown, stay visible at least this long; 0 hides at once. */
+    min?: number;
+}
+export interface Pending {
+    /** The calmed indicator state: delayed in, held out. */
+    readonly visible: boolean;
+}
+/** Call during component init; keep `aria-busy` on the real flag, only the visual is calmed. */
+export declare function pending(busy: () => boolean, opts?: PendingOptions | (() => PendingOptions)): Pending;

package/dist/pending.svelte.js

@@ -0,0 +1,75 @@
+import { untrack } from 'svelte';
+/** Default show delay (ms): work that finishes sooner never shows an indicator. */
+export const PENDING_DELAY_MS = 200;
+/** Default minimum visible time (ms) once an indicator has appeared. */
+export const PENDING_MIN_MS = 500;
+/** Call during component init; keep `aria-busy` on the real flag, only the visual is calmed. */
+export function pending(busy, opts = {}) {
+    if (typeof document === 'undefined')
+        return { visible: false };
+    const options = () => (typeof opts === 'function' ? opts() : opts);
+    const delay = () => Math.max(0, options().delay ?? PENDING_DELAY_MS);
+    const min = () => Math.max(0, options().min ?? PENDING_MIN_MS);
+    let visible = $state(false);
+    let showTimer;
+    let minTimer;
+    let holding = false;
+    let hideWhenReleased = false;
+    const clearShow = () => {
+        if (showTimer !== undefined)
+            clearTimeout(showTimer);
+        showTimer = undefined;
+    };
+    const show = () => {
+        showTimer = undefined;
+        visible = true;
+        const hold = min();
+        if (hold > 0) {
+            holding = true;
+            minTimer = setTimeout(() => {
+                holding = false;
+                minTimer = undefined;
+                if (hideWhenReleased) {
+                    hideWhenReleased = false;
+                    visible = false;
+                }
+            }, hold);
+        }
+    };
+    const start = () => {
+        if (visible) {
+            hideWhenReleased = false;
+            return;
+        }
+        if (showTimer !== undefined)
+            return;
+        const wait = delay();
+        if (wait === 0)
+            show();
+        else
+            showTimer = setTimeout(show, wait);
+    };
+    const stop = () => {
+        clearShow();
+        if (!visible)
+            return;
+        if (holding)
+            hideWhenReleased = true;
+        else
+            visible = false;
+    };
+    $effect(() => {
+        const on = busy();
+        untrack(() => (on ? start() : stop()));
+    });
+    $effect(() => () => {
+        clearShow();
+        if (minTimer !== undefined)
+            clearTimeout(minTimer);
+    });
+    return {
+        get visible() {
+            return visible;
+        },
+    };
+}

package/dist/stores/toast.svelte.d.ts

@@ -21,6 +21,21 @@ export interface ToastOptions {
     duration?: number;
     action?: ToastAction;
 }
+export interface UndoOptions {
+    message: string;
+    /** Runs at once: the optimistic UI change. */
+    apply: () => void;
+    /** Runs when the toast times out or is dismissed; a rejection reverts and reports. */
+    commit: () => void | Promise<void>;
+    /** Runs on Undo, and after a failed commit. */
+    revert: () => void | Promise<void>;
+    duration?: number;
+    tone?: ToastToneInput;
+    undoLabel?: string;
+    /** Error toast shown when commit() rejects. */
+    failMessage?: string;
+}
+export declare const UNDO_FAIL_MESSAGE = "The change could not be saved, so it was undone.";
 export declare const TOAST_MS = 4000;
 /** Toasts with an action linger longer: the action is only reachable while visible. */
 export declare const ACTION_TOAST_MS = 7000;
@@ -36,6 +51,13 @@ declare class Toasts {
     ok(message: string, duration?: number, action?: ToastAction): number;
     error(message: string, duration?: number, action?: ToastAction): number;
     info(message: string, duration?: number, action?: ToastAction): number;
+    /**
+     * Optimistic change with an Undo toast instead of a confirm dialog: apply()
+     * now, commit() when the toast goes away, revert() on Undo or a failed commit.
+     */
+    undo(opts: UndoOptions): number;
+    /** Commit every undo toast still waiting; the page is going away. */
+    flush(): void;
     dismiss(id: number): void;
     /** Drop a toast at once, skipping the exit. */
     remove(id: number): void;