@agent-native/core 0.148.0 → 0.149.0

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

@@ -5074,10 +5074,210 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     [updateSelectedDraftIds, updateSelectedIds],
   );
 
+  const beginDuplicateGesture = useCallback(
+    (id: string, e: React.MouseEvent) => {
+      const entries = getCurrentFrameEntries();
+      const selection = selectedIdsRef.current;
+      const targets = (selection.includes(id) ? selection : [id])
+        .filter((targetId) => !lockedScreenIdSet.has(targetId))
+        .flatMap((targetId) => {
+          const target = screensRef.current.find((s) => s.id === targetId);
+          const geometry = entries.find(
+            (entry) => entry.id === targetId,
+          )?.geometry;
+          return target && geometry ? [{ screen: target, geometry }] : [];
+        });
+      const source = targets.find((target) => target.screen.id === id);
+      if (!source) return;
+      e.preventDefault();
+      e.stopPropagation();
+      duplicateCleanup.current?.();
+
+      const display = screenDisplayName(
+        source.screen,
+        getResolvedMetadata(source.screen),
+      );
+      const surfaceRect = surfaceRef.current?.getBoundingClientRect();
+      const origin = { x: e.clientX, y: e.clientY };
+      const originCanvas = canvasPointFromClient(e.clientX, e.clientY);
+      const previewPoint = {
+        x: surfaceRect ? e.clientX - surfaceRect.left + 16 : e.clientX,
+        y: surfaceRect ? e.clientY - surfaceRect.top + 16 : e.clientY,
+      };
+
+      const previewWidth = source.geometry.width;
+      const previewHeight = source.geometry.height;
+
+      setDuplicatePreview({
+        display,
+        count: targets.length,
+        x: previewPoint.x,
+        y: previewPoint.y,
+        width: previewWidth,
+        height: previewHeight,
+        canDuplicate: !!onDuplicate,
+        moved: false,
+      });
+      // Mount the interaction shield and mute preview-iframe pointer events for
+      // the duration of the gesture, same as every other drag — otherwise the
+      // pointer freezes crossing a live embedded iframe and a release over a
+      // screen never reaches handleMouseUp.
+      setIsDragging(true);
+      // Figma parity: show a copy-affordance cursor while the alt-drag
+      // duplicate gesture is armed. Tracked live in handleMouseMove below
+      // (same live e.altKey tracking that already drives canDuplicate), so
+      // releasing alt mid-drag falls back to the default arrow instead of
+      // staying on the copy cursor for a gesture that will no longer
+      // duplicate on mouseup.
+      setDragCursor(e.altKey ? "copy" : null);
+
+      // PERF: track the last committed canDuplicate/moved/cursor values in
+      // plain closure locals (not state) so the mousemove tick below can tell
+      // whether anything conditional actually changed without reading back
+      // through React state (which the imperative writes below intentionally
+      // stop keeping fresh every tick — see duplicatePreviewElRef).
+      let lastCanDuplicate = !!onDuplicate;
+      let lastMoved = false;
+      let lastCursor: string | null = e.altKey ? "copy" : null;
+
+      const handleMouseMove = (ev: MouseEvent) => {
+        const dx = ev.clientX - origin.x;
+        const dy = ev.clientY - origin.y;
+        const moved = Math.hypot(dx, dy) >= DUPLICATE_DRAG_THRESHOLD;
+        const rect = surfaceRef.current?.getBoundingClientRect();
+        const x = rect ? ev.clientX - rect.left + 16 : ev.clientX;
+        const y = rect ? ev.clientY - rect.top + 16 : ev.clientY;
+        // Live alt state, not just capability: if the user releases alt
+        // mid-drag the preview should visibly fall back to its "not armed"
+        // dashed/preview styling, matching that mouseup will then cancel
+        // the duplicate instead of creating one (see handleMouseUp below).
+        const canDuplicate = !!onDuplicate && ev.altKey;
+
+        // PERF9: the ghost's position is a direct DOM write every tick
+        // instead of a setDuplicatePreview (full re-render) — same
+        // "imperative now, commit state only when something conditional
+        // changes" discipline as the frame/draft drag paths above. Falls
+        // back to setDuplicatePreview itself if the node hasn't mounted yet
+        // (e.g. the very first tick right after mousedown, before React has
+        // committed the initial preview).
+        const el = duplicatePreviewElRef.current;
+        if (el) {
+          el.style.left = `${x}px`;
+          el.style.top = `${y}px`;
+        }
+
+        if (!el || canDuplicate !== lastCanDuplicate || moved !== lastMoved) {
+          lastCanDuplicate = canDuplicate;
+          lastMoved = moved;
+          setDuplicatePreview({
+            display,
+            count: targets.length,
+            x,
+            y,
+            width: previewWidth,
+            height: previewHeight,
+            canDuplicate,
+            moved,
+          });
+        }
+
+        const cursor = ev.altKey ? "copy" : null;
+        if (cursor !== lastCursor) {
+          lastCursor = cursor;
+          setDragCursor(cursor);
+        }
+      };
+
+      const cleanupDuplicateGesture = () => {
+        setDuplicatePreview(null);
+        duplicateCleanup.current = null;
+        // finishDrag clears isDragging, unmounts the shield, and — critically —
+        // runs dragCleanup.current() to detach the window listeners installed
+        // by installDragListeners and restore preview-iframe pointer events.
+        // dragState.current was never set for this gesture, so finishDrag's
+        // other resets (marquee/creation-preview/etc.) are no-ops here.
+        finishDrag();
+      };
+
+      const handleMouseUp = (ev: MouseEvent) => {
+        const moved =
+          Math.hypot(ev.clientX - origin.x, ev.clientY - origin.y) >=
+          DUPLICATE_DRAG_THRESHOLD;
+        // Alt is read live, not from mousedown: the gesture only ever showed a
+        // ghost, so releasing alt must cancel outright, never fall back to a
+        // move the original frame never started.
+        const shouldDuplicate = moved && ev.altKey;
+
+        if (onDuplicate && shouldDuplicate) {
+          const dropCanvasPosition = canvasPointFromClient(
+            ev.clientX,
+            ev.clientY,
+          );
+          const delta = {
+            x: dropCanvasPosition.x - originCanvas.x,
+            y: dropCanvasPosition.y - originCanvas.y,
+          };
+          // The user placed these clones deliberately — suppress the
+          // lineup-recenter camera move when the created screens land in
+          // `screens` (Figma keeps the camera still on alt-drag duplicate).
+          lineupRecenterSuppressRef.current = {
+            atMs: Date.now(),
+            fromCount: screensRef.current.length,
+            addedCount: targets.length,
+          };
+          targets.forEach((target) => {
+            const canvasPosition = {
+              x: target.geometry.x + delta.x,
+              y: target.geometry.y + delta.y,
+            };
+            onDuplicate(target.screen.id, {
+              mode: "alt-drag",
+              screen: target.screen,
+              canvasPosition,
+              canvasOffset: {
+                x: dropCanvasPosition.x - canvasPosition.x,
+                y: dropCanvasPosition.y - canvasPosition.y,
+              },
+              dropCanvasPosition,
+            });
+          });
+        } else if (!moved) {
+          onPick(id);
+        }
+
+        cleanupDuplicateGesture();
+      };
+
+      duplicateCleanup.current = cleanupDuplicateGesture;
+      installDragListeners(
+        handleMouseMove,
+        handleMouseUp,
+        cleanupDuplicateGesture,
+      );
+    },
+    [
+      canvasPointFromClient,
+      finishDrag,
+      getCurrentFrameEntries,
+      getResolvedMetadata,
+      installDragListeners,
+      lockedScreenIdSet,
+      onDuplicate,
+      onPick,
+    ],
+  );
+
   const beginFrameDrag = useCallback(
     (id: string, e: React.MouseEvent) => {
       if (readOnly) return;
-      if (e.button !== 0 || e.shiftKey || lockedScreenIdSet.has(id)) return;
+      if (e.button !== 0 || lockedScreenIdSet.has(id)) return;
+      // Frame body, label row, and the selection box over a selected frame all
+      // start drags here, so alt's move-vs-copy meaning is decided exactly once.
+      if (e.altKey) {
+        beginDuplicateGesture(id, e);
+        return;
+      }
+      if (e.shiftKey) return;
       e.preventDefault();
       e.stopPropagation();
       // Frame mousedowns stop propagation, so they never reach handleMouseDown.
@@ -5429,6 +5629,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     },
     [
       activeId,
+      beginDuplicateGesture,
       findPrimitiveDropTarget,
       finishDrag,
       getCanvasPoint,
@@ -6284,191 +6485,6 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     ],
   );
 
