@agent-native/core 0.80.8 → 0.80.10

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

@@ -32,12 +32,14 @@ import {
   type PenNode,
   type PenPath,
 } from "@shared/pen-path";
-import { IconCopy, IconMaximize } from "@tabler/icons-react";
+import { IconCopy, IconMaximize, IconPlus } from "@tabler/icons-react";
 import {
+  memo,
   useRef,
   useState,
   useCallback,
   useEffect,
+  useMemo,
   type CSSProperties,
   type ReactNode,
 } from "react";
@@ -45,6 +47,9 @@ import {
 import { prettyScreenName } from "@/lib/screen-names";
 import { cn } from "@/lib/utils";
 
+import { canvasPrimitiveReactStyle } from "./canvas-primitive-style";
+import { DEVICE_FRAME_VIEWPORTS, type DeviceFrameType } from "./types";
+
 interface ScreenFile {
   id: string;
   filename: string;
@@ -55,10 +60,19 @@ interface ScreenFile {
   previewState?: string;
   status?: string;
   title?: string;
+  updatedAt?: string;
   width?: number;
   height?: number;
   url?: string;
   previewUrl?: string;
+  /**
+   * When set, renders multiple side-by-side breakpoint frames (mobile-first,
+   * §6.4). Each entry is a pixel width; the active breakpoint determines the
+   * edit scope (Tailwind prefix: base / md: / lg: / xl:).
+   */
+  breakpointWidths?: number[];
+  /** Id of the currently active breakpoint frame for this screen. */
+  activeBreakpointWidth?: number;
 }
 
 type ScreenSourceType = "localhost" | "fusion" | "inline";
@@ -129,6 +143,12 @@ interface MultiScreenCanvasProps {
   screens: ScreenFile[];
   zoom: number;
   activeId?: string | null;
+  selectedScreenIds?: string[];
+  fullViewScreenIds?: string[];
+  activeScreenHasHoveredChild?: boolean;
+  hoveredChildScreenId?: string | null;
+  directlyHoveredScreenId?: string | null;
+  previewDeviceFrame?: DeviceFrameType;
   activeTool?: MultiScreenCanvasTool;
   toolProps?: CanvasToolProps;
   onActiveToolChange?: (tool: MultiScreenCanvasTool) => void;
@@ -147,26 +167,60 @@ interface MultiScreenCanvasProps {
     screenId: string,
     primitive: CanvasPrimitiveInsert,
   ) => boolean | string;
+  onPrimitiveCreated?: (screenId: string, nodeId: string) => void;
+  onPrimitiveReparent?: (args: {
+    sourceNodeId: string;
+    sourceScreenId: string;
+    targetNodeId: string;
+    targetScreenId: string;
+    placement: "inside";
+  }) => void;
   onCreateScreenFrame?: (geometry: FrameGeometry) => void;
   onDeleteSelection?: (ids: string[]) => boolean | void;
   onZoomChange?: (zoom: number) => void;
-  onZoomToEdit?: (id: string) => void;
-  zoomToEditThreshold?: number;
   renderScreenContent?: (
     screen: ScreenFile,
     metadata: ResolvedScreenMetadata,
     geometry: FrameGeometry,
   ) => ReactNode;
+  onScreenSelectionChange?: (ids: string[]) => void;
   selectAllRequest?: number;
   clearSelectionRequest?: number;
+  /**
+   * Called when the user clicks the + affordance on a screen's breakpoint
+   * row to add the next standard breakpoint width (390 / 768 / 1280).
+   */
+  onAddBreakpoint?: (screenId: string, widthPx: number) => void;
+  /**
+   * Called when the user clicks a breakpoint frame header to make it the
+   * active edit scope.
+   */
+  onActiveBreakpointChange?: (
+    screenId: string,
+    widthPx: number | undefined,
+  ) => void;
   onSelectionChange?: (selectedIds: string[]) => void;
+  /**
+   * Called when the user drags an element out of the active screen's iframe
+   * and drops it onto a different screen.  The bridge in the source iframe
+   * posts { type:"agent-native:cross-screen-drag" } messages; the host
+   * translates them to board coords, finds the target frame, and calls this
+   * prop with the resolved ids.
+   */
+  onCrossScreenElementDrop?: (args: {
+    sourceSelector: string;
+    sourceNodeId?: string;
+    sourceScreenId: string;
+    targetScreenId: string;
+  }) => void;
 }
 
 /**
  * design-editor overview canvas. Renders every file in the design as a movable,
  * resizable frame inside an infinite, pannable surface.
  */
-const SCREEN_WIDTH = 320;
+export const OVERVIEW_FRAME_WIDTH = 320;
+const SCREEN_WIDTH = OVERVIEW_FRAME_WIDTH;
 const SCREEN_HEIGHT = 640;
 const SCREEN_CARD_HEIGHT = SCREEN_HEIGHT + 26;
 const SCREEN_GAP = 56;
@@ -174,12 +228,70 @@ const SURFACE_PADDING = 240;
 const DUPLICATE_DRAG_THRESHOLD = 6;
 const DRAG_THRESHOLD = 3;
 const FRAME_LABEL_HEIGHT = 28;
+const FRAME_HEADER_BUTTON_OUTSIDE_WIDTH = 260;
+const FRAME_HEADER_BUTTON_RESERVE = 116;
+const FRAME_HEADER_DIMENSIONS_WIDTH = 72;
+const FRAME_HEADER_TITLE_CHAR_WIDTH = 6.5;
+const FRAME_HEADER_MIN_TITLE_WIDTH = 28;
+const FRAME_HEADER_MAX_TITLE_WIDTH = 180;
+const TRANSFORM_BADGE_OFFSET = 12;
+const TRANSFORM_BADGE_EDGE_PADDING = 8;
+const TRANSFORM_BADGE_HEIGHT = 28;
+const TRANSFORM_BADGE_MIN_WIDTH = 64;
+const TRANSFORM_BADGE_MAX_WIDTH = 180;
 const MIN_ZOOM = 2;
 const MAX_ZOOM = 800;
-const ZOOM_SENSITIVITY = 0.002;
-const MAX_WHEEL_ZOOM_DELTA = 80;
+const ZOOM_SENSITIVITY = 0.01;
+const MAX_WHEEL_ZOOM_DELTA = 120;
 const MAX_WHEEL_PAN_DELTA = 140;
 const PIXEL_GRID_ZOOM = 800;
+// During a zoom gesture the constant-size selection chrome is frozen (we don't
+// re-render); on commit it recomputes to its fixed screen size. These transitions
+// are enabled only for that brief settle, so normal selection, resize, and
+// screen-switch geometry stays pinned to the frame.
+const CHROME_SETTLE_MS = 150;
+const CHROME_OPACITY_TRANSITION = "opacity 150ms ease-out";
+const CHROME_BORDER_SETTLE_TRANSITION = `inset ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
+const SELECTION_BOX_SETTLE_TRANSITION = `border-width ${CHROME_SETTLE_MS}ms ease-out, border-radius ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
+const CHROME_HANDLE_SETTLE_TRANSITION = `width ${CHROME_SETTLE_MS}ms ease-out, height ${CHROME_SETTLE_MS}ms ease-out, border-width ${CHROME_SETTLE_MS}ms ease-out, top ${CHROME_SETTLE_MS}ms ease-out, bottom ${CHROME_SETTLE_MS}ms ease-out, left ${CHROME_SETTLE_MS}ms ease-out, right ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
+// Frame header (name + dimensions + "Full view" button) is counter-scaled via
+// transform to stay a fixed screen size; ease that scale on zoom-settle. opacity
+// is included so the button's hover-fade (transition-opacity) keeps working.
+const CHROME_LABEL_SETTLE_TRANSITION = `transform ${CHROME_SETTLE_MS}ms ease-out, ${CHROME_OPACITY_TRANSITION}`;
+
+export function getChromeBorderTransition(chromeSettling: boolean) {
+  return chromeSettling
+    ? CHROME_BORDER_SETTLE_TRANSITION
+    : CHROME_OPACITY_TRANSITION;
+}
+
+export function getSelectionBoxTransition(chromeSettling: boolean) {
+  return chromeSettling ? SELECTION_BOX_SETTLE_TRANSITION : "none";
+}
+
+export function isDirectScreenHoverTarget(
+  target: EventTarget | null,
+  currentTarget: HTMLElement,
+) {
+  if (target === currentTarget) return true;
+  const element =
+    target && typeof (target as Element).closest === "function"
+      ? (target as Element)
+      : null;
+  return !!element && !element.closest("[data-screen-content]");
+}
+
+function getChromeHandleTransition(chromeSettling: boolean) {
+  return chromeSettling
+    ? CHROME_HANDLE_SETTLE_TRANSITION
+    : CHROME_OPACITY_TRANSITION;
+}
+
+function getChromeLabelTransition(chromeSettling: boolean) {
+  return chromeSettling
+    ? CHROME_LABEL_SETTLE_TRANSITION
+    : CHROME_OPACITY_TRANSITION;
+}
 const DRAFT_FRAME_WIDTH = 320;
 const DRAFT_FRAME_HEIGHT = 640;
 const DRAFT_RECT_WIDTH = 160;
@@ -394,10 +506,30 @@ type DragState =
   | DraftCreateDragState
   | PenNodeDragState;
 
+type PendingWheelGesture =
+  | {
+      mode: "zoom";
+      deltaY: number;
+      cursor: Point;
+      clientX: number;
+      clientY: number;
+    }
+  | {
+      mode: "pan";
+      deltaX: number;
+      deltaY: number;
+    };
+
 export function MultiScreenCanvas({
   screens,
   zoom,
   activeId,
+  selectedScreenIds,
+  fullViewScreenIds,
+  activeScreenHasHoveredChild = false,
+  hoveredChildScreenId,
+  directlyHoveredScreenId,
+  previewDeviceFrame = "none",
   activeTool,
   toolProps,
   onActiveToolChange,
@@ -410,15 +542,19 @@ export function MultiScreenCanvas({
   onGeometryChange,
   onGeometryCommit,
   onCreatePrimitive,
+  onPrimitiveCreated,
+  onPrimitiveReparent,
   onCreateScreenFrame,
   onDeleteSelection,
   onZoomChange,
-  onZoomToEdit,
-  zoomToEditThreshold,
   renderScreenContent,
+  onScreenSelectionChange,
   selectAllRequest,
   clearSelectionRequest,
+  onAddBreakpoint,
+  onActiveBreakpointChange,
   onSelectionChange,
+  onCrossScreenElementDrop,
 }: MultiScreenCanvasProps) {
   const t = useT();
   const surfaceRef = useRef<HTMLDivElement>(null);
@@ -430,6 +566,7 @@ export function MultiScreenCanvas({
   const frameGeometryRef = useRef(frameGeometry);
   const onGeometryChangeRef = useRef(onGeometryChange);
   const onGeometryCommitRef = useRef(onGeometryCommit);
+  const screensRef = useRef(screens);
   const [draftPrimitives, setDraftPrimitives] = useState<DraftPrimitive[]>([]);
   const draftPrimitivesRef = useRef(draftPrimitives);
   const [selectedDraftIds, setSelectedDraftIds] = useState<string[]>([]);
@@ -446,7 +583,7 @@ export function MultiScreenCanvas({
   const [localActiveTool, setLocalActiveTool] =
     useState<MultiScreenCanvasTool>("move");
   const [selectedIds, setSelectedIds] = useState<string[]>(
-    activeId ? [activeId] : [],
+    selectedScreenIds ?? [],
   );
   const selectedIdsRef = useRef(selectedIds);
   const dragState = useRef<DragState | null>(null);
@@ -464,8 +601,56 @@ export function MultiScreenCanvas({
     null,
   );
   const [dragCursor, setDragCursor] = useState<string | null>(null);
+  const [primitiveDropTarget, setPrimitiveDropTarget] =
+    useState<PrimitiveDropTarget | null>(null);
+  const primitiveDropTargetRef = useRef<PrimitiveDropTarget | null>(null);
+  const onPrimitiveReparentRef = useRef(onPrimitiveReparent);
+
+  // Cross-screen element drag state — driven by postMessage from the source iframe.
+  interface CrossScreenDragGhost {
+    /** Board-space point where the ghost is shown (follows the cursor). */
+    boardX: number;
+    boardY: number;
+  }
+  interface CrossScreenDragTarget {
+    /** The screen frame that is the candidate drop target. */
+    id: string;
+    geometry: FrameGeometry;
+  }
+  const [crossScreenGhost, setCrossScreenGhost] =
+    useState<CrossScreenDragGhost | null>(null);
+  const [crossScreenTarget, setCrossScreenTarget] =
+    useState<CrossScreenDragTarget | null>(null);
+  /** Ref kept in sync with state so the message handler can read without closures. */
+  const crossScreenTargetRef = useRef<CrossScreenDragTarget | null>(null);
+  /** The most-recent drag message payload — kept for use in the "end" handler. */
+  const crossScreenDragMsgRef = useRef<{
+    selector: string;
+    sourceId?: string;
+  } | null>(null);
+  const onCrossScreenElementDropRef = useRef(onCrossScreenElementDrop);
   const suppressNextPick = useRef(false);
   const feedbackTimerRef = useRef<number | null>(null);
+  const pendingWheelGestureRef = useRef<PendingWheelGesture | null>(null);
+  const wheelGestureFrameRef = useRef<number | null>(null);
+  const worldRef = useRef<HTMLDivElement>(null);
+  const pixelGridRef = useRef<HTMLDivElement>(null);
+  const viewCommitTimerRef = useRef<number | null>(null);
+  const pendingChromeSettleRef = useRef(false);
+  const chromeSettleTimerRef = useRef<number | null>(null);
+  const [chromeSettling, setChromeSettling] = useState(false);
+  const previousPreviewDeviceFrameRef = useRef(previewDeviceFrame);
+
+  const getResolvedMetadata = useCallback(
+    (screen: ScreenFile) =>
+      resolveScreenMetadata(
+        screen,
+        metadataById?.[screen.id],
+        getScreenMetadata?.(screen),
+        previewDeviceFrame,
+      ),
+    [getScreenMetadata, metadataById, previewDeviceFrame],
+  );
 
   useEffect(() => {
     onGeometryChangeRef.current = onGeometryChange;
@@ -475,6 +660,18 @@ export function MultiScreenCanvas({
     onGeometryCommitRef.current = onGeometryCommit;
   }, [onGeometryCommit]);
 
+  useEffect(() => {
+    onPrimitiveReparentRef.current = onPrimitiveReparent;
+  }, [onPrimitiveReparent]);
+
+  useEffect(() => {
+    onCrossScreenElementDropRef.current = onCrossScreenElementDrop;
+  }, [onCrossScreenElementDrop]);
+
+  useEffect(() => {
+    screensRef.current = screens;
+  }, [screens]);
+
   useEffect(() => {
     activePenPathRef.current = activePenPath;
   }, [activePenPath]);
@@ -559,6 +756,10 @@ export function MultiScreenCanvas({
     onSelectionChangeRef.current?.(selectedIds);
   }, [selectedIds]);
 
+  useEffect(() => {
+    onScreenSelectionChange?.(selectedIds);
+  }, [onScreenSelectionChange, selectedIds]);
+
   useEffect(() => {
     draftPrimitivesRef.current = draftPrimitives;
   }, [draftPrimitives]);
@@ -581,8 +782,9 @@ export function MultiScreenCanvas({
       screens.forEach((screen, index) => {
         const existing = current[screen.id];
         const persisted = geometryById?.[screen.id];
+        const metadata = getResolvedMetadata(screen);
         const resolved = {
-          ...getInitialFrameGeometry(index),
+          ...getInitialFrameGeometry(index, metadata),
           ...persisted,
         } as FrameGeometry;
         next[screen.id] = persisted ? resolved : (existing ?? resolved);
@@ -600,14 +802,45 @@ export function MultiScreenCanvas({
       const next = current.filter((id) => currentIds.has(id));
       return next.length === current.length ? current : next;
     });
-  }, [geometryById, screens, updateFrameGeometry, updateSelectedIds]);
+  }, [
+    geometryById,
+    getResolvedMetadata,
+    screens,
+    updateFrameGeometry,
+    updateSelectedIds,
+  ]);
+
+  useEffect(() => {
+    const previous = previousPreviewDeviceFrameRef.current;
+    previousPreviewDeviceFrameRef.current = previewDeviceFrame;
+    if (previous === previewDeviceFrame) return;
+
+    updateFrameGeometry((current) => {
+      const next = { ...current };
+      let changed = false;
+
+      screens.forEach((screen, index) => {
+        const metadata = getResolvedMetadata(screen);
+        const currentGeometry =
+          current[screen.id] ?? getInitialFrameGeometry(index, metadata);
+        const nextGeometry = getPreviewDeviceFrameGeometry({
+          currentGeometry,
+          metadata,
+          previewDeviceFrame,
+        });
+        if (sameFrameGeometry(currentGeometry, nextGeometry)) return;
+        next[screen.id] = nextGeometry;
+        changed = true;
+      });
+
+      return changed ? next : current;
+    });
+  }, [getResolvedMetadata, previewDeviceFrame, screens, updateFrameGeometry]);
 
   useEffect(() => {
-    if (!activeId) return;
-    updateSelectedIds((current) =>
-      current.includes(activeId) ? current : [activeId],
-    );
-  }, [activeId, updateSelectedIds]);
+    if (!selectedScreenIds) return;
+    updateSelectedIds(() => selectedScreenIds);
+  }, [screens, selectedScreenIds, updateSelectedIds]);
 
   useEffect(() => {
     if (
@@ -640,11 +873,26 @@ export function MultiScreenCanvas({
   useEffect(() => {
     if (!surfaceRef.current || screens.length === 0) return;
     const rect = surfaceRef.current.getBoundingClientRect();
-    const columns = Math.min(screens.length, 3);
-    const rows = Math.ceil(screens.length / columns);
     const scale = zoomRef.current / 100;
-    const totalWidth = columns * SCREEN_WIDTH + (columns - 1) * SCREEN_GAP;
-    const totalHeight = rows * SCREEN_CARD_HEIGHT + (rows - 1) * SCREEN_GAP;
+    const frames = screens.map((screen, index) => {
+      const metadata = getResolvedMetadata(screen);
+      const currentGeometry =
+        frameGeometryRef.current[screen.id] ??
+        getInitialFrameGeometry(index, metadata);
+      return getPreviewDeviceFrameGeometry({
+        currentGeometry,
+        metadata,
+        previewDeviceFrame,
+      });
+    });
+    const bounds = getFrameGroupBounds(
+      frames.map((geometry, index) => ({
+        id: screens[index]?.id ?? String(index),
+        geometry,
+      })),
+    );
+    const totalWidth = bounds?.width ?? SCREEN_WIDTH;
+    const totalHeight = bounds?.height ?? SCREEN_CARD_HEIGHT;
     const visualLeft = Math.max(24, (rect.width - totalWidth * scale) / 2);
     const visualTop = Math.max(24, (rect.height - totalHeight * scale) / 2);
     const nextPan = {
@@ -653,9 +901,9 @@ export function MultiScreenCanvas({
     };
     panRef.current = nextPan;
     setPan(nextPan);
-    // Only on mount or when screen count changes, not on every pan update.
+    // Only on mount, screen-count changes, or device-preview changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [screens.length]);
+  }, [previewDeviceFrame, screens.length]);
 
   useEffect(() => {
     return () => {
@@ -664,6 +912,15 @@ export function MultiScreenCanvas({
       if (feedbackTimerRef.current !== null) {
         window.clearTimeout(feedbackTimerRef.current);
       }
+      if (wheelGestureFrameRef.current !== null) {
+        window.cancelAnimationFrame(wheelGestureFrameRef.current);
+      }
+      if (viewCommitTimerRef.current !== null) {
+        window.clearTimeout(viewCommitTimerRef.current);
+      }
+      if (chromeSettleTimerRef.current !== null) {
+        window.clearTimeout(chromeSettleTimerRef.current);
+      }
     };
   }, []);
 
@@ -694,8 +951,17 @@ export function MultiScreenCanvas({
   }, []);
 
   const getCurrentFrameEntries = useCallback(
-    () => getFrameEntries(screens, frameGeometryRef.current),
-    [screens],
+    () =>
+      screens.map((screen, index) => {
+        const metadata = getResolvedMetadata(screen);
+        return {
+          id: screen.id,
+          geometry:
+            frameGeometryRef.current[screen.id] ??
+            getInitialFrameGeometry(index, metadata),
+        };
+      }),
+    [getResolvedMetadata, screens],
   );
 
   const getCurrentDraftEntries = useCallback(
@@ -737,13 +1003,154 @@ export function MultiScreenCanvas({
     [getCurrentFrameEntries],
   );
 
-  const getFrameAtClientPoint = useCallback(
-    (clientX: number, clientY: number) => {
-      const point = canvasPointFromClient(clientX, clientY);
-      return getFrameEntryAtPoint(point)?.id;
-    },
-    [canvasPointFromClient, getFrameEntryAtPoint],
-  );
+  // ── Cross-screen element drag receiver ────────────────────────────────────
+  // The source iframe (the active interactive screen) posts
+  // { type: "agent-native:cross-screen-drag", phase, selector, sourceId,
+  //   iframeX, iframeY, viewportW, viewportH }
+  // during element drags that the bridge wants the host to handle.
+  useEffect(() => {
+    if (!onCrossScreenElementDrop) return;
+
+    const clearCrossScreenDrag = () => {
+      setCrossScreenGhost(null);
+      setCrossScreenTarget(null);
+      crossScreenTargetRef.current = null;
+      crossScreenDragMsgRef.current = null;
+    };
+
+    const handleMessage = (event: MessageEvent) => {
+      if (!event.data || event.data.type !== "agent-native:cross-screen-drag") {
+        return;
+      }
+      const msg = event.data as {
+        type: string;
+        phase: "move" | "end" | "cancel";
+        selector?: string;
+        sourceId?: string;
+        iframeX?: number;
+        iframeY?: number;
+        viewportW?: number;
+        viewportH?: number;
+      };
+
+      if (msg.phase === "cancel") {
+        clearCrossScreenDrag();
+        return;
+      }
+
+      // The drag originates from the active screen (only the active screen has
+      // a live interactive iframe posting these messages).
+      const sourceScreenId = activeId;
+      if (!sourceScreenId) {
+        // Always clear visual state (ghost + highlight) when we have no active
+        // screen to attribute the drag to — regardless of the phase. Without
+        // this, a "move" message arriving after activeId became null would leave
+        // stale ghost/target state visible on the canvas.
+        clearCrossScreenDrag();
+        return;
+      }
+
+      if (msg.phase === "move") {
+        const { iframeX, iframeY, viewportW, viewportH, selector, sourceId } =
+          msg;
+        if (
+          iframeX === undefined ||
+          iframeY === undefined ||
+          viewportW === undefined ||
+          viewportH === undefined
+        ) {
+          return;
+        }
+
+        // Remember the latest drag payload for use on "end".
+        crossScreenDragMsgRef.current = {
+          selector: selector ?? "",
+          sourceId,
+        };
+
+        // Pointer is inside the source iframe — let the bridge handle it.
+        if (
+          iframeX >= 0 &&
+          iframeY >= 0 &&
+          iframeX <= viewportW &&
+          iframeY <= viewportH
+        ) {
+          clearCrossScreenDrag();
+          return;
+        }
+
+        // Translate iframe coords → board coords using source frame geometry.
+        // Board math mirrors primitiveLocalToBoardRect:
+        //   boardX = frame.x + iframeX * (frame.width / metadata.width)
+        //   boardY = frame.y + iframeY * (frame.height / metadata.height)
+        const sourceScreen = screensRef.current.find(
+          (s) => s.id === sourceScreenId,
+        );
+        const sourceGeometry = frameGeometryRef.current[sourceScreenId];
+        if (!sourceScreen || !sourceGeometry) {
+          clearCrossScreenDrag();
+          return;
+        }
+        const sourceMetadata = getResolvedMetadata(sourceScreen);
+        const scaleX = sourceGeometry.width / Math.max(1, sourceMetadata.width);
+        const scaleY =
+          sourceGeometry.height / Math.max(1, sourceMetadata.height);
+        const boardX = sourceGeometry.x + iframeX * scaleX;
+        const boardY = sourceGeometry.y + iframeY * scaleY;
+        const boardPoint = { x: boardX, y: boardY };
+
+        setCrossScreenGhost({ boardX, boardY });
+
+        // Find which screen frame the board point falls in.
+        const target = getFrameEntryAtPoint(boardPoint);
+        if (target && target.id !== sourceScreenId) {
+          const nextTarget = { id: target.id, geometry: target.geometry };
+          crossScreenTargetRef.current = nextTarget;
+          setCrossScreenTarget(nextTarget);
+        } else {
+          crossScreenTargetRef.current = null;
+          setCrossScreenTarget(null);
+        }
+        return;
+      }
+
+      if (msg.phase === "end") {
+        const candidate = crossScreenTargetRef.current;
+        // Use the saved payload from the last "move" as the primary source of
+        // truth; fall back to the "end" message's own fields in case the ref
+        // was cleared (e.g. a brief re-entry into the source iframe nulled it
+        // via clearCrossScreenDrag while pointerOutsideIframe remained true).
+        const payload = crossScreenDragMsgRef.current ?? {
+          selector: msg.selector ?? "",
+          sourceId: msg.sourceId,
+        };
+        clearCrossScreenDrag();
+        // Guard: require at least one stable identifier (selector or sourceId)
+        // so the drop handler in DesignEditor can resolve the node. An empty
+        // selector AND a missing sourceId would produce nodeAttrId="" and
+        // moveNodeBetweenDocuments would fail with a generic error toast.
+        const hasIdentifier = !!(payload.selector || payload.sourceId);
+        if (candidate && hasIdentifier && sourceScreenId) {
+          onCrossScreenElementDropRef.current?.({
+            sourceSelector: payload.selector,
+            sourceNodeId: payload.sourceId,
+            sourceScreenId,
+            targetScreenId: candidate.id,
+          });
+        }
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [
+    activeId,
+    getFrameEntryAtPoint,
+    getResolvedMetadata,
+    onCrossScreenElementDrop,
+  ]);
 
   const deleteSelectedItems = useCallback(() => {
     const frameIds = selectedIdsRef.current.filter(
@@ -797,6 +1204,9 @@ export function MultiScreenCanvas({
       handleMouseUp: (ev: MouseEvent) => void,
     ) => {
       dragCleanup.current?.();
+      const restorePreviewPointerEvents = mutePreviewIframePointerEvents(
+        surfaceRef.current,
+      );
       let lastMouseEvent: MouseEvent | null = null;
       const move = (ev: MouseEvent) => {
         lastMouseEvent = ev;
@@ -814,6 +1224,7 @@ export function MultiScreenCanvas({
         window.removeEventListener("mousemove", move);
         window.removeEventListener("mouseup", up);
         window.removeEventListener("blur", cleanupOnBlur);
+        restorePreviewPointerEvents();
         dragCleanup.current = null;
       };
       window.addEventListener("mousemove", move);
@@ -836,15 +1247,64 @@ export function MultiScreenCanvas({
 
   const showTransformFeedback = useCallback(
     (text: string, clientX: number, clientY: number) => {
+      const estimatedWidth = Math.min(
+        TRANSFORM_BADGE_MAX_WIDTH,
+        Math.max(TRANSFORM_BADGE_MIN_WIDTH, text.length * 7 + 16),
+      );
+      const maxX = Math.max(
+        TRANSFORM_BADGE_EDGE_PADDING,
+        window.innerWidth - estimatedWidth - TRANSFORM_BADGE_EDGE_PADDING,
+      );
+      const maxY = Math.max(
+        TRANSFORM_BADGE_EDGE_PADDING,
+        window.innerHeight -
+          TRANSFORM_BADGE_HEIGHT -
+          TRANSFORM_BADGE_EDGE_PADDING,
+      );
+      const preferredX =
+        clientX + TRANSFORM_BADGE_OFFSET + estimatedWidth <=
+        window.innerWidth - TRANSFORM_BADGE_EDGE_PADDING
+          ? clientX + TRANSFORM_BADGE_OFFSET
+          : clientX - estimatedWidth - TRANSFORM_BADGE_OFFSET;
+      const preferredY =
+        clientY + TRANSFORM_BADGE_OFFSET + TRANSFORM_BADGE_HEIGHT <=
+        window.innerHeight - TRANSFORM_BADGE_EDGE_PADDING
+          ? clientY + TRANSFORM_BADGE_OFFSET
+          : clientY - TRANSFORM_BADGE_HEIGHT - TRANSFORM_BADGE_OFFSET;
       setTransformBadge({
         text,
-        x: clientX + 12,
-        y: clientY + 12,
+        x: clampNumber(preferredX, TRANSFORM_BADGE_EDGE_PADDING, maxX),
+        y: clampNumber(preferredY, TRANSFORM_BADGE_EDGE_PADDING, maxY),
       });
     },
     [],
   );
 
+  const updatePrimitiveDropTarget = useCallback(
+    (target: PrimitiveDropTarget | null) => {
+      primitiveDropTargetRef.current = target;
+      setPrimitiveDropTarget(target);
+    },
+    [],
+  );
+
+  const findPrimitiveDropTarget = useCallback(
+    (
+      point: Point,
+      draggedNodeId: string | null,
+    ): PrimitiveDropTarget | null => {
+      if (!onPrimitiveReparentRef.current) return null;
+      return getPrimitiveDropTargetForPoint(
+        point,
+        draggedNodeId,
+        screensRef.current,
+        frameGeometryRef.current,
+        getResolvedMetadata,
+      );
+    },
+    [getResolvedMetadata],
+  );
+
   const finishDrag = useCallback(() => {
     if (feedbackTimerRef.current !== null) {
       window.clearTimeout(feedbackTimerRef.current);
@@ -858,9 +1318,79 @@ export function MultiScreenCanvas({
     setAlignmentGuides([]);
     setTransformBadge(null);
     setDragCursor(null);
+    primitiveDropTargetRef.current = null;
+    setPrimitiveDropTarget(null);
     dragCleanup.current?.();
   }, []);
 
+  const cancelActiveDrag = useCallback(() => {
+    let cancelled = false;
+    const state = dragState.current;
+
+    if (state) {
+      cancelled = true;
+      if (state.type === "move" || state.type === "resize") {
+        updateFrameGeometry((current) =>
+          frameGeometryWithOverrides(current, state.originFrames),
+        );
+      } else if (state.type === "rotate") {
+        updateFrameGeometry((current) => ({
+          ...current,
+          [state.frameId]: { ...state.originFrame },
+        }));
+      } else if (state.type === "draft-move" || state.type === "draft-resize") {
+        updateDraftPrimitives((current) =>
+          current.map((draft) => {
+            const origin = state.originDrafts[draft.id];
+            return origin ? cloneDraftPrimitive(origin) : draft;
+          }),
+        );
+      } else if (state.type === "marquee") {
+        updateSelectedIds(() => state.baseSelectedIds);
+        updateSelectedDraftIds(() => state.baseSelectedDraftIds);
+      } else if (state.type === "pen-node") {
+        setActivePenPath(
+          state.pathBefore ? clonePenPath(state.pathBefore) : null,
+        );
+        setPenGesturePreview(null);
+        setPenPointer(null);
+        setPenCloseHover(false);
+      }
+    }
+
+    if (duplicateCleanup.current) {
+      cancelled = true;
+      duplicateCleanup.current();
+    }
+
+    if (cancelled || dragCleanup.current) {
+      finishDrag();
+      return true;
+    }
+    return false;
+  }, [
+    finishDrag,
+    updateDraftPrimitives,
+    updateFrameGeometry,
+    updateSelectedDraftIds,
+    updateSelectedIds,
+  ]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      if (!cancelActiveDrag()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+    };
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [cancelActiveDrag]);
+
   const beginPan = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
@@ -987,7 +1517,10 @@ export function MultiScreenCanvas({
         : undefined;
       if (preferred) return preferred;
 
-      return entries
+      const draftCenter = getFrameCenter(draft.geometry);
+
+      // Primary: find the frame whose bounds contain the draft's center point.
+      const containing = entries
         .filter(({ geometry }) => {
           const bounds = {
             left: geometry.x,
@@ -995,7 +1528,6 @@ export function MultiScreenCanvas({
             right: geometry.x + geometry.width,
             bottom: geometry.y + geometry.height,
           };
-          const draftCenter = getFrameCenter(draft.geometry);
           const local = rotatePointAroundCenter(
             draftCenter,
             getFrameCenter(geometry),
@@ -1004,6 +1536,22 @@ export function MultiScreenCanvas({
           return rectContainsPoint(bounds, local);
         })
         .sort((a, b) => (b.geometry.z ?? 0) - (a.geometry.z ?? 0))[0];
+
+      if (containing) return containing;
+
+      // Fallback: if no frame contains the center (shape drawn outside all
+      // frames), use the nearest frame so the shape still persists rather than
+      // becoming a lost draft primitive.  With a single screen this is always
+      // that screen; with multiple screens it's the visually closest one.
+      if (entries.length === 0) return undefined;
+      if (entries.length === 1) return entries[0];
+      return entries.slice().sort((a, b) => {
+        const ca = getFrameCenter(a.geometry);
+        const cb = getFrameCenter(b.geometry);
+        const da = Math.hypot(draftCenter.x - ca.x, draftCenter.y - ca.y);
+        const db = Math.hypot(draftCenter.x - cb.x, draftCenter.y - cb.y);
+        return da - db;
+      })[0];
     },
     [getCurrentFrameEntries],
   );
@@ -1057,7 +1605,8 @@ export function MultiScreenCanvas({
           current.filter((draft) => draft.id !== nextDraft.id),
         );
         updateSelectedDraftIds(() => []);
-        updateSelectedIds(() => [persisted.nodeId]);
+        updateSelectedIds(() => []);
+        onPrimitiveCreated?.(persisted.frameId, persisted.nodeId);
         return;
       }
 
@@ -1067,6 +1616,7 @@ export function MultiScreenCanvas({
     },
     [
       persistDraftPrimitive,
+      onPrimitiveCreated,
       updateDraftPrimitives,
       updateSelectedDraftIds,
       updateSelectedIds,
@@ -1254,11 +1804,15 @@ export function MultiScreenCanvas({
 
       const originCanvas = getCanvasPoint(e.clientX, e.clientY);
       const originFrameId = getFrameEntryAtPoint(originCanvas)?.id;
-      const initialGeometry = getDraftGeometryForTool(
-        tool,
-        originCanvas,
-        originCanvas,
-      );
+      // B1 fix: seed a zero-size preview at the click origin instead of
+      // getDraftGeometryForTool(tool, origin, origin) which returns the
+      // default 160x120 size and causes a visible flash before the drag delta
+      // applies.  The real size only matters at mouseup (createDraftPrimitive)
+      // which already handles the "no drag" click-to-place case correctly.
+      const initialGeometry =
+        tool === "pen" || tool === "line" || tool === "arrow"
+          ? getDraftGeometryForTool(tool, originCanvas, originCanvas)
+          : { x: originCanvas.x, y: originCanvas.y, width: 0, height: 0 };
       const initialPoints =
         tool === "pen"
           ? [originCanvas]
@@ -1494,40 +2048,94 @@ export function MultiScreenCanvas({
           ev.clientX,
           ev.clientY,
         );
+
+        // Primitive drop-into-container detection: check if the dragged draft
+        // is hovering over a committed container primitive on any screen.
+        const canvasPoint = getCanvasPoint(ev.clientX, ev.clientY);
+        const primitiveTarget = findPrimitiveDropTarget(canvasPoint, null);
+        updatePrimitiveDropTarget(primitiveTarget);
       };
 
       const handleMouseUp = () => {
         const state = dragState.current;
+        const dropTarget = primitiveDropTargetRef.current;
         if (state?.type === "draft-move" && state.hasMoved) {
-          const persisted: Array<{
-            draftId: string;
-            frameId: string;
-            nodeId: string;
-          }> = [];
-          draftPrimitivesRef.current.forEach((draft) => {
-            if (!state.targetIds.includes(draft.id)) return;
-            const result = persistDraftPrimitive(draft);
-            if (result) {
-              persisted.push({
-                draftId: draft.id,
-                frameId: result.frameId,
-                nodeId: result.nodeId,
+          if (dropTarget) {
+            // Drop into a container primitive: persist the draft into the
+            // target's screen, then call onPrimitiveReparent to nest it.
+            const persisted: Array<{
+              draftId: string;
+              frameId: string;
+              nodeId: string;
+            }> = [];
+            draftPrimitivesRef.current.forEach((draft) => {
+              if (!state.targetIds.includes(draft.id)) return;
+              // Persist into the target's screen (not just any containing frame)
+              const result = persistDraftPrimitive(draft, dropTarget.screenId);
+              if (result) {
+                persisted.push({
+                  draftId: draft.id,
+                  frameId: result.frameId,
+                  nodeId: result.nodeId,
+                });
+              }
+            });
+
+            if (persisted.length > 0) {
+              const persistedDraftIds = new Set(
+                persisted.map((entry) => entry.draftId),
+              );
+              updateDraftPrimitives((current) =>
+                current.filter((draft) => !persistedDraftIds.has(draft.id)),
+              );
+              updateSelectedDraftIds((current) =>
+                current.filter((draftId) => !persistedDraftIds.has(draftId)),
+              );
+              // Reparent each persisted node into the container primitive.
+              persisted.forEach((entry) => {
+                onPrimitiveReparentRef.current?.({
+                  sourceNodeId: entry.nodeId,
+                  sourceScreenId: entry.frameId,
+                  targetNodeId: dropTarget.nodeId,
+                  targetScreenId: dropTarget.screenId,
+                  placement: "inside",
+                });
               });
+              const lastNodeId = persisted[persisted.length - 1]?.nodeId;
+              if (lastNodeId) updateSelectedIds(() => [lastNodeId]);
+            }
+          } else {
+            // Normal drop: persist into whichever screen contains the draft.
+            const persisted: Array<{
+              draftId: string;
+              frameId: string;
+              nodeId: string;
+            }> = [];
+            draftPrimitivesRef.current.forEach((draft) => {
+              if (!state.targetIds.includes(draft.id)) return;
+              const result = persistDraftPrimitive(draft);
+              if (result) {
+                persisted.push({
+                  draftId: draft.id,
+                  frameId: result.frameId,
+                  nodeId: result.nodeId,
+                });
+              }
+            });
+
+            if (persisted.length > 0) {
+              const persistedDraftIds = new Set(
+                persisted.map((entry) => entry.draftId),
+              );
+              updateDraftPrimitives((current) =>
+                current.filter((draft) => !persistedDraftIds.has(draft.id)),
+              );
+              updateSelectedDraftIds((current) =>
+                current.filter((draftId) => !persistedDraftIds.has(draftId)),
+              );
+              const lastNodeId = persisted[persisted.length - 1]?.nodeId;
+              if (lastNodeId) updateSelectedIds(() => [lastNodeId]);
             }
-          });
-
-          if (persisted.length > 0) {
-            const persistedDraftIds = new Set(
-              persisted.map((entry) => entry.draftId),
-            );
-            updateDraftPrimitives((current) =>
-              current.filter((draft) => !persistedDraftIds.has(draft.id)),
-            );
-            updateSelectedDraftIds((current) =>
-              current.filter((draftId) => !persistedDraftIds.has(draftId)),
-            );
-            const lastNodeId = persisted[persisted.length - 1]?.nodeId;
-            if (lastNodeId) updateSelectedIds(() => [lastNodeId]);
           }
         }
         finishDrag();
@@ -1536,12 +2144,15 @@ export function MultiScreenCanvas({
       installDragListeners(handleMouseMove, handleMouseUp);
     },
     [
+      findPrimitiveDropTarget,
       finishDrag,
+      getCanvasPoint,
       getCurrentCanvasEntries,
       installDragListeners,
       persistDraftPrimitive,
       showTransformFeedback,
       updateDraftPrimitives,
+      updatePrimitiveDropTarget,
       updateSelectedDraftIds,
       updateSelectedIds,
     ],
@@ -1708,9 +2319,11 @@ export function MultiScreenCanvas({
       const targetIds = currentSelectedIds.includes(id)
         ? currentSelectedIds
         : [id];
+      if (activeId !== id) {
+        onPick(id);
+      }
       if (!currentSelectedIds.includes(id)) {
         updateSelectedIds(() => [id]);
-        onPick(id);
       }
       updateSelectedDraftIds(() => []);
 
@@ -1787,11 +2400,51 @@ export function MultiScreenCanvas({
           ev.clientX,
           ev.clientY,
         );
+
+        // When all dragged ids are committed primitive nodeIds (not screen
+        // frames), check for a container primitive drop target to highlight.
+        const currentFrameIds = Object.keys(frameGeometryRef.current);
+        const allCommitted = state.targetIds.every(
+          (targetId) => !currentFrameIds.includes(targetId),
+        );
+        if (allCommitted) {
+          const canvasPoint = getCanvasPoint(ev.clientX, ev.clientY);
+          updatePrimitiveDropTarget(
+            findPrimitiveDropTarget(canvasPoint, state.primaryId),
+          );
+        }
       };
 
       const handleMouseUp = () => {
         const state = dragState.current;
+        const dropTarget = primitiveDropTargetRef.current;
         if (state?.type === "move" && state.hasMoved) {
+          // If all dragged ids are committed primitive nodeIds (not screen
+          // frames), attempt a primitive reparent on drop.
+          const currentFrameIds = Object.keys(frameGeometryRef.current);
+          const allCommitted = state.targetIds.every(
+            (targetId) => !currentFrameIds.includes(targetId),
+          );
+          if (allCommitted && dropTarget) {
+            const sourceScreenId = resolveNodeScreenId(
+              state.primaryId,
+              screensRef.current,
+            );
+            if (sourceScreenId) {
+              onPrimitiveReparentRef.current?.({
+                sourceNodeId: state.primaryId,
+                sourceScreenId,
+                targetNodeId: dropTarget.nodeId,
+                targetScreenId: dropTarget.screenId,
+                placement: "inside",
+              });
+              suppressNextPick.current = true;
+              finishDrag();
+              return;
+            }
+          }
+
+          // Normal screen-frame geometry commit.
           const after = cloneFrameGeometryById(frameGeometryRef.current);
           onGeometryCommitRef.current?.(
             frameGeometryWithOverrides(after, state.originFrames),
@@ -1805,12 +2458,16 @@ export function MultiScreenCanvas({
       installDragListeners(handleMouseMove, handleMouseUp);
     },
     [
+      activeId,
+      findPrimitiveDropTarget,
       finishDrag,
+      getCanvasPoint,
       getCurrentFrameEntries,
       installDragListeners,
       onPick,
       showTransformFeedback,
       updateFrameGeometry,
+      updatePrimitiveDropTarget,
       updateSelectedDraftIds,
       updateSelectedIds,
     ],
@@ -1823,6 +2480,10 @@ export function MultiScreenCanvas({
       e.stopPropagation();
       suppressNextPick.current = true;
 
+      if (activeId !== id) {
+        onPick(id);
+      }
+
       const currentSelectedIds = selectedIdsRef.current;
       const targetIds = currentSelectedIds.includes(id)
         ? currentSelectedIds
@@ -1931,9 +2592,11 @@ export function MultiScreenCanvas({
       installDragListeners(handleMouseMove, handleMouseUp);
     },
     [
+      activeId,
       finishDrag,
       getCurrentFrameEntries,
       installDragListeners,
+      onPick,
       showTransformFeedback,
       updateFrameGeometry,
       updateSelectedIds,
@@ -1956,6 +2619,10 @@ export function MultiScreenCanvas({
       e.stopPropagation();
       suppressNextPick.current = true;
 
+      if (activeId !== id) {
+        onPick(id);
+      }
+
       const originFrame = getCurrentFrameEntries().find(
         (entry) => entry.id === id,
       )?.geometry;
@@ -2027,10 +2694,12 @@ export function MultiScreenCanvas({
       installDragListeners(handleMouseMove, handleMouseUp);
     },
     [
+      activeId,
       finishDrag,
       getCanvasPoint,
       getCurrentFrameEntries,
       installDragListeners,
+      onPick,
       showTransformFeedback,
       updateFrameGeometry,
       updateSelectedIds,
@@ -2047,11 +2716,20 @@ export function MultiScreenCanvas({
 
       if (e.shiftKey) {
         updateSelectedDraftIds(() => []);
-        updateSelectedIds((current) =>
-          current.includes(id)
-            ? current.filter((selectedId) => selectedId !== id)
-            : [...current, id],
-        );
+        const currentSelectedIds = selectedIdsRef.current;
+        const nextSelectedIds = currentSelectedIds.includes(id)
+          ? currentSelectedIds.filter((selectedId) => selectedId !== id)
+          : [...currentSelectedIds, id];
+        updateSelectedIds(() => nextSelectedIds);
+        const nextPrimaryId =
+          nextSelectedIds.length === 0
+            ? null
+            : nextSelectedIds.includes(id)
+              ? id
+              : (nextSelectedIds[nextSelectedIds.length - 1] ?? null);
+        if (nextPrimaryId && nextPrimaryId !== activeId) {
+          onPick(nextPrimaryId);
+        }
         return;
       }
 
@@ -2059,7 +2737,7 @@ export function MultiScreenCanvas({
       updateSelectedIds(() => [id]);
       onPick(id);
     },
-    [onPick, updateSelectedDraftIds, updateSelectedIds],
+    [activeId, onPick, updateSelectedDraftIds, updateSelectedIds],
   );
 
   const handleFrameDoubleClick = useCallback(
@@ -2232,6 +2910,136 @@ export function MultiScreenCanvas({
     [activeTool, localActiveTool, updatePenPointer],
   );
 
+  // Push the current pan/zoom straight to the DOM. A wheel/pinch gesture must
+  // NEVER re-render React's canvas tree during the gesture: each render re-runs
+  // renderScreenContent (which re-creates the active screen's live DesignCanvas
+  // iframe) and, with React DevTools attached, serializes every render over the
+  // extension bridge — that re-render storm is the real source of zoom jank, not
+  // layout/paint. We mutate the transform directly here and reconcile React
+  // state once, after the gesture settles, via scheduleViewCommit().
+  const applyViewToDom = useCallback(() => {
+    const nextScale = zoomRef.current / 100;
+    const p = panRef.current;
+    const world = worldRef.current;
+    if (world) {
+      // 2D translate (not translate3d) so the layer is not GPU-pinned to a
+      // stale low-res raster — keeps zoomed-in content crisp.
+      world.style.transform = `translate(${p.x}px, ${p.y}px) scale(${nextScale})`;
+    }
+    const grid = pixelGridRef.current;
+    if (grid) {
+      grid.style.backgroundPosition = `${p.x}px ${p.y}px`;
+      grid.style.backgroundSize = `${nextScale}px ${nextScale}px`;
+    }
+  }, []);
+
+  const startChromeSettle = useCallback(() => {
+    if (chromeSettleTimerRef.current !== null) {
+      window.clearTimeout(chromeSettleTimerRef.current);
+    }
+    setChromeSettling(true);
+    chromeSettleTimerRef.current = window.setTimeout(() => {
+      chromeSettleTimerRef.current = null;
+      setChromeSettling(false);
+    }, CHROME_SETTLE_MS);
+  }, []);
+
+  const commitView = useCallback(() => {
+    viewCommitTimerRef.current = null;
+    const shouldSettleChrome = pendingChromeSettleRef.current;
+    pendingChromeSettleRef.current = false;
+    if (shouldSettleChrome) startChromeSettle();
+    setCanvasZoom(zoomRef.current);
+    setPan(panRef.current);
+    onZoomChange?.(zoomRef.current);
+  }, [onZoomChange, startChromeSettle]);
+
+  // Debounced: only commit to React state once the gesture has been idle for a
+  // beat, so a continuous pinch produces zero re-renders until the user pauses.
+  const scheduleViewCommit = useCallback(
+    (options?: { settleChrome?: boolean }) => {
+      if (options?.settleChrome) {
+        pendingChromeSettleRef.current = true;
+      }
+      if (viewCommitTimerRef.current !== null) {
+        window.clearTimeout(viewCommitTimerRef.current);
+      }
+      viewCommitTimerRef.current = window.setTimeout(commitView, 120);
+    },
+    [commitView],
+  );
+
+  const flushPendingWheelGesture = useCallback(() => {
+    wheelGestureFrameRef.current = null;
+    const gesture = pendingWheelGestureRef.current;
+    pendingWheelGestureRef.current = null;
+    if (!gesture) return;
+
+    if (gesture.mode === "zoom") {
+      const currentZoom = zoomRef.current;
+      const zoomDeltaY = clamp(
+        gesture.deltaY,
+        -MAX_WHEEL_ZOOM_DELTA,
+        MAX_WHEEL_ZOOM_DELTA,
+      );
+      const nextZoom = clamp(
+        currentZoom * Math.exp(-zoomDeltaY * ZOOM_SENSITIVITY),
+        MIN_ZOOM,
+        MAX_ZOOM,
+      );
+      if (nextZoom === currentZoom) return;
+
+      const nextPan = getPanForZoomToCursor({
+        pan: panRef.current,
+        cursor: gesture.cursor,
+        oldZoom: currentZoom,
+        nextZoom,
+      });
+      zoomRef.current = nextZoom;
+      panRef.current = nextPan;
+      applyViewToDom();
+      scheduleViewCommit({ settleChrome: true });
+      return;
+    }
+
+    const nextPan = {
+      x: panRef.current.x - gesture.deltaX,
+      y: panRef.current.y - gesture.deltaY,
+    };
+    panRef.current = nextPan;
+    applyViewToDom();
+    scheduleViewCommit();
+  }, [applyViewToDom, scheduleViewCommit]);
+
+  const enqueueWheelGesture = useCallback(
+    (gesture: PendingWheelGesture) => {
+      const pending = pendingWheelGestureRef.current;
+      if (pending?.mode === "zoom" && gesture.mode === "zoom") {
+        pendingWheelGestureRef.current = {
+          mode: "zoom",
+          deltaY: pending.deltaY + gesture.deltaY,
+          cursor: gesture.cursor,
+          clientX: gesture.clientX,
+          clientY: gesture.clientY,
+        };
+      } else if (pending?.mode === "pan" && gesture.mode === "pan") {
+        pendingWheelGestureRef.current = {
+          mode: "pan",
+          deltaX: pending.deltaX + gesture.deltaX,
+          deltaY: pending.deltaY + gesture.deltaY,
+        };
+      } else {
+        pendingWheelGestureRef.current = gesture;
+      }
+
+      if (wheelGestureFrameRef.current !== null) return;
+      wheelGestureFrameRef.current = window.requestAnimationFrame(
+        flushPendingWheelGesture,
+      );
+    },
+    [flushPendingWheelGesture],
+  );
+
   const handleWheelEvent = useCallback(
     (event: WheelEvent) => {
       const rect = surfaceRef.current?.getBoundingClientRect();
@@ -2241,40 +3049,18 @@ export function MultiScreenCanvas({
       const delta = getWheelDelta(event);
 
       if (event.ctrlKey || event.metaKey) {
-        const currentZoom = zoomRef.current;
         const zoomDeltaY = clamp(
           delta.y,
           -MAX_WHEEL_ZOOM_DELTA,
           MAX_WHEEL_ZOOM_DELTA,
         );
-        const nextZoom = clamp(
-          currentZoom * Math.exp(-zoomDeltaY * ZOOM_SENSITIVITY),
-          MIN_ZOOM,
-          MAX_ZOOM,
-        );
-        if (nextZoom === currentZoom) return;
-
-        const nextPan = getPanForZoomToCursor({
-          pan: panRef.current,
+        enqueueWheelGesture({
+          mode: "zoom",
+          deltaY: zoomDeltaY,
           cursor: { x: event.clientX - rect.left, y: event.clientY - rect.top },
-          oldZoom: currentZoom,
-          nextZoom,
+          clientX: event.clientX,
+          clientY: event.clientY,
         });
-        const zoomEditFrameId =
-          zoomToEditThreshold !== undefined &&
-          currentZoom < zoomToEditThreshold &&
-          nextZoom >= zoomToEditThreshold
-            ? getFrameAtClientPoint(event.clientX, event.clientY)
-            : undefined;
-
-        zoomRef.current = nextZoom;
-        panRef.current = nextPan;
-        setCanvasZoom(nextZoom);
-        setPan(nextPan);
-        onZoomChange?.(nextZoom);
-        if (zoomEditFrameId) {
-          onZoomToEdit?.(zoomEditFrameId);
-        }
         return;
       }
 
@@ -2288,14 +3074,9 @@ export function MultiScreenCanvas({
         -MAX_WHEEL_PAN_DELTA,
         MAX_WHEEL_PAN_DELTA,
       );
-      const nextPan = {
-        x: panRef.current.x - deltaX,
-        y: panRef.current.y - deltaY,
-      };
-      panRef.current = nextPan;
-      setPan(nextPan);
+      enqueueWheelGesture({ mode: "pan", deltaX, deltaY });
     },
-    [getFrameAtClientPoint, onZoomChange, onZoomToEdit, zoomToEditThreshold],
+    [enqueueWheelGesture],
   );
 
   useEffect(() => {
@@ -2490,25 +3271,73 @@ export function MultiScreenCanvas({
     if (tool !== "pen") clearActivePenPath();
   }, [activeTool, clearActivePenPath, localActiveTool]);
 
-  const scale = canvasZoom / 100;
-  const chromeScale = scale > 0 ? 1 / scale : 1;
-  const showPixelGrid = canvasZoom >= PIXEL_GRID_ZOOM;
-  const effectiveTool = normalizeCanvasTool(activeTool ?? localActiveTool);
-  const penActive = effectiveTool === "pen";
-  const creationToolActive = Boolean(getDraftCreationTool(effectiveTool));
-  const displayedPenPath = penGesturePreview
-    ? penGesturePreview
-    : activePenPath && penPointer && activePenPath.nodes.length > 0
-      ? penCloseHover
-        ? closePenPath(activePenPath)
-        : appendPenNode(activePenPath, createCornerNode(penPointer))
-      : activePenPath;
-  const selectedIdSet = new Set(selectedIds);
-  const selectedDraftIdSet = new Set(selectedDraftIds);
-  const surfaceCursor = isPanning
-    ? "grabbing"
-    : dragCursor
-      ? dragCursor
+  // Cmd+D / Ctrl+D: duplicate the selected frame with a visible offset so the
+  // copy doesn't land exactly on top of the original (Figma-style behaviour).
+  useEffect(() => {
+    if (!onDuplicate) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (activePenPathRef.current) return;
+      if (
+        !(event.metaKey || event.ctrlKey) ||
+        event.key.toLowerCase() !== "d" ||
+        isEditableHotkeyTarget(event.target)
+      ) {
+        return;
+      }
+      // Only act on frame IDs — filter out canvas primitives (sub-elements).
+      const frameIds = selectedIdsRef.current.filter(
+        (id) => frameGeometryRef.current[id],
+      );
+      const targetId = frameIds[0];
+      if (!targetId) return;
+      const screen = screens.find((s) => s.id === targetId);
+      if (!screen) return;
+      const sourceGeometry = frameGeometryRef.current[targetId];
+      if (!sourceGeometry) return;
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      // Offset the duplicate by one grid gap to the right (and slightly down)
+      // so it is visually distinct from the original, mirroring Figma's behaviour.
+      const canvasPosition = {
+        x: sourceGeometry.x + sourceGeometry.width + SCREEN_GAP,
+        y: sourceGeometry.y,
+      };
+      onDuplicate(targetId, {
+        mode: "alt-click",
+        screen,
+        canvasPosition,
+        dropCanvasPosition: canvasPosition,
+      });
+    };
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [onDuplicate, screens]);
+
+  const scale = canvasZoom / 100;
+  const chromeScale = scale > 0 ? 1 / scale : 1;
+  const showPixelGrid = canvasZoom >= PIXEL_GRID_ZOOM;
+  const effectiveTool = normalizeCanvasTool(activeTool ?? localActiveTool);
+  const penActive = effectiveTool === "pen";
+  const creationToolActive = Boolean(getDraftCreationTool(effectiveTool));
+  const canvasGestureActive = isDragging || isPanning;
+  const displayedPenPath = penGesturePreview
+    ? penGesturePreview
+    : activePenPath && penPointer && activePenPath.nodes.length > 0
+      ? penCloseHover
+        ? closePenPath(activePenPath)
+        : appendPenNode(activePenPath, createCornerNode(penPointer))
+      : activePenPath;
+  const selectedIdSet = new Set(selectedIds);
+  const fullViewIdSet = new Set(fullViewScreenIds ?? []);
+  const selectedDraftIdSet = new Set(selectedDraftIds);
+  const surfaceCursor = isPanning
+    ? "grabbing"
+    : dragCursor
+      ? dragCursor
       : isDragging && marquee
         ? "crosshair"
         : penActive || getDraftCreationTool(effectiveTool)
@@ -2516,10 +3345,29 @@ export function MultiScreenCanvas({
           : effectiveTool === "hand"
             ? "grab"
             : "default";
-  const canvasFrames = screens.map((screen, index) => ({
-    screen,
-    geometry: frameGeometry[screen.id] ?? getInitialFrameGeometry(index),
-  }));
+  const canvasFrames = screens.map((screen, index) => {
+    const metadata = getResolvedMetadata(screen);
+    return {
+      screen,
+      metadata,
+      geometry:
+        frameGeometry[screen.id] ?? getInitialFrameGeometry(index, metadata),
+    };
+  });
+  const screenContentById = useMemo(() => {
+    if (!renderScreenContent) return new Map<string, ReactNode>();
+    return new Map(
+      screens.map((screen, index) => {
+        const metadata = getResolvedMetadata(screen);
+        const geometry =
+          frameGeometry[screen.id] ?? getInitialFrameGeometry(index, metadata);
+        return [
+          screen.id,
+          renderScreenContent(screen, metadata, geometry),
+        ] as const;
+      }),
+    );
+  }, [frameGeometry, getResolvedMetadata, renderScreenContent, screens]);
   const selectedFrameEntries = canvasFrames
     .filter(({ screen }) => selectedIdSet.has(screen.id))
     .map(({ screen, geometry }) => ({ id: screen.id, geometry }));
@@ -2535,16 +3383,25 @@ export function MultiScreenCanvas({
     selectedDraftEntries.length > 1
       ? getFrameGroupBounds(selectedDraftEntries)
       : null;
+  const singleSelectedFrame =
+    selectedFrameEntries.length === 1 && !selectedGroupBounds
+      ? selectedFrameEntries[0]
+      : null;
+  const singleSelectedDraft =
+    selectedDraftEntries.length === 1 && !selectedDraftGroupBounds
+      ? selectedDraftEntries[0]
+      : null;
   return (
     <div
       ref={surfaceRef}
-      className="relative h-full w-full select-none overflow-hidden bg-background"
+      className="relative h-full w-full select-none overflow-hidden"
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
       style={{ cursor: surfaceCursor, touchAction: "none" }}
     >
       {showPixelGrid ? (
         <div
+          ref={pixelGridRef}
           className="pointer-events-none absolute inset-0 opacity-60"
           style={{
             backgroundImage:
@@ -2556,40 +3413,61 @@ export function MultiScreenCanvas({
       ) : null}
 
       <div
+        ref={worldRef}
         className="pointer-events-none absolute"
         style={{
-          left: pan.x,
-          top: pan.y,
-          transform: `scale(${scale})`,
+          left: 0,
+          top: 0,
+          // Plain 2D transform — NO will-change / translate3d. Forcing a
+          // compositor layer pins a low-res cached raster that the GPU stretches
+          // when you zoom in, leaving screen content permanently blurry. A 2D
+          // transform lets the browser re-rasterize crisply at rest. Zoom smoothness
+          // comes from never re-rendering React during the gesture (see
+          // flushPendingWheelGesture / applyViewToDom), not from layer promotion —
+          // the trace proved paint/composite was never the bottleneck.
+          transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})`,
           transformOrigin: "top left",
         }}
       >
