@agent-native/core 0.129.1 → 0.130.0

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

@@ -217,6 +217,7 @@ import {
 } from "./edit-panel/fill-gradient-helpers";
 import { FillProperties } from "./edit-panel/fill-properties";
 import { FramePresetsPanel } from "./edit-panel/frame-presets-panel";
+import type { InspectCodeSourceLocation } from "./edit-panel/inspect-code-source";
 import {
   InspectorIconButton,
   InspectorSegment,
@@ -687,14 +688,91 @@ export interface InspectCodeData {
    * Resolved source file for real-app sources (localhost / fusion), when the
    * resolveNodeToFile capability is available.
    */
-  sourceLocation?: {
-    /** Absolute path on disk — used to build the vscode:// deep link. */
-    absolutePath: string;
-    line?: number;
-    column?: number;
-    /** Optional snippet to show above the Open-in-VS-Code button. */
-    snippet?: string;
-  } | null;
+  sourceLocation?:
+    | (InspectCodeSourceLocation & {
+        /** Optional snippet to show above the Open-in-VS-Code button. */
+        snippet?: string;
+      })
+    | null;
+}
+
+function sourcePositionLabel(
+  source: Pick<InspectCodeSourceLocation, "filePath" | "line" | "column">,
+): string {
+  if (source.line == null) return source.filePath;
+  return `${source.filePath}:${source.line}${
+    source.column == null ? "" : `:${source.column}`
+  }`;
+}
+
+function sourcePrecisionLabel(
+  method: InspectCodeSourceLocation["method"],
+): string | null {
+  if (method === "debug-stack") return "Runtime-transformed location"; // i18n-ignore design inspector technical provenance label
+  if (method === "debug-source" || method === "data-attribute") {
+    return "Authored source location"; // i18n-ignore design inspector technical provenance label
+  }
+  return null;
+}
+
+function SourceLocationSummary({
+  source,
+}: {
+  source: InspectCodeSourceLocation;
+}) {
+  const precision = sourcePrecisionLabel(source.method);
+  const ownerPrecision = source.owner
+    ? sourcePrecisionLabel(source.owner.method)
+    : null;
+  return (
+    <div className="space-y-1">
+      <div
+        className="rounded bg-[var(--design-editor-control-bg)] px-2 py-1.5"
+        title={sourcePositionLabel(source)}
+      >
+        <div className="flex min-w-0 items-center gap-1">
+          <IconCode className="size-3 shrink-0 text-muted-foreground/60" />
+          {source.componentName ? (
+            <span className="shrink-0 font-medium text-foreground">
+              {source.componentName}
+            </span>
+          ) : null}
+          <span className="min-w-0 flex-1 truncate font-mono text-[10px] text-muted-foreground">
+            {sourcePositionLabel(source)}
+          </span>
+        </div>
+        {precision ? (
+          <div className="mt-0.5 pl-4 text-[9px] text-muted-foreground/70">
+            {precision}
+          </div>
+        ) : null}
+      </div>
+      {source.owner ? (
+        <div
+          className="rounded border border-border/60 px-2 py-1 text-[10px] text-muted-foreground"
+          title={sourcePositionLabel(source.owner)}
+        >
+          <div className="truncate">
+            <span className="mr-1 font-medium text-foreground/80">
+              {"Owner" /* i18n-ignore design inspector provenance label */}
+            </span>
+            {source.owner.componentName
+              ? `${source.owner.componentName} · `
+              : ""}
+            <span className="font-mono">
+              {sourcePositionLabel(source.owner)}
+            </span>
+            {source.owner.key ? ` · key ${source.owner.key}` : ""}
+          </div>
+          {ownerPrecision ? (
+            <div className="mt-0.5 text-[9px] text-muted-foreground/70">
+              {ownerPrecision}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
 }
 
 /**
@@ -882,18 +960,7 @@ function InspectCodePopover({ data }: { data: InspectCodeData }) {
           </Button>
         </div>
 
-        {source && (
-          <div
-            className="flex items-center gap-1 rounded bg-[var(--design-editor-control-bg)] px-2 py-1"
-            title={source.absolutePath}
-          >
-            <IconCode className="size-3 shrink-0 text-muted-foreground/60" />
-            <span className="min-w-0 flex-1 truncate font-mono text-[10px] text-muted-foreground">
-              {source.absolutePath}
-              {source.line != null ? `:${source.line}` : ""}
-            </span>
-          </div>
-        )}
+        {source ? <SourceLocationSummary source={source} /> : null}
 
         {snippet ? (
           <pre className="max-h-64 overflow-auto rounded bg-[var(--design-editor-control-bg)] p-2 font-mono text-[10px] leading-relaxed text-foreground">
@@ -907,7 +974,7 @@ function InspectCodePopover({ data }: { data: InspectCodeData }) {
           </p>
         )}
 
-        {source && (
+        {source?.absolutePath ? (
           <a
             href={vscodeDeepLink(
               source.absolutePath,
@@ -926,7 +993,7 @@ function InspectCodePopover({ data }: { data: InspectCodeData }) {
               {"Open in VS Code" /* i18n-ignore design inspector action */}
             </Button>
           </a>
-        )}
+        ) : null}
       </PopoverContent>
     </Popover>
   );
