@hyperframes/studio 0.8.98 → 0.8.100

package/src/hooks/gsapResizeIntercept.ts

@@ -31,7 +31,7 @@ import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
-import { roundTo3 } from "../utils/rounding";
+import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { resolveGroupTween } from "./gsapRuntimeBridge";
 import { logResize } from "../utils/resizeDebug";
 import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutcome";
@@ -287,8 +287,8 @@ export async function tryGsapResizeIntercept(
     }
   } else {
     resizeProps = {
-      width: Math.round(size.width),
-      height: Math.round(size.height),
+      width: roundToLayoutPx(size.width),
+      height: roundToLayoutPx(size.height),
     };
   }
   // Finalize a scale-route commit: tear down the gesture's inline width/height
@@ -358,8 +358,8 @@ export async function tryGsapResizeIntercept(
     // persisted file agree exactly (commitStaticGsapPosition composes the same
     // rounded value from this delta).
     const corrected = {
-      x: Math.round(base.x + residual.x),
-      y: Math.round(base.y + residual.y),
+      x: roundTo3(base.x + residual.x),
+      y: roundTo3(base.y + residual.y),
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -319,6 +319,17 @@ describe("tryGsapRotationIntercept — instant holds", () => {
     expect(commitMutation).not.toHaveBeenCalled();
   });
 
+  it("commits the exact angle the draft showed", async () => {
+    const commitMutation = vi.fn();
+
+    await tryGsapRotationIntercept(selection, 75.25, [], null, commitMutation);
+    expect(commitMutation).toHaveBeenCalledWith(
+      selection,
+      expect.objectContaining({ type: "add", properties: { rotation: 75.25 } }),
+      expect.anything(),
+    );
+  });
+
   it("does not let an unrelated helper-authored skew tween block 2D rotation", async () => {
     const helperSkew = {
       id: "#puck-b-to-rotation",

package/src/hooks/gsapRuntimeBridge.ts

@@ -27,6 +27,7 @@ import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { isGestureTransactionCommit } from "./gestureTransaction";
 import { tweenReach, tweensForThisElement } from "./gsapTweenReach";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
+import { roundTo3 } from "../utils/rounding";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import {
@@ -34,7 +35,7 @@ import {
   pickClosestToPlayhead,
   readGsapPositionFromIframe,
 } from "./gsapPositionDetection";
-import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import { hasNonHoldTweenForElement, POSITION_CHANNELS } from "./gsapRuntimeKeyframes";
 import { getAnimationsForElement } from "./gsapElementMatch";
 import {
   animationWritesAnyProperty,
@@ -42,22 +43,6 @@ import {
   type GsapEditOutcome,
 } from "./gsapEditOutcome";
 
-// Position channels — used to scope the "has a live position tween?" check so a
-// sibling rotation/scale animation never forces a static position hold into the
-// keyframe branch (which corrupts it into a frozen duration-0 keyframed tween).
-export const POSITION_CHANNELS: string[] = [
-  "x",
-  "y",
-  "xPercent",
-  "yPercent",
-  "left",
-  "top",
-  // GSAP normalizes translateX/Y to x/y at play time, but readTween reads the
-  // AUTHORED shape — include them so a hand-authored translateX/Y position tween
-  // still counts as a live position tween.
-  "translateX",
-  "translateY",
-];
 const POSITION_CHANNEL_SET = new Set<string>(POSITION_CHANNELS);
 
 const ROTATION_CHANNELS: string[] = ["rotation", "rotationX", "rotationY", "rotationZ"];
@@ -446,7 +431,7 @@ export async function tryGsapRotationIntercept(
   // `angle` is the ABSOLUTE target rotation resolved by the gesture (gsap base +
   // pointer sweep) or the inspector — so it IS the new rotation. No base re-add: the
   // gesture's live preview already gsap.set this value (single source of truth).
-  const newRotation = Math.round(angle);
+  const newRotation = roundTo3(angle);
   // STATIC case (single source of truth = GSAP timeline): no rotation tween, so the
   // angle belongs in a `tl.set("#el",{rotation})`, not a keyframe conversion —
   // mirroring the static position set. Idempotent: re-rotate updates an existing

package/src/hooks/gsapRuntimeKeyframes.test.ts

@@ -167,6 +167,13 @@ describe("hasNonHoldTweenForElement — strict live-tween existence (drag stale-
     expect(hasNonHoldTweenForElement(fakeIframe(el, [liveTween]), "#puck-b")).toBe(true);
   });
 
+  it("true when the tween sits in a later timeline (a soft reload re-adds main last)", () => {
+    const iframe = fakeIframe(el, []);
+    const win = iframe.contentWindow as unknown as { __timelines: Record<string, unknown> };
+    win.__timelines.main = { getChildren: () => [liveTween] };
+    expect(hasNonHoldTweenForElement(iframe, "#puck-b")).toBe(true);
+  });
+
   it("false when only a zero-duration hold/set remains (post delete-all)", () => {
     expect(hasNonHoldTweenForElement(fakeIframe(el, [holdSet]), "#puck-b")).toBe(false);
   });

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -200,7 +200,7 @@ function varsCarryChannel(vars: Record<string, unknown> | undefined, channels: s
 /**
  * Like `varsCarryChannel` but for a keyframe tween: the channels live inside the
  * keyframe steps (`vars.keyframes`), not as own props of `vars`. Handles the object
- * form (`{ "0%": {...} }`) and the array form (`[{...}, ...]`).
+ * form (`{ "0%": {...} }`), the array form (`[{...}, ...]`) and the object-of-arrays form.
  */
 function keyframeVarsCarryChannel(
   vars: Record<string, unknown> | undefined,
@@ -208,6 +208,8 @@ function keyframeVarsCarryChannel(
 ): boolean {
   const kf = vars?.keyframes;
   if (!kf || typeof kf !== "object") return false;
+  if (!Array.isArray(kf) && channels.some((ch) => Object.prototype.hasOwnProperty.call(kf, ch)))
+    return true;
   const steps = Array.isArray(kf) ? kf : Object.values(kf);
   return steps.some(
     (step) =>
@@ -375,8 +377,9 @@ export function readRuntimeKeyframes(
 }
 
 /**
- * Whether the live timeline has at least one NON-HOLD tween (non-zero duration,
- * not the studio position-hold `set`) targeting `selector`. Stricter than a
+ * Whether any live timeline has at least one NON-HOLD tween (non-zero duration,
+ * not the studio position-hold `set`) targeting `selector`. Every timeline is read:
+ * a soft reload re-adds the rebuilt composition's key last. Stricter than a
  * truthy `readRuntimeKeyframes`: that returns a flat read for any property-bearing
  * tween, so it can't distinguish a real animation from a leftover hold/marker.
  * The drag's stale-parse guard needs this exact distinction — after a delete-all
@@ -387,37 +390,82 @@ export function readRuntimeKeyframes(
  * rotation/scale tween doesn't make a static position hold enter the keyframe
  * branch.
  */
-// fallow-ignore-next-line complexity
 export function hasNonHoldTweenForElement(
   iframe: HTMLIFrameElement | null,
   selector: string,
   compositionId?: string,
   channels?: string[],
 ): boolean {
-  const timelines = timelinesOf(iframe);
-  if (!timelines) return false;
-  const tlId =
-    compositionId ||
-    Object.keys(timelines).find((k) => typeof timelines[k]?.getChildren === "function");
-  if (!tlId) return false;
-  const timeline = timelines[tlId];
-  if (!timeline?.getChildren) return false;
-
   let targetEl: Element | null = null;
   try {
     targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
   } catch {
     return false;
   }
-  if (!targetEl) return false;
+  return !!targetEl && hasNonHoldTween(timelinesOf(iframe), targetEl, channels, compositionId);
+}
 
-  // fallow-ignore-next-line code-duplication
-  for (const tween of timeline.getChildren(true)) {
-    if (!tween.vars || !matchesElement(tween, targetEl)) continue;
-    const dur = typeof tween.duration === "function" ? tween.duration() : 0;
-    if (isZeroDurationSet(dur)) continue; // skip hold/set tweens (see isZeroDurationSet)
-    const read = readTween(tween.vars);
-    if (read && (!channels || readCarriesChannel(read, channels))) return true;
+// A sibling rotation/scale tween must never push a static position hold into the keyframe branch.
+export const POSITION_CHANNELS: string[] = [
+  "x",
+  "y",
+  "xPercent",
+  "yPercent",
+  "left",
+  "top",
+  // readTween reads the authored translateX/Y; GSAP normalizes them to x/y only at play time.
+  "translateX",
+  "translateY",
+];
+const MOVE_CHANNELS = [...POSITION_CHANNELS, "motionPath"];
+
+/** Whether a live timeline tween or hold writes any of `channels` on `el`. Sync, no fetch. */
+function gsapWritesChannels(el: Element, channels: string[]): boolean {
+  const win = el.ownerDocument.defaultView as { __timelines?: Record<string, RuntimeTimeline> };
+  return Object.values(win?.__timelines ?? {}).some((tl) =>
+    (tl?.getChildren?.(true) ?? []).some(
+      (tween) =>
+        !!tween.vars &&
+        matchesElement(tween, el) &&
+        (channels.some((ch) => ch in tween.vars!) ||
+          keyframeVarsCarryChannel(tween.vars, channels)),
+    ),
+  );
+}
+
+/** GSAP owns this element's position: a tween or hold writes it, or GSAP already renders its
+ *  transform (a CSS translate would then apply twice). Everything else moves by plain CSS. */
+export function gsapWritesPosition(el: Element): boolean {
+  const cache = (el as { _gsap?: { renderTransform?: unknown } })._gsap;
+  return !!cache?.renderTransform || gsapWritesChannels(el, MOVE_CHANNELS);
+}
+
+/** `hasNonHoldTweenForElement` for an element in hand, read from its own window's timelines. */
+export function elementHasNonHoldTween(el: Element, channels?: string[]): boolean {
+  const win = el.ownerDocument.defaultView as {
+    __timelines?: Record<string, RuntimeTimeline>;
+  } | null;
+  return hasNonHoldTween(win?.__timelines ?? null, el, channels);
+}
+
+// fallow-ignore-next-line complexity
+function hasNonHoldTween(
+  timelines: Record<string, RuntimeTimeline> | null,
+  targetEl: Element,
+  channels?: string[],
+  compositionId?: string,
+): boolean {
+  if (!timelines) return false;
+  for (const tlId of compositionId ? [compositionId] : Object.keys(timelines)) {
+    // fallow-ignore-next-line code-duplication
+    for (const tween of timelines[tlId]?.getChildren?.(true) ?? []) {
+      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+      if (isZeroDurationSet(dur)) continue; // skip hold/set tweens (see isZeroDurationSet)
+      if (channels && keyframeVarsCarryChannel(tween.vars, channels)) return true;
+      const read = readTween(tween.vars);
+      if (read && (!channels || readCarriesChannel(read, channels))) return true;
+    }
   }
   return false;
 }

package/src/hooks/timelineTimingSync.ts

@@ -3,7 +3,11 @@
 // edit's undo history, and swapping the rewritten script into the live preview
 // without a full iframe reload when possible.
 import { type TimelineElement, usePlayerStore } from "../player/store/playerStore";
-import { applySoftReload, applySoftReloadFinalization } from "../utils/gsapSoftReload";
+import {
+  applySoftReload,
+  applySoftReloadFinalization,
+  extractGsapScriptText,
+} from "../utils/gsapSoftReload";
 import { furthestClipEndFromDocument } from "../player/lib/timelineElementHelpers";
 import type { RecordEditInput } from "../utils/studioFileHistory";
 import { patchDocumentRootDuration } from "./timelineEditingGsap";
@@ -15,6 +19,9 @@ import {
   rollbackOwnedMutation,
   type GsapMutationStatus,
 } from "./gsapMutationClient";
+import type { CutoverResult } from "../utils/sdkEditTransaction";
+import { findTimelineScript } from "@hyperframes/core/gsap-parser-acorn";
+import { walkCompositionDescendants } from "@hyperframes/parsers/hf-ids";
 import {
   serializeStudioFileMutations,
   type StudioProjectFileWriter,
@@ -365,6 +372,21 @@ export async function scaleGsapPositions(
   );
 }
 
+/** The GSAP sync a committed SDK timing write made, or null when its timeline script is unchanged. */
+export function sdkTimingGsapSync(
+  result: Extract<CutoverResult, { status: "committed" }>,
+): GsapMutationStatus | null {
+  const timelineText = (html: string) => {
+    const scripts: Element[] = [];
+    walkCompositionDescendants(new DOMParser().parseFromString(html, "text/html"), (el) => {
+      if (el.tagName.toLowerCase() === "script") scripts.push(el);
+    });
+    return findTimelineScript(scripts)?.textContent ?? null;
+  };
+  if (timelineText(result.before) === timelineText(result.after)) return null;
+  return { mutated: true, scriptText: extractGsapScriptText(result.after) };
+}
+
 /** Timing delta a single-clip edit applies to its GSAP tweens. */
 export type SingleClipGsapEdit =
   | { kind: "shift"; delta: number }
@@ -395,8 +417,9 @@ export function finishClipTimingFallback(input: {
   recordEdit: (edit: RecordEditInput) => Promise<void>;
   writeProjectFile: StudioProjectFileWriter;
   edit: SingleClipGsapEdit;
+  sdkGsap?: GsapMutationStatus | null;
 }): Promise<void> {
-  const { projectId, targetPath, domId, edit } = input;
+  const { projectId, targetPath, domId, edit, sdkGsap } = input;
   const timingChanged =
     edit.kind === "shift"
       ? edit.delta !== 0
@@ -418,8 +441,9 @@ export function finishClipTimingFallback(input: {
   return finishTimelineTimingFallback({
     iframe: input.iframe,
     reloadPreview: input.reloadPreview,
-    gsapMutation:
-      timingChanged && domId && projectId
+    gsapMutation: sdkGsap
+      ? () => Promise.resolve(sdkGsap)
+      : timingChanged && domId && projectId
         ? () =>
             foldGsapMutationIntoHistory({
               writeFile: input.writeProjectFile,
@@ -463,12 +487,24 @@ export async function finishGroupTimingGsapFallback<C extends { element: Timelin
   resolveChangePath: (element: TimelineElement) => string;
   /** Per-change GSAP mutation; return null to skip a change with no timing delta. */
   mutateChange: (change: C, changePath: string) => Promise<GsapMutationStatus> | null;
+  sdkGsap?: GsapMutationStatus | null;
 }): Promise<void> {
   const activePath = input.activeCompPath || "index.html";
   const otherFileChanged = input.changes.some(
     (change) => input.resolveChangePath(change.element) !== activePath,
   );
   const onGsapError = (err: unknown) => console.error(`[Timeline] ${input.errorLabel}`, err);
+  const { sdkGsap } = input;
+  if (sdkGsap) {
+    await finishTimelineTimingFallback({
+      iframe: input.iframe,
+      reloadPreview: input.reloadPreview,
+      gsapMutation: () => Promise.resolve(sdkGsap),
+      onGsapError,
+      rebindWhenUnmutated: !otherFileChanged,
+    });
+    return;
+  }
   await finishTimelineTimingFallback({
     iframe: input.iframe,
     reloadPreview: input.reloadPreview,

package/src/hooks/useAnimatedPropertyCommit.test.tsx

@@ -6,7 +6,9 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
-import { mountReactHarness } from "./domSelectionTestHarness";
+import { mountReactHarness, withInlineLayoutBox } from "./domSelectionTestHarness";
+import { writeSizeWithCrop } from "../components/editor/cropResize";
+import type { CommitMutation } from "./gsapScriptCommitTypes";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -362,3 +364,40 @@ describe("commitStaticSet group routing", () => {
     act(() => root.unmount());
   });
 });
+
+describe("useAnimatedPropertyCommit — a size write and its crop are one undo step", () => {
+  it.each([[{ width: 450 }], [{ x: 10, width: 450 }]])("%o on a static element", async (props) => {
+    const element = withInlineLayoutBox(document.createElement("div"));
+    element.id = "box";
+    element.style.cssText = "width: 300px; height: 200px; clip-path: inset(0px 60px 0px 0px)";
+    document.body.append(element);
+    const sel = { ...selection, element } as DomEditSelection;
+    const keys: unknown[] = [];
+    const land = async (options: { coalesceKey?: string }) => {
+      keys.push(options.coalesceKey);
+      element.style.width = "450px";
+    };
+    const mutation: CommitMutation = (_s, _m, options) => land(options);
+    mutation.batch = (_calls, options) => land(options);
+    let raw!: ReturnType<typeof useAnimatedPropertyCommit>["commitAnimatedProperties"];
+    function Harness() {
+      raw = useAnimatedPropertyCommit({
+        selectedGsapAnimations: [],
+        gsapCommitMutation: mutation,
+        addGsapAnimation: vi.fn(),
+        convertToKeyframes: vi.fn(),
+        previewIframeRef: { current: null },
+        bumpGsapCache: vi.fn(),
+      }).commitAnimatedProperties;
+      return null;
+    }
+    const root = mountReactHarness(<Harness />);
+    const patch = vi.fn().mockResolvedValue(undefined);
+    await writeSizeWithCrop(sel, props, mutation, patch, (keyed) => raw(sel, props, keyed));
+
+    const cropKey = patch.mock.calls[0]![2].coalesceKey;
+    expect(patch.mock.calls[0]![1][0]).toMatchObject({ value: "inset(0px 90px 0px 0px)" });
+    expect(keys).toEqual([cropKey]);
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -431,8 +431,12 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
   const commitAnimatedProperties = useCallback(
     // This is the single routing boundary for set, keyframe, whole-tween, and first-group writes.
     // fallow-ignore-next-line complexity
-    async (selection: DomEditSelection, props: Record<string, number | string>): Promise<void> => {
-      if (!gsapCommitMutation) return;
+    async (
+      selection: DomEditSelection,
+      props: Record<string, number | string>,
+      commit: CommitMutation | null = gsapCommitMutation,
+    ): Promise<void> => {
+      if (!commit) return;
       const propEntries = Object.entries(props);
       if (propEntries.length === 0) return;
       const primaryProp = propEntries[0]![0];
@@ -490,7 +494,7 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
               ),
               pct,
               iframe,
-              { commitMutation: gsapCommitMutation },
+              { commitMutation: commit },
               `Edit ${primaryProp} (whole animation)`,
             );
             return;
@@ -503,7 +507,7 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
             primaryProp,
             selector,
             iframe,
-            gsapCommitMutation,
+            commit,
           );
           return;
         }
@@ -515,13 +519,7 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
         // must update the position set AND create a size set atomically rather
         // than contaminating the first set with a foreign property group.
         if (!elementHasKeyframes) {
-          await commitStaticSet(
-            selection,
-            propEntries,
-            selector,
-            selectedGsapAnimations,
-            gsapCommitMutation,
-          );
+          await commitStaticSet(selection, propEntries, selector, selectedGsapAnimations, commit);
           return;
         }
 
@@ -534,7 +532,7 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
             propEntries,
             selector,
             selectedGsapAnimations,
-            gsapCommitMutation,
+            commit,
           );
           return;
         }
@@ -566,7 +564,7 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
                   { percentage: 0, properties: { ...newProps, _auto: 1 } },
                   { percentage: pct, properties: newProps },
                 ];
-          await gsapCommitMutation(
+          await commit(
             selection,
             {
               type: "add-with-keyframes",

package/src/hooks/useCropOverlay.ts

@@ -1,6 +1,9 @@
 import type { OverlayRect } from "../components/editor/domEditOverlayGeometry";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import { readElementCropInsets } from "../components/editor/domEditOverlayCrop";
+import {
+  isElementCropLifted,
+  readElementCropInsets,
+} from "../components/editor/domEditOverlayCrop";
 
 /** Selection-box crop hug: the outline that makes the selection box hug the
  *  element's committed inset crop. Crop is always-on (no mode) — the draggable
@@ -13,7 +16,10 @@ export function useCropOverlay(params: {
 }) {
   const { selection, overlayRect } = params;
 
-  const cropInsets = selection ? readElementCropInsets(selection.element) : null;
+  const cropInsets =
+    selection && !isElementCropLifted(selection.element)
+      ? readElementCropInsets(selection.element)
+      : null;
   const hasCropInsets = Boolean(
     cropInsets &&
     (cropInsets.top > 0 || cropInsets.right > 0 || cropInsets.bottom > 0 || cropInsets.left > 0),

package/src/hooks/useDomEditCommits.test.tsx

@@ -228,7 +228,9 @@ function renderDomEditCommits(
       applyDomSelection: vi.fn(),
       clearDomSelection: vi.fn(),
       refreshDomEditSelectionFromPreview: vi.fn(),
-      buildDomSelectionFromTarget: vi.fn(async () => null),
+      buildDomSelectionFromTarget: vi.fn(async (target: HTMLElement) =>
+        target === selection.element ? selection : null,
+      ),
       onTrySdkPersist: options.onTrySdkPersist,
       readOnlyPreview: false,
     });
@@ -893,7 +895,7 @@ describe("useDomEditCommits rich-text persist handling", () => {
     }
   });
 
-  it("does not retarget a commit onto a replacement preview node", async () => {
+  it("does not retarget a commit onto a replacement preview node, and says the text was not saved", async () => {
     const fetchMock = stubPatchFetch({ ok: true, changed: true, matched: true });
     const html = '<span style="color: blue">After</span>';
     const { iframe, element } = createPreviewElement(`<div data-hf-id="hf-card">${html}</div>`);
@@ -902,6 +904,7 @@ describe("useDomEditCommits rich-text persist handling", () => {
     replacement.dataset.hfId = "hf-card";
     replacement.innerHTML = "Reloaded elsewhere";
     element.replaceWith(replacement);
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
 
     try {
       await act(async () => {
@@ -914,8 +917,14 @@ describe("useDomEditCommits rich-text persist handling", () => {
 
       expect(replacement.innerHTML).toBe("Reloaded elsewhere");
       expect(fetchMock).not.toHaveBeenCalled();
-      expect(rendered.showToast).not.toHaveBeenCalled();
+      expect(rendered.showToast).toHaveBeenCalledWith(
+        expect.stringMatching(
+          /Couldn't save the text edit: the text's element is gone from the preview/,
+        ),
+        "error",
+      );
     } finally {
+      errorSpy.mockRestore();
       rendered.cleanup();
     }
   });
@@ -1204,7 +1213,12 @@ describe("useDomEditCommits style persist handling", () => {
     const fetchMock = stubPatchFetch({ ok: true, changed: true, matched: true });
     const { iframe, element } = createPreviewElement();
     const rendered = renderDomEditCommits(createSelection(element), iframe, {
-      onTrySdkPersist: async () => ({ status: "committed", version: "sdk-version-2" }),
+      onTrySdkPersist: async () => ({
+        status: "committed",
+        version: "sdk-version-2",
+        before: "",
+        after: "",
+      }),
     });
 
     try {

package/src/hooks/useDomEditCommits.ts

@@ -7,6 +7,7 @@ import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSave
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import type { CommitDomEditPatchBatches } from "./domEditCommitTypes";
+import type { ResolveDomSelectionOptions } from "./useDomSelectionTypes";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import { DomEditPersistUnsafeValueError } from "./domEditPersistFailure";
 import { useDomEditPersist, type RecordEditInput } from "./useDomEditPersist";
@@ -46,7 +47,7 @@ export interface UseDomEditCommitsParams {
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => void;
   buildDomSelectionFromTarget: (
     target: HTMLElement,
-    options?: { preferClipAncestor?: boolean },
+    options?: ResolveDomSelectionOptions,
   ) => Promise<DomEditSelection | null>;
   /** Resync the in-memory SDK session after a SERVER-side write (NOT the SDK
    * path, whose session is already current) so a later SDK edit doesn't
@@ -314,6 +315,7 @@ export function useDomEditCommits({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,

package/src/hooks/useDomEditPositionPatchCommit.ts

@@ -12,12 +12,12 @@ interface UseDomEditPositionPatchCommitParams {
   showToast: (message: string, tone?: "error" | "info") => void;
 }
 
-interface PositionPatchOptions {
+type PositionPatchOptions = {
   label: string;
   coalesceKey: string;
   coalesceMs?: number;
   skipRefresh?: boolean;
-}
+};
 
 export function useDomEditPositionPatchCommit({
   activeCompPath,

package/src/hooks/useDomEditSession.ts

@@ -230,6 +230,7 @@ export function useDomEditSession({
     handleDomAddTextField,
     handleDomRemoveTextField,
     stageElementPositionOffset,
+    commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
@@ -490,6 +491,7 @@ export function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
     setArcPath,