@agent-native/core 0.82.0 → 0.83.0

package/corpus/templates/content/shared/nfm-registry.ts

@@ -36,6 +36,7 @@ import {
 
 import { builderDocsBlockConfigs } from "./builder-docs-blocks";
 import { inlineDatabaseBlockConfig } from "./inline-database-block";
+import { sourceComponentBlockConfig } from "./source-component-block";
 
 /**
  * Register the content block library (the dev-doc + OpenAPI + standard
@@ -62,6 +63,7 @@ export function registerContentBlocks(registry: BlockRegistry): void {
   for (const block of builderDocsBlockConfigs) {
     registry.register(block);
   }
+  registry.register(sourceComponentBlockConfig);
   registry.register(inlineDatabaseBlockConfig);
 }
 

package/corpus/templates/content/shared/source-component-block.ts

@@ -0,0 +1,141 @@
+import {
+  defineBlock,
+  type BlockMdxConfig,
+  type BlockSpec,
+} from "@agent-native/core/blocks/server";
+import { z } from "zod";
+
+export interface SourceComponentData {
+  provider: string;
+  componentName: string;
+  rawRef: string;
+  rawHash: string;
+  sourceLabel?: string;
+  previewStatus?: "available" | "unavailable" | "warning";
+  previewKind?: "summary" | "table" | "embed" | "symbol" | "component";
+  previewUrl?: string;
+  previewItems?: string[];
+  preview?: SourceComponentPreview;
+  title?: string;
+  summary?: string;
+}
+
+export interface SourceComponentPreview {
+  status: "available" | "unavailable" | "warning";
+  kind: "summary" | "table" | "embed" | "symbol" | "component";
+  label: string;
+  summary?: string;
+  fields?: SourceComponentPreviewField[];
+  table?: SourceComponentPreviewTable;
+  url?: string;
+}
+
+export interface SourceComponentPreviewField {
+  label: string;
+  value: string;
+}
+
+export interface SourceComponentPreviewTable {
+  columns: SourceComponentPreviewTableColumn[];
+  rows: Record<string, string>[];
+  truncated?: boolean;
+}
+
+export interface SourceComponentPreviewTableColumn {
+  id: string;
+  label: string;
+}
+
+const sourceComponentPreviewFieldSchema = z.object({
+  label: z.string().trim().min(1).max(80),
+  value: z.string().trim().max(200),
+});
+
+const sourceComponentPreviewTableColumnSchema = z.object({
+  id: z.string().trim().min(1).max(80),
+  label: z.string().trim().min(1).max(120),
+});
+
+const sourceComponentPreviewTableSchema = z.object({
+  columns: z.array(sourceComponentPreviewTableColumnSchema).max(12),
+  rows: z.array(z.record(z.string(), z.string().max(500))).max(6),
+  truncated: z.boolean().optional(),
+});
+
+const sourceComponentPreviewSchema = z.object({
+  status: z.enum(["available", "unavailable", "warning"]),
+  kind: z.enum(["summary", "table", "embed", "symbol", "component"]),
+  label: z.string().trim().min(1).max(160),
+  summary: z.string().trim().max(500).optional(),
+  fields: z.array(sourceComponentPreviewFieldSchema).max(8).optional(),
+  table: sourceComponentPreviewTableSchema.optional(),
+  url: z.string().trim().max(2_000).optional(),
+}) satisfies z.ZodType<SourceComponentPreview>;
+
+export const sourceComponentSchema = z.object({
+  provider: z.string().trim().min(1).max(80),
+  componentName: z.string().trim().min(1).max(160),
+  rawRef: z.string().trim().min(1),
+  rawHash: z.string().trim().min(1),
+  sourceLabel: z.string().trim().max(200).optional(),
+  previewStatus: z.enum(["available", "unavailable", "warning"]).optional(),
+  previewKind: z
+    .enum(["summary", "table", "embed", "symbol", "component"])
+    .optional(),
+  previewUrl: z.string().trim().max(2_000).optional(),
+  previewItems: z.array(z.string().trim().max(160)).max(8).optional(),
+  preview: sourceComponentPreviewSchema.optional(),
+  title: z.string().trim().max(200).optional(),
+  summary: z.string().trim().max(500).optional(),
+}) as unknown as z.ZodType<SourceComponentData>;
+
+export const sourceComponentMdx: BlockMdxConfig<SourceComponentData> = {
+  tag: "SourceComponent",
+  toAttrs: (data) => ({
+    provider: data.provider,
+    componentName: data.componentName,
+    rawRef: data.rawRef,
+    rawHash: data.rawHash,
+    sourceLabel: data.sourceLabel,
+    previewStatus: data.previewStatus,
+    previewKind: data.previewKind,
+    previewUrl: data.previewUrl,
+    previewItems: data.previewItems,
+    preview: data.preview as Record<string, unknown> | undefined,
+    previewTitle: data.title,
+    summary: data.summary,
+  }),
+  fromAttrs: (attrs) => ({
+    provider: attrs.string("provider") ?? "",
+    componentName: attrs.string("componentName") ?? "",
+    rawRef: attrs.string("rawRef") ?? "",
+    rawHash: attrs.string("rawHash") ?? "",
+    sourceLabel: attrs.string("sourceLabel"),
+    previewStatus: attrs.string("previewStatus") as
+      | SourceComponentData["previewStatus"]
+      | undefined,
+    previewKind: attrs.string("previewKind") as
+      | SourceComponentData["previewKind"]
+      | undefined,
+    previewUrl: attrs.string("previewUrl"),
+    previewItems: attrs.array<string>("previewItems"),
+    preview: attrs.object<SourceComponentPreview>("preview"),
+    title: attrs.string("previewTitle") ?? attrs.string("title"),
+    summary: attrs.string("summary"),
+  }),
+};
+
+const ServerReadStub = () => null;
+
+export const sourceComponentBlockConfig: BlockSpec<SourceComponentData> =
+  defineBlock<SourceComponentData>({
+    type: "source-component",
+    schema: sourceComponentSchema,
+    mdx: sourceComponentMdx,
+    Read: ServerReadStub,
+    placement: ["block"],
+    editSurface: "none",
+    label: "Source component",
+    description:
+      "A read-only source-native component marker that preserves provider-specific body blocks for round-trip sync.",
+  });

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

@@ -596,7 +596,11 @@ export function DesignCanvas({
         )
           .replace("__TEXT_EDITING_ENABLED__", editMode ? "true" : "false")
           .replace("__EDITOR_CHROME_SCALE_X__", String(editorChromeScaleX))
-          .replace("__EDITOR_CHROME_SCALE_Y__", String(editorChromeScaleY));
+          .replace("__EDITOR_CHROME_SCALE_Y__", String(editorChromeScaleY))
+          .replace(
+            "__DESIGN_CANVAS_SCREEN_ID__",
+            JSON.stringify(screenId ?? contentKey ?? ""),
+          );
     const embeddedWheelBridge = EMBEDDED_WHEEL_BRIDGE_SCRIPT.replace(
       "__EMBEDDED_WHEEL_FORWARDING_ENABLED__",
       isEmbeddedFrame ? "true" : "false",

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

@@ -749,6 +749,7 @@ export function MultiScreenCanvas({
     selector: string;
     sourceId?: string;
   } | null>(null);
+  const crossScreenParentDragCleanupRef = useRef<(() => void) | null>(null);
   /** Board-space point from the last cross-screen-drag "move" message. */
   const crossScreenLastBoardPointRef = useRef<{ x: number; y: number } | null>(
     null,
@@ -1144,20 +1145,132 @@ export function MultiScreenCanvas({
   useEffect(() => {
     if (!onCrossScreenElementDrop) return;
 
+    const stopParentCrossScreenDrag = () => {
+      crossScreenParentDragCleanupRef.current?.();
+      crossScreenParentDragCleanupRef.current = null;
+    };
+
     const clearCrossScreenDrag = () => {
+      stopParentCrossScreenDrag();
       setCrossScreenGhost(null);
       setCrossScreenTarget(null);
       crossScreenTargetRef.current = null;
       crossScreenDragMsgRef.current = null;
     };
 
+    const updateCrossScreenTargetFromBoardPoint = (
+      boardPoint: Point,
+      sourceScreenId: string,
+    ) => {
+      crossScreenLastBoardPointRef.current = boardPoint;
+      setCrossScreenGhost({ boardX: boardPoint.x, boardY: boardPoint.y });
+      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);
+      }
+    };
+
+    const finalizeCrossScreenDrop = (
+      sourceScreenId: string,
+      candidate: CrossScreenDragTarget | null,
+      payload: { selector: string; sourceId?: string },
+      lastBoardPoint: Point | null,
+    ) => {
+      clearCrossScreenDrag();
+      crossScreenLastBoardPointRef.current = null;
+      const hasIdentifier = !!(payload.selector || payload.sourceId);
+      if (!candidate || !hasIdentifier || !sourceScreenId) return;
+
+      const runHitTest = (): Promise<{
+        anchorNodeId?: string;
+        placement?: "before" | "after" | "inside";
+      }> => {
+        if (!lastBoardPoint) return Promise.resolve({});
+        const targetScreen = screensRef.current.find(
+          (s) => s.id === candidate.id,
+        );
+        if (!targetScreen) return Promise.resolve({});
+        const targetGeometry = candidate.geometry;
+        const targetIframe =
+          surfaceRef.current?.querySelector<HTMLIFrameElement>(
+            `[data-screen-iframe-id="${CSS.escape(candidate.id)}"]`,
+          );
+        const targetContentWindow = targetIframe?.contentWindow;
+        if (!targetContentWindow) return Promise.resolve({});
+        const targetViewportWidth =
+          targetIframe.clientWidth || getResolvedMetadata(targetScreen).width;
+        const targetViewportHeight =
+          targetIframe.clientHeight || getResolvedMetadata(targetScreen).height;
+        const scaleX = targetViewportWidth / Math.max(1, targetGeometry.width);
+        const scaleY =
+          targetViewportHeight / Math.max(1, targetGeometry.height);
+        const localX = (lastBoardPoint.x - targetGeometry.x) * scaleX;
+        const localY = (lastBoardPoint.y - targetGeometry.y) * scaleY;
+
+        const correlationId = `hit-${Date.now()}-${Math.random()
+          .toString(36)
+          .slice(2, 6)}`;
+
+        return new Promise((resolve) => {
+          const timer = window.setTimeout(() => {
+            window.removeEventListener("message", hitListener);
+            resolve({});
+          }, 50);
+
+          const hitListener = (ev: MessageEvent) => {
+            if (
+              !ev.data ||
+              ev.data.type !== "agent-native:hit-test-result" ||
+              ev.data.correlationId !== correlationId
+            ) {
+              return;
+            }
+            window.clearTimeout(timer);
+            window.removeEventListener("message", hitListener);
+            resolve({
+              anchorNodeId: ev.data.anchorNodeId ?? undefined,
+              placement: ev.data.placement ?? undefined,
+            });
+          };
+          window.addEventListener("message", hitListener);
+
+          targetContentWindow.postMessage(
+            {
+              type: "agent-native:hit-test",
+              correlationId,
+              x: localX,
+              y: localY,
+            },
+            "*",
+          );
+        });
+      };
+
+      void runHitTest().then(({ anchorNodeId, placement }) => {
+        onCrossScreenElementDropRef.current?.({
+          sourceSelector: payload.selector,
+          sourceNodeId: payload.sourceId,
+          sourceScreenId,
+          targetScreenId: candidate.id,
+          targetAnchorNodeId: anchorNodeId,
+          targetAnchorPlacement: placement,
+        });
+      });
+    };
+
     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";
+        phase: "start" | "move" | "end" | "cancel";
+        screenId?: string;
         selector?: string;
         sourceId?: string;
         iframeX?: number;
@@ -1171,9 +1284,13 @@ export function MultiScreenCanvas({
         return;
       }
 
-      // The drag originates from the active screen (only the active screen has
-      // a live interactive iframe posting these messages).
-      const sourceScreenId = activeId;
+      // Prefer the iframe-supplied source id. In overview, activeId can point
+      // at a different screen than the layer currently being dragged.
+      const sourceScreenId =
+        msg.screenId &&
+        (msg.screenId === boardFileId || frameGeometryRef.current[msg.screenId])
+          ? msg.screenId
+          : 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
@@ -1183,6 +1300,62 @@ export function MultiScreenCanvas({
         return;
       }
 
+      if (msg.phase === "start") {
+        crossScreenDragMsgRef.current = {
+          selector: msg.selector ?? "",
+          sourceId: msg.sourceId,
+        };
+        stopParentCrossScreenDrag();
+        const restorePreviewPointerEvents = mutePreviewIframePointerEvents(
+          surfaceRef.current,
+        );
+        let didCleanup = false;
+        const activateParentDrag = (ev: MouseEvent) => {
+          ev.preventDefault();
+          updateCrossScreenTargetFromBoardPoint(
+            getCanvasPoint(ev.clientX, ev.clientY),
+            sourceScreenId,
+          );
+        };
+        const handleParentMouseMove = (ev: MouseEvent) => {
+          activateParentDrag(ev);
+        };
+        const handleParentMouseUp = (ev: MouseEvent) => {
+          activateParentDrag(ev);
+          const candidate = crossScreenTargetRef.current;
+          const payload = crossScreenDragMsgRef.current ?? {
+            selector: msg.selector ?? "",
+            sourceId: msg.sourceId,
+          };
+          const lastBoardPoint = crossScreenLastBoardPointRef.current;
+          finalizeCrossScreenDrop(
+            sourceScreenId,
+            candidate,
+            payload,
+            lastBoardPoint,
+          );
+        };
+        const handleParentWindowBlur = () => {
+          clearCrossScreenDrag();
+        };
+        const cleanup = () => {
+          if (didCleanup) return;
+          didCleanup = true;
+          window.removeEventListener("mousemove", handleParentMouseMove, true);
+          window.removeEventListener("mouseup", handleParentMouseUp, true);
+          window.removeEventListener("blur", handleParentWindowBlur, true);
+          restorePreviewPointerEvents();
+          if (crossScreenParentDragCleanupRef.current === cleanup) {
+            crossScreenParentDragCleanupRef.current = null;
+          }
+        };
+        crossScreenParentDragCleanupRef.current = cleanup;
+        window.addEventListener("mousemove", handleParentMouseMove, true);
+        window.addEventListener("mouseup", handleParentMouseUp, true);
+        window.addEventListener("blur", handleParentWindowBlur, true);
+        return;
+      }
+
       if (msg.phase === "move") {
         const { iframeX, iframeY, viewportW, viewportH, selector, sourceId } =
           msg;
@@ -1208,14 +1381,16 @@ export function MultiScreenCanvas({
           iframeX <= viewportW &&
           iframeY <= viewportH
         ) {
-          clearCrossScreenDrag();
+          setCrossScreenGhost(null);
+          setCrossScreenTarget(null);
+          crossScreenTargetRef.current = null;
+          crossScreenLastBoardPointRef.current = null;
           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)
+        // Translate iframe coords → board coords using the live embedded
+        // 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;
@@ -1234,31 +1409,13 @@ export function MultiScreenCanvas({
             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 scaleX = sourceGeometry.width / Math.max(1, viewportW);
+          const scaleY = sourceGeometry.height / Math.max(1, viewportH);
           boardX = sourceGeometry.x + iframeX * scaleX;
           boardY = sourceGeometry.y + iframeY * scaleY;
         }
         const boardPoint = { x: boardX, y: boardY };
-
-        // Remember the latest board-space position for use in the "end" handler.
-        crossScreenLastBoardPointRef.current = boardPoint;
-
-        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);
-        }
+        updateCrossScreenTargetFromBoardPoint(boardPoint, sourceScreenId);
         return;
       }
 
@@ -1273,97 +1430,18 @@ export function MultiScreenCanvas({
           sourceId: msg.sourceId,
         };
         const lastBoardPoint = crossScreenLastBoardPointRef.current;
-        clearCrossScreenDrag();
-        crossScreenLastBoardPointRef.current = null;
-        // 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) {
-          // Translate the board-space drop point to the target iframe's local
-          // coordinate space, then run a lightweight hit-test (postMessage +
-          // 50 ms timeout) to find the deepest container at the drop site.
-          const runHitTest = (): Promise<{
-            anchorNodeId?: string;
-            placement?: "before" | "after" | "inside";
-          }> => {
-            if (!lastBoardPoint) return Promise.resolve({});
-            const targetScreen = screensRef.current.find(
-              (s) => s.id === candidate.id,
-            );
-            if (!targetScreen) return Promise.resolve({});
-            const targetGeometry = candidate.geometry;
-            const targetMetadata = getResolvedMetadata(targetScreen);
-            // Board → target iframe local coords
-            const scaleX =
-              targetMetadata.width / Math.max(1, targetGeometry.width);
-            const scaleY =
-              targetMetadata.height / Math.max(1, targetGeometry.height);
-            const localX = (lastBoardPoint.x - targetGeometry.x) * scaleX;
-            const localY = (lastBoardPoint.y - targetGeometry.y) * scaleY;
-
-            const targetIframe =
-              surfaceRef.current?.querySelector<HTMLIFrameElement>(
-                `[data-screen-iframe-id="${CSS.escape(candidate.id)}"]`,
-              );
-            const targetContentWindow = targetIframe?.contentWindow;
-            if (!targetContentWindow) return Promise.resolve({});
-
-            const correlationId = `hit-${Date.now()}-${Math.random()
-              .toString(36)
-              .slice(2, 6)}`;
-
-            return new Promise((resolve) => {
-              const timer = window.setTimeout(() => {
-                window.removeEventListener("message", hitListener);
-                resolve({});
-              }, 50);
-
-              const hitListener = (ev: MessageEvent) => {
-                if (
-                  !ev.data ||
-                  ev.data.type !== "agent-native:hit-test-result" ||
-                  ev.data.correlationId !== correlationId
-                )
-                  return;
-                window.clearTimeout(timer);
-                window.removeEventListener("message", hitListener);
-                resolve({
-                  anchorNodeId: ev.data.anchorNodeId ?? undefined,
-                  placement: ev.data.placement ?? undefined,
-                });
-              };
-              window.addEventListener("message", hitListener);
-
-              targetContentWindow.postMessage(
-                {
-                  type: "agent-native:hit-test",
-                  correlationId,
-                  x: localX,
-                  y: localY,
-                },
-                "*",
-              );
-            });
-          };
-
-          void runHitTest().then(({ anchorNodeId, placement }) => {
-            onCrossScreenElementDropRef.current?.({
-              sourceSelector: payload.selector,
-              sourceNodeId: payload.sourceId,
-              sourceScreenId,
-              targetScreenId: candidate.id,
-              targetAnchorNodeId: anchorNodeId,
-              targetAnchorPlacement: placement,
-            });
-          });
-        }
+        finalizeCrossScreenDrop(
+          sourceScreenId,
+          candidate,
+          payload,
+          lastBoardPoint,
+        );
       }
     };
 
     window.addEventListener("message", handleMessage);
     return () => {
+      stopParentCrossScreenDrag();
       window.removeEventListener("message", handleMessage);
     };
   }, [
@@ -1371,6 +1449,7 @@ export function MultiScreenCanvas({
     boardFileId,
     boardFrameGeometry,
     getFrameEntryAtPoint,
+    getCanvasPoint,
     getResolvedMetadata,
     onCrossScreenElementDrop,
   ]);
@@ -1940,6 +2019,7 @@ export function MultiScreenCanvas({
   }, [frameGeometry, retryPersistedDraftPrimitives, screens]);
 
   const clearActivePenPath = useCallback(() => {
+    activePenPathRef.current = null;
     setActivePenPath(null);
     setPenGesturePreview(null);
     setPenPointer(null);
@@ -1965,6 +2045,25 @@ export function MultiScreenCanvas({
     [clearActivePenPath, commitDraftPrimitive, onActiveToolChange, toolProps],
   );
 
+  const undoActivePenPathSegment = useCallback(() => {
+    const path = activePenPathRef.current;
+    if (!path) return false;
+
+    const remainingNodes = path.nodes.slice(0, -1);
+    if (remainingNodes.length === 0) {
+      clearActivePenPath();
+      return true;
+    }
+
+    const nextPath: PenPath = { nodes: remainingNodes, closed: false };
+    activePenPathRef.current = nextPath;
+    setActivePenPath(nextPath);
+    setPenGesturePreview(null);
+    setPenPointer(null);
+    setPenCloseHover(false);
+    return true;
+  }, [clearActivePenPath]);
+
   const getPenAnchorPoint = useCallback(
     (
       clientX: number,
@@ -3615,15 +3714,21 @@ export function MultiScreenCanvas({
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       const path = activePenPathRef.current;
-      if (
-        !path ||
-        event.metaKey ||
-        event.ctrlKey ||
-        isEditableHotkeyTarget(event.target)
-      ) {
+      if (!path || isEditableHotkeyTarget(event.target)) {
         return;
       }
 
+      const primaryKey = event.metaKey || event.ctrlKey;
+      if (primaryKey && !event.shiftKey && event.key.toLowerCase() === "z") {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        undoActivePenPathSegment();
+        return;
+      }
+
+      if (primaryKey) return;
+
       if (event.key === "Enter") {
         event.preventDefault();
         event.stopPropagation();
@@ -3644,14 +3749,7 @@ export function MultiScreenCanvas({
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
-        const remainingNodes = path.nodes.slice(0, -1);
-        if (remainingNodes.length === 0) {
-          clearActivePenPath();
-          return;
-        }
-        setActivePenPath({ nodes: remainingNodes, closed: false });
-        setPenPointer(null);
-        setPenCloseHover(false);
+        undoActivePenPathSegment();
       }
     };
 
@@ -3659,7 +3757,7 @@ export function MultiScreenCanvas({
     return () => {
       window.removeEventListener("keydown", handleKeyDown, true);
     };
-  }, [clearActivePenPath, finishPenPath]);
+  }, [clearActivePenPath, finishPenPath, undoActivePenPathSegment]);
 
   useEffect(() => {
     const tool = normalizeCanvasTool(activeTool ?? localActiveTool);