-  const beginDuplicateGesture = useCallback(
-    (screen: ScreenFile, display: string, e: React.MouseEvent<HTMLElement>) => {
-      if (readOnly) return;
-      if (e.button !== 0 || !e.altKey || lockedScreenIdSet.has(screen.id)) {
-        return;
-      }
-      e.preventDefault();
-      e.stopPropagation();
-      duplicateCleanup.current?.();
-
-      const surfaceRect = surfaceRef.current?.getBoundingClientRect();
-      const origin = { x: e.clientX, y: e.clientY };
-      const originCanvas = canvasPointFromClient(e.clientX, e.clientY);
-      const sourceFrame = getCurrentFrameEntries().find(
-        (entry) => entry.id === screen.id,
-      );
-      const pointerOffset = sourceFrame
-        ? {
-            x: originCanvas.x - sourceFrame.geometry.x,
-            y: originCanvas.y - sourceFrame.geometry.y,
-          }
-        : { x: 0, y: 0 };
-      const previewPoint = {
-        x: surfaceRect ? e.clientX - surfaceRect.left + 16 : e.clientX,
-        y: surfaceRect ? e.clientY - surfaceRect.top + 16 : e.clientY,
-      };
-
-      const previewWidth = sourceFrame?.geometry.width ?? SCREEN_WIDTH;
-      const previewHeight = sourceFrame?.geometry.height ?? SCREEN_HEIGHT;
-
-      setDuplicatePreview({
-        display,
-        x: previewPoint.x,
-        y: previewPoint.y,
-        width: previewWidth,
-        height: previewHeight,
-        canDuplicate: !!onDuplicate,
-        moved: false,
-      });
-      // Mount the interaction shield and mute preview-iframe pointer events for
-      // the duration of the gesture, same as every other drag — otherwise the
-      // pointer freezes crossing a live embedded iframe and a release over a
-      // screen never reaches handleMouseUp.
-      setIsDragging(true);
-      // Figma parity: show a copy-affordance cursor while the alt-drag
-      // duplicate gesture is armed. Tracked live in handleMouseMove below
-      // (same live e.altKey tracking that already drives canDuplicate), so
-      // releasing alt mid-drag falls back to the default arrow instead of
-      // staying on the copy cursor for a gesture that will no longer
-      // duplicate on mouseup.
-      setDragCursor(e.altKey ? "copy" : null);
-
-      // PERF: track the last committed canDuplicate/moved/cursor values in
-      // plain closure locals (not state) so the mousemove tick below can tell
-      // whether anything conditional actually changed without reading back
-      // through React state (which the imperative writes below intentionally
-      // stop keeping fresh every tick — see duplicatePreviewElRef).
-      let lastCanDuplicate = !!onDuplicate;
-      let lastMoved = false;
-      let lastCursor: string | null = e.altKey ? "copy" : null;
-
-      const handleMouseMove = (ev: MouseEvent) => {
-        const dx = ev.clientX - origin.x;
-        const dy = ev.clientY - origin.y;
-        const moved = Math.hypot(dx, dy) >= DUPLICATE_DRAG_THRESHOLD;
-        const rect = surfaceRef.current?.getBoundingClientRect();
-        const x = rect ? ev.clientX - rect.left + 16 : ev.clientX;
-        const y = rect ? ev.clientY - rect.top + 16 : ev.clientY;
-        // Live alt state, not just capability: if the user releases alt
-        // mid-drag the preview should visibly fall back to its "not armed"
-        // dashed/preview styling, matching that mouseup will then cancel
-        // the duplicate instead of creating one (see handleMouseUp below).
-        const canDuplicate = !!onDuplicate && ev.altKey;
-
-        // PERF9: the ghost's position is a direct DOM write every tick
-        // instead of a setDuplicatePreview (full re-render) — same
-        // "imperative now, commit state only when something conditional
-        // changes" discipline as the frame/draft drag paths above. Falls
-        // back to setDuplicatePreview itself if the node hasn't mounted yet
-        // (e.g. the very first tick right after mousedown, before React has
-        // committed the initial preview).
-        const el = duplicatePreviewElRef.current;
-        if (el) {
-          el.style.left = `${x}px`;
-          el.style.top = `${y}px`;
-        }
-
-        if (!el || canDuplicate !== lastCanDuplicate || moved !== lastMoved) {
-          lastCanDuplicate = canDuplicate;
-          lastMoved = moved;
-          setDuplicatePreview({
-            display,
-            x,
-            y,
-            width: previewWidth,
-            height: previewHeight,
-            canDuplicate,
-            moved,
-          });
-        }
-
-        const cursor = ev.altKey ? "copy" : null;
-        if (cursor !== lastCursor) {
-          lastCursor = cursor;
-          setDragCursor(cursor);
-        }
-      };
-
-      const cleanupDuplicateGesture = () => {
-        setDuplicatePreview(null);
-        duplicateCleanup.current = null;
-        // finishDrag clears isDragging, unmounts the shield, and — critically —
-        // runs dragCleanup.current() to detach the window listeners installed
-        // by installDragListeners and restore preview-iframe pointer events.
-        // dragState.current was never set for this gesture, so finishDrag's
-        // other resets (marquee/creation-preview/etc.) are no-ops here.
-        finishDrag();
-      };
-
-      const handleMouseUp = (ev: MouseEvent) => {
-        const moved =
-          Math.hypot(ev.clientX - origin.x, ev.clientY - origin.y) >=
-          DUPLICATE_DRAG_THRESHOLD;
-        const mode = moved ? "alt-drag" : "alt-click";
-        // Figma semantics: a plain alt-click (no drag) never duplicates —
-        // only an actual alt-drag does. And alt is evaluated live: releasing
-        // it before mouseup cancels the pending duplicate rather than
-        // creating one anyway (this gesture never moves the original frame
-        // during the drag — it only shows a floating ghost preview — so
-        // "cancel" here means no-op, not handing off to a live move).
-        const shouldDuplicate = moved && ev.altKey;
-
-        if (onDuplicate && shouldDuplicate) {
-          const dropCanvasPosition = canvasPointFromClient(
-            ev.clientX,
-            ev.clientY,
-          );
-          // shouldDuplicate implies moved, so the drop position is always
-          // relative to the pointer's offset into the source frame (the
-          // "snap next to source" placement only applied to the old
-          // zero-move alt-click case, which no longer duplicates at all).
-          const canvasPosition = {
-            x: dropCanvasPosition.x - pointerOffset.x,
-            y: dropCanvasPosition.y - pointerOffset.y,
-          };
-          // The user placed this clone deliberately — suppress the
-          // lineup-recenter camera move when the created screen lands in
-          // `screens` (Figma keeps the camera still on alt-drag duplicate).
-          lineupRecenterSuppressRef.current = {
-            atMs: Date.now(),
-            fromCount: screensRef.current.length,
-            addedCount: 1,
-          };
-          onDuplicate(screen.id, {
-            mode,
-            screen,
-            canvasPosition,
-            canvasOffset: pointerOffset,
-            dropCanvasPosition,
-          });
-        } else if (!moved) {
-          onPick(screen.id);
-        }
-
-        cleanupDuplicateGesture();
-      };
-
-      duplicateCleanup.current = cleanupDuplicateGesture;
-      installDragListeners(
-        handleMouseMove,
-        handleMouseUp,
-        cleanupDuplicateGesture,
-      );
-    },
-    [
-      canvasPointFromClient,
-      finishDrag,
-      getCurrentFrameEntries,
-      installDragListeners,
-      lockedScreenIdSet,
-      onDuplicate,
-      onPick,
-    ],
-  );
-
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       claimKeyboardFocus();
@@ -7386,15 +7402,15 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       ) {
         return;
       }
