@hyperframes/studio 0.7.105 → 0.7.107

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

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection, DomEditTextField } from "./domEditingTypes";
+
+const editable = vi.hoisted(() => ({ current: true }));
+vi.mock("./domEditingLayers", () => ({
+  isTextEditableSelection: () => editable.current,
+}));
+
+const { canEditTextInline, isDoublePress } = await import("./domEditInlineText");
+
+function field(key: string): DomEditTextField {
+  return {
+    key,
+    label: key,
+    value: "text",
+    tagName: "SPAN",
+    attributes: [],
+    inlineStyles: {},
+    computedStyles: {},
+    source: "self",
+  };
+}
+
+function selection(partial: Partial<DomEditSelection> = {}): DomEditSelection {
+  return {
+    label: "Heading",
+    tagName: "H1",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    textFields: [field("self")],
+    ...partial,
+  } as DomEditSelection;
+}
+
+describe("canEditTextInline", () => {
+  it("allows an element the panel would let you edit text on", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection())).toBe(true);
+  });
+
+  // The bar is the panel's bar: nothing becomes editable here that is not
+  // editable there.
+  it("refuses an element whose text the panel cannot edit either", () => {
+    editable.current = false;
+    expect(canEditTextInline(selection())).toBe(false);
+  });
+
+  // Editing the whole element would flatten its children into one string.
+  it("refuses an element with several text fields", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ textFields: [field("a"), field("b")] }))).toBe(false);
+  });
+
+  it("allows an element with no separate text fields", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ textFields: [] }))).toBe(true);
+  });
+
+  it("refuses the composition host, which is the document rather than copy", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ isCompositionHost: true }))).toBe(false);
+  });
+
+  it("refuses anything inside a locked composition", () => {
+    editable.current = true;
+    expect(canEditTextInline(selection({ isInsideLockedComposition: true }))).toBe(false);
+  });
+
+  it("refuses nothing at all", () => {
+    editable.current = true;
+    expect(canEditTextInline(null)).toBe(false);
+  });
+});
+
+describe("isDoublePress", () => {
+  it("pairs presses only when they land on the same element", () => {
+    const first = document.createElement("div");
+    const second = document.createElement("div");
+    const previous = { x: 10, y: 10, at: 100, element: first };
+
+    expect(isDoublePress(previous, { x: 12, y: 12, at: 200, element: first })).toBe(true);
+    expect(isDoublePress(previous, { x: 12, y: 12, at: 200, element: second })).toBe(false);
+  });
+});

package/src/components/editor/domEditInlineText.ts

