@r2digisolutions/components 0.1.7 → 0.3.0

package/dist/components/molecules/TimelineTrack/TimelineTrack.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import TimelineClip from '../TimelineClip/TimelineClip.svelte';
+	import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+	import { moveClip, trimClipEnd, trimClipStart } from '../../../utils/mediaTracks.js';
+	import { snapMs } from '../../../utils/mediaTime.js';
+
+	interface TimelineTrackProps {
+		track: MediaTrack;
+		pxPerMs?: number;
+		durationMs?: number;
+		selectedClipIds?: string[];
+		height?: number;
+		snapToMs?: number;
+		headerWidth?: number;
+		header?: Snippet;
+		class?: string;
+		onselectclip?: (clipId: string, e: MouseEvent) => void;
+		oncontextmenuclip?: (clipId: string, e: MouseEvent) => void;
+		onchangeclip?: (clip: MediaClip) => void;
+		/** Move one or more clips by a shared delta (ms). Prefer over onchangeclip for moves. */
+		onmoveclips?: (clipIds: string[], deltaMs: number) => void;
+		ondropclip?: (clipId: string, e: DragEvent) => void;
+		oncontextmenutrack?: (trackId: string, e: MouseEvent) => void;
+		/** Empty lane click (deselect) */
+		onemptyclick?: (e: MouseEvent) => void;
+		/** Drop library item onto empty track area */
+		ondroptrack?: (trackId: string, e: DragEvent, timeMs: number) => void;
+	}
+
+	let {
+		track,
+		pxPerMs = 0.05,
+		durationMs = 30_000,
+		selectedClipIds = [],
+		height = 44,
+		snapToMs = 0,
+		headerWidth = 144,
+		header,
+		class: className = '',
+		onselectclip,
+		oncontextmenuclip,
+		onchangeclip,
+		onmoveclips,
+		ondropclip,
+		oncontextmenutrack,
+		onemptyclick,
+		ondroptrack
+	}: TimelineTrackProps = $props();
+
+	const width = $derived(Math.max(1, durationMs * pxPerMs));
+	const selectedSet = $derived(new Set(selectedClipIds));
+
+	function snap(ms: number) {
+		return snapToMs > 0 ? snapMs(ms, snapToMs) : ms;
+	}
+
+	function handleMove(clip: MediaClip, startMs: number) {
+		const nextStart = snap(startMs);
+		const delta = nextStart - clip.startMs;
+		if (delta === 0) return;
+		const ids =
+			selectedSet.has(clip.id) && selectedClipIds.length > 1 ? [...selectedClipIds] : [clip.id];
+		if (onmoveclips) {
+			onmoveclips(ids, delta);
+			return;
+		}
+		onchangeclip?.(moveClip(clip, nextStart));
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={['relative z-[1] flex min-w-0 border-b border-border', className]}
+	style:height={`${height}px`}
+	oncontextmenu={(e) => {
+		const t = e.target as HTMLElement;
+		if (t.closest('[aria-label]') && t.getAttribute('role') === 'button') return;
+		oncontextmenutrack?.(track.id, e);
+	}}
+>
+	{#if header}
+		<div
+			class="sticky left-0 z-10 flex shrink-0 items-center border-r border-border bg-surface-elevated px-1"
+			style:width={`${headerWidth}px`}
+		>
+			{@render header()}
+		</div>
+	{/if}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		class="relative min-w-0 flex-1 overflow-hidden bg-transparent"
+		style:width={`${width}px`}
+		role="presentation"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) onemptyclick?.(e);
+		}}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+		}}
+		ondrop={(e) => {
+			if ((e.target as HTMLElement).closest('[data-marquee-id]')) return;
+			e.preventDefault();
+			const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const timeMs = snap(Math.max(0, x / pxPerMs));
+			ondroptrack?.(track.id, e, timeMs);
+		}}
+	>
+		{#each track.clips as clip (clip.id)}
+			<TimelineClip
+				{clip}
+				{pxPerMs}
+				selected={selectedSet.has(clip.id)}
+				locked={track.locked}
+				onclick={(e) => onselectclip?.(clip.id, e)}
+				oncontextmenu={(e) => oncontextmenuclip?.(clip.id, e)}
+				onmove={(startMs) => handleMove(clip, startMs)}
+				ontrimstart={(startMs) => onchangeclip?.(trimClipStart(clip, snap(startMs)))}
+				ontrimend={(endMs) => onchangeclip?.(trimClipEnd(clip, snap(endMs)))}
+				ondropclip={(e) => ondropclip?.(clip.id, e)}
+			/>
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+interface TimelineTrackProps {
+    track: MediaTrack;
+    pxPerMs?: number;
+    durationMs?: number;
+    selectedClipIds?: string[];
+    height?: number;
+    snapToMs?: number;
+    headerWidth?: number;
+    header?: Snippet;
+    class?: string;
+    onselectclip?: (clipId: string, e: MouseEvent) => void;
+    oncontextmenuclip?: (clipId: string, e: MouseEvent) => void;
+    onchangeclip?: (clip: MediaClip) => void;
+    /** Move one or more clips by a shared delta (ms). Prefer over onchangeclip for moves. */
+    onmoveclips?: (clipIds: string[], deltaMs: number) => void;
+    ondropclip?: (clipId: string, e: DragEvent) => void;
+    oncontextmenutrack?: (trackId: string, e: MouseEvent) => void;
+    /** Empty lane click (deselect) */
+    onemptyclick?: (e: MouseEvent) => void;
+    /** Drop library item onto empty track area */
+    ondroptrack?: (trackId: string, e: DragEvent, timeMs: number) => void;
+}
+declare const TimelineTrack: import("svelte").Component<TimelineTrackProps, {}, "">;
+type TimelineTrack = ReturnType<typeof TimelineTrack>;
+export default TimelineTrack;

package/dist/components/molecules/TimelineTrack/TimelineTrackStory.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import TimelineTrack from './TimelineTrack.svelte';
+	import { createMediaTrack, createMediaClip } from '../../../utils/mediaTracks.js';
+
+	const track = createMediaTrack({
+		name: 'V1',
+		kind: 'video',
+		clips: [
+			createMediaClip({
+				trackId: 't',
+				name: 'A',
+				kind: 'video',
+				startMs: 0,
+				endMs: 5000,
+				color: '#3b82f6'
+			}),
+			createMediaClip({
+				trackId: 't',
+				name: 'B',
+				kind: 'image',
+				startMs: 6000,
+				endMs: 12000,
+				color: '#8b5cf6'
+			})
+		]
+	});
+</script>
+
+<div class="overflow-x-auto rounded-lg border border-border">
+	<TimelineTrack {track} durationMs={20000} pxPerMs={0.06} selectedClipId={track.clips[0]?.id}>
+		{#snippet header()}
+			<span class="truncate text-xs font-medium text-secondary">{track.name}</span>
+		{/snippet}
+	</TimelineTrack>
+</div>

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

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

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

package/dist/components/molecules/TraceWaterfall/TraceWaterfall.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	export interface TraceSpan {
+		id: string;
+		name: string;
+		startMs: number;
+		durationMs: number;
+		service?: string;
+		status?: 'ok' | 'error' | 'unset';
+		children?: TraceSpan[];
+	}
+
+	interface TraceWaterfallProps {
+		spans?: TraceSpan[];
+		selectedId?: string;
+		class?: string;
+		onselect?: (span: TraceSpan) => void;
+	}
+
+	let {
+		spans = [],
+		selectedId = $bindable(''),
+		class: className = '',
+		onselect
+	}: TraceWaterfallProps = $props();
+
+	function flatten(
+		list: TraceSpan[],
+		depth = 0
+	): { span: TraceSpan; depth: number }[] {
+		const out: { span: TraceSpan; depth: number }[] = [];
+		for (const span of list) {
+			out.push({ span, depth });
+			if (span.children?.length) out.push(...flatten(span.children, depth + 1));
+		}
+		return out;
+	}
+
+	const flat = $derived(flatten(spans));
+
+	const totalMs = $derived.by(() => {
+		let max = 0;
+		for (const { span } of flat) {
+			max = Math.max(max, span.startMs + span.durationMs);
+		}
+		return Math.max(max, 1);
+	});
+
+	const ticks = $derived.by(() => {
+		const steps = 4;
+		return Array.from({ length: steps + 1 }, (_, i) => (totalMs * i) / steps);
+	});
+
+	const statusBar: Record<string, string> = {
+		ok: 'bg-emerald-500 dark:bg-emerald-400',
+		error: 'bg-red-500 dark:bg-red-400',
+		unset: 'bg-sky-500 dark:bg-sky-400'
+	};
+
+	const statusDot: Record<string, string> = {
+		ok: 'bg-emerald-500',
+		error: 'bg-red-500',
+		unset: 'bg-sky-500'
+	};
+
+	function pick(span: TraceSpan) {
+		selectedId = span.id;
+		onselect?.(span);
+	}
+
+	function formatMs(ms: number) {
+		return ms >= 100 ? `${Math.round(ms)}ms` : `${ms.toFixed(ms >= 10 ? 0 : 1)}ms`;
+	}
+</script>
+
+<div
+	class={['overflow-hidden rounded-xl border border-border bg-surface-elevated shadow-sm', className]}
+	data-trace-waterfall
+>
+	<div class="flex items-center justify-between gap-3 border-b border-border px-3 py-2">
+		<span class="text-xs font-medium text-primary">
+			Trace · {formatMs(totalMs)} total · {flat.length} spans
+		</span>
+		<div class="flex items-center gap-3 text-[10px] text-muted">
+			<span class="inline-flex items-center gap-1"><span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>ok</span>
+			<span class="inline-flex items-center gap-1"><span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>error</span>
+			<span class="inline-flex items-center gap-1"><span class="h-1.5 w-1.5 rounded-full bg-sky-500"></span>unset</span>
+		</div>
+	</div>
+
+	<div class="sticky top-0 z-10 grid grid-cols-[minmax(140px,200px)_1fr_56px] gap-2 border-b border-border bg-surface-overlay/90 px-3 py-1.5 backdrop-blur">
+		<span class="text-[10px] font-semibold uppercase tracking-wide text-muted">Span</span>
+		<div class="relative h-4">
+			{#each ticks as tick, i (i)}
+				<span
+					class="absolute top-0 -translate-x-1/2 text-[10px] tabular-nums text-muted first:translate-x-0 last:-translate-x-full"
+					style={`left:${(tick / totalMs) * 100}%`}
+				>
+					{formatMs(tick)}
+				</span>
+			{/each}
+		</div>
+		<span class="text-right text-[10px] font-semibold uppercase tracking-wide text-muted">Dur</span>
+	</div>
+
+	<ul class="max-h-[420px] overflow-auto p-1.5">
+		{#each flat as row (row.span.id)}
+			<li>
+				<button
+					type="button"
+					class={[
+						'grid w-full grid-cols-[minmax(140px,200px)_1fr_56px] items-center gap-2 rounded-lg px-1.5 py-1.5 text-left transition-colors',
+						'hover:bg-surface-overlay',
+						selectedId === row.span.id ? 'bg-brand-50 ring-1 ring-brand-200/80 dark:bg-brand-950/30 dark:ring-brand-800/60' : ''
+					]}
+					onclick={() => pick(row.span)}
+				>
+					<div class="flex min-w-0 items-start gap-1.5" style={`padding-left:${row.depth * 12}px`}>
+						<span
+							class={['mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full', statusDot[row.span.status ?? 'unset']]}
+							aria-hidden="true"
+						></span>
+						<div class="min-w-0">
+							<p class="truncate text-xs font-medium text-primary">{row.span.name}</p>
+							{#if row.span.service}
+								<p class="truncate text-[10px] text-muted">{row.span.service}</p>
+							{/if}
+						</div>
+					</div>
+
+					<div class="relative h-5 overflow-hidden rounded-md bg-surface-overlay ring-1 ring-border/60">
+						{#each ticks.slice(1, -1) as tick (tick)}
+							<span
+								class="absolute inset-y-0 w-px bg-border/70"
+								style={`left:${(tick / totalMs) * 100}%`}
+								aria-hidden="true"
+							></span>
+						{/each}
+						<span
+							class={[
+								'absolute top-1 h-3 rounded-[3px] shadow-sm',
+								statusBar[row.span.status ?? 'unset']
+							]}
+							style={`left:${(row.span.startMs / totalMs) * 100}%;width:${Math.max((row.span.durationMs / totalMs) * 100, 0.8)}%`}
+							title={`${row.span.name} · ${formatMs(row.span.durationMs)}`}
+						></span>
+					</div>
+
+					<span class="text-right font-mono text-[10px] tabular-nums text-muted">
+						{formatMs(row.span.durationMs)}
+					</span>
+				</button>
+			</li>
+		{/each}
+		{#if !flat.length}
+			<li class="px-3 py-8 text-center text-sm text-muted">No spans</li>
+		{/if}
+	</ul>
+</div>

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

@@ -0,0 +1,18 @@
+export interface TraceSpan {
+    id: string;
+    name: string;
+    startMs: number;
+    durationMs: number;
+    service?: string;
+    status?: 'ok' | 'error' | 'unset';
+    children?: TraceSpan[];
+}
+interface TraceWaterfallProps {
+    spans?: TraceSpan[];
+    selectedId?: string;
+    class?: string;
+    onselect?: (span: TraceSpan) => void;
+}
+declare const TraceWaterfall: import("svelte").Component<TraceWaterfallProps, {}, "selectedId">;
+type TraceWaterfall = ReturnType<typeof TraceWaterfall>;
+export default TraceWaterfall;

package/dist/components/molecules/TraceWaterfall/TraceWaterfallStory.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import TraceWaterfall from './TraceWaterfall.svelte';
+	import type { TraceSpan } from './TraceWaterfall.svelte';
+
+	const spans: TraceSpan[] = [
+		{
+			id: '1',
+			name: 'HTTP GET /api/orders',
+			service: 'api-gateway',
+			startMs: 0,
+			durationMs: 240,
+			status: 'ok',
+			children: [
+				{
+					id: '2',
+					name: 'auth.verify',
+					service: 'auth',
+					startMs: 8,
+					durationMs: 32,
+					status: 'ok'
+				},
+				{
+					id: '3',
+					name: 'db.query orders',
+					service: 'postgres',
+					startMs: 48,
+					durationMs: 120,
+					status: 'ok',
+					children: [
+						{
+							id: '4',
+							name: 'cache.lookup',
+							service: 'redis',
+							startMs: 52,
+							durationMs: 12,
+							status: 'ok'
+						}
+					]
+				},
+				{
+					id: '5',
+					name: 'billing.enrich',
+					service: 'billing',
+					startMs: 180,
+					durationMs: 45,
+					status: 'error'
+				}
+			]
+		}
+	];
+</script>
+
+<div class="p-4">
+	<TraceWaterfall {spans} />
+</div>

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

package/dist/components/molecules/TrackHeader/TrackHeader.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/TrackHeader/TrackHeader.stories.js

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

package/dist/components/molecules/TrackHeader/TrackHeader.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import type { MediaTrack } from '../../../utils/mediaTracks.js';
+	import Volume2 from '@lucide/svelte/icons/volume-2';
+	import VolumeX from '@lucide/svelte/icons/volume-x';
+	import Headphones from '@lucide/svelte/icons/headphones';
+	import Circle from '@lucide/svelte/icons/circle';
+
+	interface TrackHeaderProps {
+		track: MediaTrack;
+		class?: string;
+		onchange?: (track: MediaTrack) => void;
+	}
+
+	let { track, class: className = '', onchange }: TrackHeaderProps = $props();
+
+	function patch(partial: Partial<MediaTrack>) {
+		onchange?.({ ...track, ...partial });
+	}
+</script>
+
+<div class={['flex min-w-0 flex-1 items-center gap-1', className]}>
+	<span
+		class="h-2.5 w-2.5 shrink-0 rounded-full"
+		style:background={track.color ?? '#3b82f6'}
+		aria-hidden="true"
+	></span>
+	<span class="min-w-0 flex-1 truncate text-xs font-semibold text-primary">{track.name}</span>
+	<IconButton
+		label={track.armed ? 'Disarm' : 'Arm'}
+		size="xs"
+		onclick={() => patch({ armed: !track.armed })}
+	>
+		<Circle class={['h-3 w-3', track.armed ? 'fill-red-500 text-red-500' : 'text-muted']} />
+	</IconButton>
+	<IconButton
+		label={track.muted ? 'Unmute' : 'Mute'}
+		size="xs"
+		onclick={() => patch({ muted: !track.muted })}
+	>
+		{#if track.muted}
+			<VolumeX class="h-3.5 w-3.5" />
+		{:else}
+			<Volume2 class="h-3.5 w-3.5" />
+		{/if}
+	</IconButton>
+	<IconButton
+		label={track.solo ? 'Unsolo' : 'Solo'}
+		size="xs"
+		onclick={() => patch({ solo: !track.solo })}
+	>
+		<Headphones class={['h-3.5 w-3.5', track.solo && 'text-brand-500']} />
+	</IconButton>
+</div>

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

@@ -0,0 +1,9 @@
+import type { MediaTrack } from '../../../utils/mediaTracks.js';
+interface TrackHeaderProps {
+    track: MediaTrack;
+    class?: string;
+    onchange?: (track: MediaTrack) => void;
+}
+declare const TrackHeader: import("svelte").Component<TrackHeaderProps, {}, "">;
+type TrackHeader = ReturnType<typeof TrackHeader>;
+export default TrackHeader;

package/dist/components/molecules/TrackHeader/TrackHeaderStory.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import TrackHeader from './TrackHeader.svelte';
+	import { createMediaTrack } from '../../../utils/mediaTracks.js';
+
+	let track = $state(createMediaTrack({ name: 'Drums', kind: 'audio', color: '#3b82f6' }));
+</script>
+
+<div class="w-52 rounded-lg border border-border bg-surface-elevated p-2">
+	<TrackHeader {track} onchange={(t) => (track = t)} />
+</div>

package/dist/components/molecules/TrackHeader/TrackHeaderStory.svelte.d.ts

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

package/dist/components/molecules/TransportControls/TransportControls.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/TransportControls/TransportControls.stories.js

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