@dorsk/tsumikit 0.74.0 → 0.75.0

package/dist/components/molecules/Toggle.svelte

@@ -10,6 +10,7 @@
 	// <button> + scoped styles rather than specializing the Button atom.
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { playSound } from '../../sound';
 
 	let {
 		pressed = false,
@@ -20,6 +21,8 @@
 		shrink = true,
 		type = 'button',
 		disabled = false,
+		sound = true,
+		onclick,
 		class: klass = '',
 		children,
 		...rest
@@ -32,8 +35,17 @@
 		grow?: boolean;
 		// `shrink={false}` keeps the chip at its intrinsic width (flex: none).
 		shrink?: boolean;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		children?: Snippet;
 	} = $props();
+
+	function click(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		const next = !pressed;
+		onclick?.(e);
+		if (e.defaultPrevented) return;
+		playSound(next ? 'toggle-on' : 'toggle-off', sound);
+	}
 </script>
 
 <button
@@ -41,6 +53,7 @@
 	{...rest}
 	{type}
 	{disabled}
+	onclick={click}
 	class="toggle {klass}"
 	class:pill
 	class:struck
@@ -60,34 +73,38 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: 4px;
+		gap: var(--sp-1);
 		box-sizing: border-box;
-		height: var(--toggle-size, var(--box-xs));
-		padding: 0 var(--sp-2);
+		height: var(--toggle-size, var(--control-sm));
+		padding: 0 var(--control-px-sm);
 		border-radius: var(--r-sm);
-		font-size: var(--fs-xs);
+		font-size: var(--control-fs-sm);
 		font-weight: var(--fw-medium);
-		line-height: 1;
+		line-height: var(--lh-none);
+		--icon-size: var(--control-icon-sm);
 		background: var(--bg-elevated-2);
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 		white-space: nowrap;
 		user-select: none;
 		transition:
