@zumer/snapdom 1.8.0 → 1.9.3-next-dev.0

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.8.0
+* v.1.9.3-next-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -155,19 +155,17 @@ function generateCSSClasses(styleMap) {
 
 // src/utils/helpers.js
 async function inlineSingleBackgroundEntry(entry, options = {}) {
-  const isUrl = entry.startsWith("url(");
+  const match = entry.match(/url\(["']?(.*?)["']?\)/);
+  const rawUrl = match?.[1];
   const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
-  if (isUrl) {
-    const rawUrl = extractURL(entry);
-    if (!rawUrl) return entry;
+  if (rawUrl) {
     const encodedUrl = safeEncodeURI(rawUrl);
     if (bgCache.has(encodedUrl)) {
       return options.skipInline ? void 0 : `url(${bgCache.get(encodedUrl)})`;
     } else {
-      const crossOrigin = options.crossOrigin ? options.crossOrigin(encodedUrl) : "anonymous";
-      const dataUrl = await fetchImage(encodedUrl, 3e3, crossOrigin);
+      const dataUrl = await fetchImage(encodedUrl, { useProxy: options.useProxy });
       bgCache.set(encodedUrl, dataUrl);
-      return options.skipInline ? void 0 : `url(${dataUrl})`;
+      return options.skipInline ? void 0 : `url("${dataUrl}")`;
     }
   }
   if (isGradient || entry === "none") {
@@ -219,30 +217,84 @@ function extractURL(value) {
   }
   return url;
 }
-function isIconFont(familyOrUrl) {
-  const iconFontPatterns = [
-    /font\s*awesome/i,
-    /material\s*icons/i,
-    /ionicons/i,
-    /glyphicons/i,
-    /feather/i,
-    /bootstrap\s*icons/i,
-    /remix\s*icons/i,
-    /heroicons/i,
-    /lucide/i
-  ];
-  return iconFontPatterns.some((rx) => rx.test(familyOrUrl));
-}
-function fetchImage(src, timeout = 3e3, crossOrigin = "anonymous") {
+function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
+  function getCrossOriginMode(url) {
+    try {
+      const parsed = new URL(url, window.location.href);
+      return parsed.origin === window.location.origin ? "use-credentials" : "anonymous";
+    } catch {
+      return "anonymous";
+    }
+  }
+  async function fetchWithFallback(url) {
+    const fetchBlobAsDataURL = (fetchUrl) => fetch(fetchUrl, {
+      mode: "cors",
+      credentials: getCrossOriginMode(fetchUrl) === "use-credentials" ? "include" : "omit"
+    }).then((r) => r.blob()).then((blob) => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64 = reader.result;
+        if (typeof base64 !== "string" || !base64.startsWith("data:image/")) {
+          reject(new Error("Invalid image data URL"));
+          return;
+        }
+        resolve(base64);
+      };
+      reader.onerror = () => reject(new Error("FileReader error"));
+      reader.readAsDataURL(blob);
+    }));
+    try {
+      return await fetchBlobAsDataURL(url);
+    } catch (e) {
+      if (useProxy && typeof useProxy === "string") {
+        const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url);
+        try {
+          return await fetchBlobAsDataURL(proxied);
+        } catch {
+          console.error(`[SnapDOM - fetchImage] Proxy fallback failed for: ${url}`);
+          throw new Error("CORS restrictions prevented image capture (even via proxy)");
+        }
+      } else {
+        console.error(`[SnapDOM - fetchImage] No valid proxy URL provided for fallback: ${url}`);
+        throw new Error("Fetch fallback failed and no proxy provided");
+      }
+    }
+  }
+  const crossOriginValue = getCrossOriginMode(src);
+  console.log(`[SnapDOM - fetchImage] Start loading image: ${src} with crossOrigin=${crossOriginValue}`);
   if (imageCache.has(src)) {
+    console.log(`[SnapDOM - fetchImage] Cache hit for: ${src}`);
     return Promise.resolve(imageCache.get(src));
   }
+  const isDataURI = src.startsWith("data:image/");
+  if (isDataURI) {
+    imageCache.set(src, src);
+    return Promise.resolve(src);
+  }
+  const isSVG = /\.svg(\?.*)?$/i.test(src);
+  if (isSVG) {
+    return (async () => {
+      try {
+        const response = await fetch(src, {
+          mode: "cors",
+          credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
+        });
+        const svgText = await response.text();
+        const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
+        imageCache.set(src, encoded);
+        return encoded;
+      } catch {
+        return fetchWithFallback(src);
+      }
+    })();
+  }
   return new Promise((resolve, reject) => {
     const timeoutId = setTimeout(() => {
+      console.log(`[SnapDOM - fetchImage] Timeout after ${timeout}ms for image: ${src}`);
       reject(new Error("Image load timed out"));
     }, timeout);
     const image = new Image();
-    image.crossOrigin = crossOrigin;
+    image.crossOrigin = crossOriginValue;
     image.onload = async () => {
       clearTimeout(timeoutId);
       try {
@@ -252,20 +304,29 @@ function fetchImage(src, timeout = 3e3, crossOrigin = "anonymous") {
         canvas.height = image.height;
         const ctx = canvas.getContext("2d");
         ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+        const dataURL = canvas.toDataURL("image/png");
+        imageCache.set(src, dataURL);
+        resolve(dataURL);
+      } catch {
         try {
-          const dataURL = canvas.toDataURL("image/png");
-          imageCache.set(src, dataURL);
-          resolve(dataURL);
+          const fallbackDataURL = await fetchWithFallback(src);
+          imageCache.set(src, fallbackDataURL);
+          resolve(fallbackDataURL);
         } catch (e) {
-          reject(new Error("CORS restrictions prevented image capture"));
+          reject(e);
         }
-      } catch (e) {
-        reject(e);
       }
     };
-    image.onerror = (e) => {
+    image.onerror = async () => {
       clearTimeout(timeoutId);
-      reject(new Error("Failed to load image: " + (e.message || "Unknown error")));
+      console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
+      try {
+        const fallbackDataURL = await fetchWithFallback(src);
+        imageCache.set(src, fallbackDataURL);
+        resolve(fallbackDataURL);
+      } catch (e) {
+        reject(e);
+      }
     };
     image.src = src;
   });
@@ -300,9 +361,9 @@ function stripTranslate(transform) {
   return cleaned.trim().replace(/\s{2,}/g, " ");
 }
 function safeEncodeURI(uri) {
+  if (/%[0-9A-Fa-f]{2}/.test(uri)) return uri;
   try {
-    const newURI = decodeURI(uri);
-    return encodeURI(newURI);
+    return encodeURI(uri);
   } catch {
     return uri;
   }
@@ -325,33 +386,90 @@ function splitBackgroundImage(bg) {
 }
 
 // src/modules/styles.js
+var snapshotCache = /* @__PURE__ */ new WeakMap();
+var snapshotKeyCache = /* @__PURE__ */ new Map();
+function snapshotComputedStyleFull(style) {
+  const result = {};
+  for (let i = 0; i < style.length; i++) {
+    const prop = style[i];
+    let val = style.getPropertyValue(prop);
+    if ((prop === "background-image" || prop === "content") && val.includes("url(") && !val.includes("data:")) {
+      val = "none";
+    }
+    result[prop] = val;
+  }
+  return result;
+}
 function inlineAllStyles(source, clone, styleMap, cache, compress) {
   if (source.tagName === "STYLE") return;
   if (!cache.has(source)) {
     cache.set(source, getStyle(source));
   }
   const style = cache.get(source);
-  const snapshot = snapshotComputedStyle(style);
+  if (!snapshotCache.has(source)) {
+    const snapshot2 = snapshotComputedStyleFull(style);
+    snapshotCache.set(source, snapshot2);
+  }
+  const snapshot = snapshotCache.get(source);
+  const hash = Object.entries(snapshot).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
+  if (snapshotKeyCache.has(hash)) {
+    styleMap.set(clone, snapshotKeyCache.get(hash));
+    return;
+  }
   const tagName = source.tagName?.toLowerCase() || "div";
   const key = getStyleKey(snapshot, tagName, compress);
+  snapshotKeyCache.set(hash, key);
   styleMap.set(clone, key);
 }
 
 // src/core/clone.js
-function deepClone(node, styleMap, styleCache, nodeMap, compress) {
-  if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "exclude") {
+function isSlotElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
+}
+function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.cloneNode(true);
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) 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.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;
+        }
+      } catch (err) {
+        console.warn(`Invalid selector in exclude option: ${selector}`, err);
+      }
+    }
+  }
+  if (typeof options.filter === "function") {
+    try {
+      if (!options.filter(node, originalRoot || 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;
+      }
+    } catch (err) {
+      console.warn("Error in filter function:", err);
+    }
+  }
   if (node.tagName === "IFRAME") {
     const fallback = document.createElement("div");
     fallback.textContent = "";
     fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.offsetHeight}px; background-image: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`;
     return fallback;
   }
-  if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "placeholder") {
+  if (node.getAttribute("data-capture") === "placeholder") {
     const clone2 = node.cloneNode(false);
     nodeMap.set(clone2, node);
     inlineAllStyles(node, clone2, styleMap, styleCache, compress);
@@ -372,14 +490,6 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress) {
     img.style.height = node.style.height || `${node.height}px`;
     return img;
   }
-  if (node.nodeType === Node.TEXT_NODE) {
-    if (node.parentElement?.shadowRoot) {
-      const tag = node.parentElement.tagName.toLowerCase();
-      if (customElements.get(tag)) return null;
-    }
-    return node.cloneNode(true);
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) return node.cloneNode(true);
   const clone = node.cloneNode(false);
   nodeMap.set(clone, node);
   if (node instanceof HTMLInputElement) {
@@ -390,8 +500,10 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress) {
       if (node.checked) clone.setAttribute("checked", "");
     }
   } else if (node instanceof HTMLTextAreaElement) {
-    clone.value = node.value;
+    const rect = node.getBoundingClientRect();
     clone.textContent = node.value;
+    clone.style.width = `${rect.width}px`;
+    clone.style.height = `${rect.height}px`;
   } else if (node instanceof HTMLSelectElement) {
     clone.value = node.value;
     Array.from(clone.options).forEach((opt) => {
@@ -403,21 +515,71 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress) {
     });
   }
   inlineAllStyles(node, clone, styleMap, styleCache, compress);
-  const frag = document.createDocumentFragment();
-  node.childNodes.forEach((child) => {
-    const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress);
-    if (clonedChild) frag.appendChild(clonedChild);
-  });
-  clone.appendChild(frag);
-  if (node.shadowRoot) {
-    const shadowContent = Array.from(node.shadowRoot.children).filter((el) => el.tagName !== "STYLE").map((el) => deepClone(el, styleMap, styleCache, nodeMap)).filter(Boolean);
-    const shadowFrag = document.createDocumentFragment();
-    shadowContent.forEach((child) => shadowFrag.appendChild(child));
-    clone.appendChild(shadowFrag);
+  if (isSlotElement(node)) {
+    const assigned = node.assignedNodes?.({ flatten: true }) || [];
+    const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
+    const fragment = document.createDocumentFragment();
+    for (const child of nodesToClone) {
+      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
+      if (clonedChild) fragment.appendChild(clonedChild);
+    }
+    return fragment;
+  } else if (node instanceof HTMLTextAreaElement) {
+  } else {
+    const baseChildren = node.shadowRoot ? node.shadowRoot.childNodes : node.childNodes;
+    for (const child of baseChildren) {
+      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
+      if (clonedChild) clone.appendChild(clonedChild);
+    }
+    if (node.shadowRoot && node.childNodes.length > 0 && !node.shadowRoot.querySelector("slot")) {
+      const lightDomContent = document.createDocumentFragment();
+      for (const child of node.childNodes) {
+        const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
+        if (clonedChild) lightDomContent.appendChild(clonedChild);
+      }
+      clone.appendChild(lightDomContent);
+    }
   }
   return clone;
 }
 
+// src/modules/iconFonts.js
+var defaultIconFonts = [
+  // /uicons/i,
+  /font\s*awesome/i,
+  /material\s*icons/i,
+  /ionicons/i,
+  /glyphicons/i,
+  /feather/i,
+  /bootstrap\s*icons/i,
+  /remix\s*icons/i,
+  /heroicons/i,
+  /layui/i,
+  /lucide/i
+];
+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);
+    }
+  }
+}
+function isIconFont(input) {
+  const text = typeof input === "string" ? input : "";
+  const candidates = [...defaultIconFonts, ...userIconFonts];
+  for (const rx of candidates) {
+    if (rx instanceof RegExp && rx.test(text)) return true;
+  }
+  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;
+}
+
 // src/modules/fonts.js
 async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
   fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
@@ -457,7 +619,7 @@ function injectLinkIfMissing(href) {
     document.head.appendChild(link);
   });
 }
-async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } = {}) {
+async function embedCustomFonts({ preCached = false } = {}) {
   if (resourceCache.has("fonts-embed-css")) {
     if (preCached) {
       const style = document.createElement("style");
@@ -474,6 +636,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
     const matches = Array.from(cssText.matchAll(importRegex));
     for (const match of matches) {
       const importUrl = match[1];
+      if (isIconFont(importUrl)) continue;
       if (!isStylesheetLoaded(importUrl)) {
         styleImports.push(importUrl);
       }
@@ -486,7 +649,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
     try {
       const res = await fetch(link.href);
       const cssText = await res.text();
-      if (ignoreIconFonts && (isIconFont(link.href) || isIconFont(cssText))) continue;
+      if (isIconFont(link.href) || isIconFont(cssText)) continue;
       const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
       const inlinedCSS = await Promise.all(
         Array.from(cssText.matchAll(urlRegex)).map(async (match) => {
@@ -496,7 +659,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
           if (!url.startsWith("http") && !url.startsWith("data:")) {
             url = new URL(url, link.href).href;
           }
-          if (ignoreIconFonts && isIconFont(url)) return null;
+          if (isIconFont(url)) return null;
           if (resourceCache.has(url)) {
             processedFontURLs.add(url);
             return { original: match[0], inlined: `url(${resourceCache.get(url)})` };
@@ -534,7 +697,8 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
         for (const rule of sheet.cssRules) {
           if (rule.type === CSSRule.FONT_FACE_RULE) {
             const src = rule.style.getPropertyValue("src");
-            if (!src) continue;
+            const family = rule.style.getPropertyValue("font-family");
+            if (!src || isIconFont(family)) continue;
             const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
             let inlinedSrc = src;
             const matches = Array.from(src.matchAll(urlRegex));
@@ -545,7 +709,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
               if (!url.startsWith("http") && !url.startsWith("data:")) {
                 url = new URL(url, sheet.href || location.href).href;
               }
-              if (ignoreIconFonts && isIconFont(url)) continue;
+              if (isIconFont(url)) continue;
               if (resourceCache.has(url)) {
                 processedFontURLs.add(url);
                 inlinedSrc = inlinedSrc.replace(match[0], `url(${resourceCache.get(url)})`);
@@ -568,7 +732,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
               }
             }
             finalCSS += `@font-face {
-  font-family: ${rule.style.getPropertyValue("font-family")};
+  font-family: ${family};
   src: ${inlinedSrc};
   font-style: ${rule.style.getPropertyValue("font-style") || "normal"};
   font-weight: ${rule.style.getPropertyValue("font-weight") || "normal"};
@@ -583,6 +747,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
   }
   for (const font of document.fonts) {
     if (font.family && font.status === "loaded" && font._snapdomSrc) {
+      if (isIconFont(font.family)) continue;
       let b64 = font._snapdomSrc;
       if (!b64.startsWith("data:")) {
         if (resourceCache.has(font._snapdomSrc)) {
@@ -627,7 +792,7 @@ async function embedCustomFonts({ ignoreIconFonts = true, preCached = false } =
 }
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false) {
+async function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false, useProxy) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
@@ -673,23 +838,21 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         const snapshot = snapshotComputedStyle(style);
         const key = getStyleKey(snapshot, "span", compress);
         styleMap.set(pseudoEl, key);
-        const isIconFont2 = fontFamily && /font.*awesome|material|bootstrap|glyphicons|ionicons|remixicon|simple-line-icons|octicons|feather|typicons|weathericons|lucide/i.test(
-          fontFamily
-        );
+        const isIconFont2 = isIconFont(fontFamily);
         const cleanContent = parseContent(content);
-        if (!embedFonts && isIconFont2 && cleanContent.length === 1) {
+        if (isIconFont2 && cleanContent.length === 1) {
           const imgEl = document.createElement("img");
           imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
-          imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
+          imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
           pseudoEl.appendChild(imgEl);
         } else if (cleanContent.startsWith("url(")) {
           const rawUrl = extractURL(cleanContent);
           if (rawUrl && rawUrl.trim() !== "") {
             try {
               const imgEl = document.createElement("img");
-              const dataUrl = await fetchImage(safeEncodeURI(rawUrl));
+              const dataUrl = await fetchImage(safeEncodeURI(rawUrl, { useProxy }));
               imgEl.src = dataUrl;
-              imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
+              imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
               pseudoEl.appendChild(imgEl);
             } catch (e) {
               console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
@@ -728,28 +891,64 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
       styleMap,
       styleCache,
       compress,
-      embedFonts
+      embedFonts,
+      useProxy
     );
   }
 }
 
+// src/modules/svgDefs.js
+function inlineExternalDef(root) {
+  if (!root) return;
+  const defsSources = document.querySelectorAll("svg > defs");
+  if (!defsSources.length) return;
+  root.querySelectorAll("svg").forEach((svg) => {
+    const uses = svg.querySelectorAll("use");
+    if (!uses.length) return;
+    const usedIds = /* @__PURE__ */ new Set();
+    uses.forEach((use) => {
+      const href = use.getAttribute("xlink:href") || use.getAttribute("href");
+      if (href && href.startsWith("#")) usedIds.add(href.slice(1));
+    });
+    if (!usedIds.size) return;
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    for (const id of usedIds) {
+      for (const source of defsSources) {
+        const def = source.querySelector(`#${CSS.escape(id)}`);
+        if (def) {
+          defs.appendChild(def.cloneNode(true));
+          break;
+        }
+      }
+    }
+    if (defs.childNodes.length) {
+      svg.insertBefore(defs, svg.firstChild);
+    }
+  });
+}
+
 // src/core/prepare.js
-async function prepareClone(element, compress = false, embedFonts = false) {
+async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
   const styleMap = /* @__PURE__ */ new Map();
   const styleCache = /* @__PURE__ */ new WeakMap();
   const nodeMap = /* @__PURE__ */ new Map();
   let clone;
   try {
-    clone = deepClone(element, styleMap, styleCache, nodeMap, compress);
+    clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
   } catch (e) {
     console.warn("deepClone failed:", e);
     throw e;
   }
   try {
-    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts);
+    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
+  try {
+    inlineExternalDef(clone);
+  } catch (e) {
+    console.warn("inlineExternalDef failed:", e);
+  }
   let classCSS = "";
   if (compress) {
     const keyToClass = generateCSSClasses(styleMap);
@@ -802,6 +1001,12 @@ async function prepareClone(element, compress = false, embedFonts = false) {
     clone.style.clear = "none";
     clone.style.transform = transform || "";
   }
+  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+    if (originalNode.tagName === "PRE") {
+      cloneNode.style.marginTop = "0";
+      cloneNode.style.marginBlockStart = "0";
+    }
+  }
   return { clone, classCSS, styleCache };
 }
 
@@ -811,8 +1016,7 @@ async function inlineImages(clone, options = {}) {
   const processImg = async (img) => {
     const src = img.src;
     try {
-      const crossOrigin = options.crossOrigin ? options.crossOrigin(src) : "anonymous";
-      const dataUrl = await fetchImage(src, 3e3, crossOrigin);
+      const dataUrl = await fetchImage(src, { useProxy: options.useProxy });
       img.src = dataUrl;
       if (!img.width) img.width = img.naturalWidth || 100;
       if (!img.height) img.height = img.naturalHeight || 100;
@@ -832,30 +1036,32 @@ async function inlineImages(clone, options = {}) {
 // src/modules/background.js
 async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
   const queue = [[source, clone]];
+  const imageProps = [
+    "background-image",
+    "mask",
+    "mask-image",
+    "-webkit-mask-image",
+    "mask-source",
+    "mask-box-image-source",
+    "mask-border-source",
+    "-webkit-mask-box-image-source"
+  ];
   while (queue.length) {
     const [srcNode, cloneNode] = queue.shift();
     const style = styleCache.get(srcNode) || getStyle(srcNode);
     if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
-    const bg = style.getPropertyValue("background-image");
-    const bgColor = style.getPropertyValue("background-color");
-    if (!bg || bg === "none") {
-      const sChildren2 = Array.from(srcNode.children);
-      const cChildren2 = Array.from(cloneNode.children);
-      for (let i = 0; i < Math.min(sChildren2.length, cChildren2.length); i++) {
-        queue.push([sChildren2[i], cChildren2[i]]);
+    for (const prop of imageProps) {
+      const val = style.getPropertyValue(prop);
+      if (!val || val === "none") continue;
+      const splits = splitBackgroundImage(val);
+      const inlined = await Promise.all(
+        splits.map((entry) => inlineSingleBackgroundEntry(entry, options))
+      );
+      if (inlined.some((p) => p && p !== "none" && !/^url\(undefined/.test(p))) {
+        cloneNode.style.setProperty(prop, inlined.join(", "));
       }
-      continue;
-    }
-    const bgSplits = splitBackgroundImage(bg);
-    const newBgParts = await Promise.all(
-      bgSplits.map((entry) => inlineSingleBackgroundEntry(entry, options))
-    );
-    const hasRealBg = newBgParts.some(
-      (p) => p && p !== "none" && !/^url\(undefined\)/.test(p)
-    );
-    if (hasRealBg) {
-      cloneNode.style.backgroundImage = newBgParts.join(", ");
     }
+    const bgColor = style.getPropertyValue("background-color");
     if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") {
       cloneNode.style.backgroundColor = bgColor;
     }
@@ -870,14 +1076,13 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
 // src/core/capture.js
 async function captureDOM(element, options = {}) {
   if (!element) throw new Error("Element cannot be null or undefined");
-  if (!(element instanceof Element)) throw new Error("captureDOM: Only Element nodes are supported");
-  const { compress = true, embedFonts = false, fast = true, scale = 1 } = options;
+  const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "" } = options;
   let clone, classCSS, styleCache;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts));
+  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -893,7 +1098,7 @@ async function captureDOM(element, options = {}) {
   if (embedFonts) {
     await new Promise((resolve) => {
       idle(async () => {
-        fontsCSS = await embedCustomFonts({ ignoreIconFonts: !embedFonts });
+        fontsCSS = await embedCustomFonts();
         resolve();
       }, { fast });
     });
@@ -1001,9 +1206,26 @@ async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
   canvas.style.height = `${height}px`;
   return canvas;
 }
-async function toBlob(url) {
-  const svgText = decodeURIComponent(url.split(",")[1]);
-  return new Blob([svgText], { type: "image/svg+xml" });
+async function toBlob(url, {
+  type = "svg",
+  scale = 1,
+  backgroundColor = "#fff",
+  quality
+} = {}) {
+  const mime = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp"
+  }[type] || "image/png";
+  if (type === "svg") {
+    const svgText = decodeURIComponent(url.split(",")[1]);
+    return new Blob([svgText], { type: "image/svg+xml" });
+  }
+  const canvas = await createBackground(url, { dpr: 1, scale }, backgroundColor);
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), `${mime}`, quality);
+  });
 }
 async function createBackground(url, { dpr = 1, scale = 1 }, backgroundColor) {
   const baseCanvas = await toCanvas(url, { dpr, scale });
@@ -1055,6 +1277,9 @@ async function download(url, { dpr = 1, scale = 1, backgroundColor = "#fff", for
 async function snapdom(element, options = {}) {
   options = { scale: 1, ...options };
   if (!element) throw new Error("Element cannot be null or undefined");
+  if (options.iconFonts) {
+    extendIconFonts(options.iconFonts);
+  }
   return await snapdom.capture(element, options);
 }
 snapdom.capture = async (el, options = {}) => {
@@ -1067,7 +1292,7 @@ snapdom.capture = async (el, options = {}) => {
     toRaw: () => url,
     toImg: () => toImg(url, { dpr, scale }),
     toCanvas: () => toCanvas(url, { dpr, scale }),
-    toBlob: () => toBlob(url),
+    toBlob: (options2) => toBlob(url, { dpr, scale, ...options2 }),
     toPng: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "png"),
     toJpg: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "jpeg"),
     toWebp: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "webp"),
@@ -1077,7 +1302,7 @@ snapdom.capture = async (el, options = {}) => {
 snapdom.toRaw = async (el, options) => (await snapdom.capture(el, options)).toRaw();
 snapdom.toImg = async (el, options) => (await snapdom.capture(el, options)).toImg();
 snapdom.toCanvas = async (el, options) => (await snapdom.capture(el, options)).toCanvas();
-snapdom.toBlob = async (el, options) => (await snapdom.capture(el, options)).toBlob();
+snapdom.toBlob = async (el, options) => (await snapdom.capture(el, options)).toBlob(options);
 snapdom.toPng = async (el, options) => (await snapdom.capture(el, options)).toPng(options);
 snapdom.toJpg = async (el, options) => (await snapdom.capture(el, options)).toJpg(options);
 snapdom.toWebp = async (el, options) => (await snapdom.capture(el, options)).toWebp(options);
@@ -1094,7 +1319,7 @@ snapdom.download = async (el, options = {}) => {
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {
-  const { embedFonts = true, reset = false, crossOrigin: crossOriginFn } = options;
+  const { embedFonts = true, reset = false } = options;
   if (reset) {
     imageCache.clear();
     bgCache.clear();
@@ -1113,9 +1338,8 @@ async function preCache(root = document, options = {}) {
   for (const img of imgEls) {
     const src = img.src;
     if (!imageCache.has(src)) {
-      const crossOrigin = crossOriginFn ? crossOriginFn(src) : "anonymous";
       promises.push(
-        fetchImage(src, 3e3, crossOrigin).then((dataURL) => imageCache.set(src, dataURL)).catch(() => {
+        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => imageCache.set(src, dataURL)).catch(() => {
         })
       );
     }
@@ -1128,7 +1352,7 @@ async function preCache(root = document, options = {}) {
         const isUrl = entry.startsWith("url(");
         if (isUrl) {
           promises.push(
-            inlineSingleBackgroundEntry(entry, { crossOrigin: crossOriginFn, skipInline: true }).catch(() => {
+            inlineSingleBackgroundEntry(entry, options).catch(() => {
             })
           );
         }
@@ -1136,7 +1360,7 @@ async function preCache(root = document, options = {}) {
     }
   }
   if (embedFonts) {
-    await embedCustomFonts({ ignoreIconFonts: !embedFonts, preCached: true });
+    await embedCustomFonts({ preCached: true });
   }
   await Promise.all(promises);
 }