From a2a8bf42af58e2901245eb481e8f21ab13437add Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Sat, 11 Jul 2026 13:55:25 -0700
Subject: [PATCH] feat(studio): assets/blocks panel behaviors + preview helpers

What: blocks tab install flow, right-panel and global drag-overlay polish,
music beat analysis and clip-content rendering hooks, and the
preview-helper utilities backing asset preview.

Why: completes the studio NLE stack on top of the visual refresh.

How: modified files only (kept as one PR: splitting further would produce
sub-150-LOC fragments of interdependent panel glue).

Test plan: bunx vitest run studioPreviewHelpers/studioUrlState suites; tsc
--noEmit; fallow audit clean.
---
 .../components/StudioGlobalDragOverlay.tsx    |   4 +-
 .../src/components/StudioRightPanel.tsx       |  11 +-
 .../src/components/sidebar/BlocksTab.tsx      |   9 +-
 packages/studio/src/hooks/useBlockHandlers.ts |  82 ++++++++-----
 .../studio/src/hooks/useMusicBeatAnalysis.ts  | 108 ++++++++++++------
 .../studio/src/hooks/useRenderClipContent.ts  |  30 ++++-
 .../src/utils/studioPreviewHelpers.test.ts    |  73 ++++++++++--
 .../studio/src/utils/studioPreviewHelpers.ts  |  10 ++
 .../studio/src/utils/studioUrlState.test.ts   |   1 -
 9 files changed, 243 insertions(+), 85 deletions(-)

