@zumer/snapdom 1.9.8 → 1.9.9

package/dist/snapdom.js

@@ -1,13 +1,15 @@
 
 /*
 * snapdom
-* v.1.9.8
+* v.1.9.9
 * Author Juan Martin Muda
 * License MIT
 **/
 
 (() => {
   var __defProp = Object.defineProperty;
+  var __defProps = Object.defineProperties;
+  var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -23,6 +25,7 @@
       }
     return a;
   };
+  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   var __objRest = (source, exclude) => {
     var target = {};
     for (var prop in source)
@@ -67,18 +70,10 @@
     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
@@ -212,8 +207,8 @@
     }
     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) {
@@ -285,7 +280,29 @@
     if (url.startsWith("#")) return null;
     return url;
   }
-  function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
+  function fetchResource(_0) {
+    return __async(this, arguments, function* (url, { useProxy = "" } = {}) {
+      function doFetch(u) {
+        return __async(this, null, function* () {
+          const res = yield fetch(u);
+          if (!res.ok) throw new Error(`[snapdom] Failed to fetch resource: ${u}`);
+          return res;
+        });
+      }
+      try {
+        return yield 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);
@@ -294,107 +311,157 @@
         return "anonymous";
       }
     }
-    function fetchWithFallback(url) {
-      return __async(this, null, function* () {
-        const fetchBlobAsDataURL = (fetchUrl) => fetch(fetchUrl, {
+    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 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) {
-              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");
-          }
+        }).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);
+          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(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)}`;
-          cache.image.set(src, encoded);
-          return encoded;
-        } catch (e) {
-          return fetchWithFallback(src);
+    if (/\.svg(\?.*)?$/i.test(src)) {
+      const p2 = (() => __async(null, null, function* () {
+        const direct = yield (() => __async(null, null, function* () {
+          try {
+            const res = yield fetch(src, {
+              mode: "cors",
+              credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
+            });
+            if (!res.ok) return fail(new Error("HTTP " + res.status));
+            const svgText = yield res.text();
+            return ok(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`);
+          } catch (e) {
+            return fail(e);
+          }
+        }))();
+        if (direct.ok) {
+          cache.image.set(src, direct.data);
+          return direct.data;
         }
+        const via = yield 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;
     }
-    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(null, null, function* () {
+    const p = new Promise((resolve, reject) => {
+      let finished = false;
+      const img = new Image();
+      const finish = (fn) => (arg) => {
+        if (finished) return;
+        finished = true;
         clearTimeout(timeoutId);
-        try {
-          yield 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 (e) {
+        img.onload = img.onerror = null;
+        fn(arg);
+      };
+      const onSuccess = (d) => {
+        cache.image.set(src, d);
+        resolve(d);
+      };
+      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 fallbackDataURL = yield fetchWithFallback(src);
-            cache.image.set(src, fallbackDataURL);
-            resolve(fallbackDataURL);
-          } catch (e2) {
-            reject(e2);
+            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 (e) {
+            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);
+          });
+        });
       });
-      image.onerror = () => __async(null, null, function* () {
-        clearTimeout(timeoutId);
-        console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
-        try {
-          const fallbackDataURL = yield fetchWithFallback(src);
-          cache.image.set(src, fallbackDataURL);
-          resolve(fallbackDataURL);
-        } catch (e) {
-          reject(e);
-        }
+      img.onerror = finish(() => {
+        fetchWithFallbackOnceSafe(src).then((r) => {
+          if (r.ok) onSuccess(r.data);
+          else onFinalError(r.error);
+        });
       });
-      image.src = src;
+      img.src = src;
     });
+    _inflight.set(src, p);
+    p.finally(() => _inflight.delete(src));
+    p.catch(() => {
+    });
+    return p;
   }
   function snapshotComputedStyle(style) {
     const snap = {};
@@ -451,6 +518,8 @@
   }
 
   // src/modules/styles.js
+  var snapshotCache = /* @__PURE__ */ new WeakMap();
+  var snapshotKeyCache = /* @__PURE__ */ new Map();
   function snapshotComputedStyleFull(style) {
     const result = {};
     const computedVisibility = style.getPropertyValue("visibility");
@@ -467,31 +536,43 @@
     }
     return result;
   }
