@hyperframes/studio 0.8.102 → 0.8.104

package/src/components/editor/useDomEditNudge.ts

@@ -18,6 +18,7 @@ import {
 import type {
   BlockedMoveState,
   DomEditGroupPathOffsetCommit,
+  MoveCommitOptions,
   GestureState,
   GroupGestureState,
 } from "./domEditOverlayGestures";
@@ -55,11 +56,12 @@ export interface UseDomEditNudgeParams {
   groupGestureRef: RefObject<GroupGestureState | null>;
   blockedMoveRef: RefObject<BlockedMoveState | null>;
   onManualDragStartRef: RefObject<(() => void) | undefined>;
+  onBlockedMoveRef: RefObject<(selection: DomEditSelection, reason?: string) => void>;
   onPathOffsetCommitRef: RefObject<
     (
       s: DomEditSelection,
       n: { x: number; y: number },
-      m?: { altKey?: boolean },
+      m?: MoveCommitOptions,
     ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<
@@ -149,11 +151,14 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
       selection: member.selection,
       next: applyManualOffsetNudgeCommit(member, session.accum),
+      plainTranslate: member.plainTranslate,
     }));
     const p = paramsRef.current;
     const commit = session.isGroup
       ? p.onGroupPathOffsetCommitRef.current(updates)
