@agent-native/core 0.92.12 → 0.94.0

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

@@ -1,6 +1,6 @@
 import path from "node:path";
 
-import { getSession } from "@agent-native/core/server";
+import { getSession, runWithRequestContext } from "@agent-native/core/server";
 import { assertAccess } from "@agent-native/core/sharing";
 import {
   defineEventHandler,
@@ -10,13 +10,15 @@ import {
   setResponseStatus,
 } from "h3";
 
+import { MAX_FIG_FILE_BYTES } from "../lib/fig-file-limits.js";
 import {
   normalizeImportedHtmlDocument,
   saveImportedDesignFiles,
 } from "../lib/import-design-files.js";
 
 const MAX_HTML_BYTES = 2 * 1024 * 1024;
-const TOTAL_BODY_LIMIT = MAX_HTML_BYTES + 1024 * 1024;
+const MULTIPART_OVERHEAD_BYTES = 1024 * 1024;
+const TOTAL_BODY_LIMIT = MAX_FIG_FILE_BYTES + MULTIPART_OVERHEAD_BYTES;
 
 function fieldText(
   parts: Awaited<ReturnType<typeof readMultipartFormData>>,
@@ -42,88 +44,120 @@ export const importDesignFile = defineEventHandler(async (event) => {
     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" };
-  }
+  return runWithRequestContext(
+    { userEmail: session.email, orgId: session.orgId },
+    async () => {
+      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;
-    }
+      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 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);
+        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 === ".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(
-        "Use Design system setup to send .fig files through Builder indexing. This import route only accepts HTML.",
-      );
-    }
+        if (ext === ".fig") {
+          if (data.length > MAX_FIG_FILE_BYTES) {
+            throw new Error(".fig file is too large (max 50 MB).");
+          }
+          // Keep Kiwi/Zstd and the sizeable editable renderer off the normal HTML
+          // upload path. They are loaded only for an actual `.fig` request.
+          const { importFigFileToEditableHtml } =
+            await import("../lib/fig-file-import.js");
+          const converted = await importFigFileToEditableHtml({
+            data,
+            originalName,
+            ownerEmail: session.email,
+          });
+          const saved = await saveImportedDesignFiles({
+            designId,
+            sourceType: "fig-upload",
+            files: converted.files,
+            warnings: converted.warnings,
+          });
+          return {
+            importKind: "fig",
+            ...saved,
+            stats: converted.stats,
+          };
+        }
 
-    throw new Error("Unsupported file type. Upload .html or .htm.");
-  } catch (error) {
-    const message =
-      error instanceof Error ? error.message : "File import failed.";
-    setResponseStatus(event, statusForError(message));
-    return { error: message };
-  }
+        throw new Error("Unsupported file type. Upload .html, .htm, or .fig.");
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "File import failed.";
+        setResponseStatus(event, statusForError(message));
+        return { error: message };
+      }
+    },
+  );
 });

package/corpus/templates/design/server/handlers/index-design-system-with-builder.ts

