feat: add canvas-based timeline with playhead, scrubbing, and zoom

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/lib/timeline/interactions.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { clampZoom, computeZoom, type TimelineState } from '$lib/timeline/interactions';
+
+describe('clampZoom', () => {
+  it('clamps zoom above minimum', () => {
+    expect(clampZoom(0.5, 60)).toBeGreaterThanOrEqual(1);
+  });
+
+  it('clamps zoom below maximum', () => {
+    expect(clampZoom(10000, 60)).toBeLessThanOrEqual(600);
+  });
+});
+
+describe('computeZoom', () => {
+  it('zooming in narrows the visible range', () => {
+    const state: TimelineState = {
+      visibleStart: 0,
+      visibleEnd: 60,
+      zoom: 1,
+      width: 600,
+      height: 160,
+    };
+    const result = computeZoom(state, 30, 1.1, 60);
+    const newRange = result.visibleEnd - result.visibleStart;
+    expect(newRange).toBeLessThan(60);
+  });
+
+  it('zooming out widens the visible range', () => {
+    const state: TimelineState = {
+      visibleStart: 10,
+      visibleEnd: 20,
+      zoom: 6,
+      width: 600,
+      height: 160,
+    };
+    const result = computeZoom(state, 15, 0.9, 60);
+    const newRange = result.visibleEnd - result.visibleStart;
+    expect(newRange).toBeGreaterThan(10);
+  });
+});