@zumer/snapdom 1.9.7 → 1.9.9

package/dist/snapdom.js

@@ -1,13 +1,15 @@
 
 /*
 * snapdom
-* v.1.9.7
+* 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
@@ -130,7 +125,7 @@
     if (cache.defaultStyle.has(tagName)) {
       return cache.defaultStyle.get(tagName);
     }
-    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
+    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template", "defs", "symbol", "title", "metadata", "desc"]);
     if (skipTags.has(tagName)) {
       const empty = {};
       cache.defaultStyle.set(tagName, empty);
@@ -160,10 +155,14 @@
     cache.defaultStyle.set(tagName, defaults);
     return defaults;
   }
+  var IGNORED_PROPS = /* @__PURE__ */ new Set([
+    "-webkit-locale"
+  ]);
   function getStyleKey(snapshot, tagName, compress = false) {
     const entries = [];
     const defaultStyles = getDefaultStyleForTag(tagName);
     for (let [prop, value] of Object.entries(snapshot)) {
+      if (IGNORED_PROPS.has(prop)) continue;
       if (!compress) {
         if (value) {
           entries.push(`${prop}:${value}`);
@@ -208,11 +207,12 @@
     }
     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) {
+      if (!key.trim()) continue;
       classMap.set(key, `c${counter++}`);
     }
     return classMap;
@@ -280,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);
@@ -289,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 = {};
@@ -446,8 +518,11 @@
   }
 
   // src/modules/styles.js
+  var snapshotCache = /* @__PURE__ */ new WeakMap();
+  var snapshotKeyCache = /* @__PURE__ */ new Map();
   function snapshotComputedStyleFull(style) {
     const result = {};
+    const computedVisibility = style.getPropertyValue("visibility");
     for (let i = 0; i < style.length; i++) {
       const prop = style[i];
       let val = style.getPropertyValue(prop);
@@ -456,33 +531,48 @@
       }
       result[prop] = val;
     }
+    if (computedVisibility === "hidden") {
+      result.opacity = "0";
+    }
     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();
@@ -532,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;`;
@@ -546,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;
@@ -578,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) {
@@ -586,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);
             }
           }
         }
@@ -597,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);
@@ -613,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) {
@@ -678,25 +769,38 @@
     return __async(this, null, function* () {
       fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
       const dpr = window.devicePixelRatio || 1;
-      const tempCanvas = document.createElement("canvas");
-      const tempCtx = tempCanvas.getContext("2d");
-      tempCtx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
-      const metrics = tempCtx.measureText(unicodeChar);
-      const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.8;
-      const descent = metrics.actualBoundingBoxDescent || fontSize * 0.2;
-      const height = ascent + descent;
-      const width = metrics.width;
+      yield document.fonts.ready;
+      const span = document.createElement("span");
+      span.textContent = unicodeChar;
+      span.style.position = "absolute";
+      span.style.visibility = "hidden";
+      span.style.fontFamily = `"${fontFamily}"`;
+      span.style.fontWeight = fontWeight || "normal";
+      span.style.fontSize = `${fontSize}px`;
+      span.style.lineHeight = "1";
+      span.style.whiteSpace = "nowrap";
+      span.style.padding = "0";
+      span.style.margin = "0";
+      document.body.appendChild(span);
+      const rect = span.getBoundingClientRect();
+      const width = Math.ceil(rect.width);
+      const height = Math.ceil(rect.height);
+      document.body.removeChild(span);
       const canvas = document.createElement("canvas");
-      canvas.width = Math.ceil(width * dpr);
-      canvas.height = Math.ceil(height * dpr);
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
       const ctx = canvas.getContext("2d");
       ctx.scale(dpr, dpr);
-      ctx.font = tempCtx.font;
+      ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
       ctx.textAlign = "left";
-      ctx.textBaseline = "alphabetic";
+      ctx.textBaseline = "top";
       ctx.fillStyle = color;
-      ctx.fillText(unicodeChar, 0, ascent);
-      return canvas.toDataURL();
+      ctx.fillText(unicodeChar, 0, 0);
+      return {
+        dataUrl: canvas.toDataURL(),
+        width,
+        height
+      };
     });
   }
   function isStylesheetLoaded(href) {
@@ -715,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");
@@ -725,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")) {
@@ -743,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();
@@ -771,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) {
@@ -795,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) {
@@ -820,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();
@@ -834,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};}`;
               }
             }
           }
@@ -852,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();
@@ -870,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) {
@@ -884,19 +1045,25 @@
   }
 
   // src/modules/pseudo.js
