@hyperframes/studio 0.8.137 → 0.8.139

package/src/hooks/useGsapAwareGroupMove.ts

@@ -8,8 +8,11 @@ import { observeGsapGesture } from "./gsapGestureOutcome";
 import { editsPlainCss } from "./gsapRuntimeKeyframes";
 import { refuseGsapTakeover } from "./elementOffsetStager";
 import { tryGsapDragIntercept } from "./gsapRuntimeBridge";
+import { freezeDragStamp } from "./draggedGsapPosition";
 import { assertGsapEditPersisted } from "./gsapEditOutcome";
 import { firstPreflightFailure } from "./gsapGroupPreflight";
+import { whileScriptWrites } from "../player/previewReloading";
+import type { GeometryCommitResult } from "../utils/previewFeatureUsage";
 
 // A distinct key keeps consecutive group drags in separate undo entries.
 let groupDragCommitCounter = 0;
@@ -36,131 +39,141 @@ export function useGsapAwareGroupMove({
     async (
       updates: DomEditGroupPathOffsetCommit[],
       options: { refusalToast?: boolean } = {},
-    ): Promise<import("../utils/previewFeatureUsage").GeometryCommitResult> => {
+    ): Promise<GeometryCommitResult> => {
       const writes = observeGsapGesture(gsapCommitMutation);
       const writer = writes.commit;
       if (!writer) return { ok: true, changed: false };
-      const toastRefusal = options.refusalToast !== false;
-      // One coalesce key across slow writes keeps the group drag in one undo entry.
-      const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
-      // Hold the render until every member is saved, or unwritten members snap back.
-      let renderOnCommit = false;
-      const previewFallbackLatch = { pending: false };
-      const withGroupOptions = (options: CommitMutationOptions): CommitMutationOptions => ({
-        ...options,
-        coalesceKey,
-        coalesceMs: Number.POSITIVE_INFINITY,
-        deferPreviewSync: !renderOnCommit,
-        previewFallbackLatch,
-      });
-      // Batch members in the same file to avoid repeating its read, parse, write and preview patch.
-      const queued: CommitMutationCall[] = [];
-      const flushQueued = async () => {
-        if (queued.length === 0) return;
-        const calls = queued.splice(0, queued.length);
-        if (!writer.batch) {
-          for (const call of calls) {
-            await writer(call.selection, call.mutation, call.options);
-          }
-          return;
-        }
-        await writer.batch(calls, {
-          ...(calls.at(-1)?.options ?? { label: "Move animated layer (group)" }),
-          label: "Move animated layer (group)",
+      const scripted = updates.some(
+        ({ selection, plainTranslate }) =>
+          !(plainTranslate ?? editsPlainCss(selection.element, "move")),
+      );
+      const commitGroup = async (): Promise<GeometryCommitResult> => {
+        const stamps = new Map(
+          updates.map((u) => [u.selection, freezeDragStamp(u.selection.element)]),
+        );
+        const toastRefusal = options.refusalToast !== false;
+        // One coalesce key across slow writes keeps the group drag in one undo entry.
+        const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
+        // Hold the render until every member is saved, or unwritten members snap back.
+        let renderOnCommit = false;
+        const previewFallbackLatch = { pending: false };
+        const withGroupOptions = (options: CommitMutationOptions): CommitMutationOptions => ({
+          ...options,
+          coalesceKey,
+          coalesceMs: Number.POSITIVE_INFINITY,
+          deferPreviewSync: !renderOnCommit,
+          previewFallbackLatch,
         });
-      };
-      const coalescedCommit: typeof gsapCommitMutation = (selection, mutation, options) => {
-        queued.push({ selection, mutation, options: withGroupOptions(options) });
-        return Promise.resolve();
-      };
-      const preflightAnimations = new Map<DomEditSelection, GsapAnimation[]>();
-      // Members saved on themselves, each with its route: true for its CSS translate.
-      const offsetMembers = new Map<DomEditSelection, boolean>();
-      // Editability is user-atomic: prove every member can be written before the first source
-      // mutation, so a blocked member never leaves earlier siblings partially moved. Preflights
-      // write nothing and share one in-flight parse per file, so they run together.
-      const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection, next, plainTranslate }) => {
-          if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
-            refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {});
-            return void offsetMembers.set(selection, true);
+        // Batch members in the same file to avoid repeating its read, parse, write and preview patch.
+        const queued: CommitMutationCall[] = [];
+        const flushQueued = async () => {
+          if (queued.length === 0) return;
+          const calls = queued.splice(0, queued.length);
+          if (!writer.batch) {
+            for (const call of calls) {
+              await writer(call.selection, call.mutation, call.options);
+            }
+            return;
           }
-          const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
-          preflightAnimations.set(selection, animations);
-          const outcome = await tryGsapDragIntercept(
-            selection,
-            next,
-            animations,
-            previewIframeRef.current,
-            coalescedCommit,
-            undefined,
-            { preflightOnly: true, group: true },
-          );
-          if (outcome.status === "element-offset") offsetMembers.set(selection, false);
-          assertGsapEditPersisted(outcome);
-        }),
-      );
-      const preflightFailure = firstPreflightFailure(
-        preflightResults,
-        updates,
-        offsetMembers,
-        activeCompPath,
-      );
-      if (preflightFailure) {
-        trackGsapInteractionFailure(
-          preflightFailure.error,
-          preflightFailure.selection,
-          "drag",
-          "Move animated layer (group)",
-          toastRefusal,
+          await writer.batch(calls, {
+            ...(calls.at(-1)?.options ?? { label: "Move animated layer (group)" }),
+            label: "Move animated layer (group)",
+          });
+        };
+        const coalescedCommit: typeof gsapCommitMutation = (selection, mutation, options) => {
+          queued.push({ selection, mutation, options: withGroupOptions(options) });
+          return Promise.resolve();
+        };
+        const preflightAnimations = new Map<DomEditSelection, GsapAnimation[]>();
+        // Members saved on themselves, each with its route: true for its CSS translate.
+        const offsetMembers = new Map<DomEditSelection, boolean>();
+        // Editability is user-atomic: prove every member can be written before the first source
+        // mutation, so a blocked member never leaves earlier siblings partially moved. Preflights
+        // write nothing and share one in-flight parse per file, so they run together.
+        const preflightResults = await Promise.allSettled(
+          updates.map(async ({ selection, next, plainTranslate }) => {
+            if (plainTranslate ?? editsPlainCss(selection.element, "move")) {
+              refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {});
+              return void offsetMembers.set(selection, true);
+            }
+            const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
+            preflightAnimations.set(selection, animations);
+            const outcome = await tryGsapDragIntercept(
+              selection,
+              next,
+              animations,
+              previewIframeRef.current,
+              coalescedCommit,
+              undefined,
+              { preflightOnly: true, group: true },
+            );
+            if (outcome.status === "element-offset") offsetMembers.set(selection, false);
+            assertGsapEditPersisted(outcome);
+          }),
         );
-        throw preflightFailure.error;
-      }
-      const lastScriptWrite = updates.findLastIndex(
-        ({ selection }) => !offsetMembers.has(selection),
-      );
-      for (const [index, { selection, next }] of updates.entries()) {
-        renderOnCommit = index === lastScriptWrite;
-        const plain = offsetMembers.get(selection);
-        if (plain !== undefined) {
-          const staged = writes.drawKeepingUndone(() =>
-            stageElementPositionOffset(selection, next, plain, coalesceKey),
+        const preflightFailure = firstPreflightFailure(
+          preflightResults,
+          updates,
+          offsetMembers,
+          activeCompPath,
+        );
+        if (preflightFailure) {
+          trackGsapInteractionFailure(
+            preflightFailure.error,
+            preflightFailure.selection,
+            "drag",
+            "Move animated layer (group)",
+            toastRefusal,
           );
-          const result = await staged.save();
-          writes.recordDomResult(result);
-          continue;
+          throw preflightFailure.error;
+        }
+        const lastScriptWrite = updates.findLastIndex(
+          ({ selection }) => !offsetMembers.has(selection),
+        );
+        for (const [index, { selection, next }] of updates.entries()) {
+          renderOnCommit = index === lastScriptWrite;
+          const plain = offsetMembers.get(selection);
+          if (plain !== undefined) {
+            const staged = writes.drawKeepingUndone(() =>
+              stageElementPositionOffset(selection, next, plain, coalesceKey),
+            );
+            const result = await staged.save();
+            writes.recordDomResult(result);
+            continue;
+          }
+          try {
+            const outcome = await tryGsapDragIntercept(
+              selection,
+              next,
+              preflightAnimations.get(selection) ?? [],
+              previewIframeRef.current,
+              coalescedCommit,
+              // The intercept re-reads the file to resolve a stale or shared tween.
+              // Anything already queued has to be on disk before that read, or it
+              // resolves against a file missing writes it is about to build on.
+              async () => {
+                await flushQueued();
+                return makeFetchFallback(selection, { fresh: true })();
+              },
+              { preflightPassed: true, stamp: stamps.get(selection) },
+            );
+            assertGsapEditPersisted(outcome);
+          } catch (error) {
+            trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+            throw error;
+          }
         }
         try {
-          const outcome = await tryGsapDragIntercept(
-            selection,
-            next,
-            preflightAnimations.get(selection) ?? [],
-            previewIframeRef.current,
-            coalescedCommit,
-            // The intercept re-reads the file to resolve a stale or shared tween.
-            // Anything already queued has to be on disk before that read, or it
-            // resolves against a file missing writes it is about to build on.
-            async () => {
-              await flushQueued();
-              return makeFetchFallback(selection, { fresh: true })();
-            },
-            { preflightPassed: true },
-          );
-          assertGsapEditPersisted(outcome);
+          await flushQueued();
+          return writes.finish();
         } catch (error) {
-          trackGsapInteractionFailure(error, selection, "drag", "Move animated layer (group)");
+          // The aggregate write has no uniquely failing member; do not misattribute
+          // its telemetry to whichever member happened to be last in the array.
+          trackGsapInteractionFailure(error, null, "drag", "Move animated layer (group)");
           throw error;
         }
-      }
-      try {
-        await flushQueued();
-        return writes.finish();
-      } catch (error) {
-        // The aggregate write has no uniquely failing member; do not misattribute
-        // its telemetry to whichever member happened to be last in the array.
-        trackGsapInteractionFailure(error, null, "drag", "Move animated layer (group)");
-        throw error;
-      }
+      };
+      return scripted ? whileScriptWrites(commitGroup) : commitGroup();
     },
     [
       gsapCommitMutation,

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/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/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

@@ -160,6 +160,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/hooks/useShadowPreviewReload.ts

@@ -18,7 +18,7 @@ import {
   type UseTimelineSyncCallbacksParams,
 } from "./useTimelineSyncCallbacks";
 import type { IframeWindow, PlaybackAdapter } from "../lib/playbackTypes";
-import { thumbnailScheduler } from "../lib/thumbnailScheduler";
+import { setPreviewReloading } from "../previewReloading";
 import { announcePreviewPromoted } from "../sceneSwap";
 import { afterStudioPendingEdits, isStudioEditSaving } from "../../utils/studioPendingEdits";
 import { usePlayerStore } from "../store/playerStore";
@@ -110,7 +110,7 @@ export function useShadowPreviewReload({
       isRefreshingRef.current = false;
       pendingSeekRef.current = null;
       setPreviewSlots(planShadowDiscard);
-      thumbnailScheduler.setPreviewReloading(false);
+      setPreviewReloading(false);
       const message = `The preview did not reload (${cause}). The previous preview is still showing.`;
       logReload("shadow-failed", { cause });
       console.error(`[studio] ${message}`);
@@ -188,7 +188,7 @@ export function useShadowPreviewReload({
       if (liveTime != null) handOverPlaybackRef.current(liveTime, playing);
       announcePreviewPromoted({ retired, live: shadow });
       onPromotedRef.current?.();
-      thumbnailScheduler.setPreviewReloading(false);
+      setPreviewReloading(false);
     },
     [
       stopPendingShadow,
@@ -285,7 +285,7 @@ export function useShadowPreviewReload({
       armReadyTimer(gen);
       setPreviewSlots((prev) => planShadowReload(prev, gen, url));
       // Thumbnails of the edit wait for the new preview instead of competing with it.
-      thumbnailScheduler.setPreviewReloading(true);
+      setPreviewReloading(true);
     },
     [stopPendingShadow, armReadyTimer, gestureSavesOnScreen],
   );
@@ -300,7 +300,7 @@ export function useShadowPreviewReload({
     pendingSeekRef.current = null;
     usePlayerStore.getState().setTimelineReady(false);
     setPreviewSlots(planShadowDiscard);
-    thumbnailScheduler.setPreviewReloading(false);
+    setPreviewReloading(false);
   }, [stopPendingShadow, isRefreshingRef, pendingSeekRef]);
 
   // Hiding the tab pauses the budget; showing it again restarts the full budget for a pending shadow.
@@ -317,7 +317,7 @@ export function useShadowPreviewReload({
     return () => {
       document.removeEventListener("visibilitychange", onVisibilityChange);
       stopPendingShadow();
-      thumbnailScheduler.setPreviewReloading(false);
+      setPreviewReloading(false);
     };
   });
 

package/src/player/hooks/useTimelinePlayer.shadowReload.test.ts

@@ -6,6 +6,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { SHADOW_READY_BUDGETS, SHADOW_READY_TIMEOUT_MS } from "./useShadowPreviewReload";
 import { usePlayerStore } from "../store/playerStore";
+import { isPreviewChanging } from "../previewReloading";
 import { NLEProvider, useNLEContext, type NLEContextValue } from "../../components/nle/NLEContext";
 import {
   makeAdapterWindow,
@@ -752,6 +753,19 @@ describe("useTimelinePlayer scene swap", () => {
     expect(roles(getApi())).toEqual(["live"]);
   });
 
+  it("counts as a preview change until the swap lands, so a canvas press waits for the new scenes", async () => {
+    let reply: (r: Response) => void = () => {};
+    vi.spyOn(globalThis, "fetch").mockImplementation(
+      () => new Promise<Response>((resolve) => (reply = resolve)),
+    );
+    const { getApi } = liveFilm(vi.fn(async () => {}));
+    act(() => getApi().refreshPlayer());
+    expect(isPreviewChanging()).toBe(true);
+    reply(new Response("<html>v2</html>"));
+    await settle();
+    expect(isPreviewChanging()).toBe(false);
+  });
+
   it("falls back to the full reload when the preview refuses the swap", async () => {
     vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("<html>v2</html>"));
     const { getApi } = liveFilm(async () => {

package/src/player/hooks/useTimelinePlayer.ts

@@ -43,6 +43,7 @@ import { createPreviewMessageHandler } from "./previewMessageRouter";
 import { timelineElementsChanged } from "./timelinePlayerSync";
 import { safeContentDocument } from "./timelineSyncHydration";
 import { sceneSwapFor } from "../sceneSwap";
+import { whileScriptWrites } from "../previewReloading";
 
 export interface UseTimelinePlayerOptions {
   /** Runs right after a reloaded preview becomes the live iframe. */
@@ -504,11 +505,13 @@ export function useTimelinePlayer({
       !!iframe.contentDocument && isStudioManualEditGestureLiveIn(iframe.contentDocument);
     if (!swap || isRefreshingRef.current || swapWouldReplaceGestureNode)
       return reloadWholeFilm(url.toString());
-    swap(url.toString(), isCurrent, cancel.signal).catch((error: unknown) => {
-      if (!isCurrent()) return;
-      logReload("scene-swap-refused", { reason: String(error) });
-      reloadWholeFilm(url.toString());
-    });
+    whileScriptWrites(() => swap(url.toString(), isCurrent, cancel.signal)).catch(
+      (error: unknown) => {
+        if (!isCurrent()) return;
+        logReload("scene-swap-refused", { reason: String(error) });
+        reloadWholeFilm(url.toString());
+      },
+    );
   }, [reloadWholeFilm, previewGeneration]);
   const pauseRef = useRef(pause);
   pauseRef.current = pause;

package/src/player/lib/thumbnailScheduler.test.ts

@@ -219,6 +219,26 @@ describe("ThumbnailScheduler", () => {
     expect(scheduler.getDiagnostics()).toMatchObject({ queued: 0, active: 0, leases: 0 });
   });
 
+  it("starts nothing that a release later in the same batch drops", async () => {
+    const scheduler = new ThumbnailScheduler(
+      resolveTimelineViewportBudgets({ concurrentVideoDecodes: 1 }),
+    );
+    const video = (key: string, load: ThumbnailRequest["load"]) =>
+      scheduler.acquire(request(key, load, "visible", { kind: "video" }), vi.fn());
+    const activeLease = video("active", () => deferred<ThumbnailLoadedResult>().promise);
+    const droppedLoad = vi.fn(async () => result("dropped"));
+    const droppedLease = video("dropped", droppedLoad);
+    const keptLoad = vi.fn(async () => result("kept"));
+    video("kept", keptLoad);
+
+    // A timeline jump unmounts its clips in one commit, the loading one first.
+    activeLease.release();
+    droppedLease.release();
+    await flush();
+    expect(droppedLoad).not.toHaveBeenCalled();
+    expect(keptLoad).toHaveBeenCalledTimes(1);
+  });
+
   it("frees an aborted job's slot at once, even when its loader ignores the abort", async () => {
     const scheduler = new ThumbnailScheduler(
       resolveTimelineViewportBudgets({ concurrentVideoDecodes: 1 }),
@@ -231,7 +251,6 @@ describe("ThumbnailScheduler", () => {
     lease.release();
     const nextLoad = vi.fn(async () => result("next"));
     scheduler.acquire(request("next", nextLoad, "visible", { kind: "video" }), vi.fn());
-    await flush();
     expect(nextLoad).toHaveBeenCalledTimes(1);
   });
 

package/src/player/lib/thumbnailScheduler.ts

@@ -316,7 +316,7 @@ export class ThumbnailScheduler {
       slotFree = true;
       this.activeByBucket[bucket]--;
       this.activeByKind[entry.request.kind]--;
-      this.pump();
+      queueMicrotask(() => this.pump());
     };
     controller.signal.addEventListener("abort", freeSlot, { once: true });
     this.notify(entry);

package/src/player/lib/timelineElementHelpers.ts

@@ -130,17 +130,6 @@ export function readTimelineDurationFromDocument(doc: Document | null | undefine
   return furthestClipEndFromDocument(doc);
 }
 
-/**
- * Furthest clip end parsed straight from a composition SOURCE STRING (the HTML
- * being saved). Uses raw `data-duration`, so it is the correct input for syncing
- * the root duration after an edit — reading the store instead would use the
- * runtime-truncated durations and shrink the composition (the feedback loop).
- */
-export function furthestClipEndFromSource(source: string): number {
-  if (!source) return 0;
-  return furthestClipEndFromDocument(new DOMParser().parseFromString(source, "text/html"));
-}
-
 // ---------------------------------------------------------------------------
 // DOM element type guards
 // ---------------------------------------------------------------------------

package/src/player/previewReloading.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  giveUpOnPreviewChange,
+  isPreviewChanging,
+  previewReloadBegun,
+  requestPreviewReload,
+  setPreviewReloading,
+  whileScriptWrites,
+} from "./previewReloading";
+
+afterEach(() => {
+  previewReloadBegun();
+  setPreviewReloading(false);
+});
+
+describe("the preview is changing", () => {
+  it("from a script write's send until it lands", async () => {
+    let land: () => void = () => {};
+    const write = whileScriptWrites(() => new Promise<void>((resolve) => (land = resolve)));
+    expect(isPreviewChanging()).toBe(true);
+    land();
+    await write;
+    expect(isPreviewChanging()).toBe(false);
+  });
+
+  it("until a write that fails gives up, so a press never hangs on it", async () => {
+    await expect(whileScriptWrites(() => Promise.reject(new Error("rejected")))).rejects.toThrow();
+    expect(isPreviewChanging()).toBe(false);
+  });
+
+  it("from a reload's request until it has begun", () => {
+    requestPreviewReload();
+    expect(isPreviewChanging()).toBe(true);
+    previewReloadBegun();
+    expect(isPreviewChanging()).toBe(false);
+  });
+
+  it("stops counting a change a press gave up on, until the preview goes idle", async () => {
+    let land: () => void = () => {};
+    const stuck = whileScriptWrites(() => new Promise<void>((resolve) => (land = resolve)));
+    giveUpOnPreviewChange();
+    expect(isPreviewChanging()).toBe(false);
+    land();
+    await stuck;
+    requestPreviewReload();
+    expect(isPreviewChanging(), "the next change counts again").toBe(true);
+  });
+});