@agent-native/core 0.92.11 → 0.93.0

package/corpus/templates/design/app/lib/design-file-upload.ts

@@ -0,0 +1,87 @@
+import { parseUploadResponse, type ImportResult } from "@/lib/design-import";
+
+export const MAX_FIG_UPLOAD_BYTES = 50 * 1024 * 1024;
+
+export type FigUploadValidationError = "invalid-extension" | "too-large";
+
+export function validateFigUploadFile(
+  file: Pick<File, "name" | "size">,
+): FigUploadValidationError | null {
+  if (!file.name.toLowerCase().endsWith(".fig")) return "invalid-extension";
+  if (file.size > MAX_FIG_UPLOAD_BYTES) return "too-large";
+  return null;
+}
+
+export interface DesignFileUploadProgress {
+  loaded: number;
+  total: number;
+  percent: number | null;
+}
+
+export interface UploadDesignFileOptions {
+  designId: string;
+  file: File;
+  fallbackErrorMessage: string;
+  onProgress?: (progress: DesignFileUploadProgress) => void;
+}
+
+/**
+ * Uploads an import file through the template's authenticated multipart route.
+ * XMLHttpRequest is intentional here: unlike fetch, it exposes upload progress
+ * for large local .fig files. Keep the route and transport details inside this
+ * boundary rather than duplicating them in React components.
+ */
+export function uploadDesignFile({
+  designId,
+  file,
+  fallbackErrorMessage,
+  onProgress,
+}: UploadDesignFileOptions): Promise<ImportResult> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const form = new FormData();
+    form.append("designId", designId);
+    form.append("file", file, file.name);
+
+    xhr.open(
+      "POST",
+      `/api/import-design-file?designId=${encodeURIComponent(designId)}`,
+      true,
+    );
+    xhr.withCredentials = true;
+    xhr.timeout = 5 * 60 * 1000;
+
+    xhr.upload.addEventListener("progress", (event) => {
+      const total = event.lengthComputable ? event.total : 0;
+      onProgress?.({
+        loaded: event.loaded,
+        total,
+        percent:
+          total > 0
+            ? Math.min(100, Math.round((event.loaded / total) * 100))
+            : null,
+      });
+    });
+
+    xhr.addEventListener("load", () => {
+      void parseUploadResponse<ImportResult>(
+        {
+          ok: xhr.status >= 200 && xhr.status < 300,
+          status: xhr.status,
+          text: async () => xhr.responseText,
+        },
+        fallbackErrorMessage,
+      ).then(resolve, reject);
+    });
+    xhr.addEventListener("error", () =>
+      reject(new Error(fallbackErrorMessage)),
+    );
+    xhr.addEventListener("timeout", () =>
+      reject(new Error(fallbackErrorMessage)),
+    );
+    xhr.addEventListener("abort", () =>
+      reject(new Error(fallbackErrorMessage)),
+    );
+    xhr.send(form);
+  });
+}

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

@@ -31,6 +31,12 @@ export interface ImportResult {
   guidance?: string;
 }
 
+export interface ImportResultNotification {
+  variant: "success" | "warning";
+  title: string;
+  description?: string;
+}
+
 export const VISUAL_EDIT_CONNECT_COMMAND =
   "npx @agent-native/core@latest design connect --url 'http://localhost:<port>' --root . --daemon";
 
@@ -38,8 +44,11 @@ export const VISUAL_EDIT_INSTALL_COMMAND =
   "npx @agent-native/core@latest skills add visual-edit";
 
 export function hasFigmaClipboardPayload(value: string): boolean {
-  return /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
-    value,
+  return (
+    /\((figmeta|figma)\)[\s\S]*?\(\/(figmeta|figma)\)/i.test(value) ||
+    /<[^>]+\sdata-(metadata|buffer)=["'][^"']*\((figmeta|figma)\)[^"']*["']/i.test(
+      value,
+    )
   );
 }
 
@@ -70,6 +79,40 @@ export function importResultSummary(
   return `Imported ${count} screens.`;
 }
 
+function isGenericFigFormatCaveat(warning: string): boolean {
+  return /Figma's \.fig format is proprietary and undocumented/i.test(warning);
+}
+
+/**
+ * Builds one import notification instead of stacking a success toast and a
+ * warning toast. The generic experimental `.fig` caveat is already disclosed
+ * beside the upload control, so only actionable conversion warnings belong in
+ * the transient result notification.
+ */
+export function importResultNotification(
+  result: ImportResult | undefined,
+  fallback: string,
+  options?: { fidelityWarnings?: string[] },
+): ImportResultNotification {
+  const title = importResultSummary(result, fallback);
+  const actionableWarnings = [
+    ...(result?.warnings ?? []).filter(
+      (warning) => !isGenericFigFormatCaveat(warning),
+    ),
+    ...(options?.fidelityWarnings ?? []),
+  ].slice(0, 3);
+
+  if (actionableWarnings.length === 0) {
+    return { variant: "success", title };
+  }
+
+  return {
+    variant: "warning",
+    title,
+    description: actionableWarnings.join("\n"),
+  };
+}
+
 // --- R83: safe fetch-response parsing for the file upload path ---
 //
 // A failed upload can come back as a non-JSON body — a plaintext "Internal
@@ -180,6 +223,127 @@ export interface DesignClipboardPayload {
 }
 
 const CLIPBOARD_MARKER_PREFIX = "agent-native-clipboard-v1:";
