@r2digisolutions/components 0.2.0 → 0.3.0

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

@@ -1,11 +1,24 @@
-import type { MediaTrack } from '../../../utils/mediaTracks.js';
+import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
 interface ProgramMonitorProps {
     width?: number;
     height?: number;
     background?: string;
     currentTimeMs?: number;
+    playing?: boolean;
+    playbackRate?: number;
+    muted?: boolean;
+    volume?: number;
     tracks?: MediaTrack[];
+    selectedClipIds?: string[];
+    /** When true, selected overlays can be dragged / resized on the frame */
+    editable?: boolean;
     class?: string;
+    onselectclip?: (clipId: string, e: MouseEvent) => void;
+    onchangeclip?: (clip: MediaClip) => void;
+    /** Batch update (multi-drag). Falls back to repeated onchangeclip. */
+    onchangeclips?: (clips: MediaClip[]) => void;
+    onemptyclick?: () => void;
+    onselectionchange?: (clipIds: string[]) => void;
 }
 declare const ProgramMonitor: import("svelte").Component<ProgramMonitorProps, {}, "">;
 type ProgramMonitor = ReturnType<typeof ProgramMonitor>;

package/dist/components/molecules/SplitPane/SplitPane.svelte

@@ -180,7 +180,7 @@
 		className
 	]}
 >
