hyperframes 0.7.44 → 0.7.46

package/dist/studio/index.js

@@ -1372,10 +1372,6 @@ var usePlayerStore = create((set, get) => ({
   setMotionPathCreateAvailable: (available) => set({ motionPathCreateAvailable: available }),
   autoKeyframeEnabled: true,
   setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
-  cropMode: false,
-  setCropMode: (active) => set({ cropMode: active }),
-  cropAvailable: false,
-  setCropAvailable: (available) => set(available ? { cropAvailable: true } : { cropAvailable: false, cropMode: false }),
   selectedElementIds: /* @__PURE__ */ new Set(),
   toggleSelectedElementId: (id) => set((s) => {
     const next = new Set(s.selectedElementIds);
@@ -1758,10 +1754,8 @@ var SHORTCUT_SECTIONS = [
   {
     title: "Crop",
     hints: [
-      { key: "DblClick", label: "Crop selected element" },
-      { key: "Drag edge", label: "Adjust crop side" },
-      { key: "Drag frame", label: "Move crop window" },
-      { key: "Esc", label: "Exit crop (or click outside)" }
+      { key: "Drag edge", label: "Crop a side" },
+      { key: "Drag center", label: "Reposition the crop" }
     ]
   },
   {
@@ -16660,9 +16654,7 @@ function StyleSections({
   assets,
   onSetStyle,
   onImportAssets,
-  gsapBorderRadius,
-  cropMode = false,
-  onCropModeChange
+  gsapBorderRadius
 }) {
   const styleEditingDisabled = !element.capabilities.canEditStyles;
   const isFlex = styles.display === "flex" || styles.display === "inline-flex";
@@ -17006,21 +16998,7 @@ function StyleSections({
             onCommit: (next) => commitClipInsetSide("left", next)
           }
         )
-      ] }) }),
-      /* @__PURE__ */ jsxs34(
-        "button",
-        {
-          type: "button",
-          disabled: styleEditingDisabled || !onCropModeChange,
-          "aria-pressed": cropMode,
-          onClick: () => onCropModeChange?.(!cropMode),
-          className: `inline-flex h-8 w-fit items-center gap-1.5 rounded-md border px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${cropMode ? "border-studio-accent/60 bg-studio-accent/15 text-studio-accent" : "border-panel-border bg-panel-input text-panel-text-2 hover:text-white"}`,
-          children: [
-            /* @__PURE__ */ jsx41(Scissors, { size: 13 }),
-            "Crop"
-          ]
-        }
-      )
+      ] }) })
     ] }) }),
     /* @__PURE__ */ jsx41(Section, { title: "Transparency", icon: /* @__PURE__ */ jsx41(Eye2, { size: 15 }), defaultCollapsed: true, children: /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx41(
@@ -19833,9 +19811,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
   onSeekToTime,
   recordingState,
   recordingDuration,
-  onToggleRecording,
-  cropMode,
-  onCropModeChange
+  onToggleRecording
 }) {
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
@@ -20267,9 +20243,7 @@ var PropertyPanel = memo22(function PropertyPanel2({
           assets,
           onSetStyle,
           onImportAssets,
-          gsapBorderRadius,
-          cropMode,
-          onCropModeChange
+          gsapBorderRadius
         }
       )
     ] })
