@dorsk/tsumikit 0.74.0 → 0.76.0

package/dist/components/molecules/rich-select-keyboard.js

@@ -0,0 +1,114 @@
+/**
+ * @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, { open, count, index, reorder = false, trailing = false }) {
+	const { key } = e;
+	if (e.ctrlKey || e.metaKey) return undefined;
+	const last = count - 1;
+	const cur = index >= 0 && index <= last ? index : -1;
+	if (!open) {
+		if (e.altKey) return key === 'ArrowDown' ? { type: 'open' } : undefined;
+		if (key === 'Enter' || key === ' ') return { type: 'open' };
+		if (count <= 0) return undefined;
+		if (key === 'ArrowDown')
+			return { type: 'change', index: cur < 0 ? 0 : Math.min(cur + 1, last) };
+		if (key === 'ArrowUp') return { type: 'change', index: cur < 0 ? last : Math.max(cur - 1, 0) };
+		if (key === 'Home') return { type: 'change', index: 0 };
+		if (key === 'End') return { type: 'change', index: last };
+		return printable(e) ? { type: 'type', char: key } : undefined;
+	}
+	if (key === 'Escape') return { type: 'close' };
+	if (e.altKey) {
+		if (key === 'ArrowUp' && reorder && cur > 0) return { type: 'reorder', from: cur, to: cur - 1 };
+		if (key === 'ArrowDown' && reorder && cur >= 0 && cur < last)
+			return { type: 'reorder', from: cur, to: cur + 1 };
+		if (key === 'ArrowUp' && !reorder) return { type: 'select' };
+		return undefined;
+	}
+	if ((key === 'Tab' && !e.shiftKey) || key === 'ArrowRight')
+		return trailing && cur >= 0 ? { type: 'trailing' } : undefined;
+	if (key === 'Tab') return { type: 'close' };
+	if (key === 'Enter' || key === ' ') return cur >= 0 ? { type: 'select' } : { type: 'close' };
+	if (count <= 0) return undefined;
+	if (key === 'ArrowDown') return { type: 'move', index: cur < 0 ? 0 : Math.min(cur + 1, last) };
+	if (key === 'ArrowUp') return { type: 'move', index: cur < 0 ? last : Math.max(cur - 1, 0) };
+	if (key === 'Home') return { type: 'move', index: 0 };
+	if (key === 'End') return { type: 'move', index: last };
+	return printable(e) ? { type: 'type', char: key } : undefined;
+}
+
+/** @param {{ key: string, altKey?: boolean }} e */
+function printable(e) {
+	return e.key.length === 1 && !e.altKey && e.key !== ' ';
+}
+
+/**
+ * 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, query, from) {
+	const n = labels.length;
+	if (n === 0 || query === '') return undefined;
+	const fold = (/** @type {string} */ s) => s.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+	const q = fold(query);
+	const repeated = [...q].every((c) => c === q[0]);
+	const needle = repeated ? q[0] : q;
+	const start = repeated ? from + 1 : Math.max(from, 0);
+	for (let i = 0; i < n; i += 1) {
+		const at = (((start + i) % n) + n) % n;
+		if (fold(labels[at]).startsWith(needle)) return at;
+	}
+	return undefined;
+}
+
+/**
+ * Accumulates typed characters into a query that resets after `timeout` ms of
+ * silence.
+ *
+ * @param {number} [timeout]
+ * @param {() => number} [now]
+ */
+export function createTypeahead(timeout = 500, now = () => Date.now()) {
+	let query = '';
+	let at = -Infinity;
+	return {
+		/** @param {string} char */
+		push(char) {
+			const t = now();
+			query = t - at > timeout ? char : query + char;
+			at = t;
+			return query;
+		},
+		reset() {
+			query = '';
+			at = -Infinity;
+		},
+	};
+}

package/dist/components/organisms/ConversationFeed.svelte

@@ -64,6 +64,25 @@
 		if (stuck) pending = false;
 	}
 
