@hyperframes/studio 0.8.103 → 0.8.105

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -2,21 +2,20 @@
  * Gesture-begin functions: startGroupDrag and startGesture.
  * These are pure "start a new gesture" operations — no draft rect updates.
  */
-import { readElementGsapNumber } from "../../utils/elementGsap";
 import { type DomEditSelection } from "./domEditing";
 import {
+  applyManualOffsetDragDraft,
   createManualOffsetDragMember,
-  readGsapRotation,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
+import { readCssRotationTarget, readRotationBase } from "./rotationDraft";
 import {
   beginStudioManualEditGesture,
   captureStudioBoxSize,
   captureStudioPathOffset,
   captureStudioRotation,
   readStudioBoxSize,
-  readStudioRotation,
 } from "./manualEdits";
 import {
   type OverlayRect,
@@ -32,6 +31,7 @@ import {
   type UseDomEditOverlayGesturesOptions,
 } from "./domEditOverlayGestures";
 import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
+import { gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
 import { logResize, resetResizeMoveLog } from "../../utils/resizeDebug";
 import { logDrag, readDragPositions, resetDragMoveLog } from "../../utils/dragDebug";
 
@@ -171,18 +171,6 @@ export function startGesture(
     Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
   const contentScaleY =
     Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
-  let resizeAnchor: GestureState["resizeAnchor"];
-  if (kind === "resize") {
-    const startBcr = sel.element.getBoundingClientRect();
-    resizeAnchor = {
-      anchorX: startBcr.x,
-      anchorY: startBcr.y,
-      baseGsapX: readElementGsapNumber(sel.element, "x") ?? 0,
-      baseGsapY: readElementGsapNumber(sel.element, "y") ?? 0,
-      pinX: 0,
-      pinY: 0,
-    };
-  }
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken: string | undefined;
   let pathOffsetMember: ManualOffsetDragMember | undefined;
@@ -205,11 +193,9 @@ export function startGesture(
     initialPathOffset = result.member.initialPathOffset;
     manualEditDragToken = result.member.gestureToken;
   } else {
-    // Center-anchored corner resize (CapCut model): the element scales about its
-    // CENTER, which stays planted. All four corners behave identically, so EVERY
-    // corner needs the manual-offset member that translates the element to re-pin
-    // its center per frame (the memberless else-branch is only a defensive fallback
-    // if member creation fails, e.g. the element can't take a manual offset).
+    // Center-anchored corner resize (CapCut model): the element scales about its planted CENTER,
+    // so every corner needs the member that re-pins the center per frame (the memberless
+    // branch is only a fallback for an element that can't take a manual offset).
     const needsAnchorOffset = kind === "resize" && sel.capabilities.canApplyManualOffset;
     if (needsAnchorOffset) {
       const result = createManualOffsetDragMember({
@@ -217,11 +203,14 @@ export function startGesture(
         selection: sel,
         element: sel.element,
         rect,
+        gesture: "resize",
       });
       if (result.ok) {
         pathOffsetMember = result.member;
         initialPathOffset = result.member.initialPathOffset;
         manualEditDragToken = result.member.gestureToken;
+        // Hold a % translate as the same px now, so a growing box can't drag it along mid-frame.
+        if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
         manualEditDragToken = beginStudioManualEditGesture(sel.element);
       }
@@ -230,10 +219,11 @@ export function startGesture(
     }
   }
 
-  // Rotation base = GSAP's rotation plus the legacy `--hf-studio-rotation` var. A plain-translate
-  // move never asks GSAP: reading a property makes it bake the CSS translate into its transform.
-  const gsapRotation = pathOffsetMember?.plainTranslate ? 0 : readGsapRotation(sel.element);
-  const rotation = { angle: gsapRotation + readStudioRotation(sel.element).angle };
+  // Rotation base: the angle the element shows. An element GSAP does not turn, or a plain-translate
+  // move, never asks GSAP: reading a property makes it bake the CSS into its transform.
+  const plain = !!pathOffsetMember?.plainTranslate || !gsapWritesRotation(sel.element);
+  const plainRotation = plain && kind === "rotate" ? readCssRotationTarget(sel.element) : null;
+  const rotation = { angle: readRotationBase(sel.element, plain) };
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
@@ -281,11 +271,11 @@ export function startGesture(
     actualWidth,
     actualHeight,
     actualRotation: rotation.angle,
+    plainRotation,
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
     contentScaleX,
     contentScaleY,
-    resizeAnchor,
     manualEditDragToken,
     snapContext,
     resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,

package/src/components/editor/easeCurveSvg.tsx

@@ -56,7 +56,7 @@ export function MiniCurveSvg({
       <path
         d={d}
         fill="none"
-        stroke={active ? "#3CE6AC" : "#737373"}
+        className={active ? "stroke-accent-ink" : "stroke-text-muted"}
         strokeWidth="1.5"
         strokeLinecap="round"
       />

package/src/components/editor/manualEdits.test.ts

@@ -10,7 +10,6 @@ import {
   applyStudioPathOffset,
   applyStudioPathOffsetDraft,
   applyStudioRotation,
-  applyStudioRotationDraft,
   beginStudioManualEditGesture,
   captureStudioBoxSize,
   captureStudioRotation,
@@ -210,16 +209,11 @@ describe("studio manual edits", () => {
     expect(card.style.getPropertyValue("rotate")).toContain(STUDIO_ROTATION_PROP);
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
 
-    applyStudioRotationDraft(card, { angle: -12.2604 });
-    expect(readStudioRotation(card)).toEqual({ angle: -12.26 });
-    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.26deg)");
-    expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
-
     const snapshot = captureStudioRotation(card);
-    applyStudioRotationDraft(card, { angle: 45 });
+    applyStudioRotation(card, { angle: 45 });
     restoreStudioRotation(card, snapshot);
-    expect(readStudioRotation(card)).toEqual({ angle: -12.26 });
-    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.26deg)");
+    expect(readStudioRotation(card)).toEqual({ angle: 24.247 });
+    expect(card.style.getPropertyValue(STUDIO_ROTATION_PROP)).toBe("24.247deg");
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
   });
 

package/src/components/editor/manualEdits.ts

@@ -29,7 +29,6 @@ export {
   applyStudioBoxSize,
   applyStudioBoxSizeDraft,
   applyStudioRotation,
-  applyStudioRotationDraft,
 } from "./manualEditsDom";
 
 export { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";

package/src/components/editor/manualEditsDom.ts

@@ -253,9 +253,9 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
 // — as the non-GSAP path does — composes ON TOP of GSAP's transform, and the
 // subsequent strip/reapply math compounds into a runaway matrix that flings the
 // element off-canvas. So for GSAP-animated elements we keep `translate: none`
-// and push the offset straight into GSAP's x/y via gsap.set; the var() offset is
-// still persisted (buildPathOffsetPatches), and GSAP re-reads it at init on
-// reload. Returns true when handled as GSAP (caller must skip the CSS path).
+// and push the offset straight into GSAP's x/y via gsap.set; the var() offset an
+// older Studio saved stays in the file, and GSAP re-reads it at init on reload.
+// Returns true when handled as GSAP (caller must skip the CSS path).
 // fallow-ignore-next-line complexity
 function applyStudioPathOffsetViaGsap(
   element: HTMLElement,
@@ -538,13 +538,3 @@ export function applyStudioRotation(element: HTMLElement, rotation: { angle: num
     composeStudioRotationValue(element, `var(${STUDIO_ROTATION_PROP}, 0deg)`),
   );
 }
-
-export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle: number }): void {
-  promoteInlineForTransform(element);
-  writeStudioRotationVars(element, rotation, { updateBase: false });
-  element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
-  element.style.setProperty(
-    "rotate",
-    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`),
-  );
-}

package/src/components/editor/manualEditsDomPatches.test.ts

@@ -42,16 +42,14 @@ import {
   STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR,
 } from "./studioMotionTypes";
 import {
-  buildPathOffsetPatches,
   buildClearPathOffsetPatches,
   buildBoxSizePatches,
   buildClearBoxSizePatches,
-  buildRotationPatches,
   buildClearRotationPatches,
   buildMotionPatches,
   buildClearMotionPatches,
 } from "./manualEditsDomPatches";
-import { applyStudioBoxSize, applyStudioPathOffset } from "./manualEditsDom";
+import { applyStudioBoxSize } from "./manualEditsDom";
 
 /* ── helpers ── */
 
@@ -72,39 +70,7 @@ function assertClearCoversKeys(buildOps: PatchOperation[], clearOps: PatchOperat
 
 /* ── Path offset ─────────────────────────────────────────────────────────── */
 
-describe("buildPathOffsetPatches / buildClearPathOffsetPatches", () => {
-  function populatedPathEl(): HTMLElement {
-    const e = div();
-    e.style.setProperty(STUDIO_OFFSET_X_PROP, "10px");
-    e.style.setProperty(STUDIO_OFFSET_Y_PROP, "20px");
-    e.style.setProperty("translate", "10px 20px");
-    e.setAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR, "5px 10px");
-    e.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, "3px");
-    e.style.setProperty("display", "flex");
-    e.setAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, "block");
-    return e;
-  }
-
-  it("populated: captures offset styles, attrs, display, and transform-display marker in declaration order", () => {
-    const ops = buildPathOffsetPatches(populatedPathEl());
-    expect(ops).toEqual([
-      { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: "10px" },
-      { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: "20px" },
-      { type: "inline-style", property: "translate", value: "10px 20px" },
-      { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" },
-      { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: "5px 10px" },
-      { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: "3px" },
-      { type: "inline-style", property: "display", value: "flex" },
-      { type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: "block" },
-    ]);
-  });
-
-  it("empty: bare element yields only the path-offset marker", () => {
-    expect(buildPathOffsetPatches(div())).toEqual([
-      { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" },
-    ]);
-  });
-
+describe("buildClearPathOffsetPatches", () => {
   it("clear: restores translate from STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR and display from STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR", () => {
     const e = div();
     e.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, "5px");
@@ -128,11 +94,6 @@ describe("buildPathOffsetPatches / buildClearPathOffsetPatches", () => {
     const ops = buildClearPathOffsetPatches(e);
     expect(ops.find((o) => o.property === "translate")?.value).toBeNull();
   });
-
-  it("build/clear symmetry: clear addresses every {type,property} key that build emits", () => {
-    const e = populatedPathEl();
-    assertClearCoversKeys(buildPathOffsetPatches(e), buildClearPathOffsetPatches(e));
-  });
 });
 
 /* ── Box size ────────────────────────────────────────────────────────────── */
@@ -287,93 +248,9 @@ describe("buildBoxSizePatches / buildClearBoxSizePatches", () => {
   });
 });
 
-/* ── Combined box-size + path-offset (anchored-corner resize) ──────────────── */
-
-describe("anchored-corner combined patch: [...buildBoxSizePatches, ...buildPathOffsetPatches]", () => {
-  // NW/NE/SW resize commits size AND anchor offset in ONE persist. The two
-  // builders read the same already-mutated element and are concatenated; this
-  // is only safe if their {type,property} keys are disjoint (no builder
-  // overwrites the other's op when the source patcher applies them in order).
-  it("concatenation of both builders emits disjoint {type,property} keys (no collision)", () => {
-    const e = div();
-    applyStudioBoxSize(e, { width: 300, height: 200 });
-    applyStudioPathOffset(e, { x: 10, y: 20 });
-
-    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
-    const keys = combined.map(opKey);
-    expect(new Set(keys).size, `duplicate {type,property} key in combined patch: ${keys}`).toBe(
-      keys.length,
-    );
-  });
-
-  it("combined patch carries BOTH markers so a soft-reload re-hydrates size and offset together", () => {
-    const e = div();
-    applyStudioBoxSize(e, { width: 300, height: 200 });
-    applyStudioPathOffset(e, { x: 10, y: 20 });
-
-    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
-    const has = (property: string) =>
-      combined.some((op) => op.type === "attribute" && op.property === property);
-    expect(has(STUDIO_BOX_SIZE_ATTR)).toBe(true);
-    expect(has(STUDIO_PATH_OFFSET_ATTR)).toBe(true);
-  });
-
-  it("order is size-first: every box-size op precedes every path-offset op", () => {
-    const e = div();
-    applyStudioBoxSize(e, { width: 300, height: 200 });
-    applyStudioPathOffset(e, { x: 10, y: 20 });
-
-    const boxKeys = new Set(buildBoxSizePatches(e).map(opKey));
-    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
-    const lastBoxIdx = combined.reduce((acc, op, i) => (boxKeys.has(opKey(op)) ? i : acc), -1);
-    const firstOffsetIdx = combined.findIndex(
-      (op) => op.type === "attribute" && op.property === STUDIO_PATH_OFFSET_ATTR,
-    );
-    expect(firstOffsetIdx).toBeGreaterThan(lastBoxIdx);
-  });
-});
-
 /* ── Rotation ────────────────────────────────────────────────────────────── */
 
-describe("buildRotationPatches / buildClearRotationPatches", () => {
-  function populatedRotEl(): HTMLElement {
-    const e = div();
-    e.style.setProperty(STUDIO_ROTATION_PROP, "45");
-    e.style.setProperty("rotate", "45deg");
-    e.style.setProperty("transform-origin", "left center");
-    e.style.setProperty("display", "block");
-    e.setAttribute(STUDIO_ORIGINAL_ROTATE_ATTR, "0deg");
-    e.setAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, "0deg");
-    e.setAttribute(STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, "center center");
-    e.setAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, "flex");
-    return e;
-  }
-
-  it("populated: captures rotation styles, attrs, and transform-display marker in declaration order", () => {
-    const ops = buildRotationPatches(populatedRotEl());
-    expect(ops).toEqual([
-      { type: "inline-style", property: STUDIO_ROTATION_PROP, value: "45" },
-      { type: "inline-style", property: "rotate", value: "45deg" },
-      { type: "inline-style", property: "transform-origin", value: "left center" },
-      { type: "inline-style", property: "display", value: "block" },
-      { type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" },
-      { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: "0deg" },
-      { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: "0deg" },
-      {
-        type: "attribute",
-        property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
-        value: "center center",
-      },
-      { type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: "flex" },
-    ]);
-  });
-
-  it("empty: bare element yields only the rotation marker", () => {
-    expect(buildRotationPatches(div())).toEqual([
-      { type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" },
-    ]);
-  });
-
+describe("buildClearRotationPatches", () => {
   it("clear: restores rotate and transform-origin from orig attrs, nulls draft attr", () => {
     const e = div();
     e.setAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, "30deg");
@@ -405,11 +282,6 @@ describe("buildRotationPatches / buildClearRotationPatches", () => {
     const ops = buildClearRotationPatches(e);
     expect(ops.find((o) => o.property === "rotate")?.value).toBeNull();
   });
-
-  it("build/clear symmetry: clear addresses every {type,property} key that build emits", () => {
-    const e = populatedRotEl();
-    assertClearCoversKeys(buildRotationPatches(e), buildClearRotationPatches(e));
-  });
 });
 
 /* ── Motion ──────────────────────────────────────────────────────────────── */

package/src/components/editor/manualEditsDomPatches.ts

@@ -72,36 +72,6 @@ function appendTransformDisplayOps(element: HTMLElement, ops: PatchOperation[]):
 
 /* ── Path offset patches ─────────────────────────────────────────── */
 
-export function buildPathOffsetPatches(element: HTMLElement): PatchOperation[] {
-  const ops: PatchOperation[] = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
-  // When GSAP owns the element's transform, the live inline translate is kept
-  // at "none" (the offset lives in GSAP's cache — see applyStudioPathOffset).
-  // Persist the var() expression in that case, so a reload re-folds the offset.
-  const inlineTranslate = element.style.getPropertyValue("translate");
-  const hasOffsetVars =
-    element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) ||
-    element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-  const translateValue =
-    inlineTranslate && inlineTranslate !== "none"
-      ? inlineTranslate
-      : hasOffsetVars
-        ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)`
-        : null;
-  if (translateValue) {
-    ops.push({ type: "inline-style", property: "translate", value: translateValue });
-  }
-  ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    [STUDIO_ORIGINAL_TRANSLATE_ATTR, STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR],
-    ops,
-  );
-  collectInlineStyleOps(element, ["display"], ops);
-  collectAttributeOps(element, [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR], ops);
-  return ops;
-}
-
 export function buildClearPathOffsetPatches(element: HTMLElement): PatchOperation[] {
   const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
   const ops: PatchOperation[] = [
@@ -118,7 +88,7 @@ export function buildClearPathOffsetPatches(element: HTMLElement): PatchOperatio
 
 /* ── Box size patches ────────────────────────────────────────────── */
 
-const BOX_SIZE_STYLE_PROPS = [
+export const BOX_SIZE_STYLE_PROPS = [
   "width",
   "height",
   "min-width",
@@ -185,28 +155,6 @@ export function buildClearBoxSizePatches(element: HTMLElement): PatchOperation[]
 
 /* ── Rotation patches ────────────────────────────────────────────── */
 
-const ROTATION_STYLE_PROPS = [
-  STUDIO_ROTATION_PROP,
-  "rotate",
-  "transform-origin",
-  "display",
-] as const;
-
-const ROTATION_ORIG_ATTRS = [
-  STUDIO_ORIGINAL_ROTATE_ATTR,
-  STUDIO_ORIGINAL_INLINE_ROTATE_ATTR,
-  STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
-  STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
-] as const;
-
-export function buildRotationPatches(element: HTMLElement): PatchOperation[] {
-  const ops: PatchOperation[] = [];
-  collectInlineStyleOps(element, ROTATION_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" });
-  collectAttributeOps(element, ROTATION_ORIG_ATTRS, ops);
-  return ops;
-}
-
 export function buildClearRotationPatches(element: HTMLElement): PatchOperation[] {
   const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
   const origRotationTransformOrigin = element.getAttribute(

package/src/components/editor/manualEditsSnapshot.ts

@@ -82,6 +82,8 @@ export function captureStudioBoxSize(element: HTMLElement): StudioBoxSizeSnapsho
 export function captureStudioRotation(element: HTMLElement): StudioRotationSnapshot {
   return {
     rotate: element.style.getPropertyValue("rotate"),
+    transform: element.style.getPropertyValue("transform"),
+    display: element.style.getPropertyValue("display"),
     transformOrigin: element.style.getPropertyValue("transform-origin"),
     studioRotation: element.style.getPropertyValue(STUDIO_ROTATION_PROP),
     marker: element.getAttribute(STUDIO_ROTATION_ATTR),
@@ -263,6 +265,7 @@ function restoreOriginalTranslateProperty(element: HTMLElement): void {
 export function clearStudioPathOffset(element: HTMLElement): void {
   if (
     element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) ||
+    element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) ||
     styleUsesStudioOffset(element.style.getPropertyValue("translate"))
   ) {
     restoreOriginalTranslateProperty(element);

package/src/components/editor/manualEditsTypes.ts

@@ -99,6 +99,8 @@ export interface StudioBoxSizeSnapshot {
 
 export interface StudioRotationSnapshot {
   rotate: string;
+  transform: string;
+  display: string;
   transformOrigin: string;
   studioRotation: string;
   marker: string | null;

package/src/components/editor/manualOffsetDrag.test.ts

@@ -652,3 +652,44 @@ describe("a move of an element GSAP does not position", () => {
     expect(member().plainTranslate).toBe(false);
   });
 });
+
+describe("a resize's anchor member", () => {
+  function anchorMember(tweenVars?: Record<string, number>) {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    element.id = "box";
+    window.document.body.append(element);
+    const tweens = tweenVars ? [{ vars: tweenVars, targets: () => [element] }] : [];
+    Object.assign(window, { __timelines: { main: { getChildren: () => tweens } } });
+    element.getBoundingClientRect = () => {
+      const [x = 0, y = 0] = element.style
+        .getPropertyValue("translate")
+        .split(" ")
+        .map((v) => Number.parseFloat(v));
+      return new window.DOMRect(10 + (x || 0), 20 + (y || 0), 100, 50);
+    };
+    const result = createManualOffsetDragMember({
+      key: "box",
+      selection: { element } as never,
+      element,
+      rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
+      gesture: "resize",
+    });
+    if (!result.ok) throw new Error("member");
+    return result.member;
+  }
+
+  it("keeps the centre with the element's own plain translate when GSAP does not own the box", () => {
+    const member = anchorMember();
+    expect(member.plainTranslate).toBe(true);
+    applyManualOffsetDragDraft(member, -10.25, 3.5);
+    expect(member.element.style.getPropertyValue("translate")).toBe("-10.25px 3.5px");
+  });
+
+  it.each(["width", "maxWidth", "minHeight", "flexBasis", "scale", "scaleX"])(
+    "leaves a box whose %s GSAP tweens, which the CSS box writer also sets, to the GSAP writer",
+    (channel) => {
+      expect(anchorMember({ [channel]: 300 }).plainTranslate).toBe(false);
+    },
+  );
+});

package/src/components/editor/manualOffsetDrag.ts

@@ -11,7 +11,7 @@ import {
   type StudioPathOffsetSnapshot,
 } from "./manualEdits";
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
-import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { gsapWritesBox, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
 
 interface OffsetDragGsap {
@@ -19,7 +19,7 @@ interface OffsetDragGsap {
   getProperty: (el: Element, prop: string) => number;
 }
 
-function getOffsetDragGsap(element: HTMLElement): OffsetDragGsap | null {
+export function getOffsetDragGsap(element: HTMLElement): OffsetDragGsap | null {
   const win = element.ownerDocument.defaultView as
     | (Window & { gsap?: Partial<OffsetDragGsap> })
     | null;
@@ -53,27 +53,6 @@ function applyOffsetDragDraftViaGsap(
   return true;
 }
 
-/**
- * Live rotation preview through the GSAP channel — the SAME channel the commit
- * lands in (a `tl.set`/keyframe rotation), mirroring `applyOffsetDragDraftViaGsap`.
- * GSAP owns the transform rotation, so neutralize the CSS `rotate` longhand to keep
- * the two channels from composing. `angle` is the absolute target rotation. Returns
- * false when gsap is unavailable (caller falls back to the CSS draft).
- */
-export function applyRotationDraftViaGsap(element: HTMLElement, angle: number): boolean {
-  const gsap = getOffsetDragGsap(element);
-  if (!gsap) return false;
-  element.style.setProperty("rotate", "none");
-  gsap.set(element, { rotation: angle });
-  return true;
-}
-
-/** Current GSAP transform rotation — the single-source rotation base. 0 if gsap is unavailable. */
-export function readGsapRotation(element: HTMLElement): number {
-  const gsap = getOffsetDragGsap(element);
-  return gsap ? Number(gsap.getProperty(element, "rotation")) || 0 : 0;
-}
-
 const DEFAULT_OFFSET_PROBE_PX = 100;
 const MIN_PROBE_VECTOR_LENGTH_PX = 0.01;
 const MIN_MATRIX_DETERMINANT = 0.000001;
@@ -337,11 +316,11 @@ export function createManualOffsetDragMember(input: {
   selection: DomEditSelection;
   element: HTMLElement;
   rect: ManualOffsetDragRect;
-  gesture?: "drag" | "nudge"; // a resize's anchor member keeps the legacy offset channel
+  gesture?: "drag" | "nudge" | "resize"; // resize: the anchor that keeps its centre planted
 }): ManualOffsetDragMemberResult {
-  const plainTranslate = !!input.gesture && !gsapWritesPosition(input.element);
-  // Base the drag on the offset ACTUALLY applied, never a dormant var (readAppliedStudioPathOffset),
-  // so a stale offset can't fling the element off-screen.
+  const gsapOwns = input.gesture === "resize" ? gsapWritesBox : gsapWritesPosition;
+  const plainTranslate = !!input.gesture && !gsapOwns(input.element);
+  // The APPLIED offset, never a dormant var, so a stale one can't fling the element off-screen.
   const initialOffset = plainTranslate
     ? readTranslatePx(input.element)
     : readAppliedStudioPathOffset(input.element);

package/src/components/editor/persistSeam.integration.test.ts

@@ -14,8 +14,6 @@ import {
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
 } from "./domEditingLayers";
-import { buildPathOffsetPatches } from "./manualEditsDomPatches";
-import { STUDIO_OFFSET_X_PROP, STUDIO_PATH_OFFSET_ATTR } from "./manualEditsTypes";
 import { makeSelection } from "../../hooks/domSelectionTestHarness";
 import { buildTextFieldChildOperations } from "../../hooks/domEditTextFieldCommitOps";
 
@@ -126,22 +124,6 @@ describe("persist seam source mutation", () => {
     expect(findByHfId(html, "qa-image").getAttribute("style")).toContain("opacity: 0.4");
   });
 
-  it("persists detached jsdom path offset operations", () => {
-    const element = document.createElement("div");
-    element.style.setProperty(STUDIO_OFFSET_X_PROP, "24px");
-
-    const html = patchAndExpectChange(
-      indexHtml,
-      clientTarget({ id: "qa-shape", hfId: "qa-shape", tagName: "div" }),
-      buildPathOffsetPatches(element),
-    );
-    const shape = findByHfId(html, "qa-shape");
-
-    expect(shape.getAttribute("style")).toContain(`${STUDIO_OFFSET_X_PROP}: 24px`);
-    expect(shape.getAttribute("style")).toContain("translate: var(--hf-studio-offset-x, 0px)");
-    expect(shape.getAttribute(STUDIO_PATH_OFFSET_ATTR)).toBe("true");
-  });
-
   it("persists timeline data-start attribute operation", () => {
     const html = patchAndExpectChange(
       indexHtml,