@hyperframes/studio 0.8.93 → 0.8.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.93",
+  "version": "0.8.94",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.93",
-    "@hyperframes/shader-transitions": "0.8.93",
-    "@hyperframes/studio-server": "0.8.93",
-    "@hyperframes/parsers": "0.8.93",
-    "@hyperframes/player": "0.8.93",
-    "@hyperframes/sdk": "0.8.93"
+    "@hyperframes/core": "0.8.94",
+    "@hyperframes/shader-transitions": "0.8.94",
+    "@hyperframes/player": "0.8.94",
+    "@hyperframes/studio-server": "0.8.94",
+    "@hyperframes/parsers": "0.8.94",
+    "@hyperframes/sdk": "0.8.94"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.93"
+    "@hyperframes/producer": "0.8.94"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.test.tsx

@@ -278,6 +278,23 @@ describe("TimelineToolbar audio meters", () => {
   });
 });
 
+describe("TimelineToolbar history", () => {
+  const historyButtons = (host: HTMLElement) =>
+    host.querySelectorAll('button[aria-label="Undo"], button[aria-label="Redo"]').length;
+
+  it("shows Undo and Redo by default", () => {
+    const { host, root } = renderToolbar();
+    expect(historyButtons(host)).toBe(2);
+    act(() => root.unmount());
+  });
+
+  it("renders neither when the host hides history", () => {
+    const { host, root } = renderToolbar(undefined, { showHistory: false });
+    expect(historyButtons(host)).toBe(0);
+    act(() => root.unmount());
+  });
+});
+
 describe("TimelineToolbar add beat", () => {
   it("shows Add beat by default, as Studio does", () => {
     const { host, root } = renderToolbar();

package/src/components/TimelineToolbar.tsx

@@ -43,6 +43,7 @@ export interface TimelineToolbarProps {
   domEditSession?: DomEditSessionSlice;
   onSplitElement?: (element: TimelineElement, splitTime: number) => void;
   history?: TimelineHistoryButtonsProps;
+  showHistory?: boolean;
   showAddBeat?: boolean;
   /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
   showKeyframes?: boolean;
@@ -141,6 +142,7 @@ export function TimelineToolbar({
   domEditSession,
   onSplitElement,
   history,
+  showHistory = true,
   showAddBeat = true,
   showKeyframes = true,
 }: TimelineToolbarProps) {
@@ -213,7 +215,7 @@ export function TimelineToolbar({
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
-          <TimelineHistoryButtons {...history} />
+          {showHistory && <TimelineHistoryButtons {...history} />}
           <TimelineToolPicker />
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />

package/src/components/editor/ConnectedDomEditOverlay.test.tsx

@@ -149,11 +149,13 @@ describe("ConnectedDomEditOverlay", () => {
         showHoverSelection={false}
         shouldShowSelectedDomBounds={true}
         canvasInput="host"
+        allowBodyDrag={false}
         onTextEditingChange={onTextEditingChange}
       />,
     );
     expect(props).toMatchObject({
       canvasInput: "host",
+      allowBodyDrag: false,
       onTextEditingChange,
       hoverSelection: null,
       selection: ctx.selection.domEditSelection,

package/src/components/editor/ConnectedDomEditOverlay.tsx

@@ -13,7 +13,7 @@ import { runZLaneGesture } from "../nle/zLaneGesture";
 
 type HostInputProps = Pick<
   ComponentProps<typeof DomEditOverlay>,
-  "canvasInput" | "onSelectionBoxClick"
+  "canvasInput" | "onSelectionBoxClick" | "allowBodyDrag"
 >;
 
 export interface ConnectedDomEditOverlayProps extends HostInputProps {
@@ -121,6 +121,7 @@ export function ConnectedDomEditOverlay({
   shouldShowSelectedDomBounds,
   isGestureRecording,
   canvasInput,
+  allowBodyDrag,
   onTextEditingChange,
   onSelectionBoxClick,
 }: ConnectedDomEditOverlayProps) {
@@ -154,6 +155,7 @@ export function ConnectedDomEditOverlay({
       groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
       allowCanvasMovement={!isGestureRecording}
       canvasInput={canvasInput}
+      allowBodyDrag={allowBodyDrag}
       onTextEditingChange={onTextEditingChange}
       onSelectionBoxClick={onSelectionBoxClick}
       onCanvasMouseDown={handlePreviewCanvasMouseDown}

package/src/components/editor/DomEditCropHandles.test.tsx

@@ -36,6 +36,7 @@ function makeEl(id: string, clip: string): HTMLElement {
 function render(
   el: HTMLElement,
   onStyleCommit: (property: string, value: string) => Promise<unknown> | void = () => undefined,
+  rect: OverlayRect = overlayRect,
 ): { root: Root; rerender: (next: HTMLElement) => void } {
   const host = document.createElement("div");
   document.body.append(host);
@@ -45,7 +46,7 @@ function render(
       root.render(
         <DomEditCropHandles
           selection={selectionFor(target)}
-          overlayRect={overlayRect}
+          overlayRect={rect}
           onStyleCommit={onStyleCommit}
         />,
       );
@@ -155,3 +156,88 @@ describe("DomEditCropHandles clip lift/restore", () => {
     act(() => root.unmount());
   });
 });
+
+describe("DomEditCropHandles leaves the corner resize dots free", () => {
+  type Box = { left: number; top: number; width: number; height: number };
+  const HIT = 16;
+  const cornerSquares = (r: Box): Box[] =>
+    [
+      [r.left, r.top],
+      [r.left + r.width, r.top],
+      [r.left, r.top + r.height],
+      [r.left + r.width, r.top + r.height],
+    ].map(([x, y]) => ({ left: x - HIT / 2, top: y - HIT / 2, width: HIT, height: HIT }));
+  const overlaps = (a: Box, b: Box) =>
+    a.left < b.left + b.width &&
+    b.left < a.left + a.width &&
+    a.top < b.top + b.height &&
+    b.top < a.top + a.height;
+  const handles = () =>
+    [...document.querySelectorAll<HTMLElement>("[data-dom-edit-crop-handle]")].map((el) => ({
+      label: el.getAttribute("aria-label"),
+      box: {
+        left: parseFloat(el.style.left),
+        top: parseFloat(el.style.top),
+        width: parseFloat(el.style.width),
+        height: parseFloat(el.style.height),
+      },
+    }));
+  const rectOf = (width: number, height: number): OverlayRect => ({
+    left: 0,
+    top: 0,
+    width,
+    height,
+    editScaleX: 1,
+    editScaleY: 1,
+  });
+
+  it.each([
+    {
+      name: "29x14",
+      size: [29, 14],
+      clip: "",
+      cropped: { left: 0, top: 0, width: 29, height: 14 },
+    },
+    {
+      name: "40x40",
+      size: [40, 40],
+      clip: "",
+      cropped: { left: 0, top: 0, width: 40, height: 40 },
+    },
+    {
+      name: "29x14",
+      size: [29, 14],
+      clip: "inset(2px)",
+      cropped: { left: 2, top: 2, width: 25, height: 10 },
+    },
+    {
+      name: "200x100",
+      size: [200, 100],
+      clip: "inset(10px)",
+      cropped: { left: 10, top: 10, width: 180, height: 80 },
+    },
+  ])("no crop handle covers a corner of a $name box clipped '$clip'", (c) => {
+    render(makeEl("a", c.clip), undefined, rectOf(c.size[0], c.size[1]));
+    const found = handles();
+    expect(found.length).toBeGreaterThan(0);
+    for (const handle of found) {
+      for (const corner of cornerSquares(c.cropped)) {
+        expect(overlaps(handle.box, corner), `${handle.label} covers a corner`).toBe(false);
+      }
+    }
+  });
+
+  it("keeps every handle where the edges have room, and drops only those with none", () => {
+    render(makeEl("a", "inset(10px)"), undefined, rectOf(200, 100));
+    expect(handles().map((h) => h.label)).toEqual([
+      "Reposition crop",
+      "Crop top",
+      "Crop right",
+      "Crop bottom",
+      "Crop left",
+    ]);
+    document.body.innerHTML = "";
+    render(makeEl("b", ""), undefined, rectOf(29, 14));
+    expect(handles().map((h) => h.label)).toEqual(["Crop top", "Crop bottom"]);
+  });
+});

package/src/components/editor/DomEditCropHandles.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
 import type { DomEditSelection } from "./domEditing";
-import type { OverlayRect } from "./domEditOverlayGeometry";
+import { type OverlayRect, RESIZE_HANDLE_HIT_PX } from "./domEditOverlayGeometry";
 import {
   type CropEdge,
   cropRectFromInsets,
@@ -37,47 +37,53 @@ interface DomEditCropHandlesProps {
 // and centered inside the strip.
 const EDGE_HIT_THICKNESS = 12;
 const EDGE_HIT_LENGTH = 32;
+const EDGE_PILL_LENGTH = 24;
+const REPOSITION_HANDLE_PX = 22;
 
-/** Place an edge handle's hit strip just OUTSIDE the given crop edge
- *  (translate pushes it fully past the boundary). Keeps the element body free
- *  for moving. Corners stay free for the selection's own resize handles. */
-function edgeHandlePlacement(
-  edge: CropEdge,
-  rect: { left: number; top: number; width: number; height: number },
-) {
-  const cx = rect.left + rect.width / 2;
-  const cy = rect.top + rect.height / 2;
-  if (edge === "top") {
-    return { left: cx, top: rect.top, transform: "translate(-50%, -100%)" };
-  }
-  if (edge === "bottom") {
-    return { left: cx, top: rect.top + rect.height, transform: "translate(-50%, 0)" };
-  }
-  if (edge === "left") {
-    return { left: rect.left, top: cy, transform: "translate(-100%, -50%)" };
-  }
-  return { left: rect.left + rect.width, top: cy, transform: "translate(0, -50%)" };
-}
+type Rect = { left: number; top: number; width: number; height: number };
 
-const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
-
-/** Hit-strip + pill dimensions for an edge handle, keyed on its orientation. */
-function edgeHandleMetrics(vertical: boolean): {
-  hitWidth: number;
-  hitHeight: number;
-  cursor: string;
-  pillWidth: number;
-  pillHeight: number;
-} {
+/** An edge handle's hit strip, just OUTSIDE the crop edge so the body stays free
+ *  for moving, and short of the corner squares the resize dots own, with its
+ *  cursor and pill. Null when the edge is too short to leave any room. */
+function edgeHandleLayout(edge: CropEdge, rect: Rect) {
+  const vertical = edge === "left" || edge === "right";
+  const length = Math.min(
+    EDGE_HIT_LENGTH,
+    (vertical ? rect.height : rect.width) - RESIZE_HANDLE_HIT_PX,
+  );
+  if (length <= 0) return null;
+  const pill = Math.min(EDGE_PILL_LENGTH, length);
+  if (vertical) {
+    return {
+      hit: {
+        left: edge === "left" ? rect.left - EDGE_HIT_THICKNESS : rect.left + rect.width,
+        top: rect.top + (rect.height - length) / 2,
+        width: EDGE_HIT_THICKNESS,
+        height: length,
+      },
+      cursor: "ew-resize",
+      pill: { width: 4, height: pill },
+    };
+  }
   return {
-    hitWidth: vertical ? EDGE_HIT_THICKNESS : EDGE_HIT_LENGTH,
-    hitHeight: vertical ? EDGE_HIT_LENGTH : EDGE_HIT_THICKNESS,
-    cursor: vertical ? "ew-resize" : "ns-resize",
-    pillWidth: vertical ? 4 : 24,
-    pillHeight: vertical ? 24 : 4,
+    hit: {
+      left: rect.left + (rect.width - length) / 2,
+      top: edge === "top" ? rect.top - EDGE_HIT_THICKNESS : rect.top + rect.height,
+      width: length,
+      height: EDGE_HIT_THICKNESS,
+    },
+    cursor: "ns-resize",
+    pill: { width: pill, height: 4 },
   };
 }
 
+/** The reposition handle's size: shrunk until its box clears the corner squares. */
+function repositionHandleSize(rect: Rect): number {
+  return Math.min(REPOSITION_HANDLE_PX, Math.max(rect.width, rect.height) - RESIZE_HANDLE_HIT_PX);
+}
+
+const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
+
 /**
  * Always-on crop, integrated with the selection (no crop "mode"): while a
  * croppable element is selected its clip is lifted so the FULL content shows and
@@ -167,6 +173,7 @@ export function DomEditCropHandles({
     frame.scaleX,
     frame.scaleY,
   );
+  const repositionSize = repositionHandleSize(cropRect);
 
   const startCropGesture = (edge: CropEdge | "move", event: ReactPointerEvent<HTMLElement>) => {
     if (!onStyleCommit) return;
@@ -214,13 +221,19 @@ export function DomEditCropHandles({
     setState((prev) => ({ ...prev, insets: nextInsets }));
   };
 
-  const finishCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
+  const endCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    if (!gesture || gesture.pointerId !== event.pointerId) return null;
     event.preventDefault();
     event.stopPropagation();
     gestureRef.current = null;
     setDragging(false);
+    return gesture;
+  };
+
+  const finishCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
+    const gesture = endCropGesture(event);
+    if (!gesture) return;
     if (!gesture.didMove) return;
     // Commit to the file. The commit path re-applies the value to the live
     // element synchronously, so re-lift in the same turn to keep showing the full
@@ -250,12 +263,8 @@ export function DomEditCropHandles({
   };
 
   const cancelCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    event.preventDefault();
-    event.stopPropagation();
-    gestureRef.current = null;
-    setDragging(false);
+    const gesture = endCropGesture(event);
+    if (!gesture) return;
     // Clip stays lifted; the dim follows the reset insets.
     setState((prev) => ({ ...prev, insets: gesture.startInsets }));
   };
@@ -317,7 +326,7 @@ export function DomEditCropHandles({
       {/* Reposition handle — a center circle shown only once cropped. Drag it to
           pan the crop window (which part of the element shows) without resizing
           the crop. It's a small, discrete target, so a body drag still MOVES. */}
-      {hasCrop && (
+      {hasCrop && repositionSize > 0 && (
         <button
           type="button"
           aria-label="Reposition crop"
@@ -325,11 +334,10 @@ export function DomEditCropHandles({
           data-dom-edit-crop-handle="true"
           className="pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
           style={{
-            left: cropRect.left + cropRect.width / 2,
-            top: cropRect.top + cropRect.height / 2,
-            width: 22,
-            height: 22,
-            transform: "translate(-50%, -50%)",
+            left: cropRect.left + (cropRect.width - repositionSize) / 2,
+            top: cropRect.top + (cropRect.height - repositionSize) / 2,
+            width: repositionSize,
+            height: repositionSize,
             cursor: "move",
             touchAction: "none",
           }}
@@ -340,16 +348,15 @@ export function DomEditCropHandles({
         />
       )}
       {/* Edge handles — drag a side to crop it. Positioned just OUTSIDE the crop
-          edge (via edgeHandlePlacement) so they never overlap the element body:
+          edge (via edgeHandleLayout) so they never overlap the element body:
           dragging the body always MOVES, only a handle crops. The pill is
           hover-revealed (or shown while dragging / once a crop exists) so the
           resting selection chrome stays uncluttered; the hit strip is always
           live, and the title names the affordance. */}
       {EDGES.map((edge) => {
-        const vertical = edge === "left" || edge === "right";
-        const place = edgeHandlePlacement(edge, cropRect);
+        const layout = edgeHandleLayout(edge, cropRect);
+        if (!layout) return null;
         const revealed = dragging || hasCrop || hotEdge === edge;
-        const m = edgeHandleMetrics(vertical);
         return (
           <button
             key={edge}
@@ -359,12 +366,8 @@ export function DomEditCropHandles({
             data-dom-edit-crop-handle="true"
             className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
             style={{
-              left: place.left,
-              top: place.top,
-              width: m.hitWidth,
-              height: m.hitHeight,
-              transform: place.transform,
-              cursor: m.cursor,
+              ...layout.hit,
+              cursor: layout.cursor,
               touchAction: "none",
             }}
             onPointerEnter={() => setHotEdge(edge)}
@@ -377,8 +380,7 @@ export function DomEditCropHandles({
             <span
               className="pointer-events-none rounded-full bg-studio-accent/90 shadow-[0_0_0_1px_rgba(0,0,0,0.4)] transition-opacity duration-100"
               style={{
-                width: m.pillWidth,
-                height: m.pillHeight,
+                ...layout.pill,
                 opacity: revealed ? 1 : 0,
               }}
             />

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

@@ -485,6 +485,45 @@ describe("DomEditOverlay", () => {
     host.remove();
   });
 
+  it.each([
+    { canvasInput: "overlay" as const, drags: true },
+    { canvasInput: "host" as const, drags: false },
+  ])("with body drag off, a $canvasInput canvas drags the body: $drags", async (c) => {
+    const restoreRect = stubViewportRect();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const selection = makeDomEditSelection();
+    const iframeRef = { current: document.createElement("iframe") as HTMLIFrameElement | null };
+    const originalPointerCapture = HTMLDivElement.prototype.setPointerCapture;
+    HTMLDivElement.prototype.setPointerCapture = () => {};
+    gestureSpies.startGesture.mockClear();
+
+    act(() => {
+      root.render(
+        React.createElement(DomEditOverlay, {
+          ...createOverlayProps({ iframeRef, selection, hoverSelection: null }),
+          allowBodyDrag: false,
+          canvasInput: c.canvasInput,
+        }),
+      );
+    });
+    await flushOverlayRaf();
+    const selectionBox = host.querySelector(
+      '[data-dom-edit-selection-box="true"]',
+    ) as HTMLDivElement;
+    dispatchOverlayPointerDown(selectionBox);
+
+    expect(gestureSpies.startGesture.mock.calls.some((call) => call[0] === "drag")).toBe(c.drags);
+
+    act(() => {
+      root.unmount();
+    });
+    HTMLDivElement.prototype.setPointerCapture = originalPointerCapture;
+    restoreRect();
+    host.remove();
+  });
+
   it("passes the tracked hover selection when clicking the existing selection box", async () => {
     const restoreRect = stubViewportRect();
 

package/src/components/editor/DomEditOverlay.tsx

@@ -54,7 +54,8 @@ export interface DomEditOverlayProps {
   groupSelections?: DomEditSelection[];
   hoverSelection: DomEditSelection | null;
   allowCanvasMovement?: boolean;
-  /** "host": no hover, marquee or box re-select; Enter with nothing focused still opens text. */
+  allowBodyDrag?: boolean;
+  /** "host": no hover, marquee, box re-select, or body drag if allowBodyDrag is false; Enter still opens text. */
   canvasInput?: "overlay" | "host";
   onTextEditingChange?: (editing: boolean) => void;
   /** A click on a single selection's box, in either mode; the event may be the pointerup. */
@@ -128,6 +129,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   groupSelections = [],
   hoverSelection,
   allowCanvasMovement = true,
+  allowBodyDrag = true,
   canvasInput = "overlay",
   onTextEditingChange,
   onSelectionBoxClick,
@@ -148,6 +150,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 }: DomEditOverlayProps) {
   const readOnly = usePreviewReadOnly();
   const hostInput = canvasInput === "host";
+  const bodyDrag = allowBodyDrag || !hostInput;
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
   const onMarqueeSelectRef = useRef(onMarqueeSelect);
@@ -503,6 +506,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           groupOverlayItems={groupOverlayItems}
           groupBounds={groupBounds}
           allowCanvasMovement={allowCanvasMovement}
+          allowBodyDrag={bodyDrag}
           groupCanMove={groupCanMove}
           gestures={gestures}
           onBoxMouseDown={suppressBoxMouseDown}
@@ -515,6 +519,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           selection={selection}
           overlayRect={overlayRect}
           allowCanvasMovement={allowCanvasMovement}
+          allowBodyDrag={bodyDrag}
           cropOutlineInsetPx={cropOutlineInsetPx ?? undefined}
           boxRef={boxRef}
           boxChromeClass={boxChromeClass}

package/src/components/editor/DomEditSelectionChrome.test.tsx

@@ -4,7 +4,7 @@ import React, { act, createRef } from "react";
 import { createRoot } from "react-dom/client";
 import { describe, expect, it, vi } from "vitest";
 import type { DomEditSelection } from "./domEditing";
-import { DomEditSelectionChrome } from "./DomEditSelectionChrome";
+import { DomEditGroupChrome, DomEditSelectionChrome } from "./DomEditSelectionChrome";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -48,6 +48,7 @@ describe("DomEditSelectionChrome crop composition", () => {
           selection={selection}
           overlayRect={{ left: 44, top: 52, width: 220, height: 48, editScaleX: 1, editScaleY: 1 }}
           allowCanvasMovement={false}
+          allowBodyDrag
           boxRef={createRef()}
           boxChromeClass="border border-studio-accent/80"
           boxClipPath={undefined}
@@ -103,6 +104,7 @@ describe("DomEditSelectionChrome crop composition", () => {
             angle: 30,
           }}
           allowCanvasMovement={true}
+          allowBodyDrag
           boxRef={createRef()}
           boxChromeClass=""
           boxClipPath={undefined}
@@ -163,6 +165,7 @@ describe("DomEditSelectionChrome while editing text", () => {
           selection={selection}
           overlayRect={{ left: 10, top: 20, width: 200, height: 60, editScaleX: 1, editScaleY: 1 }}
           allowCanvasMovement={true}
+          allowBodyDrag
           boxRef={createRef()}
           boxChromeClass="border border-studio-accent/80"
           boxClipPath={undefined}
@@ -214,3 +217,113 @@ describe("DomEditSelectionChrome while editing text", () => {
     unmount();
   });
 });
+
+describe("DomEditSelectionChrome with body drag off", () => {
+  const rect = { left: 10, top: 10, width: 200, height: 100, editScaleX: 1, editScaleY: 1 };
+  const gestureSpies = () => ({
+    startGesture: vi.fn(),
+    startGroupDrag: vi.fn(),
+    startBlockedMove: vi.fn(),
+  });
+  const press = (el: Element) => {
+    const event = new PointerEvent("pointerdown", {
+      bubbles: true,
+      cancelable: true,
+      button: 0,
+      pointerId: 1,
+    });
+    act(() => {
+      el.dispatchEvent(event);
+    });
+    return event;
+  };
+
+  function renderChrome(allowBodyDrag: boolean) {
+    const element = document.createElement("div");
+    document.body.append(element);
+    const { selection, host, root } = selectionFixture(element, "#box", true);
+    const hostPress = vi.fn();
+    host.addEventListener("pointerdown", hostPress);
+    const gestures = gestureSpies();
+    act(() => {
+      root.render(
+        <DomEditSelectionChrome
+          selection={selection}
+          overlayRect={rect}
+          allowCanvasMovement
+          allowBodyDrag={allowBodyDrag}
+          boxRef={createRef()}
+          boxChromeClass=""
+          boxClipPath={undefined}
+          selectionKey="box"
+          groupSelectionCount={0}
+          gestures={gestures as never}
+          onBoxMouseDown={vi.fn()}
+          onBoxClick={vi.fn()}
+        />,
+      );
+    });
+    const box = host.querySelector<HTMLElement>('[data-dom-edit-selection-box="true"]')!;
+    return { host, box, gestures, hostPress, cleanup: () => act(() => root.unmount()) };
+  }
+
+  it("leaves a body press untouched for the host: no drag, no capture, no cursor", () => {
+    const { box, gestures, hostPress, cleanup } = renderChrome(false);
+    const event = press(box);
+    expect(hostPress).toHaveBeenCalledTimes(1);
+    expect(event.defaultPrevented).toBe(false);
+    expect(box.hasPointerCapture(1)).toBe(false);
+    expect(gestures.startGesture).not.toHaveBeenCalled();
+    expect(gestures.startBlockedMove).not.toHaveBeenCalled();
+    expect(box.style.cursor).toBe("");
+    cleanup();
+  });
+
+  it("keeps the resize and rotate handles working", () => {
+    const { host, gestures, cleanup } = renderChrome(false);
+    const corner = host.querySelector<HTMLElement>('[style*="nwse-resize"]')!;
+    press(corner);
+    expect(gestures.startGesture).toHaveBeenCalledWith("resize", expect.anything(), {
+      resizeHandle: "nw",
+    });
+    press(host.querySelector('[aria-label="Rotate selection"]')!);
+    expect(gestures.startGesture).toHaveBeenCalledWith("rotate", expect.anything());
+    cleanup();
+  });
+
+  it("still drags the body by default", () => {
+    const { box, gestures, cleanup } = renderChrome(true);
+    press(box);
+    expect(gestures.startGesture).toHaveBeenCalledWith("drag", expect.anything());
+    expect(box.style.cursor).toBe("move");
+    cleanup();
+  });
+
+  it("leaves a group body press untouched too", () => {
+    const { host, root } = selectionFixture(document.createElement("div"), "#g", true);
+    const hostPress = vi.fn();
+    host.addEventListener("pointerdown", hostPress);
+    const gestures = gestureSpies();
+    act(() => {
+      root.render(
+        <DomEditGroupChrome
+          groupOverlayItems={[]}
+          groupBounds={rect}
+          allowCanvasMovement
+          allowBodyDrag={false}
+          groupCanMove
+          gestures={gestures as never}
+          onBoxMouseDown={vi.fn()}
+          onBoxClick={vi.fn()}
+        />,
+      );
+    });
+    const groupBox = host.querySelector<HTMLElement>('[data-dom-edit-selection-box="true"]')!;
+    const event = press(groupBox);
+    expect(groupBox.style.cursor).toBe("");
+    expect(hostPress).toHaveBeenCalledTimes(1);
+    expect(event.defaultPrevented).toBe(false);
+    expect(gestures.startGroupDrag).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});