@hyperframes/studio 0.8.105 → 0.8.107

package/src/components/editor/gestureHoldsPreviewReload.test.tsx

@@ -0,0 +1,338 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { makeSelection } from "../../hooks/domSelectionTestHarness";
+import { useInlineTextEdit } from "../../hooks/useInlineTextEdit";
+import {
+  makePreview,
+  mountPlayerWithPreview,
+  paintShadow,
+  resetPlayerStore,
+  type TimelinePlayerApi,
+} from "../../player/hooks/timelinePlayerTestHarness";
+import type { DomEditSelection } from "./domEditing";
+import "./domEditOverlayTestMocks";
+import { DomEditOverlay } from "./DomEditOverlay";
+import { PreviewReadOnlyProvider } from "./previewReadOnlyContext";
+import { STUDIO_MANUAL_EDIT_GESTURE_ATTR } from "./manualEditsTypes";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const layout = vi.hoisted(() => ({
+  group: [] as unknown[],
+  rect: { left: 100, top: 100, width: 200, height: 100, editScaleX: 1, editScaleY: 1 },
+}));
+vi.mock("./useDomEditOverlayRects", () => ({
+  useDomEditOverlayRects: () => {
+    const { rect, group } = layout;
+    const groupOverlayItemsRef = { current: group };
+    const noop = () => undefined;
+    return {
+      overlayRect: rect,
+      overlayRectRef: { current: rect },
+      groupOverlayItems: group,
+      groupOverlayItemsRef,
+      hoverRect: null,
+      childRects: [],
+      setOverlayRect: noop,
+      setGroupOverlayItems: noop,
+    };
+  },
+}));
+vi.mock("../../utils/gsapSoftReload", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../utils/gsapSoftReload")>()),
+  ensureMotionPathPluginLoaded: vi.fn(),
+}));
+
+const BOX = '[data-dom-edit-selection-box="true"]';
+const RECT = layout.rect;
+const TWO_LAYERS = '<h1 id="title">Title</h1><p id="sub">Sub</p>';
+
+/** What the server serves: the file as the last commit left it. */
+let file = { title: "", sub: "" };
+const served = (query: string) =>
+  makePreview(
+    `<h1 id="title" style="${file.title}">Title</h1><p id="sub" style="${file.sub}">Sub</p>`,
+    query,
+  );
+
+let overlayRoot: Root;
+let player: ReturnType<typeof mountPlayerWithPreview>;
+
+const marked = (doc: Document) => doc.querySelectorAll(`[${STUDIO_MANUAL_EDIT_GESTURE_ATTR}]`);
+const byId = (iframe: HTMLIFrameElement | null, id: string) =>
+  iframe!.contentDocument!.getElementById(id) as HTMLElement;
+const api = (): TimelinePlayerApi => player.getApi();
+
+function pointer(target: Element, type: string, x: number, y: number) {
+  const init = { bubbles: true, cancelable: true, button: 0, pointerId: 1, clientX: x, clientY: y };
+  act(() => void target.dispatchEvent(new PointerEvent(type, init)));
+}
+
+/** The real player with a two-layer preview, and the real overlay editing it. */
+function mountEditor(
+  group: boolean,
+  saving: { landed: Promise<void> } = { landed: Promise.resolve() },
+) {
+  file = { title: "", sub: "" };
+  const live = makePreview(TWO_LAYERS);
+  player = mountPlayerWithPreview(live);
+  const selections = ["title", "sub"].map((id) => makeSelection(id, byId(live, id)));
+  for (const s of selections) s.capabilities.canApplyManualRotation = true;
+  const saveStyle = (sel: DomEditSelection | null, style: string) =>
+    saving.landed.then(() => void (file = { ...file, [sel?.id ?? "title"]: style }));
+  layout.group = group
+    ? selections.map((s) => ({ key: s.id, selection: s, element: s.element, rect: RECT }))
+    : [];
+  const write = (sel: DomEditSelection, next: { x: number; y: number }) =>
+    saveStyle(sel, `translate: ${next.x}px ${next.y}px`);
+  const onPathOffsetCommit = vi.fn(write);
+  const onGroupPathOffsetCommit = vi.fn(
+    async (updates: { selection: DomEditSelection; next: { x: number; y: number } }[]) => {
+      for (const { selection, next } of updates) await write(selection, next);
+    },
+  );
+  const host = document.body.appendChild(document.createElement("div"));
+  overlayRoot = createRoot(host);
+  const render = (readOnly: boolean) =>
+    act(() =>
+      overlayRoot.render(
+        <PreviewReadOnlyProvider readOnly={readOnly}>
+          <DomEditOverlay
+            iframeRef={api().iframeRef}
+            activeCompositionPath={null}
+            selection={group ? null : selections[0]!}
+            groupSelections={group ? selections : []}
+            hoverSelection={null}
+            onCanvasMouseDown={() => undefined}
+            onCanvasPointerMove={() => Promise.resolve(null)}
+            onCanvasPointerLeave={() => undefined}
+            onSelectionChange={() => undefined}
+            onBlockedMove={() => undefined}
+            onPathOffsetCommit={onPathOffsetCommit}
+            onGroupPathOffsetCommit={onGroupPathOffsetCommit}
+            onBoxSizeCommit={(sel, size) => saveStyle(sel, `width: ${size.width}px`)}
+            onRotationCommit={(sel, next) => saveStyle(sel, `rotate: ${next.angle}deg`)}
+            onStyleCommit={(property, value) => saveStyle(selections[0]!, `${property}: ${value}`)}
+          />
+        </PreviewReadOnlyProvider>,
+      ),
+    );
+  render(false);
+  const overlay = host.querySelector('[aria-label="Composition canvas"]') as HTMLElement;
+  return { live, overlay, box: overlay.querySelector(BOX)!, onPathOffsetCommit, render };
+}
+
+/** A reload whose shadow paints while the gesture is still live. */
+async function reloadMidGesture() {
+  act(() => api().refreshPlayer());
+  const shadow = served("?_t=1");
+  const gen = await paintShadow(api, shadow);
+  return { shadow, gen };
+}
+
+async function settle() {
+  await act(async () => {
+    for (let tick = 0; tick < 10; tick++) await Promise.resolve();
+  });
+}
+
+beforeEach(() => {
+  HTMLElement.prototype.setPointerCapture = () => undefined;
+  HTMLElement.prototype.releasePointerCapture = () => undefined;
+});
+
+afterEach(() => {
+  act(() => overlayRoot?.unmount());
+  act(() => player?.root.unmount());
+  layout.group = [];
+  document.body.innerHTML = "";
+  resetPlayerStore();
+});
+
+describe("a reload during a drag", () => {
+  it.each([
+    ["one layer", false],
+    ["a group", true],
+  ])(
+    "that paints before the drop of %s waits, then shows the drop from a fresh load",
+    async (_, group) => {
+      const { live, overlay, box } = mountEditor(group);
+      pointer(box, "pointerdown", 150, 150);
+      pointer(overlay, "pointermove", 170, 160);
+      pointer(overlay, "pointermove", 190, 170);
+      const held = await reloadMidGesture();
+      expect(api().iframeRef.current, "promoted under the pointer").toBe(live);
+
+      pointer(overlay, "pointerup", 190, 170);
+      await settle();
+      expect(byId(live, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+      expect(file.title).toBe("translate: 40px 20px");
+      if (group) expect(file.sub).toBe("translate: 40px 20px");
+      expect(marked(live.contentDocument!)).toHaveLength(0);
+      expect(api().iframeRef.current, "the shadow loaded before the drop").toBe(live);
+
+      const fresh = served("?_t=2");
+      expect(await paintShadow(api, fresh)).toBeGreaterThan(held.gen);
+      expect(api().iframeRef.current).toBe(fresh);
+      expect(byId(fresh, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+      if (group) expect(byId(fresh, "sub").style.getPropertyValue("translate")).toBe("40px 20px");
+    },
+  );
+
+  const handle = (overlay: HTMLElement, selector: string) => overlay.querySelector(selector)!;
+  const corner = (overlay: HTMLElement) =>
+    [...overlay.querySelectorAll<HTMLElement>("div.h-4.w-4")].reduce((a, b) =>
+      parseFloat(b.style.left) + parseFloat(b.style.top) >
+      parseFloat(a.style.left) + parseFloat(a.style.top)
+        ? b
+        : a,
+    );
+  // Each edit presses at `from`, drags to `to`, and releases on `on`.
+  const edits = {
+    move: (o: HTMLElement) => ({ press: handle(o, BOX), on: o, from: [150, 150], to: [190, 170] }),
+    resize: (o: HTMLElement) => ({ press: corner(o), on: o, from: [300, 200], to: [340, 220] }),
+    rotate: (o: HTMLElement) => ({
+      press: handle(o, '[aria-label="Rotate selection"]'),
+      on: o,
+      from: [200, 80],
+      to: [270, 150],
+    }),
+    crop: (o: HTMLElement) => {
+      const edge = handle(o, '[aria-label="Crop left"]');
+      return { press: edge, on: edge, from: [100, 150], to: [140, 150] };
+    },
+  };
+
+  function drag(edit: { press: Element; on: Element; from: number[]; to: number[] }) {
+    pointer(edit.press, "pointerdown", edit.from[0]!, edit.from[1]!);
+    pointer(edit.on, "pointermove", edit.to[0]!, edit.to[1]!);
+  }
+
+  it.each(Object.keys(edits) as (keyof typeof edits)[])(
+    "that paints after a %s shows it from a fresh load, not the file before it",
+    async (kind) => {
+      const { live, overlay } = mountEditor(false);
+      const edit = edits[kind](overlay);
+      drag(edit);
+      act(() => api().refreshPlayer());
+      const beforeDrop = served("?_t=1");
+      pointer(edit.on, "pointerup", edit.to[0]!, edit.to[1]!);
+      await settle();
+      expect(file.title, "the edit saved").not.toBe("");
+
+      const requested = await paintShadow(api, beforeDrop);
+      expect(api().iframeRef.current, "the file before the edit").toBe(live);
+      const fresh = served("?_t=2");
+      expect(await paintShadow(api, fresh)).toBeGreaterThan(requested);
+      expect(byId(fresh, "title").getAttribute("style")).toBe(file.title);
+    },
+  );
+
+  it("requested while the drop is still saving shows the drop from a fresh load", async () => {
+    let land: () => void = () => {};
+    const { live, overlay } = mountEditor(false, { landed: new Promise((r) => (land = r)) });
+    const edit = edits.move(overlay);
+    drag(edit);
+    pointer(edit.on, "pointerup", edit.to[0]!, edit.to[1]!);
+    await settle();
+    act(() => api().refreshPlayer());
+    const beforeSave = served("?_t=1");
+    await act(async () => land());
+    await settle();
+    expect(file.title).toBe("translate: 40px 20px");
+
+    const requested = await paintShadow(api, beforeSave);
+    expect(api().iframeRef.current, "the file before the save").toBe(live);
+    const fresh = served("?_t=2");
+    expect(await paintShadow(api, fresh)).toBeGreaterThan(requested);
+    expect(byId(fresh, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+  });
+});
+
+type Editor = ReturnType<typeof mountEditor>;
+
+describe("every way a drag ends without a drop clears its mark and promotes the held reload", () => {
+  it.each([
+    ["pointercancel", (e: Editor) => pointer(e.overlay, "pointercancel", 0, 0)],
+    ["lostpointercapture", (e: Editor) => pointer(e.box, "lostpointercapture", 0, 0)],
+    ["window blur", () => act(() => void window.dispatchEvent(new Event("blur")))],
+    ["a switch to read-only", (e: Editor) => e.render(true)],
+    ["overlay unmount", () => act(() => overlayRoot.unmount())],
+  ])("%s", async (_, end) => {
+    const editor = mountEditor(false);
+    pointer(editor.box, "pointerdown", 150, 150);
+    pointer(editor.overlay, "pointermove", 190, 170);
+    expect(marked(editor.live.contentDocument!)).toHaveLength(1);
+    const held = await reloadMidGesture();
+    expect(api().iframeRef.current).toBe(editor.live);
+
+    end(editor);
+    await settle();
+    expect(marked(editor.live.contentDocument!)).toHaveLength(0);
+    expect(byId(editor.live, "title").style.getPropertyValue("translate")).not.toBe("40px 20px");
+    expect(editor.onPathOffsetCommit).not.toHaveBeenCalled();
+    expect(api().iframeRef.current, "nothing was saved, so the held copy is current").toBe(
+      held.shadow,
+    );
+  });
+
+  it.each([
+    ["one layer", false],
+    ["a group", true],
+  ])(
+    "a press on %s that throws before the drag is armed leaves no mark behind",
+    async (_, group) => {
+      const editor = mountEditor(group);
+      HTMLElement.prototype.setPointerCapture = () => {
+        throw new Error("capture refused");
+      };
+      const swallow = (event: ErrorEvent) => event.preventDefault();
+      window.addEventListener("error", swallow);
+      try {
+        pointer(editor.box, "pointerdown", 150, 150);
+      } catch {
+        // React may rethrow the handler's error; either way the mark must be gone.
+      } finally {
+        window.removeEventListener("error", swallow);
+      }
+      expect(marked(editor.live.contentDocument!)).toHaveLength(0);
+      const { shadow } = await reloadMidGesture();
+      expect(api().iframeRef.current).toBe(shadow);
+    },
+  );
+});
+
+describe("an inline text edit", () => {
+  it("holds a reload while open, and the reload after it shows the saved text", async () => {
+    const live = makePreview(TWO_LAYERS);
+    player = mountPlayerWithPreview(live);
+    let land: () => void = () => {};
+    const onCommit = vi.fn(() => new Promise<void>((resolve) => (land = resolve)));
+    let controls: ReturnType<typeof useInlineTextEdit> | null = null;
+    function Editor() {
+      controls = useInlineTextEdit({ onCommit });
+      return null;
+    }
+    overlayRoot = createRoot(document.body.appendChild(document.createElement("div")));
+    act(() => overlayRoot.render(<Editor />));
+    act(() => void controls!.start(byId(live, "title")));
+    const held = await reloadMidGesture();
+    expect(api().iframeRef.current).toBe(live);
+
+    act(() => controls!.commit());
+    await settle();
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(marked(live.contentDocument!), "closed, though the save is still out").toHaveLength(0);
+    expect(api().iframeRef.current, "the held copy predates the text").toBe(live);
+    expect(api().previewSlots.find((slot) => slot.role === "shadow")?.gen).toBe(held.gen);
+
+    await act(async () => land());
+    await settle();
+    const afterSave = served("?_t=2");
+    expect(await paintShadow(api, afterSave)).toBeGreaterThan(held.gen);
+    expect(api().iframeRef.current).toBe(afterSave);
+  });
+});

package/src/components/editor/gsapAnimatesProperty.ts

@@ -1,3 +1,6 @@
+export const gsapRendersTransform = (el: Element) =>
+  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
+
 /**
  * Checks whether GSAP actively animates one or more CSS/GSAP properties on
  * the given element by inspecting all registered `__timelines`.

package/src/components/editor/manualEdits.test.ts

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { describe, expect, it, vi } from "vitest";
 import { Window } from "happy-dom";
 import {
@@ -285,7 +286,7 @@ describe("studio manual edits", () => {
     expect(set).not.toHaveBeenCalled();
     expect(tickerTick).not.toHaveBeenCalled();
 
-    beginStudioManualEditGesture(card);
+    beginStudioManualEditGesture(card, "move");
     applyStudioPathOffsetDraft(card, { x: 35, y: -6 });
 
     expect(readStudioPathOffset(card)).toEqual({ x: 35, y: -6 });
@@ -395,8 +396,8 @@ describe("studio manual edits", () => {
     const card = document.getElementById("card") as HTMLElement;
 
     applyStudioPathOffset(card, { x: 40, y: 24 });
-    const firstToken = beginStudioManualEditGesture(card);
-    const secondToken = beginStudioManualEditGesture(card);
+    const firstToken = beginStudioManualEditGesture(card, "move");
+    const secondToken = beginStudioManualEditGesture(card, "move");
     endStudioManualEditGesture(card, firstToken);
 
     // Gesture still active — offset should remain

package/src/components/editor/manualEditsDom.ts

@@ -35,20 +35,76 @@ import {
 import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
+import { BOX_SIZE_STYLE_PROPS } from "./manualEditsDomPatches";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
 let studioManualEditGestureId = 0;
 
-export function beginStudioManualEditGesture(element: HTMLElement): string {
+export type StudioGestureDraws = "move" | "resize" | "rotate" | "edit";
+const MOVE_DRAWS = ["translate", STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP];
+const GESTURE_DRAWS: Record<StudioGestureDraws, readonly string[]> = {
+  move: MOVE_DRAWS,
+  resize: [...MOVE_DRAWS, STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP, ...BOX_SIZE_STYLE_PROPS],
+  rotate: ["rotate", "transform", "transform-origin", "display", STUDIO_ROTATION_PROP],
+  edit: [],
+};
+
+export function beginStudioManualEditGesture(
+  element: HTMLElement,
+  draws: StudioGestureDraws,
+): string {
   studioManualEditGestureId += 1;
-  const token = `gesture-${studioManualEditGestureId}`;
+  const token = `gesture-${studioManualEditGestureId}:${draws}`;
   element.setAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR, token);
   return token;
 }
 
+const GESTURE_ENDED = "hf-manual-edit-gesture-ended";
+
 export function endStudioManualEditGesture(element: HTMLElement, token?: string): void {
   if (token && element.getAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR) !== token) return;
+  if (!element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR)) return;
   element.removeAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
+  const doc = element.ownerDocument;
+  doc.dispatchEvent(new (doc.defaultView?.Event ?? Event)(GESTURE_ENDED));
+}
+
+export function isStudioManualEditGestureLiveIn(doc: Document): boolean {
+  return doc.querySelector(`[${STUDIO_MANUAL_EDIT_GESTURE_ATTR}]`) !== null;
+}
+
+/** Runs `run` once the last gesture in `doc` ends; the returned function stops waiting. */
+export function afterStudioManualEditGestures(doc: Document, run: () => void): () => void {
+  const onEnded = () => {
+    if (isStudioManualEditGestureLiveIn(doc)) return;
+    stop();
+    run();
+  };
+  const stop = () => doc.removeEventListener(GESTURE_ENDED, onEnded);
+  doc.addEventListener(GESTURE_ENDED, onEnded);
+  return stop;
+}
+
+const gestureSaves = new WeakMap<Document, number>();
+
+export function studioManualEditSavesIn(doc: Document): number {
+  return gestureSaves.get(doc) ?? 0;
+}
+
+/** Runs a gesture's save, counted as it starts and as it settles: a reload requested before shows the old file. */
+export function countStudioManualEditSave<R>(element: HTMLElement, save: () => R): R {
+  const doc = element.ownerDocument;
+  const count = () => void gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  count();
+  const result = save();
+  void Promise.resolve(result).then(count, count);
+  return result;
+}
+
+export function studioGestureDraws(element: Element): readonly string[] | null {
+  const token = element.getAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
+  if (token === null) return null;
+  return GESTURE_DRAWS[token.split(":")[1] as StudioGestureDraws] ?? [];
 }
 
 function isStudioManualEditGestureActive(element: HTMLElement): boolean {

package/src/components/editor/manualEditsDomPatches.ts

@@ -1,4 +1,5 @@
 import type { PatchOperation } from "../../utils/sourcePatcher";
+import { gsapRendersTransform } from "./gsapAnimatesProperty";
 import {
   STUDIO_OFFSET_X_PROP,
   STUDIO_OFFSET_Y_PROP,
@@ -127,7 +128,10 @@ const BOX_SIZE_ORIG_ATTRS: ReadonlyArray<[string, string]> = [
 export function buildBoxSizePatches(element: HTMLElement): PatchOperation[] {
   const ops: PatchOperation[] = [];
   collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
-  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
+  const withoutGsapScaleMask = gsapRendersTransform(element)
+    ? BOX_SIZE_STYLE_PROPS.filter((prop) => prop !== "scale")
+    : BOX_SIZE_STYLE_PROPS;
+  collectInlineStyleOps(element, withoutGsapScaleMask, ops);
   ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
   collectAttributeOps(
     element,

package/src/components/editor/manualOffsetDrag.ts

@@ -356,7 +356,10 @@ export function createManualOffsetDragMember(input: {
   }
 
   const initialPathOffset = captureStudioPathOffset(input.element);
-  const gestureToken = beginStudioManualEditGesture(input.element);
+  const gestureToken = beginStudioManualEditGesture(
+    input.element,
+    input.gesture === "resize" ? "resize" : "move",
+  );
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
     scaleX: input.rect.editScaleX,
     scaleY: input.rect.editScaleY,

package/src/components/editor/marqueeCommit.test.tsx

@@ -1,10 +1,20 @@
 // @vitest-environment happy-dom
 import { act, useRef } from "react";
 import type { Root } from "react-dom/client";
-import { afterEach, beforeEach, expect, it } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
 import { useMarqueeGestures } from "./marqueeCommit";
 
+// Layout stands in for a real preview: every element is visible and sits at the band's start.
+vi.mock("./domEditingElement", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditingElement")>()),
+  isElementComputedVisible: () => true,
+}));
+vi.mock("./domEditOverlayGeometry", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditOverlayGeometry")>()),
+  toVisibleOverlayRect: () => ({ left: 10, top: 10, width: 40, height: 40 }),
+}));
+
 installReactActEnvironment();
 HTMLElement.prototype.setPointerCapture ??= () => {};
 HTMLElement.prototype.releasePointerCapture ??= () => {};
@@ -82,3 +92,61 @@ it("an escape with no band in flight still reaches the host", () => {
   expect(event.defaultPrevented).toBe(false);
   expect(hostEscapes).toHaveLength(1);
 });
+
+it("a reload promoted mid-band selects from the preview on screen, not the retired one", async () => {
+  const preview = () => {
+    const iframe = document.createElement("iframe");
+    const doc = document.implementation.createHTMLDocument("preview");
+    doc.body.innerHTML = '<div data-composition-id="main"><h1 id="title">Title</h1></div>';
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    return iframe;
+  };
+  const [retired, live] = [preview(), preview()];
+  const picked: HTMLElement[][] = [];
+  const iframeRef = { current: retired as HTMLIFrameElement | null };
+  function Band() {
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const marquee = useMarqueeGestures({
+      iframeRef,
+      overlayRef,
+      activeCompositionPathRef: useRef<string | null>("index.html"),
+      onMarqueeSelectRef: useRef(() => undefined),
+      resolveHits: async (elements: HTMLElement[]) => {
+        picked.push(elements);
+        return [];
+      },
+    });
+    return (
+      <div
+        ref={overlayRef}
+        data-band-overlay
+        onPointerDown={marquee.begin}
+        onPointerMove={marquee.onPointerMove}
+        onPointerUp={marquee.onPointerUp}
+      />
+    );
+  }
+  const band = mountReactHarness(<Band />);
+  const fire = (type: string, x: number, y: number) =>
+    act(() => {
+      document.querySelector("[data-band-overlay]")!.dispatchEvent(
+        new PointerEvent(type, {
+          bubbles: true,
+          button: 0,
+          pointerId: 1,
+          clientX: x,
+          clientY: y,
+        }),
+      );
+    });
+  try {
+    fire("pointerdown", 0, 0);
+    fire("pointermove", 120, 90);
+    iframeRef.current = live;
+    await act(async () => fire("pointerup", 120, 90));
+    expect(picked.at(-1)?.length).toBeGreaterThan(0);
+    for (const element of picked.at(-1)!) expect(element.ownerDocument).toBe(live.contentDocument);
+  } finally {
+    act(() => band.unmount());
+  }
+});

package/src/components/editor/marqueeCommit.ts

@@ -159,7 +159,12 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       const overlay = deps.overlayRef.current;
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
-      const candidates = candidatesRef.current ?? collectMarqueeCandidates(iframe, overlay, acp);
+      const cached = candidatesRef.current;
+      const measuredOnScreen = cached?.every(
+        (hit) => hit.element.ownerDocument === iframe.contentDocument,
+      );
+      const candidates =
+        cached && measuredOnScreen ? cached : collectMarqueeCandidates(iframe, overlay, acp);
       const elements = hitsWithin(rect, candidates).map((hit) => hit.element);
       const resolveHits = deps.resolveHits;
       const picks = resolveHits