@hyperframes/studio 0.7.99 → 0.7.101

package/src/hooks/gsapResizeGeometrySweep.test.ts

@@ -0,0 +1,289 @@
+// @vitest-environment happy-dom
+/**
+ * What the resize COMMITS, checked as geometry rather than as structure.
+ *
+ * The structural sweep beside this one proves a resize never addresses a
+ * missing animation and never leaves a tween spanning two property groups.
+ * Neither says the box ends up the size the user dragged it to, which is the
+ * thing they are actually looking at.
+ *
+ * The invariant is split by who owns the drop point, because the two halves are
+ * genuinely different jobs:
+ *
+ *   - The committed size or scale must reproduce the RENDERED box the user
+ *     dropped, whatever rotation is on the element. This is the resize's job in
+ *     every route.
+ *   - When the resize reports `ownsDragOffset`, the box must also land on the
+ *     drop POINT, because it has taken responsibility for the position. When it
+ *     does not, position is the drag's job and is not asserted here.
+ *
+ * Rotation is the reason this exists. The committed scale is worked out from
+ * the element's CSS box, and a rotated element's rendered box is not its CSS
+ * box — so the two are only equal if the drafted size is in CSS-box terms all
+ * the way through. A sweep across rotations is what tells us it is.
+ */
+import { afterEach, expect, it, vi } from "vitest";
+import { classifyTweenPropertyGroup } from "@hyperframes/core/gsap-parser";
+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 = "";
+});
+
+const LAYOUT = { left: 120, top: 520 };
+
+interface Pose {
+  box: { w: number; h: number };
+  pos: { x: number; y: number };
+  scale: { x: number; y: number };
+}
+
+/** The AABB a browser reports for `translate() rotate() scale()` about the centre. */
+function renderRect(pose: Pose, rotationDeg: 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 };
+}
+
+type Props = Record<string, number>;
+
+function tween(id: string, properties: Props, duration: number): GsapAnimation {
+  return {
+    id,
+    targetSelector: "#el",
+    propertyGroup: classifyTweenPropertyGroup(properties),
+    method: "to",
+    properties,
+    position: 0,
+    resolvedStart: 0,
+    duration,
+    ...(duration === 0 ? { extras: { immediateRender: "__raw:true" } } : {}),
+  } as unknown as GsapAnimation;
+}
+
+interface Case {
+  name: string;
+  /** The element's untransformed CSS box. */
+  box: { w: number; h: number };
+  /** Where it sat, and at what scale, before the gesture. */
+  base: { x: number; y: number };
+  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 };
+  animations: () => GsapAnimation[];
+  /** Whether this route takes responsibility for where the box lands. */
+  settles: boolean;
+}
+
+const ROTATIONS = [0, -8, 45, -47, 90, 180];
+
+/**
+ * The routes a resize can take, and whether each SETTLES the drop point.
+ *
+ * Only a committed scale moves the box: it renders about the element centre
+ * rather than the dragged corner, so the route measures the difference and
+ * writes the position. Every other route commits width and height and moves
+ * nothing, which leaves the anchor to the drag. An element whose scale is an
+ * instant hold has a scale tween and still commits size, so it belongs with
+ * the size routes here however it looks from the animation list.
+ */
+const ROUTES = {
+  "scale tween": { animations: () => [tween("#el-scale", { scale: 1 }, 2)], settles: true },
+  "scale longhands": {
+    animations: () => [tween("#el-scale", { scaleX: 1, scaleY: 1 }, 2)],
+    settles: true,
+  },
+  "scale instant hold": { animations: () => [tween("#el-scale", { scale: 1 }, 0)], settles: false },
+  "size tween": {
+    animations: () => [tween("#el-size", { width: 630, height: 408 }, 2)],
+    settles: false,
+  },
+  "size instant hold": {
+    animations: () => [tween("#el-size", { width: 630, height: 408 }, 0)],
+    settles: false,
+  },
+} as const;
+
+function buildCases(): Case[] {
+  const cases: Case[] = [];
+  for (const [routeName, route] of Object.entries(ROUTES)) {
+    for (const rotation of ROTATIONS) {
+      for (const [dropName, drop] of Object.entries({
+        shrink: { w: 326, h: 213, x: 60, y: 40 },
+        grow: { w: 980, h: 640, x: -120, y: -90 },
+        "near zero": { w: 12, h: 8, x: 200, y: 160 },
+        "aspect flip": { w: 900, h: 90, x: 10, y: 10 },
+      })) {
+        cases.push({
+          name: `${routeName} / rotation ${rotation} / ${dropName}`,
+          box: { w: 630, h: 408 },
+          base: { x: 40, y: 25 },
+          liveScale: { x: 1, y: 1 },
+          rotation,
+          drop,
+          animations: route.animations,
+          settles: route.settles,
+        });
+      }
+    }
+  }
+  return cases;
+}
+
+const CASES = buildCases();
+
+/** The scale and size the run committed, read at the playhead. */
+function committed(calls: unknown[][]) {
+  let scale: { x: number; y: number } | null = null;
+  let size: { w: number; h: number } | null = null;
+  const take = (source: Props | undefined) => {
+    if (!source) return;
+    const sx = source.scaleX ?? source.scale;
+    const sy = source.scaleY ?? source.scale;
+    if (sx != null && sy != null) scale = { x: sx, y: sy };
+    if (source.width != null && source.height != null) {
+      size = { w: source.width, h: source.height };
+    }
+  };
+  for (const call of calls) {
+    const mutation = call[1] as {
+      properties?: Props;
+      percentage?: number;
+      keyframes?: Array<{ percentage: number; properties: Props }>;
+    };
+    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 { scale, size };
+}
+
+/** The element as the gesture leaves it: drafted box, base pose, live pose. */
+function mountCase(testCase: Case, live: Pose) {
+  const el = document.createElement("div");
+  el.id = "el";
+  el.setAttribute("data-hf-studio-original-box-width", String(testCase.box.w));
+  el.setAttribute("data-hf-studio-original-box-height", String(testCase.box.h));
+  el.setAttribute("data-hf-drag-gsap-base-x", String(testCase.base.x));
+  el.setAttribute("data-hf-drag-gsap-base-y", String(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);
+
+  el.getBoundingClientRect = () => {
+    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 } }, testCase.rotation);
+    return { ...rect, width: rect.w, height: rect.h } as unknown as DOMRect;
+  };
+  const gsap = {
+    set: (_target: Element, vars: Props) => {
+      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: testCase.rotation,
+      })[prop] ?? 0,
+  };
+  Object.assign(window, { gsap });
+  const iframe = {
+    contentWindow: { gsap, __timelines: { main: { getChildren: () => [] } } },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+  return { el, iframe };
+}
+
+/** One run: mount the case, drive the intercept, hand the result to the judge. */
+async function runCase(testCase: Case): Promise<string[]> {
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
+  const live: Pose = {
+    box: { ...testCase.box },
+    pos: { x: testCase.drop.x, y: testCase.drop.y },
+    scale: { ...testCase.liveScale },
+  };
+  const { el, iframe } = mountCase(testCase, live);
+  const dropped = el.getBoundingClientRect();
+  const animations = testCase.animations();
+  const commitMutation = vi.fn();
+
+  const outcome = await tryGsapResizeIntercept(
+    { id: "el", selector: "#el", element: el } as DomEditSelection,
+    { width: testCase.drop.w, height: testCase.drop.h },
+    animations,
+    iframe,
+    commitMutation as never,
+    async () => animations,
+  );
+
+  const { scale, size } = committed(commitMutation.mock.calls);
+  const settled = renderRect(
+    { box: size ?? testCase.box, pos: { ...live.pos }, scale: scale ?? testCase.liveScale },
+    testCase.rotation,
+  );
+  const owns = outcome.status === "persisted" && outcome.ownsDragOffset === true;
+  return judge(testCase, dropped, settled, owns);
+}
+
+/**
+ * What the run got wrong, if anything. 1px: position rounds to whole pixels and
+ * scale keeps three decimals.
+ */
+function judge(
+  testCase: Case,
+  dropped: DOMRect,
+  settled: { x: number; y: number; w: number; h: number },
+  owns: boolean,
+): string[] {
+  const off = (a: number, b: number) => Math.abs(a - b) > 1;
+  if (off(settled.w, dropped.width) || off(settled.h, dropped.height)) {
+    return [
+      `${testCase.name} — box ${settled.w.toFixed(1)}x${settled.h.toFixed(1)}` +
+        `, dropped ${dropped.width.toFixed(1)}x${dropped.height.toFixed(1)}`,
+    ];
+  }
+  // Claiming the drop point is only honest for the routes that settle it. The
+  // size routes commit width and height and move nothing, so the drag still owns
+  // the anchor — and a run that claims otherwise makes the caller withhold an
+  // offset nobody writes. The position check below cannot see that on its own:
+  // the fixture's live pose starts at the drop, which is where the gesture
+  // leaves it, so a size route trivially "lands" there.
+  if (owns !== testCase.settles) {
+    return [`${testCase.name} — ownsDragOffset ${owns}, expected ${testCase.settles}`];
+  }
+  if (owns && (off(settled.x, dropped.x) || off(settled.y, dropped.y))) {
+    return [
+      `${testCase.name} — landed ${settled.x.toFixed(1)},${settled.y.toFixed(1)}` +
+        `, dropped ${dropped.x.toFixed(1)},${dropped.y.toFixed(1)}`,
+    ];
+  }
+  return [];
+}
+
+it(`sweeps ${CASES.length} rotations and drops for the box the user dropped`, async () => {
+  const failures: string[] = [];
+  for (const testCase of CASES) failures.push(...(await runCase(testCase)));
+  expect(failures).toEqual([]);
+});