-  function inlineAllStyles(source, clone, compress) {
+  function inlineAllStyles(source, clone, styleMap, cache2, compress) {
     var _a;
     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 = ((_a = source.tagName) == null ? void 0 : _a.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 (e) {
+    }
+  }
+  function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
     var _a, _b;
     if (!node) throw new Error("Invalid node");
     const clonedAssignedNodes = /* @__PURE__ */ new Set();
@@ -541,8 +622,8 @@
     }
     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;`;
@@ -555,14 +636,17 @@
       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;
@@ -587,7 +671,7 @@
     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) {
@@ -595,8 +679,7 @@
           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);
             }
           }
         }
@@ -606,12 +689,11 @@
           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);
@@ -622,14 +704,14 @@
       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) {
@@ -737,7 +819,7 @@
     });
   }
   function embedCustomFonts() {
-    return __async(this, arguments, function* ({ preCached = false } = {}) {
+    return __async(this, arguments, function* ({ preCached = false, localFonts = [], useProxy = "" } = {}) {
       if (cache.resource.has("fonts-embed-css")) {
         if (preCached) {
           const style = document.createElement("style");
@@ -747,6 +829,15 @@
         }
         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 (e) {
+      }
       const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
       const styleImports = [];
       for (const styleTag of document.querySelectorAll("style")) {
@@ -765,26 +856,48 @@
       let finalCSS = "";
       for (const link of links) {
         try {
-          const res = yield fetch(link.href);
+          const res = yield fetchResource(link.href, { useProxy });
           const cssText = yield res.text();
           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* () {
+          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 = yield fetch(url);
+                const fontRes = yield fetchResource(url, { useProxy });
                 const blob = yield fontRes.blob();
                 const b64 = yield new Promise((resolve) => {
                   const reader = new FileReader();
@@ -793,16 +906,12 @@
                 });
                 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) {
@@ -817,14 +926,18 @@
                 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) {
@@ -842,7 +955,7 @@
                   }
                   if (cache.font.has(url)) continue;
                   try {
-                    const res = yield fetch(url);
+                    const res = yield fetchResource(url, { useProxy });
                     const blob = yield res.blob();
                     const b64 = yield new Promise((resolve) => {
                       const reader = new FileReader();
@@ -856,7 +969,7 @@
                     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};}`;
               }
             }
           }
@@ -874,7 +987,7 @@
               cache.font.add(font._snapdomSrc);
             } else if (!cache.font.has(font._snapdomSrc)) {
               try {
-                const res = yield fetch(font._snapdomSrc);
+                const res = yield fetchResource(font._snapdomSrc, { useProxy });
                 const blob = yield res.blob();
                 b64 = yield new Promise((resolve) => {
                   const reader = new FileReader();
@@ -892,6 +1005,32 @@
           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 = yield fetchResource(src, { useProxy });
+            const blob = yield res.blob();
+            b64 = yield 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) {
@@ -906,7 +1045,7 @@
   }
 
   // src/modules/pseudo.js
-  function inlinePseudoElements(source, clone, options) {
+  function inlinePseudoElements(source, clone, styleMap, styleCache, options) {
     return __async(this, null, function* () {
       var _a;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
@@ -937,7 +1076,7 @@
             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);
@@ -971,7 +1110,7 @@
           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 } = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
             const imgEl = document.createElement("img");
@@ -1020,7 +1159,7 @@
       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++) {
-        yield inlinePseudoElements(sChildren[i], cChildren[i], options);
+        yield inlinePseudoElements(sChildren[i], cChildren[i], styleMap, styleCache, options);
       }
     });
   }
@@ -1079,6 +1218,9 @@
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, compress = false, embedFonts = false, options = {}) {
       var _a, _b;
+      const styleMap = /* @__PURE__ */ new Map();
+      const styleCache = /* @__PURE__ */ new WeakMap();
+      const nodeMap = /* @__PURE__ */ new Map();
       let clone;
       let classCSS = "";
       stabilizeLayout(element);
@@ -1088,20 +1230,21 @@
         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 {
-        yield inlinePseudoElements(element, clone, compress, embedFonts, options.useProxy);
+        yield inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
       } catch (e) {
         console.warn("inlinePseudoElements failed:", e);
       }
+      yield 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, "; "));
@@ -1118,12 +1261,12 @@
           }
         }
       } 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;
@@ -1142,9 +1285,9 @@
           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";
@@ -1157,13 +1300,13 @@
         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) {
@@ -1178,12 +1321,148 @@
       element.style.border = `${outlineWidth} solid transparent`;
     }
   }
