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

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.1
+* v.2.0.0-dev.3
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -374,19 +374,6 @@
   }
 
   // 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;
-  }
   function inlineSingleBackgroundEntry(_0) {
     return __async(this, arguments, function* (entry, options = {}) {
       const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
@@ -664,11 +651,20 @@
     }
   }
   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
@@ -714,6 +710,22 @@
       }
       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 (e) {
+      }
+    }
     if (options.embedFonts) {
       const EXTRA_FONT_PROPS = [
         "font-feature-settings",
@@ -960,7 +972,7 @@
     }
   }
 
-  // src/core/clone.js
+  // src/utils/clone.helpers.js
   function idleCallback(childList, callback, fast) {
     return Promise.all(childList.map((child) => {
       return new Promise((resolve) => {
@@ -1177,6 +1189,143 @@
       return wrapper;
     });
   }
+  var _blobToDataUrlCache = /* @__PURE__ */ new Map();
+  function blobUrlToDataUrl(blobUrl) {
+    return __async(this, null, function* () {
+      var _a;
+      if ((_a = cache.resource) == null ? void 0 : _a.has(blobUrl)) return cache.resource.get(blobUrl);
+      if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+      const p = (() => __async(null, null, function* () {
+        var _a2;
+        const r = yield snapFetch(blobUrl, { as: "dataURL", silent: true });
+        if (!r.ok || typeof r.data !== "string") {
+          throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
+        }
+        (_a2 = cache.resource) == null ? void 0 : _a2.set(blobUrl, r.data);
+        return r.data;
+      }))();
+      _blobToDataUrlCache.set(blobUrl, p);
+      try {
+        const data = yield p;
+        _blobToDataUrlCache.set(blobUrl, data);
+        return data;
+      } catch (e) {
+        _blobToDataUrlCache.delete(blobUrl);
+        throw e;
+      }
+    });
+  }
+  var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
+  function replaceBlobUrlsInCssText(cssText) {
+    return __async(this, null, function* () {
+      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 = yield blobUrlToDataUrl(u);
+          out = out.split(u).join(d);
+        } catch (e) {
+        }
+      }
+      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(", ");
+  }
+  function resolveBlobUrlsInTree(root) {
+    return __async(this, null, function* () {
+      var _a, _b;
+      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 = yield 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 = yield blobUrlToDataUrl(p.url);
+                  changed = true;
+                } catch (e) {
+                }
+              }
+            }
+            if (changed) img.setAttribute("srcset", stringifySrcset(parts));
+          }
+        } catch (e) {
+        }
+      }
+      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") || ((_a = node.getAttributeNS) == null ? void 0 : _a.call(node, XLINK_NS, "href"));
+          if (isBlobUrl(href)) {
+            const d = yield blobUrlToDataUrl(href);
+            node.setAttribute("href", d);
+            (_b = node.removeAttributeNS) == null ? void 0 : _b.call(node, XLINK_NS, "href");
+          }
+        } catch (e) {
+        }
+      }
+      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 = yield replaceBlobUrlsInCssText(styleText);
+            el.setAttribute("style", replaced);
+          }
+        } catch (e) {
+        }
+      }
+      const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
+      for (const s of styleTags) {
+        try {
+          const css = s.textContent || "";
+          if (css.includes("blob:")) {
+            s.textContent = yield replaceBlobUrlsInCssText(css);
+          }
+        } catch (e) {
+        }
+      }
+      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, yield blobUrlToDataUrl(u));
+            }
+          } catch (e) {
+          }
+        }
+      }
+    });
+  }
+
+  // src/core/clone.js
   function deepClone(node, sessionCache, options) {
     return __async(this, null, function* () {
       var _a, _b, _c, _d, _e, _f;
@@ -1482,17 +1631,19 @@
     /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) {
@@ -1508,11 +1659,66 @@
     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;
+  }
+  function ensureLigatureCanvasFont(cssFamily, className, axes) {
+    return __async(this, null, function* () {
+      var _a;
+      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 && ((_a = axes.FILL) != null ? _a : 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);
+          yield ff.load();
+          loadedCanvasFamilies.set(pick.alias, true);
+        } catch (e) {
+          return { familyForMeasure: fam, familyForCanvas: fam };
+        }
+      }
+      const quoted = `"${pick.alias}"`;
+      return { familyForMeasure: quoted, familyForCanvas: quoted };
+    });
+  }
   function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
     return __async(this, null, function* () {
       try {
         yield 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 (e) {
@@ -1522,10 +1728,8 @@
   function resolvePaintColor(cs) {
     var _a, _b;
     let fill = ((_a = cs.getPropertyValue("-webkit-text-fill-color")) == null ? void 0 : _a.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 = (_b = cs.color) == null ? void 0 : _b.trim();
     return c && c !== "inherit" ? c : "#000";
   }
@@ -1535,18 +1739,21 @@
       weight = "normal",
       fontSize = 32,
       color = "#000",
-      variation = ""
+      variation = "",
+      className = ""
     } = {}) {
       const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
       const dpr = window.devicePixelRatio || 1;
-      yield ensureMaterialFontsReady(fam, fontSize);
+      const axes = parseAxes(variation);
+      const { familyForMeasure, familyForCanvas } = yield ensureLigatureCanvasFont(fam, className, axes);
+      yield 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";
@@ -1554,7 +1761,6 @@
       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();
@@ -1566,7 +1772,7 @@
       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;
@@ -1596,21 +1802,23 @@
         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 } = yield materialIconToImage(text, {
             family,
             weight,
             fontSize: size,
             color,
-            variation
+            variation,
+            className
           });
           el.textContent = "";
           const img = el.ownerDocument.createElement("img");
@@ -1988,7 +2196,7 @@ ${imported}
       const styleSpec = (((_c = block.match(/font-style:\s*([^;]+);/i)) == null ? void 0 : _c[1]) || "normal").trim();
       const stretchSpec = (((_d = block.match(/font-stretch:\s*([^;]+);/i)) == null ? void 0 : _d[1]) || "100%").trim();
       const urange = (((_e = block.match(/unicode-range:\s*([^;]+);/i)) == null ? void 0 : _e[1]) || "").trim();
-      const srcRaw = (((_f = block.match(/src\s*:\s*([^;]+);/i)) == null ? void 0 : _f[1]) || "").trim();
+      const srcRaw = (((_f = block.match(/src\s*:\s*([^;}]+)[;}]/i)) == null ? void 0 : _f[1]) || "").trim();
       const urls = extractSrcUrls(srcRaw, location.href);
       const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
       const key = [
@@ -2200,7 +2408,7 @@ ${imported}
             const styleSpec = (((_d = face.match(/font-style:\s*([^;]+);/i)) == null ? void 0 : _d[1]) || "normal").trim();
             const stretchSpec = (((_e = face.match(/font-stretch:\s*([^;]+);/i)) == null ? void 0 : _e[1]) || "100%").trim();
             const urange = (((_f = face.match(/unicode-range:\s*([^;]+);/i)) == null ? void 0 : _f[1]) || "").trim();
-            const srcRaw = (((_g = face.match(/src\s*:\s*([^;]+);/i)) == null ? void 0 : _g[1]) || "").trim();
+            const srcRaw = (((_g = face.match(/src\s*:\s*([^;}]+)[;}]/i)) == null ? void 0 : _g[1]) || "").trim();
             const srcUrls = extractSrcUrls(srcRaw, link.href);
             if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
             const ranges = parseUnicodeRange(urange);