package/src/hooks/gsapResizeIntercept.test.ts

@@ -98,7 +98,7 @@ it("updates a duration-zero size hold in place instead of converting it to keyfr
     commitMutation,
   );
 
-  expect(handled).toEqual({ status: "persisted" });
+  expect(handled).toMatchObject({ status: "persisted" });
   expect(commitMutation).toHaveBeenCalledTimes(1);
   expect(commitMutation.mock.calls[0]![1]).toEqual({
     type: "update-properties",
@@ -246,7 +246,7 @@ async function runResize(
     commitMutation as never,
     async () => [keyframedScaleFixture()],
   );
-  expect(handled).toEqual({ status: "persisted" });
+  expect(handled).toMatchObject({ status: "persisted" });
   return committed;
 }
 

package/src/hooks/gsapResizeIntercept.ts

@@ -149,7 +149,20 @@ export async function tryGsapResizeIntercept(
   if (!anim || isInstantHold(anim)) {
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
-    const sizeSet = anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element);
+    // A scale hold is not a size hold.
+    //
+    // `anim` is the tween resolved for THIS resize's group, and for a
+    // scale-driven element that is the one carrying `scale`. Handing it to the
+    // size commit wrote `width` and `height` into it, leaving one tween that
+    // spans two property groups — which the parser then classifies as neither,
+    // so it loses its group suffix and its id along with it. Every later edit
+    // of that element looked for a scale tween and a size tween, found no
+    // group at all, and the element became uneditable: "animation not found".
+    // Size goes to a size hold of its own, and the scale hold is left alone.
+    const sizeSet =
+      resizeGroup === "size"
+        ? (anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element))
+        : findSizeSetAnimation(workingAnimations, sel, selection.element);
 
     // If the element is animated (has a real tween, not just a static size
     // hold), keyframe the size at the playhead so other keyframes keep theirs —
@@ -239,7 +252,14 @@ export async function tryGsapResizeIntercept(
     // and the longhands win: the resize commits correctly and then does
     // nothing, and the element snaps back to its old size on release. The
     // tween never mixes the two forms in either direction.
-    nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
+    //
+    // "Agree" is measured in PIXELS, not in scale. A fixed 0.01 of scale is
+    // invisible on a 40px box and two pixels of height on a 408px one, so a
+    // free drag whose axes happened to land within it silently gave back a box
+    // shorter than the one dropped. The question is only ever whether using one
+    // value for both axes would move an edge, so ask that.
+    const uniformDrift = Math.abs(newScaleX - newScaleY) * cssH;
+    nonUniformScale = uniformDrift > 0.5;
     useScaleLonghands = nonUniformScale || tweenUsesScaleLonghands(anim);
     resizeProps = useScaleLonghands
       ? { scaleX: newScaleX, scaleY: newScaleY }
@@ -290,10 +310,13 @@ export async function tryGsapResizeIntercept(
   // ponytail: for a 3D-rotated element the rects are AABBs, so the anchor is
   // approximate rather than corner-exact.
   // fallow-ignore-next-line complexity
-  const finalizeScaleResizeCommit = async () => {
-    if (!scaleDraftEl) return;
+  const finalizeScaleResizeCommit = async (): Promise<boolean> => {
+    // Only the scale route captures the element, so a null draft means this
+    // resize took the size route and never moved anything: the drop point is
+    // the drag's to settle, not ours.
+    if (!scaleDraftEl) return false;
     clearStudioBoxSize(scaleDraftEl);
-    if (!scaleDraftDropPoint || !selector) return;
+    if (!scaleDraftDropPoint || !selector) return false;
     // Put the committed scale on the live element before measuring.
     //
     // This step reads where the commit lands the box and shifts the position
@@ -331,10 +354,12 @@ export async function tryGsapResizeIntercept(
     setElementGsapPosition(scaleDraftEl, base.x, base.y);
     const post = scaleDraftEl.getBoundingClientRect();
     const residual = { x: scaleDraftDropPoint.x - post.x, y: scaleDraftDropPoint.y - post.y };
-    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return;
+    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return false;
     if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
       logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base });
-      return;
+      // Settled, with nothing to write. Still ours: forwarding the drag offset
+      // on top would move the box off the point it is already sitting on.
+      return true;
     }
     // The ONE corrected position — rounded once so the live runtime and the
     // persisted file agree exactly (commitStaticGsapPosition composes the same
@@ -385,13 +410,14 @@ export async function tryGsapResizeIntercept(
         commitMutation,
         fetchAnimations: fetchFallbackAnimations,
       });
-      return;
+      return true;
     }
     const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
     await commitStaticGsapPosition(selection, delta, base, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,
     });