-  function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
+  function inlinePseudoElements(source, clone, styleMap, styleCache, options) {
     return __async(this, null, function* () {
+      var _a;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
         try {
           const style = getStyle(source, pseudo);
           if (!style || typeof style[Symbol.iterator] !== "function") continue;
+          const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
+          if (isEmptyPseudo) continue;
           if (pseudo === "::first-letter") {
             const normal = getComputedStyle(source);
             const isMeaningful = style.color !== normal.color || style.fontSize !== normal.fontSize || style.fontWeight !== normal.fontWeight;
             if (!isMeaningful) continue;
             const textNode = Array.from(clone.childNodes).find(
-              (n) => n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0
+              (n) => {
+                var _a2;
+                return n.nodeType === Node.TEXT_NODE && ((_a2 = n.textContent) == null ? void 0 : _a2.trim().length) > 0;
+              }
             );
             if (!textNode) continue;
             const text = textNode.textContent;
@@ -908,57 +1075,55 @@
             span.textContent = first;
             span.dataset.snapdomPseudo = "::first-letter";
             const snapshot2 = snapshotComputedStyle(style);
-            const key2 = getStyleKey(snapshot2, "span", compress);
-            cache.preStyleMap.set(span, key2);
+            const key2 = getStyleKey(snapshot2, "span", options);
+            styleMap.set(span, key2);
             const restNode = document.createTextNode(rest);
             clone.replaceChild(restNode, textNode);
             clone.insertBefore(span, restNode);
             continue;
           }
-          const content = style.getPropertyValue("content");
-          const bg = style.getPropertyValue("background-image");
-          const bgColor = style.getPropertyValue("background-color");
-          const fontFamily = style.getPropertyValue("font-family");
-          const fontSize = parseInt(style.getPropertyValue("font-size")) || 32;
-          const fontWeight = parseInt(style.getPropertyValue("font-weight")) || false;
-          const color = style.getPropertyValue("color") || "#000";
-          const display = style.getPropertyValue("display");
-          const width = parseFloat(style.getPropertyValue("width"));
-          const height = parseFloat(style.getPropertyValue("height"));
-          const borderStyle = style.getPropertyValue("border-style");
-          const transform = style.getPropertyValue("transform");
+          const content = style.content;
+          const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+          const bg = style.backgroundImage;
+          const bgColor = style.backgroundColor;
+          const fontFamily = style.fontFamily;
+          const fontSize = parseInt(style.fontSize) || 32;
+          const fontWeight = parseInt(style.fontWeight) || false;
+          const color = style.color || "#000";
+          const display = style.display;
+          const width = parseFloat(style.width);
+          const height = parseFloat(style.height);
+          const borderStyle = style.borderStyle;
+          const borderWidth = parseFloat(style.borderWidth);
+          const transform = style.transform;
           const isIconFont2 = isIconFont(fontFamily);
-          let cleanContent;
-          if (/counter\s*\(|counters\s*\(/.test(content)) {
-            cleanContent = "- ";
-          } else {
-            cleanContent = parseContent(content);
-          }
-          const hasContent = content !== "none";
-          const hasExplicitContent = hasContent && cleanContent !== "";
+          const hasExplicitContent = content !== "none" && cleanContent !== "";
           const hasBg = bg && bg !== "none";
           const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
           const hasBox = display !== "inline" && (width > 0 || height > 0);
-          const hasBorder = borderStyle && borderStyle !== "none";
+          const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
           const hasTransform = transform && transform !== "none";
           const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
           if (!shouldRender) continue;
           const pseudoEl = document.createElement("span");
           pseudoEl.dataset.snapdomPseudo = pseudo;
+          pseudoEl.style.verticalAlign = "middle";
           const snapshot = snapshotComputedStyle(style);
-          const key = getStyleKey(snapshot, "span", compress);
-          cache.preStyleMap.set(pseudoEl, key);
+          const key = getStyleKey(snapshot, "span", options);
+          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");
-            imgEl.src = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
-            imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
+            imgEl.src = dataUrl;
+            imgEl.style = `height:${fontSize}px;width:${width2 / height2 * fontSize}px;object-fit:contain;`;
             pseudoEl.appendChild(imgEl);
+            clone.dataset.snapdomHasIcon = "true";
           } else if (cleanContent.startsWith("url(")) {
             const rawUrl = extractURL(cleanContent);
-            if (rawUrl && rawUrl.trim() !== "") {
+            if (rawUrl == null ? void 0 : rawUrl.trim()) {
               try {
                 const imgEl = document.createElement("img");
-                const dataUrl = yield fetchImage(safeEncodeURI(rawUrl, { useProxy }));
+                const dataUrl = yield fetchImage(safeEncodeURI(rawUrl), options);
                 imgEl.src = dataUrl;
                 imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
                 pseudoEl.appendChild(imgEl);
@@ -972,19 +1137,21 @@
           if (hasBg) {
             try {
               const bgSplits = splitBackgroundImage(bg);
-              const newBgParts = yield Promise.all(
-                bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
-              );
+              const newBgParts = yield Promise.all(bgSplits.map(inlineSingleBackgroundEntry));
               pseudoEl.style.backgroundImage = newBgParts.join(", ");
             } catch (e) {
               console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
             }
           }
           if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-          const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
+          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_a = pseudoEl.textContent) == null ? void 0 : _a.trim()) !== "";
           const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
           if (!hasVisibleBox) continue;
-          pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
+          if (pseudo === "::before") {
+            clone.insertBefore(pseudoEl, clone.firstChild);
+          } else {
+            clone.appendChild(pseudoEl);
+          }
         } catch (e) {
           console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
         }
@@ -992,87 +1159,114 @@
       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],
-          compress,
-          embedFonts,
-          useProxy
-        );
+        yield inlinePseudoElements(sChildren[i], cChildren[i], styleMap, styleCache, options);
       }
     });
   }
 
   // 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;
