@hyperframes/studio 0.8.97 → 0.8.99

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;
 
@@ -56,6 +58,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 +67,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 +80,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 +98,9 @@ function mountResizeHandler(
     anchorSave,
     anchorRollback,
     commitMutation,
+    commitPatch,
     resize: resize!,
+    property: property!,
     root,
   };
 }
@@ -122,6 +131,7 @@ function mountGroupHandler({
       trackGsapInteractionFailure,
       stageElementPositionOffset,
       handleDomBoxSizeCommit: vi.fn(),
+      commitPositionPatchToHtml: vi.fn(),
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
       setArcPath: vi.fn(),
@@ -257,6 +267,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 +384,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]!,
     );

package/src/hooks/useGsapAwareEditing.ts

@@ -34,14 +34,14 @@ 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 { 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,
@@ -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 ──

package/src/hooks/useGsapTweenCache.element.test.tsx

@@ -16,9 +16,10 @@ const dotTween = {
 } as GsapAnimation;
 vi.mock("./keyframeCacheAstLoad", async (importOriginal) => ({
   ...(await importOriginal<typeof import("./keyframeCacheAstLoad")>()),
-  fetchParsedAnimations: async () => ({ animations: [dotTween] }),
+  fetchParsedAnimations: vi.fn(async () => ({ animations: [dotTween] })),
 }));
 const { useGsapAnimationsForElement } = await import("./useGsapTweenCache");
+const { fetchParsedAnimations } = await import("./keyframeCacheAstLoad");
 
 it("attributes a class tween by the selected element, not an earlier same-id copy in a sub-composition", async () => {
   document.body.innerHTML =
@@ -37,3 +38,24 @@ it("attributes a class tween by the selected element, not an earlier same-id cop
   expect(animations.map((animation) => animation.id)).toEqual(["dots"]);
   act(() => root.unmount());
 });
+
+it("reads a file with no tweens once: the parse endpoint answers from the file on disk", async () => {
+  vi.useFakeTimers();
+  vi.mocked(fetchParsedAnimations)
+    .mockClear()
+    .mockResolvedValue({ animations: [] } as never);
+  const selection = { id: "card", sourceFile: "index.html" } as DomEditSelection;
+  function Harness() {
+    useGsapAnimationsForElement("p", "index.html", selection, 0);
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  try {
+    await act(async () => {});
+    await act(async () => vi.advanceTimersByTime(2000));
+    expect(fetchParsedAnimations).toHaveBeenCalledTimes(1);
+  } finally {
+    act(() => root.unmount());
+    vi.useRealTimers();
+  }
+});

package/src/hooks/useGsapTweenCache.ts

@@ -41,7 +41,6 @@ export function useGsapAnimationsForElement(
   const [multipleTimelines, setMultipleTimelines] = useState(false);
   const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState(false);
   const lastFetchKeyRef = useRef("");
-  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Re-run the per-element cache populate when sub-comp DOM children appear, so a
   // sub-comp element gets its host-relative keyframe percentages (not elDuration=1).
   const domClipChildrenKey = usePlayerStore((s) =>
@@ -54,11 +53,6 @@ export function useGsapAnimationsForElement(
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
 
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = null;
-    }
-
     if (!projectId) {
       setAllAnimations([]);
       setMultipleTimelines(false);
@@ -80,28 +74,10 @@ export function useGsapAnimationsForElement(
       setAllAnimations(parsed.animations);
       setMultipleTimelines(parsed.multipleTimelines === true);
       setUnsupportedTimelinePattern(parsed.unsupportedTimelinePattern === true);
-
-      // Retry once if initial fetch returned 0 animations — handles
-      // cold-load race where the sourceFile isn't resolved yet.
-      if (parsed.animations.length === 0 && targetKey) {
-        retryTimerRef.current = setTimeout(() => {
-          if (cancelled) return;
-          fetchParsedAnimations(projectId, sourceFile).then((retryParsed) => {
-            if (cancelled) return;
-            if (retryParsed && retryParsed.animations.length > 0) {
-              setAllAnimations(retryParsed.animations);
-            }
-          });
-        }, 800);
-      }
     });
 
     return () => {
       cancelled = true;
-      if (retryTimerRef.current) {
-        clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = null;
-      }
     };
   }, [projectId, sourceFile, version, target?.id, target?.selector]);