+    return true;
   };
 
   // With auto-keyframe off (#1808), `anim` is already a real (non-"set")
@@ -408,8 +434,7 @@ export async function tryGsapResizeIntercept(
       { commitMutation, fetchAnimations: fetchFallbackAnimations },
       "Resize animation",
     );
-    await finalizeScaleResizeCommit();
-    return { status: "persisted" };
+    return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
 
   const ct = usePlayerStore.getState().currentTime;
@@ -520,8 +545,7 @@ export async function tryGsapResizeIntercept(
         softReload: true,
       },
     );
-    await finalizeScaleResizeCommit();
-    return { status: "persisted" };
+    return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
 
   const SIZE_PROPS = new Set(["width", "height"]);
@@ -542,8 +566,7 @@ export async function tryGsapResizeIntercept(
     },
     { label: `Resize (keyframe ${pct}%)`, softReload: true },
   );
-  await finalizeScaleResizeCommit();
-  return { status: "persisted" };
+  return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
 }
 
 // ── Rotation intercept ────────────────────────────────────────────────────

package/src/hooks/gsapResizeMixedTween.test.ts

@@ -0,0 +1,168 @@
+// @vitest-environment happy-dom
+/**
+ * Resizing `#card` in the shipped playground fails with "animation not found".
+ *
+ * The element carries five tweens, all at position 0 and all duration 0, and
+ * one of them mixes `scale` with `width`/`height`. That spans two property
+ * groups, so the parser gives it no group at all and the bare id `#card-to-0` —
+ * which means the resize finds neither a scale tween nor a size tween and has
+ * to split the mixed one apart before it can commit.
+ *
+ * This drives the real intercept against that exact set, with a server stand-in
+ * that answers the way the real one does: an id it cannot find is a 404. Any id
+ * the intercept sends that is not in the list it was last handed reproduces the
+ * failure.
+ */
+import { afterEach, 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 = "";
+});
+
+function hold(
+  id: string,
+  group: string | undefined,
+  properties: Record<string, number>,
+): GsapAnimation {
+  return {
+    id,
+    targetSelector: "#card",
+    propertyGroup: group,
+    method: "to",
+    properties,
+    position: 0,
+    resolvedStart: 0,
+    duration: 0,
+    extras: { immediateRender: "__raw:true" },
+  } as unknown as GsapAnimation;
+}
+
+/** `#card` as the playground actually holds it. */
+function cardAnimations(): GsapAnimation[] {
+  return [
+    hold("#card-to-0-other", "other", { rotationY: -540, rotationX: 720, _auto: 0 }),
+    hold("#card-to-0-rotation", "rotation", { rotation: 720 }),
+    hold("#card-to-0", undefined, { scale: 1.2, width: 326, height: 213 }),
+    hold("#card-to-0-position", "position", { x: -1180, y: 128 }),
+    hold("#card-to-0-other-2", "other", { z: 50 }),
+  ];
+}
+
+it("never sends an animation id the server does not have", async () => {
+  const el = document.createElement("div");
+  el.id = "card";
+  el.setAttribute("data-hf-studio-original-box-width", "326");
+  el.setAttribute("data-hf-studio-original-box-height", "213");
+  document.body.append(el);
+
+  // The server's view of the file, and its 404.
+  let current = cardAnimations();
+  const rejected: string[] = [];
+  const sent: string[] = [];
+  const commitMutation = vi.fn(async (_selection: unknown, mutation: Record<string, unknown>) => {
+    const animationId = mutation.animationId as string | undefined;
+    if (animationId) {
+      sent.push(`${String(mutation.type)}:${animationId}`);
+      if (!current.some((a) => a.id === animationId)) {
+        rejected.push(animationId);
+        throw new Error("animation not found");
+      }
+    }
+    // Splitting the mixed tween is what the real server does with it.
+    if (mutation.type === "split-into-property-groups") {
+      current = [
+        hold("#card-to-0-other", "other", { rotationY: -540, rotationX: 720, _auto: 0 }),
+        hold("#card-to-0-rotation", "rotation", { rotation: 720 }),
+        hold("#card-to-0-position", "position", { x: -1180, y: 128 }),
+        hold("#card-to-0-other-2", "other", { z: 50 }),
+        hold("#card-to-0-scale", "scale", { scale: 1.2 }),
+        hold("#card-to-0-size", "size", { width: 326, height: 213 }),
+      ];
+    }
+  });
+
+  const selection = { id: "card", selector: "#card", element: el } as DomEditSelection;
+  await tryGsapResizeIntercept(
+    selection,
+    { width: 500, height: 320 },
+    cardAnimations(),
+    null,
+    commitMutation as never,
+    async () => current,
+  );
+
+  expect(rejected).toEqual([]);
+  expect(sent).not.toHaveLength(0);
+});
+
+/**
+ * How `#card` got into that state: a resize wrote `width`/`height` into the
+ * tween that carried `scale`.
+ *
+ * One tween spanning two property groups is classified as neither, so it loses
+ * its group suffix and its id with it — and every later edit of the element
+ * looks for a scale tween and a size tween, finds no group at all, and fails.
+ */
+it("does not write size into the tween that carries scale", async () => {
+  const el = document.createElement("div");
+  el.id = "card";
+  el.setAttribute("data-hf-studio-original-box-width", "630");
+  el.setAttribute("data-hf-studio-original-box-height", "408");
+  document.body.append(el);
+
+  // The element before the damage: one instant scale hold, nothing else.
+  const scaleHold = hold("#card-to-0-scale", "scale", { scale: 1.2 });
+  const commitMutation = vi.fn();
+
+  await tryGsapResizeIntercept(
+    { id: "card", selector: "#card", element: el } as DomEditSelection,
+    { width: 326, height: 213 },
+    [scaleHold],
+    null,
+    commitMutation as never,
+    async () => [scaleHold],
+  );
+
+  const intoScaleHold = commitMutation.mock.calls
+    .map((call) => call[1] as { animationId?: string; properties?: Record<string, number> })
+    .filter((mutation) => mutation.animationId === "#card-to-0-scale")
+    .flatMap((mutation) => Object.keys(mutation.properties ?? {}));
+
+  expect(intoScaleHold).not.toContain("width");
+  expect(intoScaleHold).not.toContain("height");
+});
+
+/**
+ * Whether the caller must persist the drag offset is the resize's answer to
+ * give, not something to infer from the element's tweens.
+ *
+ * An element whose scale is an instant hold HAS a scale-group tween and still
+ * commits width/height. Guessing from the tweens withheld an offset nobody had
+ * written, and the element snapped back to its authored position on every drag.
+ */
+it("leaves the drag offset to the caller when it commits size, not scale", async () => {
+  const el = document.createElement("div");
+  el.id = "card";
+  el.setAttribute("data-hf-studio-original-box-width", "630");
+  el.setAttribute("data-hf-studio-original-box-height", "408");
+  document.body.append(el);
+
+  const scaleHold = hold("#card-to-0-scale", "scale", { scale: 1.2 });
+  const outcome = await tryGsapResizeIntercept(
+    { id: "card", selector: "#card", element: el } as DomEditSelection,
+    { width: 326, height: 213 },
+    [scaleHold],
+    null,
+    vi.fn() as never,
+    async () => [scaleHold],
+  );
+
+  expect(outcome.status).toBe("persisted");
+  expect(outcome.status === "persisted" && outcome.ownsDragOffset).not.toBe(true);
+});