chore: stage all pending work — caption styling, media server, processing modal, docs, summaries

Includes:
- Extended caption styling (font, shadow, dimmed color, bg toggle)
- Media server, subtitle downloader, VTT parser, processing modal
- Waveform tiers, thumbnail/timeline improvements, transport controls
- Hybrid download model, dependency management, clip export enhancements
- 21 chat summaries, 2 implementation plans, 2 design specs

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

src/lib/components/ClipList.svelte

@@ -33,9 +33,17 @@
   function handleLabelEdit(clipId: string, value: string) {
     updateClip(clipId, { label: value });
   }
+
+  function handleContainerClick(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    // Only deselect if the click landed on the container itself, not a child
+    if (target.classList.contains('clip-list')) {
+      selectClip(null);
+    }
+  }
 </script>
 
-<div class="clip-list">
+<div class="clip-list" role="listbox" onclick={handleContainerClick}>
   {#if clips.length === 0}
     <div class="empty">No clips yet — press I to mark in-point, O to mark out-point</div>
   {:else}
@@ -46,7 +54,8 @@
       <div
         class="clip-row"
         class:selected={clip.id === selectedId}
-        role="button"
+        role="option"
+        aria-selected={clip.id === selectedId}
         tabindex="0"
         onclick={() => handleSelect(clip.id)}
         onkeydown={(e) => {
@@ -91,11 +100,14 @@
         >✕</button>
       </div>
     {/each}
-    {#if onExport}
-      <div class="export-buttons">
+    <div class="action-buttons">
+      {#if selectedId}
+        <button type="button" class="deselect-btn" onclick={() => selectClip(null)}>Deselect</button>
+      {/if}
+      {#if onExport}
         <button type="button" onclick={() => onExport()}>Export All</button>
-      </div>
-    {/if}
+      {/if}
+    </div>
   {/if}
 </div>
 
@@ -103,10 +115,11 @@
   .clip-list {
     padding: 8px 12px;
     background: var(--bg-secondary);
-    min-height: 60px;
-    max-height: 200px;
+    height: 100%;
+    min-height: 40px;
     overflow-y: auto;
     border-top: 1px solid var(--border);
+    box-sizing: border-box;
   }
 
   .empty {
@@ -123,17 +136,24 @@
     margin-bottom: 4px;
   }
 
-  .export-buttons {
+  .action-buttons {
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px solid var(--border);
+    display: flex;
+    gap: 8px;
   }
 
-  .export-buttons button {
+  .action-buttons button {
     font-size: 13px;
     padding: 6px 12px;
   }
 
+  .deselect-btn {
+    color: var(--text-secondary);
+    background: var(--bg-tertiary);
+  }
+
   .clip-row {
     display: flex;
     align-items: center;