@hyperframes/studio 0.8.138 → 0.8.140

package/src/hooks/useGsapScriptCommits.ts

@@ -45,6 +45,7 @@ import {
   useSafeGsapCommitMutation,
 } from "./useSafeGsapCommitMutation";
 import { requestGsapMutation } from "./gsapMutationClient";
+import { whileScriptWrites } from "../player/previewReloading";
 
 async function mutateGsapScript(
   projectId: string,
@@ -373,7 +374,7 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     });
   }, [projectIdRef, previewIframeRef, reloadPreview, onCacheInvalidate, onFileContentChanged, forceReloadSdkSession, recordMutationEdit]);
 
-  const runCommit = useCallback(async (pid: string, compositionPath: string | null, targetPath: string, selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
+  const runCommit = useCallback((pid: string, compositionPath: string | null, targetPath: string, selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => whileScriptWrites(async () => {
     const result = await runMutationRequest([mutation], options, showToast, () =>
       mutateGsapScript(pid, "gsap-mutations", targetPath, mutation),
     );
@@ -381,9 +382,9 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     trackKeyframeCommit([mutation], result, options);
     options.onResult?.(result);
     await finalizeSuccessfulMutation(pid, compositionPath, selection, mutation, targetPath, result, options);
-  }, [showToast, finalizeSuccessfulMutation]);
+  }), [showToast, finalizeSuccessfulMutation]);
 
-  const runBatchCommit = useCallback(async (pid: string, compositionPath: string | null, targetPath: string, calls: CommitMutationCall[], options: CommitMutationOptions) => {
+  const runBatchCommit = useCallback((pid: string, compositionPath: string | null, targetPath: string, calls: CommitMutationCall[], options: CommitMutationOptions) => whileScriptWrites(async () => {
     const first = calls[0];
     const last = calls.at(-1);
     if (!first || !last) return;
@@ -402,7 +403,7 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     const { instantPatch: _instantPatch, ...batchOptions } = options;
     const allPatched = instantPatches.length === calls.length;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, allPatched ? { ...batchOptions, instantPatches } : batchOptions);
-  }, [showToast, finalizeSuccessfulMutation]);
+  }), [showToast, finalizeSuccessfulMutation]);
 
   // Every GSAP-script commit is a read-modify-write of one file. Overlapping
   // commits to the SAME file (any op type, any animation) interleave server-side,

package/src/hooks/useMusicBeatAnalysis.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveBeatSourceTrack } from "../utils/timelineInspector";
 import { analyzeMusicFromUrl } from "@hyperframes/core/beats";
+import { whenTimelineIdle } from "../player/components/timelineMotion";
 import { useFileManagerContextOptional } from "../contexts/FileManagerContext";
 import { mergeUserBeats } from "../utils/beatEditing";
 import { getTimelineElementIndexes } from "../player/lib/timelineElementIndexes";