-	<div class="min-h-0 min-w-0 overflow-hidden" style={startStyle}>
+	<div class="flex h-full min-h-0 min-w-0 flex-col overflow-hidden" style={startStyle}>
 		{#if start}
 			{@render start()}
 		{/if}
@@ -202,7 +202,7 @@
 		/>
 	{/if}
 
-	<div class="min-h-0 min-w-0 overflow-hidden" style={endStyle}>
+	<div class="flex h-full min-h-0 min-w-0 flex-col overflow-hidden" style={endStyle}>
 		{#if end}
 			{@render end()}
 		{/if}

package/dist/components/molecules/TimelineClip/TimelineClip.svelte

@@ -11,9 +11,12 @@
 		locked?: boolean;
 		class?: string;
 		onclick?: (e: MouseEvent) => void;
+		oncontextmenu?: (e: MouseEvent) => void;
 		onmove?: (startMs: number) => void;
 		ontrimstart?: (startMs: number) => void;
 		ontrimend?: (endMs: number) => void;
+		ondragoverclip?: (e: DragEvent) => void;
+		ondropclip?: (e: DragEvent) => void;
 	}
 
 	let {
@@ -23,39 +26,54 @@
 		locked = false,
 		class: className = '',
 		onclick,
+		oncontextmenu,
 		onmove,
 		ontrimstart,
-		ontrimend
+		ontrimend,
+		ondragoverclip,
+		ondropclip
 	}: TimelineClipProps = $props();
 
 	const left = $derived(msToPx(clip.startMs, pxPerMs));
 	const width = $derived(Math.max(8, msToPx(clip.endMs - clip.startMs, pxPerMs)));
 	const bg = $derived(clip.color ?? '#3b82f6');
+	const inW = $derived(
+		clip.animationIn ? Math.min(width * 0.45, msToPx(clip.animationIn.durationMs, pxPerMs)) : 0
+	);
+	const outW = $derived(
+		clip.animationOut ? Math.min(width * 0.45, msToPx(clip.animationOut.durationMs, pxPerMs)) : 0
+	);
+	const transW = $derived(
+		clip.transitionOut
+			? Math.min(width * 0.5, Math.max(10, msToPx(clip.transitionOut.durationMs, pxPerMs)))
+			: 0
+	);
 
-	let dragMode = $state<'move' | 'trimStart' | 'trimEnd' | null>(null);
+	let dragMode = $state<'move' | null>(null);
 	let originX = $state(0);
 	let originStart = $state(0);
-	let originEnd = $state(0);
 
 	function beginMove(e: PointerEvent) {
-		if (locked) return;
+		if (locked || e.button !== 0) return;
+		e.stopPropagation();
+		e.preventDefault();
 		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
 		dragMode = 'move';
 		originX = e.clientX;
 		originStart = clip.startMs;
-		originEnd = clip.endMs;
 	}
 
 	function onPointerMove(e: PointerEvent) {
-		if (!dragMode || locked) return;
+		if (locked) return;
+		if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return;
+		if (dragMode !== 'move') return;
 		const deltaMs = (e.clientX - originX) / pxPerMs;
-		if (dragMode === 'move') onmove?.(Math.max(0, originStart + deltaMs));
-		if (dragMode === 'trimStart') ontrimstart?.(originStart + deltaMs);
-		if (dragMode === 'trimEnd') ontrimend?.(originEnd + deltaMs);
+		onmove?.(Math.max(0, originStart + deltaMs));
 	}
 
 	function onPointerUp(e: PointerEvent) {
-		(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+		const el = e.currentTarget as HTMLElement;
+		if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId);
 		dragMode = null;
 	}
 </script>
@@ -67,27 +85,82 @@
 	aria-label={clip.name}
 	aria-pressed={selected}
 	class={[
-		'absolute top-1 bottom-1 overflow-hidden rounded-md border text-left text-xs text-white shadow-sm',
-		selected ? 'ring-2 ring-white/80 ring-offset-1 ring-offset-transparent' : 'border-black/20',
-		locked ? 'cursor-not-allowed opacity-70' : 'cursor-grab active:cursor-grabbing',
+		'absolute top-1 bottom-1 z-1 touch-none overflow-hidden rounded-md border text-left text-xs text-white shadow-sm',
+		selected
+			? 'z-10 border-2 border-white shadow-md ring-2 ring-brand-500 ring-offset-1 ring-offset-surface'
+			: 'border-black/25',
+		locked ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing',
 		className
 	]}
 	style:left={`${left}px`}
 	style:width={`${width}px`}
 	style:background={bg}
+	style:opacity={locked ? Math.min(0.7, clip.opacity ?? 1) : (clip.opacity ?? 1)}
+	style:filter={selected ? 'brightness(1.12)' : undefined}
+	data-marquee-id={clip.id}
 	onclick={(e) => {
 		e.stopPropagation();
 		onclick?.(e);
 	}}
+	oncontextmenu={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
 	onpointerdown={beginMove}
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
+	ondragover={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		ondragoverclip?.(e);
+	}}
+	ondrop={(e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		ondropclip?.(e);
+	}}
 >
+	<!-- CapCut-style: In wedge -->
+	{#if clip.animationIn && inW > 2}
+		<div
+			class="pointer-events-none absolute inset-y-0 left-0 z-0 bg-gradient-to-r from-emerald-400/70 to-transparent"
+			style:width={`${inW}px`}
+			title={`In: ${clip.animationIn.type}`}
+		></div>
+	{/if}
+	<!-- CapCut-style: Out wedge -->
+	{#if clip.animationOut && outW > 2}
+		<div
+			class="pointer-events-none absolute inset-y-0 right-0 z-0 bg-gradient-to-l from-amber-400/70 to-transparent"
+			style:width={`${outW}px`}
+			title={`Out: ${clip.animationOut.type}`}
+		></div>
+	{/if}
+	<!-- Transition window at clip end -->
+	{#if clip.transitionOut && transW > 2}
+		<div
+			class="pointer-events-none absolute inset-y-0 right-0 z-[1] bg-gradient-to-l from-fuchsia-500/55 to-transparent"
+			style:width={`${transW}px`}
+			title={`Transition: ${clip.transitionOut.type} · ${(clip.transitionOut.durationMs / 1000).toFixed(1)}s`}
+		></div>
+	{/if}
+	<!-- CapCut-style: transition diamond at clip end -->
+	{#if clip.transitionOut}
+		<div
+			class="pointer-events-none absolute top-1/2 right-0 z-20 flex h-4 w-4 -translate-y-1/2 translate-x-1/2 items-center justify-center"
+			title={`Transition: ${clip.transitionOut.type}`}
+		>
+			<span
+				class="block h-2.5 w-2.5 rotate-45 border border-white/80 bg-fuchsia-400 shadow-sm"
+			></span>
+		</div>
+	{/if}
+
 	<TrimHandle
 		side="start"
 		disabled={locked}
 		ondragstart={(e) => {
-			dragMode = 'trimStart';
 			originX = e.clientX;
 			originStart = clip.startMs;
 		}}
@@ -96,21 +169,25 @@
 			ontrimstart?.(originStart + deltaMs);
 		}}
 	/>
-	<div class="pointer-events-none flex h-full items-center gap-1.5 overflow-hidden px-2">
+	<div class="pointer-events-none relative z-10 flex h-full items-center gap-1.5 overflow-hidden px-2">
 		<MediaKindIcon kind={clip.kind} size="sm" class="shrink-0 opacity-90" />
 		<span class="truncate font-medium">{clip.name}</span>
+		{#if clip.animationIn || clip.animationOut}
+			<span class="ml-auto shrink-0 rounded bg-black/25 px-1 text-[9px] uppercase tracking-wide">
+				{clip.animationIn && clip.animationOut ? 'I/O' : clip.animationIn ? 'In' : 'Out'}
+			</span>
+		{/if}
 	</div>
 	<TrimHandle
 		side="end"
 		disabled={locked}
 		ondragstart={(e) => {
-			dragMode = 'trimEnd';
 			originX = e.clientX;
-			originEnd = clip.endMs;
+			originStart = clip.endMs;
 		}}
 		ondrag={(e) => {
 			const deltaMs = (e.clientX - originX) / pxPerMs;
-			ontrimend?.(originEnd + deltaMs);
+			ontrimend?.(originStart + deltaMs);
 		}}
 	/>
 </div>

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

@@ -6,9 +6,12 @@ interface TimelineClipProps {
     locked?: boolean;
     class?: string;
     onclick?: (e: MouseEvent) => void;
+    oncontextmenu?: (e: MouseEvent) => void;
     onmove?: (startMs: number) => void;
     ontrimstart?: (startMs: number) => void;
     ontrimend?: (endMs: number) => void;
+    ondragoverclip?: (e: DragEvent) => void;
+    ondropclip?: (e: DragEvent) => void;
 }
 declare const TimelineClip: import("svelte").Component<TimelineClipProps, {}, "">;
 type TimelineClip = ReturnType<typeof TimelineClip>;

package/dist/components/molecules/TimelineTrack/TimelineTrack.svelte

@@ -3,53 +3,123 @@
 	import TimelineClip from '../TimelineClip/TimelineClip.svelte';
 	import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
 	import { moveClip, trimClipEnd, trimClipStart } from '../../../utils/mediaTracks.js';
+	import { snapMs } from '../../../utils/mediaTime.js';
 
 	interface TimelineTrackProps {
 		track: MediaTrack;
 		pxPerMs?: number;
 		durationMs?: number;
-		selectedClipId?: string | null;
+		selectedClipIds?: string[];
 		height?: number;
+		snapToMs?: number;
+		headerWidth?: number;
 		header?: Snippet;
 		class?: string;
-		onselectclip?: (clipId: string) => void;
+		onselectclip?: (clipId: string, e: MouseEvent) => void;
+		oncontextmenuclip?: (clipId: string, e: MouseEvent) => void;
 		onchangeclip?: (clip: MediaClip) => void;
+		/** Move one or more clips by a shared delta (ms). Prefer over onchangeclip for moves. */
+		onmoveclips?: (clipIds: string[], deltaMs: number) => void;
+		ondropclip?: (clipId: string, e: DragEvent) => void;
+		oncontextmenutrack?: (trackId: string, e: MouseEvent) => void;
+		/** Empty lane click (deselect) */
+		onemptyclick?: (e: MouseEvent) => void;
+		/** Drop library item onto empty track area */
+		ondroptrack?: (trackId: string, e: DragEvent, timeMs: number) => void;
 	}
 
 	let {
 		track,
 		pxPerMs = 0.05,
 		durationMs = 30_000,
-		selectedClipId = null,
+		selectedClipIds = [],
 		height = 44,
+		snapToMs = 0,
+		headerWidth = 144,
 		header,
 		class: className = '',
 		onselectclip,
-		onchangeclip
+		oncontextmenuclip,
+		onchangeclip,
+		onmoveclips,
+		ondropclip,
+		oncontextmenutrack,
+		onemptyclick,
+		ondroptrack
 	}: TimelineTrackProps = $props();
 
 	const width = $derived(Math.max(1, durationMs * pxPerMs));
+	const selectedSet = $derived(new Set(selectedClipIds));
+
+	function snap(ms: number) {
+		return snapToMs > 0 ? snapMs(ms, snapToMs) : ms;
+	}
+
+	function handleMove(clip: MediaClip, startMs: number) {
+		const nextStart = snap(startMs);
+		const delta = nextStart - clip.startMs;
+		if (delta === 0) return;
+		const ids =
+			selectedSet.has(clip.id) && selectedClipIds.length > 1 ? [...selectedClipIds] : [clip.id];
+		if (onmoveclips) {
+			onmoveclips(ids, delta);
+			return;
+		}
+		onchangeclip?.(moveClip(clip, nextStart));
+	}
 </script>
 
-<div class={['flex min-w-0 border-b border-border', className]} style:height={`${height}px`}>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={['relative z-[1] flex min-w-0 border-b border-border', className]}
+	style:height={`${height}px`}
+	oncontextmenu={(e) => {
+		const t = e.target as HTMLElement;
+		if (t.closest('[aria-label]') && t.getAttribute('role') === 'button') return;
+		oncontextmenutrack?.(track.id, e);
+	}}
+>
 	{#if header}
 		<div
-			class="sticky left-0 z-10 flex w-36 shrink-0 items-center gap-2 border-r border-border bg-surface-elevated px-2"
+			class="sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-surface-elevated px-1"
+			style:width={`${headerWidth}px`}
 		>
 			{@render header()}
 		</div>
 	{/if}
-	<div class="relative min-w-0 flex-1 overflow-hidden bg-surface/60" style:width={`${width}px`}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="relative min-w-0 flex-1 overflow-hidden bg-transparent"
+		style:width={`${width}px`}
+		role="presentation"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) onemptyclick?.(e);
+		}}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+		}}
+		ondrop={(e) => {
+			if ((e.target as HTMLElement).closest('[data-marquee-id]')) return;
+			e.preventDefault();
+			const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const timeMs = snap(Math.max(0, x / pxPerMs));
+			ondroptrack?.(track.id, e, timeMs);
+		}}
+	>
 		{#each track.clips as clip (clip.id)}
 			<TimelineClip
 				{clip}
 				{pxPerMs}
-				selected={selectedClipId === clip.id}
+				selected={selectedSet.has(clip.id)}
 				locked={track.locked}
-				onclick={() => onselectclip?.(clip.id)}
-				onmove={(startMs) => onchangeclip?.(moveClip(clip, startMs))}
-				ontrimstart={(startMs) => onchangeclip?.(trimClipStart(clip, startMs))}
-				ontrimend={(endMs) => onchangeclip?.(trimClipEnd(clip, endMs))}
+				onclick={(e) => onselectclip?.(clip.id, e)}
+				oncontextmenu={(e) => oncontextmenuclip?.(clip.id, e)}
+				onmove={(startMs) => handleMove(clip, startMs)}
+				ontrimstart={(startMs) => onchangeclip?.(trimClipStart(clip, snap(startMs)))}
+				ontrimend={(endMs) => onchangeclip?.(trimClipEnd(clip, snap(endMs)))}
+				ondropclip={(e) => ondropclip?.(clip.id, e)}
 			/>
 		{/each}
 	</div>

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

@@ -4,12 +4,23 @@ interface TimelineTrackProps {
     track: MediaTrack;
     pxPerMs?: number;
     durationMs?: number;
-    selectedClipId?: string | null;
+    selectedClipIds?: string[];
     height?: number;
+    snapToMs?: number;
+    headerWidth?: number;
     header?: Snippet;
     class?: string;
-    onselectclip?: (clipId: string) => void;
+    onselectclip?: (clipId: string, e: MouseEvent) => void;
+    oncontextmenuclip?: (clipId: string, e: MouseEvent) => void;
     onchangeclip?: (clip: MediaClip) => void;
+    /** Move one or more clips by a shared delta (ms). Prefer over onchangeclip for moves. */
+    onmoveclips?: (clipIds: string[], deltaMs: number) => void;
+    ondropclip?: (clipId: string, e: DragEvent) => void;
+    oncontextmenutrack?: (trackId: string, e: MouseEvent) => void;
+    /** Empty lane click (deselect) */
+    onemptyclick?: (e: MouseEvent) => void;
+    /** Drop library item onto empty track area */
+    ondroptrack?: (trackId: string, e: DragEvent, timeMs: number) => void;
 }
 declare const TimelineTrack: import("svelte").Component<TimelineTrackProps, {}, "">;
 type TimelineTrack = ReturnType<typeof TimelineTrack>;

package/dist/components/molecules/TransportControls/TransportControls.svelte

@@ -1,34 +1,84 @@
 <script lang="ts">
 	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import VolumeControl from '../VolumeControl/VolumeControl.svelte';
 	import Toolbar from '../Toolbar/Toolbar.svelte';
 	import { formatTimecode } from '../../../utils/mediaTime.js';
 	import Play from '@lucide/svelte/icons/play';
 	import Pause from '@lucide/svelte/icons/pause';
 	import Square from '@lucide/svelte/icons/square';
+	import SkipBack from '@lucide/svelte/icons/skip-back';
+	import SkipForward from '@lucide/svelte/icons/skip-forward';
+	import ArrowLeftToLine from '@lucide/svelte/icons/arrow-left-to-line';
+	import ArrowRightToLine from '@lucide/svelte/icons/arrow-right-to-line';
+
+	const RATE_OPTIONS = [0.5, 1, 1.5, 2] as const;
 
 	interface TransportControlsProps {
 		playing?: boolean;
 		currentTimeMs?: number;
 		durationMs?: number;
+		playbackRate?: number;
+		muted?: boolean;
+		volume?: number;
+		/** Skip step in ms (default 5s) */
+		skipMs?: number;
 		class?: string;
 		onplay?: () => void;
 		onpause?: () => void;
 		onstop?: () => void;
+		onseekstart?: () => void;
+		onseekend?: () => void;
+		onseekback?: () => void;
+		onseekforward?: () => void;
+		onratechange?: (rate: number) => void;
+		onmutechange?: (muted: boolean) => void;
+		onvolumechange?: (volume: number) => void;
 	}
 
 	let {
 		playing = false,
 		currentTimeMs = 0,
 		durationMs = 0,
+		playbackRate = $bindable(1),
+		muted = $bindable(false),
+		volume = $bindable(1),
+		skipMs = 5000,
 		class: className = '',
 		onplay,
 		onpause,
-		onstop
+		onstop,
+		onseekstart,
+		onseekend,
+		onseekback,
+		onseekforward,
+		onratechange,
+		onmutechange,
+		onvolumechange
 	}: TransportControlsProps = $props();
+
+	function cycleRate() {
+		const idx = RATE_OPTIONS.indexOf(playbackRate as (typeof RATE_OPTIONS)[number]);
+		const next = RATE_OPTIONS[(idx + 1) % RATE_OPTIONS.length] ?? 1;
+		playbackRate = next;
+		onratechange?.(next);
+	}
+
+	const rateLabel = $derived(`${playbackRate}×`);
 </script>
 
 <Toolbar label="Transport" dense class={className}>
 	{#snippet center()}
+		<IconButton label="Go to start" size="sm" variant="ghost" onclick={() => onseekstart?.()}>
+			<ArrowLeftToLine class="h-4 w-4" />
+		</IconButton>
+		<IconButton
+			label={`Skip back ${skipMs / 1000}s`}
+			size="sm"
+			variant="ghost"
+			onclick={() => onseekback?.()}
+		>
+			<SkipBack class="h-4 w-4" />
+		</IconButton>
 		<IconButton
 			label={playing ? 'Pause' : 'Play'}
 			size="sm"
@@ -41,13 +91,45 @@
 				<Play class="h-4 w-4" />
 			{/if}
 		</IconButton>
+		<IconButton
+			label={`Skip forward ${skipMs / 1000}s`}
+			size="sm"
+			variant="ghost"
+			onclick={() => onseekforward?.()}
+		>
+			<SkipForward class="h-4 w-4" />
+		</IconButton>
+		<IconButton label="Go to end" size="sm" variant="ghost" onclick={() => onseekend?.()}>
+			<ArrowRightToLine class="h-4 w-4" />
+		</IconButton>
 		<IconButton label="Stop" size="sm" variant="ghost" onclick={() => onstop?.()}>
 			<Square class="h-3.5 w-3.5" />
 		</IconButton>
+
+		<button
+			type="button"
+			class="ml-1 inline-flex h-7 min-w-9 items-center justify-center rounded-md px-1.5 font-mono text-[11px] font-semibold tabular-nums text-secondary transition-colors hover:bg-surface-overlay hover:text-primary"
+			aria-label={`Playback speed ${rateLabel}`}
+			title="Playback speed"
+			onclick={cycleRate}
+		>
+			{rateLabel}
+		</button>
+
 		<span class="ml-2 font-mono text-xs text-secondary tabular-nums">
-			{formatTimecode(currentTimeMs, { showMs: true })}
+			{formatTimecode(currentTimeMs)}
 			<span class="text-muted"> / </span>
 			{formatTimecode(durationMs)}
 		</span>
 	{/snippet}
+
+	{#snippet end()}
+		<VolumeControl
+			bind:value={volume}
+			bind:muted
+			variant="compact"
+			onchange={(v) => onvolumechange?.(v)}
+			onmutechange={(m) => onmutechange?.(m)}
+		/>
+	{/snippet}
 </Toolbar>

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

@@ -2,11 +2,23 @@ interface TransportControlsProps {
     playing?: boolean;
     currentTimeMs?: number;
     durationMs?: number;
+    playbackRate?: number;
+    muted?: boolean;
+    volume?: number;
+    /** Skip step in ms (default 5s) */
+    skipMs?: number;
     class?: string;
     onplay?: () => void;
     onpause?: () => void;
     onstop?: () => void;
+    onseekstart?: () => void;
+    onseekend?: () => void;
+    onseekback?: () => void;
+    onseekforward?: () => void;
+    onratechange?: (rate: number) => void;
+    onmutechange?: (muted: boolean) => void;
+    onvolumechange?: (volume: number) => void;
 }
-declare const TransportControls: import("svelte").Component<TransportControlsProps, {}, "">;
+declare const TransportControls: import("svelte").Component<TransportControlsProps, {}, "muted" | "volume" | "playbackRate">;
 type TransportControls = ReturnType<typeof TransportControls>;
 export default TransportControls;

package/dist/components/molecules/TransportControls/TransportControlsStory.svelte

@@ -3,16 +3,38 @@
 
 	let playing = $state(false);
 	let t = $state(1250);
+	let playbackRate = $state(1);
+	let muted = $state(false);
+	let volume = $state(1);
+	const durationMs = 30000;
+	const SKIP_MS = 5000;
+
+	function seekBy(delta: number) {
+		t = Math.max(0, Math.min(durationMs, t + delta));
+	}
 </script>
 
-<TransportControls
-	{playing}
-	currentTimeMs={t}
-	durationMs={30000}
-	onplay={() => (playing = true)}
-	onpause={() => (playing = false)}
-	onstop={() => {
-		playing = false;
-		t = 0;
-	}}
-/>
+<div class="space-y-3 p-4">
+	<TransportControls
+		{playing}
+		currentTimeMs={t}
+		{durationMs}
+		bind:playbackRate
+		bind:muted
+		bind:volume
+		skipMs={SKIP_MS}
+		onplay={() => (playing = true)}
+		onpause={() => (playing = false)}
+		onstop={() => {
+			playing = false;
+			t = 0;
+		}}
+		onseekstart={() => (t = 0)}
+		onseekend={() => (t = durationMs)}
+		onseekback={() => seekBy(-SKIP_MS)}
+		onseekforward={() => seekBy(SKIP_MS)}
+	/>
+	<p class="text-xs text-muted">
+		Rate {playbackRate}× · {muted ? 'Muted' : `Vol ${Math.round(volume * 100)}%`}
+	</p>
+</div>

package/dist/components/molecules/VideoAnimationsPanel/VideoAnimationsPanel.stories.js

@@ -0,0 +1,8 @@
+import VideoAnimationsPanelStory from './VideoAnimationsPanelStory.svelte';
+const meta = {
+    title: 'Molecules/VideoAnimationsPanel',
+    component: VideoAnimationsPanelStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};