+  function inlineExternalDefsAndSymbols(rootElement) {
+    if (!rootElement) return;
+    const usedIds = /* @__PURE__ */ new Set();
+    rootElement.querySelectorAll("use").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 allGlobal = Array.from(document.querySelectorAll("svg > symbol, svg > defs"));
+    const globalSymbols = allGlobal.filter((el) => el.tagName.toLowerCase() === "symbol");
+    const globalDefs = allGlobal.filter((el) => el.tagName.toLowerCase() === "defs");
+    let container = rootElement.querySelector("svg.inline-defs-container");
+    if (!container) {
+      container = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      container.setAttribute("aria-hidden", "true");
+      container.setAttribute("style", "position: absolute; width: 0; height: 0; overflow: hidden;");
+      container.classList.add("inline-defs-container");
+      rootElement.insertBefore(container, rootElement.firstChild);
+    }
+    const existingIds = /* @__PURE__ */ new Set();
+    rootElement.querySelectorAll("symbol[id], defs > *[id]").forEach((el) => {
+      existingIds.add(el.id);
+    });
+    usedIds.forEach((id) => {
+      if (existingIds.has(id)) return;
+      const symbol = globalSymbols.find((sym) => sym.id === id);
+      if (symbol) {
+        container.appendChild(symbol.cloneNode(true));
+        existingIds.add(id);
+        return;
+      }
+      for (const defs of globalDefs) {
+        const defEl = defs.querySelector(`#${CSS.escape(id)}`);
+        if (defEl) {
+          let defsContainer = container.querySelector("defs");
+          if (!defsContainer) {
+            defsContainer = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+            container.appendChild(defsContainer);
           }
+          defsContainer.appendChild(defEl.cloneNode(true));
+          existingIds.add(id);
+          break;
         }
       }
-      if (defs.childNodes.length) {
-        svg.insertBefore(defs, svg.firstChild);
-      }
     });
   }
 
   // src/core/prepare.js
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, compress = false, embedFonts = false, options = {}) {
-      var _a;
+      var _a, _b;
+      const styleMap = /* @__PURE__ */ new Map();
+      const styleCache = /* @__PURE__ */ new WeakMap();
+      const nodeMap = /* @__PURE__ */ new Map();
       let clone;
       let classCSS = "";
+      stabilizeLayout(element);
       try {
-        clone = deepClone(element, compress, options, element);
+        inlineExternalDefsAndSymbols(element);
       } catch (e) {
-        console.warn("deepClone failed:", e);
-        throw e;
+        console.warn("inlineExternal defs or symbol failed:", e);
       }
       try {
-        yield inlinePseudoElements(element, clone, compress, embedFonts, options.useProxy);
+        clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
       } catch (e) {
-        console.warn("inlinePseudoElements failed:", e);
+        console.warn("deepClone failed:", e);
+        throw e;
       }
       try {
-        inlineExternalDef(clone);
+        yield inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
       } catch (e) {
-        console.warn("inlineExternalDef failed:", 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, "; "));
+            continue;
+          }
           const className = keyToClass.get(key);
           if (className) node.classList.add(className);
           const bgImage = (_a = node.style) == null ? void 0 : _a.backgroundImage;
