@r2digisolutions/components 0.1.6 → 0.2.0

package/dist/components/organisms/ResourceStudio/fieldsToColumns.js

@@ -0,0 +1,20 @@
+/** Map ResourceField[] → DataGrid columns (skips hidden fields). */
+export function fieldsToColumns(fields) {
+    return fields
+        .filter((f) => !f.hidden)
+        .map((f) => ({
+        id: f.id,
+        header: f.label,
+        accessor: f.id,
+        sortable: true,
+        editable: !f.readonly,
+        align: f.type === 'number' ? 'right' : 'left',
+        meta: {
+            fieldType: f.type,
+            options: f.options,
+            relation: f.relation,
+            required: f.required,
+            ...f.meta
+        }
+    }));
+}

package/dist/components/organisms/ResourceStudio/fieldsToSchema.d.ts

@@ -0,0 +1,6 @@
+import type { SchemaField } from '../SchemaForm/SchemaForm.svelte';
+import type { ResourceField } from './types.js';
+/** Map ResourceField[] → SchemaForm fields (design-system controls). */
+export declare function fieldsToSchema(fields: ResourceField[], options?: {
+    mode?: 'create' | 'edit';
+}): SchemaField[];

package/dist/components/organisms/ResourceStudio/fieldsToSchema.js

@@ -0,0 +1,53 @@
+function mapFieldType(field) {
+    switch (field.type) {
+        case 'text':
+        case 'json':
+            return 'textarea';
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'toggle';
+        case 'date':
+        case 'datetime':
+            return 'date';
+        case 'enum':
+            return 'select';
+        case 'string':
+        case 'relation':
+        case 'file':
+        case 'custom':
+        default:
+            return field.options?.length ? 'select' : 'text';
+    }
+}
+function coerceDefault(field) {
+    if (field.defaultValue === undefined)
+        return undefined;
+    if (field.type === 'boolean')
+        return Boolean(field.defaultValue);
+    if (field.type === 'number') {
+        const n = Number(field.defaultValue);
+        return Number.isFinite(n) ? n : undefined;
+    }
+    return String(field.defaultValue);
+}
+/** Map ResourceField[] → SchemaForm fields (design-system controls). */
+export function fieldsToSchema(fields, options) {
+    const mode = options?.mode ?? 'create';
+    return fields
+        .filter((f) => !f.hidden)
+        .filter((f) => mode === 'edit' || !f.readonly)
+        .map((f) => ({
+        name: f.id,
+        label: f.label,
+        type: mapFieldType(f),
+        required: f.required,
+        helperText: f.description,
+        options: f.options?.map((o) => ({ value: o.value, label: o.label })),
+        defaultValue: coerceDefault(f),
+        disabled: mode === 'edit' && Boolean(f.readonly),
+        placeholder: f.type === 'enum' || f.options?.length
+            ? `Select ${f.label.toLowerCase()}…`
+            : undefined
+    }));
+}

package/dist/components/organisms/ResourceStudio/types.d.ts

@@ -0,0 +1,69 @@
+import type { ConditionalFormatRule } from '../DataGrid/types.js';
+export type FieldType = 'string' | 'text' | 'number' | 'boolean' | 'date' | 'datetime' | 'enum' | 'json' | 'relation' | 'file' | 'custom';
+export interface ResourceField {
+    id: string;
+    label: string;
+    type: FieldType;
+    description?: string;
+    required?: boolean;
+    unique?: boolean;
+    readonly?: boolean;
+    hidden?: boolean;
+    defaultValue?: unknown;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    relation?: {
+        resourceId: string;
+        fieldId: string;
+        displayField?: string;
+    };
+    meta?: Record<string, unknown>;
+}
+export interface ResourceCapabilities {
+    create?: boolean;
+    update?: boolean;
+    delete?: boolean;
+    duplicate?: boolean;
+    export?: boolean;
+    import?: boolean;
+    bulkEdit?: boolean;
+    notes?: boolean;
+    conditionalFormat?: boolean;
+    editable?: boolean;
+}
+export interface ResourceDefinition {
+    id: string;
+    name: string;
+    description?: string;
+    group?: string;
+    icon?: string;
+    fields: ResourceField[];
+    primaryKey?: string;
+    recordCount?: number;
+    capabilities?: ResourceCapabilities;
+    defaultFormatRules?: ConditionalFormatRule[];
+}
+export type ResourceStudioMode = 'browse' | 'detail' | 'schema' | 'query' | 'activity';
+export type ResourceStudioLayout = 'sidebar-main' | 'sidebar-main-detail' | 'main-only';
+export interface ResourceStudioLabels {
+    resources?: string;
+    records?: string;
+    addRecord?: string;
+    schema?: string;
+    runQuery?: string;
+    searchPlaceholder?: string;
+    detail?: string;
+    activity?: string;
+    query?: string;
+}
+export interface ResourceStudioView {
+    id: string;
+    label: string;
+    resourceId?: string;
+    query?: string;
+    formatRuleIds?: string[];
+}
+export declare const DEFAULT_CAPABILITIES: Required<ResourceCapabilities>;
+export declare function resolveCapabilities(caps?: ResourceCapabilities): Required<ResourceCapabilities>;

