@hyperframes/studio 0.8.103 → 0.8.104

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

@@ -46,7 +46,6 @@ import {
   buildClearPathOffsetPatches,
   buildBoxSizePatches,
   buildClearBoxSizePatches,
-  buildRotationPatches,
   buildClearRotationPatches,
   buildMotionPatches,
   buildClearMotionPatches,
@@ -335,45 +334,7 @@ describe("anchored-corner combined patch: [...buildBoxSizePatches, ...buildPathO
 
 /* ── 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 +366,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

@@ -118,7 +118,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 +185,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),

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/plainTranslate.ts

@@ -1,6 +1,7 @@
 import { roundTo3 } from "../../utils/rounding";
-import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
-import { readStudioPathOffset } from "./manualEditsDom";
+import { gsapWritesPosition, gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
+import { readCssRotation } from "../../hooks/draggedGsapPosition";
+import { readStudioPathOffset, readStudioRotation } from "./manualEditsDom";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 
@@ -110,6 +111,10 @@ export function writeTranslatePx(el: HTMLElement, p: Point): void {
 }
 
 /** The position the panel shows and edits: the translate a move writes, unless GSAP positions it. */
-export function readMoveOffset(el: HTMLElement): Point {
-  return gsapWritesPosition(el) ? readStudioPathOffset(el) : readTranslatePx(el);
+export function readMoveOffset(el: HTMLElement, plainTranslate = !gsapWritesPosition(el)): Point {
+  return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
+}
+
+export function readShownRotation(el: HTMLElement): { angle: number } {
+  return gsapWritesRotation(el) ? readStudioRotation(el) : { angle: roundTo3(readCssRotation(el)) };
 }

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

@@ -106,3 +106,32 @@ describe("the panel's position fields on a translate Studio can't read", () => {
     expect(showToast).toHaveBeenCalledWith(UNREADABLE_TRANSLATE);
   });
 });
+
+describe("the panel's position fields", () => {
+  it("read and move an element without GSAP by its CSS translate, on the route they chose", async () => {
+    const onSetManualOffset = vi.fn();
+    const box = document.createElement("div");
+    box.style.setProperty("translate", "40px 30px");
+    const element = { id: "box", selector: "#box", element: box } as unknown as DomEditSelection;
+    const handlers = createTransformCommitHandlers({
+      element,
+      styles: {},
+      hasGsapAnimation: false,
+      gsapAnimId: null,
+      gsapKeyframes: null,
+      currentPct: 0,
+      onCommitAnimatedProperty: undefined,
+      onAddKeyframe: undefined,
+      onSetManualOffset,
+      onSetManualSize: vi.fn(),
+      onSetManualRotation: vi.fn(),
+      showToast: vi.fn(),
+    });
+    await handlers.commitManualOffset("x", "100px");
+    expect(onSetManualOffset).toHaveBeenCalledWith(
+      element,
+      { x: 100, y: 30 },
+      { plainTranslate: true },
+    );
+  });
+});

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/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]);
+  });
+});