@hyperframes/studio 0.8.103 → 0.8.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.103",
+  "version": "0.8.104",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.103",
-    "@hyperframes/shader-transitions": "0.8.103",
-    "@hyperframes/core": "0.8.103",
-    "@hyperframes/studio-server": "0.8.103",
-    "@hyperframes/parsers": "0.8.103",
-    "@hyperframes/sdk": "0.8.103"
+    "@hyperframes/core": "0.8.104",
+    "@hyperframes/parsers": "0.8.104",
+    "@hyperframes/player": "0.8.104",
+    "@hyperframes/sdk": "0.8.104",
+    "@hyperframes/shader-transitions": "0.8.104",
+    "@hyperframes/studio-server": "0.8.104"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.103"
+    "@hyperframes/producer": "0.8.104"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/DomEditOverlay.tsx

@@ -1,3 +1,4 @@
+import type { RotationCommit } from "./rotationDraft";
 import { memo, useEffect, useMemo, useRef, type RefObject } from "react";
 import { type DomEditSelection } from "./domEditing";
 import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
@@ -10,6 +11,7 @@ import {
   type BlockedMoveState,
   type DomEditGroupPathOffsetCommit,
   type FocusableDomEditOverlay,
+  type MoveCommitOptions,
   type GestureState,
   type GroupGestureState,
   focusDomEditOverlayElement,
@@ -45,7 +47,7 @@ export {
   hasDomEditRotationChanged,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
-export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
+export type { DomEditGroupPathOffsetCommit, MoveCommitOptions } from "./domEditOverlayGestures";
 
 export interface DomEditOverlayProps {
   iframeRef: RefObject<HTMLIFrameElement | null>;
@@ -81,7 +83,7 @@ export interface DomEditOverlayProps {
   onPathOffsetCommit: (
     selection: DomEditSelection,
     next: { x: number; y: number },
-    modifiers?: { altKey?: boolean },
+    modifiers?: MoveCommitOptions,
   ) => Promise<unknown> | void;
   onGroupPathOffsetCommit: (updates: DomEditGroupPathOffsetCommit[]) => Promise<unknown> | void;
   onBoxSizeCommit: (
@@ -90,10 +92,7 @@ export interface DomEditOverlayProps {
     offset?: { x: number; y: number },
     restore?: () => void,
   ) => Promise<unknown> | void;
-  onRotationCommit: (
-    selection: DomEditSelection,
-    next: { angle: number },
-  ) => Promise<unknown> | void;
+  onRotationCommit: (selection: DomEditSelection, next: RotationCommit) => Promise<unknown> | void;
   onStyleCommit?: (property: string, value: string) => Promise<unknown> | void;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;

package/src/components/editor/PropertyPanel.tsx

@@ -3,8 +3,8 @@ import { memo, useMemo, useRef, useState } from "react";
 import { Move } from "../../icons/SystemIcons";
 import { InspectorHeaderActions } from "./InspectorHeaderActions";
 import { useStudioShellContext } from "../../contexts/StudioContext";
-import { readStudioBoxSize, readStudioRotation } from "./manualEdits";
-import { readMoveOffset } from "./plainTranslate";
+import { readStudioBoxSize } from "./manualEdits";
+import { readMoveOffset, readShownRotation } from "./plainTranslate";
 import {
   buildElementInfoText,
   EMPTY_STYLES,
@@ -210,7 +210,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
     manualSize.height > 0
       ? manualSize.height
       : (parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height);
-  const manualRotation = readStudioRotation(element.element);
+  const manualRotation = readShownRotation(element.element);
 
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;

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

@@ -16,23 +16,49 @@ const ORIGIN_CENTER = {
 
 // Consistent geometry stub: model the physical truth the real DOM would report.
 // A CSS width/height change grows the box from its top-left, so the rendered
-// center drifts by half the size delta; the manual offset the gesture applies
-// (read back from the element's studio vars) pulls it back. `elementCornerOverlayPoints`
+// center drifts by half the size delta; the element's own translate, which the gesture
+// writes in plain px, pulls it back. `elementCornerOverlayPoints`
 // returns the four corners of that drifted box; `overlayCornersCentroid` (kept
 // real) averages them so the anchor loop can measure the true center each frame.
+// An authored `translate: 25% 25%` follows the box size until the gesture writes px over it.
+const authored = vi.hoisted(() => ({ percent: 0 }));
+function inlineTranslate(element: HTMLElement): { x: number; y: number } | null {
+  const value = element.style.getPropertyValue("translate");
+  if (!value) return null;
+  const [x = 0, y = 0] = value.split(" ").map((v) => Number.parseFloat(v) || 0);
+  return { x, y };
+}
+function renderedTranslate(element: HTMLElement, width: number, height: number) {
+  return inlineTranslate(element) ?? { x: authored.percent * width, y: authored.percent * height };
+}
+
+vi.mock("./plainTranslate", async () => {
+  const actual = await vi.importActual<typeof import("./plainTranslate")>("./plainTranslate");
+  return {
+    ...actual,
+    readTranslatePx: (element: HTMLElement) =>
+      renderedTranslate(
+        element,
+        element.offsetWidth || ORIGIN.width,
+        element.offsetHeight || ORIGIN.height,
+      ),
+  };
+});
+
 vi.mock("./domEditOverlayGeometry", async () => {
   const actual = await vi.importActual<typeof import("./domEditOverlayGeometry")>(
     "./domEditOverlayGeometry",
   );
-  const { readStudioBoxSize, readStudioPathOffset } = await import("./manualEditsDom");
+  const { readStudioBoxSize } = await import("./manualEditsDom");
   const physicalCenter = (element: HTMLElement) => {
     const size = readStudioBoxSize(element);
     const width = size.width > 0 ? size.width : ORIGIN.width;
     const height = size.height > 0 ? size.height : ORIGIN.height;
-    const offset = readStudioPathOffset(element);
+    const offset = renderedTranslate(element, width, height);
+    const start = { x: authored.percent * ORIGIN.width, y: authored.percent * ORIGIN.height };
     return {
-      x: ORIGIN_CENTER.x + (width - ORIGIN.width) / 2 + offset.x,
-      y: ORIGIN_CENTER.y + (height - ORIGIN.height) / 2 + offset.y,
+      x: ORIGIN_CENTER.x + (width - ORIGIN.width) / 2 + offset.x - start.x,
+      y: ORIGIN_CENTER.y + (height - ORIGIN.height) / 2 + offset.y - start.y,
       width,
       height,
     };
@@ -189,6 +215,7 @@ async function finishResize(handlers: ReturnType<typeof createDomEditOverlayGest
 
 afterEach(() => {
   document.body.innerHTML = "";
+  authored.percent = 0;
 });
 
 describe("anchored corner resize — the release commit feeds the center-pin offset", () => {
@@ -227,6 +254,19 @@ describe("anchored corner resize — the release commit feeds the center-pin off
     expect(offset.y).toBeCloseTo(-(size.height - ORIGIN.height) / 2, 0);
   });
 
+  it("keeps the centre on the first frame when the authored translate is a percent", async () => {
+    const { orientedOverlayRect } = await import("./domEditOverlayGeometry");
+    authored.percent = 0.25;
+    const { handlers, selection } = buildHarness();
+    handlers.startGesture("resize", evt(ORIGIN_CENTER.x + 100, ORIGIN_CENTER.y), {
+      resizeHandle: "se",
+    });
+    handlers.onPointerMove(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+    const rect = orientedOverlayRect(null as never, null as never, selection.element)!;
+    expect(rect.left + rect.width / 2).toBeCloseTo(ORIGIN_CENTER.x, 1);
+    expect(rect.top + rect.height / 2).toBeCloseTo(ORIGIN_CENTER.y, 1);
+  });
+
   it("does not log a paused save queue as an ordinary resize failure", async () => {
     const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
     const { handlers } = buildHarness(() => Promise.reject(new DomEditSaveQueueOpenError()));

package/src/components/editor/domEditOverlayGestures.ts

@@ -6,6 +6,7 @@ import type {
   StudioRotationSnapshot,
 } from "./manualEdits";
 import type { ManualOffsetDragMember } from "./manualOffsetDrag";
+import type { CssRotationTarget, RotationCommit } from "./rotationDraft";
 import type { GroupOverlayItem, OverlayRect } from "./domEditOverlayGeometry";
 import type { SnapContext } from "./snapTargetCollection";
 import type { SnapGuidesState } from "./SnapGuideOverlay";
@@ -63,27 +64,14 @@ export interface GestureState {
   actualWidth: number;
   actualHeight: number;
   actualRotation: number;
+  /** Null when GSAP owns the rotate; else where its CSS turn is drawn and saved, read at press. */
+  plainRotation: CssRotationTarget | null;
   editScaleX: number;
   editScaleY: number;
-  // Rendered-per-CSS-pixel factor of the element itself at gesture start (a GSAP
-  // scale() transform makes this > 1) — the resize draft divides by it so the box
-  // follows the cursor instead of overshooting by the live scale.
+  // Rendered px per CSS px of the element at gesture start (> 1 under a GSAP scale()); the resize
+  // draft divides by it so the box follows the cursor instead of overshooting by the live scale.
   contentScaleX: number;
   contentScaleY: number;
-  // Resize anchor pinning: with a live scale transform, growing the CSS box
-  // shifts the rendered box (scaling happens around the element center), so the
-  // un-dragged corner creeps during the draft. The move handler measures the
-  // gesture-start top-left drift each frame and counters it through the GSAP
-  // position channel; the pin accumulates so the correction converges.
-  // Present only on resize gestures.
-  resizeAnchor?: {
-    anchorX: number;
-    anchorY: number;
-    baseGsapX: number;
-    baseGsapY: number;
-    pinX: number;
-    pinY: number;
-  };
   manualEditDragToken?: string;
   snapContext?: SnapContext;
   lastSnappedDx?: number;
@@ -232,9 +220,15 @@ export function hasDomEditRotationChanged(initialAngle: number, nextAngle: numbe
 // These live here (rather than in DomEditOverlay.tsx or useDomEditOverlayGestures.ts)
 // to break circular imports between those files.
 
+export interface MoveCommitOptions {
+  altKey?: boolean;
+  plainTranslate?: boolean;
+}
+
 export interface DomEditGroupPathOffsetCommit {
   selection: DomEditSelection;
   next: { x: number; y: number };
+  plainTranslate?: boolean;
 }
 
 // Refs are stable across renders; values are read via .current.
@@ -259,7 +253,7 @@ export type UseDomEditOverlayGesturesOptions = {
     (
       s: DomEditSelection,
       n: { x: number; y: number },
-      m?: { altKey?: boolean },
+      m?: MoveCommitOptions,
     ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<
@@ -274,7 +268,7 @@ export type UseDomEditOverlayGesturesOptions = {
     ) => Promise<unknown> | void
   >;
   onRotationCommitRef: RefObject<
-    (s: DomEditSelection, n: { angle: number }) => Promise<unknown> | void
+    (s: DomEditSelection, n: RotationCommit) => Promise<unknown> | void
   >;
   onCanvasPointerMoveRef: RefObject<
     (

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

@@ -20,38 +20,48 @@ const PRESS = {
   currentTarget: { setPointerCapture() {} },
 };
 
-/** Presses a drag on the element and returns the gesture it started. */
-function pressDrag(element: HTMLElement): GestureState | null {
+/** Presses a drag or resize on the element and returns the gesture it started. */
+function pressGesture(element: HTMLElement, kind: "drag" | "resize" = "drag"): GestureState | null {
   const opts = pressOptions(element);
   expect(
-    createDomEditOverlayGestureHandlers(opts as never).startGesture("drag", PRESS as never),
+    createDomEditOverlayGestureHandlers(opts as never).startGesture(kind, PRESS as never),
   ).toBe(true);
   return opts.gestureRef.current;
 }
 
 function pressOptions(element: HTMLElement) {
   const ref = <T>(current: T) => ({ current });
-  const selection = { element, capabilities: { canApplyManualOffset: true } };
+  const capabilities = { canApplyManualOffset: true, canApplyManualSize: true };
+  const selection = { element, capabilities };
   return {
     selectionRef: ref(selection as unknown as DomEditSelection),
     overlayRectRef: ref({ left: 0, top: 0, width: 240, height: 160, editScaleX: 1, editScaleY: 1 }),
-    boxRef: ref(null),
+    boxRef: ref(document.createElement("div")),
     overlayRef: ref(null),
     iframeRef: ref(null),
     gestureRef: ref<GestureState | null>(null),
     rafPausedRef: ref(false),
     onManualDragStartRef: ref(vi.fn()),
     onBlockedMoveRef: ref(vi.fn()),
+    onPathOffsetCommitRef: ref(vi.fn()),
+    snapGuidesRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    setOverlayRect: vi.fn(),
+    suppressNextBoxClickRef: ref(false),
+    hoverSelectionRef: ref(null),
+    onCanvasMouseDown: vi.fn(),
   };
 }
 
-describe("a drag press on a page that loads GSAP", () => {
+describe("a drag or resize press on a page that loads GSAP", () => {
   it.each([
-    ["GSAP animates nothing", false],
-    ["GSAP animates only its parent", true],
-  ])(
-    "%s: the press never asks GSAP about the element, so its translate stays CSS",
-    (_, parentTween) => {
+    ["drag", "GSAP animates nothing", false],
+    ["drag", "GSAP animates only its parent", true],
+    ["resize", "GSAP animates nothing", false],
+  ] as const)(
+    "%s, %s: the press never asks GSAP about the element, so its translate stays CSS",
+    (kind, _, parentTween) => {
       const getProperty = vi.fn(() => 0);
       const set = vi.fn();
       const parent = document.createElement("div");
@@ -62,7 +72,7 @@ describe("a drag press on a page that loads GSAP", () => {
       const tween = { targets: () => [parent], vars: { x: 100 }, duration: () => 2 };
       const timelines = { main: { getChildren: () => (parentTween ? [tween] : []) } };
       Object.assign(window, { gsap: { getProperty, set }, __timelines: timelines });
-      expect(pressDrag(element)?.pathOffsetMember?.plainTranslate).toBe(true);
+      expect(pressGesture(element, kind)?.pathOffsetMember?.plainTranslate).toBe(true);
       expect(getProperty).not.toHaveBeenCalled();
       expect(set).not.toHaveBeenCalled();
       expect(element.style.getPropertyValue("translate")).toBe("40px 30px");
@@ -77,7 +87,154 @@ describe("a drag press on a centred element without GSAP", () => {
       "position: absolute; left: 50%; top: 50%; width: 240px; height: 160px; translate: -50% -50%";
     document.body.append(element);
     const style = element.getAttribute("style");
-    expect(pressDrag(element)?.pathOffsetMember?.initialOffset).toEqual({ x: -120, y: -80 });
+    expect(pressGesture(element)?.pathOffsetMember?.initialOffset).toEqual({ x: -120, y: -80 });
     expect(element.getAttribute("style")).toBe(style);
   });
 });
+
+describe("a drag on an element without GSAP", () => {
+  it("drops on the route it chose at press, even if GSAP takes the element over mid-drag", () => {
+    const element = document.createElement("div");
+    element.style.setProperty("translate", "40px 30px");
+    document.body.append(element);
+    const opts = pressOptions(element);
+    const handlers = createDomEditOverlayGestureHandlers(opts as never);
+    expect(handlers.startGesture("drag", PRESS as never)).toBe(true);
+    Object.assign(element, { _gsap: { renderTransform: () => {} } });
+    const release = {
+      ...PRESS,
+      clientX: 110,
+      clientY: 70,
+      currentTarget: { releasePointerCapture() {} },
+    };
+    handlers.onPointerUp(release as never);
+    expect(opts.onPathOffsetCommitRef.current).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ plainTranslate: true }),
+    );
+  });
+});
+
+describe("a group drag of elements without GSAP", () => {
+  it("drops every member on the route it chose at press", () => {
+    const items = [0, 1].map((i) => {
+      const element = document.createElement("div");
+      element.style.setProperty("translate", `${i * 10}px 0px`);
+      document.body.append(element);
+      const selection = { element, capabilities: { canApplyManualOffset: true } };
+      const rect = { left: 0, top: 0, width: 240, height: 160, editScaleX: 1, editScaleY: 1 };
+      return { key: `m${i}`, selection, element, rect };
+    });
+    const onGroupPathOffsetCommit = vi.fn();
+    const opts = {
+      ...pressOptions(items[0]!.element),
+      groupOverlayItemsRef: { current: items },
+      onGroupPathOffsetCommitRef: { current: onGroupPathOffsetCommit },
+      setGroupOverlayItems: vi.fn(),
+    };
+    const handlers = createDomEditOverlayGestureHandlers(opts as never);
+    expect(handlers.startGroupDrag(PRESS as never)).toBe(true);
+    const release = {
+      ...PRESS,
+      clientX: 110,
+      clientY: 70,
+      currentTarget: { releasePointerCapture() {} },
+    };
+    handlers.onPointerUp(release as never);
+    const updates = onGroupPathOffsetCommit.mock.calls[0]?.[0] as { plainTranslate?: boolean }[];
+    expect(updates.map((update) => update.plainTranslate)).toEqual([true, true]);
+  });
+});
+
+describe("a rotate on a page that loads GSAP", () => {
+  it("never asks GSAP about an element it does not turn, and draws the turn as its CSS rotate", () => {
+    const getProperty = vi.fn(() => 0);
+    const set = vi.fn();
+    const element = document.createElement("div");
+    element.style.setProperty("rotate", "30deg");
+    document.body.append(element);
+    Object.assign(window, {
+      gsap: { getProperty, set },
+      __timelines: { main: { getChildren: () => [] } },
+    });
+    const selection = { element, capabilities: { canApplyManualRotation: true } };
+    const ref = <T>(current: T) => ({ current });
+    const opts = {
+      selectionRef: ref(selection as unknown as DomEditSelection),
+      overlayRectRef: ref({ left: 0, top: 0, width: 50, height: 40, editScaleX: 1, editScaleY: 1 }),
+      boxRef: ref(document.createElement("div")),
+      overlayRef: ref(null),
+      iframeRef: ref(null),
+      gestureRef: ref<GestureState | null>(null),
+      groupGestureRef: ref(null),
+      blockedMoveRef: ref(null),
+      rafPausedRef: ref(false),
+      onCanvasPointerMoveRef: ref(vi.fn()),
+    };
+    const pointer = (clientX: number, clientY: number) => ({
+      clientX,
+      clientY,
+      pointerId: 1,
+      button: 0,
+      shiftKey: false,
+      preventDefault() {},
+      stopPropagation() {},
+      currentTarget: { setPointerCapture() {} },
+    });
+
+    const handlers = createDomEditOverlayGestureHandlers(opts as never);
+    expect(handlers.startGesture("rotate", pointer(25, -20) as never)).toBe(true);
+    expect(opts.gestureRef.current?.plainRotation).toEqual({
+      property: "rotate",
+      before: "",
+      after: "",
+      share: 0,
+      sign: 1,
+      inline: false,
+    });
+    expect(opts.gestureRef.current?.actualRotation).toBeCloseTo(30);
+    handlers.onPointerMove(pointer(60, 20) as never);
+
+    expect(element.style.getPropertyValue("rotate")).toMatch(/deg$/);
+    expect(element.style.getPropertyValue("rotate")).not.toBe("30deg");
+    expect(getProperty).not.toHaveBeenCalled();
+    expect(set).not.toHaveBeenCalled();
+  });
+});
+
+describe("a rotate press on an element a GSAP tween turns", () => {
+  it.each(["rotation", "rotate", "rotateZ"])("reads its base from GSAP (%s)", (channel) => {
+    const getProperty = vi.fn(() => 40);
+    const element = document.createElement("div");
+    document.body.append(element);
+    const tween = { targets: () => [element], vars: { [channel]: 40 }, duration: () => 2 };
+    const timelines = { main: { getChildren: () => [tween] } };
+    Object.assign(window, { gsap: { getProperty, set: vi.fn() }, __timelines: timelines });
+    const ref = <T>(current: T) => ({ current });
+    const selection = { element, capabilities: { canApplyManualRotation: true } };
+    const opts = {
+      selectionRef: ref(selection as unknown as DomEditSelection),
+      overlayRectRef: ref({ left: 0, top: 0, width: 50, height: 40, editScaleX: 1, editScaleY: 1 }),
+      boxRef: ref(document.createElement("div")),
+      overlayRef: ref(null),
+      iframeRef: ref(null),
+      gestureRef: ref<GestureState | null>(null),
+      rafPausedRef: ref(false),
+    };
+    const press = {
+      clientX: 25,
+      clientY: -20,
+      pointerId: 1,
+      button: 0,
+      preventDefault() {},
+      stopPropagation() {},
+      currentTarget: { setPointerCapture() {} },
+    };
+    const handlers = createDomEditOverlayGestureHandlers(opts as never);
+    expect(handlers.startGesture("rotate", press as never)).toBe(true);
+    expect(opts.gestureRef.current?.plainRotation).toBeNull();
+    expect(opts.gestureRef.current?.actualRotation).toBe(40);
+    expect(getProperty).toHaveBeenCalledWith(element, "rotation");
+  });
+});

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/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

@@ -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`),
-  );
-}