@agent-native/core 0.92.12 → 0.93.0

package/corpus/templates/design/app/lib/figma-svg-copy.ts

@@ -45,6 +45,27 @@ export interface FigmaSvgExportParams {
   filename?: string;
   nodeId?: string;
   embedImages?: boolean;
+  width?: number;
+  height?: number;
+}
+
+export interface LiveFigmaSvgSource {
+  /** The already-rendered preview document. Geometry comes from this live DOM. */
+  document: Document;
+  /** Optional explicit root. Defaults to nodeId, then document.body. */
+  root?: Element | null;
+  /** Stored screen geometry wins over a transient iframe viewport when supplied. */
+  width?: number | null;
+  height?: number | null;
+  title?: string | null;
+}
+
+export interface LiveFigmaSvgSnapshot {
+  /** Script-free runtime snapshot supplied by the localhost editor bridge. */
+  html: string;
+  width?: number | null;
+  height?: number | null;
+  title?: string | null;
 }
 
 export interface FigmaSvgCopyEnvironment {
@@ -54,6 +75,716 @@ export interface FigmaSvgCopyEnvironment {
   callExportAction?: (
     params: FigmaSvgExportParams,
   ) => Promise<FigmaSvgExportActionResult>;
+  /**
+   * Prefer the browser's already-rendered iframe DOM. This works in hosted and
+   * serverless deployments without shipping Chromium and preserves live Alpine
+   * state, loaded fonts, responsive layout, and unsaved visual-edit previews.
+   */
+  liveSource?: LiveFigmaSvgSource | null;
+  /** Cross-origin localhost fallback captured by the trusted editor bridge. */
+  liveSnapshot?: LiveFigmaSvgSnapshot | null;
+}
+
+const XMLNS = "http://www.w3.org/2000/svg";
+const MAX_CLIENT_EMBEDDED_IMAGE_BYTES = 8 * 1024 * 1024;
+const CLIENT_IMAGE_MIME_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/gif",
+  "image/avif",
+]);
+
+function xml(value: unknown): string {
+  return String(value ?? "")
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function number(value: number): string {
+  if (!Number.isFinite(value)) return "0";
+  return String(Math.round(value * 1000) / 1000);
+}
+
+function positive(value: number | null | undefined): value is number {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+
+function transparent(value: string): boolean {
+  return (
+    !value ||
+    value === "transparent" ||
+    /rgba?\([^)]*(?:,|\s\/)\s*0(?:\.0+)?\s*\)$/i.test(value)
+  );
+}
+
+function splitCssList(value: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = "";
+  for (const character of value) {
+    if (character === "(") depth += 1;
+    if (character === ")") depth = Math.max(0, depth - 1);
+    if (character === "," && depth === 0) {
+      parts.push(current.trim());
+      current = "";
+    } else {
+      current += character;
+    }
+  }
+  if (current.trim()) parts.push(current.trim());
+  return parts;
+}
+
+function simpleBoxShadow(value: string): {
+  color: string;
+  opacity: number | null;
+  offsetX: number;
+  offsetY: number;
+  blur: number;
+  spread: number;
+} | null {
+  const shadow = splitCssList(value)[0]?.trim();
+  if (!shadow || /\binset\b/i.test(shadow)) return null;
+  const colorMatch = shadow.match(/(?:rgba?|hsla?)\([^)]*\)|#[0-9a-f]{3,8}\b/i);
+  if (!colorMatch) return null;
+  const lengths = shadow
+    .replace(colorMatch[0], "")
+    .trim()
+    .match(/^(-?[\d.]+)px\s+(-?[\d.]+)px\s+([\d.]+)px(?:\s+(-?[\d.]+)px)?$/);
+  if (!lengths) return null;
+
+  let color = colorMatch[0];
+  let opacity: number | null = null;
+  const rgba = color.match(
+    /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/i,
+  );
+  const modernRgb = color.match(
+    /^rgb\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)\s*\/\s*([\d.]+)\s*\)$/i,
+  );
+  const alphaColor = rgba ?? modernRgb;
+  if (alphaColor) {
+    color = `rgb(${alphaColor[1]}, ${alphaColor[2]}, ${alphaColor[3]})`;
+    opacity = Math.max(0, Math.min(1, Number(alphaColor[4])));
+  }
+
+  return {
+    color,
+    opacity,
+    offsetX: Number(lengths[1]),
+    offsetY: Number(lengths[2]),
+    blur: Number(lengths[3]),
+    spread: Number(lengths[4] ?? 0),
+  };
+}
+
+function svgGradientFill(
+  backgroundImage: string,
+  nextId: () => string,
+  defs: string[],
+): string | null {
+  const match = backgroundImage.match(/^(linear|radial)-gradient\((.*)\)$/i);
+  if (!match) return null;
+  const parts = splitCssList(match[2]);
+  let angle = 180;
+  if (match[1].toLowerCase() === "linear" && /deg$/i.test(parts[0] || "")) {
+    angle = Number.parseFloat(parts.shift() || "180") || 180;
+  }
+  const stops = parts.map((part, index) => {
+    const stopMatch = part.match(/^(.*?)(?:\s+(-?[\d.]+)%?)?$/);
+    const color = stopMatch?.[1]?.trim() || part;
+    const explicit = stopMatch?.[2];
+    const offset = explicit
+      ? Math.max(0, Math.min(100, Number(explicit)))
+      : parts.length <= 1
+        ? 0
+        : (index / (parts.length - 1)) * 100;
+    return `<stop offset="${number(offset)}%" stop-color="${xml(color)}"/>`;
+  });
+  if (stops.length === 0) return null;
+  const gradientId = nextId();
+  if (match[1].toLowerCase() === "radial") {
+    defs.push(
+      `<radialGradient id="${gradientId}" cx="50%" cy="50%" r="50%">${stops.join("")}</radialGradient>`,
+    );
+  } else {
+    defs.push(
+      `<linearGradient id="${gradientId}" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(${number(angle - 90)} .5 .5)">${stops.join("")}</linearGradient>`,
+    );
+  }
+  return `url(#${gradientId})`;
+}
+
+function safeClientFilename(title: string | null | undefined): string {
+  const safe = (title || "design")
+    .replace(/[^a-zA-Z0-9_-]/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+  return `${safe || "design"}-figma-${Date.now()}.svg`;
+}
+
+function queryNodeById(doc: Document, nodeId: string): Element | null {
+  for (const element of Array.from(
+    doc.querySelectorAll("[data-agent-native-node-id]"),
+  )) {
+    if (element.getAttribute("data-agent-native-node-id") === nodeId) {
+      return element;
+    }
+  }
+  return null;
+}
+
+function directText(element: Element): string {
+  return Array.from(element.childNodes)
+    .filter((node) => node.nodeType === Node.TEXT_NODE)
+    .map((node) => node.textContent ?? "")
+    .join("")
+    .trim();
+}
+
+interface MeasuredTextLine {
+  text: string;
+  left: number;
+  top: number;
+}
+
+function measuredDirectTextLines(element: Element): MeasuredTextLine[] | null {
+  const textNodes = Array.from(element.childNodes).filter(
+    (node): node is Text => node.nodeType === Node.TEXT_NODE,
+  );
+  if (textNodes.length !== 1) return null;
+  const node = textNodes[0];
+  const value = node.textContent ?? "";
+  if (!value.trim() || value.length > 10_000) return null;
+  const range = element.ownerDocument.createRange();
+  if (typeof range.getBoundingClientRect !== "function") return null;
+
+  const lines: Array<MeasuredTextLine & { right: number; bottom: number }> = [];
+  try {
+    for (let index = 0; index < value.length; index += 1) {
+      const character = value[index] ?? "";
+      if (character === "\n" || character === "\r") continue;
+      range.setStart(node, index);
+      range.setEnd(node, index + 1);
+      const rect = range.getBoundingClientRect();
+      if (!Number.isFinite(rect.top) || rect.width <= 0 || rect.height <= 0) {
+        if (/\s/.test(character) && lines.length) {
+          lines[lines.length - 1]!.text += character;
+        }
+        continue;
+      }
+      const current = lines[lines.length - 1];
+      if (!current || Math.abs(current.top - rect.top) > 1) {
+        lines.push({
+          text: character,
+          left: rect.left,
+          top: rect.top,
+          right: rect.right,
+          bottom: rect.bottom,
+        });
+      } else {
+        current.text += character;
+        current.left = Math.min(current.left, rect.left);
+        current.top = Math.min(current.top, rect.top);
+        current.right = Math.max(current.right, rect.right);
+        current.bottom = Math.max(current.bottom, rect.bottom);
+      }
+    }
+  } finally {
+    range.detach?.();
+  }
+
+  return lines
+    .map((line) => ({
+      text: line.text.trim(),
+      left: line.left,
+      top: line.top,
+    }))
+    .filter((line) => line.text);
+}
+
+function sanitizeNestedSvg(element: Element): string {
+  const clone = element.cloneNode(true) as Element;
+  clone
+    .querySelectorAll("script, foreignObject")
+    .forEach((node) => node.remove());
+  for (const node of [clone, ...Array.from(clone.querySelectorAll("*"))]) {
+    for (const attribute of Array.from(node.attributes)) {
+      if (/^on/i.test(attribute.name)) node.removeAttribute(attribute.name);
+      if (
+        (attribute.name === "href" || attribute.name === "xlink:href") &&
+        /^javascript:/i.test(attribute.value.trim())
+      ) {
+        node.removeAttribute(attribute.name);
+      }
+    }
+  }
+  return new XMLSerializer().serializeToString(clone);
+}
+
+function liveSvgRoot(source: LiveFigmaSvgSource, nodeId?: string): Element {
+  if (nodeId) {
+    const selected = queryNodeById(source.document, nodeId);
+    if (!selected) {
+      throw new Error(`The selected live layer "${nodeId}" no longer exists`);
+    }
+    return selected;
+  }
+  const root = source.root ?? source.document.body;
+  if (!root)
+    throw new Error("The live preview has no renderable document body");
+  return root;
+}
+
+/**
+ * Serialize the already-laid-out iframe DOM to genuine SVG primitives. This
+ * deliberately emits no foreignObject: Figma imports the result as editable
+ * rectangles, text, images, and native SVG paths instead of one opaque blob.
+ */
+export function buildFigmaSvgFromLiveDocument(
+  source: LiveFigmaSvgSource,
+  nodeId?: string,
+): FigmaSvgExportActionResult & { svg: string } {
+  const doc = source.document;
+  const view = doc.defaultView;
+  if (!view) throw new Error("The live preview is not attached to a window");
+  const root = liveSvgRoot(source, nodeId);
+  const rootRect = root.getBoundingClientRect();
+  const isDocumentRoot = root === doc.body || root === doc.documentElement;
+  const width = positive(source.width)
+    ? source.width
+    : Math.max(
+        1,
+        rootRect.width,
+        isDocumentRoot ? doc.documentElement.scrollWidth : 0,
+        isDocumentRoot ? (doc.body?.scrollWidth ?? 0) : 0,
+      );
+  const height = positive(source.height)
+    ? source.height
+    : Math.max(
+        1,
+        rootRect.height,
+        isDocumentRoot ? doc.documentElement.scrollHeight : 0,
+        isDocumentRoot ? (doc.body?.scrollHeight ?? 0) : 0,
+      );
+  const originX = rootRect.left;
+  const originY = rootRect.top;
+  let id = 0;
+  const defs: string[] = [];
+  const vectorized: string[] = [];
+  const approximated: Array<{ node: string; note: string }> = [];
+  const omitted: Array<{ node: string; reason: string }> = [];
+
+  const serialize = (element: Element): string => {
+    const style = view.getComputedStyle(element);
+    if (
+      style.display === "none" ||
+      style.visibility === "hidden" ||
+      style.opacity === "0" ||
+      element.getAttribute("data-agent-native-hidden") === "true" ||
+      element.closest("[data-agent-native-editor-chrome]")
+    ) {
+      return "";
+    }
+    const rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return "";
+    const x = rect.left - originX;
+    const y = rect.top - originY;
+    const elementId =
+      element.getAttribute("data-agent-native-node-id") || `node-${++id}`;
+    const name =
+      element.getAttribute("data-agent-native-layer-name") ||
+      element.getAttribute("aria-label") ||
+      element.tagName.toLowerCase();
+    const opacity = Number.parseFloat(style.opacity || "1");
+    const opacityAttr = opacity < 1 ? ` opacity="${number(opacity)}"` : "";
+    const children = Array.from(element.children).map(serialize).join("");
+    const tag = element.tagName.toUpperCase();
+
+    if (tag === "SCRIPT" || tag === "STYLE" || tag === "LINK") return "";
+    if (tag === "SVG") {
+      vectorized.push(elementId);
+      return sanitizeNestedSvg(element).replace(
+        /^<svg\b([^>]*)>/i,
+        (_opening, attributes: string) => {
+          const cleanAttributes = attributes.replace(
+            /\s(?:x|y|width|height)="[^"]*"/gi,
+            "",
+          );
+          return `<svg x="${number(x)}" y="${number(y)}" width="${number(rect.width)}" height="${number(rect.height)}"${cleanAttributes}>`;
+        },
+      );
+    }
+    if (tag === "IMG") {
+      const image = element as HTMLImageElement;
+      const href = image.currentSrc || image.src;
+      if (!href) {
+        omitted.push({ node: elementId, reason: "Image has no source" });
+        return "";
+      }
+      vectorized.push(elementId);
+      const fit =
+        style.objectFit === "cover" ? "xMidYMid slice" : "xMidYMid meet";
+      return `<image id="${xml(elementId)}" data-name="${xml(name)}" x="${number(x)}" y="${number(y)}" width="${number(rect.width)}" height="${number(rect.height)}" href="${xml(href)}" preserveAspectRatio="${fit}"${opacityAttr}/>`;
+    }
+
+    const radius = Math.max(
+      0,
+      Number.parseFloat(style.borderTopLeftRadius || "0") || 0,
+    );
+    const gradientFill = svgGradientFill(
+      style.backgroundImage,
+      () => `gradient-${++id}`,
+      defs,
+    );
+    if (style.transform && style.transform !== "none") {
+      approximated.push({
+        node: elementId,
+        note: "CSS transform flattened to its rendered bounding box",
+      });
+    }
+    if (
+      style.backgroundImage &&
+      style.backgroundImage !== "none" &&
+      !gradientFill
+    ) {
+      approximated.push({
+        node: elementId,
+        note: "Unsupported CSS background image omitted",
+      });
+    }
+    if (style.clipPath && style.clipPath !== "none") {
+      approximated.push({
+        node: elementId,
+        note: "CSS clip-path is not preserved in this SVG export",
+      });
+    }
+    if (
+      style.overflow === "hidden" ||
+      style.overflow === "clip" ||
+      style.overflowX === "hidden" ||
+      style.overflowX === "clip" ||
+      style.overflowY === "hidden" ||
+      style.overflowY === "clip"
+    ) {
+      approximated.push({
+        node: elementId,
+        note: "Overflow clipping is approximated; child geometry remains editable",
+      });
+    }
+    const fill =
+      gradientFill ??
+      (transparent(style.backgroundColor) ? "none" : style.backgroundColor);
+    const borderWidth = Number.parseFloat(style.borderTopWidth || "0") || 0;
+    const stroke =
+      borderWidth > 0 && style.borderTopStyle !== "none"
+        ? style.borderTopColor
+        : "none";
+    const dash =
+      style.borderTopStyle === "dashed" || style.borderTopStyle === "dotted"
+        ? ` stroke-dasharray="${number(borderWidth * 3)} ${number(borderWidth * 2)}"`
+        : "";
+    let filter = "";
+    if (style.boxShadow && style.boxShadow !== "none") {
+      const shadow = simpleBoxShadow(style.boxShadow);
+      if (shadow) {
+        const filterId = `shadow-${++id}`;
+        const floodOpacity =
+          shadow.opacity === null
+            ? ""
+            : ` flood-opacity="${number(shadow.opacity)}"`;
+        defs.push(
+          `<filter id="${filterId}" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="${number(shadow.offsetX)}" dy="${number(shadow.offsetY)}" stdDeviation="${number(shadow.blur / 2)}" flood-color="${xml(shadow.color)}"${floodOpacity}/></filter>`,
+        );
+        filter = ` filter="url(#${filterId})"`;
+        if (shadow.spread !== 0 || splitCssList(style.boxShadow).length > 1) {
+          approximated.push({
+            node: elementId,
+            note: "Shadow spread or additional shadows approximated",
+          });
+        }
+      } else {
+        approximated.push({
+          node: elementId,
+          note: "Complex box shadow omitted",
+        });
+      }
+    }
+
+    const text = directText(element);
+    const shapeNeeded =
+      fill !== "none" || stroke !== "none" || radius > 0 || filter !== "";
+    const shape = shapeNeeded
+      ? `<rect id="${xml(elementId)}" data-name="${xml(name)}" x="${number(x)}" y="${number(y)}" width="${number(rect.width)}" height="${number(rect.height)}" rx="${number(Math.min(radius, rect.width / 2, rect.height / 2))}" fill="${xml(fill)}" stroke="${xml(stroke)}" stroke-width="${number(borderWidth)}"${dash}${opacityAttr}${filter}/>`
+      : "";
+    let textNode = "";
+    if (text) {
+      const fontSize = Number.parseFloat(style.fontSize || "16") || 16;
+      const align = style.textAlign;
+      const anchor =
+        align === "center"
+          ? "middle"
+          : align === "right" || align === "end"
+            ? "end"
+            : "start";
+      const paddingLeft = Number.parseFloat(style.paddingLeft || "0") || 0;
+      const paddingRight = Number.parseFloat(style.paddingRight || "0") || 0;
+      const paddingTop = Number.parseFloat(style.paddingTop || "0") || 0;
+      const paddingBottom = Number.parseFloat(style.paddingBottom || "0") || 0;
+      const contentWidth = Math.max(0, rect.width - paddingLeft - paddingRight);
+      const textX =
+        anchor === "middle"
+          ? x + paddingLeft + contentWidth / 2
+          : anchor === "end"
+            ? x + rect.width - paddingRight
+            : x + paddingLeft;
+      const lineHeight =
+        Number.parseFloat(style.lineHeight || "") || fontSize * 1.2;
+      const contentHeight = Math.max(
+        0,
+        rect.height - paddingTop - paddingBottom,
+      );
+      const textY =
+        y +
+        paddingTop +
+        Math.max(fontSize, (contentHeight - lineHeight) / 2 + fontSize);
+      const measuredLines = measuredDirectTextLines(element);
+      const textContent =
+        measuredLines && measuredLines.length > 1
+          ? measuredLines
+              .map(
+                (line) =>
+                  `<tspan x="${number(line.left - originX)}" y="${number(line.top - originY + fontSize)}">${xml(line.text)}</tspan>`,
+              )
+              .join("")
+          : xml(text);
+      textNode = `<text data-name="${xml(name)}" x="${number(textX)}" y="${number(textY)}" fill="${xml(style.color)}" font-family="${xml(style.fontFamily)}" font-size="${number(fontSize)}" font-weight="${xml(style.fontWeight)}" font-style="${xml(style.fontStyle)}" letter-spacing="${xml(style.letterSpacing)}" text-anchor="${anchor}"${opacityAttr}>${textContent}</text>`;
+    }
+    if (shape || textNode) vectorized.push(elementId);
+    return `${shape}${textNode}${children}`;
+  };
+
+  const body = serialize(root);
+  if (!body)
+    throw new Error("The live preview has no visible exportable layers");
+  const title = source.title ? `<title>${xml(source.title)}</title>` : "";
+  const defsMarkup = defs.length ? `<defs>${defs.join("")}</defs>` : "";
+  return {
+    ok: true,
+    svg:
+      `<?xml version="1.0" encoding="UTF-8"?>\n` +
+      `<svg xmlns="${XMLNS}" xmlns:xlink="http://www.w3.org/1999/xlink" width="${number(width)}" height="${number(height)}" viewBox="0 0 ${number(width)} ${number(height)}">${title}${defsMarkup}${body}</svg>`,
+    filename: safeClientFilename(source.title),
+    report: {
+      source: "live-dom",
+      vectorized,
+      approximated,
+      rasterized: [],
+      omitted,
+      warnings:
+        approximated.length > 0
+          ? [
+              "Some live CSS effects were flattened or omitted; inspect the approximations report.",
+            ]
+          : [],
+      vectorizedTextCaveat:
+        "Figma may convert imported SVG text to outlined vector paths.",
+    },
+  };
+}
+
+function bytesToBase64(bytes: Uint8Array): string {
+  let binary = "";
+  const chunkSize = 0x8000;
+  for (let offset = 0; offset < bytes.length; offset += chunkSize) {
+    binary += String.fromCharCode(
+      ...bytes.subarray(offset, offset + chunkSize),
+    );
+  }
+  return btoa(binary);
+}
+
+async function embedLiveSvgImages(
+  result: FigmaSvgExportActionResult & { svg: string },
+): Promise<FigmaSvgExportActionResult & { svg: string }> {
+  const parsed = new DOMParser().parseFromString(result.svg, "image/svg+xml");
+  if (parsed.querySelector("parsererror")) return result;
+  const omitted: Array<{ node: string; reason: string }> = [];
+  await Promise.all(
+    Array.from(parsed.querySelectorAll("image")).map(async (image) => {
+      const href =
+        image.getAttribute("href") || image.getAttribute("xlink:href");
+      if (!href || !/^https?:\/\//i.test(href)) return;
+      try {
+        const response = await fetch(href, {
+          credentials: "omit",
+          redirect: "follow",
+          signal: AbortSignal.timeout(10_000),
+        });
+        const mimeType = (response.headers.get("content-type") || "")
+          .split(";", 1)[0]
+          .trim()
+          .toLowerCase();
+        const contentLength = Number(
+          response.headers.get("content-length") || 0,
+        );
+        if (
+          !response.ok ||
+          !CLIENT_IMAGE_MIME_TYPES.has(mimeType) ||
+          (Number.isFinite(contentLength) &&
+            contentLength > MAX_CLIENT_EMBEDDED_IMAGE_BYTES)
+        ) {
+          throw new Error("image response was not safe to embed");
+        }
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        if (bytes.byteLength > MAX_CLIENT_EMBEDDED_IMAGE_BYTES) {
+          throw new Error("image exceeded the embed size limit");
+        }
+        image.setAttribute(
+          "href",
+          `data:${mimeType};base64,${bytesToBase64(bytes)}`,
+        );
+        image.removeAttribute("xlink:href");
+      } catch {
+        // Do not persist an expiring Figma CDN URL in a supposedly self-
+        // contained artifact. A missing image is explicit in the report and
+        // safer than an export that silently breaks hours later.
+        omitted.push({
+          node: image.getAttribute("id") || "image",
+          reason: "Remote image could not be safely embedded",
+        });
+        image.remove();
+      }
+    }),
+  );
+  const report =
+    result.report && typeof result.report === "object"
+      ? (result.report as Record<string, unknown>)
+      : {};
+  const previousOmitted = Array.isArray(report.omitted) ? report.omitted : [];
+  const previousWarnings = Array.isArray(report.warnings)
+    ? report.warnings
+    : [];
+  return {
+    ...result,
+    svg: new XMLSerializer().serializeToString(parsed.documentElement),
+    report: {
+      ...report,
+      omitted: [...previousOmitted, ...omitted],
+      warnings:
+        omitted.length > 0
+          ? [
+              ...previousWarnings,
+              "One or more remote images were omitted because they could not be safely embedded.",
+            ]
+          : previousWarnings,
+    },
+  };
+}
+
+/**
+ * Defense-in-depth sanitizer for cross-origin runtime snapshots. The bridge
+ * already strips active content before posting; this receiver repeats the
+ * policy before assigning srcdoc so a forged/stale message is still inert.
+ */
+export function sanitizeLiveFigmaSvgSnapshotHtml(html: string): string {
+  const parsed = new DOMParser().parseFromString(html, "text/html");
+  parsed
+    .querySelectorAll(
+      "script,iframe,object,embed,base,link,meta,template,noscript,foreignObject,video,audio,source,track,animate,set",
+    )
+    .forEach((node) => node.remove());
+  for (const node of [
+    parsed.documentElement,
+    ...Array.from(parsed.querySelectorAll("*")),
+  ]) {
+    for (const attribute of Array.from(node.attributes)) {
+      const name = attribute.name.toLowerCase();
+      if (
+        name.startsWith("on") ||
+        name === "srcdoc" ||
+        name === "autofocus" ||
+        name === "action" ||
+        name === "formaction" ||
+        /javascript\s*:/i.test(attribute.value)
+      ) {
+        node.removeAttribute(attribute.name);
+      }
+    }
+  }
+  let head = parsed.head;
+  if (!head) {
+    head = parsed.createElement("head");
+    parsed.documentElement.prepend(head);
+  }
+  const csp = parsed.createElement("meta");
+  csp.setAttribute("http-equiv", "Content-Security-Policy");
+  csp.setAttribute(
+    "content",
+    "default-src 'none'; img-src data: blob:; style-src 'unsafe-inline'; font-src data:; media-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'",
+  );
+  head.prepend(csp);
+  return `<!doctype html>\n${parsed.documentElement.outerHTML}`;
+}
+
+export function prepareLiveFigmaSvgSnapshotFrame(
+  iframe: HTMLIFrameElement,
+  snapshot: LiveFigmaSvgSnapshot,
+): void {
+  iframe.setAttribute("aria-hidden", "true");
+  // allow-same-origin keeps contentDocument readable; deliberately omit
+  // allow-scripts, allow-forms, allow-popups, and allow-top-navigation.
+  iframe.setAttribute("sandbox", "allow-same-origin");
+  iframe.setAttribute("referrerpolicy", "no-referrer");
+  iframe.tabIndex = -1;
+  iframe.style.cssText =
+    "position:fixed;inset:auto auto -100000px -100000px;visibility:hidden;pointer-events:none;border:0";
+  iframe.style.width = `${positive(snapshot.width) ? snapshot.width : 1440}px`;
+  iframe.style.height = `${positive(snapshot.height) ? snapshot.height : 1200}px`;
+  iframe.srcdoc = sanitizeLiveFigmaSvgSnapshotHtml(snapshot.html);
+}
+
+async function buildFigmaSvgFromLiveSnapshot(
+  snapshot: LiveFigmaSvgSnapshot,
+  nodeId?: string,
+): Promise<FigmaSvgExportActionResult & { svg: string }> {
+  if (typeof document === "undefined") {
+    throw new Error("Live snapshot rendering requires a browser document");
+  }
+  const iframe = document.createElement("iframe");
+  prepareLiveFigmaSvgSnapshotFrame(iframe, snapshot);
+  document.body.appendChild(iframe);
+  try {
+    await new Promise<void>((resolve, reject) => {
+      const timer = window.setTimeout(
+        () => reject(new Error("Live export snapshot timed out")),
+        3_000,
+      );
+      iframe.addEventListener(
+        "load",
+        () => {
+          window.clearTimeout(timer);
+          resolve();
+        },
+        { once: true },
+      );
+    });
+    const doc = iframe.contentDocument;
+    if (!doc?.documentElement) throw new Error("Live snapshot did not render");
+    return buildFigmaSvgFromLiveDocument(
+      {
+        document: doc,
+        width: snapshot.width,
+        height: snapshot.height,
+        title: snapshot.title,
+      },
+      nodeId,
+    );
+  } finally {
+    iframe.remove();
+  }
 }
 
 function defaultFigmaSvgCopyEnvironment(): FigmaSvgCopyEnvironment {
@@ -124,6 +855,68 @@ export interface FigmaSvgCopyResult {
   report: unknown;
 }
 
+function actionParams(params: FigmaSvgExportParams): FigmaSvgExportParams {
+  return {
+    ...(params.designId ? { designId: params.designId } : {}),
+    ...(params.fileId ? { fileId: params.fileId } : {}),
+    ...(params.filename ? { filename: params.filename } : {}),
+    ...(params.nodeId ? { nodeId: params.nodeId } : {}),
+    ...(params.embedImages !== undefined
+      ? { embedImages: params.embedImages }
+      : {}),
+    ...(positive(params.width) ? { width: params.width } : {}),
+    ...(positive(params.height) ? { height: params.height } : {}),
+  };
+}
+
+/**
+ * Prefer a synchronous live-DOM conversion and retain the action as a fallback
+ * for agent calls, non-rendered screens, and browsers that cannot expose the
+ * preview document. The live path is what makes exports hosted/serverless-safe.
+ */
+export async function exportDesignAsFigmaSvg(
+  params: FigmaSvgExportParams,
+  environment: FigmaSvgCopyEnvironment = defaultFigmaSvgCopyEnvironment(),
+): Promise<FigmaSvgExportActionResult & { svg: string }> {
+  if (environment.liveSource) {
+    try {
+      const result = buildFigmaSvgFromLiveDocument(
+        environment.liveSource,
+        params.nodeId,
+      );
+      return params.embedImages === false
+        ? result
+        : await embedLiveSvgImages(result);
+    } catch {
+      // A detached/cross-origin preview may become unreadable between the menu
+      // opening and activation. The authenticated action remains the fallback.
+    }
+  }
+  if (environment.liveSnapshot) {
+    try {
+      const result = await buildFigmaSvgFromLiveSnapshot(
+        environment.liveSnapshot,
+        params.nodeId,
+      );
+      return params.embedImages === false
+        ? result
+        : await embedLiveSvgImages(result);
+    } catch {
+      // Snapshot may have expired during a dev-server HMR replacement.
+    }
+  }
+  const callExportAction =
+    environment.callExportAction ?? defaultCallExportAction;
+  const result = await callExportAction(actionParams(params));
+  if (!result.ok || !result.svg) {
+    throw new FigmaSvgCopyError(
+      "render-failed",
+      new Error(result.reason ?? "Figma SVG export failed"),
+    );
+  }
+  return result as FigmaSvgExportActionResult & { svg: string };
+}
+
 /**
  * Exports a design screen (or a selected element's subtree via `nodeId`) as
  * a genuinely vector SVG through the `export-design-as-figma-svg` action,
@@ -144,33 +937,32 @@ export async function copyDesignAsFigmaSvg(
   params: FigmaSvgExportParams,
   environment: FigmaSvgCopyEnvironment = defaultFigmaSvgCopyEnvironment(),
 ): Promise<FigmaSvgCopyResult> {
-  if (!canCopyFigmaSvgToClipboard(environment)) {
+  // Callers normally provide only a liveSource/liveSnapshot. Preserve the real
+  // browser clipboard defaults instead of treating that partial override as a
+  // complete environment (which made the hosted live-DOM path always report
+  // "unsupported" despite navigator.clipboard being available).
+  const resolvedEnvironment = {
+    ...defaultFigmaSvgCopyEnvironment(),
+    ...environment,
+  };
+  if (!canCopyFigmaSvgToClipboard(resolvedEnvironment)) {
     throw new FigmaSvgCopyError("unsupported");
   }
 
-  const callExportAction =
-    environment.callExportAction ?? defaultCallExportAction;
-  const clipboard = environment.clipboard;
-  const ClipboardItemCtor = environment.ClipboardItem;
+  const clipboard = resolvedEnvironment.clipboard;
+  const ClipboardItemCtor = resolvedEnvironment.ClipboardItem;
 
   let renderError: unknown;
-  const exportPromise = callExportAction(params)
-    .then((result) => {
-      if (!result.ok || !result.svg) {
-        throw new FigmaSvgCopyError(
-          "render-failed",
-          new Error(result.reason ?? "Figma SVG export failed"),
-        );
-      }
-      return result as FigmaSvgExportActionResult & { svg: string };
-    })
-    .catch((error: unknown) => {
-      renderError =
-        error instanceof FigmaSvgCopyError
-          ? error
-          : new FigmaSvgCopyError("render-failed", error);
-      throw renderError;
-    });
+  const exportPromise = exportDesignAsFigmaSvg(
+    params,
+    resolvedEnvironment,
+  ).catch((error: unknown) => {
+    renderError =
+      error instanceof FigmaSvgCopyError
+        ? error
+        : new FigmaSvgCopyError("render-failed", error);
+    throw renderError;
+  });
   // ClipboardItem owns the promises below in real browsers. Keep a separate
   // observer so test doubles or an early clipboard rejection cannot surface an
   // unhandled action/render rejection.