refactor(studio): code quality — 22 findings, dead code removal, App.tsx split (#144)

## Summary

Full code quality review of the studio package, fixing 22 of 25 findings. Removes dead code, extracts modules from App.tsx, fixes accessibility and performance issues.

## Critical fixes (3)

- **`aria-valuenow`** on seek bar now updates imperatively via `liveTime.subscribe` — screen readers previously always reported position 0
- **Speed menu** closes on outside click (was permanently stuck open)
- **RenderQueue auto-scroll** moved from render phase to `useEffect` (was violating React render purity via `queueMicrotask` during render)

## Dead code removed (-331 lines)

| File | Lines | Why dead |
|---|---|---|
| `PreviewPanel.tsx` | 180 | Replaced by NLELayout + NLEPreview |
| `useCodeEditor.ts` | 80 | Exported but never imported |
| `formatTick` alias | 2 | Deprecated, unused |
| `onClipChange` prop | 5 | Declared, never used |
| `trackH` prop | 5 | Declared, never used |
| `editRange*` + updaters in store | 60 | Never read or written |

## App.tsx extraction

| Extracted to | Lines | What |
|---|---|---|
| `components/LintModal.tsx` | 130 | Lint results modal + LintFinding type |
| `components/MediaPreview.tsx` | 75 | Image/video/audio/font file previewer |
| `utils/mediaTypes.ts` | 15 | Shared regex constants (App.tsx and AssetsTab.tsx had diverged copies) |

## Performance fixes

- `useMemo` for `compositions`/`assets` derivation from `fileTree`
- `useMemo` for `buildTree(files)` in FileTree
- Debounced `handleContentChange` PUT (600ms — was firing on every keystroke)
- CompositionsTab iframe hover debounced (300ms — was mounting immediately)
- `VideoFrameThumbnail` re-extracts frame when `src` prop changes

## Not addressed (3 — low priority)

- #6: SystemIcons consolidation (large refactor across many files)
- #16-17: Overlay dismiss pattern standardization
- #18: Inline SVG → Phosphor replacement (gradual, per-PR)

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

packages/studio/src/player/components/EditModal.tsx

@@ -105,7 +105,7 @@ Preserve all other elements and timing outside this range.`;
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-2.5 border-b border-neutral-800/60">
           <div className="flex items-center gap-2">
-            <div className="w-1.5 h-1.5 rounded-full bg-blue-400" />
+            <div className="w-1.5 h-1.5 rounded-full bg-studio-accent" />
             <span className="text-[11px] font-medium text-neutral-300">
               {formatTime(start)} — {formatTime(end)}
             </span>
@@ -120,7 +120,7 @@ Preserve all other elements and timing outside this range.`;
           <div className="px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto">
             {elementsInRange.map((el) => (
               <div key={el.id} className="flex items-center justify-between py-0.5">
-                <span className="text-[10px] font-mono text-blue-400/80">#{el.id}</span>
+                <span className="text-[10px] font-mono text-studio-accent/80">#{el.id}</span>
                 <span className="text-[10px] text-neutral-600">{el.tag}</span>
               </div>
             ))}
@@ -141,7 +141,7 @@ Preserve all other elements and timing outside this range.`;
             }}
             placeholder="What should change?"
             rows={2}
-            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-none focus:border-blue-500/40 transition-colors"
+            className="w-full px-3 py-2 text-xs bg-neutral-800/60 border border-neutral-700/40 rounded-lg text-neutral-200 placeholder:text-neutral-600 resize-none focus:outline-none focus:border-studio-accent/40 transition-colors"
           />
         </div>
 
@@ -152,11 +152,11 @@ Preserve all other elements and timing outside this range.`;
             className={`w-full py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               copied
                 ? "bg-green-500/20 text-green-400 border border-green-500/30"
-                : "bg-blue-500/15 text-blue-400 border border-blue-500/25 hover:bg-blue-500/25"
+                : "bg-studio-accent/15 text-studio-accent border border-studio-accent/25 hover:bg-studio-accent/25"
             }`}
           >
             {copied ? "Copied!" : "Copy to Agent"}
-            {!copied && <span className="text-[9px] text-blue-400/50 ml-1.5">Cmd+Enter</span>}
+            {!copied && <span className="text-[9px] text-studio-accent/50 ml-1.5">Cmd+Enter</span>}
           </button>
         </div>
       </div>