-			background 0.12s var(--ease),
-			border-color 0.12s var(--ease),
-			color 0.12s var(--ease);
+			background var(--dur-fast) var(--ease),
+			border-color var(--dur-fast) var(--ease),
+			color var(--dur-fast) var(--ease),
+			scale var(--dur-fast) var(--ease-out);
 	}
 	.toggle:disabled {
-		opacity: 0.45;
+		opacity: var(--disabled-opacity);
 		cursor: not-allowed;
 	}
 	.toggle.pill {
 		border-radius: var(--r-pill);
 	}
 	.toggle.md {
-		height: var(--toggle-size, var(--control-height-compact));
-		font-size: var(--fs-sm);
+		height: var(--toggle-size, var(--control-md));
+		padding: 0 var(--control-px-md);
+		font-size: var(--control-fs-md);
+		--icon-size: var(--control-icon-md);
 	}
 	.toggle.grow {
 		flex: 1 1 0;
@@ -96,8 +113,14 @@
 	.toggle.no-shrink {
 		flex: none;
 	}
-	.toggle:hover:not(:disabled) {
-		border-color: var(--border-strong);
+	@media (hover: hover) and (pointer: fine) {
+		.toggle:hover:not(:disabled) {
+			border-color: var(--border-strong);
+		}
+	}
+	.toggle:active:not(:disabled) {
+		scale: var(--press-scale);
+		transition-duration: var(--dur-press);
 	}
 	.toggle.on {
 		--tc: var(--toggle-accent, var(--accent));

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

@@ -8,6 +8,8 @@ type $$ComponentProps = HTMLButtonAttributes & {
     size?: ControlSize;
     grow?: boolean;
     shrink?: boolean;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     children?: Snippet;
 };
 declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/Tooltip.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	let lastClosed = -Infinity;
+</script>
+
 <script lang="ts">
 	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
 	// focus of the trigger; hides on blur / mouseleave / Escape (anywhere). The trigger is
@@ -15,7 +19,7 @@
 	// by `closeDelay` and cancelled when the pointer (or focus) enters the panel,
 	// so users can move in to select/copy text or click a button. Note the
 	// role="tooltip" caveat: `aria-describedby` flattens the panel to its text.
-	import type { Snippet } from 'svelte';
+	import { flushSync, type Snippet } from 'svelte';
 	import { place } from '../../floating';
 
 	let {
@@ -53,6 +57,8 @@
 		style?: string;
 	} = $props();
 
+	// A tooltip closed moments ago makes the next one open at once, unanimated.
+	const WARM_MS = 300;
 	const id = `tip-${Math.random().toString(36).slice(2, 8)}`;
 	let wrapEl = $state<HTMLElement | null>(null);
 	let tipEl = $state<HTMLElement | null>(null);
@@ -68,23 +74,32 @@
 		if (e.key === 'Escape') hideNow();
 	}
 
+	let instant = $state(false);
 	function show() {
 		clearTimeout(hideTimer); // pointer came back within the grace period
 		clearTimeout(showTimer);
-		showTimer = setTimeout(() => {
+		const warm = performance.now() - lastClosed < WARM_MS;
+		const reveal = () => {
 			if (!tipEl || tipEl.matches(':popover-open')) return; // re-entry guard
+			instant = warm;
+			flushSync();
 			tipEl.showPopover(); // top layer — displayed before we measure it
 			reposition();
 			addEventListener('scroll', reposition, true);
 			addEventListener('resize', reposition);
 			document.addEventListener('keydown', onEscape);
-		}, delay);
+		};
+		if (warm) reveal();
+		else showTimer = setTimeout(reveal, delay);
 	}
 	function hideNow() {
 		clearTimeout(showTimer);
 		clearTimeout(hideTimer);
 		try {
-			if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+			if (tipEl?.matches(':popover-open')) {
+				tipEl.hidePopover();
+				lastClosed = performance.now();
+			}
 		} catch {}
 		removeEventListener('scroll', reposition, true);
 		removeEventListener('resize', reposition);
@@ -164,6 +179,7 @@
 	popover="manual"
 	class="tip"
 	class:rich={!!content}
+	data-instant={instant ? '' : undefined}
 	style:width
 	style:max-width={maxWidth}
 	use:panel
@@ -194,9 +210,16 @@
 		border-radius: var(--r-sm);
 		box-shadow: var(--shadow-md);
 		font-size: var(--fs-xs);
-		line-height: 1.4;
+		line-height: var(--lh-snug);
 		white-space: normal;
 		pointer-events: none; /* non-interactive: never steals hover/clicks */
+		transform-origin: var(--tsu-origin, bottom center);
+		opacity: 0;
+		scale: var(--tip-scale);
+		transition:
+			opacity var(--dur-exit-fast) var(--ease-out),
+			display var(--dur-exit-fast) allow-discrete,
+			overlay var(--dur-exit-fast) allow-discrete;
 	}
 	/* Rich panel: interactive + selectable so the user can move the pointer in
 	   to copy an id or click a button (the close grace period allows the trip). */
@@ -207,14 +230,22 @@
 		padding: var(--sp-2);
 		border-radius: var(--r-md);
 	}
-	/* Fade/scale in when shown (skipped under reduced-motion via the global rule). */
 	.tip:popover-open {
-		animation: tip-in 0.12s var(--ease);
+		opacity: 1;
+		scale: 1;
+		transition:
+			opacity var(--dur-fast) var(--ease-out),
+			scale var(--dur-fast) var(--ease-out),
+			display var(--dur-fast) allow-discrete,
+			overlay var(--dur-fast) allow-discrete;
 	}
-	@keyframes tip-in {
-		from {
+	@starting-style {
+		.tip:popover-open {
 			opacity: 0;
-			transform: scale(0.96);
+			scale: var(--tip-scale);
 		}
 	}
+	.tip[data-instant] {
+		transition-duration: var(--dur-instant);
+	}
 </style>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     /** Plain-text bubble. Ignored when `content` is provided. */
     text?: string;

package/dist/components/molecules/VolumeSlider.svelte

@@ -8,6 +8,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { IconName } from '../atoms/Icon.svelte';
 	import IconButton from './IconButton.svelte';
+	import { playSound } from '../../sound';
 
 	type Own = {
 		/** Level 0–1. */
@@ -22,6 +23,8 @@
 		label?: string;
 		muteLabel?: string;
 		unmuteLabel?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
 		oninput?: (value: number) => void;
 		onchange?: (value: number) => void;
 		onmutechange?: (muted: boolean) => void;
@@ -40,6 +43,7 @@
 		label = 'Volume',
 		muteLabel = 'Mute',
 		unmuteLabel = 'Unmute',
+		sound = true,
 		oninput,
 		onchange,
 		onmutechange,
@@ -59,6 +63,7 @@
 		muted ? 'volume-mute' : level === 0 ? 'volume' : level < 0.5 ? 'volume-low' : 'volume-high'
 	);
 	const valueText = $derived(muted ? 'Muted' : `${pct}%`);
+	const discrete = $derived(1 / step <= 20);
 
 	function setMuted(m: boolean) {
 		if (m === muted) return;
@@ -75,7 +80,8 @@
 	}
 
 	function commit(v: number) {
-		onchange?.(apply(v));
+		const next = apply(v);
+		onchange?.(next);
 	}
 
 	function fracAt(el: HTMLElement, e: PointerEvent) {
@@ -117,6 +123,7 @@
 
 	function onpointermove(e: PointerEvent) {
 		if (pointerId !== e.pointerId) return;
+		if (discrete) playSound('tick', sound);
 		apply(fracAt(e.currentTarget as HTMLElement, e));
 	}
 
@@ -167,6 +174,7 @@
 		}
 		if (next === null) return;
 		e.preventDefault();
+		playSound('tick', sound);
 		commit(next);
 	}
 
@@ -176,6 +184,7 @@
 			const d = e.deltaY || e.deltaX;
 			if (!d) return;
 			e.preventDefault();
+			playSound('tick', sound);
 			commit(level + (d < 0 ? step : -step));
 		};
 		el.addEventListener('wheel', onwheel, { passive: false });
@@ -199,6 +208,7 @@
 		box="sm"
 		size={size === 'sm' ? 16 : 18}
 		{disabled}
+		{sound}
 		onclick={() => setMuted(!muted)}
 		data-part="mute"
 	/>
@@ -237,6 +247,7 @@
 		--vol-thumb: 10px;
 		--vol-length: 5rem;
 		--vol-accent: var(--slider-accent, var(--accent));
+		--vol-halo: 0 0 0 4px color-mix(in srgb, var(--vol-accent) 20%, transparent);
 		display: inline-flex;
 		align-items: center;
 		gap: var(--sp-1);
@@ -281,8 +292,8 @@
 		}
 	}
 	.vol-slab[aria-disabled='true'] {
-		cursor: default;
-		opacity: 0.45;
+		cursor: not-allowed;
+		opacity: var(--disabled-opacity);
 	}
 	.vol-slab:focus-visible {
 		outline: var(--focus-ring);
@@ -340,28 +351,37 @@
 		top: 0;
 		width: var(--vol-thumb);
 		height: var(--vol-thumb);
-		border-radius: 50%;
+		border-radius: var(--r-pill);
 		background: var(--vol-accent);
 		border: 2px solid var(--bg);
 		box-shadow: var(--shadow-sm);
-		transform: translate(-50%, -50%) scale(0.6);
+		transform: translate(-50%, -50%);
+		scale: 0.6;
 		opacity: 0;
 		transition:
-			opacity 120ms var(--ease),
-			transform 120ms var(--ease);
+			opacity var(--dur-fast) var(--ease),
+			scale var(--dur-press) var(--ease-out),
+			box-shadow var(--dur-fast) var(--ease);
 	}