package/dist/components/organisms/ResourceStudio/types.js

@@ -0,0 +1,15 @@
+export const DEFAULT_CAPABILITIES = {
+    create: true,
+    update: true,
+    delete: true,
+    duplicate: false,
+    export: true,
+    import: false,
+    bulkEdit: false,
+    notes: true,
+    conditionalFormat: true,
+    editable: true
+};
+export function resolveCapabilities(caps) {
+    return { ...DEFAULT_CAPABILITIES, ...caps };
+}

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

@@ -92,6 +92,6 @@ interface SchedulerProps {
     onconfirm?: (detail: ScheduleConfirmDetail) => void;
     onclear?: () => void;
 }
-declare const Scheduler: import("svelte").Component<SchedulerProps, {}, "start" | "end" | "date" | "duration" | "bookings" | "selectedSlotId" | "slotLayout">;
+declare const Scheduler: import("svelte").Component<SchedulerProps, {}, "date" | "start" | "end" | "duration" | "bookings" | "selectedSlotId" | "slotLayout">;
 type Scheduler = ReturnType<typeof Scheduler>;
 export default Scheduler;

package/dist/components/organisms/SchemaForm/SchemaForm.svelte

@@ -40,6 +40,7 @@
 		placeholder?: string;
 		helperText?: string;
 		required?: boolean;
+		disabled?: boolean;
 		options?: SchemaFieldOption[];
 		/** Group heading before this field */
 		section?: string;
@@ -151,6 +152,7 @@
 					placeholder={field.placeholder}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'select'}
@@ -160,6 +162,7 @@
 					placeholder={field.placeholder ?? 'Select…'}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					options={field.options ?? []}
 					bindData
 				/>
@@ -168,6 +171,7 @@
 					name={field.name}
 					label={field.label}
 					helperText={field.helperText}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'checkbox'}
@@ -175,6 +179,7 @@
 					name={field.name}
 					label={field.label}
 					helperText={field.helperText}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'password'}
@@ -184,6 +189,7 @@
 					placeholder={field.placeholder}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					bindData
 				/>
 			{:else if type === 'date'}
@@ -191,7 +197,7 @@
 					<DatePicker
 						label={field.label}
 						placeholder={field.placeholder ?? 'Select date…'}
-						disabled={loading}
+						disabled={loading || field.disabled}
 						value={String(values[field.name] ?? '')}
 						onchange={(detail) => setValue(field.name, detail.value)}
 					/>
@@ -207,7 +213,7 @@
 					label={field.label}
 					options={field.options ?? []}
 					required={field.required}
-					disabled={loading}
+					disabled={loading || field.disabled}
 					status={fieldError ? 'error' : 'default'}
 					helperText={fieldError ?? field.helperText}
 					value={String(values[field.name] ?? '')}
@@ -219,7 +225,7 @@
 						label={field.label}
 						placeholder={field.placeholder ?? 'Select…'}
 						options={field.options ?? []}
-						disabled={loading}
+						disabled={loading || field.disabled}
 						value={Array.isArray(values[field.name]) ? (values[field.name] as string[]) : []}
 						onchange={(v) => setValue(field.name, v)}
 					/>
