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

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.8.0
+* v.1.9.3-next-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -205,19 +205,17 @@
   // src/utils/helpers.js
   function inlineSingleBackgroundEntry(_0) {
     return __async(this, arguments, function* (entry, options = {}) {
-      const isUrl = entry.startsWith("url(");
+      const match = entry.match(/url\(["']?(.*?)["']?\)/);
+      const rawUrl = match == null ? void 0 : 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 = yield fetchImage(encodedUrl, 3e3, crossOrigin);
+          const dataUrl = yield 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") {
@@ -270,30 +268,86 @@
     }
     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 (e) {
+        return "anonymous";
+      }
+    }
+    function fetchWithFallback(url) {
+      return __async(this, null, function* () {
+        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 yield fetchBlobAsDataURL(url);
+        } catch (e) {
+          if (useProxy && typeof useProxy === "string") {
+            const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url);
+            try {
+              return yield fetchBlobAsDataURL(proxied);
+            } catch (e2) {
+              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(null, null, function* () {
+        try {
+          const response = yield fetch(src, {
+            mode: "cors",
+            credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
+          });
+          const svgText = yield response.text();
+          const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
+          imageCache.set(src, encoded);
+          return encoded;
+        } catch (e) {
+          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(null, null, function* () {
         clearTimeout(timeoutId);
         try {
@@ -303,21 +357,30 @@
           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 (e) {
           try {
-            const dataURL = canvas.toDataURL("image/png");
-            imageCache.set(src, dataURL);
-            resolve(dataURL);
-          } catch (e) {
-            reject(new Error("CORS restrictions prevented image capture"));
+            const fallbackDataURL = yield fetchWithFallback(src);
+            imageCache.set(src, fallbackDataURL);
+            resolve(fallbackDataURL);
+          } catch (e2) {
+            reject(e2);
           }
+        }
+      });
+      image.onerror = () => __async(null, null, function* () {
+        clearTimeout(timeoutId);
+        console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
+        try {
+          const fallbackDataURL = yield fetchWithFallback(src);
+          imageCache.set(src, fallbackDataURL);
+          resolve(fallbackDataURL);
         } catch (e) {
           reject(e);
         }
       });
-      image.onerror = (e) => {
-        clearTimeout(timeoutId);
-        reject(new Error("Failed to load image: " + (e.message || "Unknown error")));
-      };
       image.src = src;
     });
   }
@@ -351,9 +414,9 @@
     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 (e) {
       return uri;
     }
@@ -376,6 +439,20 @@
   }
 
   // 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) {
     var _a;
     if (source.tagName === "STYLE") return;
@@ -383,28 +460,71 @@
       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 = ((_a = source.tagName) == null ? void 0 : _a.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) {
-    var _a;
-    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) {
+    var _a, _b;
+    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 ((_a = node.matches) == null ? void 0 : _a.call(node, 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);
@@ -425,14 +545,6 @@
       img.style.height = node.style.height || `${node.height}px`;
       return img;
     }
-    if (node.nodeType === Node.TEXT_NODE) {
-      if ((_a = node.parentElement) == null ? void 0 : _a.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) {
@@ -443,8 +555,10 @@
         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) => {
@@ -456,21 +570,71 @@
       });
     }
     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 = ((_b = node.assignedNodes) == null ? void 0 : _b.call(node, { 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
   function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
     return __async(this, null, function* () {
@@ -513,7 +677,7 @@
     });
   }
   function embedCustomFonts() {
-    return __async(this, arguments, function* ({ ignoreIconFonts = true, preCached = false } = {}) {
+    return __async(this, arguments, function* ({ preCached = false } = {}) {
       if (resourceCache.has("fonts-embed-css")) {
         if (preCached) {
           const style = document.createElement("style");
@@ -530,6 +694,7 @@
         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);
           }
@@ -542,7 +707,7 @@
         try {
           const res = yield fetch(link.href);
           const cssText = yield res.text();
-          if (ignoreIconFonts && (isIconFont(link.href) || isIconFont(cssText))) continue;
+          if (isIconFont(link.href) || isIconFont(cssText)) continue;
           const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
           const inlinedCSS = yield Promise.all(
             Array.from(cssText.matchAll(urlRegex)).map((match) => __async(null, null, function* () {
@@ -552,7 +717,7 @@
               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)})` };
@@ -590,7 +755,8 @@
             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));
@@ -601,7 +767,7 @@
                   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)})`);
@@ -624,7 +790,7 @@
                   }
                 }
                 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"};
@@ -639,6 +805,7 @@
       }
       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)) {
@@ -684,7 +851,7 @@
   }
 
   // src/modules/pseudo.js
-  function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false) {
+  function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false, useProxy) {
     return __async(this, null, function* () {
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
@@ -731,23 +898,21 @@
             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 = yield 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 = yield fetchImage(safeEncodeURI(rawUrl));
+                  const dataUrl = yield 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);
@@ -786,31 +951,67 @@
           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
-  function prepareClone(element, compress = false, embedFonts = false) {
-    return __async(this, null, function* () {
+  function prepareClone(_0) {
+    return __async(this, arguments, function* (element, compress = false, embedFonts = false, options = {}) {
       var _a;
       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 {
-        yield inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts);
+        yield 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);
@@ -863,6 +1064,12 @@
         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 };
     });
   }
@@ -874,8 +1081,7 @@
       const processImg = (img) => __async(null, null, function* () {
         const src = img.src;
         try {
-          const crossOrigin = options.crossOrigin ? options.crossOrigin(src) : "anonymous";
-          const dataUrl = yield fetchImage(src, 3e3, crossOrigin);
+          const dataUrl = yield fetchImage(src, { useProxy: options.useProxy });
           img.src = dataUrl;
           if (!img.width) img.width = img.naturalWidth || 100;
           if (!img.height) img.height = img.naturalHeight || 100;
@@ -897,30 +1103,32 @@
   function inlineBackgroundImages(_0, _1, _2) {
     return __async(this, arguments, function* (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 = yield 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 = yield 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;
         }
@@ -937,14 +1145,13 @@
   function captureDOM(_0) {
     return __async(this, arguments, function* (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 } = yield prepareClone(element, compress, embedFonts));
+      ({ clone, classCSS, styleCache } = yield prepareClone(element, compress, embedFonts, options));
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
           yield inlineImages(clone, options);
@@ -960,7 +1167,7 @@
       if (embedFonts) {
         yield new Promise((resolve) => {
           idle(() => __async(null, null, function* () {
-            fontsCSS = yield embedCustomFonts({ ignoreIconFonts: !embedFonts });
+            fontsCSS = yield embedCustomFonts();
             resolve();
           }), { fast });
         });
@@ -1073,10 +1280,27 @@
       return canvas;
     });
   }
-  function toBlob(url) {
-    return __async(this, null, function* () {
-      const svgText = decodeURIComponent(url.split(",")[1]);
-      return new Blob([svgText], { type: "image/svg+xml" });
+  function toBlob(_0) {
+    return __async(this, arguments, function* (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 = yield createBackground(url, { dpr: 1, scale }, backgroundColor);
+      return new Promise((resolve) => {
+        canvas.toBlob((blob) => resolve(blob), `${mime}`, quality);
+      });
     });
   }
   function createBackground(_0, _1, _2) {
@@ -1136,6 +1360,9 @@
     return __async(this, arguments, function* (element, options = {}) {
       options = __spreadValues({ scale: 1 }, options);
       if (!element) throw new Error("Element cannot be null or undefined");
+      if (options.iconFonts) {
+        extendIconFonts(options.iconFonts);
+      }
       return yield snapdom.capture(element, options);
     });
   }
@@ -1149,7 +1376,7 @@
       toRaw: () => url,
       toImg: () => toImg(url, { dpr, scale }),
       toCanvas: () => toCanvas(url, { dpr, scale }),
-      toBlob: () => toBlob(url),
+      toBlob: (options2) => toBlob(url, __spreadValues({ dpr, scale }, options2)),
       toPng: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "png"),
       toJpg: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "jpeg"),
       toWebp: (options2) => toRasterImg(url, __spreadValues({ dpr, scale }, options2), "webp"),
@@ -1166,7 +1393,7 @@
     return (yield snapdom.capture(el, options)).toCanvas();
   });
   snapdom.toBlob = (el, options) => __async(null, null, function* () {
-    return (yield snapdom.capture(el, options)).toBlob();
+    return (yield snapdom.capture(el, options)).toBlob(options);
   });
   snapdom.toPng = (el, options) => __async(null, null, function* () {
     return (yield snapdom.capture(el, options)).toPng(options);
@@ -1194,7 +1421,7 @@
   // src/api/preCache.js
   function preCache() {
     return __async(this, arguments, function* (root = document, options = {}) {
-      const { embedFonts = true, reset = false, crossOrigin: crossOriginFn } = options;
+      const { embedFonts = true, reset = false } = options;
       if (reset) {
         imageCache.clear();
         bgCache.clear();
@@ -1213,9 +1440,8 @@
       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(() => {
             })
           );
         }
@@ -1228,7 +1454,7 @@
             const isUrl = entry.startsWith("url(");
             if (isUrl) {
               promises.push(
-                inlineSingleBackgroundEntry(entry, { crossOrigin: crossOriginFn, skipInline: true }).catch(() => {
+                inlineSingleBackgroundEntry(entry, options).catch(() => {
                 })
               );
             }
@@ -1236,7 +1462,7 @@
         }
       }
       if (embedFonts) {
-        yield embedCustomFonts({ ignoreIconFonts: !embedFonts, preCached: true });
+        yield embedCustomFonts({ preCached: true });
       }
       yield Promise.all(promises);
     });