@hyperframes/studio 0.8.133 → 0.8.135

package/src/utils/gsapSoftReload.test.ts

@@ -1,5 +1,7 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 
+import { patchRuntimeTweenInPlace } from "../hooks/gsapRuntimePatch";
 import { afterEach, describe, it, expect, vi } from "vitest";
 import {
   readNestedFiles,
@@ -70,6 +72,29 @@ function buildMockIframe(overrides: Record<string, unknown> = {}) {
   };
 }
 
+/** A mock iframe whose document holds one GSAP script and one composition root; `byId` answers id selectors. */
+function iframeWithComposition(script: string, root: Element, byId: Record<string, Element> = {}) {
+  const scriptEl = document.createElement("script");
+  scriptEl.textContent = script;
+  const container = document.createElement("div");
+  container.appendChild(scriptEl);
+  const { iframe } = buildMockIframe({ gsap: { timeline: vi.fn(), set: vi.fn() } });
+  (iframe as unknown as { contentDocument: unknown }).contentDocument = {
+    querySelectorAll: (sel: string) =>
+      sel === "script:not([src])"
+        ? [scriptEl]
+        : sel.includes("composition-id")
+          ? [root]
+          : byId[sel]
+            ? [byId[sel]]
+            : [],
+    createElement: (tag: string) => document.createElement(tag),
+    body: container,
+    head: document.createElement("div"),
+  };
+  return iframe;
+}
+
 describe("applySoftReload", () => {
   it('returns "cannot-soft-reload" when iframe is null', () => {
     expect(applySoftReload(null, SCRIPT_TEXT)).toBe("cannot-soft-reload");
@@ -127,23 +152,13 @@ describe("applySoftReload", () => {
     orphan.style.cssText = "left: 1240px; top: 200px; transform: translate(449px, 0px)";
     Object.assign(orphan, { _gsap: {} }); // GSAP cache marker (set by gsap.set)
 
-    const scriptEl = document.createElement("script");
-    scriptEl.textContent = 'const tl = gsap.timeline({ paused: true }); tl.to("#x", { x: 1 });';
-    const container = document.createElement("div");
-    container.appendChild(scriptEl);
-
     const root = document.createElement("div");
     root.setAttribute("data-composition-id", "root");
     root.appendChild(orphan);
-
-    const { iframe } = buildMockIframe({ gsap: { timeline: vi.fn(), set: vi.fn() } });
-    (iframe as unknown as { contentDocument: unknown }).contentDocument = {
-      querySelectorAll: (sel: string) =>
-        sel === "script:not([src])" ? [scriptEl] : sel.includes("composition-id") ? [root] : [],
-      createElement: (tag: string) => document.createElement(tag),
-      body: container,
-      head: document.createElement("div"),
-    };
+    const iframe = iframeWithComposition(
+      'const tl = gsap.timeline({ paused: true }); tl.to("#x", { x: 1 });',
+      root,
+    );
 
     applySoftReload(iframe, SCRIPT_TEXT);
 
@@ -151,6 +166,37 @@ describe("applySoftReload", () => {
     expect(orphan.style.left).toBe("1240px"); // authored CSS base preserved
   });
 
+  it("clears what a standalone gsap.set wrote once the new script no longer sets it", () => {
+    // An undo of a Design-panel W edit on an animated box removes its gsap.set width.
+    const target = document.createElement("div");
+    target.id = "target";
+    target.style.cssText = "left: 10px; width: 300px";
+    Object.assign(target, { _gsap: {} });
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "root");
+    root.appendChild(target);
+    const iframe = iframeWithComposition(
+      `window.__timelines = window.__timelines || {};
+const tl = gsap.timeline({ paused: true });
+tl.to("#target", { x: 100 });
+gsap.set("#target", { width: 300 });
+window.__timelines["root"] = tl;`,
+      root,
+      { "#target": target },
+    );
+    const restored = `window.__timelines = window.__timelines || {};
+const tl = gsap.timeline({ paused: true });
+tl.to("#target", { x: 100 });
+window.__timelines["root"] = tl;`;
+
+    applySoftReload(iframe, restored, {
+      authoredHtml: `<html><body><div data-composition-id="root"><div id="target" style="left: 10px"></div></div><script>${restored}</script></body></html>`,
+    });
+
+    expect(target.style.width).toBe("");
+    expect(target.style.left).toBe("10px");
+  });
+
   it("wraps execution in __hfSuppressSceneMutations when available", () => {
     let suppressionCalled = false;
     const { iframe } = buildMockIframe({
@@ -917,3 +963,41 @@ describe("applySoftReload over a composition's own markup", () => {
     expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe("cannot-soft-reload");
   });
 });
+
+describe("a gsap.set a live patch applied", () => {
+  it("is cleared by the next soft reload once the new script no longer sets it, and only once", () => {
+    const markup = `<div data-composition-id="root"><div id="a" style="left: 10px"></div></div>`;
+    const doc = document.implementation.createHTMLDocument("");
+    doc.body.innerHTML = `${markup}<script>window.__timelines["root"]=gsap.timeline();</script>`;
+    const set = (target: HTMLElement | HTMLElement[], vars: Record<string, unknown>) => {
+      for (const el of [target].flat()) {
+        if (vars.clearProps) el.removeAttribute("style");
+        else for (const [k, v] of Object.entries(vars)) el.style.setProperty(k, `${v}px`);
+      }
+    };
+    const iframe = {
+      contentDocument: doc,
+      contentWindow: {
+        gsap: { timeline: () => {}, set },
+        __hfForceTimelineRebind: () => {},
+        __timelines: {},
+        __player: { getTime: () => 0, seek: () => {} },
+      },
+    } as unknown as HTMLIFrameElement;
+    const el = doc.getElementById("a")!;
+    const reload = () => {
+      const script = `window.__timelines["root"]=gsap.timeline();gsap.set("#a",{width:300});`;
+      applySoftReload(iframe, script, { authoredHtml: `${markup}<script>${script}</script>` });
+    };
+
+    // W 300, then H 200, then a commit that removes height from the set.
+    patchRuntimeTweenInPlace(iframe, "#a", { kind: "global-set", props: { width: 300 } });
+    patchRuntimeTweenInPlace(iframe, "#a", { kind: "global-set", props: { height: 200 } });
+    reload();
+    expect([el.style.height, el.style.left]).toEqual(["", "10px"]);
+
+    el.style.height = "50px";
+    reload();
+    expect(el.style.height).toBe("50px");
+  });
+});

package/src/utils/gsapSoftReload.ts

@@ -2,7 +2,13 @@ import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-gradin
 import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 import { findAuthoredElement } from "./authoredSource";
 import { applyAuthoredInlineOpacity, readStampedAuthoredOpacity } from "./authoredOpacity";
-import { authoringFile, collectResetTargets, compositionFile, fileDocs } from "./softReloadTargets";
+import {
+  authoringFile,
+  collectResetTargets,
+  compositionFile,
+  fileDocs,
+  forgetLiveSets,
+} from "./softReloadTargets";
 
 type IframeWindow = Window & {
   __timelines?: Record<string, { kill?: () => void; pause?: () => void }>;
@@ -370,7 +376,12 @@ export function applySoftReload(
   // fallow-ignore-next-line complexity
   const doReload = () => {
     const timelines = win.__timelines;
-    const targets = collectResetTargets(win, doc, targetKeys);
+    const targets = collectResetTargets(
+      win,
+      doc,
+      targetKeys,
+      staleScripts.map((script) => script.textContent ?? ""),
+    );
 
     // Kill ONLY the target composition's timeline(s) — leaving every other
     // composition's timeline (and its children on the global timeline) intact.
@@ -423,6 +434,7 @@ export function applySoftReload(
         }
       }
     }
+    forgetLiveSets(targets);
 
     for (const script of staleScripts) script.remove();
 

package/src/utils/gsapUndoRestore.test.ts

@@ -19,8 +19,10 @@ import {
   diffSoftReloadableRestore,
   showRestoreInPlace,
 } from "./gsapUndoRestore";
+import { recordLiveSet } from "./softReloadTargets";
 import { applyPatch } from "./sourcePatcher";
 import { beginStudioManualEditGesture } from "../components/editor/manualEdits";
+import { studioManualEditSavesIn } from "../components/editor/manualEditsDom";
 import { writePlainMove, writeTranslatePx } from "../components/editor/plainTranslate";
 
 // ── Bug 2: undo/redo restore soft-apply ──────────────────────────────────────
@@ -214,10 +216,16 @@ describe("applyUndoRestoreToPreview", () => {
   describe("an undo that re-runs a changed script matches a fresh load of the restored file", () => {
     const script = (extra: string) => `window.__timelines["root"]=gsap.timeline();${extra}`;
     const root = (body: string) => `<div data-composition-id="root">${body}</div>`;
-    const undoScriptEdit = (live: string, authored: string, edit: string) => {
+    const undoScriptEdit = (
+      live: string,
+      authored: string,
+      edit: string,
+      patchedLive?: (doc: Document) => void,
+    ) => {
       const { iframe, contentWindow, doc } = buildLiveIframe(
-        `${root(live)}<script>${script(edit)}</script>`,
+        `${root(live)}<script>${script(patchedLive ? "" : edit)}</script>`,
       );
+      patchedLive?.(doc);
       const clearProps = (targets: HTMLElement[]) =>
         targets.forEach((t) => t.removeAttribute("style"));
       Object.assign(contentWindow.gsap, { set: clearProps });
@@ -242,6 +250,18 @@ describe("applyUndoRestoreToPreview", () => {
       expect(doc.getElementById("a")!.getAttribute("style")).toBe("width: 300px");
     });
 
+    it("drops the width a W edit set live, though the preview never ran its gsap.set", () => {
+      // The Design panel applies W to the live element and writes the set only to the file.
+      const doc = undoScriptEdit(
+        `<div id="a" style="left: 10px; width: 300px">t</div>`,
+        `<div id="a" style="left: 10px">t</div>`,
+        `gsap.set("#a",{width:300});`,
+        (live) => recordLiveSet(live.getElementById("a")!, { width: 300 }),
+      );
+      const { style } = doc.getElementById("a")!;
+      expect([style.width, style.left]).toEqual(["", "10px"]);
+    });
+
     it("keeps the authored inline rotation of an element GSAP moved", () => {
       const doc = undoScriptEdit(
         `<div id="r" style="left: 10px; transform: translate(116px, 72px) rotate(20deg)">t</div>`,
@@ -281,6 +301,16 @@ describe("applyUndoRestoreToPreview", () => {
     expect(doc.getElementById("a")!.getAttribute("style")).toBe("z-index: 8");
   });
 
+  it("counts a script-only restore applied in place, so a reload requested before it loads again", () => {
+    const script = (x: number) => `window.__timelines["root"]=gsap.timeline().to("#a",{x:${x}});`;
+    const page = (x: number) => `<div id="a">t</div><script>${script(x)}</script>`;
+    const { iframe, doc } = buildLiveIframe(page(2));
+    const before = studioManualEditSavesIn(doc);
+    const files = { [ROOT]: { previous: wrap(page(2)), restored: wrap(page(1)) } };
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+    expect(studioManualEditSavesIn(doc)).toBeGreaterThan(before);
+  });
+
   it("does NOT re-run an UNCHANGED GSAP script for an attribute-only restore", () => {
     // The live doc holds a script element; a re-run would mutate/remove it
     // (applySoftReload removes stale script elements before re-running).
@@ -563,6 +593,17 @@ describe("an undo that lands while the layer is being dragged", () => {
     expect(el.style.getPropertyValue("width")).toBe("100px");
   });
 
+  it("counts an undo shown or applied in place, so a reload requested before it loads again", () => {
+    const { iframe, doc } = buildLiveIframe(undone);
+    const before = studioManualEditSavesIn(doc);
+
+    showRestoreInPlace(iframe, ROOT, files, 3);
+    expect(studioManualEditSavesIn(doc)).toBeGreaterThan(before);
+    const shown = studioManualEditSavesIn(doc);
+    applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn());
+    expect(studioManualEditSavesIn(doc)).toBeGreaterThan(shown);
+  });
+
   it("keeps a drag that started after the undo was shown when the undo is put back", () => {
     const { iframe, doc } = buildLiveIframe(undone);
     const el = doc.getElementById("a")!;

package/src/utils/gsapUndoRestore.ts

@@ -14,7 +14,7 @@ import { findAuthoredElement, parseSavedSource } from "./authoredSource";
 import { STUDIO_EDIT_ATTRS } from "../components/editor/manualEditsSeekReapply";
 import { markScenesStale } from "../player/sceneSwap";
 import { STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR } from "../components/editor/manualEditsTypes";
-import { studioGestureDraws } from "../components/editor/manualEditsDom";
+import { countStudioPreviewChange, studioGestureDraws } from "../components/editor/manualEditsDom";
 
 type PreviewWindow = Window & {
   __player?: { seek?: (t: number) => void };
@@ -312,7 +312,8 @@ export function showRestoreInPlace(
   const doc = iframe?.contentDocument;
   const win = iframe?.contentWindow as PreviewWindow | null;
   const plan = doc && win ? planRestoreTargets(doc, activeCompPath ?? "index.html", files) : null;
-  if (!iframe || !win || !plan || plan.scripted) return null;
+  if (!iframe || !doc || !win || !plan || plan.scripted) return null;
+  countStudioPreviewChange(doc);
   const before = plan.targets.map(
     ({ live, restored }) => [live, live.cloneNode(false) as Element, restored] as const,
   );
@@ -393,6 +394,7 @@ export function applyUndoRestoreToPreview(
     reloadPreview();
     return "full";
   }
+  countStudioPreviewChange(doc);
   // Sync each changed element's attributes onto the live DOM from the restored
   // markup, so the runtime's seek-reapply reads the reverted values.
   for (const target of plan.targets)

package/src/utils/softReloadTargets.ts

@@ -1,4 +1,5 @@
 // Which elements a GSAP soft reload resets, what their tweens wrote, and which file writes each.
+import { parseGsapScript } from "@hyperframes/parsers/gsap-parser";
 import { parseSavedSource } from "./authoredSource";
 import { elementTargets } from "./elementGsap";
 
@@ -49,6 +50,7 @@ export function collectResetTargets(
   win: { __timelines?: Record<string, unknown> },
   doc: Document,
   targetKeys: string[],
+  outgoingScripts: readonly string[] = [],
 ): Map<Element, Set<string>> {
   const targets = new Map<Element, Set<string>>();
   const timelines = (win.__timelines ?? {}) as Record<string, TweenLike | undefined>;
@@ -61,6 +63,8 @@ export function collectResetTargets(
     } catch {}
   }
   sweepHeldElements(doc, targetKeys, others, targets);
+  addLiveSetTargets(doc, targetKeys, targets);
+  for (const script of outgoingScripts) addStandaloneSetTargets(doc, script, targets);
   return targets;
 }
 
@@ -105,6 +109,58 @@ function sweepHeldElements(
   }
 }
 
+// What a live patch set on each element since its last reload; no script in the preview ran it.
+const liveSets = new WeakMap<Document, Map<Element, Set<string>>>();
+
+export function recordLiveSet(el: Element, vars: Record<string, unknown>): void {
+  const byElement = liveSets.get(el.ownerDocument) ?? new Map<Element, Set<string>>();
+  liveSets.set(el.ownerDocument, byElement);
+  const props = byElement.get(el) ?? new Set<string>();
+  for (const prop of tweenedProps(vars)) props.add(prop);
+  byElement.set(el, props);
+}
+
+function addLiveSetTargets(
+  doc: Document,
+  targetKeys: string[],
+  targets: Map<Element, Set<string>>,
+): void {
+  const roots = new Set<Element | null | undefined>(targetKeys.map((k) => compositionRoot(doc, k)));
+  for (const [el, props] of liveSets.get(doc) ?? []) {
+    if (!roots.has(el) && !roots.has(el.parentElement?.closest("[data-composition-id]"))) continue;
+    const seen = targets.get(el) ?? new Set<string>();
+    for (const prop of props) seen.add(prop);
+    targets.set(el, seen);
+  }
+}
+
+export function forgetLiveSets(reset: Map<Element, unknown>): void {
+  for (const el of reset.keys()) liveSets.get(el.ownerDocument)?.delete(el);
+}
+
+/** Adds what each standalone `gsap.set` in the outgoing script wrote, which no timeline child records. */
+function addStandaloneSetTargets(
+  doc: Document,
+  outgoingScript: string,
+  targets: Map<Element, Set<string>>,
+): void {
+  if (!outgoingScript.includes("gsap.set(")) return;
+  for (const set of parseGsapScript(outgoingScript).animations) {
+    if (set.method !== "set" || !set.global) continue;
+    let els: Element[];
+    try {
+      els = [...doc.querySelectorAll(set.targetSelector)];
+    } catch {
+      continue;
+    }
+    for (const el of els) {
+      const seen = targets.get(el) ?? new Set<string>();
+      for (const prop of tweenedProps(set.properties)) seen.add(prop);
+      targets.set(el, seen);
+    }
+  }
+}
+
 // Each file a reset element may be written in, parsed at most once per reload: the reloaded
 // composition's own file is the one just written, any other comes from the caller.
 export function fileDocs(

package/src/utils/studioPendingEdits.test.ts

@@ -6,6 +6,7 @@ import {
   beginStudioPendingEdit,
   flushStudioPendingEdits,
   hasStudioPendingEdits,
+  isStudioEditSaving,
   paintBackNewestStudioPendingEdit,
   trackStudioPendingEdit,
   trackedStudioEdit,
@@ -199,6 +200,128 @@ describe("a drain that meets a conflict", () => {
   });
 });
 
+describe("a new edit after a debounced one", () => {
+  it("commits the debounced edit first, so history records them in the order they were made", () => {
+    const order: string[] = [];
+    const remove = addStudioPendingEditFlushListener(() => void order.push("nudge"));
+    trackedStudioEdit(() => void order.push("panel"))();
+    const drag = beginStudioPendingEdit(null);
+    drag.adopt(() => void order.push("drag"));
+    drag.settle();
+    remove();
+    expect(order).toEqual(["nudge", "panel", "nudge", "drag"]);
+  });
+  it("starts a new edit only after a flushed save that was still waiting has written", async () => {
+    const order: string[] = [];
+    let fetched!: () => void;
+    // A nudge on an animated layer: its save waits on the animation fetch before it writes.
+    const remove = addStudioPendingEditFlushListener(async () => {
+      await new Promise<void>((resolve) => (fetched = resolve));
+      order.push("nudge write");
+    });
+    const panelEdit = trackedStudioEdit(async () => void order.push("width write"), {
+      afterOlderSaves: true,
+    })();
+    fetched();
+    await panelEdit;
+    remove();
+    expect(order).toEqual(["nudge write", "width write"]);
+  });
+
+  it("keeps every later edit behind one that waits on a flushed save, so the newest value lands last", async () => {
+    const order: string[] = [];
+    let fetched!: () => void;
+    let saving = false;
+    const remove = addStudioPendingEditFlushListener(() => {
+      if (saving) return undefined;
+      saving = true;
+      return new Promise<void>((resolve) => (fetched = resolve)).then(
+        () => void order.push("nudge"),
+      );
+    });
+    const userEdit = (body: () => unknown) => trackedStudioEdit(body, { afterOlderSaves: true });
+    const first = userEdit(async () => void order.push("W 200"))();
+    const second = userEdit(async () => void order.push("W 300"))();
+    const drag = beginStudioPendingEdit(null);
+    const dragged = drag.adopt(() => Promise.resolve().then(() => void order.push("resize")));
+    fetched();
+    await Promise.all([first, second, dragged]);
+    drag.settle();
+    remove();
+    expect(order).toEqual(["nudge", "W 200", "W 300", "resize"]);
+  });
+
+  it("never waits on itself: a deferred edit or a flushed save may call a wrapped edit", async () => {
+    let fetched!: () => void;
+    let saving = false;
+    const internal = trackedStudioEdit(async () => undefined);
+    // The flushed save calls an internal wrapped commit after its fetch, as an animated nudge does.
+    const remove = addStudioPendingEditFlushListener(() => {
+      if (saving) return undefined;
+      saving = true;
+      return new Promise<void>((resolve) => (fetched = resolve)).then(() => internal());
+    });
+    const userEdit = (body: () => unknown) => trackedStudioEdit(body, { afterOlderSaves: true });
+    const panel = userEdit(() => internal())();
+    const drag = beginStudioPendingEdit(null);
+    const dragged = drag.adopt(() => internal());
+    fetched();
+    await Promise.all([panel, dragged]);
+    drag.settle();
+    await userEdit(async () => undefined)();
+    remove();
+    expect(isStudioEditSaving()).toBe(false);
+  });
+
+  it("lets a second burst flushed behind the first one save, though its commit is a panel action", async () => {
+    const order: string[] = [];
+    let fetched!: () => void;
+    const commitNudge = trackedStudioEdit(
+      async (name: string) => {
+        if (name === "nudge A") await new Promise<void>((resolve) => (fetched = resolve));
+        else await Promise.resolve();
+        order.push(name);
+      },
+      { afterOlderSaves: true },
+    );
+    let burst: { name: string; edit: ReturnType<typeof beginStudioPendingEdit> } | null = null;
+    const startBurst = (name: string) => {
+      const edit = beginStudioPendingEdit(null);
+      burst = { name, edit };
+    };
+    const remove = addStudioPendingEditFlushListener(() => {
+      if (!burst) return undefined;
+      const { name, edit } = burst;
+      burst = null;
+      const saved = edit.adopt(() => commitNudge(name));
+      edit.settle(saved);
+      return saved;
+    });
+    const panelEdit = trackedStudioEdit(async (name: string) => void order.push(name), {
+      afterOlderSaves: true,
+    });
+    startBurst("nudge A");
+    const first = panelEdit("W 200");
+    startBurst("nudge B");
+    const second = panelEdit("W 300");
+    fetched();
+    await Promise.all([first, second]);
+    remove();
+    expect(order).toEqual(["nudge A", "W 200", "nudge B", "W 300"]);
+    expect(isStudioEditSaving()).toBe(false);
+  });
+
+  it("never flushes from inside an edit's own save, where a flushed save would go untracked", () => {
+    let flushes = 0;
+    const remove = addStudioPendingEditFlushListener(() => void (flushes += 1));
+    const drag = beginStudioPendingEdit(null);
+    drag.adopt(() => trackedStudioEdit(() => undefined)());
+    drag.settle();
+    remove();
+    expect(flushes).toBe(1);
+  });
+});
+
 describe("trackedStudioEdit", () => {
   it("counts each call as a pending edit until it settles, and reports a failure to the drain", async () => {
     let fail!: () => void;

package/src/utils/studioPendingEdits.ts

@@ -66,8 +66,18 @@ export function hasStudioPendingEdits(): boolean {
   return pendingEdits.size > 0 || focusedField() !== null;
 }
 
+const shownRestores = new Set<Promise<void>>();
+
+export function beginStudioShownRestore(): () => void {
+  let end = () => {};
+  const landed = new Promise<void>((resolve) => (end = resolve));
+  shownRestores.add(landed);
+  void landed.then(() => shownRestores.delete(landed));
+  return end;
+}
+
 export function isStudioEditSaving(): boolean {
-  return pendingEdits.size > 0;
+  return pendingEdits.size > 0 || shownRestores.size > 0;
 }
 
 export function afterStudioPendingEdits(run: () => void): () => void {
@@ -75,7 +85,7 @@ export function afterStudioPendingEdits(run: () => void): () => void {
   const check = () => {
     if (!waiting) return;
     if (isStudioEditSaving()) {
-      void Promise.allSettled([...pendingEdits.keys()]).then(check);
+      void Promise.allSettled([...pendingEdits.keys(), ...shownRestores]).then(check);
       return;
     }
     waiting = false;
@@ -107,10 +117,34 @@ export function trackStudioPendingEdit(
   return promise;
 }
 
+let flushedSavesStillWriting: Promise<unknown> | null = null;
+
+function commitOlderDebouncedEdits(): void {
+  if (typeof window === "undefined" || adopting) return;
+  const detail: StudioFlushPendingEditsDetail = { promises: [] };
+  window.dispatchEvent(
+    new CustomEvent<StudioFlushPendingEditsDetail>(STUDIO_FLUSH_PENDING_EDITS_EVENT, { detail }),
+  );
+  if (!detail.promises.length) return;
+  const saves = Promise.allSettled([flushedSavesStillWriting, ...detail.promises]);
+  flushedSavesStillWriting = saves;
+  void saves.then(() => {
+    if (flushedSavesStillWriting === saves) flushedSavesStillWriting = null;
+  });
+}
+
+function afterOlderSaves<T>(run: () => T): Promise<T> | null {
+  return flushedSavesStillWriting && flushedSavesStillWriting.then(run);
+}
+
 export function trackedStudioEdit<Args extends unknown[], R>(
   edit: (...args: Args) => R,
+  { afterOlderSaves: waits = false } = {},
 ): (...args: Args) => R {
   return (...args) => {
+    commitOlderDebouncedEdits();
+    const deferred = waits && !adopting ? afterOlderSaves(() => edit(...args)) : null;
+    if (deferred) return trackStudioPendingEdit(deferred) as R;
     const result = edit(...args);
     if (result instanceof Promise) trackStudioPendingEdit(result);
     return result;
@@ -118,6 +152,7 @@ export function trackedStudioEdit<Args extends unknown[], R>(
 }
 
 export function beginStudioPendingEdit(revert: StudioEditRevert | null) {
+  commitOlderDebouncedEdits();
   let settle!: (saved?: Promise<unknown>) => void;
   const promise = trackStudioPendingEdit(new Promise<unknown>((resolve) => (settle = resolve)))!;
   const entry = pendingEdits.get(promise)!;
@@ -157,7 +192,8 @@ export function beginStudioPendingEdit(revert: StudioEditRevert | null) {
     // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
     adopt<T>(start: () => T): T {
       try {
-        const committed = inFlight.within(start);
+        const deferred = afterOlderSaves(() => inFlight.within(start));
+        const committed = (deferred ?? inFlight.within(start)) as T;
         landed = Promise.resolve(committed).then(
           () => true,
           () => saved,