-          node.removeAttribute("style");
+          const hasIcon = (_b = node.dataset) == null ? void 0 : _b.snapdomHasIcon;
           if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+          if (hasIcon) {
+            node.style.verticalAlign = "middle";
+            node.style.display = "inline";
+          }
         }
       } 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;
@@ -1091,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";
@@ -1106,13 +1300,155 @@
         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);
+    const outlineStyle = style.outlineStyle;
+    const outlineWidth = style.outlineWidth;
+    const borderStyle = style.borderStyle;
+    const borderWidth = style.borderWidth;
+    const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+    const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+    if (outlineVisible && borderAbsent) {
+      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) {
+          }
+        }
+      }
     });
   }
 
@@ -1121,6 +1457,12 @@
     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 });
@@ -1142,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",
@@ -1153,13 +1495,27 @@
         "mask-source",
         "mask-box-image-source",
         "mask-border-source",
-        "-webkit-mask-box-image-source"
+        "-webkit-mask-box-image-source",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat"
       ];
       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");
+          return bi && bi !== "none" || bis && bis !== "none";
+        })();
         for (const prop of imageProps) {
+          if (["border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"].includes(prop) && !hasBorderImage) {
+            continue;
+          }
           const val = style.getPropertyValue(prop);
           if (!val || val === "none") continue;
           const splits = splitBackgroundImage(val);
@@ -1188,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);
@@ -1203,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 });
         });
@@ -1288,13 +1644,15 @@
   }
 
   // src/api/snapdom.js
-  function toImg(_0, _1) {
-    return __async(this, arguments, function* (url, { dpr = 1, scale = 1 }) {
+  function toImg(_0) {
+    return __async(this, arguments, function* (url, { scale = 1 } = {}) {
       const img = new Image();
       img.src = url;
       yield img.decode();
-      img.width = img.width * scale;
-      img.height = img.height * scale;
+      if (scale !== 1) {
+        img.style.width = `${img.naturalWidth * scale}px`;
+        img.style.height = `${img.naturalHeight * scale}px`;
+      }
       return img;
     });
   }
@@ -1319,8 +1677,8 @@
         if (appended) img.remove();
         throw new Error("Image failed to load or has no dimensions");
       }
-      const width = img.width * scale;
-      const height = img.height * scale;
+      const width = img.naturalWidth * scale;
+      const height = img.naturalHeight * scale;
       const canvas = document.createElement("canvas");
       canvas.width = Math.ceil(width * dpr);
       canvas.height = Math.ceil(height * dpr);
@@ -1422,20 +1780,24 @@
     });
   }
   snapdom.capture = (_0, ..._1) => __async(null, [_0, ..._1], function* (el, options = {}) {
+    var _a;
     const url = yield captureDOM(el, options);
-    const dpr = window.devicePixelRatio || 1;
+    const dpr = (_a = options.dpr) != null ? _a : window.devicePixelRatio || 1;
     const scale = options.scale || 1;
     return {
       url,
       options,
       toRaw: () => url,
-      toImg: () => toImg(url, { dpr, scale }),
-      toCanvas: () => toCanvas(url, { dpr, scale }),
-      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"),
-      download: ({ format = "png", filename = "capture", backgroundColor } = {}) => download(url, { dpr, scale, backgroundColor, format, filename })
+      toImg: (opts = {}) => toImg(url, __spreadValues({ dpr, scale }, opts)),
+      toCanvas: (opts = {}) => toCanvas(url, __spreadValues({ dpr, scale }, opts)),
+      toBlob: (opts = {}) => toBlob(url, __spreadValues({ dpr, scale }, opts)),
+      toPng: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "png"),
+      toJpg: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "jpeg"),
+      toWebp: (opts = {}) => toRasterImg(url, __spreadValues({ dpr, scale }, opts), "webp"),
+      download: (_b = {}) => {
+        var _c = _b, { format = "png", filename = "snapDOM", backgroundColor } = _c, opts = __objRest(_c, ["format", "filename", "backgroundColor"]);
+        return download(url, __spreadValues({ dpr, scale, format, filename, backgroundColor }, opts));
+      }
     };
   });
   snapdom.toRaw = (el, options) => __async(null, null, function* () {
@@ -1476,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) {
@@ -1490,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);
     });
   }