@hyperframes/studio 0.8.104 → 0.8.106

package/src/hooks/useClipboard.ts

@@ -30,6 +30,26 @@ import {
 } from "../utils/authoredSource";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 
+type InPlace = { inPlace?: boolean };
+
+const pasteStart = (
+  payload: Extract<ClipboardPayload, { kind: "timeline-clip" }>,
+  targetPath: string,
+  playhead: number,
+  options?: InPlace,
+) =>
+  options?.inPlace && payload.copiedInComposition === targetPath
+    ? Math.min(...payload.clips.map((clip) => clip.start))
+    : playhead;
+
+const pasteWords = (payload: ClipboardPayload) =>
+  payload.kind === "timeline-clip"
+    ? {
+        label: clipLabel("Paste", payload.clips.length),
+        toast: clipToast("Pasted", payload.clips.length),
+      }
+    : { label: "Paste element", toast: "Pasted element" };
+
 interface RecordEditInput {
   label: string;
   coalesceKey?: string;
@@ -160,10 +180,17 @@ const hfIdsInFile = (content: string) =>
 export function pasteElementHtml(
   content: string,
   payload: { html: string; originSelector?: string; originSelectorIndex?: number },
+  fromThisFile = false,
 ): string {
   const reminted = remintHfIds(payload.html, new DOMParser(), hfIdsInFile(content));
   const deduped = deduplicateIds(reminted, collectHtmlIds(content));
-  return insertAsSibling(content, deduped, payload.originSelector, payload.originSelectorIndex);
+  const result = insertAsSibling(
+    content,
+    deduped,
+    payload.originSelector,
+    payload.originSelectorIndex,
+  );
+  return fromThisFile ? carryLook(result, renamedIds(reminted, deduped), 0) : result;
 }
 
 /** Shared insertion path for paste and duplicate, anchored at the playhead or the selection's end. Returns the
@@ -306,6 +333,7 @@ export function useClipboard({
         clips,
         sourceFile,
         projectId: projectIdRef.current ?? undefined,
+        copiedInComposition: activeCompPath || "index.html",
       };
     });
   }, [activeCompPath, findSelectedClips, readClips, showToast]);
@@ -324,6 +352,7 @@ export function useClipboard({
           kind: "dom-element",
           html: savedMarkupElseLive(parseSavedSource(content), live, sourceFile),
           sourceFile,
+          projectId: projectIdRef.current ?? undefined,
           originSelector: domSelection.selector,
           originSelectorIndex: domSelection.selectorIndex,
         };
@@ -361,134 +390,136 @@ export function useClipboard({
 
   // Two independent paste modes (timeline clip vs DOM element) behind one guarded save.
   // fallow-ignore-next-line complexity
-  const handlePaste = useCallback(async () => {
-    const payload = await clipboardRef.current;
-    if (!payload) {
-      showToast("Nothing to paste.", "info");
-      return;
-    }
-    const pid = projectIdRef.current;
-    if (!pid) return;
-
-    const targetPath = activeCompPath || "index.html";
-    try {
-      let pastedIds: string[] = [];
-      const paste = (originalContent: string) => {
-        if (payload.kind !== "timeline-clip") return pasteElementHtml(originalContent, payload);
-        const { currentTime, elements } = usePlayerStore.getState();
-        const pasted = pasteTimelineClips(
-          originalContent,
-          payload.clips,
-          currentTime,
-          elements,
-          payload.sourceFile === targetPath && payload.projectId === pid,
-        );
-        pastedIds = pasted.ids;
-        // A clip pasted past the current composition end would exist in the
-        // file but never appear on the timeline or in playback/export (the
-        // root's data-duration is what actually bounds the render).
-        return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
-      };
-
-      const label =
-        payload.kind === "timeline-clip"
-          ? clipLabel("Paste", payload.clips.length)
-          : "Paste element";
-
-      await saveProjectFilesWithHistory({
-        projectId: pid,
-        label,
-        files: { [targetPath]: paste },
-        readFile: (path) => readFileContent(pid, path),
-        writeFile: writeProjectFile,
-        recordEdit,
-      });
-
-      // CapCut: the pasted clip(s) become the selection; the playhead does not
-      // move. reloadPreview is a bare refresh-key bump with no selection
-      // snapshot of its own; calling setSelection before it is what makes the
-      // post-reload store state land on the pasted ids instead of stale ones.
-      if (pastedIds.length > 0) {
-        usePlayerStore.getState().setSelection(pastedIds.map((id) => elementKey(id, targetPath)));
+  const handlePaste = useCallback(
+    async (options?: InPlace) => {
+      const payload = await clipboardRef.current;
+      if (!payload) {
+        showToast("Nothing to paste.", "info");
+        return;
       }
-      reloadPreview();
-      showToast(
-        payload.kind === "timeline-clip"
-          ? clipToast("Pasted", payload.clips.length)
-          : "Pasted element",
-        "info",
-      );
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to paste";
-      showToast(message);
-    }
-  }, [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile]);
+      const pid = projectIdRef.current;
+      if (!pid) return;
+
+      const targetPath = activeCompPath || "index.html";
+      try {
+        let pastedIds: string[] = [];
+        const fromThisFile = payload.sourceFile === targetPath && payload.projectId === pid;
+        const paste = (originalContent: string) => {
+          if (payload.kind !== "timeline-clip")
+            return pasteElementHtml(originalContent, payload, fromThisFile);
+          const { currentTime, elements } = usePlayerStore.getState();
+          const pasted = pasteTimelineClips(
+            originalContent,
+            payload.clips,
+            pasteStart(payload, targetPath, currentTime, options),
+            elements,
+            fromThisFile,
+          );
+          pastedIds = pasted.ids;
+          // A clip pasted past the current composition end would exist in the
+          // file but never appear on the timeline or in playback/export (the
+          // root's data-duration is what actually bounds the render).
+          return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+        };
 
-  // Duplicates the current selection in place, immediately after it, without
-  // touching the clipboard — a pending copy must survive a Cmd+D. Shares
-  // pasteTimelineClips with handlePaste; only the anchor and clip source
-  // differ (the selection's own end here, the playhead there).
-  const handleDuplicate = useCallback(async (): Promise<boolean> => {
-    const targets = findSelectedClips();
-    if (!targets) return false;
-    const pid = projectIdRef.current;
-    if (!pid) return false;
-
-    const { elements } = targets;
-    const pathOf = (el: TimelineElement) => el.sourceFile || activeCompPath || "index.html";
-    const targetPath = pathOf(elements[0]!);
-    // The copy lands in targetPath's own clock, so anchor and lane check are local to it.
-    const anchorTime = toAuthoredStart(
-      elements[0]!,
-      Math.max(...elements.map((el) => el.start + el.duration)),
-    );
+        const { label, toast } = pasteWords(payload);
+
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label,
+          files: { [targetPath]: paste },
+          readFile: (path) => readFileContent(pid, path),
+          writeFile: writeProjectFile,
+          recordEdit,
+        });
+
+        // CapCut: the pasted clip(s) become the selection; the playhead does not
+        // move. reloadPreview is a bare refresh-key bump with no selection
+        // snapshot of its own; calling setSelection before it is what makes the
+        // post-reload store state land on the pasted ids instead of stale ones.
+        if (pastedIds.length > 0) {
+          usePlayerStore.getState().setSelection(pastedIds.map((id) => elementKey(id, targetPath)));
+        }
+        reloadPreview();
+        showToast(toast, "info");
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to paste";
+        showToast(message);
+      }
+    },
+    [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile],
+  );
 
-    try {
-      const clips = await readClips(targets);
-      let ids: string[] = [];
-      const duplicate = (originalContent: string) => {
-        const liveElements = usePlayerStore
-          .getState()
-          .elements.filter((el) => pathOf(el) === targetPath)
-          .map((el) => ({ ...el, start: toAuthoredStart(el, el.start) }));
-        const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements, true);
-        ids = pasted.ids;
-        return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
-      };
+  // Duplicates the selection right after it, or with `inPlace` at its own time on a track of its own,
+  // without touching the clipboard — a pending copy must survive a Cmd+D. Shares
+  // pasteTimelineClips with handlePaste; only the anchor and clip source differ (the
+  // selection's end or start here, the playhead or the copy's own time there).
+  const handleDuplicate = useCallback(
+    async (options?: InPlace): Promise<boolean> => {
+      const targets = findSelectedClips();
+      if (!targets) return false;
+      const pid = projectIdRef.current;
+      if (!pid) return false;
+
+      const { elements } = targets;
+      const pathOf = (el: TimelineElement) => el.sourceFile || activeCompPath || "index.html";
+      const targetPath = pathOf(elements[0]!);
+      // The copy lands in targetPath's own clock, so anchor and lane check are local to it.
+      const anchorTime = toAuthoredStart(
+        elements[0]!,
+        options?.inPlace
+          ? Math.min(...elements.map((el) => el.start))
+          : Math.max(...elements.map((el) => el.start + el.duration)),
+      );
 
-      await saveProjectFilesWithHistory({
-        projectId: pid,
-        label: clipLabel("Duplicate", clips.length),
-        files: { [targetPath]: duplicate },
-        readFile: (path) => readFileContent(pid, path),
-        writeFile: writeProjectFile,
-        recordEdit,
-      });
+      try {
+        const clips = await readClips(targets);
+        let ids: string[] = [];
+        const duplicate = (originalContent: string) => {
+          const liveElements = usePlayerStore
+            .getState()
+            .elements.filter((el) => pathOf(el) === targetPath)
+            .map((el) => ({ ...el, start: toAuthoredStart(el, el.start) }));
+          const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements, true);
+          ids = pasted.ids;
+          return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+        };
 
-      // The duplicate becomes the selection, mirroring CapCut's own paste
-      // convention — there is no CapCut Duplicate to match directly (Cmd+D is
-      // a no-op there); this is our own choice for consistency with paste.
-      // Select before reloading, same reason as handlePaste above.
-      if (ids.length > 0) {
-        usePlayerStore.getState().setSelection(ids.map((id) => elementKey(id, targetPath)));
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: clipLabel("Duplicate", clips.length),
+          files: { [targetPath]: duplicate },
+          readFile: (path) => readFileContent(pid, path),
+          writeFile: writeProjectFile,
+          recordEdit,
+        });
+
+        // The duplicate becomes the selection, mirroring CapCut's own paste
+        // convention — there is no CapCut Duplicate to match directly (Cmd+D is
+        // a no-op there); this is our own choice for consistency with paste.
+        // Select before reloading, same reason as handlePaste above.
+        if (ids.length > 0) {
+          usePlayerStore.getState().setSelection(ids.map((id) => elementKey(id, targetPath)));
+        }
+        reloadPreview();
+        showToast(clipToast("Duplicated", clips.length), "info");
+        return true;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to duplicate";
+        showToast(message);
+        return false;
       }
-      reloadPreview();
-      showToast(clipToast("Duplicated", clips.length), "info");
-      return true;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to duplicate";
-      showToast(message);
-      return false;
-    }
-  }, [
-    activeCompPath,
-    findSelectedClips,
-    readClips,
-    recordEdit,
-    reloadPreview,
-    showToast,
-    writeProjectFile,
-  ]);
+    },
+    [
+      activeCompPath,
+      findSelectedClips,
+      readClips,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      writeProjectFile,
+    ],
+  );
 
   const handleCut = useCallback(async (): Promise<boolean> => {
     const selected = getSelectedElements();

package/src/hooks/useDomEditCommits.ts

@@ -271,12 +271,10 @@ export function useDomEditCommits({
 
   const {
     stageElementPositionOffset,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
   } = useDomGeometryCommits({
-    previewIframeRef,
     showToast,
     commitPositionPatchToHtml,
     readOnlyPreview,
@@ -316,7 +314,6 @@ export function useDomEditCommits({
     handleDomRemoveTextField,
     stageElementPositionOffset,
     commitPositionPatchToHtml,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,

package/src/hooks/useDomEditSession.test.tsx

@@ -9,6 +9,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { TimelineElement } from "../player";
 import type { UseDomEditSessionParams } from "./useDomEditSession";
+import { makeSelection } from "./domSelectionTestHarness";
 
 const styleOp = (property: string, value: string): PatchOperation => ({
   type: "inline-style",
@@ -132,26 +133,30 @@ vi.mock("./useDomEditCommits", () => ({
     };
   },
 }));
+const iframesHandedOn: Array<{ hook: string; iframe: unknown }> = [];
 vi.mock("./useDomSelection", () => ({
-  useDomSelection: () => ({
-    domEditSelection: domEditSelectionRef.current,
-    domEditGroupSelections: [],
-    domEditHoverSelection: null,
-    activeGroupElement: null,
-    domEditSelectionRef,
-    domEditGroupSelectionsRef,
-    setActiveGroupElement: vi.fn(),
-    applyDomSelection: vi.fn(),
-    clearDomSelection: vi.fn(),
-    buildDomSelectionFromTarget: vi.fn(),
-    resolveDomSelectionFromPreviewPoint: vi.fn(),
-    resolveAllDomSelectionsFromPreviewPoint: vi.fn(),
-    updateDomEditHoverSelection: vi.fn(),
-    buildDomSelectionForTimelineElement: vi.fn(),
-    handleTimelineElementSelect: vi.fn(),
-    refreshDomEditSelectionFromPreview: vi.fn(),
-    applyMarqueeSelection: vi.fn(),
-  }),
+  useDomSelection: ({ previewIframe }: { previewIframe: unknown }) => {
+    iframesHandedOn.push({ hook: "selection", iframe: previewIframe });
+    return {
+      domEditSelection: domEditSelectionRef.current,
+      domEditGroupSelections: [],
+      domEditHoverSelection: null,
+      activeGroupElement: null,
+      domEditSelectionRef,
+      domEditGroupSelectionsRef,
+      setActiveGroupElement: vi.fn(),
+      applyDomSelection: vi.fn(),
+      clearDomSelection: vi.fn(),
+      buildDomSelectionFromTarget: vi.fn(),
+      resolveDomSelectionFromPreviewPoint: vi.fn(),
+      resolveAllDomSelectionsFromPreviewPoint: vi.fn(),
+      updateDomEditHoverSelection: vi.fn(),
+      buildDomSelectionForTimelineElement: vi.fn(),
+      handleTimelineElementSelect: vi.fn(),
+      refreshDomEditSelectionFromPreview: vi.fn(),
+      applyMarqueeSelection: vi.fn(),
+    };
+  },
 }));
 vi.mock("./useAskAgentModal", () => ({
   useAskAgentModal: () => ({
@@ -208,33 +213,36 @@ vi.mock("./useGroupCommits", () => ({
   }),
 }));
 vi.mock("./useDomEditWiring", () => ({
-  useDomEditWiring: () => ({
-    onClickToSource: vi.fn(),
-    selectedGsapAnimations: [],
-    gsapMultipleTimelines: false,
-    gsapUnsupportedTimelinePattern: false,
-    trackGsapInteractionFailure: vi.fn(),
-    makeFetchFallback: vi.fn(),
-    handleGsapUpdateProperty: vi.fn(),
-    handleGsapUpdateMeta: vi.fn(),
-    handleGsapDeleteAnimation: vi.fn(),
-    handleGsapDeleteAllForElement: vi.fn(),
-    handleGsapAddAnimation: vi.fn(),
-    handleGsapAddProperty: vi.fn(),
-    handleGsapRemoveProperty: vi.fn(),
-    handleGsapUpdateFromProperty: vi.fn(),
-    handleGsapAddFromProperty: vi.fn(),
-    handleGsapRemoveFromProperty: vi.fn(),
-    handleGsapAddKeyframe: vi.fn(),
-    handleGsapAddKeyframeBatch: vi.fn(),
-    handleGsapRemoveKeyframe: vi.fn(),
-    handleGsapMoveKeyframeToPlayhead: vi.fn(),
-    handleGsapMoveKeyframe: vi.fn(),
-    handleGsapResizeKeyframedTween: vi.fn(),
-    handleGsapConvertToKeyframes: vi.fn(),
-    handleGsapRemoveAllKeyframes: vi.fn(),
-    handleResetSelectedElementKeyframes: vi.fn(),
-  }),
+  useDomEditWiring: ({ previewIframe }: { previewIframe: unknown }) => {
+    iframesHandedOn.push({ hook: "wiring", iframe: previewIframe });
+    return {
+      onClickToSource: vi.fn(),
+      selectedGsapAnimations: [],
+      gsapMultipleTimelines: false,
+      gsapUnsupportedTimelinePattern: false,
+      trackGsapInteractionFailure: vi.fn(),
+      makeFetchFallback: vi.fn(),
+      handleGsapUpdateProperty: vi.fn(),
+      handleGsapUpdateMeta: vi.fn(),
+      handleGsapDeleteAnimation: vi.fn(),
+      handleGsapDeleteAllForElement: vi.fn(),
+      handleGsapAddAnimation: vi.fn(),
+      handleGsapAddProperty: vi.fn(),
+      handleGsapRemoveProperty: vi.fn(),
+      handleGsapUpdateFromProperty: vi.fn(),
+      handleGsapAddFromProperty: vi.fn(),
+      handleGsapRemoveFromProperty: vi.fn(),
+      handleGsapAddKeyframe: vi.fn(),
+      handleGsapAddKeyframeBatch: vi.fn(),
+      handleGsapRemoveKeyframe: vi.fn(),
+      handleGsapMoveKeyframeToPlayhead: vi.fn(),
+      handleGsapMoveKeyframe: vi.fn(),
+      handleGsapResizeKeyframedTween: vi.fn(),
+      handleGsapConvertToKeyframes: vi.fn(),
+      handleGsapRemoveAllKeyframes: vi.fn(),
+      handleResetSelectedElementKeyframes: vi.fn(),
+    };
+  },
 }));
 vi.mock("./usePreviewInteraction", () => ({
   usePreviewInteraction: () => ({
@@ -310,32 +318,9 @@ describe("onReorderShadow source filter", () => {
 describe("bulk segment ease commits", () => {
   it("uses one ordered batch for many ids and sane paths for one or no ids", async () => {
     const { useDomEditSession } = await import("./useDomEditSession");
-    const selection: DomEditSelection = {
-      id: "hero",
-      element: document.createElement("div"),
-      label: "Hero",
-      tagName: "DIV",
-      sourceFile: "index.html",
-      compositionPath: "index.html",
-      isCompositionHost: false,
-      isInsideLockedComposition: false,
-      boundingBox: { x: 0, y: 0, width: 100, height: 100 },
-      textContent: null,
-      dataAttributes: {},
-      inlineStyles: {},
-      computedStyles: {},
-      textFields: [],
-      capabilities: {
-        canSelect: true,
-        canEditStyles: true,
-        canCrop: true,
-        canMove: true,
-        canResize: true,
-        canApplyManualOffset: true,
-        canApplyManualSize: true,
-        canApplyManualRotation: true,
-      },
-    };
+    const hero = document.createElement("div");
+    hero.id = "hero";
+    const selection = makeSelection("Hero", hero);
     domEditSelectionRef.current = selection;
     gsapCommitMutation.mockClear();
     gsapCommitMutation.batch.mockClear();
@@ -601,3 +586,22 @@ describe("handleDomEditElementDelete routing", () => {
     expect(handleDomEditElementsDeleteMock).not.toHaveBeenCalled();
   });
 });
+
+describe("a shadow reload promoted without a host re-render", () => {
+  it("hands the promoted iframe to the session's selection and preview sync", async () => {
+    const { useDomEditSession } = await import("./useDomEditSession");
+    const { announcePreviewPromoted } = await import("../player/sceneSwap");
+    const [host, promoted] = [0, 1].map(() => document.createElement("iframe"));
+    function Probe() {
+      useDomEditSession(createSessionParams({ previewIframe: host! }));
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(<Probe />));
+    act(() => announcePreviewPromoted({ retired: host!, live: promoted! }));
+    const last = (hook: string) => iframesHandedOn.findLast((seen) => seen.hook === hook)?.iframe;
+    expect(last("selection")).toBe(promoted);
+    expect(last("wiring")).toBe(promoted);
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useDomEditSession.ts

@@ -24,6 +24,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMembers";
 import type { RecordEditInput } from "./domEditDeleteMembers";
 import type { DomEditTimelineParams } from "./useDomSelectionTypes";
+import { useLivePreviewIframe } from "./useLivePreviewIframe";
 // Re-exported: the delete rule lives in its own module; callers and its test import it from here.
 export { membersForDelete };
 
@@ -86,14 +87,13 @@ export function useDomEditSession({
   importedFontAssetsRef,
   projectDir,
   projectIdRef,
-  previewIframe,
+  previewIframe: hostPreviewIframe,
   refreshKey,
   previewDocumentVersion,
   rightPanelTab,
   applyStudioManualEditsToPreviewRef,
   syncPreviewHotkeys,
   reloadPreview,
-  setRefreshKey: _setRefreshKey,
   openSourceForSelection,
   sdkSession,
   publishSdkSession,
@@ -103,7 +103,7 @@ export function useDomEditSession({
 }: UseDomEditSessionParams) {
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const previewCaptionEditMode = captionEditMode && !readOnlyPreview;
-  void _setRefreshKey;
+  const previewIframe = useLivePreviewIframe(hostPreviewIframe);
   const {
     domEditSelection,
     domEditGroupSelections,
@@ -173,29 +173,11 @@ export function useDomEditSession({
 
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
 
-  // ── GSAP script commits ──
-
   const {
     commitMutation: gsapCommitMutation,
-    updateGsapProperty,
-    updateGsapMeta,
-    deleteGsapAnimation,
-    deleteAllForSelector,
-    addGsapAnimation,
-    addGsapProperty,
-    removeGsapProperty,
-    updateGsapFromProperty,
-    addGsapFromProperty,
-    removeGsapFromProperty,
-    addKeyframe,
-    addKeyframeBatch,
-    removeKeyframe,
-    moveKeyframe,
-    resizeKeyframedTween,
-    convertToKeyframes,
-    removeAllKeyframes,
     setArcPath,
     updateArcSegment,
+    ...gsapScriptEdits
   } = useGsapScriptCommits({
     projectIdRef,
     activeCompPath,
@@ -211,8 +193,6 @@ export function useDomEditSession({
     forceReloadSdkSession,
   });
 
-  // ── DOM commit handlers ──
-
   const {
     resolveImportedFontAsset,
     handleDomStyleCommit,
@@ -430,23 +410,7 @@ export function useDomEditSession({
     applyDomSelection,
     buildDomSelectionFromTarget,
     openSourceForSelection,
-    updateGsapProperty,
-    updateGsapMeta,
-    deleteGsapAnimation,
-    deleteAllForSelector,
-    addGsapAnimation,
-    addGsapProperty,
-    removeGsapProperty,
-    updateGsapFromProperty,
-    addGsapFromProperty,
-    removeGsapFromProperty,
-    addKeyframe,
-    addKeyframeBatch,
-    removeKeyframe,
-    moveKeyframe,
-    resizeKeyframedTween,
-    convertToKeyframes,
-    removeAllKeyframes,
+    ...gsapScriptEdits,
     handleDomManualEditsReset,
   });
   const {
@@ -492,8 +456,8 @@ export function useDomEditSession({
     handleDomBoxSizeCommit,
     handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
-    addGsapAnimation,
-    convertToKeyframes,
+    addGsapAnimation: gsapScriptEdits.addGsapAnimation,
+    convertToKeyframes: gsapScriptEdits.convertToKeyframes,
     setArcPath,
     updateArcSegment,
   });

package/src/hooks/useDomGeometryCommit.test.tsx

@@ -168,7 +168,10 @@ describe("useDomGeometryCommit, from the package entry", () => {
     expect(element.style.getPropertyValue("translate")).toBe("130.5px 90px");
     expect(calls.patches).toEqual([
       expect.objectContaining({
-        operations: [{ type: "inline-style", property: "translate", value: "130.5px 90px" }],
+        operations: [
+          { type: "inline-style", property: "translate", value: "130.5px 90px" },
+          { type: "attribute", property: "data-hf-studio-original-inline-translate", value: "" },
+        ],
       }),
     ]);
     expect(calls.urls.filter((url) => url.includes("gsap"))).toEqual([]);

package/src/hooks/useDomGeometryCommit.ts

@@ -111,7 +111,6 @@ export function useDomGeometryCommit({
   );
   const { stageElementPositionOffset, handleDomBoxSizeCommit, handleDomRotationCommit } =
     useDomGeometryCommits({
-      previewIframeRef: iframeRef,
       showToast,
       commitPositionPatchToHtml: commitWithFreshQueue,
       readOnlyPreview: false,