@agent-native/core 0.84.30 → 0.84.34

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

@@ -111,6 +111,7 @@ import {
   IconDownload,
   IconClipboard,
   IconFileExport,
+  IconFileImport,
   IconPlayerPlay,
   IconDeviceFloppy,
   IconRocket,
@@ -149,6 +150,10 @@ import {
   CanvasContextMenu,
   type CanvasContextMenuHandle,
 } from "@/components/design/CanvasContextMenu";
+import {
+  CodeWorkbenchHost,
+  type CodeWorkbenchActiveFile,
+} from "@/components/design/CodeWorkbenchHost";
 import {
   DesignCanvas,
   type IframeContextMenuPayload,
@@ -161,6 +166,7 @@ import {
   DesignExtensionsPanel,
   type DesignExtensionSlotContext,
 } from "@/components/design/DesignExtensionsPanel";
+import { DesignImportPanel } from "@/components/design/DesignImportPanel";
 import {
   EditPanel,
   type InspectCodeData,
@@ -550,18 +556,34 @@ export function getDesignEditorStateUrlSearch(args: {
   currentSearch: string;
   viewMode: "single" | "overview";
   screenId?: string | null;
+  codeFileId?: string | null;
+  codeFilename?: string | null;
   selectionId?: string | null;
+  leftPanel?: DesignLeftPanel | null;
   zoom?: number | null;
 }) {
   const params = new URLSearchParams(args.currentSearch);
   params.set("view", args.viewMode);
+  if (args.leftPanel && args.leftPanel !== "file") {
+    params.set("panel", args.leftPanel);
+  } else {
+    params.delete("panel");
+  }
   if (args.screenId) {
     params.set("screen", args.screenId);
   } else {
     params.delete("screen");
   }
-  params.delete("fileId");
-  params.delete("filename");
+  if (args.leftPanel === "code" && args.codeFileId) {
+    params.set("fileId", args.codeFileId);
+  } else {
+    params.delete("fileId");
+  }
+  if (args.leftPanel === "code" && !args.codeFileId && args.codeFilename) {
+    params.set("filename", args.codeFilename);
+  } else {
+    params.delete("filename");
+  }
   if (args.selectionId) {
     params.set("selection", args.selectionId);
   } else {
@@ -3495,13 +3517,22 @@ function AgentNativeMenuMark({ className }: { className?: string }) {
   );
 }
 
-type DesignLeftPanel = "file" | "agent" | "assets" | "tools" | "tokens";
+type DesignLeftPanel =
+  | "file"
+  | "agent"
+  | "assets"
+  | "tools"
+  | "tokens"
+  | "import"
+  | "code";
 
 const INITIAL_GENERATION_DISABLED_LEFT_PANELS = new Set<DesignLeftPanel>([
   "file",
   "assets",
   "tools",
   "tokens",
+  "import",
+  "code",
 ]);
 
 function normalizeDesignLeftPanel(value: unknown): DesignLeftPanel | undefined {
@@ -3510,7 +3541,9 @@ function normalizeDesignLeftPanel(value: unknown): DesignLeftPanel | undefined {
     value === "agent" ||
     value === "assets" ||
     value === "tools" ||
-    value === "tokens"
+    value === "tokens" ||
+    value === "import" ||
+    value === "code"
     ? value
     : undefined;
 }
@@ -3553,6 +3586,11 @@ function DesignWorkspaceRail({
       label: t("designEditor.leftRail.assets"),
       icon: <IconPhoto className="size-[15px]" />,
     },
+    {
+      panel: "import",
+      label: t("designEditor.leftRail.import"),
+      icon: <IconFileImport className="size-[15px]" />,
+    },
     {
       panel: "tools",
       label: t("designEditor.leftRail.tools"),
@@ -3564,6 +3602,11 @@ function DesignWorkspaceRail({
       icon: <IconAssembly className="size-[15px]" />,
     },
   ];
+  const codeItem = {
+    panel: "code" as const,
+    label: "Code" /* i18n-ignore */,
+    icon: <IconCode className="size-[15px]" />,
+  };
 
   return (
     <nav
@@ -3622,6 +3665,51 @@ function DesignWorkspaceRail({
             </Tooltip>
           );
         })}
+        <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">
@@ -4608,6 +4696,8 @@ export default function DesignEditor() {
     useState<InspectorTab>("design");
   const [activeLeftPanel, setActiveLeftPanel] =
     useState<DesignLeftPanel>("file");
+  const [activeCodeFile, setActiveCodeFile] =
+    useState<CodeWorkbenchActiveFile | null>(null);
   const initialSearchCommandAppliedForIdRef = useRef<string | null>(null);
   const initialUrlSelectionHydratedForIdRef = useRef<string | null>(null);
   const [leftSidebarWidth, setLeftSidebarWidth] = useState(256);
@@ -4896,11 +4986,17 @@ export default function DesignEditor() {
       event.stopPropagation();
       event.currentTarget.setPointerCapture?.(event.pointerId);
       const startX = event.clientX;
-      const startWidth = side === "left" ? leftSidebarWidth : rightSidebarWidth;
+      const codePanelOpen = side === "left" && activeLeftPanel === "code";
+      const startWidth =
+        side === "left"
+          ? codePanelOpen
+            ? Math.max(leftSidebarWidth, 640)
+            : Math.min(leftSidebarWidth, 420)
+          : rightSidebarWidth;
       const setWidth =
         side === "left" ? setLeftSidebarWidth : setRightSidebarWidth;
-      const minWidth = side === "left" ? 220 : 240;
-      const maxWidth = side === "left" ? 420 : 390;
+      const minWidth = side === "left" ? (codePanelOpen ? 520 : 220) : 240;
+      const maxWidth = side === "left" ? (codePanelOpen ? 860 : 420) : 390;
       const previousCursor = document.body.style.cursor;
       const previousUserSelect = document.body.style.userSelect;
       const dragShield = document.createElement("div");
@@ -4939,7 +5035,7 @@ export default function DesignEditor() {
       window.addEventListener("pointerup", cleanup);
       window.addEventListener("pointercancel", cleanup);
     },
-    [leftSidebarWidth, rightSidebarWidth],
+    [activeLeftPanel, leftSidebarWidth, rightSidebarWidth],
   );
   // Undo/redo state driven by Y.UndoManager
   const [canUndo, setCanUndo] = useState(false);
@@ -9134,6 +9230,14 @@ export default function DesignEditor() {
       activeTool,
       inspectorTab: activeInspectorTab,
       leftPanel: activeLeftPanel,
+      codeWorkspace: {
+        open: activeLeftPanel === "code",
+        backendKind: activeCodeFile?.backendKind ?? "virtual-inline",
+        activePath: activeCodeFile?.path ?? null,
+        activeFileId: activeCodeFile?.fileId ?? null,
+        dirty: activeCodeFile?.dirty ?? false,
+        versionHash: activeCodeFile?.versionHash ?? null,
+      },
       // §8 DesignNavigationState additions — dock + breakpoint context
       dock: { kind: "motion" as const, open: motionDockOpen },
       motion: {
@@ -9202,6 +9306,7 @@ export default function DesignEditor() {
       activeTool: selection.activeTool,
       inspectorTab: selection.inspectorTab,
       leftPanel: selection.leftPanel,
+      codeWorkspace: selection.codeWorkspace,
       dock: selection.dock,
       motion: selection.motion,
       breakpoint: selection.breakpoint,
@@ -9243,6 +9348,7 @@ export default function DesignEditor() {
     activeTool,
     activeInspectorTab,
     activeLeftPanel,
+    activeCodeFile,
     overviewSelectedScreenIds,
     viewMode,
     zoom,
@@ -14352,6 +14458,9 @@ ${serializedHtml}
       currentSearch: location.search,
       viewMode,
       screenId: activeFile?.id ?? activeFileId,
+      leftPanel: activeLeftPanel,
+      codeFileId: activeLeftPanel === "code" ? activeCodeFile?.fileId : null,
+      codeFilename: activeLeftPanel === "code" ? activeCodeFile?.path : null,
       selectionId:
         selectedUrlSelectionId ??
         (preserveInitialRouteSelection ? initialRouteSelectionId : null),
@@ -14369,6 +14478,9 @@ ${serializedHtml}
   }, [
     activeFile?.id,
     activeFileId,
+    activeCodeFile?.fileId,
+    activeCodeFile?.path,
+    activeLeftPanel,
     codeLayerOwnerByNodeId.size,
     files,
     id,
@@ -16287,7 +16399,14 @@ ${serializedHtml}
     </div>
   );
 
-  const leftContentWidth = Math.max(leftSidebarWidth, 320);
+  const leftContentWidth =
+    activeLeftPanel === "code"
+      ? Math.max(leftSidebarWidth, 640)
+      : Math.max(Math.min(leftSidebarWidth, 420), 320);
+  const routeCodeFileId =
+    activeLeftPanel === "code" ? searchParams.get("fileId") : null;
+  const routeCodeFilename =
+    activeLeftPanel === "code" ? searchParams.get("filename") : null;
   return (
     // h-full not flex-1: the parent <main> uses overflow-y-auto, not flex,
     // so flex-1 on the child doesn't resolve to the available height. h-full
@@ -16765,6 +16884,23 @@ ${serializedHtml}
                   />
                 )}
               </div>
+              <div
+                className={cn(
+                  "min-h-0 flex-1 flex-col overflow-hidden",
+                  activeLeftPanel === "import" ? "flex" : "hidden",
+                )}
+              >
+                {canEditDesign ? (
+                  <DesignImportPanel context={designExtensionContext} />
+                ) : (
+                  <ReadOnlyEditorPanel
+                    title={"Import requires editor access" /* i18n-ignore */}
+                    description={
+                      "Ask an owner for edit access before importing files into this design." /* i18n-ignore */
+                    }
+                  />
+                )}
+              </div>
               <div
                 className={cn(
                   "min-h-0 flex-1 flex-col overflow-hidden",
@@ -16815,6 +16951,32 @@ ${serializedHtml}
                   />
                 )}
               </div>
+              <div
+                className={cn(
+                  "min-h-0 flex-1 flex-col overflow-hidden",
+                  activeLeftPanel === "code" ? "flex" : "hidden",
+                )}
+              >
+                {id ? (
+                  <CodeWorkbenchHost
+                    designId={id}
+                    activeFileId={
+                      activeLeftPanel === "code"
+                        ? routeCodeFileId
+                        : (activeFile?.id ?? activeFileId)
+                    }
+                    activeFilename={
+                      activeLeftPanel === "code"
+                        ? routeCodeFilename
+                        : activeFile?.filename
+                    }
+                    selectedNodeId={selectedElementLayerId}
+                    selectedSelector={selectedCanvasSelector}
+                    canEdit={canEditDesign}
+                    onActiveFileChange={setActiveCodeFile}
+                  />
+                ) : null}
+              </div>
             </div>
             <div
               role="separator"

package/corpus/templates/design/changelog/2026-07-01-design-can-import-figma-paste-fig-files-and-standalone-html.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-01
+---
+
+Design can import Figma paste, .fig files, and standalone HTML from a new Import tab.

package/corpus/templates/design/changelog/2026-07-01-design-code-workspace.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-01
+---
+
+Designs can be edited in a new Code workspace from the left rail.

package/corpus/templates/design/package.json

@@ -24,12 +24,15 @@
     "@paper-design/shaders-react": "0.0.76",
     "@tabler/icons-react": "catalog:",
     "drizzle-orm": "^0.45.2",
+    "fzstd": "^0.1.1",
     "h3": "^2.0.1-rc.20",
     "html2canvas": "^1.4.1",
     "isbot": "^5",
     "jspdf": "^4.2.1",
     "jszip": "^3.10.1",
+    "kiwi-schema": "^0.5.0",
     "nanoid": "^5.1.9",
+    "pako": "^3.0.0",
     "pdf-parse": "^2.4.5",
     "yjs": "^13.6.31",
     "zod": "^4.3.6"

package/corpus/templates/design/server/handlers/import-design-file.ts

@@ -0,0 +1,168 @@
+import path from "node:path";
+
+import { getSession } from "@agent-native/core/server";
+import { assertAccess } from "@agent-native/core/sharing";
+import {
+  defineEventHandler,
+  getQuery,
+  getRequestHeader,
+  readMultipartFormData,
+  setResponseStatus,
+} from "h3";
+
+import { isFigKiwiBuffer, isZipBuffer } from "../lib/figma-import/decode.js";
+import { importFigmaBuffer } from "../lib/figma-import/processor.js";
+import {
+  normalizeImportedHtmlDocument,
+  saveImportedDesignFiles,
+  type ImportedDesignFile,
+} from "../lib/import-design-files.js";
+
+const MAX_HTML_BYTES = 2 * 1024 * 1024;
+const MAX_FIG_BYTES = 50 * 1024 * 1024;
+const TOTAL_BODY_LIMIT = MAX_FIG_BYTES + 1024 * 1024;
+
+function fieldText(
+  parts: Awaited<ReturnType<typeof readMultipartFormData>>,
+  name: string,
+) {
+  const part = parts?.find((candidate) => candidate.name === name);
+  return part?.data
+    ? Buffer.from(part.data).toString("utf8").trim()
+    : undefined;
+}
+
+function statusForError(message: string): number {
+  if (/unauthorized/i.test(message)) return 401;
+  if (/access|permission|not allowed/i.test(message)) return 403;
+  if (/too large|max/i.test(message)) return 413;
+  return 400;
+}
+
+export const importDesignFile = defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const rawContentLength = getRequestHeader(event, "content-length");
+  const contentLength = Number(rawContentLength);
+  if (!rawContentLength || !Number.isFinite(contentLength)) {
+    setResponseStatus(event, 411);
+    return { error: "Content-Length header is required" };
+  }
+  if (contentLength > TOTAL_BODY_LIMIT) {
+    setResponseStatus(event, 413);
+    return { error: "Request body too large" };
+  }
+
+  try {
+    const query = getQuery(event);
+    const queryDesignId =
+      typeof query.designId === "string" ? query.designId.trim() : undefined;
+    let accessChecked = false;
+    if (queryDesignId) {
+      await assertAccess("design", queryDesignId, "editor");
+      accessChecked = true;
+    }
+
+    const parts = await readMultipartFormData(event);
+    const bodyDesignId = fieldText(parts, "designId");
+    if (queryDesignId && bodyDesignId && bodyDesignId !== queryDesignId) {
+      setResponseStatus(event, 400);
+      return { error: "Mismatched designId" };
+    }
+    const designId = queryDesignId ?? bodyDesignId;
+    const filePart = parts?.find((part) => part.name === "file" && part.data);
+    if (!designId) {
+      setResponseStatus(event, 400);
+      return { error: "Missing designId" };
+    }
+    if (!accessChecked) {
+      await assertAccess("design", designId, "editor");
+    }
+    if (!filePart?.data) {
+      setResponseStatus(event, 400);
+      return { error: "No file uploaded" };
+    }
+
+    const originalName = filePart.filename || "import";
+    const ext = path.extname(originalName).toLowerCase();
+    const data = Buffer.from(filePart.data);
+
+    if (ext === ".html" || ext === ".htm") {
+      if (data.length > MAX_HTML_BYTES) {
+        throw new Error("HTML file is too large (max 2 MB).");
+      }
+      const saved = await saveImportedDesignFiles({
+        designId,
+        sourceType: "html-upload",
+        files: [
+          {
+            filename: originalName,
+            fileType: "html",
+            content: normalizeImportedHtmlDocument(
+              data.toString("utf8"),
+              "uploaded HTML file",
+            ),
+            source: { sourceType: "html-upload", originalName },
+          },
+        ],
+      });
+      return {
+        importKind: "html",
+        ...saved,
+        stats: { sourceKind: "html-upload", frameCount: saved.files.length },
+      };
+    }
+
+    if (ext !== ".fig") {
+      throw new Error("Unsupported file type. Upload .fig, .html, or .htm.");
+    }
+    if (data.length > MAX_FIG_BYTES) {
+      throw new Error("Figma file is too large (max 50 MB).");
+    }
+    if (!isFigKiwiBuffer(data) && !isZipBuffer(data)) {
+      throw new Error(
+        "Figma file contents do not match .fig or fig-kiwi format.",
+      );
+    }
+
+    const imported = await importFigmaBuffer({
+      buffer: data,
+      filename: originalName,
+      sourceKind: "fig-file",
+    });
+    const files: ImportedDesignFile[] = imported.files.map((file) => ({
+      filename: file.filename,
+      fileType: "html",
+      content: file.content,
+      source: { ...file.source, originalName },
+      preferredFrame: {
+        title:
+          typeof file.source?.frameName === "string"
+            ? file.source.frameName
+            : undefined,
+        width: file.width,
+        height: file.height,
+      },
+    }));
+    const saved = await saveImportedDesignFiles({
+      designId,
+      sourceType: "fig-file",
+      files,
+      warnings: imported.warnings,
+    });
+    return {
+      importKind: "fig",
+      ...saved,
+      stats: imported.stats,
+    };
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : "File import failed.";
+    setResponseStatus(event, statusForError(message));
+    return { error: message };
+  }
+});

package/corpus/templates/design/server/lib/figma-import/clipboard.ts

@@ -0,0 +1,122 @@
+import type { FigmaClipboardMeta, ParsedFigmaClipboardHtml } from "./types.js";
+
+const MAX_CLIPBOARD_HTML_BYTES = 2 * 1024 * 1024;
+const MAX_DECODED_BUFFER_BYTES = 25 * 1024 * 1024;
+const FIG_KIWI_MAGIC = Buffer.from("fig-kiwi", "utf8");
+
+function byteLength(value: string): number {
+  return Buffer.byteLength(value, "utf8");
+}
+
+function stripWrapper(value: string, marker: "figmeta" | "figma"): string {
+  return value
+    .trim()
+    .replace(new RegExp(`^<!--\\(${marker}\\)`, "i"), "")
+    .replace(new RegExp(`\\(/${marker}\\)-->$`, "i"), "")
+    .trim();
+}
+
+function decodeBase64(value: string, label: string): Buffer {
+  const normalized = value.replace(/\s+/g, "");
+  if (!/^[A-Za-z0-9+/]*={0,2}$/.test(normalized)) {
+    throw new Error(`${label} is not valid base64.`);
+  }
+  const decoded = Buffer.from(normalized, "base64");
+  const roundTrip = decoded.toString("base64").replace(/=+$/, "");
+  if (roundTrip !== normalized.replace(/=+$/, "")) {
+    throw new Error(`${label} is malformed base64.`);
+  }
+  return decoded;
+}
+
+function extractDataAttribute(html: string, attribute: string): string | null {
+  const pattern = new RegExp(`${attribute}\\s*=\\s*(["'])([\\s\\S]*?)\\1`, "i");
+  const match = pattern.exec(html);
+  return match?.[2] ?? null;
+}
+
+function removeFigmaHiddenSpans(html: string): string {
+  return html
+    .replace(
+      /<span\b[^>]*\bdata-metadata\s*=\s*(["'])[\s\S]*?\1[^>]*>\s*<\/span>/gi,
+      "",
+    )
+    .replace(
+      /<span\b[^>]*\bdata-buffer\s*=\s*(["'])[\s\S]*?\1[^>]*>\s*<\/span>/gi,
+      "",
+    )
+    .replace(/<meta\b[^>]*charset[^>]*>/gi, "")
+    .trim();
+}
+
+function normalizeMeta(value: unknown): FigmaClipboardMeta {
+  const raw =
+    value && typeof value === "object" && !Array.isArray(value)
+      ? (value as Record<string, unknown>)
+      : {};
+  const selectedNodeData =
+    typeof raw.selectedNodeData === "string" ? raw.selectedNodeData : undefined;
+  const selectedNodeId = selectedNodeData?.split("|")[0]?.trim() || undefined;
+  return {
+    fileKey: typeof raw.fileKey === "string" ? raw.fileKey : undefined,
+    pasteID:
+      typeof raw.pasteID === "string" || typeof raw.pasteID === "number"
+        ? raw.pasteID
+        : undefined,
+    dataType: typeof raw.dataType === "string" ? raw.dataType : undefined,
+    environment:
+      typeof raw.environment === "string" ? raw.environment : undefined,
+    selectedNodeData,
+    selectedNodeId,
+    raw,
+  };
+}
+
+export function looksLikeFigmaClipboardHtml(html: string): boolean {
+  return /\(figmeta\)|\(figma\)|data-metadata=|data-buffer=/i.test(html);
+}
+
+export function parseFigmaClipboardHtml(
+  html: string,
+): ParsedFigmaClipboardHtml {
+  if (byteLength(html) > MAX_CLIPBOARD_HTML_BYTES) {
+    throw new Error("Clipboard HTML is too large to import (max 2 MB).");
+  }
+
+  const metadataAttr = extractDataAttribute(html, "data-metadata");
+  const bufferAttr = extractDataAttribute(html, "data-buffer");
+  const fallbackHtml = removeFigmaHiddenSpans(html);
+
+  let meta: FigmaClipboardMeta | null = null;
+  if (metadataAttr) {
+    const metadataBase64 = stripWrapper(metadataAttr, "figmeta");
+    const metadataJson = decodeBase64(
+      metadataBase64,
+      "Figma metadata",
+    ).toString("utf8");
+    meta = normalizeMeta(JSON.parse(metadataJson));
+  }
+
+  let buffer: Buffer | undefined;
+  if (bufferAttr) {
+    const bufferBase64 = stripWrapper(bufferAttr, "figma");
+    buffer = decodeBase64(bufferBase64, "Figma buffer");
+    if (buffer.length > MAX_DECODED_BUFFER_BYTES) {
+      throw new Error(
+        "Figma clipboard buffer is too large to import (max 25 MB).",
+      );
+    }
+  }
+
+  const hasFigmaBuffer =
+    !!buffer &&
+    buffer.length >= FIG_KIWI_MAGIC.length &&
+    buffer.subarray(0, FIG_KIWI_MAGIC.length).equals(FIG_KIWI_MAGIC);
+
+  return {
+    meta,
+    buffer,
+    hasFigmaBuffer,
+    fallbackHtml: fallbackHtml || undefined,
+  };
+}