+const MAX_CLIPBOARD_MARKER_DATA_CHARS = 16_000_000;
+const MAX_CLIPBOARD_CONTENT_CHARS = 8_000_000;
+const MAX_CLIPBOARD_LAYER_ENTRIES = 1_000;
+const MAX_CLIPBOARD_SCREEN_ENTRIES = 100;
+
+function clipboardString(value: unknown, max = 1_024): value is string {
+  return typeof value === "string" && value.length <= max;
+}
+
+function isPortableClipboardStyleSnapshot(value: unknown): boolean {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const snapshot = value as Record<string, unknown>;
+  if (snapshot.version !== 1 || !Array.isArray(snapshot.nodes)) return false;
+  if (snapshot.nodes.length > 5_000) return false;
+  if (
+    snapshot.rootSourceId !== undefined &&
+    !clipboardString(snapshot.rootSourceId)
+  ) {
+    return false;
+  }
+  return snapshot.nodes.every((rawNode) => {
+    if (!rawNode || typeof rawNode !== "object" || Array.isArray(rawNode)) {
+      return false;
+    }
+    const node = rawNode as Record<string, unknown>;
+    if (node.sourceId !== undefined && !clipboardString(node.sourceId)) {
+      return false;
+    }
+    if (
+      !Array.isArray(node.path) ||
+      node.path.length > 128 ||
+      !node.path.every((part) => Number.isInteger(part) && Number(part) >= 0)
+    ) {
+      return false;
+    }
+    if (!node.styles || typeof node.styles !== "object") return false;
+    const styles = Object.entries(node.styles as Record<string, unknown>);
+    return (
+      styles.length <= 256 &&
+      styles.every(
+        ([property, value]) =>
+          clipboardString(property, 256) && clipboardString(value, 16_384),
+      )
+    );
+  });
+}
+
+function validateDesignClipboardPayload(
+  value: unknown,
+): DesignClipboardPayload | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const payload = value as Record<string, unknown>;
+  if (payload.version !== 1 || !Array.isArray(payload.entries)) return null;
+  if (payload.entries.length > MAX_CLIPBOARD_LAYER_ENTRIES) return null;
+  const screens = payload.screens;
+  if (
+    screens !== undefined &&
+    (!Array.isArray(screens) || screens.length > MAX_CLIPBOARD_SCREEN_ENTRIES)
+  ) {
+    return null;
+  }
+  let contentChars = 0;
+  for (const rawEntry of payload.entries) {
+    if (!rawEntry || typeof rawEntry !== "object" || Array.isArray(rawEntry)) {
+      return null;
+    }
+    const entry = rawEntry as Record<string, unknown>;
+    if (
+      !clipboardString(entry.html, MAX_CLIPBOARD_CONTENT_CHARS) ||
+      !clipboardString(entry.sourceFileId) ||
+      (entry.rootNodeId !== undefined && !clipboardString(entry.rootNodeId)) ||
+      (entry.portableStyleSnapshot !== undefined &&
+        !isPortableClipboardStyleSnapshot(entry.portableStyleSnapshot))
+    ) {
+      return null;
+    }
+    contentChars += entry.html.length;
+  }
+  for (const rawScreen of (screens as unknown[] | undefined) ?? []) {
+    if (
+      !rawScreen ||
+      typeof rawScreen !== "object" ||
+      Array.isArray(rawScreen)
+    ) {
+      return null;
+    }
+    const screen = rawScreen as Record<string, unknown>;
+    if (
+      !clipboardString(screen.filename, 512) ||
+      screen.filename.includes("..") ||
+      screen.filename.includes("/") ||
+      screen.filename.includes("\\") ||
+      !clipboardString(screen.content, MAX_CLIPBOARD_CONTENT_CHARS) ||
+      (screen.fileType !== undefined && !clipboardString(screen.fileType, 32))
+    ) {
+      return null;
+    }
+    if (screen.canvasFrame !== undefined) {
+      if (
+        !screen.canvasFrame ||
+        typeof screen.canvasFrame !== "object" ||
+        Array.isArray(screen.canvasFrame)
+      ) {
+        return null;
+      }
+      if (
+        Object.values(screen.canvasFrame as Record<string, unknown>).some(
+          (part) =>
+            typeof part !== "number" ||
+            !Number.isFinite(part) ||
+            Math.abs(part) > 10_000_000,
+        )
+      ) {
+        return null;
+      }
+    }
+    contentChars += screen.content.length;
+  }
+  if (contentChars > MAX_CLIPBOARD_CONTENT_CHARS) return null;
+  return value as DesignClipboardPayload;
+}
 
 function encodeClipboardMarkerData(payload: DesignClipboardPayload): string {
   // btoa is UTF-16-unsafe for non-Latin1 text; encodeURIComponent first so
@@ -190,18 +354,11 @@ function encodeClipboardMarkerData(payload: DesignClipboardPayload): string {
 function decodeClipboardMarkerData(
   data: string,
 ): DesignClipboardPayload | null {
+  if (data.length > MAX_CLIPBOARD_MARKER_DATA_CHARS) return null;
   try {
     const json = decodeURIComponent(atob(data));
     const parsed = JSON.parse(json) as unknown;
-    if (
-      !parsed ||
-      typeof parsed !== "object" ||
-      (parsed as { version?: unknown }).version !== 1 ||
-      !Array.isArray((parsed as { entries?: unknown }).entries)
-    ) {
-      return null;
-    }
-    return parsed as DesignClipboardPayload;
+    return validateDesignClipboardPayload(parsed);
   } catch {
     return null;
   }