@agent-native/core 0.84.32 → 0.84.34

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

@@ -111,6 +111,7 @@ import {
   IconDownload,
   IconClipboard,
   IconFileExport,
+  IconFileImport,
   IconPlayerPlay,
   IconDeviceFloppy,
   IconRocket,
@@ -165,6 +166,7 @@ import {
   DesignExtensionsPanel,
   type DesignExtensionSlotContext,
 } from "@/components/design/DesignExtensionsPanel";
+import { DesignImportPanel } from "@/components/design/DesignImportPanel";
 import {
   EditPanel,
   type InspectCodeData,
@@ -3521,6 +3523,7 @@ type DesignLeftPanel =
   | "assets"
   | "tools"
   | "tokens"
+  | "import"
   | "code";
 
 const INITIAL_GENERATION_DISABLED_LEFT_PANELS = new Set<DesignLeftPanel>([
@@ -3528,6 +3531,7 @@ const INITIAL_GENERATION_DISABLED_LEFT_PANELS = new Set<DesignLeftPanel>([
   "assets",
   "tools",
   "tokens",
+  "import",
   "code",
 ]);
 
@@ -3538,6 +3542,7 @@ function normalizeDesignLeftPanel(value: unknown): DesignLeftPanel | undefined {
     value === "assets" ||
     value === "tools" ||
     value === "tokens" ||
+    value === "import" ||
     value === "code"
     ? value
     : undefined;
@@ -3581,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"),
@@ -16874,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",

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/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,
+  };
+}