@hyperframes/studio 0.7.89 → 0.7.92

package/src/player/components/timelineDragDrop.test.tsx

@@ -0,0 +1,206 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+import { usePlayerStore } from "../store/playerStore";
+import { createTimelineRowGeometry } from "./timelineLayout";
+import { useTimelineAssetDrop } from "./timelineDragDrop";
+import { configureTimelineTestViewport } from "./timelineTestViewport";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+interface DropTransfer {
+  types: string[];
+  files: File[];
+  dropEffect: DataTransfer["dropEffect"];
+  getData: (type: string) => string;
+}
+
+function dragEvent(transfer: DropTransfer, clientX: number, clientY: number): React.DragEvent {
+  return {
+    clientX,
+    clientY,
+    dataTransfer: transfer,
+    preventDefault: vi.fn(),
+  } as unknown as React.DragEvent;
+}
+
+function assetTransfer(payload: string): DropTransfer {
+  return {
+    types: [TIMELINE_ASSET_MIME],
+    files: [],
+    dropEffect: "none",
+    getData: (type) => (type === TIMELINE_ASSET_MIME ? payload : ""),
+  };
+}
+
+function renderHarness(
+  onAssetDrop: ReturnType<typeof vi.fn>,
+  sessionEpoch = 1,
+  options: { onBlockDrop?: ReturnType<typeof vi.fn>; strict?: boolean } = {},
+) {
+  const tracks = Array.from({ length: 100 }, (_, index) => index);
+  const geometry = createTimelineRowGeometry(
+    tracks,
+    tracks.map(() => 48),
+  );
+  const scroll = document.createElement("div");
+  configureTimelineTestViewport(scroll, geometry.canvasHeight);
+  document.body.append(scroll);
+  const root = createRoot(document.createElement("div"));
+  let api: ReturnType<typeof useTimelineAssetDrop> | null = null;
+
+  function Probe({ epoch }: { epoch: number }) {
+    api = useTimelineAssetDrop({
+      scrollRef: { current: scroll },
+      ppsRef: { current: 40 },
+      durationRef: { current: 120 },
+      trackOrderRef: { current: tracks },
+      rowGeometryRef: { current: geometry },
+      contentOrigin: 0,
+      sessionEpoch: epoch,
+      onAssetDrop,
+      onBlockDrop: options.onBlockDrop,
+    });
+    return null;
+  }
+
+  const renderProbe = (epoch: number) =>
+    root.render(
+      options.strict ? (
+        <React.StrictMode>
+          <Probe epoch={epoch} />
+        </React.StrictMode>
+      ) : (
+        <Probe epoch={epoch} />
+      ),
+    );
+  act(() => renderProbe(sessionEpoch));
+  return {
+    scroll,
+    root,
+    get api() {
+      if (!api) throw new Error("drop harness did not render");
+      return api;
+    },
+    rerender(epoch: number) {
+      act(() => renderProbe(epoch));
+    },
+  };
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  usePlayerStore.getState().reset();
+  document.body.innerHTML = "";
+});
+
+describe("useTimelineAssetDrop", () => {
+  it("edge-autoscrolls the sole timeline viewport while a supported asset is held", () => {
+    let frame: FrameRequestCallback | null = null;
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((callback) => {
+      frame = callback;
+      return 1;
+    });
+    vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => undefined);
+    const view = renderHarness(vi.fn());
+
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 790, 120)));
+    expect(view.api.isDragOver).toBe(true);
+    expect(frame).not.toBeNull();
+    act(() => frame?.(0));
+    expect(view.scroll.scrollLeft).toBeGreaterThan(0);
+    expect(view.scroll.scrollTop).toBe(0);
+
+    act(() => view.api.clearDropPreview());
+    expect(view.api.isDragOver).toBe(false);
+    act(() => view.root.unmount());
+  });
+
+  it("keeps the drop actor while moving between descendants", () => {
+    const view = renderHarness(vi.fn());
+    const parent = document.createElement("div");
+    const child = document.createElement("div");
+    parent.append(child);
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
+    act(() =>
+      view.api.handleAssetDragLeave({
+        relatedTarget: child,
+        currentTarget: parent,
+      } as unknown as React.DragEvent),
+    );
+    expect(view.api.isDragOver).toBe(true);
+    act(() => view.root.unmount());
+  });
+
+  it("drops once on a model row outside the mounted window and appends below the last row", () => {
+    const onAssetDrop = vi.fn();
+    const view = renderHarness(onAssetDrop);
+    usePlayerStore.getState().setCurrentTime(12.5);
+    view.scroll.scrollTop = view.scroll.scrollHeight - view.scroll.clientHeight;
+    const transfer = assetTransfer(JSON.stringify({ path: "/media/hero.mp4" }));
+
+    act(() => {
+      view.api.handleAssetDragOver(dragEvent(transfer, 400, 239));
+      view.api.handleAssetDrop(dragEvent(transfer, 400, 239));
+    });
+
+    expect(onAssetDrop).toHaveBeenCalledTimes(1);
+    expect(onAssetDrop).toHaveBeenCalledWith("/media/hero.mp4", { start: 12.5, track: 100 });
+    expect(view.api.isDragOver).toBe(false);
+    act(() => view.root.unmount());
+  });
+
+  it("ignores malformed payloads and clears the actor on project reset", () => {
+    const onAssetDrop = vi.fn();
+    const view = renderHarness(onAssetDrop, 1);
+    const transfer = assetTransfer("not-json");
+
+    act(() => view.api.handleAssetDragOver(dragEvent(transfer, 400, 100)));
+    expect(view.api.isDragOver).toBe(true);
+    view.rerender(2);
+    expect(view.api.isDragOver).toBe(false);
+
+    act(() => view.api.handleAssetDrop(dragEvent(transfer, 400, 100)));
+    expect(onAssetDrop).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+
+  it("falls through a malformed asset payload to a valid block payload", () => {
+    const onAssetDrop = vi.fn();
+    const onBlockDrop = vi.fn();
+    const view = renderHarness(onAssetDrop, 1, { onBlockDrop });
+    const transfer: DropTransfer = {
+      types: [TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME],
+      files: [],
+      dropEffect: "none",
+      getData: (type) =>
+        type === TIMELINE_ASSET_MIME
+          ? "not-json"
+          : type === TIMELINE_BLOCK_MIME
+            ? JSON.stringify({ name: "title-card" })
+            : "",
+    };
+
+    act(() => {
+      view.api.handleAssetDragOver(dragEvent(transfer, 400, 100));
+      view.api.handleAssetDrop(dragEvent(transfer, 400, 100));
+    });
+
+    expect(onAssetDrop).not.toHaveBeenCalled();
+    expect(onBlockDrop).toHaveBeenCalledExactlyOnceWith("title-card", { start: 0, track: 0 });
+    act(() => view.root.unmount());
+  });
+
+  it("clears an escaped drag after StrictMode effect replay", () => {
+    const view = renderHarness(vi.fn(), 1, { strict: true });
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
+    expect(view.api.isDragOver).toBe(true);
+
+    act(() => window.dispatchEvent(new Event("dragend")));
+    expect(view.api.isDragOver).toBe(false);
+    act(() => view.root.unmount());
+  });
+});

