@hyperframes/studio 0.8.124 → 0.8.126

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

@@ -1,54 +1,64 @@
 // @vitest-environment happy-dom
 import { expect, it } from "vitest";
-import { pressBelongsToLayer, pressSelectedLayer } from "./motionPathLayerNode";
+import { controlForNode, controlUnder, pressControl } from "./motionPathLayerNode";
 
-// Keyframe nodes at x 60 and 120 (y 30), drawn from home (500, 400); dots of radius 6.
-const atLayer = { x: 60, y: 30, ax: 560, ay: 430 };
-const other = { x: 120, y: 30, ax: 620, ay: 430 };
+// Keyframe nodes at x 60 and 120 (y 30); GSAP renders the layer at the first.
+const atLayer = { x: 60, y: 30 };
+const other = { x: 120, y: 30 };
 const live = { x: 60, y: 30 };
 
+// The editor overlay: the selection's chrome (box and a handle) and another layer's off-canvas marker.
+const overlay = document.createElement("div");
+const chrome = document.createElement("div");
+chrome.setAttribute("data-dom-edit-chrome", "true");
 const box = document.createElement("div");
 box.setAttribute("data-dom-edit-selection-box", "true");
+const handle = document.createElement("button");
+const marker = document.createElement("div");
+chrome.append(box, handle);
+overlay.append(chrome, marker);
+const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-document.body.append(box, circle);
+const line = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
+svg.append(line, circle);
+document.body.append(overlay, svg);
 