-      // Always suppress the browser default (bookmark dialog) — but leave
-      // propagation intact until we know a frame is duplicable here, so the
-      // global hotkey hook can still duplicate non-frame layer selections.
-      event.preventDefault();
       // Only act on frame IDs — filter out canvas primitives (sub-elements).
       const frameIds = selectedIdsRef.current.filter(
         (id) => frameGeometryRef.current[id],
       );
+      // Claim the event only once a frame will really be duplicated — the
+      // global hotkey hook skips anything already defaultPrevented, and it
+      // suppresses the bookmark dialog itself when it takes over.
       if (frameIds.length === 0) return;
+      event.preventDefault();
       event.stopPropagation();
       event.stopImmediatePropagation();
       // Duplicate every selected frame, not just the first — each duplicate
@@ -8152,7 +8168,6 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               onStartFrameDrag={beginFrameDrag}
               onStartResize={beginResize}
               onStartRotate={beginRotate}
-              onStartDuplicateGesture={beginDuplicateGesture}
               // Pass the id-first callbacks straight through (PF18): Screen
               // itself binds screen.id when it calls these, so every screen
               // instance gets the exact same stable function reference here
@@ -8574,7 +8589,9 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         >
           <div className="flex h-full w-full items-start justify-between rounded-lg bg-muted/20 p-2">
             <span className="max-w-[190px] truncate !text-[11px] font-medium text-foreground">
