feat: add transport controls and keyboard shortcuts

Centralize seek/play/frame/shuttle in playback helpers, wire the transport bar, and handle global shortcuts from App.

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

src/lib/components/TransportControls.svelte

@@ -1,5 +1,76 @@
+<script lang="ts">
+  import { session } from '$lib/stores/videoSession.svelte';
+  import { markInPoint, markOutPoint } from '$lib/stores/clips.svelte';
+  import { formatTime } from '$lib/utils/time';
+  import {
+    jumpKeyframe,
+    runTransportAction,
+    seekBy,
+    stepFrame,
+    togglePlayPause,
+    type TransportKeyAction,
+  } from '$lib/transport/playback';
+
+  let hasKeyframes = $derived(session.keyframePositions.length > 0);
+
+  export function handleKeyAction(action: TransportKeyAction) {
+    runTransportAction(action, markInPoint, markOutPoint);
+  }
+</script>
+
 <div class="transport-controls">
-  <span class="placeholder-text">Transport controls</span>
+  <div class="buttons">
+    <button
+      onclick={() => jumpKeyframe(-1)}
+      disabled={!hasKeyframes}
+      title="Previous keyframe (Shift+,)"
+      type="button"
+    >
+      ◄K
+    </button>
+    <button onclick={() => seekBy(-5)} title="Seek back 5s (←)" type="button">-5s</button>
+    <button onclick={() => seekBy(-1)} title="Seek back 1s (Shift+←)" type="button">-1s</button>
+    <button onclick={() => stepFrame(-1)} title="Previous frame (,)" type="button">◄|</button>
+    <button onclick={togglePlayPause} title="Play/Pause (Space / K)" type="button">
+      {session.isPlaying ? '❚❚' : '▶'}
+    </button>
+    <button onclick={() => stepFrame(1)} title="Next frame (.)" type="button">|►</button>
+    <button onclick={() => seekBy(1)} title="Seek forward 1s (Shift+→)" type="button">+1s</button>
+    <button onclick={() => seekBy(5)} title="Seek forward 5s (→)" type="button">+5s</button>
+    <button
+      onclick={() => jumpKeyframe(1)}
+      disabled={!hasKeyframes}
+      title="Next keyframe (Shift+.)"
+      type="button"
+    >
+      K►
+    </button>
+  </div>
+
+  <div class="time-display">
+    <span class="current">{formatTime(session.currentTime)}</span>
+    <span class="separator">/</span>
+    <span class="total">{formatTime(session.duration)}</span>
+  </div>
+
+  <div class="mark-buttons">
+    <button
+      class="mark-btn"
+      onclick={() => markInPoint(session.currentTime)}
+      title="Set in-point (I)"
+      type="button"
+    >
+      I
+    </button>
+    <button
+      class="mark-btn"
+      onclick={() => markOutPoint(session.currentTime)}
+      title="Set out-point (O)"
+      type="button"
+    >
+      O
+    </button>
+  </div>
 </div>
 
 <style>
@@ -10,10 +81,50 @@
     background: var(--bg-secondary);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
-    min-height: 40px;
+    gap: 16px;
   }
-  .placeholder-text {
-    color: var(--text-muted);
+
+  .buttons {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .buttons button {
     font-size: 13px;
+    padding: 4px 8px;
+    min-width: 32px;
+  }
+
+  .time-display {
+    font-family: var(--font-mono);
+    font-size: 14px;
+  }
+
+  .current {
+    color: var(--text-primary);
+  }
+
+  .separator {
+    color: var(--text-muted);
+    margin: 0 4px;
+  }
+
+  .total {
+    color: var(--text-secondary);
+  }
+
+  .mark-buttons {
+    margin-left: auto;
+    display: flex;
+    gap: 4px;
+  }
+
+  .mark-btn {
+    font-weight: 700;
+    font-size: 14px;
+    padding: 4px 12px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
   }
 </style>