refactor(studio): improve Timeline, PlayerControls, and player hook (#63)

## Summary
- **Timeline**: Refactored track rendering with zoom support, drag/resize interactions, and playhead scrubbing
- **PlayerControls**: Redesigned with seek bar, time display, playback rate selector
- **useTimelinePlayer**: Enhanced with iframe bridge communication, timeline message parsing, and deterministic seek
- Add Timeline unit tests (109 lines)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

packages/studio/src/player/components/Timeline.test.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect } from "vitest";
+import { generateTicks, formatTick } from "./Timeline";
+
+describe("generateTicks", () => {
+  it("returns empty arrays for duration <= 0", () => {
+    expect(generateTicks(0)).toEqual({ major: [], minor: [] });
+    expect(generateTicks(-5)).toEqual({ major: [], minor: [] });
+  });
+
+  it("generates ticks for a short duration (3 seconds)", () => {
+    const { major } = generateTicks(3);
+    expect(major.length).toBeGreaterThan(0);
+    expect(major[0]).toBe(0);
+    expect(major).toContain(0);
+    expect(major).toContain(1);
+    expect(major).toContain(2);
+    expect(major).toContain(3);
+  });
+
+  it("generates ticks for a medium duration (10 seconds)", () => {
+    const { major, minor } = generateTicks(10);
+    expect(major).toContain(0);
+    expect(major).toContain(2);
+    expect(major).toContain(4);
+    expect(major).toContain(6);
+    expect(major).toContain(8);
+    expect(major).toContain(10);
+    expect(minor).toContain(1);
+    expect(minor).toContain(3);
+    expect(minor).toContain(5);
+  });
+
+  it("generates ticks for a long duration (120 seconds)", () => {
+    const { major, minor } = generateTicks(120);
+    expect(major).toContain(0);
+    expect(major).toContain(30);
+    expect(major).toContain(60);
+    expect(major).toContain(90);
+    expect(major).toContain(120);
+    expect(minor).toContain(15);
+    expect(minor).toContain(45);
+  });
+
+  it("generates ticks for a very long duration (500 seconds)", () => {
+    const { major } = generateTicks(500);
+    expect(major).toContain(0);
+    expect(major).toContain(60);
+    expect(major).toContain(120);
+  });
+
+  it("major and minor ticks do not overlap", () => {
+    const { major, minor } = generateTicks(30);
+    for (const t of minor) {
+      expect(major).not.toContain(t);
+    }
+  });
+
+  it("all tick values are non-negative", () => {
+    const { major, minor } = generateTicks(60);
+    for (const t of [...major, ...minor]) {
+      expect(t).toBeGreaterThanOrEqual(0);
+    }
+  });
+
+  it("major ticks always start at 0", () => {
+    for (const d of [1, 5, 10, 30, 60, 120, 300]) {
+      const { major } = generateTicks(d);
+      expect(major[0]).toBe(0);
+    }
+  });
+});
+
+describe("formatTick", () => {
+  it("formats 0 seconds as 0:00", () => {
+    expect(formatTick(0)).toBe("0:00");
+  });
+
+  it("formats seconds below a minute", () => {
+    expect(formatTick(5)).toBe("0:05");
+    expect(formatTick(30)).toBe("0:30");
+    expect(formatTick(59)).toBe("0:59");
+  });
+
+  it("formats exactly one minute", () => {
+    expect(formatTick(60)).toBe("1:00");
+  });
+
+  it("formats minutes and seconds", () => {
+    expect(formatTick(90)).toBe("1:30");
+    expect(formatTick(125)).toBe("2:05");
+  });
+
+  it("floors fractional seconds", () => {
+    expect(formatTick(5.7)).toBe("0:05");
+    expect(formatTick(59.9)).toBe("0:59");
+    expect(formatTick(90.5)).toBe("1:30");
+  });
+
+  it("handles large values", () => {
+    expect(formatTick(600)).toBe("10:00");
+    expect(formatTick(3661)).toBe("61:01");
+  });
+
+  it("zero-pads seconds to two digits", () => {
+    expect(formatTick(1)).toBe("0:01");
+    expect(formatTick(9)).toBe("0:09");
+    expect(formatTick(61)).toBe("1:01");
+  });
+});