@zumer/snapdom 2.0.0-dev.1 → 2.0.0-dev.3

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.1
+* v.2.0.0-dev.3
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -328,19 +328,6 @@ async function snapFetch(url, options = {}) {
 }
 
 // src/utils/image.js
-function createBackground(baseCanvas, backgroundColor) {
-  if (!backgroundColor || !baseCanvas.width || !baseCanvas.height) {
-    return baseCanvas;
-  }
-  const temp = document.createElement("canvas");
-  temp.width = baseCanvas.width;
-  temp.height = baseCanvas.height;
-  const ctx = temp.getContext("2d");
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, temp.width, temp.height);
-  ctx.drawImage(baseCanvas, 0, 0);
-  return temp;
-}
 async function inlineSingleBackgroundEntry(entry, options = {}) {
   const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
   if (isGradient || entry.trim() === "none") {
@@ -616,11 +603,20 @@ function idle(fn, { fast = false } = {}) {
   }
 }
 function isSafari() {
-  const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
-  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
-  const isUIWebView = /AppleWebKit/i.test(ua) && /Mobile/i.test(ua) && !/Safari/i.test(ua);
-  const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
-  return isSafariUA || isUIWebView || isWeChatUA;
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  const uaLower = ua.toLowerCase();
+  const isSafariUA = uaLower.includes("safari") && !uaLower.includes("chrome") && !uaLower.includes("crios") && // Chrome on iOS
+  !uaLower.includes("fxios") && // Firefox on iOS
+  !uaLower.includes("android");
+  const isWebKit = /applewebkit/i.test(ua);
+  const isMobile = /mobile/i.test(ua);
+  const missingSafariToken = !/safari/i.test(ua);
+  const isUIWebView = isWebKit && isMobile && missingSafariToken;
+  const isWeChatUA = /(micromessenger|wxwork|wecom|windowswechat|macwechat)/i.test(ua);
+  const isBaiduUA = /(baiduboxapp|baidubrowser|baidusearch|baiduboxlite)/i.test(uaLower);
+  const isIOSWebKit = /ipad|iphone|ipod/.test(uaLower) && isWebKit;
+  return isSafariUA || isUIWebView || isWeChatUA || isBaiduUA || isIOSWebKit;
 }
 
 // src/modules/styles.js
@@ -665,6 +661,22 @@ function snapshotComputedStyleFull(style, options = {}) {
     }
     out[prop] = val;
   }
