@dorsk/tsumikit 0.72.0 → 0.73.0

package/dist/components/molecules/Toaster.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	// Renders the toast queue bottom-centered in two live regions: polite for
 	// ok/info/neutral, assertive (role=alert) for errors. Mount once near the
-	// app root. The stack lives in a manual popover so it paints in the
-	// top layer above an open Modal <dialog>; without the Popover API the
-	// attribute is ignored and the fixed/z-index positioning applies instead.
+	// app root. The stack lives in a manual popover so it paints in the top
+	// layer; without the Popover API the attribute is ignored and the
+	// fixed/z-index positioning applies instead. While a modal <dialog> is open
+	// 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 Button from '../atoms/Button.svelte';
 	import Card from '../atoms/Card.svelte';
@@ -11,16 +13,61 @@
 
 	let { class: klass = '', style: styleProp = '' }: { class?: string; style?: string } = $props();
 
+	let host: HTMLDivElement | undefined = $state();
 	let el: HTMLDivElement | undefined = $state();
 	const polite = $derived(toasts.items.filter((t) => t.tone !== 'error'));
 	const assertive = $derived(toasts.items.filter((t) => t.tone === 'error'));
 
-	$effect(() => {
-		if (!el || typeof el.showPopover !== 'function') return;
+	function topModal(): HTMLDialogElement | null {
+		let found: HTMLDialogElement | null = null;
+		for (const d of document.querySelectorAll<HTMLDialogElement>('dialog[open]')) {
+			try {
+				if (d.matches(':modal')) found = d;
+			} catch {}
+		}
+		return found;
+	}
+
+	let shown = false;
+	function show(stack: HTMLDivElement) {
+		if (typeof stack.showPopover !== 'function') return;
 		try {
-			if (toasts.items.length) el.showPopover();
-			else el.hidePopover();
+			stack.showPopover();
+			shown = true;
 		} catch {}
+	}
+	function hide(stack: HTMLDivElement) {
+		if (!shown || typeof stack.hidePopover !== 'function') return;
+		shown = false;
+		try {
+			stack.hidePopover();
+		} catch {}
+	}
+
+	$effect(() => {
+		const stack = el;
+		const home = host;
+		if (!stack || !home) return;
+		if (!toasts.items.length) {
+			hide(stack);
+			return;
+		}
+		const place = () => {
+			const target = topModal() ?? home;
+			if (stack.parentNode !== target) {
+				hide(stack);
+				target.appendChild(stack);
+			}
+			show(stack);
+		};
+		place();
+		const observer = new MutationObserver(place);
+		observer.observe(document.body, { attributes: true, attributeFilter: ['open'], subtree: true });
+		return () => observer.disconnect();
+	});
+
+	$effect(() => () => {
+		if (el && host && el.parentNode !== host) host.appendChild(el);
 	});
 </script>
 
@@ -62,16 +109,21 @@
 	{/if}
 {/snippet}
 
-<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
-	<div class="region" role="status" aria-live="polite">
-		{#each polite as t (t.id)}{@render toast(t)}{/each}
-	</div>
-	<div class="region" role="alert" aria-live="assertive">
-		{#each assertive as t (t.id)}{@render toast(t)}{/each}
+<div class="toaster-host" bind:this={host}>
+	<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
+		<div class="region" role="status" aria-live="polite">
+			{#each polite as t (t.id)}{@render toast(t)}{/each}
+		</div>
+		<div class="region" role="alert" aria-live="assertive">
+			{#each assertive as t (t.id)}{@render toast(t)}{/each}
+		</div>
 	</div>
 </div>
 
 <style>
+	.toaster-host {
+		display: contents;
+	}
 	.toaster {
 		position: fixed;
 		inset: auto;
@@ -142,4 +194,9 @@
 			opacity: 0;
 		}
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.toaster :global(.toast) {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/molecules/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
-	// focus of the trigger; hides on blur / mouseleave / Escape. The trigger is
+	// focus of the trigger; hides on blur / mouseleave / Escape (anywhere). The trigger is
 	// any snippet; an action wires `aria-describedby` onto its first focusable
 	// element so screen readers announce the text.
 	//
@@ -63,6 +63,11 @@
 		if (wrapEl && tipEl) place(wrapEl, tipEl, `${placement}-center`, 6);
 	}
 
+	// Escape must dismiss a hover-opened bubble even while focus sits elsewhere.
+	function onEscape(e: KeyboardEvent) {
+		if (e.key === 'Escape') hideNow();
+	}
+
 	function show() {
 		clearTimeout(hideTimer); // pointer came back within the grace period
 		clearTimeout(showTimer);
@@ -72,15 +77,20 @@
 			reposition();
 			addEventListener('scroll', reposition, true);
 			addEventListener('resize', reposition);
+			document.addEventListener('keydown', onEscape);
 		}, delay);
 	}
 	function hideNow() {
 		clearTimeout(showTimer);
 		clearTimeout(hideTimer);
-		if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		try {
+			if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		} catch {}
 		removeEventListener('scroll', reposition, true);
 		removeEventListener('resize', reposition);
+		document.removeEventListener('keydown', onEscape);
 	}
+	$effect(() => () => hideNow());
 	// Debounced close: cancelled if the pointer/focus enters the panel (rich
 	// mode) or returns to the trigger before `closeDelay` elapses.
 	function scheduleHide() {
@@ -104,21 +114,23 @@
 			node.tabIndex = 0;
 			target = node;
 		}
-		target.setAttribute('aria-describedby', id);
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
+		// The trigger may already be described (a Field hint/error): append our
+		// id to the token list and take back only that token on destroy.
+		const describedBy = () => (target.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+		target.setAttribute('aria-describedby', [...describedBy().filter((t) => t !== id), id].join(' '));
 		node.addEventListener('mouseenter', show);
 		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', show);
 		node.addEventListener('focusout', scheduleHide);
-		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
-				target.removeAttribute('aria-describedby');
+				const rest = describedBy().filter((t) => t !== id);
+				if (rest.length) target.setAttribute('aria-describedby', rest.join(' '));
+				else target.removeAttribute('aria-describedby');
 				node.removeEventListener('mouseenter', show);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', show);
 				node.removeEventListener('focusout', scheduleHide);
-				node.removeEventListener('keydown', onkey);
 			}
 		};
 	}
@@ -126,19 +138,16 @@
 	// Action for the panel: in rich mode it accepts the pointer/focus, which
 	// cancels the pending close (hovercard persistence).
 	function panel(node: HTMLElement) {
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
 		node.addEventListener('mouseenter', cancelHide);
 		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', cancelHide);
 		node.addEventListener('focusout', scheduleHide);
-		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
 				node.removeEventListener('mouseenter', cancelHide);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', cancelHide);
 				node.removeEventListener('focusout', scheduleHide);
-				node.removeEventListener('keydown', onkey);
 			}
 		};
 	}

