@dorsk/tsumikit 0.71.0 → 0.73.0

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/components/organisms/ConversationFeed.svelte

@@ -17,6 +17,7 @@
 		loadMoreLabel = 'Load older',
 		follow = true,
 		jumpLabel = 'Jump to latest',
+		label = 'Messages',
 		class: klass = '',
 		style: styleProp = ''
 	}: {
@@ -32,6 +33,8 @@
 		/** Stick to the bottom while the user is at the bottom. */
 		follow?: boolean;
 		jumpLabel?: string;
+		/** Accessible name of the message log. */
+		label?: string;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -41,9 +44,10 @@
 	let scroller = $state<HTMLElement | null>(null);
 	let stuck = $state(true);
 	let pending = $state(false);
+	// Keeps screen readers from announcing a history load or swap as new messages.
+	let busy = $state(false);
 	let prevFirst: string | number | undefined;
 	let prevLast: string | number | undefined;
-	let prevLength = 0;
 
 	const atBottom = (el: HTMLElement) => el.scrollHeight - el.scrollTop - el.clientHeight <= THRESHOLD;
 
@@ -64,17 +68,26 @@
 		const el = scroller;
 		const first = items.length ? key(items[0]) : undefined;
 		const last = items.length ? key(items[items.length - 1]) : undefined;
-		const length = items.length;
 		if (!el) return;
-		const prepended = prevFirst !== undefined && first !== prevFirst && length > prevLength;
-		const appended = last !== undefined && last !== prevLast;
+		const keys = prevFirst === undefined ? null : new Set(items.map(key));
+		const kept = (k: string | number | undefined) => k !== undefined && keys !== null && keys.has(k);
+		const prepended = first !== prevFirst && last === prevLast && kept(prevFirst);
+		const reset = prevLast !== undefined && !kept(prevLast) && !kept(prevFirst);
+		const appended = !reset && last !== undefined && last !== prevLast;
 		prevFirst = first;
 		prevLast = last;
-		prevLength = length;
 		const fromBottom = el.scrollHeight - el.scrollTop;
+		if (prepended || reset) {
+			busy = true;
+			requestAnimationFrame(() => requestAnimationFrame(() => (busy = false)));
+		}
 		tick().then(() => {
 			if (prepended) {
 				el.scrollTop = el.scrollHeight - fromBottom;
+			} else if (reset) {
+				pending = false;
+				if (untrack(() => follow)) scrollToBottom();
+				else el.scrollTop = 0;
 			} else if (appended) {
 				if (untrack(() => follow && stuck)) scrollToBottom();
 				else pending = true;
@@ -100,7 +113,7 @@
 		{#if items.length === 0 && empty}
 			{@render empty()}
 		{/if}
-		<div class="feed-items" {@attach pin}>
+		<div class="feed-items" role="log" aria-label={label} aria-busy={busy} {@attach pin}>
 			{#each items as entry, i (key(entry))}
 				{@render item(entry, i)}
 			{/each}
@@ -138,9 +151,10 @@
 	}
 	.jump {
 		position: absolute;
-		inset-inline-start: 50%;
+		inset-inline: 0;
 		bottom: var(--sp-3);
-		transform: translateX(-50%);
+		width: fit-content;
+		margin-inline: auto;
 		z-index: 1;
 		border-radius: var(--r-pill);
 		box-shadow: var(--shadow-md);

package/dist/components/organisms/ConversationFeed.svelte.d.ts

@@ -13,6 +13,8 @@ declare function $$render<T>(): {
         /** Stick to the bottom while the user is at the bottom. */
         follow?: boolean;
         jumpLabel?: string;
+        /** Accessible name of the message log. */
+        label?: string;
         class?: string;
         style?: string;
     };

package/dist/components/organisms/DataTable.svelte

@@ -87,9 +87,11 @@
 		/** Replaces a column's header content (e.g. a select-all checkbox). */
 		headerSnippets?: Record<string, Snippet<[Column<T>]>>;
 		empty?: string | Snippet;
+		/** Sticks within the table's own scroller, which also scrolls horizontally,
+		 *  so it only sticks when the table has a bounded height
+		 *  (e.g. `style="max-height: 60vh"`), not to the page. */
 		stickyHeader?: boolean;
-		/** Distance from the scroll container's top for the sticky header, e.g.
-		 *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+		/** Distance from the scroller's top for the sticky header. Defaults to 0. */
 		stickyOffset?: string;
 		/** `fixed` makes declared column widths authoritative (needed for truncate). */
 		layout?: 'auto' | 'fixed';
@@ -171,6 +173,13 @@
 
 	const colCount = $derived(columns.length + (rowActions ? 1 : 0));
 
+	const NESTED_CONTROL = 'a,button,input,select,textarea,label,summary,[role="button"],[contenteditable]';
+
+	function fromNestedControl(e: Event & { currentTarget: HTMLElement }): boolean {
+		const hit = (e.target as Element).closest(NESTED_CONTROL);
+		return !!hit && hit !== e.currentTarget && e.currentTarget.contains(hit);
+	}
+
 	function display(col: Column<T>, row: T): unknown {
 		if (col.get) return col.get(row);
 		return (row as Record<string, unknown>)[col.key];
@@ -245,7 +254,7 @@
 						{:else if col.sortable}
 							<button type="button" class="dt-sort" onclick={() => toggleSort(col)}>
 								<span>{col.label}</span>
-								<span class="dt-arrow" class:active={sortKey === col.key}>
+								<span class="dt-arrow" aria-hidden="true" class:active={sortKey === col.key}>
 									{sortKey === col.key ? (sortDir === 'asc' ? '↑' : '↓') : '↕'}
 								</span>
 							</button>
@@ -280,9 +289,14 @@
 						class:clickable={!!onrowclick}
 						class:toned={!!tone && tone !== 'neutral'}
 						tabindex={onrowclick ? 0 : undefined}
-						onclick={onrowclick ? () => onrowclick(row) : undefined}
+						onclick={onrowclick
+							? (e) => {
+									if (!fromNestedControl(e)) onrowclick(row);
+								}
+							: undefined}
 						onkeydown={onrowclick
 							? (e) => {
+									if (e.target !== e.currentTarget) return;
 									if (e.key === 'Enter' || e.key === ' ') {
 										e.preventDefault();
 										onrowclick(row);
@@ -432,7 +446,10 @@
 	tr.clickable:hover,
 	tr.clickable:focus-visible {
 		background: var(--bg-elevated-2);
-		outline: none;
+	}
+	tr.clickable:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
 	}
 	td.truncate {
 		white-space: nowrap;

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -38,9 +38,11 @@ declare function $$render<T>(): {
         /** Replaces a column's header content (e.g. a select-all checkbox). */
         headerSnippets?: Record<string, Snippet<[Column<T>]>>;
         empty?: string | Snippet;
+        /** Sticks within the table's own scroller, which also scrolls horizontally,
+         *  so it only sticks when the table has a bounded height
+         *  (e.g. `style="max-height: 60vh"`), not to the page. */
         stickyHeader?: boolean;
-        /** Distance from the scroll container's top for the sticky header, e.g.
-         *  `var(--header-h)` when the page header overlaps. Defaults to 0. */
+        /** Distance from the scroller's top for the sticky header. Defaults to 0. */
         stickyOffset?: string;
         /** `fixed` makes declared column widths authoritative (needed for truncate). */
         layout?: "auto" | "fixed";

package/dist/components/organisms/FilterSearchBar.svelte

@@ -29,6 +29,7 @@
 		size = 'md',
 		shape = 'square',
 		surface = 'base',
+		font = 'mono',
 		hotkey,
 		showHotkey = false,
 		grow = false,
@@ -56,6 +57,8 @@
 		size?: ControlSize;
 		shape?: 'square' | 'pill';
 		surface?: 'base' | 'raised' | 'sunken';
+		/** `sans` renders the typed text and placeholder in `--font-sans`; chips stay mono. */
+		font?: 'mono' | 'sans';
 		hotkey?: string;
 		showHotkey?: boolean;
 		grow?: boolean;
@@ -81,6 +84,7 @@
 	{size}
 	{shape}
 	{surface}
+	{font}
 	{hotkey}
 	{showHotkey}
 	{grow}

package/dist/components/organisms/FilterSearchBar.svelte.d.ts

@@ -19,6 +19,8 @@ type Own = {
     size?: ControlSize;
     shape?: 'square' | 'pill';
     surface?: 'base' | 'raised' | 'sunken';
+    /** `sans` renders the typed text and placeholder in `--font-sans`; chips stay mono. */
+    font?: 'mono' | 'sans';
     hotkey?: string;
     showHotkey?: boolean;
     grow?: boolean;

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';
@@ -41,6 +42,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as TabBar, type TabBarItem } from './components/layouts/TabBar.svelte';
 export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { type AccordionHeaderContext, type AccordionItem, type AccordionVariant, default as Accordion, } from './components/molecules/Accordion.svelte';
 export { type Attachment, default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
@@ -79,14 +81,17 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 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 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 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';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';
@@ -94,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';
@@ -103,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';