@hyperframes/studio 0.8.107 → 0.8.109

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-NCUBAVGK.js";
+} from "./chunk-5VSXRGIX.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.107",
+  "version": "0.8.109",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.107",
-    "@hyperframes/core": "0.8.107",
-    "@hyperframes/sdk": "0.8.107",
-    "@hyperframes/shader-transitions": "0.8.107",
-    "@hyperframes/studio-server": "0.8.107",
-    "@hyperframes/player": "0.8.107"
+    "@hyperframes/core": "0.8.109",
+    "@hyperframes/parsers": "0.8.109",
+    "@hyperframes/sdk": "0.8.109",
+    "@hyperframes/shader-transitions": "0.8.109",
+    "@hyperframes/player": "0.8.109",
+    "@hyperframes/studio-server": "0.8.109"
   },
   "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.107"
+    "@hyperframes/producer": "0.8.109"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -17,11 +17,7 @@ import { useFileManager } from "./hooks/useFileManager";
 import { usePreviewPersistence } from "./hooks/usePreviewPersistence";
 import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion";
 import { useTimelineEditing } from "./hooks/useTimelineEditing";
-import {
-  persistTimelineMoveEditsAtomically,
-  type TimelineMoveEditsHandler,
-  type TimelineMoveOperation,
-} from "./hooks/timelineMoveAdapter";
+import { useTimelineMoveEditsHandler } from "./hooks/timelineMoveAdapter";
 import type { TimelineZIndexReorderCommit } from "./hooks/useTimelineEditingTypes";
 import type { BlockPreviewInfo } from "./components/sidebar/BlocksTab";
 import { useDomEditSession } from "./hooks/useDomEditSession";
@@ -179,12 +175,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     invalidateGsapCache,
     handleDomZIndexReorderCommitRef,
   });
