@zumer/snapdom 1.9.8 → 1.9.9

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.8
+* v.1.9.9
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -18,18 +18,10 @@ var cache = {
   font: /* @__PURE__ */ new Set(),
   snapshot: /* @__PURE__ */ new WeakMap(),
   snapshotKey: /* @__PURE__ */ new Map(),
-  preStyleMap: /* @__PURE__ */ new Map(),
-  preStyle: /* @__PURE__ */ new WeakMap(),
-  preNodeMap: /* @__PURE__ */ new Map(),
   reset: resetCache
 };
 function resetCache() {
   cache.computedStyle = /* @__PURE__ */ new WeakMap();
-  cache.snapshot = /* @__PURE__ */ new WeakMap();
-  cache.snapshotKey.clear();
-  cache.preStyleMap.clear();
-  cache.preStyle = /* @__PURE__ */ new WeakMap();
-  cache.preNodeMap.clear();
 }
 
 // src/utils/cssTools.js
@@ -163,8 +155,8 @@ function generateDedupedBaseCSS(usedTagNames) {
   }
   return css;
 }
-function generateCSSClasses() {
-  const keySet = new Set(cache.preStyleMap.values());
+function generateCSSClasses(styleMap) {
+  const keySet = new Set(styleMap.values());
   const classMap = /* @__PURE__ */ new Map();
   let counter = 1;
   for (const key of keySet) {
@@ -234,7 +226,25 @@ function extractURL(value) {
   if (url.startsWith("#")) return null;
   return url;
 }
-function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
+async function fetchResource(url, { useProxy = "" } = {}) {
+  async function doFetch(u) {
+    const res = await fetch(u);
+    if (!res.ok) throw new Error(`[snapdom] Failed to fetch resource: ${u}`);
+    return res;
+  }
+  try {
+    return await doFetch(url);
+  } catch (e) {
+    if (useProxy && typeof useProxy === "string") {
+      const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url);
+      return doFetch(proxied);
+    }
+    throw e;
+  }
+}
+var _inflight = /* @__PURE__ */ new Map();
+var _errorCache = /* @__PURE__ */ new Map();
+function fetchImage(src, { timeout = 3e3, useProxy = "", errorTTL = 8e3 } = {}) {
   function getCrossOriginMode(url) {
     try {
       const parsed = new URL(url, window.location.href);
@@ -243,105 +253,157 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
       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);
-    }));
+  const ok = (data) => ({ ok: true, data });
+  const fail = (e) => ({ ok: false, error: e instanceof Error ? e : new Error(String(e)) });
+  function fetchBlobAsDataURLSafe(fetchUrl) {
     try {
-      return await fetchBlobAsDataURL(url);
+      return fetch(fetchUrl, {
+        mode: "cors",
+        credentials: getCrossOriginMode(fetchUrl) === "use-credentials" ? "include" : "omit"
+      }).then((r) => {
+        if (!r.ok) return fail(new Error("HTTP " + r.status));
+        return r.blob().then((blob) => new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64 = reader.result;
+            if (typeof base64 !== "string" || !base64.startsWith("data:image/")) {
+              resolve(fail(new Error("Invalid image data URL")));
+            } else {
+              resolve(ok(base64));
+            }
+          };
+          reader.onerror = () => resolve(fail(new Error("FileReader error")));
+          reader.readAsDataURL(blob);
+        }));
+      }).catch((e) => fail(e));
     } catch (e) {
+      return Promise.resolve(fail(e));
+    }
+  }
+  function fetchWithFallbackOnceSafe(url) {
+    return fetchBlobAsDataURLSafe(url).then((r) => {
+      if (r.ok) return r;
       if (useProxy && typeof useProxy === "string") {
         const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url);
-        try {
-          return await fetchBlobAsDataURL(proxied);
-        } catch {
-          throw new Error("[SnapDOM - fetchImage] CORS restrictions prevented image capture (even via proxy)");
-        }
-      } else {
-        throw new Error("[SnapDOM - fetchImage] Fetch fallback failed and no proxy provided");
+        return fetchBlobAsDataURLSafe(proxied).then((r2) => {
+          if (r2.ok) return r2;
+          return fail(new Error("[SnapDOM - fetchImage] Fetch failed and no proxy provided"));
+        });
       }
-    }
+      return fail(new Error("[SnapDOM - fetchImage] Fetch failed and no proxy provided"));
+    });
   }
