feat(studio): clip thumbnail modules

[ukimsanov]

What

ImageThumbnail (+tests) and thumbnailUtils (+tests) — frame decode with SVG/AVIF format fallbacks and rounded-corner clipping — plus VideoThumbnail updates.

Why

the decode layer for timeline clip thumbnails, ahead of the visual refresh that renders them.

How

new modules + one modified file; purely presentational.

Test plan

bunx vitest run on both test files; tsc --noEmit; fallow audit clean.

---

Stack position 23/25 — studio NLE overhaul (CapCut-parity timeline + canvas). Graphite manages bases; merge from #2192 upward. Temporary TEMP(studio-dnd) fallow entries (unwired-component windows) are all removed by #2213 (app-shell swap), whose tree is byte-identical to the fully-verified integration branch.

[ukimsanov]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(studio): assets/blocks panel behaviors + preview helpers #2216
• feat(studio): timeline visual refresh #2215
• feat(studio): clip thumbnail modules #2214 👈 (View in Graphite)
• feat(studio): app shell swap — mount EditorShell, retire the legacy engine #2213
• feat(studio): timeline glue swap — Timeline/TimelineCanvas onto the NLE engine #2212
• feat(studio): canvas glue swap — overlay, gestures, selection to final form #2211
• feat(studio): sidebar asset card (unwired) #2210
• feat(studio): NLE shell assembly (unwired) #2209
• feat(studio): canvas chrome components (unwired) #2208
• feat(studio): timeline interaction hooks and lanes component (unwired) #2207
• feat(studio): clip drag engine — preview and commit (unwired) #2206
• feat(studio): glue API coexistence layer for the NLE swap #2205
• feat(studio): NLE shell components — context provider, panes, overlays (unwired) #2204
• feat(studio): arrow-key nudge step math (unwired) #2203
• feat(studio): canvas context menu and z-order actions (unwired) #2202
• test(studio): characterization suites for resize commit and razor history #2201
• feat(studio): asset click policy and canvas nudge gate #2200
• feat(studio): timeline lane-zone model #2199
• feat(studio): timeline z-stacking sync model #2198
• feat(studio): multi-clip drag preview math #2197
• feat(studio): timeline magnetic snapping #2196
• feat(studio): timeline collision and placement model #2195
• feat(studio-server): files route extensions #2194
• feat(studio): seek-restore contract for player reloads #2193
• feat(studio): timeline leaf helpers — audio inspector, zoom math, UI prefs #2192
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[miga-heygen]

Reviewed as part of the 25-PR NLE overhaul stack. Full stack review on #2205 (the keystone). No blockers on this PR. — Miga

[vanceingalls]

R1 — Batch E · clip thumbnails

Reviewed as PR 6 of 6 (thumbnail module addition, non-swap). Head SHA 7808aecb41bf55582e58a84ac4e2a17f28f55729.

Verdict: 🟢 LGTM

Presentational addition on top of the new engine. 5 files: 3 net-new (ImageThumbnail.tsx +160, ImageThumbnail.test.tsx +173, thumbnailUtils.{ts,test.ts} +54/+127), 1 tiny modify (VideoThumbnail.tsx +3/-3). Zero interaction with the swap correctness verified for #2211/#2212/#2213.

Verification

• Landing point: sits atop studio-dnd/pr22-app-shell-swap (#2213 head).
• Scope: no touches to timeline glue, store, or engine code — purely thumbnail extraction and helper utilities.
• Coverage: 173 lines of ImageThumbnail tests + 127 lines of util tests = solid coverage for a new module.
• No deletions, no fallow changes, no cross-package touches.

Nothing to block on. If reviewers upstream in Batch E flag anything, it wouldn't cascade here.

R1 by Via

[jrusso1020]

Re-review — uncaught canvas.toDataURL SecurityError kills thumbnails silently

VideoThumbnail.tsx:122:

const dataUrl = canvas.toDataURL("image/jpeg", 0.6);

video.crossOrigin = "anonymous" is set at line 75, but resolveMediaPreviewUrl (thumbnailUtils.ts:52) passes absolute http(s): URLs through untouched. An external asset whose host doesn't send CORS response headers will taint the canvas → toDataURL throws SecurityError inside the seeked DOM listener.

Failure mode: no try/catch on the toDataURL call. The extractor dies mid-flight, the seeked handler never resolves, extractNext() never advances — the strip stays in shimmer forever with no user-facing error. Not memory-corrupt, not a crash — just silently broken thumbnails.

Reproduces reliably with any external asset whose CDN doesn't serve Access-Control-Allow-Origin. HeyGen assets should be safe (same-origin proxy path), but user-linked or externally-hosted assets from arbitrary sources will trip this.

Fix: wrap drawImage + toDataURL in try/catch. On SecurityError, either fall through to the error handler (which continues to the next timestamp), OR emit a placeholder frame for that timestamp. Either way, keep the extractor loop alive.

Bonus tail-batch nit: AssetCard hover-video has no debounce, no abort, no preload="metadata"

At AssetCard.tsx:190-203, every pointerenter mounts a fresh <video autoPlay> against the preview API. Dragging the cursor across a 40-tile assets grid triggers 40 sequential in-flight fetches; on slow networks this hammers the server and burns decoder init cost.

Fix: add a ~100ms hover-in delay (setTimeout guarded by an in-flight ref), or reuse the VideoFrameThumbnail element.

— Rames Jusso