@@ -1040,6 +1107,11 @@ function CodeInspectPanel({
       ) : null}
 
       <PanelSection title={"Code" /* i18n-ignore design inspector section */}>
+        {data?.sourceLocation ? (
+          <div className="mb-2">
+            <SourceLocationSummary source={data.sourceLocation} />
+          </div>
+        ) : null}
         {snippet ? (
           <pre className="max-h-80 overflow-auto rounded bg-[var(--design-editor-control-bg)] p-2 font-mono text-[10px] leading-relaxed text-foreground">
             <code>{highlightedHtml(snippet)}</code>

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

@@ -46,7 +46,6 @@ import {
   type PenPath,
 } from "@shared/pen-path";
 import {
-  IconArrowsMaximize,
   IconCopy,
   IconDots,
   IconHandClick,
@@ -213,6 +212,7 @@ import {
   getActiveScreenIframeId,
   getBreakpointIframeId,
   isBreakpointSelectionTarget,
+  shouldSuppressFrameSelectionBox,
 } from "./multi-screen/iframe-targeting";
 import {
   boardPointToBoardSurfaceLocalPoint,
@@ -266,6 +266,7 @@ import {
   screenLocalRectToBoardGeometry,
 } from "./multi-screen/coordinate-transforms";
 import {
+  captureCrossScreenSourceHtmlSnapshot,
   getCrossScreenDropGuideForHitTest,
   getCrossScreenDropGuideStyle,
   isCrossScreenDropAxis,
@@ -406,6 +407,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   zoom,
   activeId,
   selectedScreenIds,
+  selectedElementScreenId = null,
   hiddenScreenIds = EMPTY_SCREEN_IDS,
   lockedScreenIds = EMPTY_SCREEN_IDS,
   fullViewScreenIds,
@@ -861,6 +863,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     sourceId?: string;
     sourcePointerOffset?: Point;
     sourceElementSize?: { width: number; height: number };
+    sourceHtmlSnapshot?: string;
     styleSnapshot?: PortableStyleSnapshot;
   } | null>(null);
   const crossScreenParentDragCleanupRef = useRef<(() => void) | null>(null);
@@ -2070,6 +2073,38 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
       });
     };
 
+    /**
+     * Board-space point for a drag message's own pointer position. Every
+     * phase carries it, so a drop never has to trust a ref that a mid-gesture
+     * re-render or an interleaved message may have cleared — losing the board
+     * point silently loses the whole drop.
+     */
+    const boardPointFromDragMessage = (
+      sourceScreenId: string,
+      iframeX: number,
+      iframeY: number,
+      viewportW: number,
+      viewportH: number,
+    ): Point | null => {
+      if (sourceScreenId === boardFileId) {
+        if (!boardSurfaceRenderGeometry) return null;
+        return boardSurfaceLocalPointToBoardPoint(
+          { x: iframeX, y: iframeY },
+          boardSurfaceRenderGeometry,
+        );
+      }
+      const sourceScreen = screensRef.current.find(
+        (s) => s.id === sourceScreenId,
+      );
+      const sourceGeometry = frameGeometryRef.current[sourceScreenId];
+      if (!sourceScreen || !sourceGeometry) return null;
+      return screenLocalPointToBoardPoint(
+        { x: iframeX, y: iframeY },
+        sourceGeometry,
+        { width: viewportW, height: viewportH },
+      );
+    };
+
     const updateCrossScreenTargetFromBoardPoint = (
       boardPoint: Point,
       sourceScreenId: string,
@@ -2134,10 +2169,17 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         selector: string;
         sourceId?: string;
         sourcePointerOffset?: Point;
+        sourceHtmlSnapshot?: string;
         styleSnapshot?: PortableStyleSnapshot;
       },
       lastBoardPoint: Point | null,
     ) => {
+      dndHostLog("overview:finalize", {
+        sourceScreenId,
+        candidate: candidate?.id ?? null,
+        lastBoardPoint,
+        selector: payload.selector,
+      });
       clearCrossScreenDrag();
       crossScreenLastBoardPointRef.current = null;
       const hasIdentifier = !!(payload.selector || payload.sourceId);
@@ -2186,6 +2228,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                     )
                   : lastBoardPoint,
               sourcePointerOffset: payload.sourcePointerOffset,