@@ -79,7 +80,7 @@ async function loadBeatAnalysis(
 ): Promise<{ analysis: MusicAnalysis; times: number[]; strengths: number[] } | null> {
   let promise = analysisCache.get(musicSrc);
   if (!promise) {
-    promise = analyzeMusicFromUrl(musicSrc);
+    promise = analyzeMusicFromUrl(musicSrc, { pause: whenTimelineIdle });
     cacheAnalysis(musicSrc, promise);
   }
   try {

package/src/hooks/usePreviewPersistence.history.test.tsx

@@ -19,10 +19,11 @@ afterEach(() => {
 });
 
 describe("undo that reloads the preview", () => {
-  it("keeps the timeline's clips until the reloaded preview reports its own", async () => {
+  it("keeps the timeline's clips and selection until the reloaded preview reports its own", async () => {
     const clips = [{ id: "a" }, { id: "b" }] as unknown as TimelineElement[];
     usePlayerStore.getState().setElements(clips);
     usePlayerStore.getState().setTimelineReady(true);
+    usePlayerStore.getState().setSelectedElementId("a");
     const reloadPreview = vi.fn();
     let sync: ReturnType<typeof usePreviewPersistence>["syncHistoryPreviewAfterApply"] | null =
       null;
@@ -46,7 +47,11 @@ describe("undo that reloads the preview", () => {
 
     expect(reloadPreview).toHaveBeenCalledTimes(1);
     const player = usePlayerStore.getState();
-    expect([player.elements, player.timelineReady]).toEqual([clips, true]);
+    expect([player.elements, player.timelineReady, player.selectedElementId]).toEqual([
+      clips,
+      true,
+      "a",
+    ]);
   });
 });
 

package/src/hooks/usePreviewPersistence.ts

@@ -248,10 +248,7 @@ export function usePreviewPersistence({
         reloadPreview,
         nestedFiles,
       );
-      if (strategy === "full") {
-        usePlayerStore.getState().setSelectedElementId(null);
-        return;
-      }
+      if (strategy === "full") return;
       // A soft restore patched the reverted attributes onto the live preview, but the
       // player store keeps its own copy and that copy is what the automation lanes
       // draw — so without this an undone envelope edit stayed invisible until a

package/src/hooks/useSdkSession.lifecycle.test.tsx

@@ -13,6 +13,7 @@ vi.mock("@hyperframes/sdk", () => ({
 import type { Composition } from "@hyperframes/sdk";
 import { useSdkSession, type SdkSessionHandle } from "./useSdkSession";
 import { usePlayerStore } from "../player/store/playerStore";
+import { notifyExternalFileReload } from "./externalFileReloadBus";
 
 vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
@@ -173,6 +174,25 @@ describe("useSdkSession ownership", () => {
     await act(async () => root.unmount());
     expect(published.dispose).toHaveBeenCalledOnce();
   });
+
+  it("reopens on a project-wide external change whatever composition it holds", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => response("INDEX")),
+    );
+    openComposition.mockImplementation(async () => fakeSession());
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+    expect(openComposition).toHaveBeenCalledOnce();
+    await act(async () => notifyExternalFileReload("film.html"));
+    await flushAsyncEffects();
+    expect(openComposition).toHaveBeenCalledOnce();
+    await act(async () => notifyExternalFileReload("."));
+    await flushAsyncEffects();
+    expect(openComposition).toHaveBeenCalledTimes(2);
+    act(() => root.unmount());
+  });
 });
 
 describe("useSdkSession unreachable project", () => {

package/src/hooks/useSdkSession.ts

@@ -409,7 +409,10 @@ export function useSdkSession(
   useEffect(
     () =>
       addExternalFileReloadListener((changedPath) => {
-        if (changedPath === activeCompPathRef.current) setReloadToken((token) => token + 1);
+        // "." is a project-wide change (a reconnect or a replaced folder): every session reloads.
+        if (changedPath === "." || changedPath === activeCompPathRef.current) {
+          setReloadToken((token) => token + 1);
+        }
       }),
     [],
   );

package/src/hooks/useThumbnailStripSize.test.tsx

@@ -7,6 +7,15 @@ import { NearScreenIntersectionObserver } from "./intersectionObserverTestUtils"
 import { MockResizeObserver, reportResize } from "./resizeObserverTestUtils";
 import { useThumbnailStripSize } from "./useThumbnailStripSize";
 
+const zoom = vi.hoisted(() => ({ previewing: false, listeners: new Set<() => void>() }));
+vi.mock("../player/components/timelineZoomInput", () => ({
+  isTimelineZoomPreviewing: () => zoom.previewing,
+  subscribeTimelineZoomPreview: (listener: () => void) => {
+    zoom.listeners.add(listener);
+    return () => zoom.listeners.delete(listener);
+  },
+}));
+
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
 it("does not re-render the strip when the observer reports the size it already holds", () => {
@@ -48,6 +57,62 @@ it("does not re-render the strip when the observer reports the size it already h
   }
 });
 
+it("measures a strip once a zoom preview ends, not while the preview scales it", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const host = document.createElement("div");
+  document.body.append(host);
+  let width = 300;
+  Object.defineProperty(host, "clientWidth", { configurable: true, get: () => width });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+  const root = createRoot(host);
+  function Harness() {
+    const [size, ref] = useThumbnailStripSize();
+    return <div ref={ref}>{`${size.width}x${size.height}`}</div>;
+  }
+  try {
+    act(() => root.render(<Harness />));
+    zoom.previewing = true;
+    width = 600;
+    act(() => reportResize(600, 40));
+    expect(host.textContent).toBe("300x40");
+    zoom.previewing = false;
+    act(() => zoom.listeners.forEach((listener) => listener()));
+    expect(host.textContent).toBe("600x40");
+  } finally {
+    zoom.previewing = false;
+    act(() => root.unmount());
+    host.remove();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
+it("measures again each time a preview is laid out, though nothing was read during it", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const host = document.createElement("div");
+  document.body.append(host);
+  let width = 300;
+  Object.defineProperty(host, "clientWidth", { configurable: true, get: () => width });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+  const root = createRoot(host);
+  function Harness() {
+    const [size, ref] = useThumbnailStripSize();
+    return <div ref={ref}>{`${size.width}x${size.height}`}</div>;
+  }
+  try {
+    act(() => root.render(<Harness />));
+    // A zoom-out lays its target out mid-ease; the resize is reported only later.
+    width = 600;
+    act(() => zoom.listeners.forEach((listener) => listener()));
+    expect(host.textContent).toBe("600x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
 describe("on a scroll", () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   const originalIntersectionObserver = globalThis.IntersectionObserver;

package/src/hooks/useThumbnailStripSize.ts

@@ -1,5 +1,9 @@
 import { useCallback, useState } from "react";
 import { flushSync } from "react-dom";
+import {
+  isTimelineZoomPreviewing,
+  subscribeTimelineZoomPreview,
+} from "../player/components/timelineZoomInput";
 
 export interface StripSize {
   width: number;
@@ -24,7 +28,6 @@ const GAP_WARNING: IntersectionObserverInit & { scrollMargin: string } = {
   scrollMargin: `0px ${IN_VIEW_CHUNK_PX / 2}px`,
 };
 
-// A short strip keeps every tile, as before, so only long clips do work on a scroll.
 const SHORT_STRIP_MAX_PX = 8 * IN_VIEW_CHUNK_PX;
 const isShort = (width: number) => width <= SHORT_STRIP_MAX_PX;
 
@@ -62,6 +65,7 @@ let shared: {
   resize: ResizeObserver;
   presence: IntersectionObserver | null;
   gaps: IntersectionObserver | null;
+  stopZoomWatch: () => void;
 } | null = null;
 
 const offsetOf = (scroller: Element | null) =>
@@ -97,8 +101,23 @@ const read = (target: Element, strip: Strip) => {
 const commit = (updates: (readonly [Apply, Partial<StripSize>])[]) =>
   flushSync(() => updates.forEach(([apply, patch]) => apply(patch)));
 
+// A zoom preview scales the strips: reads wait, and each preview's layout re-measures them all.
+const remeasureAfterPreview = () => {
+  if (isTimelineZoomPreviewing()) return;
+  commit(
+    [...strips].map(
+      ([target, strip]) =>
+        [
+          strip.apply,
+          { width: target.clientWidth, height: target.clientHeight, ...read(target, strip) },
+        ] as const,
+    ),
+  );
+};
+
 const refresh = () => {
   frame = 0;
+  if (isTimelineZoomPreviewing()) return;
   const offsetsNow = new Map<Element | null, { x: number; y: number }>();
   const updates: (readonly [Apply, Partial<StripSize>])[] = [];
   for (const [target, strip] of strips) {
@@ -122,6 +141,7 @@ const scheduleRefresh = () => {
 };
 
 const measure = (entries: { target: Element; size?: { width: number; height: number } }[]) =>
+  isTimelineZoomPreviewing() ||
   commit(
     entries.flatMap(({ target, size }) => {
       const strip = strips.get(target);
@@ -153,6 +173,7 @@ function acquire() {
       gaps: observeIntersections(
         (entries) => entries.some((entry) => entry.isIntersecting) && scheduleRefresh(),
       ),
+      stopZoomWatch: subscribeTimelineZoomPreview(remeasureAfterPreview),
     };
     window.addEventListener("scroll", scheduleRefresh, { capture: true, passive: true });
   }
@@ -164,6 +185,7 @@ function release() {
   shared?.resize.disconnect();
   shared?.presence?.disconnect();
   shared?.gaps?.disconnect();
+  shared?.stopZoomWatch();
   shared = null;
   window.removeEventListener("scroll", scheduleRefresh, { capture: true });
   cancelAnimationFrame(frame);

package/src/hooks/useTimelineDeleteOps.test.tsx

@@ -275,6 +275,16 @@ describe("useTimelineDeleteOps: undo race", () => {
       await flushStudioPendingEdits();
     });
   });
+
+  it("shows the shortened length while the last clip's delete is still saving", async () => {
+    const { gate, recordEdit, deleteSelection } = mountRaceHarness();
+    usePlayerStore.getState().setDuration(6);
+    const deletePromise = deleteSelection();
+    await vi.waitFor(() => expect(recordEdit).toHaveBeenCalled());
+    expect(usePlayerStore.getState().duration).toBe(4);
+    gate.resolve();
+    await deletePromise;
+  });
 });
 
 // Regression: the live preview kept a deleted clip until its reload landed, and composition

package/src/hooks/useTimelineDeleteOps.ts

@@ -8,11 +8,13 @@ import { usePlayerStore } from "../player";
 import { saveServerRewriteWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
 import { getTimelineElementLabel } from "../utils/studioHelpers";
-import { buildPatchTarget, removeIframeTimelineElements } from "./timelineEditingHelpers";
+import {
+  buildPatchTarget,
+  removeIframeTimelineElements,
+  syncCompositionDurationWithEnd,
+} from "./timelineEditingHelpers";
 import { captureDurationRollback, timingGestureStep } from "./timelineTimingSync";
 import { setLinkInSource } from "../components/editor/mediaLinkEdits";
-import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
-import { furthestClipEndFromSource } from "../player/lib/timelineElementHelpers";
 import {
   resolveMainTrackDeleteRippleShifts,
   resolveShiftedElements,
@@ -143,16 +145,13 @@ export function useTimelineDeleteOps({
                 typeof removeData.content === "string" ? removeData.content : originalContent;
               // Shrink to the furthest remaining clip end, read from the post-removal source:
               // store durations are runtime-truncated.
-              const deleteContentEnd = furthestClipEndFromSource(removedContent);
-              const patchedContent = unlinkInSource(
-                setCompositionDurationToContent(removedContent, deleteContentEnd),
-                alsoUnlink,
-              );
+              const synced = syncCompositionDurationWithEnd(removedContent);
+              const patchedContent = unlinkInSource(synced.source, alsoUnlink);
               // Optimistically reflect the shrunk length in the readout/seek bar,
               // rolling it back if the persist below fails (see captureDurationRollback).
               rollbackDuration = captureDurationRollback(previewIframeRef.current);
-              if (deleteContentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
-                usePlayerStore.getState().setDuration(deleteContentEnd);
+              if (synced.contentEnd > 0 && targetPath === (activeCompPath || "index.html")) {
+                usePlayerStore.getState().setDuration(synced.contentEnd);
               }
               return { disk: removedContent, after: patchedContent };
             },

package/src/index.ts

@@ -63,6 +63,7 @@ export {
 export { TimelineProvider, useTimelineContext } from "./player/components/TimelineProvider";
 export type { TimelineTheme } from "./player/components/timelineTheme";
 export { TRACK_H } from "./player/components/timelineLayout";
+export { currentTimelineRange, zoomTimelineToRange } from "./player/components/timelineZoomInput";
 export type { TimelineTrackPadding } from "./player/components/timelineLayout";
 export { displayTrackOrder } from "./player/components/useTimelineTrackDerivations";
 export { fadeHandleBoxes } from "./player/components/timelineClipFadeGeometry";
@@ -160,6 +161,7 @@ export type {
 // can race a write still in flight (see useTrackPendingTimelineEdit.ts).
 export { flushStudioPendingEdits } from "./utils/studioPendingEdits";
 export { revertNewestStudioPendingEdit } from "./utils/studioPendingEdits";
+export { cancelNewestStudioWaitingPress } from "./utils/studioPendingEdits";
 export type { StudioPendingEditsDrainResult } from "./utils/studioPendingEdits";
 export type {
   CanEditTimelineElement,

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

@@ -11,15 +11,98 @@ vi.mock("../../hooks/useThumbnailLease", () => ({
   useThumbnailLease: leaseSpy,
 }));
 
+// One observer serves every waveform; it reports each one near as it is watched, unless a test
+// reports by hand.
+const nearScreen = {
+  auto: true,
+  watched: [] as Element[],
+  report: (_target: Element, _near: boolean) => {},
+};
+globalThis.IntersectionObserver = class {
+  constructor(callback: IntersectionObserverCallback) {
+    nearScreen.report = (target, near) =>
+      callback(
+        [{ target, isIntersecting: near } as IntersectionObserverEntry],
+        this as unknown as IntersectionObserver,
+      );
+  }
+  observe(target: Element) {
+    nearScreen.watched.push(target);
+    if (nearScreen.auto) nearScreen.report(target, true);
+  }
+  unobserve() {}
+  disconnect() {}
+} as unknown as typeof IntersectionObserver;
+
+const EMPTY_STRIP = { width: 0, height: 0, inViewStart: 0, inViewEnd: 0 };
+const watchGap = vi.hoisted(() => vi.fn());
+const strip = vi.hoisted(() => ({
+  size: { width: 0, height: 0, inViewStart: 0, inViewEnd: 0 },
+  listeners: new Set<() => void>(),
+}));
+// The strip hook's own tests cover scrolls and moves; here it reports what the test sets.
+vi.mock("../../hooks/useThumbnailStripSize", async () => {
+  const { useSyncExternalStore } = await import("react");
+  const subscribe = (listener: () => void) => {
+    strip.listeners.add(listener);
+    return () => strip.listeners.delete(listener);
+  };
+  return {
+    useThumbnailStripSize: () => [
+      useSyncExternalStore(subscribe, () => strip.size),
+      () => {},
+      watchGap,
+    ],
+  };
+});
+
+const setStrip = (size: typeof EMPTY_STRIP) =>
+  act(() => {
+    strip.size = size;
+    strip.listeners.forEach((listener) => listener());
+  });
+
 import { AudioWaveform, drawWaveformCanvas } from "./AudioWaveform";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const mounted: Array<ReturnType<typeof createRoot>> = [];
+
 afterEach(() => {
-  leaseSpy.mockClear();
+  act(() => mounted.splice(0).forEach((root) => root.unmount()));
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  leaseSpy.mockReset();
+  leaseSpy.mockImplementation(() => ({ status: "loading" as const }));
+  strip.size = EMPTY_STRIP;
+  nearScreen.auto = true;
+  watchGap.mockClear();
   document.body.innerHTML = "";
 });
 
+/** Renders a ready waveform for a two-peak sound into `parent`. */
+function renderReadyWaveform(parent: HTMLElement = document.body) {
+  // One snapshot, as the lease returns, so a re-render alone does not redraw.
+  const ready = { status: "ready", value: { kind: "waveform", peaks: [0.5, 1] } } as never;
+  leaseSpy.mockImplementation(() => ready);
+  const host = document.createElement("div");
+  parent.append(host);
+  const root = createRoot(host);
+  mounted.push(root);
+  act(() => {
+    root.render(
+      <AudioWaveform
+        audioUrl="/media/voice.wav"
+        label=""
+        labelColor="#fff"
+        projectId="project-a"
+        sessionEpoch={1}
+        priority="visible"
+      />,
+    );
+  });
+}
+
 /** A 6 x 20 canvas whose 2D context records every fill as [style, x, y, width, height]. */
 function recordingCanvas() {
   const fills: Array<[string, number, number, number, number]> = [];
@@ -51,6 +134,75 @@ describe("AudioWaveform", () => {
     ]);
   });
 
+  it("draws only the span of the clip it is given", () => {
+    const { canvas, fills } = recordingCanvas();
+    // The clip's second half holds the loud peak only.
+    drawWaveformCanvas(canvas, [0.25, 1], false, 0, 1, null, { from: 0.5, to: 1 });
+    const bars = fills.filter(([, , y, , height]) => !(y === 18 && height === 2));
+    expect(bars.map(([, , y, , height]) => [y, height])).toEqual([
+      [0, 20],
+      [0, 20],
+    ]);
+  });
+
+  it("draws only the stretch of a long clip near the screen, and follows it as the clip moves", () => {
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+    setStrip({ width: 10_000, height: 40, inViewStart: 2048, inViewEnd: 4096 });
+    renderReadyWaveform();
+    const canvas = document.querySelector("canvas")!;
+    const placed = () => [parseFloat(canvas.style.left), parseFloat(canvas.style.width)];
+    expect(placed()[0]).toBeCloseTo(20.48);
+    expect(placed()[1]).toBeCloseTo(20.48);
+    // A move or scroll carries the clip: the hook reports a new stretch and the bars follow.
+    setStrip({ width: 10_000, height: 40, inViewStart: 4096, inViewEnd: 6144 });
+    expect(placed()[0]).toBeCloseTo(40.96);
+    expect(placed()[1]).toBeCloseTo(20.48);
+  });
+
+  it("watches no ends of a clip drawn whole", () => {
+    setStrip({ width: 1000, height: 40, inViewStart: 0, inViewEnd: 1000 });
+    renderReadyWaveform();
+    expect(watchGap.mock.calls.filter(([gap]) => gap)).toEqual([]);
+  });
+
+  it("leaves a waveform off screen undrawn through a zoom, and draws it once it comes near", () => {
+    nearScreen.auto = false;
+    const getContext = vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+    setStrip({ width: 1000, height: 40, inViewStart: 0, inViewEnd: 1000 });
+    renderReadyWaveform();
+    const root = nearScreen.watched.at(-1)!;
+    expect(getContext).not.toHaveBeenCalled();
+    act(() => nearScreen.report(root, true));
+    const drawn = getContext.mock.calls.length;
+    expect(drawn).toBeGreaterThan(0);
+    act(() => nearScreen.report(root, false));
+    setStrip({ width: 2000, height: 40, inViewStart: 0, inViewEnd: 2000 });
+    expect(getContext.mock.calls.length).toBe(drawn);
+    act(() => nearScreen.report(root, true));
+    expect(getContext.mock.calls.length).toBe(drawn + 1);
+  });
+
+  it("redraws a short clip, drawn whole, when a zoom changes its width", () => {
+    const getContext = vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+    setStrip({ width: 1000, height: 40, inViewStart: 0, inViewEnd: 1000 });
+    renderReadyWaveform();
+    const drawn = getContext.mock.calls.length;
+    setStrip({ width: 2000, height: 40, inViewStart: 0, inViewEnd: 2000 });
+    expect(getContext.mock.calls.length).toBe(drawn + 1);
+  });
+
+  it("watches both undrawn ends of a long clip, so a move without a scroll re-measures it", () => {
+    setStrip({ width: 10_000, height: 40, inViewStart: 2048, inViewEnd: 4096 });
+    renderReadyWaveform();
+    const gaps = [
+      ...new Set(watchGap.mock.calls.map(([gap]) => gap).filter(Boolean)),
+    ] as HTMLElement[];
+    expect(gaps.map((gap) => [gap.style.width, gap.style.left])).toEqual([
+      ["20.48%", ""],
+      ["", "40.96%"],
+    ]);
+  });
+
   it("shrinks each bar to the fade's gain and keeps the cut-away part as a ghost", () => {
     const { canvas, fills } = recordingCanvas();
     // A 1 s fade-in on a 2 s clip: the first bar's centre (0.5 s) plays at half gain.