@hyperframes/studio 0.7.44 → 0.7.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.44",
+  "version": "0.7.46",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.7.44",
-    "@hyperframes/core": "0.7.44",
-    "@hyperframes/sdk": "0.7.44",
-    "@hyperframes/studio-server": "0.7.44",
-    "@hyperframes/parsers": "0.7.44"
+    "@hyperframes/core": "0.7.46",
+    "@hyperframes/player": "0.7.46",
+    "@hyperframes/parsers": "0.7.46",
+    "@hyperframes/sdk": "0.7.46",
+    "@hyperframes/studio-server": "0.7.46"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.44"
+    "@hyperframes/producer": "0.7.46"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -37,7 +37,6 @@ import {
 import type { DomEditSelection } from "./components/editor/domEditing";
 import { StudioHeader } from "./components/StudioHeader";
 import { useGestureCommit } from "./hooks/useGestureCommit";
-import { useCropModeProps } from "./hooks/useCropMode";
 import { STUDIO_KEYFRAMES_ENABLED } from "./components/editor/manualEditingAvailability";
 import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
 import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
@@ -83,7 +82,6 @@ export function StudioApp() {
   const [refreshKey, setRefreshKey] = useState(0);
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState(0);
   const [blockPreview, setBlockPreview] = useState<BlockPreviewInfo | null>(null);
-  const cropModeProps = useCropModeProps();
   const previewIframeRef = useRef<HTMLIFrameElement | null>(null);
   const activeCompPathRef = useRef(activeCompPath);
   activeCompPathRef.current = activeCompPath;
@@ -542,7 +540,6 @@ export function StudioApp() {
                       recordingState={gestureState}
                       onToggleRecording={recordingToggle}
                       blockPreview={blockPreview}
-                      {...cropModeProps}
                       gestureOverlay={
                         gestureState === "recording" && previewIframe ? (
                           <GestureTrailOverlay
@@ -571,7 +568,6 @@ export function StudioApp() {
                         reloadPreview={reloadPreview}
                         domEditSaveTimestampRef={domEditSaveTimestampRef}
                         recordEdit={editHistory.recordEdit}
-                        {...cropModeProps}
                         onToggleElementHidden={timelineEditing.handleToggleElementHidden}
                       />
                     )}

package/src/components/StudioPreviewArea.tsx

@@ -70,8 +70,6 @@ export interface StudioPreviewAreaProps {
   isGestureRecording?: boolean;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;
-  cropMode?: boolean;
-  onCropModeChange?: (active: boolean) => void;
   gestureOverlay?: ReactNode;
 }
 
@@ -97,8 +95,6 @@ export function StudioPreviewArea({
   isGestureRecording,
   recordingState,
   onToggleRecording,
-  cropMode,
-  onCropModeChange,
   blockPreview,
   gestureOverlay,
 }: StudioPreviewAreaProps) {
@@ -387,8 +383,6 @@ export function StudioPreviewArea({
                     onBoxSizeCommit={handleDomBoxSizeCommit}
                     onRotationCommit={handleDomRotationCommit}
                     onStyleCommit={handleDomStyleCommit}
-                    cropMode={cropMode}
-                    onCropModeChange={onCropModeChange}
                     gridVisible={snapPrefs.gridVisible}
                     gridSpacing={snapPrefs.gridSpacing}
                     recordingState={recordingState}

package/src/components/StudioRightPanel.tsx

@@ -51,8 +51,6 @@ export interface StudioRightPanelProps {
   recordingState?: "idle" | "recording" | "preview";
   recordingDuration?: number;
   onToggleRecording?: () => void;
-  cropMode?: boolean;
-  onCropModeChange?: (active: boolean) => void;
   /** Dependencies for the Slideshow persist callback, threaded from App.tsx. */
   sdkSession: Composition | null;
   reloadPreview: () => void;
@@ -73,8 +71,6 @@ export function StudioRightPanel({
   recordingState,
   recordingDuration,
   onToggleRecording,
-  cropMode,
-  onCropModeChange,
   sdkSession,
   reloadPreview,
   domEditSaveTimestampRef,
@@ -400,8 +396,6 @@ export function StudioRightPanel({
       recordingState={recordingState}
       recordingDuration={recordingDuration}
       onToggleRecording={onToggleRecording}
-      cropMode={cropMode}
-      onCropModeChange={onCropModeChange}
     />
   );
 

package/src/components/editor/DomEditCropHandles.tsx

@@ -25,24 +25,50 @@ interface DomEditCropHandlesProps {
   onStyleCommit?: (property: string, value: string) => Promise<void> | void;
 }
 
-function handleCenter(
+// Gap (px) between an edge handle and the element edge, so the handle sits
+// clear of the element body and can't intercept a move-drag.
+const EDGE_HANDLE_GAP = 8;
+
+/** Place an edge handle just OUTSIDE the given crop edge (translate pushes it
+ *  fully past the boundary). Keeps the element body free for moving. */
+function edgeHandlePlacement(
   edge: CropEdge,
   rect: { left: number; top: number; width: number; height: number },
 ) {
-  if (edge === "top") return { left: rect.left + rect.width / 2, top: rect.top };
-  if (edge === "right") return { left: rect.left + rect.width, top: rect.top + rect.height / 2 };
-  if (edge === "bottom") return { left: rect.left + rect.width / 2, top: rect.top + rect.height };
-  return { left: rect.left, top: rect.top + rect.height / 2 };
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  if (edge === "top") {
+    return { left: cx, top: rect.top - EDGE_HANDLE_GAP, transform: "translate(-50%, -100%)" };
+  }
+  if (edge === "bottom") {
+    return {
+      left: cx,
+      top: rect.top + rect.height + EDGE_HANDLE_GAP,
+      transform: "translate(-50%, 0)",
+    };
+  }
+  if (edge === "left") {
+    return { left: rect.left - EDGE_HANDLE_GAP, top: cy, transform: "translate(-100%, -50%)" };
+  }
+  return {
+    left: rect.left + rect.width + EDGE_HANDLE_GAP,
+    top: cy,
+    transform: "translate(0, -50%)",
+  };
 }
 
 const EDGES: CropEdge[] = ["top", "right", "bottom", "left"];
 
 /**
- * Pro-editor crop: while crop mode is active the element's clip is lifted so
- * the FULL content stays visible; the cropped-out region is dimmed and the
- * edge handles sit on the crop lines. Dragging updates the crop live; release
- * commits `clip-path: inset(...)` through the normal style-commit path (one
- * undo step per drag). Leaving crop mode re-applies the committed crop.
+ * 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
+ * the cropped-away area is dimmed, with a dashed outline + an edge handle per
+ * side on the crop boundary. Dragging an edge crops that side (a rule-of-thirds
+ * grid guides framing); release commits `clip-path: inset(...)` through the
+ * normal style-commit path (one undo step per drag). When cropped, a center
+ * handle pans the crop window. Corners stay free for the selection's own resize
+ * handle. Leaving the selection restores the committed crop. The clip-path model
+ * is the source of truth — nothing here mutates layout.
  */
 export function DomEditCropHandles({
   selection,
@@ -50,6 +76,7 @@ export function DomEditCropHandles({
   onStyleCommit,
 }: DomEditCropHandlesProps) {
   const gestureRef = useRef<CropGestureState | null>(null);
+  const [dragging, setDragging] = useState(false);
   const [state, setState] = useState(() => {
     const parsed = readElementCropInsets(selection.element);
     return {
@@ -64,29 +91,38 @@ export function DomEditCropHandles({
     };
   });
 
-  // Re-sync when the selection element changes (reselect, undo/redo reload).
+  // Re-sync when the selection targets a different element (reselect, or an
+  // undo/redo that re-keys the node): read its committed crop before the lift
+  // effect runs. Read inside the guard so a drag's per-frame setState doesn't
+  // re-run getComputedStyle every frame.
   if (state.element !== selection.element) {
-    const parsed = readElementCropInsets(selection.element);
+    const liveInsets = readElementCropInsets(selection.element);
     setState({
       element: selection.element,
-      insets: { top: parsed.top, right: parsed.right, bottom: parsed.bottom, left: parsed.left },
-      radius: parsed.radius,
+      insets: {
+        top: liveInsets.top,
+        right: liveInsets.right,
+        bottom: liveInsets.bottom,
+        left: liveInsets.left,
+      },
+      radius: liveInsets.radius,
     });
   }
 
-  // The value to re-apply when crop mode ends (latest committed crop).
+  const hasCrop =
+    state.insets.top > 0 ||
+    state.insets.right > 0 ||
+    state.insets.bottom > 0 ||
+    state.insets.left > 0;
+
+  // Latest committed crop — re-applied to the element when the selection drops.
   const committedRef = useRef<string | null>(null);
-  {
-    const hasCrop =
-      state.insets.top > 0 ||
-      state.insets.right > 0 ||
-      state.insets.bottom > 0 ||
-      state.insets.left > 0;
-    committedRef.current = hasCrop ? buildInsetClipPathSides(state.insets, state.radius) : null;
-  }
+  committedRef.current = hasCrop ? buildInsetClipPathSides(state.insets, state.radius) : null;
 
-  // Lift the clip while crop mode is active so the full content shows through
-  // the dim; restore the committed crop on exit/unmount.
+  // Lift the clip while the element is selected so the full content shows and the
+  // cropped-away area can be dimmed; restore the committed crop on deselect. Keyed
+  // on the element so switching selections restores the previous one. Runs after
+  // render, so the state re-sync above still reads the element's real committed clip.
   const liftedRef = useRef(false);
   useEffect(() => {
     const el = selection.element;
@@ -118,6 +154,9 @@ export function DomEditCropHandles({
       startInsets: state.insets,
       didMove: false,
     };
+    // Clip is already lifted by the selection effect; just flag the drag so the
+    // rule-of-thirds grid shows.
+    setDragging(true);
   };
 
   const updateCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
@@ -146,16 +185,20 @@ export function DomEditCropHandles({
     event.preventDefault();
     event.stopPropagation();
     gestureRef.current = null;
+    setDragging(false);
     if (!gesture.didMove) return;
-    // Commit to the file; the commit path re-applies the value to the live
-    // element, so lift it back to "none" afterwards — full content + dim is
-    // the crop-mode presentation.
+    // Commit to the file. The commit path re-applies the value to the live
+    // element, so re-lift afterwards to keep showing the full content + dim while
+    // the element stays selected. Re-lift on both fulfilment and rejection so a
+    // failed commit still restores the crop-mode presentation (and the rejection
+    // is handled rather than left unhandled).
     const el = selection.element;
+    const reLift = () => {
+      if (liftedRef.current) el.style.setProperty("clip-path", "none");
+    };
     void Promise.resolve(
       onStyleCommit?.("clip-path", buildInsetClipPathSides(state.insets, state.radius)),
-    ).then(() => {
-      if (liftedRef.current) el.style.setProperty("clip-path", "none");
-    });
+    ).then(reLift, reLift);
   };
 
   const cancelCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
@@ -163,66 +206,102 @@ export function DomEditCropHandles({
     if (!gesture || gesture.pointerId !== event.pointerId) return;
     event.preventDefault();
     event.stopPropagation();
-    setState((prev) => ({ ...prev, insets: gesture.startInsets }));
     gestureRef.current = null;
+    setDragging(false);
+    // Clip stays lifted; the dim follows the reset insets.
+    setState((prev) => ({ ...prev, insets: gesture.startInsets }));
   };
 
   return (
     <>
-      {/* Dim everything of the element outside the crop region. */}
-      <div
-        className="pointer-events-none absolute overflow-hidden"
-        style={{
-          left: overlayRect.left,
-          top: overlayRect.top,
-          width: overlayRect.width,
-          height: overlayRect.height,
-        }}
-      >
+      {/* Dim the cropped-away area whenever the element is cropped and selected,
+          so the hidden content is visible (ghosted) without dragging. */}
+      {hasCrop && (
         <div
-          className="absolute"
+          className="pointer-events-none absolute overflow-hidden"
           style={{
-            left: cropRect.left - overlayRect.left,
-            top: cropRect.top - overlayRect.top,
-            width: cropRect.width,
-            height: cropRect.height,
-            boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)",
+            left: overlayRect.left,
+            top: overlayRect.top,
+            width: overlayRect.width,
+            height: overlayRect.height,
           }}
-        />
-      </div>
-      {/* Crop frame — drag it to move the whole crop window. */}
+        >
+          <div
+            className="absolute"
+            style={{
+              left: cropRect.left - overlayRect.left,
+              top: cropRect.top - overlayRect.top,
+              width: cropRect.width,
+              height: cropRect.height,
+              boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)",
+            }}
+          />
+        </div>
+      )}
+      {/* Dashed clip outline on the crop boundary, with a rule-of-thirds grid
+          shown while dragging. */}
       <div
-        data-dom-edit-crop-frame="true"
-        className="pointer-events-auto absolute border-2 border-studio-accent shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
+        aria-hidden="true"
+        className="pointer-events-none absolute border border-dashed border-studio-accent"
         style={{
           left: cropRect.left,
           top: cropRect.top,
           width: cropRect.width,
           height: cropRect.height,
-          cursor: "move",
-          touchAction: "none",
         }}
-        onPointerDown={(event) => startCropGesture("move", event)}
-        onPointerMove={updateCropGesture}
-        onPointerUp={finishCropGesture}
-        onPointerCancel={cancelCropGesture}
-      />
+      >
+        {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 && (
+        <button
+          type="button"
+          aria-label="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)]"
+          style={{
+            left: cropRect.left + cropRect.width / 2,
+            top: cropRect.top + cropRect.height / 2,
+            width: 22,
+            height: 22,
+            transform: "translate(-50%, -50%)",
+            cursor: "move",
+            touchAction: "none",
+          }}
+          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 edgeHandlePlacement) so they never overlap the element body:
+          dragging the body always MOVES, only a handle crops. */}
       {EDGES.map((edge) => {
-        const center = handleCenter(edge, cropRect);
         const vertical = edge === "left" || edge === "right";
+        const place = edgeHandlePlacement(edge, cropRect);
         return (
           <button
             key={edge}
             type="button"
             aria-label={`Crop ${edge}`}
             data-dom-edit-crop-handle="true"
-            className="pointer-events-auto absolute rounded-sm border border-studio-accent bg-studio-accent shadow-[0_0_0_2px_rgba(60,230,172,0.18)]"
+            className="pointer-events-auto absolute rounded-full bg-studio-accent shadow-[0_0_0_1px_rgba(0,0,0,0.4)]"
             style={{
-              left: center.left,
-              top: center.top,
-              width: vertical ? 10 : 28,
-              height: vertical ? 28 : 10,
-              transform: "translate(-50%, -50%)",
+              left: place.left,
+              top: place.top,
+              width: vertical ? 5 : 26,
+              height: vertical ? 26 : 5,
+              transform: place.transform,
               cursor: vertical ? "ew-resize" : "ns-resize",
               touchAction: "none",
             }}

package/src/components/editor/DomEditOverlay.tsx

@@ -21,7 +21,7 @@ import type { GestureRecordingState } from "./GestureRecordControl";
 import { DomEditCropHandles } from "./DomEditCropHandles";
 import { DomEditRotateHandle } from "./DomEditRotateHandle";
 import { hugRectForElement } from "./domEditOverlayCrop";
-import { useCropOverlay } from "../../hooks/useCropMode";
+import { useCropOverlay } from "../../hooks/useCropOverlay";
 import { readDomEditSelectionShapeStyles, resolveBoxChromeClass } from "./domEditOverlayShape";
 import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
 import { useMountEffect } from "../../hooks/useMountEffect";
@@ -75,8 +75,6 @@ interface DomEditOverlayProps {
   ) => Promise<void> | void;
   onRotationCommit: (selection: DomEditSelection, next: { angle: number }) => Promise<void> | void;
   onStyleCommit?: (property: string, value: string) => Promise<void> | void;
-  cropMode?: boolean;
-  onCropModeChange?: (active: boolean) => void;
   gridVisible?: boolean;
   gridSpacing?: number;
   recordingState?: GestureRecordingState;
@@ -105,8 +103,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   onBoxSizeCommit,
   onRotationCommit,
   onStyleCommit,
-  cropMode = false,
-  onCropModeChange,
   onMarqueeSelect,
 }: DomEditOverlayProps) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
@@ -178,9 +174,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
   const { hasCropInsets, cropOutlineInsetPx } = useCropOverlay({
     selection,
-    groupCount: groupSelections.length,
-    cropMode,
-    onCropModeChange,
     overlayRect,
   });
   // Inset crops draw their own outline child; other clip shapes keep the raw mirror.
@@ -273,11 +266,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
   const handleOverlayMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!allowCanvasMovement) return;
-    if (cropMode) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     if (suppressNextOverlayMouseDownRef.current) {
       suppressNextOverlayMouseDownRef.current = false;
       suppressNextBoxMouseDownRef.current = false;
@@ -301,13 +289,6 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   // fallow-ignore-next-line complexity
   const handleOverlayPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
     if (!allowCanvasMovement || event.button !== 0) return;
-    if (cropMode) {
-      // Reaching here = click outside the element (crop UI swallows its own) — exit crop mode.
-      event.preventDefault();
-      event.stopPropagation();
-      onCropModeChange?.(false);
-      return;
-    }
     if (event.shiftKey) {
       // Use the already-updated hover selection rather than re-resolving async
       const candidate = hoverSelectionRef.current;
@@ -355,17 +336,8 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     }
   };
 
-  // Selection re-resolves (and the box re-keys) on every click, so native
-  // dblclick never fires on the box — detect double-click by pointerdown
-  // timestamp (a no-move drag gesture suppresses the click event entirely).
-  const lastBoxPointerDownAtRef = useRef(0);
   const handleBoxClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (!allowCanvasMovement) return;
-    if (cropMode) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     if (gestureRef.current || groupGestureRef.current) return;
     if (suppressNextBoxClickRef.current) {
       suppressNextBoxClickRef.current = false;
@@ -395,10 +367,10 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       }
       onPointerDown={handleOverlayPointerDown}
       onMouseDown={handleOverlayMouseDown}
-      onPointerMove={cropMode ? undefined : marquee.onPointerMove}
+      onPointerMove={marquee.onPointerMove}
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
-      onPointerUp={cropMode ? undefined : marquee.onPointerUp}
-      onPointerCancel={cropMode ? undefined : marquee.onPointerCancel}
+      onPointerUp={marquee.onPointerUp}
+      onPointerCancel={marquee.onPointerCancel}
     >
       {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
@@ -444,7 +416,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       )}
       {!hasGroupSelection && selection && overlayRect && compRect.width > 0 && (
         <>
-          {allowCanvasMovement && !cropMode && selection.capabilities.canApplyManualRotation && (
+          {allowCanvasMovement && selection.capabilities.canApplyManualRotation && (
             <DomEditRotateHandle
               overlayRect={overlayRect}
               cropOutlineInsetPx={cropOutlineInsetPx}
@@ -466,27 +438,12 @@ export const DomEditOverlay = memo(function DomEditOverlay({
               height: overlayRect.height,
               clipPath: boxClipPath,
               cursor:
-                allowCanvasMovement && !cropMode && selection.capabilities.canApplyManualOffset
+                allowCanvasMovement && selection.capabilities.canApplyManualOffset
                   ? "move"
                   : "default",
             }}
             onPointerDown={(e) => {
-              if (cropMode) {
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-              }
               if (!allowCanvasMovement || e.shiftKey) return;
-              const now = Date.now();
-              const isDoubleClick = now - lastBoxPointerDownAtRef.current < 400;
-              lastBoxPointerDownAtRef.current = now;
-              if (isDoubleClick && onCropModeChange && selection.capabilities.canCrop) {
-                lastBoxPointerDownAtRef.current = 0;
-                e.preventDefault();
-                e.stopPropagation();
-                onCropModeChange(true);
-                return;
-              }
               if (selection.capabilities.canApplyManualOffset) {
                 gestures.startGesture("drag", e);
                 return;
@@ -515,7 +472,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
                 }}
               />
             )}
-            {allowCanvasMovement && !cropMode && selection.capabilities.canApplyManualSize && (
+            {allowCanvasMovement && selection.capabilities.canApplyManualSize && (
               <div
                 className="absolute -right-1.5 -bottom-1.5 w-3 h-3 rounded-sm bg-studio-accent border border-studio-accent/60"
                 style={{
@@ -533,7 +490,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
               />
             )}
           </div>
-          {cropMode && (
+          {selection.capabilities.canCrop && groupSelections.length <= 1 && (
             <DomEditCropHandles
               selection={selection}
               overlayRect={overlayRect}

package/src/components/editor/PropertyPanel.tsx

@@ -100,8 +100,6 @@ export const PropertyPanel = memo(function PropertyPanel({
   recordingState,
   recordingDuration,
   onToggleRecording,
-  cropMode,
-  onCropModeChange,
 }: PropertyPanelProps) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
@@ -584,8 +582,6 @@ export const PropertyPanel = memo(function PropertyPanel({
             onSetStyle={onSetStyle}
             onImportAssets={onImportAssets}
             gsapBorderRadius={gsapBorderRadius}
-            cropMode={cropMode}
-            onCropModeChange={onCropModeChange}
           />
         )}
       </div>

package/src/components/editor/SnapToolbar.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { Crop, MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
+import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { usePlayerStore } from "../../player/store/playerStore";
 
@@ -39,9 +39,6 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
-  const cropAvailable = usePlayerStore((s) => s.cropAvailable);
-  const cropMode = usePlayerStore((s) => s.cropMode);
-  const setCropMode = usePlayerStore((s) => s.setCropMode);
   const popoverRef = useRef<HTMLDivElement>(null);
   const gridButtonRef = useRef<HTMLButtonElement>(null);
 
@@ -102,22 +99,6 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
       className="absolute top-2 right-2 z-50 flex items-center gap-1"
       onPointerDown={(e) => e.stopPropagation()}
     >
-      {cropAvailable && (
-        <button
-          type="button"
-          className={`rounded-md p-1.5 transition-colors ${
-            cropMode
-              ? "bg-studio-accent/20 text-studio-accent"
-              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
-          }`}
-          onClick={() => setCropMode(!cropMode)}
-          title={cropMode ? "Exit crop (Esc)" : "Crop selection"}
-          aria-label="Crop selection"
-          aria-pressed={cropMode}
-        >
-          <Crop size={16} weight={cropMode ? "fill" : "regular"} />
-        </button>
-      )}
       {motionPathCreateAvailable && (
         <button
           type="button"

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

@@ -65,6 +65,22 @@ describe("resolveCropInsetFromEdgeDrag", () => {
   });
 });
 
+describe("resolveCropInsetFromMoveDrag", () => {
+  const startInsets = { top: 10, right: 20, bottom: 30, left: 40 };
+
+  it("shifts opposing insets together so the crop size stays constant", () => {
+    expect(
+      resolveCropInsetFromMoveDrag({ startInsets, deltaX: 20, deltaY: -10, scaleX: 2, scaleY: 1 }),
+    ).toEqual({ top: 0, right: 10, bottom: 40, left: 50 });
+  });
+
+  it("clamps the window inside the element bounds", () => {
+    expect(
+      resolveCropInsetFromMoveDrag({ startInsets, deltaX: 999, deltaY: 999, scaleX: 1, scaleY: 1 }),
+    ).toEqual({ top: 40, right: 0, bottom: 0, left: 60 });
+  });
+});
+
 describe("cropRectFromInsets", () => {
   it("shrinks the overlay rect by scaled insets", () => {
     expect(
@@ -88,19 +104,3 @@ describe("cropRectFromInsets", () => {
     expect(r.height).toBe(0);
   });
 });
-
-describe("resolveCropInsetFromMoveDrag", () => {
-  const startInsets = { top: 10, right: 20, bottom: 30, left: 40 };
-
-  it("shifts opposing insets together so the crop size stays constant", () => {
-    expect(
-      resolveCropInsetFromMoveDrag({ startInsets, deltaX: 20, deltaY: -10, scaleX: 2, scaleY: 1 }),
-    ).toEqual({ top: 0, right: 10, bottom: 40, left: 50 });
-  });
-
-  it("clamps the window inside the element bounds", () => {
-    expect(
-      resolveCropInsetFromMoveDrag({ startInsets, deltaX: 999, deltaY: 999, scaleX: 1, scaleY: 1 }),
-    ).toEqual({ top: 40, right: 0, bottom: 0, left: 60 });
-  });
-});