@hyperframes/studio 0.8.103 → 0.8.104

package/src/hooks/useDomEditSession.ts

@@ -24,8 +24,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMembers";
 import type { RecordEditInput } from "./domEditDeleteMembers";
 import type { DomEditTimelineParams } from "./useDomSelectionTypes";
-// Re-exported: the delete rule lives in its own module now, and callers (and its
-// own test) have always imported it from here.
+// Re-exported: the delete rule lives in its own module; callers and its test import it from here.
 export { membersForDelete };
 
 export interface UseDomEditSessionParams extends DomEditTimelineParams {
@@ -232,6 +231,7 @@ export function useDomEditSession({
     stageElementPositionOffset,
     commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit,
@@ -256,9 +256,8 @@ export function useDomEditSession({
     readOnlyPreview,
     onTrySdkPersist: sdkSession
       ? (selection, operations, originalContent, targetPath, options) => {
-          // Decoupled tripwire, runs regardless of the cutover flag. originalContent lets
-          // the runtime-node filter suppress hf-ids absent from source (script-created
-          // nodes); the paths let a cross-file edit skip instead of a false not-found.
+          // Decoupled tripwire, regardless of the cutover flag. originalContent lets the runtime-node
+          // filter drop hf-ids absent from source; the paths skip a cross-file edit, not a not-found.
           runResolverShadow(sdkSession, selection.hfId, operations, originalContent, {
             targetPath,
             compositionPath: activeCompPath,
@@ -491,6 +490,7 @@ export function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,

package/src/hooks/useDomGeometryCommit.test.tsx

@@ -176,6 +176,28 @@ describe("useDomGeometryCommit, from the package entry", () => {
     unmount();
   });
 
+  it("saves a GSAP-free resize as its inline size, with no GSAP script and no animation read", async () => {
+    const calls = stubPatchServer();
+    const { element, recordEdit, hook, unmount } = renderHost();
+
+    await expect(
+      hook().commitBoxSize(makeSelection("card", element), { width: 300, height: 90 }),
+    ).resolves.toEqual({ ok: true });
+
+    expect(element.style.getPropertyValue("width")).toBe("300px");
+    expect(calls.patches).toEqual([
+      expect.objectContaining({
+        operations: expect.arrayContaining([
+          { type: "inline-style", property: "width", value: "300px" },
+          { type: "inline-style", property: "height", value: "90px" },
+        ]),
+      }),
+    ]);
+    expect(calls.urls.filter((url) => url.includes("gsap"))).toEqual([]);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
   it("puts a GSAP-free element's translate back when its move cannot be saved", async () => {
     stubPatchServer(500);
     const { element, hook, unmount } = renderHost();
@@ -188,6 +210,57 @@ describe("useDomGeometryCommit, from the package entry", () => {
     unmount();
   });
 
+  it("refuses a CSS move GSAP has folded into its x/y, writes nothing, and hands the translate back", async () => {
+    const calls = stubPatchServer();
+    const { element, hook, unmount } = renderHost();
+    element.style.setProperty("translate", "none");
+    Object.assign(element, { _gsap: { renderTransform: () => {}, x: "94px", y: "66px" } });
+    const set = vi.fn();
+    Object.assign(element.ownerDocument.defaultView!, { gsap: { set } });
+
+    await expect(
+      hook().commitPathOffset(
+        makeSelection("card", element),
+        { x: 1, y: 2 },
+        { plainTranslate: true },
+      ),
+    ).rejects.toThrow(/animation took over/);
+    delete (element.ownerDocument.defaultView as { gsap?: unknown }).gsap;
+    expect(calls.patches).toEqual([]);
+    expect(set).toHaveBeenCalledWith(element, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
+    unmount();
+  });
+
+  it("saves a CSS move GSAP has only parsed, with nothing folded into its x/y", async () => {
+    const calls = stubPatchServer();
+    const { element, hook, unmount } = renderHost();
+    Object.assign(element, {
+      _gsap: { renderTransform: () => {}, x: "0px", y: "0px", xPercent: 0 },
+    });
+
+    await expect(
+      hook().commitPathOffset(
+        makeSelection("card", element),
+        { x: 1, y: 2 },
+        { plainTranslate: true },
+      ),
+    ).resolves.toEqual({ ok: true });
+    expect(calls.patches).toHaveLength(1);
+    unmount();
+  });
+
+  it("leaves a later move's translate alone when an earlier move's save fails", async () => {
+    stubPatchServer(500);
+    const { element, hook, unmount } = renderHost();
+    element.style.setProperty("translate", "40px 30px");
+
+    const saving = hook().commitPathOffset(makeSelection("card", element), { x: 1, y: 2 });
+    element.style.setProperty("translate", "7px 8px");
+    await expect(saving).rejects.toThrow();
+    expect(element.style.getPropertyValue("translate")).toBe("7px 8px");
+    unmount();
+  });
+
   it("keeps the same commits across renders, so the overlay's handlers stay put", () => {
     stubServer();
     const { hook, rerender, unmount } = renderHost();
@@ -216,6 +289,8 @@ describe("useDomGeometryCommit, from the package entry", () => {
     const showToast = vi.fn();
     const restore = vi.fn();
     const { element, recordEdit, hook, unmount } = renderHost({ showToast });
+    // GSAP renders the card's transform, so its resize reads animations first.
+    Object.assign(element, { _gsap: { renderTransform: () => undefined } });
 
     await expect(
       hook().commitBoxSize(

package/src/hooks/useDomGeometryCommit.ts

@@ -1,7 +1,11 @@
+import type { RotationCommit } from "../components/editor/rotationDraft";
 import { useCallback, useMemo, useRef, useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
+import type {
+  DomEditGroupPathOffsetCommit,
+  MoveCommitOptions,
+} from "../components/editor/DomEditOverlay";
 import { isPreviewBooted } from "../player/store/playerStore";
 import type { DomEditCommitOutcome } from "./domEditCommitRunner";
 import type { UseDomStyleCommitOptions } from "./useDomStyleCommit";
@@ -13,8 +17,8 @@ import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { createDomEditSaveQueue } from "../utils/domEditSaveQueue";
 import { useDomEditPersist } from "./useDomEditPersist";
 import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
+import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useMountEffect } from "./useMountEffect";
-import { stageElementOffset } from "./elementOffsetStager";
 
 /**
  * Studio's `Player` must show the project, with `beginTimelineSession(projectId)` run before it
@@ -29,7 +33,7 @@ export interface DomGeometryCommits {
   commitPathOffset: (
     selection: DomEditSelection,
     next: { x: number; y: number },
-    modifiers?: { altKey?: boolean },
+    modifiers?: MoveCommitOptions,
   ) => Promise<DomEditCommitOutcome>;
   commitGroupPathOffset: (updates: DomEditGroupPathOffsetCommit[]) => Promise<DomEditCommitOutcome>;
   commitBoxSize: (
@@ -40,15 +44,13 @@ export interface DomGeometryCommits {
   ) => Promise<DomEditCommitOutcome>;
   commitRotation: (
     selection: DomEditSelection,
-    next: { angle: number },
+    next: RotationCommit,
   ) => Promise<DomEditCommitOutcome>;
   waitForPendingSaves: () => Promise<void>;
 }
 
 const noop = () => {};
 const NO_SELECTED_ANIMATIONS: GsapAnimation[] = [];
-// ponytail: unreachable, the GSAP writer always exists so a resize never takes the DOM route.
-const noDomBoxSizeRoute = () => Promise.reject(new Error("Resize has no DOM route here"));
 
 /**
  * Saves canvas moves, resizes and rotations through Studio's own GSAP-aware commits, for a host
@@ -107,16 +109,13 @@ export function useDomGeometryCommit({
     },
     [commitPositionPatchToHtml, queue],
   );
-  const stageElementPositionOffset = useCallback(
-    (selection: DomEditSelection, next: { x: number; y: number }, coalesceKey?: string) =>
-      stageElementOffset(
-        { commitPositionPatchToHtml: commitWithFreshQueue, showToast },
-        selection,
-        next,
-        coalesceKey,
-      ),
-    [commitWithFreshQueue, showToast],
-  );
+  const { stageElementPositionOffset, handleDomBoxSizeCommit, handleDomRotationCommit } =
+    useDomGeometryCommits({
+      previewIframeRef: iframeRef,
+      showToast,
+      commitPositionPatchToHtml: commitWithFreshQueue,
+      readOnlyPreview: false,
+    });
   const makeFetchFallback = useGsapAnimationFetchFallback(projectId);
   const trackGsapInteractionFailure = useGsapInteractionFailureTelemetry(activeCompPath, showToast);
   const {
@@ -135,7 +134,8 @@ export function useDomGeometryCommit({
     makeFetchFallback,
     trackGsapInteractionFailure,
     stageElementPositionOffset,
-    handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
     commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap.addGsapAnimation,
     convertToKeyframes: gsap.convertToKeyframes,

package/src/hooks/useDomGeometryCommits.test.tsx

@@ -162,7 +162,7 @@ describe("useDomGeometryCommits element position offset", () => {
       .mockResolvedValue(undefined);
     const { commits, unmount } = mountCommits(commitPositionPatchToHtml);
 
-    await commits().stageElementPositionOffset(selection, { x: 40, y: 20 }).save();
+    await commits().stageElementPositionOffset(selection, { x: 40, y: 20 }, false).save();
 
     const patches = commitPositionPatchToHtml.mock.calls[0]![1];
     expect(patches).toEqual([
@@ -175,6 +175,61 @@ describe("useDomGeometryCommits element position offset", () => {
   });
 });
 
+describe("useDomGeometryCommits resize anchor", () => {
+  it("saves the anchor as the element's own plain px translate, sub-pixel, with the size", async () => {
+    const element = document.createElement("div");
+    element.id = "anchored";
+    element.style.setProperty("translate", "40px 30px");
+    document.body.append(element);
+    const selection = {
+      id: "anchored",
+      selector: "#anchored",
+      element,
+    } as unknown as DomEditSelection;
+    const commit = vi
+      .fn<UseDomGeometryCommitsParams["commitPositionPatchToHtml"]>()
+      .mockResolvedValue(undefined);
+    const { commits, unmount } = mountCommits(commit);
+
+    await commits().handleDomBoxSizeCommit(
+      selection,
+      { width: 340, height: 227 },
+      { x: -10.25, y: 3.5 },
+    );
+
+    expect(commit).toHaveBeenCalledTimes(1);
+    const patches = commit.mock.calls[0]![1];
+    expect(patches).toContainEqual({ type: "inline-style", property: "width", value: "340px" });
+    expect(patches).toContainEqual({
+      type: "inline-style",
+      property: "translate",
+      value: "-10.25px 3.5px",
+    });
+    expect(patches.some((p) => p.property.startsWith("--hf-studio-offset"))).toBe(false);
+    expect(element.style.getPropertyValue("translate")).toBe("-10.25px 3.5px");
+    unmount();
+  });
+});
+
+describe("useDomGeometryCommits resize rollback", () => {
+  it("rolls the whole gesture back once when the resize save fails", async () => {
+    const element = document.createElement("div");
+    document.body.append(element);
+    const selection = { id: "r", selector: "#r", element } as unknown as DomEditSelection;
+    const failure = new Error("save failed");
+    const commit = vi
+      .fn<UseDomGeometryCommitsParams["commitPositionPatchToHtml"]>()
+      .mockRejectedValue(failure);
+    const restore = vi.fn();
+    const { commits, unmount } = mountCommits(commit);
+    await expect(
+      commits().handleDomBoxSizeCommit(selection, { width: 50, height: 40 }, undefined, restore),
+    ).rejects.toBe(failure);
+    expect(restore).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+});
+
 describe("useDomGeometryCommits resize of a cropped element", () => {
   it("saves the crop scaled per axis with the box in the resize's own commit", async () => {
     const element = withInlineLayoutBox(document.createElement("div"));

package/src/hooks/useDomGeometryCommits.ts

@@ -1,9 +1,9 @@
+import type { RotationCommit } from "../components/editor/rotationDraft";
 import { useCallback } from "react";
 import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
 import {
   applyStudioPathOffset,
   applyStudioBoxSize,
-  applyStudioRotation,
   captureStudioPathOffset,
   captureStudioBoxSize,
   captureStudioRotation,
@@ -15,11 +15,12 @@ import {
   clearStudioRotation,
 } from "../components/editor/manualEdits";
 import { stageElementOffset } from "./elementOffsetStager";
+import { savePlainRotation } from "./plainRotation";
 import { prepareCropResize } from "../components/editor/cropResize";
+import { translatePatch, writeTranslatePx } from "../components/editor/plainTranslate";
 import {
   buildPathOffsetPatches,
   buildBoxSizePatches,
-  buildRotationPatches,
   buildClearPathOffsetPatches,
   buildClearBoxSizePatches,
   buildClearRotationPatches,
@@ -61,11 +62,17 @@ export function useDomGeometryCommits({
   readOnlyPreview,
 }: UseDomGeometryCommitsParams) {
   const stageElementPositionOffset = useCallback(
-    (selection: DomEditSelection, next: { x: number; y: number }, coalesceKey?: string) =>
+    (
+      selection: DomEditSelection,
+      next: { x: number; y: number },
+      plainTranslate: boolean,
+      coalesceKey?: string,
+    ) =>
       stageElementOffset(
         { commitPositionPatchToHtml, showToast, readOnlyPreview },
         selection,
         next,
+        plainTranslate,
         coalesceKey,
       ),
     [commitPositionPatchToHtml, readOnlyPreview, showToast],
@@ -98,56 +105,41 @@ export function useDomGeometryCommits({
       selection: DomEditSelection,
       next: { width: number; height: number },
       offset?: { x: number; y: number },
+      restore?: () => void,
     ) => {
       if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const beforeSize = captureStudioBoxSize(selection.element);
-      const beforeOffset = offset ? captureStudioPathOffset(selection.element) : null;
-      const stageCrop = prepareCropResize(selection.element);
-      applyStudioBoxSize(selection.element, next);
+      const element = selection.element;
+      const beforeSize = captureStudioBoxSize(element);
+      const beforeTranslate = element.style.getPropertyValue("translate");
+      const stageCrop = prepareCropResize(element);
+      applyStudioBoxSize(element, next);
       const crop = stageCrop();
-      // Anchored-corner resize (NW/NE/SW) also moves the element to keep the
-      // opposite corner fixed. Apply the offset and emit BOTH patch sets in a
-      // SINGLE commit: one persist = one undo entry, and there is no
-      // intermediate re-stamp where the new size is in source but the anchor
-      // offset is not (that frame was the release "jump"). Both builders read
-      // the already-mutated live element, so concatenation is safe.
-      const patches = buildBoxSizePatches(selection.element);
+      // One commit, one undo entry: the size, the crop that follows it, and the translate
+      // (as a move writes it) that keeps the centre planted.
+      const patches = buildBoxSizePatches(element);
       if (crop) patches.push(crop.patch);
       if (offset) {
-        applyStudioPathOffset(selection.element, offset);
-        patches.push(...buildPathOffsetPatches(selection.element));
+        writeTranslatePx(element, offset);
+        patches.push(translatePatch(offset));
       }
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
       }).catch((error) => {
-        restoreStudioBoxSize(selection.element, beforeSize);
-        if (beforeOffset) restoreStudioPathOffset(selection.element, beforeOffset);
+        restoreStudioBoxSize(element, beforeSize);
+        if (offset) element.style.setProperty("translate", beforeTranslate);
         crop?.revert();
+        restore?.();
         throw error;
       });
     },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview],
+    [commitPositionPatchToHtml, readOnlyPreview],
   );
 
   const handleDomRotationCommit = useCallback(
-    (selection: DomEditSelection, next: { angle: number }) => {
-      if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const before = captureStudioRotation(selection.element);
-      applyStudioRotation(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
-        label: "Rotate layer",
-        coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
-      }).catch((error) => {
-        restoreStudioRotation(selection.element, before);
-        throw error;
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview],
+    (selection: DomEditSelection, next: RotationCommit) =>
+      savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selection, next),
+    [commitPositionPatchToHtml, readOnlyPreview],
   );
 
   const handleDomManualEditsReset = useCallback(