package/src/player/components/timelineDragDrop.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState, type RefObject } from "react";
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import {
   parseTimelineCompositionPayload,
@@ -7,6 +7,10 @@ import {
 import { usePlayerStore } from "../store/playerStore";
 import { resolveTimelineAssetDrop, type TimelineRowGeometry } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
+import {
+  applyTimelineAutoScrollStep,
+  resolveTimelineAutoScrollLoopAction,
+} from "./timelineEditing";
 
 interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   scrollRef: RefObject<HTMLDivElement | null>;
@@ -15,6 +19,7 @@ interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   trackOrderRef: RefObject<number[]>;
   rowGeometryRef: RefObject<TimelineRowGeometry>;
   contentOrigin: number;
+  sessionEpoch: number;
 }
 
 type TimelinePlacement = { start: number; track: number };
@@ -29,12 +34,22 @@ function applyJsonDropPayload(
   pick: (parsed: Record<string, string | undefined>) => string | undefined,
   apply: (value: string, placement: TimelinePlacement) => void,
   placement: TimelinePlacement,
-): void {
+): boolean {
   try {
     const value = pick(JSON.parse(raw) as Record<string, string | undefined>);
-    if (value) apply(value, placement);
+    if (!value) return false;
+    apply(value, placement);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function invokeDropCallback(callback: () => Promise<void> | void): void {
+  try {
+    void Promise.resolve(callback()).catch(() => undefined);
   } catch {
-    /* ignore malformed drag payloads */
+    // A rejected external producer never keeps a timeline drop actor alive.
   }
 }
 
@@ -43,6 +58,34 @@ function resolveDropStart(usePointerStart: boolean, pointerStart: number): numbe
   return Math.max(0, usePlayerStore.getState().currentTime);
 }
 
+function applyFileDrop(
+  transfer: DataTransfer,
+  onFileDrop: TimelineDropCallbacks["onFileDrop"],
+  placement: TimelinePlacement,
+): boolean {
+  if (!onFileDrop || transfer.files.length === 0) return false;
+  invokeDropCallback(() => onFileDrop(Array.from(transfer.files), placement));
+  return true;
+}
+
+function applyTypedJsonDrop(
+  transfer: DataTransfer,
+  mime: string,
+  field: "name" | "path",
+  apply: ((value: string, placement: TimelinePlacement) => Promise<void> | void) | undefined,
+  placement: TimelinePlacement,
+): boolean {
+  if (!apply || !Array.from(transfer.types).includes(mime)) return false;
+  const payload = transfer.getData(mime);
+  if (!payload) return false;
+  return applyJsonDropPayload(
+    payload,
+    (parsed) => parsed[field],
+    (value, nextPlacement) => invokeDropCallback(() => apply(value, nextPlacement)),
+    placement,
+  );
+}
+
 /**
  * Dropping an asset/file/block onto the timeline places it at the PLAYHEAD —
  * start is the current playhead time, only the track comes from the drop y.
@@ -62,22 +105,84 @@ export function useTimelineAssetDrop({
   onAssetDrop,
   onBlockDrop,
   onCompositionDrop,
+  sessionEpoch,
 }: UseTimelineAssetDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
+  const dragPointerRef = useRef<{ clientX: number; clientY: number; sessionEpoch: number } | null>(
+    null,
+  );
+  const autoScrollRafRef = useRef(0);
+  const activeDropEpochRef = useRef<number | null>(null);
 
-  const handleAssetDragOver = useCallback((e: React.DragEvent) => {
-    const types = Array.from(e.dataTransfer.types);
-    const hasFiles = types.includes("Files");
-    const hasAsset = types.includes(TIMELINE_ASSET_MIME);
-    const hasBlock = types.includes(TIMELINE_BLOCK_MIME);
-    const hasComposition = types.includes(TIMELINE_COMPOSITION_MIME);
-    if (!hasFiles && !hasAsset && !hasBlock && !hasComposition) return;
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "copy";
-    setIsDragOver(true);
+  const stopAutoScroll = useCallback(() => {
+    dragPointerRef.current = null;
+    if (autoScrollRafRef.current) cancelAnimationFrame(autoScrollRafRef.current);
+    autoScrollRafRef.current = 0;
   }, []);
 
-  const clearDropPreview = useCallback(() => setIsDragOver(false), []);
+  const stepAutoScroll = useCallback(
+    function stepAutoScroll() {
+      autoScrollRafRef.current = 0;
+      const pointer = dragPointerRef.current;
+      const scroll = scrollRef.current;
+      if (!pointer || pointer.sessionEpoch !== sessionEpoch || !scroll) return;
+      if (!applyTimelineAutoScrollStep(scroll, pointer.clientX, pointer.clientY)) return;
+      autoScrollRafRef.current = requestAnimationFrame(stepAutoScroll);
+    },
+    [scrollRef, sessionEpoch],
+  );
+
+  const syncAutoScroll = useCallback(
+    (clientX: number, clientY: number) => {
+      dragPointerRef.current = { clientX, clientY, sessionEpoch };
+      const scroll = scrollRef.current;
+      const action = resolveTimelineAutoScrollLoopAction(
+        scroll,
+        clientX,
+        clientY,
+        autoScrollRafRef.current !== 0,
+      );
+      if (action === "stop") {
+        cancelAnimationFrame(autoScrollRafRef.current);
+        autoScrollRafRef.current = 0;
+      } else if (action === "start") {
+        autoScrollRafRef.current = requestAnimationFrame(stepAutoScroll);
+      }
+    },
+    [scrollRef, sessionEpoch, stepAutoScroll],
+  );
+
+  const handleAssetDragOver = useCallback(
+    (e: React.DragEvent) => {
+      const types = Array.from(e.dataTransfer.types);
+      const hasFiles = types.includes("Files");
+      const hasAsset = types.includes(TIMELINE_ASSET_MIME);
+      const hasBlock = types.includes(TIMELINE_BLOCK_MIME);
+      const hasComposition = types.includes(TIMELINE_COMPOSITION_MIME);
+      if (!hasFiles && !hasAsset && !hasBlock && !hasComposition) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      activeDropEpochRef.current = sessionEpoch;
+      setIsDragOver(true);
+      syncAutoScroll(e.clientX, e.clientY);
+    },
+    [sessionEpoch, syncAutoScroll],
+  );
+
+  const clearDropPreview = useCallback(() => {
+    activeDropEpochRef.current = null;
+    stopAutoScroll();
+    setIsDragOver(false);
+  }, [stopAutoScroll]);
+
+  const handleAssetDragLeave = useCallback(
+    (e: React.DragEvent) => {
+      const related = e.relatedTarget;
+      if (related instanceof Node && e.currentTarget.contains(related)) return;
+      clearDropPreview();
+    },
+    [clearDropPreview],
+  );
 
   const resolveDropPlacement = useCallback(
     (clientX: number, clientY: number, usePointerStart = false): TimelinePlacement => {
@@ -110,33 +215,50 @@ export function useTimelineAssetDrop({
   const handleAssetDrop = useCallback(
     (e: React.DragEvent) => {
       e.preventDefault();
-      setIsDragOver(false);
+      const canCommit = activeDropEpochRef.current === sessionEpoch;
+      clearDropPreview();
+      if (!canCommit) return;
       const compositionPayload = parseTimelineCompositionPayload(
         e.dataTransfer.getData(TIMELINE_COMPOSITION_MIME),
       );
       if (compositionPayload && onCompositionDrop) {
         const placement = resolveDropPlacement(e.clientX, e.clientY, true);
-        void onCompositionDrop(compositionPayload.sourcePath, placement);
+        invokeDropCallback(() => onCompositionDrop(compositionPayload.sourcePath, placement));
         return;
       }
       const placement = resolveDropPlacement(e.clientX, e.clientY);
 
-      if (onFileDrop && e.dataTransfer.files.length > 0) {
-        void onFileDrop(Array.from(e.dataTransfer.files), placement);
+      if (applyFileDrop(e.dataTransfer, onFileDrop, placement)) return;
+      if (applyTypedJsonDrop(e.dataTransfer, TIMELINE_ASSET_MIME, "path", onAssetDrop, placement)) {
         return;
       }
-      const assetPayload = e.dataTransfer.getData(TIMELINE_ASSET_MIME);
-      if (assetPayload && onAssetDrop) {
-        applyJsonDropPayload(assetPayload, (p) => p.path, onAssetDrop, placement);
-        return;
-      }
-      const blockPayload = e.dataTransfer.getData(TIMELINE_BLOCK_MIME);
-      if (blockPayload && onBlockDrop) {
-        applyJsonDropPayload(blockPayload, (p) => p.name, onBlockDrop, placement);
-      }
+      applyTypedJsonDrop(e.dataTransfer, TIMELINE_BLOCK_MIME, "name", onBlockDrop, placement);
     },
-    [resolveDropPlacement, onFileDrop, onAssetDrop, onBlockDrop, onCompositionDrop],
+    [
+      clearDropPreview,
+      onAssetDrop,
+      onBlockDrop,
+      onCompositionDrop,
+      onFileDrop,
+      resolveDropPlacement,
+      sessionEpoch,
+    ],
   );
 
-  return { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview };
+  useEffect(() => {
+    window.addEventListener("dragend", clearDropPreview);
+    return () => {
+      window.removeEventListener("dragend", clearDropPreview);
+      clearDropPreview();
+    };
+  }, [clearDropPreview]);
+  useEffect(() => clearDropPreview(), [clearDropPreview, sessionEpoch]);
+
+  return {
+    isDragOver,
+    handleAssetDragOver,
+    handleAssetDragLeave,
+    handleAssetDrop,
+    clearDropPreview,
+  };
 }

package/src/player/components/timelineLaneProps.ts

@@ -55,7 +55,6 @@ export interface TimelineLaneBaseProps {
   setResizingClip: (v: ResizingClipState | null) => void;
   setDraggedClip: (v: DraggedClipState | null) => void;
   setSelectedElementId: (id: string | null) => void;
-  syncClipDragAutoScroll: (x: number, y: number) => void;
   shiftClickClipRef: React.RefObject<{
     element: TimelineElement;
     anchorX: number;

package/src/player/components/timelineMarquee.test.ts

@@ -5,8 +5,11 @@ import {
   isTimelineRulerPress,
   getMarqueeRect,
   getTimelineClipRect,
+  getMarqueeClipCandidates,
   computeMarqueeSelection,
 } from "./timelineMarquee";
+import { createTimelineClipIndex } from "../lib/timelineClipIndex";
+import type { TimelineElement } from "../store/playerStore";
 import {
   GUTTER,
   LANE_H,
@@ -14,6 +17,7 @@ import {
   RULER_H,
   CLIP_Y,
   TRACKS_LEFT_PAD,
+  createTimelineRowGeometry,
   getTimelineRowTop,
 } from "./timelineLayout";
 
@@ -95,9 +99,13 @@ describe("getMarqueeRect", () => {
 
 describe("getTimelineClipRect", () => {
   const trackOrder = [0, 2, 5];
+  const geometry = createTimelineRowGeometry(
+    trackOrder,
+    trackOrder.map(() => TRACK_H),
+  );
 
   it("maps start/duration to x via pps and the track row to y via the shared row→y helper", () => {
-    const rect = getTimelineClipRect({ start: 2, duration: 3, track: 2 }, trackOrder, 100, GUTTER);
+    const rect = getTimelineClipRect({ start: 2, duration: 3, track: 2 }, geometry, 100, GUTTER);
     expect(rect).toEqual({
       left: GUTTER + 200,
       top: getTimelineRowTop(1) + CLIP_Y,
@@ -107,54 +115,48 @@ describe("getTimelineClipRect", () => {
   });
 
   it("places the first visible track below the ruler + top breathing pad", () => {
-    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, 50, GUTTER);
+    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 0 }, geometry, 50, GUTTER);
     expect(rect?.top).toBe(getTimelineRowTop(0) + CLIP_Y);
     expect(rect?.left).toBe(GUTTER);
   });
 
   it("uses the row index in trackOrder, not the raw track number", () => {
-    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 5 }, trackOrder, 50, GUTTER);
+    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 5 }, geometry, 50, GUTTER);
     expect(rect?.top).toBe(getTimelineRowTop(2) + CLIP_Y);
   });
 
   it("uses cumulative tops and the resolved height for an expanded row", () => {
     const rowHeights = [TRACK_H + 2 * LANE_H, TRACK_H, TRACK_H];
+    const expandedGeometry = createTimelineRowGeometry(trackOrder, rowHeights);
     const rect = getTimelineClipRect(
       { start: 0, duration: 1, track: 0 },
-      trackOrder,
+      expandedGeometry,
       50,
       GUTTER,
-      rowHeights,
     );
     expect(rect).toMatchObject({
       top: getTimelineRowTop(0, rowHeights) + CLIP_Y,
-      height: rowHeights[0] - CLIP_Y * 2,
+      height: TRACK_H - CLIP_Y * 2,
     });
     expect(
-      getTimelineClipRect({ start: 0, duration: 1, track: 2 }, trackOrder, 50, GUTTER, rowHeights)
-        ?.top,
+      getTimelineClipRect({ start: 0, duration: 1, track: 2 }, expandedGeometry, 50, GUTTER)?.top,
     ).toBe(getTimelineRowTop(1, rowHeights) + CLIP_Y);
   });
 
   it("enforces the 4px minimum rendered width", () => {
-    const rect = getTimelineClipRect(
-      { start: 0, duration: 0.01, track: 0 },
-      trackOrder,
-      10,
-      GUTTER,
-    );
+    const rect = getTimelineClipRect({ start: 0, duration: 0.01, track: 0 }, geometry, 10, GUTTER);
     expect(rect?.width).toBe(4);
   });
 
   it("returns null for a track that is not displayed or an invalid pps", () => {
     expect(
-      getTimelineClipRect({ start: 0, duration: 1, track: 9 }, trackOrder, 100, GUTTER),
+      getTimelineClipRect({ start: 0, duration: 1, track: 9 }, geometry, 100, GUTTER),
     ).toBeNull();
     expect(
-      getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, 0, GUTTER),
+      getTimelineClipRect({ start: 0, duration: 1, track: 0 }, geometry, 0, GUTTER),
     ).toBeNull();
     expect(
-      getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, NaN, GUTTER),
+      getTimelineClipRect({ start: 0, duration: 1, track: 0 }, geometry, NaN, GUTTER),
     ).toBeNull();
   });
 });
@@ -162,6 +164,10 @@ describe("getTimelineClipRect", () => {
 describe("computeMarqueeSelection", () => {
   // Two visible tracks: row 0 = track 0, row 1 = track 1. pps 100.
   const trackOrder = [0, 1];
+  const rowGeometry = createTimelineRowGeometry(
+    trackOrder,
+    trackOrder.map(() => TRACK_H),
+  );
   const pps = 100;
   const clips = [
     { id: "a", start: 0, duration: 1, track: 0 }, // x [32,132], row 0
@@ -175,7 +181,7 @@ describe("computeMarqueeSelection", () => {
     const marquee = { left: ORIGIN, top: row0Top, width: 50, height: 10 };
     const { ids, primaryId } = computeMarqueeSelection({
       clips,
-      trackOrder,
+      rowGeometry,
       pps,
       contentOrigin: ORIGIN,
       marquee,
@@ -188,7 +194,7 @@ describe("computeMarqueeSelection", () => {
     const marquee = { left: ORIGIN, top: row0Top, width: 60, height: row1Top - row0Top + 5 };
     const { ids } = computeMarqueeSelection({
       clips,
-      trackOrder,
+      rowGeometry,
       pps,
       contentOrigin: ORIGIN,
       marquee,
@@ -200,7 +206,7 @@ describe("computeMarqueeSelection", () => {
     const marquee = { left: ORIGIN + 140, top: row0Top, width: 50, height: 10 };
     const { ids } = computeMarqueeSelection({
       clips,
-      trackOrder,
+      rowGeometry,
       pps,
       contentOrigin: ORIGIN,
       marquee,
@@ -212,7 +218,7 @@ describe("computeMarqueeSelection", () => {
     const marquee = { left: GUTTER + 140, top: row0Top, width: 50, height: 10 };
     const { ids, primaryId } = computeMarqueeSelection({
       clips,
-      trackOrder,
+      rowGeometry,
       pps,
       contentOrigin: GUTTER,
       marquee,
@@ -226,7 +232,7 @@ describe("computeMarqueeSelection", () => {
     const marquee = { left: GUTTER, top: row1Top, width: 100, height: 10 };
     const { ids, primaryId } = computeMarqueeSelection({
       clips,
-      trackOrder,
+      rowGeometry,
       pps,
       contentOrigin: GUTTER,
       marquee,
@@ -240,10 +246,11 @@ describe("computeMarqueeSelection", () => {
     const wide = { left: ORIGIN, top: row0Top, width: 320, height: 10 };
     const narrow = { left: ORIGIN, top: row0Top, width: 80, height: 10 };
     expect(
-      computeMarqueeSelection({ clips, trackOrder, pps, contentOrigin: ORIGIN, marquee: wide }).ids,
+      computeMarqueeSelection({ clips, rowGeometry, pps, contentOrigin: ORIGIN, marquee: wide })
+        .ids,
     ).toEqual(new Set(["a", "b"]));
     expect(
-      computeMarqueeSelection({ clips, trackOrder, pps, contentOrigin: ORIGIN, marquee: narrow })
+      computeMarqueeSelection({ clips, rowGeometry, pps, contentOrigin: ORIGIN, marquee: narrow })
         .ids,
     ).toEqual(new Set(["a"]));
   });
@@ -252,7 +259,7 @@ describe("computeMarqueeSelection", () => {
     const marquee = { left: 0, top: 0, width: 10000, height: 10000 };
     const { ids } = computeMarqueeSelection({
       clips: [{ id: "x", start: 0, duration: 1, track: 7 }],
-      trackOrder,
+      rowGeometry,
       pps,
       contentOrigin: GUTTER,
       marquee,
@@ -260,3 +267,44 @@ describe("computeMarqueeSelection", () => {
     expect(ids).toEqual(new Set());
   });
 });
+
+describe("getMarqueeClipCandidates", () => {
+  it("queries only the intersecting rows and time span", () => {
+    const rowGeometry = createTimelineRowGeometry([0, 1, 2], [TRACK_H, TRACK_H, TRACK_H]);
+    const near: TimelineElement = { id: "near", tag: "div", start: 1, duration: 1, track: 1 };
+    const wrongTime: TimelineElement = {
+      id: "wrong-time",
+      tag: "div",
+      start: 20,
+      duration: 1,
+      track: 1,
+    };
+    const wrongRow: TimelineElement = {
+      id: "wrong-row",
+      tag: "div",
+      start: 1,
+      duration: 1,
+      track: 2,
+    };
+    const clipIndex = createTimelineClipIndex([
+      [0, []],
+      [1, [near, wrongTime]],
+      [2, [wrongRow]],
+    ]);
+
+    expect(
+      getMarqueeClipCandidates({
+        clipIndex,
+        rowGeometry,
+        marquee: {
+          left: ORIGIN + 100,
+          top: getTimelineRowTop(1),
+          width: 100,
+          height: TRACK_H - 1,
+        },
+        pps: 100,
+        contentOrigin: ORIGIN,
+      }),
+    ).toEqual([near]);
+  });
+});