@r2digisolutions/components 0.1.6 → 0.2.0

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

@@ -0,0 +1,15 @@
+import type { MediaClip } from '../../../utils/mediaTracks.js';
+interface TimelineClipProps {
+    clip: MediaClip;
+    pxPerMs?: number;
+    selected?: boolean;
+    locked?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    onmove?: (startMs: number) => void;
+    ontrimstart?: (startMs: number) => void;
+    ontrimend?: (endMs: number) => void;
+}
+declare const TimelineClip: import("svelte").Component<TimelineClipProps, {}, "">;
+type TimelineClip = ReturnType<typeof TimelineClip>;
+export default TimelineClip;

package/dist/components/molecules/TimelineClip/TimelineClipStory.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import TimelineClip from './TimelineClip.svelte';
+	import type { MediaClip } from '../../../utils/mediaTracks.js';
+
+	const clip: MediaClip = {
+		id: 'c1',
+		trackId: 't1',
+		name: 'Intro',
+		kind: 'video',
+		startMs: 1000,
+		endMs: 8000,
+		color: '#8b5cf6'
+	};
+</script>
+
+<div class="relative h-12 w-full rounded-lg border border-border bg-surface">
+	<TimelineClip {clip} pxPerMs={0.08} selected />
+</div>

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

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

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

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

@@ -0,0 +1,56 @@
+<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';
+
+	interface TimelineTrackProps {
+		track: MediaTrack;
+		pxPerMs?: number;
+		durationMs?: number;
+		selectedClipId?: string | null;
+		height?: number;
+		header?: Snippet;
+		class?: string;
+		onselectclip?: (clipId: string) => void;
+		onchangeclip?: (clip: MediaClip) => void;
+	}
+
+	let {
+		track,
+		pxPerMs = 0.05,
+		durationMs = 30_000,
+		selectedClipId = null,
+		height = 44,
+		header,
+		class: className = '',
+		onselectclip,
+		onchangeclip
+	}: TimelineTrackProps = $props();
+
+	const width = $derived(Math.max(1, durationMs * pxPerMs));
+</script>
+
+<div class={['flex min-w-0 border-b border-border', className]} style:height={`${height}px`}>
+	{#if header}
+		<div
+			class="sticky left-0 z-10 flex w-36 shrink-0 items-center gap-2 border-r border-border bg-surface-elevated px-2"
+		>
+			{@render header()}
+		</div>
+	{/if}
+	<div class="relative min-w-0 flex-1 overflow-hidden bg-surface/60" style:width={`${width}px`}>
+		{#each track.clips as clip (clip.id)}
+			<TimelineClip
+				{clip}
+				{pxPerMs}
+				selected={selectedClipId === clip.id}
+				locked={track.locked}
+				onclick={() => onselectclip?.(clip.id)}
+				onmove={(startMs) => onchangeclip?.(moveClip(clip, startMs))}
+				ontrimstart={(startMs) => onchangeclip?.(trimClipStart(clip, startMs))}
+				ontrimend={(endMs) => onchangeclip?.(trimClipEnd(clip, endMs))}
+			/>
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { MediaClip, MediaTrack } from '../../../utils/mediaTracks.js';
+interface TimelineTrackProps {
+    track: MediaTrack;
+    pxPerMs?: number;
+    durationMs?: number;
+    selectedClipId?: string | null;
+    height?: number;
+    header?: Snippet;
+    class?: string;
+    onselectclip?: (clipId: string) => void;
+    onchangeclip?: (clip: MediaClip) => 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 = {};

package/dist/components/molecules/TransportControls/TransportControls.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import Toolbar from '../Toolbar/Toolbar.svelte';
+	import { formatTimecode } from '../../../utils/mediaTime.js';
+	import Play from '@lucide/svelte/icons/play';
+	import Pause from '@lucide/svelte/icons/pause';
+	import Square from '@lucide/svelte/icons/square';
+
+	interface TransportControlsProps {
+		playing?: boolean;
+		currentTimeMs?: number;
+		durationMs?: number;
+		class?: string;
+		onplay?: () => void;
+		onpause?: () => void;
+		onstop?: () => void;
+	}
+
+	let {
+		playing = false,
+		currentTimeMs = 0,
+		durationMs = 0,
+		class: className = '',
+		onplay,
+		onpause,
+		onstop
+	}: TransportControlsProps = $props();
+</script>
+
+<Toolbar label="Transport" dense class={className}>
+	{#snippet center()}
+		<IconButton
+			label={playing ? 'Pause' : 'Play'}
+			size="sm"
+			variant="secondary"
+			onclick={() => (playing ? onpause?.() : onplay?.())}
+		>
+			{#if playing}
+				<Pause class="h-4 w-4" />
+			{:else}
+				<Play class="h-4 w-4" />
+			{/if}
+		</IconButton>
+		<IconButton label="Stop" size="sm" variant="ghost" onclick={() => onstop?.()}>
+			<Square class="h-3.5 w-3.5" />
+		</IconButton>
+		<span class="ml-2 font-mono text-xs text-secondary tabular-nums">
+			{formatTimecode(currentTimeMs, { showMs: true })}
+			<span class="text-muted"> / </span>
+			{formatTimecode(durationMs)}
+		</span>
+	{/snippet}
+</Toolbar>

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

@@ -0,0 +1,12 @@
+interface TransportControlsProps {
+    playing?: boolean;
+    currentTimeMs?: number;
+    durationMs?: number;
+    class?: string;
+    onplay?: () => void;
+    onpause?: () => void;
+    onstop?: () => void;
+}
+declare const TransportControls: import("svelte").Component<TransportControlsProps, {}, "">;
+type TransportControls = ReturnType<typeof TransportControls>;
+export default TransportControls;

package/dist/components/molecules/TransportControls/TransportControlsStory.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import TransportControls from './TransportControls.svelte';
+
+	let playing = $state(false);
+	let t = $state(1250);
+</script>
+
+<TransportControls
+	{playing}
+	currentTimeMs={t}
+	durationMs={30000}
+	onplay={() => (playing = true)}
+	onpause={() => (playing = false)}
+	onstop={() => {
+		playing = false;
+		t = 0;
+	}}
+/>

package/dist/components/molecules/TransportControls/TransportControlsStory.svelte.d.ts

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