@hyperframes/studio 0.7.96 → 0.7.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.96",
+  "version": "0.7.97",
   "description": "",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.96",
-    "@hyperframes/player": "0.7.96",
-    "@hyperframes/parsers": "0.7.96",
-    "@hyperframes/sdk": "0.7.96",
-    "@hyperframes/studio-server": "0.7.96"
+    "@hyperframes/parsers": "0.7.97",
+    "@hyperframes/core": "0.7.97",
+    "@hyperframes/player": "0.7.97",
+    "@hyperframes/sdk": "0.7.97",
+    "@hyperframes/studio-server": "0.7.97"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -67,7 +67,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.96"
+    "@hyperframes/producer": "0.7.97"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/manualEditsDom.ts

@@ -12,6 +12,8 @@ import {
   STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
   STUDIO_ORIGINAL_WIDTH_ATTR,
   STUDIO_ORIGINAL_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_BOX_WIDTH_ATTR,
+  STUDIO_ORIGINAL_BOX_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MIN_WIDTH_ATTR,
   STUDIO_ORIGINAL_MIN_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MAX_WIDTH_ATTR,
@@ -358,6 +360,18 @@ function writeStudioBoxSizeVars(
   element: HTMLElement,
   size: { width: number; height: number },
 ): void {
+  // Keep the measurement on its own migration-safe guard. Elements drafted by
+  // an older Studio can already carry the box-size marker without these newer
+  // attributes; the next resize still reaches this function before its width
+  // and height are overwritten, so this is the last honest layout box to save.
+  // Offset sizes are layout values, so a running scale animation does not
+  // distort them.
+  if (!element.hasAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR)) {
+    element.setAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR, String(element.offsetWidth));
+  }
+  if (!element.hasAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR)) {
+    element.setAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, String(element.offsetHeight));
+  }
   if (!element.hasAttribute(STUDIO_BOX_SIZE_ATTR)) {
     element.setAttribute(STUDIO_ORIGINAL_WIDTH_ATTR, element.style.getPropertyValue("width"));
     element.setAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR, element.style.getPropertyValue("height"));

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

