svelte-p5-components 0.2.1 → 0.4.0

package/dist/SplitPane.test.svelte.js

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import SplitPane from './SplitPane.svelte';
+const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
+describe('<SplitPane>', () => {
+    it('renders both panels when not collapsed', () => {
+        const { container } = render(SplitPane, {
+            props: {
+                first: snippet('<div>FIRST</div>'),
+                second: snippet('<div>SECOND</div>')
+            }
+        });
+        expect(container.textContent).toContain('FIRST');
+        expect(container.textContent).toContain('SECOND');
+        expect(container.querySelectorAll('.split-pane__panel')).toHaveLength(2);
+    });
+    it('shows the divider between panels', () => {
+        const { container } = render(SplitPane, {
+            props: { first: snippet('<div>a</div>'), second: snippet('<div>b</div>') }
+        });
+        expect(container.querySelector('.split-pane__divider')).not.toBeNull();
+    });
+    it('hides the divider when collapsed', () => {
+        const { container } = render(SplitPane, {
+            props: {
+                first: snippet('<div>a</div>'),
+                second: snippet('<div>b</div>'),
+                collapsed: true
+            }
+        });
+        expect(container.querySelector('.split-pane__divider')).toBeNull();
+    });
+    it('applies orientation class to the root', () => {
+        const { container: v } = render(SplitPane, {
+            props: {
+                first: snippet('<div>a</div>'),
+                second: snippet('<div>b</div>'),
+                orientation: 'vertical'
+            }
+        });
+        expect(v.querySelector('.split-pane.vertical')).not.toBeNull();
+        const { container: h } = render(SplitPane, {
+            props: {
+                first: snippet('<div>a</div>'),
+                second: snippet('<div>b</div>'),
+                orientation: 'horizontal'
+            }
+        });
+        expect(h.querySelector('.split-pane.horizontal')).not.toBeNull();
+    });
+    it('reflects sizes prop in inline styles on panels', () => {
+        const { container } = render(SplitPane, {
+            props: {
+                first: snippet('<div>a</div>'),
+                second: snippet('<div>b</div>'),
+                sizes: [30, 70]
+            }
+        });
+        const panels = container.querySelectorAll('.split-pane__panel');
+        expect(panels[0]?.style.height).toBe('30%');
+        expect(panels[1]?.style.height).toBe('70%');
+    });
+    it('arrow keys resize and fire onresize', async () => {
+        const onresize = vi.fn();
+        const { container } = render(SplitPane, {
+            props: {
+                first: snippet('<div>a</div>'),
+                second: snippet('<div>b</div>'),
+                sizes: [50, 50],
+                orientation: 'vertical',
+                onresize
+            }
+        });
+        const divider = container.querySelector('.split-pane__divider');
+        await fireEvent.keyDown(divider, { key: 'ArrowDown' });
+        expect(onresize).toHaveBeenCalledTimes(1);
+        const call = onresize.mock.calls[0];
+        if (!call)
+            throw new Error('onresize call unexpectedly missing');
+        expect(call[0].sizes[0]).toBeGreaterThan(50);
+        expect(call[0].sizes[1]).toBeLessThan(50);
+        expect(call[0].sizes[0] + call[0].sizes[1]).toBeCloseTo(100);
+    });
+});