-              {duplicatePreview.display}
+              {duplicatePreview.count > 1
+                ? `${duplicatePreview.display} +${duplicatePreview.count - 1}`
+                : duplicatePreview.display}
             </span>
             <span className="flex items-center gap-1 rounded-md border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
               <IconCopy className="h-3 w-3" />
@@ -9411,6 +9428,14 @@ function GradientEditOverlay({
   );
 }
 
+/** The name shown in a frame's label row and in the alt-drag copy ghost. */
+function screenDisplayName(
+  screen: ScreenFile,
+  metadata: ResolvedScreenMetadata,
+): string {
+  return metadata.title ?? prettyScreenName(screen.filename);
+}
+
 /** Standard Tailwind breakpoint widths, mobile-first (base / md: / lg: / xl:). */
 const STANDARD_BREAKPOINT_WIDTHS = [390, 768, 1280] as const;
 
@@ -9483,11 +9508,6 @@ interface ScreenProps {
     e: React.MouseEvent,
   ) => void;
   onStartRotate: (id: string, e: React.MouseEvent) => void;
-  onStartDuplicateGesture: (
-    screen: ScreenFile,
-    display: string,
-    e: React.MouseEvent<HTMLElement>,
-  ) => void;
   // Id-first (screenId, widthPx) shape, same as MultiScreenCanvas's own
   // onActiveBreakpointChange prop (PF18): Screen binds screen.id itself when
   // calling these, so the parent can pass the same stable function reference