@@ -21082,7 +21056,7 @@ var FileTree = memo24(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState97, useCallback as useCallback114, useRef as useRef100, useMemo as useMemo39, useEffect as useEffect74, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState98, useCallback as useCallback114, useRef as useRef100, useMemo as useMemo38, useEffect as useEffect73, useLayoutEffect as useLayoutEffect4 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState38, useEffect as useEffect28, useCallback as useCallback34, useRef as useRef39, useMemo as useMemo18 } from "react";
@@ -36227,123 +36201,8 @@ function useGestureCommit({
   return { gestureState, gestureRecording, handleToggleRecording };
 }
 
-// src/hooks/useCropMode.ts
-import { useEffect as useEffect50, useMemo as useMemo28, useReducer } from "react";
-
-// src/components/editor/domEditOverlayCrop.ts
-function cropRectFromInsets(rect, insets, scaleX, scaleY) {
-  const sx = scaleX > 0 ? scaleX : 1;
-  const sy = scaleY > 0 ? scaleY : 1;
-  const left = rect.left + insets.left * sx;
-  const top = rect.top + insets.top * sy;
-  return {
-    left,
-    top,
-    width: Math.max(0, rect.width - (insets.left + insets.right) * sx),
-    height: Math.max(0, rect.height - (insets.top + insets.bottom) * sy)
-  };
-}
-function readElementCropInsets(element) {
-  const inline = element.style.getPropertyValue("clip-path").trim();
-  const value = inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
-  const parsed = parseInsetClipPathSides(value === "none" ? "" : value);
-  return parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
-}
-function clampInset(value, max) {
-  if (!Number.isFinite(value)) return 0;
-  return Math.min(Math.max(0, value), Math.max(0, max));
-}
-function resolveCropInsetFromEdgeDrag(input) {
-  const scaleX = input.scaleX > 0 ? input.scaleX : 1;
-  const scaleY = input.scaleY > 0 ? input.scaleY : 1;
-  const next = { ...input.startInsets };
-  if (input.edge === "left") {
-    next.left = clampInset(
-      input.startInsets.left + input.deltaX / scaleX,
-      input.width - next.right
-    );
-  } else if (input.edge === "right") {
-    next.right = clampInset(
-      input.startInsets.right - input.deltaX / scaleX,
-      input.width - next.left
-    );
-  } else if (input.edge === "top") {
-    next.top = clampInset(
-      input.startInsets.top + input.deltaY / scaleY,
-      input.height - next.bottom
-    );
-  } else {
-    next.bottom = clampInset(
-      input.startInsets.bottom - input.deltaY / scaleY,
-      input.height - next.top
-    );
-  }
-  return next;
-}
-function resolveCropInsetFromMoveDrag(input) {
-  const sx = input.scaleX > 0 ? input.scaleX : 1;
-  const sy = input.scaleY > 0 ? input.scaleY : 1;
-  const totalX = input.startInsets.left + input.startInsets.right;
-  const totalY = input.startInsets.top + input.startInsets.bottom;
-  const left = Math.min(Math.max(0, input.startInsets.left + input.deltaX / sx), totalX);
-  const top = Math.min(Math.max(0, input.startInsets.top + input.deltaY / sy), totalY);
-  return { left, right: totalX - left, top, bottom: totalY - top };
-}
-function hugRectForElement(rect, element) {
-  const insets = readElementCropInsets(element);
-  if (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0) return rect;
-  return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
-}
-
-// src/hooks/useCropMode.ts
-function useCropModeProps() {
-  const cropMode = usePlayerStore((s) => s.cropMode);
-  const setCropMode = usePlayerStore((s) => s.setCropMode);
-  return useMemo28(
-    () => ({
-      cropMode,
-      onCropModeChange: setCropMode
-    }),
-    [cropMode, setCropMode]
-  );
-}
-function useCropOverlay(params) {
-  const { selection, groupCount, cropMode, onCropModeChange, overlayRect } = params;
-  useEffect50(() => {
-    if (!cropMode || !onCropModeChange) return;
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") onCropModeChange(false);
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [cropMode, onCropModeChange]);
-  const setCropAvailable = usePlayerStore((s) => s.setCropAvailable);
-  const cropAvailable = Boolean(selection && groupCount <= 1 && selection.capabilities.canCrop);
-  useEffect50(() => {
-    setCropAvailable(cropAvailable);
-    return () => setCropAvailable(false);
-  }, [cropAvailable, setCropAvailable]);
-  const [, bumpAfterExit] = useReducer((x) => x + 1, 0);
-  useEffect50(() => {
-    if (!cropMode) bumpAfterExit();
-  }, [cropMode]);
-  const cropInsets = selection ? readElementCropInsets(selection.element) : null;
-  const hasCropInsets = Boolean(
-    cropInsets && (cropInsets.top > 0 || cropInsets.right > 0 || cropInsets.bottom > 0 || cropInsets.left > 0)
-  );
-  const sx = overlayRect && overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
-  const sy = overlayRect && overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
-  const cropOutlineInsetPx = cropInsets && hasCropInsets && !cropMode ? {
-    top: cropInsets.top * sy,
-    right: cropInsets.right * sx,
-    bottom: cropInsets.bottom * sy,
-    left: cropInsets.left * sx
-  } : void 0;
-  return { hasCropInsets, cropOutlineInsetPx };
-}
-
 // src/components/editor/GestureTrailOverlay.tsx
-import { memo as memo26, useMemo as useMemo29 } from "react";
+import { memo as memo26, useMemo as useMemo28 } from "react";
 import { Fragment as Fragment19, jsx as jsx71, jsxs as jsxs60 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo26(function GestureTrailOverlay2({
   samples,
@@ -36355,7 +36214,7 @@ var GestureTrailOverlay = memo26(function GestureTrailOverlay2({
   mode,
   accentColor = "#3CE6AC"
 }) {
-  const trailPoints = useMemo29(() => {
+  const trailPoints = useMemo28(() => {
     if (!canvasRect) return "";
     if (trail && trail.length > 1) {
       return trail.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
@@ -36363,7 +36222,7 @@ var GestureTrailOverlay = memo26(function GestureTrailOverlay2({
     if (samples.length === 0) return "";
     return samples.filter((s) => s.properties.x != null && s.properties.y != null).map((s) => `${s.properties.x},${s.properties.y}`).join(" ");
   }, [samples, trail, sampleCount, canvasRect?.left, canvasRect?.top]);
-  const simplifiedPath = useMemo29(() => {
+  const simplifiedPath = useMemo28(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -36375,7 +36234,7 @@ var GestureTrailOverlay = memo26(function GestureTrailOverlay2({
     if (pts.length === 0) return "";
     return pts.map((p) => `${p.x},${p.y}`).join(" ");
   }, [simplifiedPoints]);
-  const diamondPositions = useMemo29(() => {
+  const diamondPositions = useMemo28(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -36468,7 +36327,7 @@ import {
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo27, useCallback as useCallback86, useEffect as useEffect51, useRef as useRef76, useState as useState62 } from "react";
+import { memo as memo27, useCallback as useCallback86, useEffect as useEffect50, useRef as useRef76, useState as useState62 } from "react";
 import { jsx as jsx72, jsxs as jsxs61 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -36570,10 +36429,10 @@ function CompCard({
   });
   const thumbnailOffsetX = (CARD_W - stageSize.width * previewScale) / 2;
   const thumbnailOffsetY = (CARD_H - stageSize.height * previewScale) / 2;
-  useEffect51(() => {
+  useEffect50(() => {
     requestIframePlaybackSync(hovered);
   }, [hovered, requestIframePlaybackSync]);
-  useEffect51(() => {
+  useEffect50(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
       if (syncTimer.current) clearTimeout(syncTimer.current);
@@ -36697,10 +36556,10 @@ var CompositionsTab = memo27(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo28, useState as useState66, useCallback as useCallback88, useRef as useRef78, useMemo as useMemo31, useEffect as useEffect55 } from "react";
+import { memo as memo28, useState as useState66, useCallback as useCallback88, useRef as useRef78, useMemo as useMemo30, useEffect as useEffect54 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
-import { useState as useState63, useEffect as useEffect52 } from "react";
+import { useState as useState63, useEffect as useEffect51 } from "react";
 import { jsx as jsx73 } from "react/jsx-runtime";
 function VideoFrameThumbnail({
   src,
@@ -36708,7 +36567,7 @@ function VideoFrameThumbnail({
 }) {
   const [frame, setFrame] = useState63(null);
   const [failed2, setFailed] = useState63(false);
-  useEffect52(() => {
+  useEffect51(() => {
     setFailed(false);
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
@@ -36850,7 +36709,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState64, useRef as useRef77, useEffect as useEffect53, useCallback as useCallback87 } from "react";
+import { useState as useState64, useRef as useRef77, useEffect as useEffect52, useCallback as useCallback87 } from "react";
 import { Fragment as Fragment20, jsx as jsx75, jsxs as jsxs63 } from "react/jsx-runtime";
 function AudioRow({
   projectId,
@@ -36873,14 +36732,14 @@ function AudioRow({
   const name = basename(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
-  useEffect53(() => {
+  useEffect52(() => {
     return () => {
       cancelAnimationFrame(animRef.current);
       audioRef.current?.pause();
       actxRef.current?.close();
     };
   }, []);
-  useEffect53(() => {
+  useEffect52(() => {
     if (playing) {
       const barCount = 24;
       const loop = () => {
@@ -37016,7 +36875,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect54, useMemo as useMemo30, useState as useState65 } from "react";
+import { useEffect as useEffect53, useMemo as useMemo29, useState as useState65 } from "react";
 import { jsx as jsx76, jsxs as jsxs64 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -37032,7 +36891,7 @@ function globalAssetRows(records, query = "") {
 }
 function GlobalAssetsView({ searchQuery }) {
   const [records, setRecords] = useState65(null);
-  useEffect54(() => {
+  useEffect53(() => {
     let cancelled = false;
     fetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
       if (!cancelled) setRecords(Array.isArray(d.assets) ? d.assets : []);
@@ -37043,7 +36902,7 @@ function GlobalAssetsView({ searchQuery }) {
       cancelled = true;
     };
   }, []);
-  const rows = useMemo30(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
+  const rows = useMemo29(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
     return /* @__PURE__ */ jsx76("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
@@ -37233,7 +37092,7 @@ var AssetsTab = memo28(function AssetsTab2({
   const [manifest, setManifest] = useState66(/* @__PURE__ */ new Map());
   const manifest404Ref = useRef78(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
-  useEffect55(() => {
+  useEffect54(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
     fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`).then((r) => {
@@ -37276,8 +37135,8 @@ var AssetsTab = memo28(function AssetsTab2({
     }
   }, []);
   const elements = usePlayerStore((s) => s.elements);
-  const usedPaths = useMemo31(() => deriveUsedPaths(elements), [elements]);
-  const mediaAssets = useMemo31(() => {
+  const usedPaths = useMemo30(() => deriveUsedPaths(elements), [elements]);
+  const mediaAssets = useMemo30(() => {
     const media = assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a));
     const all = filterByUsage(media, usedPaths, usageFilter);
     if (!searchQuery) return all;
@@ -37288,7 +37147,7 @@ var AssetsTab = memo28(function AssetsTab2({
       return rec?.description?.toLowerCase().includes(q);
     });
   }, [assets, searchQuery, manifest, usageFilter, usedPaths]);
-  const categorized = useMemo31(() => {
+  const categorized = useMemo30(() => {
     const groups = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
       const cat = getCategory(a);
@@ -37303,12 +37162,12 @@ var AssetsTab = memo28(function AssetsTab2({
     }
     return groups;
   }, [mediaAssets, usedPaths]);
-  const counts = useMemo31(() => {
+  const counts = useMemo30(() => {
     const c = { all: mediaAssets.length };
     for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
     return c;
   }, [mediaAssets, categorized]);
-  const usageCounts = useMemo31(
+  const usageCounts = useMemo30(
     () => countUsage(
       assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
       usedPaths
@@ -37550,11 +37409,11 @@ var AssetsTab = memo28(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo29, useState as useState68, useCallback as useCallback89, useRef as useRef79, useEffect as useEffect57 } from "react";
+import { memo as memo29, useState as useState68, useCallback as useCallback89, useRef as useRef79, useEffect as useEffect56 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState67, useEffect as useEffect56, useMemo as useMemo32 } from "react";
+import { useState as useState67, useEffect as useEffect55, useMemo as useMemo31 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -37583,7 +37442,7 @@ function useBlockCatalog() {
   const [error, setError] = useState67(null);
   const [search, setSearch] = useState67("");
   const [category, setCategory] = useState67(null);
-  useEffect56(() => {
+  useEffect55(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -37608,7 +37467,7 @@ function useBlockCatalog() {
       cancelled = true;
     };
   }, []);
-  const filteredBlocks = useMemo32(() => {
+  const filteredBlocks = useMemo31(() => {
     let result = blocks;
     if (category) {
       result = result.filter((b) => b.category === category);
@@ -37861,7 +37720,7 @@ function BlockCard({
     setHovered(false);
     onPreview?.(null);
   }, [onPreview]);
-  useEffect57(() => {
+  useEffect56(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
@@ -38016,7 +37875,7 @@ function PromptPreviewModal({
   const [value, setValue] = useState68(prompt);
   const [copied, setCopied] = useState68(false);
   const textareaRef = useRef79(null);
-  useEffect57(() => {
+  useEffect56(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
   const handleCopy = useCallback89(() => {
@@ -38604,7 +38463,7 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioPreviewArea.tsx
-import { useState as useState81, useMemo as useMemo35, useCallback as useCallback98 } from "react";
+import { useState as useState81, useMemo as useMemo34, useCallback as useCallback98 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
 import { memo as memo31, useState as useState71, useCallback as useCallback92, useRef as useRef81 } from "react";
@@ -39231,7 +39090,7 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo35, useEffect as useEffect59, useMemo as useMemo33, useRef as useRef87, useState as useState76 } from "react";
+import { memo as memo35, useEffect as useEffect58, useMemo as useMemo32, useRef as useRef87, useState as useState76 } from "react";
 
 // src/components/editor/marqueeCommit.ts
 import { useCallback as useCallback94, useRef as useRef83, useState as useState72 } from "react";
@@ -39241,6 +39100,71 @@ function rectsOverlap(a, b) {
   return a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
 }
 
+// src/components/editor/domEditOverlayCrop.ts
+function cropRectFromInsets(rect, insets, scaleX, scaleY) {
+  const sx = scaleX > 0 ? scaleX : 1;
+  const sy = scaleY > 0 ? scaleY : 1;
+  const left = rect.left + insets.left * sx;
+  const top = rect.top + insets.top * sy;
+  return {
+    left,
+    top,
+    width: Math.max(0, rect.width - (insets.left + insets.right) * sx),
+    height: Math.max(0, rect.height - (insets.top + insets.bottom) * sy)
+  };
+}
+function readElementCropInsets(element) {
+  const inline = element.style.getPropertyValue("clip-path").trim();
+  const value = inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
+  const parsed = parseInsetClipPathSides(value === "none" ? "" : value);
+  return parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+}
+function clampInset(value, max) {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(Math.max(0, value), Math.max(0, max));
+}
+function resolveCropInsetFromEdgeDrag(input) {
+  const scaleX = input.scaleX > 0 ? input.scaleX : 1;
+  const scaleY = input.scaleY > 0 ? input.scaleY : 1;
+  const next = { ...input.startInsets };
+  if (input.edge === "left") {
+    next.left = clampInset(
+      input.startInsets.left + input.deltaX / scaleX,
+      input.width - next.right
+    );
+  } else if (input.edge === "right") {
+    next.right = clampInset(
+      input.startInsets.right - input.deltaX / scaleX,
+      input.width - next.left
+    );
+  } else if (input.edge === "top") {
+    next.top = clampInset(
+      input.startInsets.top + input.deltaY / scaleY,
+      input.height - next.bottom
+    );
+  } else {
+    next.bottom = clampInset(
+      input.startInsets.bottom - input.deltaY / scaleY,
+      input.height - next.top
+    );
+  }
+  return next;
+}
+function resolveCropInsetFromMoveDrag(input) {
+  const sx = input.scaleX > 0 ? input.scaleX : 1;
+  const sy = input.scaleY > 0 ? input.scaleY : 1;
+  const totalX = input.startInsets.left + input.startInsets.right;
+  const totalY = input.startInsets.top + input.startInsets.bottom;
+  const left = Math.min(Math.max(0, input.startInsets.left + input.deltaX / sx), totalX);
+  const top = Math.min(Math.max(0, input.startInsets.top + input.deltaY / sy), totalY);
+  return { left, right: totalX - left, top, bottom: totalY - top };
+}
+function hugRectForElement(rect, element) {
+  const insets = readElementCropInsets(element);
+  if (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0) return rect;
+  return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
+}
+
 // src/components/editor/domEditOverlayGeometry.ts
 function isElementVisibleForOverlay(el) {
   return isElementVisibleThroughAncestors(el);
@@ -41272,13 +41196,30 @@ var GridOverlay = memo34(function GridOverlay2({
 });
 
 // src/components/editor/DomEditCropHandles.tsx
-import { useEffect as useEffect58, useRef as useRef86, useState as useState74 } from "react";
+import { useEffect as useEffect57, useRef as useRef86, useState as useState74 } from "react";
 import { Fragment as Fragment27, jsx as jsx88, jsxs as jsxs74 } from "react/jsx-runtime";
-function handleCenter(edge, rect) {
-  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 };
+var EDGE_HANDLE_GAP = 8;
+function edgeHandlePlacement(edge, rect) {
+  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%)"
+  };
 }
 var EDGES = ["top", "right", "bottom", "left"];
 function DomEditCropHandles({
@@ -41287,6 +41228,7 @@ function DomEditCropHandles({
   onStyleCommit
 }) {
   const gestureRef = useRef86(null);
+  const [dragging, setDragging] = useState74(false);
   const [state, setState] = useState74(() => {
     const parsed = readElementCropInsets(selection.element);
     return {
@@ -41301,20 +41243,23 @@ function DomEditCropHandles({
     };
   });
   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
     });
   }
+  const hasCrop = state.insets.top > 0 || state.insets.right > 0 || state.insets.bottom > 0 || state.insets.left > 0;
   const committedRef = useRef86(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;
   const liftedRef = useRef86(false);
-  useEffect58(() => {
+  useEffect57(() => {
     const el = selection.element;
     el.style.setProperty("clip-path", "none");
     liftedRef.current = true;
@@ -41342,6 +41287,7 @@ function DomEditCropHandles({
       startInsets: state.insets,
       didMove: false
     };
+    setDragging(true);
   };
   const updateCropGesture = (event) => {
     const gesture = gestureRef.current;
@@ -41365,24 +41311,27 @@ function DomEditCropHandles({
     event.preventDefault();
     event.stopPropagation();
     gestureRef.current = null;
+    setDragging(false);
     if (!gesture.didMove) return;
     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) => {
     const gesture = gestureRef.current;
     if (!gesture || gesture.pointerId !== event.pointerId) return;
     event.preventDefault();
     event.stopPropagation();
-    setState((prev) => ({ ...prev, insets: gesture.startInsets }));
     gestureRef.current = null;
+    setDragging(false);
+    setState((prev) => ({ ...prev, insets: gesture.startInsets }));
   };
   return /* @__PURE__ */ jsxs74(Fragment27, { children: [
-    /* @__PURE__ */ jsx88(
+    hasCrop && /* @__PURE__ */ jsx88(
       "div",
       {
         className: "pointer-events-none absolute overflow-hidden",
@@ -41410,13 +41359,35 @@ function DomEditCropHandles({
     /* @__PURE__ */ jsx88(
       "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,
+          height: cropRect.height
+        },
+        children: dragging && /* @__PURE__ */ jsxs74(Fragment27, { children: [
+          /* @__PURE__ */ jsx88("div", { className: "absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" }),
+          /* @__PURE__ */ jsx88("div", { className: "absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" }),
+          /* @__PURE__ */ jsx88("div", { className: "absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" }),
+          /* @__PURE__ */ jsx88("div", { className: "absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" })
+        ] })
+      }
+    ),
+    hasCrop && /* @__PURE__ */ jsx88(
+      "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"
         },
@@ -41427,21 +41398,21 @@ function DomEditCropHandles({
       }
     ),
     EDGES.map((edge) => {
-      const center = handleCenter(edge, cropRect);
       const vertical = edge === "left" || edge === "right";
+      const place = edgeHandlePlacement(edge, cropRect);
       return /* @__PURE__ */ jsx88(
         "button",
         {
           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"
           },
@@ -41496,6 +41467,24 @@ function DomEditRotateHandle({
   );
 }
 
+// src/hooks/useCropOverlay.ts
+function useCropOverlay(params) {
+  const { selection, overlayRect } = params;
+  const cropInsets = selection ? readElementCropInsets(selection.element) : null;
+  const hasCropInsets = Boolean(
+    cropInsets && (cropInsets.top > 0 || cropInsets.right > 0 || cropInsets.bottom > 0 || cropInsets.left > 0)
+  );
+  const sx = overlayRect && overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
+  const sy = overlayRect && overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
+  const cropOutlineInsetPx = cropInsets && hasCropInsets ? {
+    top: cropInsets.top * sy,
+    right: cropInsets.right * sx,
+    bottom: cropInsets.bottom * sy,
+    left: cropInsets.left * sx
+  } : void 0;
+  return { hasCropInsets, cropOutlineInsetPx };
+}
+
 // src/components/editor/domEditOverlayShape.ts
 function readDomEditSelectionShapeStyles(selection) {
   const fallback = {
@@ -41713,8 +41702,6 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   onBoxSizeCommit,
   onRotationCommit,
   onStyleCommit,
-  cropMode = false,
-  onCropModeChange,
   onMarqueeSelect
 }) {
   const overlayRef = useRef87(null);
@@ -41781,9 +41768,6 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   compRectRef.current = compRect;
   const { hasCropInsets, cropOutlineInsetPx } = useCropOverlay({
     selection,
-    groupCount: groupSelections.length,
-    cropMode,
-    onCropModeChange,
     overlayRect
   });
   const boxClipPath = hasCropInsets ? void 0 : selectionShapeStyles.clipPath;
@@ -41808,7 +41792,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       setRects: setOffCanvasRects
     })
   );
-  useEffect59(() => {
+  useEffect58(() => {
     offCanvasDirtyRef.current = true;
   }, [activeCompositionPath]);
   const gestures = createDomEditOverlayGestureHandlers({
@@ -41844,11 +41828,11 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     selectionRef,
     gestures
   });
-  const selectionKey = useMemo33(() => {
+  const selectionKey = useMemo32(() => {
     if (!selection) return "none";
     return `${selection.sourceFile}:${selection.id ?? selection.selector ?? selection.label}:${selection.selectorIndex ?? 0}`;
   }, [selection]);
-  const groupBounds = useMemo33(
+  const groupBounds = useMemo32(
     () => resolveDomEditGroupOverlayRect(groupOverlayItems.map((item) => item.rect)),
     [groupOverlayItems]
   );
@@ -41856,11 +41840,6 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   const groupCanMove = hasGroupSelection && groupOverlayItems.length > 1 && groupOverlayItems.every((item) => item.selection.capabilities.canApplyManualOffset);
   const handleOverlayMouseDown = (event) => {
     if (!allowCanvasMovement) return;
-    if (cropMode) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     if (suppressNextOverlayMouseDownRef.current) {
       suppressNextOverlayMouseDownRef.current = false;
       suppressNextBoxMouseDownRef.current = false;
@@ -41879,12 +41858,6 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   };
   const handleOverlayPointerDown = (event) => {
     if (!allowCanvasMovement || event.button !== 0) return;
-    if (cropMode) {
-      event.preventDefault();
-      event.stopPropagation();
-      onCropModeChange?.(false);
-      return;
-    }
     if (event.shiftKey) {
       const candidate = hoverSelectionRef.current;
       if (!candidate) return;
@@ -41923,14 +41896,8 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       }
     }
   };
-  const lastBoxPointerDownAtRef = useRef87(0);
   const handleBoxClick = (event) => {
     if (!allowCanvasMovement) return;
-    if (cropMode) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
     if (gestureRef.current || groupGestureRef.current) return;
     if (suppressNextBoxClickRef.current) {
       suppressNextBoxClickRef.current = false;
@@ -41956,10 +41923,10 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       onPointerDownCapture: (event) => focusDomEditOverlayElement(event.currentTarget),
       onPointerDown: handleOverlayPointerDown,
       onMouseDown: handleOverlayMouseDown,
-      onPointerMove: cropMode ? void 0 : marquee.onPointerMove,
+      onPointerMove: marquee.onPointerMove,
       onPointerLeave: () => onCanvasPointerLeaveRef.current(),
-      onPointerUp: cropMode ? void 0 : marquee.onPointerUp,
-      onPointerCancel: cropMode ? void 0 : marquee.onPointerCancel,
+      onPointerUp: marquee.onPointerUp,
+      onPointerCancel: marquee.onPointerCancel,
       children: [
         hoverSelection && hoverRect && compRect.width > 0 && /* @__PURE__ */ jsx90(
           "div",
@@ -42007,7 +41974,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
           )
         ] }),
         !hasGroupSelection && selection && overlayRect && compRect.width > 0 && /* @__PURE__ */ jsxs76(Fragment28, { children: [
-          allowCanvasMovement && !cropMode && selection.capabilities.canApplyManualRotation && /* @__PURE__ */ jsx90(
+          allowCanvasMovement && selection.capabilities.canApplyManualRotation && /* @__PURE__ */ jsx90(
             DomEditRotateHandle,
             {
               overlayRect,
@@ -42030,25 +41997,10 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
                 width: overlayRect.width,
                 height: overlayRect.height,
                 clipPath: boxClipPath,
-                cursor: allowCanvasMovement && !cropMode && selection.capabilities.canApplyManualOffset ? "move" : "default"
+                cursor: 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;
@@ -42078,7 +42030,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
                     }
                   }
                 ),
-                allowCanvasMovement && !cropMode && selection.capabilities.canApplyManualSize && /* @__PURE__ */ jsx90(
+                allowCanvasMovement && selection.capabilities.canApplyManualSize && /* @__PURE__ */ jsx90(
                   "div",
                   {
                     className: "absolute -right-1.5 -bottom-1.5 w-3 h-3 rounded-sm bg-studio-accent border border-studio-accent/60",
@@ -42100,7 +42052,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
             },
             selectionKey
           ),
-          cropMode && /* @__PURE__ */ jsx90(
+          selection.capabilities.canCrop && groupSelections.length <= 1 && /* @__PURE__ */ jsx90(
             DomEditCropHandles,
             {
               selection,
@@ -42162,10 +42114,10 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
 });
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo36, useEffect as useEffect61, useRef as useRef90, useState as useState78 } from "react";
+import { memo as memo36, useEffect as useEffect60, useRef as useRef90, useState as useState78 } from "react";
 
 // src/contexts/DomEditContext.tsx
-import { createContext as createContext6, useCallback as useCallback95, useContext as useContext6, useMemo as useMemo34, useRef as useRef88 } from "react";
+import { createContext as createContext6, useCallback as useCallback95, useContext as useContext6, useMemo as useMemo33, useRef as useRef88 } from "react";
 import { jsx as jsx91 } from "react/jsx-runtime";
 var DomEditActionsContext = createContext6(null);
 var DomEditSelectionContext = createContext6(null);
@@ -42270,7 +42222,7 @@ function DomEditProvider({
     (mutation, options) => commitMutationRef.current(mutation, options),
     []
   );
-  const actions = useMemo34(
+  const actions = useMemo33(
     () => ({
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
@@ -42406,7 +42358,7 @@ function DomEditProvider({
       handleSetAllKeyframeEases
     ]
   );
-  const selection = useMemo34(
+  const selection = useMemo33(
     () => ({
       domEditSelection,
       domEditGroupSelections,
@@ -42621,7 +42573,7 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect60, useRef as useRef89, useState as useState77 } from "react";
+import { useEffect as useEffect59, useRef as useRef89, useState as useState77 } from "react";
 function transformTranslate(el) {
   const t = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
   if (!t || t === "none") return { x: 0, y: 0 };
@@ -42692,7 +42644,7 @@ function useMotionPathData(iframeRef, selector) {
   const [visibleInPreview, setVisibleInPreview] = useState77(true);
   const [home, setHome] = useState77(null);
   const [pScale, setPScale] = useState77(1);
-  useEffect60(() => {
+  useEffect59(() => {
     if (!selector) {
       setRect(null);
       setHome(null);
@@ -42735,7 +42687,7 @@ function useMotionPathData(iframeRef, selector) {
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
   }, [selector, iframeRef]);
-  useEffect60(() => {
+  useEffect59(() => {
     if (!selector) {
       setGeometry(null);
       return;
@@ -42787,19 +42739,19 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
   const dragRef = useRef90(null);
   const parkTimerRef = useRef90(void 0);
   const animId = editableAnimationId(selectedGsapAnimations ?? [], geometry?.kind ?? "linear");
-  useEffect61(() => () => clearTimeout(parkTimerRef.current), [animId]);
+  useEffect60(() => () => clearTimeout(parkTimerRef.current), [animId]);
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
   const createSelector = createMode ? selectorFor(selection) : null;
   const compW = compositionSize?.width ?? null;
   const canCreate = createMode && hasMotionPathPlugin(iframeRef.current);
-  useEffect61(() => {
+  useEffect60(() => {
     setMotionPathCreateAvailable(Boolean(canCreate));
     return () => setMotionPathCreateAvailable(false);
   }, [canCreate, setMotionPathCreateAvailable]);
-  useEffect61(() => {
+  useEffect60(() => {
     if (armed && !canCreate) setMotionPathArmed(false);
   }, [armed, canCreate, setMotionPathArmed]);
-  useEffect61(() => {
+  useEffect60(() => {
     if (!armed || !createSelector || !compW) return;
     const surface = iframeRef.current?.ownerDocument?.querySelector(
       "[data-preview-pan-surface]"
@@ -43113,8 +43065,8 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo37, useCallback as useCallback96, useEffect as useEffect62, useRef as useRef91, useState as useState79 } from "react";
-import { Crop, MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
+import { memo as memo37, useCallback as useCallback96, useEffect as useEffect61, useRef as useRef91, useState as useState79 } from "react";
+import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { jsx as jsx94, jsxs as jsxs79 } from "react/jsx-runtime";
 var SNAP_DEFAULTS = {
   snapEnabled: true,
@@ -43137,9 +43089,6 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
   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 = useRef91(null);
   const gridButtonRef = useRef91(null);
   const updatePrefs = useCallback96(
@@ -43159,7 +43108,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
   const toggleGrid = useCallback96(() => {
     updatePrefs({ gridVisible: !prefs.gridVisible });
   }, [prefs.gridVisible, updatePrefs]);
-  useEffect62(() => {
+  useEffect61(() => {
     const handleKeyDown = (e) => {
       if (e.defaultPrevented) return;
       const t = e.target;
@@ -43178,7 +43127,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [updatePrefs]);
-  useEffect62(() => {
+  useEffect61(() => {
     if (!gridPopoverOpen) return;
     const handleClickOutside = (e) => {
       const target = e.target;
@@ -43194,18 +43143,6 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
       className: "absolute top-2 right-2 z-50 flex items-center gap-1",
       onPointerDown: (e) => e.stopPropagation(),
       children: [
-        cropAvailable && /* @__PURE__ */ jsx94(
-          "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,
-            children: /* @__PURE__ */ jsx94(Crop, { size: 16, weight: cropMode ? "fill" : "regular" })
-          }
-        ),
         motionPathCreateAvailable && /* @__PURE__ */ jsx94(
           "button",
           {
@@ -43293,7 +43230,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
 });
 
 // src/components/StudioFeedbackBar.tsx
-import { memo as memo38, useState as useState80, useCallback as useCallback97, useRef as useRef92, useEffect as useEffect63 } from "react";
+import { memo as memo38, useState as useState80, useCallback as useCallback97, useRef as useRef92, useEffect as useEffect62 } from "react";
 import { Fragment as Fragment30, jsx as jsx95, jsxs as jsxs80 } from "react/jsx-runtime";
 var DEFAULT_FEEDBACK_INTERVAL = 10;
 var AUTO_DISMISS_MS2 = 2e4;
@@ -43355,7 +43292,7 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
   const [exiting, setExiting] = useState80(false);
   const inputRef = useRef92(null);
   const dismissTimerRef = useRef92(null);
-  useEffect63(() => {
+  useEffect62(() => {
     incrementSessionCount();
     const showTimer = setTimeout(() => {
       if (shouldShowFeedback()) {
@@ -43364,12 +43301,12 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
     }, 3e3);
     return () => clearTimeout(showTimer);
   }, []);
-  useEffect63(() => {
+  useEffect62(() => {
     if (!visible) return;
     const raf = requestAnimationFrame(() => setEntered(true));
     return () => cancelAnimationFrame(raf);
   }, [visible]);
-  useEffect63(() => {
+  useEffect62(() => {
     if (!visible || rating !== null || submitted) return;
     dismissTimerRef.current = setTimeout(() => {
       handleDismiss();
@@ -43378,7 +43315,7 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
       if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
     };
   }, [visible, rating, submitted]);
-  useEffect63(() => {
+  useEffect62(() => {
     if (rating !== null && inputRef.current) {
       inputRef.current.focus();
     }
@@ -43542,8 +43479,6 @@ function StudioPreviewArea({
   isGestureRecording,
   recordingState,
   onToggleRecording,
-  cropMode,
-  onCropModeChange,
   blockPreview,
   gestureOverlay
 }) {
@@ -43614,7 +43549,7 @@ function StudioPreviewArea({
     },
     [domEditSelection?.id, selectedGsapAnimations]
   );
-  const timelineEditCallbacks = useMemo35(
+  const timelineEditCallbacks = useMemo34(
     () => ({
       onMoveElement: handleTimelineElementMove,
       onResizeElement: handleTimelineElementResize,
@@ -43790,8 +43725,6 @@ function StudioPreviewArea({
               onBoxSizeCommit: handleDomBoxSizeCommit,
               onRotationCommit: handleDomRotationCommit,
               onStyleCommit: handleDomStyleCommit,
-              cropMode,
-              onCropModeChange,
               gridVisible: snapPrefs.gridVisible,
               gridSpacing: snapPrefs.gridSpacing,
               recordingState,
@@ -43833,14 +43766,14 @@ function StudioPreviewArea({
 // src/components/StudioRightPanel.tsx
 import {
   useCallback as useCallback108,
-  useEffect as useEffect67,
-  useMemo as useMemo36,
+  useEffect as useEffect66,
+  useMemo as useMemo35,
   useRef as useRef97,
   useState as useState90
 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo39, useState as useState83, useCallback as useCallback100, useEffect as useEffect64, useRef as useRef94 } from "react";
+import { memo as memo39, useState as useState83, useCallback as useCallback100, useEffect as useEffect63, useRef as useRef94 } from "react";
 
 // src/components/editor/useLayerDrag.ts
 import { useRef as useRef93, useState as useState82, useCallback as useCallback99 } from "react";
@@ -44063,10 +43996,10 @@ var LayersPanel = memo39(function LayersPanel2() {
     });
     setLayers(sortLayersByZIndex(items));
   }, [previewIframeRef, activeCompPath, isMasterView, activeGroupElement, setActiveGroupElement]);
-  useEffect64(() => {
+  useEffect63(() => {
     collectLayers();
   }, [collectLayers, refreshKey]);
-  useEffect64(() => {
+  useEffect63(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     const handleLoad = () => {
@@ -44076,7 +44009,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     iframe.addEventListener("load", handleLoad);
     return () => iframe.removeEventListener("load", handleLoad);
   }, [previewIframeRef, collectLayers]);
-  useEffect64(() => {
+  useEffect63(() => {
     if (!compositionLoading) {
       const timer = setTimeout(collectLayers, 100);
       return () => clearTimeout(timer);
@@ -44951,7 +44884,7 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo44, useState as useState87, useRef as useRef95, useEffect as useEffect65, useId as useId2 } from "react";
+import { memo as memo44, useState as useState87, useRef as useRef95, useEffect as useEffect64, useId as useId2 } from "react";
 
 // src/components/renders/RenderQueueItem.tsx
 import { memo as memo43, useCallback as useCallback104, useState as useState86 } from "react";
@@ -45250,8 +45183,8 @@ function FormatInfoTooltip({ format }) {
   const hide = () => {
     timeoutRef.current = setTimeout(() => setOpen(false), 120);
   };
-  useEffect65(() => () => clearTimeout(timeoutRef.current), []);
-  useEffect65(() => {
+  useEffect64(() => () => clearTimeout(timeoutRef.current), []);
+  useEffect64(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -45456,7 +45389,7 @@ var RenderQueue = memo44(function RenderQueue2({
   compositionDimensions
 }) {
   const listRef = useRef95(null);
-  useEffect65(() => {
+  useEffect64(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
     }
@@ -45564,7 +45497,7 @@ var RenderQueue = memo44(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState89, useEffect as useEffect66, useCallback as useCallback106, useRef as useRef96 } from "react";
+import { useState as useState89, useEffect as useEffect65, useCallback as useCallback106, useRef as useRef96 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
@@ -46203,7 +46136,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const { domEditSelection } = useDomEditSelectionContext();
   const manifestRef = useRef96(manifest);
   const notesCtrlRef = useRef96(makeSlideshowNotesController());
-  useEffect66(() => {
+  useEffect65(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
       setManifest({ slides: [] });
@@ -46237,7 +46170,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersistNotes]
   );
-  useEffect66(() => {
+  useEffect65(() => {
     const ctrl = notesCtrlRef.current;
     return () => {
       ctrl.flush();
@@ -46775,8 +46708,6 @@ function StudioRightPanel({
   recordingState,
   recordingDuration,
   onToggleRecording,
-  cropMode,
-  onCropModeChange,
   sdkSession,
   reloadPreview,
   domEditSaveTimestampRef,
@@ -46879,7 +46810,7 @@ function StudioRightPanel({
   const splitContainerRef = useRef97(null);
   const splitDragRef = useRef97(null);
   const backgroundRemovalAbortRef = useRef97(null);
-  useEffect67(
+  useEffect66(
     () => () => {
       backgroundRemovalAbortRef.current?.abort();
     },
@@ -46887,7 +46818,7 @@ function StudioRightPanel({
   );
   const renderJobs = renderQueue.jobs;
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-  const slideshowScenes = useMemo36(() => {
+  const slideshowScenes = useMemo35(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -47061,9 +46992,7 @@ function StudioRightPanel({
       onSetAllKeyframeEases: handleSetAllKeyframeEases,
       recordingState,
       recordingDuration,
-      onToggleRecording,
-      cropMode,
-      onCropModeChange
+      onToggleRecording
     }
   );
   const renderQueuePanel = /* @__PURE__ */ jsx106(
@@ -47505,7 +47434,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect68, useCallback as useCallback110 } from "react";
+import { useEffect as useEffect67, useCallback as useCallback110 } from "react";
 function isTextInput(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -47573,7 +47502,7 @@ function useKeyframeKeyboard({
       onNudgeKeyframe
     ]
   );
-  useEffect68(() => {
+  useEffect67(() => {
     if (!enabled) return;
     window.addEventListener("keydown", handler, { capture: true });
     return () => window.removeEventListener("keydown", handler, { capture: true });
@@ -47834,15 +47763,19 @@ function TimelineToolbar({
   ] }) });
 }
 
+// src/components/storyboard/StoryboardView.tsx
+import { useState as useState96 } from "react";
+import { Copy as Copy2, Check as Check2 } from "@phosphor-icons/react";
+
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback111, useEffect as useEffect69, useState as useState91 } from "react";
+import { useCallback as useCallback111, useEffect as useEffect68, useState as useState91 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState91(null);
   const [loading, setLoading] = useState91(true);
   const [error, setError] = useState91(null);
   const [reloadKey, setReloadKey] = useState91(0);
   const reload = useCallback111(() => setReloadKey((k) => k + 1), []);
-  useEffect69(() => {
+  useEffect68(() => {
     if (!projectId) return;
     let cancelled = false;
     setLoading(true);
@@ -47865,7 +47798,7 @@ function useStoryboard(projectId) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useMemo as useMemo38, useState as useState95 } from "react";
+import { useMemo as useMemo37, useState as useState95 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx108, jsxs as jsxs93 } from "react/jsx-runtime";
@@ -47888,11 +47821,11 @@ function StoryboardDirection({ globals, frameCount }) {
 }
 
 // src/components/storyboard/FramePoster.tsx
-import { useEffect as useEffect70, useState as useState92 } from "react";
+import { useEffect as useEffect69, useState as useState92 } from "react";
 import { jsx as jsx109 } from "react/jsx-runtime";
 function FramePoster({ projectId, src, seconds, title, fit = "cover" }) {
   const [failed2, setFailed] = useState92(false);
-  useEffect70(() => setFailed(false), [src, seconds]);
+  useEffect69(() => setFailed(false), [src, seconds]);
   if (failed2) {
     return /* @__PURE__ */ jsx109("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
@@ -48065,7 +47998,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback112, useEffect as useEffect71, useMemo as useMemo37, useRef as useRef99, useState as useState93 } from "react";
+import { useCallback as useCallback112, useEffect as useEffect70, useMemo as useMemo36, useRef as useRef99, useState as useState93 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx114, jsxs as jsxs97 } from "react/jsx-runtime";
@@ -48077,7 +48010,7 @@ function useEditableFile(path, onSaved) {
   const [loading, setLoading] = useState93(true);
   const [saving, setSaving] = useState93(false);
   const [error, setError] = useState93(null);
-  useEffect71(() => {
+  useEffect70(() => {
     if (!path) return;
     let cancelled = false;
     setLoading(true);
@@ -48115,7 +48048,7 @@ function hardenLinks(node) {
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState93(source);
   const primed = useRef99(false);
-  useEffect71(() => {
+  useEffect70(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
       setDebounced(source);
@@ -48124,7 +48057,7 @@ function useMarkdownPreview(source) {
     const id = window.setTimeout(() => setDebounced(source), 200);
     return () => window.clearTimeout(id);
   }, [source]);
-  return useMemo37(() => {
+  return useMemo36(() => {
     const html2 = marked.parse(debounced, { async: false });
     DOMPurify.addHook("afterSanitizeAttributes", hardenLinks);
     try {
@@ -48147,8 +48080,8 @@ function StoryboardSourceEditor({
   const activePath = files.some((f) => f.path === selected) ? selected : files[0]?.path ?? "";
   const file = useEditableFile(activePath, onSaved);
   const previewHtml = useMarkdownPreview(file.content);
-  useEffect71(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
-  useEffect71(() => {
+  useEffect70(() => onDirtyChange?.(file.dirty), [onDirtyChange, file.dirty]);
+  useEffect70(() => {
     if (!file.dirty) return;
     const onBeforeUnload = (event) => {
       event.preventDefault();
@@ -48220,7 +48153,7 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback113, useEffect as useEffect72, useState as useState94 } from "react";
+import { useCallback as useCallback113, useEffect as useEffect71, useState as useState94 } from "react";
 import { setFrameStatus, setFrameVoiceover } from "@hyperframes/core/storyboard";
 import { jsx as jsx115, jsxs as jsxs98 } from "react/jsx-runtime";
 function StoryboardFrameFocus({
@@ -48261,7 +48194,7 @@ function StoryboardFrameFocus({
   const saveVoiceover = useCallback113(() => {
     return applyEdit((src) => setFrameVoiceover(src, frame.index, draft));
   }, [applyEdit, frame.index, draft]);
-  useEffect72(() => {
+  useEffect71(() => {
     if (!dirty) return;
     const onBeforeUnload = (e) => {
       e.preventDefault();
@@ -48276,7 +48209,7 @@ function StoryboardFrameFocus({
   const handleNavigate = (delta) => {
     if (confirmLeave()) onNavigate(delta);
   };
-  useEffect72(() => {
+  useEffect71(() => {
     const onKey = (e) => {
       const el = document.activeElement;
       if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) return;
@@ -48454,7 +48387,7 @@ function StoryboardLoaded({
   const [subView, setSubView] = useState95("board");
   const [sourceDirty, setSourceDirty] = useState95(false);
   const [focusedIndex, setFocusedIndex] = useState95(null);
-  const sourceFiles = useMemo38(() => {
+  const sourceFiles = useMemo37(() => {
     const files = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
     return files;
@@ -48584,14 +48517,75 @@ function Message({ children, tone = "muted" }) {
     }
   );
 }
+function handoffPrompt(path) {
+  return `Create a \`${path}\` at the project root to plan this video frame by frame.
+
+Use this format:
+
+---
+format: 1920x1080
+message: <the one-line takeaway of the video>
+arc: <the narrative shape, e.g. Problem \u2192 Solution>
+audience: <who it's for>
+---
+
+## Frame 1 \u2014 <title>
+- duration: 5s
+- transition_in: crossfade
+- status: planned
+- src: compositions/frames/01-<slug>.html
+
+<A sentence or two: what's on screen and what the narration says.>
+
+Add one \`## Frame N\` section per beat. Keep the arc tight.`;
+}
 function EmptyState({ path }) {
-  return /* @__PURE__ */ jsxs100("div", { className: "rounded-lg border border-dashed border-neutral-800 px-6 py-16 text-center", children: [
-    /* @__PURE__ */ jsx117("h2", { className: "text-base font-semibold text-neutral-300", children: "No storyboard yet" }),
-    /* @__PURE__ */ jsxs100("p", { className: "mx-auto mt-2 max-w-md text-sm text-neutral-500", children: [
-      "Add a ",
-      /* @__PURE__ */ jsx117("code", { className: "rounded bg-neutral-900 px-1 py-0.5 text-neutral-400", children: path }),
-      " at the project root to plan this video frame by frame. Your agent can create and iterate on it for you."
-    ] })
+  const [copied, setCopied] = useState96(false);
+  const prompt = handoffPrompt(path);
+  const onCopy = async () => {
+    if (await copyTextToClipboard(prompt)) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ jsxs100("div", { children: [
+    /* @__PURE__ */ jsxs100("div", { className: "rounded-lg border border-dashed border-neutral-800 px-6 py-10 text-center", children: [
+      /* @__PURE__ */ jsx117("h2", { className: "text-base font-semibold text-neutral-300", children: "No storyboard yet" }),
+      /* @__PURE__ */ jsxs100("p", { className: "mx-auto mt-2 max-w-md text-sm text-neutral-500", children: [
+        "Add a ",
+        /* @__PURE__ */ jsx117("code", { className: "rounded bg-neutral-900 px-1 py-0.5 text-neutral-400", children: path }),
+        " ",
+        "at the project root to plan this video frame by frame. Hand this prompt to your coding agent to scaffold it."
+      ] }),
+      /* @__PURE__ */ jsxs100("div", { className: "mx-auto mt-6 max-w-2xl overflow-hidden rounded-lg border border-neutral-800 bg-neutral-900 text-left", children: [
+        /* @__PURE__ */ jsxs100("div", { className: "flex items-center justify-between border-b border-neutral-800 px-3 py-2", children: [
+          /* @__PURE__ */ jsx117("span", { className: "font-mono text-xs text-neutral-500", children: "Prompt for your agent" }),
+          /* @__PURE__ */ jsx117(
+            Button,
+            {
+              size: "sm",
+              variant: "secondary",
+              onClick: onCopy,
+              icon: copied ? /* @__PURE__ */ jsx117(Check2, { size: 14 }) : /* @__PURE__ */ jsx117(Copy2, { size: 14 }),
+              children: copied ? "Copied" : "Copy prompt"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx117("pre", { className: "max-h-64 overflow-auto px-4 py-3 font-mono text-xs leading-relaxed text-neutral-400 whitespace-pre-wrap", children: prompt })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx117(SkeletonPreview, {})
+  ] });
+}
+function SkeletonPreview() {
+  return /* @__PURE__ */ jsxs100("div", { "aria-hidden": "true", className: "mt-10 select-none opacity-40", children: [
+    /* @__PURE__ */ jsx117("div", { className: "mb-4 text-center text-xs uppercase tracking-wide text-neutral-600", children: "Preview" }),
+    /* @__PURE__ */ jsx117("div", { className: "grid gap-x-6 gap-y-8 [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs100("div", { className: "rounded-lg border border-neutral-800 bg-neutral-900/40 p-3", children: [
+      /* @__PURE__ */ jsx117("div", { className: "aspect-video w-full rounded bg-neutral-800/60" }),
+      /* @__PURE__ */ jsx117("div", { className: "mt-3 h-3 w-2/3 rounded bg-neutral-800/60" }),
+      /* @__PURE__ */ jsx117("div", { className: "mt-2 h-2.5 w-full rounded bg-neutral-800/40" }),
+      /* @__PURE__ */ jsx117("div", { className: "mt-1.5 h-2.5 w-4/5 rounded bg-neutral-800/40" })
+    ] }, i)) })
   ] });
 }
 
@@ -48612,11 +48606,11 @@ function StudioSplash({ waiting }) {
 }
 
 // src/hooks/useServerConnection.ts
-import { useEffect as useEffect73, useState as useState96 } from "react";
+import { useEffect as useEffect72, useState as useState97 } from "react";
 function useServerConnection() {
-  const [projectId, setProjectId] = useState96(null);
-  const [resolving, setResolving] = useState96(true);
-  const [waitingForServer, setWaitingForServer] = useState96(false);
+  const [projectId, setProjectId] = useState97(null);
+  const [resolving, setResolving] = useState97(true);
+  const [waitingForServer, setWaitingForServer] = useState97(false);
   useMountEffect(() => {
     const hashProjectId = parseProjectIdFromHash(window.location.hash);
     let cancelled = false;
@@ -48653,7 +48647,7 @@ function useServerConnection() {
       if (retryTimer !== null) clearTimeout(retryTimer);
     };
   });
-  useEffect73(() => {
+  useEffect72(() => {
     const onHashChange = () => {
       const next = parseProjectIdFromHash(window.location.hash);
       if (next && next !== projectId) setProjectId(next);
@@ -48670,23 +48664,22 @@ function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef100(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
-  useEffect74(() => {
+  useEffect73(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
   }, [projectId, resolving, waitingForServer]);
-  const [activeCompPath, setActiveCompPath] = useState97(null);
-  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState97(
+  const [activeCompPath, setActiveCompPath] = useState98(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState98(
     () => initialUrlStateRef.current.activeCompPath == null
   );
-  const [compIdToSrc, setCompIdToSrc] = useState97(/* @__PURE__ */ new Map());
-  const [previewIframe, setPreviewIframe] = useState97(null);
-  const [compositionLoading, setCompositionLoading] = useState97(true);
-  const [refreshKey, setRefreshKey] = useState97(0);
-  const [previewDocumentVersion, setPreviewDocumentVersion] = useState97(0);
-  const [blockPreview, setBlockPreview] = useState97(null);
-  const cropModeProps = useCropModeProps();
+  const [compIdToSrc, setCompIdToSrc] = useState98(/* @__PURE__ */ new Map());
+  const [previewIframe, setPreviewIframe] = useState98(null);
+  const [compositionLoading, setCompositionLoading] = useState98(true);
+  const [refreshKey, setRefreshKey] = useState98(0);
+  const [previewDocumentVersion, setPreviewDocumentVersion] = useState98(0);
+  const [blockPreview, setBlockPreview] = useState98(null);
   const previewIframeRef = useRef100(null);
   const activeCompPathRef = useRef100(activeCompPath);
   activeCompPathRef.current = activeCompPath;
@@ -48701,7 +48694,7 @@ function StudioApp() {
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const activePreviewUrl = activeCompPath ? `/api/projects/${projectId}/preview/comp/${activeCompPath}` : null;
-  const effectiveTimelineDuration = useMemo39(() => {
+  const effectiveTimelineDuration = useMemo38(() => {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
@@ -48715,13 +48708,13 @@ function StudioApp() {
       window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300)
     );
   }, []);
-  useEffect74(
+  useEffect73(
     () => () => {
       for (const id of refreshTimersRef.current) clearTimeout(id);
     },
     []
   );
-  const [timelineVisible, setTimelineVisible] = useState97(
+  const [timelineVisible, setTimelineVisible] = useState98(
     () => initialUrlStateRef.current.timelineVisible ?? readStudioUiPreferences().timelineVisible ?? true
   );
   const toggleTimelineVisibility = useCallback114(() => {
@@ -48748,7 +48741,7 @@ function StudioApp() {
     setRefreshKey
   });
   const sdkHandle = useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef);
-  useEffect74(() => {
+  useEffect73(() => {
     if (activeCompPathHydrated) return;
     if (!fileManager.fileTreeLoaded) return;
     const nextCompPath = normalizeStudioCompositionPath(
@@ -49047,7 +49040,7 @@ function StudioApp() {
     timelineVisible,
     toggleTimelineVisibility
   });
-  const timelineToolbar = useMemo39(
+  const timelineToolbar = useMemo38(
     () => /* @__PURE__ */ jsx119(
       TimelineToolbar,
       {
@@ -49143,7 +49136,6 @@ function StudioApp() {
                   recordingState: gestureState,
                   onToggleRecording: recordingToggle,
                   blockPreview,
-                  ...cropModeProps,
                   gestureOverlay: gestureState === "recording" && previewIframe ? /* @__PURE__ */ jsx119(
                     GestureTrailOverlay,
                     {
@@ -49173,7 +49165,6 @@ function StudioApp() {
                   reloadPreview,
                   domEditSaveTimestampRef,
                   recordEdit: editHistory.recordEdit,
-                  ...cropModeProps,
                   onToggleElementHidden: timelineEditing.handleToggleElementHidden
                 }
               )
@@ -49202,10 +49193,10 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState98, useCallback as useCallback115, useRef as useRef101 } from "react";
+import { useState as useState99, useCallback as useCallback115, useRef as useRef101 } from "react";
 function useElementPicker(iframeRef, options) {
-  const [isPickMode, setIsPickMode] = useState98(false);
-  const [pickedElement, setPickedElement] = useState98(null);
+  const [isPickMode, setIsPickMode] = useState99(false);
+  const [pickedElement, setPickedElement] = useState99(null);
   const activeOverrideRef = useRef101(null);
   const getActiveIframe = useCallback115(() => {
     return activeOverrideRef.current ?? iframeRef.current;