-  const handleTimelineElementsMove: TimelineMoveEditsHandler = useCallback(
-    async (edits, coalesceKey, operation: TimelineMoveOperation = "timing", coalesceMs) => {
-      const deps = { handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove };
-      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
-    },
-    [timelineEditing.handleTimelineGroupMove],
+  const handleTimelineElementsMove = useTimelineMoveEditsHandler(
+    timelineEditing.handleTimelineGroupMove,
   );
   const {
     addAssetAtPlayhead: handleAddAssetAtPlayhead,
@@ -246,6 +238,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   });
   const appHotkeys = useAppHotkeys({
     handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
+    handleLinkEdit: timelineEditing.handleLinkEdit,
+    handleTimelineElementDeleteOnly: timelineEditing.handleTimelineElementDeleteOnly,
     handleTimelineElementSplit: timelineEditing.handleTimelineElementSplit,
     handleDomEditElementDelete: domEditDeleteBridge,
     domEditSelectionRef: domEditSelectionBridgeRef,
@@ -552,6 +546,9 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
                   handleRazorSplit={timelineEditing.handleRazorSplit}
                   handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
+                  handleFreezeFrame={timelineEditing.handleFreezeFrame}
+                  handleLinkEdit={timelineEditing.handleLinkEdit}
+                  handleTimelineElementDeleteOnly={timelineEditing.handleTimelineElementDeleteOnly}
                   onCopyClip={handleCopy}
                   onPasteClip={handlePaste}
                   onDuplicateClip={handleDuplicate}

package/src/components/EditorShell.tsx

@@ -103,6 +103,9 @@ export function EditorShell({
   handleTimelineElementSplit,
   handleRazorSplit,
   handleRazorSplitAll,
+  handleFreezeFrame,
+  handleLinkEdit,
+  handleTimelineElementDeleteOnly,
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
@@ -163,6 +166,9 @@ export function EditorShell({
     handleTimelineElementSplit,
     handleRazorSplit,
     handleRazorSplitAll,
+    handleFreezeFrame,
+    handleLinkEdit,
+    handleTimelineElementDeleteOnly,
   });
 
   return (

package/src/components/LinkedSelectionToggle.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+import { LinkSimple } from "@phosphor-icons/react";
+import { useContextMenuDismiss } from "../hooks/useContextMenuDismiss";
+import { useMenuKeyboardNav } from "../player/components/menuKeyboardNav";
+import { useLinkedClipPreferences } from "../utils/linkedClipPreferences";
+import { Tooltip } from "./ui";
+import { flatActive, flatIdle } from "./timelineToolbarStyles";
+
+function SyncIndicatorMenu({ x, y, onClose }: { x: number; y: number; onClose: () => void }) {
+  const menuRef = useContextMenuDismiss(onClose);
+  useMenuKeyboardNav(menuRef);
+  const visible = useLinkedClipPreferences((s) => s.syncIndicatorsVisible);
+  const setVisible = useLinkedClipPreferences((s) => s.setSyncIndicatorsVisible);
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Linked clips"
+      className="fixed z-200 min-w-[200px] rounded-sm border border-neutral-700 bg-neutral-900 py-1 shadow-lg"
+      style={{ left: x, top: y }}
+    >
+      <button
+        type="button"
+        role="menuitemcheckbox"
+        aria-checked={visible}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-neutral-300 outline-hidden hover:bg-neutral-800 focus-visible:bg-neutral-800"
+        onClick={() => {
+          setVisible(!visible);
+          onClose();
+        }}
+      >
+        <span className="w-3 text-studio-accent">{visible ? "✓" : ""}</span>
+        Show out-of-sync indicators
+      </button>
+    </div>,
+    document.body,
+  );
+}
+
+/** Premiere's Linked Selection; right-click holds the out-of-sync indicator preference. */
+export function LinkedSelectionToggle() {
+  const linkedSelection = useLinkedClipPreferences((s) => s.linkedSelection);
+  const setLinkedSelection = useLinkedClipPreferences((s) => s.setLinkedSelection);
+  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
+  const closeMenu = useCallback(() => setMenuAt(null), []);
+  return (
+    <>
+      <Tooltip
+        label={
+          linkedSelection
+            ? "Linked Selection on — a click selects both halves (⌥-click for one)"
+            : "Linked Selection off — a click selects one clip"
+        }
+      >
+        <button
+          type="button"
+          onClick={() => setLinkedSelection(!linkedSelection)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setMenuAt({ x: e.clientX, y: e.clientY });
+          }}
+          aria-label="Linked Selection"
+          aria-pressed={linkedSelection}
+          className={linkedSelection ? flatActive : flatIdle}
+        >
+          <LinkSimple size={16} weight="bold" aria-hidden="true" />
+        </button>
+      </Tooltip>
+      {menuAt && <SyncIndicatorMenu x={menuAt.x} y={menuAt.y} onClose={closeMenu} />}
+    </>
+  );
+}

package/src/components/TimelineToolbar.test.tsx

@@ -391,3 +391,34 @@ describe("TimelineToolbar add beat", () => {
     act(() => root.unmount());
   });
 });
+
+describe("TimelineToolbar Linked Selection", () => {
+  it("is on by default, first among the editing toggles, and persists a click", async () => {
+    const { useLinkedClipPreferences } = await import("../utils/linkedClipPreferences");
+    const { host } = renderToolbar();
+    const button = host.querySelector<HTMLButtonElement>('button[aria-label="Linked Selection"]');
+    expect(button?.getAttribute("aria-pressed")).toBe("true");
+    const snapping = host.querySelector('button[aria-label="Toggle timeline snapping"]');
+    expect(snapping && button?.compareDocumentPosition(snapping)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    act(() => button?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(button?.getAttribute("aria-pressed")).toBe("false");
+    expect(readStudioUiPreferences().linkedSelectionEnabled).toBe(false);
+    act(() => useLinkedClipPreferences.getState().setLinkedSelection(true));
+  });
+
+  it("right-click toggles the out-of-sync indicator preference", async () => {
+    const { useLinkedClipPreferences } = await import("../utils/linkedClipPreferences");
+    const { host } = renderToolbar();
+    const button = host.querySelector('button[aria-label="Linked Selection"]');
+    act(() => button?.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true })));
+    const item = document.querySelector<HTMLButtonElement>('[role="menuitemcheckbox"]');
+    expect(item?.textContent).toContain("Show out-of-sync indicators");
+    expect(item?.getAttribute("aria-checked")).toBe("true");
+    act(() => item?.click());
+    expect(useLinkedClipPreferences.getState().syncIndicatorsVisible).toBe(false);
+    expect(readStudioUiPreferences().syncIndicatorsVisible).toBe(false);
+    act(() => useLinkedClipPreferences.getState().setSyncIndicatorsVisible(true));
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -31,6 +31,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
+import { LinkedSelectionToggle } from "./LinkedSelectionToggle";
 import { useProjectHasAudio } from "../utils/audioMeterMath";
 import { canAddBeatAt, addBeatAtCompositionTime } from "../utils/beatEditActions";
 import { isTypingTarget } from "../utils/typingTarget";
@@ -218,6 +219,7 @@ export function TimelineToolbar({
           <TimelineToolPicker showSelectAroundPlayhead={showSelectAroundPlayhead} />
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
+          <LinkedSelectionToggle />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>
             <button
               type="button"

package/src/components/editor/CropPresetBar.tsx

@@ -0,0 +1,69 @@
+import { useEffect } from "react";
+import type { ClipPathInsetSides } from "./clipPathHelpers";
+import { CROP_ASPECT_PRESETS, centredCropInsets } from "./cropPresets";
+
+interface CropPresetBarProps {
+  left: number;
+  top: number;
+  elementWidth: number;
+  elementHeight: number;
+  /** Centred insets for a ratio, or `null` to remove the crop. */
+  onApply: (insets: ClipPathInsetSides | null) => void;
+  onDone: () => void;
+}
+
+const CHIP =
+  "rounded-sm border border-white/20 px-1.5 py-0.5 text-[10px] text-white/85 hover:bg-white/10";
+
+/** Free · aspect presets · Reset · Done, floating above the element being cropped. */
+export function CropPresetBar({
+  left,
+  top,
+  elementWidth,
+  elementHeight,
+  onApply,
+  onDone,
+}: CropPresetBarProps) {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onDone();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onDone]);
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="Crop presets"
+      data-dom-edit-crop-bar="true"
+      className="pointer-events-auto absolute z-20 flex gap-1 rounded-md border border-white/15 bg-neutral-900/95 p-1 shadow-lg"
+      style={{ left, top: Math.max(4, top - 34), transform: "translateX(-50%)" }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <button type="button" className={CHIP} title="Drag the edges freely">
+        Free
+      </button>
+      {CROP_ASPECT_PRESETS.map((preset) => (
+        <button
+          key={preset.label}
+          type="button"
+          className={CHIP}
+          onClick={() => onApply(centredCropInsets(elementWidth, elementHeight, preset.ratio))}
+        >
+          {preset.label}
+        </button>
+      ))}
+      <button type="button" className={CHIP} onClick={() => onApply(null)}>
+        Reset
+      </button>
+      <button
+        type="button"
+        className="rounded-sm border border-studio-accent bg-studio-accent px-1.5 py-0.5 text-[10px] font-semibold text-black"
+        onClick={onDone}
+      >
+        Done
+      </button>
+    </div>
+  );
+}

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

@@ -6,6 +6,7 @@ import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 import { DomEditCropHandles } from "./DomEditCropHandles";
 import { isElementCropLifted } from "./domEditOverlayCrop";
+import { useCropPresetBarStore } from "./cropPresetStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -272,3 +273,46 @@ describe("DomEditCropHandles leaves the corner resize dots free", () => {
     expect(handles().map((h) => h.label)).toEqual(["Crop top", "Crop bottom"]);
   });
 });
