@dorsk/tsumikit 0.72.0 → 0.73.1

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/DataTable.svelte

@@ -503,6 +503,18 @@
 		.dt-actions {
 			opacity: 1;
 		}
+		/* 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 {
+			position: relative;
+		}
+		.dt-sort::before {
+			content: '';
+			position: absolute;
+			inset-block: var(--touch-slab);
+			inset-inline-start: var(--touch-slab);
+			inset-inline-end: 0;
+		}
 	}
 	@container (max-width: 30rem) {
 		[data-hide-below='sm'] {

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;

package/dist/media-time.js

@@ -0,0 +1,25 @@
+/** Seconds as `m:ss`, or `h:mm:ss` once the value (or `ref`) reaches an hour. */
+export function formatMediaTime(seconds, ref = seconds) {
+    if (!Number.isFinite(seconds))
+        return '--:--';
+    const neg = seconds < 0;
+    const total = Math.floor(Math.abs(seconds));
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const pad = (n) => String(n).padStart(2, '0');
+    const hours = h > 0 || (Number.isFinite(ref) && Math.abs(ref) >= 3600);
+    const body = hours ? `${h}:${pad(m)}:${pad(s)}` : `${m}:${pad(s)}`;
+    return neg ? `-${body}` : body;
+}
+/** True when a duration cannot be scrubbed: unknown, live, or empty. */
+export function isLiveDuration(duration) {
+    return duration == null || !Number.isFinite(duration) || duration <= 0;
+}
+/** Spoken position: "1:02 of 23:45", or just the position when live. */
+export function describeMediaTime(value, duration, format = formatMediaTime) {
+    if (isLiveDuration(duration))
+        return format(value);
+    const d = duration;
+    return `${format(value, d)} of ${format(d, d)}`;
+}

package/dist/query/edit.js

@@ -8,6 +8,7 @@
 // step opens, so spaces land inside the quotes — the already-supported phrase
 // form — without any grammar change. UI-free and framework-agnostic.
 // ─────────────────────────────────────────────────────────────────────────
+import { openQuoteAt } from './quotes';
 import { findField } from './schema';
 // A field name immediately followed by a string operator (`:` contains / `!:`
 // not-contains), anchored at the caret.
@@ -32,22 +33,6 @@ export function autoQuoteEdit(schema, value, pos) {
         return null;
     return { value: `${value.slice(0, pos)}""${value.slice(pos)}`, pos: pos + 1 };
 }
-// Scan from the start tracking quote state (spaces inside quotes are NOT
-// boundaries), so the caret's quote context is correct even for `"star wars"`.
-function openQuoteAt(value, pos) {
-    let quote = null;
-    for (let i = 0; i < pos; i++) {
-        const c = value[i];
-        if (quote) {
-            if (c === quote)
-                quote = null;
-        }
-        else if (isQuote(c)) {
-            quote = c;
-        }
-    }
-    return quote;
-}
 /** True when the caret sits inside an open quote. */
 export function insideQuoteAtCaret(value, pos) {
     return openQuoteAt(value, pos) !== null;