@r2digisolutions/components 0.2.0 → 0.3.0

package/dist/components/molecules/VideoTrackHeader/VideoTrackHeader.svelte

@@ -6,54 +6,107 @@
 	import Lock from '@lucide/svelte/icons/lock';
 	import LockOpen from '@lucide/svelte/icons/lock-open';
 	import Headphones from '@lucide/svelte/icons/headphones';
+	import GripVertical from '@lucide/svelte/icons/grip-vertical';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
 
 	interface VideoTrackHeaderProps {
 		track: MediaTrack;
 		class?: string;
+		draggable?: boolean;
+		canRemove?: boolean;
+		dragging?: boolean;
 		onchange?: (track: MediaTrack) => void;
+		onremove?: (trackId: string) => void;
+		/** Pointer-based reorder (preferred over HTML5 drag) */
+		onreorderstart?: (trackId: string, e: PointerEvent) => void;
 	}
 
-	let { track, class: className = '', onchange }: VideoTrackHeaderProps = $props();
+	let {
+		track,
+		class: className = '',
+		draggable = false,
+		canRemove = false,
+		dragging = false,
+		onchange,
+		onremove,
+		onreorderstart
+	}: VideoTrackHeaderProps = $props();
 
 	function patch(partial: Partial<MediaTrack>) {
 		onchange?.({ ...track, ...partial });
 	}
 </script>
 