package/dist/TimelineScrubber.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import TimelineTrack, {
+		type TimelineSegment,
+		type TimelineViewWindow
+	} from './TimelineTrack.svelte';
+
+	// Full timeline widget: scrub track + play/pause + speed picker + time
+	// display. For apps that want the standard canvas-app timeline shape
+	// without reinventing controls.
+	//
+	// TimelineScrubber layers on top of <TimelineTrack> — reach for the track
+	// directly if you want custom chrome around it.
+	//
+	// Bindable: currentTime, isPlaying, speed, viewWindow. The consumer owns
+	// the animation loop that advances currentTime when isPlaying is true —
+	// this component just displays state and surfaces user intent.
+	//
+	// `speedLocked` (with an optional reason) is the UX-disclosure hook for
+	// video-driven playback, where the speed multiplier is effectively
+	// ignored. Set it to true and the speed button renders muted with a
+	// title-tip.
+	//
+	// See the package README for usage examples.
+
+	interface Props {
+		duration: number;
+		currentTime?: number;
+		isPlaying?: boolean;
+		speed?: number;
+		/** Available speed presets. Default: [1, 2, 4, 8, 16]. */
+		speedOptions?: number[];
+		/** Render speed as disabled / muted. Use when video playback overrides it. */
+		speedLocked?: boolean;
+		/** Title/tooltip shown when `speedLocked` is true. */
+		speedLockedReason?: string;
+		/** Optional zoomed view window; bindable. */
+		viewWindow?: TimelineViewWindow;
+		segments?: TimelineSegment[];
+		/** Format `currentTime` and `duration` for display. Default: mm:ss. */
+		formatTime?: (seconds: number) => string;
+		onSeek?: (time: number) => void;
+		onPlayToggle?: (nowPlaying: boolean) => void;
+		onSpeedChange?: (speed: number) => void;
+		onSegmentClick?: (segment: TimelineSegment) => void;
+		/** Snippet rendered above the hovered time, e.g. for a turn-preview tooltip. */
+		hoverIndicator?: Snippet<[{ time: number; left: number }]>;
+		class?: string;
+	}
+
+	let {
+		duration,
+		currentTime = $bindable(0),
+		isPlaying = $bindable(false),
+		speed = $bindable(1),
+		speedOptions = [1, 2, 4, 8, 16],
+		speedLocked = false,
+		speedLockedReason,
+		viewWindow = $bindable(undefined),
+		segments = [],
+		formatTime = defaultFormatTime,
+		onSeek,
+		onPlayToggle,
+		onSpeedChange,
+		onSegmentClick,
+		hoverIndicator,
+		class: className = ''
+	}: Props = $props();
+
+	function defaultFormatTime(seconds: number): string {
+		if (!isFinite(seconds)) return '00:00';
+		const m = Math.floor(seconds / 60);
+		const s = Math.floor(seconds % 60);
+		return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+	}
+
+	function togglePlay() {
+		isPlaying = !isPlaying;
+		onPlayToggle?.(isPlaying);
+	}
+
+	function cycleSpeed() {
+		if (speedLocked) return;
+		if (speedOptions.length === 0) return;
+		const idx = speedOptions.indexOf(speed);
+		const next = speedOptions[(idx + 1) % speedOptions.length] ?? speedOptions[0] ?? 1;
+		speed = next;
+		onSpeedChange?.(next);
+	}
+</script>
+
+<div class="timeline-scrubber {className}">
+	<div class="timeline-scrubber__track">
+		<span class="timeline-scrubber__time" aria-label="start"
+			>{formatTime(viewWindow?.start ?? 0)}</span
+		>
+		<TimelineTrack
+			{duration}
+			bind:currentTime
+			bind:viewWindow
+			{segments}
+			{onSeek}
+			{onSegmentClick}
+			{hoverIndicator}
+		/>
+		<span class="timeline-scrubber__time" aria-label="end">
+			{formatTime(viewWindow?.end ?? duration)}
+		</span>
+	</div>
+
+	<div class="timeline-scrubber__controls">
+		<button
+			type="button"
+			class="timeline-scrubber__btn"
+			aria-pressed={isPlaying}
+			aria-label={isPlaying ? 'Pause' : 'Play'}
+			onclick={togglePlay}
+		>
+			{isPlaying ? '❚❚' : '▶'}
+		</button>
+
+		<button
+			type="button"
+			class="timeline-scrubber__btn timeline-scrubber__btn--speed"
+			class:is-locked={speedLocked}
+			aria-label="Playback speed: {speed}x{speedLocked
+				? ` (locked${speedLockedReason ? ': ' + speedLockedReason : ''})`
+				: ''}"
+			title={speedLocked ? (speedLockedReason ?? 'Speed locked') : 'Click to change speed'}
+			disabled={speedLocked}
+			onclick={cycleSpeed}
+		>
+			{speed}×{speedLocked ? ' ·' : ''}
+		</button>
+
+		<span class="timeline-scrubber__currtime" aria-label="Current time">
+			{formatTime(currentTime)}
+		</span>
+	</div>
+</div>
+
+<style>
+	.timeline-scrubber {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		font:
+			12px/1 system-ui,
+			-apple-system,
+			Segoe UI,
+			sans-serif;
+	}
+
+	.timeline-scrubber__track {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.timeline-scrubber__track :global(.timeline-track) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.timeline-scrubber__time {
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+		font-size: 11px;
+		color: #6b7280;
+		min-width: 3.5em;
+		text-align: center;
+	}
+
+	.timeline-scrubber__controls {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		justify-content: center;
+	}
+
+	.timeline-scrubber__btn {
+		background: #fff;
+		border: 1px solid #e5e7eb;
+		border-radius: 4px;
+		padding: 4px 10px;
+		cursor: pointer;
+		font: inherit;
+		line-height: 1;
+	}
+
+	.timeline-scrubber__btn:hover:not(:disabled) {
+		background: #f3f4f6;
+	}
+
+	.timeline-scrubber__btn:disabled {
+		cursor: not-allowed;
+	}
+
+	.timeline-scrubber__btn--speed {
+		min-width: 3em;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.timeline-scrubber__btn--speed.is-locked {
+		opacity: 0.5;
+	}
+
+	.timeline-scrubber__currtime {
+		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+		font-size: 12px;
+		color: #111;
+		min-width: 4em;
+		text-align: right;
+	}
+</style>

package/dist/TimelineScrubber.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import { type TimelineSegment, type TimelineViewWindow } from './TimelineTrack.svelte';
+interface Props {
+    duration: number;
+    currentTime?: number;
+    isPlaying?: boolean;
+    speed?: number;
+    /** Available speed presets. Default: [1, 2, 4, 8, 16]. */
+    speedOptions?: number[];
+    /** Render speed as disabled / muted. Use when video playback overrides it. */
+    speedLocked?: boolean;
+    /** Title/tooltip shown when `speedLocked` is true. */
+    speedLockedReason?: string;
+    /** Optional zoomed view window; bindable. */
+    viewWindow?: TimelineViewWindow;
+    segments?: TimelineSegment[];
+    /** Format `currentTime` and `duration` for display. Default: mm:ss. */
+    formatTime?: (seconds: number) => string;
+    onSeek?: (time: number) => void;
+    onPlayToggle?: (nowPlaying: boolean) => void;
+    onSpeedChange?: (speed: number) => void;
+    onSegmentClick?: (segment: TimelineSegment) => void;
+    /** Snippet rendered above the hovered time, e.g. for a turn-preview tooltip. */
+    hoverIndicator?: Snippet<[{
+        time: number;
+        left: number;
+    }]>;
+    class?: string;
+}
+declare const TimelineScrubber: import("svelte").Component<Props, {}, "currentTime" | "viewWindow" | "isPlaying" | "speed">;
+type TimelineScrubber = ReturnType<typeof TimelineScrubber>;
+export default TimelineScrubber;

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

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

package/dist/TimelineScrubber.test.svelte.js

@@ -0,0 +1,66 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import TimelineScrubber from './TimelineScrubber.svelte';
+describe('<TimelineScrubber>', () => {
+    it('shows the play icon when paused and pause when playing', () => {
+        const { container: paused } = render(TimelineScrubber, {
+            props: { duration: 60, currentTime: 0, isPlaying: false }
+        });
+        expect(paused.querySelector('[aria-label="Play"]')).not.toBeNull();
+        const { container: playing } = render(TimelineScrubber, {
+            props: { duration: 60, currentTime: 0, isPlaying: true }
+        });
+        expect(playing.querySelector('[aria-label="Pause"]')).not.toBeNull();
+    });
+    it('clicking the play button fires onPlayToggle with the new state', async () => {
+        const onPlayToggle = vi.fn();
+        const { container } = render(TimelineScrubber, {
+            props: { duration: 60, isPlaying: false, onPlayToggle }
+        });
+        const btn = container.querySelector('[aria-label="Play"]');
+        await fireEvent.click(btn);
+        expect(onPlayToggle).toHaveBeenCalledWith(true);
+    });
+    it('cycles through the default speed presets on each speed-button click', async () => {
+        const onSpeedChange = vi.fn();
+        const { container } = render(TimelineScrubber, {
+            props: { duration: 60, speed: 1, onSpeedChange }
+        });
+        const btn = container.querySelector('.timeline-scrubber__btn--speed');
+        await fireEvent.click(btn);
+        expect(onSpeedChange).toHaveBeenLastCalledWith(2);
+    });
+    it('speedLocked disables the speed button and surfaces the reason via title', () => {
+        const { container } = render(TimelineScrubber, {
+            props: {
+                duration: 60,
+                speed: 8,
+                speedLocked: true,
+                speedLockedReason: 'Video is playing'
+            }
+        });
+        const btn = container.querySelector('.timeline-scrubber__btn--speed');
+        expect(btn.disabled).toBe(true);
+        expect(btn.classList.contains('is-locked')).toBe(true);
+        expect(btn.getAttribute('title')).toContain('Video is playing');
+    });
+    it('clicking a locked speed button does NOT emit onSpeedChange', async () => {
+        const onSpeedChange = vi.fn();
+        const { container } = render(TimelineScrubber, {
+            props: { duration: 60, speed: 2, speedLocked: true, onSpeedChange }
+        });
+        const btn = container.querySelector('.timeline-scrubber__btn--speed');
+        await fireEvent.click(btn);
+        expect(onSpeedChange).not.toHaveBeenCalled();
+    });
+    it('uses the custom formatTime prop for both edge labels and the current-time readout', () => {
+        const formatTime = (s) => `[${Math.round(s)}s]`;
+        const { container } = render(TimelineScrubber, {
+            props: { duration: 120, currentTime: 42, formatTime }
+        });
+        const text = container.textContent ?? '';
+        expect(text).toContain('[0s]');
+        expect(text).toContain('[120s]');
+        expect(text).toContain('[42s]');
+    });
+});