@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-VZTZJTPP.js

@@ -0,0 +1,961 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  pixelFrameSVGBody
+} from "./chunk-CU5XZYFG.js";
+import {
+  photoCredits,
+  photoCreditsText
+} from "./chunk-VEI7VBHL.js";
+import {
+  layoutText,
+  resolveThreadNode,
+  rootMatrix
+} from "./chunk-J7PAXPJN.js";
+import {
+  attachTextPath,
+  polylineOf,
+  reseamAt
+} from "./chunk-BVAEGM2L.js";
+import {
+  strokeBehindFill
+} from "./chunk-E5ADUDER.js";
+import {
+  cornerRadii,
+  fmt,
+  ringsCmds,
+  roundedRectCmds,
+  shapeCmds,
+  toSvgD,
+  trimCmds,
+  vectorCmds
+} from "./chunk-BDOXBX6U.js";
+import {
+  encodeImageData,
+  sliceRegion
+} from "./chunk-CMBEGDWH.js";
+import {
+  documentForExport
+} from "./chunk-CLEN2YD3.js";
+import {
+  paletteColors,
+  stockPatternSvg,
+  stockPatternUrl
+} from "./chunk-2VBBY4F2.js";
+import {
+  bytesToBase64,
+  encodePng
+} from "./chunk-NL4IY2P4.js";
+import {
+  childrenOf
+} from "./chunk-HYO4HW5U.js";
+import {
+  pageTokenContext,
+  substitutePageTokens
+} from "./chunk-72TPH6VC.js";
+import {
+  capability
+} from "./chunk-BMOIW4EK.js";
+import {
+  nodeFillRule,
+  paintBox,
+  resolvedFills,
+  resolvedStrokes,
+  vectorFillPaint
+} from "./chunk-BRLZFJJU.js";
+import {
+  getNativeExtension
+} from "./chunk-5YD4P6WO.js";
+import {
+  resolveTextNodeStyles
+} from "./chunk-THLMVVIT.js";
+import {
+  trackLoad
+} from "./chunk-SZGQEUZO.js";
+import {
+  customFontRegistry
+} from "./chunk-MOJFHUGP.js";
+import {
+  isMediaUrl,
+  mediaToDataUrl
+} from "./chunk-R74YSMDO.js";
+import {
+  getWorldRenderBounds,
+  glyphInstancesToRings,
+  init_routing,
+  init_scene_graph,
+  init_text_rings,
+  trimPolyline
+} from "./chunk-MQ66HDKC.js";
+import {
+  init_variables,
+  resolveNodeVariables
+} from "./chunk-FREAHUVP.js";
+import {
+  activeTrim,
+  blursOf,
+  init_effects,
+  init_trim,
+  shadowsOf,
+  trimmedShapeAsVector
+} from "./chunk-4VICNBUI.js";
+import {
+  init_scene3d,
+  is3DContext
+} from "./chunk-NMFXCSU4.js";
+import {
+  IDENTITY,
+  init_transform,
+  invert,
+  isIdentity,
+  localMatrix,
+  multiply
+} from "./chunk-X53QDCNX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// lib/io/svg-export.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+
+// lib/engine/pattern-fill.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var exportNodeFn = null;
+var releaseFn = null;
+var currentDoc = null;
+var cache = /* @__PURE__ */ new Map();
+var objectIds = /* @__PURE__ */ new WeakMap();
+var nextObjectId = 1;
+var objId = (o) => {
+  let id = objectIds.get(o);
+  if (!id) {
+    id = nextObjectId++;
+    objectIds.set(o, id);
+  }
+  return id;
+};
+function subtreeRefs(doc, id, out = [], depth = 0) {
+  const n = doc.nodes[id];
+  if (!n || depth > 32) return out;
+  out.push(n);
+  for (const c of n.childIds || []) subtreeRefs(doc, c, out, depth + 1);
+  return out;
+}
+function patternParamsKey(p) {
+  return [
+    p.patternSourceId,
+    p.patternScale ?? 1,
+    p.patternSpacing?.x ?? 0,
+    p.patternSpacing?.y ?? 0,
+    p.patternOffset?.x ?? 0,
+    p.patternOffset?.y ?? 0,
+    p.patternAlignment ?? "GRID"
+  ].join("|");
+}
+function getPatternTileUrl(paint, ownerId) {
+  if (paint.patternPreset) return stockPatternUrl(paint.patternPreset, stockColors(paint), paint.patternScale ?? 1);
+  const doc = currentDoc;
+  const srcId = paint.patternSourceId;
+  if (!doc || !srcId || srcId === ownerId || !doc.nodes[srcId]) return null;
+  const key = patternParamsKey(paint);
+  const refs = subtreeRefs(doc, srcId);
+  const sig = refs.map((r) => objId(r)).join(",");
+  const hit = cache.get(key);
+  if (hit && hit.sig === sig) return hit.url;
+  if (hit?.pending) return hit.url;
+  const entry = { sig, refs, url: hit?.url ?? null, pending: true };
+  cache.set(key, entry);
+  const exporter = exportNodeFn;
+  if (!exporter || typeof document === "undefined") {
+    entry.pending = false;
+    return entry.url;
+  }
+  trackLoad(new Promise((settled) => setTimeout(async () => {
+    try {
+      const src = doc.nodes[srcId];
+      const img = src ? await exporter(src, Math.max(0.05, paint.patternScale ?? 1), doc) : null;
+      const prev = entry.url;
+      entry.url = img ? await composeTile(img, paint) : null;
+      if (prev && prev !== entry.url && releaseFn) {
+        const rel = releaseFn;
+        setTimeout(() => {
+          if (![...cache.values()].some((e) => e.url === prev)) rel(prev);
+        }, 2e3);
+      }
+    } catch {
+      entry.url = null;
+    }
+    entry.pending = false;
+    settled();
+    if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("popcraft-render"));
+  }, 0)));
+  return entry.url;
+}
+function stockColors(paint) {
+  const d = paletteColors("denim");
+  const c = paint.patternColors ?? [];
+  return [c[0] ?? d[0], c[1] ?? d[1], c[2] ?? d[2]];
+}
+function patternTileLayout(srcW, srcH, paint) {
+  const sx = Math.max(0, paint.patternSpacing?.x ?? 0);
+  const sy = Math.max(0, paint.patternSpacing?.y ?? 0);
+  const cellW = Math.max(1, Math.round(srcW + sx));
+  const cellH = Math.max(1, Math.round(srcH + sy));
+  const align = paint.patternAlignment ?? "GRID";
+  const tileW = align === "BRICK_V" ? cellW * 2 : cellW;
+  const tileH = align === "BRICK_H" ? cellH * 2 : cellH;
+  const placements = [{ x: 0, y: 0 }];
+  if (align === "BRICK_H") placements.push({ x: cellW / 2, y: cellH }, { x: cellW / 2 - cellW, y: cellH });
+  if (align === "BRICK_V") placements.push({ x: cellW, y: cellH / 2 }, { x: cellW, y: cellH / 2 - cellH });
+  const ox = ((paint.patternOffset?.x ?? 0) % tileW + tileW) % tileW;
+  const oy = ((paint.patternOffset?.y ?? 0) % tileH + tileH) % tileH;
+  const out = [];
+  for (const p of placements) {
+    for (const dx of [0, -tileW]) for (const dy of [0, -tileH]) out.push({ x: p.x + ox + dx, y: p.y + oy + dy });
+  }
+  return { tileW, tileH, placements: out };
+}
+async function composeTile(img, paint) {
+  const { tileW, tileH, placements } = patternTileLayout(img.width, img.height, paint);
+  if (tileW * tileH > 4096 * 4096) return null;
+  const out = new Uint8Array(tileW * tileH * 4);
+  const src = img.data;
+  for (const p of placements) {
+    const px = Math.round(p.x), py = Math.round(p.y);
+    const y0 = Math.max(0, py), y1 = Math.min(tileH, py + img.height);
+    const x0 = Math.max(0, px), x1 = Math.min(tileW, px + img.width);
+    for (let y = y0; y < y1; y++) {
+      for (let x = x0; x < x1; x++) {
+        const i = ((y - py) * img.width + (x - px)) * 4, o = (y * tileW + x) * 4;
+        const sa = src[i + 3] / 255;
+        if (sa <= 0) continue;
+        const da = out[o + 3] / 255;
+        const a = sa + da * (1 - sa);
+        for (let c = 0; c < 3; c++) out[o + c] = Math.round((src[i + c] * sa + out[o + c] * da * (1 - sa)) / a);
+        out[o + 3] = Math.round(a * 255);
+      }
+    }
+  }
+  return `data:image/png;base64,${bytesToBase64(await encodePng(tileW, tileH, out))}`;
+}
+
+// lib/io/svg-export.ts
+init_variables();
+init_scene_graph();
+init_routing();
+init_effects();
+init_scene3d();
+init_transform();
+init_trim();
+init_text_rings();
+function matToSvg(m) {
+  return `matrix(${m.map((v) => fmt(v)).join(" ")})`;
+}
+function colorToSVG(color) {
+  const r = Math.round(color.r * 255);
+  const g = Math.round(color.g * 255);
+  const b = Math.round(color.b * 255);
+  return `rgb(${r},${g},${b})`;
+}
+function escapeXML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function uid(ctx, prefix) {
+  return `${prefix}${ctx.nextId++}`;
+}
+var resolvedFills2 = (node, ctx) => resolvedFills(node, ctx.styles);
+var resolvedStrokes2 = (node, ctx) => resolvedStrokes(node, ctx.styles);
+function boxUnits(node) {
+  const { width, height } = paintBox(node);
+  if (!(width > 0) || !(height > 0)) return 'gradientUnits="objectBoundingBox"';
+  return `gradientUnits="userSpaceOnUse" gradientTransform="matrix(${fmt(width)} 0 0 ${fmt(height)} 0 0)"`;
+}
+async function paintToFill(paint, node, ctx) {
+  const opacity = paint.opacity ?? 1;
+  if (paint.visible === false) return { fill: "none", opacity: 1 };
+  if (paint.type === "SOLID" && paint.color) {
+    return { fill: colorToSVG(paint.color), opacity: opacity * paint.color.a };
+  }
+  if (paint.type === "GRADIENT_LINEAR" || paint.type === "GRADIENT_RADIAL") {
+    const stops = [...paint.gradientStops || []].sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+    if (stops.length < 2) return { fill: "none", opacity: 1 };
+    const id = uid(ctx, "grad");
+    const stopsSvg = stops.map(
+      (s) => `<stop offset="${fmt(s.position ?? 0)}" stop-color="${colorToSVG(s.color)}" stop-opacity="${fmt(s.color.a ?? 1)}"/>`
+    ).join("");
+    const handles = paint.gradientHandlePositions || [
+      { x: 0, y: 0.5 },
+      { x: 1, y: 0.5 }
+    ];
+    const units = boxUnits(node);
+    if (paint.type === "GRADIENT_LINEAR") {
+      const [p0, p1] = [handles[0], handles[1] || { x: 1, y: 0.5 }];
+      ctx.defs.push(
+        `<linearGradient id="${id}" ${units} x1="${fmt(p0.x)}" y1="${fmt(p0.y)}" x2="${fmt(p1.x)}" y2="${fmt(p1.y)}">${stopsSvg}</linearGradient>`
+      );
+    } else {
+      const c = handles[0] || { x: 0.5, y: 0.5 };
+      const edge = handles[1] || { x: 1, y: 0.5 };
+      const r = Math.hypot(edge.x - c.x, edge.y - c.y) || 0.5;
+      ctx.defs.push(
+        `<radialGradient id="${id}" ${units} cx="${fmt(c.x)}" cy="${fmt(c.y)}" r="${fmt(r)}">${stopsSvg}</radialGradient>`
+      );
+    }
+    return { fill: `url(#${id})`, opacity: 1 };
+  }
+  if (paint.type === "IMAGE") {
+    const href = await resolveImageHref(paint);
+    if (!href) return null;
+    const id = uid(ctx, "img");
+    ctx.defs.push(
+      `<pattern id="${id}" patternUnits="userSpaceOnUse" x="0" y="0" width="${fmt(paintBox(node).width)}" height="${fmt(paintBox(node).height)}"><image href="${href}" xlink:href="${href}" width="${fmt(node.width)}" height="${fmt(node.height)}" preserveAspectRatio="none"/></pattern>`
+    );
+    return { fill: `url(#${id})`, opacity };
+  }
+  if (paint.type === "PATTERN" && paint.patternPreset) {
+    const tile = stockPatternSvg(paint.patternPreset, stockColors(paint), paint.patternScale ?? 1, 1);
+    const m = tile ? /width="([\d.]+)" height="([\d.]+)"/.exec(tile) : null;
+    if (tile && m) {
+      const w = parseFloat(m[1]), h = parseFloat(m[2]);
+      const { tileW, tileH, placements } = patternTileLayout(w, h, paint);
+      const symId = uid(ctx, "patsrc");
+      const id = uid(ctx, "pat");
+      ctx.defs.push(`<g id="${symId}">${tile.replace('<svg xmlns="http://www.w3.org/2000/svg" ', "<svg ")}</g>`);
+      const uses = placements.map((pl) => `<use href="#${symId}" xlink:href="#${symId}" x="${fmt(pl.x)}" y="${fmt(pl.y)}"/>`).join("");
+      ctx.defs.push(`<pattern id="${id}" patternUnits="userSpaceOnUse" x="0" y="0" width="${fmt(tileW)}" height="${fmt(tileH)}">${uses}</pattern>`);
+      return { fill: `url(#${id})`, opacity };
+    }
+  }
+  if (paint.type === "PATTERN") {
+    const srcId = paint.patternSourceId;
+    const src = srcId ? ctx.doc.nodes[srcId] : null;
+    const rb = src ? getWorldRenderBounds(ctx.doc, src.id) : null;
+    if (src && rb && srcId !== node.id && !(ctx.patternStack || []).includes(srcId)) {
+      const sc = Math.max(0.05, paint.patternScale ?? 1);
+      const { tileW, tileH, placements } = patternTileLayout(Math.round((rb.maxX - rb.minX) * sc), Math.round((rb.maxY - rb.minY) * sc), paint);
+      ctx.patternStack = [...ctx.patternStack || [], srcId];
+      const body = await emitNode(src, ctx, IDENTITY, true);
+      ctx.patternStack = ctx.patternStack.slice(0, -1);
+      const symId = uid(ctx, "patsrc");
+      const patId = uid(ctx, "pat");
+      ctx.defs.push(`<g id="${symId}" transform="scale(${fmt(sc)}) translate(${fmt(-rb.minX)} ${fmt(-rb.minY)})">${body}</g>`);
+      const uses = placements.map((pl) => `<use href="#${symId}" xlink:href="#${symId}" x="${fmt(pl.x)}" y="${fmt(pl.y)}"/>`).join("");
+      ctx.defs.push(`<pattern id="${patId}" patternUnits="userSpaceOnUse" x="0" y="0" width="${fmt(tileW)}" height="${fmt(tileH)}">${uses}</pattern>`);
+      return { fill: `url(#${patId})`, opacity };
+    }
+    const href = getPatternTileUrl(paint, node.id);
+    if (!href) return null;
+    const dims = await imageSize(href);
+    if (!dims) return null;
+    const id = uid(ctx, "pat");
+    ctx.defs.push(
+      `<pattern id="${id}" patternUnits="userSpaceOnUse" x="0" y="0" width="${fmt(dims.w)}" height="${fmt(dims.h)}"><image href="${href}" xlink:href="${href}" width="${fmt(dims.w)}" height="${fmt(dims.h)}"/></pattern>`
+    );
+    return { fill: `url(#${id})`, opacity };
+  }
+  if (paint.type === "VIDEO" && paint.videoHash) {
+    const { capturePoster } = await import("./video-poster-M5YI4DP5.js");
+    const href = await capturePoster(paint.videoHash, paint.videoPosterTime ?? 0, 1280);
+    if (!href) return null;
+    const id = uid(ctx, "vid");
+    ctx.defs.push(
+      `<pattern id="${id}" patternUnits="userSpaceOnUse" x="0" y="0" width="${fmt(paintBox(node).width)}" height="${fmt(paintBox(node).height)}"><image href="${href}" xlink:href="${href}" width="${fmt(node.width)}" height="${fmt(node.height)}" preserveAspectRatio="${paint.scaleMode === "FIT" ? "xMidYMid meet" : "xMidYMid slice"}"/></pattern>`
+    );
+    return { fill: `url(#${id})`, opacity };
+  }
+  return null;
+}
+function imageSize(src) {
+  if (typeof Image === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve({ w: img.naturalWidth, h: img.naturalHeight });
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}
+async function resolveImageHref(paint) {
+  const raw = paint.imageUrl || paint.imageHash;
+  if (!raw) return null;
+  if (isMediaUrl(raw)) return mediaToDataUrl(raw);
+  const src = raw;
+  if (src.startsWith("data:")) return src;
+  try {
+    const res = await fetch(src);
+    const blob = await res.blob();
+    return await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  } catch {
+    return null;
+  }
+}
+var roundedRectPath = (w, h, radii) => toSvgD(roundedRectCmds(w, h, radii));
+var shapePathFor = (node, ctx) => {
+  const c = shapeCmds(node, ctx.doc.nodes);
+  return c ? toSvgD(c) : null;
+};
+function strokeAttrs(stroke) {
+  const width = Array.isArray(stroke.width) ? Math.max(...stroke.width) : stroke.width;
+  let attrs = `stroke="${colorToSVG(stroke.color)}" stroke-width="${fmt(width)}"`;
+  const alpha = (stroke.color.a ?? 1) * (stroke.opacity ?? 1);
+  if (alpha < 1) attrs += ` stroke-opacity="${fmt(alpha)}"`;
+  const cap = stroke.cap === "ROUND" ? "round" : stroke.cap === "SQUARE" ? "square" : "butt";
+  attrs += ` stroke-linecap="${cap}"`;
+  if (stroke.join) attrs += ` stroke-linejoin="${stroke.join.toLowerCase()}"`;
+  if ((stroke.dashPattern?.length ?? 0) >= 2) attrs += ` stroke-dasharray="${stroke.dashPattern.slice(0, 2).join(" ")}"`;
+  return attrs;
+}
+function strokeElement(pathD, stroke, ctx) {
+  const width = Array.isArray(stroke.width) ? Math.max(...stroke.width) : stroke.width;
+  if (width <= 0) return "";
+  const base = strokeAttrs(stroke);
+  if (stroke.alignment === "INSIDE") {
+    const clipId = uid(ctx, "sclip");
+    ctx.defs.push(`<clipPath id="${clipId}"><path d="${pathD}"/></clipPath>`);
+    return `<path d="${pathD}" fill="none" ${base.replace(`stroke-width="${fmt(width)}"`, `stroke-width="${fmt(width * 2)}"`)} clip-path="url(#${clipId})"/>`;
+  }
+  if (stroke.alignment === "OUTSIDE") {
+    const maskId = uid(ctx, "smask");
+    ctx.defs.push(
+      `<mask id="${maskId}" maskUnits="userSpaceOnUse" x="-10000" y="-10000" width="20000" height="20000"><rect x="-10000" y="-10000" width="20000" height="20000" fill="white"/><path d="${pathD}" fill="black"/></mask>`
+    );
+    return `<path d="${pathD}" fill="none" ${base.replace(`stroke-width="${fmt(width)}"`, `stroke-width="${fmt(width * 2)}"`)} mask="url(#${maskId})"/>`;
+  }
+  return `<path d="${pathD}" fill="none" ${base}/>`;
+}
+function effectFilter(node, ctx, totalMat) {
+  const scene = node;
+  const shadowList = shadowsOf(node, ctx.styles);
+  const drop = shadowList.find((s) => s.type === "DROP_SHADOW");
+  const inner = shadowList.find((s) => s.type === "INNER_SHADOW");
+  const layerBlur = blursOf(node, ctx.styles).find((b) => b.type === "LAYER" && !b.noise && !b.progressive);
+  if (!drop && !inner && !layerBlur) return "";
+  const inv = invert([totalMat[0], totalMat[1], totalMat[2], totalMat[3], 0, 0]);
+  if (!inv) return "";
+  const localOffset = (ox, oy) => [
+    inv[0] * ox + inv[2] * oy,
+    inv[1] * ox + inv[3] * oy
+  ];
+  let pad = 2;
+  for (const sh of [drop, inner]) {
+    if (sh) pad = Math.max(pad, Math.abs(sh.offset.x) + Math.abs(sh.offset.y) + sh.blur * 2 + (sh.spread || 0));
+  }
+  if (layerBlur) pad = Math.max(pad, layerBlur.radius * 2);
+  const region = `x="${fmt(-pad)}" y="${fmt(-pad)}" width="${fmt(node.width + 2 * pad)}" height="${fmt(node.height + 2 * pad)}" filterUnits="userSpaceOnUse"`;
+  const sigma = (blur) => Math.max(0.5, blur / 3);
+  const id = uid(ctx, "fx");
+  let parts = "";
+  let current = "SourceGraphic";
+  if (drop) {
+    const [dx, dy] = localOffset(drop.offset.x, drop.offset.y);
+    const spread = drop.spread || 0;
+    const knock = drop.showBehindTransparent === false;
+    if (!spread && !knock) {
+      parts += `<feDropShadow in="${current}" dx="${fmt(dx)}" dy="${fmt(dy)}" stdDeviation="${fmt(sigma(drop.blur))}" flood-color="${colorToSVG(drop.color)}" flood-opacity="${fmt(drop.color.a ?? 1)}" result="withdrop"/>`;
+    } else {
+      parts += (spread ? `<feMorphology in="SourceAlpha" operator="${spread > 0 ? "dilate" : "erode"}" radius="${fmt(Math.abs(spread))}" result="dropspread"/>` : "") + `<feGaussianBlur in="${spread ? "dropspread" : "SourceAlpha"}" stdDeviation="${fmt(drop.blur > 0 ? sigma(drop.blur) : 0)}" result="dropblur"/><feOffset in="dropblur" dx="${fmt(dx)}" dy="${fmt(dy)}" result="dropoff"/><feFlood flood-color="${colorToSVG(drop.color)}" flood-opacity="${fmt(drop.color.a ?? 1)}" result="dropcol"/><feComposite in="dropcol" in2="dropoff" operator="in" result="dropshadow"/>` + (knock ? `<feComposite in="dropshadow" in2="SourceAlpha" operator="out" result="dropshadow"/>` : "") + `<feMerge result="withdrop"><feMergeNode in="dropshadow"/><feMergeNode in="${current}"/></feMerge>`;
+    }
+    current = "withdrop";
+  }
+  if (inner) {
+    const [dx, dy] = localOffset(inner.offset.x, inner.offset.y);
+    const spread = inner.spread || 0;
+    parts += `<feComponentTransfer in="SourceAlpha" result="inv"><feFuncA type="table" tableValues="1 0"/></feComponentTransfer>` + (spread > 0 ? `<feMorphology in="inv" operator="dilate" radius="${fmt(spread)}" result="inv"/>` : "") + `<feGaussianBlur in="inv" stdDeviation="${fmt(sigma(inner.blur))}" result="innerblur"/><feOffset in="innerblur" dx="${fmt(dx)}" dy="${fmt(dy)}" result="inneroff"/><feComposite in="inneroff" in2="SourceAlpha" operator="in" result="innermask"/><feFlood flood-color="${colorToSVG(inner.color)}" flood-opacity="${fmt(inner.color.a ?? 1)}" result="innercol"/><feComposite in="innercol" in2="innermask" operator="in" result="inner"/><feMerge result="withinner"><feMergeNode in="${current}"/><feMergeNode in="inner"/></feMerge>`;
+    current = "withinner";
+  }
+  if (layerBlur) parts += `<feGaussianBlur in="${current}" stdDeviation="${fmt(sigma(layerBlur.radius))}"/>`;
+  ctx.defs.push(`<filter id="${id}" ${region}>${parts}</filter>`);
+  return ` filter="url(#${id})"`;
+}
+function blendModeStyle(node) {
+  const bm = node.blendMode;
+  if (!bm || bm === "NORMAL" || bm === "PASS_THROUGH") return "";
+  return ` style="mix-blend-mode:${bm.toLowerCase().replace(/_/g, "-")}"`;
+}
+function applyTextCase(s, textCase) {
+  if (textCase === "UPPER") return s.toUpperCase();
+  if (textCase === "LOWER") return s.toLowerCase();
+  if (textCase === "TITLE") return s.replace(/\b\w/g, (ch) => ch.toUpperCase());
+  return s;
+}
+function textNodeToSVG(node, ctx) {
+  const atlas = ctx.renderer.getTextAtlas();
+  const resolved = resolveThreadNode(ctx.doc.nodes, substitutePageTokens(resolveTextNodeStyles(node, ctx.styles), pageTokenContext(ctx.doc.nodes, node.id), ctx.doc.settings?.pageNumbering), atlas, 1);
+  if (resolved.textPath || resolved.textArea) return shapedTextToSVG(attachTextPath(resolved, ctx.doc.nodes), ctx);
+  if (resolved.styledSegments?.length) return null;
+  if (resolved.fontFamily && customFontRegistry.has(resolved.fontFamily)) return shapedTextToSVG(resolved, ctx);
+  const fillAttr = textFillAttr(resolved, node, ctx);
+  if (fillAttr === null) return null;
+  const layout = layoutText(resolved, atlas, 1);
+  return straightTextSVG(resolved, layout, fillAttr, ctx);
+}
+function textStrokeSVG(node) {
+  const stroke = node.strokes?.find((s) => s && s.visible !== false);
+  if (!stroke) return null;
+  const w = Array.isArray(stroke.width) ? Math.max(...stroke.width) : stroke.width;
+  if (!(w > 0)) return null;
+  const behind = strokeBehindFill(node) || stroke.alignment === "OUTSIDE";
+  const inside = stroke.alignment === "INSIDE";
+  if (inside && behind) return null;
+  const alpha = (stroke.color.a ?? 1) * (stroke.opacity ?? 1);
+  const join = stroke.join === "ROUND" ? "round" : stroke.join === "BEVEL" ? "bevel" : "miter";
+  const attrs = `stroke="${colorToSVG(stroke.color)}"${alpha < 1 ? ` stroke-opacity="${fmt(alpha)}"` : ""} stroke-width="${fmt(stroke.alignment === "CENTER" ? w : w * 2)}" stroke-linejoin="${join}"${behind ? ' paint-order="stroke fill"' : ""}`;
+  return { attrs, behind, inside };
+}
+function textFillAttr(resolved, node, ctx) {
+  const fill0 = resolved.fills?.[0];
+  if (fill0?.type === "IMAGE") return null;
+  let fillAttr = 'fill="rgb(0,0,0)"';
+  if (fill0?.type === "SOLID" && fill0.color) {
+    const alpha = (fill0.opacity ?? 1) * fill0.color.a;
+    fillAttr = `fill="${colorToSVG(fill0.color)}"${alpha < 1 ? ` fill-opacity="${fmt(alpha)}"` : ""}`;
+  } else if (fill0 && fill0.type.startsWith("GRADIENT")) {
+    const stops = [...fill0.gradientStops || []].sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+    if (stops.length >= 2) {
+      const id = uid(ctx, "tgrad");
+      const stopsSvg = stops.map((s) => `<stop offset="${fmt(s.position ?? 0)}" stop-color="${colorToSVG(s.color)}" stop-opacity="${fmt(s.color.a ?? 1)}"/>`).join("");
+      const h = fill0.gradientHandlePositions || [{ x: 0, y: 0.5 }, { x: 1, y: 0.5 }];
+      ctx.defs.push(
+        `<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${fmt(h[0].x * node.width)}" y1="${fmt(h[0].y * node.height)}" x2="${fmt((h[1]?.x ?? 1) * node.width)}" y2="${fmt((h[1]?.y ?? 0.5) * node.height)}">${stopsSvg}</linearGradient>`
+      );
+      fillAttr = `fill="url(#${id})"`;
+    }
+  }
+  return fillAttr;
+}
+function typeStyleAttr(resolved) {
+  const cssSettings = (m) => m && Object.keys(m).length ? Object.entries(m).map(([k, v]) => `'${k}' ${v}`).join(", ") : "";
+  const feat = cssSettings(resolved.fontFeatures);
+  const vars = cssSettings(resolved.fontVariations);
+  return feat || vars ? ` style="${escapeXML([feat && `font-feature-settings: ${feat}`, vars && `font-variation-settings: ${vars}`].filter(Boolean).join("; "))}"` : "";
+}
+function shapedTextToSVG(resolved, ctx) {
+  const fillAttr = textFillAttr(resolved, resolved, ctx);
+  if (fillAttr === null) return null;
+  const layout = layoutText(resolved, ctx.renderer.getTextAtlas(), 1);
+  const map = layout.pathMap;
+  const line = map?.lines.length === 1 ? map.lines[0] : null;
+  const chars = resolved.characters || "";
+  const scale = layout.fitScale ?? 1;
+  const poly = map ? polylineOf(map.pts, map.closed) : null;
+  const lineStart = line ? line.base : 0;
+  const seam = poly?.closed ? lineStart : 0;
+  const startOffset = lineStart - seam;
+  const runLength = line ? layout.lines[0].width + line.gap * Math.max(0, chars.length - 1) : 0;
+  const native = map && line && poly && map.effect === "RAINBOW" && !layout.overflow && !resolved.styledSegments?.length && !layout.instances.some((g) => g.emoji) && startOffset >= 0 && startOffset + runLength <= poly.length + 0.5 && !chars.includes("	");
+  if (native && map && line && poly) {
+    const id = uid(ctx, "tpath");
+    const pts = poly.closed ? reseamAt(poly, seam) : map.pts;
+    const d2 = pts.reduce((acc, v, i) => acc + (i % 2 ? `,${fmt(v)}` : `${i ? " L" : "M"}${fmt(v)}`), "");
+    ctx.defs.push(`<path id="${id}" d="${d2}"/>`);
+    const fontSize = (resolved.fontSize || 16) * scale;
+    const spacing = (resolved.letterSpacing || 0) * scale + line.gap;
+    const text = applyTextCase(chars.replace(/\n/g, " "), resolved.textCase);
+    return `<g font-family="${escapeXML(resolved.fontFamily || "Inter")}, sans-serif" font-size="${fmt(fontSize)}" font-weight="${resolved.fontWeight || 400}"${resolved.fontStyle === "italic" ? ' font-style="italic"' : ""}${spacing ? ` letter-spacing="${fmt(spacing)}"` : ""}${typeStyleAttr(resolved)} ${fillAttr}${(() => {
+      const o = textStrokeSVG(resolved);
+      return o && !o.inside ? ` ${o.attrs}` : "";
+    })()}><text><textPath href="#${id}" startOffset="${fmt(startOffset)}"><tspan dy="${fmt(line.down)}" xml:space="preserve">${escapeXML(text)}</tspan></textPath></text></g>`;
+  }
+  const rings = glyphInstancesToRings(layout.instances);
+  if (!rings.length) return "";
+  const d = toSvgD(ringsCmds(rings));
+  const outline = textStrokeSVG(resolved);
+  if (outline?.inside) {
+    const clipId = uid(ctx, "tclip");
+    ctx.defs.push(`<clipPath id="${clipId}"><path d="${d}" clip-rule="evenodd"/></clipPath>`);
+    return `<path d="${d}" fill-rule="evenodd" ${fillAttr}/><path d="${d}" fill="none" ${outline.attrs} clip-path="url(#${clipId})"/>`;
+  }
+  return `<path d="${d}" fill-rule="evenodd" ${fillAttr}${outline ? ` ${outline.attrs}` : ""}/>`;
+}
+function straightTextSVG(resolved, layout, fillAttr, ctx) {
+  const fontFamily = resolved.fontFamily || "Inter";
+  const fontSize = resolved.fontSize || 16;
+  const fontWeight = resolved.fontWeight || 400;
+  const fontStyle = resolved.fontStyle === "italic" ? ' font-style="italic"' : "";
+  const letterSpacing = resolved.letterSpacing ? ` letter-spacing="${fmt(resolved.letterSpacing)}"` : "";
+  const chars = resolved.characters || "";
+  const typeStyle = typeStyleAttr(resolved);
+  const outline = textStrokeSVG(resolved);
+  const strokeAttr = outline && !outline.inside ? ` ${outline.attrs}` : "";
+  let out = `<g font-family="${escapeXML(fontFamily)}, sans-serif" font-size="${fmt(fontSize)}" font-weight="${fontWeight}"${fontStyle}${letterSpacing}${typeStyle} ${fillAttr}${strokeAttr}>`;
+  const textStart = out.length;
+  let expectedY = null;
+  for (const m of layout.markers) out += `<text x="${fmt(m.x)}" y="${fmt(m.baseline)}" font-size="${fmt(m.fontSize)}">${escapeXML(m.text)}</text>`;
+  for (let li = 0; li < layout.lines.length; li++) {
+    const line = layout.lines[li];
+    if (expectedY !== null && Math.abs(line.y - expectedY) > 0.5) break;
+    expectedY = line.y + line.height;
+    const baseline = line.y + line.height * 0.8;
+    let x = line.x, runStart = line.startIndex;
+    const flush = (end) => {
+      const text = applyTextCase(chars.slice(runStart, end), resolved.textCase) + (end === line.endIndex && line.hyphen ? "-" : "");
+      if (text.trim()) out += `<text x="${fmt(x)}" y="${fmt(baseline)}" xml:space="preserve">${escapeXML(text)}</text>`;
+    };
+    let runX = x;
+    for (let i = line.startIndex; i < line.endIndex; i++) {
+      if (chars[i] === "	") {
+        flush(i);
+        runX += layout.glyphAdvances[i];
+        x = runX;
+        runStart = i + 1;
+        continue;
+      }
+      runX += layout.glyphAdvances[i];
+    }
+    flush(line.endIndex);
+  }
+  if (outline?.inside && ctx) {
+    const letters = out.slice(textStart);
+    const clipId = uid(ctx, "tclip");
+    ctx.defs.push(`<clipPath id="${clipId}"><g font-family="${escapeXML(fontFamily)}, sans-serif" font-size="${fmt(fontSize)}" font-weight="${fontWeight}"${fontStyle}${letterSpacing}${typeStyle}>${letters}</g></clipPath>`);
+    out += `<g fill="none" ${outline.attrs} clip-path="url(#${clipId})">${letters}</g>`;
+  }
+  for (const dec of layout.decorations || []) {
+    const [r, g, b, a] = dec.color;
+    const col = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+    const t = dec.thickness || dec.height;
+    if (dec.style === "DASHED") {
+      const y = dec.y + t / 2;
+      out += `<line x1="${fmt(dec.x)}" y1="${fmt(y)}" x2="${fmt(dec.x + dec.width)}" y2="${fmt(y)}" stroke="${col}" stroke-width="${fmt(t)}" stroke-dasharray="${fmt(t * 3)} ${fmt(t * 2)}"${a < 1 ? ` stroke-opacity="${fmt(a)}"` : ""}/>`;
+    } else {
+      out += `<rect x="${fmt(dec.x)}" y="${fmt(dec.y)}" width="${fmt(dec.width)}" height="${fmt(t)}" fill="${col}"${a < 1 ? ` fill-opacity="${fmt(a)}"` : ""}/>`;
+    }
+  }
+  out += "</g>";
+  return out;
+}
+function shortenDist(arrowType, strokeWidth, cap) {
+  const hs = Math.max(8, strokeWidth * 4);
+  if (arrowType === "TRIANGLE") return strokeWidth * 1.5;
+  if (arrowType === "DIAMOND") return strokeWidth * 1;
+  if (arrowType === "REVERSE_TRIANGLE") {
+    return 2 * hs / Math.sqrt(3) - strokeWidth;
+  }
+  if (arrowType === "CIRCLE") {
+    const r = hs * 0.4;
+    return r + Math.sqrt(Math.max(0, r * r - strokeWidth * strokeWidth / 4));
+  }
+  if (arrowType === "ARROW") return cap === "SQUARE" ? strokeWidth : strokeWidth / 2;
+  return 0;
+}
+function arrowheadSVG(type, tip, angleRad, strokeWidth, color, alpha = 1) {
+  if (!type || type === "NONE") return "";
+  const hs = Math.max(8, strokeWidth * 4);
+  const cos = Math.cos(angleRad), sin = Math.sin(angleRad);
+  const op = alpha < 1 ? ` fill-opacity="${fmt(alpha)}"` : "";
+  const strokeOp = alpha < 1 ? ` stroke-opacity="${fmt(alpha)}"` : "";
+  const pt = (dx, dy) => `${fmt(tip[0] + dx * cos - dy * sin)} ${fmt(tip[1] + dx * sin + dy * cos)}`;
+  switch (type) {
+    case "ARROW": {
+      const back = strokeWidth / 2;
+      const seg = Math.max(0, hs - strokeWidth);
+      const bx = -back + seg * Math.cos(Math.PI * 0.8);
+      const by = seg * Math.sin(Math.PI * 0.8);
+      return `<path d="M${pt(bx, -by)}L${pt(-back, 0)}L${pt(bx, by)}" fill="none" stroke="${color}"${strokeOp} stroke-width="${fmt(strokeWidth)}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    }
+    case "REVERSE_TRIANGLE": {
+      const R = hs / Math.sqrt(3);
+      return `<path d="M${pt(-2 * R, 0)}L${pt(0, -R)}L${pt(0, R)}Z" fill="${color}"${op}/>`;
+    }
+    case "CIRCLE": {
+      const r = hs * 0.4;
+      return `<circle cx="${fmt(tip[0] - r * cos)}" cy="${fmt(tip[1] - r * sin)}" r="${fmt(r)}" fill="${color}"${op}/>`;
+    }
+    case "DIAMOND": {
+      const half = hs * 0.6 * Math.SQRT2 / 2;
+      return `<path d="M${pt(0, 0)}L${pt(-half, -half)}L${pt(-2 * half, 0)}L${pt(-half, half)}Z" fill="${color}"${op}/>`;
+    }
+    case "TRIANGLE":
+    default: {
+      const R = hs / Math.sqrt(3);
+      return `<path d="M${pt(0, 0)}L${pt(-2 * R, -R)}L${pt(-2 * R, R)}Z" fill="${color}"${op}/>`;
+    }
+  }
+}
+function lineNodeToSVG(node, ctx, acc) {
+  const ln = node;
+  const strokes = resolvedStrokes2(node, ctx).filter((s) => {
+    const w = Array.isArray(s.width) ? Math.max(...s.width) : s.width;
+    return w > 0;
+  });
+  let stroke = strokes[0];
+  if (!stroke && node.type === "ARROW") {
+    stroke = { color: { r: 0, g: 0, b: 0, a: 1 }, width: 2, alignment: "CENTER", cap: "ROUND", join: "ROUND", dashPattern: [] };
+  }
+  if (!stroke) return "";
+  const width = Array.isArray(stroke.width) ? Math.max(...stroke.width) : stroke.width;
+  const color = colorToSVG(stroke.color);
+  const routed = (ln.routingMode === "ORTHOGONAL" || ln.routingMode === "BEZIER") && ln.routingPoints && ln.routingPoints.length > 1;
+  let pts;
+  let wrapStart = "";
+  let wrapEnd = "";
+  if (routed) {
+    pts = ln.routingPoints;
+    const inv = invert(acc);
+    if (!inv) return "";
+    if (!isIdentity(inv)) {
+      wrapStart = `<g transform="${matToSvg(inv)}">`;
+      wrapEnd = "</g>";
+    }
+  } else {
+    pts = [
+      { x: 0, y: node.height / 2 },
+      { x: node.width, y: node.height / 2 }
+    ];
+  }
+  const first = pts[0], second = pts[1];
+  const last = pts[pts.length - 1], beforeLast = pts[pts.length - 2];
+  const startTrim = ln.startArrowhead && ln.startArrowhead !== "NONE" ? shortenDist(ln.startArrowhead, width, stroke.cap) : 0;
+  const endTrim = ln.endArrowhead && ln.endArrowhead !== "NONE" ? shortenDist(ln.endArrowhead, width, stroke.cap) : 0;
+  const visual = trimPolyline(pts, startTrim, endTrim);
+  let out = "";
+  if (visual) {
+    let d = `M${fmt(visual[0].x)} ${fmt(visual[0].y)}`;
+    for (let i = 1; i < visual.length; i++) d += `L${fmt(visual[i].x)} ${fmt(visual[i].y)}`;
+    for (let i = strokes.length - 1; i >= 0; i--) {
+      out += `<path d="${d}" fill="none" ${strokeAttrs(strokes[i])}/>`;
+    }
+    if (strokes.length === 0) out += `<path d="${d}" fill="none" ${strokeAttrs(stroke)}/>`;
+  }
+  const headAlpha = (stroke.color.a ?? 1) * (stroke.opacity ?? 1);
+  if (ln.startArrowhead && ln.startArrowhead !== "NONE") {
+    const a = Math.atan2(first.y - second.y, first.x - second.x);
+    out += arrowheadSVG(ln.startArrowhead, [first.x, first.y], a, width, color, headAlpha);
+  }
+  if (ln.endArrowhead && ln.endArrowhead !== "NONE") {
+    const a = Math.atan2(last.y - beforeLast.y, last.x - beforeLast.x);
+    out += arrowheadSVG(ln.endArrowhead, [last.x, last.y], a, width, color, headAlpha);
+  }
+  return wrapStart + out + wrapEnd;
+}
+async function rasterFallback(node, ctx, acc) {
+  try {
+    const imageData = await ctx.renderer.exportNode(node, 2, ctx.doc, ctx.styles);
+    if (!imageData) return "";
+    const blob = await encodeImageData(imageData, "PNG");
+    if (!blob) return "";
+    const href = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+    const rb = getWorldRenderBounds(ctx.doc, node.id);
+    if (!rb) return "";
+    const inv = invert(acc);
+    if (!inv) return "";
+    const img = `<image href="${href}" xlink:href="${href}" x="${fmt(rb.minX)}" y="${fmt(rb.minY)}" width="${fmt(rb.maxX - rb.minX)}" height="${fmt(rb.maxY - rb.minY)}"/>`;
+    return isIdentity(inv) ? img : `<g transform="${matToSvg(inv)}">${img}</g>`;
+  } catch {
+    return "";
+  }
+}
+function needsRasterFallback(node, fillResults, styles) {
+  return fillResults.some((f) => f === null) || capability(node, "svg", styles).verdict === "raster";
+}
+var childrenOf2 = (node, ctx) => childrenOf(node, ctx.doc.nodes);
+async function buildMaskAttr(maskNode, ctx, acc) {
+  const content = await emitNode(maskNode, ctx, acc, false);
+  if (!content) return "";
+  const maskId = uid(ctx, "mask");
+  const maskType = maskNode.maskType || "ALPHA";
+  const style = maskType === "LUMINANCE" ? "" : ' style="mask-type:alpha"';
+  ctx.defs.push(
+    `<mask id="${maskId}"${style} maskUnits="userSpaceOnUse" x="-100000" y="-100000" width="200000" height="200000">${content}</mask>`
+  );
+  return ` mask="url(#${maskId})"`;
+}
+async function emitNode(rawNode, ctx, acc, isRoot) {
+  if (!rawNode || !rawNode.visible) return "";
+  if (rawNode.type === "SLICE") return "";
+  const node = resolveNodeVariables(
+    rawNode,
+    ctx.doc.variables,
+    ctx.doc.variableCollections,
+    ctx.doc.activeVariableModes
+  );
+  const ext = getNativeExtension(node.type);
+  if (ext) {
+    const local2 = isRoot ? rootMatrix2(node, ctx) : localMatrix(node);
+    const childAcc2 = multiply(acc, local2);
+    if (ext.toSVG) {
+      const helpers = {
+        emitText: (vNode) => textNodeToSVG(vNode, ctx) ?? "",
+        colorToSVG,
+        escapeXML,
+        fmt,
+        roundedRectPath
+      };
+      let body2 = await ext.toSVG(node, helpers);
+      for (const child of childrenOf2(node, ctx)) {
+        body2 += await emitNode(child, ctx, childAcc2, false);
+      }
+      return wrapNode(node, ctx, local2, acc, body2);
+    }
+    return rasterFallback(node, ctx, acc);
+  }
+  const local = isRoot ? rootMatrix2(node, ctx) : localMatrix(node);
+  const childAcc = multiply(acc, local);
+  if (node.type === "LINE" || node.type === "ARROW") {
+    return wrapNode(node, ctx, local, acc, lineNodeToSVG(node, ctx, childAcc));
+  }
+  if (node.type === "RASTER") return rasterFallback(node, ctx, acc);
+  if (is3DContext(node)) return rasterFallback(node, ctx, acc);
+  if (node.type === "PIXEL_GRID") {
+    const pg = node;
+    return wrapNode(node, ctx, local, acc, pixelFrameSVGBody(pg, Math.max(0, Math.min(pg.frames.length - 1, pg.activeFrame || 0))));
+  }
+  if (node.type === "TEXT") {
+    const textSvg = textNodeToSVG(node, ctx);
+    if (textSvg === null) return rasterFallback(node, ctx, acc);
+    const flipless = isRoot ? rootMatrix2(node, ctx, true) : localMatrix(node, true);
+    const filterAttr = textSvg ? effectFilter(node, ctx, multiply(acc, flipless)) : "";
+    return wrapNode(node, ctx, flipless, acc, filterAttr ? `<g${filterAttr}>${textSvg}</g>` : textSvg);
+  }
+  const bodyElements = [];
+  const pathD = node.type === "GROUP" ? null : shapePathFor(node, ctx);
+  const trim = pathD ? activeTrim(node) : void 0;
+  const strokeD = trim ? toSvgD(trimCmds(node.type === "VECTOR" ? vectorCmds(node) : vectorCmds(trimmedShapeAsVector(node)), trim)) : pathD;
+  const strokeOf = (s) => trim ? { ...s, alignment: "CENTER" } : s;
+  if (pathD) {
+    if (node.type === "VECTOR" || node.type === "BOOLEAN") {
+      const paint = vectorFillPaint(node, ctx.styles);
+      const rule = nodeFillRule(node) === "evenodd" ? ' fill-rule="evenodd"' : "";
+      if (paint && paint.type === "SOLID" && paint.color) {
+        const alpha = paint.opacity ?? paint.color.a;
+        bodyElements.push(`<path d="${pathD}" fill="${colorToSVG(paint.color)}"${alpha < 1 ? ` fill-opacity="${fmt(alpha)}"` : ""}${rule}/>`);
+      } else if (paint) {
+        const fr = await paintToFill(paint, node, ctx);
+        if (!fr || needsRasterFallback(node, [fr], ctx.styles)) return rasterFallback(node, ctx, acc);
+        if (fr.fill !== "none") bodyElements.push(`<path d="${pathD}" fill="${fr.fill}"${fr.opacity < 1 ? ` fill-opacity="${fmt(fr.opacity)}"` : ""}${rule}/>`);
+      }
+      for (const stroke of resolvedStrokes2(node, ctx).slice(0, 1)) {
+        bodyElements.push(strokeElement(strokeD, strokeOf(stroke), ctx));
+      }
+    } else if (node.type === "SECTION") {
+      const bg = node.backgroundColor;
+      if (bg) {
+        bodyElements.push(
+          `<path d="${pathD}" fill="${colorToSVG(bg)}"${(bg.a ?? 1) < 1 ? ` fill-opacity="${fmt(bg.a)}"` : ""}/>`
+        );
+      }
+    } else {
+      const fills = resolvedFills2(node, ctx).filter((f) => f.visible !== false);
+      const fillResults = await Promise.all(fills.map((f) => paintToFill(f, node, ctx)));
+      if (needsRasterFallback(node, fillResults, ctx.styles)) {
+        return rasterFallback(node, ctx, acc);
+      }
+      if (node.type === "IMAGE" && fillResults.length === 0 && node.imageUrl) {
+        const href = await resolveImageHref({ imageUrl: node.imageUrl });
+        if (href) {
+          bodyElements.push(
+            `<image href="${href}" xlink:href="${href}" width="${fmt(node.width)}" height="${fmt(node.height)}" preserveAspectRatio="none"/>`
+          );
+        } else {
+          return rasterFallback(node, ctx, acc);
+        }
+      }
+      for (let i = fillResults.length - 1; i >= 0; i--) {
+        const fr = fillResults[i];
+        if (!fr || fr.fill === "none") continue;
+        bodyElements.push(
+          `<path d="${pathD}" fill="${fr.fill}"${fr.opacity < 1 ? ` fill-opacity="${fmt(fr.opacity)}"` : ""}${nodeFillRule(node) === "evenodd" ? ' fill-rule="evenodd"' : ""}/>`
+        );
+      }
+      const strokes = resolvedStrokes2(node, ctx);
+      for (let i = strokes.length - 1; i >= 0; i--) {
+        bodyElements.push(strokeElement(strokeD, strokeOf(strokes[i]), ctx));
+      }
+    }
+  } else if (node.type !== "GROUP" && node.type !== "INSTANCE" && node.childIds.length === 0) {
+    return rasterFallback(node, ctx, acc);
+  }
+  if (bodyElements.length > 0 && node.type !== "GROUP") {
+    const filterAttr = effectFilter(node, ctx, multiply(acc, local));
+    if (filterAttr) bodyElements[0] = `<g${filterAttr}>${bodyElements[0]}</g>`;
+  }
+  const body = bodyElements.join("");
+  let childrenSvg = "";
+  if (node.type !== "BOOLEAN") {
+    let activeMask = "";
+    for (const child of childrenOf2(node, ctx)) {
+      if (child.isMask) {
+        activeMask = await buildMaskAttr(child, ctx, childAcc);
+        continue;
+      }
+      const childSvg = await emitNode(child, ctx, childAcc, false);
+      if (!childSvg) continue;
+      childrenSvg += activeMask ? `<g${activeMask}>${childSvg}</g>` : childSvg;
+    }
+  }
+  if (childrenSvg && node.clipsContent) {
+    const clipId = uid(ctx, "clip");
+    const radii = cornerRadii(node);
+    const clipD = radii.some((r) => r > 0) ? toSvgD(roundedRectCmds(node.width, node.height, radii)) : `M0 0H${fmt(node.width)}V${fmt(node.height)}H0Z`;
+    ctx.defs.push(`<clipPath id="${clipId}"><path d="${clipD}"/></clipPath>`);
+    childrenSvg = `<g clip-path="url(#${clipId})">${childrenSvg}</g>`;
+  }
+  return wrapNode(node, ctx, local, acc, body + childrenSvg);
+}
+function wrapNode(node, ctx, local, acc, body) {
+  if (!body) return "";
+  const opacity = (node.opacity ?? 1) < 1 ? ` opacity="${fmt(node.opacity)}"` : "";
+  const blend = blendModeStyle(node);
+  const transform = isIdentity(local) ? "" : ` transform="${matToSvg(local)}"`;
+  const alt = node.altText;
+  const a11y = alt === void 0 ? "" : alt === "" ? ' aria-hidden="true"' : ` role="img" aria-label="${escapeXML(alt)}"`;
+  const title = alt ? `<title>${escapeXML(alt)}</title>` : "";
+  return `<g${transform}${opacity}${blend}${a11y} data-name="${escapeXML(node.name || "")}">${title}${body}</g>`;
+}
+var rootMatrix2 = (node, ctx, ignoreFlips = false) => rootMatrix(ctx.doc, node, ignoreFlips);
+async function exportNodeToSVG(renderer, node, doc, styles) {
+  doc = documentForExport(doc);
+  node = doc.nodes[node.id] ?? node;
+  const ctx = { renderer, doc, styles, defs: [], nextId: 1 };
+  let bounds;
+  let content = "";
+  if (node.type === "SLICE") {
+    const region = sliceRegion(node, doc);
+    if (!region) return null;
+    bounds = region.bounds;
+    for (const root of region.nodes) {
+      content += await emitNode(root, ctx, IDENTITY, true);
+    }
+  } else {
+    bounds = getWorldRenderBounds(doc, node.id);
+    if (!bounds) return null;
+    content = await emitNode(node, ctx, IDENTITY, true);
+  }
+  if (bounds.maxX - bounds.minX < 1) {
+    bounds.minX -= 0.5;
+    bounds.maxX += 0.5;
+  }
+  if (bounds.maxY - bounds.minY < 1) {
+    bounds.minY -= 0.5;
+    bounds.maxY += 0.5;
+  }
+  const width = bounds.maxX - bounds.minX;
+  const height = bounds.maxY - bounds.minY;
+  const defs = ctx.defs.length ? `<defs>${ctx.defs.join("")}</defs>` : "";
+  const credits = photoCredits(doc.nodes, [node.id]);
+  const metadata = credits.length ? `<metadata><![CDATA[Photo credits:
+${photoCreditsText(credits).replace(/]]>/g, "]]]]><![CDATA[>")}]]></metadata>` : "";
+  const rootAlt = node.altText;
+  const rootTitle = rootAlt === "" ? "" : `<title>${escapeXML(rootAlt || node.name || "Image")}</title>`;
+  const rootA11y = rootAlt === "" ? ' aria-hidden="true"' : ' role="img"';
+  return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${fmt(width)}" height="${fmt(height)}" viewBox="${fmt(bounds.minX)} ${fmt(bounds.minY)} ${fmt(width)} ${fmt(height)}"${rootA11y}>` + rootTitle + metadata + defs + content + `</svg>`;
+}
+
+export {
+  textStrokeSVG,
+  needsRasterFallback,
+  exportNodeToSVG
+};