@r2digisolutions/components 0.1.7 → 0.2.0

package/dist/components/molecules/MediaStage/MediaStage.svelte.d.ts

@@ -0,0 +1,45 @@
+import { type CanvasDocument, type CanvasLayer } from '../../../utils/canvasDocument.js';
+import { type CanvasElementDef } from '../CanvasElementsPanel/CanvasElementsPanel.svelte';
+interface MediaStageProps {
+    document: CanvasDocument;
+    selectedIds?: string[];
+    /** Multiplier on fit-to-view scale (1 = fit). */
+    zoom?: number;
+    showGrid?: boolean;
+    showGuides?: boolean;
+    snap?: boolean;
+    cellSize?: number;
+    /** Pen tool: click to place points, dblclick / Enter to finish, click first point to close. */
+    drawMode?: boolean;
+    /** Expand widget instances into resolved children for preview. */
+    expandWidgets?: boolean;
+    class?: string;
+    onselect?: (ids: string[]) => void;
+    onzoom?: (zoom: number) => void;
+    onlayerchange?: (layer: CanvasLayer) => void;
+    ondocumentchange?: (doc: CanvasDocument) => void;
+    oncontextlayer?: (payload: {
+        id: string;
+        x: number;
+        y: number;
+    }) => void;
+    /** Drop an element from the Elements panel onto the artboard. */
+    ondropelement?: (payload: {
+        def: CanvasElementDef;
+        x: number;
+        y: number;
+    }) => void;
+    ondrawcomplete?: (payload: {
+        points: {
+            x: number;
+            y: number;
+        }[];
+        closed: boolean;
+    }) => void;
+    ondrawcancel?: () => void;
+    /** Double-click a widget instance or container. */
+    onenterlayer?: (id: string) => void;
+}
+declare const MediaStage: import("svelte").Component<MediaStageProps, {}, "">;
+type MediaStage = ReturnType<typeof MediaStage>;
+export default MediaStage;

package/dist/components/molecules/MediaStage/MediaStageStory.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import MediaStage from './MediaStage.svelte';
+	import { createCanvasLayer, emptyCanvasDocument } from '../../../utils/canvasDocument.js';
+
+	let doc = $state(
+		emptyCanvasDocument({
+			layers: [
+				createCanvasLayer('image', {
+					name: 'Photo',
+					src: 'https://picsum.photos/seed/canvas-photo/480/320',
+					rect: { x: 120, y: 80, w: 480, h: 320 },
+					zIndex: 0
+				}),
+				createCanvasLayer('text', {
+					name: 'Title',
+					text: 'Canvas',
+					rect: { x: 160, y: 120, w: 240, h: 64 },
+					zIndex: 1
+				})
+			]
+		})
+	);
+	let selectedIds = $state<string[]>([doc.layers[1]?.id].filter(Boolean) as string[]);
+</script>
+
+<div class="h-[520px] overflow-hidden rounded-lg border border-border">
+	<MediaStage
+		document={doc}
+		{selectedIds}
+		onselect={(ids) => (selectedIds = ids)}
+		onlayerchange={(layer) => {
+			doc = { ...doc, layers: doc.layers.map((l) => (l.id === layer.id ? layer : l)) };
+		}}
+	/>
+</div>

package/dist/components/molecules/MediaStage/MediaStageStory.svelte.d.ts

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

package/dist/components/molecules/MediaTimeline/MediaTimeline.stories.d.ts

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

package/dist/components/molecules/MediaTimeline/MediaTimeline.stories.js

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

