@r2digisolutions/components 0.1.6 → 0.2.0

package/README.md

@@ -65,7 +65,7 @@ pnpm release
 Esto hace bump de versión, commit, tag `vX.Y.Z` y push. CI entonces:
 
 1. Publica `@r2digisolutions/components` en npm
-2. Crea un **GitHub Release** con notas generadas desde los commits desde el tag anterior
+2. Crea un **GitHub Release** con el enlace a npm y la lista de commits desde el tag anterior
 
 Mismo flujo que usan muchas libs con `bumpp` / `release-it` (tag → CI → npm + GitHub Release).
 

package/dist/components/atoms/Checkbox/Checkbox.svelte

@@ -10,7 +10,10 @@
 		value?: string;
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
+		/** Accessible name when no visible label is provided. */
+		'aria-label'?: string;
 		onchange?: (checked: boolean) => void;
+		onclick?: (e: MouseEvent) => void;
 	}
 
 	let {
@@ -24,7 +27,9 @@
 		value,
 		size = 'md',
 		class: className = '',
-		onchange
+		'aria-label': ariaLabel,
+		onchange,
+		onclick
 	}: CheckboxProps = $props();
 
 	const inputId = $derived(id ?? `checkbox-${Math.random().toString(36).slice(2, 9)}`);
@@ -48,7 +53,7 @@
 		onchange?.(checked);
 	}
 
-	// Apply indeterminate state via action
+	/** Keep DOM indeterminate in sync without bind loops. */
 	function setIndeterminate(node: HTMLInputElement) {
 		$effect(() => {
 			node.indeterminate = indeterminate;
@@ -64,7 +69,8 @@
 			{name}
 			{value}
 			{disabled}
-			bind:checked
+			checked={checked}
+			aria-label={ariaLabel ?? label}
 			{@attach setIndeterminate}
 			class={[
 				'shrink-0 cursor-pointer border-2 border-border bg-surface-elevated appearance-none transition-all duration-150',
@@ -86,6 +92,7 @@
 				background-repeat: no-repeat;
 			"
 			onchange={handleChange}
+			{onclick}
 		/>
 	</div>
 

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

@@ -9,7 +9,10 @@ interface CheckboxProps {
     value?: string;
     size?: 'sm' | 'md' | 'lg';
     class?: string;
+    /** Accessible name when no visible label is provided. */
+    'aria-label'?: string;
     onchange?: (checked: boolean) => void;
+    onclick?: (e: MouseEvent) => void;
 }
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;

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/Input/Input.svelte

@@ -10,7 +10,7 @@
 		label?: string;
 		placeholder?: string;
 		value?: string;
-		type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+		type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date';
 		status?: InputStatus;
 		helperText?: string;
 		disabled?: boolean;
@@ -21,10 +21,15 @@
 		leadIcon?: Snippet;
 		trailIcon?: Snippet;
 		class?: string;
+		autofocus?: boolean;
+		min?: number;
+		max?: number;
+		step?: number;
 		oninput?: (e: Event) => void;
 		onchange?: (e: Event) => void;
 		onfocus?: (e: FocusEvent) => void;
 		onblur?: (e: FocusEvent) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
 	}
 
 	let {
@@ -40,6 +45,10 @@
 		readonly = false,
 		required = false,
 		clearable = false,
+		autofocus = false,
+		min,
+		max,
+		step,
 		size = 'md',
 		leadIcon,
 		trailIcon,
@@ -47,7 +56,8 @@
 		oninput,
 		onchange,
 		onfocus,
-		onblur
+		onblur,
+		onkeydown
 	}: InputProps = $props();
 
 	const inputId = $derived(id ?? `input-${Math.random().toString(36).slice(2, 9)}`);
@@ -132,6 +142,10 @@
 			{disabled}
 			{readonly}
 			{required}
+			{autofocus}
+			{min}
+			{max}
+			{step}
 			bind:value
 			aria-describedby={helperText ? helperId : undefined}
 			aria-invalid={status === 'error'}
@@ -144,6 +158,7 @@
 			{onchange}
 			{onfocus}
 			{onblur}
+			{onkeydown}
 		/>
 
 		{#if hasClear}

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

@@ -7,7 +7,7 @@ interface InputProps {
     label?: string;
     placeholder?: string;
     value?: string;
-    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+    type?: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'date';
     status?: InputStatus;
     helperText?: string;
     disabled?: boolean;
@@ -18,10 +18,15 @@ interface InputProps {
     leadIcon?: Snippet;
     trailIcon?: Snippet;
     class?: string;
+    autofocus?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
     oninput?: (e: Event) => void;
     onchange?: (e: Event) => void;
     onfocus?: (e: FocusEvent) => void;
     onblur?: (e: FocusEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/atoms/MarqueeRect/MarqueeRect.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { MarqueeRect as MarqueeRectBox } from '../../../utils/marqueeSelect.js';
+
+	interface MarqueeRectProps {
+		rect?: MarqueeRectBox | null;
+		class?: string;
+	}
+
+	let { rect = null, class: className = '' }: MarqueeRectProps = $props();
+</script>
+
+{#if rect && rect.width > 0 && rect.height > 0}
+	<div
+		class={[
+			'pointer-events-none absolute z-50 rounded-sm border border-brand-500 bg-brand-500/15',
+			className
+		]}
+		style={`left:${rect.x}px;top:${rect.y}px;width:${rect.width}px;height:${rect.height}px`}
+		aria-hidden="true"
+	></div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { MarqueeRect as MarqueeRectBox } from '../../../utils/marqueeSelect.js';
+interface MarqueeRectProps {
+    rect?: MarqueeRectBox | null;
+    class?: string;
+}
+declare const MarqueeRect: import("svelte").Component<MarqueeRectProps, {}, "">;
+type MarqueeRect = ReturnType<typeof MarqueeRect>;
+export default MarqueeRect;

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 = {};