@hyperframes/studio 0.8.106 → 0.8.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.106",
+  "version": "0.8.108",
   "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.106",
-    "@hyperframes/parsers": "0.8.106",
-    "@hyperframes/sdk": "0.8.106",
-    "@hyperframes/player": "0.8.106",
-    "@hyperframes/shader-transitions": "0.8.106",
-    "@hyperframes/studio-server": "0.8.106"
+    "@hyperframes/core": "0.8.108",
+    "@hyperframes/parsers": "0.8.108",
+    "@hyperframes/player": "0.8.108",
+    "@hyperframes/sdk": "0.8.108",
+    "@hyperframes/studio-server": "0.8.108",
+    "@hyperframes/shader-transitions": "0.8.108"
   },
   "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.106"
+    "@hyperframes/producer": "0.8.108"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -30,6 +30,7 @@ import { useStudioSdkSessions } from "./hooks/useStudioSdkSessions";
 import { useStudioExternalFileChanges } from "./hooks/useStudioExternalFileChanges";
 import { useBlockHandlers } from "./hooks/useBlockHandlers";
 import { useAppHotkeys } from "./hooks/useAppHotkeys";
+import { trackedStudioEdit } from "./utils/studioPendingEdits";
 import { useClipboard } from "./hooks/useClipboard";
 import { deleteSelectedKeyframes } from "./hooks/timelineEditingHelpers";
 import { useCaptionDetection } from "./hooks/useCaptionDetection";
@@ -256,7 +257,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
     showHistoryRestoreNow: previewPersistence.showHistoryRestoreNow,
-    waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
+    settlePendingEdits: previewPersistence.settlePendingEdits,
     handleCopy,
     handlePaste,
     handleCut,
@@ -315,9 +316,10 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     readOnlyPreview,
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
-  handleDomZIndexReorderCommitRef.current = domEditSession.handleDomZIndexReorderCommit;
+  const { handleDomZIndexReorderCommit: zCommit, handleDomEditElementDelete: del } = domEditSession;
+  handleDomZIndexReorderCommitRef.current = trackedStudioEdit(zCommit);
   clearDomSelectionRef.current = domEditSession.clearDomSelection;
-  handleDomEditElementDeleteRef.current = domEditSession.handleDomEditElementDelete;
+  handleDomEditElementDeleteRef.current = trackedStudioEdit(del);
   resetKeyframesRef.current = domEditSession.handleResetSelectedElementKeyframes;
   invalidateGsapCacheRef.current = domEditSession.invalidateGsapCache;
   deleteSelectedKeyframesRef.current = () => deleteSelectedKeyframes(domEditSession);
@@ -550,6 +552,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
                   handleRazorSplit={timelineEditing.handleRazorSplit}
                   handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
+                  handleFreezeFrame={timelineEditing.handleFreezeFrame}
                   onCopyClip={handleCopy}
                   onPasteClip={handlePaste}
                   onDuplicateClip={handleDuplicate}

package/src/agentToolsExport.test.ts

@@ -0,0 +1,8 @@
+import { expect, it } from "vitest";
+import { buildStudioTools, collectStudioLookScene } from "@hyperframes/studio";
+
+it("exports Studio's agent tools for a host's own edit session", () => {
+  const names = buildStudioTools({ current: {} as never }).map((tool) => tool.name);
+  expect(names).toEqual(expect.arrayContaining(["studio_look", "studio_seek"]));
+  expect(typeof collectStudioLookScene).toBe("function");
+});

package/src/captions/keyboard.test.ts

@@ -53,4 +53,10 @@ describe("shouldHandleCaptionNudgeKey", () => {
     expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), div)).toBe(true);
     expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), null)).toBe(true);
   });
+
+  it.each(["video", "audio"])("leaves the arrows to a focused <%s controls>", (tag) => {
+    const player = document.createElement(tag);
+    player.setAttribute("controls", "");
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowRight"), player)).toBe(false);
+  });
 });

package/src/components/EditorShell.tsx

