svelte-p5-components 0.2.1 → 0.4.0

package/dist/TimelineTrack.svelte

@@ -0,0 +1,376 @@
+<script lang="ts" module>
+	/**
+	 * A named region on the timeline. Rendered as a tinted band; clicking
+	 * it emits `onSegmentClick` with the full segment.
+	 */
+	export interface TimelineSegment {
+		id: string;
+		start: number;
+		end: number;
+		label?: string;
+		color?: string;
+	}
+
+	export interface TimelineViewWindow {
+		start: number;
+		end: number;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+
+	// Low-level timeline primitive: a horizontal track with a movable playhead,
+	// optional view window (zoom range with draggable handles), optional
+	// segment overlays, and seek/hover/segment-click event callbacks.
+	//
+	// This component is unopinionated about playback — it doesn't know how
+	// currentTime changes, only how to display it and how to collect user
+	// seek/hover input. Pair with <TimelineScrubber> (which adds play/pause
+	// and speed) or drive directly from your own animation loop.
+	//
+	// Units are arbitrary (seconds, frames, steps) — TimelineTrack just works
+	// in the same unit you pass in as `duration`.
+	//
+	// See the package README for usage examples.
+
+	interface Props {
+		/** Total timeline length in your chosen unit. */
+		duration: number;
+		/** Current playhead position. Bindable. */
+		currentTime?: number;
+		/**
+		 * Optional zoomed view window. When set, only this range is visible on
+		 * the track; clicks and hover map into this window. Bindable.
+		 */
+		viewWindow?: TimelineViewWindow;
+		/** Highlighted regions rendered as labeled bands. */
+		segments?: TimelineSegment[];
+		/** Show draggable handles for the view window when it's set. Default: true. */
+		showViewWindowHandles?: boolean;
+		/** Show a vertical playhead line. Default: true. */
+		showPlayhead?: boolean;
+		/** Called when the user clicks or drags the playhead. */
+		onSeek?: (time: number) => void;
+		/** Called when the user drags a view window handle. */
+		onViewWindowChange?: (window: TimelineViewWindow) => void;
+		/** Called when the user clicks a segment band. */
+		onSegmentClick?: (segment: TimelineSegment) => void;
+		/** Called whenever the mouse moves over or leaves the track. `null` on leave. */
+		onHover?: (time: number | null) => void;
+		/** Snippet rendered above the hovered-time position. Use for preview tooltips. */
+		hoverIndicator?: Snippet<[{ time: number; left: number }]>;
+		class?: string;
+	}
+
+	let {
+		duration,
+		currentTime = $bindable(0),
+		viewWindow = $bindable(undefined),
+		segments = [],
+		showViewWindowHandles = true,
+		showPlayhead = true,
+		onSeek,
+		onViewWindowChange,
+		onSegmentClick,
+		onHover,
+		hoverIndicator,
+		class: className = ''
+	}: Props = $props();
+
+	let trackEl: HTMLDivElement | null = $state(null);
+	let dragging = $state<null | 'playhead' | 'window-start' | 'window-end'>(null);
+	let hoverX = $state<number | null>(null);
+
+	const effectiveStart = $derived(viewWindow?.start ?? 0);
+	const effectiveEnd = $derived(viewWindow?.end ?? duration);
+	const effectiveRange = $derived(Math.max(0.0001, effectiveEnd - effectiveStart));
+
+	function timeToPercent(t: number): number {
+		return ((t - effectiveStart) / effectiveRange) * 100;
+	}
+
+	function eventToTime(event: PointerEvent): number | null {
+		if (!trackEl) return null;
+		const rect = trackEl.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const pct = Math.max(0, Math.min(1, x / rect.width));
+		return effectiveStart + pct * effectiveRange;
+	}
+
+	function eventToClientX(event: PointerEvent): number | null {
+		if (!trackEl) return null;
+		const rect = trackEl.getBoundingClientRect();
+		return Math.max(0, Math.min(rect.width, event.clientX - rect.left));
+	}
+
+	function handleTrackPointerDown(event: PointerEvent) {
+		// Ignore clicks on segment buttons / handles (they handle themselves).
+		if ((event.target as HTMLElement).closest('[data-skip-seek]')) return;
+
+		const time = eventToTime(event);
+		if (time === null) return;
+
+		currentTime = time;
+		onSeek?.(time);
+		dragging = 'playhead';
+		document.addEventListener('pointermove', handleDocPointerMove);
+		document.addEventListener('pointerup', handleDocPointerUp);
+	}
+
+	function handleDocPointerMove(event: PointerEvent) {
+		if (!dragging) return;
+		const time = eventToTime(event);
+		if (time === null) return;
+
+		if (dragging === 'playhead') {
+			currentTime = time;
+			onSeek?.(time);
+		} else if (dragging === 'window-start' && viewWindow) {
+			const next = {
+				start: Math.max(0, Math.min(viewWindow.end - 0.1, time)),
+				end: viewWindow.end
+			};
+			viewWindow = next;
+			onViewWindowChange?.(next);
+		} else if (dragging === 'window-end' && viewWindow) {
+			const next = {
+				start: viewWindow.start,
+				end: Math.min(duration, Math.max(viewWindow.start + 0.1, time))
+			};
+			viewWindow = next;
+			onViewWindowChange?.(next);
+		}
+	}
+
+	function handleDocPointerUp() {
+		dragging = null;
+		document.removeEventListener('pointermove', handleDocPointerMove);
+		document.removeEventListener('pointerup', handleDocPointerUp);
+	}
+
+	function handleHandlePointerDown(which: 'window-start' | 'window-end', event: PointerEvent) {
+		event.stopPropagation();
+		dragging = which;
+		document.addEventListener('pointermove', handleDocPointerMove);
+		document.addEventListener('pointerup', handleDocPointerUp);
+	}
+
+	function handleTrackPointerMove(event: PointerEvent) {
+		if (dragging) return;
+		const x = eventToClientX(event);
+		const time = eventToTime(event);
+		hoverX = x;
+		onHover?.(time);
+	}
+
+	function handleTrackPointerLeave() {
+		if (dragging) return;
+		hoverX = null;
+		onHover?.(null);
+	}
+
+	function handleSegmentClick(segment: TimelineSegment, event: MouseEvent) {
+		event.stopPropagation();
+		onSegmentClick?.(segment);
+	}
+
+	const hoveredTime = $derived.by(() => {
+		if (hoverX === null || !trackEl) return null;
+		const rect = trackEl.getBoundingClientRect();
+		const pct = Math.max(0, Math.min(1, hoverX / rect.width));
+		return effectiveStart + pct * effectiveRange;
+	});
+
+	onDestroy(() => {
+		if (typeof document !== 'undefined') {
+			document.removeEventListener('pointermove', handleDocPointerMove);
+			document.removeEventListener('pointerup', handleDocPointerUp);
+		}
+	});
+</script>
+
+<div
+	bind:this={trackEl}
+	class="timeline-track {className}"
+	class:is-dragging={dragging !== null}
+	onpointerdown={handleTrackPointerDown}
+	onpointermove={handleTrackPointerMove}
+	onpointerleave={handleTrackPointerLeave}
+	role="slider"
+	aria-valuemin={effectiveStart}
+	aria-valuemax={effectiveEnd}
+	aria-valuenow={currentTime}
+	tabindex="0"
+>
+	<div class="timeline-track__rail"></div>
+
+	{#each segments as segment (segment.id)}
+		{@const left = timeToPercent(segment.start)}
+		{@const width = timeToPercent(segment.end) - left}
+		{#if width > 0 && left < 100 && left + width > 0}
+			<button
+				type="button"
+				data-skip-seek
+				class="timeline-track__segment"
+				style:left="{Math.max(0, left)}%"
+				style:width="{Math.min(100, left + width) - Math.max(0, left)}%"
+				style:background-color={segment.color ??
+					'var(--timeline-segment-bg, rgba(59, 130, 246, 0.18))'}
+				title={segment.label ?? `${segment.start.toFixed(1)}–${segment.end.toFixed(1)}`}
+				onclick={(e) => handleSegmentClick(segment, e)}
+			>
+				{#if segment.label}<span class="timeline-track__segment-label">{segment.label}</span>{/if}
+			</button>
+		{/if}
+	{/each}
+
+	{#if viewWindow && showViewWindowHandles}
+		<div
+			data-skip-seek
+			class="timeline-track__handle timeline-track__handle--start"
+			style:left="0%"
+			onpointerdown={(e) => handleHandlePointerDown('window-start', e)}
+			role="slider"
+			aria-label="View window start"
+			aria-valuenow={viewWindow.start}
+			aria-valuemin={0}
+			aria-valuemax={viewWindow.end}
+			tabindex="0"
+		></div>
+		<div
+			data-skip-seek
+			class="timeline-track__handle timeline-track__handle--end"
+			style:left="100%"
+			onpointerdown={(e) => handleHandlePointerDown('window-end', e)}
+			role="slider"
+			aria-label="View window end"
+			aria-valuenow={viewWindow.end}
+			aria-valuemin={viewWindow.start}
+			aria-valuemax={duration}
+			tabindex="0"
+		></div>
+	{/if}
+
+	{#if showPlayhead}
+		<div
+			class="timeline-track__playhead"
+			style:left="{timeToPercent(currentTime)}%"
+			aria-hidden="true"
+		></div>
+	{/if}
+
+	{#if hoverIndicator && hoveredTime !== null && hoverX !== null}
+		<div
+			class="timeline-track__hover-indicator"
+			style:left="{timeToPercent(hoveredTime)}%"
+			aria-hidden="true"
+		>
+			{@render hoverIndicator({ time: hoveredTime, left: hoverX })}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.timeline-track {
+		position: relative;
+		width: 100%;
+		height: var(--timeline-track-height, 32px);
+		user-select: none;
+		touch-action: none;
+		cursor: pointer;
+
+		--timeline-rail-bg: #e5e7eb;
+		--timeline-rail-height: 6px;
+		--timeline-playhead-color: #ef4444;
+		--timeline-playhead-width: 2px;
+		--timeline-handle-color: #6b7280;
+		--timeline-handle-width: 4px;
+	}
+
+	.timeline-track:focus-visible {
+		outline: 2px solid #3b82f6;
+		outline-offset: 2px;
+	}
+
+	.timeline-track__rail {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: var(--timeline-rail-height);
+		transform: translateY(-50%);
+		background: var(--timeline-rail-bg);
+		border-radius: calc(var(--timeline-rail-height) / 2);
+		pointer-events: none;
+	}
+
+	.timeline-track__segment {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		height: calc(var(--timeline-rail-height) + 6px);
+		padding: 0 4px;
+		border: none;
+		border-radius: 3px;
+		cursor: pointer;
+		font:
+			10px/1 system-ui,
+			sans-serif;
+		color: #1f2937;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.timeline-track__segment:hover {
+		filter: brightness(0.92);
+	}
+
+	.timeline-track__segment-label {
+		opacity: 0.75;
+	}
+
+	.timeline-track__playhead {
+		position: absolute;
+		top: 15%;
+		bottom: 15%;
+		width: var(--timeline-playhead-width);
+		margin-left: calc(var(--timeline-playhead-width) / -2);
+		background: var(--timeline-playhead-color);
+		pointer-events: none;
+		border-radius: 1px;
+	}
+
+	.timeline-track__handle {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 10px;
+		margin-left: -5px;
+		cursor: ew-resize;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.timeline-track__handle::before {
+		content: '';
+		display: block;
+		width: var(--timeline-handle-width);
+		height: 100%;
+		background: var(--timeline-handle-color);
+		border-radius: 2px;
+	}
+
+	.timeline-track__handle:focus-visible {
+		outline: 2px solid #3b82f6;
+		outline-offset: 2px;
+	}
+
+	.timeline-track__hover-indicator {
+		position: absolute;
+		bottom: 100%;
+		pointer-events: none;
+	}
+</style>

package/dist/TimelineTrack.svelte.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A named region on the timeline. Rendered as a tinted band; clicking
+ * it emits `onSegmentClick` with the full segment.
+ */
+export interface TimelineSegment {
+    id: string;
+    start: number;
+    end: number;
+    label?: string;
+    color?: string;
+}
+export interface TimelineViewWindow {
+    start: number;
+    end: number;
+}
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Total timeline length in your chosen unit. */
+    duration: number;
+    /** Current playhead position. Bindable. */
+    currentTime?: number;
+    /**
+     * Optional zoomed view window. When set, only this range is visible on
+     * the track; clicks and hover map into this window. Bindable.
+     */
+    viewWindow?: TimelineViewWindow;
+    /** Highlighted regions rendered as labeled bands. */
+    segments?: TimelineSegment[];
+    /** Show draggable handles for the view window when it's set. Default: true. */
+    showViewWindowHandles?: boolean;
+    /** Show a vertical playhead line. Default: true. */
+    showPlayhead?: boolean;
+    /** Called when the user clicks or drags the playhead. */
+    onSeek?: (time: number) => void;
+    /** Called when the user drags a view window handle. */
+    onViewWindowChange?: (window: TimelineViewWindow) => void;
+    /** Called when the user clicks a segment band. */
+    onSegmentClick?: (segment: TimelineSegment) => void;
+    /** Called whenever the mouse moves over or leaves the track. `null` on leave. */
+    onHover?: (time: number | null) => void;
+    /** Snippet rendered above the hovered-time position. Use for preview tooltips. */
+    hoverIndicator?: Snippet<[{
+        time: number;
+        left: number;
+    }]>;
+    class?: string;
+}
+declare const TimelineTrack: import("svelte").Component<Props, {}, "currentTime" | "viewWindow">;
+type TimelineTrack = ReturnType<typeof TimelineTrack>;
+export default TimelineTrack;

package/dist/TimelineTrack.test.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/TimelineTrack.test.svelte.js

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import TimelineTrack, {} from './TimelineTrack.svelte';
+describe('<TimelineTrack>', () => {
+    it('renders a playhead at the correct percent for the currentTime', () => {
+        const { container } = render(TimelineTrack, {
+            props: { duration: 100, currentTime: 25 }
+        });
+        const playhead = container.querySelector('.timeline-track__playhead');
+        expect(playhead).not.toBeNull();
+        expect(playhead.style.left).toBe('25%');
+    });
+    it('omits the playhead when showPlayhead is false', () => {
+        const { container } = render(TimelineTrack, {
+            props: { duration: 100, currentTime: 50, showPlayhead: false }
+        });
+        expect(container.querySelector('.timeline-track__playhead')).toBeNull();
+    });
+    it('renders one band per segment with the correct width percent', () => {
+        const segments = [
+            { id: 's1', start: 0, end: 20 },
+            { id: 's2', start: 40, end: 60, label: 'Middle' }
+        ];
+        const { container } = render(TimelineTrack, {
+            props: { duration: 100, segments }
+        });
+        const bands = container.querySelectorAll('.timeline-track__segment');
+        expect(bands).toHaveLength(2);
+        expect(bands[0]?.style.left).toBe('0%');
+        expect(bands[0]?.style.width).toBe('20%');
+        expect(bands[1]?.style.left).toBe('40%');
+        expect(bands[1]?.style.width).toBe('20%');
+        expect(bands[1]?.textContent).toContain('Middle');
+    });
+    it('onSegmentClick fires the full segment when a band is clicked', async () => {
+        const segments = [{ id: 's1', start: 0, end: 20, label: 'Intro' }];
+        const onSegmentClick = vi.fn();
+        const { container } = render(TimelineTrack, {
+            props: { duration: 100, segments, onSegmentClick }
+        });
+        const band = container.querySelector('.timeline-track__segment');
+        await fireEvent.click(band);
+        expect(onSegmentClick).toHaveBeenCalledTimes(1);
+        expect(onSegmentClick.mock.calls[0]?.[0]?.id).toBe('s1');
+    });
+    it('view window handles render when viewWindow is provided', () => {
+        const { container } = render(TimelineTrack, {
+            props: { duration: 100, currentTime: 50, viewWindow: { start: 20, end: 80 } }
+        });
+        expect(container.querySelectorAll('.timeline-track__handle')).toHaveLength(2);
+    });
+    it('view window handles hidden when showViewWindowHandles=false', () => {
+        const { container } = render(TimelineTrack, {
+            props: {
+                duration: 100,
+                viewWindow: { start: 20, end: 80 },
+                showViewWindowHandles: false
+            }
+        });
+        expect(container.querySelectorAll('.timeline-track__handle')).toHaveLength(0);
+    });
+    it('has role=slider with aria-valuemin/max/now reflecting view window', () => {
+        const { container } = render(TimelineTrack, {
+            props: { duration: 100, currentTime: 30, viewWindow: { start: 10, end: 90 } }
+        });
+        const track = container.querySelector('.timeline-track');
+        expect(track.getAttribute('role')).toBe('slider');
+        expect(track.getAttribute('aria-valuemin')).toBe('10');
+        expect(track.getAttribute('aria-valuemax')).toBe('90');
+        expect(track.getAttribute('aria-valuenow')).toBe('30');
+    });
+});

package/dist/createMediaSync.svelte.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Sync a timeline's `currentTime` with an HTMLMediaElement (video or audio).
+ *
+ * The "speed multiplier quietly becomes a no-op while video is playing" bug
+ * appears in every app that wires a timeline to a video player without
+ * thinking about it carefully. `createMediaSync` handles the branch
+ * explicitly:
+ *
+ * - If the media element is playing, `isLocked === true` — the timeline
+ *   should display the video's currentTime and should *not* advance
+ *   currentTime from its own animation loop. Surface `isLocked` to the user
+ *   (see `<TimelineScrubber speedLocked>`) so the speed multiplier's
+ *   inactivity is visible rather than silent.
+ *
+ * - If the media element is paused or unloaded, the timeline is free to run
+ *   its own animation loop and the consumer's speed multiplier applies.
+ *
+ * Consumers own the animation loop (an rAF tick that advances currentTime
+ * by `speed * deltaMs / 1000`). `createMediaSync` only bridges the
+ * media→timeline direction and surfaces the lock signal.
+ *
+ * Use `.seek(time)` to write the other direction (timeline→media) — the
+ * helper clamps to the media's duration and guards against NaN.
+ *
+ * @example
+ * ```ts
+ * const sync = createMediaSync();
+ *
+ * $effect(() => { sync.attach(videoElement); });
+ *
+ * // In your rAF loop:
+ * if (sync.isLocked) currentTime = sync.mediaTime;
+ * else currentTime += speed * dt / 1000;
+ *
+ * // When user scrubs the timeline:
+ * sync.seek(newTime);
+ * ```
+ */
+export interface MediaSync {
+    /** The media element's currentTime, when attached. */
+    readonly mediaTime: number;
+    /** The media element's duration (possibly Infinity for streams). */
+    readonly mediaDuration: number;
+    /** True when the media is playing — timeline should follow, not drive. */
+    readonly isLocked: boolean;
+    /** Attach the sync to an HTMLMediaElement. Re-attaching switches to the new one. */
+    attach(el: HTMLMediaElement | null): void;
+    /** Remove listeners; idempotent. Called automatically when `attach(null)`. */
+    detach(): void;
+    /** Seek the attached media to `time`, clamped into [0, duration]. */
+    seek(time: number): void;
+}
+export declare function createMediaSync(): MediaSync;

package/dist/createMediaSync.svelte.js

@@ -0,0 +1,115 @@
+/**
+ * Sync a timeline's `currentTime` with an HTMLMediaElement (video or audio).
+ *
+ * The "speed multiplier quietly becomes a no-op while video is playing" bug
+ * appears in every app that wires a timeline to a video player without
+ * thinking about it carefully. `createMediaSync` handles the branch
+ * explicitly:
+ *
+ * - If the media element is playing, `isLocked === true` — the timeline
+ *   should display the video's currentTime and should *not* advance
+ *   currentTime from its own animation loop. Surface `isLocked` to the user
+ *   (see `<TimelineScrubber speedLocked>`) so the speed multiplier's
+ *   inactivity is visible rather than silent.
+ *
+ * - If the media element is paused or unloaded, the timeline is free to run
+ *   its own animation loop and the consumer's speed multiplier applies.
+ *
+ * Consumers own the animation loop (an rAF tick that advances currentTime
+ * by `speed * deltaMs / 1000`). `createMediaSync` only bridges the
+ * media→timeline direction and surfaces the lock signal.
+ *
+ * Use `.seek(time)` to write the other direction (timeline→media) — the
+ * helper clamps to the media's duration and guards against NaN.
+ *
+ * @example
+ * ```ts
+ * const sync = createMediaSync();
+ *
+ * $effect(() => { sync.attach(videoElement); });
+ *
+ * // In your rAF loop:
+ * if (sync.isLocked) currentTime = sync.mediaTime;
+ * else currentTime += speed * dt / 1000;
+ *
+ * // When user scrubs the timeline:
+ * sync.seek(newTime);
+ * ```
+ */
+export function createMediaSync() {
+    let el = null;
+    let mediaTime = $state(0);
+    let mediaDuration = $state(0);
+    let isLocked = $state(false);
+    function onTimeUpdate() {
+        if (el)
+            mediaTime = el.currentTime;
+    }
+    function onDurationChange() {
+        if (el)
+            mediaDuration = isFinite(el.duration) ? el.duration : 0;
+    }
+    function onPlay() {
+        isLocked = true;
+    }
+    function onPause() {
+        isLocked = false;
+    }
+    function onEnded() {
+        isLocked = false;
+    }
+    function detachInner() {
+        if (!el)
+            return;
+        el.removeEventListener('timeupdate', onTimeUpdate);
+        el.removeEventListener('durationchange', onDurationChange);
+        el.removeEventListener('play', onPlay);
+        el.removeEventListener('pause', onPause);
+        el.removeEventListener('ended', onEnded);
+        el = null;
+    }
+    return {
+        get mediaTime() {
+            return mediaTime;
+        },
+        get mediaDuration() {
+            return mediaDuration;
+        },
+        get isLocked() {
+            return isLocked;
+        },
+        attach(next) {
+            detachInner();
+            el = next;
+            if (!el) {
+                mediaTime = 0;
+                mediaDuration = 0;
+                isLocked = false;
+                return;
+            }
+            mediaTime = el.currentTime;
+            mediaDuration = isFinite(el.duration) ? el.duration : 0;
+            isLocked = !el.paused && !el.ended;
+            el.addEventListener('timeupdate', onTimeUpdate);
+            el.addEventListener('durationchange', onDurationChange);
+            el.addEventListener('play', onPlay);
+            el.addEventListener('pause', onPause);
+            el.addEventListener('ended', onEnded);
+        },
+        detach() {
+            detachInner();
+            mediaTime = 0;
+            mediaDuration = 0;
+            isLocked = false;
+        },
+        seek(time) {
+            if (!el)
+                return;
+            const dur = isFinite(el.duration) ? el.duration : Number.MAX_SAFE_INTEGER;
+            const clamped = Math.max(0, Math.min(dur, time));
+            if (!isFinite(clamped))
+                return;
+            el.currentTime = clamped;
+        }
+    };
+}

package/dist/index.d.ts

@@ -3,3 +3,10 @@ export { default as FPSMonitor } from './FPSMonitor.svelte';
 export { default as SketchDebug } from './SketchDebug.svelte';
 export { default as DraggableWindow } from './DraggableWindow.svelte';
 export { default as DraggableSketch } from './DraggableSketch.svelte';
+export { default as CanvasFrame } from './CanvasFrame.svelte';
+export { default as SplitPane } from './SplitPane.svelte';
+export { default as HoverTooltip } from './HoverTooltip.svelte';
+export { default as EntityToggleList, type Entity } from './EntityToggleList.svelte';
+export { default as TimelineTrack, type TimelineSegment, type TimelineViewWindow } from './TimelineTrack.svelte';
+export { default as TimelineScrubber } from './TimelineScrubber.svelte';
+export { createMediaSync, type MediaSync } from './createMediaSync.svelte.js';

package/dist/index.js

@@ -3,3 +3,10 @@ export { default as FPSMonitor } from './FPSMonitor.svelte';
 export { default as SketchDebug } from './SketchDebug.svelte';
 export { default as DraggableWindow } from './DraggableWindow.svelte';
 export { default as DraggableSketch } from './DraggableSketch.svelte';
+export { default as CanvasFrame } from './CanvasFrame.svelte';
+export { default as SplitPane } from './SplitPane.svelte';
+export { default as HoverTooltip } from './HoverTooltip.svelte';
+export { default as EntityToggleList } from './EntityToggleList.svelte';
+export { default as TimelineTrack } from './TimelineTrack.svelte';
+export { default as TimelineScrubber } from './TimelineScrubber.svelte';
+export { createMediaSync } from './createMediaSync.svelte.js';

package/dist/tests/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';