@@ -9541,7 +9561,6 @@ const Screen = memo(function Screen({
   onStartFrameDrag,
   onStartResize,
   onStartRotate,
-  onStartDuplicateGesture,
   screenContent,
   renderBreakpointContent,
   cullTier,
@@ -9552,7 +9571,7 @@ const Screen = memo(function Screen({
   onEditBreakpoint,
 }: ScreenProps) {
   const t = useT();
-  const display = metadata.title ?? prettyScreenName(screen.filename);
+  const display = screenDisplayName(screen, metadata);
   const previewUrl = metadata.previewUrl ?? getPreviewUrl(screen.content);
   const previewViewport = getScreenPreviewViewport(metadata, geometry);
   const suppressNextClick = useRef(false);
@@ -9684,15 +9703,11 @@ const Screen = memo(function Screen({
             return;
           }
           if (e.altKey) {
-            // Matches the data-screen-card mousedown handler below: without
-            // this, a trailing click after the alt-drag/duplicate gesture
-            // ends falls through to this row's onClick and steals selection
-            // away from the newly created duplicate.
+            // Without this the trailing click after an alt-drag copy falls
+            // through to this row's onClick and steals selection back from the
+            // new duplicate.
             suppressNextClick.current = true;
-            onStartDuplicateGesture(screen, display, e);
-            return;
-          }
-          if (e.shiftKey) {
+          } else if (e.shiftKey) {
             e.stopPropagation();
             return;
           }
@@ -9838,13 +9853,10 @@ const Screen = memo(function Screen({
             e.stopPropagation();
             return;
           }
-          if (e.altKey && e.button === 0) {
-            suppressNextClick.current = true;
-            onStartDuplicateGesture(screen, display, e);
-            return;
-          }
           if (e.button === 0) {
-            if (e.shiftKey) {
+            if (e.altKey) {
+              suppressNextClick.current = true;
+            } else if (e.shiftKey) {
               e.stopPropagation();
               return;
             }
@@ -10105,7 +10117,6 @@ function areScreenPropsEqual(prev: ScreenProps, next: ScreenProps) {
     prev.onStartFrameDrag === next.onStartFrameDrag &&
     prev.onStartResize === next.onStartResize &&
     prev.onStartRotate === next.onStartRotate &&
-    prev.onStartDuplicateGesture === next.onStartDuplicateGesture &&
     // Now id-first (screenId, widthPx) callbacks passed straight through
     // from MultiScreenCanvas's own props (PF18) instead of a fresh
     // per-screen arrow allocated in the render loop, so these are expected

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -976,6 +976,9 @@ export interface ResolvedScreenMetadata {
 
 export interface DuplicatePreview {
   display: string;
+  /** How many frames the drop will copy — the whole frame selection when the
+   *  alt-drag started on a selected frame, otherwise just the pressed one. */
+  count: number;
   x: number;
   y: number;
   width: number;