@@ -17,6 +17,8 @@ import {
   STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
   STUDIO_ORIGINAL_WIDTH_ATTR,
   STUDIO_ORIGINAL_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_BOX_WIDTH_ATTR,
+  STUDIO_ORIGINAL_BOX_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MIN_WIDTH_ATTR,
   STUDIO_ORIGINAL_MIN_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MAX_WIDTH_ATTR,
@@ -222,6 +224,9 @@ describe("buildBoxSizePatches / buildClearBoxSizePatches", () => {
       { type: "attribute", property: STUDIO_ORIGINAL_WIDTH_ATTR, value: null },
       { type: "inline-style", property: "height", value: "150px" },
       { type: "attribute", property: STUDIO_ORIGINAL_HEIGHT_ATTR, value: null },
+      // Measurements, so they are cleared without restoring a style.
+      { type: "attribute", property: STUDIO_ORIGINAL_BOX_WIDTH_ATTR, value: null },
+      { type: "attribute", property: STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, value: null },
       { type: "inline-style", property: "min-width", value: "0px" },
       { type: "attribute", property: STUDIO_ORIGINAL_MIN_WIDTH_ATTR, value: null },
       { type: "inline-style", property: "min-height", value: "0px" },
@@ -257,11 +262,25 @@ describe("buildBoxSizePatches / buildClearBoxSizePatches", () => {
 
   it("clear: bare element emits only null ops — no style restores fire when orig attrs are absent", () => {
     const ops = buildClearBoxSizePatches(div());
-    // 3 fixed (studio-width, studio-height, box-size marker) + 14 attr-null pushes (one per BOX_SIZE_ORIG_ATTR)
-    expect(ops).toHaveLength(17);
+    // 3 fixed (studio-width, studio-height, box-size marker) + 16 attr-null pushes (one per BOX_SIZE_ORIG_ATTR)
+    expect(ops).toHaveLength(19);
     expect(ops.every((op) => op.value === null)).toBe(true);
   });
 
+  it("backfills the measured box on a legacy element that already has the resize marker", () => {
+    const e = div();
+    e.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
+    Object.defineProperties(e, {
+      offsetWidth: { configurable: true, value: 630 },
+      offsetHeight: { configurable: true, value: 252 },
+    });
+
+    applyStudioBoxSize(e, { width: 320, height: 128 });
+
+    expect(e.getAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR)).toBe("630");
+    expect(e.getAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR)).toBe("252");
+  });
+
   it("build/clear symmetry: clear addresses every {type,property} key that build emits", () => {
     const e = populatedBoxEl();
     assertClearCoversKeys(buildBoxSizePatches(e), buildClearBoxSizePatches(e));

package/src/components/editor/manualEditsDomPatches.ts

@@ -13,6 +13,8 @@ import {
   STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
   STUDIO_ORIGINAL_WIDTH_ATTR,
   STUDIO_ORIGINAL_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_BOX_WIDTH_ATTR,
+  STUDIO_ORIGINAL_BOX_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MIN_WIDTH_ATTR,
   STUDIO_ORIGINAL_MIN_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MAX_WIDTH_ATTR,
@@ -135,6 +137,9 @@ const BOX_SIZE_STYLE_PROPS = [
 const BOX_SIZE_ORIG_ATTRS: ReadonlyArray<[string, string]> = [
   [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
   [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
+  // Records a measurement rather than a style, so it restores nothing.
+  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
+  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
   [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
   [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
   [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],

package/src/components/editor/manualEditsSnapshot.ts

@@ -17,6 +17,8 @@ import {
   STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
   STUDIO_ORIGINAL_WIDTH_ATTR,
   STUDIO_ORIGINAL_HEIGHT_ATTR,
+  STUDIO_ORIGINAL_BOX_WIDTH_ATTR,
+  STUDIO_ORIGINAL_BOX_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MIN_WIDTH_ATTR,
   STUDIO_ORIGINAL_MIN_HEIGHT_ATTR,
   STUDIO_ORIGINAL_MAX_WIDTH_ATTR,
@@ -60,6 +62,8 @@ export function captureStudioBoxSize(element: HTMLElement): StudioBoxSizeSnapsho
     marker: element.getAttribute(STUDIO_BOX_SIZE_ATTR),
     originalWidth: element.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR),
     originalHeight: element.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR),
+    originalBoxWidth: element.getAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR),
+    originalBoxHeight: element.getAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR),
     originalMinWidth: element.getAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR),
     originalMinHeight: element.getAttribute(STUDIO_ORIGINAL_MIN_HEIGHT_ATTR),
     originalMaxWidth: element.getAttribute(STUDIO_ORIGINAL_MAX_WIDTH_ATTR),
@@ -128,6 +132,8 @@ export function restoreStudioBoxSize(element: HTMLElement, previous: StudioBoxSi
   restoreAttribute(element, STUDIO_BOX_SIZE_ATTR, previous.marker);
   restoreAttribute(element, STUDIO_ORIGINAL_WIDTH_ATTR, previous.originalWidth);
   restoreAttribute(element, STUDIO_ORIGINAL_HEIGHT_ATTR, previous.originalHeight);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, previous.originalBoxWidth);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, previous.originalBoxHeight);
   restoreAttribute(element, STUDIO_ORIGINAL_MIN_WIDTH_ATTR, previous.originalMinWidth);
   restoreAttribute(element, STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, previous.originalMinHeight);
   restoreAttribute(element, STUDIO_ORIGINAL_MAX_WIDTH_ATTR, previous.originalMaxWidth);

package/src/components/editor/manualEditsTypes.ts

@@ -16,6 +16,18 @@ export const STUDIO_ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate
 export const STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR = "data-hf-studio-original-inline-translate";
 export const STUDIO_ORIGINAL_WIDTH_ATTR = "data-hf-studio-original-width";
 export const STUDIO_ORIGINAL_HEIGHT_ATTR = "data-hf-studio-original-height";
+/**
+ * The element's laid-out box before a resize draft touched it, in CSS pixels.
+ *
+ * The two attributes above record the element's INLINE width and height so a
+ * reset can put them back, and are empty for the usual case of an element sized
+ * by the stylesheet. That made them useless as a measurement, and the resize
+ * intercept, which needs the original box to work out a scale, fell back to a
+ * hardcoded guess and produced a wildly wrong one. These record the measurement
+ * instead, and restore nothing.
+ */
+export const STUDIO_ORIGINAL_BOX_WIDTH_ATTR = "data-hf-studio-original-box-width";
+export const STUDIO_ORIGINAL_BOX_HEIGHT_ATTR = "data-hf-studio-original-box-height";
 export const STUDIO_ORIGINAL_MIN_WIDTH_ATTR = "data-hf-studio-original-min-width";
 export const STUDIO_ORIGINAL_MIN_HEIGHT_ATTR = "data-hf-studio-original-min-height";
 export const STUDIO_ORIGINAL_MAX_WIDTH_ATTR = "data-hf-studio-original-max-width";
@@ -70,6 +82,8 @@ export interface StudioBoxSizeSnapshot {
   marker: string | null;
   originalWidth: string | null;
   originalHeight: string | null;
+  originalBoxWidth: string | null;
+  originalBoxHeight: string | null;
   originalMinWidth: string | null;
   originalMinHeight: string | null;
   originalMaxWidth: string | null;

package/src/hooks/gsapResizeDropPoint.test.ts

@@ -0,0 +1,394 @@
+// @vitest-environment happy-dom
+/**
+ * The scale-route resize invariant, swept over the shapes a composition
+ * actually produces: WHERE THE USER DROPS THE BOX IS WHERE IT LANDS.
+ *
+ * Each case builds the geometry the browser reports — a CSS box at a layout
+ * position, transformed by GSAP's translate/rotate/scale about the element
+ * centre — drives one resize through the real intercept, then re-renders the
+ * committed scale and the PERSISTED position and checks the box is still on
+ * the drop point. Asserting on the persisted values rather than the live ones
+ * is the point: every bug in this class showed as a correct-looking drop frame
+ * followed by the element sliding to whatever got written to disk.
+ *
+ * The model is calibrated against real `hf-resize-debug` output: the same
+ * inputs reproduce the drop rect, the post-commit rect and the rect width the
+ * browser reported to three decimal places.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { usePlayerStore } from "../player/store/playerStore";
+import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
+  document.body.innerHTML = "";
+});
+
+interface Pose {
+  /** Untransformed CSS box, in px. */
+  box: { w: number; h: number };
+  /** GSAP translate. */
+  pos: { x: number; y: number };
+  /** GSAP scale, per axis. */
+  scale: { x: number; y: number };
+}
+
+/** Layout position of the untransformed box, shared by every pose in a case. */
+const LAYOUT = { left: 120, top: 520 };
+
+/**
+ * The AABB a browser reports for `translate() rotate() scale()` about the
+ * element centre — the same rect `getBoundingClientRect` returns, which is why
+ * a rotated element's anchor is approximate rather than corner-exact.
+ */
+function renderRect(
+  pose: Pose,
+  rotationDeg: number,
+): { x: number; y: number; w: number; h: number } {
+  const rad = (rotationDeg * Math.PI) / 180;
+  const [cos, sin] = [Math.abs(Math.cos(rad)), Math.abs(Math.sin(rad))];
+  const [sw, sh] = [pose.box.w * pose.scale.x, pose.box.h * pose.scale.y];
+  const w = sw * cos + sh * sin;
+  const h = sw * sin + sh * cos;
+  const cx = LAYOUT.left + pose.box.w / 2 + pose.pos.x;
+  const cy = LAYOUT.top + pose.box.h / 2 + pose.pos.y;
+  return { x: cx - w / 2, y: cy - h / 2, w, h };
+}
+
+interface ResizeCase {
+  name: string;
+  /** Untransformed box the stylesheet (or an inline style) gives the element. */
+  box: { w: number; h: number };
+  /** Where the element sat before the gesture. */
+  base: { x: number; y: number };
+  /** Scale already on the element — 1 for a never-resized one. */
+  liveScale: { x: number; y: number };
+  rotation?: number;
+  /** The box the user dragged to, and where the draft put it. */
+  drop: { w: number; h: number; x: number; y: number };
+  /** Sized inline rather than by a stylesheet. */
+  inlineSized?: boolean;
+  /** The tween states scaleX/scaleY rather than the shorthand. */
+  longhandTween?: boolean;
+  /** What already writes this element's position. */
+  positionWrite?: "static-set" | "keyframed-tween" | "none";
+}
+
+function createResizeElement(testCase: ResizeCase): HTMLElement {
+  const el = document.createElement("div");
+  el.id = "clip";
+  if (testCase.inlineSized) {
+    el.setAttribute("data-hf-studio-original-width", `${testCase.box.w}px`);
+    el.setAttribute("data-hf-studio-original-height", `${testCase.box.h}px`);
+  } else {
+    el.setAttribute("data-hf-studio-original-box-width", `${testCase.box.w}`);
+    el.setAttribute("data-hf-studio-original-box-height", `${testCase.box.h}`);
+    el.setAttribute("data-hf-studio-original-width", "");
+    el.setAttribute("data-hf-studio-original-height", "");
+  }
+  return el;
+}
+
+function scaleTween(longhand: boolean): GsapAnimation {
+  const at = (v: number) => (longhand ? { scaleX: v, scaleY: v } : { scale: v });
+  return {
+    id: "#clip-to-0-scale",
+    targetSelector: "#clip",
+    propertyGroup: "scale",
+    method: "to",
+    properties: at(1),
+    position: 0,
+    resolvedStart: 0,
+    duration: 2,
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: at(1) },
+        { percentage: 100, properties: at(1.08) },
+      ],
+    },
+  } as unknown as GsapAnimation;
+}
+
+function positionAnimation(
+  kind: NonNullable<ResizeCase["positionWrite"]>,
+  base: { x: number; y: number },
+) {
+  if (kind === "none") return null;
+  if (kind === "static-set") {
+    return {
+      id: "#clip-set-0-position",
+      targetSelector: "#clip",
+      propertyGroup: "position",
+      method: "set",
+      properties: { x: base.x, y: base.y },
+      position: 0,
+      resolvedStart: 0,
+      duration: 0,
+      global: true,
+    } as unknown as GsapAnimation;
+  }
+  return {
+    id: "#clip-to-0-position",
+    targetSelector: "#clip",
+    propertyGroup: "position",
+    method: "to",
+    properties: { x: base.x, y: base.y },
+    position: 0,
+    resolvedStart: 0,
+    duration: 2,
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: { x: base.x, y: base.y } },
+        { percentage: 100, properties: { x: base.x + 40, y: base.y + 40 } },
+      ],
+    },
+  } as unknown as GsapAnimation;
+}
+
+/** Every x/y a run wrote, in commit order. */
+function persistedPositions(calls: unknown[][]): Array<{ x?: number; y?: number }> {
+  const written: Array<{ x?: number; y?: number }> = [];
+  for (const call of calls) {
+    const mutation = call[1] as {
+      properties?: Record<string, number>;
+      keyframes?: Array<{ properties: Record<string, number> }>;
+      x?: number;
+      y?: number;
+    };
+    const sources = [mutation.properties, ...(mutation.keyframes ?? []).map((k) => k.properties)];
+    if (mutation.x != null || mutation.y != null) written.push({ x: mutation.x, y: mutation.y });
+    for (const source of sources) {
+      if (source && (source.x != null || source.y != null))
+        written.push({ x: source.x, y: source.y });
+    }
+  }
+  return written;
+}
+
+/** The scale the run committed AT THE PLAYHEAD (percentage 0 here). */
+function persistedScale(calls: unknown[][]): { x: number; y: number } | null {
+  let found: { x: number; y: number } | null = null;
+  const take = (source: Record<string, number> | undefined) => {
+    if (!source) return;
+    const x = source.scaleX ?? source.scale;
+    const y = source.scaleY ?? source.scale;
+    if (x != null && y != null) found = { x, y };
+  };
+  for (const call of calls) {
+    const mutation = call[1] as {
+      properties?: Record<string, number>;
+      percentage?: number;
+      keyframes?: Array<{ percentage: number; properties: Record<string, number> }>;
+    };
+    if (mutation.keyframes) {
+      for (const frame of mutation.keyframes) if (frame.percentage === 0) take(frame.properties);
+      continue;
+    }
+    if (mutation.percentage != null && mutation.percentage !== 0) continue;
+    take(mutation.properties);
+  }
+  return found;
+}
+
+async function runCase(testCase: ResizeCase) {
+  const rotation = testCase.rotation ?? 0;
+  const el = createResizeElement(testCase);
+  // What the gesture stamps at drag start, and the draft it leaves applied.
+  el.setAttribute("data-hf-drag-gsap-base-x", `${testCase.base.x}`);
+  el.setAttribute("data-hf-drag-gsap-base-y", `${testCase.base.y}`);
+  el.setAttribute("data-hf-studio-box-size", "true");
+  el.style.width = `${testCase.drop.w}px`;
+  el.style.height = `${testCase.drop.h}px`;
+  document.body.append(el);
+
+  // The live pose the intercept reads and mutates.
+  const live: Pose = {
+    box: { ...testCase.box },
+    pos: { x: testCase.drop.x, y: testCase.drop.y },
+    scale: { ...testCase.liveScale },
+  };
+  el.getBoundingClientRect = () => {
+    // The draft's inline box while it is applied, the real one once cleared.
+    const w = Number.parseFloat(el.style.width) || live.box.w;
+    const h = Number.parseFloat(el.style.height) || live.box.h;
+    const rect = renderRect({ ...live, box: { w, h } }, rotation);
+    return { ...rect, width: rect.w, height: rect.h } as unknown as DOMRect;
+  };
+  const gsapStub = {
+    set: (_target: Element, vars: Record<string, number>) => {
+      if (vars.x != null) live.pos.x = vars.x;
+      if (vars.y != null) live.pos.y = vars.y;
+      if (vars.scaleX != null) live.scale.x = vars.scaleX;
+      if (vars.scaleY != null) live.scale.y = vars.scaleY;
+    },
+    getProperty: (_target: Element, prop: string) =>
+      ({
+        scaleX: live.scale.x,
+        scaleY: live.scale.y,
+        x: live.pos.x,
+        y: live.pos.y,
+        rotation,
+      })[prop] ?? 0,
+  };
+  Object.assign(window, { gsap: gsapStub });
+  const iframe = {
+    contentWindow: { gsap: gsapStub, __timelines: { main: { getChildren: () => [] } } },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+
+  const dropPoint = el.getBoundingClientRect();
+  const position = positionAnimation(testCase.positionWrite ?? "static-set", testCase.base);
+  const animations = [scaleTween(!!testCase.longhandTween), ...(position ? [position] : [])];
+  const commitMutation = vi.fn();
+  usePlayerStore.setState({ currentTime: 0 });
+
+  await tryGsapResizeIntercept(
+    { id: "clip", selector: "#clip", element: el } as DomEditSelection,
+    { width: testCase.drop.w, height: testCase.drop.h },
+    animations,
+    iframe,
+    commitMutation,
+    async () => animations,
+  );
+
+  // Re-render what the file now says: the committed scale, the persisted
+  // position (or the pre-gesture one when nothing was written), the real box.
+  const scale = persistedScale(commitMutation.mock.calls) ?? testCase.liveScale;
+  const writes = persistedPositions(commitMutation.mock.calls);
+  const last = writes.at(-1);
+  const settled: Pose = {
+    box: testCase.box,
+    pos: { x: last?.x ?? testCase.base.x, y: last?.y ?? testCase.base.y },
+    scale,
+  };
+  return {
+    dropPoint: { x: dropPoint.x, y: dropPoint.y, w: dropPoint.width, h: dropPoint.height },
+    settled: renderRect(settled, rotation),
+    writes,
+  };
+}
+
+const CASES: ResizeCase[] = [
+  {
+    name: "shrinks a stylesheet-sized element",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 1.648, y: 1.648 },
+    drop: { w: 320, h: 128, x: 587, y: 235 },
+  },
+  {
+    name: "grows a stylesheet-sized element",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 0.837, y: 0.837 },
+    drop: { w: 1319, h: 527, x: -67, y: -26 },
+  },
+  {
+    name: "resizes an element for the first time (no scale of its own yet)",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 1, y: 1 },
+    drop: { w: 900, h: 360, x: 300, y: 100 },
+  },
+  {
+    name: "resizes a rotated element",
+    box: { w: 630, h: 200 },
+    base: { x: 329, y: 129 },
+    liveScale: { x: 0.94, y: 0.939 },
+    rotation: -8,
+    longhandTween: true,
+    drop: { w: 350, h: 111, x: 609, y: 219 },
+  },
+  {
+    name: "resizes a steeply rotated element",
+    box: { w: 630, h: 252 },
+    base: { x: 17, y: -69 },
+    liveScale: { x: 1.192, y: 1.2 },
+    rotation: -47,
+    longhandTween: true,
+    drop: { w: 491, h: 196, x: 120, y: 40 },
+  },
+  {
+    name: "takes a non-uniform drag",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 1, y: 1 },
+    longhandTween: true,
+    drop: { w: 1200, h: 300, x: -80, y: 60 },
+  },
+  {
+    name: "shrinks almost to nothing",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 1, y: 1 },
+    drop: { w: 13, h: 5, x: 800, y: 320 },
+  },
+  {
+    name: "resizes an inline-sized element",
+    box: { w: 500, h: 252 },
+    base: { x: 100, y: 100 },
+    liveScale: { x: 0.5, y: 0.5 },
+    inlineSized: true,
+    drop: { w: 700, h: 353, x: -40, y: -30 },
+  },
+  {
+    name: "resizes an element with no position write at all",
+    box: { w: 630, h: 252 },
+    base: { x: 0, y: 0 },
+    liveScale: { x: 1, y: 1 },
+    positionWrite: "none",
+    drop: { w: 900, h: 360, x: 140, y: 55 },
+  },
+  {
+    name: "resizes an element whose position is animated",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 1.648, y: 1.648 },
+    positionWrite: "keyframed-tween",
+    drop: { w: 320, h: 128, x: 587, y: 235 },
+  },
+];
+
+describe("a scale resize lands the element on the drop point", () => {
+  for (const testCase of CASES) {
+    it(testCase.name, async () => {
+      const { dropPoint, settled } = await runCase(testCase);
+      // 1px: the commit rounds position to whole pixels and scale to 3dp.
+      expect(settled.x).toBeCloseTo(dropPoint.x, 0);
+      expect(settled.y).toBeCloseTo(dropPoint.y, 0);
+      expect(settled.w).toBeCloseTo(dropPoint.w, 0);
+      expect(settled.h).toBeCloseTo(dropPoint.h, 0);
+    });
+  }
+});
+
+/**
+ * Two drags in a row on the same element. The first bug in this class only
+ * showed on the second one, because the wrong value the first wrote then
+ * counted as the element's live pose.
+ */
+it("holds the drop point across a second drag", async () => {
+  const first = await runCase({
+    name: "first",
+    box: { w: 630, h: 252 },
+    base: { x: 489, y: 195 },
+    liveScale: { x: 1, y: 1 },
+    drop: { w: 900, h: 360, x: 300, y: 100 },
+  });
+  const settledPos = first.writes.at(-1);
+  document.body.innerHTML = "";
+  const second = await runCase({
+    name: "second",
+    box: { w: 630, h: 252 },
+    base: { x: settledPos?.x ?? 489, y: settledPos?.y ?? 195 },
+    // What the first drag committed: 900/630.
+    liveScale: { x: 1.429, y: 1.429 },
+    drop: { w: 420, h: 168, x: 640, y: 260 },
+  });
+  expect(second.settled.x).toBeCloseTo(second.dropPoint.x, 0);
+  expect(second.settled.y).toBeCloseTo(second.dropPoint.y, 0);
+  expect(second.settled.w).toBeCloseTo(second.dropPoint.w, 0);
+});