@hyperframes/studio 0.8.103 → 0.8.105

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

@@ -38,7 +38,7 @@ describe("PropertyPanelFlatHeader", () => {
     expect(host.textContent).toContain("Mono Label");
     expect(host.textContent).toContain(".mono-label · div");
     const icon = host.querySelector('[data-flat-header-icon="true"]');
-    expect(icon?.className).toContain("text-panel-accent");
+    expect(icon?.className).toContain("text-accent-ink");
     act(() => root.unmount());
   });
 

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -4,7 +4,7 @@ import { ClipboardList, Film, Square, Type, X } from "../../icons/SystemIcons";
 
 const ICON_BY_KIND = { text: Type, media: Film, other: Square } as const;
 const ICON_COLOR_BY_KIND = {
-  text: "text-panel-accent",
+  text: "text-accent-ink",
   media: "text-panel-media",
   other: "text-panel-container",
 } as const;
@@ -92,7 +92,7 @@ export function PropertyPanelFlatHeader({
             track("button", "Copy element info");
             onCopy();
           }}
-          className={copied ? "text-panel-accent" : undefined}
+          className={copied ? "text-accent-ink" : undefined}
         >
           <ClipboardList size={13} />
         </button>

package/src/components/editor/SnapToolbar.tsx

@@ -73,7 +73,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             motionPathArmed
-              ? "bg-studio-accent/20 text-studio-accent"
+              ? "bg-studio-accent/20 text-accent-ink"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
           }`}
           onClick={() => setMotionPathArmed(!motionPathArmed)}
@@ -99,7 +99,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
             type="button"
             className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
               visible
-                ? "bg-studio-accent/20 text-studio-accent"
+                ? "bg-studio-accent/20 text-accent-ink"
                 : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
             }`}
             onClick={toggle}
@@ -115,7 +115,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         type="button"
         className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
           prefs.snapEnabled
-            ? "bg-studio-accent/20 text-studio-accent"
+            ? "bg-studio-accent/20 text-accent-ink"
             : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
         }`}
         onClick={toggleSnap}
@@ -131,7 +131,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             prefs.gridVisible
-              ? "bg-studio-accent/20 text-studio-accent"
+              ? "bg-studio-accent/20 text-accent-ink"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
           }`}
           onClick={toggleGrid}
