@agent-native/core 0.84.1 → 0.84.2

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

@@ -333,6 +333,13 @@ interface DesignCanvasProps {
     contentOffsetY?: number;
   };
   boardSurface?: boolean;
+  /**
+   * Optional live document replacement channel. When paired with
+   * `runtimeReplacementKey`, this lets callers update iframe DOM through the
+   * editor bridge without changing `srcDoc` and reloading the iframe.
+   */
+  runtimeReplacementContent?: string;
+  runtimeReplacementKey?: string;
   embeddedFrameBackground?: string;
   transparentBackground?: boolean;
   editorChromeScaleX?: number;
@@ -367,6 +374,7 @@ interface DesignCanvasProps {
   onElementDblClickText?: (info: ElementInfo) => void;
   onIframeHotkey?: (event: IframeHotkeyPayload) => void;
   onIframeContextMenu?: (event: IframeContextMenuPayload) => void;
+  onEditorDragStateChange?: (active: boolean) => void;
   onVisualStructureChange?: (
     selector: string,
     anchorSelector: string,
@@ -376,6 +384,9 @@ interface DesignCanvasProps {
       sourceId?: string;
       anchorSourceId?: string;
       requestId?: string;
+      dropMode?: "flow-insert" | "absolute-container";
+      sourceRect?: { x: number; y: number; width: number; height: number };
+      anchorRect?: { x: number; y: number; width: number; height: number };
     },
   ) => boolean | void;
   onVisualDuplicateChange?: (
@@ -571,6 +582,26 @@ function injectEmbeddedFrameStyle(content: string, style: string): string {
   return `${style}${content}`;
 }
 
+export function getEmbeddedFrameDocumentContent(args: {
+  content: string;
+  embeddedFrameBackground?: string;
+  transparentBackground?: boolean;
+  contentOffsetX?: number;
+  contentOffsetY?: number;
+}): string {
+  const frameStyle = [
+    getEmbeddedFrameBackgroundStyle({
+      embeddedFrameBackground: args.embeddedFrameBackground,
+      transparentBackground: args.transparentBackground,
+    }),
+    embeddedContentOffsetStyle(
+      args.contentOffsetX ?? 0,
+      args.contentOffsetY ?? 0,
+    ),
+  ].join("");
+  return injectEmbeddedFrameStyle(args.content, frameStyle);
+}
+
 export interface IframeHotkeyPayload {
   key: string;
   code: string;
@@ -602,6 +633,8 @@ export function DesignCanvas({
   deviceFrame,
   embeddedFrame,
   boardSurface = false,
+  runtimeReplacementContent,
+  runtimeReplacementKey,
   embeddedFrameBackground,
   transparentBackground = false,
   editorChromeScaleX = 1,
@@ -621,6 +654,7 @@ export function DesignCanvas({
   onElementDblClickText,
   onIframeHotkey,
   onIframeContextMenu,
+  onEditorDragStateChange,
   onVisualStructureChange,
   onVisualDuplicateChange,
   tweakValues,
@@ -652,6 +686,9 @@ export function DesignCanvas({
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const zoomRef = useRef(zoom);
   const previousContentKeyRef = useRef(contentKey);
+  const runtimeReplacementContentRef = useRef(runtimeReplacementContent);
+  const runtimeReplacementKeyRef = useRef(runtimeReplacementKey);
+  const lastRuntimeReplacementKeyRef = useRef(runtimeReplacementKey);
   const [renderedContent, setRenderedContent] = useState(content);
   const [annotationPins, setAnnotationPins] = useState<CanvasPin[]>([]);
   const [pinSubmitSignal, setPinSubmitSignal] = useState(0);
@@ -707,6 +744,8 @@ export function DesignCanvas({
   const waitingForEditableExternalSnapshot =
     requiresEditableExternalSnapshot && !activeExternalSnapshotHtml;
   zoomRef.current = zoom;
+  runtimeReplacementContentRef.current = runtimeReplacementContent;
+  runtimeReplacementKeyRef.current = runtimeReplacementKey;
 
   useEffect(() => {
     onExternalContentSnapshotRef.current = onExternalContentSnapshot;
@@ -819,6 +858,7 @@ export function DesignCanvas({
   useEffect(() => {
     if (previousContentKeyRef.current !== contentKey) {
       previousContentKeyRef.current = contentKey;
+      lastRuntimeReplacementKeyRef.current = runtimeReplacementKey;
       setRenderedContent(content);
     }
     // Same-screen visual edits are already applied optimistically inside the
@@ -826,7 +866,7 @@ export function DesignCanvas({
     // reloads the iframe, flashes unstyled content, and drops selection. Only a
     // content-key change (screen switch / explicit remount) should replace the
     // iframe document here; the bridge replays inspector state after that load.
-  }, [content, contentKey]);
+  }, [content, contentKey, runtimeReplacementKey]);
 
   usePinchZoom({
     containerRef: scrollContainerRef,
@@ -879,6 +919,20 @@ export function DesignCanvas({
       NAV_BRIDGE_SCRIPT +
       embeddedWheelBridge +
       editorChromeBridge;
+    const frameContent = getEmbeddedFrameDocumentContent({
+      content: iframeRenderContent,
+      embeddedFrameBackground,
+      transparentBackground,
+      contentOffsetX: embeddedFrame?.contentOffsetX ?? 0,
+      contentOffsetY: embeddedFrame?.contentOffsetY ?? 0,
+    });
+    if (frameContent.includes("</body>")) {
+      return frameContent.replace("</body>", bridgeToInject + "</body>"); // i18n-ignore generated iframe HTML injection
+    }
+    if (frameContent.includes("</html>")) {
+      return frameContent.replace("</html>", bridgeToInject + "</html>"); // i18n-ignore generated iframe HTML injection
+    }
+    // No body/html tags — wrap it
     const frameStyle = [
       getEmbeddedFrameBackgroundStyle({
         embeddedFrameBackground,
@@ -889,17 +943,6 @@ export function DesignCanvas({
         embeddedFrame?.contentOffsetY ?? 0,
       ),
     ].join("");
-    const frameContent = injectEmbeddedFrameStyle(
-      iframeRenderContent,
-      frameStyle,
-    );
-    if (frameContent.includes("</body>")) {
-      return frameContent.replace("</body>", bridgeToInject + "</body>"); // i18n-ignore generated iframe HTML injection
-    }
-    if (frameContent.includes("</html>")) {
-      return frameContent.replace("</html>", bridgeToInject + "</html>"); // i18n-ignore generated iframe HTML injection
-    }
-    // No body/html tags — wrap it
     return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${iframeRenderContent}${bridgeToInject}</body></html>`;
     // editorChromeScaleX/Y are intentionally NOT deps: they only seed the initial
     // baked chrome scale. Live zoom updates flow through the set-editor-chrome-scale
@@ -968,6 +1011,10 @@ export function DesignCanvas({
       if (e.data.type === "element-hover") {
         onElementHover(e.data.payload);
       }
+      if (e.data.type === "agent-native:editor-drag-state") {
+        onEditorDragStateChange?.(Boolean(e.data.active));
+        return;
+      }
       if (e.data.type === "visual-style-change") {
         const selector = String(e.data.selector || "");
         const styles =
@@ -1001,6 +1048,39 @@ export function DesignCanvas({
           typeof e.data.anchorSourceId === "string"
             ? e.data.anchorSourceId
             : undefined;
+        const dropMode =
+          e.data.dropMode === "flow-insert" ||
+          e.data.dropMode === "absolute-container"
+            ? e.data.dropMode
+            : undefined;
+        const sourceRect =
+          e.data.sourceRect &&
+          typeof e.data.sourceRect === "object" &&
+          Number.isFinite(e.data.sourceRect.x) &&
+          Number.isFinite(e.data.sourceRect.y) &&
+          Number.isFinite(e.data.sourceRect.width) &&
+          Number.isFinite(e.data.sourceRect.height)
+            ? {
+                x: Number(e.data.sourceRect.x),
+                y: Number(e.data.sourceRect.y),
+                width: Number(e.data.sourceRect.width),
+                height: Number(e.data.sourceRect.height),
+              }
+            : undefined;
+        const anchorRect =
+          e.data.anchorRect &&
+          typeof e.data.anchorRect === "object" &&
+          Number.isFinite(e.data.anchorRect.x) &&
+          Number.isFinite(e.data.anchorRect.y) &&
+          Number.isFinite(e.data.anchorRect.width) &&
+          Number.isFinite(e.data.anchorRect.height)
+            ? {
+                x: Number(e.data.anchorRect.x),
+                y: Number(e.data.anchorRect.y),
+                width: Number(e.data.anchorRect.width),
+                height: Number(e.data.anchorRect.height),
+              }
+            : undefined;
         if (
           (selector || sourceId) &&
           (anchorSelector || anchorSourceId) &&
@@ -1017,6 +1097,9 @@ export function DesignCanvas({
               requestId,
               sourceId,
               anchorSourceId,
+              dropMode,
+              sourceRect,
+              anchorRect,
             },
           );
           if (requestId) {
@@ -1209,6 +1292,7 @@ export function DesignCanvas({
     onElementDblClickText,
     onIframeHotkey,
     onIframeContextMenu,
+    onEditorDragStateChange,
     onVisualStructureChange,
     onVisualDuplicateChange,
     onZoomChange,
@@ -1519,6 +1603,66 @@ export function DesignCanvas({
     [],
   );
 
+  const replaceRuntimeContentInPlace = useCallback(
+    (nextContent: string) => {
+      if (externalPreviewUrl) return false;
+      return replacePreviewContent(
+        getEmbeddedFrameDocumentContent({
+          content: nextContent,
+          embeddedFrameBackground,
+          transparentBackground,
+          contentOffsetX: embeddedFrame?.contentOffsetX ?? 0,
+          contentOffsetY: embeddedFrame?.contentOffsetY ?? 0,
+        }),
+        null,
+        [],
+        { forceFullDocument: true },
+      );
+    },
+    [
+      embeddedFrame?.contentOffsetX,
+      embeddedFrame?.contentOffsetY,
+      embeddedFrameBackground,
+      externalPreviewUrl,
+      replacePreviewContent,
+      transparentBackground,
+    ],
+  );
+
+  useEffect(() => {
+    if (
+      runtimeReplacementKey === undefined ||
+      runtimeReplacementContent === undefined ||
+      lastRuntimeReplacementKeyRef.current === runtimeReplacementKey
+    ) {
+      return;
+    }
+    if (replaceRuntimeContentInPlace(runtimeReplacementContent)) {
+      lastRuntimeReplacementKeyRef.current = runtimeReplacementKey;
+    }
+  }, [
+    replaceRuntimeContentInPlace,
+    runtimeReplacementContent,
+    runtimeReplacementKey,
+  ]);
+
+  const runtimeReplacementEnabled = runtimeReplacementKey !== undefined;
+  useEffect(() => {
+    if (!runtimeReplacementEnabled) return;
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const replaceLatestRuntimeContent = () => {
+      const nextContent = runtimeReplacementContentRef.current;
+      if (nextContent === undefined) return;
+      if (replaceRuntimeContentInPlace(nextContent)) {
+        lastRuntimeReplacementKeyRef.current = runtimeReplacementKeyRef.current;
+      }
+    };
+    iframe.addEventListener("load", replaceLatestRuntimeContent);
+    return () =>
+      iframe.removeEventListener("load", replaceLatestRuntimeContent);
+  }, [replaceRuntimeContentInPlace, runtimeReplacementEnabled]);
+
   const deleteRuntimeElement = useCallback(
     (selector?: string | null, candidates?: string[]) => {
       const iframe = iframeRef.current;

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

@@ -449,15 +449,14 @@ export function MotionDock({
 
         {/* Dock toolbar */}
         <div className="flex h-8 shrink-0 items-center gap-1 border-b border-border px-2">
-          {/* Collapse toggle. The label and nearby space are part of the target. */}
+          {/* Collapse toggle. The rail owns the visible Motion label. */}
           <button
             type="button"
-            className="-ml-1 flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-1.5 !text-[11px] font-medium uppercase tracking-wide text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
+            className="-ml-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
             onClick={() => setOpen(false)}
             aria-label="Collapse motion dock"
           >
             <IconChevronDown className="size-3.5" />
-            <span>Motion</span>
           </button>
 
           <>