svelte-p5-components 0.4.1 → 0.5.0

package/dist/TimelineTrack.svelte.d.ts

@@ -1,6 +1,6 @@
 /**
- * A named region on the timeline. Rendered as a tinted band; clicking
- * it emits `onSegmentClick` with the full segment.
+ * A labeled band on the track. Rendered as a tinted region; clicking
+ * emits `onSegmentClick` with the full segment.
  */
 export interface TimelineSegment {
     id: string;
@@ -9,42 +9,57 @@ export interface TimelineSegment {
     label?: string;
     color?: string;
 }
-export interface TimelineViewWindow {
+/**
+ * A {start,end} clip range overlaid on the track. When present, the
+ * region is highlighted and draggable handles appear at both edges.
+ * Use this for Twitch-style clip editing or TE-style filter windows.
+ */
+export interface TimelineSelection {
     start: number;
     end: number;
 }
 import type { Snippet } from 'svelte';
 interface Props {
-    /** Total timeline length in your chosen unit. */
+    /** Total timeline length. */
     duration: number;
     /** Current playhead position. Bindable. */
     currentTime?: number;
+    /** Selection range start. Bindable. */
+    selectionStart?: number;
+    /** Selection range end. Bindable. */
+    selectionEnd?: number;
     /**
-     * Optional zoomed view window. When set, only this range is visible on
-     * the track; clicks and hover map into this window. Bindable.
+     * Render the selection range + its handles. Default: true when both
+     * selectionStart and selectionEnd are provided.
      */
-    viewWindow?: TimelineViewWindow;
-    /** Highlighted regions rendered as labeled bands. */
+    showSelection?: boolean;
+    /** Highlighted labeled regions. */
     segments?: TimelineSegment[];
-    /** Show draggable handles for the view window when it's set. Default: true. */
-    showViewWindowHandles?: boolean;
-    /** Show a vertical playhead line. Default: true. */
+    /** Hide the playhead knob but still let the rail respond to clicks. */
     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 while the user drags a selection handle or the selection band. */
+    onSelectionChange?: (selection: TimelineSelection) => void;
+    /** Called at the end of a selection interaction (drag release). */
+    onSelectionCommit?: (selection: TimelineSelection) => 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<[{
+    onHoverTime?: (time: number | null) => void;
+    /** Snippet rendered above the hover x position. Use for preview tooltips. */
+    hoverPreview?: Snippet<[{
         time: number;
-        left: number;
+        xPercent: number;
     }]>;
+    /**
+     * When dragging the selection start handle, also move the playhead to
+     * the new start (and fire `onSeek`). Handy for "scrub-to-trim" UIs where
+     * the start handle should preview the frame it lands on. Default: false.
+     */
+    playheadFollowsSelectionStart?: boolean;
     class?: string;
 }
-declare const TimelineTrack: import("svelte").Component<Props, {}, "currentTime" | "viewWindow">;
+declare const TimelineTrack: import("svelte").Component<Props, {}, "currentTime" | "selectionStart" | "selectionEnd">;
 type TimelineTrack = ReturnType<typeof TimelineTrack>;
 export default TimelineTrack;

package/dist/TimelineTrack.test.svelte.js

@@ -43,30 +43,91 @@ describe('<TimelineTrack>', () => {
         expect(onSegmentClick).toHaveBeenCalledTimes(1);
         expect(onSegmentClick.mock.calls[0]?.[0]?.id).toBe('s1');
     });
-    it('view window handles render when viewWindow is provided', () => {
+    it('selection handles render when selectionStart/End are provided', () => {
         const { container } = render(TimelineTrack, {
-            props: { duration: 100, currentTime: 50, viewWindow: { start: 20, end: 80 } }
+            props: { duration: 100, currentTime: 50, selectionStart: 20, selectionEnd: 80 }
         });
         expect(container.querySelectorAll('.timeline-track__handle')).toHaveLength(2);
     });
-    it('view window handles hidden when showViewWindowHandles=false', () => {
+    it('selection handles hidden when showSelection=false', () => {
         const { container } = render(TimelineTrack, {
             props: {
                 duration: 100,
-                viewWindow: { start: 20, end: 80 },
-                showViewWindowHandles: false
+                selectionStart: 20,
+                selectionEnd: 80,
+                showSelection: false
             }
         });
         expect(container.querySelectorAll('.timeline-track__handle')).toHaveLength(0);
     });
-    it('has role=slider with aria-valuemin/max/now reflecting view window', () => {
+    // --- playheadFollowsSelectionStart -------------------------------------
+    //
+    // Dragging the start handle goes through document-level pointermove
+    // listeners, and the time math depends on the track's bounding rect.
+    // happy-dom reports a 0-width rect by default, so we stub it to map
+    // clientX 1:1 onto a 100-unit timeline (width 100 at left 0).
+    function stubTrackRect(container) {
+        const track = container.querySelector('.timeline-track');
+        track.getBoundingClientRect = () => ({ left: 0, top: 0, width: 100, height: 32, right: 100, bottom: 32, x: 0, y: 0 });
+        return track;
+    }
+    async function dragStartHandle(container, toClientX) {
+        const handle = container.querySelector('.timeline-track__handle--start');
+        handle.setPointerCapture = () => { };
+        await fireEvent.pointerDown(handle, { clientX: 20, pointerId: 1 });
+        // Drag handled at the document level.
+        await fireEvent.pointerMove(document, { clientX: toClientX, pointerId: 1 });
+        await fireEvent.pointerUp(document, { clientX: toClientX, pointerId: 1 });
+    }
+    it('with playheadFollowsSelectionStart, dragging the start handle moves currentTime + seeks', async () => {
+        const onSeek = vi.fn();
+        const { container } = render(TimelineTrack, {
+            props: {
+                duration: 100,
+                currentTime: 0,
+                selectionStart: 20,
+                selectionEnd: 80,
+                playheadFollowsSelectionStart: true,
+                onSeek
+            }
+        });
+        stubTrackRect(container);
+        await dragStartHandle(container, 30);
+        // Moving the start handle to clientX 30 maps to time 30 on the track.
+        expect(onSeek).toHaveBeenCalled();
+        expect(onSeek.mock.calls.at(-1)?.[0]).toBeCloseTo(30, 5);
+        const playhead = container.querySelector('.timeline-track__playhead');
+        expect(playhead.style.left).toBe('30%');
+    });
+    it('by default, dragging the start handle does NOT move the playhead', async () => {
+        const onSeek = vi.fn();
+        const onSelectionChange = vi.fn();
+        const { container } = render(TimelineTrack, {
+            props: {
+                duration: 100,
+                currentTime: 0,
+                selectionStart: 20,
+                selectionEnd: 80,
+                onSeek,
+                onSelectionChange
+            }
+        });
+        stubTrackRect(container);
+        await dragStartHandle(container, 30);
+        // Selection still updates, but the playhead stays put and no seek fires.
+        expect(onSelectionChange).toHaveBeenCalled();
+        expect(onSeek).not.toHaveBeenCalled();
+        const playhead = container.querySelector('.timeline-track__playhead');
+        expect(playhead.style.left).toBe('0%');
+    });
+    it('has role=slider with aria covering full duration', () => {
         const { container } = render(TimelineTrack, {
-            props: { duration: 100, currentTime: 30, viewWindow: { start: 10, end: 90 } }
+            props: { duration: 100, currentTime: 30, selectionStart: 10, selectionEnd: 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-valuemin')).toBe('0');
+        expect(track.getAttribute('aria-valuemax')).toBe('100');
         expect(track.getAttribute('aria-valuenow')).toBe('30');
     });
 });

package/dist/createMediaPlayback.svelte.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Drive an HTMLMediaElement with per-visualization playback strategies.
+ *
+ * Where `createMediaSync` only bridges the media→timeline direction (and
+ * surfaces the speed-lock signal), `createMediaPlayback` owns the playback
+ * verbs that consuming apps reach for repeatedly:
+ *
+ * - `playFrom(time)` — seek somewhere and start playing. The bread-and-butter
+ *   "jump to this word / this event and watch it" action.
+ *
+ * - `playSnippets(times, secondsEach)` — play a series of short clips back to
+ *   back (each `times[i]` for `secondsEach` seconds), then stop. Think
+ *   "preview every match" or "play the highlight reel". The orchestrator
+ *   advances the queue on each `timeupdate` so the consumer doesn't have to
+ *   babysit timers.
+ *
+ * - `pause()` / `stop()` — the obvious two, where `stop()` also clears any
+ *   pending snippet queue.
+ *
+ * `isPlaying` and `activeSnippetIndex` are `$state`, so a component can react
+ * to them (highlight the snippet currently playing, flip a play/pause icon).
+ *
+ * Seeks are clamped exactly like `createMediaSync.seek` — guarding NaN /
+ * Infinity and clamping into [0, duration].
+ *
+ * @example
+ * ```ts
+ * const playback = createMediaPlayback();
+ *
+ * $effect(() => { playback.attach(videoElement); });
+ *
+ * // Jump to a word and play it:
+ * playback.playFrom(word.start);
+ *
+ * // Preview every match for 2s each:
+ * playback.playSnippets(matches.map((m) => m.start), 2);
+ *
+ * // React in markup:
+ * class:is-active={i === playback.activeSnippetIndex}
+ * ```
+ */
+export interface MediaPlayback {
+    /** True while the attached media is playing. */
+    readonly isPlaying: boolean;
+    /** Index into the current snippet queue, or -1 when not in a snippet sequence. */
+    readonly activeSnippetIndex: number;
+    /** Attach to an HTMLMediaElement. Re-attaching switches to the new one. */
+    attach(el: HTMLMediaElement | null): void;
+    /** Remove listeners + clear the queue; idempotent. Called automatically when `attach(null)`. */
+    detach(): void;
+    /** Seek to `time` (clamped) and play. Cancels any active snippet sequence. */
+    playFrom(time: number): void;
+    /** Play each start time in `times` for `secondsEach` seconds, in order, then stop. */
+    playSnippets(times: number[], secondsEach: number): void;
+    /** Pause without clearing position. */
+    pause(): void;
+    /** Stop playback and clear any snippet queue. */
+    stop(): void;
+}
+export declare function createMediaPlayback(): MediaPlayback;

package/dist/createMediaPlayback.svelte.js

@@ -0,0 +1,169 @@
+/**
+ * Drive an HTMLMediaElement with per-visualization playback strategies.
+ *
+ * Where `createMediaSync` only bridges the media→timeline direction (and
+ * surfaces the speed-lock signal), `createMediaPlayback` owns the playback
+ * verbs that consuming apps reach for repeatedly:
+ *
+ * - `playFrom(time)` — seek somewhere and start playing. The bread-and-butter
+ *   "jump to this word / this event and watch it" action.
+ *
+ * - `playSnippets(times, secondsEach)` — play a series of short clips back to
+ *   back (each `times[i]` for `secondsEach` seconds), then stop. Think
+ *   "preview every match" or "play the highlight reel". The orchestrator
+ *   advances the queue on each `timeupdate` so the consumer doesn't have to
+ *   babysit timers.
+ *
+ * - `pause()` / `stop()` — the obvious two, where `stop()` also clears any
+ *   pending snippet queue.
+ *
+ * `isPlaying` and `activeSnippetIndex` are `$state`, so a component can react
+ * to them (highlight the snippet currently playing, flip a play/pause icon).
+ *
+ * Seeks are clamped exactly like `createMediaSync.seek` — guarding NaN /
+ * Infinity and clamping into [0, duration].
+ *
+ * @example
+ * ```ts
+ * const playback = createMediaPlayback();
+ *
+ * $effect(() => { playback.attach(videoElement); });
+ *
+ * // Jump to a word and play it:
+ * playback.playFrom(word.start);
+ *
+ * // Preview every match for 2s each:
+ * playback.playSnippets(matches.map((m) => m.start), 2);
+ *
+ * // React in markup:
+ * class:is-active={i === playback.activeSnippetIndex}
+ * ```
+ */
+export function createMediaPlayback() {
+    let el = null;
+    let isPlaying = $state(false);
+    let activeSnippetIndex = $state(-1);
+    // Snippet queue: the start times to play and how long to hold each.
+    let queue = [];
+    let snippetSeconds = 0;
+    function clampTime(time) {
+        if (!el)
+            return null;
+        const dur = isFinite(el.duration) ? el.duration : Number.MAX_SAFE_INTEGER;
+        const clamped = Math.max(0, Math.min(dur, time));
+        if (!isFinite(clamped))
+            return null;
+        return clamped;
+    }
+    function clearQueue() {
+        queue = [];
+        snippetSeconds = 0;
+        activeSnippetIndex = -1;
+    }
+    function playEl() {
+        // play() can reject under autoplay policies — swallow it safely.
+        el?.play()?.catch(() => { });
+    }
+    function onPlay() {
+        isPlaying = true;
+    }
+    function onPause() {
+        isPlaying = false;
+    }
+    function onEnded() {
+        isPlaying = false;
+    }
+    function onTimeUpdate() {
+        // Only meaningful while running a snippet sequence.
+        if (!el || activeSnippetIndex < 0)
+            return;
+        const start = queue[activeSnippetIndex];
+        if (start === undefined)
+            return;
+        if (el.currentTime - start < snippetSeconds)
+            return;
+        // This snippet's time is up — advance to the next, or stop.
+        const nextIndex = activeSnippetIndex + 1;
+        if (nextIndex >= queue.length) {
+            stopInner();
+            return;
+        }
+        const nextStart = clampTime(queue[nextIndex]);
+        activeSnippetIndex = nextIndex;
+        if (nextStart !== null)
+            el.currentTime = nextStart;
+    }
+    function stopInner() {
+        clearQueue();
+        if (el)
+            el.pause();
+    }
+    function detachInner() {
+        if (!el)
+            return;
+        el.removeEventListener('timeupdate', onTimeUpdate);
+        el.removeEventListener('play', onPlay);
+        el.removeEventListener('pause', onPause);
+        el.removeEventListener('ended', onEnded);
+        el = null;
+    }
+    return {
+        get isPlaying() {
+            return isPlaying;
+        },
+        get activeSnippetIndex() {
+            return activeSnippetIndex;
+        },
+        attach(next) {
+            detachInner();
+            clearQueue();
+            el = next;
+            if (!el) {
+                isPlaying = false;
+                return;
+            }
+            isPlaying = !el.paused && !el.ended;
+            el.addEventListener('timeupdate', onTimeUpdate);
+            el.addEventListener('play', onPlay);
+            el.addEventListener('pause', onPause);
+            el.addEventListener('ended', onEnded);
+        },
+        detach() {
+            detachInner();
+            clearQueue();
+            isPlaying = false;
+        },
+        playFrom(time) {
+            if (!el)
+                return;
+            clearQueue();
+            const clamped = clampTime(time);
+            if (clamped === null)
+                return;
+            el.currentTime = clamped;
+            playEl();
+        },
+        playSnippets(times, secondsEach) {
+            if (!el)
+                return;
+            const finite = times.filter((t) => isFinite(t));
+            if (finite.length === 0)
+                return;
+            queue = finite;
+            snippetSeconds = secondsEach;
+            activeSnippetIndex = 0;
+            const start = clampTime(queue[0]);
+            if (start !== null)
+                el.currentTime = start;
+            playEl();
+        },
+        pause() {
+            if (!el)
+                return;
+            el.pause();
+        },
+        stop() {
+            stopInner();
+        }
+    };
+}

package/dist/createMediaPlayback.test.d.ts

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

package/dist/createMediaPlayback.test.js

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createMediaPlayback } from './createMediaPlayback.svelte.js';
+// A minimal stand-in for HTMLMediaElement. We only need the surface the
+// orchestrator touches: currentTime, duration, paused, play(), pause(), and
+// add/removeEventListener. Built on EventTarget so we can dispatch real
+// 'timeupdate' events to drive the snippet queue.
+function createFakeMedia(duration = 100) {
+    const target = new EventTarget();
+    const el = {
+        currentTime: 0,
+        duration,
+        paused: true,
+        ended: false,
+        play: vi.fn(function () {
+            el.paused = false;
+            target.dispatchEvent(new Event('play'));
+            return Promise.resolve();
+        }),
+        pause: vi.fn(function () {
+            el.paused = true;
+            target.dispatchEvent(new Event('pause'));
+        }),
+        addEventListener: vi.fn((type, cb) => target.addEventListener(type, cb)),
+        removeEventListener: vi.fn((type, cb) => target.removeEventListener(type, cb)),
+        // Test helper: set currentTime then fire a timeupdate.
+        tick(time) {
+            el.currentTime = time;
+            target.dispatchEvent(new Event('timeupdate'));
+        }
+    };
+    return el;
+}
+describe('createMediaPlayback', () => {
+    it('playFrom seeks (clamped) and plays', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playFrom(42);
+        expect(media.currentTime).toBe(42);
+        expect(media.play).toHaveBeenCalled();
+        expect(pb.isPlaying).toBe(true);
+        // Out-of-range seeks clamp into [0, duration].
+        pb.playFrom(999);
+        expect(media.currentTime).toBe(100);
+        pb.playFrom(-5);
+        expect(media.currentTime).toBe(0);
+    });
+    it('playFrom ignores NaN; Infinity clamps to duration (matching createMediaSync.seek)', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        media.currentTime = 10;
+        // NaN never clears the isFinite guard — left untouched.
+        pb.playFrom(NaN);
+        expect(media.currentTime).toBe(10);
+        // Infinity clamps to the (finite) duration, exactly like createMediaSync.
+        pb.playFrom(Infinity);
+        expect(media.currentTime).toBe(100);
+    });
+    it('playSnippets advances on timeupdate and stops at the end', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playSnippets([10, 30, 50], 2);
+        expect(media.currentTime).toBe(10);
+        expect(pb.activeSnippetIndex).toBe(0);
+        expect(media.play).toHaveBeenCalled();
+        // Still within snippet 0 — no advance.
+        media.tick(11);
+        expect(pb.activeSnippetIndex).toBe(0);
+        // Snippet 0 duration elapsed — advance to snippet 1.
+        media.tick(12);
+        expect(pb.activeSnippetIndex).toBe(1);
+        expect(media.currentTime).toBe(30);
+        // Advance to snippet 2.
+        media.tick(32);
+        expect(pb.activeSnippetIndex).toBe(2);
+        expect(media.currentTime).toBe(50);
+        // Queue exhausted — stop.
+        media.tick(52);
+        expect(pb.activeSnippetIndex).toBe(-1);
+        expect(media.pause).toHaveBeenCalled();
+    });
+    it('playSnippets filters non-finite times and does nothing on an empty list', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playSnippets([NaN, 20, Infinity], 2);
+        expect(media.currentTime).toBe(20);
+        expect(pb.activeSnippetIndex).toBe(0);
+        // All non-finite collapses to empty — a no-op that leaves prior state
+        // (the in-progress queue from above) untouched.
+        const before = media.currentTime;
+        pb.playSnippets([NaN, Infinity], 2);
+        expect(pb.activeSnippetIndex).toBe(0);
+        expect(media.currentTime).toBe(before);
+    });
+    it('playFrom cancels an active snippet sequence', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playSnippets([10, 30], 2);
+        expect(pb.activeSnippetIndex).toBe(0);
+        pb.playFrom(70);
+        expect(pb.activeSnippetIndex).toBe(-1);
+        expect(media.currentTime).toBe(70);
+        // A timeupdate that would have advanced the old queue does nothing now.
+        media.tick(73);
+        expect(pb.activeSnippetIndex).toBe(-1);
+    });
+    it('stop() clears the queue, pauses, and resets activeSnippetIndex', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playSnippets([10, 30], 2);
+        expect(pb.activeSnippetIndex).toBe(0);
+        pb.stop();
+        expect(pb.activeSnippetIndex).toBe(-1);
+        expect(media.pause).toHaveBeenCalled();
+        // Subsequent timeupdates are inert.
+        media.tick(40);
+        expect(pb.activeSnippetIndex).toBe(-1);
+    });
+    it('pause() pauses without clearing the queue position', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playSnippets([10, 30], 2);
+        pb.pause();
+        expect(media.pause).toHaveBeenCalled();
+        // Queue index is preserved (pause is not stop).
+        expect(pb.activeSnippetIndex).toBe(0);
+    });
+    it('detach() removes listeners and is idempotent', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.playSnippets([10, 30], 2);
+        pb.detach();
+        expect(media.removeEventListener).toHaveBeenCalledWith('timeupdate', expect.any(Function));
+        expect(media.removeEventListener).toHaveBeenCalledWith('play', expect.any(Function));
+        expect(media.removeEventListener).toHaveBeenCalledWith('pause', expect.any(Function));
+        expect(media.removeEventListener).toHaveBeenCalledWith('ended', expect.any(Function));
+        expect(pb.activeSnippetIndex).toBe(-1);
+        expect(pb.isPlaying).toBe(false);
+        // After detach, dispatching a timeupdate must not throw or mutate state.
+        media.tick(50);
+        expect(pb.activeSnippetIndex).toBe(-1);
+        // Idempotent.
+        expect(() => pb.detach()).not.toThrow();
+    });
+    it('attach(null) detaches the previous element', () => {
+        const media = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(media);
+        pb.attach(null);
+        expect(media.removeEventListener).toHaveBeenCalled();
+        // Calls into a null element are safe no-ops.
+        expect(() => pb.playFrom(10)).not.toThrow();
+        expect(media.play).not.toHaveBeenCalled();
+    });
+    it('re-attaching detaches the old element and clears the queue', () => {
+        const a = createFakeMedia(100);
+        const b = createFakeMedia(100);
+        const pb = createMediaPlayback();
+        pb.attach(a);
+        pb.playSnippets([10, 30], 2);
+        expect(pb.activeSnippetIndex).toBe(0);
+        pb.attach(b);
+        expect(a.removeEventListener).toHaveBeenCalled();
+        expect(pb.activeSnippetIndex).toBe(-1);
+        // The old element's timeupdate no longer drives the queue.
+        a.tick(40);
+        expect(pb.activeSnippetIndex).toBe(-1);
+    });
+});

package/dist/index.d.ts

@@ -5,8 +5,12 @@ 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 ActivityBar, type ActivityBarItem } from './ActivityBar.svelte';
+export { default as SidePanel } from './SidePanel.svelte';
 export { default as HoverTooltip } from './HoverTooltip.svelte';
+export { default as ContextMenu, type ContextMenuItem } from './ContextMenu.svelte';
 export { default as EntityToggleList, type Entity } from './EntityToggleList.svelte';
-export { default as TimelineTrack, type TimelineSegment, type TimelineViewWindow } from './TimelineTrack.svelte';
+export { default as TimelineTrack, type TimelineSegment, type TimelineSelection } from './TimelineTrack.svelte';
 export { default as TimelineScrubber } from './TimelineScrubber.svelte';
 export { createMediaSync, type MediaSync } from './createMediaSync.svelte.js';
+export { createMediaPlayback, type MediaPlayback } from './createMediaPlayback.svelte.js';

package/dist/index.js

@@ -5,8 +5,12 @@ 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 ActivityBar } from './ActivityBar.svelte';
+export { default as SidePanel } from './SidePanel.svelte';
 export { default as HoverTooltip } from './HoverTooltip.svelte';
+export { default as ContextMenu } from './ContextMenu.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';
+export { createMediaPlayback } from './createMediaPlayback.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-p5-components",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Higher-level Svelte 5 components built on svelte-p5: responsive canvas, FPS monitor, sketch debug overlay, draggable windows",
   "keywords": [
     "svelte",