-/** A press on `circle` at (x, y), with `under` what the document hit-tests there. */
-function press(x: number, y: number, under: Element[]) {
-  document.elementsFromPoint = () => [circle, ...under];
-  return { currentTarget: circle, clientX: x, clientY: y } as unknown as React.PointerEvent;
+/** A press on `circle`, with `under` what the document hit-tests below it. */
+function press(under: Element[]) {
+  document.elementsFromPoint = () => [circle, line, ...under];
+  return { currentTarget: circle, clientX: 0, clientY: 0 } as unknown as React.PointerEvent;
 }
 
 it("the node GSAP renders the layer at is the layer, inside the box or out", () => {
-  expect(pressBelongsToLayer(press(562, 431, [box]), { x: 562, y: 431 }, atLayer, 6, live)).toBe(
-    true,
-  );
-  expect(pressBelongsToLayer(press(570, 440, []), { x: 570, y: 440 }, atLayer, 6, live)).toBe(true);
+  expect(controlForNode(press([box, overlay]), atLayer, live)).toBe(box);
+  expect(controlForNode(press([overlay]), atLayer, live)).toBe(box);
 });
 
-it("inside the layer's box another node's grab ring is the layer's; its dot stays the node's", () => {
-  expect(pressBelongsToLayer(press(610, 430, [box]), { x: 610, y: 430 }, other, 6, live)).toBe(
-    true,
-  );
-  expect(pressBelongsToLayer(press(617, 430, [box]), { x: 617, y: 430 }, other, 6, live)).toBe(
-    false,
-  );
+it("inside the layer's box any other node is the layer's, so a drag from its middle moves it", () => {
+  expect(controlForNode(press([box, overlay]), other, live)).toBe(box);
+  expect(controlForNode(press([box, overlay]), other, null)).toBe(box);
 });
 
-it("outside the layer's box a node's whole grab ring is the node's", () => {
-  expect(pressBelongsToLayer(press(610, 430, []), { x: 610, y: 430 }, other, 6, live)).toBe(false);
-  expect(pressBelongsToLayer(press(610, 430, [box]), { x: 610, y: 430 }, other, 6, null)).toBe(
-    true,
-  );
+it("a handle above the box under a node takes the press, not the box or the node", () => {
+  expect(controlForNode(press([handle, box, overlay]), other, live)).toBe(handle);
+  expect(controlForNode(press([handle, box, overlay]), atLayer, live)).toBe(handle);
+  expect(controlUnder(press([handle, overlay]))).toBe(handle);
 });
 
-it("hands a press to the selected layer's box with its pointer and position", () => {
+it("outside the layer's box and its handles a node is the node's", () => {
+  expect(controlForNode(press([overlay]), other, live)).toBeNull();
+  expect(controlForNode(press([marker, overlay]), other, live)).toBeNull();
+  expect(controlForNode(press([document.body]), other, live)).toBeNull();
+});
+
+it("hands a press to the control with its pointer and position", () => {
   const got: number[][] = [];
   const listen = (e: Event) => {
     const p = e as PointerEvent;
     got.push([p.pointerId, p.clientX, p.clientY, p.button]);
     e.preventDefault();
   };
-  box.addEventListener("pointerdown", listen);
+  handle.addEventListener("pointerdown", listen);
   const nativeEvent = new PointerEvent("pointerdown", {
     pointerId: 7,
     clientX: 12,
@@ -58,24 +68,22 @@ it("hands a press to the selected layer's box with its pointer and position", ()
     cancelable: true,
   });
   const down = { currentTarget: circle, nativeEvent } as unknown as React.PointerEvent;
-  expect(pressSelectedLayer(down)).toBe(true);
+  expect(pressControl(down, handle)).toBe(true);
   expect(got).toEqual([[7, 12, 34, 0]]);
-  box.removeEventListener("pointerdown", listen);
-  box.remove();
-  expect(pressSelectedLayer(down)).toBe(false);
-  document.body.append(box);
+  expect(pressControl(down, null)).toBe(false);
+  handle.removeEventListener("pointerdown", listen);
 });
 
-it("keeps the press when the box does not start a gesture with it, or takes no pointer", () => {
+it("keeps the press when the control does not start a gesture with it, or takes no pointer", () => {
   let got = 0;
   const listen = () => void got++;
   box.addEventListener("pointerdown", listen);
   const nativeEvent = new PointerEvent("pointerdown", { bubbles: true, cancelable: true });
   const down = { currentTarget: circle, nativeEvent } as unknown as React.PointerEvent;
-  expect(pressSelectedLayer(down)).toBe(false);
+  expect(pressControl(down, box)).toBe(false);
   expect(got).toBe(1);
   box.style.pointerEvents = "none";
-  expect(pressSelectedLayer(down)).toBe(false);
+  expect(pressControl(down, box)).toBe(false);
   expect(got).toBe(1);
   box.style.pointerEvents = "";
   box.removeEventListener("pointerdown", listen);

package/src/components/editor/motionPathLayerNode.ts

@@ -1,28 +1,32 @@
 type Point = { x: number; y: number };
-type DrawnNode = Point & { ax: number; ay: number };
 
 const LAYER_BOX = '[data-dom-edit-selection-box="true"]';
+export const SELECTION_CHROME = `${LAYER_BOX}, [data-dom-edit-chrome="true"], [data-dom-edit-crop-frame="true"]`;
 
 /** How far a node's dot reaches; a selected node draws it larger. */
 export const dotRadius = (r: number, selected: boolean) => (selected ? r * 1.5 : r);
 
-/** A press on the layer's own node, or in its box but off a node's dot, belongs to the layer. */
-export function pressBelongsToLayer(
+export function controlUnder(e: React.PointerEvent): Element | null {
+  const path = e.currentTarget.closest("svg");
+  const hits = e.currentTarget.ownerDocument.elementsFromPoint(e.clientX, e.clientY);
+  const hit = hits.find((el) => !path?.contains(el));
+  return hit?.closest(SELECTION_CHROME) ? hit : null;
+}
+
+/** The handle or box above a node, else the box if the layer sits at the node; null: the node. */
+export function controlForNode(
   e: React.PointerEvent,
-  point: Point,
-  pressed: DrawnNode,
-  dotR: number,
+  pressed: Point,
   live: Point | null,
-): boolean {
-  if (live && Math.abs(pressed.x - live.x) < 0.5 && Math.abs(pressed.y - live.y) < 0.5) return true;
-  const hits = e.currentTarget.ownerDocument.elementsFromPoint(e.clientX, e.clientY);
-  const inBox = hits.some((el) => el.closest(LAYER_BOX));
-  return inBox && Math.hypot(point.x - pressed.ax, point.y - pressed.ay) > dotR;
+): Element | null {
+  const atLayer = live && Math.abs(pressed.x - live.x) < 0.5 && Math.abs(pressed.y - live.y) < 0.5;
+  return (
+    controlUnder(e) ?? (atLayer ? e.currentTarget.ownerDocument.querySelector(LAYER_BOX) : null)
+  );
 }
 
-/** Hands a press to the selected layer's box; true when the box started a gesture with it. */
-export function pressSelectedLayer(e: React.PointerEvent): boolean {
-  const box = e.currentTarget.ownerDocument.querySelector(LAYER_BOX);
-  if (!box || getComputedStyle(box).pointerEvents === "none") return false;
-  return !box.dispatchEvent(new PointerEvent("pointerdown", e.nativeEvent));
+/** Hands a press to `control`; true when it started a gesture with it. */
+export function pressControl(e: React.PointerEvent, control: Element | null): boolean {
+  if (!control || getComputedStyle(control).pointerEvents === "none") return false;
+  return !control.dispatchEvent(new PointerEvent("pointerdown", e.nativeEvent));
 }

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

@@ -130,6 +130,26 @@ describe("reapplyPositionEditsAfterSeek", () => {
     delete win.__timelines;
   });
 
+  it("reapplies and migrates marks in the preview, whichever window built its node", () => {
+    const frame = document.body.appendChild(document.createElement("iframe"));
+    const doc = frame.contentDocument!;
+    // The frame builds one node; the editor builds the other, as on loads where they differ.
+    const nodes = [doc.createElement("div"), document.createElement("div")];
+    for (const el of nodes) {
+      el.setAttribute(`data-${STUDIO_PATH_OFFSET_ATTR}`, "true");
+      el.setAttribute(STUDIO_ROTATION_ATTR, "true");
+      el.style.setProperty(STUDIO_ROTATION_PROP, "8deg");
+      doc.body.append(el);
+    }
+
+    reapplyPositionEditsAfterSeek(doc);
+
+    for (const el of nodes) {
+      expect(el.getAttribute(STUDIO_PATH_OFFSET_ATTR)).toBe("true");
+      expect(el.style.getPropertyValue("rotate")).toContain(STUDIO_ROTATION_PROP);
+    }
+  });
+
   it("still migrates a legacy double-prefixed edit mark", () => {
     document.body.innerHTML = `<div id="a" data-${STUDIO_PATH_OFFSET_ATTR}="true"></div>`;
 

package/src/components/editor/studioMotion.ts

@@ -35,6 +35,7 @@ export {
   clearStudioMotionFromElement,
 } from "./studioMotionOps";
 
+import { isHtmlElement } from "@hyperframes/core/runtime/dom-realm";
 import { readStudioMotionFromElement as readMotionAttr } from "./studioMotionOps";
 import {
   STUDIO_MOTION_ATTR,
@@ -71,21 +72,17 @@ function elementMatchesSourceFile(
 }
 
 function querySelectorCandidates(document: Document, selector: string): HTMLElement[] {
-  const isCandidate = (element: Element): element is HTMLElement => {
-    const HTMLElementCtor = element.ownerDocument.defaultView?.HTMLElement;
-    return Boolean(HTMLElementCtor && element instanceof HTMLElementCtor);
-  };
   const className = selector.match(/^\.([A-Za-z0-9_-]+)$/)?.[1];
   if (className) {
     return Array.from(document.getElementsByTagName("*")).filter(
       (element): element is HTMLElement =>
-        isCandidate(element) && element.classList.contains(className),
+        isHtmlElement(element) && element.classList.contains(className),
     );
   }
   if (/^[A-Za-z][A-Za-z0-9-]*$/.test(selector)) {
-    return Array.from(document.getElementsByTagName(selector)).filter(isCandidate);
+    return Array.from(document.getElementsByTagName(selector)).filter(isHtmlElement);
   }
-  return Array.from(document.querySelectorAll(selector)).filter(isCandidate);
+  return Array.from(document.querySelectorAll(selector)).filter(isHtmlElement);
 }
 
 function resolveTarget(
@@ -93,12 +90,10 @@ function resolveTarget(
   target: StudioMotionTarget,
   activeCompositionPath: string | null,
 ): HTMLElement | null {
-  const HTMLElementCtor = document.defaultView?.HTMLElement;
   if (target.id) {
     const byId = document.getElementById(target.id);
     if (
-      HTMLElementCtor &&
-      byId instanceof HTMLElementCtor &&
+      isHtmlElement(byId) &&
       elementMatchesSourceFile(byId, target.sourceFile, activeCompositionPath)
     ) {
       return byId;
@@ -135,10 +130,8 @@ function restoreStudioMotionElement(element: HTMLElement, gsap: StudioMotionWind
 }
 
 function restoreStudioMotionElements(document: Document, gsap: StudioMotionWindow["gsap"]): void {
-  const HTMLElementCtor = document.defaultView?.HTMLElement;
-  if (!HTMLElementCtor) return;
   for (const element of Array.from(document.querySelectorAll(`[${STUDIO_MOTION_ATTR}]`))) {
-    if (element instanceof HTMLElementCtor) restoreStudioMotionElement(element, gsap);
+    if (isHtmlElement(element)) restoreStudioMotionElement(element, gsap);
   }
 }
 
@@ -238,11 +231,6 @@ export function applyStudioMotionFromDom(document: Document, currentTime?: numbe
   win.__timelines[STUDIO_MOTION_TIMELINE_ID]?.kill?.();
   delete win.__timelines[STUDIO_MOTION_TIMELINE_ID];
 
-  // Restore elements that had GSAP motion applied previously but whose attribute
-  // is now just the legacy marker "true" (i.e. they were restored/cleared).
-  const HTMLElementCtor = document.defaultView?.HTMLElement;
-  if (!HTMLElementCtor) return 0;
-
   // Collect elements that have JSON motion data in their attribute
   const motionElements: Array<{
     element: HTMLElement;
@@ -257,7 +245,7 @@ export function applyStudioMotionFromDom(document: Document, currentTime?: numbe
   }> = [];
 
   for (const el of Array.from(document.querySelectorAll(`[${STUDIO_MOTION_ATTR}]`))) {
-    if (!(el instanceof HTMLElementCtor)) continue;
+    if (!isHtmlElement(el)) continue;
     const motionData = readMotionAttr(el);
     if (motionData) {
       motionElements.push({ element: el, motion: motionData });

package/src/components/editor/useDomEditNudge.ts

@@ -32,10 +32,10 @@ import {
   applyManualOffsetNudgeDraft,
   createManualOffsetDragMember,
   endManualOffsetDragMembers,
-  manualOffsetMoveRevert,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
+import { manualOffsetMoveRevert } from "./gestureUndoRevert";
 import { isStudioManualEditGestureCurrent, restoreStudioPathOffset } from "./manualEdits";
 import {
   CANVAS_NUDGE_COMMIT_DEBOUNCE_MS,

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -12,8 +12,8 @@ import {
   applyManualOffsetDragDraft,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
-  manualOffsetMoveRevert,
 } from "./manualOffsetDrag";
+import { manualOffsetMoveRevert, elementLookRevert } from "./gestureUndoRevert";
 import { applyRotationDraft, restoreRotationDraft } from "./rotationDraft";
 import {
   applyStudioBoxSize,
@@ -443,7 +443,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       // Hold the final angle while the commit lands.
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
       const commit = { ...finalRotation, plain: g.plainRotation };
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit))
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved = Promise.resolve(edit.adopt(() => opts.onRotationCommitRef.current(sel, commit)))
         .then((result) => trackPreviewEditResult("rotate", "drag", result))
         .catch((error) => {
           logGestureCommitFailure("rotate commit failed", error);
@@ -454,6 +455,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
             restoreRotation();
         })
         .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+      edit.settle(saved);
     } else if (g.kind === "drag") {
       // A moved drag (taps returned earlier) must not let the release click
       // re-select whatever now sits under the pointer — dropping over a
@@ -535,9 +537,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         restoreStudioBoxSize(sel.element, g.initialBoxSize);
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
-      void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore, member),
-      )
+      const commitSize = () =>
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore, member);
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved = Promise.resolve(edit.adopt(commitSize))
         .then((result) => trackPreviewEditResult("resize", "drag", result))
         .catch((error) => {
           logGestureCommitFailure("resize commit failed", error);
@@ -546,6 +549,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           if (member) endManualOffsetDragMembers([member]);
           else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         });
+      edit.settle(saved);
       logResizeSettle(sel.element, "post-release");
     }
   };

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

@@ -1,7 +1,9 @@
 // @vitest-environment happy-dom
+import { gsap } from "gsap";
 import { act, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { elementHome } from "./motionPathHome";
 import { useMotionPathData } from "./useMotionPathData";
 import { resetOverlayFrameLoopForTests } from "./overlayFrameLoop";
 import { usePlayerStore } from "../../player/store/playerStore";
@@ -92,3 +94,237 @@ it("reads no layout per frame until there is a path or a create ring to draw", (
     act(() => root.unmount());
   }
 });
+
+it("finds the layer whichever window built its node, so the path draws on every load", () => {
+  runtime.read = {
+    keyframes: [
+      { percentage: 0, properties: { x: 0, y: 0 } },
+      { percentage: 100, properties: { x: 100, y: 0 } },
+    ],
+  };
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const box = iframe.contentDocument!.createElement("div");
+  box.id = "box";
+  iframe.contentDocument!.body.append(box);
+  // happy-dom shares one realm, so the frame's own constructor stands in for another window's.
+  Object.defineProperty(iframe.contentWindow!, "HTMLElement", { value: class {} });
+  let home: unknown = null;
+  function Probe() {
+    const ref = useRef(iframe);
+    home = useMotionPathData(ref, "#box").home;
+    return null;
+  }
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  try {
+    act(() => root.render(<Probe />));
+    runFrames(3);
+    expect(home).not.toBeNull();
+  } finally {
+    act(() => root.unmount());
+  }
+});
+
+it("redraws a node whose keyframe changes only its size", () => {
+  const read = (width: number) => ({
+    keyframes: [
+      { percentage: 66.667, properties: { x: 60, width } },
+      { percentage: 100, properties: { x: 120, width: 320 } },
+    ],
+  });
+  runtime.read = read(280);
+  runtime.gsapPosition = { x: 50, y: 30 };
+  let w: number | undefined;
+  function Probe() {
+    const ref = useRef(document.createElement("iframe"));
+    w = useMotionPathData(ref, "#box").geometry?.nodes[0]?.w;
+    return null;
+  }
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  try {
+    act(() => root.render(<Probe />));
+    expect(w).toBe(280);
+    runtime.read = read(300);
+    act(() => vi.advanceTimersByTime(250));
+    expect(w).toBe(300);
+  } finally {
+    act(() => root.unmount());
+  }
+});
+
+/** A layer laid out at (960, 540), 240 x 160, with `css` inline and `cache` as GSAP's `_gsap`. */
+function layer(css: Partial<CSSStyleDeclaration>, cache?: Record<string, number>) {
+  const el = document.body.appendChild(document.createElement("div"));
+  Object.assign(el.style, css);
+  const box = {
+    offsetLeft: 960,
+    offsetTop: 540,
+    offsetWidth: 240,
+    offsetHeight: 160,
+    offsetParent: null,
+  };
+  for (const [key, value] of Object.entries(box)) Object.defineProperty(el, key, { value });
+  return cache ? Object.assign(el, { _gsap: cache }) : el;
+}
+
+it("anchors a layer GSAP centres with xPercent/yPercent -50 on its centre", () => {
+  const el = layer(
+    { position: "absolute", left: "50%", top: "50%" },
+    { x: 0, y: 0, xPercent: -50, yPercent: -50 },
+  );
+  expect(elementHome(el)).toEqual({ x: 960, y: 540, w: 240, h: 160, ax: 0, ay: 0 });
+});
+
+it("moves a resized layer's centre by half the change from a set left, against it from a set right, and not in flow", () => {
+  const fromLeft = layer({ position: "absolute", left: "10px", top: "10px" });
+  expect(elementHome(fromLeft)).toMatchObject({ x: 1080, y: 620, ax: 0.5, ay: 0.5 });
+  const fromRight = layer({ position: "absolute", right: "10px", bottom: "10px" });
+  const auto = new Set(["left", "top"]);
+  fromRight.computedStyleMap = () =>
+    ({
+      get: (side: string) => (auto.has(side) ? "auto" : "10px"),
+    }) as unknown as StylePropertyMapReadOnly;
+  expect(elementHome(fromRight)).toMatchObject({ ax: -0.5, ay: -0.5 });
+  expect(elementHome(layer({}))).toMatchObject({ x: 1080, ax: 0, ay: 0 });
+});
+
+const resolved = (style: CSSStyleDeclaration) =>
+  (style.translate ?? "").replace(/var\((--[\w-]+)\)/g, (_, name) =>
+    style.getPropertyValue(name),
+  ) || "none";
+
+/** Computes `translate` and `transform` as Chromium does (happy-dom does not), so GSAP's parse would fold them. */
+function computeTranslate() {
+  const real = window.getComputedStyle.bind(window);
+  const computed = (node: Element, pseudo?: string | null) =>
+    new Proxy(real(node, pseudo), {
+      get(style, key) {
+        if (key === "translate") return resolved((node as HTMLElement).style);
+        if (key === "transform") return (node as HTMLElement).style.transform || "none";
+        if (key === "scale" || key === "rotate") return "none";
+        const value = Reflect.get(style, key);
+        return typeof value === "function" ? value.bind(style) : value;
+      },
+    });
+  vi.stubGlobal("getComputedStyle", computed);
+  vi.spyOn(window, "getComputedStyle").mockImplementation(
+    computed as typeof window.getComputedStyle,
+  );
+}
+
+it("leaves a layer's CSS translate alone and anchors where GSAP's parse will put it (real GSAP)", () => {
+  vi.stubGlobal("gsap", gsap);
+  computeTranslate();
+  try {
+    const offset = "var(--hf-studio-offset-x) var(--hf-studio-offset-y)";
+    const cases: [string, number, number][] = [
+      // GSAP folds these into x, which a created path sets.
+      ["40px 30px", 1080, 620],
+      [offset, 1080, 620],
+      // Minus half the size becomes xPercent/yPercent -50.
+      ["-50% -50%", 960, 540],
+      ["-120px -80px", 960, 540],
+    ];
+    // GSAP sums the layer's own transform with its translate: Chromium's matrix for translate(-50%, -50%).
+    const centred = layer({ position: "absolute", transform: "matrix(1, 0, 0, 1, -120, -80)" });
+    expect(elementHome(centred)).toMatchObject({ x: 960, y: 540 });
+    for (const [translate, x, y] of cases) {
+      const el = layer({ position: "absolute", left: "10px", top: "10px", translate });
+      el.style.setProperty("--hf-studio-offset-x", "40px");
+      el.style.setProperty("--hf-studio-offset-y", "30px");
+      expect(elementHome(el), translate).toMatchObject({ x, y });
+      expect([el.style.translate, el.style.transform]).toEqual([translate, ""]);
+    }
+    // A drag's offset on a layer GSAP already parsed composes with its transform.
+    const dragged = layer({ position: "absolute", left: "10px", top: "10px" });
+    gsap.set(dragged, { x: 20 });
+    dragged.style.setProperty("--hf-studio-offset-x", "40px");
+    dragged.style.setProperty("--hf-studio-offset-y", "30px");
+    dragged.style.translate = offset;
+    expect(elementHome(dragged)).toMatchObject({ x: 1120, y: 650 });
+    // After clearProps GSAP marks its cache uncache and its next parse folds the translate again.
+    const css = { position: "absolute", left: "10px", top: "10px", translate: "40px 30px" };
+    expect(elementHome(layer(css, { x: 0, y: 0, uncache: 1 }))).toMatchObject({ x: 1080, y: 620 });
+    // A fade gives GSAP a cache with no transform in it yet, so its next parse still folds.
+    expect(elementHome(layer(css, { opacity: 1 }))).toMatchObject({ x: 1080, y: 620 });
+    const owned = layer({ position: "absolute", left: "50%", top: "50%" });
+    gsap.set(owned, { xPercent: -50, yPercent: -50 });
+    expect(elementHome(owned)).toMatchObject({ x: 960, y: 540, ax: 0, ay: 0 });
+  } finally {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  }
+});
+
+it("redraws the start ring when only GSAP's start changes", () => {
+  const read = (start?: Record<string, number>) => ({
+    keyframes: [
+      { percentage: 50, properties: { x: 60 } },
+      { percentage: 100, properties: { x: 120 } },
+    ],
+    ...(start && { start }),
+  });
+  runtime.read = read();
+  runtime.gsapPosition = { x: 50, y: 30 };
+  let start: unknown;
+  function Probe() {
+    const ref = useRef(document.createElement("iframe"));
+    start = useMotionPathData(ref, "#box").geometry?.start;
+    return null;
+  }
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  try {
+    act(() => root.render(<Probe />));
+    expect(start).toBeUndefined();
+    runtime.read = read({ x: 40 });
+    act(() => vi.advanceTimersByTime(250));
+    expect(start).toEqual({ x: 40, y: 30 });
+  } finally {
+    act(() => root.unmount());
+  }
+});
+
+it("updates the home when the layer's size or anchoring changes but its centre does not", () => {
+  runtime.read = {
+    keyframes: [
+      { percentage: 0, properties: { x: 0, width: 200 } },
+      { percentage: 100, properties: { x: 100, width: 240 } },
+    ],
+  };
+  const iframe = document.body.appendChild(document.createElement("iframe"));
+  const layout = { offsetLeft: 100, offsetWidth: 200 };
+  const box = iframe.contentDocument!.body.appendChild(
+    iframe.contentDocument!.createElement("div"),
+  );
+  box.id = "box";
+  for (const key of ["offsetLeft", "offsetWidth"] as const)
+    Object.defineProperty(box, key, { get: () => layout[key] });
+  let w: number | undefined;
+  let ax: number | undefined;
+  function Probe() {
+    const ref = useRef(iframe);
+    ({ w, ax } = useMotionPathData(ref, "#box").home ?? {});
+    return null;
+  }
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  try {
+    act(() => root.render(<Probe />));
+    runFrames(2);
+    expect(w).toBe(200);
+    Object.assign(layout, { offsetLeft: 80, offsetWidth: 240 });
+    runFrames(2);
+    expect(w).toBe(240);
+    // Re-anchored from the left to the right edge without moving: the share a size change moves changes.
+    Object.assign(box.style, { position: "absolute", left: "10px" });
+    runFrames(2);
+    expect(ax).toBe(0.5);
+    box.computedStyleMap = () =>
+      ({
+        get: (side: string) => (side === "left" ? "auto" : "0px"),
+      }) as unknown as StylePropertyMapReadOnly;
+    runFrames(2);
+    expect(ax).toBe(-0.5);
+  } finally {
+    act(() => root.unmount());
+  }
+});