@hyperframes/studio 0.8.143 → 0.8.144

package/src/components/editor/previewGestureStarts.ts

@@ -99,10 +99,10 @@ export function createPreviewGestureStarts(
   const drawPressedBox = (origin: OverlayRect | null): WaitingPressState["draw"] =>
     origin && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin, dx, dy)));
 
-  // A corner resize scales about the element's centre by the pointer's distance from it, as the resize does.
+  // A corner resize scales about the element's centre by the grabbed corner's distance from it, as the resize does.
   const drawResizedBox = (
     origin: OverlayRect | null,
-    press: { x: number; y: number },
+    grabbed: { x: number; y: number },
   ): WaitingPressState["draw"] => {
     if (!origin) return null;
     const bounds = opts.overlayRef.current?.getBoundingClientRect();
@@ -111,8 +111,12 @@ export function createPreviewGestureStarts(
       y: (bounds?.top ?? 0) + origin.top + origin.height / 2,
     };
     return (dx, dy) => {
-      const pointer = { x: press.x + dx, y: press.y + dy };
-      const scale = resolveCenterResizeScale({ pointer, pointerStart: press, centerStart: centre });
+      const pointer = { x: grabbed.x + dx, y: grabbed.y + dy };
+      const scale = resolveCenterResizeScale({
+        pointer,
+        pointerStart: grabbed,
+        centerStart: centre,
+      });
       const [width, height] = [origin.width * scale, origin.height * scale];
       opts.setOverlayRect({
         ...origin,
@@ -248,6 +252,7 @@ export function createPreviewGestureStarts(
       selection?: DomEditSelection;
       rect?: OverlayRect | null;
       resizeHandle?: ResizeHandle;
+      resizeCorner?: { x: number; y: number };
     },
   ) => {
     // A replay edits what was pressed, though another element may be selected by then.
@@ -255,7 +260,10 @@ export function createPreviewGestureStarts(
     let draw: WaitingPressState["draw"] = null;
     if (kind === "drag") draw = drawPressedBox(opts.overlayRectRef.current);
     if (kind === "resize")
-      draw = drawResizedBox(opts.overlayRectRef.current, { x: e.clientX, y: e.clientY });
+      draw = drawResizedBox(
+        opts.overlayRectRef.current,
+        options?.resizeCorner ?? { x: e.clientX, y: e.clientY },
+      );
     return startOnShownPreview(
       e,
       () => {
@@ -272,6 +280,7 @@ export function createPreviewGestureStarts(
             selection,
             rect,
             resizeHandle: options?.resizeHandle,
+            resizeCorner: options?.resizeCorner,
             at,
           })
         );

package/src/components/editor/resizeDraft.ts

@@ -6,14 +6,15 @@ import {
   elementCornerOverlayPoints,
   overlayCornersCentroid,
 } from "./domEditOverlayGeometry";
-import { computeNextResizeAnchor } from "./domEditResizeLocal";
+import { computeNextResizeAnchor, resizeRemainderShift } from "./domEditResizeLocal";
+import type { ResizeDraftSizes } from "./domEditResizeLocal";
 import { applyManualOffsetDragDraft } from "./manualOffsetDrag";
 
 type Corners = ReturnType<typeof elementCornerOverlayPoints>;
 
 /**
  * The residual center-pin offset for this frame. With measurable corners and a
- * fixed-center start, accumulate `fixedStart - centerNow` onto the previous
+ * fixed-center start, accumulate `fixedStart + shift - centerNow` onto the previous
  * anchor so it CONVERGES rather than oscillating: `applyManualOffsetDragDraft`
  * treats its argument as the absolute offset, and `centerNow` (measured on the
  * live element) already carries the previous frame's offset, so the difference
@@ -25,10 +26,15 @@ function resolveResizeAnchor(
   g: GestureState,
   corners: Corners | null,
   measureOrientedRect: () => OverlayRect | null,
+  sizes: ResizeDraftSizes,
 ): { dx: number; dy: number } {
   const fixedStart = g.resizeFixedCenterStart;
   if (corners && fixedStart) {
-    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+    const press = g.resizePressFromCorner ?? { x: 0, y: 0 };
+    const grab = { x: g.startX - press.x - g.centerX, y: g.startY - press.y - g.centerY };
+    const shift = resizeRemainderShift(corners, grab, sizes);
+    const target = { x: fixedStart.x + shift.x, y: fixedStart.y + shift.y };
+    return computeNextResizeAnchor(g.lastResizeAnchor, target, overlayCornersCentroid(corners));
   }
   const fallbackRect = measureOrientedRect();
   return resolveResizeCenterAnchorOffset({
@@ -52,11 +58,12 @@ function resolveAnchoredResizeDraft(
   overlayEl: HTMLDivElement | null,
   iframe: HTMLIFrameElement | null,
   measureOrientedRect: () => OverlayRect | null,
+  sizes: ResizeDraftSizes,
 ): OverlayRect {
   // Measure real corners ONCE — reused for the anchor and the fallback size.
   const corners =
     overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
-  const anchor = resolveResizeAnchor(g, corners, measureOrientedRect);
+  const anchor = resolveResizeAnchor(g, corners, measureOrientedRect, sizes);
   g.lastResizeAnchor = anchor;
   applyManualOffsetDragDraft(member, anchor.dx, anchor.dy);
   // Re-measure AFTER the anchor translate so it hugs the element every frame.
@@ -80,6 +87,7 @@ export function resolveResizeDraftRect(
   overlayEl: HTMLDivElement | null,
   iframe: HTMLIFrameElement | null,
   measureOrientedRect: () => OverlayRect | null,
+  sizes: ResizeDraftSizes,
 ): OverlayRect {
   if (g.pathOffsetMember) {
     return resolveAnchoredResizeDraft(
@@ -89,6 +97,7 @@ export function resolveResizeDraftRect(
       overlayEl,
       iframe,
       measureOrientedRect,
+      sizes,
     );
   }
   // Re-measure the element's oriented box AFTER the size write. The size draft

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -250,14 +250,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
       // Corner resize scales proportionally about the center, without edge snapping.
+      const grab = g.resizePressFromCorner ?? { x: 0, y: 0 };
       const nextSize = resolveCenterResizeSize({
         baseWidth: g.actualWidth,
         baseHeight: g.actualHeight,
-        pointer: { x: e.clientX, y: e.clientY },
-        pointerStart: { x: g.startX, y: g.startY },
+        pointer: { x: e.clientX - grab.x, y: e.clientY - grab.y },
+        pointerStart: { x: g.startX - grab.x, y: g.startY - grab.y },
         centerStart: { x: g.centerX, y: g.centerY },
       });
-      applyStudioBoxSizeDraft(sel.element, nextSize);
+      const writtenSize = applyStudioBoxSizeDraft(sel.element, nextSize);
 
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
@@ -270,6 +271,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         overlayEl,
         iframe,
         measureOrientedRect,
+        { wanted: nextSize, written: writtenSize },
       );
       logResizeMove({
         pointer: { x: e.clientX, y: e.clientY },

package/src/components/ui/Menu.test.tsx

@@ -48,6 +48,13 @@ function clickWithMouse(target: Element): void {
   });
 }
 
+function rightClick(target: Element): void {
+  const init = { bubbles: true, cancelable: true, composed: true };
+  act(() => {
+    target.dispatchEvent(new MouseEvent("contextmenu", init));
+  });
+}
+
 function key(k: string, target: Element | null = document.activeElement): void {
   const init = { key: k, bubbles: true, cancelable: true, composed: true };
   act(() => {
@@ -241,11 +248,7 @@ describe("ContextMenu", () => {
     expect(trigger().textContent).toBe("clip");
     expect(popup()).toBeNull();
 
-    act(() => {
-      trigger().dispatchEvent(
-        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, composed: true }),
-      );
-    });
+    rightClick(trigger());
     await settle();
     expect(popup()).not.toBeNull();
 
@@ -257,6 +260,65 @@ describe("ContextMenu", () => {
   });
 });
 
+describe("container={null}", () => {
+  /** Rendered inline means inside the trigger's own parent, not a portal on the body. */
+  function expectInlineBeside(menu: HTMLElement | null): void {
+    expect(menu).not.toBeNull();
+    expect(trigger().parentElement?.contains(menu)).toBe(true);
+  }
+
+  it("opens a Menu inline, next to its trigger, and closes on Escape", async () => {
+    render(
+      <div>
+        <Menu container={null} trigger={<button data-testid="trigger">Actions</button>}>
+          <MenuItem>Bring to front</MenuItem>
+        </Menu>
+      </div>,
+    );
+    clickWithMouse(trigger());
+    await settle();
+    expectInlineBeside(popup());
+
+    key("Escape");
+    await settle();
+    expect(popup()).toBeNull();
+  });
+
+  it("opens a ContextMenu inline, next to its area", async () => {
+    render(
+      <div>
+        <ContextMenu container={null} trigger={<div data-testid="trigger">clip</div>}>
+          <MenuItem>Split</MenuItem>
+        </ContextMenu>
+      </div>,
+    );
+    rightClick(trigger());
+    await settle();
+    expectInlineBeside(popup());
+  });
+
+  it("opens a Popover inline on its first render", async () => {
+    render(
+      <div>
+        <Popover
+          container={null}
+          defaultOpen
+          trigger={<button data-testid="trigger">Speed</button>}
+        >
+          <span>1x</span>
+        </Popover>
+      </div>,
+    );
+    await settle();
+    expectInlineBeside(document.querySelector<HTMLElement>("[role=dialog]"));
+  });
+
+  it("still portals to the body when no container is passed", async () => {
+    await openActionMenu();
+    expect(trigger().parentElement?.contains(popup())).toBe(false);
+  });
+});
+
 describe("Popover", () => {
   it("leaves the keys of a text field inside it alone", async () => {
     // The Menu owns ArrowDown and typeahead; a Popover must not, or the rename

package/src/components/ui/Menu.tsx

@@ -5,6 +5,7 @@
 
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { useRef } from "react";
 import type { ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from "react";
 import { cn } from "./cn";
 
@@ -20,7 +21,19 @@ type StyledProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, "cla
 export type PopupPreviewState = "open";
 
 /** Where the portal puts the popup. `null` keeps it inline, next to its trigger. */
-type PortalContainer = ComponentPropsWithoutRef<typeof BaseMenu.Portal>["container"];
+export type PortalContainer = ComponentPropsWithoutRef<typeof BaseMenu.Portal>["container"];
+
+const CONTENTS = { display: "contents" } as const;
+
+/** Base UI reads a `null` container as "not resolved yet" and renders nothing, so give `null` a host by the trigger. */
+export function useInlinePortal(container: PortalContainer) {
+  const host = useRef<HTMLSpanElement>(null);
+  if (container !== null) return { host: null, portal: { container } };
+  return {
+    host: <span ref={host} style={CONTENTS} />,
+    portal: { container: host, style: CONTENTS },
+  };
+}
 
 /** Matches Tooltip's gap from its trigger, and its viewport margin. */
 const SIDE_OFFSET = 6;
@@ -77,7 +90,7 @@ interface PositionedProps {
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
   sideOffset?: number;
-  /** Portal target. Pass the shadow root when the trigger lives in one. */
+  /** Portal target. Pass the shadow root when the trigger lives in one; `null` keeps it inline. */
   container?: PortalContainer;
   /** Names the popup for assistive tech. A menu with no name is unlabelled. */
   "aria-label"?: string;
@@ -109,10 +122,12 @@ export function Menu({
   "data-preview-state": previewState,
   ...root
 }: MenuProps) {
+  const inline = useInlinePortal(container);
   return (
     <BaseMenu.Root {...root}>
       <BaseMenu.Trigger render={trigger} />
-      <BaseMenu.Portal container={container}>
+      {inline.host}
+      <BaseMenu.Portal {...inline.portal}>
         <BaseMenu.Positioner
           side={side}
           align={align}
@@ -153,10 +168,12 @@ export function ContextMenu({
   "data-preview-state": previewState,
   ...root
 }: Omit<ContextMenuProps, "side" | "align" | "sideOffset">) {
+  const inline = useInlinePortal(container);
   return (
     <BaseContextMenu.Root {...root}>
       <BaseContextMenu.Trigger render={trigger} />
-      <BaseContextMenu.Portal container={container}>
+      {inline.host}
+      <BaseContextMenu.Portal {...inline.portal}>
         <BaseContextMenu.Positioner collisionPadding={VIEWPORT_MARGIN} className={POPUP_LAYER}>
           <BaseContextMenu.Popup
             aria-label={ariaLabel}

package/src/components/ui/Popover.tsx

@@ -6,9 +6,13 @@
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { cn } from "./cn";
-import { POPUP_LAYER, popupSurface, type PopupPreviewState } from "./Menu";
-
-type PortalContainer = ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
+import {
+  POPUP_LAYER,
+  popupSurface,
+  useInlinePortal,
+  type PopupPreviewState,
+  type PortalContainer,
+} from "./Menu";
 
 /** Matches Menu's gap from its trigger, and its viewport margin. */
 const SIDE_OFFSET = 6;
@@ -33,7 +37,7 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof BasePopover.
   sideOffset?: number;
   /** Points the popup at its trigger. Off by default; the default gap from the trigger grows by the arrow's height. */
   arrow?: boolean;
-  /** Portal target. Pass the shadow root when the trigger lives in one. */
+  /** Portal target. Pass the shadow root when the trigger lives in one; `null` keeps it inline. */
   container?: PortalContainer;
   /** Names the popup for assistive tech. */
   "aria-label"?: string;
@@ -60,10 +64,12 @@ export function Popover({
   "data-preview-state": previewState,
   ...root
 }: PopoverProps) {
+  const inline = useInlinePortal(container);
   return (
     <BasePopover.Root {...root}>
       <BasePopover.Trigger render={trigger} />
-      <BasePopover.Portal container={container}>
+      {inline.host}
+      <BasePopover.Portal {...inline.portal}>
         <BasePopover.Positioner
           side={side}
           align={align}

package/src/hooks/gsapResizeIntercept.test.ts

@@ -455,10 +455,31 @@ it("does not mix the scale shorthand into a tween that speaks longhands", async
  * The fixture models the geometry the browser reported: a 630x252 element
  * dragged from x=432 to x=587 with its box drafted down to 320x128, dropped at
  * a committed scale of 0.837. Scaling about the centre puts it back on the drop
- * point at its pre-gesture position, so the correct persisted correction is
- * NONE.
+ * point at its pre-gesture position, so the persisted correction is only the
+ * drop's sub-pixel offset.
  */
-it("does not move a statically positioned element when a scale resize lands", async () => {
+it.each([
+  {
+    name: "does not move a statically positioned element when a scale resize lands",
+    shift: { x: 0, y: 0 },
+  },
+  {
+    name: "puts a statically positioned element on a sub-pixel drop point",
+    shift: { x: 0.3, y: -0.2 },
+    writes: true,
+  },
+  {
+    name: "leaves a static position alone when the drop is off by less than the file's precision",
+    shift: { x: 0.0003, y: 0 },
+    writes: false,
+  },
+  {
+    name: "leaves an animated position alone for a sub-pixel drop point",
+    shift: { x: 0.3, y: -0.2 },
+    animated: true,
+    writes: false,
+  },
+])("$name", async ({ shift, animated, writes }) => {
   document.body.innerHTML = "";
   const el = document.createElement("div");
   el.id = "clip";
@@ -476,7 +497,7 @@ it("does not move a statically positioned element when a scale resize lands", as
   el.style.height = "128px";
   document.body.append(el);
 
-  const pos = { x: 587, y: 235 };
+  const pos = { x: 587 + shift.x, y: 235 + shift.y };
   const scale = { x: 1.648, y: 1.648 };
   const [LEFT, TOP] = [120, 520];
   el.getBoundingClientRect = () => {
@@ -517,6 +538,15 @@ it("does not move a statically positioned element when a scale resize lands", as
     duration: 0,
     global: true,
   } as unknown as GsapAnimation;
+  const positionTween = {
+    ...positionHold,
+    id: "#clip-to-0-position",
+    method: "to",
+    properties: { x: 500 },
+    duration: 4,
+    global: false,
+  } as unknown as GsapAnimation;
+  const position = animated ? positionTween : positionHold;
   const selection = { id: "clip", selector: "#clip", element: el } as DomEditSelection;
   usePlayerStore.setState({ currentTime: 0.5 });
   const commitMutation = vi.fn();
@@ -524,22 +554,27 @@ it("does not move a statically positioned element when a scale resize lands", as
   await tryGsapResizeIntercept(
     selection,
     { width: 320, height: 128 },
-    [keyframedScaleFixture(), positionHold],
+    [keyframedScaleFixture(), position],
     iframe,
     commitMutation,
-    async () => [keyframedScaleFixture(), positionHold],
+    async () => [keyframedScaleFixture(), position],
   );
 
   const positionWrites = commitMutation.mock.calls
     .map((call) => call[1] as { properties?: Record<string, number> })
     .filter((mutation) => mutation.properties?.x != null || mutation.properties?.y != null);
-  // Either it left the position alone, or it rewrote the same value.
+  // No position write, or one that moves the hold by exactly the drop's sub-pixel offset.
+  if (writes === false) expect(positionWrites).toEqual([]);
+  if (writes) expect(positionWrites.length).toBeGreaterThan(0);
   for (const write of positionWrites) {
-    expect(write.properties?.x).toBe(432);
-    expect(write.properties?.y).toBe(173);
+    expect(write.properties?.x).toBeCloseTo(432 + shift.x, 3);
+    expect(write.properties?.y).toBeCloseTo(173 + shift.y, 3);
   }
-  // And the live element ends on the drop point, not a drag away from it.
-  expect(el.getBoundingClientRect().x).toBeCloseTo(603.3, 0);
+  // And the live box is centred where it was dropped (left 120 + 587 + 160, top 520 + 235 + 64).
+  const landed = animated ? { x: 0, y: 0 } : shift;
+  const box = el.getBoundingClientRect();
+  expect(box.x + box.width / 2).toBeCloseTo(867 + landed.x, 3);
+  expect(box.y + box.height / 2).toBeCloseTo(819 + landed.y, 3);
 });
 
 function titleSelection(): DomEditSelection {

package/src/hooks/gsapResizeIntercept.ts

@@ -170,6 +170,11 @@ function tweenUsesScaleLonghands(anim: GsapAnimation | null): boolean {
 
 // ── Resize intercept ──────────────────────────────────────────────────────
 
+// The resize is centre-anchored, so a scale that cannot reproduce the dragged size splits the gap evenly.
+function rectCentre(rect: DOMRect): { x: number; y: number } {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+
 // fallow-ignore-next-line complexity
 export async function tryGsapResizeIntercept(
   selection: DomEditSelection,
@@ -371,15 +376,10 @@ export async function tryGsapResizeIntercept(
     committedScale = useScaleLonghands
       ? { x: newScaleX, y: newScaleY }
       : { x: newScaleX, y: newScaleX };
-    // Where the user DROPPED the box: the draft (anchor-pinned to the
-    // gesture-start top-left) is still applied here, so this rect is exactly
-    // what the preview showed at release. The committed scale renders around
-    // the element CENTER instead — the finalize step below measures that
-    // difference and compensates, so release matches the drop pixel-for-pixel
-    // regardless of live scale or repeat resizes.
+    // Where the user DROPPED the box: the draft is still applied, so this is what the preview showed
+    // at release. The finalize step below moves the committed scale's box onto it.
     if (el) {
-      const dropRect = draw(() => el.getBoundingClientRect());
-      scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
+      scaleDraftDropPoint = draw(() => rectCentre(el.getBoundingClientRect()));
     }
   } else {
     resizeProps = {
@@ -396,8 +396,8 @@ export async function tryGsapResizeIntercept(
   // position (a `tl.set` hold or none) — a keyframed position path has no
   // single anchor to preserve, so it keeps the plain center-scale behavior.
   // The size route hands its draft to GSAP itself (handOverDraftSize).
-  // ponytail: for a 3D-rotated element the rects are AABBs, so the anchor is
-  // approximate rather than corner-exact.
+  // ponytail: the centre of an AABB is exact for any 2D transform; under
+  // perspective it is approximate.
   // fallow-ignore-next-line complexity
   const finalizeScaleResizeCommit = async (): Promise<boolean> => {
     // Only the scale route captures the element, so a null draft means this
@@ -428,15 +428,9 @@ export async function tryGsapResizeIntercept(
       );
       const base = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base.x, base.y);
-      const post = draftEl.getBoundingClientRect();
+      const post = rectCentre(draftEl.getBoundingClientRect());
       const residual = { x: dropPoint.x - post.x, y: dropPoint.y - post.y };
       if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return null;
-      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
-        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base });
-        // 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 "settled" as const;
-      }
       // The ONE corrected position — rounded once so the live runtime and the
       // persisted file agree exactly (commitStaticGsapPosition composes the same
       // rounded value from this delta).
@@ -444,9 +438,15 @@ export async function tryGsapResizeIntercept(
         x: roundTo3(base.x + residual.x),
         y: roundTo3(base.y + residual.y),
       };
+      if (corrected.x === roundTo3(base.x) && corrected.y === roundTo3(base.y)) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base });
+        // 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 "settled" as const;
+      }
       logResize("scale-finalize", {
         dropPoint,
-        post: { x: post.x, y: post.y },
+        post,
         residual,
         gsapPos,
         base,
@@ -455,11 +455,11 @@ export async function tryGsapResizeIntercept(
       // Correct the live box in the same task as the measurement, so no frame shows it off the drop
       // point while the position write is in flight.
       setElementGsapPosition(draftEl, corrected.x, corrected.y);
-      return { base, corrected };
+      return { base, corrected, residual };
     });
     if (measured === null) return false;
     if (measured === "settled") return true;
-    const { base, corrected } = measured;
+    const { base, corrected, residual } = measured;
     // Re-fetch: the scale commit above just rewrote the script, so the caller's
     // animation list (and its ids) may be stale for the position lookup.
     const currentAnimations = fetchFallbackAnimations
@@ -482,6 +482,11 @@ export async function tryGsapResizeIntercept(
       moment.time,
     );
     if (positionTween) {
+      // A sub-pixel correction is not worth a keyframe in an authored tween.
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        draw(() => setElementGsapPosition(draftEl, base.x, base.y));
+        return true;
+      }
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
       assertGsapEditPersisted(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base, iframe, {