@r2digisolutions/components 0.1.7 → 0.2.0

package/dist/components/atoms/IconButton/IconButton.svelte

@@ -35,7 +35,7 @@
 	const isDisabled = $derived(disabled || loading);
 
 	const baseClasses =
-		'relative inline-flex items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50';
+		'relative inline-flex shrink-0 items-center justify-center transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 select-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50';
 
 	const variantClasses: Record<IconButtonVariant, string> = {
 		primary:

package/dist/components/atoms/MediaKindIcon/MediaKindIcon.stories.js

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

package/dist/components/atoms/MediaKindIcon/MediaKindIcon.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { CanvasLayerKind } from '../../../utils/canvasDocument.js';
+	import type { MediaAssetKind } from '../../../utils/mediaTracks.js';
+	import ImageIcon from '@lucide/svelte/icons/image';
+	import Video from '@lucide/svelte/icons/video';
+	import AudioLines from '@lucide/svelte/icons/audio-lines';
+	import Type from '@lucide/svelte/icons/type';
+	import Square from '@lucide/svelte/icons/square';
+	import Circle from '@lucide/svelte/icons/circle';
+	import Minus from '@lucide/svelte/icons/minus';
+	import Triangle from '@lucide/svelte/icons/triangle';
+	import Star from '@lucide/svelte/icons/star';
+	import MoveRight from '@lucide/svelte/icons/move-right';
+	import SquareRoundCorner from '@lucide/svelte/icons/square-round-corner';
+	import Hexagon from '@lucide/svelte/icons/hexagon';
+	import Pentagon from '@lucide/svelte/icons/pentagon';
+	import Diamond from '@lucide/svelte/icons/diamond';
+	import Heart from '@lucide/svelte/icons/heart';
+	import StickyNote from '@lucide/svelte/icons/sticky-note';
+	import LayoutPanelLeft from '@lucide/svelte/icons/layout-panel-left';
+	import Layers from '@lucide/svelte/icons/layers';
+	import Group from '@lucide/svelte/icons/group';
+	import Columns2 from '@lucide/svelte/icons/columns-2';
+	import Rows2 from '@lucide/svelte/icons/rows-2';
+	import Scaling from '@lucide/svelte/icons/scaling';
+	import Box from '@lucide/svelte/icons/box';
+	import Component from '@lucide/svelte/icons/component';
+	import Frame from '@lucide/svelte/icons/frame';
+
+	export type MediaKindIconSize = 'sm' | 'md' | 'lg';
+
+	interface MediaKindIconProps {
+		kind: MediaAssetKind | CanvasLayerKind;
+		size?: MediaKindIconSize;
+		class?: string;
+	}
+
+	let { kind, size = 'md', class: className = '' }: MediaKindIconProps = $props();
+
+	const sizes: Record<MediaKindIconSize, string> = {
+		sm: 'h-3.5 w-3.5',
+		md: 'h-4 w-4',
+		lg: 'h-5 w-5'
+	};
+
+	const iconClass = $derived(`${sizes[size]} ${className}`.trim());
+</script>
+
+{#if kind === 'image'}
+	<ImageIcon class={iconClass} aria-hidden="true" />
+{:else if kind === 'video'}
+	<Video class={iconClass} aria-hidden="true" />
+{:else if kind === 'audio'}
+	<AudioLines class={iconClass} aria-hidden="true" />
+{:else if kind === 'rect'}
+	<Square class={iconClass} aria-hidden="true" />
+{:else if kind === 'roundRect' || kind === 'border'}
+	<SquareRoundCorner class={iconClass} aria-hidden="true" />
+{:else if kind === 'ellipse'}
+	<Circle class={iconClass} aria-hidden="true" />
+{:else if kind === 'triangle'}
+	<Triangle class={iconClass} aria-hidden="true" />
+{:else if kind === 'star'}
+	<Star class={iconClass} aria-hidden="true" />
+{:else if kind === 'hexagon'}
+	<Hexagon class={iconClass} aria-hidden="true" />
+{:else if kind === 'pentagon'}
+	<Pentagon class={iconClass} aria-hidden="true" />
+{:else if kind === 'diamond'}
+	<Diamond class={iconClass} aria-hidden="true" />
+{:else if kind === 'heart'}
+	<Heart class={iconClass} aria-hidden="true" />
+{:else if kind === 'line'}
+	<Minus class={iconClass} aria-hidden="true" />
+{:else if kind === 'arrow'}
+	<MoveRight class={iconClass} aria-hidden="true" />
+{:else if kind === 'path'}
+	<svg class={iconClass} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+		<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l5-8 4 5 3-4 4 7" />
+	</svg>
+{:else if kind === 'sticky'}
+	<StickyNote class={iconClass} aria-hidden="true" />
+{:else if kind === 'canvasPanel'}
+	<LayoutPanelLeft class={iconClass} aria-hidden="true" />
+{:else if kind === 'overlay'}
+	<Layers class={iconClass} aria-hidden="true" />
+{:else if kind === 'hBox'}
+	<Columns2 class={iconClass} aria-hidden="true" />
+{:else if kind === 'vBox'}
+	<Rows2 class={iconClass} aria-hidden="true" />
+{:else if kind === 'sizeBox'}
+	<Box class={iconClass} aria-hidden="true" />
+{:else if kind === 'scaleBox'}
+	<Scaling class={iconClass} aria-hidden="true" />
+{:else if kind === 'group'}
+	<Group class={iconClass} aria-hidden="true" />
+{:else if kind === 'widget'}
+	<Component class={iconClass} aria-hidden="true" />
+{:else if kind === 'namedSlot'}
+	<Frame class={iconClass} aria-hidden="true" />
+{:else if kind === 'scrollBox'}
+	<svg class={iconClass} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+		<rect x="4" y="3" width="16" height="18" rx="2" />
+		<path d="M16 8h2M16 12h2M16 16h2" stroke-linecap="round" />
+	</svg>
+{:else if kind === 'wrapBox'}
+	<svg class={iconClass} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+		<rect x="3" y="4" width="7" height="6" rx="1" />
+		<rect x="12" y="4" width="9" height="6" rx="1" />
+		<rect x="3" y="13" width="9" height="6" rx="1" />
+		<rect x="14" y="13" width="7" height="6" rx="1" />
+	</svg>
+{:else if kind === 'uniformGrid'}
+	<svg class={iconClass} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+		<rect x="3" y="3" width="7" height="7" rx="1" />
+		<rect x="14" y="3" width="7" height="7" rx="1" />
+		<rect x="3" y="14" width="7" height="7" rx="1" />
+		<rect x="14" y="14" width="7" height="7" rx="1" />
+	</svg>
+{:else}
+	<Type class={iconClass} aria-hidden="true" />
+{/if}

package/dist/components/atoms/MediaKindIcon/MediaKindIcon.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { CanvasLayerKind } from '../../../utils/canvasDocument.js';
+import type { MediaAssetKind } from '../../../utils/mediaTracks.js';
+export type MediaKindIconSize = 'sm' | 'md' | 'lg';
+interface MediaKindIconProps {
+    kind: MediaAssetKind | CanvasLayerKind;
+    size?: MediaKindIconSize;
+    class?: string;
+}
+declare const MediaKindIcon: import("svelte").Component<MediaKindIconProps, {}, "">;
+type MediaKindIcon = ReturnType<typeof MediaKindIcon>;
+export default MediaKindIcon;

package/dist/components/atoms/MediaKindIcon/MediaKindIconStory.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import MediaKindIcon from './MediaKindIcon.svelte';
+</script>
+
+<div class="flex items-center gap-4 text-secondary">
+	{#each ['image', 'video', 'audio', 'text'] as kind (kind)}
+		<span class="inline-flex items-center gap-1.5 text-sm">
+			<MediaKindIcon kind={kind as 'image' | 'video' | 'audio' | 'text'} />
+			{kind}
+		</span>
+	{/each}
+</div>

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

package/dist/components/atoms/PanKnob/PanKnob.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/atoms/PanKnob/PanKnob.stories.js

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

package/dist/components/atoms/PanKnob/PanKnob.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	export type PanKnobSize = 'sm' | 'md' | 'lg';
+
+	interface PanKnobProps {
+		/** Pan value from -1 (full L) to 1 (full R). 0 is center. */
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: PanKnobSize;
+		disabled?: boolean;
+		showLabel?: boolean;
+		showValue?: boolean;
+		label?: string;
+		class?: string;
+		oninput?: (value: number) => void;
+		onchange?: (value: number) => void;
+	}
+
+	let {
+		value = $bindable(0),
+		min = -1,
+		max = 1,
+		step = 0.01,
+		size = 'md',
+		disabled = false,
+		showLabel = true,
+		showValue = true,
+		label = 'Pan',
+		class: className = '',
+		oninput,
+		onchange
+	}: PanKnobProps = $props();
+
+	/** Degrees of travel from center to either extreme (Logic-like). */
+	const SWEEP = 135;
+
+	const px = $derived({ sm: 28, md: 36, lg: 48 }[size]);
+	const stroke = $derived({ sm: 2.5, md: 3, lg: 3.5 }[size]);
+	const clamped = $derived(Math.min(max, Math.max(min, value)));
+	const norm = $derived(max === min ? 0 : (clamped - min) / (max - min)); // 0..1
+	const bipolar = $derived(norm * 2 - 1); // -1..1 relative to min/max
+	const rotation = $derived(bipolar * SWEEP);
+
+	const display = $derived.by(() => {
+		const abs = Math.round(Math.abs(bipolar) * 64);
+		if (abs === 0) return 'C';
+		return bipolar < 0 ? `L${abs}` : `R${abs}`;
+	});
+
+	let dragging = $state(false);
+	let startY = 0;
+	let startValue = 0;
+
+	function snap(v: number) {
+		const stepped = Math.round(v / step) * step;
+		return Math.min(max, Math.max(min, Number(stepped.toFixed(4))));
+	}
+
+	function commit(next: number, final = false) {
+		const v = snap(next);
+		value = v;
+		oninput?.(v);
+		if (final) onchange?.(v);
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		dragging = true;
+		startY = e.clientY;
+		startValue = clamped;
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragging || disabled) return;
+		const sensitivity = e.shiftKey ? 300 : 100;
+		const delta = (startY - e.clientY) / sensitivity;
+		commit(startValue + delta * (max - min));
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		if (!dragging) return;
+		dragging = false;
+		try {
+			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		} catch {
+			/* already released */
+		}
+		onchange?.(clamped);
+	}
+
+	function onDblClick() {
+		if (disabled) return;
+		commit(0, true);
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (disabled) return;
+		const fine = e.shiftKey ? step : step * 5;
+		if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+			e.preventDefault();
+			commit(clamped + fine, true);
+		} else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+			e.preventDefault();
+			commit(clamped - fine, true);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			commit(0, true);
+		}
+	}
+
+	/** Polar helper: angle 0 = 12 o'clock, positive clockwise. */
+	function polar(cx: number, cy: number, r: number, deg: number) {
+		const rad = ((deg - 90) * Math.PI) / 180;
+		return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+	}
+
+	function arcPath(r: number, fromDeg: number, toDeg: number) {
+		const c = px / 2;
+		const start = polar(c, c, r, fromDeg);
+		const end = polar(c, c, r, toDeg);
+		const delta = toDeg - fromDeg;
+		const large = Math.abs(delta) > 180 ? 1 : 0;
+		const sweep = delta >= 0 ? 1 : 0;
+		return `M ${start.x} ${start.y} A ${r} ${r} 0 ${large} ${sweep} ${end.x} ${end.y}`;
+	}
+
+	const trackR = $derived(px / 2 - stroke);
+	const trackPath = $derived(arcPath(trackR, -SWEEP, SWEEP));
+	const fillPath = $derived(
+		Math.abs(bipolar) < 0.001 ? '' : arcPath(trackR, 0, rotation)
+	);
+	const indicator = $derived(polar(px / 2, px / 2, trackR - stroke * 1.6, rotation));
+</script>
+
+<div class={['inline-flex flex-col items-center gap-0.5 select-none', className]}>
+	{#if showLabel}
+		<span class="text-[9px] font-medium uppercase tracking-wide text-muted">{label}</span>
+	{/if}
+
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		role="slider"
+		tabindex={disabled ? -1 : 0}
+		aria-label={label}
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={clamped}
+		aria-valuetext={display}
+		aria-disabled={disabled || undefined}
+		class={[
+			'relative touch-none rounded-full outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+			disabled ? 'cursor-not-allowed opacity-50' : 'cursor-ns-resize'
+		]}
+		style:width="{px}px"
+		style:height="{px}px"
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+		ondblclick={onDblClick}
+		onkeydown={onKeyDown}
+	>
+		<svg width={px} height={px} viewBox="0 0 {px} {px}" aria-hidden="true" class="block">
+			<!-- Track arc -->
+			<path
+				d={trackPath}
+				fill="none"
+				stroke="var(--color-border-strong, #d4d4d8)"
+				stroke-width={stroke}
+				stroke-linecap="round"
+			/>
+
+			<!-- Bipolar fill from center -->
+			{#if fillPath}
+				<path
+					d={fillPath}
+					fill="none"
+					stroke="var(--color-brand-500, #3b82f6)"
+					stroke-width={stroke}
+					stroke-linecap="round"
+				/>
+			{/if}
+
+			<!-- Knob body -->
+			<circle
+				cx={px / 2}
+				cy={px / 2}
+				r={trackR - stroke * 1.8}
+				fill="var(--surface-elevated, #fff)"
+				stroke="var(--border, #e4e4e7)"
+				stroke-width="1"
+			/>
+
+			<!-- Center pip -->
+			<circle
+				cx={px / 2}
+				cy={px / 2}
+				r={1.5}
+				fill="var(--border-strong, #d4d4d8)"
+			/>
+
+			<!-- Indicator notch -->
+			<circle
+				cx={indicator.x}
+				cy={indicator.y}
+				r={stroke * 0.85}
+				fill="var(--color-brand-500, #3b82f6)"
+			/>
+		</svg>
+	</div>
+
+	{#if showValue}
+		<span class="font-mono text-[9px] tabular-nums text-secondary">{display}</span>
+	{/if}
+</div>

package/dist/components/atoms/PanKnob/PanKnob.svelte.d.ts

@@ -0,0 +1,19 @@
+export type PanKnobSize = 'sm' | 'md' | 'lg';
+interface PanKnobProps {
+    /** Pan value from -1 (full L) to 1 (full R). 0 is center. */
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: PanKnobSize;
+    disabled?: boolean;
+    showLabel?: boolean;
+    showValue?: boolean;
+    label?: string;
+    class?: string;
+    oninput?: (value: number) => void;
+    onchange?: (value: number) => void;
+}
+declare const PanKnob: import("svelte").Component<PanKnobProps, {}, "value">;
+type PanKnob = ReturnType<typeof PanKnob>;
+export default PanKnob;

package/dist/components/atoms/PanKnob/PanKnobStory.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import PanKnob from './PanKnob.svelte';
+
+	let value = $state(-0.2);
+	let left = $state(-0.75);
+	let center = $state(0);
+	let right = $state(0.6);
+</script>
+
+<div class="flex flex-wrap items-end gap-8 p-4">
+	<PanKnob bind:value size="md" />
+	<PanKnob bind:value={left} size="sm" label="L" />
+	<PanKnob bind:value={center} size="md" label="C" />
+	<PanKnob bind:value={right} size="lg" label="R" />
+</div>

package/dist/components/atoms/PanKnob/PanKnobStory.svelte.d.ts

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

package/dist/components/atoms/Playhead/Playhead.stories.js

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

package/dist/components/atoms/Playhead/Playhead.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	interface PlayheadProps {
+		/** Position in px from left of timeline content */
+		x?: number;
+		height?: number | string;
+		dragging?: boolean;
+		class?: string;
+		ondragstart?: (e: PointerEvent) => void;
+		ondrag?: (e: PointerEvent) => void;
+		ondragend?: (e: PointerEvent) => void;
+	}
+
+	let {
+		x = 0,
+		height = '100%',
+		dragging = false,
+		class: className = '',
+		ondragstart,
+		ondrag,
+		ondragend
+	}: PlayheadProps = $props();
+
+	function onPointerDown(e: PointerEvent) {
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+		ondragstart?.(e);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!(e.currentTarget as HTMLElement).hasPointerCapture(e.pointerId)) return;
+		ondrag?.(e);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		ondragend?.(e);
+	}
+</script>
+
+<div
+	role="slider"
+	aria-label="Playhead"
+	aria-valuenow={Math.round(x)}
+	tabindex="0"
+	class={[
+		'absolute top-0 z-20 w-0 touch-none select-none',
+		dragging ? 'cursor-grabbing' : 'cursor-ew-resize',
+		className
+	]}
+	style:left={`${x}px`}
+	style:height={typeof height === 'number' ? `${height}px` : height}
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<div
+		class="absolute left-1/2 top-0 h-3 w-3 -translate-x-1/2 rounded-sm bg-red-500 shadow-sm"
+	></div>
+	<div class="absolute left-1/2 top-2 h-[calc(100%-0.5rem)] w-px -translate-x-1/2 bg-red-500"></div>
+</div>

package/dist/components/atoms/Playhead/Playhead.svelte.d.ts

@@ -0,0 +1,13 @@
+interface PlayheadProps {
+    /** Position in px from left of timeline content */
+    x?: number;
+    height?: number | string;
+    dragging?: boolean;
+    class?: string;
+    ondragstart?: (e: PointerEvent) => void;
+    ondrag?: (e: PointerEvent) => void;
+    ondragend?: (e: PointerEvent) => void;
+}
+declare const Playhead: import("svelte").Component<PlayheadProps, {}, "">;
+type Playhead = ReturnType<typeof Playhead>;
+export default Playhead;

package/dist/components/atoms/Playhead/PlayheadStory.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Playhead from './Playhead.svelte';
+</script>
+
+<div class="relative h-40 overflow-hidden rounded-lg border border-border bg-surface-elevated">
+	<div class="absolute inset-x-0 top-0 h-6 border-b border-border bg-surface"></div>
+	<Playhead x={120} />
+	<Playhead x={280} class="opacity-40" />
+</div>

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

package/dist/components/atoms/TimeRuler/TimeRuler.stories.js

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

package/dist/components/atoms/TimeRuler/TimeRuler.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { formatTimecode, ticksForDuration } from '../../../utils/mediaTime.js';
+
+	interface TimeRulerProps {
+		durationMs?: number;
+		pxPerMs?: number;
+		height?: number;
+		class?: string;
+		onclick?: (ms: number, e: MouseEvent) => void;
+	}
+
+	let {
+		durationMs = 30_000,
+		pxPerMs = 0.05,
+		height = 28,
+		class: className = '',
+		onclick
+	}: TimeRulerProps = $props();
+
+	const ticks = $derived(ticksForDuration(durationMs, pxPerMs));
+	const width = $derived(Math.max(1, durationMs * pxPerMs));
+
+	function handleClick(e: MouseEvent) {
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		const x = e.clientX - rect.left;
+		onclick?.(x / pxPerMs, e);
+	}
+</script>
+
+<div
+	role="presentation"
+	class={[
+		'relative shrink-0 select-none border-b border-border bg-surface text-[10px] text-muted',
+		className
+	]}
+	style:height={`${height}px`}
+	style:width={`${width}px`}
+	onclick={handleClick}
+>
+	{#each ticks as tick (tick.ms)}
+		<div
+			class="absolute top-0 flex h-full flex-col justify-end"
+			style:left={`${tick.ms * pxPerMs}px`}
+		>
+			<span
+				class={[
+					'mb-0.5 -translate-x-1/2 whitespace-nowrap pl-1',
+					tick.major ? 'text-secondary' : 'text-muted/70'
+				]}
+			>
+				{formatTimecode(tick.ms)}
+			</span>
+			<div
+				class={['w-px bg-border-strong', tick.major ? 'h-3' : 'h-2 opacity-60']}
+			></div>
+		</div>
+	{/each}
+</div>

package/dist/components/atoms/TimeRuler/TimeRuler.svelte.d.ts

@@ -0,0 +1,10 @@
+interface TimeRulerProps {
+    durationMs?: number;
+    pxPerMs?: number;
+    height?: number;
+    class?: string;
+    onclick?: (ms: number, e: MouseEvent) => void;
+}
+declare const TimeRuler: import("svelte").Component<TimeRulerProps, {}, "">;
+type TimeRuler = ReturnType<typeof TimeRuler>;
+export default TimeRuler;

package/dist/components/atoms/TimeRuler/TimeRulerStory.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import TimeRuler from './TimeRuler.svelte';
+</script>
+
+<div class="overflow-x-auto rounded-lg border border-border bg-surface-elevated p-2">
+	<TimeRuler durationMs={60000} pxPerMs={0.08} />
+</div>