+  var _blobToDataUrlCache = /* @__PURE__ */ new Map();
+  function blobUrlToDataUrl(blobUrl) {
+    return __async(this, null, function* () {
+      if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+      const res = yield fetch(blobUrl);
+      if (!res.ok) throw new Error(`[SnapDOM] HTTP ${res.status} on blob fetch (${blobUrl})`);
+      const blob = yield res.blob();
+      const dataUrl = yield 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;
+  function replaceBlobUrlsInCssText(cssText) {
+    return __async(this, null, function* () {
+      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 = yield blobUrlToDataUrl(u);
+          out = out.split(u).join(d);
+        } catch (e) {
+        }
+      }
+      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(", ");
+  }
+  function resolveBlobUrlsInTree(root) {
+    return __async(this, null, function* () {
+      var _a, _b;
+      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 = yield 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 = yield blobUrlToDataUrl(p.url);
+                  changed = true;
+                } catch (e) {
+                }
+              }
+            }
+            if (changed) img.setAttribute("srcset", stringifySrcset(parts));
+          }
+        } catch (e) {
+        }
+      }
+      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") || ((_a = node.getAttributeNS) == null ? void 0 : _a.call(node, XLINK_NS, "href"));
+          if (isBlobUrl(href)) {
+            const d = yield blobUrlToDataUrl(href);
+            node.setAttribute("href", d);
+            (_b = node.removeAttributeNS) == null ? void 0 : _b.call(node, XLINK_NS, "href");
+          }
+        } catch (e) {
+        }
+      }
+      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 = yield replaceBlobUrlsInCssText(styleText);
+            el.setAttribute("style", replaced);
+          }
+        } catch (e) {
+        }
+      }
+      const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
+      for (const s of styleTags) {
+        try {
+          const css = s.textContent || "";
+          if (css.includes("blob:")) {
+            s.textContent = yield replaceBlobUrlsInCssText(css);
+          }
+        } catch (e) {
+        }
+      }
+      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, yield blobUrlToDataUrl(u));
+            }
+          } catch (e) {
+          }
+        }
+      }
+    });
+  }
 
   // src/modules/images.js
   function inlineImages(_0) {
     return __async(this, arguments, function* (clone, options = {}) {
       const imgs = Array.from(clone.querySelectorAll("img"));
       const processImg = (img) => __async(null, null, function* () {
+        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 = yield fetchImage(src, { useProxy: options.useProxy });
@@ -1205,8 +1484,8 @@
   }
 
   // src/modules/background.js
-  function inlineBackgroundImages(_0, _1) {
-    return __async(this, arguments, function* (source, clone, options = {}) {
+  function inlineBackgroundImages(_0, _1, _2) {
+    return __async(this, arguments, function* (source, clone, styleCache, options = {}) {
       const queue = [[source, clone]];
       const imageProps = [
         "background-image",
@@ -1226,8 +1505,8 @@
       ];
       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");
@@ -1265,13 +1544,13 @@
     return __async(this, arguments, function* (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 } = yield prepareClone(element, compress, embedFonts, options));
+      ({ clone, classCSS, styleCache } = yield prepareClone(element, compress, embedFonts, options));
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
           yield inlineImages(clone, options);
@@ -1280,14 +1559,14 @@
       });
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
-          yield inlineBackgroundImages(element, clone, options);
+          yield inlineBackgroundImages(element, clone, styleCache, options);
           resolve();
         }), { fast });
       });
       if (embedFonts) {
         yield new Promise((resolve) => {
           idle(() => __async(null, null, function* () {
-            fontsCSS = yield embedCustomFonts();
+            fontsCSS = yield embedCustomFonts({ localFonts, useProxy });
             resolve();
           }), { fast });
         });
@@ -1559,12 +1838,21 @@
   // src/api/preCache.js
   function preCache() {
     return __async(this, arguments, function* (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;
       }
-      yield document.fonts.ready;
+      try {
+        yield document.fonts.ready;
+      } catch (e) {
+      }
       precacheCommonTags();
       let imgEls = [], allEls = [];
       if (root == null ? void 0 : root.querySelectorAll) {
@@ -1573,33 +1861,41 @@
       }
       const promises = [];
       for (const img of imgEls) {
-        const src = img.src;
+        const src = img == null ? void 0 : 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 (e) {
+        }
         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, __spreadProps(__spreadValues({}, options), { useProxy }))).catch(() => {
+              });
+              promises.push(p);
             }
           }
         }
       }
       if (embedFonts) {
-        yield embedCustomFonts({ preCached: true });
+        try {
+          yield embedCustomFonts({ preCached: true, localFonts: options.localFonts, useProxy: options.useProxy });
+        } catch (e) {
+        }
+        ;
       }
-      yield Promise.all(promises);
+      yield Promise.allSettled(promises);
     });
   }