package/dist/components/molecules/VolumeSlider.svelte

@@ -0,0 +1,367 @@
+<script lang="ts">
+	/**
+	 * Compact volume control: a mute toggle whose glyph tracks the level, and a
+	 * short slider. `oninput` fires on every change, `onchange` once per
+	 * release or keyboard/wheel step. The slider hides on touch devices by
+	 * default (`hideOnTouch`), where the OS owns volume; the mute button stays.
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { IconName } from '../atoms/Icon.svelte';
+	import IconButton from './IconButton.svelte';
+
+	type Own = {
+		/** Level 0–1. */
+		value?: number;
+		muted?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		size?: 'sm' | 'md';
+		/** Level per arrow key or wheel notch. */
+		step?: number;
+		disabled?: boolean;
+		hideOnTouch?: boolean;
+		label?: string;
+		muteLabel?: string;
+		unmuteLabel?: string;
+		oninput?: (value: number) => void;
+		onchange?: (value: number) => void;
+		onmutechange?: (muted: boolean) => void;
+		class?: string;
+		style?: string;
+	};
+
+	let {
+		value = $bindable(1),
+		muted = $bindable(false),
+		orientation = 'horizontal',
+		size = 'sm',
+		step = 0.05,
+		disabled = false,
+		hideOnTouch = true,
+		label = 'Volume',
+		muteLabel = 'Mute',
+		unmuteLabel = 'Unmute',
+		oninput,
+		onchange,
+		onmutechange,
+		class: klass = '',
+		style: styleProp,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	let dragging = $state(false);
+	let pointerId: number | null = null;
+
+	const clamp = (v: number) => Math.round(Math.min(1, Math.max(0, v)) * 1e4) / 1e4;
+	const level = $derived(muted ? 0 : clamp(value));
+	const pct = $derived(Math.round(level * 100));
+	const vertical = $derived(orientation === 'vertical');
+	const icon = $derived<IconName>(
+		muted ? 'volume-mute' : level === 0 ? 'volume' : level < 0.5 ? 'volume-low' : 'volume-high'
+	);
+	const valueText = $derived(muted ? 'Muted' : `${pct}%`);
+
+	function setMuted(m: boolean) {
+		if (m === muted) return;
+		muted = m;
+		onmutechange?.(m);
+	}
+
+	function apply(v: number) {
+		const next = clamp(v);
+		value = next;
+		if (next > 0) setMuted(false);
+		oninput?.(next);
+		return next;
+	}
+
+	function commit(v: number) {
+		onchange?.(apply(v));
+	}
+
+	function fracAt(el: HTMLElement, e: PointerEvent) {
+		const r = el.getBoundingClientRect();
+		let f: number;
+		if (vertical) {
+			f = r.height ? 1 - (e.clientY - r.top) / r.height : 0;
+		} else {
+			f = r.width ? (e.clientX - r.left) / r.width : 0;
+			if (getComputedStyle(el).direction === 'rtl') f = 1 - f;
+		}
+		return clamp(f);
+	}
+
+	function release(el: HTMLElement) {
+		if (pointerId !== null && typeof el.releasePointerCapture === 'function') {
+			try {
+				el.releasePointerCapture(pointerId);
+			} catch {}
+		}
+		pointerId = null;
+		dragging = false;
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		if (disabled || e.button !== 0 || pointerId !== null) return;
+		const el = e.currentTarget as HTMLElement;
+		e.preventDefault();
+		pointerId = e.pointerId;
+		dragging = true;
+		if (typeof el.setPointerCapture === 'function') {
+			try {
+				el.setPointerCapture(e.pointerId);
+			} catch {}
+		}
+		el.focus?.({ preventScroll: true });
+		apply(fracAt(el, e));
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		apply(fracAt(e.currentTarget as HTMLElement, e));
+	}
+
+	function onpointerup(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		release(e.currentTarget as HTMLElement);
+		onchange?.(value);
+	}
+
+	function onpointercancel(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		release(e.currentTarget as HTMLElement);
+		onchange?.(value);
+	}
+
+	function onlostpointercapture(e: PointerEvent) {
+		if (pointerId === null || pointerId !== e.pointerId) return;
+		pointerId = null;
+		dragging = false;
+		onchange?.(value);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		const base = level;
+		let next: number | null = null;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				next = base + step;
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				next = base - step;
+				break;
+			case 'PageUp':
+				next = base + step * 2;
+				break;
+			case 'PageDown':
+				next = base - step * 2;
+				break;
+			case 'Home':
+				next = 0;
+				break;
+			case 'End':
+				next = 1;
+				break;
+		}
+		if (next === null) return;
+		e.preventDefault();
+		commit(next);
+	}
+
+	function wheel(el: HTMLElement) {
+		const onwheel = (e: WheelEvent) => {
+			if (disabled) return;
+			const d = e.deltaY || e.deltaX;
+			if (!d) return;
+			e.preventDefault();
+			commit(level + (d < 0 ? step : -step));
+		};
+		el.addEventListener('wheel', onwheel, { passive: false });
+		return () => el.removeEventListener('wheel', onwheel);
+	}
+</script>
+
+<div
+	data-tsu="VolumeSlider"
+	class="vol vol--{size} vol--{orientation} {klass}"
+	class:vol--hide-touch={hideOnTouch}
+	class:vol--dragging={dragging}
+	class:vol--muted={muted}
+	style="--pct: {pct};{styleProp ?? ''}"
+	{...rest}
+>
+	<IconButton
+		{icon}
+		label={muted ? unmuteLabel : muteLabel}
+		pressed={muted}
+		box="sm"
+		size={size === 'sm' ? 16 : 18}
+		{disabled}
+		onclick={() => setMuted(!muted)}
+		data-part="mute"
+	/>
+	<div
+		class="vol-slab"
+		data-part="slab"
+		role="slider"
+		tabindex={disabled ? -1 : 0}
+		aria-label={label}
+		aria-orientation={orientation}
+		aria-valuemin={0}
+		aria-valuemax={100}
+		aria-valuenow={pct}
+		aria-valuetext={valueText}
+		aria-disabled={disabled ? 'true' : undefined}
+		{onpointerdown}
+		{onpointermove}
+		{onpointerup}
+		{onpointercancel}
+		{onlostpointercapture}
+		{onkeydown}
+		{@attach wheel}
+	>
+		<span class="vol-track" data-part="track">
+			<i class="vol-fill" data-part="fill"></i>
+		</span>
+		<span class="vol-anchor">
+			<i class="vol-thumb" data-part="thumb"></i>
+		</span>
+	</div>
+</div>
+
+<style>
+	.vol {
+		--vol-track: 3px;
+		--vol-thumb: 10px;
+		--vol-length: 5rem;
+		--vol-accent: var(--slider-accent, var(--accent));
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		vertical-align: middle;
+	}
+	.vol--md {
+		--vol-track: 4px;
+		--vol-thumb: 12px;
+		--vol-length: 7rem;
+	}
+	.vol--vertical {
+		flex-direction: column-reverse;
+	}
+	.vol-slab {
+		position: relative;
+		flex: none;
+		width: var(--vol-length);
+		min-height: 1.25rem;
+		cursor: pointer;
+		touch-action: none;
+		user-select: none;
+		-webkit-user-select: none;
+		outline: none;
+		border-radius: var(--r-sm);
+	}
+	.vol--vertical .vol-slab {
+		width: 1.25rem;
+		height: var(--vol-length);
+		min-height: 0;
+	}
+	@media (pointer: coarse) {
+		.vol-slab {
+			min-height: var(--touch-target-compact);
+		}
+		.vol--vertical .vol-slab {
+			min-width: var(--touch-target-compact);
+		}
+	}
+	@media (hover: none) and (pointer: coarse) {
+		.vol--hide-touch .vol-slab {
+			display: none;
+		}
+	}
+	.vol-slab[aria-disabled='true'] {
+		cursor: default;
+		opacity: 0.45;
+	}
+	.vol-slab:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
+	.vol-track {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		height: var(--vol-track);
+		margin-top: calc(var(--vol-track) / -2);
+		border-radius: var(--r-pill);
+		background: var(--bg-elevated-2);
+		overflow: hidden;
+	}
+	.vol--vertical .vol-track {
+		inset-inline: auto;
+		inset-block: 0;
+		left: 50%;
+		top: auto;
+		width: var(--vol-track);
+		height: auto;
+		margin-top: 0;
+		margin-left: calc(var(--vol-track) / -2);
+	}
+	.vol-fill {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: calc(var(--pct) * 1%);
+		background: var(--vol-accent);
+	}
+	.vol--vertical .vol-fill {
+		inset-inline: 0;
+		inset-block: auto 0;
+		width: auto;
+		height: calc(var(--pct) * 1%);
+	}
+	.vol-anchor {
+		position: absolute;
+		top: 50%;
+		inset-inline-start: calc(var(--pct) * 1%);
+		width: 0;
+		height: 0;
+		pointer-events: none;
+	}
+	.vol--vertical .vol-anchor {
+		top: auto;
+		bottom: calc(var(--pct) * 1%);
+		inset-inline-start: 50%;
+	}
+	.vol-thumb {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: var(--vol-thumb);
+		height: var(--vol-thumb);
+		border-radius: 50%;
+		background: var(--vol-accent);
+		border: 2px solid var(--bg);
+		box-shadow: var(--shadow-sm);
+		transform: translate(-50%, -50%) scale(0.6);
+		opacity: 0;
+		transition:
+			opacity 120ms var(--ease),
+			transform 120ms 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);
+	}
+	.vol--muted .vol-fill {
+		background: var(--text-faint);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.vol-thumb {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,30 @@
+/**
+     * Compact volume control: a mute toggle whose glyph tracks the level, and a
+     * short slider. `oninput` fires on every change, `onchange` once per
+     * release or keyboard/wheel step. The slider hides on touch devices by
+     * default (`hideOnTouch`), where the OS owns volume; the mute button stays.
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    /** Level 0–1. */
+    value?: number;
+    muted?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md';
+    /** Level per arrow key or wheel notch. */
+    step?: number;
+    disabled?: boolean;
+    hideOnTouch?: boolean;
+    label?: string;
+    muteLabel?: string;
+    unmuteLabel?: string;
+    oninput?: (value: number) => void;
+    onchange?: (value: number) => void;
+    onmutechange?: (muted: boolean) => void;
+    class?: string;
+    style?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const VolumeSlider: import("svelte").Component<$$ComponentProps, {}, "muted" | "value">;
+type VolumeSlider = ReturnType<typeof VolumeSlider>;
+export default VolumeSlider;

package/dist/components/molecules/combobox-keyboard.js

@@ -157,8 +157,9 @@ export function caretRect(el) {
 	}
 	mirror.textContent = el.value.slice(0, caret);
 	const marker = doc.createElement('span');
-	marker.textContent = el.value.slice(caret) || '.';
+	marker.textContent = el.value[caret] ?? '.';
 	mirror.appendChild(marker);
+	mirror.appendChild(doc.createTextNode(el.value.slice(caret + 1)));
 	doc.body.appendChild(mirror);
 	const m = mirror.getBoundingClientRect();
 	const s = marker.getBoundingClientRect();

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 export { default as Text } from './components/atoms/Text.svelte';
 export { default as Textarea } from './components/atoms/Textarea.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 Cluster } from './components/layouts/Cluster.svelte';
@@ -84,6 +85,7 @@ export { default as PullToRefresh } from './components/molecules/PullToRefresh.s
 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 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';
@@ -97,6 +99,7 @@ export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
+export { default as VolumeSlider } from './components/molecules/VolumeSlider.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 export { default as ConversationFeed } from './components/organisms/ConversationFeed.svelte';
 export { default as ConversationPanel } from './components/organisms/ConversationPanel.svelte';
@@ -106,6 +109,7 @@ export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export { escapeHtml, type Highlight, type RenderMarkdownOptions, renderMarkdown, stripAnsi, } from './markdown';
+export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time';
 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';
 export { type OptionSection, sectionOptions } from './select-options';

package/dist/index.js

@@ -34,6 +34,7 @@ export { default as Switch } from './components/atoms/Switch.svelte';
 // ---- atoms ----
 export { default as Text } from './components/atoms/Text.svelte';
 export { default as Textarea } from './components/atoms/Textarea.svelte';
+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';
@@ -92,6 +93,7 @@ export { default as PullToRefresh } from './components/molecules/PullToRefresh.s
 export { default as RadialMenu, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, } from './components/molecules/RadioGroup.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';
@@ -105,6 +107,7 @@ export { default as Toaster } from './components/molecules/Toaster.svelte';
 export { default as Toggle } from './components/molecules/Toggle.svelte';
 export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
+export { default as VolumeSlider } from './components/molecules/VolumeSlider.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 // ---- organisms ----
 export { default as ConversationFeed } from './components/organisms/ConversationFeed.svelte';
@@ -115,6 +118,7 @@ export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export { escapeHtml, renderMarkdown, stripAnsi, } from './markdown';
+export { describeMediaTime, formatMediaTime, isLiveDuration } from './media-time';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, singleQuery, suggest, suggestSingle, toSql, walk, } from './query';

package/dist/media-time.d.ts

@@ -0,0 +1,6 @@
+/** Seconds as `m:ss`, or `h:mm:ss` once the value (or `ref`) reaches an hour. */
+export declare function formatMediaTime(seconds: number, ref?: number): string;
+/** True when a duration cannot be scrubbed: unknown, live, or empty. */
+export declare function isLiveDuration(duration: number | null | undefined): boolean;
+/** Spoken position: "1:02 of 23:45", or just the position when live. */
+export declare function describeMediaTime(value: number, duration: number | null | undefined, format?: (s: number, ref?: number) => string): string;