@hyperframes/studio 0.8.98 → 0.8.100

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -1,11 +1,13 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi, type Mock } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
-import { mountReactHarness } from "./domSelectionTestHarness";
+import { mountReactHarness, withInlineLayoutBox } from "./domSelectionTestHarness";
+import { DomEditCropHandles } from "../components/editor/DomEditCropHandles";
+import { applyStudioBoxSizeDraft } from "../components/editor/manualEdits";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -20,7 +22,6 @@ const mocks = vi.hoisted(() => ({
 
 vi.mock("./gsapResizeIntercept", () => ({ tryGsapResizeIntercept: mocks.resize }));
 vi.mock("./gsapRuntimeBridge", () => ({
-  POSITION_CHANNELS: ["x", "y"],
   tryGsapDragIntercept: mocks.drag,
   tryGsapRotationIntercept: vi.fn(),
 }));
@@ -45,6 +46,11 @@ afterEach(() => {
   vi.clearAllMocks();
 });
 
+/** An element GSAP already renders the transform of, so moves take the GSAP route. */
+function gsapPositioned(tag: string): HTMLElement {
+  return Object.assign(document.createElement(tag), { _gsap: { renderTransform: () => {} } });
+}
+
 function mountResizeHandler(
   animations: GsapAnimation[],
   targetAnimations: GsapAnimation[] = animations,
@@ -56,6 +62,7 @@ function mountResizeHandler(
   const anchorRollback = vi.fn();
   const elementOffset = vi.fn(() => ({ save: anchorSave, rollback: anchorRollback }));
   const commitMutation = vi.fn().mockResolvedValue(undefined);
+  const commitPatch = vi.fn().mockResolvedValue(undefined);
   let resize:
     | ((
         selection: DomEditSelection,
@@ -64,8 +71,9 @@ function mountResizeHandler(
         restore?: () => void,
       ) => Promise<void>)
     | null = null;
+  let property: ReturnType<typeof useGsapAwareEditing>["commitAnimatedProperty"] | null = null;
   function Harness() {
-    resize = useGsapAwareEditing({
+    const editing = useGsapAwareEditing({
       domEditSelection: selection,
       selectedGsapAnimations: animations,
       gsapCommitMutation: commitMutation,
@@ -76,11 +84,14 @@ function mountResizeHandler(
       trackGsapInteractionFailure: vi.fn(),
       stageElementPositionOffset: elementOffset,
       handleDomBoxSizeCommit: fallback,
+      commitPositionPatchToHtml: commitPatch,
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
       setArcPath: vi.fn(),
       updateArcSegment: vi.fn(),
-    }).handleGsapAwareBoxSizeCommit;
+    });
+    resize = editing.handleGsapAwareBoxSizeCommit;
+    property = editing.commitAnimatedProperty;
     return null;
   }
   const root = mountReactHarness(<Harness />);
@@ -91,7 +102,9 @@ function mountResizeHandler(
     anchorSave,
     anchorRollback,
     commitMutation,
+    commitPatch,
     resize: resize!,
+    property: property!,
     root,
   };
 }
@@ -122,6 +135,7 @@ function mountGroupHandler({
       trackGsapInteractionFailure,
       stageElementPositionOffset,
       handleDomBoxSizeCommit: vi.fn(),
+      commitPositionPatchToHtml: vi.fn(),
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
       setArcPath: vi.fn(),
@@ -140,6 +154,28 @@ function mountGroupHandler({
   };
 }
 
+describe("useGsapAwareEditing moves of an element GSAP does not position", () => {
+  it("saves the move on the element itself, with no GSAP write and no animation read", async () => {
+    const save = vi.fn().mockResolvedValue(undefined);
+    const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
+    const gsapCommitMutation = vi.fn();
+    const makeFetchFallback = vi.fn();
+    const { pathOffsetCommit, root } = mountGroupHandler({
+      gsapCommitMutation,
+      makeFetchFallback,
+      stageElementPositionOffset,
+    });
+    const box = { element: document.createElement("div"), id: "box", selector: "#box" };
+    await act(() => pathOffsetCommit(box as unknown as DomEditSelection, { x: 130.25, y: 90 }));
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(box, { x: 130.25, y: 90 });
+    expect(save).toHaveBeenCalledTimes(1);
+    expect(gsapCommitMutation).not.toHaveBeenCalled();
+    expect(makeFetchFallback).not.toHaveBeenCalled();
+    expect(mocks.drag).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing shared-tween moves", () => {
   it("saves a single drag through the element's own offset", async () => {
     mocks.drag.mockResolvedValue({ status: "element-offset" });
@@ -151,7 +187,7 @@ describe("useGsapAwareEditing shared-tween moves", () => {
       makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       stageElementPositionOffset,
     });
-    const word = { element: document.createElement("span"), hfId: "w0", selector: ".w" };
+    const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
     await act(() => pathOffsetCommit(word as unknown as DomEditSelection, { x: 40, y: 20 }));
     expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 });
     expect(save).toHaveBeenCalledTimes(1);
@@ -159,7 +195,7 @@ describe("useGsapAwareEditing shared-tween moves", () => {
     act(() => root.unmount());
   });
 
-  it("saves a group member that shares a tween through its own offset, under the group key", async () => {
+  it("saves shared-tween and GSAP-free group members on themselves, under the group key", async () => {
     mocks.drag.mockImplementation(async (selection, _next, _a, _i, commit, _f, options) => {
       if (selection.hfId === "w0") return { status: "element-offset" };
       if (!options?.preflightOnly) await commit(selection, { type: "move" }, { label: "Move" });
@@ -172,19 +208,20 @@ describe("useGsapAwareEditing shared-tween moves", () => {
       makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       stageElementPositionOffset,
     });
-    const word = { element: document.createElement("span"), hfId: "w0", selector: ".w" };
-    const box = { element: document.createElement("div"), id: "box", selector: "#box" };
+    const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
+    const box = { element: gsapPositioned("div"), id: "box", selector: "#box" };
+    const plain = { element: document.createElement("div"), id: "plain", selector: "#plain" };
     await act(() =>
       groupCommit([
         { selection: word, next: { x: 40, y: 20 } },
         { selection: box, next: { x: 40, y: 20 } },
+        { selection: plain, next: { x: 40, y: 20 } },
       ] as unknown as DomEditGroupPathOffsetCommit[]),
     );
-    expect(stageElementPositionOffset).toHaveBeenCalledWith(
-      word,
-      { x: 40, y: 20 },
-      expect.stringMatching(/^group-drag:\d+$/),
-    );
+    const groupKey = expect.stringMatching(/^group-drag:\d+$/);
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 }, groupKey);
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(plain, { x: 40, y: 20 }, groupKey);
+    expect(mocks.drag.mock.calls.some((call) => call[0] === plain)).toBe(false);
     act(() => root.unmount());
   });
 });
@@ -197,7 +234,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     const h = mountResizeHandler([humanAnimation], [targetAnimation]);
     const target = {
       ...h.selection,
-      element: document.createElement("div"),
+      element: gsapPositioned("div"),
       id: "agent-target",
       selector: "#agent-target",
     } as DomEditSelection;
@@ -257,6 +294,92 @@ describe("useGsapAwareEditing anchored resize", () => {
     act(() => h.root.unmount());
   });
 
+  function mountCropped() {
+    const h = mountResizeHandler([]);
+    const el = withInlineLayoutBox(h.selection.element);
+    el.id = "clip";
+    el.style.cssText = "width: 300px; height: 200px; clip-path: inset(0px 60px 0px 0px)";
+    document.body.append(el);
+    const rect = { left: 0, top: 0, width: 300, height: 200, editScaleX: 1, editScaleY: 1 };
+    const crop = mountReactHarness(
+      <DomEditCropHandles selection={h.selection} overlayRect={rect} onStyleCommit={vi.fn()} />,
+    );
+    return { ...h, el, crop };
+  }
+
+  function resizeLandsWhen(where: "intercept" | "dispatch", h: { commitMutation: Mock }) {
+    const land = (el: HTMLElement) => {
+      el.style.width = "450px";
+      el.style.height = "300px";
+    };
+    mocks.resize.mockImplementation(async (selection, _next, _a, _i, commit) => {
+      if (where === "intercept") land(selection.element);
+      await commit(selection, { type: "size" }, { label: "Resize", softReload: true });
+      return { status: "persisted" };
+    });
+    if (where === "dispatch") h.commitMutation.mockImplementation(async (s) => land(s.element));
+  }
+
+  const scaled = "inset(0px 90px 0px 0px)";
+
+  it("saves the crop scaled with a size that lands only when saved (the W/H fields)", async () => {
+    const h = mountCropped();
+    resizeLandsWhen("dispatch", h);
+    await act(() => h.resize(h.selection, { width: 450, height: 300 }));
+
+    expect(h.commitPatch).toHaveBeenCalledWith(
+      h.selection,
+      [{ type: "inline-style", property: "clip-path", value: scaled }],
+      expect.objectContaining({ coalesceKey: h.commitMutation.mock.calls[0]![2].coalesceKey }),
+    );
+    act(() => h.crop.unmount());
+    expect(h.el.style.getPropertyValue("clip-path")).toBe(scaled);
+    act(() => h.root.unmount());
+  });
+
+  it("scales from the box before a draft its caller applied (the agent tool)", async () => {
+    const h = mountCropped();
+    resizeLandsWhen("intercept", h);
+    applyStudioBoxSizeDraft(h.el, { width: 450, height: 300 });
+    await act(() => h.resize(h.selection, { width: 450, height: 300 }));
+
+    expect(h.commitPatch.mock.calls[0]![1]).toEqual([
+      { type: "inline-style", property: "clip-path", value: scaled },
+    ]);
+    act(() => h.crop.unmount());
+    act(() => h.root.unmount());
+  });
+
+  it("a W field on an animated element saves the scaled crop in the same undo step", async () => {
+    const h = mountCropped();
+    mocks.commitAnimatedProperties.mockImplementation(async (selection, _props, keyed) => {
+      await (keyed ?? h.commitMutation)(selection, { type: "set" }, { label: "Edit width" });
+      selection.element.style.width = "450px";
+    });
+    await act(() => h.property(h.selection, "width", 450));
+
+    const key = h.commitMutation.mock.calls[0]![2].coalesceKey;
+    expect(key).toBeTruthy();
+    expect(h.commitPatch).toHaveBeenCalledWith(
+      h.selection,
+      [{ type: "inline-style", property: "clip-path", value: "inset(0px 90px 0px 0px)" }],
+      expect.objectContaining({ coalesceKey: key }),
+    );
+    act(() => h.crop.unmount());
+    act(() => h.root.unmount());
+  });
+
+  it("shows the scaled crop when deselected before the save lands", async () => {
+    const h = mountCropped();
+    resizeLandsWhen("intercept", h);
+    const saved = h.resize(h.selection, { width: 450, height: 300 });
+    act(() => h.crop.unmount());
+    await act(() => saved);
+
+    expect(h.el.style.getPropertyValue("clip-path")).toBe(scaled);
+    act(() => h.root.unmount());
+  });
+
   it("does not keep the anchor move when the size save fails", async () => {
     resizeWritesSize();
     const h = mountResizeHandler([]);
@@ -288,7 +411,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       commit = h.resize(h.selection, { width: 300, height: 200 }, { x: -50.2, y: -25.6 });
     });
 
-    expect(mocks.setPosition).toHaveBeenCalledWith(h.selection.element, 70, 55);
+    expect(mocks.setPosition).toHaveBeenCalledWith(h.selection.element, 70.2, 54.6);
     expect(mocks.setPosition.mock.invocationCallOrder[0]).toBeLessThan(
       mocks.resize.mock.invocationCallOrder[0]!,
     );
@@ -351,11 +474,11 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
         next: { x: 10, y: 10 },
       },
       {
-        selection: { element: document.createElement("div"), id: "b", selector: "#b" },
+        selection: { element: gsapPositioned("div"), id: "b", selector: "#b" },
         next: { x: 10, y: 10 },
       },
     ] as unknown as DomEditGroupPathOffsetCommit[];
@@ -389,12 +512,12 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "ok", selector: "#ok" },
+        selection: { element: gsapPositioned("div"), id: "ok", selector: "#ok" },
         next: { x: 10, y: 10 },
       },
       {
         selection: {
-          element: document.createElement("div"),
+          element: gsapPositioned("div"),
           id: "blocked",
           selector: "#blocked",
         },
@@ -430,7 +553,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
         next: { x: 10, y: 10 },
       },
     ] as unknown as DomEditGroupPathOffsetCommit[];
@@ -455,11 +578,11 @@ describe("useGsapAwareEditing anchored resize", () => {
     });
     const updates = [
       {
-        selection: { element: document.createElement("div"), id: "a", selector: "#a" },
+        selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
         next: { x: 10, y: 10 },
       },
       {
-        selection: { element: document.createElement("div"), id: "b", selector: "#b" },
+        selection: { element: gsapPositioned("div"), id: "b", selector: "#b" },
         next: { x: 20, y: 20 },
       },
     ] as unknown as DomEditGroupPathOffsetCommit[];
@@ -509,6 +632,7 @@ describe("useGsapAwareEditing anchored resize", () => {
    */
   it("applies the anchor when the resize leaves the drop point to the caller", async () => {
     mocks.resize.mockResolvedValue({ status: "persisted" });
+    mocks.drag.mockResolvedValue({ status: "persisted" });
     const scale = { propertyGroup: "scale" } as GsapAnimation;
     const h = mountResizeHandler([scale]);
     await act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 }));

package/src/hooks/useGsapAwareEditing.ts

@@ -10,11 +10,7 @@
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import {
-  POSITION_CHANNELS,
-  tryGsapDragIntercept,
-  tryGsapRotationIntercept,
-} from "./gsapRuntimeBridge";
+import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import { readGsapPositionFromIframe } from "./gsapPositionDetection";
@@ -33,15 +29,19 @@ import { setElementGsapPosition } from "../utils/elementGsap";
 import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import { runGestureTransaction } from "./gestureTransaction";
-import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
-import { assertGsapEditPersisted, type GsapEditOutcome } from "./gsapEditOutcome";
+import {
+  gsapWritesPosition,
+  hasNonHoldTweenForElement,
+  POSITION_CHANNELS,
+} from "./gsapRuntimeKeyframes";
+import { assertGsapEditPersisted, saveMove } from "./gsapEditOutcome";
 import type { GsapAnimationFetchOptions } from "./useGsapAnimationFetchFallback";
-
-/** A move only a shared tween positions is saved on the element itself; a blocked one throws. */
-async function saveMove(outcome: GsapEditOutcome, saveOnElement: () => Promise<void>) {
-  if (outcome.status === "element-offset") return saveOnElement();
-  assertGsapEditPersisted(outcome);
-}
+import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+import {
+  prepareCropResize,
+  saveCropResize,
+  writeSizeWithCrop,
+} from "../components/editor/cropResize";
 
 // Distinct coalesceKey per group drag so consecutive group drags don't fold
 // into one another's undo entry (module-local counter, not Date.now()).
@@ -87,6 +87,7 @@ export interface UseGsapAwareEditingParams {
     next: { width: number; height: number },
     offset?: { x: number; y: number },
   ) => Promise<void>;
+  commitPositionPatchToHtml: ElementOffsetStagerDeps["commitPositionPatchToHtml"];
   // GSAP script commit ops (from useGsapScriptCommits)
   addGsapAnimation: (
     sel: DomEditSelection,
@@ -130,6 +131,7 @@ export function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
   setArcPath,
@@ -151,6 +153,8 @@ export function useGsapAwareEditing({
       next: { x: number; y: number },
       modifiers?: { altKey?: boolean },
     ) => {
+      if (!gsapWritesPosition(selection.element))
+        return stageElementPositionOffset(selection, next).save();
       if (gsapCommitMutation) {
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -183,11 +187,8 @@ export function useGsapAwareEditing({
     ],
   );
 
-  // Multi-select (group) drag: route EACH element through the SAME GSAP intercept as
-  // a single drag, so every position is written as GSAP code (tl.set / keyframes /
-  // gsap.set) — NEVER the deprecated `--hf-studio-offset` CSS var, and GSAP-animated
-  // elements are no longer blocked in a group. No CSS fallback: with no GSAP
-  // composition there's nothing to write (a no-op, exactly like the single-drag path).
+  // Multi-select (group) drag: each member takes the single drag's writer, so a member GSAP
+  // does not position is saved on itself and the rest go through the GSAP intercept.
   const handleGsapAwareGroupPathOffsetCommit = useCallback(
     async (updates: DomEditGroupPathOffsetCommit[]) => {
       if (!gsapCommitMutation || updates.length === 0) return;
@@ -245,6 +246,7 @@ export function useGsapAwareEditing({
       // turns N sequential round trips into one.
       const preflightResults = await Promise.allSettled(
         updates.map(async ({ selection }) => {
+          if (!gsapWritesPosition(selection.element)) return void offsetMembers.add(selection);
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -353,6 +355,8 @@ export function useGsapAwareEditing({
         animGroups: targetAnimations.map((a) => `${a.propertyGroup}:${a.method}`),
       });
       let anchorMove: ReturnType<typeof stageElementPositionOffset> | null = null;
+      const stageCrop = prepareCropResize(selection.element);
+      let cropUndoKey: string | null = null;
       return runGestureTransaction({
         element: selection.element,
         label: "Resize layer",
@@ -381,6 +385,7 @@ export function useGsapAwareEditing({
                 makeFetchFallback(selection),
               );
               assertGsapEditPersisted(outcome);
+              cropUndoKey = coalesceKey;
               // What the resize actually did, not what its animations suggest
               // it would do. An element whose scale is an instant hold has a
               // scale-group tween and still commits width/height, so guessing
@@ -424,7 +429,13 @@ export function useGsapAwareEditing({
           logResizeSettle(selection.element, "dom-route");
           await handleDomBoxSizeCommit(selection, next, offset);
         },
-        afterBufferedCommitsSaved: () => anchorMove?.save() ?? Promise.resolve(),
+        afterBufferedCommitsSaved: async () => {
+          await anchorMove?.save();
+          // Only now is the size live for every caller, drag or not.
+          if (cropUndoKey) {
+            await saveCropResize(stageCrop, selection, commitPositionPatchToHtml, cropUndoKey);
+          }
+        },
         restore: () => {
           anchorMove?.rollback();
           restore();
@@ -434,6 +445,7 @@ export function useGsapAwareEditing({
     },
     [
       handleDomBoxSizeCommit,
+      commitPositionPatchToHtml,
       stageElementPositionOffset,
       gsapCommitMutation,
       previewIframeRef,
@@ -481,10 +493,7 @@ export function useGsapAwareEditing({
 
   // ── Animated property commit ──
 
-  const {
-    commitAnimatedProperty: commitAnimatedPropertyRaw,
-    commitAnimatedProperties: commitAnimatedPropertiesRaw,
-  } = useAnimatedPropertyCommit({
+  const { commitAnimatedProperties: commitAnimatedPropertiesRaw } = useAnimatedPropertyCommit({
     selectedGsapAnimations,
     gsapCommitMutation,
     addGsapAnimation: (sel, method, time) => addGsapAnimation(sel, method, time),
@@ -496,25 +505,30 @@ export function useGsapAwareEditing({
   const commitAnimatedProperties = useCallback(
     async (selection: DomEditSelection, properties: Record<string, number | string>) => {
       try {
-        await commitAnimatedPropertiesRaw(selection, properties);
+        await writeSizeWithCrop(
+          selection,
+          properties,
+          gsapCommitMutation,
+          commitPositionPatchToHtml,
+          (keyed) => commitAnimatedPropertiesRaw(selection, properties, keyed),
+        );
       } catch (error) {
         trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
         throw error;
       }
     },
-    [commitAnimatedPropertiesRaw, trackGsapInteractionFailure],
+    [
+      commitAnimatedPropertiesRaw,
+      commitPositionPatchToHtml,
+      gsapCommitMutation,
+      trackGsapInteractionFailure,
+    ],
   );
 
   const commitAnimatedProperty = useCallback(
-    async (selection: DomEditSelection, property: string, value: number | string) => {
-      try {
-        await commitAnimatedPropertyRaw(selection, property, value);
-      } catch (error) {
-        trackGsapInteractionFailure(error, selection, "property", "Edit animated property");
-        throw error;
-      }
-    },
-    [commitAnimatedPropertyRaw, trackGsapInteractionFailure],
+    (selection: DomEditSelection, property: string, value: number | string) =>
+      commitAnimatedProperties(selection, { [property]: value }),
+    [commitAnimatedProperties],
   );
 
   // ── Arc path wrappers ──