+	// Keyboard focus at the scroll edge would cut its ring: bring it inside the scroll padding.
+	function onfocusin(e: FocusEvent) {
+		const el = scroller;
+		const target = e.target;
+		if (!el || !(target instanceof Element) || target === el) return;
+		try {
+			if (!target.matches(':focus-visible')) return;
+		} catch {
+			return;
+		}
+		const pad = Number.parseFloat(getComputedStyle(el).scrollPaddingTop) || 0;
+		const box = el.getBoundingClientRect();
+		const r = target.getBoundingClientRect();
+		const top = box.top + el.clientTop;
+		const bottom = top + el.clientHeight;
+		if (r.top - pad < top) el.scrollTop -= top - (r.top - pad);
+		else if (r.bottom + pad > bottom) el.scrollTop += r.bottom + pad - bottom;
+	}
+
 	$effect.pre(() => {
 		const el = scroller;
 		const first = items.length ? key(items[0]) : undefined;
@@ -106,7 +125,7 @@
 </script>
 
 <div data-tsu="ConversationFeed" class="feed-wrap {klass}" style={styleProp}>
-	<div class="feed" bind:this={scroller} {onscroll}>
+	<div class="feed" bind:this={scroller} {onscroll} {onfocusin}>
 		{#if loadMore}
 			<LoadMore pill state={loadMore} onload={onloadmore} label={loadMoreLabel} />
 		{/if}
@@ -143,6 +162,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

@@ -85,11 +85,13 @@ export { default as Prose } from './components/molecules/Prose.svelte';
 export { default as PullToRefresh } from './components/molecules/PullToRefresh.svelte';
 export { default as RadialMenu, type RadialArc, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
+export { default as RichSelect, type RichSelectOptionContext, } from './components/molecules/RichSelect.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 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

@@ -92,11 +92,13 @@ export { default as Prose } from './components/molecules/Prose.svelte';
 export { default as PullToRefresh } from './components/molecules/PullToRefresh.svelte';
 export { default as RadialMenu, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte';
+export { default as RichSelect, } from './components/molecules/RichSelect.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 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>;
 }

package/dist/stores/toast.svelte.js

@@ -5,22 +5,54 @@
 export const TOAST_MS = 4000;
 /** Toasts with an action linger longer: the action is only reachable while visible. */
 export const ACTION_TOAST_MS = 7000;
+/** Matches `--dur-exit-slow`; the removal never waits on `transitionend` alone. */
+export const TOAST_EXIT_MS = 200;
 let seq = 0;
 class Toasts {
     items = $state([]);
     #timers = new Map();
+    #due = new Map();
+    #paused = new Map();
+    #arm(id, ms) {
+        this.#due.set(id, Date.now() + ms);
+        this.#timers.set(id, setTimeout(() => this.dismiss(id), ms));
+    }
+    #disarm(id) {
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.#timers.delete(id);
+        this.#due.delete(id);
+        this.#paused.delete(id);
+    }
     show(message, opts = {}) {
         const id = ++seq;
         const duration = opts.duration ?? (opts.action ? ACTION_TOAST_MS : TOAST_MS);
         const tone = opts.tone === 'danger' ? 'error' : (opts.tone ?? 'neutral');
         this.items = [
             ...this.items,
-            { id, message, tone, duration, action: opts.action, pending: false },
+            { id, message, tone, duration, action: opts.action, pending: false, leaving: false },
         ];
         if (duration > 0)
-            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
+            this.#arm(id, duration);
         return id;
     }
+    /** Hold the auto-dismiss (pointer over the toast); `resume` restarts the remaining time. */
+    pause(id) {
+        const due = this.#due.get(id);
+        if (due === undefined)
+            return;
+        const left = Math.max(0, due - Date.now());
+        this.#disarm(id);
+        this.#paused.set(id, left);
+    }
+    resume(id) {
+        const left = this.#paused.get(id);
+        this.#paused.delete(id);
+        if (left === undefined || !this.items.some((t) => t.id === id && !t.leaving))
+            return;
+        this.#arm(id, left);
+    }
     ok(message, duration, action) {
         return this.show(message, { tone: 'ok', duration, action });
     }
@@ -31,10 +63,16 @@ class Toasts {
         return this.show(message, { tone: 'info', duration, action });
     }
     dismiss(id) {
-        const timer = this.#timers.get(id);
-        if (timer)
-            clearTimeout(timer);
-        this.#timers.delete(id);
+        this.#disarm(id);
+        const t = this.items.find((x) => x.id === id);
+        if (!t || t.leaving)
+            return;
+        this.items = this.items.map((x) => (x.id === id ? { ...x, leaving: true } : x));
+        setTimeout(() => this.remove(id), TOAST_EXIT_MS);
+    }
+    /** Drop a toast at once, skipping the exit. */
+    remove(id) {
+        this.#disarm(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. */
@@ -42,9 +80,7 @@ class Toasts {
         const t = this.items.find((x) => x.id === id);
         if (!t?.action || t.pending)
             return;
-        const timer = this.#timers.get(id);
-        if (timer)
-            clearTimeout(timer);
+        this.#disarm(id);
         this.items = this.items.map((x) => (x.id === id ? { ...x, pending: true } : x));
         try {
             await t.action.run();

package/dist/styles/reset.css

@@ -51,9 +51,6 @@ a {
 	color: var(--link);
 	text-decoration: none;
 }
-a:hover {
-	text-decoration: underline;
-}
 
 button {
 	font: inherit;
@@ -96,6 +93,9 @@ pre {
 /* Slim scrollbars for mice only. On touch, a custom scrollbar replaces the
    native overlay bars with classic space-taking ones. */
 @media (hover: hover) and (pointer: fine) {
+	a:hover {
+		text-decoration: underline;
+	}
 	::-webkit-scrollbar {
 		width: 8px;
 		height: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",