-      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next);
+      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
+          plainTranslate: updates[0].plainTranslate,
+        });
     void Promise.resolve(commit)
       .catch(() => {
         for (const member of session.members) {
@@ -179,7 +184,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
   // Build drag members for the current target set — the same member snapshot a
   // pointer drag starts from (startGesture / startGroupDrag), so the nudge
   // commit converts offsets → GSAP x/y with identical math.
-  const beginSession = (): NudgeSession | null => {
+  const beginSession = (event: KeyboardEvent): NudgeSession | "refused" | null => {
     const p = paramsRef.current;
     const groupItems = p.groupOverlayItemsRef.current;
     const isGroup = groupItems.length > 1;
@@ -192,7 +197,8 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
       const result = createManualOffsetDragMember({ ...target, gesture: "nudge" });
       if (!result.ok) {
         restoreManualOffsetDragMembers(members);
-        return null;
+        if (!event.repeat) p.onBlockedMoveRef.current(result.selection, result.reason);
+        return "refused";
       }
       members.push(result.member);
     }
@@ -207,7 +213,8 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (shouldIgnoreNudgeKey(p, event)) return;
     const delta = resolveCanvasNudgeDelta(event);
     if (!delta) return;
-    const session = sessionRef.current ?? beginSession();
+    const session = sessionRef.current ?? beginSession(event);
+    if (session === "refused") return void event.preventDefault();
     if (!session) return;
     sessionRef.current = session;
     event.preventDefault();

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -9,21 +9,18 @@ import { type DomEditSelection } from "./domEditing";
 import {
   applyManualOffsetDragCommit,
   applyManualOffsetDragDraft,
-  applyRotationDraftViaGsap,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
 } from "./manualOffsetDrag";
+import { applyRotationDraft, restoreRotationDraft } from "./rotationDraft";
 import {
   applyStudioBoxSize,
   applyStudioBoxSizeDraft,
-  applyStudioRotation,
-  applyStudioRotationDraft,
   endStudioManualEditGesture,
   isStudioManualEditGestureCurrent,
   readStudioBoxSize,
   restoreStudioBoxSize,
   restoreStudioPathOffset,
-  restoreStudioRotation,
 } from "./manualEdits";
 import {
   type GroupOverlayItem,
@@ -166,9 +163,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
-        applyStudioRotationDraft(sel.element, rotated);
-      }
+      applyRotationDraft(sel.element, rotated.angle, g.plainRotation);
       return;
     }
 
@@ -336,6 +331,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       const updates = groupG.members.map((member) => ({
         selection: member.selection,
         next: applyManualOffsetDragCommit(member, dx, dy),
+        plainTranslate: member.plainTranslate,
       }));
       logDrag("drop", {
         pointer: `${Math.round(rawDx)},${Math.round(rawDy)}`,
@@ -421,24 +417,22 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      const restoreRotation = () => {
-        // Single source of truth: snap the GSAP rotation back to the gesture's base
-        // angle; fall back to the legacy CSS-var restore when gsap is unavailable.
-        if (!applyRotationDraftViaGsap(sel.element, g.actualRotation)) {
-          restoreStudioRotation(sel.element, g.initialRotation);
-        }
-      };
+      const restoreRotation = () =>
+        restoreRotationDraft(
+          sel.element,
+          g.actualRotation,
+          g.initialRotation,
+          g.plainRotation !== null,
+        );
       if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
       }
-      // Keep the preview at the final angle through the GSAP channel (NOT the CSS var)
-      // while the commit lands a `tl.set`/keyframe rotation on the timeline.
-      if (!applyRotationDraftViaGsap(sel.element, finalRotation.angle)) {
-        applyStudioRotation(sel.element, finalRotation);
-      }
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation))
+      // Hold the final angle while the commit lands.
+      applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
+      const commit = g.plainRotation ? { ...finalRotation, plain: g.plainRotation } : finalRotation;
+      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit))
         .catch((error) => {
           logGestureCommitFailure("rotate commit failed", error);
           if (
@@ -476,7 +470,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         box.style.top = `${nextBoxTop}px`;
       }
       void Promise.resolve(
-        opts.onPathOffsetCommitRef.current(sel, finalOffset, { altKey: e.altKey }),
+        opts.onPathOffsetCommitRef.current(sel, finalOffset, {
+          altKey: e.altKey,
+          plainTranslate: g.pathOffsetMember.plainTranslate,
+        }),
       )
         .catch(() => {
           if (
@@ -555,11 +552,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "rotation" && sel) {
-      applyRotationDraftViaGsap(
+      restoreRotationDraft(
         sel.element,
-        g.actualRotation - (Number.parseFloat(g.initialRotation.studioRotation) || 0),
+        g.actualRotation,
+        g.initialRotation,
+        g.plainRotation !== null,
       );
-      restoreStudioRotation(sel.element, g.initialRotation);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
     }
     opts.blockedMoveRef.current = null;

package/src/hooks/draggedGsapPosition.ts

@@ -8,6 +8,34 @@ import { roundTo3 } from "../utils/rounding";
  * it without pulling the GSAP commit graph into its module scope.
  */
 
+const cssValue = (style: CSSStyleDeclaration, prop: string) => {
+  const value = style.getPropertyValue(prop).trim();
+  return value === "none" ? "" : value;
+};
+
+// Without GSAP, the rotation GSAP will parse from the CSS `rotate`, `scale` and `transform`; with
+// `withRotate` false, only the part `scale` and `transform` draw. GSAP folds them into one transform,
+// and a list the browser rejects (e.g. `rotate: x 30deg`) leaves it only the plain transform.
+export function readCssRotation(element: HTMLElement, withRotate = true): number {
+  const view = element.ownerDocument.defaultView;
+  if (!view) return 0;
+  const style = view.getComputedStyle(element);
+  const rotate = withRotate ? cssValue(style, "rotate") : "";
+  const scale = cssValue(style, "scale");
+  const transform = cssValue(style, "transform");
+  const angle = (list: string) => {
+    if (!list) return 0;
+    const m = new view.DOMMatrix(list);
+    return (Math.atan2(m.b, m.a) * 180) / Math.PI;
+  };
+  const folded = [rotate && `rotate(${rotate})`, scale && `scale(${scale.split(/\s+/).join(",")})`];
+  try {
+    return angle([...folded, transform].join(" ").trim());
+  } catch {
+    return angle(transform);
+  }
+}
+
 /**
  * Translate a studio drag offset into absolute GSAP x/y, accounting for the
  * element's rotation and its drag-start base pose. Reads the drag-start

package/src/hooks/elementOffsetStager.ts

@@ -6,7 +6,11 @@ import {
 import { LAYER_REVEAL_PRIOR_POSITION_ATTR } from "../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import { translatePatch } from "../components/editor/plainTranslate";
-import { gsapWritesPosition } from "./gsapRuntimeKeyframes";
+import { gsapHoldsTranslate } from "./gsapRuntimeKeyframes";
+import { markStudioSaveErrorAlreadyToasted } from "../utils/studioSaveDiagnostics";
+
+const GSAP_TOOK_OVER =
+  "The animation took over this layer's position during the move, so it was not saved.";
 
 const ELEMENT_OFFSET_REFUSED: Record<ElementOffsetRefusal, string> = {
   anchored: "This layer is anchored from its right or bottom edge. Move it in the Code tab.",
@@ -23,15 +27,29 @@ export interface ElementOffsetStagerDeps {
   readOnlyPreview?: boolean;
 }
 
+function gsapOf(el: HTMLElement): { set: (t: Element, v: object) => void } | undefined {
+  return (el.ownerDocument.defaultView as { gsap?: { set: (t: Element, v: object) => void } })
+    ?.gsap;
+}
+
 /** The drag draft moved GSAP's x/y; left/top carries the move now, so put them back. */
 function settleGsapDraftAtGestureStart(el: HTMLElement): void {
-  const gsap = (el.ownerDocument.defaultView as { gsap?: { set: (t: Element, v: object) => void } })
-    ?.gsap;
+  const gsap = gsapOf(el);
   const x = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-x") ?? "");
   const y = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "");
   if (gsap && Number.isFinite(x) && Number.isFinite(y)) gsap.set(el, { x, y });
 }
 
+export function refuseGsapTakeover(
+  el: HTMLElement,
+  showToast: ElementOffsetStagerDeps["showToast"],
+) {
+  if (!gsapHoldsTranslate(el)) return;
+  gsapOf(el)?.set(el, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
+  showToast(GSAP_TOOK_OVER, "error");
+  throw markStudioSaveErrorAlreadyToasted(new Error(GSAP_TOOK_OVER));
+}
+
 let plainMoveCounter = 0;
 
 /** GSAP does not position the element: `next` is its whole translate, live now and saved as drawn. */
@@ -58,17 +76,19 @@ function stagePlainTranslate(
   return { save, rollback };
 }
 
-/** Applies a move on the element itself live now: its translate when GSAP does not position it,
- *  else left/top for a shared-tween element. Throws, after a toast, when it cannot. */
+/** Applies a move on the element itself live now: its translate on the plain route, else
+ *  left/top for a shared-tween element. Throws, after a toast, when it cannot. */
 export function stageElementOffset(
   { commitPositionPatchToHtml, showToast, readOnlyPreview }: ElementOffsetStagerDeps,
   selection: DomEditSelection,
   next: { x: number; y: number },
+  plainTranslate: boolean,
   coalesceKey?: string,
 ): { save: () => Promise<void>; rollback: () => void } {
   const el = selection.element;
   if (readOnlyPreview) return { save: () => Promise.resolve(), rollback: () => undefined };
-  if (!gsapWritesPosition(el)) {
+  if (plainTranslate) {
+    refuseGsapTakeover(el, showToast);
     return stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey);
   }
   const previous = { position: el.style.position, left: el.style.left, top: el.style.top };

package/src/hooks/gsapRuntimeBridge.ts

@@ -35,7 +35,11 @@ import {
   pickClosestToPlayhead,
   readGsapPositionFromIframe,
 } from "./gsapPositionDetection";
-import { hasNonHoldTweenForElement, POSITION_CHANNELS } from "./gsapRuntimeKeyframes";
+import {
+  hasNonHoldTweenForElement,
+  POSITION_CHANNELS,
+  ROTATION_CHANNELS,
+} from "./gsapRuntimeKeyframes";
 import { getAnimationsForElement } from "./gsapElementMatch";
 import {
   animationWritesAnyProperty,
@@ -44,8 +48,6 @@ import {
 } from "./gsapEditOutcome";
 
 const POSITION_CHANNEL_SET = new Set<string>(POSITION_CHANNELS);
-
-const ROTATION_CHANNELS: string[] = ["rotation", "rotationX", "rotationY", "rotationZ"];
 const ROTATION_CHANNEL_SET = new Set<string>(ROTATION_CHANNELS);
 
 // ── Property-group tween resolution ───────────────────────────────────────

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -11,6 +11,7 @@
 import { buildArcPath, type ArcPathConfig } from "@hyperframes/core/gsap-parser-acorn";
 import { parsePercentageKeyframes, toAbsoluteTime } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
+import { BOX_SIZE_STYLE_PROPS } from "../components/editor/manualEditsDomPatches";
 
 /**
  * A GSAP tween's `vars` object — intentionally open: it mixes channel values
@@ -439,11 +440,44 @@ function gsapWritesChannels(el: Element, channels: string[]): boolean {
   );
 }
 
+// GSAP's CSSPlugin also takes rotate, rotateX/Y/Z for rotation.
+export const ROTATION_CHANNELS: string[] = [
+  ...["rotation", "rotationX", "rotationY", "rotationZ"],
+  ...["rotate", "rotateX", "rotateY", "rotateZ"],
+];
+
+const gsapRendersTransform = (el: Element) =>
+  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
+
 /** 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);
+  return gsapRendersTransform(el) || gsapWritesChannels(el, MOVE_CHANNELS);
+}
+
+/** `gsapWritesPosition` for a rotate: everything else turns by its own CSS `rotate`. */
+export function gsapWritesRotation(el: Element): boolean {
+  return gsapRendersTransform(el) || gsapWritesChannels(el, ROTATION_CHANNELS);
+}
+
+export function gsapHoldsTranslate(el: Element): boolean {
+  const cache = (el as { _gsap?: Record<string, unknown> })._gsap;
+  return ["x", "y", "xPercent", "yPercent"].some(
+    (key) => !!Number.parseFloat(String(cache?.[key])),
+  );
+}
+
+const BOX_CHANNELS = [
+  ...BOX_SIZE_STYLE_PROPS.map((prop) =>
+    prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase()),
+  ),
+  "scaleX",
+  "scaleY",
+];
+
+/** GSAP owns this element's box: its position, or any property the CSS box writer sets. Else a resize writes CSS. */
+export function gsapWritesBox(el: Element): boolean {
+  return gsapWritesPosition(el) || gsapWritesChannels(el, BOX_CHANNELS);
 }
 
 /** `hasNonHoldTweenForElement` for an element in hand, read from its own window's timelines. */

package/src/hooks/plainRotation.test.ts

@@ -0,0 +1,122 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import {
+  applyStudioRotation,
+  reapplyPositionEditsAfterSeek,
+} from "../components/editor/manualEdits";
+import { STUDIO_ROTATION_ATTR } from "../components/editor/manualEditsTypes";
+import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+import { savePlainRotation } from "./plainRotation";
+import { readShownRotation } from "../components/editor/plainTranslate";
+
+function rotate(
+  element: HTMLElement,
+  angle: number,
+  options: { save?: () => Promise<void>; readOnlyPreview?: boolean } = {},
+) {
+  element.id = "box";
+  document.body.append(element);
+  const commitPositionPatchToHtml = vi.fn<ElementOffsetStagerDeps["commitPositionPatchToHtml"]>(
+    options.save ?? (() => Promise.resolve()),
+  );
+  const selection = { element, id: "box", selector: "#box" } as unknown as DomEditSelection;
+  const saved = savePlainRotation(
+    { commitPositionPatchToHtml, readOnlyPreview: options.readOnlyPreview },
+    selection,
+    { angle },
+  );
+  return { saved, commitPositionPatchToHtml, selection };
+}
+
+describe("savePlainRotation", () => {
+  it("saves the element's own rotate, less what its transform turns, with no Studio marks", async () => {
+    const element = document.createElement("div");
+    element.style.transform = "rotate(10deg)";
+    const { saved, commitPositionPatchToHtml, selection } = rotate(element, 55);
+    await saved;
+    expect(element.style.getPropertyValue("rotate")).toBe("45deg");
+    expect(commitPositionPatchToHtml).toHaveBeenCalledWith(
+      selection,
+      [{ type: "inline-style", property: "rotate", value: "45deg" }],
+      expect.objectContaining({ label: "Rotate layer" }),
+    );
+    expect(element.hasAttribute(STUDIO_ROTATION_ATTR)).toBe(false);
+  });
+
+  it("drops a legacy Studio rotation in the same write, so a seek does not put its angle back", async () => {
+    const element = document.createElement("div");
+    applyStudioRotation(element, { angle: 15 });
+    const { saved, commitPositionPatchToHtml } = rotate(element, 40);
+    await saved;
+    const patches = commitPositionPatchToHtml.mock.calls[0]![1];
+    expect(patches).toContainEqual({
+      type: "attribute",
+      property: STUDIO_ROTATION_ATTR,
+      value: null,
+    });
+    expect(patches.at(-1)).toEqual({ type: "inline-style", property: "rotate", value: "40deg" });
+    reapplyPositionEditsAfterSeek(document);
+    expect(element.style.getPropertyValue("rotate")).toBe("40deg");
+  });
+
+  it("puts the live rotate back when the save fails", async () => {
+    const element = document.createElement("div");
+    element.style.setProperty("rotate", "12deg");
+    const { saved } = rotate(element, 30, { save: () => Promise.reject(new Error("offline")) });
+    await expect(saved).rejects.toThrow("offline");
+    expect(element.style.getPropertyValue("rotate")).toBe("12deg");
+  });
+
+  it("writes nothing in a read-only preview", async () => {
+    const element = document.createElement("div");
+    const { saved, commitPositionPatchToHtml } = rotate(element, 30, { readOnlyPreview: true });
+    await saved;
+    expect(element.style.getPropertyValue("rotate")).toBe("");
+    expect(commitPositionPatchToHtml).not.toHaveBeenCalled();
+  });
+
+  it("saves a transform-centred element's turn in its transform and puts it back on a failed save", async () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate(-120px, -80px)";
+    const { saved, commitPositionPatchToHtml } = rotate(element, 25, {
+      save: () => Promise.reject(new Error("offline")),
+    });
+    expect(commitPositionPatchToHtml.mock.calls[0]![1]).toEqual([
+      {
+        type: "inline-style",
+        property: "transform",
+        value: "translate(-120px, -80px) rotate(25deg)",
+      },
+    ]);
+    await expect(saved).rejects.toThrow("offline");
+    expect(element.style.getPropertyValue("transform")).toBe("translate(-120px, -80px)");
+  });
+
+  it("makes an inline element inline-block, as a turn needs, and puts it back on a failed save", async () => {
+    const element = document.createElement("span");
+    element.style.setProperty("display", "inline");
+    const { saved, commitPositionPatchToHtml } = rotate(element, 20, {
+      save: () => Promise.reject(new Error("offline")),
+    });
+    expect(commitPositionPatchToHtml.mock.calls[0]![1]).toEqual([
+      { type: "inline-style", property: "display", value: "inline-block" },
+      { type: "inline-style", property: "rotate", value: "20deg" },
+    ]);
+    await expect(saved).rejects.toThrow("offline");
+    expect(element.style.getPropertyValue("display")).toBe("inline");
+  });
+});
+
+describe("readShownRotation", () => {
+  it("shows an element's own CSS turn, and GSAP's legacy reading once GSAP turns it", () => {
+    const element = document.createElement("div");
+    document.body.append(element);
+    element.style.setProperty("rotate", "25deg");
+    expect(readShownRotation(element)).toEqual({ angle: 25 });
+    Object.assign(element, { _gsap: { renderTransform: () => {} } });
+    applyStudioRotation(element, { angle: 15 });
+    expect(readShownRotation(element)).toEqual({ angle: 15 });
+  });
+});

package/src/hooks/plainRotation.ts

@@ -0,0 +1,42 @@
+import type { DomEditSelection } from "../components/editor/domEditing";
+import { captureStudioRotation, clearStudioRotation } from "../components/editor/manualEdits";
+import { buildClearRotationPatches } from "../components/editor/manualEditsDomPatches";
+import { STUDIO_ROTATION_ATTR } from "../components/editor/manualEditsTypes";
+import {
+  applyCssRotation,
+  restorePlainRotation,
+  type RotationCommit,
+} from "../components/editor/rotationDraft";
+import type { PatchOperation } from "../utils/sourcePatcher";
+import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+
+let plainRotateCounter = 0;
+
+/** GSAP does not turn the element: `next` is its whole angle, drawn and saved as its CSS turn. */
+export function savePlainRotation(
+  { commitPositionPatchToHtml, readOnlyPreview }: Omit<ElementOffsetStagerDeps, "showToast">,
+  selection: DomEditSelection,
+  next: RotationCommit,
+): Promise<void> {
+  if (readOnlyPreview) return Promise.resolve();
+  const { element } = selection;
+  const before = captureStudioRotation(element);
+  // Legacy marks go in the same write, or a seek puts their angle back; clearing them voids the press read.
+  const patches: PatchOperation[] = element.hasAttribute(STUDIO_ROTATION_ATTR)
+    ? buildClearRotationPatches(element)
+    : [];
+  if (patches.length) clearStudioRotation(element);
+  const drawn = applyCssRotation(element, next.angle, patches.length ? undefined : next.plain);
+  patches.push(...drawn);
+  const turn = drawn.at(-1)!;
+  return commitPositionPatchToHtml(selection, patches, {
+    label: "Rotate layer",
+    coalesceKey: `rotate:${++plainRotateCounter}`,
+    coalesceMs: Number.POSITIVE_INFINITY,
+  }).catch((error) => {
+    if (element.style.getPropertyValue(turn.property) === turn.value) {
+      restorePlainRotation(element, before);
+    }
+    throw error;
+  });
+}

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(