@r2digisolutions/components 0.1.7 → 0.2.0

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

package/dist/components/organisms/ImportWizard/ImportWizard.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import Wizard from '../Wizard/Wizard.svelte';
+	import DropZone from '../../molecules/DropZone/DropZone.svelte';
+	import Select from '../../molecules/Select/Select.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import type { StepItem } from '../../molecules/Stepper/Stepper.svelte';
+
+	export interface ImportColumn {
+		id: string;
+		label: string;
+	}
+
+	export interface ImportMapping {
+		source: string;
+		target: string;
+	}
+
+	export interface ImportResult {
+		rows: Record<string, string>[];
+		headers: string[];
+		mapping: ImportMapping[];
+	}
+
+	interface ImportWizardProps {
+		columns?: ImportColumn[];
+		class?: string;
+		onimport?: (result: ImportResult) => void;
+		oncancel?: () => void;
+	}
+
+	let {
+		columns = [],
+		class: className = '',
+		onimport,
+		oncancel
+	}: ImportWizardProps = $props();
+
+	const steps: StepItem[] = [
+		{ id: 'upload', label: 'Upload', description: 'CSV or TSV file' },
+		{ id: 'map', label: 'Map columns', description: 'Match fields' },
+		{ id: 'confirm', label: 'Confirm', description: 'Review & import' }
+	];
+
+	let current = $state(0);
+	let files = $state<File[]>([]);
+	let headers = $state<string[]>([]);
+	let rows = $state<Record<string, string>[]>([]);
+	let mapping = $state<ImportMapping[]>([]);
+	let parseError = $state('');
+
+	function parseCsv(text: string): { headers: string[]; rows: Record<string, string>[] } {
+		const lines = text
+			.replace(/^\uFEFF/, '')
+			.split(/\r?\n/)
+			.filter((l) => l.trim().length);
+		if (!lines.length) return { headers: [], rows: [] };
+		const delim = lines[0].includes('\t') ? '\t' : ',';
+		const split = (line: string) =>
+			line.split(delim).map((c) => c.replace(/^"|"$/g, '').trim());
+		const hdrs = split(lines[0]);
+		const parsed = lines.slice(1).map((line) => {
+			const cells = split(line);
+			const row: Record<string, string> = {};
+			hdrs.forEach((h, i) => {
+				row[h] = cells[i] ?? '';
+			});
+			return row;
+		});
+		return { headers: hdrs, rows: parsed };
+	}
+
+	async function loadFile(list: File[]) {
+		files = list;
+		parseError = '';
+		const file = list[0];
+		if (!file) {
+			headers = [];
+			rows = [];
+			mapping = [];
+			return;
+		}
+		try {
+			const text = await file.text();
+			const parsed = parseCsv(text);
+			headers = parsed.headers;
+			rows = parsed.rows;
+			mapping = headers.map((h) => {
+				const match = columns.find(
+					(c) => c.id === h || c.label.toLowerCase() === h.toLowerCase()
+				);
+				return { source: h, target: match?.id ?? '' };
+			});
+		} catch {
+			parseError = 'Could not parse file';
+			headers = [];
+			rows = [];
+		}
+	}
+
+	function setTarget(source: string, target: string) {
+		mapping = mapping.map((m) => (m.source === source ? { ...m, target } : m));
+	}
+
+	function mappedPreview(): Record<string, string>[] {
+		return rows.slice(0, 5).map((row) => {
+			const out: Record<string, string> = {};
+			for (const m of mapping) {
+				if (!m.target) continue;
+				out[m.target] = row[m.source] ?? '';
+			}
+			return out;
+		});
+	}
+
+	function finish() {
+		onimport?.({ rows, headers, mapping: mapping.filter((m) => m.target) });
+	}
+
+	const canNext = $derived(
+		current === 0 ? headers.length > 0 && !parseError : current === 1 ? mapping.some((m) => m.target) : true
+	);
+
+	const targetOptions = $derived([
+		{ value: '', label: '— skip —' },
+		...columns.map((c) => ({ value: c.id, label: c.label }))
+	]);
+</script>
+
+<div class={['w-full max-w-2xl', className]} data-import-wizard>
+	<Wizard
+		{steps}
+		bind:current
+		{canNext}
+		finishLabel="Import"
+		eyebrow="Import"
+		onfinish={finish}
+		onback={() => {
+			if (current === 0) oncancel?.();
+		}}
+	>
+		{#snippet children(step)}
+			{#if step === 0}
+				<div class="flex flex-col gap-3">
+					<DropZone
+						bind:files
+						multiple={false}
+						accept=".csv,.tsv,text/csv,text/tab-separated-values"
+						label="Drop CSV / TSV here"
+						hint="or click to browse"
+						onchange={loadFile}
+						ondropfiles={loadFile}
+					/>
+					{#if parseError}
+						<p class="text-sm text-red-600">{parseError}</p>
+					{:else if headers.length}
+						<p class="text-xs text-muted">
+							Detected {headers.length} columns · {rows.length} rows
+						</p>
+					{/if}
+				</div>
+			{:else if step === 1}
+				<div class="flex flex-col gap-2">
+					{#each mapping as m (m.source)}
+						<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
+							<code class="truncate rounded-lg bg-surface-overlay px-2 py-1.5 text-xs">{m.source}</code>
+							<span class="text-xs text-muted">→</span>
+							<Select
+								value={m.target}
+								options={targetOptions}
+								onchange={(v) => setTarget(m.source, v)}
+								size="sm"
+							/>
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<div class="flex flex-col gap-3">
+					<p class="text-sm text-secondary">
+						Ready to import <strong>{rows.length}</strong> rows with
+						<strong>{mapping.filter((m) => m.target).length}</strong> mapped fields.
+					</p>
+					<div class="overflow-auto rounded-xl border border-border">
+						<table class="min-w-full text-left text-xs">
+							<thead class="bg-surface-overlay text-muted">
+								<tr>
+									{#each mapping.filter((m) => m.target) as m (m.target)}
+										<th class="px-2 py-1.5 font-medium">{m.target}</th>
+									{/each}
+								</tr>
+							</thead>
+							<tbody>
+								{#each mappedPreview() as row, i (i)}
+									<tr class="border-t border-border">
+										{#each mapping.filter((m) => m.target) as m (m.target)}
+											<td class="px-2 py-1.5 text-primary">{row[m.target]}</td>
+										{/each}
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+					{#if oncancel}
+						<Button variant="ghost" size="sm" onclick={() => oncancel?.()}>Cancel</Button>
+					{/if}
+				</div>
+			{/if}
+		{/snippet}
+	</Wizard>
+</div>

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

@@ -0,0 +1,22 @@
+export interface ImportColumn {
+    id: string;
+    label: string;
+}
+export interface ImportMapping {
+    source: string;
+    target: string;
+}
+export interface ImportResult {
+    rows: Record<string, string>[];
+    headers: string[];
+    mapping: ImportMapping[];
+}
+interface ImportWizardProps {
+    columns?: ImportColumn[];
+    class?: string;
+    onimport?: (result: ImportResult) => void;
+    oncancel?: () => void;
+}
+declare const ImportWizard: import("svelte").Component<ImportWizardProps, {}, "">;
+type ImportWizard = ReturnType<typeof ImportWizard>;
+export default ImportWizard;

package/dist/components/organisms/ImportWizard/ImportWizardStory.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import ImportWizard from './ImportWizard.svelte';
+
+	const columns = [
+		{ id: 'name', label: 'Name' },
+		{ id: 'email', label: 'Email' },
+		{ id: 'role', label: 'Role' }
+	];
+</script>
+
+<div class="p-6">
+	<ImportWizard
+		{columns}
+		onimport={(r) => console.log('import', r)}
+	/>
+</div>

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

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

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,9 @@
+import VideoEditorStory from './VideoEditorStory.svelte';
+const meta = {
+    title: 'Organisms/VideoEditor',
+    component: VideoEditorStory,
+    tags: ['autodocs'],
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const Default = {};