-	.vol-slab:hover .vol-thumb,
 	.vol-slab:focus-visible .vol-thumb,
 	.vol--dragging .vol-thumb {
 		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
+		scale: 1;
 	}
-	.vol--muted .vol-fill {
-		background: var(--text-faint);
+	.vol--dragging .vol-thumb {
+		scale: 1.15;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.vol-thumb {
-			transition: none;
+	@media (hover: hover) and (pointer: fine) {
+		.vol-slab:not([aria-disabled='true']):hover .vol-thumb {
+			opacity: 1;
+			scale: 1;
+			box-shadow: var(--shadow-sm), var(--vol-halo);
 		}
+		.vol--dragging .vol-thumb {
+			scale: 1.15;
+		}
+	}
+	.vol--muted .vol-fill {
+		background: var(--text-faint);
 	}
 </style>

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

@@ -18,6 +18,8 @@ type Own = {
     label?: string;
     muteLabel?: string;
     unmuteLabel?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
     oninput?: (value: number) => void;
     onchange?: (value: number) => void;
     onmutechange?: (muted: boolean) => void;

package/dist/components/molecules/WorkingDir.svelte

@@ -122,6 +122,7 @@
 		min-width: 0;
 		min-height: max-content;
 		overflow: hidden;
+		--focus-ring-offset: var(--focus-ring-offset-inset);
 	}
 	.rail.full {
 		flex: none;

package/dist/components/organisms/ConversationFeed.svelte

@@ -143,6 +143,10 @@
 		flex-direction: column;
 		gap: var(--sp-3);
 		padding: var(--sp-3);
+		scroll-padding-block: var(--sp-2);
+	}
+	.feed > * {
+		flex-shrink: 0;
 	}
 	.feed-items {
 		display: flex;

package/dist/components/organisms/DataTable.svelte

@@ -254,8 +254,13 @@
 						{:else if col.sortable}
 							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
 								<span>{col.label}</span>
-								<span class="dt-arrow" aria-hidden="true" class:active={sortKey === col.key}>
-									{sortKey === col.key ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
+								<span
+									class="dt-arrow"
+									aria-hidden="true"
+									class:active={sortKey === col.key}
+									class:desc={sortKey === col.key && sortDir === 'desc'}
+								>
+									{sortKey === col.key ? '↑' : '↕'}
 								</span>
 							</button>
 						{:else}
@@ -425,31 +430,47 @@
 		color: inherit;
 		cursor: pointer;
 	}
-	.dt-sort:hover {
-		color: var(--text);
-	}
 	.dt-arrow {
+		display: inline-block;
 		opacity: 0.4;
 		font-size: 0.9em;
+		transition:
+			rotate var(--dur-base) var(--ease-out),
+			opacity var(--dur-fast) var(--ease);
 	}
 	.dt-arrow.active {
 		opacity: 1;
 		color: var(--accent);
 	}
+	.dt-arrow.desc {
+		rotate: 180deg;
+	}
 	tbody tr:last-child td {
 		border-bottom: none;
 	}
 	tr.clickable {
 		cursor: pointer;
-		transition: background 0.12s var(--ease);
+		transition: background var(--dur-fast) var(--ease);
 	}
-	tr.clickable:hover,
 	tr.clickable:focus-visible {
 		background: var(--bg-elevated-2);
-	}
-	tr.clickable:focus-visible {
 		outline: var(--focus-ring);
-		outline-offset: -2px;
+		outline-offset: var(--focus-ring-offset-inset);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.dt-sort:hover {
+			color: var(--text);
+		}
+		tr.clickable:hover {
+			background: var(--bg-elevated-2);
+			transition-duration: var(--dur-instant);
+		}
+		tr:hover .dt-actions {
+			opacity: 1;
+		}
+		.dt-more-btn:hover {
+			background: var(--bg-elevated-2);
+		}
 	}
 	td.truncate {
 		white-space: nowrap;
@@ -487,7 +508,7 @@
 	}
 	.dt-actions {
 		opacity: 0;
-		transition: opacity 0.12s var(--ease);
+		transition: opacity var(--dur-fast) var(--ease);
 	}
 	.dt-actions-inner {
 		display: inline-flex;
@@ -495,7 +516,6 @@
 		gap: var(--sp-1);
 		white-space: nowrap;
 	}
-	tr:hover .dt-actions,
 	tr:focus-within .dt-actions {
 		opacity: 1;
 	}
@@ -503,6 +523,10 @@
 		.dt-actions {
 			opacity: 1;
 		}
+		/* The last row's checkbox slab would otherwise add a scroll range. */
+		tbody tr:last-child td :global(.checkbox::before) {
+			inset-block-end: 0;
+		}
 		/* Sort slab: inline-end stays at 0 so it never reaches the next header
 		   cell, and the inline-start reach stays inside the cell's own padding. */
 		.dt-sort {
@@ -664,9 +688,8 @@
 		font: inherit;
 		color: var(--accent);
 		cursor: pointer;
-		border-radius: var(--r-md, 6px);
+		border-radius: var(--r-md);
 	}
-	.dt-more-btn:hover,
 	.dt-more-btn:focus-visible {
 		background: var(--bg-elevated-2);
 	}

package/dist/floating.js

@@ -56,7 +56,33 @@ export function placeAt(t, floating, placement = 'bottom-start', gap = 6) {
     left = clamp(left, gap, vw - f.width - gap);
     floating.style.top = `${Math.round(top)}px`;
     floating.style.left = `${Math.round(left)}px`;
+    const resolved = side === 'top' || side === 'bottom'
+        ? top + f.height / 2 < t.top + t.height / 2
+            ? 'top'
+            : 'bottom'
+        : left + f.width / 2 < t.left + t.width / 2
+            ? 'left'
+            : 'right';
+    const cx = Math.round(clamp(t.left + t.width / 2 - left, 0, f.width));
+    const cy = Math.round(clamp(t.top + t.height / 2 - top, 0, f.height));
+    floating.dataset.side = resolved;
+    floating.style.setProperty('--tsu-origin', ORIGIN[resolved](cx, cy));
+    floating.style.setProperty('--tsu-shift', SHIFT[resolved]);
 }
+// Enter motion grows out of the trigger: the origin sits on the trigger-facing
+// edge, level with the trigger centre, and the panel starts shifted towards it.
+const ORIGIN = {
+    top: (cx) => `${cx}px 100%`,
+    bottom: (cx) => `${cx}px 0`,
+    left: (_cx, cy) => `100% ${cy}px`,
+    right: (_cx, cy) => `0 ${cy}px`,
+};
+const SHIFT = {
+    top: '0 var(--shift-sm)',
+    bottom: '0 calc(-1 * var(--shift-sm))',
+    left: 'var(--shift-sm) 0',
+    right: 'calc(-1 * var(--shift-sm)) 0',
+};
 /** Angles (degrees) of `count` petals spread evenly from `from` to `to`. */
 export function fanAngles(count, from, to) {
     if (count <= 1)

package/dist/index.d.ts

@@ -90,6 +90,7 @@ export { default as SeekSlider } from './components/molecules/SeekSlider.svelte'
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as SortableList, SORTABLE_LIST_MESSAGES, type SortableListMessages, type SortableListMove, type SortableListRowContext, } from './components/molecules/SortableList.svelte';
+export { default as SoundSettings } from './components/molecules/SoundSettings.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as SwipeRow, type SwipeAction } from './components/molecules/SwipeRow.svelte';

package/dist/index.js

@@ -97,6 +97,7 @@ export { default as SeekSlider } from './components/molecules/SeekSlider.svelte'
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
 export { default as SortableList, SORTABLE_LIST_MESSAGES, } from './components/molecules/SortableList.svelte';
+export { default as SoundSettings } from './components/molecules/SoundSettings.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as SwipeRow } from './components/molecules/SwipeRow.svelte';

package/dist/sound-synth.js

@@ -1,27 +1,32 @@
 const PALETTE = {
     click: [
-        ['n', 3200, 0, 0, 0.012, 0.25],
-        ['sine', 620, 380, 0, 0.04, 0.18],
+        ['n', 3000, 0, 0, 0.012, 0.18],
+        ['sine', 620, 380, 0, 0.04, 0.22],
     ],
     'toggle-on': [
-        ['n', 3000, 0, 0, 0.008, 0.3],
-        ['triangle', 660, 880, 0.045, 0.05, 0.3],
+        ['n', 2600, 0, 0, 0.012, 0.3],
+        ['sine', 520, 520, 0, 0.03, 0.14],
+        ['triangle', 660, 880, 0.035, 0.05, 0.3],
     ],
     'toggle-off': [
-        ['n', 3000, 0, 0, 0.008, 0.3],
-        ['triangle', 880, 620, 0.045, 0.05, 0.3],
+        ['n', 2600, 0, 0, 0.012, 0.3],
+        ['sine', 520, 520, 0, 0.03, 0.14],
+        ['triangle', 880, 620, 0.035, 0.05, 0.3],
     ],
     open: [['sine', 420, 760, 0, 0.09, 0.25]],
     close: [['sine', 700, 380, 0, 0.08, 0.25]],
     success: [
-        ['sine', 784, 784, 0, 0.07, 0.25],
-        ['sine', 1175, 1175, 0.06, 0.1, 0.22],
+        ['sine', 698, 698, 0, 0.055, 0.25],
+        ['sine', 1047, 1047, 0.058, 0.085, 0.2],
     ],
     error: [
-        ['triangle', 330, 300, 0, 0.07, 0.28],
-        ['triangle', 262, 240, 0.075, 0.1, 0.28],
+        ['triangle', 330, 300, 0, 0.065, 0.28],
+        ['triangle', 262, 240, 0.06, 0.08, 0.28],
+    ],
+    tick: [
+        ['n', 3800, 0, 0, 0.008, 0.3],
+        ['sine', 2400, 1900, 0, 0.012, 0.14],
     ],
-    tick: [['n', 5200, 0, 0, 0.006, 0.25]],
 };
 let ctx;
 let out;
@@ -51,7 +56,7 @@ export function play(name, volume) {
         const env = c.createGain();
         const s = t + at;
         env.gain.setValueAtTime(0.0001, s);
-        env.gain.exponentialRampToValueAtTime(g, s + 0.003);
+        env.gain.exponentialRampToValueAtTime(g, s + 0.004);
         env.gain.exponentialRampToValueAtTime(0.0001, s + d);
         env.connect(out);
         let src;

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

@@ -13,6 +13,8 @@ export interface Toast {
     action?: ToastAction;
     /** True while `action.run` is in flight; the Toaster shows the button loading. */
     pending: boolean;
+    /** Dismissed: the Toaster plays the exit while the store holds it for `TOAST_EXIT_MS`. */
+    leaving: boolean;
 }
 export interface ToastOptions {
     tone?: ToastToneInput;
@@ -22,14 +24,21 @@ export interface ToastOptions {
 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;
+/** Matches `--dur-exit-slow`; the removal never waits on `transitionend` alone. */
+export declare const TOAST_EXIT_MS = 200;
 declare class Toasts {
     #private;
     items: Toast[];
     show(message: string, opts?: ToastOptions): number;
+    /** Hold the auto-dismiss (pointer over the toast); `resume` restarts the remaining time. */
+    pause(id: number): void;
+    resume(id: number): void;
     ok(message: string, duration?: number, action?: ToastAction): number;
     error(message: string, duration?: number, action?: ToastAction): number;
     info(message: string, duration?: number, action?: ToastAction): number;
     dismiss(id: number): void;
+    /** Drop a toast at once, skipping the exit. */
+    remove(id: number): void;
     /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
     act(id: number): Promise<void>;
 }