@r2digisolutions/components 0.1.6 → 0.2.0

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

@@ -8,13 +8,33 @@
 		inspectorTitle?: string;
 		workspaceTitle?: string;
 		bottomTitle?: string;
+		/** Sized-pane value (%, or px when sizeUnit is `px`). */
 		sidebarSize?: number;
 		inspectorSize?: number;
-		/** Height % of the bottom content pane */
+		/** Height of the bottom content pane */
 		bottomSize?: number;
+		sizeUnit?: 'percent' | 'px';
+		sidebarMin?: number;
+		sidebarMax?: number;
+		inspectorMin?: number;
+		inspectorMax?: number;
+		bottomMin?: number;
+		bottomMax?: number;
 		showBottom?: boolean;
 		showInspector?: boolean;
 		showSidebar?: boolean;
+		/**
+		 * Wrap each slot in a Panel chrome. Set false when the slot already
+		 * provides its own panels (e.g. Palette + Variables stacked).
+		 */
+		wrapSidebar?: boolean;
+		wrapInspector?: boolean;
+		wrapWorkspace?: boolean;
+		wrapBottom?: boolean;
+		/** Collapse chrome on dock panels (when wrapped) */
+		collapsiblePanels?: boolean;
+		/** Hide resize grips until hover */
+		revealResizeOnHover?: boolean;
 		fullHeight?: boolean;
 		class?: string;
 		sidebar?: Snippet;
@@ -31,9 +51,22 @@
 		sidebarSize = $bindable(22),
 		inspectorSize = $bindable(28),
 		bottomSize = $bindable(28),
+		sizeUnit = 'percent',
+		sidebarMin = 12,
+		sidebarMax = 40,
+		inspectorMin = 18,
+		inspectorMax = 45,
+		bottomMin = 15,
+		bottomMax = 55,
 		showBottom = true,
 		showInspector = true,
 		showSidebar = true,
+		wrapSidebar = true,
+		wrapInspector = true,
+		wrapWorkspace = true,
+		wrapBottom = true,
+		collapsiblePanels = true,
+		revealResizeOnHover = true,
 		fullHeight = true,
 		class: className = '',
 		sidebar,
@@ -41,6 +74,11 @@
 		bottom,
 		inspector
 	}: EditorShellProps = $props();
+
+	let sidebarCollapsed = $state(false);
+	let inspectorCollapsed = $state(false);
+	let workspaceCollapsed = $state(false);
+	let bottomCollapsed = $state(false);
 </script>
 
 <div
@@ -54,16 +92,30 @@
 		<SplitPane
 			orientation="horizontal"
 			bind:size={sidebarSize}