@@ -2620,6 +2828,152 @@ ${imported}
   }
 
   // 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 (e) {
+      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 (e) {
+      }
+    }
+    {
+      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) {
@@ -2718,8 +3072,12 @@ ${imported}
   }
   function inlinePseudoElements(source, clone, sessionCache, options) {
     return __async(this, null, function* () {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
+      const doc = source.ownerDocument || document;
+      if (!preflightWithFp(doc, sessionCache)) {
+        return;
+      }
       const epoch = (_c = (_b = (_a = cache) == null ? void 0 : _a.session) == null ? void 0 : _b.__counterEpoch) != null ? _c : 0;
       if (__pseudoEpoch !== epoch) {
         __siblingCounters = /* @__PURE__ */ new WeakMap();
@@ -2736,7 +3094,7 @@ ${imported}
       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") {
@@ -2766,7 +3124,8 @@ ${imported}
             clone.insertBefore(span, restNode);
             continue;
           }
-          const rawContent = style.content;
+          const rawContent = (_d = style.content) != null ? _d : "";
+          const isNoExplicitContent = rawContent === "" || rawContent === "none" || rawContent === "normal";
           const { text: cleanContent, incs } = resolvePseudoContentAndIncs(source, pseudo, counterCtx);
           const bg = style.backgroundImage;
           const bgColor = style.backgroundColor;
@@ -2778,7 +3137,7 @@ ${imported}
           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;
@@ -2800,8 +3159,6 @@ ${imported}
           }
           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");
@@ -2857,7 +3214,7 @@ ${imported}
             }
           }
           if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_d = pseudoEl.textContent) == null ? void 0 : _d.trim()) !== "";