-        {canvasFrames.map(({ screen, geometry }) => {
-          const metadata = resolveScreenMetadata(
-            screen,
-            metadataById?.[screen.id],
-            getScreenMetadata?.(screen),
-          );
+        {canvasFrames.map(({ screen, metadata, geometry }) => {
           return (
             <Screen
               key={screen.id}
               screen={screen}
               metadata={metadata}
               geometry={geometry}
-              screenContent={renderScreenContent?.(screen, metadata, geometry)}
+              screenContent={screenContentById.get(screen.id)}
               isActive={screen.id === activeId}
               isSelected={selectedIdSet.has(screen.id)}
+              showFullView={fullViewIdSet.has(screen.id)}
+              isDirectlyHovered={screen.id === directlyHoveredScreenId}
+              hasHoveredChild={
+                (screen.id === activeId && activeScreenHasHoveredChild) ||
+                screen.id === hoveredChildScreenId
+              }
               groupSelected={hasGroupSelection}
               handlesEnabled={!hasGroupSelection}
               penActive={penActive}
               creationToolActive={creationToolActive}
+              canvasGestureActive={canvasGestureActive}
               chromeScale={chromeScale}
+              chromeSettling={chromeSettling}
               onPick={handleFrameClick}
               onEdit={handleFrameDoubleClick}
               onStartFrameDrag={beginFrameDrag}
               onStartResize={beginResize}
               onStartRotate={beginRotate}
               onStartDuplicateGesture={beginDuplicateGesture}
+              onAddBreakpoint={
+                onAddBreakpoint
+                  ? (widthPx) => onAddBreakpoint(screen.id, widthPx)
+                  : undefined
+              }
+              onActiveBreakpointChange={
+                onActiveBreakpointChange
+                  ? (widthPx) => onActiveBreakpointChange(screen.id, widthPx)
+                  : undefined
+              }
             />
           );
         })}
@@ -2602,6 +3480,7 @@ export function MultiScreenCanvas({
             groupSelected={Boolean(selectedDraftGroupBounds)}
             penActive={penActive}
             chromeScale={chromeScale}
+            chromeSettling={chromeSettling}
             onClick={handleDraftClick}
             onStartDrag={beginDraftDrag}
             onStartResize={beginDraftResize}
@@ -2616,6 +3495,7 @@ export function MultiScreenCanvas({
             groupSelected={false}
             penActive={penActive}
             chromeScale={chromeScale}
+            chromeSettling={chromeSettling}
             onClick={() => {}}
             onStartDrag={() => {}}
             onStartResize={() => {}}
@@ -2626,10 +3506,39 @@ export function MultiScreenCanvas({
           <PenPathOverlay path={displayedPenPath} closeHover={penCloseHover} />
         ) : null}
 
+        {singleSelectedFrame ? (
+          <SelectionBox
+            geometry={singleSelectedFrame.geometry}
+            chromeScale={chromeScale}
+            chromeSettling={chromeSettling}
+            showRotate
+            onStartResize={(handle, event) =>
+              beginResize(singleSelectedFrame.id, handle, event)
+            }
+            onStartRotate={(event) =>
+              beginRotate(singleSelectedFrame.id, event)
+            }
+          />
+        ) : null}
+
+        {singleSelectedDraft ? (
+          <SelectionBox
+            geometry={singleSelectedDraft.geometry}
+            chromeScale={chromeScale}
+            chromeSettling={chromeSettling}
+            showRotate={false}
+            onStartResize={(handle, event) =>
+              beginDraftResize(singleSelectedDraft.id, handle, event)
+            }
+            onStartRotate={() => {}}
+          />
+        ) : null}
+
         {selectedGroupBounds ? (
           <GroupSelectionBox
             bounds={selectedGroupBounds}
             chromeScale={chromeScale}
+            chromeSettling={chromeSettling}
             onStartResize={beginGroupResize}
           />
         ) : null}
@@ -2638,6 +3547,7 @@ export function MultiScreenCanvas({
           <GroupSelectionBox
             bounds={selectedDraftGroupBounds}
             chromeScale={chromeScale}
+            chromeSettling={chromeSettling}
             onStartResize={beginDraftGroupResize}
           />
         ) : null}
@@ -2663,20 +3573,46 @@ export function MultiScreenCanvas({
             }
           />
         ))}
-
-        {marquee ? (
-          <span
-            className="pointer-events-none absolute z-40 border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)]"
-            style={{
-              left: SURFACE_PADDING + marquee.x,
-              top: SURFACE_PADDING + marquee.y,
-              width: marquee.width,
-              height: marquee.height,
-            }}
-          />
-        ) : null}
       </div>
 
+      {marquee ? (
+        <span
+          className="pointer-events-none absolute z-40 border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)]"
+          style={{
+            // Convert canvas-space marquee to surface-space so this overlay
+            // is never clipped or hidden by the canvas transform container.
+            // Surface position = pan + (SURFACE_PADDING + canvasCoord) * scale
+            left: pan.x + (SURFACE_PADDING + marquee.x) * scale,
+            top: pan.y + (SURFACE_PADDING + marquee.y) * scale,
+            width: Math.max(1, marquee.width * scale),
+            height: Math.max(1, marquee.height * scale),
+          }}
+        />
+      ) : null}
+
+      {primitiveDropTarget ? (
+        <span
+          data-primitive-drop-target
+          className="pointer-events-none absolute z-40 rounded-sm"
+          style={{
+            // Surface position = pan + (SURFACE_PADDING + canvasCoord) * scale
+            left:
+              pan.x +
+              (SURFACE_PADDING + primitiveDropTarget.boardRect.x) * scale,
+            top:
+              pan.y +
+              (SURFACE_PADDING + primitiveDropTarget.boardRect.y) * scale,
+            width: Math.max(1, primitiveDropTarget.boardRect.width * scale),
+            height: Math.max(1, primitiveDropTarget.boardRect.height * scale),
+            // Match the in-screen inside-guide style: 2px accent border + 14%
+            // accent fill. Uses the same CSS variable as the DesignCanvas guide.
+            border: "2px solid var(--design-editor-accent-color)",
+            background:
+              "color-mix(in srgb, var(--design-editor-accent-color) 14%, transparent)",
+          }}
+        />
+      ) : null}
+
       {duplicatePreview ? (
         <div
           className={cn(
@@ -2712,12 +3648,53 @@ export function MultiScreenCanvas({
 
       {transformBadge ? (
         <div
-          className="pointer-events-none absolute z-50 rounded border border-border bg-background/95 px-1.5 py-0.5 font-mono text-[11px] leading-5 text-foreground shadow-lg backdrop-blur"
+          data-transform-badge
+          className="pointer-events-none fixed z-50 rounded border border-border bg-background/95 px-1.5 py-0.5 font-mono text-[11px] leading-5 text-foreground shadow-lg backdrop-blur"
           style={{ left: transformBadge.x, top: transformBadge.y }}
         >
           {transformBadge.text}
         </div>
       ) : null}
+
+      {/* Cross-screen element drag: highlight the candidate target screen frame.
+          Uses the same style as the primitiveDropTarget overlay (2px accent border
+          + 14% accent fill) so it is visually consistent. */}
+      {crossScreenTarget ? (
+        <span
+          data-cross-screen-drop-target
+          className="pointer-events-none absolute z-40 rounded-sm"
+          style={{
+            // Surface position = pan + (SURFACE_PADDING + canvasCoord) * scale
+            left:
+              pan.x + (SURFACE_PADDING + crossScreenTarget.geometry.x) * scale,
+            top:
+              pan.y + (SURFACE_PADDING + crossScreenTarget.geometry.y) * scale,
+            width: Math.max(1, crossScreenTarget.geometry.width * scale),
+            height: Math.max(1, crossScreenTarget.geometry.height * scale),
+            border: "2px solid var(--design-editor-accent-color)",
+            background:
+              "color-mix(in srgb, var(--design-editor-accent-color) 14%, transparent)",
+          }}
+        />
+      ) : null}
+
+      {/* Cross-screen element drag: small ghost following the board-space cursor. */}
+      {crossScreenGhost ? (
+        <span
+          data-cross-screen-drag-ghost
+          className="pointer-events-none absolute z-50 rounded border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-accent-color)]/20 shadow"
+          style={{
+            // A fixed-size ghost (16×16 canvas-px) centred on the board point.
+            // Surface position = pan + (SURFACE_PADDING + canvasCoord) * scale
+            left:
+              pan.x + (SURFACE_PADDING + crossScreenGhost.boardX) * scale - 8,
+            top:
+              pan.y + (SURFACE_PADDING + crossScreenGhost.boardY) * scale - 8,
+            width: 16,
+            height: 16,
+          }}
+        />
+      ) : null}
     </div>
   );
 }
@@ -2728,6 +3705,7 @@ function DraftPrimitiveLayer({
   groupSelected,
   penActive,
   chromeScale,
+  chromeSettling,
   preview = false,
   onClick,
   onStartDrag,
@@ -2738,6 +3716,7 @@ function DraftPrimitiveLayer({
   groupSelected: boolean;
   penActive: boolean;
   chromeScale: number;
+  chromeSettling: boolean;
   preview?: boolean;
   onClick: (id: string, e: React.MouseEvent) => void;
   onStartDrag: (id: string, e: React.MouseEvent) => void;
@@ -2755,7 +3734,7 @@ function DraftPrimitiveLayer({
       type="button"
       className={cn(
         "group/artboard pointer-events-auto absolute block overflow-visible text-left outline-none",
-        preview || penActive ? "cursor-crosshair" : "cursor-move",
+        preview || penActive ? "cursor-crosshair" : "cursor-pointer",
       )}
       style={{
         left: SURFACE_PADDING + geometry.x,
@@ -2777,23 +3756,32 @@ function DraftPrimitiveLayer({
       }}
     >
       <DraftPrimitiveContent draft={draft} preview={preview} />
+      {/* B3 fix: for the creation preview the outline must sit flush with the
+          geometry box (inset: 0) so the blue accent border lands exactly on the
+          shape edge with no visible gap between the gray content border and the
+          blue selection outline.  For placed / hovered draft-primitives the
+          existing -5px inset is intentional (matches the screen-frame chrome). */}
       <span
         className={cn(
           "pointer-events-none absolute rounded-sm border transition-opacity",
-          selected
+          preview
             ? "border-[var(--design-editor-accent-color)] opacity-100"
-            : "border-[var(--design-editor-accent-color)] opacity-0 group-hover/artboard:opacity-100",
+            : selected
+              ? "border-transparent opacity-0"
+              : "border-[var(--design-editor-accent-color)] opacity-0 group-hover/artboard:opacity-100",
         )}
         style={{
-          inset: -5 * chromeScale,
+          inset: preview ? 0 : -5 * chromeScale,
           borderWidth: 1.5 * chromeScale,
+          transition: getChromeBorderTransition(chromeSettling),
         }}
       />
       <ResizeHandles
-        active={selected || preview}
-        enabled={!penActive && ((isSelected && !groupSelected) || preview)}
+        active={preview}
+        enabled={!penActive && preview}
         showRotate={false}
         chromeScale={chromeScale}
+        chromeSettling={chromeSettling}
         onStartResize={(handle, event) =>
           onStartResize(draft.id, handle, event)
         }
@@ -2856,12 +3844,19 @@ function DraftPrimitiveContent({
   }
 
   if (draft.kind === "text") {
+    // B5 fix: use canonical style so preview matches the committed element.
+    const textStyle = canvasPrimitiveReactStyle("text", {
+      fill: draft.fill,
+      stroke: draft.stroke,
+      strokeWidth: draft.strokeWidth,
+    });
     return (
       <div
         className={cn(
-          "flex size-full items-start rounded-sm border border-dashed border-primary/60 bg-primary/5 px-2 py-1 text-sm font-medium text-foreground",
+          "flex size-full items-start px-2 py-1 text-sm font-medium text-foreground",
           muted,
         )}
+        style={textStyle}
       >
         <span className="truncate">{draft.text}</span>
       </div>
@@ -2869,27 +3864,24 @@ function DraftPrimitiveContent({
   }
 
   if (draft.kind === "frame") {
-    return (
-      <div
-        className={cn(
-          "size-full rounded-sm border-2 border-dashed border-primary/70 bg-primary/5",
-          muted,
-        )}
-      />
-    );
+    // B5 fix: use canonical style so preview matches the committed element.
+    const frameStyle = canvasPrimitiveReactStyle("frame", {
+      fill: draft.fill,
+      stroke: draft.stroke,
+      strokeWidth: draft.strokeWidth,
+    });
+    return <div className={cn("size-full", muted)} style={frameStyle} />;
   }
 
   if (draft.kind === "ellipse") {
-    return (
-      <div
-        className={cn("size-full rounded-full border", muted)}
-        style={{
-          background: draft.fill ?? "hsl(var(--primary) / 0.12)",
-          borderColor: draft.stroke ?? "hsl(var(--primary) / 0.7)",
-          borderWidth: draft.strokeWidth ?? 1,
-        }}
-      />
-    );
+    // B5/B6 fix: use canonical style — ellipse gets borderRadius:50% in both
+    // the preview and the committed path, and the same calm neutral fill.
+    const ellipseStyle = canvasPrimitiveReactStyle("ellipse", {
+      fill: draft.fill,
+      stroke: draft.stroke,
+      strokeWidth: draft.strokeWidth,
+    });
+    return <div className={cn("size-full", muted)} style={ellipseStyle} />;
   }
 
   if (draft.kind === "polygon" || draft.kind === "star") {
@@ -2916,16 +3908,13 @@ function DraftPrimitiveContent({
     );
   }
 
-  return (
-    <div
-      className={cn("size-full rounded-sm border", muted)}
-      style={{
-        background: draft.fill ?? "hsl(var(--primary) / 0.12)",
-        borderColor: draft.stroke ?? "hsl(var(--primary) / 0.7)",
-        borderWidth: draft.strokeWidth ?? 1,
-      }}
-    />
-  );
+  // B5 fix: rect/rectangle — use canonical style so preview matches committed.
+  const rectStyle = canvasPrimitiveReactStyle("rect", {
+    fill: draft.fill,
+    stroke: draft.stroke,
+    strokeWidth: draft.strokeWidth,
+  });
+  return <div className={cn("size-full", muted)} style={rectStyle} />;
 }
 
 function PenPathOverlay({
@@ -3034,35 +4023,37 @@ function isPoint(point: Point | undefined): point is Point {
   return !!point;
 }
 
-function Screen({
-  screen,
-  metadata,
-  geometry,
-  isActive,
-  isSelected,
-  groupSelected,
-  handlesEnabled,
-  penActive,
-  creationToolActive,
-  chromeScale,
-  onPick,
-  onEdit,
-  onStartFrameDrag,
-  onStartResize,
-  onStartRotate,
-  onStartDuplicateGesture,
-  screenContent,
-}: {
+/** Standard Tailwind breakpoint widths, mobile-first (base / md: / lg: / xl:). */
+const STANDARD_BREAKPOINT_WIDTHS = [390, 768, 1280] as const;
+
+/** Derive the Tailwind prefix for a given frame width. */
+function breakpointLabel(widthPx: number): string {
+  if (widthPx <= 640) return "Mobile";
+  if (widthPx <= 1024) return "Tablet";
+  return "Desktop";
+}
+
+/** Suggest the next standard breakpoint not yet in the set. */
+function nextBreakpointWidth(existing: number[]): number | undefined {
+  return STANDARD_BREAKPOINT_WIDTHS.find((w) => !existing.includes(w));
+}
+
+interface ScreenProps {
   screen: ScreenFile;
   metadata: ResolvedScreenMetadata;
   geometry: FrameGeometry;
   isActive: boolean;
   isSelected: boolean;
+  showFullView: boolean;
+  isDirectlyHovered: boolean;
+  hasHoveredChild: boolean;
   groupSelected: boolean;
   handlesEnabled: boolean;
   penActive: boolean;
   creationToolActive: boolean;
+  canvasGestureActive: boolean;
   chromeScale: number;
+  chromeSettling: boolean;
   screenContent?: ReactNode;
   onPick: (id: string, e: React.MouseEvent<HTMLElement>) => void;
   onEdit: (id: string, e: React.MouseEvent<HTMLElement>) => void;
@@ -3078,15 +4069,81 @@ function Screen({
     display: string,
     e: React.MouseEvent<HTMLElement>,
   ) => void;
-}) {
+  onAddBreakpoint?: (widthPx: number) => void;
+  onActiveBreakpointChange?: (widthPx: number | undefined) => void;
+}
+
+const Screen = memo(function Screen({
+  screen,
+  metadata,
+  geometry,
+  isActive,
+  isSelected,
+  showFullView,
+  isDirectlyHovered,
+  hasHoveredChild,
+  groupSelected,
+  handlesEnabled,
+  penActive,
+  creationToolActive,
+  canvasGestureActive,
+  chromeScale,
+  chromeSettling,
+  onPick,
+  onEdit,
+  onStartFrameDrag,
+  onStartResize,
+  onStartRotate,
+  onStartDuplicateGesture,
+  screenContent,
+  onAddBreakpoint,
+  onActiveBreakpointChange,
+}: ScreenProps) {
   const t = useT();
   const display = metadata.title ?? prettyScreenName(screen.filename);
   const previewUrl = metadata.previewUrl ?? getPreviewUrl(screen.content);
+  const previewViewport = getScreenPreviewViewport(metadata, geometry);
   const suppressNextClick = useRef(false);
-  const emphasized = isActive || isSelected;
+  const [directlyHovered, setDirectlyHovered] = useState(false);
+  const frameDirectlyHovered =
+    (directlyHovered || isDirectlyHovered) &&
+    !creationToolActive &&
+    !canvasGestureActive;
+  const emphasized = isSelected || frameDirectlyHovered;
+  const fullViewVisible = emphasized || showFullView;
+  const activeOrEmphasized = isActive || emphasized;
   const selectionOutlined = isSelected && !groupSelected;
-  const showHoverOutline =
-    !creationToolActive && (!isSelected || !groupSelected);
+  const showHoverChrome =
+    frameDirectlyHovered && !isSelected && !groupSelected && !hasHoveredChild;
+  const screenContentInteractive =
+    Boolean(screenContent) &&
+    !penActive &&
+    !creationToolActive &&
+    !canvasGestureActive;
+  const updateDirectHover = useCallback((next: boolean) => {
+    setDirectlyHovered((current) => (current === next ? current : next));
+  }, []);
+  const frameLabelHeight = FRAME_LABEL_HEIGHT * chromeScale;
+  const frameScreenWidth = geometry.width / Math.max(chromeScale, 0.001);
+  const fullViewOutsideFrame =
+    frameScreenWidth < FRAME_HEADER_BUTTON_OUTSIDE_WIDTH;
+  const labelInfoMaxWidth = Math.max(
+    64,
+    frameScreenWidth - (fullViewOutsideFrame ? 8 : FRAME_HEADER_BUTTON_RESERVE),
+  );
+  const estimatedTitleWidth = clamp(
+    display.length * FRAME_HEADER_TITLE_CHAR_WIDTH,
+    FRAME_HEADER_MIN_TITLE_WIDTH,
+    FRAME_HEADER_MAX_TITLE_WIDTH,
+  );
+  const showDimensions =
+    frameScreenWidth >=
+    estimatedTitleWidth +
+      FRAME_HEADER_DIMENSIONS_WIDTH +
+      (fullViewOutsideFrame ? 16 : FRAME_HEADER_BUTTON_RESERVE);
+  const fullViewMaxWidth = fullViewOutsideFrame
+    ? 120
+    : Math.max(84, Math.min(180, frameScreenWidth * 0.46));
 
   return (
     <div
@@ -3094,17 +4151,32 @@ function Screen({
       className="group/frame pointer-events-auto absolute"
       style={{
         left: SURFACE_PADDING + geometry.x,
-        top: SURFACE_PADDING + geometry.y - FRAME_LABEL_HEIGHT,
+        top: SURFACE_PADDING + geometry.y - frameLabelHeight,
         width: geometry.width,
         transform: geometry.rotation
           ? `rotate(${geometry.rotation}deg)`
           : undefined,
-        transformOrigin: `${geometry.width / 2}px ${FRAME_LABEL_HEIGHT + geometry.height / 2}px`,
+        transformOrigin: `${geometry.width / 2}px ${frameLabelHeight + geometry.height / 2}px`,
         zIndex: geometry.z,
       }}
     >
       <div
-        className="flex h-7 w-full cursor-default items-center justify-between gap-2 px-1"
+        className="relative w-full cursor-default"
+        style={{ height: frameLabelHeight }}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (suppressNextClick.current) {
+            suppressNextClick.current = false;
+            return;
+          }
+          if (e.detail > 1) return;
+          onPick(screen.id, e);
+        }}
+        onDoubleClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onEdit(screen.id, e);
+        }}
         onMouseDown={(e) => {
           if (e.button !== 0) return;
           if (penActive || creationToolActive) return;
@@ -3114,13 +4186,23 @@ function Screen({
           }
           if (e.shiftKey) {
             e.stopPropagation();
-            onPick(screen.id, e);
             return;
           }
           onStartFrameDrag(screen.id, e);
         }}
       >
-        <div className="flex min-w-0 items-center gap-1.5">
+        <div
+          data-frame-label
+          className="absolute left-1 top-1/2 flex min-w-0 items-center gap-1.5"
+          onMouseEnter={() => updateDirectHover(true)}
+          onMouseLeave={() => updateDirectHover(false)}
+          style={{
+            maxWidth: labelInfoMaxWidth,
+            transform: `translateY(-50%) scale(${chromeScale})`,
+            transformOrigin: "left center",
+            transition: getChromeLabelTransition(chromeSettling),
+          }}
+        >
           <span
             className={cn(
               "h-1.5 w-1.5 shrink-0 rounded-full",
@@ -3128,26 +4210,45 @@ function Screen({
             )}
           />
           <span
+            data-frame-title
             className={cn(
-              "truncate text-[11px] font-medium",
-              emphasized ? "text-foreground" : "text-muted-foreground",
+              "min-w-0 truncate text-[11px] font-medium",
+              emphasized
+                ? "text-[var(--design-editor-accent-color)]"
+                : activeOrEmphasized
+                  ? "text-foreground"
+                  : "text-muted-foreground",
             )}
             title={screen.filename}
           >
             {display}
           </span>
-          <span className="hidden shrink-0 text-[10px] tabular-nums text-muted-foreground/70 sm:inline">
-            {metadata.width} x {metadata.height}
-          </span>
+          {showDimensions ? (
+            <span
+              data-frame-dimensions
+              className="hidden shrink-0 text-[10px] tabular-nums text-muted-foreground/70 sm:inline"
+            >
+              {previewViewport.displayWidth} x {previewViewport.displayHeight}
+            </span>
+          ) : null}
         </div>
         <button
           type="button"
+          data-frame-full-view
           className={cn(
-            "relative z-40 flex h-5 max-w-[46%] shrink-0 items-center gap-1 overflow-hidden rounded-md border border-border bg-background/95 px-1.5 text-[10px] font-medium text-foreground opacity-0 shadow-sm transition-opacity",
+            "absolute top-1/2 z-40 flex h-5 shrink-0 items-center gap-1 overflow-hidden rounded-md border border-border bg-background/95 px-1.5 text-[10px] font-medium text-foreground opacity-0 shadow-sm transition-opacity",
             "hover:bg-accent hover:text-accent-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "group-hover/frame:opacity-100 group-focus-within/frame:opacity-100",
-            emphasized && "opacity-100",
+            fullViewVisible && "opacity-100",
+            fullViewOutsideFrame ? "left-full" : "right-1",
           )}
+          style={{
+            maxWidth: fullViewMaxWidth,
+            transform: `translateY(-50%) scale(${chromeScale})`,
+            transformOrigin: fullViewOutsideFrame
+              ? "left center"
+              : "right center",
+            transition: getChromeLabelTransition(chromeSettling),
+          }}
           aria-label={t("multiScreenCanvas.fullView")}
           title={t("multiScreenCanvas.fullView")}
           onClick={(event) => onEdit(screen.id, event)}
@@ -3155,6 +4256,8 @@ function Screen({
             event.preventDefault();
             event.stopPropagation();
           }}
+          onMouseEnter={() => updateDirectHover(true)}
+          onMouseLeave={() => updateDirectHover(false)}
         >
           <IconMaximize className="size-3 shrink-0" />
           <span className="truncate">{t("multiScreenCanvas.fullView")}</span>
@@ -3165,7 +4268,10 @@ function Screen({
         role="button"
         tabIndex={0}
         onClick={(e) => {
-          if (isInteractiveScreenContentTarget(e.target)) return;
+          if (isInteractiveScreenContentTarget(e.target)) {
+            e.stopPropagation();
+            return;
+          }
           e.stopPropagation();
           if (suppressNextClick.current) {
             suppressNextClick.current = false;
@@ -3175,13 +4281,19 @@ function Screen({
           onPick(screen.id, e);
         }}
         onDoubleClick={(e) => {
-          if (isInteractiveScreenContentTarget(e.target)) return;
+          if (isInteractiveScreenContentTarget(e.target)) {
+            e.stopPropagation();
+            return;
+          }
           e.preventDefault();
           e.stopPropagation();
         }}
         onMouseDown={(e) => {
+          if (isInteractiveScreenContentTarget(e.target)) {
+            e.stopPropagation();
+            return;
+          }
           if (creationToolActive) return;
-          if (isInteractiveScreenContentTarget(e.target)) return;
           if (e.detail > 1) {
             e.stopPropagation();
             return;
@@ -3200,46 +4312,38 @@ function Screen({
             onStartFrameDrag(screen.id, e);
           }
         }}
+        onMouseMove={(e) => {
+          updateDirectHover(
+            isDirectScreenHoverTarget(e.target, e.currentTarget),
+          );
+        }}
+        onMouseLeave={() => updateDirectHover(false)}
         className={cn(
           "group/artboard relative block overflow-visible rounded-lg bg-background text-left outline-none transition-colors",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           emphasized
             ? "text-foreground"
-            : "text-muted-foreground hover:text-foreground",
+            : cn(
+                "text-muted-foreground",
+                showHoverChrome && "hover:text-foreground",
+              ),
         )}
         style={{
           width: geometry.width,
           height: geometry.height,
-          cursor:
-            penActive || creationToolActive
-              ? "crosshair"
-              : isSelected
-                ? "move"
-                : "pointer",
+          cursor: penActive || creationToolActive ? "crosshair" : "pointer",
           touchAction: "none",
         }}
       >
         <span
-          className={cn(
-            "pointer-events-none absolute border transition-opacity",
-            selectionOutlined
-              ? "border-[var(--design-editor-accent-color)] opacity-100"
-              : showHoverOutline
-                ? "border-[var(--design-editor-accent-color)] opacity-0 group-hover/artboard:opacity-100"
-                : "border-transparent opacity-0",
-          )}
-          style={{
-            inset: -5 * chromeScale,
-            borderRadius: 13 * chromeScale,
-            borderWidth: 1.5 * chromeScale,
-          }}
-        />
-        <span
+          data-screen-content
           className={cn(
             "relative block h-full w-full overflow-hidden rounded-lg border bg-white shadow-2xl transition-colors",
-            "border-border group-hover/artboard:border-muted-foreground/60",
+            showHoverChrome
+              ? "border-[var(--design-editor-accent-color)]"
+              : "border-border",
           )}
-          style={{ pointerEvents: penActive ? "none" : undefined }}
+          style={{ pointerEvents: screenContentInteractive ? "auto" : "none" }}
         >
           {screenContent ?? (
             <iframe
@@ -3249,12 +4353,24 @@ function Screen({
               loading="lazy"
               className="pointer-events-none border-0"
               style={{
-                width: metadata.width,
-                height: metadata.height,
-                transform: `scale(${geometry.width / metadata.width}, ${
-                  geometry.height / metadata.height
-                })`,
+                width: previewViewport.viewportWidth,
+                height: previewViewport.viewportHeight,
+                // Untouched same-aspect overview thumbnails may scale uniformly.
+                // User-resized frames use their real iframe viewport so
+                // responsive layouts recompute instead of getting stretched.
+                transform:
+                  previewViewport.scale === 1
+                    ? undefined
+                    : `scale(${previewViewport.scale})`,
                 transformOrigin: "top left",
+                backgroundColor: "white",
+                colorScheme: "light",
+                // Prevent the browser from discarding the composited layer at
+                // fractional zoom levels, which causes the iframe to go black.
+                // backface-visibility:hidden forces the browser to keep the
+                // backing store alive even when the effective scale is very small
+                // (e.g. 0.25 iframe scale × 0.5 canvas zoom = 0.125 total).
+                backfaceVisibility: "hidden",
               }}
               title={screen.filename}
             />
@@ -3265,50 +4381,320 @@ function Screen({
               aria-hidden="true"
             />
           ) : null}
+          {canvasGestureActive && screenContent ? (
+            <span
+              data-screen-interaction-shield
+              className="pointer-events-auto absolute inset-0 z-30"
+              aria-hidden="true"
+            />
+          ) : null}
           <span className="pointer-events-none absolute inset-0 rounded-[7px] border border-black/5" />
         </span>
         <ResizeHandles
-          active={selectionOutlined}
-          enabled={!penActive && !creationToolActive && handlesEnabled}
+          active={false}
+          enabled={
+            !selectionOutlined &&
+            !penActive &&
+            !creationToolActive &&
+            handlesEnabled
+          }
+          showOnHover={false}
           showRotate
           chromeScale={chromeScale}
+          chromeSettling={chromeSettling}
           onStartResize={(handle, e) => onStartResize(screen.id, handle, e)}
           onStartRotate={(e) => onStartRotate(screen.id, e)}
         />
       </div>
+
+      {/* Multi-breakpoint preview row (§6.4 — Framer/Figma-Sites style).
+          Rendered as a sibling row to the right of the primary frame when
+          the screen has breakpointWidths set. Each frame shares the same
+          srcdoc content at a different viewport width. The active breakpoint
+          is highlighted and clicking a frame header sets the edit scope. */}
+      {screen.breakpointWidths && screen.breakpointWidths.length > 0 ? (
+        <BreakpointPreviewRow
+          screen={screen}
+          primaryGeometry={geometry}
+          previewUrl={previewUrl}
+          activeBreakpointWidth={screen.activeBreakpointWidth}
+          penActive={penActive}
+          creationToolActive={creationToolActive}
+          chromeScale={chromeScale}
+          onActiveBreakpointChange={onActiveBreakpointChange}
+          onAddBreakpoint={onAddBreakpoint}
+        />
+      ) : null}
     </div>
   );
+}, areScreenPropsEqual);
+
+function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
+  return (
+    prev.screen === next.screen &&
+    prev.screenContent === next.screenContent &&
+    sameResolvedMetadata(prev.metadata, next.metadata) &&
+    sameFrameGeometry(prev.geometry, next.geometry) &&
+    prev.isActive === next.isActive &&
+    prev.isSelected === next.isSelected &&
+    prev.showFullView === next.showFullView &&
+    prev.isDirectlyHovered === next.isDirectlyHovered &&
+    prev.hasHoveredChild === next.hasHoveredChild &&
+    prev.groupSelected === next.groupSelected &&
+    prev.handlesEnabled === next.handlesEnabled &&
+    prev.penActive === next.penActive &&
+    prev.creationToolActive === next.creationToolActive &&
+    prev.canvasGestureActive === next.canvasGestureActive &&
+    prev.chromeScale === next.chromeScale &&
+    prev.chromeSettling === next.chromeSettling &&
+    prev.onPick === next.onPick &&
+    prev.onEdit === next.onEdit &&
+    prev.onStartFrameDrag === next.onStartFrameDrag &&
+    prev.onStartResize === next.onStartResize &&
+    prev.onStartRotate === next.onStartRotate &&
+    prev.onStartDuplicateGesture === next.onStartDuplicateGesture
+  );
+}
+
+// ── Breakpoint preview row (§6.4) ────────────────────────────────────────────
+
+/** Gap between adjacent breakpoint frames in canvas pixels. */
+const BREAKPOINT_FRAME_GAP = 24;
+
+function BreakpointPreviewRow({
+  screen,
+  primaryGeometry,
+  previewUrl,
+  activeBreakpointWidth,
+  penActive,
+  creationToolActive,
+  chromeScale,
+  onActiveBreakpointChange,
+  onAddBreakpoint,
+}: {
+  screen: ScreenFile;
+  primaryGeometry: FrameGeometry;
+  previewUrl: string | undefined;
+  activeBreakpointWidth: number | undefined;
+  penActive: boolean;
+  creationToolActive: boolean;
+  chromeScale: number;
+  onActiveBreakpointChange?: (widthPx: number | undefined) => void;
+  onAddBreakpoint?: (widthPx: number) => void;
+}) {
+  const breakpointWidths = screen.breakpointWidths ?? [];
+  // Scale factor used to shrink additional frames to match the primary frame height
+  const scaleY = primaryGeometry.height / (primaryGeometry.width || 1);
+  // Place additional frames to the right of the primary, starting after the gap
+  let offsetX = primaryGeometry.width + BREAKPOINT_FRAME_GAP;
+
+  const nextWidth = nextBreakpointWidth(breakpointWidths);
+
+  return (
+    <>
+      {breakpointWidths.map((widthPx) => {
+        // Scale the additional frame proportionally (same height as primary)
+        const frameWidth = Math.round(widthPx * scaleY);
+        const frameHeight = primaryGeometry.height;
+        const isActive = activeBreakpointWidth === widthPx;
+        const currentOffsetX = offsetX;
+        offsetX += frameWidth + BREAKPOINT_FRAME_GAP;
+
+        return (
+          <div
+            key={widthPx}
+            data-frame-shell
+            data-breakpoint-frame
+            className="pointer-events-auto absolute"
+            // Positioned relative to the parent Screen wrapper, which is already
+            // absolute at left: SURFACE_PADDING + geometry.x / top:
+            // SURFACE_PADDING + geometry.y - FRAME_LABEL_HEIGHT. Re-adding those
+            // surface/primary terms here would double-offset every breakpoint
+            // frame (~240px+ down-right), so we offset only within the wrapper.
+            style={{
+              left: currentOffsetX,
+              top: -FRAME_LABEL_HEIGHT,
+              width: frameWidth,
+              zIndex: primaryGeometry.z,
+            }}
+          >
+            {/* Frame label row */}
+            <div
+              className={cn(
+                "flex h-7 w-full items-center justify-between gap-1 px-1 cursor-pointer select-none",
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                onActiveBreakpointChange?.(isActive ? undefined : widthPx);
+              }}
+            >
+              <div className="flex min-w-0 items-center gap-1.5">
+                <span
+                  className={cn(
+                    "h-1.5 w-1.5 shrink-0 rounded-full",
+                    isActive
+                      ? "bg-[var(--design-editor-accent-color)]"
+                      : "bg-muted-foreground/40",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "truncate text-[11px] font-medium",
+                    isActive
+                      ? "text-[var(--design-editor-accent-color)]"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  {breakpointLabel(widthPx)}
+                </span>
+                <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground/50">
+                  {widthPx}px
+                </span>
+              </div>
+            </div>
+            {/* Frame card */}
+            <div
+              className={cn(
+                "relative block overflow-hidden rounded-lg border bg-white shadow-lg transition-colors",
+                isActive
+                  ? "border-[var(--design-editor-accent-color)]"
+                  : "border-border",
+              )}
+              style={{ width: frameWidth, height: frameHeight }}
+            >
+              <iframe
+                src={previewUrl}
+                srcDoc={previewUrl ? undefined : screen.content}
+                sandbox="allow-scripts"
+                loading="lazy"
+                className="pointer-events-none border-0"
+                style={{
+                  width: widthPx,
+                  height: Math.round(
+                    widthPx * (primaryGeometry.height / primaryGeometry.width),
+                  ),
+                  transform: `scale(${frameWidth / widthPx}, ${frameHeight / Math.round(widthPx * (primaryGeometry.height / primaryGeometry.width))})`,
+                  transformOrigin: "top left",
+                }}
+                title={`${screen.filename} — ${breakpointLabel(widthPx)}`}
+              />
+              {creationToolActive || penActive ? (
+                <span className="absolute inset-0 z-20 cursor-crosshair" />
+              ) : null}
+              <span className="pointer-events-none absolute inset-0 rounded-[7px] border border-black/5" />
+            </div>
+          </div>
+        );
+      })}
+
+      {/* + affordance: add the next standard breakpoint */}
+      {onAddBreakpoint && nextWidth !== undefined ? (
+        <div
+          className="pointer-events-auto absolute flex items-center"
+          // Same wrapper-relative coordinate space as the breakpoint frames
+          // above — no SURFACE_PADDING / primaryGeometry.x/y terms or it would
+          // double-offset.
+          style={{
+            left: offsetX,
+            top: -FRAME_LABEL_HEIGHT + primaryGeometry.height / 2,
+            zIndex: primaryGeometry.z,
+          }}
+        >
+          <button
+            type="button"
+            className={cn(
+              "flex size-7 items-center justify-center rounded-full border border-border bg-background/95 text-muted-foreground shadow-sm transition-colors",
+              "hover:border-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]",
+            )}
+            style={{
+              transform: `scale(${chromeScale})`,
+              transformOrigin: "center",
+            }}
+            title={`Add ${breakpointLabel(nextWidth)} breakpoint (${nextWidth}px)`}
+            onClick={(e) => {
+              e.stopPropagation();
+              onAddBreakpoint(nextWidth);
+            }}
+          >
+            <IconPlus className="size-3.5" />
+          </button>
+        </div>
+      ) : null}
+    </>
+  );
 }
 
 function GroupSelectionBox({
   bounds,
   chromeScale,
+  chromeSettling,
   onStartResize,
 }: {
   bounds: NonNullable<ReturnType<typeof getFrameGroupBounds>>;
   chromeScale: number;
+  chromeSettling: boolean;
+  onStartResize: (handle: ResizeHandle, e: React.MouseEvent) => void;
+}) {
+  return (
+    <SelectionBox
+      geometry={{
+        x: bounds.left,
+        y: bounds.top,
+        width: bounds.width,
+        height: bounds.height,
+      }}
+      chromeScale={chromeScale}
+      chromeSettling={chromeSettling}
+      showRotate={false}
+      onStartResize={onStartResize}
+      onStartRotate={() => {}}
+    />
+  );
+}
+
+function SelectionBox({
+  geometry,
+  chromeScale,
+  chromeSettling,
+  showRotate = true,
+  onStartResize,
+  onStartRotate,
+}: {
+  geometry: FrameGeometry;
+  chromeScale: number;
+  chromeSettling: boolean;
+  showRotate?: boolean;
   onStartResize: (handle: ResizeHandle, e: React.MouseEvent) => void;
+  onStartRotate: (e: React.MouseEvent) => void;
 }) {
   return (
     <div
+      data-frame-selection-box
       data-frame-shell
-      className="pointer-events-none absolute z-30 border border-[var(--design-editor-accent-color)]"
+      className="pointer-events-none absolute border border-[var(--design-editor-accent-color)]"
       style={{
-        left: SURFACE_PADDING + bounds.left,
-        top: SURFACE_PADDING + bounds.top,
-        width: bounds.width,
-        height: bounds.height,
+        left: SURFACE_PADDING + geometry.x,
+        top: SURFACE_PADDING + geometry.y,
+        width: geometry.width,
+        height: geometry.height,
         borderRadius: 13 * chromeScale,
         borderWidth: 1.5 * chromeScale,
+        transition: getSelectionBoxTransition(chromeSettling),
+        transform: geometry.rotation
+          ? `rotate(${geometry.rotation}deg)`
+          : undefined,
+        transformOrigin: `${geometry.width / 2}px ${geometry.height / 2}px`,
+        zIndex: 1_000_000,
       }}
     >
       <ResizeHandles
         active
         enabled
-        showRotate={false}
+        showRotate={showRotate}
         chromeScale={chromeScale}
+        chromeSettling={chromeSettling}
         onStartResize={onStartResize}
-        onStartRotate={() => {}}
+        onStartRotate={onStartRotate}
       />
     </div>
   );
@@ -3317,15 +4703,19 @@ function GroupSelectionBox({
 function ResizeHandles({
   active,
   enabled,
+  showOnHover = true,
   showRotate = true,
   chromeScale = 1,
+  chromeSettling = false,
   onStartResize,
   onStartRotate,
 }: {
   active: boolean;
   enabled: boolean;
+  showOnHover?: boolean;
   showRotate?: boolean;
   chromeScale?: number;
+  chromeSettling?: boolean;
   onStartResize: (handle: ResizeHandle, e: React.MouseEvent) => void;
   onStartRotate: (e: React.MouseEvent) => void;
 }) {
@@ -3335,7 +4725,11 @@ function ResizeHandles({
     "pointer-events-auto absolute z-20 rounded-[2px] border border-[var(--design-editor-accent-color)] bg-[var(--design-editor-accent-contrast-color)] shadow transition-opacity",
     active
       ? "opacity-100"
-      : "opacity-0 group-hover/artboard:opacity-100 group-focus-visible/artboard:opacity-100",
+      : cn(
+          "opacity-0",
+          showOnHover &&
+            "group-hover/artboard:opacity-100 group-focus-visible/artboard:opacity-100",
+        ),
   );
   const edgeHandleClass =
     "pointer-events-auto absolute z-10 bg-transparent opacity-0";
@@ -3345,18 +4739,28 @@ function ResizeHandles({
       {EDGE_RESIZE_HANDLE_CONFIGS.map((config) => (
         <span
           key={config.handle}
-          data-resize-handle
+          data-resize-handle={config.handle}
           className={edgeHandleClass}
-          style={edgeHandleStyle(config.handle, config.cursor, chromeScale)}
+          style={edgeHandleStyle(
+            config.handle,
+            config.cursor,
+            chromeScale,
+            chromeSettling,
+          )}
           onMouseDown={(e) => onStartResize(config.handle, e)}
         />
       ))}
       {CORNER_RESIZE_HANDLE_CONFIGS.map((config) => (
         <span
           key={config.handle}
-          data-resize-handle
+          data-resize-handle={config.handle}
           className={visibleHandleClass}
-          style={cornerHandleStyle(config.handle, config.cursor, chromeScale)}
+          style={cornerHandleStyle(
+            config.handle,
+            config.cursor,
+            chromeScale,
+            chromeSettling,
+          )}
           onMouseDown={(e) => onStartResize(config.handle, e)}
         />
       ))}
@@ -3369,9 +4773,17 @@ function ResizeHandles({
                 "pointer-events-auto absolute z-10 size-5 rounded-full transition-opacity active:cursor-grabbing",
                 active
                   ? "opacity-100"
-                  : "opacity-0 group-hover/artboard:opacity-100 group-focus-visible/artboard:opacity-100",
+                  : cn(
+                      "opacity-0",
+                      showOnHover &&
+                        "group-hover/artboard:opacity-100 group-focus-visible/artboard:opacity-100",
+                    ),
+              )}
+              style={rotateHandleStyle(
+                config.corner,
+                chromeScale,
+                chromeSettling,
               )}
-              style={rotateHandleStyle(config.corner, chromeScale)}
               onMouseDown={onStartRotate}
             />
           ))
@@ -3413,12 +4825,14 @@ function edgeHandleStyle(
   handle: ResizeHandle,
   cursor: string,
   chromeScale: number,
+  chromeSettling: boolean,
 ): CSSProperties {
   const size = 14 * chromeScale;
   const offset = -size / 2;
   if (handle === "n" || handle === "s") {
     return {
       cursor,
+      transition: getChromeHandleTransition(chromeSettling),
       left: 0,
       right: 0,
       height: size,
@@ -3427,6 +4841,7 @@ function edgeHandleStyle(
   }
   return {
     cursor,
+    transition: getChromeHandleTransition(chromeSettling),
     top: 0,
     bottom: 0,
     width: size,
@@ -3438,11 +4853,13 @@ function cornerHandleStyle(
   handle: ResizeHandle,
   cursor: string,
   chromeScale: number,
+  chromeSettling: boolean,
 ): CSSProperties {
   const size = 10 * chromeScale;
   const offset = -size / 2;
   return {
     cursor,
+    transition: getChromeHandleTransition(chromeSettling),
     width: size,
     height: size,
     borderWidth: Math.max(1, 1.25 * chromeScale),
@@ -3451,11 +4868,16 @@ function cornerHandleStyle(
   };
 }
 
-function rotateHandleStyle(corner: string, chromeScale: number): CSSProperties {
+function rotateHandleStyle(
+  corner: string,
+  chromeScale: number,
+  chromeSettling: boolean,
+): CSSProperties {
   const size = 28 * chromeScale;
   const offset = -34 * chromeScale;
   return {
     cursor: "grab",
+    transition: getChromeHandleTransition(chromeSettling),
     width: size,
     height: size,
     ...(corner.includes("n") ? { top: offset } : { bottom: offset }),
@@ -3475,7 +4897,15 @@ interface BoundsRect {
   bottom: number;
 }
 
-function getInitialFrameGeometry(index: number): FrameGeometry {
+interface ScreenViewportSize {
+  width: number;
+  height: number;
+}
+
+function getInitialFrameGeometry(
+  index: number,
+  metadata?: ScreenViewportSize,
+): FrameGeometry {
   // Seed default frames with the actual screen dimensions and the 3-column grid
   // the overview centering math (which uses SCREEN_WIDTH/SCREEN_GAP) expects, so
   // a design without persisted geometry opens centered. (The larger
@@ -3483,22 +4913,80 @@ function getInitialFrameGeometry(index: number): FrameGeometry {
   // editor's default placement.)
   const column = index % 3;
   const row = Math.floor(index / 3);
+  const height = getOverviewFrameHeight(SCREEN_WIDTH, metadata);
   return {
     x: column * (SCREEN_WIDTH + SCREEN_GAP),
-    y: row * (SCREEN_CARD_HEIGHT + SCREEN_GAP),
+    y: row * (height + FRAME_LABEL_HEIGHT + SCREEN_GAP),
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
+    height,
   };
 }
 
-function getFrameEntries(
-  screens: ScreenFile[],
-  geometryById: FrameGeometryById,
-): FrameEntry[] {
-  return screens.map((screen, index) => ({
-    id: screen.id,
-    geometry: geometryById[screen.id] ?? getInitialFrameGeometry(index),
-  }));
+function getOverviewFrameHeight(width: number, metadata?: ScreenViewportSize) {
+  const sourceWidth =
+    metadata?.width && metadata.width > 0 ? metadata.width : 1280;
+  const sourceHeight =
+    metadata?.height && metadata.height > 0 ? metadata.height : 2560;
+  return Math.max(80, Math.round((width * sourceHeight) / sourceWidth));
+}
+
+export function getPreviewDeviceFrameGeometry({
+  currentGeometry,
+  metadata,
+  previewDeviceFrame,
+}: {
+  currentGeometry: FrameGeometry;
+  metadata?: { width: number; height: number };
+  previewDeviceFrame: DeviceFrameType;
+}): FrameGeometry {
+  if (previewDeviceFrame === "none") {
+    return {
+      ...currentGeometry,
+      height: getOverviewFrameHeight(currentGeometry.width, metadata),
+    };
+  }
+
+  const viewport = DEVICE_FRAME_VIEWPORTS[previewDeviceFrame];
+  return {
+    ...currentGeometry,
+    width: Math.max(1, Math.round(metadata?.width ?? viewport.width)),
+    height: Math.max(1, Math.round(metadata?.height ?? viewport.height)),
+  };
+}
+
+function getScreenPreviewViewport(
+  metadata: ScreenViewportSize,
+  geometry: ScreenViewportSize,
+) {
+  const metadataWidth = Math.max(1, Math.round(metadata.width));
+  const metadataHeight = Math.max(1, Math.round(metadata.height));
+  const geometryWidth = Math.max(1, Math.round(geometry.width));
+  const geometryHeight = Math.max(1, Math.round(geometry.height));
+  const metadataAspect = metadataWidth / metadataHeight;
+  const geometryAspect = geometryWidth / geometryHeight;
+  const aspectMatches = Math.abs(metadataAspect - geometryAspect) < 0.005;
+
+  if (aspectMatches) {
+    return {
+      viewportWidth: metadataWidth,
+      viewportHeight: metadataHeight,
+      displayWidth: metadataWidth,
+      displayHeight: metadataHeight,
+      scale:
+        Math.abs(metadataWidth - geometryWidth) < 0.5 &&
+        Math.abs(metadataHeight - geometryHeight) < 0.5
+          ? 1
+          : geometryWidth / metadataWidth,
+    };
+  }
+
+  return {
+    viewportWidth: geometryWidth,
+    viewportHeight: geometryHeight,
+    displayWidth: geometryWidth,
+    displayHeight: geometryHeight,
+    scale: 1,
+  };
 }
 
 function dedupeIds(ids: string[]) {
@@ -3556,6 +5044,22 @@ function isInteractiveScreenContentTarget(target: EventTarget | null) {
   );
 }
 
+function mutePreviewIframePointerEvents(root: HTMLElement | null) {
+  if (!root) return () => {};
+  const previous = new Map<HTMLIFrameElement, string>();
+  root
+    .querySelectorAll<HTMLIFrameElement>("[data-design-preview-iframe]")
+    .forEach((iframe) => {
+      previous.set(iframe, iframe.style.pointerEvents);
+      iframe.style.pointerEvents = "none";
+    });
+  return () => {
+    previous.forEach((pointerEvents, iframe) => {
+      if (iframe.isConnected) iframe.style.pointerEvents = pointerEvents;
+    });
+  };
+}
+
 function frameBoundsToGeometry(bounds: {
   left: number;
   top: number;
@@ -3697,6 +5201,20 @@ function sameFrameGeometry(a: FrameGeometry, b: FrameGeometry) {
   );
 }
 
+function sameResolvedMetadata(
+  a: ResolvedScreenMetadata,
+  b: ResolvedScreenMetadata,
+) {
+  return (
+    a.source === b.source &&
+    a.previewState === b.previewState &&
+    a.title === b.title &&
+    a.width === b.width &&
+    a.height === b.height &&
+    a.previewUrl === b.previewUrl
+  );
+}
+
 function cloneFrameGeometryById(
   geometryById: FrameGeometryById,
 ): FrameGeometryById {
@@ -4124,24 +5642,37 @@ function resolveScreenMetadata(
   screen: ScreenFile,
   keyedMetadata?: ScreenMetadata,
   getterMetadata?: ScreenMetadata,
+  previewDeviceFrame: DeviceFrameType = "none",
 ): ResolvedScreenMetadata {
-  const metadata = { ...screen, ...keyedMetadata, ...getterMetadata };
+  // Normalize content to a string up front: a screen whose content has not yet
+  // loaded (or is otherwise not a plain string) must not crash the overview
+  // render via the content.trim()/slice() helpers below.
+  const safeScreen: ScreenFile =
+    typeof screen.content === "string" ? screen : { ...screen, content: "" };
+  const metadata = { ...safeScreen, ...keyedMetadata, ...getterMetadata };
   const previewUrl =
     metadata.url ??
     metadata.previewUrl ??
-    screen.previewUrl ??
-    getPreviewUrl(screen.content);
-  const width = metadata.width && metadata.width > 0 ? metadata.width : 1280;
+    safeScreen.previewUrl ??
+    getPreviewUrl(safeScreen.content);
+  const deviceViewport =
+    previewDeviceFrame === "none"
+      ? undefined
+      : DEVICE_FRAME_VIEWPORTS[previewDeviceFrame];
+  const width =
+    deviceViewport?.width ??
+    (metadata.width && metadata.width > 0 ? metadata.width : 1280);
   const height =
-    metadata.height && metadata.height > 0 ? metadata.height : 2560;
+    deviceViewport?.height ??
+    (metadata.height && metadata.height > 0 ? metadata.height : 2560);
   return {
     source:
       normalizeSource(metadata.sourceType ?? metadata.source) ??
-      deriveSource(screen, previewUrl),
+      deriveSource(safeScreen, previewUrl),
     previewState:
       normalizePreviewState(
         metadata.lod ?? metadata.previewState ?? metadata.status,
-      ) ?? derivePreviewState(screen, previewUrl),
+      ) ?? derivePreviewState(safeScreen, previewUrl),
     title: metadata.title,
     width,
     height,
@@ -4217,7 +5748,11 @@ function derivePreviewState(
 }
 
 function getPreviewUrl(content: string) {
-  return getUrl(content.trim())?.toString();
+  // Tolerate non-string content (e.g. a screen whose content has not loaded):
+  // a missing URL is correct here, a crash is not.
+  return getUrl(
+    typeof content === "string" ? content.trim() : undefined,
+  )?.toString();
 }
 
 function getUrl(value: string | undefined) {
@@ -4231,3 +5766,276 @@ function getUrl(value: string | undefined) {
     return undefined;
   }
 }
+
+function clampNumber(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+// ---------------------------------------------------------------------------
+// Primitive-into-primitive drop target detection
+// ---------------------------------------------------------------------------
+
+/** A committed container primitive that can accept a dropped primitive. */
+export interface PrimitiveDropTarget {
+  /** The node's data-agent-native-node-id value. */
+  nodeId: string;
+  /** The screen frame id (ScreenFile.id) that owns this primitive. */
+  screenId: string;
+  /** The primitive's bounding rect in board/canvas space. */
+  boardRect: FrameGeometry;
+}
+
+/**
+ * Parsed representation of a committed primitive found in a screen's HTML.
+ * Geometry is in screen-local CSS pixels (as written by appendCanvasPrimitiveToHtml).
+ */
+export interface ParsedScreenPrimitive {
+  nodeId: string;
+  screenId: string;
+  /** Position relative to screen body (CSS px). */
+  localLeft: number;
+  localTop: number;
+  localWidth: number;
+  localHeight: number;
+  isContainer: boolean;
+}
+
+/** Fast djb2-variant hash of a string. Runs in O(n) but is inlined for the
+ *  JIT — no allocations, no imports.  Produces a 32-bit unsigned integer as a
+ *  hex string.  Used only for cache-key disambiguation, not cryptography. */
+function hashString(s: string): string {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) {
+    // h = h * 33 ^ charCode  (djb2 xor variant)
+    h = ((h << 5) + h) ^ s.charCodeAt(i);
+    h = h >>> 0; // keep as unsigned 32-bit
+  }
+  return h.toString(16);
+}
+
+/** Simple LRU-style cache to avoid re-parsing the same screen HTML on every
+ *  mousemove frame.  Keyed by `screenId:contentLength:hash` so that ANY edit
+ *  (including changes deep in the middle of a large HTML document) invalidates
+ *  the entry.  A length:hash pair eliminates the collision zone that existed
+ *  when only prefix48+suffix48 were used — edits in `content[48..len-49]` would
+ *  produce the same key even though the content differed. */
+export const primitiveParseCache = new Map<string, ParsedScreenPrimitive[]>();
+const PRIMITIVE_PARSE_CACHE_MAX = 64;
+
+export function parsePrimitivesFromScreen(
+  screen: ScreenFile,
+): ParsedScreenPrimitive[] {
+  const cacheKey = `${screen.id}:${screen.content.length}:${hashString(screen.content)}`;
+  const cached = primitiveParseCache.get(cacheKey);
+  if (cached) return cached;
+
+  const result: ParsedScreenPrimitive[] = [];
+  if (typeof DOMParser === "undefined" || !screen.content) {
+    return result;
+  }
+
+  try {
+    const doc = new DOMParser().parseFromString(screen.content, "text/html");
+    const nodes = doc.querySelectorAll("[data-agent-native-node-id]");
+    nodes.forEach((el) => {
+      const nodeId = el.getAttribute("data-agent-native-node-id");
+      if (!nodeId) return;
+
+      const htmlEl = el as HTMLElement;
+      const style = htmlEl.style;
+      const tag = el.tagName.toLowerCase();
+
+      // Only block elements with explicit absolute positioning are considered
+      // positioned primitives drawn by appendCanvasPrimitiveToHtml.
+      if (style.position !== "absolute") return;
+
+      const left = parseFloat(style.left) || 0;
+      const top = parseFloat(style.top) || 0;
+      const width = parseFloat(style.width) || 0;
+      const height = parseFloat(style.height) || 0;
+
+      // Validity: must have non-zero size
+      if (width <= 0 || height <= 0) return;
+
+      // Container check:
+      //   - Must be a div (not svg/path/circle/polygon/etc.)
+      //   - Must NOT be an ellipse (border-radius:50%)
+      //   - NOT a text primitive (but text divs could be containers in principle;
+      //     we exclude them by checking for display:inline-block autoSize pattern)
+      const isDiv = tag === "div";
+      const isEllipse =
+        style.borderRadius === "50%" ||
+        style.borderRadius === "50% 50% 50% 50%";
+      const isTextAutoSize = style.display === "inline-block";
+      const isContainer = isDiv && !isEllipse && !isTextAutoSize;
+
+      result.push({
+        nodeId,
+        screenId: screen.id,
+        localLeft: left,
+        localTop: top,
+        localWidth: width,
+        localHeight: height,
+        isContainer,
+      });
+    });
+  } catch {
+    // Silently ignore parse errors
+  }
+
+  if (primitiveParseCache.size >= PRIMITIVE_PARSE_CACHE_MAX) {
+    // Evict the oldest entry
+    const firstKey = primitiveParseCache.keys().next().value;
+    if (firstKey !== undefined) primitiveParseCache.delete(firstKey);
+  }
+  primitiveParseCache.set(cacheKey, result);
+  return result;
+}
+
+/**
+ * Convert a screen-local primitive rect to board/canvas coordinates.
+ *
+ * appendCanvasPrimitiveToHtml stores positions in screen-local CSS pixels
+ * scaled from the board draft geometry:
+ *   localX = (boardX - frame.x) * (metadata.width / frame.width)
+ * Inverting:
+ *   boardX = frame.x + localX * (frame.width / metadata.width)
+ */
+export function primitiveLocalToBoardRect(
+  localLeft: number,
+  localTop: number,
+  localWidth: number,
+  localHeight: number,
+  frameGeometry: FrameGeometry,
+  metadata: { width: number; height: number },
+): FrameGeometry {
+  const scaleX = frameGeometry.width / Math.max(1, metadata.width);
+  const scaleY = frameGeometry.height / Math.max(1, metadata.height);
+  return {
+    x: frameGeometry.x + localLeft * scaleX,
+    y: frameGeometry.y + localTop * scaleY,
+    width: Math.max(1, localWidth * scaleX),
+    height: Math.max(1, localHeight * scaleY),
+  };
+}
+
+/**
+ * Find the topmost committed container primitive at `point` (canvas coords),
+ * excluding `draggedNodeId` and any of its descendants.
+ *
+ * Descendants are detected geometrically: a primitive whose board rect is
+ * fully enclosed by the dragged node's board rect is treated as a descendant
+ * and excluded. This avoids a circular parent-child relationship on drop.
+ *
+ * Returns null if no valid target found.
+ */
+export function getPrimitiveDropTargetForPoint(
+  point: Point,
+  draggedNodeId: string | null,
+  screens: ScreenFile[],
+  frameGeometryById: FrameGeometryById,
+  getMetadata: (screen: ScreenFile) => { width: number; height: number },
+): PrimitiveDropTarget | null {
+  // Pre-compute the dragged node's board rect so we can exclude its descendants.
+  let draggedBoardRect: FrameGeometry | null = null;
+  if (draggedNodeId) {
+    outer: for (const screen of screens) {
+      const frameGeometry = frameGeometryById[screen.id];
+      if (!frameGeometry) continue;
+      const metadata = getMetadata(screen);
+      const primitives = parsePrimitivesFromScreen(screen);
+      for (const prim of primitives) {
+        if (prim.nodeId === draggedNodeId) {
+          draggedBoardRect = primitiveLocalToBoardRect(
+            prim.localLeft,
+            prim.localTop,
+            prim.localWidth,
+            prim.localHeight,
+            frameGeometry,
+            metadata,
+          );
+          break outer;
+        }
+      }
+    }
+  }
+
+  let best: PrimitiveDropTarget | null = null;
+
+  for (const screen of screens) {
+    const frameGeometry = frameGeometryById[screen.id];
+    if (!frameGeometry) continue;
+
+    const frameBounds = {
+      left: frameGeometry.x,
+      top: frameGeometry.y,
+      right: frameGeometry.x + frameGeometry.width,
+      bottom: frameGeometry.y + frameGeometry.height,
+    };
+    if (!rectContainsPoint(frameBounds, point)) {
+      continue;
+    }
+
+    const metadata = getMetadata(screen);
+    const primitives = parsePrimitivesFromScreen(screen);
+
+    for (const prim of primitives) {
+      if (!prim.isContainer) continue;
+      if (draggedNodeId && prim.nodeId === draggedNodeId) continue;
+
+      const boardRect = primitiveLocalToBoardRect(
+        prim.localLeft,
+        prim.localTop,
+        prim.localWidth,
+        prim.localHeight,
+        frameGeometry,
+        metadata,
+      );
+
+      // Exclude geometric descendants: a primitive whose board rect is fully
+      // contained within the dragged node's board rect is a child/descendant
+      // and cannot be a valid reparent target (would create a cycle).
+      if (
+        draggedBoardRect &&
+        boardRect.x >= draggedBoardRect.x &&
+        boardRect.y >= draggedBoardRect.y &&
+        boardRect.x + boardRect.width <=
+          draggedBoardRect.x + draggedBoardRect.width &&
+        boardRect.y + boardRect.height <=
+          draggedBoardRect.y + draggedBoardRect.height
+      ) {
+        continue;
+      }
+
+      if (
+        point.x >= boardRect.x &&
+        point.x <= boardRect.x + boardRect.width &&
+        point.y >= boardRect.y &&
+        point.y <= boardRect.y + boardRect.height
+      ) {
+        // Later in the DOM = higher paint order = topmost visually.
+        // We take the last match within each screen (DOM order).
+        best = { nodeId: prim.nodeId, screenId: screen.id, boardRect };
+      }
+    }
+  }
+
+  return best;
+}
+
+/**
+ * Resolve which screen (ScreenFile.id) owns a committed primitive nodeId by
+ * scanning all screen HTML for the given data-agent-native-node-id value.
+ */
+export function resolveNodeScreenId(
+  nodeId: string,
+  screens: ScreenFile[],
+): string | null {
+  for (const screen of screens) {
+    const primitives = parsePrimitivesFromScreen(screen);
+    if (primitives.some((p) => p.nodeId === nodeId)) {
+      return screen.id;
+    }
+  }
+  return null;
+}