@agent-native/core 0.84.38 → 0.84.39

package/corpus/templates/design/app/lib/design-import.ts

@@ -0,0 +1,42 @@
+export interface ImportResult {
+  designId?: string;
+  files?: Array<{ id: string; filename: string }>;
+  warnings?: string[];
+  error?: string;
+}
+
+export const VISUAL_EDIT_CONNECT_COMMAND =
+  "npx @agent-native/core@latest design connect";
+
+export function hasFigmaClipboardPayload(value: string): boolean {
+  return /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
+    value,
+  );
+}
+
+export function looksLikeStandaloneHtml(value: string): boolean {
+  return /<(html|body|main|section|div|article|header|footer|button|img)\b/i.test(
+    value,
+  );
+}
+
+export function getFigmaClipboardContent(
+  clipboardData: Pick<DataTransfer, "getData"> | null | undefined,
+): string | null {
+  if (!clipboardData) return null;
+  const html = clipboardData.getData("text/html");
+  if (html && hasFigmaClipboardPayload(html)) return html;
+  const text = clipboardData.getData("text/plain");
+  if (text && hasFigmaClipboardPayload(text)) return text;
+  return null;
+}
+
+export function importResultSummary(
+  result: ImportResult | undefined,
+  fallback: string,
+) {
+  const count = result?.files?.length ?? 0;
+  if (count === 0) return fallback;
+  if (count === 1) return `Imported ${result!.files![0]!.filename}.`;
+  return `Imported ${count} screens.`;
+}

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -129,6 +129,8 @@ import {
   useCallback,
   useRef,
   useMemo,
+  lazy,
+  Suspense,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
   type SetStateAction,
@@ -150,10 +152,7 @@ import {
   CanvasContextMenu,
   type CanvasContextMenuHandle,
 } from "@/components/design/CanvasContextMenu";
-import {
-  CodeWorkbenchHost,
-  type CodeWorkbenchActiveFile,
-} from "@/components/design/CodeWorkbenchHost";
+import { type CodeWorkbenchActiveFile } from "@/components/design/CodeWorkbenchHost";
 import {
   DesignCanvas,
   type IframeContextMenuPayload,
@@ -273,6 +272,11 @@ import {
   DESIGN_CHAT_STORAGE_KEY,
   sendToDesignAgentChat,
 } from "@/lib/agent-chat";
+import {
+  getFigmaClipboardContent,
+  importResultSummary,
+  type ImportResult,
+} from "@/lib/design-import";
 import {
   clearPendingGeneration,
   hasFreshPendingGeneration,
@@ -3526,6 +3530,12 @@ type DesignLeftPanel =
   | "import"
   | "code";
 
+const CodeWorkbenchHost = lazy(() =>
+  import("@/components/design/CodeWorkbenchHost").then((module) => ({
+    default: module.CodeWorkbenchHost,
+  })),
+);
+
 const INITIAL_GENERATION_DISABLED_LEFT_PANELS = new Set<DesignLeftPanel>([
   "file",
   "assets",
@@ -3570,6 +3580,7 @@ function DesignWorkspaceRail({
     panel: DesignLeftPanel;
     label: string;
     icon: ReactNode;
+    separatorBefore?: boolean;
   }> = [
     {
       panel: "file",
@@ -3601,12 +3612,13 @@ function DesignWorkspaceRail({
       label: t("designEditor.leftRail.tokens"),
       icon: <IconAssembly className="size-[15px]" />,
     },
+    {
+      panel: "code",
+      label: "Code" /* i18n-ignore */,
+      icon: <IconCode className="size-[15px]" />,
+      separatorBefore: true,
+    },
   ];
-  const codeItem = {
-    panel: "code" as const,
-    label: "Code" /* i18n-ignore */,
-    icon: <IconCode className="size-[15px]" />,
-  };
 
   return (
     <nav
@@ -3622,94 +3634,54 @@ function DesignWorkspaceRail({
           const active = item.panel === activePanel;
           const disabled = disabledPanels?.has(item.panel) ?? false;
           return (
-            <Tooltip key={item.panel}>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  aria-label={item.label}
-                  aria-disabled={disabled || undefined}
-                  aria-current={active ? "page" : undefined}
-                  tabIndex={disabled ? -1 : undefined}
-                  onClick={(event) => {
-                    if (disabled) {
-                      event.preventDefault();
-                      return;
-                    }
-                    onPanelChange(item.panel);
-                  }}
-                  className={cn(
-                    "group flex w-12 cursor-pointer flex-col items-center justify-start gap-1 rounded-none text-[10px] font-[450] leading-none text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
-                    disabled &&
-                      "cursor-default opacity-35 hover:text-muted-foreground",
-                    active && "text-foreground",
-                  )}
-                >
-                  <span
+            <div key={item.panel} className="flex w-full flex-col items-center">
+              {item.separatorBefore ? (
+                <div className="-mt-1 mb-3 h-px w-8 bg-border/70" />
+              ) : null}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label={item.label}
+                    aria-disabled={disabled || undefined}
+                    aria-current={active ? "page" : undefined}
+                    tabIndex={disabled ? -1 : undefined}
+                    onClick={(event) => {
+                      if (disabled) {
+                        event.preventDefault();
+                        return;
+                      }
+                      onPanelChange(item.panel);
+                    }}
                     className={cn(
-                      "flex size-8 items-center justify-center rounded-lg transition-colors",
-                      active
-                        ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)]"
-                        : "text-muted-foreground group-hover:bg-[var(--design-editor-layer-hover-color)] group-hover:text-foreground",
+                      "group flex w-12 cursor-pointer flex-col items-center justify-start gap-1 rounded-none text-[10px] font-[450] leading-none text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
                       disabled &&
-                        "group-hover:bg-transparent group-hover:text-muted-foreground",
+                        "cursor-default opacity-35 hover:text-muted-foreground",
+                      active && "text-foreground",
                     )}
                   >
-                    {item.icon}
-                  </span>
-                  <span className="max-w-full truncate leading-none">
-                    {item.label}
-                  </span>
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">{item.label}</TooltipContent>
-            </Tooltip>
+                    <span
+                      className={cn(
+                        "flex size-8 items-center justify-center rounded-lg transition-colors",
+                        active
+                          ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)]"
+                          : "text-muted-foreground group-hover:bg-[var(--design-editor-layer-hover-color)] group-hover:text-foreground",
+                        disabled &&
+                          "group-hover:bg-transparent group-hover:text-muted-foreground",
+                      )}
+                    >
+                      {item.icon}
+                    </span>
+                    <span className="max-w-full truncate leading-none">
+                      {item.label}
+                    </span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right">{item.label}</TooltipContent>
+              </Tooltip>
+            </div>
           );
         })}
-        <div className="mt-auto flex w-full flex-col items-center border-t border-border/70 pt-3">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                aria-label={codeItem.label}
-                aria-disabled={disabledPanels?.has(codeItem.panel) || undefined}
-                aria-current={
-                  activePanel === codeItem.panel ? "page" : undefined
-                }
-                tabIndex={disabledPanels?.has(codeItem.panel) ? -1 : undefined}
-                onClick={(event) => {
-                  if (disabledPanels?.has(codeItem.panel)) {
-                    event.preventDefault();
-                    return;
-                  }
-                  onPanelChange(codeItem.panel);
-                }}
-                className={cn(
-                  "group flex w-12 cursor-pointer flex-col items-center justify-start gap-1 rounded-none text-[10px] font-[450] leading-none text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
-                  disabledPanels?.has(codeItem.panel) &&
-                    "cursor-default opacity-35 hover:text-muted-foreground",
-                  activePanel === codeItem.panel && "text-foreground",
-                )}
-              >
-                <span
-                  className={cn(
-                    "flex size-8 items-center justify-center rounded-lg transition-colors",
-                    activePanel === codeItem.panel
-                      ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)]"
-                      : "text-muted-foreground group-hover:bg-[var(--design-editor-layer-hover-color)] group-hover:text-foreground",
-                    disabledPanels?.has(codeItem.panel) &&
-                      "group-hover:bg-transparent group-hover:text-muted-foreground",
-                  )}
-                >
-                  {codeItem.icon}
-                </span>
-                <span className="max-w-full truncate leading-none">
-                  {codeItem.label}
-                </span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">{codeItem.label}</TooltipContent>
-          </Tooltip>
-        </div>
       </div>
       {onMotionToggle ? (
         <div className="mt-4 flex w-full flex-col items-center border-t border-border/70 pt-3">
@@ -11241,6 +11213,82 @@ export default function DesignEditor() {
     ],
   );
 
+  const importFigmaClipboardIntoDesign = useCallback(
+    async (content: string) => {
+      if (!id) return;
+      if (!canEditDesign) {
+        toast.error("Import requires editor access" /* i18n-ignore */);
+        return;
+      }
+      try {
+        const result = (await callAction("import-design-source", {
+          designId: id,
+          sourceType: "figma-paste-html",
+          content,
+          originalName: "figma-paste.html",
+        })) as ImportResult;
+        if (result?.error) throw new Error(result.error);
+        await Promise.all([
+          queryClient.invalidateQueries({ queryKey: ["action", "get-design"] }),
+          queryClient.invalidateQueries({ queryKey: ["action"] }),
+        ]);
+        toast.success(
+          importResultSummary(result, t("designEditor.import.figmaSuccess")),
+        );
+        if (result?.warnings?.length) {
+          toast.warning(t("designEditor.import.warningsToast"), {
+            description: result.warnings[0],
+          });
+        }
+        navigate(`/design/${result?.designId ?? id}?view=overview`);
+      } catch (error) {
+        toast.error(t("designEditor.import.errors.figmaPasteFailed"), {
+          description:
+            error instanceof Error ? error.message : t("common.genericError"),
+        });
+      }
+    },
+    [canEditDesign, id, navigate, queryClient, t],
+  );
+
+  const handleCanvasFigmaClipboardPaste = useCallback(
+    ({ content }: { content: string }) => {
+      void importFigmaClipboardIntoDesign(content);
+    },
+    [importFigmaClipboardIntoDesign],
+  );
+
+  const handleEditorPaste = useCallback(
+    (event: ClipboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (isDesignHotkeyEditableTarget(event.target)) return;
+      const figmaContent = getFigmaClipboardContent(event.clipboardData);
+      if (figmaContent) {
+        event.preventDefault();
+        void importFigmaClipboardIntoDesign(figmaContent);
+        return;
+      }
+      if (canEditDesign && hasCanvasClipboard) {
+        event.preventDefault();
+        handlePasteSelection();
+      }
+    },
+    [
+      canEditDesign,
+      handlePasteSelection,
+      hasCanvasClipboard,
+      importFigmaClipboardIntoDesign,
+    ],
+  );
+
+  useEffect(() => {
+    if (embedded || (pendingQuestions && pendingQuestions.length > 0)) return;
+    document.addEventListener("paste", handleEditorPaste, true);
+    return () => {
+      document.removeEventListener("paste", handleEditorPaste, true);
+    };
+  }, [embedded, handleEditorPaste, pendingQuestions]);
+
   const handlePasteOverSelection = useCallback(() => {
     const entries = getCanvasClipboardEntries();
     if (!activeFile || entries.length === 0) return;
@@ -13108,8 +13156,21 @@ export default function DesignEditor() {
     setOverviewSelectAllRequest((request) => request + 1);
   }, [files]);
 
+  const shouldHandleEditorHotkey = useCallback((event: KeyboardEvent) => {
+    const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+    const primary = event.metaKey || event.ctrlKey;
+    const plainPasteHotkey =
+      primary && key === "v" && !event.altKey && !event.shiftKey;
+    if (!plainPasteHotkey) return true;
+    return (
+      (event as KeyboardEvent & { __agentNativeIframeHotkey?: boolean })
+        .__agentNativeIframeHotkey === true
+    );
+  }, []);
+
   useDesignHotkeys({
     enabled: !embedded && !(pendingQuestions && pendingQuestions.length > 0),
+    shouldHandleEvent: shouldHandleEditorHotkey,
     onMoveTool: canEditDesign ? handleMoveTool : undefined,
     onFrameTool: canEditDesign ? handleFrameTool : undefined,
     onRectangleTool: canEditDesign ? handleRectTool : undefined,
@@ -13119,7 +13180,10 @@ export default function DesignEditor() {
     onCommentTool: canEditDesign ? handlePinToolToggle : undefined,
     onScaleTool: canEditDesign ? handleScaleTool : undefined,
     onCopy: handleCopySelection,
-    onPaste: canEditDesign ? () => handlePasteSelection() : undefined,
+    onPaste:
+      canEditDesign && hasCanvasClipboard
+        ? () => handlePasteSelection()
+        : undefined,
     onCut: canEditDesign ? handleCutSelection : undefined,
     onPasteOver: canEditDesign ? handlePasteOverSelection : undefined,
     onCopyProps: canEditDesign ? handleCopyProps : undefined,
@@ -16957,24 +17021,24 @@ ${serializedHtml}
                   activeLeftPanel === "code" ? "flex" : "hidden",
                 )}
               >
-                {id ? (
-                  <CodeWorkbenchHost
-                    designId={id}
-                    activeFileId={
-                      activeLeftPanel === "code"
-                        ? routeCodeFileId
-                        : (activeFile?.id ?? activeFileId)
-                    }
-                    activeFilename={
-                      activeLeftPanel === "code"
-                        ? routeCodeFilename
-                        : activeFile?.filename
+                {id && activeLeftPanel === "code" ? (
+                  <Suspense
+                    fallback={
+                      <div className="flex min-h-0 flex-1 items-center justify-center bg-[var(--design-editor-panel-bg)] text-muted-foreground">
+                        <Spinner className="size-4" />
+                      </div>
                     }
-                    selectedNodeId={selectedElementLayerId}
-                    selectedSelector={selectedCanvasSelector}
-                    canEdit={canEditDesign}
-                    onActiveFileChange={setActiveCodeFile}
-                  />
+                  >
+                    <CodeWorkbenchHost
+                      designId={id}
+                      activeFileId={routeCodeFileId}
+                      activeFilename={routeCodeFilename}
+                      selectedNodeId={selectedElementLayerId}
+                      selectedSelector={selectedCanvasSelector}
+                      canEdit={canEditDesign}
+                      onActiveFileChange={setActiveCodeFile}
+                    />
+                  </Suspense>
                 ) : null}
               </div>
             </div>
@@ -17299,6 +17363,9 @@ ${serializedHtml}
                           : undefined
                       }
                       onBoardIframeHotkey={handleIframeHotkey}
+                      onBoardFigmaClipboardPaste={
+                        handleCanvasFigmaClipboardPaste
+                      }
                       onBoardIframeContextMenu={handleIframeContextMenu}
                       onBoardTextEditingStateChange={setTextEditingState}
                       onBoardElementDblClickText={
@@ -17572,6 +17639,9 @@ ${serializedHtml}
                               handleScreenElementClear(screen.id)
                             }
                             onIframeHotkey={handleIframeHotkey}
+                            onFigmaClipboardPaste={
+                              handleCanvasFigmaClipboardPaste
+                            }
                             onIframeContextMenu={handleIframeContextMenu}
                             onVisualStyleChange={(selector, styles, info) =>
                               handleScreenVisualStyleChange(
@@ -17696,6 +17766,7 @@ ${serializedHtml}
                           setSelectedLayerIdsState([]);
                         }}
                         onIframeHotkey={handleIframeHotkey}
+                        onFigmaClipboardPaste={handleCanvasFigmaClipboardPaste}
                         onIframeContextMenu={handleIframeContextMenu}
                         onVisualStyleChange={handleVisualStyleChange}
                         onVisualStructureChange={handleVisualStructureChange}

package/corpus/templates/design/changelog/2026-07-01-code-workspace-now-opens-a-vs-code-like-editor-with-real-cod.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Code workspace now opens a VS Code-like editor with real code editing affordances

package/corpus/templates/design/changelog/2026-07-01-import-is-more-compact-local-app-setup-is-clearer-and-figma.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-01
+---
+
+Import is more compact, Local app setup is clearer, and Figma selections can be pasted from the canvas.

package/corpus/templates/design/package.json

@@ -31,6 +31,7 @@
     "jspdf": "^4.2.1",
     "jszip": "^3.10.1",
     "kiwi-schema": "^0.5.0",
+    "monaco-editor": "^0.55.1",
     "nanoid": "^5.1.9",
     "pako": "^3.0.0",
     "pdf-parse": "^2.4.5",

package/dist/observability/routes.d.ts

@@ -42,22 +42,22 @@ export declare function createObservabilityHandler(): import("h3").EventHandlerW
     avgEvalScore: number;
 } | {
     error?: undefined;
+    ok?: undefined;
     summary: import("./types.js").TraceSummary;
     spans: import("./types.js").TraceSpan[];
     id?: undefined;
-    ok?: undefined;
 } | {
     error?: undefined;
+    ok?: undefined;
     summary?: undefined;
     spans?: undefined;
     id: string;
-    ok?: undefined;
 } | {
+    ok?: undefined;
     summary?: undefined;
     spans?: undefined;
     id?: undefined;
     error: any;
-    ok?: undefined;
 } | {
     error?: undefined;
     summary?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.84.38",
+  "version": "0.84.39",
   "description": "Framework for agent-native application development — where AI agents and UI share SQL state, actions, and context",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {