@hyperframes/studio 0.8.103 → 0.8.105

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -1,3 +1,4 @@
+import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import type { DomEditSelection } from "./domEditingTypes";
 import { readStudioBoxSize } from "./manualEdits";
 import { readMoveOffset, UNREADABLE_TRANSLATE } from "./plainTranslate";
@@ -74,14 +75,16 @@ export function createTransformCommitHandlers({
       )
     )
       return;
-    const current = readMoveOffset(element.element);
+    const plainTranslate = !gsapWritesPosition(element.element);
+    const current = readMoveOffset(element.element, plainTranslate);
     if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
       return void showToast?.(UNREADABLE_TRANSLATE);
     await Promise.resolve(
-      onSetManualOffset(element, {
-        x: axis === "x" ? parsed : current.x,
-        y: axis === "y" ? parsed : current.y,
-      }),
+      onSetManualOffset(
+        element,
+        { x: axis === "x" ? parsed : current.x, y: axis === "y" ? parsed : current.y },
+        { plainTranslate },
+      ),
     );
   };
 

package/src/components/editor/propertyPanelTypes.ts

@@ -79,6 +79,7 @@ export interface PropertyPanelProps {
   onSetManualOffset: (
     element: DomEditSelection,
     next: { x: number; y: number },
+    route?: { plainTranslate: boolean },
   ) => void | Promise<void>;
   onSetManualSize: (
     element: DomEditSelection,

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

@@ -27,6 +27,6 @@ describe("value tier class maps", () => {
       expect(VALUE_TIER_LABEL_CLASS[tier]).toBeTruthy();
       expect(VALUE_TIER_VALUE_CLASS[tier]).toBeTruthy();
     }
-    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-panel-accent");
+    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-accent-ink");
   });
 });

package/src/components/editor/propertyPanelValueTier.ts