+
+describe("DomEditCropHandles preset bar", () => {
+  const click = (label: string) => {
+    const button = Array.from(document.querySelectorAll<HTMLButtonElement>("button")).find(
+      (b) => b.textContent === label,
+    );
+    act(() => button?.click());
+  };
+
+  afterEach(() => useCropPresetBarStore.getState().close());
+
+  it("shows only for the clip the menu opened it for", () => {
+    const a = makeEl("a", "");
+    useCropPresetBarStore.getState().open({ id: "other" });
+    render(a);
+    expect(document.querySelector("[data-dom-edit-crop-bar]")).toBeNull();
+  });
+
+  it("commits a centred 1:1 crop, then Reset removes the clip-path", async () => {
+    const a = makeEl("a", "");
+    const commits: string[] = [];
+    useCropPresetBarStore.getState().open({ id: "a" });
+    const { root } = render(a, (_property, value) => {
+      commits.push(value);
+    });
+    click("1:1");
+    await act(async () => {});
+    expect(commits[0]).toBe("inset(0px 50px 0px 50px)");
+    click("Reset");
+    await act(async () => {});
+    expect(commits[1]).toBe("");
+    act(() => root.unmount());
+    expect(a.style.getPropertyValue("clip-path")).toBe("");
+  });
+
+  it("Done closes the bar", () => {
+    const a = makeEl("a", "");
+    useCropPresetBarStore.getState().open({ id: "a" });
+    render(a);
+    click("Done");
+    expect(useCropPresetBarStore.getState().openFor).toBeNull();
+  });
+});