@@ -19,7 +19,7 @@ function requestContentLength(event: Parameters<typeof getRequestHeader>[0]) {
   const raw = getRequestHeader(event, "content-length");
   if (!raw) return null;
   const parsed = Number(raw);
-  return Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+  return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : null;
 }
 
 /**
@@ -37,10 +37,11 @@ export const indexDesignSystemWithBuilder = defineEventHandler(
     }
 
     const contentLength = requestContentLength(event);
-    if (
-      contentLength !== null &&
-      contentLength > MAX_FIG_BYTES + MULTIPART_OVERHEAD_BYTES
-    ) {
+    if (contentLength === null) {
+      setResponseStatus(event, 411);
+      return { error: "A valid Content-Length header is required." };
+    }
+    if (contentLength > MAX_FIG_BYTES + MULTIPART_OVERHEAD_BYTES) {
       setResponseStatus(event, 413);
       return {
         error: `File too large (max ${Math.round(MAX_FIG_BYTES / 1024 / 1024)} MB).`,
@@ -69,6 +70,18 @@ export const indexDesignSystemWithBuilder = defineEventHandler(
         error: `File too large (max ${Math.round(MAX_FIG_BYTES / 1024 / 1024)} MB).`,
       };
     }
+    const filename = part.filename || "brand.fig";
+    const uploadedBytes = Buffer.from(part.data);
+    const isFigName = filename.toLowerCase().endsWith(".fig");
+    const isFigBytes =
+      uploadedBytes.subarray(0, 8).toString("utf8") === "fig-kiwi" ||
+      uploadedBytes
+        .subarray(0, 4)
+        .equals(Buffer.from([0x50, 0x4b, 0x03, 0x04]));
+    if (!isFigName || !isFigBytes) {
+      setResponseStatus(event, 400);
+      return { error: "Uploaded file is not a valid .fig container." };
+    }
 
     const suggestedTitle =
       (part.filename || "Imported brand")
@@ -81,7 +94,7 @@ export const indexDesignSystemWithBuilder = defineEventHandler(
         projectName: suggestedTitle,
         files: [
           {
-            name: part.filename || "brand.fig",
+            name: filename,
             data: part.data,
             mimeType: "application/octet-stream",
           },

package/corpus/templates/design/server/lib/design-export.ts

@@ -1,3 +1,5 @@
+import { decodeHTML } from "entities";
+
 export interface DesignExportFile {
   filename: string;
   fileType: string | null;
@@ -165,17 +167,252 @@ function escapeXmlAttribute(value: string): string {
     .replace(/>/g, ">");
 }
 
+function isStaticXmlAttributeName(name: string): boolean {
+  if (
+    name.startsWith("@") ||
+    name.startsWith(":") ||
+    /^x-(?:data|init|show|cloak|if|for|transition|on|bind|model|text|html|ref|teleport|id|effect|ignore)(?:$|[.:])/i.test(
+      name,
+    )
+  ) {
+    return false;
+  }
+  if (/^on/i.test(name)) return false;
+  // Preserve the standard namespaces used by inline SVG icons. Other colon
+  // prefixes are unbound in raw HTML and would make the enclosing XML invalid.
+  return (
+    /^(?:xmlns:xlink|xlink:href|xml:lang|xml:space)$/i.test(name) ||
+    /^[A-Za-z_][A-Za-z0-9._-]*$/.test(name)
+  );
+}
+
+function unquotedAttributeValue(valueSuffix: string): string {
+  const equals = valueSuffix.indexOf("=");
+  if (equals === -1) return "";
+  const raw = valueSuffix.slice(equals + 1).trim();
+  if (
+    raw.length >= 2 &&
+    ((raw.startsWith('"') && raw.endsWith('"')) ||
+      (raw.startsWith("'") && raw.endsWith("'")))
+  ) {
+    return raw.slice(1, -1);
+  }
+  return raw;
+}
+
+function isStaticXmlAttributeValue(name: string, valueSuffix: string): boolean {
+  const value = unquotedAttributeValue(valueSuffix);
+  if (
+    /^(?:href|src|action|formaction|poster|xlink:href)$/i.test(name) &&
+    (/^(?:javascript|vbscript):/i.test(value.trim()) ||
+      (/^data:/i.test(value.trim()) &&
+        !/^data:image\/(?:png|jpeg|webp|gif|avif);base64,/i.test(value.trim())))
+  ) {
+    return false;
+  }
+  if (
+    name.toLowerCase() === "style" &&
+    /(?:javascript|vbscript|data\s*:\s*text\/html)/i.test(value)
+  ) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Convert one HTML start tag into XML-safe XHTML without touching quoted
+ * values. This is a small stateful tokenizer rather than a directive-specific
+ * regex: it handles arbitrary whitespace, quoted `>` characters, boolean
+ * attributes, and any future framework shorthand whose name is not an XML
+ * QName. Runtime directives are deliberately omitted because an exported SVG
+ * is a static snapshot and cannot run the source framework scripts.
+ */
+function normalizeStartTagForXml(tag: string): string {
+  let cursor = 1;
+  while (cursor < tag.length && !/[\s/>]/.test(tag[cursor]!)) cursor += 1;
+  let output = tag.slice(0, cursor);
+
+  while (cursor < tag.length) {
+    const whitespaceStart = cursor;
+    while (cursor < tag.length && /\s/.test(tag[cursor]!)) cursor += 1;
+    const whitespace = tag.slice(whitespaceStart, cursor);
+    if (tag.startsWith("/>", cursor) || tag[cursor] === ">") {
+      return output + whitespace + tag.slice(cursor);
+    }
+
+    const nameStart = cursor;
+    while (cursor < tag.length && !/[\s=/>]/.test(tag[cursor]!)) cursor += 1;
+    const name = tag.slice(nameStart, cursor);
+    if (!name) return output + whitespace + tag.slice(cursor);
+
+    const afterNameStart = cursor;
+    while (cursor < tag.length && /\s/.test(tag[cursor]!)) cursor += 1;
+    let valueSuffix = tag.slice(afterNameStart, cursor);
+    let hasValue = false;
+    if (tag[cursor] === "=") {
+      hasValue = true;
+      const equalsStart = cursor;
+      cursor += 1;
+      while (cursor < tag.length && /\s/.test(tag[cursor]!)) cursor += 1;
+      if (tag[cursor] === '"' || tag[cursor] === "'") {
+        const quote = tag[cursor]!;
+        cursor += 1;
+        while (cursor < tag.length && tag[cursor] !== quote) cursor += 1;
+        if (cursor < tag.length) cursor += 1;
+      } else {
+        while (cursor < tag.length && !/[\s>]/.test(tag[cursor]!)) cursor += 1;
+      }
+      valueSuffix += tag.slice(equalsStart, cursor);
+    }
+
+    if (
+      isStaticXmlAttributeName(name) &&
+      isStaticXmlAttributeValue(name, valueSuffix)
+    ) {
+      output += `${whitespace}${name}${hasValue ? valueSuffix : '=""'}`;
+    }
+  }
+  return output;
+}
+
+function findMatchingElementEnd(
+  html: string,
+  openEnd: number,
+  tagName: string,
+): number {
+  const tagPattern = new RegExp(`<\\s*(/?)\\s*${tagName}\\b`, "gi");
+  tagPattern.lastIndex = openEnd + 1;
+  let depth = 1;
+  let match: RegExpExecArray | null;
+  while ((match = tagPattern.exec(html))) {
+    let end = match.index + match[0].length;
+    let quote = "";
+    while (end < html.length) {
+      const character = html[end]!;
+      if (quote) {
+        if (character === quote) quote = "";
+      } else if (character === '"' || character === "'") {
+        quote = character;
+      } else if (character === ">") {
+        break;
+      }
+      end += 1;
+    }
+    if (end >= html.length) return html.length;
+    if (match[1] === "/") {
+      depth -= 1;
+      if (depth === 0) return end + 1;
+    } else if (!/\/\s*>$/.test(html.slice(match.index, end + 1))) {
+      depth += 1;
+    }
+    tagPattern.lastIndex = end + 1;
+  }
+  return html.length;
+}
+
+function normalizeStartTagsForXml(html: string): string {
+  let output = "";
+  let cursor = 0;
+  while (cursor < html.length) {
+    const start = html.indexOf("<", cursor);
+    if (start === -1) return output + html.slice(cursor);
+    output += html.slice(cursor, start);
+    if (html.startsWith("<!--", start) || html.startsWith("<![CDATA[", start)) {
+      const marker = html.startsWith("<!--", start) ? "-->" : "]]>";
+      const end = html.indexOf(marker, start + 4);
+      if (end === -1) return output + html.slice(start);
+      output += html.slice(start, end + marker.length);
+      cursor = end + marker.length;
+      continue;
+    }
+    if (/^<\s*[!/?]/.test(html.slice(start))) {
+      const end = html.indexOf(">", start + 1);
+      if (end === -1) return output + html.slice(start);
+      output += html.slice(start, end + 1);
+      cursor = end + 1;
+      continue;
+    }
+
+    let end = start + 1;
+    let quote = "";
+    while (end < html.length) {
+      const character = html[end]!;
+      if (quote) {
+        if (character === quote) quote = "";
+      } else if (character === '"' || character === "'") {
+        quote = character;
+      } else if (character === ">") {
+        break;
+      }
+      end += 1;
+    }
+    if (end >= html.length) return output + html.slice(start);
+    const tag = html.slice(start, end + 1);
+    const openingTagName = /^<\s*([A-Za-z][A-Za-z0-9:-]*)\b/.exec(tag)?.[1];
+    const editorChromeElement =
+      /\bdata-agent-native-(?:editor-chrome|edit-overlay|edit-handle|edge-handle|rotate-handle|transform-badge|spacing-badge|spacing-overlay|spacing-line|spacing-region|insertion-guide|measurement-overlay)\b/i.test(
+        tag,
+      );
+    if (
+      openingTagName &&
+      (editorChromeElement ||
+        /^(?:script|iframe|object|embed|base|foreignObject|animate|set)$/i.test(
+          openingTagName,
+        ))
+    ) {
+      const isVoid =
+        /^(?:embed|base)$/i.test(openingTagName) || /\/\s*>$/.test(tag);
+      if (isVoid) {
+        cursor = end + 1;
+        continue;
+      }
+      cursor = findMatchingElementEnd(html, end, openingTagName);
+      continue;
+    }
+    output += normalizeStartTagForXml(tag);
+    cursor = end + 1;
+
+    const rawTag = /^<\s*(script|style)\b/i.exec(tag)?.[1];
+    if (rawTag) {
+      const closePattern = new RegExp(`<\\/\\s*${rawTag}\\s*>`, "i");
+      const rest = html.slice(cursor);
+      const close = closePattern.exec(rest);
+      if (!close?.index) {
+        if (!close) return output + rest;
+      }
+      if (close) {
+        const closeEnd = cursor + close.index + close[0].length;
+        output += html.slice(cursor, closeEnd);
+        cursor = closeEnd;
+      }
+    }
+  }
+  return output;
+}
+
 function normalizeHtmlForSvg(html: string): string {
   const withoutDoctype = html.replace(/<!doctype[^>]*>/i, "").trim();
-  const withClosedVoidElements = withoutDoctype.replace(
+  const withXmlSafeTags = normalizeStartTagsForXml(withoutDoctype);
+  const withClosedVoidElements = withXmlSafeTags.replace(
     /<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\b([^>]*)>/gi,
     (match, tag: string, attrs: string) => {
       if (/\/\s*>$/.test(match)) return match;
       return `<${tag}${attrs} />`;
     },
   );
-  const withEscapedBareAmpersands = withClosedVoidElements.replace(
-    /&(?!#?[a-zA-Z0-9]+;)/g,
+  const withXmlEntities = withClosedVoidElements.replace(
+    /&([A-Za-z][A-Za-z0-9]+);/g,
+    (entity, name: string) => {
+      if (/^(?:amp|lt|gt|quot|apos)$/i.test(name)) return entity;
+      const decoded = decodeHTML(entity);
+      if (decoded === entity) return `&amp;${name};`;
+      return Array.from(decoded)
+        .map((character) => `&#${character.codePointAt(0)};`)
+        .join("");
+    },
+  );
+  const withEscapedBareAmpersands = withXmlEntities.replace(
+    /&(?!(?:amp|lt|gt|quot|apos|#\d+|#x[0-9a-fA-F]+);)/g,
     "&amp;",
   );
 

package/corpus/templates/design/server/lib/design-template-data.ts

@@ -0,0 +1,89 @@
+import { designDataForAccessRole } from "./design-data-access.js";
+
+interface CanvasFrame {
+  width?: unknown;
+  height?: unknown;
+  [key: string]: unknown;
+}
+
+function record(value: unknown): Record<string, unknown> {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+export function parseDesignTemplateData(
+  raw: string | null | undefined,
+): Record<string, unknown> {
+  if (!raw) return {};
+  try {
+    return record(JSON.parse(raw));
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Templates are portable/shareable snapshots, so they must never retain
+ * localhost bridge credentials. Reuse the same viewer-safe redaction applied
+ * to exported design metadata before either saving or instantiating a template.
+ */
+export function redactTemplateDesignData(
+  raw: string | null | undefined,
+): string {
+  const redacted = designDataForAccessRole(raw ?? "{}", "viewer");
+  return typeof redacted === "string" ? redacted : "{}";
+}
+
+export function remapTemplateFileIds(
+  rawData: string | null | undefined,
+  fileIdMap: Map<string, string>,
+): Record<string, unknown> {
+  const data = parseDesignTemplateData(rawData);
+  const next: Record<string, unknown> = { ...data };
+
+  const remapKeyedRecord = (key: string) => {
+    const source = record(data[key]);
+    if (Object.keys(source).length === 0) return;
+    next[key] = Object.fromEntries(
+      Object.entries(source).map(([id, value]) => [
+        fileIdMap.get(id) ?? id,
+        value,
+      ]),
+    );
+  };
+
+  remapKeyedRecord("canvasFrames");
+  remapKeyedRecord("screenMetadata");
+
+  if (typeof data.boardFileId === "string") {
+    next.boardFileId = fileIdMap.get(data.boardFileId) ?? data.boardFileId;
+  }
+  if (Array.isArray(data.lockedScreenIds)) {
+    next.lockedScreenIds = data.lockedScreenIds.map((id) =>
+      typeof id === "string" ? (fileIdMap.get(id) ?? id) : id,
+    );
+  }
+
+  return next;
+}
+
+export function firstTemplateDimensions(
+  data: Record<string, unknown>,
+  preferredFileId?: string,
+): { width: number | null; height: number | null } {
+  const frames = record(data.canvasFrames);
+  const frame = record(
+    (preferredFileId ? frames[preferredFileId] : undefined) ??
+      Object.values(frames)[0],
+  ) as CanvasFrame;
+  const width =
+    typeof frame.width === "number" && Number.isFinite(frame.width)
+      ? Math.round(frame.width)
+      : null;
+  const height =
+    typeof frame.height === "number" && Number.isFinite(frame.height)
+      ? Math.round(frame.height)
+      : null;
+  return { width, height };
+}