@hyperframes/studio 0.8.102 → 0.8.104

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

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

@@ -13,6 +13,7 @@ import {
   resolveManualOffsetForPointerDelta,
   type ManualOffsetDragMatrix,
 } from "./manualOffsetDrag";
+import { UNREADABLE_TRANSLATE } from "./plainTranslate";
 import { STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP } from "./manualEdits";
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 
@@ -596,6 +597,21 @@ describe("a move of an element GSAP does not position", () => {
     return { window, element, gsapCalls, member };
   }
 
+  it("refuses a translate it can't read instead of guessing, and leaves the element alone", () => {
+    const { element } = plainBox();
+    element.style.setProperty("translate", "abs(10% - 50px) 0px");
+    const result = createManualOffsetDragMember({
+      key: "box",
+      selection: { element } as never,
+      element,
+      rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
+      gesture: "drag",
+    });
+    expect(result.ok).toBe(false);
+    expect(result.ok ? "" : result.reason).toBe(UNREADABLE_TRANSLATE);
+    expect(element.style.getPropertyValue("translate")).toBe("abs(10% - 50px) 0px");
+  });
+
   it("drafts and drops the element's own translate in plain px, never touching GSAP", () => {
     const { element, gsapCalls, member } = plainBox({ gsapLoaded: true });
     const m = member();
@@ -636,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,15 +11,15 @@ import {
   type StudioPathOffsetSnapshot,
 } from "./manualEdits";
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
-import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
-import { readTranslatePx, writeTranslatePx } from "./plainTranslate";
+import { gsapWritesBox, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
 
 interface OffsetDragGsap {
   set: (el: Element, vars: Record<string, number | string>) => void;
   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,14 +316,16 @@ 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);
+  if (!finitePoint(initialOffset))
+    return { ok: false, reason: UNREADABLE_TRANSLATE, selection: input.selection };
   const win = input.element.ownerDocument.defaultView as
     | (Window & {
         gsap?: { getProperty?: (el: Element, prop: string) => number };
@@ -382,10 +363,8 @@ export function createManualOffsetDragMember(input: {
     plainTranslate,
   });
   if (!measured.ok) {
-    // Fallback: when GSAP transforms interfere with probe measurement, use
-    // the preview scale as an approximation. The commit path reads the actual
-    // GSAP position from the iframe runtime, so visual imprecision during
-    // drag is acceptable — the final committed position is always exact.
+    // GSAP transforms can defeat the probe: approximate with the preview scale. The commit
+    // reads GSAP's real position, so only the drag preview is imprecise.
     const scaleX = input.rect.editScaleX || 1;
     const scaleY = input.rect.editScaleY || 1;
     const w = readTransformWDivisor(input.element);

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

@@ -28,18 +28,31 @@ describe("readTranslatePx", () => {
   });
 
   it.each([
-    "min(10px, 5%) 0px",
-    "calc(2 * 10px) 0px",
-    "calc(10px +) 0px",
-    "clamp(0px, 10%, 30px) 5px",
-  ])("hands %s to Chrome's own resolution and puts the element's style back", (translate) => {
-    const element = box(`translate: ${translate}; transform: rotate(5deg)`);
-    const before = element.getAttribute("style");
-    const read = readTranslatePx(element);
-    expect(Number.isFinite(read.x) && Number.isFinite(read.y)).toBe(true);
-    expect(element.getAttribute("style")).toBe(before);
+    ["min(10px, 5%) max(-20%, -40px)", { x: 10, y: -32 }],
+    ["clamp(0px, 10%, 30px) 5px", { x: 24, y: 5 }],
+    ["calc(min(50%, 100px) * 2 - (10px + 5%)) calc(-1 * clamp(10%, 1px, 20%))", { x: 178, y: -16 }],
+    ["calc(2 * 10px) calc(80px / 4)", { x: 20, y: 20 }],
+  ])("works out %s by arithmetic", (translate, want) => {
+    expect(readTranslatePx(box(`translate: ${translate}`))).toEqual(want);
   });
 
+  it.each(["calc(10px +) 0px", "abs(10% - 50px) 0px", "round(10%, 7px) 0px", "min(10px 5%) 0px"])(
+    "reads %s as NaN, never as a guess",
+    (translate) => {
+      expect(readTranslatePx(box(`translate: ${translate}`)).x).toBeNaN();
+    },
+  );
+
+  it.each(["content-box", "fill-box"])(
+    "resolves a percent against the content box under transform-box: %s",
+    (transformBox) => {
+      const element = box(
+        `translate: 50% 50%; padding: 10px; border: 5px solid; box-sizing: content-box; transform-box: ${transformBox}`,
+      );
+      expect(readTranslatePx(element)).toEqual({ x: 120, y: 80 });
+    },
+  );
+
   it("counts padding and border in the box a percent resolves against", () => {
     const element = box(
       "translate: 50% 50%; padding: 10px; border: 5px solid; box-sizing: content-box",
@@ -47,16 +60,19 @@ describe("readTranslatePx", () => {
     expect(readTranslatePx(element)).toEqual({ x: 135, y: 95 });
   });
 
-  it("writes nothing to the element it reads", () => {
-    const element = box("translate: -50% -50%");
-    const before = element.getAttribute("style");
-    const writes: MutationRecord[] = [];
-    const observer = new MutationObserver((records) => writes.push(...records));
-    observer.observe(element, { attributes: true });
-    readTranslatePx(element);
-    writes.push(...observer.takeRecords());
-    observer.disconnect();
-    expect(writes).toEqual([]);
-    expect(element.getAttribute("style")).toBe(before);
-  });
+  it.each(["-50% -50%", "min(10px, 5%) clamp(0px, 10%, 30px)"])(
+    "writes nothing to the element while it reads %s",
+    (translate) => {
+      const element = box(`translate: ${translate}; transform: rotate(5deg)`);
+      const before = element.getAttribute("style");
+      const writes: MutationRecord[] = [];
+      const observer = new MutationObserver((records) => writes.push(...records));
+      observer.observe(element, { attributes: true });
+      readTranslatePx(element);
+      writes.push(...observer.takeRecords());
+      observer.disconnect();
+      expect(writes).toEqual([]);
+      expect(element.getAttribute("style")).toBe(before);
+    },
+  );
 });

package/src/components/editor/plainTranslate.ts

@@ -1,34 +1,71 @@
 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";
 
 type Point = { x: number; y: number };
 
-const TERM = /^(-?\d*\.?\d+(?:e[-+]?\d+)?)(px|%)$/i;
+const TOKEN = /\s*(?:(\d*\.?\d+(?:e[-+]?\d+)?)(px|%)?|([a-z]+)\(|([-+*/(),]))/giy;
+const FUNCTIONS: Record<string, (args: number[]) => number> = {
+  "(": ([a = Number.NaN]) => a,
+  "calc(": ([a = Number.NaN]) => a,
+  "min(": (args) => Math.min(...args),
+  "max(": (args) => Math.max(...args),
+  "clamp(": ([lo = Number.NaN, v = Number.NaN, hi = Number.NaN]) => Math.max(lo, Math.min(v, hi)),
+};
 
-const SIGN: Record<string, number> = { "+": 1, "-": -1 };
-
-function termPx(term: string | undefined, side: number): number | null {
-  const match = TERM.exec(term ?? "");
-  return match ? Number(match[1]) * (match[2] === "%" ? side / 100 : 1) : null;
+/** Lengths become px against `side`; functions keep their "(" so they can't pass for an operator. */
+function tokenize(value: string, side: number): (number | string)[] {
+  const tokens: (number | string)[] = [];
+  const end = value.trimEnd().length;
+  TOKEN.lastIndex = 0;
+  for (let m = TOKEN.exec(value); m; m = TOKEN.lastIndex < end ? TOKEN.exec(value) : null) {
+    if (m[1]) tokens.push(Number(m[1]) * (m[2] === "%" ? side / 100 : 1));
+    else tokens.push(m[3] ? `${m[3].toLowerCase()}(` : (m[4] ?? ""));
+  }
+  return TOKEN.lastIndex < end ? [] : tokens;
 }
 
-/** px, %, or Chrome's computed `calc(P% + Lpx)`, against the border-box side; null for min()/max()/clamp(). */
-function resolveLength(value: string, side: number): number | null {
-  const parts = (/^calc\((.*)\)$/.exec(value)?.[1] ?? value).split(" ");
-  if (parts.length % 2 === 0) return null;
-  let total = termPx(parts[0], side);
-  for (let i = 1; i < parts.length && total !== null; i += 2) {
-    const term = termPx(parts[i + 1], side);
-    const sign = SIGN[parts[i] ?? ""];
-    total = term === null || !sign ? null : total + sign * term;
+/** Chrome's computed length (px, %, calc/min/max/clamp, + - * /) in px against `side`; NaN otherwise. */
+function evaluateLength(value: string, side: number): number {
+  const tokens = tokenize(value, side);
+  let i = 0;
+  const next = () => tokens[i++];
+  const take = (...ops: string[]) => ops.includes(tokens[i] as string) && next();
+  function sum(): number {
+    let total = product();
+    for (let op = take("+", "-"); op; op = take("+", "-"))
+      total += (op === "+" ? 1 : -1) * product();
+    return total;
+  }
+  function product(): number {
+    let total = unary();
+    for (let op = take("*", "/"); op; op = take("*", "/"))
+      total = op === "*" ? total * unary() : total / unary();
+    return total;
   }
-  return total;
+  function unary(): number {
+    return take("-") ? -unary() : atom();
+  }
+  function atom(): number {
+    const token = next();
+    if (typeof token === "number") return token;
+    const fn = FUNCTIONS[token ?? ""];
+    if (!fn) return Number.NaN;
+    const args = [sum()];
+    while (take(",")) args.push(sum());
+    return take(")") ? fn(args) : Number.NaN;
+  }
+  const total = tokens.length ? sum() : Number.NaN;
+  return i === tokens.length ? total : Number.NaN;
 }
 
-function borderBox(
+const CONTENT_BOXES = new Set(["content-box", "fill-box"]);
+
+/** The side % resolves against: the box `transform-box` names (fill-box is the content box on HTML). */
+function referenceBox(
   cs: CSSStyleDeclaration,
   size: "width" | "height",
   a: string,
@@ -37,35 +74,29 @@ function borderBox(
   const n = (prop: string) => Number.parseFloat(cs.getPropertyValue(prop)) || 0;
   const pad =
     n(`padding-${a}`) + n(`padding-${b}`) + n(`border-${a}-width`) + n(`border-${b}-width`);
-  return n(size) + (cs.boxSizing === "border-box" ? 0 : pad);
-}
-
-// Chrome resolves min()/max()/clamp() inside a transform function to a matrix; an unrendered box has none.
-function resolveInTransform(el: HTMLElement, x: string, y: string): Point {
-  const style = el.style;
-  const saved = [style.getPropertyValue("transform"), style.getPropertyPriority("transform")];
-  style.setProperty("transform", `translate(${x}, ${y})`, "important");
-  try {
-    const resolved = el.ownerDocument.defaultView?.getComputedStyle(el).transform ?? "";
-    const matrix = new DOMMatrixReadOnly(resolved.startsWith("matrix") ? resolved : undefined);
-    return { x: matrix.m41, y: matrix.m42 };
-  } finally {
-    style.setProperty("transform", saved[0] ?? "", saved[1] ?? "");
-  }
+  const content = n(size) - (cs.boxSizing === "border-box" ? pad : 0);
+  return CONTENT_BOXES.has(cs.getPropertyValue("transform-box")) ? content : content + pad;
 }
 
 /** The element's CSS `translate` in px, as it renders now. */
 // ponytail: a 3-value translate loses its z on the next move; keep z when a fixture needs it.
 export function readTranslatePx(el: HTMLElement): Point {
   const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-  const value = el.style.getPropertyValue("translate") || cs?.translate || "none";
+  // Computed first: Chrome resolves em, vw and var() there and leaves only % to work out.
+  const value = cs?.translate || el.style.getPropertyValue("translate") || "none";
   if (value === "none") return { x: 0, y: 0 };
   const [x = "0px", y = "0px"] = splitTopLevelWhitespace(value);
-  const px = cs && resolveLength(x, borderBox(cs, "width", "left", "right"));
-  const py = cs && resolveLength(y, borderBox(cs, "height", "top", "bottom"));
-  return px != null && py != null ? { x: px, y: py } : resolveInTransform(el, x, y);
+  const side = (size: "width" | "height", a: string, b: string) =>
+    cs ? referenceBox(cs, size, a, b) : 0;
+  return {
+    x: evaluateLength(x, side("width", "left", "right")),
+    y: evaluateLength(y, side("height", "top", "bottom")),
+  };
 }
 
+export const UNREADABLE_TRANSLATE =
+  "Studio can't read this layer's translate. Move it in the Code tab.";
+
 /** Plain px only: GSAP's CSSPlugin splits `translate` on spaces and drops a calc(). */
 function formatTranslatePx(p: Point): string {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
@@ -80,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/previewReadOnly.overlay.test.tsx

@@ -9,6 +9,7 @@ import { __resetForTests } from "../../utils/canvasNudgeGate";
 import { PreviewReadOnlyProvider } from "./previewReadOnlyContext";
 import "./domEditOverlayTestMocks";
 import { DomEditOverlay } from "./DomEditOverlay";
+import { UNREADABLE_TRANSLATE } from "./plainTranslate";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -475,3 +476,32 @@ describe("DomEditOverlay onTextEditingChange", () => {
     expect(spies.onTextEditingChange.mock.calls).toEqual([[true], [false]]);
   });
 });
+
+describe("DomEditOverlay on a layer whose translate Studio can't read", () => {
+  it("refuses a drag and an arrow nudge out loud, and commits nothing", () => {
+    const { spies, overlay, selection } = fixture();
+    selection.element.style.setProperty("translate", "abs(10% - 50px) 0px");
+    fire(overlay.querySelector(BOX)!, "pointerdown");
+    const presses = [false, true, true].map(
+      (repeat) =>
+        new KeyboardEvent("keydown", {
+          key: "ArrowRight",
+          bubbles: true,
+          cancelable: true,
+          repeat,
+        }),
+    );
+    act(() => {
+      for (const press of presses) window.dispatchEvent(press);
+      vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10);
+    });
+    // One toast for the drag and one for the whole held arrow, whose every press is swallowed.
+    expect(spies.onBlockedMove.mock.calls).toEqual([
+      [selection, UNREADABLE_TRANSLATE],
+      [selection, UNREADABLE_TRANSLATE],
+    ]);
+    expect(presses.map((press) => press.defaultPrevented)).toEqual([true, true, true]);
+    expect(spies.onPathOffsetCommit).not.toHaveBeenCalled();
+    expect(selection.element.style.getPropertyValue("translate")).toBe("abs(10% - 50px) 0px");
+  });
+});

package/src/components/editor/previewReadOnlyContext.tsx

@@ -49,10 +49,12 @@ interface ManualEditCapabilities {
  */
 export function useManualEditDisabledFlags(
   capabilities: ManualEditCapabilities | null | undefined,
+  offset = { x: 0, y: 0 },
 ) {
   const { readOnly } = useContext(PreviewReadOnlyContext);
+  const unreadable = !Number.isFinite(offset.x) || !Number.isFinite(offset.y);
   return {
-    manualOffsetEditingDisabled: !capabilities?.canApplyManualOffset || readOnly,
+    manualOffsetEditingDisabled: !capabilities?.canApplyManualOffset || readOnly || unreadable,
     manualSizeEditingDisabled: !capabilities?.canApplyManualSize || readOnly,
     manualRotationEditingDisabled: !capabilities?.canApplyManualRotation || readOnly,
   };