@hyperframes/studio 0.7.51 → 0.7.53

package/src/components/editor/domEditOverlayCrop.ts

@@ -28,15 +28,21 @@ export function cropRectFromInsets(
   };
 }
 
-/** Current inset crop of an element (inline first, computed fallback), or zeros. */
-export function readElementCropInsets(element: HTMLElement): ClipPathInsetSides & {
-  radius: number;
-} {
+/**
+ * Current inset crop of an element (inline first, computed fallback).
+ * Zeros = no clip (croppable, nothing cropped yet). `null` = the element
+ * carries a clip-path this tool cannot represent (circle/polygon/non-px
+ * inset) — croppers must not lift, edit, or restore it, or the clip gets
+ * silently replaced or destroyed on deselect.
+ */
+export function readElementCropInsets(
+  element: HTMLElement,
+): (ClipPathInsetSides & { radius: number }) | null {
   const inline = element.style.getPropertyValue("clip-path").trim();
   const value =
     inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
-  const parsed = parseInsetClipPathSides(value === "none" ? "" : value);
-  return parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+  if (!value || value === "none") return { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+  return parseInsetClipPathSides(value);
 }
 
 export interface CropInsetDragInput {
@@ -111,6 +117,96 @@ export function hugRectForElement(
   element: HTMLElement,
 ): CropScreenRect {
   const insets = readElementCropInsets(element);
-  if (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0) return rect;
+  // Uneditable clip (null) can't be hugged — show the full element rect.
+  if (!insets || (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0))
+    return rect;
   return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
 }
+
+/**
+ * The element's own (unrotated) box in overlay space, plus the rotation to
+ * apply when drawing crop UI over it. `clip-path` applies in the element's
+ * LOCAL frame — before its transform — so the crop dim/outline/handles must be
+ * drawn rotated with the element, not on its axis-aligned bounding box: an
+ * AABB-drawn dim visually "straightens" a rotated element by masking its
+ * corners (the crop window looks axis-aligned while the pixels are not).
+ *
+ * scaleX/scaleY are overlay px per element CSS px (element's own scale × the
+ * editor zoom), so element-space insets map straight onto the frame. Assumes
+ * the default 50%/50% transform-origin (the GSAP/studio convention). 3D or
+ * unparseable transforms fall back to the axis-aligned frame (angle 0, AABB
+ * box) — the pre-existing presentation.
+ */
+export interface CropFrame {
+  angleDeg: number;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scaleX: number;
+  scaleY: number;
+}
+
+export function readElementCropFrame(
+  element: HTMLElement,
+  overlayRect: CropScreenRect & { editScaleX: number; editScaleY: number },
+): CropFrame {
+  const editX = overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
+  const editY = overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
+  const aabb: CropFrame = {
+    angleDeg: 0,
+    left: overlayRect.left,
+    top: overlayRect.top,
+    width: overlayRect.width,
+    height: overlayRect.height,
+    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;
+  if (elScaleX <= 0 || elScaleY <= 0) return aabb;
+  const angleDeg = (Math.atan2(b!, a!) * 180) / Math.PI;
+  const scaleX = elScaleX * editX;
+  const scaleY = elScaleY * editY;
+  const width = element.offsetWidth * scaleX;
+  const height = element.offsetHeight * scaleY;
+  if (!(width > 0) || !(height > 0)) return aabb;
+  // Rotation about the default center keeps the center invariant, so the
+  // local box is centered on the AABB center.
+  const cx = overlayRect.left + overlayRect.width / 2;
+  const cy = overlayRect.top + overlayRect.height / 2;
+  return {
+    angleDeg,
+    left: cx - width / 2,
+    top: cy - height / 2,
+    width,
+    height,
+    scaleX,
+    scaleY,
+  };
+}
+
+/** Rotate a screen-space pointer delta into the element's local frame. */
+export function rotateDeltaIntoFrame(
+  deltaX: number,
+  deltaY: number,
+  angleDeg: number,
+): { deltaX: number; deltaY: number } {
+  if (angleDeg === 0) return { deltaX, deltaY };
+  const rad = (-angleDeg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return { deltaX: deltaX * cos - deltaY * sin, deltaY: deltaX * sin + deltaY * cos };
+}

package/src/components/editor/domEditOverlayGestures.ts

@@ -39,6 +39,25 @@ export interface GestureState {
   actualRotation: number;
   editScaleX: number;
   editScaleY: number;
+  // Rendered-per-CSS-pixel factor of the element itself at gesture start (a GSAP
+  // scale() transform makes this > 1) — the resize draft divides by it so the box
+  // follows the cursor instead of overshooting by the live scale.
+  contentScaleX: number;
+  contentScaleY: number;
+  // Resize anchor pinning: with a live scale transform, growing the CSS box
+  // shifts the rendered box (scaling happens around the element center), so the
+  // un-dragged corner creeps during the draft. The move handler measures the
+  // gesture-start top-left drift each frame and counters it through the GSAP
+  // position channel; the pin accumulates so the correction converges.
+  // Present only on resize gestures.
+  resizeAnchor?: {
+    anchorX: number;
+    anchorY: number;
+    baseGsapX: number;
+    baseGsapY: number;
+    pinX: number;
+    pinY: number;
+  };
   manualEditDragToken?: string;
   snapContext?: SnapContext;
   lastSnappedDx?: number;
@@ -77,21 +96,31 @@ export function resolveDomEditResizeGesture(input: {
   actualHeight: number;
   scaleX: number;
   scaleY: number;
+  // Rendered-per-CSS-pixel factor of the element itself (its live GSAP scale).
+  // The CSS width/height the draft writes get multiplied by this on screen, so
+  // the cursor delta must be divided by it — otherwise the box outruns the
+  // pointer on a rescaled element and snaps back on release. Defaults to 1.
+  contentScaleX?: number;
+  contentScaleY?: number;
   dx: number;
   dy: number;
   uniform: boolean;
 }): { overlayWidth: number; overlayHeight: number; width: number; height: number } {
   const scaleX = input.scaleX > 0 ? input.scaleX : 1;
   const scaleY = input.scaleY > 0 ? input.scaleY : 1;
+  const contentScaleX =
+    input.contentScaleX !== undefined && input.contentScaleX > 0 ? input.contentScaleX : 1;
+  const contentScaleY =
+    input.contentScaleY !== undefined && input.contentScaleY > 0 ? input.contentScaleY : 1;
 
   if (input.uniform) {
-    const deltaX = input.dx / scaleX;
-    const deltaY = input.dy / scaleY;
+    const deltaX = input.dx / (scaleX * contentScaleX);
+    const deltaY = input.dy / (scaleY * contentScaleY);
     const delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
     const side = Math.max(1, Math.max(input.actualWidth, input.actualHeight) + delta);
     return {
-      overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX),
-      overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY),
+      overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX * contentScaleX),
+      overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY * contentScaleY),
       width: side,
       height: side,
     };
@@ -100,8 +129,8 @@ export function resolveDomEditResizeGesture(input: {
   return {
     overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, input.originWidth + input.dx),
     overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, input.originHeight + input.dy),
-    width: Math.max(1, input.actualWidth + input.dx / scaleX),
-    height: Math.max(1, input.actualHeight + input.dy / scaleY),
+    width: Math.max(1, input.actualWidth + input.dx / (scaleX * contentScaleX)),
+    height: Math.max(1, input.actualHeight + input.dy / (scaleY * contentScaleY)),
   };
 }
 

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -2,6 +2,7 @@
  * Gesture-begin functions: startGroupDrag and startGesture.
  * These are pure "start a new gesture" operations — no draft rect updates.
  */
+import { readElementGsapNumber } from "../../utils/elementGsap";
 import { type DomEditSelection } from "./domEditing";
 import {
   createManualOffsetDragMember,
@@ -120,8 +121,37 @@ export function startGesture(
   // `--hf-studio-rotation` CSS var (old projects), so a rotate gesture starts from the
   // element's actual visual angle and commits an absolute angle to the timeline.
   const rotation = { angle: readGsapRotation(sel.element) + readStudioRotation(sel.element).angle };
-  const actualWidth = size.width > 0 ? size.width : rect.width / rect.editScaleX;
-  const actualHeight = size.height > 0 ? size.height : rect.height / rect.editScaleY;
+  // The draft writes CSS width/height, so the resize base must be the CSS
+  // layout size. offsetWidth/Height are transform-free; the overlay-rect
+  // fallback (rect / editScale) includes the element's own GSAP scale and
+  // would make a rescaled element's draft grow from the RENDERED size.
+  const layoutWidth = sel.element.offsetWidth;
+  const layoutHeight = sel.element.offsetHeight;
+  const actualWidth =
+    size.width > 0 ? size.width : layoutWidth > 0 ? layoutWidth : rect.width / rect.editScaleX;
+  const actualHeight =
+    size.height > 0 ? size.height : layoutHeight > 0 ? layoutHeight : rect.height / rect.editScaleY;
+  // overlay rect = cssSize x contentScale x editScale, so the element's own
+  // render factor (its GSAP scale) falls out of the measured rect. 1 when
+  // unscaled or unmeasurable.
+  const rawContentScaleX = rect.width / (rect.editScaleX * actualWidth);
+  const rawContentScaleY = rect.height / (rect.editScaleY * actualHeight);
+  const contentScaleX =
+    Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
+  const contentScaleY =
+    Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
+  let resizeAnchor: GestureState["resizeAnchor"];
+  if (kind === "resize") {
+    const startBcr = sel.element.getBoundingClientRect();
+    resizeAnchor = {
+      anchorX: startBcr.x,
+      anchorY: startBcr.y,
+      baseGsapX: readElementGsapNumber(sel.element, "x") ?? 0,
+      baseGsapY: readElementGsapNumber(sel.element, "y") ?? 0,
+      pinX: 0,
+      pinY: 0,
+    };
+  }
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken: string | undefined;
   let pathOffsetMember: ManualOffsetDragMember | undefined;
@@ -184,6 +214,9 @@ export function startGesture(
     actualRotation: rotation.angle,
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
+    contentScaleX,
+    contentScaleY,
+    resizeAnchor,
     manualEditDragToken,
     snapContext,
   };

package/src/components/editor/domEditingDom.ts

@@ -3,6 +3,7 @@
  * selector utilities, and composition source resolution.
  * No imports from other domEditing* modules — safe to import from anywhere.
  */
+import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
 import { CURATED_STYLE_PROPERTIES } from "./domEditingTypes";
 
 // ─── Type guard ───────────────────────────────────────────────────────────────
@@ -28,8 +29,6 @@ export function isTextBearingTag(tagName: string): boolean {
   return ["div", "span", "p", "strong", "h1", "h2", "h3", "h4", "h5", "h6"].includes(tagName);
 }
 
-const COLOR_GRADING_SOURCE_HIDDEN_ATTR = "data-hf-color-grading-source-hidden";
-
 export function isElementVisibleThroughAncestors(el: HTMLElement): boolean {
   const win = el.ownerDocument.defaultView;
   if (!win) return true;

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -4,6 +4,7 @@
  * Owns: onPointerMove, onPointerUp, clearPointerState.
  * startGesture and startGroupDrag live in domEditOverlayStartGesture.ts.
  */
+import { setElementGsapPosition } from "../../utils/elementGsap";
 import type { RefObject } from "react";
 import { type DomEditSelection } from "./domEditing";
 import {
@@ -53,6 +54,13 @@ import {
   resolveEquidistanceGuides,
   SNAP_THRESHOLD_PX,
 } from "./snapEngine";
+/** Undo the resize draft's anchor pin: snap GSAP x/y back to the gesture base. */
+function restoreResizeAnchorPin(element: HTMLElement, g: GestureState): void {
+  const anchor = g.resizeAnchor;
+  if (!anchor || (anchor.pinX === 0 && anchor.pinY === 0)) return;
+  setElementGsapPosition(element, anchor.baseGsapX, anchor.baseGsapY);
+}
+
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
   const setDraftOverlayRect = (next: OverlayRect) => {
     opts.setOverlayRect(next);
@@ -175,7 +183,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
+      const draftViaGsap = applyRotationDraftViaGsap(sel.element, rotated.angle);
+      if (!draftViaGsap) {
         applyStudioRotationDraft(sel.element, rotated);
       }
       return;
@@ -278,12 +287,35 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualHeight: g.actualHeight,
         scaleX: g.editScaleX,
         scaleY: g.editScaleY,
+        contentScaleX: g.contentScaleX,
+        contentScaleY: g.contentScaleY,
         dx,
         dy,
         uniform: e.shiftKey,
       });
       applyStudioBoxSizeDraft(sel.element, nextSize);
-
+      // Pin the gesture anchor (top-left): with a live scale transform, the CSS
+      // size change shifts the rendered box around the element center. Measure
+      // the drift of the gesture-start corner and counter it via GSAP x/y —
+      // accumulated onto the previous pin so the correction converges instead
+      // of oscillating. The release-time position compensation re-measures the
+      // drop, so the pin composes with the commit.
+      const anchor = g.resizeAnchor;
+      if (anchor) {
+        const pinned = sel.element.getBoundingClientRect();
+        const nextPinX = anchor.pinX + (anchor.anchorX - pinned.x);
+        const nextPinY = anchor.pinY + (anchor.anchorY - pinned.y);
+        if (
+          setElementGsapPosition(
+            sel.element,
+            anchor.baseGsapX + nextPinX,
+            anchor.baseGsapY + nextPinY,
+          )
+        ) {
+          anchor.pinX = nextPinX;
+          anchor.pinY = nextPinY;
+        }
+      }
       // Re-read BCR after applying dimensions. For elements with a GSAP
       // scale transform and centered transform-origin the visual top-left
       // drifts and the visual size diverges from the raw CSS size, so BCR
@@ -382,6 +414,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
 
     if (g.kind === "resize" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
+      restoreResizeAnchorPin(sel.element, g);
       restoreStudioBoxSize(sel.element, g.initialBoxSize);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
       if (box) {
@@ -411,7 +444,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           restoreStudioRotation(sel.element, g.initialRotation);
         }
       };
-      if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
+      const rotationChanged = hasDomEditRotationChanged(g.actualRotation, finalRotation.angle);
+      if (!rotationChanged) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
@@ -422,14 +456,17 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         applyStudioRotation(sel.element, finalRotation);
       }
       void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation))
-        .catch(() => {
+        .catch((error) => {
+          console.error("rotate commit failed", error);
           if (
             g.manualEditDragToken &&
             isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
           )
             restoreRotation();
         })
-        .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+        .finally(() => {
+          endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+        });
     } else if (g.kind === "drag") {
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
       const dy = g.lastSnappedDy ?? e.clientY - g.startY;
@@ -469,12 +506,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       const finalSize = readStudioBoxSize(sel.element);
       applyStudioBoxSize(sel.element, finalSize);
       void Promise.resolve(opts.onBoxSizeCommitRef.current(sel, finalSize))
-        .catch(() => {
+        .catch((error) => {
+          console.error("resize commit failed", error);
           if (
             g.manualEditDragToken &&
             isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)
-          )
+          ) {
+            restoreResizeAnchorPin(sel.element, g);
             restoreStudioBoxSize(sel.element, g.initialBoxSize);
+          }
         })
         .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
     }
@@ -494,6 +534,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "box-size" && sel) {
+      restoreResizeAnchorPin(sel.element, g);
       restoreStudioBoxSize(sel.element, g.initialBoxSize);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
       restoreGestureOverlayRect(g);

package/src/hooks/gsapResizeIntercept.test.ts

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+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 });
+});
+
+/**
+ * Scale-route resize: an element whose visual size is driven by a scale-group
+ * tween. The intercept must (a) route the commit through SCALE, never
+ * width/height, and (b) resolve convert-to-keyframes from-values through the
+ * group filter — an opacity-touching intro tween on the same element must not
+ * ride into the converted keyframes (the disappearance bake class).
+ */
+function makeGradedElement(): HTMLElement {
+  const el = document.createElement("img");
+  el.id = "clip";
+  el.setAttribute("data-hf-studio-original-width", "640");
+  el.setAttribute("data-hf-studio-original-height", "360");
+  // Grading contract: source hidden, canvas carries effective opacity.
+  el.setAttribute("data-hf-color-grading-source-hidden", "");
+  const canvas = document.createElement("canvas");
+  canvas.id = "__hf_color_grading_clip";
+  canvas.style.opacity = "0.98";
+  document.body.append(el, canvas);
+  return el;
+}
+
+function fakeIframe(el: HTMLElement, gsapValues: Record<string, number>) {
+  // The element's OPACITY intro tween lives on the timeline: unfiltered
+  // capture would pick `opacity` up via the other-tween sweep.
+  const opacityIntro = { targets: () => [el], vars: { opacity: 0, duration: 0.8 } };
+  return {
+    contentWindow: {
+      __timelines: { main: { getChildren: () => [opacityIntro] } },
+      gsap: { getProperty: (_el: Element, prop: string) => gsapValues[prop] ?? 0 },
+    },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+}
+
+function scaleFromTween(): GsapAnimation {
+  return {
+    id: "#clip-from-200-scale",
+    targetSelector: "#clip",
+    propertyGroup: "scale",
+    method: "from",
+    properties: { scale: 0.9 },
+    position: 0.2,
+    resolvedStart: 0.2,
+    duration: 0.8,
+  } as unknown as GsapAnimation;
+}
+
+function keyframedScaleFixture(): GsapAnimation {
+  return {
+    ...scaleFromTween(),
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: { scale: 0.9 } },
+        { percentage: 100, properties: { scale: 1 } },
+      ],
+    },
+  } as unknown as GsapAnimation;
+}
+
+/** Drive one resize through the intercept, returning every committed mutation. */
+async function runResize(
+  el: HTMLElement,
+  iframe: HTMLIFrameElement,
+  size: { width: number; height: number },
+): Promise<Array<Record<string, unknown>>> {
+  const selection = { id: "clip", selector: "#clip", element: el } as unknown as DomEditSelection;
+  usePlayerStore.setState({ currentTime: 0.5 }); // inside the tween's range
+  const committed: Array<Record<string, unknown>> = [];
+  const commitMutation = vi.fn(async (_sel: unknown, mutation: Record<string, unknown>) => {
+    committed.push(mutation);
+  });
+  const handled = await tryGsapResizeIntercept(
+    selection,
+    size,
+    [scaleFromTween()],
+    iframe,
+    commitMutation as never,
+    async () => [keyframedScaleFixture()],
+  );
+  expect(handled).toBe(true);
+  return committed;
+}
+
+it("scale-route resize converts via the group filter and commits scale, not width/height", async () => {
+  const el = makeGradedElement();
+  const iframe = fakeIframe(el, { scale: 1, scaleX: 1, scaleY: 1, opacity: 0, rotation: 0 });
+  // uniform: 800/640 === 450/360
+  const committed = await runResize(el, iframe, { width: 800, height: 450 });
+
+  const convert = committed.find((m) => m.type === "convert-to-keyframes");
+  expect(convert).toBeDefined();
+  const fromValues = convert!.resolvedFromValues as Record<string, number>;
+  // Group filter: the opacity intro tween must NOT leak into the conversion.
+  expect(fromValues).not.toHaveProperty("opacity");
+  expect(fromValues).toHaveProperty("scale");
+
+  // Every committed property is scale-group — the resize never writes
+  // width/height for a scale-driven element (the double-apply bug class).
+  const allProps = committed.flatMap((m) => [
+    ...Object.keys((m.properties as Record<string, unknown>) ?? {}),
+    ...Object.keys((m.resolvedFromValues as Record<string, unknown>) ?? {}),
+  ]);
+  expect(allProps).not.toContain("width");
+  expect(allProps).not.toContain("height");
+  expect(allProps.some((p) => p === "scale" || p === "scaleX")).toBe(true);
+});
+
+it("non-uniform drag commits scaleX/scaleY longhands", async () => {
+  const el = makeGradedElement();
+  const iframe = fakeIframe(el, { scale: 1, scaleX: 1, scaleY: 1, opacity: 0 });
+  // scaleX 1.25 vs scaleY 1.0 → non-uniform
+  const committed = await runResize(el, iframe, { width: 800, height: 360 });
+
+  const serialized = JSON.stringify(committed);
+  expect(serialized).toContain("scaleX");
+  expect(serialized).toContain("scaleY");
+});