+              sourceHtmlSnapshot: payload.sourceHtmlSnapshot,
               styleSnapshot: payload.styleSnapshot,
             });
           },
@@ -2227,6 +2270,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             targetCanvasPoint: lastBoardPoint,
             targetLocalPoint: targetLocalPoint ?? undefined,
             sourcePointerOffset: payload.sourcePointerOffset,
+            sourceHtmlSnapshot: payload.sourceHtmlSnapshot,
             styleSnapshot: payload.styleSnapshot,
           });
         },
@@ -2316,6 +2360,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         clearCrossScreenDrag();
         return;
       }
+      const sourceHtmlSnapshot =
+        sourceScreenId === boardFileId
+          ? captureCrossScreenSourceHtmlSnapshot(
+              sourcePreviewIframe.contentDocument,
+              msg.sourceId,
+            )
+          : undefined;
 
       if (msg.phase !== "move") {
         dndHostLog("overview:cross-screen", {
@@ -2331,11 +2382,13 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           sourceId: msg.sourceId,
           sourcePointerOffset,
           sourceElementSize,
+          sourceHtmlSnapshot,
           styleSnapshot,
         };
         stopParentCrossScreenDrag();
         const restorePreviewPointerEvents = mutePreviewIframePointerEvents(
           surfaceRef.current,
+          sourcePreviewIframe,
         );
         let didCleanup = false;
         const cancelPendingParentDrag = () => {
@@ -2390,6 +2443,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
             sourceId: msg.sourceId,
             sourcePointerOffset,
             sourceElementSize,
+            sourceHtmlSnapshot,
             styleSnapshot,
           };
           const lastBoardPoint = crossScreenLastBoardPointRef.current;
@@ -2454,13 +2508,16 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         // path where "start" itself didn't have one yet.
         crossScreenDragMsgRef.current = {
           selector: selector ?? "",
-          sourceId,
+          sourceId: sourceId ?? crossScreenDragMsgRef.current?.sourceId,
           sourcePointerOffset:
             crossScreenDragMsgRef.current?.sourcePointerOffset ??
             sourcePointerOffset,
           sourceElementSize:
             sourceElementSize ??
             crossScreenDragMsgRef.current?.sourceElementSize,
+          sourceHtmlSnapshot:
+            sourceHtmlSnapshot ??
+            crossScreenDragMsgRef.current?.sourceHtmlSnapshot,
           styleSnapshot:
             styleSnapshot ?? crossScreenDragMsgRef.current?.styleSnapshot,
         };
@@ -2491,44 +2548,26 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         // viewport from the bridge. In overview, the iframe viewport may be the
         // frame geometry rather than the screen metadata width.
 
-        let boardX: number;
-        let boardY: number;
-
-        if (sourceScreenId === boardFileId && boardSurfaceRenderGeometry) {
-          // The board iframe is pixel-exact: 1 iframe pixel == 1 canvas unit.
-          // Its finite paint window can start anywhere within the much larger
-          // logical board, so add the render origin (not the logical board's
-          // fixed -65536 origin) to recover persisted canvas coordinates.
-          const boardPoint = boardSurfaceLocalPointToBoardPoint(
-            { x: iframeX, y: iframeY },
-            boardSurfaceRenderGeometry,
-          );
-          boardX = boardPoint.x;
-          boardY = boardPoint.y;
-        } else {
-          const sourceScreen = screensRef.current.find(
-            (s) => s.id === sourceScreenId,
-          );
-          const sourceGeometry = frameGeometryRef.current[sourceScreenId];
-          if (!sourceScreen || !sourceGeometry) {
-            clearCrossScreenDrag();
-            return;
-          }
-          const boardPoint = screenLocalPointToBoardPoint(
-            { x: iframeX, y: iframeY },
-            sourceGeometry,
-            { width: viewportW, height: viewportH },
-          );
-          boardX = boardPoint.x;
-          boardY = boardPoint.y;
+        // The board iframe is pixel-exact: 1 iframe pixel == 1 canvas unit.
+        // Its finite paint window can start anywhere within the much larger
+        // logical board, so the helper adds the render origin (not the logical
+        // board's fixed -65536 origin) to recover persisted canvas coords.
+        const boardPoint = boardPointFromDragMessage(
+          sourceScreenId,
+          iframeX,
+          iframeY,
+          viewportW,
+          viewportH,
+        );
+        if (!boardPoint) {
+          clearCrossScreenDrag();
+          return;
         }
-        const boardPoint = { x: boardX, y: boardY };
         updateCrossScreenTargetFromBoardPoint(boardPoint, sourceScreenId);
         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
@@ -2538,9 +2577,31 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           sourceId: msg.sourceId,
           sourcePointerOffset,
           sourceElementSize,
+          sourceHtmlSnapshot,
           styleSnapshot,
         };
-        const lastBoardPoint = crossScreenLastBoardPointRef.current;
+        // Derive the release point from THIS message before falling back to
+        // the refs the "move" phase maintained. The refs are cleared by any
+        // cancel/blur/re-render that lands between the last move and the
+        // release, and a drop that reads them empty returns silently — the
+        // whole gesture vanishes with the element back on the board and no
+        // error anywhere. The end message always describes its own pointer.
+        const lastBoardPoint =
+          boardPointFromDragMessage(
+            sourceScreenId,
+            msg.iframeX ?? 0,
+            msg.iframeY ?? 0,
+            msg.viewportW ?? 0,
+            msg.viewportH ?? 0,
+          ) ?? crossScreenLastBoardPointRef.current;
+        const targetAtRelease = lastBoardPoint
+          ? getFrameEntryAtPoint(lastBoardPoint)
+          : null;
+        const candidate =
+          crossScreenTargetRef.current ??
+          (targetAtRelease && targetAtRelease.id !== sourceScreenId
+            ? { id: targetAtRelease.id, geometry: targetAtRelease.geometry }
+            : null);
         finalizeCrossScreenDrop(
           sourceScreenId,
           candidate,
@@ -2552,7 +2613,6 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
 
     window.addEventListener("message", handleMessage);
     return () => {
-      stopParentCrossScreenDrag();
       window.removeEventListener("message", handleMessage);
     };
   }, [
@@ -2566,6 +2626,21 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     onCrossScreenElementDrop,
   ]);
 
+  // Unmount only — deliberately NOT part of the message effect's cleanup
+  // above. That effect re-subscribes whenever its deps change, which happens
+  // several times during a single drag, and running the parent-drag teardown
+  // there restores the preview iframes' pointer-events mid-gesture. The
+  // pointer then falls into a live cross-origin screen iframe, the source
+  // bridge stops receiving the drag, and the gesture dies with nothing
+  // dropped and no error.
+  useEffect(
+    () => () => {
+      crossScreenParentDragCleanupRef.current?.();
+      crossScreenParentDragCleanupRef.current = null;
+    },
+    [],
+  );
+
   const deleteSelectedItems = useCallback(() => {
     if (readOnly) return false;
     const frameIds = selectedIdsRef.current.filter(
@@ -7568,9 +7643,17 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
     ? canvasFrames.find((entry) => entry.screen.id === singleSelectedFrame.id)
         ?.screen
     : undefined;
+  // Overview element selection (a Layers-panel row or an in-canvas click
+  // resolving to a specific node) also suppresses the frame box: the parent
+  // still carries the screen in `selectedIds` (other UI — z-order, "topmost
+  // screen" — depends on that), but the frame's own bounds are the wrong
+  // outline for an element selection. See shouldSuppressFrameSelectionBox.
   const suppressBaseSelectionBox = Boolean(
     singleSelectedFrameScreen &&
-    isBreakpointSelectionTarget(singleSelectedFrameScreen),
+    shouldSuppressFrameSelectionBox(
+      singleSelectedFrameScreen,
+      selectedElementScreenId,
+    ),
   );
   const singleSelectedDraft =
     selectedDraftEntries.length === 1 && !selectedDraftGroupBounds
@@ -7816,7 +7899,6 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
               showFullView={fullViewIdSet.has(screen.id)}
               pendingReview={pendingReviewScreenIdSet.has(screen.id)}
               onReviewPendingScreen={onReviewPendingScreen}
-              interactMode={interactMode}
               isDirectlyHovered={screen.id === directlyHoveredScreenId}
               isFileDragOver={
                 fileDragOverFrameId !== null &&
@@ -9125,7 +9207,6 @@ interface ScreenProps {
   showFullView: boolean;
   pendingReview: boolean;
   onReviewPendingScreen?: (screenId: string) => void;
-  interactMode: boolean;
   readOnly: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
@@ -9197,7 +9278,6 @@ const Screen = memo(function Screen({
   showFullView,
   pendingReview,
   onReviewPendingScreen,
-  interactMode,
   readOnly,
   isDirectlyHovered,
   isFileDragOver,
@@ -9303,9 +9383,7 @@ const Screen = memo(function Screen({
   // cover one another. Narrow frames collapse the action to its familiar icon;
   // the accessible name and native tooltip preserve the action's meaning.
   const compactFullView = frameScreenWidth < FRAME_HEADER_BUTTON_COMPACT_WIDTH;
-  const frameActionLabel = interactMode
-    ? t("multiScreenCanvas.fullView")
-    : t("designEditor.modes.interact");
+  const frameActionLabel = t("designEditor.modes.interact");
   const labelInfoMaxWidth = Math.max(
     64,
     frameScreenWidth -
@@ -9473,11 +9551,7 @@ const Screen = memo(function Screen({
           onMouseEnter={() => updateDirectHover(true)}
           onMouseLeave={() => updateDirectHover(false)}
         >
-          {interactMode ? (
-            <IconArrowsMaximize className="size-3 shrink-0" />
-          ) : (
-            <IconHandClick className="size-3 shrink-0" />
-          )}
+          <IconHandClick className="size-3 shrink-0" />
           <span className={cn("truncate", compactFullView && "sr-only")}>
             {frameActionLabel}
           </span>
@@ -9714,7 +9788,6 @@ const Screen = memo(function Screen({
           renderBreakpointContent={renderBreakpointContent}
           activeBreakpointWidth={screen.activeBreakpointWidth}
           isScreenSelected={isSelected}
-          interactMode={interactMode}
           penActive={penActive}
           creationToolActive={creationToolActive}
           cullTier={cullTier}
@@ -9862,7 +9935,6 @@ function BreakpointPreviewRow({
   renderBreakpointContent,
   activeBreakpointWidth,
   isScreenSelected,
-  interactMode,
   penActive,
   creationToolActive,
   cullTier,
@@ -9906,7 +9978,6 @@ function BreakpointPreviewRow({
    *  mirrors `Screen`'s own `isSelected`, used so a breakpoint frame's chrome
    *  reads as "part of a selected group" the same way the base frame does. */
   isScreenSelected: boolean;
-  interactMode: boolean;
   penActive: boolean;
   creationToolActive: boolean;
   /** Uses the owning screen's exact culling lifecycle: never-seen/evicted
@@ -9943,9 +10014,7 @@ function BreakpointPreviewRow({
   canEdit?: boolean;
 }) {
   const t = useT();
-  const frameActionLabel = interactMode
-    ? t("multiScreenCanvas.fullView")
-    : t("designEditor.modes.interact");
+  const frameActionLabel = t("designEditor.modes.interact");
   const breakpointWidths = visibleBreakpointWidths(
     screen.breakpointWidths,
     // Immutable device width, not the resizable box width (see frame-geometry).
@@ -10264,11 +10333,7 @@ function BreakpointPreviewRow({
                     e.stopPropagation();
                   }}
                 >
-                  {interactMode ? (
-                    <IconArrowsMaximize className="size-3" />
-                  ) : (
-                    <IconHandClick className="size-3" />
-                  )}
+                  <IconHandClick className="size-3" />
                 </button>
               ) : null}
               <span
@@ -10917,12 +10982,24 @@ function isInteractiveScreenContentTarget(target: EventTarget | null) {
   );
 }
 
-function mutePreviewIframePointerEvents(root: HTMLElement | null) {
+/**
+ * `except` (the iframe a cross-screen drag STARTED in) must keep its pointer
+ * events: its bridge owns the gesture — the lift visual, the move/end posts
+ * this canvas finalizes on — and muting it hands the whole event stream to the
+ * parent mid-drag, which silently drops the drop. Every OTHER preview iframe
+ * still gets muted, which is the point: an unmuted cross-origin screen frame
+ * swallows the pointer the moment the drag crosses into it.
+ */
+function mutePreviewIframePointerEvents(
+  root: HTMLElement | null,
+  except?: HTMLIFrameElement | null,
+) {
   if (!root) return () => {};
   const previous = new Map<HTMLIFrameElement, string>();
   root
     .querySelectorAll<HTMLIFrameElement>("[data-design-preview-iframe]")
     .forEach((iframe) => {
+      if (iframe === except) return;
       previous.set(iframe, iframe.style.pointerEvents);
       iframe.style.pointerEvents = "none";
     });