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

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

src/lib/components/ClipList.svelte

@@ -1,16 +1,196 @@
+<script lang="ts">
+  import {
+    clipStore,
+    selectClip,
+    removeClip,
+    updateClip,
+  } from '$lib/stores/clips.svelte';
+  import { formatTime, parseTime } from '$lib/utils/time';
+  import { session } from '$lib/stores/videoSession.svelte';
+
+  let clips = $derived(clipStore.clips);
+  let selectedId = $derived(clipStore.selectedClipId);
+
+  function handleSelect(id: string) {
+    selectClip(id);
+    const clip = clips.find((c) => c.id === id);
+    if (clip) {
+      session.currentTime = clip.startTime;
+      const videoEl = document.querySelector('video');
+      if (videoEl) videoEl.currentTime = clip.startTime;
+    }
+  }
+
+  function handleTimeEdit(clipId: string, field: 'startTime' | 'endTime', value: string) {
+    const parsed = parseTime(value);
+    if (parsed !== null) {
+      updateClip(clipId, { [field]: parsed });
+    }
+  }
+
+  function handleLabelEdit(clipId: string, value: string) {
+    updateClip(clipId, { label: value });
+  }
+</script>
+
 <div class="clip-list">
-  <div class="placeholder-text">No clips yet — press I to mark in-point</div>
+  {#if clips.length === 0}
+    <div class="empty">No clips yet — press I to mark in-point, O to mark out-point</div>
+  {:else}
+    <div class="header">
+      <span>CLIPS ({clips.length})</span>
+    </div>
+    {#each clips as clip (clip.id)}
+      <div
+        class="clip-row"
+        class:selected={clip.id === selectedId}
+        role="button"
+        tabindex="0"
+        onclick={() => handleSelect(clip.id)}
+        onkeydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelect(clip.id);
+          }
+        }}
+      >
+        <span class="color-swatch" style="background: {clip.color}"></span>
+        <input
+          class="label-input"
+          type="text"
+          value={clip.label}
+          onchange={(e) => handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <input
+          class="time-input"
+          type="text"
+          value={formatTime(clip.startTime)}
+          onchange={(e) =>
+            handleTimeEdit(clip.id, 'startTime', (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <span class="arrow">→</span>
+        <input
+          class="time-input"
+          type="text"
+          value={formatTime(clip.endTime)}
+          onchange={(e) =>
+            handleTimeEdit(clip.id, 'endTime', (e.target as HTMLInputElement).value)}
+          onclick={(e) => e.stopPropagation()}
+        />
+        <button
+          class="delete-btn"
+          onclick={(e) => {
+            e.stopPropagation();
+            removeClip(clip.id);
+          }}
+          title="Delete clip"
+        >✕</button>
+      </div>
+    {/each}
+  {/if}
 </div>
 
 <style>
   .clip-list {
     padding: 8px 12px;
     background: var(--bg-secondary);
-    min-height: 80px;
+    min-height: 60px;
+    max-height: 200px;
+    overflow-y: auto;
     border-top: 1px solid var(--border);
   }
-  .placeholder-text {
+
+  .empty {
     color: var(--text-muted);
     font-size: 13px;
+    padding: 8px 0;
+  }
+
+  .header {
+    font-size: 11px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+  }
+
+  .clip-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    width: 100%;
+    text-align: left;
+    background: transparent;
+    border: 1px solid transparent;
+  }
+
+  .clip-row:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .clip-row.selected {
+    border-color: var(--accent);
+    background: var(--bg-tertiary);
+  }
+
+  .color-swatch {
+    width: 12px;
+    height: 12px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  .label-input {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: 13px;
+    width: 80px;
+    padding: 2px 4px;
+  }
+
+  .label-input:focus {
+    background: var(--bg-primary);
+    outline: 1px solid var(--accent);
+    border-radius: 2px;
+  }
+
+  .time-input {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    width: 85px;
+    padding: 2px 4px;
+    text-align: center;
+  }
+
+  .time-input:focus {
+    background: var(--bg-primary);
+    outline: 1px solid var(--accent);
+    border-radius: 2px;
+  }
+
+  .arrow {
+    color: var(--text-muted);
+    font-size: 12px;
+  }
+
+  .delete-btn {
+    font-size: 14px;
+    padding: 2px 6px;
+    color: var(--text-muted);
+    background: transparent;
+  }
+
+  .delete-btn:hover {
+    color: var(--danger);
+    background: transparent;
   }
 </style>

src/lib/components/Timeline.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
   import { session } from '$lib/stores/videoSession.svelte';
+  import {
+    clipStore,
+    selectClip,
+    updateClip,
+  } from '$lib/stores/clips.svelte';
   import { drawTimeline, type TimelineState } from '$lib/timeline/renderer';
   import {
     computeZoom,
     handleClick as computeClickTime,
   } from '$lib/timeline/interactions';
+  import { hitTestClip } from '$lib/timeline/clipRenderer';
+
+  type ClipDragTarget = { clipId: string; edge: 'start' | 'end' };
 
   let canvas = $state<HTMLCanvasElement | null>(null);
   let containerEl = $state<HTMLDivElement | null>(null);
@@ -19,6 +27,7 @@
   });
 
   let isDragging = $state(false);
+  let dragTarget = $state<ClipDragTarget | null>(null);
 
   $effect(() => {
     if (session.duration > 0) {
@@ -53,7 +62,15 @@
       if (!ctx || !canvas) return;
       ctx.save();
       ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-      drawTimeline(ctx, timelineState, session.currentTime, session.duration);
+      drawTimeline(
+        ctx,
+        timelineState,
+        session.currentTime,
+        session.duration,
+        clipStore.clips,
+        clipStore.selectedClipId,
+        clipStore.pendingInPoint
+      );
       ctx.restore();
       animFrameId = requestAnimationFrame(draw);
     }
@@ -68,6 +85,12 @@
     return e.clientX - rect.left;
   }
 
+  function getCanvasY(e: MouseEvent): number {
+    if (!canvas) return 0;
+    const rect = canvas.getBoundingClientRect();
+    return e.clientY - rect.top;
+  }
+
   function seekTo(time: number) {
     session.currentTime = time;
     const videoEl = document.querySelector('video');
@@ -77,8 +100,22 @@
   }
 
   function handleMouseDown(e: MouseEvent) {
-    isDragging = true;
     const x = getCanvasX(e);
+    const y = getCanvasY(e);
+
+    const hit = hitTestClip(x, y, timelineState, clipStore.clips);
+    if (hit) {
+      if (hit.edge === 'body') {
+        selectClip(hit.clipId);
+      } else if (hit.edge === 'start' || hit.edge === 'end') {
+        dragTarget = { clipId: hit.clipId, edge: hit.edge };
+        selectClip(hit.clipId);
+      }
+      isDragging = true;
+      return;
+    }
+
+    isDragging = true;
     const targetTime = computeClickTime(x, timelineState, session.duration);
     seekTo(targetTime);
   }
@@ -86,12 +123,31 @@
   function handleMouseMove(e: MouseEvent) {
     if (!isDragging) return;
     const x = getCanvasX(e);
+
+    if (dragTarget) {
+      const time = computeClickTime(x, timelineState, session.duration);
+      switch (dragTarget.edge) {
+        case 'start':
+          updateClip(dragTarget.clipId, { startTime: time });
+          break;
+        case 'end':
+          updateClip(dragTarget.clipId, { endTime: time });
+          break;
+        default: {
+          const _exhaustive: never = dragTarget.edge;
+          void _exhaustive;
+        }
+      }
+      return;
+    }
+
     const targetTime = computeClickTime(x, timelineState, session.duration);
     seekTo(targetTime);
   }
 
   function handleMouseUp() {
     isDragging = false;
+    dragTarget = null;
   }
 
   function handleWheel(e: WheelEvent) {