-			minSize={12}
-			maxSize={40}
+			unit={sizeUnit}
+			minSize={sidebarMin}
+			maxSize={sidebarMax}
+			startCollapsed={wrapSidebar && sidebarCollapsed}
+			revealOnHover={revealResizeOnHover}
 			class="h-full"
 		>
 			{#snippet start()}
-				<Panel title={sidebarTitle}>
-					{#if sidebar}
+				{#if wrapSidebar}
+					<Panel
+						title={sidebarTitle}
+						collapsible={collapsiblePanels}
+						bind:collapsed={sidebarCollapsed}
+						padding="none"
+					>
+						{#if sidebar}
+							{@render sidebar()}
+						{/if}
+					</Panel>
+				{:else if sidebar}
+					<div class="h-full min-h-0 min-w-0">
 						{@render sidebar()}
-					{/if}
-				</Panel>
+					</div>
+				{/if}
 			{/snippet}
 			{#snippet end()}
 				{@render mainAndInspector()}
@@ -80,19 +132,31 @@
 			orientation="horizontal"
 			bind:size={inspectorSize}
 			sizePane="end"
-			minSize={18}
-			maxSize={45}
+			unit={sizeUnit}
+			minSize={inspectorMin}
+			maxSize={inspectorMax}
+			endCollapsed={wrapInspector && inspectorCollapsed}
+			revealOnHover={revealResizeOnHover}
 			class="h-full"
 		>
 			{#snippet start()}
 				{@render centerColumn()}
 			{/snippet}
 			{#snippet end()}
-				<Panel title={inspectorTitle} padding="none">
-					{#if inspector}
-						{@render inspector()}
-					{/if}
-				</Panel>
+				{#if wrapInspector}
+					<Panel
+						title={inspectorTitle}
+						padding="none"
+						collapsible={collapsiblePanels}
+						bind:collapsed={inspectorCollapsed}
+					>
+						{#if inspector}
+							{@render inspector()}
+						{/if}
+					</Panel>
+				{:else if inspector}
+					{@render inspector()}
+				{/if}
 			{/snippet}
 		</SplitPane>
 	{:else}
@@ -106,30 +170,61 @@
 			orientation="vertical"
 			bind:size={bottomSize}
 			sizePane="end"
-			minSize={15}
-			maxSize={55}
+			unit={sizeUnit}
+			minSize={bottomMin}
+			maxSize={bottomMax}
+			startCollapsed={wrapWorkspace && workspaceCollapsed}
+			endCollapsed={wrapBottom && bottomCollapsed}
+			revealOnHover={revealResizeOnHover}
 			class="h-full"
 		>
 			{#snippet start()}
-				<Panel title={workspaceTitle}>
-					{#if workspace}
-						{@render workspace()}
-					{/if}
-				</Panel>
+				{#if wrapWorkspace}
+					<Panel
+						title={workspaceTitle}
+						padding="none"
+						collapsible={collapsiblePanels}
+						bind:collapsed={workspaceCollapsed}
+					>
+						{#if workspace}
+							{@render workspace()}
+						{/if}
+					</Panel>
+				{:else if workspace}
+					{@render workspace()}
+				{/if}
 			{/snippet}
 			{#snippet end()}
-				<Panel title={bottomTitle}>
-					{#if bottom}
-						{@render bottom()}
-					{/if}
-				</Panel>
+				{#if wrapBottom}
+					<Panel
+						title={bottomTitle}
+						padding="none"
+						collapsible={collapsiblePanels}
+						bind:collapsed={bottomCollapsed}
+					>
+						{#if bottom}
+							{@render bottom()}
+						{/if}
+					</Panel>
+				{:else if bottom}
+					{@render bottom()}
+				{/if}
 			{/snippet}
 		</SplitPane>
-	{:else}
-		<Panel title={workspaceTitle}>
+	{:else 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()}
+		</div>
 	{/if}
 {/snippet}

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

@@ -4,13 +4,33 @@ interface EditorShellProps {
     inspectorTitle?: string;
     workspaceTitle?: string;
     bottomTitle?: string;
+    /** Sized-pane value (%, or px when sizeUnit is `px`). */
     sidebarSize?: number;
     inspectorSize?: number;
-    /** Height % of the bottom content pane */
+    /** Height of the bottom content pane */
     bottomSize?: number;
+    sizeUnit?: 'percent' | 'px';
+    sidebarMin?: number;
+    sidebarMax?: number;
+    inspectorMin?: number;
+    inspectorMax?: number;
+    bottomMin?: number;
+    bottomMax?: number;
     showBottom?: boolean;
     showInspector?: boolean;
     showSidebar?: boolean;
+    /**
+     * Wrap each slot in a Panel chrome. Set false when the slot already
+     * provides its own panels (e.g. Palette + Variables stacked).
+     */
+    wrapSidebar?: boolean;
+    wrapInspector?: boolean;
+    wrapWorkspace?: boolean;
+    wrapBottom?: boolean;
+    /** Collapse chrome on dock panels (when wrapped) */
+    collapsiblePanels?: boolean;
+    /** Hide resize grips until hover */
+    revealResizeOnHover?: boolean;
     fullHeight?: boolean;
     class?: string;
     sidebar?: Snippet;

package/dist/components/organisms/FileUploader/FileUploader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 
-	type FileKind = 'image' | 'pdf' | 'doc' | 'other';
+	type FileKind = 'image' | 'video' | 'audio' | 'pdf' | 'doc' | 'other';
 	type UploaderVariant = 'multiple' | 'single' | 'avatar';
 	type UploaderView = 'list' | 'grid';
 
@@ -22,10 +22,21 @@
 		variant?: UploaderVariant;
 		view?: UploaderView;
 		showViewToggle?: boolean;
+		/** When false, only the dropzone is shown (parent owns the file list). */
+		showFileList?: boolean;
 		maxSizeMb?: number;
 		disabled?: boolean;
+		/**
+		 * External preview URL for `single` / `avatar` when no File is selected yet
+		 * (e.g. existing remote image in an editor inspector).
+		 */
+		src?: string;
+		/** Display name when using `src` without a File */
+		srcName?: string;
 		class?: string;
 		onchange?: (files: File[]) => void;
+		/** Fired when the user clears the current file / src preview */
+		onclear?: () => void;
 	}
 
 	let {
@@ -36,10 +47,14 @@
 		variant = 'multiple',
 		view = $bindable('list'),
 		showViewToggle = true,
+		showFileList = true,
 		maxSizeMb = 10,
 		disabled = false,
+		src = '',
+		srcName = '',
 		class: className = '',
-		onchange
+		onchange,
+		onclear
 	}: FileUploaderProps = $props();
 
 	let isDragging = $state(false);
@@ -51,6 +66,13 @@
 	const isMultiple = $derived(variant === 'multiple');
 	const hasFile = $derived(fileList.length > 0);
 	const primaryFile = $derived(fileList[0] as FileItem | undefined);
+	const externalSrc = $derived(src?.trim() || '');
+	const showSinglePreview = $derived(
+		variant === 'single' && (!!primaryFile || !!externalSrc)
+	);
+	const singlePreviewUrl = $derived(primaryFile?.previewUrl || externalSrc);
+	const singlePreviewName = $derived(primaryFile?.name || srcName || 'Media');
+	const singlePreviewMeta = $derived(primaryFile?.sizeFormatted || '');
 
 	const labelId = $derived(`${id}-label`);
 	const helperId = $derived(`${id}-helper`);
@@ -61,6 +83,13 @@
 		variant === 'avatar' && (!accept || accept === '*') ? 'image/*' : accept
 	);
 
+	const singleIsVideo = $derived(
+		primaryFile?.kind === 'video' ||
+			(!primaryFile &&
+				!!externalSrc &&
+				(resolvedAccept.includes('video') || /\.(mp4|webm|mov|m4v)(\?|$)/i.test(externalSrc)))
+	);
+
 	function formatBytes(bytes: number): string {
 		if (bytes === 0) return '0 B';
 		const k = 1024;
@@ -71,6 +100,8 @@
 
 	function getFileKind(file: File): FileKind {
 		if (file.type.startsWith('image/')) return 'image';
+		if (file.type.startsWith('video/')) return 'video';
+		if (file.type.startsWith('audio/')) return 'audio';
 		if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) return 'pdf';
 		if (
 			file.type.includes('document') ||
@@ -86,6 +117,8 @@
 		if (kind === 'pdf') return 'PDF';
 		if (kind === 'doc') return 'DOC';
 		if (kind === 'image') return 'IMG';
+		if (kind === 'video') return 'VID';
+		if (kind === 'audio') return 'AUD';
 		return 'FILE';
 	}
 
@@ -93,6 +126,8 @@
 		if (kind === 'pdf') return 'bg-red-50 text-red-600 dark:bg-red-950/50 dark:text-red-300';
 		if (kind === 'doc') return 'bg-sky-50 text-sky-700 dark:bg-sky-950/50 dark:text-sky-300';
 		if (kind === 'image') return 'bg-brand-50 text-brand-700 dark:bg-brand-950/50 dark:text-brand-300';
+		if (kind === 'video') return 'bg-violet-50 text-violet-700 dark:bg-violet-950/50 dark:text-violet-300';
+		if (kind === 'audio') return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300';
 		return 'bg-surface-overlay text-secondary';
 	}
 
@@ -141,13 +176,14 @@
 			}
 
 			const kind = getFileKind(file);
+			const needsUrl = kind === 'image' || kind === 'video' || kind === 'audio';
 			nextItems.push({
 				file,
 				id: `${file.name}-${file.size}-${file.lastModified}-${Math.random().toString(36).slice(2, 7)}`,
 				name: file.name,
 				sizeFormatted: formatBytes(file.size),
 				kind,
-				previewUrl: kind === 'image' ? URL.createObjectURL(file) : undefined
+				previewUrl: needsUrl ? URL.createObjectURL(file) : undefined
 			});
 		}
 
@@ -172,6 +208,10 @@
 		}
 
 		onchange?.(fileList.map((item) => item.file));
+		if (!showFileList && isMultiple) {
+			revokePreviews(fileList);
+			fileList = [];
+		}
 		if (fileInputNode) fileInputNode.value = '';
 	}
 
@@ -181,6 +221,17 @@
 		fileList = fileList.filter((item) => item.id !== id);
 		errorMessage = '';
 		onchange?.(fileList.map((item) => item.file));
+		if (fileList.length === 0) onclear?.();
+	}
+
+	function clearSingle() {
+		if (primaryFile) {
+			removeFile(primaryFile.id);
+			return;
+		}
+		errorMessage = '';
+		onchange?.([]);
+		onclear?.();
 	}
 
 	function clearAll() {
@@ -516,7 +567,7 @@
 		</div>
 
 	<!-- Single variant: preview card with edit -->
-	{:else if variant === 'single' && primaryFile}
+	{:else if showSinglePreview}
 		<div
 			class={[
 				'overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-sm',
@@ -530,11 +581,20 @@
 			aria-labelledby={label ? labelId : undefined}
 		>
 			<div class="relative aspect-video bg-surface-overlay">
-				{#if primaryFile.previewUrl}
-					<img src={primaryFile.previewUrl} alt="" class="h-full w-full object-cover" />
+				{#if singlePreviewUrl}
+					{#if singleIsVideo}
+						<video
+							src={singlePreviewUrl}
+							class="h-full w-full object-cover"
+							muted
+							playsinline
+						></video>
+					{:else}
+						<img src={singlePreviewUrl} alt="" class="h-full w-full object-cover" />
+					{/if}
 				{:else}
 					<div class="flex h-full w-full flex-col items-center justify-center gap-2">
-						{@render fileBadge(primaryFile.kind, 'h-14 w-14 rounded-xl text-xs')}
+						{@render fileBadge(primaryFile?.kind ?? 'other', 'h-14 w-14 rounded-xl text-xs')}
 					</div>
 				{/if}
 
@@ -556,9 +616,9 @@
 						</button>
 						<button
 							type="button"
-							onclick={() => removeFile(primaryFile.id)}
+							onclick={clearSingle}
 							class="inline-flex items-center justify-center rounded-lg bg-white/95 p-1.5 text-secondary shadow-sm backdrop-blur transition hover:bg-white hover:text-red-600 dark:bg-slate-900/95 dark:hover:bg-slate-900 dark:hover:text-red-400"
-							aria-label={`Remove ${primaryFile.name}`}
+							aria-label={`Remove ${singlePreviewName}`}
 						>
 							<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -570,8 +630,10 @@
 
 			<div class="flex items-center justify-between gap-3 border-t border-border px-4 py-3">
 				<div class="min-w-0">
-					<p class="truncate text-sm font-medium text-primary">{primaryFile.name}</p>
-					<p class="text-xs text-secondary">{primaryFile.sizeFormatted}</p>
+					<p class="truncate text-sm font-medium text-primary">{singlePreviewName}</p>
+					{#if singlePreviewMeta}
+						<p class="text-xs text-secondary">{singlePreviewMeta}</p>
+					{/if}
 				</div>
 				{#if helperText}
 					<p id={helperId} class="shrink-0 text-xs text-secondary">{helperText}</p>
@@ -579,8 +641,8 @@
 			</div>
 		</div>
 
-	<!-- Default / empty single: dropzone -->
-	{:else}
+	<!-- Dropzone: hide the big one when multiple already has files (compact “add more” below) -->
+	{:else if !(isMultiple && hasFile && showFileList)}
 		{@render dropzone()}
 	{/if}
 
@@ -588,8 +650,8 @@
 		<p id={errorId} class="text-xs text-red-600 dark:text-red-400" role="alert">{errorMessage}</p>
 	{/if}
 
-	<!-- Multiple file cards -->
-	{#if isMultiple && hasFile}
+	<!-- Multiple file cards (optional — MediaAssetBrowser owns its own grid) -->
+	{#if isMultiple && hasFile && showFileList}
 		{#if view === 'grid'}
 			<ul class="grid grid-cols-2 gap-2.5 sm:grid-cols-3" aria-label="Selected files">
 				{#each fileList as item (item.id)}

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

@@ -8,10 +8,21 @@ interface FileUploaderProps {
     variant?: UploaderVariant;
     view?: UploaderView;
     showViewToggle?: boolean;
+    /** When false, only the dropzone is shown (parent owns the file list). */
+    showFileList?: boolean;
     maxSizeMb?: number;
     disabled?: boolean;
+    /**
+     * External preview URL for `single` / `avatar` when no File is selected yet
+     * (e.g. existing remote image in an editor inspector).
+     */
+    src?: string;
+    /** Display name when using `src` without a File */
+    srcName?: string;
     class?: string;
     onchange?: (files: File[]) => void;
+    /** Fired when the user clears the current file / src preview */
+    onclear?: () => void;
 }
 declare const FileUploader: import("svelte").Component<FileUploaderProps, {}, "view">;
 type FileUploader = ReturnType<typeof FileUploader>;

package/dist/components/organisms/ImportWizard/ImportWizard.stories.js

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