perf(studio): stabilize virtualized timeline drops

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

@@ -245,19 +245,19 @@ export const Timeline = memo(function Timeline({
     sessionEpoch,
   });
 
-  const { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview } =
-    useTimelineAssetDrop({
-      scrollRef,
-      ppsRef,
-      durationRef,
-      trackOrderRef,
-      rowGeometryRef,
-      contentOrigin,
-      onFileDrop: pinnedOnFileDrop,
-      onAssetDrop: pinnedOnAssetDrop,
-      onBlockDrop: pinnedOnBlockDrop,
-      onCompositionDrop: pinnedOnCompositionDrop,
-    });
+  const assetDrop = useTimelineAssetDrop({
+    scrollRef,
+    ppsRef,
+    durationRef,
+    trackOrderRef,
+    rowGeometryRef,
+    contentOrigin,
+    onFileDrop: pinnedOnFileDrop,
+    onAssetDrop: pinnedOnAssetDrop,
+    onBlockDrop: pinnedOnBlockDrop,
+    onCompositionDrop: pinnedOnCompositionDrop,
+    sessionEpoch,
+  });
   const displayLayout = useTimelineDisplayLayout(draggedClip, trackOrder, rowGeometry);
   const resizingElementIds =
     resizingClip?.groupPreview?.map((change) => change.key) ??
@@ -436,11 +436,11 @@ export const Timeline = memo(function Timeline({
   if (!timelineReady || expandedElements.length === 0) {
     return (
       <TimelineEmptyState
-        isDragOver={isDragOver}
+        isDragOver={assetDrop.isDragOver}
         onFileDrop={!!onFileDrop}
-        onDragOver={handleAssetDragOver}
-        onDragLeave={() => clearDropPreview()}
-        onDrop={handleAssetDrop}
+        onDragOver={assetDrop.handleAssetDragOver}
+        onDragLeave={assetDrop.handleAssetDragLeave}
+        onDrop={assetDrop.handleAssetDrop}
       />
     );
   }
@@ -450,7 +450,7 @@ export const Timeline = memo(function Timeline({
       ref={setContainerRef}
       aria-label="Timeline"
       data-timeline-element-count={expandedElements.length}
-      className={`relative border-t select-none h-full overflow-hidden ${isDragOver ? "ring-1 ring-inset ring-studio-accent/60" : ""} ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      className={`relative border-t select-none h-full overflow-hidden ${assetDrop.isDragOver ? "ring-1 ring-inset ring-studio-accent/60" : ""} ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       onMouseMove={updateRazorGuide}
       onMouseLeave={clearRazorGuide}
       style={{
@@ -472,9 +472,9 @@ export const Timeline = memo(function Timeline({
           syncScrollViewport(e.currentTarget, true);
         }}
         {...rowWindow.timelineFocusProps}
-        onDragOver={handleAssetDragOver}
-        onDragLeave={() => clearDropPreview()}
-        onDrop={handleAssetDrop}
+        onDragOver={assetDrop.handleAssetDragOver}
+        onDragLeave={assetDrop.handleAssetDragLeave}
+        onDrop={assetDrop.handleAssetDrop}
         onPointerDown={(e) => {
           // Let interactive controls (keyframe nav/toggle, caret, inputs) handle
           // their own clicks — scrubbing here would preventDefault and eat them.

packages/studio/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());
+  });
+});