@@ -24,5 +24,5 @@ export const VALUE_TIER_LABEL_CLASS: Record<PropertyValueTier, string> = {
 export const VALUE_TIER_VALUE_CLASS: Record<PropertyValueTier, string> = {
   default: "text-panel-text-3",
   explicitDefault: "text-panel-text-0",
-  explicitCustom: "text-panel-accent",
+  explicitCustom: "text-accent-ink",
 };

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

@@ -0,0 +1,111 @@
+// @vitest-environment happy-dom
+
+import { afterEach, expect, it, vi } from "vitest";
+import { savePlainRotation } from "../../hooks/plainRotation";
+import { applyStudioRotation } from "./manualEdits";
+import type { ElementOffsetStagerDeps } from "../../hooks/elementOffsetStager";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
+import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+
+const ref = <T>(current: T) => ({ current });
+
+function evt(clientX: number, clientY: number) {
+  return {
+    clientX,
+    clientY,
+    pointerId: 1,
+    button: 0,
+    altKey: false,
+    shiftKey: false,
+    preventDefault() {},
+    stopPropagation() {},
+    currentTarget: { setPointerCapture() {} },
+  } as unknown as React.PointerEvent<HTMLDivElement>;
+}
+
+afterEach(() => {
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+});
+
+async function rotateWord(before: (word: HTMLElement) => void = () => {}) {
+  const sheet = document.head.appendChild(document.createElement("style"));
+  sheet.textContent = "#word { display: inline; }";
+  const element = document.body.appendChild(document.createElement("span"));
+  element.id = "word";
+  element.textContent = "Word";
+  const selection = {
+    element,
+    id: "word",
+    selector: "#word",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+    tagName: "span",
+    label: "Word",
+    textContent: "Word",
+    textFields: [],
+    capabilities: { canMove: true, canApplyManualRotation: true },
+  } as unknown as DomEditSelection;
+  const commitPositionPatchToHtml = vi.fn<ElementOffsetStagerDeps["commitPositionPatchToHtml"]>(
+    () => Promise.resolve(),
+  );
+  const saves: Promise<void>[] = [];
+  const opts: UseDomEditOverlayGesturesOptions = {
+    overlayRef: ref<HTMLDivElement | null>(document.createElement("div")),
+    iframeRef: ref<HTMLIFrameElement | null>(document.createElement("iframe")),
+    boxRef: ref<HTMLDivElement | null>(document.createElement("div")),
+    selectionRef: ref<DomEditSelection | null>(selection),
+    hoverSelectionRef: ref<DomEditSelection | null>(null),
+    overlayRectRef: ref({ left: 0, top: 0, width: 200, height: 100, editScaleX: 1, editScaleY: 1 }),
+    groupOverlayItemsRef: ref([]),
+    gestureRef: ref<GestureState | null>(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    rafPausedRef: ref(false),
+    suppressNextBoxClickRef: ref(false),
+    setOverlayRect: () => {},
+    setGroupOverlayItems: () => {},
+    onBlockedMoveRef: ref(() => {}),
+    onManualDragStartRef: ref(() => {}),
+    onPathOffsetCommitRef: ref(() => {}),
+    onGroupPathOffsetCommitRef: ref(() => {}),
+    onBoxSizeCommitRef: ref(() => {}),
+    onRotationCommitRef: ref((s, next) => {
+      const saved = savePlainRotation({ commitPositionPatchToHtml }, s, next);
+      saves.push(saved);
+      return saved;
+    }),
+    onCanvasPointerMoveRef: ref(() => Promise.resolve(null)),
+    onCanvasMouseDown: () => {},
+    snapGuidesRef: ref(null),
+  } as unknown as UseDomEditOverlayGesturesOptions;
+  before(element);
+  const handlers = createDomEditOverlayGestureHandlers(opts);
+
+  handlers.startGesture("rotate", evt(200, 50));
+  handlers.onPointerMove(evt(100, 150));
+  handlers.onPointerUp(evt(100, 150));
+  await Promise.all(saves);
+
+  expect(saves).toHaveLength(1);
+  return commitPositionPatchToHtml.mock.calls[0]![1];
+}
+
+const INLINE_BLOCK = { type: "inline-style", property: "display", value: "inline-block" };
+const turnOf = (patches: Awaited<ReturnType<typeof rotateWord>>) =>
+  patches.findLast((patch) => patch.type === "inline-style" && patch.property === "rotate");
+
+it("saves an inline span's turn with the inline-block it was drawn with, after the draft and the hold", async () => {
+  expect(await rotateWord()).toContainEqual(INLINE_BLOCK);
+});
+
+it("saves inline-block and the whole turn for a word an older Studio already turned 15 deg", async () => {
+  const plain = await rotateWord();
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+  const legacy = await rotateWord((word) => applyStudioRotation(word, { angle: 15 }));
+  expect(legacy).toContainEqual(INLINE_BLOCK);
+  const degrees = (patches: typeof plain) => Number.parseFloat(String(turnOf(patches)?.value));
+  expect(degrees(legacy)).toBe(degrees(plain) + 15);
+});

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

@@ -0,0 +1,111 @@
+import { Window } from "happy-dom";
+import { describe, expect, it, vi } from "vitest";
+import { applyRotationDraft, readCssRotationTarget, readRotationBase } from "./rotationDraft";
+
+describe("rotate in a composition without GSAP", () => {
+  it("starts from the authored CSS rotation and drafts the absolute angle the commit writes", () => {
+    const window = new Window();
+    window.document.head.innerHTML = "<style>#title { rotate: 30deg; }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const base = readRotationBase(element, true);
+    expect(base).toBeCloseTo(30);
+    applyRotationDraft(element, 55, readCssRotationTarget(element));
+    expect(element.style.getPropertyValue("rotate")).toBe("55deg");
+  });
+
+  it("drafts only the part of the angle the CSS rotate owns, leaving transform and scale theirs", () => {
+    const cases: Array<[string, number, number]> = [
+      ["transform: rotate(30deg);", 30, 25],
+      ["rotate: 20deg; transform: rotate(10deg);", 30, 45],
+      ["scale: -1 1;", 180, 25],
+      ["transform: scaleX(-1);", 180, 25],
+    ];
+    for (const [css, base, drafted] of cases) {
+      const window = new Window();
+      window.document.head.innerHTML = `<style>#title { ${css} }</style>`;
+      const element = window.document.createElement("h1");
+      element.id = "title";
+      window.document.body.append(element);
+      expect({ css, base: readRotationBase(element, true) }).toEqual({
+        css,
+        base: expect.closeTo(base),
+      });
+      applyRotationDraft(element, base + 25, readCssRotationTarget(element));
+      const rotate = Number.parseFloat(element.style.getPropertyValue("rotate"));
+      expect({ css, rotate }).toEqual({ css, rotate: expect.closeTo(drafted) });
+    }
+  });
+
+  it("never asks GSAP, nor restyles per frame, when GSAP turns nothing on the element", () => {
+    const window = new Window();
+    const gsap = { set: vi.fn(), getProperty: vi.fn(() => 0) };
+    Object.assign(window, { gsap });
+    window.document.head.innerHTML = "<style>#title { rotate: 30deg; }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    expect(readRotationBase(element, true)).toBeCloseTo(30);
+    const target = readCssRotationTarget(element);
+    const styleReads = vi.spyOn(window, "getComputedStyle");
+    applyRotationDraft(element, 55, target);
+    expect(styleReads).not.toHaveBeenCalled();
+    expect(element.style.getPropertyValue("rotate")).toBe("55deg");
+    expect(gsap.set).not.toHaveBeenCalled();
+    expect(gsap.getProperty).not.toHaveBeenCalled();
+    applyRotationDraft(element, 55, null);
+    expect(element.style.getPropertyValue("rotate")).toBe("none");
+    expect(gsap.set).toHaveBeenCalledWith(element, { rotation: 55 });
+  });
+
+  it("turns a transform-centred element inside its transform, after the translate, so it stays put", () => {
+    const window = new Window();
+    window.document.head.innerHTML =
+      "<style>#title { rotate: 30deg; transform: translate(-120px, -80px); }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const target = readCssRotationTarget(element);
+    expect(target).toEqual({
+      property: "transform",
+      before: "translate(-120px, -80px)",
+      after: "",
+      share: expect.closeTo(30),
+      sign: 1,
+      inline: false,
+    });
+    applyRotationDraft(element, 55, target);
+    expect(element.style.getPropertyValue("transform")).toBe(
+      "translate(-120px, -80px) rotate(25deg)",
+    );
+    expect(element.style.getPropertyValue("rotate")).toBe("");
+    // The next rotate replaces its own turn instead of stacking a second one.
+    applyRotationDraft(element, 70, readCssRotationTarget(element));
+    expect(element.style.getPropertyValue("transform")).toBe(
+      "translate(-120px, -80px) rotate(40deg)",
+    );
+  });
+
+  // Each case turns 25 deg with the cursor: the fold GSAP and the outline read goes up by 25, unsheared.
+  it.each([
+    ["a mirrored transform", "transform: translate(-120px, -80px) scaleX(-1);", 180],
+    ["a stretched transform", "transform: translate(-120px, -80px) scale(2, 1);", 0],
+    ["a mirroring scale property", "scale: -1 1; transform: translate(-120px, -80px);", 180],
+  ])("turns %s centred element with the cursor, in place", (_, css, base) => {
+    const window = new Window();
+    window.document.head.innerHTML = `<style>#title { ${css} }</style>`;
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const turned = (angle: number) => (((angle % 360) + 360) % 360) % 360;
+    expect(turned(readRotationBase(element, true))).toBeCloseTo(base);
+    applyRotationDraft(element, base + 25, readCssRotationTarget(element));
+    const transform = element.style.getPropertyValue("transform");
+    expect(transform.startsWith("translate(-120px, -80px) rotate(")).toBe(true);
+    expect(turned(readRotationBase(element, true))).toBeCloseTo(base + 25);
+    const m = new window.DOMMatrix(window.getComputedStyle(element).transform);
+    expect(m.a * m.c + m.b * m.d).toBeCloseTo(0);
+    expect([m.e, m.f]).toEqual([-120, -80]);
+  });
+});

package/src/components/editor/rotationDraft.ts

@@ -0,0 +1,145 @@
+import { readCssRotation } from "../../hooks/draggedGsapPosition";
+import { roundTo3 } from "../../utils/rounding";
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import {
+  readStudioRotation,
+  restoreStudioRotation,
+  type StudioRotationSnapshot,
+} from "./manualEdits";
+import { getOffsetDragGsap } from "./manualOffsetDrag";
+import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+
+function lastRuleTransform(element: HTMLElement): string {
+  let value = "";
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules: CSSStyleRule[] = [];
+    try {
+      rules = Array.from(sheet.cssRules) as CSSStyleRule[];
+    } catch {
+      // a cross-origin sheet
+    }
+    for (const rule of rules) {
+      const declared = rule.style?.getPropertyValue("transform");
+      if (declared && element.matches(rule.selectorText)) value = declared;
+    }
+  }
+  return value;
+}
+
+// ponytail: the authored transform if it moves the box, from the last matching rule in sheet order;
+// specificity, !important and @media are not weighed. Weigh them when a film's rule is missed.
+function translatingTransform(element: HTMLElement): string {
+  const view = element.ownerDocument.defaultView;
+  const computed = view?.getComputedStyle(element).transform ?? "none";
+  const m = computed === "none" ? null : new view!.DOMMatrix(computed);
+  if (!m || (m.m41 === 0 && m.m42 === 0)) return "";
+  const value = element.style.getPropertyValue("transform") || lastRuleTransform(element);
+  return value === "none" ? "" : value;
+}
+
+/** Where a plain rotate draws its turn, read once at press: the element's own `rotate`, or, when its
+ *  transform translates it (often the translate(-50%, -50%) centring), a rotate() right after that
+ *  translate, so the box turns in place in screen space. `share` is what the rest already turns. */
+export interface CssRotationTarget {
+  property: "rotate" | "transform";
+  before: string;
+  after: string;
+  share: number;
+  /** -1 when a mirroring `scale` property flips a turn made inside the transform. */
+  sign: number;
+  /** An inline box does not transform, so the turn makes it inline-block. */
+  inline: boolean;
+}
+
+export type RotationCommit = { angle: number; plain?: CssRotationTarget };
+
+const TRANSLATE = /^translate(?:3d|X|Y|Z)?\(/i;
+const OWN_TURN = /^rotate\(\s*-?[\d.]+(?:e[+-]?\d+)?deg\s*\)$/i;
+
+export function readCssRotationTarget(element: HTMLElement): CssRotationTarget {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const inline = style?.display === "inline";
+  const transform = translatingTransform(element);
+  if (!transform) {
+    const share = readCssRotation(element, false);
+    return { property: "rotate", before: "", after: "", share, sign: 1, inline };
+  }
+  const parts = splitTopLevelWhitespace(transform);
+  const lead = parts.findIndex((part) => !TRANSLATE.test(part));
+  const split = lead < 0 ? parts.length : lead;
+  const rest = parts.slice(split);
+  if (OWN_TURN.test(rest[0] ?? "")) rest.shift();
+  const [before, after] = [parts.slice(0, split).join(" "), rest.join(" ")];
+  const [sx = 1, sy = sx] = splitTopLevelWhitespace(style?.getPropertyValue("scale") ?? "").map(
+    Number.parseFloat,
+  );
+  const inlineStyle = element.style;
+  const saved = [
+    inlineStyle.getPropertyValue("transform"),
+    inlineStyle.getPropertyPriority("transform"),
+  ];
+  inlineStyle.setProperty("transform", `${before} ${after}`.trim() || "none");
+  const share = readCssRotation(element);
+  inlineStyle.setProperty("transform", saved[0] ?? "", saved[1] ?? "");
+  return { property: "transform", before, after, share, sign: sx * sy < 0 ? -1 : 1, inline };
+}
+
+/** Draws `angle` where `target` says, and returns the source patches that save it as drawn. */
+export function applyCssRotation(
+  element: HTMLElement,
+  angle: number,
+  target = readCssRotationTarget(element),
+): Array<PatchOperation & { value: string }> {
+  const turn = `${roundTo3(target.sign * (angle - target.share))}deg`;
+  const value =
+    target.property === "rotate"
+      ? turn
+      : [target.before, `rotate(${turn})`, target.after].filter(Boolean).join(" ");
+  const patches: Array<PatchOperation & { value: string }> = [
+    { type: "inline-style", property: target.property, value },
+  ];
+  if (target.inline) {
+    patches.unshift({ type: "inline-style", property: "display", value: "inline-block" });
+  }
+  for (const patch of patches) element.style.setProperty(patch.property, patch.value);
+  return patches;
+}
+
+/** Back to the press: the rotation snapshot and, for a plain rotate, the inline transform it drew in. */
+export function restorePlainRotation(element: HTMLElement, snapshot: StudioRotationSnapshot): void {
+  restoreStudioRotation(element, snapshot);
+  element.style.setProperty("transform", snapshot.transform);
+  element.style.setProperty("display", snapshot.display);
+}
+
+// `plain`, read at press: where a turn GSAP does not own draws; null for GSAP's rotation.
+export function applyRotationDraft(
+  element: HTMLElement,
+  angle: number,
+  plain: CssRotationTarget | null,
+): void {
+  if (plain) return void applyCssRotation(element, angle, plain);
+  element.style.setProperty("rotate", "none");
+  getOffsetDragGsap(element)?.set(element, { rotation: angle });
+}
+
+/** Back to the gesture start: the CSS snapshot, and GSAP's rotation without the legacy var. */
+export function restoreRotationDraft(
+  element: HTMLElement,
+  angle: number,
+  snapshot: StudioRotationSnapshot,
+  plain: boolean,
+): void {
+  if (plain) return restorePlainRotation(element, snapshot);
+  getOffsetDragGsap(element)?.set(element, {
+    rotation: angle - (Number.parseFloat(snapshot.studioRotation) || 0),
+  });
+  restoreStudioRotation(element, snapshot);
+}
+
+/** The angle a rotate gesture starts from, as the element shows it. */
+export function readRotationBase(element: HTMLElement, plain: boolean): number {
+  if (plain) return readCssRotation(element);
+  const gsapRotation = Number(getOffsetDragGsap(element)?.getProperty(element, "rotation") ?? 0);
+  return gsapRotation + readStudioRotation(element).angle;
+}

package/src/components/editor/useDomEditNudge.test.tsx

@@ -227,3 +227,36 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
     elementB.remove();
   });
 });
+
+describe("useDomEditNudge carries the route its press chose", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    __resetForTests();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("commits an element without GSAP on the CSS route", () => {
+    const host = document.createElement("div");
+    const root = createRoot(host);
+    const element = document.createElement("div");
+    document.body.append(element);
+    const commit = vi.fn();
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+    act(() => vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10));
+    expect(commit).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ plainTranslate: true }),
+    );
+    act(() => root.unmount());
+    element.remove();
+  });
+});

package/src/components/editor/useDomEditNudge.ts

@@ -18,6 +18,7 @@ import {
 import type {
   BlockedMoveState,
   DomEditGroupPathOffsetCommit,
+  MoveCommitOptions,
   GestureState,
   GroupGestureState,
 } from "./domEditOverlayGestures";
@@ -60,7 +61,7 @@ export interface UseDomEditNudgeParams {
     (
       s: DomEditSelection,
       n: { x: number; y: number },
-      m?: { altKey?: boolean },
+      m?: MoveCommitOptions,
     ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<
@@ -150,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) {

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;