@hyperframes/studio 0.8.124 → 0.8.125

package/dist/assets/{index-CVuUfURE.js → index-yCK8osBg.js}

@@ -1 +1 @@
-import{g as P}from"./index-BuSTrK-Z.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
+import{g as P}from"./index-CrYoEZ5p.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};

package/dist/index.d.ts

@@ -915,6 +915,48 @@ type TimelineMoveUpdates = Pick<TimelineElement, "start" | "track"> & {
     stackingReorder?: TimelineStackingReorderIntent | null;
 };
 
+declare class StudioSaveHttpError extends Error {
+    readonly statusCode: number;
+    readonly alreadyToasted: boolean;
+    constructor(message: string, statusCode: number, options?: {
+        alreadyToasted?: boolean;
+    });
+}
+declare class StudioFileConflictError extends StudioSaveHttpError {
+    readonly filePath: string;
+    readonly currentVersion: string | null;
+    readonly currentContent: string | null;
+    readonly attemptedContent: string;
+    constructor(input: {
+        filePath: string;
+        currentVersion: string | null;
+        currentContent: string | null;
+        attemptedContent: string;
+    });
+}
+type StudioSaveDrainResult<Failure = unknown> = {
+    status: "clean";
+} | {
+    status: "conflict";
+    error: StudioFileConflictError;
+} | {
+    status: "failed";
+    error: Failure;
+};
+
+type StudioPendingEditsDrainResult = StudioSaveDrainResult;
+interface StudioEditInFlight {
+    reverted: () => boolean;
+    within: <T>(run: () => T) => T;
+    drawUnlessUndone: (draw: () => void) => void;
+    drawKeepingUndone: <T>(draw: () => T) => T;
+    markSaved: () => void;
+}
+declare function revertNewestStudioPendingEdit(): (() => void) | null;
+declare function flushStudioPendingEdits({ onlyCurrent, }?: {
+    onlyCurrent?: boolean | undefined;
+}): Promise<StudioPendingEditsDrainResult>;
+
 /** Value-only channels a `tl.set(...)` patch may touch. */
 interface SetPatchProps {
     x?: number;
@@ -984,6 +1026,7 @@ interface CommitMutationOptions {
         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
@@ -2881,41 +2924,6 @@ declare function useTimelineEditing({ projectId, activeCompPath, timelineElement
     restoreLiveLanes: (restore: Parameters<(restore: LiveLaneRestore) => void>[0]) => void;
 };
 
-declare class StudioSaveHttpError extends Error {
-    readonly statusCode: number;
-    readonly alreadyToasted: boolean;
-    constructor(message: string, statusCode: number, options?: {
-        alreadyToasted?: boolean;
-    });
-}
-declare class StudioFileConflictError extends StudioSaveHttpError {
-    readonly filePath: string;
-    readonly currentVersion: string | null;
-    readonly currentContent: string | null;
-    readonly attemptedContent: string;
-    constructor(input: {
-        filePath: string;
-        currentVersion: string | null;
-        currentContent: string | null;
-        attemptedContent: string;
-    });
-}
-type StudioSaveDrainResult<Failure = unknown> = {
-    status: "clean";
-} | {
-    status: "conflict";
-    error: StudioFileConflictError;
-} | {
-    status: "failed";
-    error: Failure;
-};
-
-type StudioPendingEditsDrainResult = StudioSaveDrainResult;
-declare function revertNewestStudioPendingEdit(): (() => void) | null;
-declare function flushStudioPendingEdits({ onlyCurrent, }?: {
-    onlyCurrent?: boolean | undefined;
-}): Promise<StudioPendingEditsDrainResult>;
-
 interface HistoryResult {
     ok: boolean;
     reason?: string;

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-BuSTrK-Z.js"></script>
+    <script type="module" crossorigin src="/assets/index-CrYoEZ5p.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-D11atkBt.css">
   </head>
   <body>

package/dist/index.js

@@ -11834,7 +11834,10 @@ function asElement(target) {
 var STUDIO_FLUSH_PENDING_EDITS_EVENT = "hf-studio-flush-pending-edits";
 var pendingEdits = /* @__PURE__ */ new Map();
 var NOT_SAVED = () => Promise.resolve(false);
-var adopting = false;
+var adopting = null;
+function adoptingStudioPendingEdit() {
+  return adopting;
+}
 function waitForPostBlurEffects() {
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
@@ -11877,7 +11880,7 @@ function trackStudioPendingEdit(result) {
   if (!result) return void 0;
   const promise = Promise.resolve(result);
   if (adopting) return promise;
-  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED });
+  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED, redraws: [], showAgain: null });
   promise.then(
     () => pendingEdits.delete(promise),
     () => pendingEdits.delete(promise)
@@ -11897,25 +11900,49 @@ function beginStudioPendingEdit(revert) {
   const entry2 = pendingEdits.get(promise);
   entry2.revert = revert;
   let landed = Promise.resolve(false);
+  let saved2 = false;
   entry2.landed = () => landed;
+  const inFlight = {
+    reverted: () => entry2.revert === null && revert !== null,
+    within(run) {
+      const outer = adopting;
+      adopting = inFlight;
+      try {
+        return run();
+      } finally {
+        adopting = outer;
+      }
+    },
+    drawUnlessUndone(draw) {
+      if (inFlight.reverted()) entry2.redraws.push(draw);
+      else draw();
+    },
+    drawKeepingUndone(draw) {
+      if (!inFlight.reverted()) return draw();
+      entry2.showAgain?.();
+      try {
+        return draw();
+      } finally {
+        entry2.showAgain = revert();
+      }
+    },
+    markSaved: () => void (saved2 = true)
+  };
   return {
     settle,
-    reverted: () => entry2.revert === null && revert !== null,
-    // Only what `start` registers synchronously is adopted; a registration after an await is a newer edit.
+    reverted: inFlight.reverted,
+    // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
     adopt(start) {
-      adopting = true;
       try {
-        const committed = start();
+        const committed = inFlight.within(start);
         landed = Promise.resolve(committed).then(
           () => true,
-          () => false
+          () => saved2
         );
         return committed;
       } catch (error) {
         settle();
         throw error;
-      } finally {
-        adopting = false;
       }
     }
   };
@@ -11925,7 +11952,14 @@ function paintBackNewestStudioPendingEdit() {
   const revert = newest?.revert;
   if (!newest || !revert) return null;
   newest.revert = null;
-  return { showAgain: revert(), landed: newest.landed };
+  newest.showAgain = revert();
+  return {
+    showAgain: () => {
+      newest.showAgain?.();
+      for (const redraw of newest.redraws.splice(0)) redraw();
+    },
+    landed: newest.landed
+  };
 }
 function revertNewestStudioPendingEdit() {
   return paintBackNewestStudioPendingEdit()?.showAgain ?? null;
@@ -37150,14 +37184,6 @@ function restoreManualOffsetDragMember(member) {
   }
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
-function manualOffsetMoveRevert(members) {
-  if (!members.every((member) => member.plainTranslate)) return null;
-  return () => {
-    const shown2 = members.map((member) => captureStudioPathOffset(member.element));
-    for (const member of members) restoreStudioPathOffset(member.element, member.initialPathOffset);
-    return () => members.forEach((member, i) => restoreStudioPathOffset(member.element, shown2[i]));
-  };
-}
 function restoreManualOffsetDragMembers(members) {
   for (const member of members) {
     restoreManualOffsetDragMember(member);
@@ -37202,6 +37228,70 @@ function resumeGsapTimelines(element) {
   win.__player?.seek?.(t2);
 }
 
+// src/components/editor/gestureUndoRevert.ts
+var PLACEMENT = ["position", "left", "top"];
+var placementOf = (element) => PLACEMENT.map((prop) => element.style.getPropertyValue(prop));
+function showPlacement(element, placement) {
+  PLACEMENT.forEach((prop, i) => {
+    if (placement[i]) element.style.setProperty(prop, placement[i]);
+    else element.style.removeProperty(prop);
+  });
+}
+function readMemberPosition(member) {
+  const gsap3 = member.plainTranslate ? null : getOffsetDragGsap(member.element);
+  return {
+    offset: captureStudioPathOffset(member.element),
+    gsap: gsap3 && {
+      x: Number(gsap3.getProperty(member.element, "x")),
+      y: Number(gsap3.getProperty(member.element, "y"))
+    },
+    placement: placementOf(member.element)
+  };
+}
+function showMemberPosition(member, position) {
+  restoreStudioPathOffset(member.element, position.offset);
+  showPlacement(member.element, position.placement);
+  if (position.gsap) getOffsetDragGsap(member.element)?.set(member.element, { ...position.gsap });
+  if (!member.plainTranslate)
+    stampGestureBase(member.element, member.initialOffset, member.baseGsap);
+}
+function manualOffsetMoveRevert(members) {
+  const startPlacement = members.map((member) => placementOf(member.element));
+  return () => {
+    const shown2 = members.map(readMemberPosition);
+    members.forEach(
+      (member, i) => showMemberPosition(member, {
+        offset: member.initialPathOffset,
+        gsap: member.plainTranslate ? null : member.baseGsap,
+        placement: startPlacement[i]
+      })
+    );
+    return () => members.forEach((member, i) => showMemberPosition(member, shown2[i]));
+  };
+}
+var GSAP_LOOK_PROPS = ["x", "y", "rotation", "scaleX", "scaleY"];
+function readElementLook(element, gsapOwned) {
+  const gsap3 = gsapOwned ? getOffsetDragGsap(element) : null;
+  return {
+    style: element.getAttribute("style"),
+    gsap: gsap3 && Object.fromEntries(
+      GSAP_LOOK_PROPS.map((prop) => [prop, Number(gsap3.getProperty(element, prop))])
+    )
+  };
+}
+function showElementLook(element, look) {
+  if (look.style === null) element.removeAttribute("style");
+  else element.setAttribute("style", look.style);
+  if (look.gsap) getOffsetDragGsap(element)?.set(element, { ...look.gsap });
+}
+function elementLookRevert(element, start) {
+  return () => {
+    const shown2 = readElementLook(element, start.gsap !== null);
+    showElementLook(element, start);
+    return () => showElementLook(element, shown2);
+  };
+}
+
 // src/components/editor/rotationDraft.ts
 function lastRuleTransform(element) {
   let value = "";
@@ -37980,6 +38070,10 @@ function startGesture(kind, e, opts, options) {
   const rawContentScaleY = rect.height / (rect.editScaleY * actualHeight);
   const contentScaleX = Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
   const contentScaleY = Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
+  const initialLook = readElementLook(
+    sel.element,
+    kind !== "drag" && !editsPlainCss(sel.element, kind === "rotate" ? "rotate" : "resize")
+  );
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken;
   let pathOffsetMember;
@@ -38059,6 +38153,7 @@ function startGesture(kind, e, opts, options) {
       initialPathOffset,
       initialRotation: captureStudioRotation(sel.element),
       initialBoxSize: captureStudioBoxSize(sel.element),
+      initialLook,
       pathOffsetMember,
       originLeft: rect.left,
       originTop: rect.top,
@@ -38560,11 +38655,13 @@ function createDomEditOverlayGestureHandlers(opts) {
       }
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
       const commit = { ...finalRotation, plain: g.plainRotation };
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit)).then((result) => trackPreviewEditResult("rotate", "drag", result)).catch((error) => {
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved2 = Promise.resolve(edit.adopt(() => opts.onRotationCommitRef.current(sel, commit))).then((result) => trackPreviewEditResult("rotate", "drag", result)).catch((error) => {
         logGestureCommitFailure("rotate commit failed", error);
         if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
           restoreRotation();
       }).finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+      edit.settle(saved2);
     } else if (g.kind === "drag") {
       opts.suppressNextBoxClickRef.current = true;
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
@@ -38624,14 +38721,15 @@ function createDomEditOverlayGestureHandlers(opts) {
         restoreStudioBoxSize(sel.element, g.initialBoxSize);
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
-      void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? void 0, restore2, member)
-      ).then((result) => trackPreviewEditResult("resize", "drag", result)).catch((error) => {
+      const commitSize = () => opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? void 0, restore2, member);
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved2 = Promise.resolve(edit.adopt(commitSize)).then((result) => trackPreviewEditResult("resize", "drag", result)).catch((error) => {
         logGestureCommitFailure("resize commit failed", error);
       }).finally(() => {
         if (member) endManualOffsetDragMembers([member]);
         else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
       });
+      edit.settle(saved2);
       logResizeSettle(sel.element, "post-release");
     }
   };
@@ -44465,6 +44563,8 @@ function trackKeyframeCommit(mutations, result, options, memberOptions) {
 
 // src/hooks/gsapGestureOutcome.ts
 function observeGsapGesture(writer) {
+  const edit = adoptingStudioPendingEdit();
+  const join = (run) => edit ? edit.within(run) : run();
   let changed = false;
   let pendingResults = 0;
   const actions = /* @__PURE__ */ new Set();
@@ -44472,12 +44572,14 @@ function observeGsapGesture(writer) {
     pendingResults += 1;
     return {
       ...options,
+      ...edit && { pendingEdit: edit },
       keyframeTelemetry: false,
       onResult: (result) => {
         pendingResults -= 1;
         options.onResult?.(result);
         if (!result.ok || result.changed !== true) return;
         changed = true;
+        edit?.markSaved();
         const members = changedMutationIndices(
           result,
           calls.length,
@@ -44493,16 +44595,18 @@ function observeGsapGesture(writer) {
   };
   let commit = null;
   if (writer) {
-    commit = (selection, mutation, options) => writer(selection, mutation, observe([{ selection, mutation, options }], options));
+    commit = (selection, mutation, options) => join(() => writer(selection, mutation, observe([{ selection, mutation, options }], options)));
     if (writer.batch) {
       const batch = writer.batch;
-      commit.batch = (calls, options) => batch(calls, observe(calls, options));
+      commit.batch = (calls, options) => join(() => batch(calls, observe(calls, options)));
     }
   }
   return {
     commit,
+    drawKeepingUndone: (draw) => edit ? edit.drawKeepingUndone(draw) : draw(),
     recordDomResult: (result) => {
       changed ||= result?.changed === true;
+      if (result?.changed) edit?.markSaved();
     },
     finish: (domChanged = false) => {
       if (pendingResults !== 0) return { ok: true, changed: false };
@@ -44746,7 +44850,8 @@ function runGestureTransaction(tx) {
   logCommit("start", { label: tx.label, coalesceKey });
   tx.settle();
   logCommit("settled", { label: tx.label, coalesceKey });
-  const before = !tx.skipPixelAssert ? readPixelRect(tx.element) : null;
+  const measure = () => tx.draw ? tx.draw(() => readPixelRect(tx.element)) : readPixelRect(tx.element);
+  const before = !tx.skipPixelAssert ? measure() : null;
   const commit = (commitMutation) => {
     const wrapped = (selection, mutation, options) => {
       mutationCount += 1;
@@ -44767,7 +44872,7 @@ function runGestureTransaction(tx) {
     const durationMs = Math.round(performance.now() - startedAt2);
     logCommit("persisted", { label: tx.label, coalesceKey });
     if (before) {
-      const after = readPixelRect(tx.element);
+      const after = measure();
       const delta = pixelDelta(before, after);
       if (exceedsPixelTolerance(delta)) {
         logCommit("persist-changed-pixels", { label: tx.label, before, after, delta });
@@ -81180,13 +81285,22 @@ async function runMutationRequest(mutations, options, showToast, request) {
 function finishUnchangedMutation(iframe, result, options, reloadPreview) {
   if (result.changed !== false) return false;
   if (!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, redraw) {
+  if (options.pendingEdit) options.pendingEdit.drawUnlessUndone(redraw);
+  else redraw();
+}
 function refreshMutationPreview(iframe, result, options, reloadPreview, onCacheInvalidate, nestedFiles) {
-  options.beforeReload?.();
-  applyPreviewSync(iframe, result, options, reloadPreview, nestedFiles);
+  redrawUnlessPaintedBack(options, () => {
+    options.beforeReload?.();
+    applyPreviewSync(iframe, result, options, reloadPreview, nestedFiles);
+  });
   onCacheInvalidate();
 }
 function isActiveCommitTarget(projectIdRef, activeCompPathRef, projectId, compositionPath) {
@@ -82208,12 +82322,10 @@ function useGsapAwareGroupMove({
         renderOnCommit = index === lastScriptWrite;
         const plain = offsetMembers.get(selection);
         if (plain !== void 0) {
-          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;
         }
@@ -82341,7 +82453,7 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
-async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset) {
+async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run()) {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -82437,7 +82549,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     scaleDraftEl = el;
     committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
-      const dropRect = el.getBoundingClientRect();
+      const dropRect = draw(() => el.getBoundingClientRect());
       scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
     }
   } else {
@@ -82449,39 +82561,50 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   }
   const finalizeScaleResizeCommit = async () => {
     if (!scaleDraftEl) return false;
-    clearStudioBoxSize(scaleDraftEl);
-    if (!scaleDraftDropPoint || !selector) return false;
-    if (committedScale) {
-      setElementGsapScale(scaleDraftEl, committedScale.x, committedScale.y);
-    }
-    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
-    const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
-      selection.element,
-      { x: 0, y: 0 },
-      gsapPos
-    );
-    const base2 = { x: baseGsapX, y: baseGsapY };
-    setElementGsapPosition(scaleDraftEl, base2.x, base2.y);
-    const post2 = scaleDraftEl.getBoundingClientRect();
-    const residual = { x: scaleDraftDropPoint.x - post2.x, y: scaleDraftDropPoint.y - post2.y };
-    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return false;
-    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
-      logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base2 });
-      return true;
+    const draftEl = scaleDraftEl;
+    if (!scaleDraftDropPoint || !selector) {
+      draw(() => clearStudioBoxSize(draftEl));
+      return false;
     }
-    const corrected = {
-      x: roundTo3(base2.x + residual.x),
-      y: roundTo3(base2.y + residual.y)
-    };
-    logResize("scale-finalize", {
-      dropPoint: scaleDraftDropPoint,
-      post: { x: post2.x, y: post2.y },
-      residual,
-      gsapPos,
-      base: base2,
-      corrected
+    const dropPoint = scaleDraftDropPoint;
+    const measured = draw(() => {
+      clearStudioBoxSize(draftEl);
+      if (committedScale) {
+        setElementGsapScale(draftEl, committedScale.x, committedScale.y);
+      }
+      const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+      const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
+        selection.element,
+        { x: 0, y: 0 },
+        gsapPos
+      );
+      const base3 = { x: baseGsapX, y: baseGsapY };
+      setElementGsapPosition(draftEl, base3.x, base3.y);
+      const post2 = draftEl.getBoundingClientRect();
+      const residual = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
+      if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return null;
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base3 });
+        return "settled";
+      }
+      const corrected2 = {
+        x: roundTo3(base3.x + residual.x),
+        y: roundTo3(base3.y + residual.y)
+      };
+      logResize("scale-finalize", {
+        dropPoint,
+        post: { x: post2.x, y: post2.y },
+        residual,
+        gsapPos,
+        base: base3,
+        corrected: corrected2
+      });
+      setElementGsapPosition(draftEl, corrected2.x, corrected2.y);
+      return { base: base3, corrected: corrected2 };
     });
-    setElementGsapPosition(scaleDraftEl, corrected.x, corrected.y);
+    if (measured === null) return false;
+    if (measured === "settled") return true;
+    const { base: base2, corrected } = measured;
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved2?.animations ?? animations;
     const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
     const positionTween = pickClosestToPlayhead(
@@ -82932,8 +83055,10 @@ 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) {
@@ -83006,11 +83131,8 @@ function useGsapAwareEditing({
           );
           await saveMove(dragOutcome, async () => {
             const plainAfterSettle = editsPlainCss(selection.element, "move");
-            anchorMove = stageElementPositionOffset(
-              selection,
-              offset,
-              plainAfterSettle,
-              coalesceKey
+            anchorMove = writes.drawKeepingUndone(
+              () => stageElementPositionOffset(selection, offset, plainAfterSettle, coalesceKey)
             );
           });
         }
@@ -83018,15 +83140,18 @@ function useGsapAwareEditing({
       await runGestureTransaction({
         element: selection.element,
         label: "Resize layer",
+        draw: writes.drawKeepingUndone,
         settle: () => {
           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) {
@@ -83039,16 +83164,13 @@ function useGsapAwareEditing({
                 previewIframeRef.current,
                 commitMutation2,
                 makeFetchFallback(selection),
-                offset
+                offset,
+                writes.drawKeepingUndone
               );
               assertGsapEditPersisted(outcome);
               if (outcome.status === "element-size") {
-                const result = await handleDomBoxSizeCommit(
-                  selection,
-                  next,
-                  void 0,
-                  void 0,
-                  coalesceKey
+                const result = await writes.drawKeepingUndone(
+                  () => handleDomBoxSizeCommit(selection, next, void 0, void 0, coalesceKey)
                 );
                 writes.recordDomResult(result);
               } else cropUndoKey = coalesceKey;
@@ -83072,11 +83194,8 @@ function useGsapAwareEditing({
           const anchorResult = await anchorMove?.save();
           writes.recordDomResult(anchorResult);
           if (cropUndoKey) {
-            const cropResult = await saveCropResize(
-              stageCrop,
-              selection,
-              commitPositionPatchToHtml,
-              cropUndoKey
+            const cropResult = await writes.drawKeepingUndone(
+              () => saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey)
             );
             writes.recordDomResult(cropResult);
           }