@@ -0,0 +1,99 @@
+import { isRichTextFormattingTag } from "@hyperframes/core/rich-text-sanitize";
+import type { DomEditSelection } from "./domEditingTypes";
+import { isTextEditableSelection } from "./domEditingLayers";
+
+/**
+ * Whether this element's text can be edited where it sits.
+ *
+ * Its own function rather than a condition inside a handler, because this is
+ * the rule most likely to change: it is the whole answer to "why did nothing
+ * happen when I double-clicked that".
+ *
+ * The bar is deliberately the same as the design panel's, plus one thing the
+ * panel can do that editing in place cannot. An element with several text
+ * fields is edited a field at a time there, and making the whole element
+ * editable would flatten its children into one string, so those keep the panel.
+ */
+export function canEditTextInline(selection: DomEditSelection | null): boolean {
+  if (!selection) return false;
+  if (!isTextEditableSelection(selection)) return false;
+  // The composition host is the document, not a piece of copy in it.
+  if (selection.isCompositionHost) return false;
+  if (selection.isInsideLockedComposition) return false;
+  if (selection.textFields.length <= 1) return true;
+  // A styled element reports one field per run of characters, but it is still
+  // one piece of copy and the caret edits all of it at once.
+  return canEditElementTextInline(selection.element);
+}
+
+/**
+ * Whether this element's text can be edited in place, judged from the element
+ * alone.
+ *
+ * The press path cannot use the selection-shaped gate above: building a
+ * selection is asynchronous, and a press has to decide now whether it is a
+ * text edit or the start of a drag. This asks the same question of the DOM.
+ *
+ * A structural child keeps an element out: those are separate text fields, the
+ * panel edits them one at a time, and making the whole element editable would
+ * flatten them into a single string.
+ *
+ * A formatting child does not. Styling a run of characters puts a span inside
+ * the element, so a rule of "no element children" would have let the editor
+ * lock every element it had ever styled out of itself, permanently, on the
+ * first colour change. What counts as formatting is the sanitiser's allowlist,
+ * so the editor and the thing that writes the file agree on it.
+ */
+export function canEditElementTextInline(element: HTMLElement | null): boolean {
+  if (!element) return false;
+  const tag = element.tagName;
+  if (tag === "BODY" || tag === "HTML") return false;
+  if (!hasOnlyFormattingChildren(element)) return false;
+  if (element.isContentEditable) return false;
+  return (element.textContent ?? "").trim().length > 0;
+}
+
+function hasOnlyFormattingChildren(element: HTMLElement): boolean {
+  const HTMLElementClass = element.ownerDocument.defaultView?.HTMLElement;
+  if (!HTMLElementClass) return false;
+  for (const child of Array.from(element.children)) {
+    if (!isRichTextFormattingTag(child.tagName)) return false;
+    if (!(child instanceof HTMLElementClass)) return false;
+    // Formatting nests, and a structural child hidden inside a span is still
+    // structural.
+    if (!hasOnlyFormattingChildren(child)) return false;
+  }
+  return true;
+}
+
+/** Where and when a press landed, for recognising the next one as a pair. */
+export interface PressMark {
+  x: number;
+  y: number;
+  at: number;
+  element: HTMLElement | null;
+}
+
+/** Long enough to be deliberate, short enough not to catch two separate clicks. */
+const DOUBLE_PRESS_MS = 450;
+/** A double press is two presses in the same place, not a tiny drag. */
+const DOUBLE_PRESS_SLOP_PX = 6;
+
+/**
+ * Whether this press pairs with the last one into a double press.
+ *
+ * Studio cannot use `dblclick` or a click count for this. The selection box
+ * takes pointer capture on the first press and prevents its default, which
+ * suppresses the compatibility mouse events and stops the browser pairing the
+ * two presses at all: no `dblclick` is dispatched, and `detail` stays 1.
+ */
+export function isDoublePress(previous: PressMark | null, next: PressMark): boolean {
+  if (!previous) return false;
+  return (
+    next.element !== null &&
+    previous.element === next.element &&
+    next.at - previous.at <= DOUBLE_PRESS_MS &&
+    Math.abs(next.x - previous.x) <= DOUBLE_PRESS_SLOP_PX &&
+    Math.abs(next.y - previous.y) <= DOUBLE_PRESS_SLOP_PX
+  );
+}

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

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { canEditElementTextInline } from "./domEditInlineText";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function mount(html: string): HTMLElement {
+  document.body.innerHTML = html;
+  return document.body.firstElementChild as HTMLElement;
+}
+
+describe("canEditElementTextInline", () => {
+  it("opens a plain piece of copy", () => {
+    expect(canEditElementTextInline(mount("<h1>hello world</h1>"))).toBe(true);
+  });
+
+  // The trap this exists for: styling a run of characters puts a span inside
+  // the element, and a rule of "no element children" would have let the editor
+  // lock every element it had ever styled out of itself, permanently.
+  it("still opens an element that has been styled", () => {
+    const element = mount('<h1>hell<span style="color: red">o</span> world</h1>');
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
+  it("opens an element whose formatting is nested", () => {
+    const element = mount('<h1><b><span style="color: red">deep</span></b></h1>');
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
+  it("keeps out an element with a structural child, which the panel edits field by field", () => {
+    expect(canEditElementTextInline(mount("<div><h1>a</h1><p>b</p></div>"))).toBe(false);
+  });
+
+  it("keeps out an element hiding something structural inside its formatting", () => {
+    expect(canEditElementTextInline(mount("<h1><span><div>a</div></span></h1>"))).toBe(false);
+  });
+
+  it("keeps out the document itself", () => {
+    expect(canEditElementTextInline(document.body)).toBe(false);
+    expect(canEditElementTextInline(document.documentElement)).toBe(false);
+  });
+
+  it("keeps out an element that is already being edited", () => {
+    const element = mount("<h1>hello</h1>");
+    element.setAttribute("contenteditable", "true");
+    expect(canEditElementTextInline(element)).toBe(false);
+  });
+
+  it("keeps out an element with no words in it", () => {
+    expect(canEditElementTextInline(mount("<h1>   </h1>"))).toBe(false);
+  });
+
+  it("keeps out nothing at all", () => {
+    expect(canEditElementTextInline(null)).toBe(false);
+  });
+});

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

@@ -8,6 +8,7 @@ import {
   resolveCropInsetFromMoveDrag,
   rotateDeltaIntoFrame,
 } from "./domEditOverlayCrop";
+import { individualRotateDegrees } from "./domEditOverlayTransform";
 
 describe("resolveCropInsetFromEdgeDrag", () => {
   const startInsets = { top: 10, right: 20, bottom: 30, left: 40 };
@@ -160,10 +161,15 @@ describe("readElementCropInsets tri-state", () => {
 describe("readElementCropFrame", () => {
   const overlayRect = { left: 100, top: 50, width: 220, height: 130, editScaleX: 1, editScaleY: 1 };
 
+  // Models an element well enough for the ancestor walk: it reports its own
+  // transform, claims no composition-root attribute, and has no parent, so the
+  // walk composes exactly one node.
   const fakeEl = (transform: string, offsetWidth = 200, offsetHeight = 100) =>
     ({
       offsetWidth,
       offsetHeight,
+      parentElement: null,
+      hasAttribute: () => false,
       ownerDocument: { defaultView: { getComputedStyle: () => ({ transform }) } },
     }) as unknown as HTMLElement;
 
@@ -205,9 +211,43 @@ describe("readElementCropFrame", () => {
     expect(frame.height).toBeCloseTo(200, 3);
   });
 
-  it("3D transform falls back to the axis-aligned frame", () => {
+  /**
+   * A 3D matrix is not automatically unmeasurable. GSAP writes one for an
+   * ordinary 2D move or spin (force3D), so refusing every `matrix3d` drew the
+   * crop outline square on elements the rest of the chrome drew rotated.
+   * The identity here is a 2D transform written the long way.
+   */
+  it("reads a planar matrix3d rather than giving up on it", () => {
+    // scale(1.5, 2) written the long way — planar, and not the identity.
     const frame = readElementCropFrame(
-      fakeEl("matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)"),
+      fakeEl("matrix3d(1.5,0,0,0,0,2,0,0,0,0,1,0,0,0,0,1)"),
+      overlayRect,
+    );
+    expect(frame.scaleX).toBeCloseTo(1.5, 3);
+    expect(frame.scaleY).toBeCloseTo(2, 3);
+  });
+
+  it("reads a 2D rotation written as matrix3d", () => {
+    const frame = readElementCropFrame(
+      fakeEl("matrix3d(0.866025,0.5,0,0,-0.5,0.866025,0,0,0,0,1,0,0,0,0,1)"),
+      overlayRect,
+    );
+    expect(frame.angleDeg).toBeCloseTo(30, 3);
+  });
+
+  it("reads a flipped element, which still has a real size", () => {
+    // Negative z scale — a composition that mirrors an element writes this.
+    const frame = readElementCropFrame(
+      fakeEl("matrix3d(-0.866025,-0.5,0,0,-0.5,0.866025,0,0,0,0,-1,0,0,0,0,1)"),
+      overlayRect,
+    );
+    expect(frame.width).toBeGreaterThan(0);
+    expect(frame.height).toBeGreaterThan(0);
+  });
+
+  it("still falls back on a perspective transform, which no single angle describes", () => {
+    const frame = readElementCropFrame(
+      fakeEl("matrix3d(1,0,0,0.002,0,1,0,0,0,0,1,0,0,0,0,1)"),
       overlayRect,
     );
     expect(frame).toEqual({
@@ -241,3 +281,97 @@ describe("rotateDeltaIntoFrame", () => {
     expect(back.deltaY).toBeCloseTo(-3, 6);
   });
 });
+
+describe("individualRotateDegrees", () => {
+  /**
+   * Studio's rotate handle writes the CSS `rotate` property, not `transform`.
+   * Everything that measured an element's angle read `transform` alone, so a
+   * turned element reported upright and the selection box, crop outline and
+   * child outlines all drew square across it.
+   */
+  it("reads a plain angle", () => {
+    expect(individualRotateDegrees("-22deg")).toBeCloseTo(-22, 6);
+    expect(individualRotateDegrees("45deg")).toBeCloseTo(45, 6);
+  });
+
+  it("reads an explicit z-axis rotation, honouring the axis sign", () => {
+    expect(individualRotateDegrees("0 0 1 30deg")).toBeCloseTo(30, 6);
+    expect(individualRotateDegrees("0 0 -1 30deg")).toBeCloseTo(-30, 6);
+  });
+
+  it("reports nothing for a rotation that leaves the overlay's plane", () => {
+    // A 3D turn has no single in-plane angle. Reporting one would draw the
+    // chrome at a plausible-looking wrong angle instead of falling back square.
+    expect(individualRotateDegrees("1 0 0 45deg")).toBe(0);
+    expect(individualRotateDegrees("0 1 0 45deg")).toBe(0);
+  });
+
+  it("reports nothing when the property is absent or unparseable", () => {
+    expect(individualRotateDegrees("none")).toBe(0);
+    expect(individualRotateDegrees(undefined)).toBe(0);
+    expect(individualRotateDegrees("")).toBe(0);
+    expect(individualRotateDegrees("12")).toBe(0);
+  });
+});
+
+describe("readElementCropFrame — the composed walk", () => {
+  /**
+   * The case the crop outline got wrong: a text layer inside a rotated card.
+   * The layer carries its own spin and its parent turns it again, so the box
+   * belongs at the combination. Reading the element alone drew it across the
+   * text at roughly a right angle.
+   */
+  const nested = (childTransform: string, parentTransform: string) => {
+    const style = (transform: string) => ({ transform }) as CSSStyleDeclaration;
+    const parent = {
+      offsetWidth: 400,
+      offsetHeight: 300,
+      parentElement: null,
+      hasAttribute: (name: string) => name === "data-composition-id",
+      ownerDocument: { defaultView: { getComputedStyle: () => style(parentTransform) } },
+    };
+    return {
+      offsetWidth: 200,
+      offsetHeight: 100,
+      parentElement: parent,
+      hasAttribute: () => false,
+      ownerDocument: {
+        defaultView: {
+          getComputedStyle: (node: unknown) =>
+            node === parent ? style(parentTransform) : style(childTransform),
+        },
+      },
+    } as unknown as HTMLElement;
+  };
+
+  const overlayRect = { left: 100, top: 50, width: 220, height: 130, editScaleX: 1, editScaleY: 1 };
+
+  it("adds the parent's rotation to the child's", () => {
+    // child 30deg inside a parent turned 60deg → the layer paints at 90.
+    const frame = readElementCropFrame(
+      nested(
+        "matrix(0.8660254, 0.5, -0.5, 0.8660254, 0, 0)",
+        "matrix(0.5, 0.8660254, -0.8660254, 0.5, 0, 0)",
+      ),
+      overlayRect,
+    );
+    expect(frame.angleDeg).toBeCloseTo(90, 3);
+  });
+
+  it("takes the parent's rotation when the child has none of its own", () => {
+    const frame = readElementCropFrame(
+      nested("none", "matrix(0.8660254, 0.5, -0.5, 0.8660254, 0, 0)"),
+      overlayRect,
+    );
+    expect(frame.angleDeg).toBeCloseTo(30, 3);
+  });
+
+  it("stops at the composition root rather than walking the whole document", () => {
+    // The root itself is marked, so its own transform is the last one counted.
+    const frame = readElementCropFrame(
+      nested("none", "matrix(0.8660254, 0.5, -0.5, 0.8660254, 0, 0)"),
+      overlayRect,
+    );
+    expect(frame.angleDeg).toBeCloseTo(30, 3);
+  });
+});

package/src/components/editor/domEditOverlayCrop.ts

@@ -1,3 +1,4 @@
+import { composeElementTransform, type PlanarTransformOps } from "./domEditOverlayTransform";
 import { parseInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
 
 export type CropEdge = "top" | "right" | "bottom" | "left";
@@ -147,6 +148,96 @@ export interface CropFrame {
   scaleY: number;
 }
 
+/**
+ * The element's own 2D transform as matrix components, plus the `rotate`
+ * property's angle.
+ *
+ * `rotate` is a separate CSS property, not part of `transform`, and it is the
+ * one Studio's rotate handle writes — reading `transform` alone reported a
+ * turned element as upright, so the crop outline drew square across it.
+ *
+ * Null means there is nothing planar to draw against: no transform and no
+ * rotation, or a 3D/unparseable matrix. The caller falls back to the
+ * axis-aligned box rather than guessing an angle.
+ */
+const IDENTITY = { a: 1, b: 0, c: 0, d: 1 };
+
+/** Perspective terms this far from zero mean the mapping is not affine. */
+const PERSPECTIVE_EPSILON = 1e-6;
+
+type Planar2D = { a: number; b: number; c: number; d: number };
+
+/**
+ * The 2D components of a computed transform, or null when it cannot be used.
+ *
+ * Accepts `matrix3d` as well as `matrix`, taking the same 2D projection the
+ * rest of the overlay reads through DOMMatrix. GSAP writes a 3D matrix for an
+ * ordinary 2D move or spin (force3D), and a composition that flips an element
+ * writes one with a negative z scale — treating either as unmeasurable left the
+ * crop outline square on an element every other piece of chrome drew rotated.
+ *
+ * Only a perspective term rules the matrix out, because that is where the
+ * mapping stops being affine and a single angle stops describing it.
+ */
+function parseMatrixComponents(transform: string): Planar2D | null {
+  const flat = /^matrix\(([^)]+)\)$/.exec(transform);
+  if (flat) {
+    const [a, b, c, d] = flat[1]!.split(",").map((v) => Number.parseFloat(v));
+    return [a, b, c, d].every(Number.isFinite) ? { a: a!, b: b!, c: c!, d: d! } : null;
+  }
+  const spatial = /^matrix3d\(([^)]+)\)$/.exec(transform);
+  if (!spatial) return null;
+  const m = spatial[1]!.split(",").map((v) => Number.parseFloat(v));
+  if (m.length !== 16 || !m.every(Number.isFinite)) return null;
+  const affine = [m[3], m[7], m[11]].every((v) => Math.abs(v!) < PERSPECTIVE_EPSILON);
+  if (!affine) return null;
+  return { a: m[0]!, b: m[1]!, c: m[4]!, d: m[5]! };
+}
+
+/** The crop frame only needs an angle and a scale, so it composes plain 2D components. */
+const PLANAR_2D_OPS: PlanarTransformOps<Planar2D> = {
+  identity: () => IDENTITY,
+  fromTransform: parseMatrixComponents,
+  fromRotate: (degrees) => {
+    const rad = (degrees * Math.PI) / 180;
+    return { a: Math.cos(rad), b: Math.sin(rad), c: -Math.sin(rad), d: Math.cos(rad) };
+  },
+  compose: (outer, inner) => ({
+    a: outer.a * inner.a + outer.c * inner.b,
+    b: outer.b * inner.a + outer.d * inner.b,
+    c: outer.a * inner.c + outer.c * inner.d,
+    d: outer.b * inner.c + outer.d * inner.d,
+  }),
+};
+
+/** Whether the matrix leaves the box exactly as it found it. */
+function isIdentity(m: Planar2D): boolean {
+  return (
+    Math.abs(m.a - 1) < PERSPECTIVE_EPSILON &&
+    Math.abs(m.b) < PERSPECTIVE_EPSILON &&
+    Math.abs(m.c) < PERSPECTIVE_EPSILON &&
+    Math.abs(m.d - 1) < PERSPECTIVE_EPSILON
+  );
+}
+
+/**
+ * The transform the element paints under, in 2D components.
+ *
+ * Null when nothing up the chain transforms it: the caller's axis-aligned rect
+ * already describes it, and that comes from real layout rather than the
+ * element's untransformed box.
+ */
+function readPlanarTransform(element: HTMLElement): Planar2D | null {
+  const acc = composeElementTransform(element, PLANAR_2D_OPS, (node) => {
+    try {
+      return node.ownerDocument.defaultView?.getComputedStyle(node) ?? null;
+    } catch {
+      return null;
+    }
+  });
+  return acc && !isIdentity(acc) ? acc : null;
+}
+
 export function readElementCropFrame(
   element: HTMLElement,
   overlayRect: CropScreenRect & { editScaleX: number; editScaleY: number },
@@ -162,22 +253,15 @@ export function readElementCropFrame(
     scaleX: editX,
     scaleY: editY,
   };
-  let transform = "";
-  try {
-    transform = element.ownerDocument.defaultView?.getComputedStyle(element).transform ?? "";
-  } catch {
-    return aabb;
-  }
-  if (!transform || transform === "none") return aabb;
-  const m = /^matrix\(([^)]+)\)$/.exec(transform);
-  if (!m) return aabb; // matrix3d or unparseable → axis-aligned fallback
-  const [a, b, c, d] = m[1]!.split(",").map((v) => Number.parseFloat(v));
-  if (![a, b, c, d].every(Number.isFinite)) return aabb;
-  const elScaleX = Math.hypot(a!, b!);
-  const det = a! * d! - b! * c!;
-  const elScaleY = elScaleX !== 0 ? det / elScaleX : 1;
+  const planar = readPlanarTransform(element);
+  if (!planar) return aabb;
+  const { a, b, c, d } = planar;
+  const elScaleX = Math.hypot(a, b);
+  const det = a * d - b * c;
+  // |det| : a flipped element (negative determinant) still has a real size.
+  const elScaleY = elScaleX !== 0 ? Math.abs(det) / elScaleX : 1;
   if (elScaleX <= 0 || elScaleY <= 0) return aabb;
-  const angleDeg = (Math.atan2(b!, a!) * 180) / Math.PI;
+  const angleDeg = (Math.atan2(b, a) * 180) / Math.PI;
   const scaleX = elScaleX * editX;
   const scaleY = elScaleY * editY;
   const width = element.offsetWidth * scaleX;

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

@@ -165,6 +165,19 @@ describe("orientedOverlayRect — rotation gate (perf fix, V15 18a/18b)", () =>
    * a text layer inside a rotated card got an upright dashed box sitting across
    * the rotated glyphs — the parent's chrome rotated and its children's did not.
    */
+  /**
+   * The selection box and the crop outline compose the same ancestor walk, so
+   * this asserts the geometry side of the case the crop test covers: a child
+   * inside a rotated parent reports the angle it paints at, not its own.
+   */
+  it("composes the parent's rotation into the child's angle", () => {
+    const { overlayEl, iframe, el } = buildHarness();
+    el.parentElement!.style.transform = ROTATE_30DEG_MATRIX;
+    const rect = orientedOverlayRect(overlayEl, iframe, el);
+    expect(rect).not.toBeNull();
+    expect(rect!.angle).toBeCloseTo(30, 3);
+  });
+
   it("child outlines carry the element's angle, so they can co-rotate with it", () => {
     const { overlayEl, iframe, el } = buildHarness();
     el.style.transform = ROTATE_30DEG_MATRIX;

package/src/components/editor/domEditOverlayGeometry.ts

@@ -1,6 +1,7 @@
 import { type DomEditSelection, findElementForSelection } from "./domEditing";
 import { isElementVisibleThroughAncestors } from "./domEditingDom";
 import { hugRectForElement } from "./domEditOverlayCrop";
+import { composeElementTransform, type PlanarTransformOps } from "./domEditOverlayTransform";
 
 export interface OverlayRect {
   left: number;
@@ -146,17 +147,19 @@ function readElementTransformSnapshot(
   const DOMMatrixCtor = (win as Window & typeof globalThis).DOMMatrix;
   if (!DOMMatrixCtor) return null;
   const cs = win.getComputedStyle(element);
+  // The corner math transforms points, so this algebra keeps the full matrix,
+  // translation included, where the crop frame's keeps only 2D components.
+  const ops: PlanarTransformOps<DOMMatrix> = {
+    identity: () => new DOMMatrixCtor(),
+    fromTransform: (value) => new DOMMatrixCtor(value),
+    fromRotate: (degrees) => new DOMMatrixCtor().rotateSelf(degrees),
+    compose: (outer, inner) => outer.multiply(inner),
+  };
   try {
-    let matrix = new DOMMatrixCtor();
-    for (let node: HTMLElement | null = element; node; node = node.parentElement) {
-      const transform = node === element ? cs.transform : win.getComputedStyle(node).transform;
-      if (transform && transform !== "none") {
-        // An ancestor applies outside, so it multiplies on the left.
-        matrix = new DOMMatrixCtor(transform).multiply(matrix);
-      }
-      if (node.hasAttribute("data-composition-id")) break;
-    }
-    return { matrix, cs };
+    const matrix = composeElementTransform(element, ops, (node) =>
+      node === element ? cs : win.getComputedStyle(node),
+    );
+    return matrix ? { matrix, cs } : null;
   } catch {
     return null;
   }