@agent-native/core 0.117.1 → 0.117.2

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -406,6 +406,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   pendingReviewScreenIds = EMPTY_SCREEN_IDS,
   onReviewPendingScreen,
   interactMode = false,
+  readOnly = false,
   activeScreenHasHoveredChild = false,
   hoveredChildScreenId,
   directlyHoveredScreenId,
@@ -487,6 +488,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   const [surfaceSize, setSurfaceSize] = useState({ width: 0, height: 0 });
   const [frameGeometry, setFrameGeometry] = useState<FrameGeometryById>({});
   const frameGeometryRef = useRef(frameGeometry);
+  const liveFrameDragPositionsRef = useRef(
+    new Map<string, { left: number; top: number }>(),
+  );
+  const liveFrameDragSelectionPositionRef = useRef<{
+    left: number;
+    top: number;
+  } | null>(null);
   const onGeometryChangeRef = useRef(onGeometryChange);
   const onGeometryCommitRef = useRef(onGeometryCommit);
   const screensRef = useRef(screens);
@@ -1162,6 +1170,29 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     frameGeometryRef.current = frameGeometry;
   }, [frameGeometry]);
 
+  // Frame drags update the shell and selection box imperatively between React
+  // commits. Reapply the live box position after any feedback-driven commit
+  // so alignment guides or transform badges cannot paint stale geometry over
+  // the moving outline.
+  useLayoutEffect(() => {
+    for (const [id, position] of liveFrameDragPositionsRef.current) {
+      const frame = surfaceRef.current?.querySelector<HTMLElement>(
+        `[data-frame-id="${CSS.escape(id)}"]`,
+      );
+      if (!frame) continue;
+      frame.style.left = `${position.left}px`;
+      frame.style.top = `${position.top}px`;
+    }
+    const position = liveFrameDragSelectionPositionRef.current;
+    if (!position) return;
+    const selectionBox = surfaceRef.current?.querySelector<HTMLElement>(
+      "[data-frame-selection-box]",
+    );
+    if (!selectionBox) return;
+    selectionBox.style.left = `${position.left}px`;
+    selectionBox.style.top = `${position.top}px`;
+  });
+
   const onSelectionChangeRef = useRef(onSelectionChange);
   useEffect(() => {
     onSelectionChangeRef.current = onSelectionChange;
@@ -2524,6 +2555,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   ]);
 
   const deleteSelectedItems = useCallback(() => {
+    if (readOnly) return false;
     const frameIds = selectedIdsRef.current.filter(
       (id) => frameGeometryRef.current[id],
     );
@@ -2563,6 +2595,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     return true;
   }, [
     onDeleteSelection,
+    readOnly,
     updateDraftPrimitives,
     updateFrameGeometry,
     updateSelectedDraftIds,
@@ -2939,6 +2972,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       feedbackTimerRef.current = null;
     }
     dragState.current = null;
+    liveFrameDragPositionsRef.current.clear();
+    liveFrameDragSelectionPositionRef.current = null;
     setIsDragging(false);
     setIsPanning(false);
     setMarquee(null);
@@ -4303,6 +4338,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const beginDraftDrag = useCallback(
     (id: string, e: React.MouseEvent) => {
+      if (readOnly) return;
       if (e.button !== 0 || e.shiftKey) return;
       e.preventDefault();
       e.stopPropagation();
@@ -4622,6 +4658,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const beginDraftResize = useCallback(
     (id: string, handle: ResizeHandle, e: React.MouseEvent) => {
+      if (readOnly) return;
       if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();
@@ -4863,6 +4900,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const beginFrameDrag = useCallback(
     (id: string, e: React.MouseEvent) => {
+      if (readOnly) return;
       if (e.button !== 0 || e.shiftKey || lockedScreenIdSet.has(id)) return;
       e.preventDefault();
       e.stopPropagation();
@@ -4931,15 +4969,23 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       const frameLabelHeight =
         FRAME_LABEL_HEIGHT * chromeScaleFromZoom(zoomRef.current);
       const draggedFrameEls = new Map<string, HTMLElement>();
+      const draggedFrameOriginPositions = new Map<
+        string,
+        { left: number; top: number }
+      >();
       targetIds.forEach((targetId) => {
         const el = surfaceRef.current?.querySelector<HTMLElement>(
           `[data-frame-id="${CSS.escape(targetId)}"]`,
         );
-        if (el) draggedFrameEls.set(targetId, el);
+        if (!el) return;
+        draggedFrameEls.set(targetId, el);
       });
-      const selectionBoxEl = surfaceRef.current?.querySelector<HTMLElement>(
-        "[data-frame-selection-box]",
-      );
+      // Selecting an unselected screen mounts the SelectionBox after this
+      // callback returns. Resolve it on the first live move instead of
+      // caching null at drag start, then keep the lookup out of later ticks.
+      let selectionBoxEl: HTMLElement | null = null;
+      let selectionBoxOriginPosition: { left: number; top: number } | null =
+        null;
 
       const handleMouseMove = (ev: MouseEvent) => {
         const state = dragState.current;
@@ -5023,42 +5069,60 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             const geometry = settledGeometryById[targetId];
             const el = draggedFrameEls.get(targetId);
             if (!geometry || !el) return;
-            const { left, top } = frameStyleLeftTop(geometry, frameLabelHeight);
-            el.style.left = `${left}px`;
-            el.style.top = `${top}px`;
+            let originPosition = draggedFrameOriginPositions.get(targetId);
+            if (!originPosition) {
+              const fallback = frameStyleLeftTop(
+                state.originFrames[targetId],
+                frameLabelHeight,
+              );
+              const renderedLeft = Number.parseFloat(el.style.left);
+              const renderedTop = Number.parseFloat(el.style.top);
+              originPosition = {
+                left: Number.isFinite(renderedLeft)
+                  ? renderedLeft
+                  : fallback.left,
+                top: Number.isFinite(renderedTop) ? renderedTop : fallback.top,
+              };
+              draggedFrameOriginPositions.set(targetId, originPosition);
+            }
+            if (!originPosition) return;
+            const moveX = dx + snap.dx;
+            const moveY = dy + snap.dy;
+            const nextPosition = {
+              left: originPosition.left + moveX,
+              top: originPosition.top + moveY,
+            };
+            liveFrameDragPositionsRef.current.set(targetId, nextPosition);
+            el.style.left = `${nextPosition.left}px`;
+            el.style.top = `${nextPosition.top}px`;
           });
           // Keep the selection outline + resize/rotate handles glued to the
           // dragged frame — SelectionBox's own `geometry` prop only updates
           // on the next real React render, which this tick intentionally
           // skips (see above), so without this it would visually detach and
           // trail behind during the drag.
+          if (!selectionBoxEl) {
+            selectionBoxEl =
+              surfaceRef.current?.querySelector<HTMLElement>(
+                "[data-frame-selection-box]",
+              ) ?? null;
+          }
           if (selectionBoxEl) {
-            const targetGeometries = state.targetIds.map(
-              (targetId) => settledGeometryById[targetId],
-            );
-            const bounds =
-              targetGeometries.length === 1
-                ? targetGeometries[0]
-                : (() => {
-                    const groupBounds = getFrameGroupBounds(
-                      targetGeometries.map((geometry) => ({
-                        id: "",
-                        geometry,
-                      })),
-                    );
-                    return groupBounds
-                      ? {
-                          x: groupBounds.left,
-                          y: groupBounds.top,
-                          width: groupBounds.width,
-                          height: groupBounds.height,
-                        }
-                      : null;
-                  })();
-            if (bounds) {
-              const { left, top } = frameStyleLeftTop(bounds);
-              selectionBoxEl.style.left = `${left}px`;
-              selectionBoxEl.style.top = `${top}px`;
+            if (!selectionBoxOriginPosition) {
+              const left = Number.parseFloat(selectionBoxEl.style.left);
+              const top = Number.parseFloat(selectionBoxEl.style.top);
+              if (Number.isFinite(left) && Number.isFinite(top)) {
+                selectionBoxOriginPosition = { left, top };
+              }
+            }
+            if (selectionBoxOriginPosition) {
+              const nextPosition = {
+                left: selectionBoxOriginPosition.left + dx + snap.dx,
+                top: selectionBoxOriginPosition.top + dy + snap.dy,
+              };
+              liveFrameDragSelectionPositionRef.current = nextPosition;
+              selectionBoxEl.style.left = `${nextPosition.left}px`;
+              selectionBoxEl.style.top = `${nextPosition.top}px`;
             }
           }
         }
@@ -5196,6 +5260,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       installDragListeners,
       lockedScreenIdSet,
       onPick,
+      readOnly,
       resolvePrimitiveScreenId,
       showTransformFeedback,
       updateFrameGeometry,
@@ -5208,6 +5273,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const beginResize = useCallback(
     (id: string, handle: ResizeHandle, e: React.MouseEvent) => {
+      if (readOnly) return;
       if (e.button !== 0 || lockedScreenIdSet.has(id)) return;
       e.preventDefault();
       e.stopPropagation();
@@ -5597,6 +5663,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const beginRotate = useCallback(
     (id: string, e: React.MouseEvent) => {
+      if (readOnly) return;
       if (e.button !== 0 || lockedScreenIdSet.has(id)) return;
       e.preventDefault();
       e.stopPropagation();
@@ -5739,6 +5806,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   // beginRotate above — single-frame rotate is unaffected.
   const beginGroupRotate = useCallback(
     (e: React.MouseEvent) => {
+      if (readOnly) return;
       if (e.button !== 0) return;
       e.preventDefault();
       e.stopPropagation();
@@ -5981,6 +6049,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
   const beginDuplicateGesture = useCallback(
     (screen: ScreenFile, display: string, e: React.MouseEvent<HTMLElement>) => {
+      if (readOnly) return;
       if (e.button !== 0 || !e.altKey || lockedScreenIdSet.has(screen.id)) {
         return;
       }
@@ -6808,6 +6877,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (activePenPathRef.current) return;
+      if (readOnly) return;
       if (!isArrowNudgeKey(event.key) || isEditableHotkeyTarget(event.target)) {
         return;
       }
@@ -6901,6 +6971,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     };
   }, [
     getCurrentCanvasEntries,
+    readOnly,
     scheduleFeedbackClear,
     updateDraftPrimitives,
     updateFrameGeometry,
@@ -6909,6 +6980,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (activePenPathRef.current) return;
+      if (readOnly) return;
       if (
         (event.key !== "Delete" && event.key !== "Backspace") ||
         event.metaKey ||
@@ -6927,7 +6999,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     return () => {
       window.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [deleteSelectedItems]);
+  }, [deleteSelectedItems, readOnly]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -7018,6 +7090,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   useEffect(() => {
     if (!onDuplicate) return;
     const handleKeyDown = (event: KeyboardEvent) => {
+      if (readOnly) return;
       if (activePenPathRef.current) return;
       if (
         !(event.metaKey || event.ctrlKey) ||
@@ -7077,7 +7150,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     return () => {
       window.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [onDuplicate, screens]);
+  }, [onDuplicate, readOnly, screens]);
 
   // Releasing Alt should clear the alt-hover measurement immediately even if
   // the mouse never moves again (e.g. the user just lifts the Alt key while
@@ -7101,8 +7174,9 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   useEffect(() => {
     effectiveToolRef.current = effectiveTool;
   }, [effectiveTool]);
-  const penActive = effectiveTool === "pen";
-  const creationToolActive = Boolean(getDraftCreationTool(effectiveTool));
+  const penActive = !readOnly && effectiveTool === "pen";
+  const creationToolActive =
+    !readOnly && Boolean(getDraftCreationTool(effectiveTool));
   // PERF9-WHEEL: an in-flight wheel pan/zoom also mutes iframe pointer
   // events, but imperatively (see markWheelGestureActive) rather than via
   // this flag — flipping React state here at gesture start re-rendered every
@@ -7559,7 +7633,10 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   editorChromeScaleY={canvasZoom / 100}
                   editMode={boardEditMode && !interactMode}
                   interactMode={interactMode}
-                  scaleMode={boardIsActive && effectiveTool === "scale"}
+                  scaleMode={
+                    !readOnly && boardIsActive && effectiveTool === "scale"
+                  }
+                  readOnly={readOnly}
                   clearSelectionRequest={boardClearSelectionRequest}
                   selectedSelector={
                     boardIsActive ? (boardSelectedSelector ?? null) : null
@@ -7641,7 +7718,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 screen.id === hoveredChildScreenId
               }
               groupSelected={hasGroupSelection}
-              handlesEnabled={!hasGroupSelection}
+              handlesEnabled={!hasGroupSelection && !readOnly}
+              readOnly={readOnly}
               penActive={penActive}
               creationToolActive={creationToolActive}
               canvasGestureActive={canvasGestureActive}
@@ -7674,6 +7752,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             isSelected={selectedDraftIdSet.has(draft.id)}
             groupSelected={Boolean(selectedDraftGroupBounds)}
             penActive={penActive}
+            readOnly={readOnly}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
             onClick={handleDraftClick}
@@ -7689,6 +7768,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             preview
             groupSelected={false}
             penActive={penActive}
+            readOnly={readOnly}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
             onClick={() => {}}
@@ -7704,6 +7784,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 geometry={entry.geometry}
                 chromeScale={chromeScale}
                 chromeSettling={chromeSettling}
+                showHandles={!readOnly}
               />
             ))
           : null}
@@ -7715,6 +7796,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 geometry={entry.geometry}
                 chromeScale={chromeScale}
                 chromeSettling={chromeSettling}
+                showHandles={!readOnly}
               />
             ))
           : null}
@@ -7747,6 +7829,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             geometry={singleSelectedFrame.geometry}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
+            handlesEnabled={!readOnly}
             showRotate
             onStartResize={(handle, event) =>
               beginResize(singleSelectedFrame.id, handle, event)
@@ -7762,6 +7845,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             geometry={singleSelectedDraft.geometry}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
+            handlesEnabled={!readOnly}
             showRotate={false}
             onStartResize={(handle, event) =>
               beginDraftResize(singleSelectedDraft.id, handle, event)
@@ -7775,6 +7859,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             bounds={selectedGroupBounds}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
+            handlesEnabled={!readOnly}
             onStartResize={beginGroupResize}
             onStartRotate={beginGroupRotate}
           />
@@ -7785,6 +7870,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             bounds={selectedDraftGroupBounds}
             chromeScale={chromeScale}
             chromeSettling={chromeSettling}
+            handlesEnabled={!readOnly}
             onStartResize={beginDraftGroupResize}
           />
         ) : null}
@@ -8126,6 +8212,7 @@ function DraftPrimitiveLayer({
   isSelected,
   groupSelected,
   penActive,
+  readOnly,
   chromeScale,
   chromeSettling,
   preview = false,
@@ -8137,6 +8224,7 @@ function DraftPrimitiveLayer({
   isSelected: boolean;
   groupSelected: boolean;
   penActive: boolean;
+  readOnly: boolean;
   chromeScale: number;
   chromeSettling: boolean;
   preview?: boolean;
@@ -8180,6 +8268,10 @@ function DraftPrimitiveLayer({
       }}
       onMouseDown={(event) => {
         if (penActive) return;
+        if (readOnly) {
+          event.stopPropagation();
+          return;
+        }
         if (!preview) onStartDrag(draft.id, event);
       }}
     >
@@ -8206,7 +8298,7 @@ function DraftPrimitiveLayer({
       />
       <ResizeHandles
         active={preview}
-        enabled={!penActive && preview}
+        enabled={!readOnly && !penActive && preview}
         showRotate={false}
         chromeScale={chromeScale}
         chromeSettling={chromeSettling}
@@ -8922,6 +9014,7 @@ interface ScreenProps {
   pendingReview: boolean;
   onReviewPendingScreen?: (screenId: string) => void;
   interactMode: boolean;
+  readOnly: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
   isFileDragOver: boolean;
@@ -8992,6 +9085,7 @@ const Screen = memo(function Screen({
   pendingReview,
   onReviewPendingScreen,
   interactMode,
+  readOnly,
   isDirectlyHovered,
   isFileDragOver,
   hasHoveredChild,
@@ -9150,6 +9244,10 @@ const Screen = memo(function Screen({
         onMouseDown={(e) => {
           if (e.button !== 0) return;
           if (penActive || creationToolActive) return;
+          if (readOnly) {
+            e.stopPropagation();
+            return;
+          }
           if (e.altKey) {
             // Matches the data-screen-card mousedown handler below: without
             // this, a trailing click after the alt-drag/duplicate gesture
@@ -9307,6 +9405,10 @@ const Screen = memo(function Screen({
             return;
           }
           if (penActive) return;
+          if (readOnly) {
+            e.stopPropagation();
+            return;
+          }
           if (e.altKey && e.button === 0) {
             suppressNextClick.current = true;
             onStartDuplicateGesture(screen, display, e);
@@ -9555,6 +9657,7 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
     prev.isFileDragOver === next.isFileDragOver &&
     prev.hasHoveredChild === next.hasHoveredChild &&
     prev.groupSelected === next.groupSelected &&
+    prev.readOnly === next.readOnly &&
     prev.handlesEnabled === next.handlesEnabled &&
     prev.penActive === next.penActive &&
     prev.creationToolActive === next.creationToolActive &&
@@ -9583,6 +9686,7 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
 
 /** Gap between adjacent breakpoint frames in canvas pixels. */
 const BREAKPOINT_FRAME_GAP = 24;
+const BREAKPOINT_LABEL_WITH_WIDTH_MIN_FRAME_WIDTH = 128;
 
 /**
  * Pure geometry helper for one breakpoint sub-frame (BP-DEEP item 3a): the
@@ -9733,6 +9837,8 @@ function BreakpointPreviewRow({
         });
         const currentOffsetX = offsetX;
         offsetX += frameWidth + BREAKPOINT_FRAME_GAP;
+        const showBreakpointWidth =
+          frameWidth >= BREAKPOINT_LABEL_WITH_WIDTH_MIN_FRAME_WIDTH;
         // BP-DEEP item 5 — clicking a frame in the group always SELECTS it
         // (never toggles it off): the Framer click-to-target model returns to
         // Base by clicking the base frame / empty canvas / Escape, not by
@@ -9839,9 +9945,14 @@ function BreakpointPreviewRow({
                 >
                   {breakpointLabel(widthPx)}
                 </span>
-                <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/50">
-                  {widthPx}px
-                </span>
+                {showBreakpointWidth ? (
+                  <span
+                    data-breakpoint-width
+                    className="shrink-0 text-[10px] tabular-nums text-muted-foreground/50"
+                  >
+                    {widthPx}px
+                  </span>
+                ) : null}
               </div>
               {/* Item 8b — "…" menu (Change width / Remove), reusing the
                   exact affordance BreakpointDeviceControl already offers per
@@ -10152,6 +10263,7 @@ function GroupSelectionBox({
   chromeSettling,
   onStartResize,
   onStartRotate,
+  handlesEnabled = true,
 }: {
   bounds: NonNullable<ReturnType<typeof getFrameGroupBounds>>;
   chromeScale: number;
@@ -10161,6 +10273,7 @@ function GroupSelectionBox({
    *  rotate handle shown) — used by callers whose selection kind doesn't
    *  support group rotate yet (e.g. draft primitives). */
   onStartRotate?: (e: React.MouseEvent) => void;
+  handlesEnabled?: boolean;
 }) {
   return (
     <SelectionBox
@@ -10173,6 +10286,7 @@ function GroupSelectionBox({
       chromeScale={chromeScale}
       chromeSettling={chromeSettling}
       showRotate={!!onStartRotate}
+      handlesEnabled={handlesEnabled}
       filled
       onStartResize={onStartResize}
       onStartRotate={onStartRotate ?? (() => {})}
@@ -10184,10 +10298,12 @@ function PassiveSelectionBox({
   geometry,
   chromeScale,
   chromeSettling,
+  showHandles = true,
 }: {
   geometry: FrameGeometry;
   chromeScale: number;
   chromeSettling: boolean;
+  showHandles?: boolean;
 }) {
   return (
     <div
@@ -10208,21 +10324,23 @@ function PassiveSelectionBox({
         zIndex: 999_999,
       }}
     >
-      {CORNER_RESIZE_HANDLE_CONFIGS.map((config) => (
-        <span
-          key={config.handle}
-          data-passive-resize-handle={config.handle}
-          className="pointer-events-none absolute z-20 rounded-[2px] border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-accent-contrast-color)] shadow"
-          style={cornerHandleStyle(
-            config.handle,
-            config.cursor,
-            chromeScale,
-            chromeSettling,
-            geometry.width,
-            geometry.height,
-          )}
-        />
-      ))}
+      {showHandles
+        ? CORNER_RESIZE_HANDLE_CONFIGS.map((config) => (
+            <span
+              key={config.handle}
+              data-passive-resize-handle={config.handle}
+              className="pointer-events-none absolute z-20 rounded-[2px] border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-accent-contrast-color)] shadow"
+              style={cornerHandleStyle(
+                config.handle,
+                config.cursor,
+                chromeScale,
+                chromeSettling,
+                geometry.width,
+                geometry.height,
+              )}
+            />
+          ))
+        : null}
     </div>
   );
 }
@@ -10233,6 +10351,7 @@ function SelectionBox({
   chromeSettling,
   filled = false,
   showRotate = true,
+  handlesEnabled = true,
   onStartResize,
   onStartRotate,
 }: {
@@ -10241,6 +10360,7 @@ function SelectionBox({
   chromeSettling: boolean;
   filled?: boolean;
   showRotate?: boolean;
+  handlesEnabled?: boolean;
   onStartResize: (handle: ResizeHandle, e: React.MouseEvent) => void;
   onStartRotate: (e: React.MouseEvent) => void;
 }) {
@@ -10269,7 +10389,7 @@ function SelectionBox({
     >
       <ResizeHandles
         active
-        enabled
+        enabled={handlesEnabled}
         showRotate={showRotate}
         chromeScale={chromeScale}
         chromeSettling={chromeSettling}