@hyperframes/studio 0.8.142 → 0.8.144

package/src/components/editor/manualEditsDom.ts

@@ -36,7 +36,7 @@ import {
 } from "./manualEditsTypes";
 import { gsapWritesChannels } from "../../hooks/gsapRuntimeKeyframes";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
-import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
+import { roundTo3, roundToLayoutSize } from "../../utils/rounding";
 import { BOX_SIZE_STYLE_PROPS } from "./manualEditsDomPatches";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
@@ -402,7 +402,7 @@ function readParentFlexBasisPixels(
   if (display !== "flex" && display !== "inline-flex") return null;
 
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return direction.startsWith("column") ? size.height : size.width;
 }
 
 function restoreStaleStudioScaleResize(element: HTMLElement): void {
@@ -477,22 +477,21 @@ function writeStudioBoxSizeVars(
   }
 
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${size.width}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${size.height}px`);
 }
 
 function applyStudioBoxSizeDimensions(
   element: HTMLElement,
-  size: { width: number; height: number },
-): void {
+  wantedSize: { width: number; height: number },
+): { width: number; height: number } {
+  const size = roundToLayoutSize(wantedSize);
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
 
-  const width = roundToLayoutPx(Math.max(1, size.width));
-  const height = roundToLayoutPx(Math.max(1, size.height));
   element.style.setProperty("box-sizing", "border-box");
-  element.style.setProperty("width", `${width}px`);
-  element.style.setProperty("height", `${height}px`);
+  element.style.setProperty("width", `${size.width}px`);
+  element.style.setProperty("height", `${size.height}px`);
   element.style.setProperty("min-width", "0px");
   element.style.setProperty("min-height", "0px");
   element.style.setProperty("max-width", "none");
@@ -507,6 +506,7 @@ function applyStudioBoxSizeDimensions(
   if (computedDisplay === "inline") {
     element.style.setProperty("display", "inline-block");
   }
+  return size;
 }
 
 export function applyStudioBoxSize(
@@ -533,12 +533,12 @@ export function forgetStudioBoxSizeDraftBase(element: HTMLElement): void {
 export function applyStudioBoxSizeDraft(
   element: HTMLElement,
   size: { width: number; height: number },
-): void {
+): { width: number; height: number } {
   if (!boxSizeDraftBases.has(element)) {
     boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
   }
   promoteInlineForTransform(element);
-  applyStudioBoxSizeDimensions(element, size);
+  return applyStudioBoxSizeDimensions(element, size);
 }
 
 /* ── Rotation apply ───────────────────────────────────────────────── */

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

@@ -239,6 +239,18 @@ describe("buildKeepSoundCutoutEdit", () => {
     expect(doc.getElementById("clip")?.getAttribute("src")).toBe("assets/cut.webm");
   });
 
+  it("preserves an apostrophe in the authored source of the linked audio", () => {
+    const authored = source.replace('src="assets/talk.mp4"', `src="assets/it's.mp4"`);
+    const edit = buildKeepSoundCutoutEdit({
+      video: liveVideo(),
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/cut.webm",
+    });
+    const doc = parse(applyEdit(authored, edit));
+    expect(doc.getElementById("clip-audio")?.getAttribute("src")).toBe("assets/it's.mp4");
+  });
+
   it("takes the first <source> child when the video has no src attribute", () => {
     const withSource = source.replace(
       /<video id="clip"([^>]*?) src="assets\/talk.mp4"([^>]*)><\/video>/,

package/src/components/editor/mediaAudioEdits.ts

@@ -14,7 +14,7 @@ import {
   findTagByTarget,
   applyPatchByTarget,
   readAttributeByTarget,
-  unescapeHtmlAttribute,
+  readTagAttribute,
   type PatchOperation,
   type PatchTarget,
 } from "../../utils/sourcePatcher";
@@ -147,10 +147,10 @@ export function formatAttrs(attrs: Array<[string, string]>): string {
 export function readAuthoredSrc(source: string, target: PatchTarget): string {
   const tag = findTagByTarget(source, target);
   if (!tag) return "";
-  const own = /\bsrc=(["'])([^"']*)\1/.exec(tag.tag);
-  if (own?.[2]) return unescapeHtmlAttribute(own[2]);
-  const firstSource = /^\s*<source\b[^>]*?\bsrc=(["'])([^"']*)\1/i.exec(source.slice(tag.end + 1));
-  return firstSource?.[2] ? unescapeHtmlAttribute(firstSource[2]) : "";
+  const own = readTagAttribute(tag.tag, "src");
+  if (own) return own;
+  const firstSource = /^\s*<source\b[^>]*>/i.exec(source.slice(tag.end + 1));
+  return (firstSource && readTagAttribute(firstSource[0], "src")) || "";
 }
 
 export function insertBeforeTarget(source: string, target: PatchTarget, markup: string): string {

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/propertyPanelFill.tsx

@@ -20,6 +20,7 @@ import {
 } from "./propertyPanelPrimitives";
 import { ColorField } from "./propertyPanelColor";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 /* ------------------------------------------------------------------ */
 /*  Asset path helpers                                                 */
@@ -181,7 +182,7 @@ export function ImageFillField({
             {selectedAsset && (
               <div className="overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80">
                 <img
-                  src={buildProjectApiPath(projectId, `/preview/${selectedAsset}`)}
+                  src={buildProjectApiPath(projectId, `/preview/${encodeUrlPath(selectedAsset)}`)}
                   alt={selectedAsset.split("/").pop() ?? selectedAsset}
                   className="h-28 w-full object-contain bg-neutral-950/80"
                 />

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -10,7 +10,6 @@ import {
   formatTimingValue,
   parseNumericValue,
   readClipInPoint,
-  stripQueryAndHash,
 } from "./propertyPanelHelpers";
 import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
 import { FlatToggle } from "./propertyPanelFlatToggle";
@@ -37,6 +36,7 @@ import {
 import { parseGainInput, parseRateInput, parseSecondsInput } from "./audioInspectorInput";
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
+import { authoredSrcPath } from "../../player/components/thumbnailUtils";
 
 // fallow-ignore-next-line complexity
 export function FlatMediaSection({
@@ -126,12 +126,11 @@ export function FlatMediaSection({
   const [createPlate, setCreatePlate] = useState(false);
   const [quality, setQuality] = useState<"fast" | "balanced" | "best">("balanced");
 
-  const absoluteSrc =
-    projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   const projectSrc =
     srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr)
-      ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
+      ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
       : "";
+  const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
 
   useEffect(() => {

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -11,7 +11,6 @@ import {
   parseNumericValue,
   readClipInPoint,
   RESPONSIVE_GRID,
-  stripQueryAndHash,
 } from "./propertyPanelHelpers";
 import { Section, SegmentedControl, SelectField, SliderControl } from "./propertyPanelPrimitives";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
@@ -26,6 +25,7 @@ import {
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
+import { authoredSrcPath } from "../../player/components/thumbnailUtils";
 
 // fallow-ignore-next-line complexity
 export function MediaSection({
@@ -98,12 +98,11 @@ export function MediaSection({
   const [createPlate, setCreatePlate] = useState(false);
   const [quality, setQuality] = useState<"fast" | "balanced" | "best">("balanced");
 
-  const absoluteSrc =
-    projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
   const projectSrc =
     srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr)
-      ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
+      ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr)
       : "";
+  const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
   const panelTitle = isImage ? "Image" : isVideo ? "Video" : "Audio";
 

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/useColorGradingController.ts

@@ -30,6 +30,7 @@ import {
   type ColorGradingPreviewOptions,
 } from "./useColorGradingPreviews";
 import { studioApiFetch } from "../../utils/studioApiFetch";
+import { authoredSrcPath } from "../../player/components/thumbnailUtils";
 
 export type { ColorGradingPresetPreviews, ColorGradingPreviewOptions };
 
@@ -97,7 +98,7 @@ function resolveProjectAssetPath(
   const sourceDir = sourceFile.includes("/")
     ? sourceFile.slice(0, sourceFile.lastIndexOf("/"))
     : "";
-  const parts = `${sourceDir}/${trimmed}`.split("/");
+  const parts = `${sourceDir}/${authoredSrcPath(trimmed)}`.split("/");
   const normalized: string[] = [];
   for (const part of parts) {
     if (!part || part === ".") continue;

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 {