@r2digisolutions/components 0.1.7 → 0.3.0

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;

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

@@ -9,6 +9,7 @@ const meta = {
         accept: { control: 'text' },
         variant: { control: 'select', options: ['multiple', 'single', 'avatar'] },
         view: { control: 'select', options: ['list', 'grid'] },
+        layout: { control: 'select', options: ['horizontal', 'vertical', 'compact'] },
         showViewToggle: { control: 'boolean' },
         maxSizeMb: { control: 'number' },
         disabled: { control: 'boolean' }
@@ -19,6 +20,7 @@ const meta = {
         accept: '*',
         variant: 'multiple',
         view: 'list',
+        layout: 'horizontal',
         showViewToggle: true,
         maxSizeMb: 10,
         disabled: false
@@ -37,10 +39,29 @@ export const GridView = {
         helperText: 'Images only · max 10MB'
     }
 };
+export const VerticalSidebar = {
+    args: {
+        label: 'Upload',
+        variant: 'multiple',
+        layout: 'vertical',
+        accept: 'image/*,video/*,audio/*',
+        helperText: 'Image, video or audio',
+        showViewToggle: false
+    }
+};
+export const Compact = {
+    args: {
+        label: 'Add more',
+        variant: 'multiple',
+        layout: 'compact',
+        helperText: 'Drop or browse'
+    }
+};
 export const SingleFile = {
     args: {
         label: 'Cover image',
         variant: 'single',
+        layout: 'vertical',
         accept: 'image/*',
         helperText: 'PNG or JPG · max 10MB'
     }

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

@@ -1,9 +1,11 @@
 <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';
+	/** Dropzone chrome layout (ignored for avatar / filled single preview). */
+	type UploaderLayout = 'horizontal' | 'vertical' | 'compact';
 
 	interface FileItem {
 		file: File;
@@ -21,11 +23,29 @@
 		accept?: string;
 		variant?: UploaderVariant;
 		view?: UploaderView;
+		/**
+		 * Empty dropzone orientation.
+		 * - `horizontal` — icon + text in a row (default)
+		 * - `vertical` — stacked, better for narrow sidebars
+		 * - `compact` — tight horizontal strip
+		 */
+		layout?: UploaderLayout;
 		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 {
@@ -35,11 +55,16 @@
 		accept = 'image/*',
 		variant = 'multiple',
 		view = $bindable('list'),
+		layout = 'horizontal',
 		showViewToggle = true,
+		showFileList = true,
 		maxSizeMb = 10,
 		disabled = false,
+		src = '',
+		srcName = '',
 		class: className = '',
-		onchange
+		onchange,
+		onclear
 	}: FileUploaderProps = $props();
 
 	let isDragging = $state(false);
@@ -51,6 +76,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 +93,20 @@
 		variant === 'avatar' && (!accept || accept === '*') ? 'image/*' : accept
 	);
 
+	const singleIsVideo = $derived(
+		primaryFile?.kind === 'video' ||
+			(!primaryFile &&
+				!!externalSrc &&
+				(resolvedAccept.includes('video') || /\.(mp4|webm|mov|m4v)(\?|$)/i.test(externalSrc)))
+	);
+	const singleIsAudio = $derived(
+		primaryFile?.kind === 'audio' ||
+			(!primaryFile &&
+				!!externalSrc &&
+				(resolvedAccept.includes('audio') || /\.(mp3|wav|ogg|m4a|aac|flac)(\?|$)/i.test(externalSrc)))
+	);
+	const dropLayout = $derived(layout === 'compact' ? 'compact' : layout);
+
 	function formatBytes(bytes: number): string {
 		if (bytes === 0) return '0 B';
 		const k = 1024;
@@ -71,6 +117,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 +134,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 +143,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 +193,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 +225,10 @@
 		}
 
 		onchange?.(fileList.map((item) => item.file));
+		if (!showFileList && isMultiple) {
+			revokePreviews(fileList);
+			fileList = [];
+		}
 		if (fileInputNode) fileInputNode.value = '';
 	}
 
@@ -181,6 +238,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() {
@@ -238,7 +306,9 @@
 	</div>
 {/snippet}
 
-{#snippet dropzone(compact = false)}
+{#snippet dropzone(forceCompact = false)}
+	{@const compact = forceCompact || dropLayout === 'compact'}
+	{@const vertical = !compact && dropLayout === 'vertical'}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		role="button"
@@ -263,18 +333,27 @@
 		class={[
 			'relative overflow-hidden border border-dashed transition-colors duration-150 outline-none',
 			'focus-visible:ring-2 focus-visible:ring-brand-500/30 focus-visible:border-brand-500',
-			compact ? 'rounded-xl' : 'rounded-xl',
+			'rounded-xl',
 			isDragging
 				? 'border-brand-500 bg-brand-500/5 dark:bg-brand-950/40'
 				: 'border-border bg-surface-elevated hover:border-border-strong hover:bg-surface-overlay/60',
 			disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
 		]}
 	>
-		<div class={['flex items-center gap-4', compact ? 'px-4 py-3.5' : 'px-4 py-5 sm:px-5']}>
+		<div
+			class={[
+				'flex',
+				vertical
+					? 'flex-col items-center gap-2 px-3 py-5 text-center'
+					: compact
+						? 'flex-row items-center gap-3 px-3 py-2.5'
+						: 'flex-row items-center gap-4 px-4 py-5 sm:px-5'
+			]}
+		>
 			<div
 				class={[
 					'flex shrink-0 items-center justify-center rounded-lg transition-colors duration-150',
-					compact ? 'h-9 w-9' : 'h-11 w-11',
+					vertical ? 'h-10 w-10' : compact ? 'h-8 w-8' : 'h-11 w-11',
 					isDragging
 						? 'bg-brand-600 text-white'
 						: 'bg-brand-100 text-brand-700 dark:bg-brand-500/15 dark:text-brand-300'
@@ -282,7 +361,7 @@
 				aria-hidden="true"
 			>
 				<svg
-					class={compact ? 'h-4 w-4' : 'h-5 w-5'}
+					class={compact ? 'h-3.5 w-3.5' : 'h-5 w-5'}
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke="currentColor"
@@ -296,26 +375,35 @@
 				</svg>
 			</div>
 
-			<div class="min-w-0 flex-1 text-left">
-				<p class={['font-medium text-primary', compact ? 'text-xs' : 'text-sm']}>
+			<div class={['min-w-0', vertical ? 'w-full' : 'flex-1 text-left']}>
+				<p
+					class={[
+						'font-medium text-primary',
+						compact || vertical ? 'text-xs' : 'text-sm',
+						vertical && 'text-center'
+					]}
+				>
 					{#if isDragging}
 						Drop files to upload
 					{:else}
-						Drop files here or
+						Drop files or
 						<span class="text-brand-700 dark:text-brand-300"> browse</span>
 					{/if}
 				</p>
 				{#if helperText}
 					<p
 						id={helperId}
-						class="mt-0.5 text-xs text-secondary leading-relaxed"
+						class={[
+							'mt-0.5 text-[11px] leading-relaxed text-secondary',
+							vertical && 'text-center'
+						]}
 					>
 						{helperText}
 					</p>
 				{/if}
 			</div>
 
-			{#if !disabled && !compact}
+			{#if !disabled && !compact && !vertical}
 				<span
 					class="hidden sm:inline-flex shrink-0 items-center rounded-lg border border-border bg-surface-elevated px-3 py-1.5 text-xs font-medium text-primary pointer-events-none"
 				>
@@ -516,7 +604,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 +618,23 @@
 			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 && singleIsVideo}
+					<video
+						src={singlePreviewUrl}
+						class="h-full w-full object-cover"
+						muted
+						playsinline
+					></video>
+				{:else if singlePreviewUrl && singleIsAudio}
+					<div class="flex h-full w-full flex-col items-center justify-center gap-3 px-4">
+						{@render fileBadge('audio', 'h-14 w-14 rounded-xl text-xs')}
+						<audio src={singlePreviewUrl} controls class="w-full max-w-xs"></audio>
+					</div>
+				{:else if singlePreviewUrl}
+					<img src={singlePreviewUrl} alt="" class="h-full w-full object-cover" />
 				{: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 +656,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 +670,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 +681,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 +690,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

@@ -1,5 +1,7 @@
 type UploaderVariant = 'multiple' | 'single' | 'avatar';
 type UploaderView = 'list' | 'grid';
+/** Dropzone chrome layout (ignored for avatar / filled single preview). */
+type UploaderLayout = 'horizontal' | 'vertical' | 'compact';
 interface FileUploaderProps {
     id?: string;
     label?: string;
@@ -7,11 +9,29 @@ interface FileUploaderProps {
     accept?: string;
     variant?: UploaderVariant;
     view?: UploaderView;
+    /**
+     * Empty dropzone orientation.
+     * - `horizontal` — icon + text in a row (default)
+     * - `vertical` — stacked, better for narrow sidebars
+     * - `compact` — tight horizontal strip
+     */
+    layout?: UploaderLayout;
     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/FileUploader/FileUploaderStory.svelte

@@ -7,21 +7,27 @@
 		accept?: string;
 		variant?: 'multiple' | 'single' | 'avatar';
 		view?: 'list' | 'grid';
+		layout?: 'horizontal' | 'vertical' | 'compact';
 		showViewToggle?: boolean;
 		maxSizeMb?: number;
 		disabled?: boolean;
+		src?: string;
+		srcName?: string;
 	}>();
 </script>
 
-<div class="w-96 max-w-full">
+<div class={['max-w-full', props.layout === 'vertical' ? 'w-64' : 'w-96']}>
 	<FileUploader
 		label={props.label ?? 'Project Attachments'}
 		helperText={props.helperText ?? 'PNG, JPG, PDF or DOCX (max 10MB)'}
 		accept={props.accept ?? '*'}
 		variant={props.variant ?? 'multiple'}
 		view={props.view ?? 'list'}
+		layout={props.layout ?? 'horizontal'}
 		showViewToggle={props.showViewToggle ?? true}
 		maxSizeMb={props.maxSizeMb ?? 10}
 		disabled={props.disabled ?? false}
+		src={props.src ?? ''}
+		srcName={props.srcName ?? ''}
 	/>
 </div>

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

@@ -4,9 +4,12 @@ type $$ComponentProps = {
     accept?: string;
     variant?: 'multiple' | 'single' | 'avatar';
     view?: 'list' | 'grid';
+    layout?: 'horizontal' | 'vertical' | 'compact';
     showViewToggle?: boolean;
     maxSizeMb?: number;
     disabled?: boolean;
+    src?: string;
+    srcName?: string;
 };
 declare const FileUploaderStory: import("svelte").Component<$$ComponentProps, {}, "">;
 type FileUploaderStory = ReturnType<typeof FileUploaderStory>;

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