@@ -103,6 +103,7 @@ export function EditorShell({
   handleTimelineElementSplit,
   handleRazorSplit,
   handleRazorSplitAll,
+  handleFreezeFrame,
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
@@ -163,6 +164,7 @@ export function EditorShell({
     handleTimelineElementSplit,
     handleRazorSplit,
     handleRazorSplitAll,
+    handleFreezeFrame,
   });
 
   return (

package/src/components/StudioRightPanels.tsx

@@ -62,6 +62,7 @@ export function StudioRightPanels({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -210,6 +211,7 @@ export function StudioRightPanels({
         onSetStyle={handleDomStyleCommit}
         onSetAttribute={handleDomAttributeCommit}
         onSetAttributes={handleDomAttributesCommit}
+        onSetAttributeBatch={handleDomAttributeBatchCommit}
         onSetAttributeLive={setAttributeWhileDragging}
         onSetAttributeQuiet={handleDomAttributeQuietCommit}
         onApplyColorGradingScope={handleApplyColorGradingScope}

package/src/components/TimelineToolbar.test.tsx

@@ -211,6 +211,33 @@ describe("TimelineToolbar — keyframes on audio tracks", () => {
   });
 });
 
+describe("TimelineToolbar snap key", () => {
+  let root: ReturnType<typeof createRoot> | null = null;
+  const snapBefore = usePlayerStore.getState().timelineSnapEnabled;
+  afterEach(() => {
+    act(() => root?.unmount());
+    root = null;
+    usePlayerStore.getState().setTimelineSnapEnabled(snapBefore);
+  });
+
+  it("N toggles snapping, but not while a picker that owns typing has focus", () => {
+    root = renderToolbar().root;
+    const pressN = (target: EventTarget) =>
+      act(() => {
+        target.dispatchEvent(new KeyboardEvent("keydown", { key: "n", bubbles: true }));
+      });
+    const before = usePlayerStore.getState().timelineSnapEnabled;
+    const picker = document.createElement("button");
+    picker.setAttribute("role", "combobox");
+    document.body.append(picker);
+
+    pressN(picker);
+    expect(usePlayerStore.getState().timelineSnapEnabled).toBe(before);
+    pressN(document.body);
+    expect(usePlayerStore.getState().timelineSnapEnabled).toBe(!before);
+  });
+});
+
 describe("TimelineToolbar Fit", () => {
   it("shows Fit as a named icon and says whether fit is on", () => {
     const { host, root } = renderToolbar();

package/src/components/TimelineToolbar.tsx

@@ -33,6 +33,7 @@ import { canSplitElement } from "../utils/timelineElementSplit";
 import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
 import { useProjectHasAudio } from "../utils/audioMeterMath";
 import { canAddBeatAt, addBeatAtCompositionTime } from "../utils/beatEditActions";
+import { isTypingTarget } from "../utils/typingTarget";
 
 interface DomEditSessionSlice extends EnableKeyframesSession {
   domEditSelection: DomEditSelection | null;
@@ -196,14 +197,10 @@ export function TimelineToolbar({
   // "N" toggles timeline snapping (industry convention: Resolve/FCP).
   // Skip when typing in an input/contenteditable.
   useEffect(() => {
-    // fallow-ignore-next-line complexity
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
-      const target = e.target instanceof HTMLElement ? e.target : null;
-      if (target?.isContentEditable) return;
-      const tag = target?.tagName?.toLowerCase() ?? "";
-      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (isTypingTarget(e.target)) return;
       const store = usePlayerStore.getState();
       store.setTimelineSnapEnabled(!store.timelineSnapEnabled);
     };

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>
+    </>
   );
 }

package/src/components/editor/DomEditOverlay.tsx

@@ -32,7 +32,7 @@ import { CanvasContextMenu } from "./CanvasContextMenu";
 import { useInlineTextEditing } from "./useInlineTextEditing";
 import { usePreviewReadOnly } from "./previewReadOnlyContext";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import { noteStudioManualEditSave as noteSave } from "./manualEditsDom";
+import { countStudioManualEditSave as counted } from "./manualEditsDom";
 import type { ZOrderAction, ZOrderPatch } from "./canvasContextMenuZOrder";
 import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
 import { logSelect } from "../../utils/selectDebug";
@@ -195,33 +195,27 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     onTextEditingChangeRef.current?.(true);
     return () => onTextEditingChangeRef.current?.(false);
   }, [inlineText.editing]);
-  // Each canvas save is counted before it starts, so a reload requested earlier loads again.
+  // Each canvas save is counted, so a reload requested before it settles loads again.
   const onPathOffsetCommitRef = useRef(onPathOffsetCommit);
-  onPathOffsetCommitRef.current = (sel, ...rest) => {
-    noteSave(sel.element);
-    return onPathOffsetCommit(sel, ...rest);
-  };
+  onPathOffsetCommitRef.current = (sel, ...rest) =>
+    counted(sel.element, () => onPathOffsetCommit(sel, ...rest));
   const onGroupPathOffsetCommitRef = useRef(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = (updates) => {
-    if (updates[0]) noteSave(updates[0].selection.element);
-    return onGroupPathOffsetCommit(updates);
+    const save = () => onGroupPathOffsetCommit(updates);
+    return updates[0] ? counted(updates[0].selection.element, save) : save();
   };
   const onBoxSizeCommitRef = useRef(onBoxSizeCommit);
-  onBoxSizeCommitRef.current = (sel, ...rest) => {
-    noteSave(sel.element);
-    return onBoxSizeCommit(sel, ...rest);
-  };
+  onBoxSizeCommitRef.current = (sel, ...rest) =>
+    counted(sel.element, () => onBoxSizeCommit(sel, ...rest));
   const onRotationCommitRef = useRef(onRotationCommit);
-  onRotationCommitRef.current = (sel, next) => {
-    noteSave(sel.element);
-    return onRotationCommit(sel, next);
-  };
+  onRotationCommitRef.current = (sel, next) =>
+    counted(sel.element, () => onRotationCommit(sel, next));
   const onStyleCommitRef = useRef(onStyleCommit);
   onStyleCommitRef.current =
     onStyleCommit &&
     ((property, value) => {
-      if (selectionRef.current) noteSave(selectionRef.current.element);
-      return onStyleCommit(property, value);
+      const save = () => onStyleCommit(property, value);
+      return selectionRef.current ? counted(selectionRef.current.element, save) : save();
     });
   const onBlockedMoveRef = useRef(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;