diff --git a/packages/studio/src/components/StudioGlobalDragOverlay.tsx b/packages/studio/src/components/StudioGlobalDragOverlay.tsx
index ecd65cb614..00e562af33 100644
--- a/packages/studio/src/components/StudioGlobalDragOverlay.tsx
+++ b/packages/studio/src/components/StudioGlobalDragOverlay.tsx
@@ -17,9 +17,7 @@ export function StudioGlobalDragOverlay() {
           <polyline points="7 10 12 15 17 10" />
           <line x1="12" y1="15" x2="12" y2="3" />
         </svg>
-        <span className="text-sm font-medium text-studio-accent">
-          Drop files to import into project
-        </span>
+        <span className="text-sm font-medium text-studio-accent">Drop to add at the playhead</span>
       </div>
     </div>
   );
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index c65fd3d0c4..652876c2bb 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -446,12 +446,14 @@ export function StudioRightPanel({
 
   return (
     <>
+      {/* Vertical resize divider: 3px visible seam, 8px pointer-capture zone via
+          the absolutely-positioned inner hit area. */}
       <div
         role="separator"
         aria-label="Resize inspector panel"
         aria-orientation="vertical"
         tabIndex={0}
-        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center outline-none focus-visible:bg-studio-accent/20"
+        className="group relative w-[3px] flex-shrink-0 cursor-col-resize outline-none focus-visible:bg-studio-accent/20"
         style={{ touchAction: "none" }}
         onPointerDown={(e) => handlePanelResizeStart("right", e)}
         onPointerMove={handlePanelResizeMove}
@@ -465,10 +467,13 @@ export function StudioRightPanel({
           setRightWidth(Math.max(160, Math.min(600, rightWidth + delta)));
         }}
       >
-        <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
+        {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
+        <div className="absolute inset-y-0 -left-[2.5px] w-2" />
+        {/* Visible hairline */}
+        <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
       <div
-        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden border-l border-neutral-800 bg-neutral-900"
+        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900"
         style={{ width: rightWidth }}
       >
         {captionEditMode ? (
diff --git a/packages/studio/src/components/sidebar/BlocksTab.tsx b/packages/studio/src/components/sidebar/BlocksTab.tsx
index c94807f1a6..6b4c27eec8 100644
--- a/packages/studio/src/components/sidebar/BlocksTab.tsx
+++ b/packages/studio/src/components/sidebar/BlocksTab.tsx
@@ -10,6 +10,7 @@ import {
 import { usePlayerStore } from "../../player";
 import { formatTime } from "../../player/lib/time";
 import { useStudioShellContext } from "../../contexts/StudioContext";
+import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 export interface BlockPreviewInfo {
   videoUrl?: string;
   posterUrl?: string;
@@ -383,10 +384,16 @@ function BlockCard({
   return (
     <div
       className="group/card rounded-md overflow-hidden cursor-pointer transition-colors bg-neutral-900 hover:bg-neutral-800"
+      draggable
+      onDragStart={(e) => {
+        e.dataTransfer.effectAllowed = "copy";
+        e.dataTransfer.setData(TIMELINE_BLOCK_MIME, JSON.stringify({ name }));
+        e.dataTransfer.setData("text/plain", name);
+        handleLeave(); // cancel the hover-preview timer so it doesn't fire mid-drag
+      }}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
     >
-      {/* Thumbnail */}
       <div className="aspect-video w-full overflow-hidden relative">
         {hovered && videoUrl ? (
           <video
diff --git a/packages/studio/src/hooks/useBlockHandlers.ts b/packages/studio/src/hooks/useBlockHandlers.ts
index a80afa1c8c..886c219ec4 100644
--- a/packages/studio/src/hooks/useBlockHandlers.ts
+++ b/packages/studio/src/hooks/useBlockHandlers.ts
@@ -2,7 +2,7 @@
  * Block drop/add handlers for the Studio.
  * Extracted from App.tsx to keep file sizes under the 600-line limit.
  */
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { addBlockToProject } from "../utils/blockInstaller";
@@ -83,17 +83,41 @@ export function useBlockHandlers({
     ],
   );
 
+  // Block installs hit the server and end in a full preview reload; without a
+  // guard, repeat drops while one is in flight stack duplicate installs.
+  const installingBlockRef = useRef(false);
+  const runBlockInstall = useCallback(
+    async <T>(blockName: string, install: () => Promise<T>): Promise<T | null> => {
+      if (installingBlockRef.current) {
+        blockCtx.showToast("A block is already installing — one moment…", "info");
+        return null;
+      }
+      installingBlockRef.current = true;
+      blockCtx.showToast(`Adding ${blockName}…`, "info");
+      try {
+        return await install();
+      } finally {
+        installingBlockRef.current = false;
+      }
+    },
+    [blockCtx],
+  );
+
   const handleAddBlock = useCallback(
     (blockName: string) => {
       if (!projectId) return;
+      // fallow-ignore-next-line complexity
       void (async () => {
-        const result = await addBlockToProject({
-          projectId,
-          blockName,
-          ...blockCtx,
-          previewIframe: previewIframeRef.current,
-          currentTime: usePlayerStore.getState().currentTime,
-        });
+        const result = await runBlockInstall(blockName, () =>
+          addBlockToProject({
+            projectId,
+            blockName,
+            ...blockCtx,
+            previewIframe: previewIframeRef.current,
+            currentTime: usePlayerStore.getState().currentTime,
+          }),
+        );
+        if (result === null) return;
         const params = result?.block.type === "hyperframes:block" ? result.block.params : undefined;
         if (params?.length) {
           setActiveBlockParams({
@@ -107,37 +131,41 @@ export function useBlockHandlers({
         }
       })();
     },
-    [projectId, blockCtx, previewIframeRef, setRightCollapsed, setRightPanelTab],
+    [projectId, blockCtx, previewIframeRef, runBlockInstall, setRightCollapsed, setRightPanelTab],
   );
 
   const handleTimelineBlockDrop = useCallback(
     (blockName: string, placement: { start: number; track: number }) => {
       if (!projectId) return;
-      void addBlockToProject({
-        projectId,
-        blockName,
-        placement,
-        ...blockCtx,
-        previewIframe: previewIframeRef.current,
-        currentTime: usePlayerStore.getState().currentTime,
-      });
+      void runBlockInstall(blockName, () =>
+        addBlockToProject({
+          projectId,
+          blockName,
+          placement,
+          ...blockCtx,
+          previewIframe: previewIframeRef.current,
+          currentTime: usePlayerStore.getState().currentTime,
+        }),
+      );
     },
-    [projectId, blockCtx, previewIframeRef],
+    [projectId, blockCtx, previewIframeRef, runBlockInstall],
   );
 
   const handlePreviewBlockDrop = useCallback(
     (blockName: string, position: { left: number; top: number }) => {
       if (!projectId) return;
-      void addBlockToProject({
-        projectId,
-        blockName,
-        visualPosition: position,
-        ...blockCtx,
-        previewIframe: previewIframeRef.current,
-        currentTime: usePlayerStore.getState().currentTime,
-      });
+      void runBlockInstall(blockName, () =>
+        addBlockToProject({
+          projectId,
+          blockName,
+          visualPosition: position,
+          ...blockCtx,
+          previewIframe: previewIframeRef.current,
+          currentTime: usePlayerStore.getState().currentTime,
+        }),
+      );
     },
-    [projectId, blockCtx, previewIframeRef],
+    [projectId, blockCtx, previewIframeRef, runBlockInstall],
   );
 
   return {
diff --git a/packages/studio/src/hooks/useMusicBeatAnalysis.ts b/packages/studio/src/hooks/useMusicBeatAnalysis.ts
index da533487e5..078def68f3 100644
--- a/packages/studio/src/hooks/useMusicBeatAnalysis.ts
+++ b/packages/studio/src/hooks/useMusicBeatAnalysis.ts
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from "react";
 import { usePlayerStore } from "../player/store/playerStore";
-import { isMusicTrack } from "../utils/timelineInspector";
+import { resolveBeatSourceTrack } from "../utils/timelineInspector";
 import { analyzeMusicFromUrl } from "@hyperframes/core/beats";
 import { useFileManagerContextOptional } from "../contexts/FileManagerContext";
 import { mergeUserBeats } from "../utils/beatEditing";
@@ -52,6 +52,44 @@ async function resolveBeats(
   return { ...detected, hasFile: false };
 }
 
+/** True when the beats file for a track exists and holds at least one beat. */
+async function readHasSavedBeats(io: ProjectIo, beatPath: string): Promise<boolean> {
+  try {
+    const content = await io.readOptionalProjectFile(beatPath);
+    const parsed = content ? parseBeats(content) : null;
+    return !!(parsed && parsed.times.length > 0);
+  } catch {
+    return false;
+  }
+}
+
+type MusicAnalysis = Awaited<ReturnType<typeof analyzeMusicFromUrl>>;
+
+/**
+ * Analyze a track (memoized per URL) and fold in any saved beat edits. Null on
+ * decode/analysis failure — the caller then clears state and drops the cache
+ * entry (only when the effect is still live).
+ */
+async function loadBeatAnalysis(
+  musicSrc: string,
+  beatPath: string,
+  io: ProjectIo,
+): Promise<{ analysis: MusicAnalysis; times: number[]; strengths: number[] } | null> {
+  let promise = analysisCache.get(musicSrc);
+  if (!promise) {
+    promise = analyzeMusicFromUrl(musicSrc);
+    cacheAnalysis(musicSrc, promise);
+  }
+  try {
+    const analysis = await promise;
+    const detected = { times: analysis.beatTimes, strengths: analysis.beatStrengths };
+    const { times, strengths } = await resolveBeats(beatPath, detected, io);
+    return { analysis, times, strengths };
+  } catch {
+    return null;
+  }
+}
+
 export function useMusicBeatAnalysis(): void {
   const elements = usePlayerStore((s) => s.elements);
   const setBeatAnalysis = usePlayerStore((s) => s.setBeatAnalysis);
@@ -71,9 +109,12 @@ export function useMusicBeatAnalysis(): void {
       ? { readOptionalProjectFile, writeProjectFile }
       : null;
 
-  const musicSrc = useMemo(() => {
-    const el = elements.find((e) => isMusicTrack(e));
-    return el?.src ?? null;
+  const { musicSrc, isFallbackTrack } = useMemo(() => {
+    const resolved = resolveBeatSourceTrack(elements);
+    return {
+      musicSrc: resolved?.element.src ?? null,
+      isFallbackTrack: resolved?.isFallback ?? false,
+    };
   }, [elements]);
 
   // ── Load: decode for strength data, then use the saved beat file if present,
@@ -95,50 +136,45 @@ export function useMusicBeatAnalysis(): void {
     const beatPath = beatFilePathForSrc(musicSrc);
     const io = ioRef.current;
 
-    // Only run expensive audio decode + beat analysis when the user has an
-    // explicit beats file saved. Without one, skip entirely — no surprise
-    // green lines on the timeline after dragging unrelated assets.
+    // For explicitly tagged/named music tracks: only run expensive audio decode
+    // + beat analysis when the user has an explicit beats file saved. Without
+    // one, skip entirely — no surprise green lines on the timeline after
+    // dragging unrelated assets.
+    //
+    // For fallback tracks (audio dropped from Finder with no role/music-id):
+    // always run analysis so the Beat tool becomes usable immediately.
     (async () => {
       if (!beatPath || !io) return;
-      let hasSavedBeats = false;
-      try {
-        const content = await io.readOptionalProjectFile(beatPath);
-        const parsed = content ? parseBeats(content) : null;
-        hasSavedBeats = !!(parsed && parsed.times.length > 0);
-      } catch {
-        /* no file */
+      if (!isFallbackTrack) {
+        const hasSavedBeats = await readHasSavedBeats(io, beatPath);
+        if (cancelled) return;
+        if (!hasSavedBeats) {
+          setBeatAnalysis(null);
+          return;
+        }
       }
       if (cancelled) return;
-      if (!hasSavedBeats) {
+
+      const result = await loadBeatAnalysis(musicSrc, beatPath, io);
+      if (cancelled) return;
+      if (!result) {
         setBeatAnalysis(null);
+        analysisCache.delete(musicSrc);
         return;
       }
-
-      let promise = analysisCache.get(musicSrc);
-      if (!promise) {
-        promise = analyzeMusicFromUrl(musicSrc);
-        cacheAnalysis(musicSrc, promise);
-      }
-      try {
-        const analysis = await promise;
-        const detected = { times: analysis.beatTimes, strengths: analysis.beatStrengths };
-        const { times, strengths } = await resolveBeats(beatPath, detected, io);
-        if (cancelled) return;
-        setBeatEdits(null);
-        resetBeatHistory();
-        setBeatAnalysis({ ...analysis, beatTimes: times, beatStrengths: strengths });
-      } catch {
-        if (!cancelled) {
-          setBeatAnalysis(null);
-          analysisCache.delete(musicSrc);
-        }
-      }
+      setBeatEdits(null);
+      resetBeatHistory();
+      setBeatAnalysis({
+        ...result.analysis,
+        beatTimes: result.times,
+        beatStrengths: result.strengths,
+      });
     })();
 
     return () => {
       cancelled = true;
     };
-  }, [musicSrc, setBeatAnalysis, setBeatEdits, resetBeatHistory]);
+  }, [musicSrc, isFallbackTrack, setBeatAnalysis, setBeatEdits, resetBeatHistory]);
 
   // ── Persist: register a debounced writer fired by every beat edit/undo/redo.
   //    Flushes any pending write on cleanup so the last edit is never lost. ──
diff --git a/packages/studio/src/hooks/useRenderClipContent.ts b/packages/studio/src/hooks/useRenderClipContent.ts
index dbe43dd99b..0e01c381fa 100644
--- a/packages/studio/src/hooks/useRenderClipContent.ts
+++ b/packages/studio/src/hooks/useRenderClipContent.ts
@@ -3,6 +3,8 @@ import { createElement } from "react";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
 import type { TimelineElement } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
+import { ImageThumbnail } from "../player/components/ImageThumbnail";
+import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
 
 export function normalizeCompositionSrc(
   compSrc: string,
@@ -51,8 +53,16 @@ function trimFractions(el: TimelineElement): { start?: number; end?: number } {
  */
 function renderAudioClip(el: TimelineElement, pid: string, labelColor: string): ReactNode {
   const srcRelative = resolvePreviewRelative(el.src, pid);
-  const audioUrl = srcRelative ? `/api/projects/${pid}/preview/${srcRelative}` : (el.src ?? "");
-  const waveformUrl = srcRelative ? `/api/projects/${pid}/waveform/${srcRelative}` : undefined;
+  // Encode each path segment (spaces, parens, U+202F, unicode) so the URL matches
+  // what the assets panel loads — a raw segment 404s. resolvePreviewRelative
+  // returns the DECODED path, so it must be re-encoded here.
+  const encodedRelative = srcRelative ? encodePreviewPath(srcRelative) : null;
+  const audioUrl = encodedRelative
+    ? `/api/projects/${pid}/preview/${encodedRelative}`
+    : (el.src ?? "");
+  const waveformUrl = encodedRelative
+    ? `/api/projects/${pid}/waveform/${encodedRelative}`
+    : undefined;
   const { start, end } = trimFractions(el);
   return createElement(AudioWaveform, {
     audioUrl,
@@ -100,7 +110,7 @@ export function useRenderClipContent({
       // instead of capturing the master at a time when the comp is fading in.
       if (compSrc) {
         return createElement(CompositionThumbnail, {
-          previewUrl: `/api/projects/${pid}/preview/comp/${compSrc}`,
+          previewUrl: `/api/projects/${pid}/preview/comp/${encodePreviewPath(compSrc)}`,
           label: "",
           labelColor: style.label,
 
@@ -138,9 +148,17 @@ export function useRenderClipContent({
         !/(backdrop|background|overlay|scrim|mask)/i.test(el.id);
 
       if ((el.tag === "video" || el.tag === "img") && el.src) {
-        const mediaSrc = el.src.startsWith("http")
-          ? el.src
-          : `/api/projects/${pid}/preview/${el.src}`;
+        const mediaSrc = resolveMediaPreviewUrl(el.src, pid);
+        // Still images can't be decoded by VideoThumbnail's <video> extractor
+        // (the error event fires and the shimmer never resolves) — render the
+        // image itself as the strip.
+        if (el.tag === "img") {
+          return createElement(ImageThumbnail, {
+            imageSrc: mediaSrc,
+            label: "",
+            labelColor: style.label,
+          });
+        }
         return createElement(VideoThumbnail, {
           videoSrc: mediaSrc,
           label: "",
diff --git a/packages/studio/src/utils/studioPreviewHelpers.test.ts b/packages/studio/src/utils/studioPreviewHelpers.test.ts
index 4114a03a58..fc22535c13 100644
--- a/packages/studio/src/utils/studioPreviewHelpers.test.ts
+++ b/packages/studio/src/utils/studioPreviewHelpers.test.ts
@@ -25,6 +25,15 @@ function stubRect(el: Element, rect: DOMRect): void {
   el.getBoundingClientRect = () => rect;
 }
 
+/** Create and attach a preview iframe, returning it with its (asserted) document. */
+function createPreviewIframe(): { iframe: HTMLIFrameElement; doc: Document } {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("Expected iframe document");
+  return { iframe, doc };
+}
+
 describe("coversComposition (full-bleed canvas-pick exclusion)", () => {
   const viewport = { width: 1920, height: 1080 };
 
@@ -106,10 +115,7 @@ describe("pauseStudioPreviewPlayback", () => {
 
 describe("getPreviewTargetFromPointer", () => {
   it("skips candidates hidden from author hit-testing by inherited pointer-events:none", () => {
-    const iframe = document.createElement("iframe");
-    document.body.append(iframe);
-    const doc = iframe.contentDocument;
-    if (!doc) throw new Error("Expected iframe document");
+    const { iframe, doc } = createPreviewIframe();
 
     doc.body.innerHTML = `
       <main id="scene" data-composition-id="scene">
@@ -141,10 +147,7 @@ describe("getPreviewTargetFromPointer", () => {
   });
 
   it("honors a CSS-class pointer-events:auto opt-in under a pointer-events:none ancestor", () => {
-    const iframe = document.createElement("iframe");
-    document.body.append(iframe);
-    const doc = iframe.contentDocument;
-    if (!doc) throw new Error("Expected iframe document");
+    const { iframe, doc } = createPreviewIframe();
 
     doc.head.innerHTML = `<style>.clickable { pointer-events: auto; }</style>`;
     doc.body.innerHTML = `
@@ -172,4 +175,58 @@ describe("getPreviewTargetFromPointer", () => {
 
     iframe.remove();
   });
+
+  it("selects a full-bleed <video> instead of skipping to the element behind it", () => {
+    const { iframe, doc } = createPreviewIframe();
+
+    doc.body.innerHTML = `
+      <main id="scene" data-composition-id="scene">
+        <div id="backdrop"></div>
+        <video id="hero"></video>
+      </main>
+    `;
+
+    const scene = doc.getElementById("scene");
+    const backdrop = doc.getElementById("backdrop");
+    const hero = doc.getElementById("hero");
+    if (!scene || !backdrop || !hero) throw new Error("Expected preview fixture elements");
+
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(backdrop, domRect(0, 0, 400, 300));
+    // Full-bleed hero video painted on top of a full-bleed backdrop.
+    stubRect(hero, domRect(0, 0, 400, 300));
+    doc.elementsFromPoint = () => [hero, backdrop, scene];
+
+    // Before the fix the video was full-bleed-excluded and the picker fell through
+    // to the backdrop (or null). It must now return the video itself.
+    expect(getPreviewTargetFromPointer(iframe, 200, 150, "index.html")).toBe(hero);
+
+    iframe.remove();
+  });
+
+  it("still excludes a full-bleed non-media container so clicks reach inner content", () => {
+    const { iframe, doc } = createPreviewIframe();
+
+    doc.body.innerHTML = `
+      <main id="scene" data-composition-id="scene">
+        <div id="wrapper"><h1 id="headline">Title</h1></div>
+      </main>
+    `;
+
+    const scene = doc.getElementById("scene");
+    const wrapper = doc.getElementById("wrapper");
+    const headline = doc.getElementById("headline");
+    if (!scene || !wrapper || !headline) throw new Error("Expected preview fixture elements");
+
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(wrapper, domRect(0, 0, 400, 300));
+    stubRect(headline, domRect(40, 40, 160, 48));
+    doc.elementsFromPoint = () => [headline, wrapper, scene];
+
+    expect(getPreviewTargetFromPointer(iframe, 80, 64, "index.html")).toBe(headline);
+
+    iframe.remove();
+  });
 });
diff --git a/packages/studio/src/utils/studioPreviewHelpers.ts b/packages/studio/src/utils/studioPreviewHelpers.ts
index 9f76b59cb5..d67a8c678a 100644
--- a/packages/studio/src/utils/studioPreviewHelpers.ts
+++ b/packages/studio/src/utils/studioPreviewHelpers.ts
@@ -21,6 +21,15 @@ interface PreviewLocalPointer {
 // should remain canvas-selectable.
 const FULL_BLEED_RATIO = 0.95;
 
+// Media leaves (a hero/background video, a full-bleed image, an <svg>/<canvas>
+// backdrop) ARE the content a user clicks — they must stay canvas-selectable even
+// at full-bleed. Only empty containers (scene wrappers, layout backdrops) get
+// excluded. Without this, a full-bleed <video> is skipped and the click lands on
+// whatever sits behind it — the reported "can't select videos / selects the layer
+// behind" bug (and the "needs a second click" symptom, where the first click
+// resolves through the video to nothing and only the hover fallback recovers).
+const FULL_BLEED_SELECTABLE_MEDIA_TAGS = new Set(["video", "img", "canvas", "svg"]);
+
 export function coversComposition(
   elRect: { width: number; height: number },
   viewport: DomEditViewport,
@@ -33,6 +42,7 @@ export function coversComposition(
 }
 
 function isFullBleedTarget(el: HTMLElement, viewport: DomEditViewport): boolean {
+  if (FULL_BLEED_SELECTABLE_MEDIA_TAGS.has(el.tagName.toLowerCase())) return false;
   return coversComposition(el.getBoundingClientRect(), viewport);
 }
 
diff --git a/packages/studio/src/utils/studioUrlState.test.ts b/packages/studio/src/utils/studioUrlState.test.ts
index 4a3149413e..1123d9bcb9 100644
--- a/packages/studio/src/utils/studioUrlState.test.ts
+++ b/packages/studio/src/utils/studioUrlState.test.ts
@@ -79,7 +79,6 @@ function renderStudioUrlStateHarness(
     previewIframeRef: { current: null },
     rightPanelTab: "renders",
     rightCollapsed: true,
-    timelineVisible: true,
     activeCompPathHydrated: true,
     domEditSelection: null,
     buildDomSelectionFromTarget: () => Promise.resolve(null),