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

package/README.md

@@ -29,6 +29,8 @@
   </a>
 </p>
 
+<p align="center">English | <a href="README_CN.md">简体中文</a></p>
+
 # snapDOM
 
 **snapDOM** is a fast and accurate DOM-to-image capture tool built for **Zumly**, a zoom-based view transition framework.
@@ -751,6 +753,7 @@ For detailed contribution guidelines, please see [CONTRIBUTING](https://github.c
 <a href="https://github.com/tinchox5" title="tinchox5"><img src="https://avatars.githubusercontent.com/u/11557901?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="tinchox5"/></a>
 <a href="https://github.com/Jarvis2018" title="Jarvis2018"><img src="https://avatars.githubusercontent.com/u/36788851?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="Jarvis2018"/></a>
 <a href="https://github.com/tarwin" title="tarwin"><img src="https://avatars.githubusercontent.com/u/646149?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="tarwin"/></a>
+<a href="https://github.com/jswhisperer" title="jswhisperer"><img src="https://avatars.githubusercontent.com/u/1177690?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="jswhisperer"/></a>
 <a href="https://github.com/K1ender" title="K1ender"><img src="https://avatars.githubusercontent.com/u/146767945?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="K1ender"/></a>
 <a href="https://github.com/17biubiu" title="17biubiu"><img src="https://avatars.githubusercontent.com/u/13295895?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="17biubiu"/></a>
 <a href="https://github.com/av01d" title="av01d"><img src="https://avatars.githubusercontent.com/u/6247646?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="av01d"/></a>
@@ -758,7 +761,7 @@ For detailed contribution guidelines, please see [CONTRIBUTING](https://github.c
 <a href="https://github.com/pedrocateexte" title="pedrocateexte"><img src="https://avatars.githubusercontent.com/u/207524750?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="pedrocateexte"/></a>
 <a href="https://github.com/domialex" title="domialex"><img src="https://avatars.githubusercontent.com/u/4694217?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="domialex"/></a>
 <a href="https://github.com/elliots" title="elliots"><img src="https://avatars.githubusercontent.com/u/622455?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="elliots"/></a>
-<a href="https://github.com/jswhisperer" title="jswhisperer"><img src="https://avatars.githubusercontent.com/u/1177690?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="jswhisperer"/></a>
+<a href="https://github.com/mon-jai" title="mon-jai"><img src="https://avatars.githubusercontent.com/u/91261297?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="mon-jai"/></a>
 <a href="https://github.com/sharuzzaman" title="sharuzzaman"><img src="https://avatars.githubusercontent.com/u/7421941?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="sharuzzaman"/></a>
 <a href="https://github.com/simon1uo" title="simon1uo"><img src="https://avatars.githubusercontent.com/u/60037549?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="simon1uo"/></a>
 <a href="https://github.com/titoBouzout" title="titoBouzout"><img src="https://avatars.githubusercontent.com/u/64156?v=4&s=100" style="border-radius:10px; width:60px; height:60px; object-fit:cover; margin:5px;" alt="titoBouzout"/></a>
@@ -784,4 +787,4 @@ If you'd like to support this project too, you can [become a sponsor](https://gi
 
 ## License
 
-MIT © Zumerlab
+MIT © Zumerlab

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.1
+* v.2.0.0-dev.2
 * 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",
@@ -1482,17 +1494,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 +1522,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 +1591,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 +1602,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 +1624,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 +1635,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 +1665,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 +2059,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 +2271,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);
@@ -3682,8 +3753,53 @@ ${imported}
     } catch (e) {
     }
   }
+  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;
+        }
+      }
+    }
+  }
+  function sanitizeCloneForXHTML(root, opts = {}) {
+    if (!root) return;
+    sanitizeAttributesForXHTML(root, opts);
+    removeAllComments(root);
+  }
   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;
@@ -3712,6 +3828,14 @@ ${imported}
       }
       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) {
@@ -3767,10 +3891,18 @@ ${imported}
       yield runHook("beforeRender", state);
       yield new Promise((resolve) => {
         idle(() => {
+          var _a2;
           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));
+          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;
@@ -3894,6 +4026,58 @@ ${imported}
       return state.dataURL;
     });
   }
+  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";
+        }
+      }
+      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]);
+      }
+    }
+    walk(sourceRoot, cloneRoot);
+  }
   var limitDecimals = (v, n = 3) => Number.isFinite(v) ? Math.round(v * __pow(10, n)) / __pow(10, n) : v;
   function parseFilterDropShadows(cs) {
     var _a;
@@ -4163,6 +4347,52 @@ ${imported}
     host.removeChild(tmp);
     return M;
   }
+  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) {
+        }
+      }
+    }
+    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;
+  }
 
   // src/core/context.js
   function normalizeCachePolicy(v) {
@@ -4321,7 +4551,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 +4590,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 +4605,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 +4673,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 +4694,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();
     });