@dorsk/tsumikit 0.81.0 → 0.82.0

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;

package/dist/stores/toast.svelte.js

@@ -1,7 +1,9 @@
 // Toast manager. A tiny reactive queue; mount one <Toaster /> at the app root
 // and call toasts.show()/ok()/error()/info() from anywhere. Auto-dismisses after
-// `duration` ms (0 = sticky). The Toaster renders an aria-live region so screen
-// readers announce messages.
+// `duration` ms (0 = sticky). toasts.undo() is the optimistic alternative to a
+// confirm dialog. The Toaster renders an aria-live region so screen readers
+// announce messages.
+export const UNDO_FAIL_MESSAGE = 'The change could not be saved, so it was undone.';
 export const TOAST_MS = 4000;
 /** Toasts with an action linger longer: the action is only reachable while visible. */
 export const ACTION_TOAST_MS = 7000;
@@ -13,6 +15,8 @@ class Toasts {
     #timers = new Map();
     #due = new Map();
     #paused = new Map();
+    #commits = new Map();
+    #flushBound = false;
     #arm(id, ms) {
         this.#due.set(id, Date.now() + ms);
         this.#timers.set(id, setTimeout(() => this.dismiss(id), ms));
@@ -62,8 +66,55 @@ class Toasts {
     info(message, duration, action) {
         return this.show(message, { tone: 'info', duration, action });
     }
+    /**
+     * 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) {
+        const { message, apply, commit, revert, duration = ACTION_TOAST_MS } = opts;
+        apply();
+        let settled = false;
+        const id = this.show(message, {
+            tone: opts.tone,
+            duration,
+            action: {
+                label: opts.undoLabel ?? 'Undo',
+                run: () => {
+                    settled = true;
+                    this.#commits.delete(id);
+                    return revert();
+                },
+            },
+        });
+        this.#commits.set(id, () => {
+            if (settled)
+                return;
+            settled = true;
+            this.#commits.delete(id);
+            Promise.resolve()
+                .then(commit)
+                .catch(async () => {
+                try {
+                    await revert();
+                }
+                catch { }
+                this.error(opts.failMessage ?? UNDO_FAIL_MESSAGE);
+            });
+        });
+        if (!this.#flushBound && typeof window !== 'undefined') {
+            this.#flushBound = true;
+            window.addEventListener('pagehide', () => this.flush());
+        }
+        return id;
+    }
+    /** Commit every undo toast still waiting; the page is going away. */
+    flush() {
+        for (const run of [...this.#commits.values()])
+            run();
+    }
     dismiss(id) {
         this.#disarm(id);
+        this.#commits.get(id)?.();
         const t = this.items.find((x) => x.id === id);
         if (!t || t.leaving)
             return;
@@ -73,6 +124,7 @@ class Toasts {
     /** Drop a toast at once, skipping the exit. */
     remove(id) {
         this.#disarm(id);
+        this.#commits.get(id)?.();
         this.items = this.items.filter((t) => t.id !== id);
     }
     /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */

package/dist/styles/app.css

@@ -1,9 +1,10 @@
 /*
- * All-in-one stylesheet: tokens + built-in themes, reset + element defaults,
+ * All-in-one stylesheet: Inter @font-face, tokens + built-in themes, reset + element defaults,
  * generic utilities and the syntax-highlight token mapping (global so it
  * reaches {@html} output). Import the parts individually to compose your own
  * stack — see README "Theming".
  */
+@import './font.css';
 @import './variables.css';
 @import './reset.css';
 @import './utilities.css';

package/dist/styles/font.css

@@ -0,0 +1,19 @@
+/*
+ * Inter, self-hosted (variable, latin subset; OFL-1.1, see fonts/LICENSE-Inter.txt).
+ * --font-sans in tokens.css lists "Inter" first, so importing this file turns it
+ * on for the whole kit. Opt out by importing tokens.css/themes.css without it,
+ * or by overriding --font-sans.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter.woff2") format("woff2");
+}
+
+/* cv11: single-storey a · ss01: open digits, so 0/O and 1/l/I stay apart. */
+:where(body) {
+  font-feature-settings: "cv11", "ss01";
+}