-  const crossOriginValue = getCrossOriginMode(src);
-  if (cache.image.has(src)) {
-    return Promise.resolve(cache.image.get(src));
+  const now = Date.now();
+  const until = _errorCache.get(src);
+  if (until && until > now) {
+    const pr = Promise.reject(new Error("[SnapDOM - fetchImage] Recently failed (cooldown)."));
+    pr.catch(() => {
+    });
+    return pr;
   }
-  const isDataURI = src.startsWith("data:image/");
-  if (isDataURI) {
+  if (_inflight.has(src)) return _inflight.get(src);
+  const crossOriginValue = getCrossOriginMode(src);
+  if (cache.image.has(src)) return Promise.resolve(cache.image.get(src));
+  if (src.startsWith("data:image/")) {
     cache.image.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)}`;
-        cache.image.set(src, encoded);
-        return encoded;
-      } catch {
-        return fetchWithFallback(src);
-      }
-    })();
-  }
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      reject(new Error("[SnapDOM - fetchImage] Image load timed out"));
-    }, timeout);
-    const image = new Image();
-    image.crossOrigin = crossOriginValue;
-    image.onload = async () => {
-      clearTimeout(timeoutId);
-      try {
-        await image.decode();
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-        const dataURL = canvas.toDataURL("image/png");
-        cache.image.set(src, dataURL);
-        resolve(dataURL);
-      } catch {
+  if (/\.svg(\?.*)?$/i.test(src)) {
+    const p2 = (async () => {
+      const direct = await (async () => {
         try {
-          const fallbackDataURL = await fetchWithFallback(src);
-          cache.image.set(src, fallbackDataURL);
-          resolve(fallbackDataURL);
+          const res = await fetch(src, {
+            mode: "cors",
+            credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
+          });
+          if (!res.ok) return fail(new Error("HTTP " + res.status));
+          const svgText = await res.text();
+          return ok(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`);
         } catch (e) {
-          reject(e);
+          return fail(e);
         }
+      })();
+      if (direct.ok) {
+        cache.image.set(src, direct.data);
+        return direct.data;
       }
-    };
-    image.onerror = async () => {
-      clearTimeout(timeoutId);
-      console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
-      try {
-        const fallbackDataURL = await fetchWithFallback(src);
-        cache.image.set(src, fallbackDataURL);
-        resolve(fallbackDataURL);
-      } catch (e) {
-        reject(e);
+      const via = await fetchWithFallbackOnceSafe(src);
+      if (via.ok) {
+        cache.image.set(src, via.data);
+        return via.data;
       }
+      _errorCache.set(src, now + errorTTL);
+      return Promise.reject(via.error);
+    })();
+    _inflight.set(src, p2);
+    p2.finally(() => _inflight.delete(src));
+    p2.catch(() => {
+    });
+    return p2;
+  }
+  const p = new Promise((resolve, reject) => {
+    let finished = false;
+    const img = new Image();
+    const finish = (fn) => (arg) => {
+      if (finished) return;
+      finished = true;
+      clearTimeout(timeoutId);
+      img.onload = img.onerror = null;
+      fn(arg);
+    };
+    const onSuccess = (d) => {
+      cache.image.set(src, d);
+      resolve(d);
     };
-    image.src = src;
+    const onFinalError = (e) => {
+      _errorCache.set(src, Date.now() + errorTTL);
+      reject(e);
+    };
+    const timeoutId = setTimeout(
+      finish(() => {
+        fetchWithFallbackOnceSafe(src).then((r) => {
+          if (r.ok) onSuccess(r.data);
+          else onFinalError(new Error("Image load timed out"));
+        });
+      }),
+      timeout
+    );
+    img.crossOrigin = crossOriginValue;
+    img.onload = finish(() => {
+      Promise.resolve(img.decode()).then(() => {
+        try {
+          const canvas = document.createElement("canvas");
+          canvas.width = img.naturalWidth || img.width;
+          canvas.height = img.naturalHeight || img.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          onSuccess(canvas.toDataURL("image/png"));
+        } catch {
+          fetchWithFallbackOnceSafe(src).then((r) => {
+            if (r.ok) onSuccess(r.data);
+            else onFinalError(r.error);
+          });
+        }
+      }).catch(() => {
+        fetchWithFallbackOnceSafe(src).then((r) => {
+          if (r.ok) onSuccess(r.data);
+          else onFinalError(r.error);
+        });
+      });
+    });
+    img.onerror = finish(() => {
+      fetchWithFallbackOnceSafe(src).then((r) => {
+        if (r.ok) onSuccess(r.data);
+        else onFinalError(r.error);
+      });
+    });
+    img.src = src;
   });