+  const EXTRA_TEXT_DECORATION_PROPS = [
+    "text-decoration-line",
+    "text-decoration-color",
+    "text-decoration-style",
+    "text-decoration-thickness",
+    "text-underline-offset",
+    "text-decoration-skip-ink"
+  ];
+  for (const prop of EXTRA_TEXT_DECORATION_PROPS) {
+    if (out[prop]) continue;
+    try {
+      const v = style.getPropertyValue(prop);
+      if (v) out[prop] = v;
+    } catch {
+    }
+  }
   if (options.embedFonts) {
     const EXTRA_FONT_PROPS = [
       "font-feature-settings",
@@ -907,7 +919,7 @@ function resolveCSSVars(sourceEl, cloneEl) {
   }
 }
 
-// src/core/clone.js
+// src/utils/clone.helpers.js
 function idleCallback(childList, callback, fast) {
   return Promise.all(childList.map((child) => {
     return new Promise((resolve) => {
@@ -1119,6 +1131,134 @@ async function rasterizeIframe(iframe, sessionCache, options) {
   wrapper.appendChild(imgEl);
   return wrapper;
 }
+var _blobToDataUrlCache = /* @__PURE__ */ new Map();
+async function blobUrlToDataUrl(blobUrl) {
+  if (cache.resource?.has(blobUrl)) return cache.resource.get(blobUrl);
+  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+  const p = (async () => {
+    const r = await snapFetch(blobUrl, { as: "dataURL", silent: true });
+    if (!r.ok || typeof r.data !== "string") {
+      throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
+    }
+    cache.resource?.set(blobUrl, r.data);
+    return r.data;
+  })();
+  _blobToDataUrlCache.set(blobUrl, p);
+  try {
+    const data = await p;
+    _blobToDataUrlCache.set(blobUrl, data);
+    return data;
+  } catch (e) {
+    _blobToDataUrlCache.delete(blobUrl);
+    throw e;
+  }
+}
+var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
+async function replaceBlobUrlsInCssText(cssText) {
+  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
+  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
+  if (uniques.length === 0) return cssText;
+  let out = cssText;
+  for (const u of uniques) {
+    try {
+      const d = await blobUrlToDataUrl(u);
+      out = out.split(u).join(d);
+    } catch {
+    }
+  }
+  return out;
+}
+function isBlobUrl(u) {
+  return typeof u === "string" && u.startsWith("blob:");
+}
+function parseSrcset(srcset) {
+  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
+    const m = item.match(/^(\S+)(\s+.+)?$/);
+    return m ? { url: m[1], desc: m[2] || "" } : null;
+  }).filter(Boolean);
+}
+function stringifySrcset(parts) {
+  return parts.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
+}
+async function resolveBlobUrlsInTree(root) {
+  if (!root) return;
+  const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
+  for (const img of imgs) {
+    try {
+      const srcAttr = img.getAttribute("src");
+      const effective = srcAttr || img.currentSrc || "";
+      if (isBlobUrl(effective)) {
+        const data = await blobUrlToDataUrl(effective);
+        img.setAttribute("src", data);
+      }
+      const srcset = img.getAttribute("srcset");
+      if (srcset && srcset.includes("blob:")) {
+        const parts = parseSrcset(srcset);
+        let changed = false;
+        for (const p of parts) {
+          if (isBlobUrl(p.url)) {
+            try {
+              p.url = await blobUrlToDataUrl(p.url);
+              changed = true;
+            } catch {
+            }
+          }
+        }
+        if (changed) img.setAttribute("srcset", stringifySrcset(parts));
+      }
+    } catch {
+    }
+  }
+  const svgImages = root.querySelectorAll ? root.querySelectorAll("image") : [];
+  for (const node of svgImages) {
+    try {
+      const XLINK_NS = "http://www.w3.org/1999/xlink";
+      const href = node.getAttribute("href") || node.getAttributeNS?.(XLINK_NS, "href");
+      if (isBlobUrl(href)) {
+        const d = await blobUrlToDataUrl(href);
+        node.setAttribute("href", d);
+        node.removeAttributeNS?.(XLINK_NS, "href");
+      }
+    } catch {
+    }
+  }
+  const styled = root.querySelectorAll ? root.querySelectorAll("[style*='blob:']") : [];
+  for (const el of styled) {
+    try {
+      const styleText = el.getAttribute("style");
+      if (styleText && styleText.includes("blob:")) {
+        const replaced = await replaceBlobUrlsInCssText(styleText);
+        el.setAttribute("style", replaced);
+      }
+    } catch {
+    }
+  }
+  const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
+  for (const s of styleTags) {
+    try {
+      const css = s.textContent || "";
+      if (css.includes("blob:")) {
+        s.textContent = await replaceBlobUrlsInCssText(css);
+      }
+    } catch {
+    }
+  }
+  const urlAttrs = ["poster"];
+  for (const attr of urlAttrs) {
+    const nodes = root.querySelectorAll ? root.querySelectorAll(`[${attr}^='blob:']`) : [];
+    for (const n of nodes) {
+      try {
+        const u = n.getAttribute(attr);
+        if (isBlobUrl(u)) {
+          n.setAttribute(attr, await blobUrlToDataUrl(u));
+        }
+      } catch {
+      }
+    }
+  }
+}
+
+// src/core/clone.js
 async function deepClone(node, sessionCache, options) {
   if (!node) throw new Error("Invalid node");
   const clonedAssignedNodes = /* @__PURE__ */ new Set();
@@ -1421,17 +1561,19 @@ var defaultIconFonts = [
   /layui/i,
   /lucide/i
 ];
+var ICON_FONT_URLS = Object.assign({
+  materialIconsFilled: "https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2",
+  materialIconsOutlined: "https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2",
+  materialIconsRound: "https://fonts.gstatic.com/s/materialiconsround/v109/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2",
+  materialIconsSharp: "https://fonts.gstatic.com/s/materialiconssharp/v110/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvRImcycg.woff2"
+}, typeof window !== "undefined" && window.__SNAPDOM_ICON_FONTS__ || {});
 var userIconFonts = [];
 function extendIconFonts(fonts) {
   const list = Array.isArray(fonts) ? fonts : [fonts];
   for (const f of list) {
-    if (f instanceof RegExp) {
-      userIconFonts.push(f);
-    } else if (typeof f === "string") {
-      userIconFonts.push(new RegExp(f, "i"));
-    } else {
-      console.warn("[snapdom] Ignored invalid iconFont value:", f);
-    }
+    if (f instanceof RegExp) userIconFonts.push(f);
+    else if (typeof f === "string") userIconFonts.push(new RegExp(f, "i"));
+    else console.warn("[snapdom] Ignored invalid iconFont value:", f);
   }
 }
 function isIconFont2(input) {
@@ -1447,10 +1589,62 @@ function isMaterialFamily(family = "") {
   const s = String(family).toLowerCase();
   return /\bmaterial\s*icons\b/.test(s) || /\bmaterial\s*symbols\b/.test(s);
 }
+var loadedCanvasFamilies = /* @__PURE__ */ new Map();
+function parseAxes(variation = "") {
+  const out = /* @__PURE__ */ Object.create(null);
+  const v = String(variation || "");
+  const rx = /['"]?\s*([A-Za-z]{3,4})\s*['"]?\s*([+-]?\d+(?:\.\d+)?)\s*/g;
+  let m;
+  while (m = rx.exec(v)) out[m[1].toUpperCase()] = Number(m[2]);
+  return out;
+}
+async function ensureLigatureCanvasFont(cssFamily, className, axes) {
+  const fam = String(cssFamily || "");
+  const lowerFam = fam.toLowerCase();
+  const cls = String(className || "").toLowerCase();
+  if (/\bmaterial\s*icons\b/.test(lowerFam) && !/\bsymbols\b/.test(lowerFam)) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  const isSymbols = /\bmaterial\s*symbols\b/.test(lowerFam);
+  if (!isSymbols) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  const FILL = axes && (axes.FILL ?? axes.fill);
+  let style = "outlined";
+  if (/\brounded\b/.test(cls) || /\bround\b/.test(cls)) style = "rounded";
+  else if (/\bsharp\b/.test(cls)) style = "sharp";
+  else if (/\boutlined\b/.test(cls)) style = "outlined";
+  const filled = FILL === 1;
+  let pick = null;
+  if (filled) {
+    if (style === "outlined" && ICON_FONT_URLS.materialIconsFilled) {
+      pick = { url: ICON_FONT_URLS.materialIconsFilled, alias: "snapdom-mi-filled" };
+    } else if (style === "rounded" && ICON_FONT_URLS.materialIconsRound) {
+      pick = { url: ICON_FONT_URLS.materialIconsRound, alias: "snapdom-mi-round" };
+    } else if (style === "sharp" && ICON_FONT_URLS.materialIconsSharp) {
+      pick = { url: ICON_FONT_URLS.materialIconsSharp, alias: "snapdom-mi-sharp" };
+    }
+  }
+  if (!pick) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  if (!loadedCanvasFamilies.has(pick.alias)) {
+    try {
+      const ff = new FontFace(pick.alias, `url(${pick.url})`, { style: "normal", weight: "400" });
+      document.fonts.add(ff);
+      await ff.load();
+      loadedCanvasFamilies.set(pick.alias, true);
+    } catch {
+      return { familyForMeasure: fam, familyForCanvas: fam };
+    }
+  }
+  const quoted = `"${pick.alias}"`;
+  return { familyForMeasure: quoted, familyForCanvas: quoted };
+}
 async function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
   try {
     await Promise.all([
-      document.fonts.load(`400 ${px}px "${family.replace(/["']/g, "")}"`),
+      document.fonts.load(`400 ${px}px "${String(family).replace(/["']/g, "")}"`),
       document.fonts.ready
     ]);
   } catch {
@@ -1458,10 +1652,8 @@ async function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
 }
 function resolvePaintColor(cs) {
   let fill = cs.getPropertyValue("-webkit-text-fill-color")?.trim() || "";
-  const isTransparent = /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(fill);
-  if (fill && !isTransparent && fill.toLowerCase() !== "currentcolor") {
-    return fill;
-  }
+  const isTransparent = /^transparent$/i.test(fill) || /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(fill);
+  if (fill && !isTransparent && fill.toLowerCase() !== "currentcolor") return fill;
   const c = cs.color?.trim();
   return c && c !== "inherit" ? c : "#000";
 }
@@ -1470,18 +1662,21 @@ async function materialIconToImage(ligatureText, {
   weight = "normal",
   fontSize = 32,
   color = "#000",
-  variation = ""
+  variation = "",
+  className = ""
 } = {}) {
   const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
   const dpr = window.devicePixelRatio || 1;
-  await ensureMaterialFontsReady(fam, fontSize);
+  const axes = parseAxes(variation);
+  const { familyForMeasure, familyForCanvas } = await ensureLigatureCanvasFont(fam, className, axes);
+  await ensureMaterialFontsReady(familyForCanvas.replace(/^["']+|["']+$/g, ""), fontSize);
   const span = document.createElement("span");
   span.textContent = ligatureText;
   span.style.position = "absolute";
   span.style.visibility = "hidden";
   span.style.left = "-99999px";
   span.style.whiteSpace = "nowrap";
-  span.style.fontFamily = `"${fam}"`;
+  span.style.fontFamily = familyForMeasure;
   span.style.fontWeight = String(weight || "normal");
   span.style.fontSize = `${fontSize}px`;
   span.style.lineHeight = "1";
@@ -1489,7 +1684,6 @@ async function materialIconToImage(ligatureText, {
   span.style.padding = "0";
   span.style.fontFeatureSettings = "'liga' 1";
   span.style.fontVariantLigatures = "normal";
-  if (variation) span.style.fontVariationSettings = variation;
   span.style.color = color;
   document.body.appendChild(span);
   const rect = span.getBoundingClientRect();
@@ -1501,7 +1695,7 @@ async function materialIconToImage(ligatureText, {
   canvas.height = height * dpr;
   const ctx = canvas.getContext("2d");
   ctx.scale(dpr, dpr);
-  ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px "${fam}"`;
+  ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px ${familyForCanvas}`;
   ctx.textAlign = "left";
   ctx.textBaseline = "top";
   ctx.fillStyle = color;
@@ -1529,21 +1723,23 @@ async function ligatureIconToImage(cloneRoot, sourceRoot) {
     const el = cloneNodes[i];
     const src = sourceNodes[i] || null;
     try {
-      const csSrc = src ? getComputedStyle(src) : getComputedStyle(el);
-      const family = csSrc.fontFamily || "Material Icons";
+      const cs = src ? getComputedStyle(src) : getComputedStyle(el);
+      const family = cs.fontFamily || "Material Icons";
       if (!isMaterialFamily(family)) continue;
       const text = (src || el).textContent.trim();
       if (!text) continue;
-      const size = parseInt(csSrc.fontSize, 10) || 24;
-      const weight = csSrc.fontWeight && csSrc.fontWeight !== "normal" ? csSrc.fontWeight : "normal";
-      const color = resolvePaintColor(csSrc);
-      const variation = csSrc.fontVariationSettings && csSrc.fontVariationSettings !== "normal" ? csSrc.fontVariationSettings : "";
+      const size = parseInt(cs.fontSize, 10) || 24;
+      const weight = cs.fontWeight && cs.fontWeight !== "normal" ? cs.fontWeight : "normal";
+      const color = resolvePaintColor(cs);
+      const variation = cs.fontVariationSettings && cs.fontVariationSettings !== "normal" ? cs.fontVariationSettings : "";
+      const className = (src || el).className || "";
       const { dataUrl, width, height } = await materialIconToImage(text, {
         family,
         weight,
         fontSize: size,
         color,
-        variation
+        variation,
+        className
       });
       el.textContent = "";
       const img = el.ownerDocument.createElement("img");
@@ -1909,7 +2105,7 @@ function dedupeFontFaces(cssText) {
     const styleSpec = (block.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
     const stretchSpec = (block.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
     const urange = (block.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-    const srcRaw = (block.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+    const srcRaw = (block.match(/src\s*:\s*([^;}]+)[;}]/i)?.[1] || "").trim();
     const urls = extractSrcUrls(srcRaw, location.href);
     const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
     const key = [
@@ -2117,7 +2313,7 @@ async function embedCustomFonts({
         const styleSpec = (face.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
         const stretchSpec = (face.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
         const urange = (face.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-        const srcRaw = (face.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+        const srcRaw = (face.match(/src\s*:\s*([^;}]+)[;}]/i)?.[1] || "").trim();
         const srcUrls = extractSrcUrls(srcRaw, link.href);
         if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
         const ranges = parseUnicodeRange(urange);
@@ -2527,6 +2723,152 @@ function resolveCountersInContent(raw, node, ctx) {
 }
 
 // src/modules/pseudo.js
+var __preflightMemo = /* @__PURE__ */ new WeakMap();
+var CSS_RULE_SCAN_BUDGET = 300;
+function preflightWithFp(doc, sessionCache) {
+  const fp = styleFingerprint(doc);
+  if (!sessionCache) return shouldProcessPseudos(doc);
+  if (sessionCache.__pseudoPreflightFp !== fp) {
+    sessionCache.__pseudoPreflight = shouldProcessPseudos(doc);
+    sessionCache.__pseudoPreflightFp = fp;
+  }
+  return !!sessionCache.__pseudoPreflight;
+}
+function safeRules(sheet) {
+  try {
+    return sheet && sheet.cssRules ? sheet.cssRules : null;
+  } catch {
+    return null;
+  }
+}
+function styleFingerprint(doc) {
+  const nodes = doc.querySelectorAll('style,link[rel~="stylesheet"]');
+  let fp = `n:${nodes.length}|`;
+  let totalRules = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.tagName === "STYLE") {
+      const len = n.textContent ? n.textContent.length : 0;
+      fp += `S${len}|`;
+      const sheet = (
+        /** @type {HTMLStyleElement} */
+        n.sheet
+      );
+      const rules = sheet ? safeRules(sheet) : null;
+      if (rules) totalRules += rules.length;
+    } else {
+      const href = n.getAttribute("href") || "";
+      const media = n.getAttribute("media") || "all";
+      fp += `L${href}|m:${media}|`;
+      const sheet = (
+        /** @type {HTMLLinkElement} */
+        n.sheet
+      );
+      const rules = sheet ? safeRules(sheet) : null;
+      if (rules) totalRules += rules.length;
+    }
+  }
+  const ass = (
+    /** @type {any} */
+    doc.adoptedStyleSheets
+  );
+  fp += `ass:${Array.isArray(ass) ? ass.length : 0}|tr:${totalRules}`;
+  return fp;
+}
+function sheetHasNeedles(sheet, needles, state) {
+  const rules = safeRules(sheet);
+  if (!rules) return false;
+  for (let i = 0; i < rules.length; i++) {
+    if (state.budget <= 0) return false;
+    const rule = rules[i];
+    const css = rule && rule.cssText ? rule.cssText : "";
+    state.budget--;
+    for (const k of needles) {
+      if (css.includes(k)) return true;
+    }
+    if (rule && rule.cssRules && rule.cssRules.length) {
+      for (let j = 0; j < rule.cssRules.length && state.budget > 0; j++) {
+        const inner = rule.cssRules[j];
+        const innerCss = inner && inner.cssText ? inner.cssText : "";
+        state.budget--;
+        for (const k of needles) {
+          if (innerCss.includes(k)) return true;
+        }
+      }
+    }
+    if (state.budget <= 0) return false;
+  }
+  return false;
+}
+function shouldProcessPseudos(doc = document) {
+  const fp = styleFingerprint(doc);
+  const memo = __preflightMemo.get(doc);
+  if (memo && memo.fingerprint === fp) return memo.result;
+  const NEEDLES = [
+    // double-colon
+    "::before",
+    "::after",
+    "::first-letter",
+    // single-colon robustness
+    ":before",
+    ":after",
+    ":first-letter",
+    // counters
+    "counter(",
+    "counters(",
+    "counter-increment",
+    "counter-reset"
+  ];
+  const styleEls = doc.querySelectorAll("style");
+  for (let i = 0; i < styleEls.length; i++) {
+    const t = styleEls[i].textContent || "";
+    for (const k of NEEDLES) if (t.includes(k)) {
+      __preflightMemo.set(doc, { fingerprint: fp, result: true });
+      return true;
+    }
+  }
+  const ass = (
+    /** @type {any} */
+    doc.adoptedStyleSheets
+  );
+  if (Array.isArray(ass) && ass.length) {
+    const state = { budget: CSS_RULE_SCAN_BUDGET };
+    try {
+      for (const sheet of ass) {
+        if (sheetHasNeedles(sheet, NEEDLES, state)) {
+          __preflightMemo.set(doc, { fingerprint: fp, result: true });
+          return true;
+        }
+      }
+    } catch {
+    }
+  }
+  {
+    const nodes = doc.querySelectorAll('style,link[rel~="stylesheet"]');
+    const state = { budget: CSS_RULE_SCAN_BUDGET };
+    for (let i = 0; i < nodes.length && state.budget > 0; i++) {
+      const n = nodes[i];
+      let sheet = null;
+      if (n.tagName === "STYLE") {
+        sheet = /** @type {HTMLStyleElement} */
+        n.sheet || null;
+      } else {
+        sheet = /** @type {HTMLLinkElement} */
+        n.sheet || null;
+      }
+      if (sheet && sheetHasNeedles(sheet, NEEDLES, state)) {
+        __preflightMemo.set(doc, { fingerprint: fp, result: true });
+        return true;
+      }
+    }
+  }
+  if (doc.querySelector('[style*="counter("], [style*="counters("]')) {
+    __preflightMemo.set(doc, { fingerprint: fp, result: true });
+    return true;
+  }
+  __preflightMemo.set(doc, { fingerprint: fp, result: false });
+  return false;
+}
 var __siblingCounters = /* @__PURE__ */ new WeakMap();
 var __pseudoEpoch = -1;
 function unquoteDoubleStrings2(s) {
@@ -2625,6 +2967,10 @@ function resolvePseudoContentAndIncs(node, pseudo, baseCtx) {
 }
 async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
+  const doc = source.ownerDocument || document;
+  if (!preflightWithFp(doc, sessionCache)) {
+    return;
+  }
   const epoch = cache?.session?.__counterEpoch ?? 0;
   if (__pseudoEpoch !== epoch) {
     __siblingCounters = /* @__PURE__ */ new WeakMap();
@@ -2641,7 +2987,7 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       const style = getStyle(source, pseudo);
-      if (!style || typeof style[Symbol.iterator] !== "function") continue;
+      if (!style) continue;
       const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
       if (isEmptyPseudo) continue;
       if (pseudo === "::first-letter") {
@@ -2668,7 +3014,8 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
         clone.insertBefore(span, restNode);
         continue;
       }
-      const rawContent = style.content;
+      const rawContent = style.content ?? "";
+      const isNoExplicitContent = rawContent === "" || rawContent === "none" || rawContent === "normal";
       const { text: cleanContent, incs } = resolvePseudoContentAndIncs(source, pseudo, counterCtx);
       const bg = style.backgroundImage;
       const bgColor = style.backgroundColor;
@@ -2680,7 +3027,7 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       const borderWidth = parseFloat(style.borderWidth);
       const transform = style.transform;
       const isIconFont22 = isIconFont2(fontFamily);
-      const hasExplicitContent = rawContent !== "none" && cleanContent !== "";
+      const hasExplicitContent = !isNoExplicitContent && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
       const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
@@ -2702,8 +3049,6 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       }
       const pseudoEl = document.createElement("span");
       pseudoEl.dataset.snapdomPseudo = pseudo;
-      pseudoEl.style.display = "inline";
-      pseudoEl.style.verticalAlign = "baseline";
       pseudoEl.style.pointerEvents = "none";
       const snapshot = snapshotComputedStyle(style);
       const key = getStyleKey(snapshot, "span");
@@ -2995,6 +3340,20 @@ function _childrenWithoutPlaceholders(el, phAttr) {
   return out;
 }
 
+// src/utils/prepare.helpers.js
+function stabilizeLayout(element) {
+  const style = getComputedStyle(element);
+  const outlineStyle = style.outlineStyle;
+  const outlineWidth = style.outlineWidth;
+  const borderStyle = style.borderStyle;
+  const borderWidth = style.borderWidth;
+  const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+  const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+  if (outlineVisible && borderAbsent) {
+    element.style.border = `${outlineWidth} solid transparent`;
+  }
+}
+
 // src/core/prepare.js
 async function prepareClone(element, options = {}) {
   const sessionCache = {
@@ -3095,152 +3454,25 @@ async function prepareClone(element, options = {}) {
   }
   return { clone, classCSS, styleCache: sessionCache.styleCache };
 }
-function stabilizeLayout(element) {
-  const style = getComputedStyle(element);
-  const outlineStyle = style.outlineStyle;
-  const outlineWidth = style.outlineWidth;
-  const borderStyle = style.borderStyle;
-  const borderWidth = style.borderWidth;
-  const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
-  const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
-  if (outlineVisible && borderAbsent) {
-    element.style.border = `${outlineWidth} solid transparent`;
-  }
-}
-var _blobToDataUrlCache = /* @__PURE__ */ new Map();
-async function blobUrlToDataUrl(blobUrl) {
-  if (cache.resource?.has(blobUrl)) return cache.resource.get(blobUrl);
-  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
-  const p = (async () => {
-    const r = await snapFetch(blobUrl, { as: "dataURL", silent: true });
-    if (!r.ok || typeof r.data !== "string") {
-      throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
-    }
-    cache.resource?.set(blobUrl, r.data);
-    return r.data;
-  })();
-  _blobToDataUrlCache.set(blobUrl, p);
-  try {
-    const data = await p;
-    _blobToDataUrlCache.set(blobUrl, data);
-    return data;
-  } catch (e) {
-    _blobToDataUrlCache.delete(blobUrl);
-    throw e;
-  }
+
+// src/modules/images.js
+function extractImageDimensions(img) {
+  const dsW = parseInt(img.dataset?.snapdomWidth || "", 10) || 0;
+  const dsH = parseInt(img.dataset?.snapdomHeight || "", 10) || 0;
+  const attrW = parseInt(img.getAttribute("width") || "", 10) || 0;
+  const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
+  const styleW = parseFloat(img.style?.width || "") || 0;
+  const styleH = parseFloat(img.style?.height || "") || 0;
+  const w = dsW || styleW || attrW || img.width || img.naturalWidth || 100;
+  const h = dsH || styleH || attrH || img.height || img.naturalHeight || 100;
+  return { width: w, height: h };
 }
-var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
-async function replaceBlobUrlsInCssText(cssText) {
-  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
-  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
-  if (uniques.length === 0) return cssText;
-  let out = cssText;
-  for (const u of uniques) {
-    try {
-      const d = await blobUrlToDataUrl(u);
-      out = out.split(u).join(d);
-    } catch {
-    }
-  }
-  return out;
-}
-function isBlobUrl(u) {
-  return typeof u === "string" && u.startsWith("blob:");
-}
-function parseSrcset(srcset) {
-  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
-    const m = item.match(/^(\S+)(\s+.+)?$/);
-    return m ? { url: m[1], desc: m[2] || "" } : null;
-  }).filter(Boolean);
-}
-function stringifySrcset(parts) {
-  return parts.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
-}
-async function resolveBlobUrlsInTree(root) {
-  if (!root) return;
-  const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
-  for (const img of imgs) {
-    try {
-      const srcAttr = img.getAttribute("src");
-      const effective = srcAttr || img.currentSrc || "";
-      if (isBlobUrl(effective)) {
-        const data = await blobUrlToDataUrl(effective);
-        img.setAttribute("src", data);
-      }
-      const srcset = img.getAttribute("srcset");
-      if (srcset && srcset.includes("blob:")) {
-        const parts = parseSrcset(srcset);
-        let changed = false;
-        for (const p of parts) {
-          if (isBlobUrl(p.url)) {
-            try {
-              p.url = await blobUrlToDataUrl(p.url);
-              changed = true;
-            } catch {
-            }
-          }
-        }
-        if (changed) img.setAttribute("srcset", stringifySrcset(parts));
-      }
-    } catch {
-    }
-  }
-  const svgImages = root.querySelectorAll ? root.querySelectorAll("image") : [];
-  for (const node of svgImages) {
-    try {
-      const XLINK_NS = "http://www.w3.org/1999/xlink";
-      const href = node.getAttribute("href") || node.getAttributeNS?.(XLINK_NS, "href");
-      if (isBlobUrl(href)) {
-        const d = await blobUrlToDataUrl(href);
-        node.setAttribute("href", d);
-        node.removeAttributeNS?.(XLINK_NS, "href");
-      }
-    } catch {
-    }
-  }
-  const styled = root.querySelectorAll ? root.querySelectorAll("[style*='blob:']") : [];
-  for (const el of styled) {
-    try {
-      const styleText = el.getAttribute("style");
-      if (styleText && styleText.includes("blob:")) {
-        const replaced = await replaceBlobUrlsInCssText(styleText);
-        el.setAttribute("style", replaced);
-      }
-    } catch {
-    }
-  }
-  const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
-  for (const s of styleTags) {
-    try {
-      const css = s.textContent || "";
-      if (css.includes("blob:")) {
-        s.textContent = await replaceBlobUrlsInCssText(css);
-      }
-    } catch {
-    }
-  }
-  const urlAttrs = ["poster"];
-  for (const attr of urlAttrs) {
-    const nodes = root.querySelectorAll ? root.querySelectorAll(`[${attr}^='blob:']`) : [];
-    for (const n of nodes) {
-      try {
-        const u = n.getAttribute(attr);
-        if (isBlobUrl(u)) {
-          n.setAttribute(attr, await blobUrlToDataUrl(u));
-        }
-      } catch {
-      }
-    }
-  }
-}
-
-// src/modules/images.js
-async function inlineImages(clone, options = {}) {
-  const imgs = Array.from(clone.querySelectorAll("img"));
-  const processImg = async (img) => {
-    if (!img.getAttribute("src")) {
-      const eff = img.currentSrc || img.src || "";
-      if (eff) img.setAttribute("src", eff);
+async function inlineImages(clone, options = {}) {
+  const imgs = Array.from(clone.querySelectorAll("img"));
+  const processImg = async (img) => {
+    if (!img.getAttribute("src")) {
+      const eff = img.currentSrc || img.src || "";
+      if (eff) img.setAttribute("src", eff);
     }
     img.removeAttribute("srcset");
     img.removeAttribute("sizes");
@@ -3253,41 +3485,30 @@ async function inlineImages(clone, options = {}) {
       if (!img.height) img.height = img.naturalHeight || 100;
       return;
     }
+    const { width: fbW, height: fbH } = extractImageDimensions(img);
     const { fallbackURL } = options || {};
     if (fallbackURL) {
       try {
-        const dsW = parseInt(img.dataset?.snapdomWidth || "", 10) || 0;
-        const dsH = parseInt(img.dataset?.snapdomHeight || "", 10) || 0;
-        const attrW = parseInt(img.getAttribute("width") || "", 10) || 0;
-        const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
-        const styleW = parseFloat(img.style?.width || "") || 0;
-        const styleH = parseFloat(img.style?.height || "") || 0;
-        const fbW = dsW || styleW || attrW || img.width || void 0;
-        const fbH = dsH || styleH || attrH || img.height || void 0;
         const fallbackUrl = typeof fallbackURL === "function" ? await fallbackURL({ width: fbW, height: fbH, src, element: img }) : fallbackURL;
         if (fallbackUrl) {
           const fallbackData = await snapFetch(fallbackUrl, { as: "dataURL", useProxy: options.useProxy });
           img.src = fallbackData.data;
-          if (!img.width && fbW) img.width = fbW;
-          if (!img.height && fbH) img.height = fbH;
-          if (!img.width) img.width = img.naturalWidth || 100;
-          if (!img.height) img.height = img.naturalHeight || 100;
+          if (!img.width) img.width = fbW;
+          if (!img.height) img.height = fbH;
           return;
         }
       } catch {
       }
     }
-    const w = img.width || img.naturalWidth || 100;
-    const h = img.height || img.naturalHeight || 100;
     if (options.placeholders !== false) {
       const fallback = document.createElement("div");
       fallback.style.cssText = [
-        `width:${w}px`,
-        `height:${h}px`,
+        `width:${fbW}px`,
+        `height:${fbH}px`,
         "background:#ccc",
         "display:inline-block",
         "text-align:center",
-        `line-height:${h}px`,
+        `line-height:${fbH}px`,
         "color:#666",
         "font-size:12px",
         "overflow:hidden"
@@ -3296,7 +3517,7 @@ async function inlineImages(clone, options = {}) {
       img.replaceWith(fallback);
     } else {
       const spacer = document.createElement("div");
-      spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`;
+      spacer.style.cssText = `display:inline-block;width:${fbW}px;height:${fbH}px;visibility:hidden;`;
       img.replaceWith(spacer);
     }
   };
@@ -3536,7 +3757,7 @@ function attachSessionPlugins(context, localDefs, force = false) {
   return context;
 }
 
-// src/core/capture.js
+// src/utils/capture.helpers.js
 function stripRootShadows(originalEl, cloneRoot) {
   if (!originalEl || !cloneRoot || !cloneRoot.style) return;
   const cs = getComputedStyle(originalEl);
@@ -3559,217 +3780,178 @@ function stripRootShadows(originalEl, cloneRoot) {
   } catch {
   }
 }
-async function captureDOM(element, options) {
-  if (!element) throw new Error("Element cannot be null or undefined");
-  applyCachePolicy(options.cache);
-  const fast = options.fast;
-  const outerTransforms = options.outerTransforms !== false;
-  const outerShadows = !!options.outerShadows;
-  let state = { element, options, plugins: options.plugins };
-  let clone, classCSS, styleCache;
-  let fontsCSS = "";
-  let baseCSS = "";
-  let dataURL;
-  let svgString;
-  let rootTransform2D = null;
-  await runHook("beforeSnap", state);
-  await runHook("beforeClone", state);
-  const undoClamp = lineClamp(state.element);
-  try {
-    ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options));
-    if (!outerTransforms && clone) {
-      rootTransform2D = normalizeRootTransforms(state.element, clone);
-    }
-    if (!outerShadows && clone) {
-      stripRootShadows(state.element, clone);
+function removeAllComments(root) {
+  const it = document.createTreeWalker(root, NodeFilter.SHOW_COMMENT);
+  const toRemove = [];
+  while (it.nextNode()) toRemove.push(it.currentNode);
+  for (const n of toRemove) n.remove();
+}
+function sanitizeAttributesForXHTML(root, opts = {}) {
+  const { stripFrameworkDirectives = true } = opts;
+  const ALLOWED_PREFIXES = /* @__PURE__ */ new Set(["xml", "xlink"]);
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name;
+      if (name.includes("@")) {
+        el.removeAttribute(name);
+        continue;
+      }
+      if (name.includes(":")) {
+        const prefix = name.split(":", 1)[0];
+        if (!ALLOWED_PREFIXES.has(prefix)) {
+          el.removeAttribute(name);
+          continue;
+        }
+      }
+      if (!stripFrameworkDirectives) continue;
+      if (name.startsWith("x-") || // Alpine
+      name.startsWith("v-") || // Vue
+      name.startsWith(":") || // Vue/Alpine shorthand
+      name.startsWith("on:") || // Svelte
+      name.startsWith("bind:") || // Svelte
+      name.startsWith("let:") || // Svelte
+      name.startsWith("class:")) {
+        el.removeAttribute(name);
+        continue;
+      }
     }
-  } finally {
-    undoClamp();
   }
-  state = { clone, classCSS, styleCache, ...state };
-  await runHook("afterClone", state);
+}
+function sanitizeCloneForXHTML(root, opts = {}) {
+  if (!root) return;
+  sanitizeAttributesForXHTML(root, opts);
+  removeAllComments(root);
+}
+function authorHasExplicitSize(el) {
   try {
-    await ligatureIconToImage(state.clone, state.element);
+    const s = el.getAttribute?.("style") || "";
+    return /\b(height|width|block-size|inline-size)\s*:/.test(s);
   } catch {
+    return false;
   }
-  await new Promise((resolve) => {
-    idle(async () => {
-      await inlineImages(state.clone, state.options);
-      resolve();
-    }, { fast });
-  });
-  await new Promise((resolve) => {
-    idle(async () => {
-      await inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
-      resolve();
-    }, { fast });
-  });
-  if (options.embedFonts) {
-    await new Promise((resolve) => {
-      idle(async () => {
-        const required = collectUsedFontVariants(state.element);
-        const usedCodepoints = collectUsedCodepoints(state.element);
-        if (isSafari()) {
-          const families = new Set(
-            Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
-          );
-          await ensureFontsReady(families, 1);
-        }
-        fontsCSS = await embedCustomFonts({
-          required,
-          usedCodepoints,
-          preCached: false,
-          exclude: state.options.excludeFonts,
-          useProxy: state.options.useProxy
-        });
-        resolve();
-      }, { fast });
-    });
-  }
-  const usedTags = collectUsedTagNames(state.clone).sort();
-  const tagKey = usedTags.join(",");
-  if (cache.baseStyle.has(tagKey)) {
-    baseCSS = cache.baseStyle.get(tagKey);
-  } else {
-    await new Promise((resolve) => {
-      idle(() => {
-        baseCSS = generateDedupedBaseCSS(usedTags);
-        cache.baseStyle.set(tagKey, baseCSS);
-        resolve();
-      }, { fast });
-    });
+}
+function isReplacedElement(el) {
+  return el instanceof HTMLImageElement || el instanceof HTMLCanvasElement || el instanceof HTMLVideoElement || el instanceof HTMLIFrameElement || el instanceof SVGElement || el instanceof HTMLObjectElement || el instanceof HTMLEmbedElement;
+}
+function shouldShrinkBox(srcEl, cs) {
+  if (!(srcEl instanceof Element)) return false;
+  if (authorHasExplicitSize(srcEl)) return false;
+  if (isReplacedElement(srcEl)) return false;
+  const pos = cs.position;
+  if (pos === "absolute" || pos === "fixed" || pos === "sticky") return false;
+  const disp = cs.display || "";
+  if (disp.includes("flex") || disp.includes("grid") || disp.startsWith("table")) return false;
+  if (cs.transform && cs.transform !== "none") return false;
+  return true;
+}
+function shrinkAutoSizeBoxes(sourceRoot, cloneRoot, styleCache = /* @__PURE__ */ new Map()) {
+  function walk(src, cln) {
+    if (!(src instanceof Element) || !(cln instanceof Element)) return;
+    const lostKids = src.childElementCount > cln.childElementCount;
+    const cs = styleCache.get(src) || getComputedStyle(src);
+    if (!styleCache.has(src)) styleCache.set(src, cs);
+    if (lostKids && shouldShrinkBox(src, cs)) {
+      if (!cln.style.height) cln.style.height = "auto";
+      if (!cln.style.width) cln.style.width = "auto";
+      cln.style.removeProperty("block-size");
+      cln.style.removeProperty("inline-size");
+      if (!cln.style.minHeight) cln.style.minHeight = "0";
+      if (!cln.style.minWidth) cln.style.minWidth = "0";
+      if (!cln.style.maxHeight) cln.style.maxHeight = "none";
+      if (!cln.style.maxWidth) cln.style.maxWidth = "none";
+      const oy = cs.overflowY || cs.overflowBlock || "visible";
+      const ox = cs.overflowX || cs.overflowInline || "visible";
+      if (oy !== "visible" || ox !== "visible") {
+        cln.style.overflow = "visible";
+      }
+    }
+    const sKids = Array.from(src.children);
+    const cKids = Array.from(cln.children);
+    for (let i = 0; i < Math.min(sKids.length, cKids.length); i++) {
+      walk(sKids[i], cKids[i]);
+    }
   }
-  state = { fontsCSS, baseCSS, ...state };
-  await runHook("beforeRender", state);
-  await new Promise((resolve) => {
-    idle(() => {
-      const csEl = getComputedStyle(state.element);
-      const rect = state.element.getBoundingClientRect();
-      const w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
-      const h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
-      const coerceNum = (v, def = NaN) => {
-        const n = typeof v === "string" ? parseFloat(v) : v;
-        return Number.isFinite(n) ? n : def;
-      };
-      const optW = coerceNum(state.options.width);
-      const optH = coerceNum(state.options.height);
-      let w = w0, h = h0;
-      const hasW = Number.isFinite(optW);
-      const hasH = Number.isFinite(optH);
-      const aspect0 = h0 > 0 ? w0 / h0 : 1;
-      if (hasW && hasH) {
-        w = Math.max(1, limitDecimals(optW));
-        h = Math.max(1, limitDecimals(optH));
-      } else if (hasW) {
-        w = Math.max(1, limitDecimals(optW));
-        h = Math.max(1, limitDecimals(w / (aspect0 || 1)));
-      } else if (hasH) {
-        h = Math.max(1, limitDecimals(optH));
-        w = Math.max(1, limitDecimals(h * (aspect0 || 1)));
-      } else {
-        w = w0;
-        h = h0;
+  walk(sourceRoot, cloneRoot);
+}
+function isInNormalFlow(el) {
+  const cs = getComputedStyle(el);
+  if (cs.display === "none") return false;
+  if (cs.position === "absolute" || cs.position === "fixed" || cs.position === "sticky") return false;
+  if ((cs.cssFloat || cs.float || "none") !== "none") return false;
+  if (cs.transform && cs.transform !== "none") return false;
+  return true;
+}
+function willBeExcluded(el, options) {
+  if (!(el instanceof Element)) return false;
+  if (el.getAttribute("data-capture") === "exclude" && options?.excludeMode === "remove") return true;
+  if (Array.isArray(options?.exclude)) {
+    for (const sel of options.exclude) {
+      try {
+        if (el.matches(sel)) return options.excludeMode === "remove";
+      } catch {
       }
-      let minX = 0, minY = 0, maxX = w0, maxY = h0;
-      if (!outerTransforms && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
-        const M2 = {
-          a: rootTransform2D.a,
-          b: rootTransform2D.b || 0,
-          c: rootTransform2D.c || 0,
-          d: rootTransform2D.d || 1,
-          e: 0,
-          f: 0
-        };
-        const bb2 = bboxWithOriginFull(w0, h0, M2, 0, 0);
-        minX = limitDecimals(bb2.minX);
-        minY = limitDecimals(bb2.minY);
-        maxX = limitDecimals(bb2.maxX);
-        maxY = limitDecimals(bb2.maxY);
-      } else {
-        const useTFBBox = outerTransforms && hasTFBBox(state.element);
-        if (useTFBBox) {
-          const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
-          const ind2 = readIndividualTransforms(state.element);
-          const TOTAL = readTotalTransformMatrix({
-            baseTransform: baseTransform2,
-            rotate: ind2.rotate || "0deg",
-            scale: ind2.scale,
-            translate: ind2.translate
-          });
-          const { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0);
-          const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString());
-          const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2);
-          minX = limitDecimals(bb.minX);
-          minY = limitDecimals(bb.minY);
-          maxX = limitDecimals(bb.maxX);
-          maxY = limitDecimals(bb.maxY);
-        }
-      }
-      const bleedShadow = parseBoxShadow(csEl);
-      const bleedBlur = parseFilterBlur(csEl);
-      const bleedOutline = parseOutline(csEl);
-      const drop = parseFilterDropShadows(csEl);
-      const bleed = !outerShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
-        top: limitDecimals(bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top),
-        right: limitDecimals(bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right),
-        bottom: limitDecimals(bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom),
-        left: limitDecimals(bleedShadow.left + bleedBlur.left + bleedOutline.left + drop.bleed.left)
-      };
-      minX = limitDecimals(minX - bleed.left);
-      minY = limitDecimals(minY - bleed.top);
-      maxX = limitDecimals(maxX + bleed.right);
-      maxY = limitDecimals(maxY + bleed.bottom);
-      const vbW0 = Math.max(1, limitDecimals(maxX - minX));
-      const vbH0 = Math.max(1, limitDecimals(maxY - minY));
-      const scaleW = hasW || hasH ? limitDecimals(w / w0) : 1;
-      const scaleH = hasH || hasW ? limitDecimals(h / h0) : 1;
-      const outW = Math.max(1, limitDecimals(vbW0 * scaleW));
-      const outH = Math.max(1, limitDecimals(vbH0 * scaleH));
-      const svgNS = "http://www.w3.org/2000/svg";
-      const basePad = isSafari() ? 1 : 0;
-      const extraPad = !outerTransforms ? 1 : 0;
-      const pad = limitDecimals(basePad + extraPad);
-      const fo = document.createElementNS(svgNS, "foreignObject");
-      const vbMinX = limitDecimals(minX);
-      const vbMinY = limitDecimals(minY);
-      fo.setAttribute("x", String(limitDecimals(-(vbMinX - pad))));
-      fo.setAttribute("y", String(limitDecimals(-(vbMinY - pad))));
-      fo.setAttribute("width", String(limitDecimals(w0 + pad * 2)));
-      fo.setAttribute("height", String(limitDecimals(h0 + pad * 2)));
-      fo.style.overflow = "visible";
-      const styleTag = document.createElement("style");
-      styleTag.textContent = state.baseCSS + state.fontsCSS + "svg{overflow:visible;} foreignObject{overflow:visible;}" + state.classCSS;
-      fo.appendChild(styleTag);
-      const container = document.createElement("div");
-      container.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      container.style.width = `${limitDecimals(w0)}px`;
-      container.style.height = `${limitDecimals(h0)}px`;
-      container.style.overflow = "visible";
-      state.clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      container.appendChild(state.clone);
-      fo.appendChild(container);
-      const serializer = new XMLSerializer();
-      const foString = serializer.serializeToString(fo);
-      const vbW = limitDecimals(vbW0 + pad * 2);
-      const vbH = limitDecimals(vbH0 + pad * 2);
-      const wantsSize = hasW || hasH;
-      options.meta = { w0, h0, vbW, vbH, targetW: w, targetH: h };
-      const svgOutW = isSafari() && wantsSize ? vbW : limitDecimals(outW + pad * 2);
-      const svgOutH = isSafari() && wantsSize ? vbH : limitDecimals(outH + pad * 2);
-      const svgHeader = `<svg xmlns="${svgNS}" width="${svgOutW}" height="${svgOutH}" viewBox="0 0 ${vbW} ${vbH}">`;
-      const svgFooter = "</svg>";
-      svgString = svgHeader + foString + svgFooter;
-      dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
-      state = { svgString, dataURL, ...state };
-      resolve();
-    }, { fast });
-  });
-  await runHook("afterRender", state);
-  const sandbox = document.getElementById("snapdom-sandbox");
-  if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
-  return state.dataURL;
+    }
+  }
+  return false;
+}
+function estimateKeptHeight(container, options) {
+  const csC = getComputedStyle(container);
+  const rC = container.getBoundingClientRect();
+  let minTop = Infinity;
+  let maxBottom = -Infinity;
+  let found = false;
+  const kids = Array.from(container.children);
+  for (const k of kids) {
+    if (willBeExcluded(k, options)) continue;
+    if (!isInNormalFlow(k)) continue;
+    const rk = k.getBoundingClientRect();
+    const top = rk.top - rC.top;
+    const bottom = rk.bottom - rC.top;
+    if (bottom <= top) continue;
+    if (top < minTop) minTop = top;
+    if (bottom > maxBottom) maxBottom = bottom;
+    found = true;
+  }
+  const contentSpan = found ? Math.max(0, maxBottom - minTop) : 0;
+  const bt = parseFloat(csC.borderTopWidth) || 0;
+  const bb = parseFloat(csC.borderBottomWidth) || 0;
+  const pt = parseFloat(csC.paddingTop) || 0;
+  const pb = parseFloat(csC.paddingBottom) || 0;
+  return bt + bb + pt + pb + contentSpan;
 }
 var limitDecimals = (v, n = 3) => Number.isFinite(v) ? Math.round(v * 10 ** n) / 10 ** n : v;
+
+// src/utils/transforms.helpers.js
+function parseBoxShadow(cs) {
+  const v = cs.boxShadow || "";
+  if (!v || v === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const parts = v.split(/\),(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((s) => s.trim());
+  let t = 0, r = 0, b2 = 0, l = 0;
+  for (const part of parts) {
+    const nums = part.match(/-?\d+(\.\d+)?px/g)?.map((n) => parseFloat(n)) || [];
+    if (nums.length < 2) continue;
+    const [ox2, oy2, blur = 0, spread = 0] = nums;
+    const extX = Math.abs(ox2) + blur + spread;
+    const extY = Math.abs(oy2) + blur + spread;
+    r = Math.max(r, extX + Math.max(ox2, 0));
+    l = Math.max(l, extX + Math.max(-ox2, 0));
+    b2 = Math.max(b2, extY + Math.max(oy2, 0));
+    t = Math.max(t, extY + Math.max(-oy2, 0));
+  }
+  return { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b2), left: Math.ceil(l) };
+}
+function parseFilterBlur(cs) {
+  const m = (cs.filter || "").match(/blur\(\s*([0-9.]+)px\s*\)/);
+  const b2 = m ? Math.ceil(parseFloat(m[1]) || 0) : 0;
+  return { top: b2, right: b2, bottom: b2, left: b2 };
+}
+function parseOutline(cs) {
+  if ((cs.outlineStyle || "none") === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const w2 = Math.ceil(parseFloat(cs.outlineWidth || "0") || 0);
+  return { top: w2, right: w2, bottom: w2, left: w2 };
+}
 function parseFilterDropShadows(cs) {
   const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
   if (!raw || raw === "none") {
@@ -3858,34 +4040,6 @@ function normalizeRootTransforms(originalEl, cloneRoot) {
     return null;
   }
 }
-function parseBoxShadow(cs) {
-  const v = cs.boxShadow || "";
-  if (!v || v === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
-  const parts = v.split(/\),(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((s) => s.trim());
-  let t = 0, r = 0, b2 = 0, l = 0;
-  for (const part of parts) {
-    const nums = part.match(/-?\d+(\.\d+)?px/g)?.map((n) => parseFloat(n)) || [];
-    if (nums.length < 2) continue;
-    const [ox2, oy2, blur = 0, spread = 0] = nums;
-    const extX = Math.abs(ox2) + blur + spread;
-    const extY = Math.abs(oy2) + blur + spread;
-    r = Math.max(r, extX + Math.max(ox2, 0));
-    l = Math.max(l, extX + Math.max(-ox2, 0));
-    b2 = Math.max(b2, extY + Math.max(oy2, 0));
-    t = Math.max(t, extY + Math.max(-oy2, 0));
-  }
-  return { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b2), left: Math.ceil(l) };
-}
-function parseFilterBlur(cs) {
-  const m = (cs.filter || "").match(/blur\(\s*([0-9.]+)px\s*\)/);
-  const b2 = m ? Math.ceil(parseFloat(m[1]) || 0) : 0;
-  return { top: b2, right: b2, bottom: b2, left: b2 };
-}
-function parseOutline(cs) {
-  if ((cs.outlineStyle || "none") === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
-  const w2 = Math.ceil(parseFloat(cs.outlineWidth || "0") || 0);
-  return { top: w2, right: w2, bottom: w2, left: w2 };
-}
 function bboxWithOriginFull(w2, h2, M, ox2, oy2) {
   const a2 = M.a, b2 = M.b, c2 = M.c, d2 = M.d, e2 = M.e || 0, f2 = M.f || 0;
   function pt(x, y) {
@@ -3905,17 +4059,24 @@ function bboxWithOriginFull(w2, h2, M, ox2, oy2) {
   }
   return { minX: minX2, minY: minY2, maxX: maxX2, maxY: maxY2, width: maxX2 - minX2, height: maxY2 - minY2 };
 }
-function hasTFBBox(el) {
-  return hasBBoxAffectingTransform(el);
-}
-function matrixFromComputed(el) {
-  const tr = getComputedStyle(el).transform;
-  if (!tr || tr === "none") return new DOMMatrix();
-  try {
-    return new DOMMatrix(tr);
-  } catch {
-    return new WebKitCSSMatrix(tr);
-  }
+function parseTransformOriginPx(cs, w, h) {
+  const raw = (cs.transformOrigin || "0 0").trim().split(/\s+/);
+  const [oxRaw, oyRaw] = [raw[0] || "0", raw[1] || "0"];
+  const toPx = (token, size) => {
+    const t = token.toLowerCase();
+    if (t === "left" || t === "top") return 0;
+    if (t === "center") return size / 2;
+    if (t === "right") return size;
+    if (t === "bottom") return size;
+    if (t.endsWith("px")) return parseFloat(t) || 0;
+    if (t.endsWith("%")) return (parseFloat(t) || 0) * size / 100;
+    if (/^-?\d+(\.\d+)?$/.test(t)) return parseFloat(t) || 0;
+    return 0;
+  };
+  return {
+    ox: toPx(oxRaw, w),
+    oy: toPx(oyRaw, h)
+  };
 }
 function readIndividualTransforms(el) {
   const out = { rotate: "0deg", scale: null, translate: null };
@@ -3972,35 +4133,6 @@ function readIndividualTransforms(el) {
   out.translate = cs.translate && cs.translate !== "none" ? cs.translate : null;
   return out;
 }
-function hasBBoxAffectingTransform(el) {
-  const cs = getComputedStyle(el);
-  const t = cs.transform || "none";
-  const hasMatrix = t !== "none" && !/^matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*,\s*0\s*,\s*0\s*\)$/i.test(t);
-  if (hasMatrix) return true;
-  const r = cs.rotate && cs.rotate !== "none" && cs.rotate !== "0deg";
-  const s = cs.scale && cs.scale !== "none" && cs.scale !== "1";
-  const tr = cs.translate && cs.translate !== "none" && cs.translate !== "0px 0px";
-  return Boolean(r || s || tr);
-}
-function parseTransformOriginPx(cs, w, h) {
-  const raw = (cs.transformOrigin || "0 0").trim().split(/\s+/);
-  const [oxRaw, oyRaw] = [raw[0] || "0", raw[1] || "0"];
-  const toPx = (token, size) => {
-    const t = token.toLowerCase();
-    if (t === "left" || t === "top") return 0;
-    if (t === "center") return size / 2;
-    if (t === "right") return size;
-    if (t === "bottom") return size;
-    if (t.endsWith("px")) return parseFloat(t) || 0;
-    if (t.endsWith("%")) return (parseFloat(t) || 0) * size / 100;
-    if (/^-?\d+(\.\d+)?$/.test(t)) return parseFloat(t) || 0;
-    return 0;
-  };
-  return {
-    ox: toPx(oxRaw, w),
-    oy: toPx(oyRaw, h)
-  };
-}
 var __measureHost = null;
 function getMeasureHost() {
   if (__measureHost) return __measureHost;
@@ -4035,6 +4167,255 @@ function readTotalTransformMatrix(t) {
   host.removeChild(tmp);
   return M;
 }
+function hasBBoxAffectingTransform(el) {
+  const cs = getComputedStyle(el);
+  const t = cs.transform || "none";
+  const hasMatrix = t !== "none" && !/^matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*,\s*0\s*,\s*0\s*\)$/i.test(t);
+  if (hasMatrix) return true;
+  const r = cs.rotate && cs.rotate !== "none" && cs.rotate !== "0deg";
+  const s = cs.scale && cs.scale !== "none" && cs.scale !== "1";
+  const tr = cs.translate && cs.translate !== "none" && cs.translate !== "0px 0px";
+  return Boolean(r || s || tr);
+}
+function matrixFromComputed(el) {
+  const tr = getComputedStyle(el).transform;
+  if (!tr || tr === "none") return new DOMMatrix();
+  try {
+    return new DOMMatrix(tr);
+  } catch {
+    return new WebKitCSSMatrix(tr);
+  }
+}
+
+// src/core/capture.js
+async function captureDOM(element, options) {
+  if (!element) throw new Error("Element cannot be null or undefined");
+  applyCachePolicy(options.cache);
+  const fast = options.fast;
+  const outerTransforms = options.outerTransforms !== false;
+  const outerShadows = !!options.outerShadows;
+  let state = { element, options, plugins: options.plugins };
+  let clone, classCSS, styleCache;
+  let fontsCSS = "";
+  let baseCSS = "";
+  let dataURL;
+  let svgString;
+  let rootTransform2D = null;
+  await runHook("beforeSnap", state);
+  await runHook("beforeClone", state);
+  const undoClamp = lineClamp(state.element);
+  try {
+    ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options));
+    if (!outerTransforms && clone) {
+      rootTransform2D = normalizeRootTransforms(state.element, clone);
+    }
+    if (!outerShadows && clone) {
+      stripRootShadows(state.element, clone);
+    }
+  } finally {
+    undoClamp();
+  }
+  state = { clone, classCSS, styleCache, ...state };
+  await runHook("afterClone", state);
+  sanitizeCloneForXHTML(state.clone);
+  if (state.options?.excludeMode === "remove") {
+    try {
+      shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache);
+    } catch (e) {
+      console.warn("[snapdom] shrink pass failed:", e);
+    }
+  }
+  try {
+    await ligatureIconToImage(state.clone, state.element);
+  } catch {
+  }
+  await new Promise((resolve) => {
+    idle(async () => {
+      await inlineImages(state.clone, state.options);
+      resolve();
+    }, { fast });
+  });
+  await new Promise((resolve) => {
+    idle(async () => {
+      await inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
+      resolve();
+    }, { fast });
+  });
+  if (options.embedFonts) {
+    await new Promise((resolve) => {
+      idle(async () => {
+        const required = collectUsedFontVariants(state.element);
+        const usedCodepoints = collectUsedCodepoints(state.element);
+        if (isSafari()) {
+          const families = new Set(
+            Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
+          );
+          await ensureFontsReady(families, 1);
+        }
+        fontsCSS = await embedCustomFonts({
+          required,
+          usedCodepoints,
+          preCached: false,
+          exclude: state.options.excludeFonts,
+          useProxy: state.options.useProxy
+        });
+        resolve();
+      }, { fast });
+    });
+  }
+  const usedTags = collectUsedTagNames(state.clone).sort();
+  const tagKey = usedTags.join(",");
+  if (cache.baseStyle.has(tagKey)) {
+    baseCSS = cache.baseStyle.get(tagKey);
+  } else {
+    await new Promise((resolve) => {
+      idle(() => {
+        baseCSS = generateDedupedBaseCSS(usedTags);
+        cache.baseStyle.set(tagKey, baseCSS);
+        resolve();
+      }, { fast });
+    });
+  }
+  state = { fontsCSS, baseCSS, ...state };
+  await runHook("beforeRender", state);
+  await new Promise((resolve) => {
+    idle(() => {
+      const csEl = getComputedStyle(state.element);
+      const rect = state.element.getBoundingClientRect();
+      let w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
+      let h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      if (state.options?.excludeMode === "remove") {
+        const hEst = estimateKeptHeight(state.element, state.options);
+        const EPS = 1;
+        if (Number.isFinite(hEst) && hEst > 0) {
+          h0 = Math.max(1, Math.min(h0, limitDecimals(hEst + EPS)));
+        }
+      }
+      const coerceNum = (v, def = NaN) => {
+        const n = typeof v === "string" ? parseFloat(v) : v;
+        return Number.isFinite(n) ? n : def;
+      };
+      const optW = coerceNum(state.options.width);
+      const optH = coerceNum(state.options.height);
+      let w = w0, h = h0;
+      const hasW = Number.isFinite(optW);
+      const hasH = Number.isFinite(optH);
+      const aspect0 = h0 > 0 ? w0 / h0 : 1;
+      if (hasW && hasH) {
+        w = Math.max(1, limitDecimals(optW));
+        h = Math.max(1, limitDecimals(optH));
+      } else if (hasW) {
+        w = Math.max(1, limitDecimals(optW));
+        h = Math.max(1, limitDecimals(w / (aspect0 || 1)));
+      } else if (hasH) {
+        h = Math.max(1, limitDecimals(optH));
+        w = Math.max(1, limitDecimals(h * (aspect0 || 1)));
+      } else {
+        w = w0;
+        h = h0;
+      }
+      let minX = 0, minY = 0, maxX = w0, maxY = h0;
+      if (!outerTransforms && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
+        const M2 = {
+          a: rootTransform2D.a,
+          b: rootTransform2D.b || 0,
+          c: rootTransform2D.c || 0,
+          d: rootTransform2D.d || 1,
+          e: 0,
+          f: 0
+        };
+        const bb2 = bboxWithOriginFull(w0, h0, M2, 0, 0);
+        minX = limitDecimals(bb2.minX);
+        minY = limitDecimals(bb2.minY);
+        maxX = limitDecimals(bb2.maxX);
+        maxY = limitDecimals(bb2.maxY);
+      } else {
+        const useTFBBox = outerTransforms && hasTFBBox(state.element);
+        if (useTFBBox) {
+          const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
+          const ind2 = readIndividualTransforms(state.element);
+          const TOTAL = readTotalTransformMatrix({
+            baseTransform: baseTransform2,
+            rotate: ind2.rotate || "0deg",
+            scale: ind2.scale,
+            translate: ind2.translate
+          });
+          const { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0);
+          const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString());
+          const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2);
+          minX = limitDecimals(bb.minX);
+          minY = limitDecimals(bb.minY);
+          maxX = limitDecimals(bb.maxX);
+          maxY = limitDecimals(bb.maxY);
+        }
+      }
+      const bleedShadow = parseBoxShadow(csEl);
+      const bleedBlur = parseFilterBlur(csEl);
+      const bleedOutline = parseOutline(csEl);
+      const drop = parseFilterDropShadows(csEl);
+      const bleed = !outerShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
+        top: limitDecimals(bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top),
+        right: limitDecimals(bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right),
+        bottom: limitDecimals(bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom),
+        left: limitDecimals(bleedShadow.left + bleedBlur.left + bleedOutline.left + drop.bleed.left)
+      };
+      minX = limitDecimals(minX - bleed.left);
+      minY = limitDecimals(minY - bleed.top);
+      maxX = limitDecimals(maxX + bleed.right);
+      maxY = limitDecimals(maxY + bleed.bottom);
+      const vbW0 = Math.max(1, limitDecimals(maxX - minX));
+      const vbH0 = Math.max(1, limitDecimals(maxY - minY));
+      const scaleW = hasW || hasH ? limitDecimals(w / w0) : 1;
+      const scaleH = hasH || hasW ? limitDecimals(h / h0) : 1;
+      const outW = Math.max(1, limitDecimals(vbW0 * scaleW));
+      const outH = Math.max(1, limitDecimals(vbH0 * scaleH));
+      const svgNS = "http://www.w3.org/2000/svg";
+      const basePad = isSafari() ? 1 : 0;
+      const extraPad = !outerTransforms ? 1 : 0;
+      const pad = limitDecimals(basePad + extraPad);
+      const fo = document.createElementNS(svgNS, "foreignObject");
+      const vbMinX = limitDecimals(minX);
+      const vbMinY = limitDecimals(minY);
+      fo.setAttribute("x", String(limitDecimals(-(vbMinX - pad))));
+      fo.setAttribute("y", String(limitDecimals(-(vbMinY - pad))));
+      fo.setAttribute("width", String(limitDecimals(w0 + pad * 2)));
+      fo.setAttribute("height", String(limitDecimals(h0 + pad * 2)));
+      fo.style.overflow = "visible";
+      const styleTag = document.createElement("style");
+      styleTag.textContent = state.baseCSS + state.fontsCSS + "svg{overflow:visible;} foreignObject{overflow:visible;}" + state.classCSS;
+      fo.appendChild(styleTag);
+      const container = document.createElement("div");
+      container.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+      container.style.width = `${limitDecimals(w0)}px`;
+      container.style.height = `${limitDecimals(h0)}px`;
+      container.style.overflow = "visible";
+      state.clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+      container.appendChild(state.clone);
+      fo.appendChild(container);
+      const serializer = new XMLSerializer();
+      const foString = serializer.serializeToString(fo);
+      const vbW = limitDecimals(vbW0 + pad * 2);
+      const vbH = limitDecimals(vbH0 + pad * 2);
+      const wantsSize = hasW || hasH;
+      options.meta = { w0, h0, vbW, vbH, targetW: w, targetH: h };
+      const svgOutW = isSafari() && wantsSize ? vbW : limitDecimals(outW + pad * 2);
+      const svgOutH = isSafari() && wantsSize ? vbH : limitDecimals(outH + pad * 2);
+      const svgHeader = `<svg xmlns="${svgNS}" width="${svgOutW}" height="${svgOutH}" viewBox="0 0 ${vbW} ${vbH}">`;
+      const svgFooter = "</svg>";
+      svgString = svgHeader + foString + svgFooter;
+      dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+      state = { svgString, dataURL, ...state };
+      resolve();
+    }, { fast });
+  });
+  await runHook("afterRender", state);
+  const sandbox = document.getElementById("snapdom-sandbox");
+  if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
+  return state.dataURL;
+}
+function hasTFBBox(el) {
+  return hasBBoxAffectingTransform(el);
+}
 
 // src/core/context.js
 function normalizeCachePolicy(v) {
@@ -4191,7 +4572,7 @@ function maybeConvertBoxShadowForSafari(url) {
   }
 }
 async function toCanvas(url, options) {
-  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {} } = options;
+  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {}, backgroundColor } = options;
   url = maybeConvertBoxShadowForSafari(url);
   const img = new Image();
   img.loading = "eager";
@@ -4230,6 +4611,12 @@ async function toCanvas(url, options) {
   canvas.style.height = `${outH}px`;
   const ctx = canvas.getContext("2d");
   if (dpr !== 1) ctx.scale(dpr, dpr);
+  if (backgroundColor) {
+    ctx.save();
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, outW, outH);
+    ctx.restore();
+  }
   ctx.drawImage(img, 0, 0, outW, outH);
   return canvas;
 }
@@ -4237,12 +4624,11 @@ async function toCanvas(url, options) {
 // src/modules/rasterize.js
 async function rasterize(url, options) {
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const img = new Image();
-  img.src = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  img.src = canvas.toDataURL(`image/${options.format}`, options.quality);
   await img.decode();
-  img.style.width = `${finalCanvas.width / options.dpr}px`;
-  img.style.height = `${finalCanvas.height / options.dpr}px`;
+  img.style.width = `${canvas.width / options.dpr}px`;
+  img.style.height = `${canvas.height / options.dpr}px`;
   return img;
 }
 
@@ -4302,13 +4688,8 @@ async function toBlob(url, options) {
     return new Blob([svgText], { type: "image/svg+xml" });
   }
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   return new Promise(
-    (resolve) => finalCanvas.toBlob(
-      (blob) => resolve(blob),
-      `image/${type}`,
-      options.quality
-    )
+    (resolve) => canvas.toBlob((blob) => resolve(blob), `image/${type}`, options.quality)
   );
 }
 
@@ -4326,9 +4707,8 @@ async function download(url, options) {
     return;
   }
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const a = document.createElement("a");
-  a.href = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  a.href = canvas.toDataURL(`image/${options.format}`, options.quality);
   a.download = options.filename;
   a.click();
 }