package/dist/components/molecules/MediaTimeline/MediaTimeline.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import Playhead from '../../atoms/Playhead/Playhead.svelte';
+	import TimeRuler from '../../atoms/TimeRuler/TimeRuler.svelte';
+	import TimelineTrack from '../TimelineTrack/TimelineTrack.svelte';
+	import VideoTrackHeader from '../VideoTrackHeader/VideoTrackHeader.svelte';
+	import TrackHeader from '../TrackHeader/TrackHeader.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+	import { clampMs, msToPx, pxPerMsFromZoom, pxToMs } from '../../../utils/mediaTime.js';
+	import ZoomIn from '@lucide/svelte/icons/zoom-in';
+	import ZoomOut from '@lucide/svelte/icons/zoom-out';
+
+	interface MediaTimelineProps {
+		tracks?: MediaTrack[];
+		durationMs?: number;
+		currentTimeMs?: number;
+		zoom?: number;
+		selectedClipId?: string | null;
+		showHeaders?: boolean;
+		headerVariant?: 'video' | 'audio' | 'plain';
+		class?: string;
+		onseek?: (ms: number) => void;
+		onselectclip?: (clipId: string) => void;
+		onchangeclip?: (clip: MediaClip) => void;
+		onchangetrack?: (track: MediaTrack) => void;
+		onzoomchange?: (zoom: number) => void;
+	}
+
+	let {
+		tracks = [],
+		durationMs = 30_000,
+		currentTimeMs = $bindable(0),
+		zoom = $bindable(1),
+		selectedClipId = null,
+		showHeaders = true,
+		headerVariant = 'plain',
+		class: className = '',
+		onseek,
+		onselectclip,
+		onchangeclip,
+		onchangetrack,
+		onzoomchange
+	}: MediaTimelineProps = $props();
+
+	const pxPerMs = $derived(pxPerMsFromZoom(zoom));
+	const contentWidth = $derived(Math.max(1, durationMs * pxPerMs));
+	const playheadX = $derived(msToPx(currentTimeMs, pxPerMs));
+
+	let scroller = $state<HTMLDivElement | null>(null);
+
+	function seekFromClientX(clientX: number) {
+		if (!scroller) return;
+		const rect = scroller.getBoundingClientRect();
+		const x = clientX - rect.left + scroller.scrollLeft - (showHeaders ? 144 : 0);
+		const ms = clampMs(pxToMs(x, pxPerMs), 0, durationMs);
+		currentTimeMs = ms;
+		onseek?.(ms);
+	}
+
+	function setZoom(next: number) {
+		zoom = Math.min(8, Math.max(0.25, next));
+		onzoomchange?.(zoom);
+	}
+</script>
+
+<div class={['flex flex-col overflow-hidden rounded-lg border border-border bg-surface', className]}>
+	<div class="flex items-center justify-end gap-1 border-b border-border px-2 py-1">
+		<IconButton label="Zoom out" size="xs" onclick={() => setZoom(zoom / 1.25)}>
+			<ZoomOut class="h-3.5 w-3.5" />
+		</IconButton>
+		<IconButton label="Zoom in" size="xs" onclick={() => setZoom(zoom * 1.25)}>
+			<ZoomIn class="h-3.5 w-3.5" />
+		</IconButton>
+	</div>
+	<div bind:this={scroller} class="relative min-h-0 flex-1 overflow-auto">
+		<div class="relative" style:width={`${contentWidth + (showHeaders ? 144 : 0)}px`}>
+			<div class="sticky top-0 z-30 flex bg-surface">
+				{#if showHeaders}
+					<div class="sticky left-0 z-10 w-36 shrink-0 border-r border-border bg-surface-elevated"></div>
+				{/if}
+				<TimeRuler
+					{durationMs}
+					{pxPerMs}
+					onclick={(ms) => {
+						currentTimeMs = clampMs(ms, 0, durationMs);
+						onseek?.(currentTimeMs);
+					}}
+				/>
+			</div>
+
+			<div class="relative">
+				{#each tracks as track (track.id)}
+					<TimelineTrack
+						{track}
+						{pxPerMs}
+						{durationMs}
+						{selectedClipId}
+						onselectclip={onselectclip}
+						onchangeclip={onchangeclip}
+					>
+						{#snippet header()}
+							{#if showHeaders}
+								{#if headerVariant === 'video' && onchangetrack}
+									<VideoTrackHeader {track} onchange={onchangetrack} />
+								{:else if headerVariant === 'audio' && onchangetrack}
+									<TrackHeader {track} onchange={onchangetrack} />
+								{:else}
+									<span class="truncate text-xs font-medium text-secondary">{track.name}</span>
+								{/if}
+							{/if}
+						{/snippet}
+					</TimelineTrack>
+				{/each}
+
+				<div
+					class="pointer-events-none absolute inset-y-0"
+					style:left={`${showHeaders ? 144 : 0}px`}
+					style:width={`${contentWidth}px`}
+				>
+					<div class="pointer-events-auto absolute inset-y-0" style:width={`${contentWidth}px`}>
+						<Playhead
+							x={playheadX}
+							ondrag={(e) => seekFromClientX(e.clientX)}
+							ondragstart={(e) => seekFromClientX(e.clientX)}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/dist/components/molecules/MediaTimeline/MediaTimeline.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+interface MediaTimelineProps {
+    tracks?: MediaTrack[];
+    durationMs?: number;
+    currentTimeMs?: number;
+    zoom?: number;
+    selectedClipId?: string | null;
+    showHeaders?: boolean;
+    headerVariant?: 'video' | 'audio' | 'plain';
+    class?: string;
+    onseek?: (ms: number) => void;
+    onselectclip?: (clipId: string) => void;
+    onchangeclip?: (clip: MediaClip) => void;
+    onchangetrack?: (track: MediaTrack) => void;
+    onzoomchange?: (zoom: number) => void;
+}
+declare const MediaTimeline: import("svelte").Component<MediaTimelineProps, {}, "zoom" | "currentTimeMs">;
+type MediaTimeline = ReturnType<typeof MediaTimeline>;
+export default MediaTimeline;

package/dist/components/molecules/MediaTimeline/MediaTimelineStory.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import MediaTimeline from './MediaTimeline.svelte';
+	import { createDemoVideoSequence } from '../../../utils/videoSequence.js';
+
+	const seq = createDemoVideoSequence();
+	let currentTimeMs = $state(2000);
+	let zoom = $state(1.2);
+	let selectedClipId = $state<string | null>(seq.tracks[0]?.clips[0]?.id ?? null);
+</script>
+
+<div class="h-64">
+	<MediaTimeline
+		tracks={seq.tracks}
+		durationMs={seq.durationMs}
+		bind:currentTimeMs
+		bind:zoom
+		{selectedClipId}
+		onselectclip={(id) => (selectedClipId = id)}
+	/>
+</div>

package/dist/components/molecules/MediaTimeline/MediaTimelineStory.svelte.d.ts

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

package/dist/components/molecules/MixerChannel/MixerChannel.stories.d.ts

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

package/dist/components/molecules/MixerChannel/MixerChannel.stories.js

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

package/dist/components/molecules/MixerChannel/MixerChannel.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import PanKnob from '../../atoms/PanKnob/PanKnob.svelte';
+	import type { MixerChannelState } from '../../../utils/audioProject.js';
+	import VolumeX from '@lucide/svelte/icons/volume-x';
+	import Volume2 from '@lucide/svelte/icons/volume-2';
+	import Headphones from '@lucide/svelte/icons/headphones';
+
+	interface MixerChannelProps {
+		channel: MixerChannelState;
+		name?: string;
+		color?: string;
+		class?: string;
+		onchange?: (channel: MixerChannelState) => void;
+	}
+
+	let {
+		channel,
+		name = 'Track',
+		color = '#3b82f6',
+		class: className = '',
+		onchange
+	}: MixerChannelProps = $props();
+
+	const volumePct = $derived(Math.min(100, Math.max(0, channel.volume * 100)));
+
+	function patch(partial: Partial<MixerChannelState>) {
+		onchange?.({ ...channel, ...partial });
+	}
+</script>
+
+<div
+	class={[
+		'flex w-20 flex-col items-center gap-2 rounded-lg border border-border bg-surface-elevated p-2',
+		className
+	]}
+>
+	<span class="h-1.5 w-full rounded-full" style:background={color} aria-hidden="true"></span>
+	<span class="w-full truncate text-center text-[10px] font-medium text-secondary">{name}</span>
+	<div class="relative flex h-32 w-full items-center justify-center py-1">
+		<div class="relative h-full w-1.5 rounded-full bg-border-strong dark:bg-surface-overlay">
+			<div
+				class="absolute bottom-0 w-full rounded-full bg-brand-500"
+				style:height="{volumePct}%"
+			></div>
+			<div
+				class="pointer-events-none absolute left-1/2 h-4 w-4 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-brand-500 bg-white shadow-md dark:bg-slate-900"
+				style:bottom="{volumePct}%"
+			>
+				<span
+					class="absolute top-1/2 left-1/2 h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-brand-500"
+				></span>
+			</div>
+		</div>
+		<input
+			type="range"
+			min={0}
+			max={1}
+			step={0.01}
+			value={channel.volume}
+			aria-label="{name} volume"
+			class="absolute inset-0 h-full w-full cursor-pointer opacity-0 [writing-mode:vertical-lr]"
+			style:direction="rtl"
+			oninput={(e) => patch({ volume: Number(e.currentTarget.value) })}
+		/>
+	</div>
+	<div class="flex items-center gap-0.5">
+		<IconButton
+			label={channel.muted ? 'Unmute' : 'Mute'}
+			size="xs"
+			onclick={() => patch({ muted: !channel.muted })}
+		>
+			{#if channel.muted}
+				<VolumeX class="h-3.5 w-3.5" />
+			{:else}
+				<Volume2 class="h-3.5 w-3.5" />
+			{/if}
+		</IconButton>
+		<IconButton
+			label={channel.solo ? 'Unsolo' : 'Solo'}
+			size="xs"
+			onclick={() => patch({ solo: !channel.solo })}
+		>
+			<Headphones class={['h-3.5 w-3.5', channel.solo && 'text-brand-500']} />
+		</IconButton>
+	</div>
+	<PanKnob
+		value={channel.pan}
+		size="sm"
+		oninput={(pan) => patch({ pan })}
+	/>
+</div>

package/dist/components/molecules/MixerChannel/MixerChannel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { MixerChannelState } from '../../../utils/audioProject.js';
+interface MixerChannelProps {
+    channel: MixerChannelState;
+    name?: string;
+    color?: string;
+    class?: string;
+    onchange?: (channel: MixerChannelState) => void;
+}
+declare const MixerChannel: import("svelte").Component<MixerChannelProps, {}, "">;
+type MixerChannel = ReturnType<typeof MixerChannel>;
+export default MixerChannel;

package/dist/components/molecules/MixerChannel/MixerChannelStory.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import MixerChannel from './MixerChannel.svelte';
+
+	let channel = $state({
+		trackId: 't1',
+		volume: 0.75,
+		pan: -0.2,
+		muted: false,
+		solo: false
+	});
+</script>
+
+<MixerChannel {channel} name="Drums" color="#3b82f6" onchange={(c) => (channel = c)} />

package/dist/components/molecules/MixerChannel/MixerChannelStory.svelte.d.ts

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