+  _inflight.set(src, p);
+  p.finally(() => _inflight.delete(src));
+  p.catch(() => {
+  });
+  return p;
 }
 function snapshotComputedStyle(style) {
   const snap = {};
@@ -398,6 +460,8 @@ function splitBackgroundImage(bg) {
 }
 
 // src/modules/styles.js
+var snapshotCache = /* @__PURE__ */ new WeakMap();
+var snapshotKeyCache = /* @__PURE__ */ new Map();
 function snapshotComputedStyleFull(style) {
   const result = {};
   const computedVisibility = style.getPropertyValue("visibility");
@@ -414,30 +478,42 @@ function snapshotComputedStyleFull(style) {
   }
   return result;
 }
-function inlineAllStyles(source, clone, compress) {
+function inlineAllStyles(source, clone, styleMap, cache2, compress) {
   if (source.tagName === "STYLE") return;
-  if (!cache.preStyle.has(source)) {
-    cache.preStyle.set(source, getStyle(source));
+  if (!cache2.has(source)) {
+    cache2.set(source, getStyle(source));
   }
-  const style = cache.preStyle.get(source);
-  if (!cache.snapshot.has(source)) {
+  const style = cache2.get(source);
+  if (!snapshotCache.has(source)) {
     const snapshot2 = snapshotComputedStyleFull(style);
-    cache.snapshot.set(source, snapshot2);
+    snapshotCache.set(source, snapshot2);
   }
-  const snapshot = cache.snapshot.get(source);
+  const snapshot = snapshotCache.get(source);
   const hash = Object.entries(snapshot).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
-  if (cache.snapshotKey.has(hash)) {
-    cache.preStyleMap.set(clone, cache.snapshotKey.get(hash));
+  if (snapshotKeyCache.has(hash)) {
+    styleMap.set(clone, snapshotKeyCache.get(hash));
     return;
   }
   const tagName = source.tagName?.toLowerCase() || "div";
   const key = getStyleKey(snapshot, tagName, compress);
-  cache.snapshotKey.set(hash, key);
-  cache.preStyleMap.set(clone, key);
+  snapshotKeyCache.set(hash, key);
+  styleMap.set(clone, key);
 }
 
 // src/core/clone.js
-function deepClone(node, compress, options = {}, originalRoot) {
+function freezeImgSrcset(original, cloned) {
+  try {
+    const chosen = original.currentSrc || original.src || "";
+    if (!chosen) return;
+    cloned.setAttribute("src", chosen);
+    cloned.removeAttribute("srcset");
+    cloned.removeAttribute("sizes");
+    cloned.loading = "eager";
+    cloned.decoding = "sync";
+  } catch {
+  }
+}
+function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
   if (!node) throw new Error("Invalid node");
   const clonedAssignedNodes = /* @__PURE__ */ new Set();
   let pendingSelectValue = null;
@@ -486,8 +562,8 @@ function deepClone(node, compress, options = {}, originalRoot) {
   }
   if (node.getAttribute("data-capture") === "placeholder") {
     const clone2 = node.cloneNode(false);
-    cache.preNodeMap.set(clone2, node);
-    inlineAllStyles(node, clone2, compress);
+    nodeMap.set(clone2, node);
+    inlineAllStyles(node, clone2, styleMap, styleCache, compress);
     const placeholder = document.createElement("div");
     placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
     placeholder.style.cssText = `color:#666;font-size:12px;text-align:center;line-height:1.4;padding:0.5em;box-sizing:border-box;`;
@@ -500,14 +576,17 @@ function deepClone(node, compress, options = {}, originalRoot) {
     img.src = dataURL;
     img.width = node.width;
     img.height = node.height;
-    cache.preNodeMap.set(img, node);
-    inlineAllStyles(node, img, compress);
+    nodeMap.set(img, node);
+    inlineAllStyles(node, img, styleMap, styleCache, compress);
     return img;
   }
   let clone;
   try {
     clone = node.cloneNode(false);
-    cache.preNodeMap.set(clone, node);
+    nodeMap.set(clone, node);
+    if (node.tagName === "IMG") {
+      freezeImgSrcset(node, clone);
+    }
   } catch (err) {
     console.error("[Snapdom] Failed to clone node:", node, err);
     throw err;
@@ -532,7 +611,7 @@ function deepClone(node, compress, options = {}, originalRoot) {
   if (node instanceof HTMLSelectElement) {
     pendingSelectValue = node.value;
   }
-  inlineAllStyles(node, clone, compress);
+  inlineAllStyles(node, clone, styleMap, styleCache, compress);
   if (node.shadowRoot) {
     const hasSlot = Array.from(node.shadowRoot.querySelectorAll("slot")).length > 0;
     if (hasSlot) {
@@ -540,8 +619,7 @@ function deepClone(node, compress, options = {}, originalRoot) {
         if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
           const cssText = child.textContent || "";
           if (cssText.trim() && compress) {
-            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
-            cache.preStyle.set(child, cssText);
+            styleCache.set(child, cssText);
           }
         }
       }
@@ -551,12 +629,11 @@ function deepClone(node, compress, options = {}, originalRoot) {
         if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
           const cssText = child.textContent || "";
           if (cssText.trim() && compress) {
-            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
-            cache.preStyle.set(child, cssText);
+            styleCache.set(child, cssText);
           }
           continue;
         }
-        const clonedChild = deepClone(child, compress, options, originalRoot || node);
+        const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
         if (clonedChild) shadowFrag.appendChild(clonedChild);
       }
       clone.appendChild(shadowFrag);
@@ -567,14 +644,14 @@ function deepClone(node, compress, options = {}, originalRoot) {
     const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
     const fragment = document.createDocumentFragment();
     for (const child of nodesToClone) {
-      const clonedChild = deepClone(child, compress, options, originalRoot || node);
+      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
       if (clonedChild) fragment.appendChild(clonedChild);
     }
     return fragment;
   }
   for (const child of node.childNodes) {
     if (clonedAssignedNodes.has(child)) continue;
-    const clonedChild = deepClone(child, compress, options, originalRoot || node);
+    const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
     if (clonedChild) clone.appendChild(clonedChild);
   }
   if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
@@ -679,7 +756,7 @@ function injectLinkIfMissing(href) {
     document.head.appendChild(link);
   });
 }
-async function embedCustomFonts({ preCached = false } = {}) {
+async function embedCustomFonts({ preCached = false, localFonts = [], useProxy = "" } = {}) {
   if (cache.resource.has("fonts-embed-css")) {
     if (preCached) {
       const style = document.createElement("style");
@@ -689,6 +766,15 @@ async function embedCustomFonts({ preCached = false } = {}) {
     }
     return cache.resource.get("fonts-embed-css");
   }
+  const loadedFonts = /* @__PURE__ */ new Set();
+  try {
+    for (const f of document.fonts) {
+      if (f.status === "loaded") {
+        loadedFonts.add(`${f.family}__${f.weight || "normal"}__${f.style || "normal"}`);
+      }
+    }
+  } catch {
+  }
   const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
   const styleImports = [];
   for (const styleTag of document.querySelectorAll("style")) {
@@ -707,26 +793,48 @@ async function embedCustomFonts({ preCached = false } = {}) {
   let finalCSS = "";
   for (const link of links) {
     try {
-      const res = await fetch(link.href);
+      const res = await fetchResource(link.href, { useProxy });
       const cssText = await res.text();
       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) => {
+      const faceRegex = /@font-face[^{}]*{[^}]*}/g;
+      let cssFinal = cssText;
+      for (const face of cssText.match(faceRegex) || []) {
+        const famMatch = face.match(/font-family:\s*([^;]+);/i);
+        if (!famMatch) continue;
+        const family = famMatch[1].replace(/['"]/g, "").trim();
+        const weightMatch = face.match(/font-weight:\s*([^;]+);/i);
+        const styleMatch = face.match(/font-style:\s*([^;]+);/i);
+        const weight = weightMatch ? weightMatch[1].trim() : "normal";
+        const style = styleMatch ? styleMatch[1].trim() : "normal";
+        const key = `${family}__${weight}__${style}`;
+        const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
+        const hasURL = /url\(/i.test(face);
+        const hasLocal = /local\(/i.test(face);
+        if (!hasURL && hasLocal) {
+          continue;
+        }
+        if (!loadedFonts.has(key)) {
+          cssFinal = cssFinal.replace(face, "");
+          continue;
+        }
+        let inlined = face;
+        const matches = Array.from(face.matchAll(urlRegex));
+        for (const match of matches) {
           let rawUrl = extractURL(match[0]);
-          if (!rawUrl) return null;
+          if (!rawUrl) continue;
           let url = rawUrl;
           if (!url.startsWith("http") && !url.startsWith("data:")) {
             url = new URL(url, link.href).href;
           }
-          if (isIconFont(url)) return null;
+          if (isIconFont(url)) continue;
           if (cache.resource.has(url)) {
             cache.font.add(url);
-            return { original: match[0], inlined: `url(${cache.resource.get(url)})` };
+            inlined = inlined.replace(match[0], `url(${cache.resource.get(url)})`);
+            continue;
           }
-          if (cache.font.has(url)) return null;
+          if (cache.font.has(url)) continue;
           try {
-            const fontRes = await fetch(url);
+            const fontRes = await fetchResource(url, { useProxy });
             const blob = await fontRes.blob();
             const b64 = await new Promise((resolve) => {
               const reader = new FileReader();
@@ -735,16 +843,12 @@ async function embedCustomFonts({ preCached = false } = {}) {
             });
             cache.resource.set(url, b64);
             cache.font.add(url);
-            return { original: match[0], inlined: `url(${b64})` };
+            inlined = inlined.replace(match[0], `url(${b64})`);
           } catch (e) {
             console.warn("[snapdom] Failed to fetch font resource:", url);
-            return null;
           }
-        })
-      );
-      let cssFinal = cssText;
-      for (const r of inlinedCSS) {
-        if (r) cssFinal = cssFinal.replace(r.original, r.inlined);
+        }
+        cssFinal = cssFinal.replace(face, inlined);
       }
       finalCSS += cssFinal + "\n";
     } catch (e) {
@@ -759,14 +863,18 @@ async function embedCustomFonts({ preCached = false } = {}) {
             const src = rule.style.getPropertyValue("src");
             const family = rule.style.getPropertyValue("font-family");
             if (!src || isIconFont(family)) continue;
+            const weightVal = rule.style.getPropertyValue("font-weight") || "normal";
+            const styleVal = rule.style.getPropertyValue("font-style") || "normal";
+            const key = `${family}__${weightVal}__${styleVal}`;
             const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
             const localRegex = /local\((["']?)[^)]+?\1\)/g;
             const hasURL = !!src.match(urlRegex);
             const hasLocal = !!src.match(localRegex);
             if (!hasURL && hasLocal) {
-              finalCSS += `@font-face{font-family:${family};src:${src};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
+              finalCSS += `@font-face{font-family:${family};src:${src};font-style:${styleVal};font-weight:${weightVal};}`;
               continue;
             }
+            if (!loadedFonts.has(key)) continue;
             let inlinedSrc = src;
             const matches = Array.from(src.matchAll(urlRegex));
             for (const match of matches) {
@@ -784,7 +892,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
               }
               if (cache.font.has(url)) continue;
               try {
-                const res = await fetch(url);
+                const res = await fetchResource(url, { useProxy });
                 const blob = await res.blob();
                 const b64 = await new Promise((resolve) => {
                   const reader = new FileReader();
@@ -798,7 +906,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
               }
             }
-            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
+            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleVal};font-weight:${weightVal};}`;
           }
         }
       }
@@ -816,7 +924,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
           cache.font.add(font._snapdomSrc);
         } else if (!cache.font.has(font._snapdomSrc)) {
           try {
-            const res = await fetch(font._snapdomSrc);
+            const res = await fetchResource(font._snapdomSrc, { useProxy });
             const blob = await res.blob();
             b64 = await new Promise((resolve) => {
               const reader = new FileReader();
@@ -834,6 +942,32 @@ async function embedCustomFonts({ preCached = false } = {}) {
       finalCSS += `@font-face{font-family:'${font.family}';src:url(${b64});font-style:${font.style || "normal"};font-weight:${font.weight || "normal"};}`;
     }
   }
+  for (const font of localFonts) {
+    if (!font || typeof font !== "object") continue;
+    const { family, src, weight = "normal", style = "normal" } = font;
+    if (!family || !src) continue;
+    let b64 = src;
+    if (!b64.startsWith("data:")) {
+      try {
+        const res = await fetchResource(src, { useProxy });
+        const blob = await res.blob();
+        b64 = await new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.readAsDataURL(blob);
+        });
+        cache.resource.set(src, b64);
+        cache.font.add(src);
+      } catch (e) {
+        console.warn("[snapdom] Failed to load local font:", src);
+        continue;
+      }
+    } else {
+      cache.resource.set(src, b64);
+      cache.font.add(src);
+    }
+    finalCSS += `@font-face{font-family:'${family}';src:url(${b64});font-style:${style};font-weight:${weight};}`;
+  }
   if (finalCSS) {
     cache.resource.set("fonts-embed-css", finalCSS);
     if (preCached) {
@@ -847,7 +981,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
 }
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, options) {
+async function inlinePseudoElements(source, clone, styleMap, styleCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
@@ -873,7 +1007,7 @@ async function inlinePseudoElements(source, clone, options) {
         span.dataset.snapdomPseudo = "::first-letter";
         const snapshot2 = snapshotComputedStyle(style);
         const key2 = getStyleKey(snapshot2, "span", options);
-        cache.preStyleMap.set(span, key2);
+        styleMap.set(span, key2);
         const restNode = document.createTextNode(rest);
         clone.replaceChild(restNode, textNode);
         clone.insertBefore(span, restNode);
@@ -907,7 +1041,7 @@ async function inlinePseudoElements(source, clone, options) {
       pseudoEl.style.verticalAlign = "middle";
       const snapshot = snapshotComputedStyle(style);
       const key = getStyleKey(snapshot, "span", options);
-      cache.preStyleMap.set(pseudoEl, key);
+      styleMap.set(pseudoEl, key);
       if (isIconFont2 && cleanContent.length === 1) {
         const { dataUrl, width: width2, height: height2 } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
         const imgEl = document.createElement("img");
@@ -956,7 +1090,7 @@ async function inlinePseudoElements(source, clone, options) {
   const sChildren = Array.from(source.children);
   const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
   for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-    await inlinePseudoElements(sChildren[i], cChildren[i], options);
+    await inlinePseudoElements(sChildren[i], cChildren[i], styleMap, styleCache, options);
   }
 }
 
@@ -1012,6 +1146,9 @@ function inlineExternalDefsAndSymbols(rootElement) {
 
 // src/core/prepare.js
 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;
   let classCSS = "";
   stabilizeLayout(element);
@@ -1021,20 +1158,21 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     console.warn("inlineExternal defs or symbol failed:", e);
   }
   try {
-    clone = deepClone(element, compress, options, element);
+    clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
   } catch (e) {
     console.warn("deepClone failed:", e);
     throw e;
   }
   try {
-    await inlinePseudoElements(element, clone, compress, embedFonts, options.useProxy);
+    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
+  await resolveBlobUrlsInTree(clone);
   if (compress) {
-    const keyToClass = generateCSSClasses();
+    const keyToClass = generateCSSClasses(styleMap);
     classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
-    for (const [node, key] of cache.preStyleMap.entries()) {
+    for (const [node, key] of styleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
         node.setAttribute("style", key.replace(/;/g, "; "));
@@ -1051,12 +1189,12 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       }
     }
   } else {
-    for (const [node, key] of cache.preStyleMap.entries()) {
+    for (const [node, key] of styleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       node.setAttribute("style", key.replace(/;/g, "; "));
     }
   }
-  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
+  for (const [cloneNode, originalNode] of nodeMap.entries()) {
     const scrollX = originalNode.scrollLeft;
     const scrollY = originalNode.scrollTop;
     const hasScroll = scrollX || scrollY;
@@ -1075,9 +1213,9 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       cloneNode.appendChild(inner);
     }
   }
-  if (element === cache.preNodeMap.get(clone)) {
-    const computed = cache.preStyle.get(element) || window.getComputedStyle(element);
-    cache.preStyle.set(element, computed);
+  if (element === nodeMap.get(clone)) {
+    const computed = styleCache.get(element) || window.getComputedStyle(element);
+    styleCache.set(element, computed);
     const transform = stripTranslate(computed.transform);
     clone.style.margin = "0";
     clone.style.position = "static";
@@ -1090,13 +1228,13 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     clone.style.clear = "none";
     clone.style.transform = transform || "";
   }
-  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
+  for (const [cloneNode, originalNode] of nodeMap.entries()) {
     if (originalNode.tagName === "PRE") {
       cloneNode.style.marginTop = "0";
       cloneNode.style.marginBlockStart = "0";
     }
   }
-  return { clone, classCSS };
+  return { clone, classCSS, styleCache };
 }
 function stabilizeLayout(element) {
   const style = getComputedStyle(element);
@@ -1110,11 +1248,140 @@ function stabilizeLayout(element) {
     element.style.border = `${outlineWidth} solid transparent`;
   }
 }
+var _blobToDataUrlCache = /* @__PURE__ */ new Map();
+async function blobUrlToDataUrl(blobUrl) {
+  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+  const res = await fetch(blobUrl);
+  if (!res.ok) throw new Error(`[SnapDOM] HTTP ${res.status} on blob fetch (${blobUrl})`);
+  const blob = await res.blob();
+  const dataUrl = await new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onloadend = () => {
+      const v = fr.result;
+      if (typeof v === "string" && v.startsWith("data:")) resolve(v);
+      else reject(new Error("[SnapDOM] Invalid data URL from blob"));
+    };
+    fr.onerror = () => reject(new Error("[SnapDOM] FileReader error"));
+    fr.readAsDataURL(blob);
+  });
+  _blobToDataUrlCache.set(blobUrl, dataUrl);
+  return dataUrl;
+}
+var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
+async function replaceBlobUrlsInCssText(cssText) {
+  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
+  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
+  if (uniques.length === 0) return cssText;
+  let out = cssText;
+  for (const u of uniques) {
+    try {
+      const d = await blobUrlToDataUrl(u);
+      out = out.split(u).join(d);
+    } catch {
+    }
+  }
+  return out;
+}
+function isBlobUrl(u) {
+  return typeof u === "string" && u.startsWith("blob:");
+}
+function parseSrcset(srcset) {
+  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
+    const m = item.match(/^(\S+)(\s+.+)?$/);
+    return m ? { url: m[1], desc: m[2] || "" } : null;
+  }).filter(Boolean);
+}
+function stringifySrcset(parts) {
+  return parts.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
+}
+async function resolveBlobUrlsInTree(root) {
+  if (!root) return;
+  const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
+  for (const img of imgs) {
+    try {
+      const srcAttr = img.getAttribute("src");
+      const effective = srcAttr || img.currentSrc || "";
+      if (isBlobUrl(effective)) {
+        const data = await blobUrlToDataUrl(effective);
+        img.setAttribute("src", data);
+      }
+      const srcset = img.getAttribute("srcset");
+      if (srcset && srcset.includes("blob:")) {
+        const parts = parseSrcset(srcset);
+        let changed = false;
+        for (const p of parts) {
+          if (isBlobUrl(p.url)) {
+            try {
+              p.url = await blobUrlToDataUrl(p.url);
+              changed = true;
+            } catch {
+            }
+          }
+        }
+        if (changed) img.setAttribute("srcset", stringifySrcset(parts));
+      }
+    } catch {
+    }
+  }
+  const svgImages = root.querySelectorAll ? root.querySelectorAll("image") : [];
+  for (const node of svgImages) {
+    try {
+      const XLINK_NS = "http://www.w3.org/1999/xlink";
+      const href = node.getAttribute("href") || node.getAttributeNS?.(XLINK_NS, "href");
+      if (isBlobUrl(href)) {
+        const d = await blobUrlToDataUrl(href);
+        node.setAttribute("href", d);
+        node.removeAttributeNS?.(XLINK_NS, "href");
+      }
+    } catch {
+    }
+  }
+  const styled = root.querySelectorAll ? root.querySelectorAll("[style*='blob:']") : [];
+  for (const el of styled) {
+    try {
+      const styleText = el.getAttribute("style");
+      if (styleText && styleText.includes("blob:")) {
+        const replaced = await replaceBlobUrlsInCssText(styleText);
+        el.setAttribute("style", replaced);
+      }
+    } catch {
+    }
+  }
+  const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
+  for (const s of styleTags) {
+    try {
+      const css = s.textContent || "";
+      if (css.includes("blob:")) {
+        s.textContent = await replaceBlobUrlsInCssText(css);
+      }
+    } catch {
+    }
+  }
+  const urlAttrs = ["poster"];
+  for (const attr of urlAttrs) {
+    const nodes = root.querySelectorAll ? root.querySelectorAll(`[${attr}^='blob:']`) : [];
+    for (const n of nodes) {
+      try {
+        const u = n.getAttribute(attr);
+        if (isBlobUrl(u)) {
+          n.setAttribute(attr, await blobUrlToDataUrl(u));
+        }
+      } catch {
+      }
+    }
+  }
+}
 
 // src/modules/images.js
 async function inlineImages(clone, options = {}) {
   const imgs = Array.from(clone.querySelectorAll("img"));
   const processImg = async (img) => {
+    if (!img.getAttribute("src")) {
+      const eff = img.currentSrc || img.src || "";
+      if (eff) img.setAttribute("src", eff);
+    }
+    img.removeAttribute("srcset");
+    img.removeAttribute("sizes");
     const src = img.src;
     try {
       const dataUrl = await fetchImage(src, { useProxy: options.useProxy });
@@ -1135,7 +1402,7 @@ async function inlineImages(clone, options = {}) {
 }
 
 // src/modules/background.js
-async function inlineBackgroundImages(source, clone, options = {}) {
+async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
   const queue = [[source, clone]];
   const imageProps = [
     "background-image",
@@ -1155,8 +1422,8 @@ async function inlineBackgroundImages(source, clone, options = {}) {
   ];
   while (queue.length) {
     const [srcNode, cloneNode] = queue.shift();
-    const style = cache.preStyle.get(srcNode) || getStyle(srcNode);
-    if (!cache.preStyle.has(srcNode)) cache.preStyle.set(srcNode, style);
+    const style = styleCache.get(srcNode) || getStyle(srcNode);
+    if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
     const hasBorderImage = (() => {
       const bi = style.getPropertyValue("border-image");
       const bis = style.getPropertyValue("border-image-source");
@@ -1192,13 +1459,13 @@ async function inlineBackgroundImages(source, clone, options = {}) {
 async function captureDOM(element, options = {}) {
   if (!element) throw new Error("Element cannot be null or undefined");
   cache.reset();
-  const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "" } = options;
-  let clone, classCSS;
+  const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "", localFonts = [] } = options;
+  let clone, classCSS, styleCache;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS } = await prepareClone(element, compress, embedFonts, options));
+  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -1207,14 +1474,14 @@ async function captureDOM(element, options = {}) {
   });
   await new Promise((resolve) => {
     idle(async () => {
-      await inlineBackgroundImages(element, clone, options);
+      await inlineBackgroundImages(element, clone, styleCache, options);
       resolve();
     }, { fast });
   });
   if (embedFonts) {
     await new Promise((resolve) => {
       idle(async () => {
-        fontsCSS = await embedCustomFonts();
+        fontsCSS = await embedCustomFonts({ localFonts, useProxy });
         resolve();
       }, { fast });
     });
@@ -1449,12 +1716,21 @@ snapdom.download = async (el, options = {}) => {
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {
-  const { embedFonts = true, reset = false } = options;
+  const { embedFonts = true, reset = false, useProxy } = options;
   if (reset) {
-    cache.reset();
+    cache.image.clear();
+    cache.background.clear();
+    cache.resource.clear();
+    cache.defaultStyle.clear();
+    cache.baseStyle.clear();
+    cache.font.clear();
+    cache.computedStyle = /* @__PURE__ */ new WeakMap();
     return;
   }
-  await document.fonts.ready;
+  try {
+    await document.fonts.ready;
+  } catch {
+  }
   precacheCommonTags();
   let imgEls = [], allEls = [];
   if (root?.querySelectorAll) {
@@ -1463,33 +1739,41 @@ async function preCache(root = document, options = {}) {
   }
   const promises = [];
   for (const img of imgEls) {
-    const src = img.src;
+    const src = img?.src;
+    if (!src) continue;
     if (!cache.image.has(src)) {
-      promises.push(
-        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => cache.image.set(src, dataURL)).catch(() => {
-        })
-      );
+      const p = Promise.resolve().then(() => fetchImage(src, { useProxy })).then((dataURL) => {
+        cache.image.set(src, dataURL);
+      }).catch(() => {
+      });
+      promises.push(p);
     }
   }
   for (const el of allEls) {
-    const bg = getStyle(el).backgroundImage;
+    let bg = "";
+    try {
+      bg = getStyle(el).backgroundImage;
+    } catch {
+    }
     if (bg && bg !== "none") {
       const bgSplits = splitBackgroundImage(bg);
       for (const entry of bgSplits) {
-        const isUrl = entry.startsWith("url(");
-        if (isUrl) {
-          promises.push(
-            inlineSingleBackgroundEntry(entry, options).catch(() => {
-            })
-          );
+        if (entry.startsWith("url(")) {
+          const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy })).catch(() => {
+          });
+          promises.push(p);
         }
       }
     }
   }
   if (embedFonts) {
-    await embedCustomFonts({ preCached: true });
+    try {
+      await embedCustomFonts({ preCached: true, localFonts: options.localFonts, useProxy: options.useProxy });
+    } catch {
+    }
+    ;
   }
-  await Promise.all(promises);
+  await Promise.allSettled(promises);
 }
 export {
   preCache,