@@ -237,6 +243,7 @@
 					placeholder={field.placeholder}
 					helperText={field.helperText}
 					required={field.required}
+					disabled={field.disabled}
 					bindData
 				/>
 			{/if}

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

@@ -11,6 +11,7 @@ export interface SchemaField {
     placeholder?: string;
     helperText?: string;
     required?: boolean;
+    disabled?: boolean;
     options?: SchemaFieldOption[];
     /** Group heading before this field */
     section?: string;

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

package/dist/components/organisms/VideoEditor/VideoEditor.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+	import EditorShell from '../EditorShell/EditorShell.svelte';
+	import MediaAssetBrowser from '../../molecules/MediaAssetBrowser/MediaAssetBrowser.svelte';
+	import ProgramMonitor from '../../molecules/ProgramMonitor/ProgramMonitor.svelte';
+	import TransportControls from '../../molecules/TransportControls/TransportControls.svelte';
+	import MediaTimeline from '../../molecules/MediaTimeline/MediaTimeline.svelte';
+	import PropertyGroup from '../../molecules/PropertyGroup/PropertyGroup.svelte';
+	import PropertyField from '../../molecules/PropertyField/PropertyField.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import {
+		createMediaClip,
+		updateClipInTracks,
+		removeClipFromTracks,
+		type MediaAsset,
+		type MediaClip,
+		type MediaTrack
+	} from '../../../utils/mediaTracks.js';
+	import {
+		emptyVideoSequence,
+		type VideoSequence
+	} from '../../../utils/videoSequence.js';
+	import { clampMs } from '../../../utils/mediaTime.js';
+	import Download from '@lucide/svelte/icons/download';
+	import PanelLeft from '@lucide/svelte/icons/panel-left';
+	import PanelRight from '@lucide/svelte/icons/panel-right';
+
+	interface VideoEditorProps {
+		value?: VideoSequence;
+		class?: string;
+		onchange?: (seq: VideoSequence) => void;
+		onexport?: (payload: { format: 'json'; document: VideoSequence }) => void;
+	}
+
+	let {
+		value = $bindable(emptyVideoSequence()),
+		class: className = '',
+		onchange,
+		onexport
+	}: VideoEditorProps = $props();
+
+	let selectedClipId = $state<string | null>(null);
+	let currentTimeMs = $state(0);
+	let playing = $state(false);
+	let zoom = $state(1);
+	let showSidebar = $state(true);
+	let showInspector = $state(true);
+	let raf = 0;
+	let lastTs = 0;
+
+	const selectedClip = $derived.by(() => {
+		for (const t of value.tracks) {
+			const c = t.clips.find((x) => x.id === selectedClipId);
+			if (c) return c;
+		}
+		return null;
+	});
+
+	function emit(next: VideoSequence) {
+		value = next;
+		onchange?.(next);
+	}
+
+	function setTracks(tracks: MediaTrack[]) {
+		emit({ ...value, tracks });
+	}
+
+	function addAssetAsClip(asset: MediaAsset) {
+		const trackKind = asset.kind === 'audio' ? 'audio' : 'video';
+		const track =
+			value.tracks.find((t) => t.kind === trackKind) ??
+			value.tracks.find((t) => t.kind === 'video') ??
+			value.tracks[0];
+		if (!track) return;
+		const startMs = currentTimeMs;
+		const dur = asset.durationMs ?? (asset.kind === 'audio' ? 8000 : 5000);
+		const clip = createMediaClip({
+			trackId: track.id,
+			assetId: asset.id,
+			name: asset.name,
+			kind: asset.kind,
+			src: asset.src,
+			startMs,
+			endMs: startMs + dur,
+			color: track.color ?? (trackKind === 'audio' ? '#10b981' : '#3b82f6')
+		});
+		const assets = value.assets.some((a) => a.id === asset.id)
+			? value.assets
+			: [...value.assets, asset];
+		emit({
+			...value,
+			assets,
+			tracks: value.tracks.map((t) =>
+				t.id === track.id ? { ...t, clips: [...t.clips, clip] } : t
+			)
+		});
+		selectedClipId = clip.id;
+	}
+
+	function patchClip(clip: MediaClip) {
+		setTracks(updateClipInTracks(value.tracks, clip.id, () => clip));
+	}
+
+	function patchTrack(track: MediaTrack) {
+		setTracks(value.tracks.map((t) => (t.id === track.id ? track : t)));
+	}
+
+	function tick(ts: number) {
+		if (!playing) return;
+		if (lastTs) {
+			const delta = ts - lastTs;
+			currentTimeMs = clampMs(currentTimeMs + delta, 0, value.durationMs);
+			if (currentTimeMs >= value.durationMs) {
+				playing = false;
+				currentTimeMs = value.durationMs;
+			}
+		}
+		lastTs = ts;
+		raf = requestAnimationFrame(tick);
+	}
+
+	$effect(() => {
+		if (playing) {
+			lastTs = 0;
+			raf = requestAnimationFrame(tick);
+			return () => cancelAnimationFrame(raf);
+		}
+		cancelAnimationFrame(raf);
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		const tag = (e.target as HTMLElement)?.tagName;
+		if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+		if (e.code === 'Space') {
+			e.preventDefault();
+			playing = !playing;
+			return;
+		}
+		if ((e.key === 'Delete' || e.key === 'Backspace') && selectedClipId) {
+			e.preventDefault();
+			setTracks(removeClipFromTracks(value.tracks, selectedClipId));
+			selectedClipId = null;
+		}
+	}
+
+	function exportJson() {
+		onexport?.({ format: 'json', document: value });
+		const blob = new Blob([JSON.stringify(value, null, 2)], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = 'video-sequence.json';
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class={['flex h-full min-h-[560px] flex-col', className]}>
+	<div class="flex items-center gap-2 border-b border-border bg-surface-elevated px-3 py-2">
+		<span class="text-sm font-semibold text-primary">Video Editor</span>
+		<div class="ml-auto flex items-center gap-1">
+			<IconButton label="Toggle sidebar" size="sm" onclick={() => (showSidebar = !showSidebar)}>
+				<PanelLeft class="h-4 w-4" />
+			</IconButton>
+			<IconButton
+				label="Toggle inspector"
+				size="sm"
+				onclick={() => (showInspector = !showInspector)}
+			>
+				<PanelRight class="h-4 w-4" />
+			</IconButton>
+			<Button size="sm" variant="secondary" onclick={exportJson}>
+				<span class="inline-flex items-center gap-1.5">
+					<Download class="h-3.5 w-3.5" />
+					Export JSON
+				</span>
+			</Button>
+		</div>
+	</div>
+
+	<div class="min-h-0 flex-1">
+		<EditorShell
+			sidebarTitle="Media"
+			inspectorTitle="Clip"
+			workspaceTitle="Program"
+			bottomTitle="Timeline"
+			showBottom={true}
+			{showSidebar}
+			{showInspector}
+			wrapSidebar={true}
+			wrapInspector={true}
+			wrapWorkspace={false}
+			wrapBottom={false}
+			sidebarSize={280}
+			inspectorSize={260}
+			bottomSize={220}
+			sizeUnit="px"
+			fullHeight
+		>
+			{#snippet sidebar()}
+				<MediaAssetBrowser
+					assets={value.assets}
+					accept="image/*,video/*,audio/*"
+					helperText="Image, video or audio"
+					onassetschange={(assets) => emit({ ...value, assets })}
+					onselect={(id) => {
+						const asset = value.assets.find((a) => a.id === id);
+						if (asset) addAssetAsClip(asset);
+					}}
+					onadd={(asset) => {
+						emit({ ...value, assets: [...value.assets, asset] });
+					}}
+				/>
+			{/snippet}
+
+			{#snippet workspace()}
+				<div class="flex h-full flex-col gap-2 bg-surface p-3">
+					<TransportControls
+						{playing}
+						{currentTimeMs}
+						durationMs={value.durationMs}
+						onplay={() => (playing = true)}
+						onpause={() => (playing = false)}
+						onstop={() => {
+							playing = false;
+							currentTimeMs = 0;
+						}}
+					/>
+					<div class="min-h-0 flex-1">
+						<ProgramMonitor
+							width={value.width}
+							height={value.height}
+							background={value.background}
+							{currentTimeMs}
+							tracks={value.tracks}
+							class="mx-auto max-h-full"
+						/>
+					</div>
+				</div>
+			{/snippet}
+
+			{#snippet inspector()}
+				{#if !selectedClip}
+					<p class="px-3 py-6 text-center text-xs text-muted">Select a clip</p>
+				{:else}
+					<PropertyGroup title="Clip">
+						<PropertyField label="Name">
+							<Input
+								size="sm"
+								value={selectedClip.name}
+								oninput={(e) =>
+									patchClip({
+										...selectedClip,
+										name: (e.currentTarget as HTMLInputElement).value
+									})}
+							/>
+						</PropertyField>
+						<PropertyField label="Start">
+							<Input
+								type="number"
+								size="sm"
+								value={String(Math.round(selectedClip.startMs))}
+								oninput={(e) => {
+									const startMs = Number((e.currentTarget as HTMLInputElement).value);
+									const dur = selectedClip.endMs - selectedClip.startMs;
+									patchClip({ ...selectedClip, startMs, endMs: startMs + dur });
+								}}
+							/>
+						</PropertyField>
+						<PropertyField label="End">
+							<Input
+								type="number"
+								size="sm"
+								value={String(Math.round(selectedClip.endMs))}
+								oninput={(e) =>
+									patchClip({
+										...selectedClip,
+										endMs: Number((e.currentTarget as HTMLInputElement).value)
+									})}
+							/>
+						</PropertyField>
+					</PropertyGroup>
+				{/if}
+			{/snippet}
+
+			{#snippet bottom()}
+				<div class="h-full p-1">
+					<MediaTimeline
+						tracks={value.tracks}
+						durationMs={value.durationMs}
+						bind:currentTimeMs
+						bind:zoom
+						{selectedClipId}
+						onselectclip={(id) => (selectedClipId = id)}
+						onchangeclip={patchClip}
+						onchangetrack={patchTrack}
+						headerVariant="video"
+						onseek={(ms) => (currentTimeMs = ms)}
+						class="h-full"
+					/>
+				</div>
+			{/snippet}
+		</EditorShell>
+	</div>
+</div>

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

@@ -0,0 +1,13 @@
+import { type VideoSequence } from '../../../utils/videoSequence.js';
+interface VideoEditorProps {
+    value?: VideoSequence;
+    class?: string;
+    onchange?: (seq: VideoSequence) => void;
+    onexport?: (payload: {
+        format: 'json';
+        document: VideoSequence;
+    }) => void;
+}
+declare const VideoEditor: import("svelte").Component<VideoEditorProps, {}, "value">;
+type VideoEditor = ReturnType<typeof VideoEditor>;
+export default VideoEditor;

package/dist/components/organisms/VideoEditor/VideoEditorStory.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import VideoEditor from './VideoEditor.svelte';
+	import { createDemoVideoSequence } from '../../../utils/videoSequence.js';
+
+	let value = $state(createDemoVideoSequence());
+</script>
+
+<div class="h-[780px] w-full overflow-hidden rounded-xl border border-border">
+	<VideoEditor bind:value />
+</div>

package/dist/components/organisms/VideoEditor/VideoEditorStory.svelte.d.ts

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

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplate.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/templates/AudioEditorTemplate/AudioEditorTemplate.stories.js

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

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplate.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import AudioEditor from '../../organisms/AudioEditor/AudioEditor.svelte';
+	import { emptyAudioProject, type AudioProject } from '../../../utils/audioProject.js';
+
+	interface AudioEditorTemplateProps {
+		value?: AudioProject;
+		class?: string;
+		onchange?: (project: AudioProject) => void;
+		onexport?: (payload: { format: 'json'; document: AudioProject }) => void;
+	}
+
+	let {
+		value = $bindable(emptyAudioProject()),
+		class: className = '',
+		onchange,
+		onexport
+	}: AudioEditorTemplateProps = $props();
+</script>
+
+<div class={['flex h-dvh w-full flex-col bg-surface', className]}>
+	<AudioEditor bind:value {onchange} {onexport} class="min-h-0 flex-1" />
+</div>