@r2digisolutions/components 0.1.6 → 0.2.0

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

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

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import AudioEditorTemplate from './AudioEditorTemplate.svelte';
+	import { createDemoAudioProject } from '../../../utils/audioProject.js';
+
+	let value = $state(createDemoAudioProject());
+</script>
+
+<AudioEditorTemplate bind:value />

package/dist/components/templates/AudioEditorTemplate/AudioEditorTemplateStory.svelte.d.ts

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

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

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

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplate.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import CanvasEditor from '../../organisms/CanvasEditor/CanvasEditor.svelte';
+	import type { CanvasDocument } from '../../../utils/canvasDocument.js';
+	import { emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+	import type { MediaAsset } from '../../../utils/mediaTracks.js';
+
+	import type { CanvasExportFormat } from '../../../utils/canvasExport.js';
+
+	interface CanvasEditorTemplateProps {
+		value?: CanvasDocument;
+		assets?: MediaAsset[];
+		class?: string;
+		onchange?: (doc: CanvasDocument) => void;
+		onexport?: (payload: {
+			format: CanvasExportFormat;
+			document: CanvasDocument;
+			blob?: Blob;
+		}) => void;
+	}
+
+	let {
+		value = $bindable(emptyCanvasDocument()),
+		assets = $bindable<MediaAsset[]>([]),
+		class: className = '',
+		onchange,
+		onexport
+	}: CanvasEditorTemplateProps = $props();
+</script>
+
+<div class={['flex h-dvh w-full flex-col bg-surface', className]}>
+	<CanvasEditor bind:value bind:assets {onchange} {onexport} class="min-h-0 flex-1" />
+</div>

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplate.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CanvasDocument } from '../../../utils/canvasDocument.js';
+import type { MediaAsset } from '../../../utils/mediaTracks.js';
+import type { CanvasExportFormat } from '../../../utils/canvasExport.js';
+interface CanvasEditorTemplateProps {
+    value?: CanvasDocument;
+    assets?: MediaAsset[];
+    class?: string;
+    onchange?: (doc: CanvasDocument) => void;
+    onexport?: (payload: {
+        format: CanvasExportFormat;
+        document: CanvasDocument;
+        blob?: Blob;
+    }) => void;
+}
+declare const CanvasEditorTemplate: import("svelte").Component<CanvasEditorTemplateProps, {}, "value" | "assets">;
+type CanvasEditorTemplate = ReturnType<typeof CanvasEditorTemplate>;
+export default CanvasEditorTemplate;

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplateStory.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import CanvasEditorTemplate from './CanvasEditorTemplate.svelte';
+	import { createCanvasLayer, emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+
+	let value = $state(
+		emptyCanvasDocument({
+			layers: [
+				createCanvasLayer('text', {
+					name: 'Welcome',
+					text: 'Figma-like canvas',
+					rect: { x: 200, y: 200, w: 400, h: 100 },
+					zIndex: 0
+				})
+			]
+		})
+	);
+</script>
+
+<div class="fixed inset-0 overflow-hidden">
+	<CanvasEditorTemplate bind:value class="!h-full" />
+</div>

package/dist/components/templates/CanvasEditorTemplate/CanvasEditorTemplateStory.svelte.d.ts

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

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<{
+        example?: "sql" | "mainOnly" | "crud";
+    }, {}, "">;
+    tags: string[];
+    argTypes: {
+        example: {
+            control: "select";
+            options: string[];
+        };
+    };
+    args: {
+        example: "crud";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CrudAdmin: Story;
+export declare const SqlBrowser: Story;
+export declare const MainOnly: Story;

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.stories.js

@@ -0,0 +1,18 @@
+import ResourceStudioTemplateStory from './ResourceStudioTemplateStory.svelte';
+const meta = {
+    title: 'Templates/ResourceStudioTemplate',
+    component: ResourceStudioTemplateStory,
+    tags: ['autodocs'],
+    argTypes: {
+        example: {
+            control: 'select',
+            options: ['crud', 'sql', 'mainOnly']
+        }
+    },
+    args: { example: 'crud' },
+    parameters: { layout: 'fullscreen' }
+};
+export default meta;
+export const CrudAdmin = {};
+export const SqlBrowser = { args: { example: 'sql' } };
+export const MainOnly = { args: { example: 'mainOnly' } };

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ResourceStudio from '../../organisms/ResourceStudio/ResourceStudio.svelte';
+	import type {
+		ResourceDefinition,
+		ResourceStudioLabels,
+		ResourceStudioLayout,
+		ResourceStudioMode,
+		ResourceStudioView
+	} from '../../organisms/ResourceStudio/types.js';
+	import type {
+		CellNote,
+		ConditionalFormatRule,
+		GridSelection
+	} from '../../organisms/DataGrid/types.js';
+	import { EMPTY_SELECTION } from '../../organisms/DataGrid/types.js';
+	import PageHeader from '../../molecules/PageHeader/PageHeader.svelte';
+
+	interface ResourceStudioTemplateProps {
+		title?: string;
+		description?: string;
+		resources?: ResourceDefinition[];
+		activeResourceId?: string;
+		records?: Record<string, unknown>[];
+		totalRecords?: number;
+		loading?: boolean;
+		page?: number;
+		pageSize?: number;
+		query?: string;
+		selection?: GridSelection;
+		notes?: CellNote[];
+		formatRules?: ConditionalFormatRule[];
+		modes?: ResourceStudioMode[];
+		activeMode?: ResourceStudioMode;
+		layout?: ResourceStudioLayout;
+		labels?: ResourceStudioLabels;
+		views?: ResourceStudioView[];
+		activeViewId?: string;
+		showHeader?: boolean;
+		class?: string;
+		headerActions?: Snippet;
+		toolbar?: Snippet;
+		sidebarItem?: Snippet<[ResourceDefinition, boolean]>;
+		sidebarFooter?: Snippet;
+		detail?: Snippet<[record: Record<string, unknown> | null]>;
+		schemaPanel?: Snippet<[ResourceDefinition]>;
+		queryPanel?: Snippet;
+		activityPanel?: Snippet;
+		recordForm?: Snippet<[mode: 'create' | 'edit', record: Record<string, unknown> | null]>;
+		empty?: Snippet;
+		dockExtra?: Snippet;
+		cell?: Snippet<[Record<string, unknown>, { id: string; header: string }]>;
+		onresourcechange?: (id: string) => void;
+		onsearch?: (q: string) => void;
+		onpagechange?: (page: number, pageSize: number) => void;
+		onsort?: (columnId: string, dir: 'asc' | 'desc') => void;
+		oncreate?: () => void;
+		oninsert?: (record: Record<string, unknown>) => void;
+		onupdate?: (id: string, patch: Record<string, unknown>) => void;
+		ondelete?: (ids: string[]) => void;
+		onduplicate?: (ids: string[]) => void;
+		onexport?: (ids: string[] | 'all') => void;
+		onimport?: (file: File) => void;
+		oncelledit?: (id: string, fieldId: string, value: unknown) => void;
+		onselectionchange?: (s: GridSelection) => void;
+		onnoteschange?: (notes: CellNote[]) => void;
+		onformatruleschange?: (rules: ConditionalFormatRule[]) => void;
+		onmodechange?: (mode: ResourceStudioMode) => void;
+		onviewchange?: (viewId: string) => void;
+		onrefresh?: () => void;
+	}
+
+	let {
+		title = 'Resource Studio',
+		description = 'Browse and edit collections with a moldable CRUD shell.',
+		resources = [],
+		activeResourceId = $bindable(''),
+		records = [],
+		totalRecords,
+		loading = false,
+		page = $bindable(1),
+		pageSize = 25,
+		query = $bindable(''),
+		selection = $bindable<GridSelection>(EMPTY_SELECTION),
+		notes = $bindable<CellNote[]>([]),
+		formatRules = $bindable<ConditionalFormatRule[]>([]),
+		modes,
+		activeMode = $bindable<ResourceStudioMode>('browse'),
+		layout = 'sidebar-main-detail',
+		labels,
+		views = [],
+		activeViewId = $bindable(''),
+		showHeader = true,
+		class: className = '',
+		headerActions,
+		toolbar,
+		sidebarItem,
+		sidebarFooter,
+		detail,
+		schemaPanel,
+		queryPanel,
+		activityPanel,
+		recordForm,
+		empty,
+		dockExtra,
+		cell,
+		onresourcechange,
+		onsearch,
+		onpagechange,
+		onsort,
+		oncreate,
+		oninsert,
+		onupdate,
+		ondelete,
+		onduplicate,
+		onexport,
+		onimport,
+		oncelledit,
+		onselectionchange,
+		onnoteschange,
+		onformatruleschange,
+		onmodechange,
+		onviewchange,
+		onrefresh
+	}: ResourceStudioTemplateProps = $props();
+</script>
+
+<div class={['flex h-svh min-h-0 w-full flex-col bg-surface', className]}>
+	{#if showHeader}
+		<div class="shrink-0 border-b border-border px-4 py-3 sm:px-6">
+			<PageHeader {title} {description}>
+				{#snippet actions()}
+					{#if headerActions}
+						{@render headerActions()}
+					{/if}
+				{/snippet}
+			</PageHeader>
+		</div>
+	{/if}
+
+	<div class="min-h-0 flex-1 p-3 sm:p-4">
+		<ResourceStudio
+			{resources}
+			bind:activeResourceId
+			{records}
+			{totalRecords}
+			{loading}
+			bind:page
+			{pageSize}
+			bind:query
+			bind:selection
+			bind:notes
+			bind:formatRules
+			{modes}
+			bind:activeMode
+			{layout}
+			{labels}
+			{views}
+			bind:activeViewId
+			class="h-full min-h-0"
+			{toolbar}
+			{sidebarItem}
+			{sidebarFooter}
+			{detail}
+			{schemaPanel}
+			{queryPanel}
+			{activityPanel}
+			{recordForm}
+			{empty}
+			{dockExtra}
+			{cell}
+			{onresourcechange}
+			{onsearch}
+			{onpagechange}
+			{onsort}
+			{oncreate}
+			{oninsert}
+			{onupdate}
+			{ondelete}
+			{onduplicate}
+			{onexport}
+			{onimport}
+			{oncelledit}
+			{onselectionchange}
+			{onnoteschange}
+			{onformatruleschange}
+			{onmodechange}
+			{onviewchange}
+			{onrefresh}
+		/>
+	</div>
+</div>

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplate.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { ResourceDefinition, ResourceStudioLabels, ResourceStudioLayout, ResourceStudioMode, ResourceStudioView } from '../../organisms/ResourceStudio/types.js';
+import type { CellNote, ConditionalFormatRule, GridSelection } from '../../organisms/DataGrid/types.js';
+interface ResourceStudioTemplateProps {
+    title?: string;
+    description?: string;
+    resources?: ResourceDefinition[];
+    activeResourceId?: string;
+    records?: Record<string, unknown>[];
+    totalRecords?: number;
+    loading?: boolean;
+    page?: number;
+    pageSize?: number;
+    query?: string;
+    selection?: GridSelection;
+    notes?: CellNote[];
+    formatRules?: ConditionalFormatRule[];
+    modes?: ResourceStudioMode[];
+    activeMode?: ResourceStudioMode;
+    layout?: ResourceStudioLayout;
+    labels?: ResourceStudioLabels;
+    views?: ResourceStudioView[];
+    activeViewId?: string;
+    showHeader?: boolean;
+    class?: string;
+    headerActions?: Snippet;
+    toolbar?: Snippet;
+    sidebarItem?: Snippet<[ResourceDefinition, boolean]>;
+    sidebarFooter?: Snippet;
+    detail?: Snippet<[record: Record<string, unknown> | null]>;
+    schemaPanel?: Snippet<[ResourceDefinition]>;
+    queryPanel?: Snippet;
+    activityPanel?: Snippet;
+    recordForm?: Snippet<[mode: 'create' | 'edit', record: Record<string, unknown> | null]>;
+    empty?: Snippet;
+    dockExtra?: Snippet;
+    cell?: Snippet<[Record<string, unknown>, {
+        id: string;
+        header: string;
+    }]>;
+    onresourcechange?: (id: string) => void;
+    onsearch?: (q: string) => void;
+    onpagechange?: (page: number, pageSize: number) => void;
+    onsort?: (columnId: string, dir: 'asc' | 'desc') => void;
+    oncreate?: () => void;
+    oninsert?: (record: Record<string, unknown>) => void;
+    onupdate?: (id: string, patch: Record<string, unknown>) => void;
+    ondelete?: (ids: string[]) => void;
+    onduplicate?: (ids: string[]) => void;
+    onexport?: (ids: string[] | 'all') => void;
+    onimport?: (file: File) => void;
+    oncelledit?: (id: string, fieldId: string, value: unknown) => void;
+    onselectionchange?: (s: GridSelection) => void;
+    onnoteschange?: (notes: CellNote[]) => void;
+    onformatruleschange?: (rules: ConditionalFormatRule[]) => void;
+    onmodechange?: (mode: ResourceStudioMode) => void;
+    onviewchange?: (viewId: string) => void;
+    onrefresh?: () => void;
+}
+declare const ResourceStudioTemplate: import("svelte").Component<ResourceStudioTemplateProps, {}, "query" | "page" | "notes" | "selection" | "formatRules" | "activeResourceId" | "activeMode" | "activeViewId">;
+type ResourceStudioTemplate = ReturnType<typeof ResourceStudioTemplate>;
+export default ResourceStudioTemplate;

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplateStory.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import ResourceStudioTemplate from './ResourceStudioTemplate.svelte';
+	import type { ResourceDefinition } from '../../organisms/ResourceStudio/types.js';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import Button from '../../atoms/Button/Button.svelte';
+	import CodeEditor from '../../molecules/CodeEditor/CodeEditor.svelte';
+
+	type Example = 'crud' | 'sql' | 'mainOnly';
+
+	let { example = 'crud' }: { example?: Example } = $props();
+
+	const resources = $derived.by((): ResourceDefinition[] => {
+		const sql = example === 'sql';
+		return [
+			{
+				id: 'users',
+				name: sql ? 'users' : 'Users',
+				group: sql ? 'public' : 'Auth',
+				recordCount: 3,
+				fields: [
+					{ id: 'id', label: 'ID', type: 'string', readonly: true },
+					{ id: 'name', label: 'Name', type: 'string', required: true },
+					{ id: 'email', label: 'Email', type: 'string', required: true },
+					{
+						id: 'role',
+						label: 'Role',
+						type: 'enum',
+						options: [
+							{ value: 'admin', label: 'Admin' },
+							{ value: 'editor', label: 'Editor' }
+						]
+					}
+				]
+			},
+			{
+				id: 'orders',
+				name: sql ? 'orders' : 'Orders',
+				group: sql ? 'public' : 'Commerce',
+				recordCount: 3,
+				fields: [
+					{ id: 'id', label: 'ID', type: 'string', readonly: true },
+					{
+						id: 'status',
+						label: 'Status',
+						type: 'enum',
+						options: [
+							{ value: 'paid', label: 'Paid' },
+							{ value: 'pending', label: 'Pending' }
+						]
+					},
+					{ id: 'total', label: 'Total', type: 'number' }
+				]
+			}
+		];
+	});
+
+	let activeResourceId = $state('users');
+	let records = $state<Record<string, unknown>[]>([
+		{ id: '1', name: 'Ana', email: 'ana@r2.dev', role: 'admin' },
+		{ id: '2', name: 'Carlos', email: 'carlos@r2.dev', role: 'editor' },
+		{ id: '3', name: 'Maya', email: 'maya@r2.dev', role: 'editor' }
+	]);
+	let orderRecords = $state<Record<string, unknown>[]>([
+		{ id: 'o1', status: 'paid', total: 120 },
+		{ id: 'o2', status: 'pending', total: 80 },
+		{ id: 'o3', status: 'paid', total: 440 }
+	]);
+	let sqlText = $state('select * from users;');
+
+	$effect(() => {
+		// Only seed when the Storybook example changes.
+		activeResourceId = example === 'mainOnly' ? 'orders' : 'users';
+	});
+
+	const activeRecords = $derived(
+		activeResourceId === 'orders' ? orderRecords : records
+	);
+</script>
+
+<ResourceStudioTemplate
+	title={example === 'sql' ? 'Database Studio' : 'Admin'}
+	description={example === 'sql'
+		? 'Drizzle-like browse UI built on ResourceStudio.'
+		: 'Full-page CRUD shell for your collections.'}
+	{resources}
+	bind:activeResourceId
+	records={activeRecords}
+	totalRecords={activeRecords.length}
+	layout={example === 'mainOnly' ? 'main-only' : 'sidebar-main-detail'}
+	modes={example === 'sql' ? ['browse', 'schema', 'query', 'detail'] : ['browse', 'detail', 'schema']}
+	labels={example === 'sql'
+		? { resources: 'Tables', records: 'rows', addRecord: 'Insert row', query: 'SQL' }
+		: undefined}
+	oninsert={(row) => {
+		if (activeResourceId === 'orders') orderRecords = [row, ...orderRecords];
+		else records = [row, ...records];
+	}}
+	onupdate={(id, patch) => {
+		const apply = (list: Record<string, unknown>[]) =>
+			list.map((r) => (String(r.id) === id ? { ...r, ...patch } : r));
+		if (activeResourceId === 'orders') orderRecords = apply(orderRecords);
+		else records = apply(records);
+	}}
+	ondelete={(ids) => {
+		const filter = (list: Record<string, unknown>[]) =>
+			list.filter((r) => !ids.includes(String(r.id)));
+		if (activeResourceId === 'orders') orderRecords = filter(orderRecords);
+		else records = filter(records);
+	}}
+>
+	{#snippet headerActions()}
+		<Button size="sm" variant="secondary">Docs</Button>
+	{/snippet}
+
+	{#snippet queryPanel()}
+		<div class="space-y-2">
+			<CodeEditor bind:value={sqlText} class="min-h-28" />
+			<Button size="sm" variant="primary">Run SQL</Button>
+		</div>
+	{/snippet}
+
+	{#snippet cell(row, column)}
+		{#if column.id === 'status' || column.id === 'role'}
+			<Badge variant="secondary">{String(row[column.id] ?? '')}</Badge>
+		{:else}
+			{row[column.id] == null ? '' : String(row[column.id])}
+		{/if}
+	{/snippet}
+</ResourceStudioTemplate>

package/dist/components/templates/ResourceStudioTemplate/ResourceStudioTemplateStory.svelte.d.ts

@@ -0,0 +1,7 @@
+type Example = 'crud' | 'sql' | 'mainOnly';
+type $$ComponentProps = {
+    example?: Example;
+};
+declare const ResourceStudioTemplateStory: import("svelte").Component<$$ComponentProps, {}, "">;
+type ResourceStudioTemplateStory = ReturnType<typeof ResourceStudioTemplateStory>;
+export default ResourceStudioTemplateStory;

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

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

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplate.svelte

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

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplate.svelte.d.ts

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

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplateStory.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import VideoEditorTemplate from './VideoEditorTemplate.svelte';
+	import { createDemoVideoSequence } from '../../../utils/videoSequence.js';
+
+	let value = $state(createDemoVideoSequence());
+</script>
+
+<VideoEditorTemplate bind:value />

package/dist/components/templates/VideoEditorTemplate/VideoEditorTemplateStory.svelte.d.ts

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