package/src/components/editor/DomEditCropHandles.tsx

@@ -15,6 +15,8 @@ import {
 } from "./domEditOverlayCrop";
 import { buildInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelpers";
 import { readCropFollowingResize } from "./cropResize";
+import { isCropBarTarget, useCropPresetBarStore } from "./cropPresetStore";
+import { CropPresetBar } from "./CropPresetBar";
 
 interface CropGestureState {
   edge: CropEdge | "move";
@@ -119,6 +121,9 @@ export function DomEditCropHandles({
     return { element, croppable: parsed !== null, insets: { top, right, bottom, left } };
   };
   const [state, setState] = useState(() => cropStateFor(selection.element));
+  const presetBarTarget = useCropPresetBarStore((s) => s.openFor);
+  const closePresetBar = useCropPresetBarStore((s) => s.close);
+  const showPresetBar = isCropBarTarget(selection.element, presetBarTarget);
 
   // Re-sync when the selection targets a different element (reselect, or an
   // undo/redo that re-keys the node).
@@ -223,10 +228,21 @@ export function DomEditCropHandles({
     // the lift keeps it hidden while selected. A drag that ends where it started saves nothing.
     const value = buildInsetClipPathSides(gesture.insets, gesture.radius);
     if (value === buildInsetClipPathSides(gesture.startInsets, gesture.radius)) return;
+    commitClipPath(value);
+  };
+
+  const commitClipPath = (value: string) => {
     const commit = onStyleCommit?.("clip-path", value);
     void Promise.resolve(commit).catch(() => undefined);
   };
 
+  const applyPresetInsets = (insets: ClipPathInsetSides | null) => {
+    const next = insets ?? { top: 0, right: 0, bottom: 0, left: 0 };
+    setState((prev) => ({ ...prev, insets: next }));
+    const radius = readCropFollowingResize(selection.element)?.radius ?? 0;
+    commitClipPath(insets === null ? "" : buildInsetClipPathSides(next, radius));
+  };
+
   const cancelCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = endCropGesture(event);
     if (!gesture) return;
@@ -239,119 +255,131 @@ export function DomEditCropHandles({
   if (!state.croppable) return null;
 
   return (
-    <div
-      data-dom-edit-crop-frame="true"
-      className="pointer-events-none absolute"
-      style={{
-        left: frame.left,
-        top: frame.top,
-        width: frame.width,
-        height: frame.height,
-        transform: frame.angleDeg !== 0 ? `rotate(${frame.angleDeg}deg)` : undefined,
-      }}
-    >
-      {/* Dim the cropped-away area whenever the element is cropped and selected,
-          so the hidden content is visible (ghosted) without dragging. Clipped to
-          the element's own (rotated) box. */}
-      {hasCrop && (
-        <div className="pointer-events-none absolute inset-0 overflow-hidden">
-          <div
-            className="absolute"
-            style={{
-              left: cropRect.left,
-              top: cropRect.top,
-              width: cropRect.width,
-              height: cropRect.height,
-              boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)",
-            }}
-          />
-        </div>
+    <>
+      {showPresetBar && onStyleCommit && (
+        <CropPresetBar
+          left={frame.left + frame.width / 2}
+          top={frame.top}
+          elementWidth={width}
+          elementHeight={height}
+          onApply={applyPresetInsets}
+          onDone={closePresetBar}
+        />
       )}
-      {/* Dashed clip outline on the crop boundary, with a rule-of-thirds grid
-          shown while dragging. */}
       <div
-        aria-hidden="true"
-        className="pointer-events-none absolute border border-dashed border-studio-accent"
+        data-dom-edit-crop-frame="true"
+        className="pointer-events-none absolute"
         style={{
-          left: cropRect.left,
-          top: cropRect.top,
-          width: cropRect.width,
-          height: cropRect.height,
+          left: frame.left,
+          top: frame.top,
+          width: frame.width,
+          height: frame.height,
+          transform: frame.angleDeg !== 0 ? `rotate(${frame.angleDeg}deg)` : undefined,
         }}
       >
-        {dragging && (
-          <>
-            <div className="absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" />
-            <div className="absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" />
-            <div className="absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" />
-            <div className="absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" />
-          </>
+        {/* Dim the cropped-away area whenever the element is cropped and selected,
+            so the hidden content is visible (ghosted) without dragging. Clipped to
+            the element's own (rotated) box. */}
+        {hasCrop && (
+          <div className="pointer-events-none absolute inset-0 overflow-hidden">
+            <div
+              className="absolute"
+              style={{
+                left: cropRect.left,
+                top: cropRect.top,
+                width: cropRect.width,
+                height: cropRect.height,
+                boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)",
+              }}
+            />
+          </div>
         )}
-      </div>
-      {/* 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 && repositionSize > 0 && (
-        <button
-          type="button"
-          aria-label="Reposition crop"
-          title="Reposition crop"
-          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)]"
+        {/* Dashed clip outline on the crop boundary, with a rule-of-thirds grid
+            shown while dragging. */}
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute border border-dashed border-studio-accent"
           style={{
-            left: cropRect.left + (cropRect.width - repositionSize) / 2,
-            top: cropRect.top + (cropRect.height - repositionSize) / 2,
-            width: repositionSize,
-            height: repositionSize,
-            cursor: "move",
-            touchAction: "none",
+            left: cropRect.left,
+            top: cropRect.top,
+            width: cropRect.width,
+            height: cropRect.height,
           }}
-          onPointerDown={(event) => startCropGesture("move", event)}
-          onPointerMove={updateCropGesture}
-          onPointerUp={finishCropGesture}
-          onPointerCancel={cancelCropGesture}
-        />
-      )}
-      {/* Edge handles — drag a side to crop it. Positioned just OUTSIDE the crop
-          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 layout = edgeHandleLayout(edge, cropRect);
-        if (!layout) return null;
-        const revealed = dragging || hasCrop || hotEdge === edge;
-        return (
+        >
+          {dragging && (
+            <>
+              <div className="absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" />
+              <div className="absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" />
+              <div className="absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" />
+              <div className="absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" />
+            </>
+          )}
+        </div>
+        {/* 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 && repositionSize > 0 && (
           <button
-            key={edge}
             type="button"
-            aria-label={`Crop ${edge}`}
-            title="Crop"
+            aria-label="Reposition crop"
+            title="Reposition crop"
             data-dom-edit-crop-handle="true"
-            className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
+            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={{
-              ...layout.hit,
-              cursor: layout.cursor,
+              left: cropRect.left + (cropRect.width - repositionSize) / 2,
+              top: cropRect.top + (cropRect.height - repositionSize) / 2,
+              width: repositionSize,
+              height: repositionSize,
+              cursor: "move",
               touchAction: "none",
             }}
-            onPointerEnter={() => setHotEdge(edge)}
-            onPointerLeave={() => setHotEdge((prev) => (prev === edge ? null : prev))}
-            onPointerDown={(event) => startCropGesture(edge, event)}
+            onPointerDown={(event) => startCropGesture("move", event)}
             onPointerMove={updateCropGesture}
             onPointerUp={finishCropGesture}
             onPointerCancel={cancelCropGesture}
-          >
-            <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"
+          />
+        )}
+        {/* Edge handles — drag a side to crop it. Positioned just OUTSIDE the crop
+            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 layout = edgeHandleLayout(edge, cropRect);
+          if (!layout) return null;
+          const revealed = dragging || hasCrop || hotEdge === edge;
+          return (
+            <button
+              key={edge}
+              type="button"
+              aria-label={`Crop ${edge}`}
+              title="Crop"
+              data-dom-edit-crop-handle="true"
+              className="pointer-events-auto absolute flex items-center justify-center border-0 bg-transparent p-0"
               style={{
-                ...layout.pill,
-                opacity: revealed ? 1 : 0,
+                ...layout.hit,
+                cursor: layout.cursor,
+                touchAction: "none",
               }}
-            />
-          </button>
-        );
-      })}
-    </div>
+              onPointerEnter={() => setHotEdge(edge)}
+              onPointerLeave={() => setHotEdge((prev) => (prev === edge ? null : prev))}
+              onPointerDown={(event) => startCropGesture(edge, event)}
+              onPointerMove={updateCropGesture}
+              onPointerUp={finishCropGesture}
+              onPointerCancel={cancelCropGesture}
+            >
+              <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={{
+                  ...layout.pill,
+                  opacity: revealed ? 1 : 0,
+                }}
+              />
+            </button>
+          );
+        })}
+      </div>
+    </>
   );
 }