+          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_e = pseudoEl.textContent) == null ? void 0 : _e.trim()) !== "";
           const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBorder || hasTransform;
           if (incs && incs.length && source.parentElement) {
             const map = __siblingCounters.get(source.parentElement) || /* @__PURE__ */ new Map();
@@ -3096,6 +3453,20 @@ ${imported}
     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
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, options = {}) {
@@ -3199,163 +3570,27 @@ ${imported}
       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`;
-    }
+
+  // src/modules/images.js
+  function extractImageDimensions(img) {
+    var _a, _b, _c, _d;
+    const dsW = parseInt(((_a = img.dataset) == null ? void 0 : _a.snapdomWidth) || "", 10) || 0;
+    const dsH = parseInt(((_b = img.dataset) == null ? void 0 : _b.snapdomHeight) || "", 10) || 0;
+    const attrW = parseInt(img.getAttribute("width") || "", 10) || 0;
+    const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
+    const styleW = parseFloat(((_c = img.style) == null ? void 0 : _c.width) || "") || 0;
+    const styleH = parseFloat(((_d = img.style) == null ? void 0 : _d.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 _blobToDataUrlCache = /* @__PURE__ */ new Map();
-  function blobUrlToDataUrl(blobUrl) {
-    return __async(this, null, function* () {
-      var _a;
-      if ((_a = cache.resource) == null ? void 0 : _a.has(blobUrl)) return cache.resource.get(blobUrl);
-      if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
-      const p = (() => __async(null, null, function* () {
-        var _a2;
-        const r = yield snapFetch(blobUrl, { as: "dataURL", silent: true });
-        if (!r.ok || typeof r.data !== "string") {
-          throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
-        }
-        (_a2 = cache.resource) == null ? void 0 : _a2.set(blobUrl, r.data);
-        return r.data;
-      }))();
-      _blobToDataUrlCache.set(blobUrl, p);
-      try {
-        const data = yield p;
-        _blobToDataUrlCache.set(blobUrl, data);
-        return data;
-      } catch (e) {
-        _blobToDataUrlCache.delete(blobUrl);
-        throw e;
-      }
-    });
-  }
-  var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
-  function replaceBlobUrlsInCssText(cssText) {
-    return __async(this, null, function* () {
-      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 = yield blobUrlToDataUrl(u);
-          out = out.split(u).join(d);
-        } catch (e) {
-        }
-      }
-      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(", ");
-  }
-  function resolveBlobUrlsInTree(root) {
-    return __async(this, null, function* () {
-      var _a, _b;
-      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 = yield 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 = yield blobUrlToDataUrl(p.url);
-                  changed = true;
-                } catch (e) {
-                }
-              }
-            }
-            if (changed) img.setAttribute("srcset", stringifySrcset(parts));
-          }
-        } catch (e) {
-        }
-      }
-      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") || ((_a = node.getAttributeNS) == null ? void 0 : _a.call(node, XLINK_NS, "href"));
-          if (isBlobUrl(href)) {
-            const d = yield blobUrlToDataUrl(href);
-            node.setAttribute("href", d);
-            (_b = node.removeAttributeNS) == null ? void 0 : _b.call(node, XLINK_NS, "href");
-          }
-        } catch (e) {
-        }
-      }
-      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 = yield replaceBlobUrlsInCssText(styleText);
-            el.setAttribute("style", replaced);
-          }
-        } catch (e) {
-        }
-      }
-      const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
-      for (const s of styleTags) {
-        try {
-          const css = s.textContent || "";
-          if (css.includes("blob:")) {
-            s.textContent = yield replaceBlobUrlsInCssText(css);
-          }
-        } catch (e) {
-        }
-      }
-      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, yield blobUrlToDataUrl(u));
-            }
-          } catch (e) {
-          }
-        }
-      }
-    });
-  }
-
-  // src/modules/images.js
-  function inlineImages(_0) {
-    return __async(this, arguments, function* (clone, options = {}) {
-      const imgs = Array.from(clone.querySelectorAll("img"));
-      const processImg = (img) => __async(null, null, function* () {
-        var _a, _b, _c, _d;
-        if (!img.getAttribute("src")) {
-          const eff = img.currentSrc || img.src || "";
-          if (eff) img.setAttribute("src", eff);
+  function inlineImages(_0) {
+    return __async(this, arguments, function* (clone, options = {}) {
+      const imgs = Array.from(clone.querySelectorAll("img"));
+      const processImg = (img) => __async(null, null, function* () {
+        if (!img.getAttribute("src")) {
+          const eff = img.currentSrc || img.src || "";
+          if (eff) img.setAttribute("src", eff);
         }
         img.removeAttribute("srcset");
         img.removeAttribute("sizes");
@@ -3368,41 +3603,30 @@ ${imported}
           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(((_a = img.dataset) == null ? void 0 : _a.snapdomWidth) || "", 10) || 0;
-            const dsH = parseInt(((_b = img.dataset) == null ? void 0 : _b.snapdomHeight) || "", 10) || 0;
-            const attrW = parseInt(img.getAttribute("width") || "", 10) || 0;
-            const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
-            const styleW = parseFloat(((_c = img.style) == null ? void 0 : _c.width) || "") || 0;
-            const styleH = parseFloat(((_d = img.style) == null ? void 0 : _d.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" ? yield fallbackURL({ width: fbW, height: fbH, src, element: img }) : fallbackURL;
             if (fallbackUrl) {
               const fallbackData = yield 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 (e) {
           }
         }
-        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"
@@ -3411,7 +3635,7 @@ ${imported}
           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);
         }
       });
@@ -3659,7 +3883,7 @@ ${imported}
     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);
@@ -3682,219 +3906,180 @@ ${imported}
     } catch (e) {
     }
   }
-  function captureDOM(element, options) {
-    return __async(this, null, function* () {
-      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;
-      yield runHook("beforeSnap", state);
-      yield runHook("beforeClone", state);
-      const undoClamp = lineClamp(state.element);
-      try {
-        ({ clone, classCSS, styleCache } = yield prepareClone(state.element, state.options));
-        if (!outerTransforms && clone) {
-          rootTransform2D = normalizeRootTransforms(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 (!outerShadows && clone) {
-          stripRootShadows(state.element, clone);
+        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 = __spreadValues({ clone, classCSS, styleCache }, state);
-      yield runHook("afterClone", state);
-      try {
-        yield ligatureIconToImage(state.clone, state.element);
-      } catch (e) {
+    }
+  }
+  function sanitizeCloneForXHTML(root, opts = {}) {
+    if (!root) return;
+    sanitizeAttributesForXHTML(root, opts);
+    removeAllComments(root);
+  }
+  function authorHasExplicitSize(el) {
+    var _a;
+    try {
+      const s = ((_a = el.getAttribute) == null ? void 0 : _a.call(el, "style")) || "";
+      return /\b(height|width|block-size|inline-size)\s*:/.test(s);
+    } catch (e) {
+      return false;
+    }
+  }
+  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";
+        }
       }
-      yield new Promise((resolve) => {
-        idle(() => __async(null, null, function* () {
-          yield inlineImages(state.clone, state.options);
-          resolve();
-        }), { fast });
-      });
-      yield new Promise((resolve) => {
-        idle(() => __async(null, null, function* () {
-          yield inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
-          resolve();
-        }), { fast });
-      });
-      if (options.embedFonts) {
-        yield new Promise((resolve) => {
-          idle(() => __async(null, null, function* () {
-            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)
-              );
-              yield ensureFontsReady(families, 1);
-            }
-            fontsCSS = yield embedCustomFonts({
-              required,
-              usedCodepoints,
-              preCached: false,
-              exclude: state.options.excludeFonts,
-              useProxy: state.options.useProxy
-            });
-            resolve();
-          }), { fast });
-        });
+      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]);
       }
-      const usedTags = collectUsedTagNames(state.clone).sort();
-      const tagKey = usedTags.join(",");
-      if (cache.baseStyle.has(tagKey)) {
-        baseCSS = cache.baseStyle.get(tagKey);
-      } else {
-        yield new Promise((resolve) => {
-          idle(() => {
-            baseCSS = generateDedupedBaseCSS(usedTags);
-            cache.baseStyle.set(tagKey, baseCSS);
-            resolve();
-          }, { fast });
-        });
+    }
+    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 == null ? void 0 : options.excludeMode) === "remove") return true;
+    if (Array.isArray(options == null ? void 0 : options.exclude)) {
+      for (const sel of options.exclude) {
+        try {
+          if (el.matches(sel)) return options.excludeMode === "remove";
+        } catch (e) {
+        }
       }
-      state = __spreadValues({ fontsCSS, baseCSS }, state);
-      yield runHook("beforeRender", state);
-      yield 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;
-          }
-          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 = __spreadValues({ svgString, dataURL }, state);
-          resolve();
-        }, { fast });
-      });
-      yield 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 * __pow(10, n)) / __pow(10, n) : v;
+
+  // src/utils/transforms.helpers.js
+  function parseBoxShadow(cs) {
+    var _a;
+    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 = ((_a = part.match(/-?\d+(\.\d+)?px/g)) == null ? void 0 : _a.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) {
     var _a;
     const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
@@ -3984,35 +4169,6 @@ ${imported}
       return null;
     }
   }
-  function parseBoxShadow(cs) {
-    var _a;
-    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 = ((_a = part.match(/-?\d+(\.\d+)?px/g)) == null ? void 0 : _a.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) {
@@ -4032,17 +4188,24 @@ ${imported}
     }
     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 (e) {
-      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) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -4100,35 +4263,6 @@ ${imported}
     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;
@@ -4163,6 +4297,259 @@ ${imported}
     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 (e) {
+      return new WebKitCSSMatrix(tr);
+    }
+  }
+
+  // src/core/capture.js
+  function captureDOM(element, options) {
+    return __async(this, null, function* () {
+      var _a;
+      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;
+      yield runHook("beforeSnap", state);
+      yield runHook("beforeClone", state);
+      const undoClamp = lineClamp(state.element);
+      try {
+        ({ clone, classCSS, styleCache } = yield prepareClone(state.element, state.options));
+        if (!outerTransforms && clone) {
+          rootTransform2D = normalizeRootTransforms(state.element, clone);
+        }
+        if (!outerShadows && clone) {
+          stripRootShadows(state.element, clone);
+        }
+      } finally {
+        undoClamp();
+      }
+      state = __spreadValues({ clone, classCSS, styleCache }, state);
+      yield runHook("afterClone", state);
+      sanitizeCloneForXHTML(state.clone);
+      if (((_a = state.options) == null ? void 0 : _a.excludeMode) === "remove") {
+        try {
+          shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache);
+        } catch (e) {
+          console.warn("[snapdom] shrink pass failed:", e);
+        }
+      }
+      try {
+        yield ligatureIconToImage(state.clone, state.element);
+      } catch (e) {
+      }
+      yield new Promise((resolve) => {
+        idle(() => __async(null, null, function* () {
+          yield inlineImages(state.clone, state.options);
+          resolve();
+        }), { fast });
+      });
+      yield new Promise((resolve) => {
+        idle(() => __async(null, null, function* () {
+          yield inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
+          resolve();
+        }), { fast });
+      });
+      if (options.embedFonts) {
+        yield new Promise((resolve) => {
+          idle(() => __async(null, null, function* () {
+            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)
+              );
+              yield ensureFontsReady(families, 1);
+            }
+            fontsCSS = yield 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 {
+        yield new Promise((resolve) => {
+          idle(() => {
+            baseCSS = generateDedupedBaseCSS(usedTags);
+            cache.baseStyle.set(tagKey, baseCSS);
+            resolve();
+          }, { fast });
+        });
+      }
+      state = __spreadValues({ fontsCSS, baseCSS }, state);
+      yield runHook("beforeRender", state);
+      yield new Promise((resolve) => {
+        idle(() => {
+          var _a2;
+          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 (((_a2 = state.options) == null ? void 0 : _a2.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 = __spreadValues({ svgString, dataURL }, state);
+          resolve();
+        }, { fast });
+      });
+      yield 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) {
@@ -4321,7 +4708,7 @@ ${imported}
   }
   function toCanvas(url, options) {
     return __async(this, null, function* () {
-      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";
@@ -4360,6 +4747,12 @@ ${imported}
       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;
     });
@@ -4369,12 +4762,11 @@ ${imported}
   function rasterize(url, options) {
     return __async(this, null, function* () {
       const canvas = yield 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);
       yield 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;
     });
   }
@@ -4438,13 +4830,8 @@ ${imported}
         return new Blob([svgText], { type: "image/svg+xml" });
       }
       const canvas = yield 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)
       );
     });
   }
@@ -4464,9 +4851,8 @@ ${imported}
         return;
       }
       const canvas = yield 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();
     });