-<div class={['flex min-w-0 flex-1 items-center gap-1', className]}>
+<div class={['flex min-w-0 flex-1 items-center gap-1', className, dragging && 'pointer-events-none']}>
+	{#if draggable}
+		<button
+			type="button"
+			class="flex h-6 w-5 shrink-0 cursor-grab touch-none items-center justify-center rounded text-muted hover:bg-surface-overlay hover:text-secondary active:cursor-grabbing"
+			aria-label={`Reorder ${track.name}`}
+			title="Drag to reorder"
+			data-marquee-ignore
+			onpointerdown={(e) => {
+				if (e.button !== 0) return;
+				e.preventDefault();
+				e.stopPropagation();
+				onreorderstart?.(track.id, e);
+			}}
+		>
+			<GripVertical class="h-3.5 w-3.5" />
+		</button>
+	{/if}
 	<span
 		class="h-2 w-2 shrink-0 rounded-full"
 		style:background={track.color ?? (track.kind === 'audio' ? '#10b981' : '#3b82f6')}
 		aria-hidden="true"
 	></span>
-	<span class="min-w-0 flex-1 truncate text-xs font-medium text-secondary">{track.name}</span>
-	<IconButton
-		label={track.muted ? 'Unmute' : 'Mute'}
-		size="xs"
-		onclick={() => patch({ muted: !track.muted })}
-	>
-		{#if track.muted}
-			<VolumeX class="h-3.5 w-3.5" />
-		{:else}
-			<Volume2 class="h-3.5 w-3.5" />
-		{/if}
-	</IconButton>
-	<IconButton
-		label={track.solo ? 'Unsolo' : 'Solo'}
-		size="xs"
-		onclick={() => patch({ solo: !track.solo })}
-	>
-		<Headphones class={['h-3.5 w-3.5', track.solo && 'text-brand-500']} />
-	</IconButton>
-	<IconButton
-		label={track.locked ? 'Unlock' : 'Lock'}
-		size="xs"
-		onclick={() => patch({ locked: !track.locked })}
-	>
-		{#if track.locked}
-			<Lock class="h-3.5 w-3.5" />
-		{:else}
-			<LockOpen class="h-3.5 w-3.5" />
-		{/if}
-	</IconButton>
+	<span class="min-w-0 flex-1 truncate text-xs font-semibold text-primary" title={track.name}>
+		{track.name}
+	</span>
+	{#if !dragging}
+		<div class="flex shrink-0 items-center">
+			<IconButton
+				label={track.muted ? 'Unmute' : 'Mute'}
+				size="xs"
+				class="!h-5 !w-5"
+				onclick={() => patch({ muted: !track.muted })}
+			>
+				{#if track.muted}
+					<VolumeX class="h-3 w-3" />
+				{:else}
+					<Volume2 class="h-3 w-3" />
+				{/if}
+			</IconButton>
+			<IconButton
+				label={track.solo ? 'Unsolo' : 'Solo'}
+				size="xs"
+				class="!h-5 !w-5"
+				onclick={() => patch({ solo: !track.solo })}
+			>
+				<Headphones class={['h-3 w-3', track.solo && 'text-brand-500']} />
+			</IconButton>
+			<IconButton
+				label={track.locked ? 'Unlock' : 'Lock'}
+				size="xs"
+				class="!h-5 !w-5"
+				onclick={() => patch({ locked: !track.locked })}
+			>
+				{#if track.locked}
+					<Lock class="h-3 w-3" />
+				{:else}
+					<LockOpen class="h-3 w-3" />
+				{/if}
+			</IconButton>
+			{#if canRemove && onremove}
+				<IconButton
+					label="Delete track"
+					size="xs"
+					class="!h-5 !w-5"
+					onclick={() => onremove(track.id)}
+				>
+					<Trash2 class="h-3 w-3" />
+				</IconButton>
+			{/if}
+		</div>
+	{/if}
 </div>

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

@@ -2,7 +2,13 @@ import type { MediaTrack } from '../../../utils/mediaTracks.js';
 interface VideoTrackHeaderProps {
     track: MediaTrack;
     class?: string;
+    draggable?: boolean;
+    canRemove?: boolean;
+    dragging?: boolean;
     onchange?: (track: MediaTrack) => void;
+    onremove?: (trackId: string) => void;
+    /** Pointer-based reorder (preferred over HTML5 drag) */
+    onreorderstart?: (trackId: string, e: PointerEvent) => void;
 }
 declare const VideoTrackHeader: import("svelte").Component<VideoTrackHeaderProps, {}, "">;
 type VideoTrackHeader = ReturnType<typeof VideoTrackHeader>;

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

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

package/dist/components/molecules/VideoTransitionsPanel/VideoTransitionsPanel.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+	export interface VideoTransitionDef {
+		id: string;
+		label: string;
+		group: string;
+		type: string;
+		durationMs: number;
+		glyph?: string;
+	}
+
+	export const VIDEO_TRANSITION_MIME = 'application/x-r2-video-transition';
+</script>
+
+<script lang="ts">
+	interface VideoTransitionsPanelProps {
+		class?: string;
+		disabled?: boolean;
+		hint?: string;
+		onapply?: (def: VideoTransitionDef) => void;
+	}
+
+	let {
+		class: className = '',
+		disabled = false,
+		hint = 'Select a clip, or drag onto its end',
+		onapply
+	}: VideoTransitionsPanelProps = $props();
+
+	const transitions: VideoTransitionDef[] = [
+		/* Dissolve */
+		{ id: 'crossfade', label: 'Crossfade', group: 'Dissolve', type: 'crossfade', durationMs: 900, glyph: '╳' },
+		{ id: 'dip-black', label: 'Dip black', group: 'Dissolve', type: 'dip-black', durationMs: 1000, glyph: '■' },
+		{ id: 'dip-white', label: 'Dip white', group: 'Dissolve', type: 'dip-white', durationMs: 1000, glyph: '□' },
+		{ id: 'fade-soft', label: 'Soft fade', group: 'Dissolve', type: 'fade-soft', durationMs: 1200, glyph: '≈' },
+		{ id: 'blur-dissolve', label: 'Blur', group: 'Dissolve', type: 'blur', durationMs: 1000, glyph: '◈' },
+		{ id: 'flash', label: 'Flash', group: 'Dissolve', type: 'flash', durationMs: 500, glyph: '⚡' },
+		/* Wipe */
+		{ id: 'wipe-left', label: 'Wipe left', group: 'Wipe', type: 'wipe-left', durationMs: 900, glyph: '◀' },
+		{ id: 'wipe-right', label: 'Wipe right', group: 'Wipe', type: 'wipe-right', durationMs: 900, glyph: '▶' },
+		{ id: 'wipe-up', label: 'Wipe up', group: 'Wipe', type: 'wipe-up', durationMs: 900, glyph: '▲' },
+		{ id: 'wipe-down', label: 'Wipe down', group: 'Wipe', type: 'wipe-down', durationMs: 900, glyph: '▼' },
+		{ id: 'wipe-diagonal', label: 'Diagonal', group: 'Wipe', type: 'wipe-diagonal', durationMs: 900, glyph: '╱' },
+		{ id: 'iris', label: 'Iris', group: 'Wipe', type: 'iris', durationMs: 900, glyph: '◎' },
+		{ id: 'barn-doors', label: 'Barn doors', group: 'Wipe', type: 'barn-doors', durationMs: 900, glyph: ' ⟺ ' },
+		/* Move */
+		{ id: 'push-left', label: 'Push left', group: 'Move', type: 'push-left', durationMs: 900, glyph: '⇇' },
+		{ id: 'push-right', label: 'Push right', group: 'Move', type: 'push-right', durationMs: 900, glyph: '⇉' },
+		{ id: 'push-up', label: 'Push up', group: 'Move', type: 'push-up', durationMs: 900, glyph: '⇈' },
+		{ id: 'push-down', label: 'Push down', group: 'Move', type: 'push-down', durationMs: 900, glyph: '⇊' },
+		{ id: 'slide-left', label: 'Slide left', group: 'Move', type: 'slide-left', durationMs: 900, glyph: '◁' },
+		{ id: 'slide-right', label: 'Slide right', group: 'Move', type: 'slide-right', durationMs: 900, glyph: '▷' },
+		/* Style */
+		{ id: 'zoom-through', label: 'Zoom in', group: 'Style', type: 'zoom-in', durationMs: 900, glyph: '⊕' },
+		{ id: 'zoom-out', label: 'Zoom out', group: 'Style', type: 'zoom-out', durationMs: 900, glyph: '⊖' },
+		{ id: 'spin', label: 'Spin', group: 'Style', type: 'spin', durationMs: 900, glyph: '↻' },
+		{ id: 'flip-x', label: 'Flip H', group: 'Style', type: 'flip-x', durationMs: 900, glyph: '↔' },
+		{ id: 'flip-y', label: 'Flip V', group: 'Style', type: 'flip-y', durationMs: 900, glyph: '↕' },
+		{ id: 'squeeze-h', label: 'Squeeze H', group: 'Style', type: 'squeeze-h', durationMs: 800, glyph: '↔︎' },
+		{ id: 'squeeze-v', label: 'Squeeze V', group: 'Style', type: 'squeeze-v', durationMs: 800, glyph: '↕︎' }
+	];
+
+	const groups = $derived(
+		[...new Set(transitions.map((t) => t.group))].map((group) => ({
+			group,
+			items: transitions.filter((t) => t.group === group)
+		}))
+	);
+
+	function onDragStart(e: DragEvent, item: VideoTransitionDef) {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		e.dataTransfer?.setData(VIDEO_TRANSITION_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: transition sits at the <strong class="font-medium text-secondary">end</strong> of
+			a clip (into the next). Drag onto a clip or click with one 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/VideoTransitionsPanel/VideoTransitionsPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface VideoTransitionDef {
+    id: string;
+    label: string;
+    group: string;
+    type: string;
+    durationMs: number;
+    glyph?: string;
+}
+export declare const VIDEO_TRANSITION_MIME = "application/x-r2-video-transition";
+interface VideoTransitionsPanelProps {
+    class?: string;
+    disabled?: boolean;
+    hint?: string;
+    onapply?: (def: VideoTransitionDef) => void;
+}
+declare const VideoTransitionsPanel: import("svelte").Component<VideoTransitionsPanelProps, {}, "">;
+type VideoTransitionsPanel = ReturnType<typeof VideoTransitionsPanel>;
+export default VideoTransitionsPanel;

package/dist/components/molecules/VideoTransitionsPanel/VideoTransitionsPanelStory.svelte

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

package/dist/components/molecules/VideoTransitionsPanel/VideoTransitionsPanelStory.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 VideoTransitionsPanelStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VideoTransitionsPanelStory = InstanceType<typeof VideoTransitionsPanelStory>;
+export default VideoTransitionsPanelStory;

package/dist/components/organisms/AudioEditor/AudioEditor.svelte

@@ -41,6 +41,10 @@
 	let selectedClipId = $state<string | null>(null);
 	let currentTimeMs = $state(0);
 	let playing = $state(false);
+	let playbackRate = $state(1);
+	let muted = $state(false);
+	let volume = $state(1);
+	const SKIP_MS = 5000;
 	let zoom = $state(1);
 	let showSidebar = $state(true);
 	let showInspector = $state(true);
@@ -114,10 +118,14 @@
 		});
 	}
 
+	function seekBy(deltaMs: number) {
+		currentTimeMs = clampMs(currentTimeMs + deltaMs, 0, value.durationMs);
+	}
+
 	function tick(ts: number) {
 		if (!playing) return;
 		if (lastTs) {
-			const delta = ts - lastTs;
+			const delta = (ts - lastTs) * playbackRate;
 			currentTimeMs = clampMs(currentTimeMs + delta, 0, value.durationMs);
 			if (currentTimeMs >= value.durationMs) {
 				playing = false;
@@ -145,6 +153,36 @@
 			playing = !playing;
 			return;
 		}
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			selectedClipId = null;
+			return;
+		}
+		if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			seekBy(e.shiftKey ? -SKIP_MS : -1000);
+			return;
+		}
+		if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			seekBy(e.shiftKey ? SKIP_MS : 1000);
+			return;
+		}
+		if (e.key === 'Home') {
+			e.preventDefault();
+			currentTimeMs = 0;
+			return;
+		}
+		if (e.key === 'End') {
+			e.preventDefault();
+			currentTimeMs = value.durationMs;
+			return;
+		}
+		if (e.key === 'm' || e.key === 'M') {
+			e.preventDefault();
+			muted = !muted;
+			return;
+		}
 		if ((e.key === 'Delete' || e.key === 'Backspace') && selectedClipId) {
 			e.preventDefault();
 			setTracks(removeClipFromTracks(value.tracks, selectedClipId));
@@ -231,12 +269,24 @@
 						{playing}
 						{currentTimeMs}
 						durationMs={value.durationMs}
+						bind:playbackRate
+						bind:muted
+						bind:volume
+						skipMs={SKIP_MS}
 						onplay={() => (playing = true)}
 						onpause={() => (playing = false)}
 						onstop={() => {
 							playing = false;
 							currentTimeMs = 0;
 						}}
+						onseekstart={() => {
+							currentTimeMs = 0;
+						}}
+						onseekend={() => {
+							currentTimeMs = value.durationMs;
+						}}
+						onseekback={() => seekBy(-SKIP_MS)}
+						onseekforward={() => seekBy(SKIP_MS)}
 					/>
 					<div class="min-h-0 flex-1">
 						<MediaTimeline
@@ -247,6 +297,7 @@
 							{selectedClipId}
 							headerVariant="audio"
 							onselectclip={(id) => (selectedClipId = id)}
+							onemptyclick={() => (selectedClipId = null)}
 							onchangeclip={patchClip}
 							onchangetrack={patchTrack}
 							onseek={(ms) => (currentTimeMs = ms)}

package/dist/components/organisms/EditorShell/EditorShell.svelte

@@ -127,104 +127,114 @@
 </div>
 
 {#snippet mainAndInspector()}
-	{#if showInspector}
-		<SplitPane
-			orientation="horizontal"
-			bind:size={inspectorSize}
-			sizePane="end"
-			unit={sizeUnit}
-			minSize={inspectorMin}
-			maxSize={inspectorMax}
-			endCollapsed={wrapInspector && inspectorCollapsed}
-			revealOnHover={revealResizeOnHover}
-			class="h-full"
-		>
-			{#snippet start()}
-				{@render centerColumn()}
-			{/snippet}
-			{#snippet end()}
-				{#if wrapInspector}
-					<Panel
-						title={inspectorTitle}
-						padding="none"
-						collapsible={collapsiblePanels}
-						bind:collapsed={inspectorCollapsed}
-					>
-						{#if inspector}
+	<div class="h-full min-h-0 min-w-0">
+		{#if showInspector}
+			<SplitPane
+				orientation="horizontal"
+				bind:size={inspectorSize}
+				sizePane="end"
+				unit={sizeUnit}
+				minSize={inspectorMin}
+				maxSize={inspectorMax}
+				endCollapsed={wrapInspector && inspectorCollapsed}
+				revealOnHover={revealResizeOnHover}
+				class="h-full"
+			>
+				{#snippet start()}
+					{@render centerColumn()}
+				{/snippet}
+				{#snippet end()}
+					{#if wrapInspector}
+						<Panel
+							title={inspectorTitle}
+							padding="none"
+							collapsible={collapsiblePanels}
+							bind:collapsed={inspectorCollapsed}
+						>
+							{#if inspector}
+								{@render inspector()}
+							{/if}
+						</Panel>
+					{:else if inspector}
+						<div class="h-full min-h-0 min-w-0">
 							{@render inspector()}
-						{/if}
-					</Panel>
-				{:else if inspector}
-					{@render inspector()}
-				{/if}
-			{/snippet}
-		</SplitPane>
-	{:else}
-		{@render centerColumn()}
-	{/if}
+						</div>
+					{/if}
+				{/snippet}
+			</SplitPane>
+		{:else}
+			{@render centerColumn()}
+		{/if}
+	</div>
 {/snippet}
 
 {#snippet centerColumn()}
-	{#if showBottom}
-		<SplitPane
-			orientation="vertical"
-			bind:size={bottomSize}
-			sizePane="end"
-			unit={sizeUnit}
-			minSize={bottomMin}
-			maxSize={bottomMax}
-			startCollapsed={wrapWorkspace && workspaceCollapsed}
-			endCollapsed={wrapBottom && bottomCollapsed}
-			revealOnHover={revealResizeOnHover}
-			class="h-full"
-		>
-			{#snippet start()}
-				{#if wrapWorkspace}
-					<Panel
-						title={workspaceTitle}
-						padding="none"
-						collapsible={collapsiblePanels}
-						bind:collapsed={workspaceCollapsed}
-					>
-						{#if workspace}
+	<div class="h-full min-h-0 min-w-0">
+		{#if showBottom}
+			<SplitPane
+				orientation="vertical"
+				bind:size={bottomSize}
+				sizePane="end"
+				unit={sizeUnit}
+				minSize={bottomMin}
+				maxSize={bottomMax}
+				startCollapsed={wrapWorkspace && workspaceCollapsed}
+				endCollapsed={wrapBottom && bottomCollapsed}
+				revealOnHover={revealResizeOnHover}
+				class="h-full"
+			>
+				{#snippet start()}
+					{#if wrapWorkspace}
+						<Panel
+							title={workspaceTitle}
+							padding="none"
+							collapsible={collapsiblePanels}
+							bind:collapsed={workspaceCollapsed}
+						>
+							{#if workspace}
+								{@render workspace()}
+							{/if}
+						</Panel>
+					{:else if workspace}
+						<div class="h-full min-h-0 min-w-0">
 							{@render workspace()}
-						{/if}
-					</Panel>
-				{:else if workspace}
-					{@render workspace()}
-				{/if}
-			{/snippet}
-			{#snippet end()}
-				{#if wrapBottom}
-					<Panel
-						title={bottomTitle}
-						padding="none"
-						collapsible={collapsiblePanels}
-						bind:collapsed={bottomCollapsed}
-					>
-						{#if bottom}
+						</div>
+					{/if}
+				{/snippet}
+				{#snippet end()}
+					{#if wrapBottom}
+						<Panel
+							title={bottomTitle}
+							padding="none"
+							collapsible={collapsiblePanels}
+							bind:collapsed={bottomCollapsed}
+						>
+							{#if bottom}
+								{@render bottom()}
+							{/if}
+						</Panel>
+					{:else if bottom}
+						<div class="h-full min-h-0 min-w-0">
 							{@render bottom()}
-						{/if}
-					</Panel>
-				{:else if bottom}
-					{@render bottom()}
+						</div>
+					{/if}
+				{/snippet}
+			</SplitPane>
+		{:else if wrapWorkspace}
+			<Panel
+				title={workspaceTitle}
+				padding="none"
+				collapsible={collapsiblePanels}
+				bind:collapsed={workspaceCollapsed}
+			>
+				{#if workspace}
+					{@render workspace()}
 				{/if}
-			{/snippet}
-		</SplitPane>
-	{:else if wrapWorkspace}
-		<Panel
-			title={workspaceTitle}
-			padding="none"
-			collapsible={collapsiblePanels}
-			bind:collapsed={workspaceCollapsed}
-		>
-			{#if workspace}
+			</Panel>
+		{:else if workspace}
+			<div class="h-full min-h-0 min-w-0">
 				{@render workspace()}
-			{/if}
-		</Panel>
-	{:else if workspace}
-		<div class="h-full min-h-0 min-w-0">
-			{@render workspace()}
-		</div>
-	{/if}
+			</div>
+		{/if}
+	</div>
 {/snippet}

package/dist/components/organisms/FileUploader/FileUploader.stories.d.ts

@@ -7,9 +7,12 @@ declare const meta: {
         accept?: string;
         variant?: "multiple" | "single" | "avatar";
         view?: "list" | "grid";
+        layout?: "horizontal" | "vertical" | "compact";
         showViewToggle?: boolean;
         maxSizeMb?: number;
         disabled?: boolean;
+        src?: string;
+        srcName?: string;
     }, {}, "">;
     tags: string[];
     argTypes: {
@@ -30,6 +33,10 @@ declare const meta: {
             control: "select";
             options: string[];
         };
+        layout: {
+            control: "select";
+            options: string[];
+        };
         showViewToggle: {
             control: "boolean";
         };
@@ -46,6 +53,7 @@ declare const meta: {
         accept: string;
         variant: "multiple";
         view: "list";
+        layout: "horizontal";
         showViewToggle: true;
         maxSizeMb: number;
         disabled: false;
@@ -55,6 +63,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Multiple: Story;
 export declare const GridView: Story;
+export declare const VerticalSidebar: Story;
+export declare const Compact: Story;
 export declare const SingleFile: Story;
 export declare const Avatar: Story;
 export declare const Disabled: Story;