@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/molecules/Toaster.svelte

@@ -7,11 +7,21 @@
 	// everything outside it is inert, top layer included, so the stack moves
 	// into the topmost modal dialog and back to its host when it closes.
 	import { toasts } from '../../stores/toast.svelte';
+	import { playSound } from '../../sound';
 	import Button from '../atoms/Button.svelte';
 	import Card from '../atoms/Card.svelte';
 	import Icon from '../atoms/Icon.svelte';
 
-	let { class: klass = '', style: styleProp = '' }: { class?: string; style?: string } = $props();
+	let {
+		class: klass = '',
+		style: styleProp = '',
+		sound = true
+	}: {
+		class?: string;
+		style?: string;
+		/** Play UI sounds when enabled globally; false silences this instance. */
+		sound?: boolean;
+	} = $props();
 
 	let host: HTMLDivElement | undefined = $state();
 	let el: HTMLDivElement | undefined = $state();
@@ -69,12 +79,45 @@
 	$effect(() => () => {
 		if (el && host && el.parentNode !== host) host.appendChild(el);
 	});
+
+	// Feedback tones sound once, when the toast appears; the queue present at
+	// mount is a sync, not an arrival.
+	let seen: Set<number> | null = null;
+	$effect(() => {
+		const items = toasts.items;
+		if (!seen) {
+			seen = new Set(items.map((t) => t.id));
+			return;
+		}
+		for (const t of items) {
+			if (seen.has(t.id)) continue;
+			seen.add(t.id);
+			if (t.tone === 'ok') playSound('success', sound);
+			else if (t.tone === 'error') playSound('error', sound);
+		}
+	});
+
+	// Hovering a toast holds its timer; only a real pointer counts.
+	function hold(e: PointerEvent, id: number) {
+		if (e.pointerType === 'mouse') toasts.pause(id);
+	}
+	function release(e: PointerEvent, id: number) {
+		if (e.pointerType === 'mouse') toasts.resume(id);
+	}
 </script>
 
 {#snippet toast(t: (typeof toasts.items)[number])}
 	{@const tone = t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
 	{#if t.action}
-		<Card as="div" surface="raised" class="toast" {tone}>
+		<Card
+			as="div"
+			surface="raised"
+			class="toast"
+			{tone}
+			data-leaving={t.leaving || undefined}
+			onpointerenter={(e: PointerEvent) => hold(e, t.id)}
+			onpointerleave={(e: PointerEvent) => release(e, t.id)}
+		>
 			<button
 				type="button"
 				class="toast-text"
@@ -98,6 +141,9 @@
 			{tone}
 			type="button"
 			aria-label="Dismiss: {t.message}"
+			data-leaving={t.leaving || undefined}
+			onpointerenter={(e: PointerEvent) => hold(e, t.id)}
+			onpointerleave={(e: PointerEvent) => release(e, t.id)}
 			onclick={() => toasts.dismiss(t.id)}
 		>
 			<span aria-hidden="true" class="toast-icon">
@@ -160,7 +206,23 @@
 		width: 100%;
 		text-align: left;
 		font-size: var(--fs-sm);
-		animation: toast-in 0.18s var(--ease);
+		transition:
+			opacity var(--dur-sheet) var(--ease-out),
+			translate var(--dur-sheet) var(--ease-out),
+			scale var(--dur-sheet) var(--ease-out);
+	}
+	@starting-style {
+		.toaster :global(.toast) {
+			opacity: 0;
+			translate: 0 var(--shift-md);
+			scale: 0.98;
+		}
+	}
+	.toaster :global(.toast[data-leaving]) {
+		opacity: 0;
+		scale: 0.96;
+		pointer-events: none;
+		transition-duration: var(--dur-exit-slow);
 	}
 	.toaster :global(.toast.card-ok) {
 		color: var(--ok);
@@ -188,15 +250,4 @@
 	.msg {
 		flex: 1;
 	}
-	@keyframes toast-in {
-		from {
-			transform: translateY(8px);
-			opacity: 0;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.toaster :global(.toast) {
-			animation: none;
-		}
-	}
 </style>

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     class?: string;
     style?: string;
+    /** Play UI sounds when enabled globally; false silences this instance. */
+    sound?: boolean;
 };
 declare const Toaster: import("svelte").Component<$$ComponentProps, {}, "">;
 type Toaster = ReturnType<typeof Toaster>;

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/molecules/rich-select-keyboard.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @typedef {{ type: 'open', index?: number }
+ *   | { type: 'close' }
+ *   | { type: 'select' }
+ *   | { type: 'move', index: number }
+ *   | { type: 'change', index: number }
+ *   | { type: 'reorder', from: number, to: number }
+ *   | { type: 'trailing' }
+ *   | { type: 'type', char: string }} RichSelectAction
+ */
+/**
+ * Map a keydown on the trigger to what the select does with it. Closed, the
+ * arrows step the value like a native select and Enter/Space/Alt+ArrowDown open.
+ * Open, the arrows and Home/End move the active option, Enter/Space select,
+ * Escape closes, Alt+arrows reorder (when `reorder` is set), and Tab or
+ * ArrowRight reach the active option's trailing actions (when it has any).
+ * Printable characters feed the typeahead in both states. `undefined` leaves
+ * the key alone.
+ *
+ * @param {{ key: string, altKey?: boolean, ctrlKey?: boolean, metaKey?: boolean, shiftKey?: boolean }} e
+ * @param {{ open: boolean, count: number, index: number, reorder?: boolean, trailing?: boolean }} state
+ * @returns {RichSelectAction | undefined}
+ */
+export function richSelectAction(e: {
+    key: string;
+    altKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+}, { open, count, index, reorder, trailing }: {
+    open: boolean;
+    count: number;
+    index: number;
+    reorder?: boolean;
+    trailing?: boolean;
+}): RichSelectAction | undefined;
+/**
+ * Index of the first label, searching forward from `from` and wrapping, that
+ * starts with `query` (case- and accent-insensitive). A query of one repeated
+ * character cycles through the labels starting with it, as native selects do.
+ *
+ * @param {readonly string[]} labels
+ * @param {string} query
+ * @param {number} from index of the current option, or -1
+ * @returns {number | undefined}
+ */
+export function typeaheadIndex(labels: readonly string[], query: string, from: number): number | undefined;
+/**
+ * Accumulates typed characters into a query that resets after `timeout` ms of
+ * silence.
+ *
+ * @param {number} [timeout]
+ * @param {() => number} [now]
+ */
+export function createTypeahead(timeout?: number, now?: () => number): {
+    /** @param {string} char */
+    push(char: string): string;
+    reset(): void;
+};
+export type RichSelectAction = {
+    type: "open";
+    index?: number;
+} | {
+    type: "close";
+} | {
+    type: "select";
+} | {
+    type: "move";
+    index: number;
+} | {
+    type: "change";
+    index: number;
+} | {
+    type: "reorder";
+    from: number;
+    to: number;
+} | {
+    type: "trailing";
+} | {
+    type: "type";
+    char: string;
+};