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

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.0
+* 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) {
@@ -1504,6 +1518,187 @@
     if (/icon/i.test(text) || /glyph/i.test(text) || /symbols/i.test(text) || /feather/i.test(text) || /fontawesome/i.test(text)) return true;
     return false;
   }
+  function isMaterialFamily(family = "") {
+    const s = String(family).toLowerCase();
+    return /\bmaterial\s*icons\b/.test(s) || /\bmaterial\s*symbols\b/.test(s);
+  }
+  var loadedCanvasFamilies = /* @__PURE__ */ new Map();
+  function parseAxes(variation = "") {
+    const out = /* @__PURE__ */ Object.create(null);
+    const v = String(variation || "");
+    const rx = /['"]?\s*([A-Za-z]{3,4})\s*['"]?\s*([+-]?\d+(?:\.\d+)?)\s*/g;
+    let m;
+    while (m = rx.exec(v)) out[m[1].toUpperCase()] = Number(m[2]);
+    return out;
+  }
+  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 "${String(family).replace(/["']/g, "")}"`),
+          document.fonts.ready
+        ]);
+      } catch (e) {
+      }
+    });
+  }
+  function resolvePaintColor(cs) {
+    var _a, _b;
+    let fill = ((_a = cs.getPropertyValue("-webkit-text-fill-color")) == null ? void 0 : _a.trim()) || "";
+    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";
+  }
+  function materialIconToImage(_0) {
+    return __async(this, arguments, function* (ligatureText, {
+      family = "Material Icons",
+      weight = "normal",
+      fontSize = 32,
+      color = "#000",
+      variation = "",
+      className = ""
+    } = {}) {
+      const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
+      const dpr = window.devicePixelRatio || 1;
+      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 = familyForMeasure;
+      span.style.fontWeight = String(weight || "normal");
+      span.style.fontSize = `${fontSize}px`;
+      span.style.lineHeight = "1";
+      span.style.margin = "0";
+      span.style.padding = "0";
+      span.style.fontFeatureSettings = "'liga' 1";
+      span.style.fontVariantLigatures = "normal";
+      span.style.color = color;
+      document.body.appendChild(span);
+      const rect = span.getBoundingClientRect();
+      const width = Math.max(1, Math.ceil(rect.width));
+      const height = Math.max(1, Math.ceil(rect.height));
+      document.body.removeChild(span);
+      const canvas = document.createElement("canvas");
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      const ctx = canvas.getContext("2d");
+      ctx.scale(dpr, dpr);
+      ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px ${familyForCanvas}`;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillStyle = color;
+      try {
+        ctx.fontKerning = "normal";
+      } catch (e) {
+      }
+      ctx.fillText(ligatureText, 0, 0);
+      return {
+        dataUrl: canvas.toDataURL(),
+        width,
+        height
+      };
+    });
+  }
+  function ligatureIconToImage(cloneRoot, sourceRoot) {
+    return __async(this, null, function* () {
+      if (!(cloneRoot instanceof Element)) return 0;
+      const selector = '.material-icons, [class*="material-symbols"]';
+      const cloneNodes = Array.from(
+        cloneRoot.querySelectorAll(selector)
+      ).filter((n) => n && n.textContent && n.textContent.trim());
+      if (cloneNodes.length === 0) return 0;
+      const sourceNodes = sourceRoot instanceof Element ? Array.from(sourceRoot.querySelectorAll(selector)).filter((n) => n && n.textContent && n.textContent.trim()) : [];
+      let replaced = 0;
+      for (let i = 0; i < cloneNodes.length; i++) {
+        const el = cloneNodes[i];
+        const src = sourceNodes[i] || null;
+        try {
+          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(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,
+            className
+          });
+          el.textContent = "";
+          const img = el.ownerDocument.createElement("img");
+          img.src = dataUrl;
+          img.alt = text;
+          img.style.height = `${size}px`;
+          img.style.width = `${Math.max(1, Math.round(width / height * size))}px`;
+          img.style.objectFit = "contain";
+          img.style.verticalAlign = getComputedStyle(el).verticalAlign || "baseline";
+          el.appendChild(img);
+          replaced++;
+        } catch (e) {
+        }
+      }
+      return replaced;
+    });
+  }
 
   // src/modules/fonts.js
   function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
@@ -1864,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 = [
@@ -2076,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);
@@ -3558,13 +3753,58 @@ ${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;
-      const straighten = !!options.straighten;
-      const noShadows = !!options.noShadows;
+      const outerTransforms = options.outerTransforms !== false;
+      const outerShadows = !!options.outerShadows;
       let state = { element, options, plugins: options.plugins };
       let clone, classCSS, styleCache;
       let fontsCSS = "";
@@ -3577,17 +3817,29 @@ ${imported}
       const undoClamp = lineClamp(state.element);
       try {
         ({ clone, classCSS, styleCache } = yield prepareClone(state.element, state.options));
-        if (straighten && clone) {
-          rootTransform2D = normalizeRootTransforms(state.element, state.clone);
+        if (!outerTransforms && clone) {
+          rootTransform2D = normalizeRootTransforms(state.element, clone);
         }
-        if (noShadows && clone) {
-          stripRootShadows(state.element, state.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);
@@ -3639,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;
@@ -3667,7 +3927,7 @@ ${imported}
             h = h0;
           }
           let minX = 0, minY = 0, maxX = w0, maxY = h0;
-          if (straighten && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
+          if (!outerTransforms && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
             const M2 = {
               a: rootTransform2D.a,
               b: rootTransform2D.b || 0,
@@ -3682,7 +3942,7 @@ ${imported}
             maxX = limitDecimals(bb2.maxX);
             maxY = limitDecimals(bb2.maxY);
           } else {
-            const useTFBBox = !straighten && hasTFBBox(state.element);
+            const useTFBBox = outerTransforms && hasTFBBox(state.element);
             if (useTFBBox) {
               const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
               const ind2 = readIndividualTransforms(state.element);
@@ -3705,7 +3965,7 @@ ${imported}
           const bleedBlur = parseFilterBlur(csEl);
           const bleedOutline = parseOutline(csEl);
           const drop = parseFilterDropShadows(csEl);
-          const bleed = noShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
+          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),
@@ -3723,7 +3983,7 @@ ${imported}
           const outH = Math.max(1, limitDecimals(vbH0 * scaleH));
           const svgNS = "http://www.w3.org/2000/svg";
           const basePad = isSafari() ? 1 : 0;
-          const extraPad = straighten ? 1 : 0;
+          const extraPad = !outerTransforms ? 1 : 0;
           const pad = limitDecimals(basePad + extraPad);
           const fo = document.createElementNS(svgNS, "foreignObject");
           const vbMinX = limitDecimals(minX);
@@ -3766,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;
@@ -4035,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) {
@@ -4085,8 +4443,8 @@ ${imported}
       backgroundColor: (_q = options.backgroundColor) != null ? _q : ["jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
       filename: (_r = options.filename) != null ? _r : "snapDOM",
       // NEW flags (user-friendly)
-      straighten: (_s = options.straighten) != null ? _s : false,
-      noShadows: (_t = options.noShadows) != null ? _t : false
+      outerTransforms: (_s = options.outerTransforms) != null ? _s : true,
+      outerShadows: (_t = options.outerShadows) != null ? _t : false
       // Plugins (reservado)
       // plugins: normalizePlugins(...),
     };
@@ -4193,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";
@@ -4232,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;
     });
@@ -4241,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;
     });
   }
@@ -4310,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)
       );
     });
   }
@@ -4336,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();
     });