feat: add clip management with I/O marking, timeline markers, and clip list

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

src/lib/timeline/clipRenderer.ts

@@ -0,0 +1,91 @@
+import type { Clip } from '$lib/stores/clips.svelte';
+import { timeToX, type TimelineState } from './renderer';
+
+const CLIP_LANE_Y = 90;
+const CLIP_LANE_HEIGHT = 30;
+const HANDLE_WIDTH = 6;
+
+export function drawClips(
+  ctx: CanvasRenderingContext2D,
+  state: TimelineState,
+  clips: Clip[],
+  selectedId: string | null,
+  pendingInPoint: number | null
+): void {
+  for (const clip of clips) {
+    const x1 = timeToX(clip.startTime, state);
+    const x2 = timeToX(clip.endTime, state);
+    const isSelected = clip.id === selectedId;
+
+    ctx.fillStyle = clip.color + '66';
+    ctx.fillRect(x1, CLIP_LANE_Y, x2 - x1, CLIP_LANE_HEIGHT);
+
+    ctx.strokeStyle = isSelected ? '#ffffff' : clip.color;
+    ctx.lineWidth = isSelected ? 2 : 1;
+    ctx.strokeRect(x1, CLIP_LANE_Y, x2 - x1, CLIP_LANE_HEIGHT);
+    ctx.lineWidth = 1;
+
+    ctx.fillStyle = isSelected ? '#ffffff' : clip.color;
+    ctx.fillRect(x1 - HANDLE_WIDTH / 2, CLIP_LANE_Y, HANDLE_WIDTH, CLIP_LANE_HEIGHT);
+    ctx.fillRect(x2 - HANDLE_WIDTH / 2, CLIP_LANE_Y, HANDLE_WIDTH, CLIP_LANE_HEIGHT);
+
+    const labelWidth = x2 - x1;
+    if (labelWidth > 40) {
+      ctx.fillStyle = '#ffffff';
+      ctx.font = '11px -apple-system, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(
+        clip.label,
+        (x1 + x2) / 2,
+        CLIP_LANE_Y + CLIP_LANE_HEIGHT / 2 + 4,
+        labelWidth - 10
+      );
+    }
+  }
+
+  if (pendingInPoint !== null) {
+    const x = timeToX(pendingInPoint, state);
+    ctx.strokeStyle = '#f9e2af';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([4, 4]);
+    ctx.beginPath();
+    ctx.moveTo(x, CLIP_LANE_Y);
+    ctx.lineTo(x, CLIP_LANE_Y + CLIP_LANE_HEIGHT);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.lineWidth = 1;
+  }
+}
+
+export interface ClipHitResult {
+  clipId: string;
+  edge: 'start' | 'end' | 'body';
+}
+
+export function hitTestClip(
+  x: number,
+  y: number,
+  state: TimelineState,
+  clips: Clip[]
+): ClipHitResult | null {
+  if (y < CLIP_LANE_Y || y > CLIP_LANE_Y + CLIP_LANE_HEIGHT) {
+    return null;
+  }
+
+  for (const clip of [...clips].reverse()) {
+    const x1 = timeToX(clip.startTime, state);
+    const x2 = timeToX(clip.endTime, state);
+
+    if (Math.abs(x - x1) <= HANDLE_WIDTH) {
+      return { clipId: clip.id, edge: 'start' };
+    }
+    if (Math.abs(x - x2) <= HANDLE_WIDTH) {
+      return { clipId: clip.id, edge: 'end' };
+    }
+    if (x >= x1 && x <= x2) {
+      return { clipId: clip.id, edge: 'body' };
+    }
+  }
+
+  return null;
+}

src/lib/timeline/renderer.ts

@@ -1,3 +1,6 @@
+import { drawClips } from './clipRenderer';
+import type { Clip } from '$lib/stores/clips.svelte';
+
 export interface TimelineState {
   visibleStart: number;
   visibleEnd: number;
@@ -26,7 +29,10 @@ export function drawTimeline(
   ctx: CanvasRenderingContext2D,
   state: TimelineState,
   currentTime: number,
-  duration: number
+  duration: number,
+  clips: Clip[] = [],
+  selectedClipId: string | null = null,
+  pendingInPoint: number | null = null
 ): void {
   const { width, height } = state;
   ctx.clearRect(0, 0, width, height);
@@ -39,6 +45,8 @@ export function drawTimeline(
   drawPlaceholderLane(ctx, state, 0, THUMB_LANE_HEIGHT, 'Thumbnails');
   drawPlaceholderLane(ctx, state, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT, 'Waveform');
 
+  drawClips(ctx, state, clips, selectedClipId, pendingInPoint);
+
   drawPlayhead(ctx, state, currentTime);
 }