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

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.0
+* v.2.0.0-dev.2
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -328,19 +328,6 @@ async function snapFetch(url, options = {}) {
 }
 
 // src/utils/image.js
-function createBackground(baseCanvas, backgroundColor) {
-  if (!backgroundColor || !baseCanvas.width || !baseCanvas.height) {
-    return baseCanvas;
-  }
-  const temp = document.createElement("canvas");
-  temp.width = baseCanvas.width;
-  temp.height = baseCanvas.height;
-  const ctx = temp.getContext("2d");
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, temp.width, temp.height);
-  ctx.drawImage(baseCanvas, 0, 0);
-  return temp;
-}
 async function inlineSingleBackgroundEntry(entry, options = {}) {
   const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
   if (isGradient || entry.trim() === "none") {
@@ -616,11 +603,20 @@ function idle(fn, { fast = false } = {}) {
   }
 }
 function isSafari() {
-  const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
-  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
-  const isUIWebView = /AppleWebKit/i.test(ua) && /Mobile/i.test(ua) && !/Safari/i.test(ua);
-  const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
-  return isSafariUA || isUIWebView || isWeChatUA;
+  if (typeof navigator === "undefined") return false;
+  const ua = navigator.userAgent || "";
+  const uaLower = ua.toLowerCase();
+  const isSafariUA = uaLower.includes("safari") && !uaLower.includes("chrome") && !uaLower.includes("crios") && // Chrome on iOS
+  !uaLower.includes("fxios") && // Firefox on iOS
+  !uaLower.includes("android");
+  const isWebKit = /applewebkit/i.test(ua);
+  const isMobile = /mobile/i.test(ua);
+  const missingSafariToken = !/safari/i.test(ua);
+  const isUIWebView = isWebKit && isMobile && missingSafariToken;
+  const isWeChatUA = /(micromessenger|wxwork|wecom|windowswechat|macwechat)/i.test(ua);
+  const isBaiduUA = /(baiduboxapp|baidubrowser|baidusearch|baiduboxlite)/i.test(uaLower);
+  const isIOSWebKit = /ipad|iphone|ipod/.test(uaLower) && isWebKit;
+  return isSafariUA || isUIWebView || isWeChatUA || isBaiduUA || isIOSWebKit;
 }
 
 // src/modules/styles.js
@@ -665,6 +661,22 @@ function snapshotComputedStyleFull(style, options = {}) {
     }
     out[prop] = val;
   }
