@hyperframes/studio 0.8.124 → 0.8.126

package/src/hooks/gsapScriptCommitTypes.ts

@@ -2,6 +2,7 @@ import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { PublishSdkSession } from "../utils/sdkCutover";
+import type { StudioEditInFlight } from "../utils/studioPendingEdits";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 import type { KeyframeUsageAction } from "../utils/keyframeUsage";
 
@@ -47,6 +48,7 @@ export interface CommitMutationOptions {
   /** Carries a deferred write not yet on screen (no patch, or a missed one) to the final render. */
   previewFallbackLatch?: { pending: boolean };
   beforeReload?: () => void;
+  pendingEdit?: StudioEditInFlight;
   /**
    * Serialize this commit against others sharing the same key. Used to chain
    * per-animationId GSAP meta updates. Every commit independently takes the

package/src/hooks/gsapShared.ts

@@ -3,6 +3,7 @@
  * Centralises duplicated interfaces, constants, and small utilities
  * to reduce drift risk.
  */
+import { isHtmlElement } from "@hyperframes/core/runtime/dom-realm";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import {
@@ -223,7 +224,7 @@ function structuralSelector(element: Element): string | null {
   const parts: string[] = [];
   for (let node: Element | null = element; node; node = node.parentElement) {
     if (node !== element) {
-      const id = node instanceof HTMLElement ? node.id : "";
+      const id = isHtmlElement(node) ? node.id : "";
       const hfId = node.getAttribute("data-hf-id");
       if (id) {
         parts.unshift(idSelector(id));

package/src/hooks/gsapShared.writeTarget.test.ts

@@ -110,6 +110,16 @@ describe("writeTargetSelector", () => {
     expect(writeTargetSelector(selection)).toBe("#scene > div:nth-child(2)");
   });
 
+  it("anchors on an ancestor's id in the preview, whichever window built its nodes", () => {
+    const frame = document.body.appendChild(document.createElement("iframe"));
+    const doc = frame.contentDocument!;
+    doc.body.innerHTML = `<div id="scene"><div></div><div></div></div>`;
+    const el = doc.querySelectorAll<HTMLElement>("#scene > div")[1]!;
+    const selection = { ...stableSelectionFor(el), selector: "div[unclosed" } as DomEditSelection;
+
+    expect(writeTargetSelector(selection)).toBe("#scene > div:nth-child(2)");
+  });
+
   it("returns null when a live DOM is present and no rung addresses one element", () => {
     document.body.innerHTML = `<div id="scene"><div class="group"></div><div class="group"></div></div>`;
     const el = document.querySelectorAll<HTMLElement>(".group")[1]!;

package/src/hooks/intersectionObserverTestUtils.ts

@@ -0,0 +1,16 @@
+// Test-only IntersectionObserver stand-in: everything observed is reported near the screen, asynchronously.
+export function NearScreenIntersectionObserver(callback: IntersectionObserverCallback) {
+  const observer = {
+    observe(target: Element) {
+      queueMicrotask(() =>
+        callback(
+          [{ isIntersecting: true, target } as IntersectionObserverEntry],
+          observer as unknown as IntersectionObserver,
+        ),
+      );
+    },
+    unobserve() {},
+    disconnect() {},
+  };
+  return observer;
+}

package/src/hooks/resizeObserverTestUtils.ts

@@ -1,14 +1,21 @@
 // Test-only ResizeObserver stand-in: a test delivers a size by hand with `reportResize`.
 let resizeCallback: ResizeObserverCallback | null = null;
+let observed: Element | null = null;
 
 export function MockResizeObserver(callback: ResizeObserverCallback) {
   resizeCallback = callback;
-  return { observe() {}, disconnect() {}, unobserve() {} };
+  return {
+    observe(target: Element) {
+      observed = target;
+    },
+    disconnect() {},
+    unobserve() {},
+  };
 }
 
 export function reportResize(width: number, height: number): void {
   resizeCallback!(
-    [{ contentRect: { width, height } } as ResizeObserverEntry],
+    [{ contentRect: { width, height }, target: observed } as ResizeObserverEntry],
     {} as ResizeObserver,
   );
 }

package/src/hooks/timelineEditingHelpers.ts

@@ -1,3 +1,4 @@
+import { isHtmlElement } from "@hyperframes/core/runtime/dom-realm";
 import { type TimelineElement, usePlayerStore } from "../player/store/playerStore";
 import { toAuthoredStart } from "../player/store/timelineElement";
 import {
@@ -35,14 +36,6 @@ import {
 } from "../components/editor/domEditingElement";
 export { deleteSelectedKeyframes } from "./deleteSelectedKeyframes";
 export { readFileContent };
-function isHTMLElement(element: Element | null): element is HTMLElement {
-  if (!element) return false;
-  // Use the element's OWN realm's HTMLElement: timeline clips live in the preview
-  // iframe, and cross-realm `element instanceof HTMLElement` (main window) is
-  // always false — which silently dropped every timeline z-index commit.
-  const Ctor = element.ownerDocument?.defaultView?.HTMLElement ?? globalThis.HTMLElement;
-  return element instanceof Ctor;
-}
 /**
  * Resolve a timeline vertical move to a z-index stacking reorder and commit it
  * through the shared layers-panel reorder path. Reads live sibling z-index from
@@ -96,7 +89,7 @@ export function applyTimelineStackingReorder(input: {
           input.activeCompPath,
         )
       : null;
-    if (!isHTMLElement(element)) return Promise.resolve();
+    if (!isHtmlElement(element)) return Promise.resolve();
     if (getElementZIndex(element) === change.zIndex) continue;
     commitEntries.push({
       element,

package/src/hooks/useGsapAwareEditing.groupPlan.test.tsx

@@ -6,6 +6,10 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/domEditOverlayGestures";
 import { usePlayerStore } from "../player/store/playerStore";
+import {
+  beginStudioPendingEdit,
+  paintBackNewestStudioPendingEdit,
+} from "../utils/studioPendingEdits";
 import { trackStudioEditBlocked } from "../utils/studioSaveDiagnostics";
 import { GSAP_EDIT_BLOCK_COPY } from "./gsapEditOutcome";
 import { mountGsapAwareEditing } from "./useGsapAwareEditing.testHelpers";
@@ -65,7 +69,10 @@ function mountGroup(animations: GsapAnimation[]) {
     batch: vi.fn().mockResolvedValue(undefined),
   });
   const showToast = vi.fn();
-  const stageElementPositionOffset = vi.fn(() => ({ save: vi.fn(), rollback: vi.fn() }));
+  const stageElementPositionOffset = vi.fn((selection: DomEditSelection) => {
+    selection.element.style.setProperty("translate", "30px 0px");
+    return { save: vi.fn().mockResolvedValue(undefined), rollback: vi.fn() };
+  });
   const { editing, root } = mountGsapAwareEditing({
     gsapCommitMutation: commitMutation,
     activeCompPath: "index.html",
@@ -158,3 +165,24 @@ describe("a group drag plans every member before its first write", () => {
     act(() => h.root.unmount());
   });
 });
+
+it("keeps a member it moves on its own CSS undone when undo painted the group back", async () => {
+  const h = mountGroup(["b", "c"].map((id) => positionTween(id)));
+  const plain = h.elements[0]!;
+  const edit = beginStudioPendingEdit(() => {
+    const shown = plain.getAttribute("style") ?? "";
+    plain.setAttribute("style", "");
+    return () => plain.setAttribute("style", shown);
+  });
+  const saved = edit.adopt(() =>
+    h.groupCommit(h.updates.map((u, i) => (i === 0 ? { ...u, plainTranslate: true } : u))),
+  );
+  edit.settle(saved);
+  const shown = paintBackNewestStudioPendingEdit();
+
+  await act(() => saved);
+  expect(plain.getAttribute("style")).toBe("");
+  shown!.showAgain();
+  expect(plain.getAttribute("style")).toContain("translate: 30px 0px");
+  act(() => h.root.unmount());
+});

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -423,6 +423,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       expect.any(Function),
       expect.any(Function),
       undefined,
+      expect.any(Function),
     );
     act(() => h.root.unmount());
   });

package/src/hooks/useGsapAwareEditing.ts

@@ -169,8 +169,10 @@ export function useGsapAwareEditing({
             modifiers,
           );
           await saveMove(outcome, async () => {
-            const result = await stageElementPositionOffset(selection, next, false).save();
-            writes.recordDomResult(result);
+            const staged = writes.drawKeepingUndone(() =>
+              stageElementPositionOffset(selection, next, false),
+            );
+            writes.recordDomResult(await staged.save());
           });
           return writes.finish();
         } catch (error) {
@@ -258,11 +260,8 @@ export function useGsapAwareEditing({
           // Saved after the size, under its undo key, so the two are one step.
           await saveMove(dragOutcome, async () => {
             const plainAfterSettle = editsPlainCss(selection.element, "move");
-            anchorMove = stageElementPositionOffset(
-              selection,
-              offset,
-              plainAfterSettle,
-              coalesceKey,
+            anchorMove = writes.drawKeepingUndone(() =>
+              stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey),
             );
           });
         }
@@ -270,17 +269,20 @@ export function useGsapAwareEditing({
       await runGestureTransaction({
         element: selection.element,
         label: "Resize layer",
+        draw: writes.drawKeepingUndone,
         settle: () => {
           // Scale resize settles its center-scale residual after the scale commit
           // renders. Width/height can settle its anchored position immediately.
           if (!offset || scaleRoute || !selector) return;
-          const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
-            x: 0,
-            y: 0,
-          };
-          const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
-          logResize("sync-settle", { gsapPos, offset, newX, newY });
-          setElementGsapPosition(selection.element, newX, newY);
+          writes.drawKeepingUndone(() => {
+            const gsapPos = readGsapPositionFromIframe(previewIframeRef.current, selector) ?? {
+              x: 0,
+              y: 0,
+            };
+            const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
+            logResize("sync-settle", { gsapPos, offset, newX, newY });
+            setElementGsapPosition(selection.element, newX, newY);
+          });
         },
         persist: async (commit, coalesceKey) => {
           if (writes.commit) {
@@ -294,16 +296,13 @@ export function useGsapAwareEditing({
                 commitMutation,
                 makeFetchFallback(selection),
                 offset,
+                writes.drawKeepingUndone,
               );
               assertGsapEditPersisted(outcome);
               // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.
               if (outcome.status === "element-size") {
-                const result = await handleDomBoxSizeCommit(
-                  selection,
-                  next,
-                  undefined,
-                  undefined,
-                  coalesceKey,
+                const result = await writes.drawKeepingUndone(() =>
+                  handleDomBoxSizeCommit(selection, next, undefined, undefined, coalesceKey),
                 );
                 writes.recordDomResult(result);
               } else cropUndoKey = coalesceKey;
@@ -332,11 +331,8 @@ export function useGsapAwareEditing({
           writes.recordDomResult(anchorResult);
           // Only now is the size live for every caller, drag or not.
           if (cropUndoKey) {
-            const cropResult = await saveCropResize(
-              stageCrop,
-              selection,
-              commitPositionPatchToHtml,
-              cropUndoKey,
+            const cropResult = await writes.drawKeepingUndone(() =>
+              saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey!),
             );
             writes.recordDomResult(cropResult);
           }

package/src/hooks/useGsapAwareGroupMove.ts

@@ -123,12 +123,10 @@ export function useGsapAwareGroupMove({
         renderOnCommit = index === lastScriptWrite;
         const plain = offsetMembers.get(selection);
         if (plain !== undefined) {
-          const result = await stageElementPositionOffset(
-            selection,
-            next,
-            plain,
-            coalesceKey,
-          ).save();
+          const staged = writes.drawKeepingUndone(() =>
+            stageElementPositionOffset(selection, next, plain, coalesceKey),
+          );
+          const result = await staged.save();
           writes.recordDomResult(result);
           continue;
         }

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -38,7 +38,12 @@ import type {
 import { persistSdkSerialize } from "../utils/sdkCutover";
 import { jsonResponse } from "./fetchStubTestUtils";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
-import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
+import {
+  beginStudioPendingEdit,
+  hasStudioPendingEdits,
+  paintBackNewestStudioPendingEdit,
+} from "../utils/studioPendingEdits";
+import { observeGsapGesture } from "./gsapGestureOutcome";
 
 // ── applyPreviewSync (pure preview-sync decision) ────────────────────────────
 
@@ -490,6 +495,42 @@ describe("a GSAP script commit", () => {
     await act(async () => void (await committed));
     expect(hasStudioPendingEdits()).toBe(false);
   });
+
+  it("a gesture's write after an await is still its edit, and once undo paints that edit back it saves without drawing it", async () => {
+    applySoftReload.mockReturnValue("applied");
+    let respond!: () => void;
+    const body: MutationResult = { ok: true, changed: true, after: "AFTER", scriptText: "SCRIPT" };
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(
+        () =>
+          new Promise((resolve) => {
+            respond = () => resolve({ ok: true, json: async () => body } as unknown as Response);
+          }),
+      ),
+    );
+    const deps = renderCommitHook();
+    const edit = beginStudioPendingEdit(() => () => undefined);
+    const saved = edit.adopt(async () => {
+      const writes = observeGsapGesture(deps.api.commitMutation);
+      await Promise.resolve();
+      return writes.commit!(selection, { x: 10 }, { label: "Move layer", softReload: true });
+    });
+    edit.settle(saved);
+    await vi.waitFor(() => expect(fetch).toHaveBeenCalled());
+
+    const shown = paintBackNewestStudioPendingEdit();
+    expect(shown).not.toBeNull();
+    await act(async () => {
+      respond();
+      await saved;
+    });
+    expect(deps.onFileContentChanged).toHaveBeenCalledWith("index.html", "AFTER");
+    expect(applySoftReload).not.toHaveBeenCalled();
+
+    shown!.showAgain();
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("runCommit — instantPatch wiring", () => {

package/src/hooks/useGsapScriptCommits.ts

@@ -113,11 +113,18 @@ function finishUnchangedMutation(
     !options.skipReload &&
     (instantPatchesFor(options).length > 0 || options.previewFallbackLatch?.pending)
   ) {
-    applyPreviewSync(iframe, result, options, reloadPreview);
+    redrawUnlessPaintedBack(options, () =>
+      applyPreviewSync(iframe, result, options, reloadPreview),
+    );
   }
   return true;
 }
 
+function redrawUnlessPaintedBack(options: CommitMutationOptions, redraw: () => void): void {
+  if (options.pendingEdit) options.pendingEdit.drawUnlessUndone(redraw);
+  else redraw();
+}
+
 function refreshMutationPreview(
   iframe: HTMLIFrameElement | null,
   result: MutationResult,
@@ -126,8 +133,10 @@ function refreshMutationPreview(
   onCacheInvalidate: () => void,
   nestedFiles?: Map<string, string> | null,
 ): void {
-  options.beforeReload?.();
-  applyPreviewSync(iframe, result, options, reloadPreview, nestedFiles);
+  redrawUnlessPaintedBack(options, () => {
+    options.beforeReload?.();
+    applyPreviewSync(iframe, result, options, reloadPreview, nestedFiles);
+  });
   onCacheInvalidate();
 }
 

package/src/hooks/useThumbnailStripSize.test.tsx

@@ -1,7 +1,9 @@
 // @vitest-environment happy-dom
 import { act } from "react";
 import { createRoot } from "react-dom/client";
-import { expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "../player/components/testRootHarness";
+import { NearScreenIntersectionObserver } from "./intersectionObserverTestUtils";
 import { MockResizeObserver, reportResize } from "./resizeObserverTestUtils";
 import { useThumbnailStripSize } from "./useThumbnailStripSize";
 
@@ -45,3 +47,236 @@ it("does not re-render the strip when the observer reports the size it already h
     globalThis.ResizeObserver = originalResizeObserver;
   }
 });
+
+describe("on a scroll", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  const originalIntersectionObserver = globalThis.IntersectionObserver;
+  const frames: FrameRequestCallback[] = [];
+  const harness = createHappyDomRootHarness();
+  let host: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+  let left = 0;
+  let top = 0;
+  let scrolled = 0;
+  let scrolledDown = 0;
+  let stripWidth = 1_000_000;
+  let renders = 0;
+
+  function Strip() {
+    renders += 1;
+    const [size, ref] = useThumbnailStripSize();
+    return (
+      <div>
+        <div ref={ref} data-in-view={`${size.inViewStart}-${size.inViewEnd}`} />
+      </div>
+    );
+  }
+
+  const mountStrips = (count: number) =>
+    act(async () =>
+      root.render(Array.from({ length: count }, (_, index) => <Strip key={index} />)),
+    );
+
+  const spans = () =>
+    [...host.querySelectorAll("[data-in-view]")].map((strip) => strip.getAttribute("data-in-view"));
+
+  /** The timeline scrolls so the strips' left edge lands at `nextLeft`, then one frame runs. */
+  const scrollTo = (nextLeft: number) => {
+    scrolled += left - nextLeft;
+    left = nextLeft;
+    act(() => host.dispatchEvent(new Event("scroll")));
+    expect(window.requestAnimationFrame).toHaveBeenCalledTimes(1);
+    act(() => frames.splice(0).forEach((frame) => frame(0)));
+  };
+
+  const neverReportedNear = () => {
+    globalThis.IntersectionObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof IntersectionObserver;
+  };
+
+  beforeEach(() => {
+    globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+    globalThis.IntersectionObserver =
+      NearScreenIntersectionObserver as unknown as typeof IntersectionObserver;
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((frame) => frames.push(frame));
+    vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(
+      () => ({ left, top, width: stripWidth, height: 40 }) as DOMRect,
+    );
+    vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockImplementation(() => stripWidth);
+    left = 0;
+    top = 0;
+    scrolled = 0;
+    scrolledDown = 0;
+    stripWidth = 1_000_000;
+    renders = 0;
+    host = document.body.appendChild(document.createElement("div"));
+    host.setAttribute("data-timeline-scroll-viewport", "");
+    Object.defineProperty(host, "scrollLeft", { configurable: true, get: () => scrolled });
+    Object.defineProperty(host, "scrollTop", { configurable: true, get: () => scrolledDown });
+    root = harness.mount(host);
+  });
+
+  afterEach(() => {
+    frames.length = 0;
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+    globalThis.IntersectionObserver = originalIntersectionObserver;
+  });
+
+  it("re-measures every near strip in one shared frame, so a full timeline lays out once", async () => {
+    await mountStrips(50);
+
+    scrollTo(-10_000);
+
+    expect(spans()).toEqual(Array(50).fill("9216-11776"));
+  });
+
+  it("keeps a visible strip measured when it is read after a scroll but before that scroll's frame", async () => {
+    stripWidth = 5_000;
+    left = -1_000;
+    await mountStrips(1);
+
+    scrolled += 3_000;
+    left = -4_000;
+    act(() => reportResize(stripWidth, 40));
+    act(() => host.dispatchEvent(new Event("scroll")));
+    act(() => frames.splice(0).forEach((frame) => frame(0)));
+
+    expect(spans()).toEqual(["3072-5000"]);
+  });
+
+  it("keeps a strip on screen measured after a move without a scroll, then a scroll", async () => {
+    await mountStrips(1);
+    expect(spans()).toEqual(["0-1536"]);
+
+    left = -3_000;
+    scrollTo(-1_000);
+    expect(spans()).toEqual(["0-2560"]);
+  });
+
+  it("measures a strip a vertical scroll brings on screen in that same frame", async () => {
+    neverReportedNear();
+    top = 5_000;
+    await mountStrips(1);
+    expect(spans()).toEqual(["0-0"]);
+
+    scrolledDown += 4_900;
+    top = 100;
+    act(() => host.dispatchEvent(new Event("scroll")));
+    act(() => frames.splice(0).forEach((frame) => frame(0)));
+
+    expect(spans()).toEqual(["0-1536"]);
+  });
+
+  it("keeps the tiles of a strip that ends just off screen", async () => {
+    await mountStrips(1);
+
+    scrollTo(-(stripWidth + 100));
+
+    expect(spans()).toEqual(["999424-1000000"]);
+  });
+
+  it("measures the strips a jump brings on screen in that same frame", async () => {
+    neverReportedNear();
+    left = 50_000;
+    await mountStrips(50);
+    expect(spans()).toEqual(Array(50).fill("0-0"));
+
+    scrollTo(0);
+
+    expect(spans()).toEqual(Array(50).fill("0-1536"));
+  });
+
+  it("does not re-render a strip wholly on screen when it moves", async () => {
+    stripWidth = 300;
+    left = 100;
+    await mountStrips(1);
+    const settled = renders;
+
+    scrollTo(700);
+
+    expect(renders).toBe(settled);
+  });
+
+  it("does not re-render strips that a jump carries from one side of the screen to the other", async () => {
+    left = 50_000;
+    await mountStrips(50);
+    const settled = renders;
+
+    scrollTo(-2_000_000);
+
+    expect(renders).toBe(settled);
+  });
+
+  it("keeps every tile of a short clip, even far from the screen", async () => {
+    stripWidth = 4_096;
+    top = 5_000;
+    await mountStrips(1);
+
+    expect(spans()).toEqual(["0-4096"]);
+  });
+
+  it("never re-measures a short clip on a scroll", async () => {
+    stripWidth = 300;
+    left = 100;
+    await mountStrips(1);
+    const reads = vi.mocked(Element.prototype.getBoundingClientRect);
+    reads.mockClear();
+
+    scrollTo(50);
+
+    expect(reads).not.toHaveBeenCalled();
+  });
+
+  it("mounts nothing for a strip far above or below the screen", async () => {
+    top = 5_000;
+    await mountStrips(1);
+
+    expect(spans()).toEqual(["0-0"]);
+  });
+
+  it("measures a strip as it comes near the screen, without waiting for a frame", async () => {
+    const reports: IntersectionObserverCallback[] = [];
+    globalThis.IntersectionObserver = class {
+      constructor(callback: IntersectionObserverCallback) {
+        reports.push(callback);
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof IntersectionObserver;
+    await mountStrips(1);
+    const strip = host.querySelector("[data-in-view]")!;
+
+    left = -10_000;
+    const [presence] = reports;
+    act(() =>
+      presence!(
+        [
+          {
+            isIntersecting: true,
+            target: strip.parentElement!,
+          } as unknown as IntersectionObserverEntry,
+        ],
+        {} as IntersectionObserver,
+      ),
+    );
+
+    expect(frames).toHaveLength(0);
+    expect(strip.getAttribute("data-in-view")).toBe("9216-11776");
+  });
+
+  it("reads no strip far from the screen, however many clips the timeline mounts", async () => {
+    left = 50_000;
+    await mountStrips(50);
+    const reads = vi.mocked(Element.prototype.getBoundingClientRect);
+    reads.mockClear();
+
+    scrollTo(49_900);
+
+    expect(reads).not.toHaveBeenCalled();
+  });
+});