@r2digisolutions/components 0.1.7 → 0.3.0

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

@@ -0,0 +1,135 @@
+<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,
+		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"
+			variant="secondary"
+			onclick={() => (playing ? onpause?.() : onplay?.())}
+		>
+			{#if playing}
+				<Pause class="h-4 w-4" />
+			{:else}
+				<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)}
+			<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

@@ -0,0 +1,24 @@
+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, {}, "muted" | "volume" | "playbackRate">;
+type TransportControls = ReturnType<typeof TransportControls>;
+export default TransportControls;

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import TransportControls from './TransportControls.svelte';
+
+	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>
+
+<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/TransportControls/TransportControlsStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TransportControlsStory: import("svelte").Component<Record<string, never>, {}, "">;
+type TransportControlsStory = ReturnType<typeof TransportControlsStory>;
+export default TransportControlsStory;

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

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

package/dist/components/molecules/VersionHistoryPanel/VersionHistoryPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import VersionTag from '../../atoms/VersionTag/VersionTag.svelte';
+	import DiffViewer from '../DiffViewer/DiffViewer.svelte';
+	import TimeAgo from '../TimeAgo/TimeAgo.svelte';
+
+	export interface VersionRevision {
+		id: string;
+		label: string;
+		author?: string;
+		createdAt?: string | Date | number;
+		summary?: string;
+		content?: string;
+		previousContent?: string;
+	}
+
+	interface VersionHistoryPanelProps {
+		revisions?: VersionRevision[];
+		selectedId?: string;
+		currentContent?: string;
+		class?: string;
+		onselect?: (revision: VersionRevision) => void;
+		onrestore?: (revision: VersionRevision) => void;
+	}
+
+	let {
+		revisions = [],
+		selectedId = $bindable(''),
+		currentContent = '',
+		class: className = '',
+		onselect,
+		onrestore
+	}: VersionHistoryPanelProps = $props();
+
+	const selected = $derived(
+		revisions.find((r) => r.id === selectedId) ?? revisions[0] ?? null
+	);
+
+	$effect(() => {
+		if (!selectedId && revisions[0]) selectedId = revisions[0].id;
+	});
+
+	function pick(rev: VersionRevision) {
+		selectedId = rev.id;
+		onselect?.(rev);
+	}
+</script>
+
+<div
+	class={[
+		'grid overflow-hidden rounded-xl border border-border bg-surface-elevated md:grid-cols-[240px_1fr]',
+		className
+	]}
+	data-version-history
+>
+	<aside class="max-h-[420px] overflow-auto border-b border-border md:border-b-0 md:border-r">
+		<ul class="p-2">
+			{#each revisions as rev (rev.id)}
+				<li>
+					<button
+						type="button"
+						class={[
+							'flex w-full flex-col gap-0.5 rounded-lg px-2.5 py-2 text-left transition-colors',
+							selected?.id === rev.id
+								? 'bg-brand-50 dark:bg-brand-950/40'
+								: 'hover:bg-surface-overlay'
+						]}
+						onclick={() => pick(rev)}
+					>
+						<div class="flex items-center justify-between gap-2">
+							<span class="truncate text-sm font-medium text-primary">{rev.label}</span>
+							<VersionTag version={rev.label} prefix="" />
+						</div>
+						{#if rev.author || rev.createdAt}
+							<p class="text-[11px] text-muted">
+								{#if rev.author}{rev.author} · {/if}
+								{#if rev.createdAt}
+									<TimeAgo date={rev.createdAt} />
+								{/if}
+							</p>
+						{/if}
+						{#if rev.summary}
+							<p class="truncate text-[11px] text-secondary">{rev.summary}</p>
+						{/if}
+					</button>
+				</li>
+			{/each}
+			{#if !revisions.length}
+				<li class="px-2 py-6 text-center text-xs text-muted">No revisions</li>
+			{/if}
+		</ul>
+	</aside>
+
+	<section class="flex min-h-0 flex-col gap-2 p-3">
+		{#if selected}
+			<div class="flex items-center justify-between gap-2">
+				<div>
+					<p class="text-sm font-semibold text-primary">{selected.label}</p>
+					{#if selected.summary}
+						<p class="text-xs text-muted">{selected.summary}</p>
+					{/if}
+				</div>
+				<Button size="sm" variant="secondary" onclick={() => onrestore?.(selected)}>
+					Restore
+				</Button>
+			</div>
+			<DiffViewer
+				before={selected.previousContent ?? selected.content ?? ''}
+				after={currentContent || selected.content || ''}
+				mode="split"
+				class="min-h-[280px] flex-1"
+			/>
+		{:else}
+			<p class="py-12 text-center text-sm text-muted">Select a revision</p>
+		{/if}
+	</section>
+</div>

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

@@ -0,0 +1,20 @@
+export interface VersionRevision {
+    id: string;
+    label: string;
+    author?: string;
+    createdAt?: string | Date | number;
+    summary?: string;
+    content?: string;
+    previousContent?: string;
+}
+interface VersionHistoryPanelProps {
+    revisions?: VersionRevision[];
+    selectedId?: string;
+    currentContent?: string;
+    class?: string;
+    onselect?: (revision: VersionRevision) => void;
+    onrestore?: (revision: VersionRevision) => void;
+}
+declare const VersionHistoryPanel: import("svelte").Component<VersionHistoryPanelProps, {}, "selectedId">;
+type VersionHistoryPanel = ReturnType<typeof VersionHistoryPanel>;
+export default VersionHistoryPanel;

package/dist/components/molecules/VersionHistoryPanel/VersionHistoryPanelStory.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import VersionHistoryPanel from './VersionHistoryPanel.svelte';
+
+	const revisions = [
+		{
+			id: 'v3',
+			label: '3.0.0',
+			author: 'Rafa',
+			createdAt: Date.now() - 3600_000,
+			summary: 'Tweaked intro copy',
+			previousContent: 'Hello world\nLine two',
+			content: 'Hello world\nLine two\nLine three'
+		},
+		{
+			id: 'v2',
+			label: '2.1.0',
+			author: 'Alex',
+			createdAt: Date.now() - 86400_000,
+			summary: 'Added section',
+			previousContent: 'Hello world',
+			content: 'Hello world\nLine two'
+		},
+		{
+			id: 'v1',
+			label: '1.0.0',
+			author: 'Alex',
+			createdAt: Date.now() - 7 * 86400_000,
+			summary: 'Initial',
+			content: 'Hello world'
+		}
+	];
+</script>
+
+<div class="p-4">
+	<VersionHistoryPanel {revisions} currentContent="Hello world\nLine two\nLine three\nFinal" />
+</div>

package/dist/components/molecules/VersionHistoryPanel/VersionHistoryPanelStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VersionHistoryPanelStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VersionHistoryPanelStory = InstanceType<typeof VersionHistoryPanelStory>;
+export default VersionHistoryPanelStory;

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 = {};

package/dist/components/molecules/VideoAnimationsPanel/VideoAnimationsPanel.svelte

@@ -0,0 +1,213 @@
+<script lang="ts" module>
+	export interface VideoAnimationDef {
+		id: string;
+		label: string;
+		group: string;
+		/** CapCut-style: In / Out / Combo (sets both) */
+		slot: 'in' | 'out' | 'combo';
+		type: string;
+		/** Used when slot is combo */
+		outType?: string;
+		durationMs: number;
+		glyph?: string;
+	}
+
+	export const VIDEO_ANIMATION_MIME = 'application/x-r2-video-animation';
+</script>
+
+<script lang="ts">
+	interface VideoAnimationsPanelProps {
+		class?: string;
+		disabled?: boolean;
+		hint?: string;
+		onapply?: (def: VideoAnimationDef) => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hint = 'Select a clip, or drag onto one',
+		onapply
+	}: VideoAnimationsPanelProps = $props();
+
+	const animations: VideoAnimationDef[] = [
+		/* —— In —— */
+		{ id: 'fade-in', label: 'Fade in', group: 'In', slot: 'in', type: 'fade', durationMs: 500, glyph: '↗' },
+		{ id: 'slide-up-in', label: 'Slide up', group: 'In', slot: 'in', type: 'slide-up', durationMs: 500, glyph: '↑' },
+		{ id: 'slide-down-in', label: 'Slide down', group: 'In', slot: 'in', type: 'slide-down', durationMs: 500, glyph: '↓' },
+		{ id: 'slide-left-in', label: 'Slide left', group: 'In', slot: 'in', type: 'slide-left', durationMs: 500, glyph: '←' },
+		{ id: 'slide-right-in', label: 'Slide right', group: 'In', slot: 'in', type: 'slide-right', durationMs: 500, glyph: '→' },
+		{ id: 'scale-in', label: 'Zoom in', group: 'In', slot: 'in', type: 'scale', durationMs: 400, glyph: '⊕' },
+		{ id: 'grow-in', label: 'Grow', group: 'In', slot: 'in', type: 'grow', durationMs: 450, glyph: '▣' },
+		{ id: 'shrink-in', label: 'Shrink in', group: 'In', slot: 'in', type: 'shrink', durationMs: 450, glyph: '▢' },
+		{ id: 'pop-in', label: 'Pop', group: 'In', slot: 'in', type: 'pop', durationMs: 450, glyph: '✦' },
+		{ id: 'rotate-in', label: 'Rotate in', group: 'In', slot: 'in', type: 'rotate', durationMs: 550, glyph: '↻' },
+		{ id: 'spin-in', label: 'Spin', group: 'In', slot: 'in', type: 'spin', durationMs: 600, glyph: '⟳' },
+		{ id: 'bounce-in', label: 'Bounce', group: 'In', slot: 'in', type: 'bounce', durationMs: 600, glyph: '↕' },
+		{ id: 'drop-in', label: 'Drop', group: 'In', slot: 'in', type: 'drop', durationMs: 550, glyph: '⬇' },
+		{ id: 'swing-in', label: 'Swing', group: 'In', slot: 'in', type: 'swing', durationMs: 600, glyph: '∿' },
+		{ id: 'flip-x-in', label: 'Flip H', group: 'In', slot: 'in', type: 'flip-x', durationMs: 550, glyph: '↔' },
+		{ id: 'flip-y-in', label: 'Flip V', group: 'In', slot: 'in', type: 'flip-y', durationMs: 550, glyph: '↕' },
+		{ id: 'skew-in', label: 'Skew', group: 'In', slot: 'in', type: 'skew', durationMs: 500, glyph: '▱' },
+		{ id: 'expand-h-in', label: 'Expand H', group: 'In', slot: 'in', type: 'expand-h', durationMs: 500, glyph: '⟷' },
+		{ id: 'expand-v-in', label: 'Expand V', group: 'In', slot: 'in', type: 'expand-v', durationMs: 500, glyph: '↕︎' },
+		{ id: 'blur-in', label: 'Blur in', group: 'In', slot: 'in', type: 'blur', durationMs: 550, glyph: '◈' },
+		{ id: 'glow-in', label: 'Glow', group: 'In', slot: 'in', type: 'glow', durationMs: 500, glyph: '✧' },
+		/* —— Out —— */
+		{ id: 'fade-out', label: 'Fade out', group: 'Out', slot: 'out', type: 'fade', durationMs: 500, glyph: '↘' },
+		{ id: 'slide-up-out', label: 'Slide up', group: 'Out', slot: 'out', type: 'slide-up', durationMs: 500, glyph: '↑' },
+		{ id: 'slide-down-out', label: 'Slide down', group: 'Out', slot: 'out', type: 'slide-down', durationMs: 500, glyph: '↓' },
+		{ id: 'slide-left-out', label: 'Slide left', group: 'Out', slot: 'out', type: 'slide-left', durationMs: 500, glyph: '←' },
+		{ id: 'slide-right-out', label: 'Slide right', group: 'Out', slot: 'out', type: 'slide-right', durationMs: 500, glyph: '→' },
+		{ id: 'scale-out', label: 'Zoom out', group: 'Out', slot: 'out', type: 'scale', durationMs: 400, glyph: '⊖' },
+		{ id: 'grow-out', label: 'Grow out', group: 'Out', slot: 'out', type: 'grow', durationMs: 450, glyph: '▣' },
+		{ id: 'shrink-out', label: 'Shrink', group: 'Out', slot: 'out', type: 'shrink', durationMs: 450, glyph: '▢' },
+		{ id: 'pop-out', label: 'Pop out', group: 'Out', slot: 'out', type: 'pop', durationMs: 450, glyph: '✧' },
+		{ id: 'rotate-out', label: 'Rotate out', group: 'Out', slot: 'out', type: 'rotate', durationMs: 550, glyph: '↺' },
+		{ id: 'spin-out', label: 'Spin out', group: 'Out', slot: 'out', type: 'spin', durationMs: 600, glyph: '⟲' },
+		{ id: 'bounce-out', label: 'Bounce', group: 'Out', slot: 'out', type: 'bounce', durationMs: 600, glyph: '↕' },
+		{ id: 'drop-out', label: 'Drop', group: 'Out', slot: 'out', type: 'drop', durationMs: 550, glyph: '⬇' },
+		{ id: 'swing-out', label: 'Swing', group: 'Out', slot: 'out', type: 'swing', durationMs: 600, glyph: '∿' },
+		{ id: 'flip-x-out', label: 'Flip H', group: 'Out', slot: 'out', type: 'flip-x', durationMs: 550, glyph: '↔' },
+		{ id: 'flip-y-out', label: 'Flip V', group: 'Out', slot: 'out', type: 'flip-y', durationMs: 550, glyph: '↕' },
+		{ id: 'skew-out', label: 'Skew', group: 'Out', slot: 'out', type: 'skew', durationMs: 500, glyph: '▱' },
+		{ id: 'expand-h-out', label: 'Collapse H', group: 'Out', slot: 'out', type: 'expand-h', durationMs: 500, glyph: '⟷' },
+		{ id: 'expand-v-out', label: 'Collapse V', group: 'Out', slot: 'out', type: 'expand-v', durationMs: 500, glyph: '↕︎' },
+		{ id: 'blur-out', label: 'Blur out', group: 'Out', slot: 'out', type: 'blur', durationMs: 550, glyph: '◈' },
+		{ id: 'glow-out', label: 'Glow out', group: 'Out', slot: 'out', type: 'glow', durationMs: 500, glyph: '✧' },
+		/* —— Combo —— */
+		{
+			id: 'fade-io',
+			label: 'Fade I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'fade',
+			outType: 'fade',
+			durationMs: 500,
+			glyph: '↕'
+		},
+		{
+			id: 'slide-io',
+			label: 'Slide I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'slide-up',
+			outType: 'slide-down',
+			durationMs: 500,
+			glyph: '⇅'
+		},
+		{
+			id: 'zoom-io',
+			label: 'Zoom I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'scale',
+			outType: 'scale',
+			durationMs: 400,
+			glyph: '⊙'
+		},
+		{
+			id: 'pop-io',
+			label: 'Pop I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'pop',
+			outType: 'pop',
+			durationMs: 450,
+			glyph: '✦'
+		},
+		{
+			id: 'spin-io',
+			label: 'Spin I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'spin',
+			outType: 'spin',
+			durationMs: 550,
+			glyph: '↻'
+		},
+		{
+			id: 'flip-io',
+			label: 'Flip I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'flip-x',
+			outType: 'flip-y',
+			durationMs: 550,
+			glyph: '⧉'
+		},
+		{
+			id: 'blur-io',
+			label: 'Blur I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'blur',
+			outType: 'blur',
+			durationMs: 550,
+			glyph: '◈'
+		},
+		{
+			id: 'drop-io',
+			label: 'Drop I/O',
+			group: 'Combo',
+			slot: 'combo',
+			type: 'drop',
+			outType: 'drop',
+			durationMs: 550,
+			glyph: '⬇'
+		}
+	];
+
+	const groups = $derived(
+		[...new Set(animations.map((a) => a.group))].map((group) => ({
+			group,
+			items: animations.filter((a) => a.group === group)
+		}))
+	);
+
+	function onDragStart(e: DragEvent, item: VideoAnimationDef) {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		e.dataTransfer?.setData(VIDEO_ANIMATION_MIME, JSON.stringify(item));
+		e.dataTransfer?.setData('text/plain', item.label);
+		if (e.dataTransfer) e.dataTransfer.effectAllowed = 'copy';
+	}
+</script>
+
+<div class={['flex flex-col gap-4 p-2', className]}>
+	{#if disabled}
+		<p class="px-1 py-4 text-center text-xs text-muted">{hint}</p>
+	{:else}
+		<p class="px-1 text-[10px] leading-relaxed text-muted">
+			CapCut-style: pick <strong class="font-medium text-secondary">In</strong> and/or
+			<strong class="font-medium text-secondary"> Out</strong> (one each). Drag onto a clip or click
+			with a clip selected.
+		</p>
+	{/if}
+	{#each groups as { group, items } (group)}
+		<section class="flex flex-col gap-2">
+			<h3 class="px-1 text-[10px] font-semibold uppercase tracking-wide text-muted">{group}</h3>
+			<div class="grid grid-cols-3 gap-1.5">
+				{#each items as item (item.id)}
+					<button
+						type="button"
+						disabled={disabled}
+						draggable={!disabled}
+						ondragstart={(e) => onDragStart(e, item)}
+						class="flex cursor-grab flex-col items-center gap-1.5 rounded-lg border border-border bg-surface-elevated px-1.5 py-2 text-center transition-colors enabled:hover:border-brand-500/50 enabled:hover:bg-surface-overlay active:cursor-grabbing disabled:cursor-not-allowed disabled:opacity-50"
+						onclick={() => onapply?.(item)}
+					>
+						<span
+							class="flex h-9 w-full items-center justify-center rounded-md bg-surface text-sm font-semibold text-secondary"
+						>
+							{item.glyph ?? item.label.slice(0, 2)}
+						</span>
+						<span class="text-[10px] font-medium text-secondary">{item.label}</span>
+					</button>
+				{/each}
+			</div>
+		</section>
+	{/each}
+</div>

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

@@ -0,0 +1,22 @@
+export interface VideoAnimationDef {
+    id: string;
+    label: string;
+    group: string;
+    /** CapCut-style: In / Out / Combo (sets both) */
+    slot: 'in' | 'out' | 'combo';
+    type: string;
+    /** Used when slot is combo */
+    outType?: string;
+    durationMs: number;
+    glyph?: string;
+}
+export declare const VIDEO_ANIMATION_MIME = "application/x-r2-video-animation";
+interface VideoAnimationsPanelProps {
+    class?: string;
+    disabled?: boolean;
+    hint?: string;
+    onapply?: (def: VideoAnimationDef) => void;
+}
+declare const VideoAnimationsPanel: import("svelte").Component<VideoAnimationsPanelProps, {}, "">;
+type VideoAnimationsPanel = ReturnType<typeof VideoAnimationsPanel>;
+export default VideoAnimationsPanel;

package/dist/components/molecules/VideoAnimationsPanel/VideoAnimationsPanelStory.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import VideoAnimationsPanel from './VideoAnimationsPanel.svelte';
+</script>
+
+<div class="h-96 w-72 rounded-lg border border-border bg-surface">
+	<VideoAnimationsPanel onapply={(d) => console.log('anim', d)} />
+</div>