+  const EXTRA_TEXT_DECORATION_PROPS = [
+    "text-decoration-line",
+    "text-decoration-color",
+    "text-decoration-style",
+    "text-decoration-thickness",
+    "text-underline-offset",
+    "text-decoration-skip-ink"
+  ];
+  for (const prop of EXTRA_TEXT_DECORATION_PROPS) {
+    if (out[prop]) continue;
+    try {
+      const v = style.getPropertyValue(prop);
+      if (v) out[prop] = v;
+    } catch {
+    }
+  }
   if (options.embedFonts) {
     const EXTRA_FONT_PROPS = [
       "font-feature-settings",
@@ -1421,17 +1433,19 @@ var defaultIconFonts = [
   /layui/i,
   /lucide/i
 ];
+var ICON_FONT_URLS = Object.assign({
+  materialIconsFilled: "https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2",
+  materialIconsOutlined: "https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2",
+  materialIconsRound: "https://fonts.gstatic.com/s/materialiconsround/v109/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2",
+  materialIconsSharp: "https://fonts.gstatic.com/s/materialiconssharp/v110/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvRImcycg.woff2"
+}, typeof window !== "undefined" && window.__SNAPDOM_ICON_FONTS__ || {});
 var userIconFonts = [];
 function extendIconFonts(fonts) {
   const list = Array.isArray(fonts) ? fonts : [fonts];
   for (const f of list) {
-    if (f instanceof RegExp) {
-      userIconFonts.push(f);
-    } else if (typeof f === "string") {
-      userIconFonts.push(new RegExp(f, "i"));
-    } else {
-      console.warn("[snapdom] Ignored invalid iconFont value:", f);
-    }
+    if (f instanceof RegExp) userIconFonts.push(f);
+    else if (typeof f === "string") userIconFonts.push(new RegExp(f, "i"));
+    else console.warn("[snapdom] Ignored invalid iconFont value:", f);
   }
 }
 function isIconFont2(input) {
@@ -1443,6 +1457,177 @@ function isIconFont2(input) {
   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;
+}
+async function ensureLigatureCanvasFont(cssFamily, className, axes) {
+  const fam = String(cssFamily || "");
+  const lowerFam = fam.toLowerCase();
+  const cls = String(className || "").toLowerCase();
+  if (/\bmaterial\s*icons\b/.test(lowerFam) && !/\bsymbols\b/.test(lowerFam)) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  const isSymbols = /\bmaterial\s*symbols\b/.test(lowerFam);
+  if (!isSymbols) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  const FILL = axes && (axes.FILL ?? axes.fill);
+  let style = "outlined";
+  if (/\brounded\b/.test(cls) || /\bround\b/.test(cls)) style = "rounded";
+  else if (/\bsharp\b/.test(cls)) style = "sharp";
+  else if (/\boutlined\b/.test(cls)) style = "outlined";
+  const filled = FILL === 1;
+  let pick = null;
+  if (filled) {
+    if (style === "outlined" && ICON_FONT_URLS.materialIconsFilled) {
+      pick = { url: ICON_FONT_URLS.materialIconsFilled, alias: "snapdom-mi-filled" };
+    } else if (style === "rounded" && ICON_FONT_URLS.materialIconsRound) {
+      pick = { url: ICON_FONT_URLS.materialIconsRound, alias: "snapdom-mi-round" };
+    } else if (style === "sharp" && ICON_FONT_URLS.materialIconsSharp) {
+      pick = { url: ICON_FONT_URLS.materialIconsSharp, alias: "snapdom-mi-sharp" };
+    }
+  }
+  if (!pick) {
+    return { familyForMeasure: fam, familyForCanvas: fam };
+  }
+  if (!loadedCanvasFamilies.has(pick.alias)) {
+    try {
+      const ff = new FontFace(pick.alias, `url(${pick.url})`, { style: "normal", weight: "400" });
+      document.fonts.add(ff);
+      await ff.load();
+      loadedCanvasFamilies.set(pick.alias, true);
+    } catch {
+      return { familyForMeasure: fam, familyForCanvas: fam };
+    }
+  }
+  const quoted = `"${pick.alias}"`;
+  return { familyForMeasure: quoted, familyForCanvas: quoted };
+}
+async function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
+  try {
+    await Promise.all([
+      document.fonts.load(`400 ${px}px "${String(family).replace(/["']/g, "")}"`),
+      document.fonts.ready
+    ]);
+  } catch {
+  }
+}
+function resolvePaintColor(cs) {
+  let fill = cs.getPropertyValue("-webkit-text-fill-color")?.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 = cs.color?.trim();
+  return c && c !== "inherit" ? c : "#000";
+}
+async function materialIconToImage(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 } = await ensureLigatureCanvasFont(fam, className, axes);
+  await ensureMaterialFontsReady(familyForCanvas.replace(/^["']+|["']+$/g, ""), fontSize);
+  const span = document.createElement("span");
+  span.textContent = ligatureText;
+  span.style.position = "absolute";
+  span.style.visibility = "hidden";
+  span.style.left = "-99999px";
+  span.style.whiteSpace = "nowrap";
+  span.style.fontFamily = 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 {
+  }
+  ctx.fillText(ligatureText, 0, 0);
+  return {
+    dataUrl: canvas.toDataURL(),
+    width,
+    height
+  };
+}
+async function ligatureIconToImage(cloneRoot, sourceRoot) {
+  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 } = await 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 {
+    }
+  }
+  return replaced;
+}
 
 // src/modules/fonts.js
 async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
@@ -1792,7 +1977,7 @@ function dedupeFontFaces(cssText) {
     const styleSpec = (block.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
     const stretchSpec = (block.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
     const urange = (block.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-    const srcRaw = (block.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+    const srcRaw = (block.match(/src\s*:\s*([^;}]+)[;}]/i)?.[1] || "").trim();
     const urls = extractSrcUrls(srcRaw, location.href);
     const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
     const key = [
@@ -2000,7 +2185,7 @@ async function embedCustomFonts({
         const styleSpec = (face.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
         const stretchSpec = (face.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
         const urange = (face.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-        const srcRaw = (face.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+        const srcRaw = (face.match(/src\s*:\s*([^;}]+)[;}]/i)?.[1] || "").trim();
         const srcUrls = extractSrcUrls(srcRaw, link.href);
         if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
         const ranges = parseUnicodeRange(urange);
@@ -3442,12 +3627,56 @@ function stripRootShadows(originalEl, cloneRoot) {
   } catch {
   }
 }
+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);
+}
 async function captureDOM(element, options) {
   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 = "";
@@ -3460,17 +3689,29 @@ async function captureDOM(element, options) {
   const undoClamp = lineClamp(state.element);
   try {
     ({ clone, classCSS, styleCache } = await 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 = { clone, classCSS, styleCache, ...state };
   await runHook("afterClone", state);
+  sanitizeCloneForXHTML(state.clone);
+  if (state.options?.excludeMode === "remove") {
+    try {
+      shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache);
+    } catch (e) {
+      console.warn("[snapdom] shrink pass failed:", e);
+    }
+  }
+  try {
+    await ligatureIconToImage(state.clone, state.element);
+  } catch {
+  }
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(state.clone, state.options);
@@ -3524,8 +3765,15 @@ async function captureDOM(element, options) {
     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));
+      let w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
+      let h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      if (state.options?.excludeMode === "remove") {
+        const hEst = estimateKeptHeight(state.element, state.options);
+        const EPS = 1;
+        if (Number.isFinite(hEst) && hEst > 0) {
+          h0 = Math.max(1, Math.min(h0, limitDecimals(hEst + EPS)));
+        }
+      }
       const coerceNum = (v, def = NaN) => {
         const n = typeof v === "string" ? parseFloat(v) : v;
         return Number.isFinite(n) ? n : def;
@@ -3550,7 +3798,7 @@ async function captureDOM(element, options) {
         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,
@@ -3565,7 +3813,7 @@ async function captureDOM(element, options) {
         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);
@@ -3588,7 +3836,7 @@ async function captureDOM(element, options) {
       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),
@@ -3606,7 +3854,7 @@ async function captureDOM(element, options) {
       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);
@@ -3648,6 +3896,57 @@ async function captureDOM(element, options) {
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
   return state.dataURL;
 }
+function authorHasExplicitSize(el) {
+  try {
+    const s = el.getAttribute?.("style") || "";
+    return /\b(height|width|block-size|inline-size)\s*:/.test(s);
+  } catch {
+    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 * 10 ** n) / 10 ** n : v;
 function parseFilterDropShadows(cs) {
   const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
@@ -3914,6 +4213,52 @@ function readTotalTransformMatrix(t) {
   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?.excludeMode === "remove") return true;
+  if (Array.isArray(options?.exclude)) {
+    for (const sel of options.exclude) {
+      try {
+        if (el.matches(sel)) return options.excludeMode === "remove";
+      } catch {
+      }
+    }
+  }
+  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) {
@@ -3963,8 +4308,8 @@ function createContext(options = {}) {
     backgroundColor: options.backgroundColor ?? (["jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null),
     filename: options.filename ?? "snapDOM",
     // NEW flags (user-friendly)
-    straighten: options.straighten ?? false,
-    noShadows: options.noShadows ?? false
+    outerTransforms: options.outerTransforms ?? true,
+    outerShadows: options.outerShadows ?? false
     // Plugins (reservado)
     // plugins: normalizePlugins(...),
   };
@@ -4070,7 +4415,7 @@ function maybeConvertBoxShadowForSafari(url) {
   }
 }
 async function toCanvas(url, options) {
-  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {} } = options;
+  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {}, backgroundColor } = options;
   url = maybeConvertBoxShadowForSafari(url);
   const img = new Image();
   img.loading = "eager";
@@ -4109,6 +4454,12 @@ async function toCanvas(url, options) {
   canvas.style.height = `${outH}px`;
   const ctx = canvas.getContext("2d");
   if (dpr !== 1) ctx.scale(dpr, dpr);
+  if (backgroundColor) {
+    ctx.save();
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, outW, outH);
+    ctx.restore();
+  }
   ctx.drawImage(img, 0, 0, outW, outH);
   return canvas;
 }
@@ -4116,12 +4467,11 @@ async function toCanvas(url, options) {
 // src/modules/rasterize.js
 async function rasterize(url, options) {
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const img = new Image();
-  img.src = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  img.src = canvas.toDataURL(`image/${options.format}`, options.quality);
   await img.decode();
-  img.style.width = `${finalCanvas.width / options.dpr}px`;
-  img.style.height = `${finalCanvas.height / options.dpr}px`;
+  img.style.width = `${canvas.width / options.dpr}px`;
+  img.style.height = `${canvas.height / options.dpr}px`;
   return img;
 }
 
@@ -4181,13 +4531,8 @@ async function toBlob(url, options) {
     return new Blob([svgText], { type: "image/svg+xml" });
   }
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   return new Promise(
-    (resolve) => finalCanvas.toBlob(
-      (blob) => resolve(blob),
-      `image/${type}`,
-      options.quality
-    )
+    (resolve) => canvas.toBlob((blob) => resolve(blob), `image/${type}`, options.quality)
   );
 }
 
@@ -4205,9 +4550,8 @@ async function download(url, options) {
     return;
   }
   const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const a = document.createElement("a");
-  a.href = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  a.href = canvas.toDataURL(`image/${options.format}`, options.quality);
   a.download = options.filename;
   a.click();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "2.0.0-dev.0",
+  "version": "2.0.0-dev.2",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",

package/types/snapdom.d.ts

@@ -78,13 +78,13 @@ export interface SnapdomOptions {
   /** How to apply `filter` ("hide" or "remove"). Default "hide". */
   filterMode?: "hide" | "remove";
 
-  /** Straighten the root: remove translate/rotate, keep scale/skew. */
-  straighten?: boolean;
+  /** outerTransforms the root: remove translate/rotate, keep scale/skew. */
+  outerTransforms?: boolean;
   /**
    * Do not expand root bbox for shadows/blur/outline; also strip shadows/outline
    * from the cloned root to get a tight capture box.
    */
-  noShadows?: boolean;
+  outerShadows?: boolean;
 
   /** Inline non-icon fonts actually used within the subtree. */
   embedFonts?: boolean;