@zumer/snapdom 1.9.11 → 1.9.12-dev.1

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.10
+* v.1.9.12-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -127,10 +127,25 @@ var snapLogger = createSnapLogger("[snapDOM]", { ttlMs: 3 * 6e4, maxEntries: 10
 var _inflight = /* @__PURE__ */ new Map();
 var _errorCache = /* @__PURE__ */ new Map();
 function isSpecialURL(url) {
-  return /^data:|^blob:|^about:blank$/.test(url);
+  return /^data:|^blob:|^about:blank$/i.test(url);
+}
+function isAlreadyProxied(url, useProxy) {
+  try {
+    const baseHref = typeof location !== "undefined" && location.href ? location.href : "http://localhost/";
+    const proxyBaseRaw = useProxy.includes("{url}") ? useProxy.split("{url}")[0] : useProxy;
+    const proxyBase = new URL(proxyBaseRaw || ".", baseHref);
+    const u = new URL(url, baseHref);
+    if (u.origin === proxyBase.origin) return true;
+    const sp = u.searchParams;
+    if (sp && (sp.has("url") || sp.has("target"))) return true;
+  } catch {
+  }
+  return false;
 }
 function shouldProxy(url, useProxy) {
-  if (!useProxy || isSpecialURL(url)) return false;
+  if (!useProxy) return false;
+  if (isSpecialURL(url)) return false;
+  if (isAlreadyProxied(url, useProxy)) return false;
   try {
     const base = typeof location !== "undefined" && location.href ? location.href : "http://localhost/";
     const u = new URL(url, base);
@@ -141,8 +156,19 @@ function shouldProxy(url, useProxy) {
 }
 function applyProxy(url, useProxy) {
   if (!useProxy) return url;
-  if (useProxy.includes("{url}")) return useProxy.replace("{url}", encodeURIComponent(url));
-  const sep = useProxy.endsWith("?") ? "" : useProxy.includes("?") ? "&" : "?";
+  if (useProxy.includes("{url}")) {
+    return useProxy.replace("{urlRaw}", safeEncodeURI(url)).replace("{url}", encodeURIComponent(url));
+  }
+  if (/[?&]url=?$/.test(useProxy)) {
+    return `${useProxy}${encodeURIComponent(url)}`;
+  }
+  if (useProxy.endsWith("?")) {
+    return `${useProxy}url=${encodeURIComponent(url)}`;
+  }
+  if (useProxy.endsWith("/")) {
+    return `${useProxy}${safeEncodeURI(url)}`;
+  }
+  const sep = useProxy.includes("?") ? "&" : "?";
   return `${useProxy}${sep}url=${encodeURIComponent(url)}`;
 }
 function blobToDataURL(blob) {
@@ -169,6 +195,65 @@ async function snapFetch(url, options = {}) {
   const errorTTL = options.errorTTL ?? 8e3;
   const headers = options.headers || {};
   const silent = !!options.silent;
+  if (/^data:/i.test(url)) {
+    try {
+      if (as === "text") {
+        return { ok: true, data: String(url), status: 200, url, fromCache: false };
+      }
+      if (as === "dataURL") {
+        return {
+          ok: true,
+          data: String(url),
+          status: 200,
+          url,
+          fromCache: false,
+          mime: String(url).slice(5).split(";")[0] || ""
+        };
+      }
+      const [, meta = "", data = ""] = String(url).match(/^data:([^,]*),(.*)$/) || [];
+      const isBase64 = /;base64/i.test(meta);
+      const bin = isBase64 ? atob(data) : decodeURIComponent(data);
+      const bytes = new Uint8Array([...bin].map((c) => c.charCodeAt(0)));
+      const b = new Blob([bytes], { type: (meta || "").split(";")[0] || "" });
+      return { ok: true, data: b, status: 200, url, fromCache: false, mime: b.type || "" };
+    } catch {
+      return { ok: false, data: null, status: 0, url, fromCache: false, reason: "special_url_error" };
+    }
+  }
+  if (/^blob:/i.test(url)) {
+    try {
+      const resp = await fetch(url);
+      if (!resp.ok) {
+        return { ok: false, data: null, status: resp.status, url, fromCache: false, reason: "http_error" };
+      }
+      const blob = await resp.blob();
+      const mime = blob.type || resp.headers.get("content-type") || "";
+      if (as === "dataURL") {
+        const dataURL = await blobToDataURL(blob);
+        return { ok: true, data: dataURL, status: resp.status, url, fromCache: false, mime };
+      }
+      if (as === "text") {
+        const text = await blob.text();
+        return { ok: true, data: text, status: resp.status, url, fromCache: false, mime };
+      }
+      return { ok: true, data: blob, status: resp.status, url, fromCache: false, mime };
+    } catch {
+      return { ok: false, data: null, status: 0, url, fromCache: false, reason: "network" };
+    }
+  }
+  if (/^about:blank$/i.test(url)) {
+    if (as === "dataURL") {
+      return {
+        ok: true,
+        data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+        status: 200,
+        url,
+        fromCache: false,
+        mime: "image/png"
+      };
+    }
+    return { ok: true, data: as === "text" ? "" : new Blob([]), status: 200, url, fromCache: false };
+  }
   const key = makeKey(url, { as, timeout, useProxy, errorTTL });
   const e = _errorCache.get(key);
   if (e && e.until > Date.now()) {
@@ -197,7 +282,7 @@ async function snapFetch(url, options = {}) {
       const resp = await fetch(finalURL, { signal: ctrl.signal, credentials: cred, headers });
       if (!resp.ok) {
         const result = { ok: false, data: null, status: resp.status, url: finalURL, fromCache: false, reason: "http_error" };
-        _errorCache.set(key, { until: Date.now() + errorTTL, result });
+        if (errorTTL > 0) _errorCache.set(key, { until: Date.now() + errorTTL, result });
         if (!silent) {
           const short = `${resp.status} ${resp.statusText || ""}`.trim();
           snapLogger.warnOnce(
@@ -222,7 +307,9 @@ async function snapFetch(url, options = {}) {
     } catch (err) {
       const reason = err && typeof err === "object" && "name" in err && err.name === "AbortError" ? String(err.message || "").includes("timeout") ? "timeout" : "abort" : "network";
       const result = { ok: false, data: null, status: 0, url: finalURL, fromCache: false, reason };
-      _errorCache.set(key, { until: Date.now() + errorTTL, result });
+      if (!/^blob:/i.test(url) && errorTTL > 0) {
+        _errorCache.set(key, { until: Date.now() + errorTTL, result });
+      }
       if (!silent) {
         const k = `${reason}:${as}:${new URL(url, location?.href ?? "http://localhost/").origin}`;
         const tips = reason === "timeout" ? `Timeout after ${timeout}ms. Consider increasing timeout or using a proxy for ${url}` : reason === "abort" ? `Request aborted while fetching ${as} ${url}` : `Network/CORS issue while fetching ${as} ${url}. A proxy may be required`;
@@ -539,7 +626,10 @@ function idle(fn, { fast = false } = {}) {
   }
 }
 function isSafari() {
-  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+  const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
+  const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
+  const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
+  return isSafariUA || isWeChatUA;
 }
 
 // src/modules/styles.js
@@ -573,7 +663,7 @@ function setupInvalidationOnce(root = document.documentElement) {
   } catch {
   }
 }
-function snapshotComputedStyleFull(style) {
+function snapshotComputedStyleFull(style, options = {}) {
   const out = {};
   const vis = style.getPropertyValue("visibility");
   for (let i = 0; i < style.length; i++) {
@@ -584,6 +674,24 @@ function snapshotComputedStyleFull(style) {
     }
     out[prop] = val;
   }
+  if (options.embedFonts) {
+    const EXTRA_FONT_PROPS = [
+      "font-feature-settings",
+      "font-variation-settings",
+      "font-kerning",
+      "font-variant",
+      "font-variant-ligatures",
+      "font-optical-sizing"
+    ];
+    for (const prop of EXTRA_FONT_PROPS) {
+      if (out[prop]) continue;
+      try {
+        const v = style.getPropertyValue(prop);
+        if (v) out[prop] = v;
+      } catch {
+      }
+    }
+  }
   if (vis === "hidden") out.opacity = "0";
   return out;
 }
@@ -596,11 +704,11 @@ function styleSignature(snap) {
   __snapshotSig.set(snap, sig);
   return sig;
 }
-function getSnapshot(el, preStyle = null) {
+function getSnapshot(el, preStyle = null, options = {}) {
   const rec = snapshotCache.get(el);
   if (rec && rec.epoch === __epoch) return rec.snapshot;
   const style = preStyle || getComputedStyle(el);
-  const snap = snapshotComputedStyleFull(style);
+  const snap = snapshotComputedStyleFull(style, options);
   snapshotCache.set(el, { epoch: __epoch, snapshot: snap });
   return snap;
 }
@@ -654,7 +762,7 @@ async function inlineAllStyles(source, clone, sessionOrCtx, opts) {
     session.styleCache.set(source, getComputedStyle(source));
   }
   const pre = session.styleCache.get(source);
-  const snap = getSnapshot(source, pre);
+  const snap = getSnapshot(source, pre, ctx.options);
   const sig = styleSignature(snap);
   let key = persist.snapshotKeyCache.get(sig);
   if (!key) {
@@ -898,19 +1006,27 @@ async function deepClone(node, sessionCache, options) {
     return node.cloneNode(true);
   }
   if (node.getAttribute("data-capture") === "exclude") {
-    const spacer = document.createElement("div");
-    const rect = node.getBoundingClientRect();
-    spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-    return spacer;
+    if (options.excludeMode === "hide") {
+      const spacer = document.createElement("div");
+      const rect = node.getBoundingClientRect();
+      spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+      return spacer;
+    } else if (options.excludeMode === "remove") {
+      return null;
+    }
   }
   if (options.exclude && Array.isArray(options.exclude)) {
     for (const selector of options.exclude) {
       try {
         if (node.matches?.(selector)) {
-          const spacer = document.createElement("div");
-          const rect = node.getBoundingClientRect();
-          spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-          return spacer;
+          if (options.excludeMode === "hide") {
+            const spacer = document.createElement("div");
+            const rect = node.getBoundingClientRect();
+            spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+            return spacer;
+          } else if (options.excludeMode === "remove") {
+            return null;
+          }
         }
       } catch (err) {
         console.warn(`Invalid selector in exclude option: ${selector}`, err);
@@ -920,10 +1036,14 @@ async function deepClone(node, sessionCache, options) {
   if (typeof options.filter === "function") {
     try {
       if (!options.filter(node)) {
-        const spacer = document.createElement("div");
-        const rect = node.getBoundingClientRect();
-        spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-        return spacer;
+        if (options.filterMode === "hide") {
+          const spacer = document.createElement("div");
+          const rect = node.getBoundingClientRect();
+          spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+          return spacer;
+        } else if (options.filterMode === "remove") {
+          return null;
+        }
       }
     } catch (err) {
       console.warn("Error in filter function:", err);
@@ -1799,7 +1919,182 @@ async function ensureFontsReady(families, warmupRepetitions = 2) {
   }
 }
 
+// src/modules/counter.js
+function hasCounters(input) {
+  return /\bcounter\s*\(|\bcounters\s*\(/.test(input || "");
+}
+function unquoteDoubleStrings(s) {
+  return (s || "").replace(/"([^"]*)"/g, "$1");
+}
+function alpha(n, upper = false) {
+  let s = "", x = Math.max(1, n);
+  while (x > 0) {
+    x--;
+    s = String.fromCharCode(97 + x % 26) + s;
+    x = Math.floor(x / 26);
+  }
+  return upper ? s.toUpperCase() : s;
+}
+function roman(n, upper = true) {
+  const map = [[1e3, "M"], [900, "CM"], [500, "D"], [400, "CD"], [100, "C"], [90, "XC"], [50, "L"], [40, "XL"], [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"]];
+  let num = Math.max(1, Math.min(3999, n)), out = "";
+  for (const [v, sym] of map) while (num >= v) {
+    out += sym;
+    num -= v;
+  }
+  return upper ? out : out.toLowerCase();
+}
+function formatCounter(value, style) {
+  switch ((style || "decimal").toLowerCase()) {
+    case "decimal":
+      return String(Math.max(0, value));
+    case "decimal-leading-zero":
+      return (value < 10 ? "0" : "") + String(Math.max(0, value));
+    case "lower-alpha":
+      return alpha(value, false);
+    case "upper-alpha":
+      return alpha(value, true);
+    case "lower-roman":
+      return roman(value, false);
+    case "upper-roman":
+      return roman(value, true);
+    default:
+      return String(Math.max(0, value));
+  }
+}
+function buildCounterContext(root) {
+  const nodeCounters = /* @__PURE__ */ new WeakMap();
+  const rootEl = root instanceof Document ? root.documentElement : root;
+  const isLi = (el) => el && el.tagName === "LI";
+  const countPrevLi = (li) => {
+    let c = 0, p = li?.parentElement;
+    if (!p) return 0;
+    for (const sib of p.children) {
+      if (sib === li) break;
+      if (sib.tagName === "LI") c++;
+    }
+    return c;
+  };
+  const cloneMap = (m) => {
+    const out = /* @__PURE__ */ new Map();
+    for (const [k, arr] of m) out.set(k, arr.slice());
+    return out;
+  };
+  const applyTo = (baseMap, parentMap, el) => {
+    const map = cloneMap(baseMap);
+    let reset;
+    try {
+      reset = el.style?.counterReset || getComputedStyle(el).counterReset;
+    } catch {
+    }
+    if (reset && reset !== "none") {
+      for (const part of reset.split(",")) {
+        const toks = part.trim().split(/\s+/);
+        const name = toks[0];
+        const val = Number.isFinite(Number(toks[1])) ? Number(toks[1]) : 0;
+        if (!name) continue;
+        const parentStack = parentMap.get(name);
+        if (parentStack && parentStack.length) {
+          const s = parentStack.slice();
+          s.push(val);
+          map.set(name, s);
+        } else {
+          map.set(name, [val]);
+        }
+      }
+    }
+    let inc;
+    try {
+      inc = el.style?.counterIncrement || getComputedStyle(el).counterIncrement;
+    } catch {
+    }
+    if (inc && inc !== "none") {
+      for (const part of inc.split(",")) {
+        const toks = part.trim().split(/\s+/);
+        const name = toks[0];
+        const by = Number.isFinite(Number(toks[1])) ? Number(toks[1]) : 1;
+        if (!name) continue;
+        const stack = map.get(name) || [];
+        if (stack.length === 0) stack.push(0);
+        stack[stack.length - 1] += by;
+        map.set(name, stack);
+      }
+    }
+    try {
+      const cs = getComputedStyle(el);
+      if (cs.display === "list-item" && isLi(el)) {
+        const p = el.parentElement;
+        let idx = 1;
+        if (p && p.tagName === "OL") {
+          const startAttr = p.getAttribute("start");
+          const start = Number.isFinite(Number(startAttr)) ? Number(startAttr) : 1;
+          const prev = countPrevLi(el);
+          const ownAttr = el.getAttribute("value");
+          idx = Number.isFinite(Number(ownAttr)) ? Number(ownAttr) : start + prev;
+        } else {
+          idx = 1 + countPrevLi(el);
+        }
+        const s = map.get("list-item") || [];
+        if (s.length === 0) s.push(0);
+        s[s.length - 1] = idx;
+        map.set("list-item", s);
+      }
+    } catch {
+    }
+    return map;
+  };
+  const build = (el, parentMap, carryMap) => {
+    const curr = applyTo(carryMap, parentMap, el);
+    nodeCounters.set(el, curr);
+    let nextCarry = curr;
+    for (const child of el.children) {
+      const childCarry = build(child, curr, nextCarry);
+      nextCarry = childCarry;
+    }
+    return curr;
+  };
+  const empty = /* @__PURE__ */ new Map();
+  build(rootEl, empty, empty);
+  return {
+    get(node, name) {
+      const s = nodeCounters.get(node)?.get(name);
+      return s && s.length ? s[s.length - 1] : 0;
+    },
+    getStack(node, name) {
+      const s = nodeCounters.get(node)?.get(name);
+      return s ? s.slice() : [];
+    }
+  };
+}
+function resolveCountersInContent(raw, node, ctx) {
+  if (!raw || raw === "none") return raw;
+  try {
+    const RX = /\b(counter|counters)\s*\(([^)]+)\)/g;
+    let out = raw.replace(RX, (_, fn, args) => {
+      const parts = String(args).split(",").map((s) => s.trim());
+      if (fn === "counter") {
+        const name = parts[0]?.replace(/^["']|["']$/g, "");
+        const style = (parts[1] || "decimal").toLowerCase();
+        const v = ctx.get(node, name);
+        return formatCounter(v, style);
+      } else {
+        const name = parts[0]?.replace(/^["']|["']$/g, "");
+        const sep = parts[1]?.replace(/^["']|["']$/g, "") ?? "";
+        const style = (parts[2] || "decimal").toLowerCase();
+        const stack = ctx.getStack(node, name);
+        if (!stack.length) return "";
+        const pieces = stack.map((v) => formatCounter(v, style));
+        return pieces.join(sep);
+      }
+    });
+    return unquoteDoubleStrings(out);
+  } catch {
+    return "- ";
+  }
+}
+
 // src/modules/pseudo.js
+var counterCtx = null;
 async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
@@ -1833,7 +2128,11 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
         continue;
       }
       const content = style.content;
-      const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+      let cleanContent = parseContent(content);
+      if (hasCounters(content)) {
+        counterCtx = buildCounterContext(source.ownerDocument || document);
+        cleanContent = resolveCountersInContent(cleanContent, source, counterCtx);
+      }
       const bg = style.backgroundImage;
       const bgColor = style.backgroundColor;
       const fontFamily = style.fontFamily;
@@ -2218,8 +2517,8 @@ async function inlineImages(clone, options = {}) {
       if (!img.height) img.height = img.naturalHeight || 100;
       return;
     }
-    const { defaultImageUrl } = options || {};
-    if (defaultImageUrl) {
+    const { fallbackURL } = options || {};
+    if (fallbackURL) {
       try {
         const dsW = parseInt(img.dataset?.snapdomWidth || "", 10) || 0;
         const dsH = parseInt(img.dataset?.snapdomHeight || "", 10) || 0;
@@ -2227,14 +2526,14 @@ async function inlineImages(clone, options = {}) {
         const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
         const styleW = parseFloat(img.style?.width || "") || 0;
         const styleH = parseFloat(img.style?.height || "") || 0;
-        const width = dsW || styleW || attrW || img.width || void 0;
-        const height = dsH || styleH || attrH || img.height || void 0;
-        const fallbackUrl = typeof defaultImageUrl === "function" ? await defaultImageUrl({ width, height, src, element: img }) : defaultImageUrl;
+        const fbW = dsW || styleW || attrW || img.width || void 0;
+        const fbH = dsH || styleH || attrH || img.height || void 0;
+        const fallbackUrl = typeof fallbackURL === "function" ? await fallbackURL({ width: fbW, height: fbH, src, element: img }) : fallbackURL;
         if (fallbackUrl) {
           const fallbackData = await snapFetch(fallbackUrl, { as: "dataURL", useProxy: options.useProxy });
           img.src = fallbackData.data;
-          if (!img.width && width) img.width = width;
-          if (!img.height && height) img.height = height;
+          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;
           return;
@@ -2353,6 +2652,63 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
   }
 }
 
+// src/modules/lineClamp.js
+function lineClamp(el) {
+  if (!el) return () => {
+  };
+  const lines = getClamp(el);
+  if (lines <= 0) return () => {
+  };
+  if (!isPlainTextContainer(el)) return () => {
+  };
+  const cs = getComputedStyle(el);
+  const targetH = Math.round(usedLineHeightPx(cs) * lines + vpad(cs));
+  const original = el.textContent ?? "";
+  const prevText = original;
+  if (el.scrollHeight <= targetH + 0.5) {
+    return () => {
+    };
+  }
+  let lo = 0, hi = original.length, best = -1;
+  while (lo <= hi) {
+    const mid = lo + hi >> 1;
+    el.textContent = original.slice(0, mid) + "\u2026";
+    if (el.scrollHeight <= targetH + 0.5) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  el.textContent = (best >= 0 ? original.slice(0, best) : "") + "\u2026";
+  return () => {
+    el.textContent = prevText;
+  };
+}
+function getClamp(el) {
+  const cs = getComputedStyle(el);
+  let v = cs.getPropertyValue("-webkit-line-clamp") || cs.getPropertyValue("line-clamp");
+  v = (v || "").trim();
+  const n = parseInt(v, 10);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
+function usedLineHeightPx(cs) {
+  const lh = (cs.lineHeight || "").trim();
+  const fs = parseFloat(cs.fontSize) || 16;
+  if (!lh || lh === "normal") return Math.round(fs * 1.2);
+  if (lh.endsWith("px")) return parseFloat(lh);
+  if (/^\d+(\.\d+)?$/.test(lh)) return Math.round(parseFloat(lh) * fs);
+  if (lh.endsWith("%")) return Math.round(parseFloat(lh) / 100 * fs);
+  return Math.round(fs * 1.2);
+}
+function vpad(cs) {
+  return (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+}
+function isPlainTextContainer(el) {
+  if (el.childElementCount > 0) return false;
+  return Array.from(el.childNodes).some((n) => n.nodeType === Node.TEXT_NODE);
+}
+
 // src/core/capture.js
 async function captureDOM(element, options) {
   if (!element) throw new Error("Element cannot be null or undefined");
@@ -2363,7 +2719,12 @@ async function captureDOM(element, options) {
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS, styleCache } = await prepareClone(element, options));
+  const undoClamp = lineClamp(element);
+  try {
+    ({ clone, classCSS, styleCache } = await prepareClone(element, options));
+  } finally {
+    undoClamp();
+  }
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -2385,7 +2746,7 @@ async function captureDOM(element, options) {
           const families = new Set(
             Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
           );
-          await ensureFontsReady(families, 5);
+          await ensureFontsReady(families, 2);
         }
         fontsCSS = await embedCustomFonts({
           required,
@@ -2413,28 +2774,28 @@ async function captureDOM(element, options) {
   }
   await new Promise((resolve) => {
     idle(() => {
-      const rect = getNaturalBorderBoxSize(element);
-      let w = rect.width;
-      let h = rect.height;
+      const rect = element.getBoundingClientRect();
+      let w = Number(rect.width) || 0;
+      let h = Number(rect.height) || 0;
       const hasW = Number.isFinite(options.width);
       const hasH = Number.isFinite(options.height);
       const scaleOpt = options.scale ?? 1;
       const hasScale = typeof scaleOpt === "number" && scaleOpt !== 1;
       if (!hasScale) {
-        const aspect = rect.width / rect.height;
+        const aspect = h > 0 ? w / h : 1;
         if (hasW && hasH) {
-          w = options.width;
-          h = options.height;
+          w = Number(options.width);
+          h = Number(options.height);
         } else if (hasW) {
-          w = options.width;
-          h = w / aspect;
+          w = Number(options.width);
+          h = w / (aspect || 1);
         } else if (hasH) {
-          h = options.height;
-          w = h * aspect;
+          h = Number(options.height);
+          w = h * (aspect || 1);
         }
       }
-      w = Math.max(1, Math.ceil(w));
-      h = Math.max(1, Math.ceil(h));
+      w = Math.max(1, Math.ceil(Number.isFinite(w) ? w : 1));
+      h = Math.max(1, Math.ceil(Number.isFinite(h) ? h : 1));
       const csEl = getComputedStyle(element);
       const baseTransform = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
       const ind = readIndividualTransforms(element);
@@ -2505,7 +2866,9 @@ async function captureDOM(element, options) {
       fo.appendChild(container);
       const serializer = new XMLSerializer();
       const foString = serializer.serializeToString(fo);
-      const svgHeader = `<svg xmlns="${svgNS}" width="${outW}" height="${outH}" viewBox="0 0 ${outW} ${outH}">`;
+      const finalW = !hasScale && (hasW || hasH) ? w : outW;
+      const finalH = !hasScale && (hasH || hasW) ? h : outH;
+      const svgHeader = `<svg xmlns="${svgNS}" width="${finalW}" height="${finalH}" viewBox="0 0 ${outW} ${outH}">`;
       const svgFooter = "</svg>";
       svgString = svgHeader + foString + svgFooter;
       dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
@@ -2516,17 +2879,6 @@ async function captureDOM(element, options) {
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
   return dataURL;
 }
-function getNaturalBorderBoxSize(el) {
-  const cs = getComputedStyle(el);
-  const px = (v) => parseFloat(v) || 0;
-  let w = px(cs.width);
-  let h = px(cs.height);
-  if (cs.boxSizing === "content-box") {
-    w += px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
-    h += px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
-  }
-  return { width: w, height: h };
-}
 function matrixFromComputed(el) {
   const tr = getComputedStyle(el).transform;
   if (!tr || tr === "none") return new DOMMatrix();
@@ -2558,24 +2910,33 @@ function bboxFromMatrix(w, h, M2D) {
 }
 function readIndividualTransforms(el) {
   const out = { rotate: "0deg", scale: null, translate: null };
-  const map = el.computedStyleMap?.();
+  const map = typeof el.computedStyleMap === "function" ? el.computedStyleMap() : null;
   if (map) {
-    const rot = map.get("rotate");
+    const safeGet = (prop) => {
+      try {
+        if (typeof map.has === "function" && !map.has(prop)) return null;
+        if (typeof map.get !== "function") return null;
+        return map.get(prop);
+      } catch {
+        return null;
+      }
+    };
+    const rot = safeGet("rotate");
     if (rot) {
       const ang = rot.angle ?? rot;
-      if (ang && "unit" in ang) {
+      if (ang && typeof ang === "object" && "unit" in ang) {
         out.rotate = ang.unit === "rad" ? ang.value * 180 / Math.PI + "deg" : ang.value + ang.unit;
       } else {
         out.rotate = String(rot);
       }
     }
-    const sc = map.get("scale");
+    const sc = safeGet("scale");
     if (sc && sc.length) {
       const sx = sc[0]?.value ?? 1;
       const sy = sc[1]?.value ?? sx;
       out.scale = `${sx} ${sy}`;
     }
-    const tr = map.get("translate");
+    const tr = safeGet("translate");
     if (tr && tr.length) {
       const tx = tr[0]?.value ?? 0;
       const ty = tr[1]?.value ?? 0;
@@ -2660,7 +3021,9 @@ function createContext(options = {}) {
     scale: options.scale ?? 1,
     // DOM filters
     exclude: options.exclude ?? [],
+    excludeMode: options.excludeMode ?? "hide",
     filter: options.filter ?? null,
+    filterMode: options.filterMode ?? "hide",
     placeholders: options.placeholders !== false,
     // default true
     // Fuentes
@@ -2668,7 +3031,7 @@ function createContext(options = {}) {
     iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
     localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
     excludeFonts: options.excludeFonts ?? void 0,
-    defaultImageUrl: options.defaultImageUrl ?? void 0,
+    fallbackURL: options.fallbackURL ?? void 0,
     /** Cache policy (disabled|full|auto|soft). Default: "soft" */
     /** @type {CachePolicy} */
     cache: cachePolicy,
@@ -2703,24 +3066,12 @@ async function toImg(url, options) {
 // src/exporters/toCanvas.js
 async function toCanvas(url, options) {
   const { scale, dpr } = options;
-  const safari = isSafari();
   const img = new Image();
   img.crossOrigin = "anonymous";
   img.loading = "eager";
   img.decoding = "sync";
   img.src = url;
-  let tempSlot = null;
-  if (safari) {
-    tempSlot = document.createElement("div");
-    tempSlot.setAttribute("aria-hidden", "true");
-    tempSlot.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;contain:size layout style;";
-    document.body.appendChild(tempSlot);
-    tempSlot.appendChild(img);
-  }
   await img.decode();
-  if (safari) {
-    await new Promise((r) => setTimeout(r, 100));
-  }
   const width = img.naturalWidth * scale;
   const height = img.naturalHeight * scale;
   const canvas = document.createElement("canvas");
@@ -2731,12 +3082,6 @@ async function toCanvas(url, options) {
   const ctx = canvas.getContext("2d");
   if (dpr !== 1) ctx.scale(dpr, dpr);
   ctx.drawImage(img, 0, 0, width, height);
-  if (tempSlot && tempSlot.parentNode) {
-    try {
-      tempSlot.parentNode.removeChild(tempSlot);
-    } catch {
-    }
-  }
   return canvas;
 }
 
@@ -2772,6 +3117,7 @@ async function rasterize(url, options) {
 
 // src/exporters/download.js
 async function download(url, options) {
+  options.dpr = 1;
   if (options.format === "svg") {
     const blob = await toBlob(url, { ...options, type: "svg" });
     const objectURL = URL.createObjectURL(blob);
@@ -2792,8 +3138,19 @@ async function download(url, options) {
 
 // src/api/snapdom.js
 var INTERNAL_TOKEN = Symbol("snapdom.internal");
+var _safariWarmup = false;
 async function snapdom(element, userOptions) {
   if (!element) throw new Error("Element cannot be null or undefined");
+  if (isSafari()) {
+    for (let i = 0; i < 3; i++) {
+      try {
+        await safariWarmup(element, userOptions);
+        console.log("Iteraci\xF3n n\xFAmero:", i);
+        _safariWarmup = false;
+      } catch (error) {
+      }
+    }
+  }
   const context = createContext(userOptions);
   if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts);
   if (!context.snap) {
@@ -2837,24 +3194,65 @@ snapdom.toPng = (el, options) => snapdom(el, { ...options, format: "png" }).then
 snapdom.toJpg = (el, options) => snapdom(el, { ...options, format: "jpeg" }).then((result) => result.toJpg());
 snapdom.toWebp = (el, options) => snapdom(el, { ...options, format: "webp" }).then((result) => result.toWebp());
 snapdom.download = (el, options) => snapdom(el, options).then((result) => result.download());
+async function safariWarmup(element, baseOptions) {
+  if (_safariWarmup) return;
+  const preflight = {
+    ...baseOptions,
+    fast: true,
+    embedFonts: true,
+    scale: 0.2
+  };
+  let url;
+  try {
+    url = await captureDOM(element, preflight);
+  } catch {
+    return;
+  }
+  await new Promise((resolve) => {
+    const img = new Image();
+    img.decoding = "sync";
+    img.loading = "eager";
+    img.style.position = "fixed";
+    img.style.left = 0;
+    img.style.top = 0;
+    img.style.width = "10px";
+    img.style.height = "10px";
+    img.style.opacity = "0.01";
+    img.style.transform = "translateZ(10px)";
+    img.style.willChange = "transform,opacity;";
+    img.src = url;
+    const cleanup = async () => {
+      await new Promise((r) => setTimeout(r, 100));
+      if (img && img.parentNode) img.parentNode.removeChild(img);
+      _safariWarmup = true;
+      resolve();
+    };
+    document.body.appendChild(img);
+    cleanup();
+  });
+}
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {
   const {
     embedFonts = true,
-    cacheOpt = "full",
     useProxy = ""
   } = options;
-  applyCachePolicy(cacheOpt);
+  const cacheMode = options.cache ?? options.cacheOpt ?? "full";
+  applyCachePolicy(cacheMode);
   try {
-    await document.fonts.ready;
+    await document.fonts?.ready;
+  } catch {
+  }
+  try {
+    precacheCommonTags();
   } catch {
   }
-  precacheCommonTags();
   cache.session = cache.session || {};
   if (!cache.session.styleCache) {
     cache.session.styleCache = /* @__PURE__ */ new WeakMap();
   }
+  cache.image = cache.image || /* @__PURE__ */ new Map();
   try {
     await inlineBackgroundImages(
       root,
@@ -2875,11 +3273,14 @@ async function preCache(root = document, options = {}) {
   }
   const promises = [];
   for (const img of imgEls) {
-    const src = img?.src;
+    const src = img?.currentSrc || img?.src;
     if (!src) continue;
     if (!cache.image.has(src)) {
-      const p = Promise.resolve().then(() => snapFetch(src, { as: "dataURL", useProxy })).then((dataURL) => {
-        cache.image.set(src, dataURL);
+      const p = Promise.resolve().then(async () => {
+        const res = await snapFetch(src, { as: "dataURL", useProxy });
+        if (res?.ok && typeof res.data === "string") {
+          cache.image.set(src, res.data);
+        }
       }).catch(() => {
       });
       promises.push(p);
@@ -2906,7 +3307,8 @@ async function preCache(root = document, options = {}) {
     try {
       const required = collectUsedFontVariants(root);
       const usedCodepoints = collectUsedCodepoints(root);
-      if (typeof isSafari === "function" ? isSafari() : !!isSafari) {
+      const safari = typeof isSafari === "function" ? isSafari() : !!isSafari;
+      if (safari) {
         const families = new Set(
           Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
         );