@@ -164,7 +164,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         {gridPopoverOpen && (
           <div
             ref={popoverRef}
-            className="absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]"
+            className="absolute right-0 top-full mt-1 rounded-lg bg-raised border border-border p-3 shadow-xl min-w-[180px]"
           >
             <label className="flex items-center justify-between text-xs text-white/80 mb-2">
               <span>Grid spacing</span>

package/src/components/editor/TimelineFxPopover.tsx

@@ -139,7 +139,7 @@ export function TimelineFxPopover({
       ref={rootRef}
       role="dialog"
       aria-label="Effects"
-      className="z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      className="z-200 flex flex-col overflow-hidden rounded-md border border-border bg-raised p-2 shadow-xl"
       style={clampedStyle(anchorRect)}
       onKeyDown={onKeyDown}
       onPointerDown={(event) => event.stopPropagation()}
@@ -165,10 +165,10 @@ export function TimelineFxPopover({
           onAuditionTracked={(id) => trackPresetAuditioned(id, { trackKind })}
         />
       </div>
-      <div className="mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55">
+      <div className="mt-2 flex shrink-0 items-center justify-between border-t border-border pt-2 text-[10px] text-text-muted">
         <button
           type="button"
-          className="hover:text-white"
+          className="hover:text-text-0"
           onClick={() => {
             onClose();
             onOpenRack();
@@ -178,7 +178,7 @@ export function TimelineFxPopover({
         </button>
         <button
           type="button"
-          className="hover:text-white"
+          className="hover:text-text-0"
           onClick={() => {
             onClose();
             onOpenRack();

package/src/components/editor/Transform3DCube.tsx

@@ -314,7 +314,7 @@ export function Transform3DCube({
           aria-label="Keyframe 3D transform"
           aria-pressed={keyframed}
           className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${
-            keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"
+            keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
           }`}
         >
           <svg

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/anchoredResizeReleaseShift.test.ts

@@ -1,12 +1,6 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import { applyStudioBoxSize, applyStudioPathOffset, readStudioBoxSize } from "./manualEditsDom";
-import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
-import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
-import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
 import { computeNextResizeAnchor } from "./domEditResizeLocal";
-import type { PatchOperation } from "../../utils/sourcePatcher";
-import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 
 /**
  * Center-anchored corner resize (CapCut model): the element scales about its
@@ -38,40 +32,6 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-/** Apply a built PatchOperation[] to a live element, mirroring sourcePatcher's
- * inline-style / attribute application — i.e. what the persisted source carries
- * when it is re-parsed into the DOM on the next preview load. */
-function applyPatchesToElement(el: HTMLElement, ops: PatchOperation[]): void {
-  for (const op of ops) {
-    if (op.type === "inline-style") {
-      if (op.value === null) el.style.removeProperty(op.property);
-      else el.style.setProperty(op.property, op.value);
-    } else if (op.type === "attribute") {
-      if (op.value === null) el.removeAttribute(op.property);
-      else el.setAttribute(op.property, op.value);
-    }
-  }
-}
-
-/** Net translate applied to an element, resolving the studio offset var()
- * expression to its px value so we compare the actually-rendered translation. */
-function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
-  const raw = el.style.getPropertyValue("translate").trim();
-  if (!raw || raw === "none") return { x: 0, y: 0 };
-  const vx = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-x")) || 0;
-  const vy = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-y")) || 0;
-  const parts = splitTopLevelWhitespace(raw);
-  const parseAxis = (part: string, varVal: number): number => {
-    if (part && part.includes("--hf-studio-offset")) return varVal;
-    const n = Number.parseFloat(part);
-    return Number.isFinite(n) ? n : 0;
-  };
-  return {
-    x: parseAxis(parts[0] ?? "", vx),
-    y: parseAxis(parts[1] ?? "", vy),
-  };
-}
-
 describe("center-anchored corner resize — no shift after release", () => {
   it("the per-frame center anchor converges (does NOT oscillate) — the release-shift root cause", () => {
     // Model the pointermove anchor loop that pins the element's CENTER. The physical
@@ -157,48 +117,4 @@ describe("center-anchored corner resize — no shift after release", () => {
       }
     }
   });
-
-  it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
-    // The committed offset flows through the real apply → persist → reload chain
-    // unchanged (this hop was proved clean; the shift is upstream in the anchor
-    // loop above, not in persistence).
-    const el = document.createElement("div");
-    el.style.setProperty("width", "200px");
-    el.style.setProperty("height", "100px");
-    document.body.appendChild(el);
-
-    const anchorDx = -30;
-    const anchorDy = -18;
-    const finalSize = { width: 240, height: 130 };
-
-    applyStudioBoxSize(el, finalSize);
-    const memberResult = createManualOffsetDragMember({
-      key: "k",
-      selection: { element: el } as never,
-      element: el,
-      rect: { left: 0, top: 0, width: 240, height: 130, editScaleX: 1, editScaleY: 1 },
-    });
-    expect(memberResult.ok).toBe(true);
-    if (!memberResult.ok) return;
-
-    const finalOffset = applyManualOffsetDragCommit(memberResult.member, anchorDx, anchorDy);
-
-    applyStudioBoxSize(el, finalSize);
-    const patches = buildBoxSizePatches(el);
-    applyStudioPathOffset(el, finalOffset);
-    patches.push(...buildPathOffsetPatches(el));
-
-    expect(resolvedTranslatePx(el)).toEqual({ x: anchorDx, y: anchorDy });
-
-    // Persist → fresh element re-parsed from source → reload re-stamp.
-    const reloaded = document.createElement("div");
-    reloaded.style.setProperty("width", "200px");
-    reloaded.style.setProperty("height", "100px");
-    document.body.appendChild(reloaded);
-    applyPatchesToElement(reloaded, patches);
-    reapplyPositionEditsAfterSeek(reloaded.ownerDocument);
-
-    expect(resolvedTranslatePx(reloaded)).toEqual({ x: anchorDx, y: anchorDy });
-    expect(readStudioBoxSize(reloaded)).toEqual(finalSize);
-  });
 });

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