@zumer/snapdom 1.9.7 → 1.9.9

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.7
+* v.1.9.9
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -18,18 +18,10 @@ var cache = {
   font: /* @__PURE__ */ new Set(),
   snapshot: /* @__PURE__ */ new WeakMap(),
   snapshotKey: /* @__PURE__ */ new Map(),
-  preStyleMap: /* @__PURE__ */ new Map(),
-  preStyle: /* @__PURE__ */ new WeakMap(),
-  preNodeMap: /* @__PURE__ */ new Map(),
   reset: resetCache
 };
 function resetCache() {
   cache.computedStyle = /* @__PURE__ */ new WeakMap();
-  cache.snapshot = /* @__PURE__ */ new WeakMap();
-  cache.snapshotKey.clear();
-  cache.preStyleMap.clear();
-  cache.preStyle = /* @__PURE__ */ new WeakMap();
-  cache.preNodeMap.clear();
 }
 
 // src/utils/cssTools.js
@@ -81,7 +73,7 @@ function getDefaultStyleForTag(tagName) {
   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);
@@ -111,10 +103,14 @@ function getDefaultStyleForTag(tagName) {
   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}`);
@@ -159,11 +155,12 @@ function generateDedupedBaseCSS(usedTagNames) {
   }
   return css;
 }
-function generateCSSClasses() {
-  const keySet = new Set(cache.preStyleMap.values());
+function generateCSSClasses(styleMap) {
+  const keySet = new Set(styleMap.values());
   const classMap = /* @__PURE__ */ new Map();
   let counter = 1;
   for (const key of keySet) {
+    if (!key.trim()) continue;
     classMap.set(key, `c${counter++}`);
   }
   return classMap;
@@ -229,7 +226,25 @@ function extractURL(value) {
   if (url.startsWith("#")) return null;
   return url;
 }
-function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
+async function fetchResource(url, { useProxy = "" } = {}) {
+  async function doFetch(u) {
+    const res = await fetch(u);
+    if (!res.ok) throw new Error(`[snapdom] Failed to fetch resource: ${u}`);
+    return res;
+  }
+  try {
+    return await doFetch(url);
+  } catch (e) {
+    if (useProxy && typeof useProxy === "string") {
+      const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url);
+      return doFetch(proxied);
+    }
+    throw e;
+  }
+}
+var _inflight = /* @__PURE__ */ new Map();
+var _errorCache = /* @__PURE__ */ new Map();
+function fetchImage(src, { timeout = 3e3, useProxy = "", errorTTL = 8e3 } = {}) {
   function getCrossOriginMode(url) {
     try {
       const parsed = new URL(url, window.location.href);
@@ -238,105 +253,157 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
       return "anonymous";
     }
   }
-  async function fetchWithFallback(url) {
-    const fetchBlobAsDataURL = (fetchUrl) => fetch(fetchUrl, {
-      mode: "cors",
-      credentials: getCrossOriginMode(fetchUrl) === "use-credentials" ? "include" : "omit"
-    }).then((r) => r.blob()).then((blob) => new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        const base64 = reader.result;
-        if (typeof base64 !== "string" || !base64.startsWith("data:image/")) {
-          reject(new Error("Invalid image data URL"));
-          return;
-        }
-        resolve(base64);
-      };
-      reader.onerror = () => reject(new Error("FileReader error"));
-      reader.readAsDataURL(blob);
-    }));
+  const ok = (data) => ({ ok: true, data });
+  const fail = (e) => ({ ok: false, error: e instanceof Error ? e : new Error(String(e)) });
+  function fetchBlobAsDataURLSafe(fetchUrl) {
     try {
-      return await fetchBlobAsDataURL(url);
+      return fetch(fetchUrl, {
+        mode: "cors",
+        credentials: getCrossOriginMode(fetchUrl) === "use-credentials" ? "include" : "omit"
+      }).then((r) => {
+        if (!r.ok) return fail(new Error("HTTP " + r.status));
+        return r.blob().then((blob) => new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64 = reader.result;
+            if (typeof base64 !== "string" || !base64.startsWith("data:image/")) {
+              resolve(fail(new Error("Invalid image data URL")));
+            } else {
+              resolve(ok(base64));
+            }
+          };
+          reader.onerror = () => resolve(fail(new Error("FileReader error")));
+          reader.readAsDataURL(blob);
+        }));
+      }).catch((e) => fail(e));
     } catch (e) {
+      return Promise.resolve(fail(e));
+    }
+  }
+  function fetchWithFallbackOnceSafe(url) {
+    return fetchBlobAsDataURLSafe(url).then((r) => {
+      if (r.ok) return r;
       if (useProxy && typeof useProxy === "string") {
         const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url);
-        try {
-          return await fetchBlobAsDataURL(proxied);
-        } catch {
-          throw new Error("[SnapDOM - fetchImage] CORS restrictions prevented image capture (even via proxy)");
-        }
-      } else {
-        throw new Error("[SnapDOM - fetchImage] Fetch fallback failed and no proxy provided");
+        return fetchBlobAsDataURLSafe(proxied).then((r2) => {
+          if (r2.ok) return r2;
+          return fail(new Error("[SnapDOM - fetchImage] Fetch failed and no proxy provided"));
+        });
       }
-    }
+      return fail(new Error("[SnapDOM - fetchImage] Fetch failed and no proxy provided"));
+    });
   }
-  const crossOriginValue = getCrossOriginMode(src);
-  if (cache.image.has(src)) {
-    return Promise.resolve(cache.image.get(src));
+  const now = Date.now();
+  const until = _errorCache.get(src);
+  if (until && until > now) {
+    const pr = Promise.reject(new Error("[SnapDOM - fetchImage] Recently failed (cooldown)."));
+    pr.catch(() => {
+    });
+    return pr;
   }
-  const isDataURI = src.startsWith("data:image/");
-  if (isDataURI) {
+  if (_inflight.has(src)) return _inflight.get(src);
+  const crossOriginValue = getCrossOriginMode(src);
+  if (cache.image.has(src)) return Promise.resolve(cache.image.get(src));
+  if (src.startsWith("data:image/")) {
     cache.image.set(src, src);
     return Promise.resolve(src);
   }
-  const isSVG = /\.svg(\?.*)?$/i.test(src);
-  if (isSVG) {
-    return (async () => {
-      try {
-        const response = await fetch(src, {
-          mode: "cors",
-          credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
-        });
-        const svgText = await response.text();
-        const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
-        cache.image.set(src, encoded);
-        return encoded;
-      } catch {
-        return fetchWithFallback(src);
-      }
-    })();
-  }
-  return new Promise((resolve, reject) => {
-    const timeoutId = setTimeout(() => {
-      reject(new Error("[SnapDOM - fetchImage] Image load timed out"));
-    }, timeout);
-    const image = new Image();
-    image.crossOrigin = crossOriginValue;
-    image.onload = async () => {
-      clearTimeout(timeoutId);
-      try {
-        await image.decode();
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
-        const dataURL = canvas.toDataURL("image/png");
-        cache.image.set(src, dataURL);
-        resolve(dataURL);
-      } catch {
+  if (/\.svg(\?.*)?$/i.test(src)) {
+    const p2 = (async () => {
+      const direct = await (async () => {
         try {
-          const fallbackDataURL = await fetchWithFallback(src);
-          cache.image.set(src, fallbackDataURL);
-          resolve(fallbackDataURL);
+          const res = await fetch(src, {
+            mode: "cors",
+            credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
+          });
+          if (!res.ok) return fail(new Error("HTTP " + res.status));
+          const svgText = await res.text();
+          return ok(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`);
         } catch (e) {
-          reject(e);
+          return fail(e);
         }
+      })();
+      if (direct.ok) {
+        cache.image.set(src, direct.data);
+        return direct.data;
       }
-    };
-    image.onerror = async () => {
-      clearTimeout(timeoutId);
-      console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
-      try {
-        const fallbackDataURL = await fetchWithFallback(src);
-        cache.image.set(src, fallbackDataURL);
-        resolve(fallbackDataURL);
-      } catch (e) {
-        reject(e);
+      const via = await fetchWithFallbackOnceSafe(src);
+      if (via.ok) {
+        cache.image.set(src, via.data);
+        return via.data;
       }
+      _errorCache.set(src, now + errorTTL);
+      return Promise.reject(via.error);
+    })();
+    _inflight.set(src, p2);
+    p2.finally(() => _inflight.delete(src));
+    p2.catch(() => {
+    });
+    return p2;
+  }
+  const p = new Promise((resolve, reject) => {
+    let finished = false;
+    const img = new Image();
+    const finish = (fn) => (arg) => {
+      if (finished) return;
+      finished = true;
+      clearTimeout(timeoutId);
+      img.onload = img.onerror = null;
+      fn(arg);
     };
-    image.src = src;
+    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 canvas = document.createElement("canvas");
+          canvas.width = img.naturalWidth || img.width;
+          canvas.height = img.naturalHeight || img.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          onSuccess(canvas.toDataURL("image/png"));
+        } catch {
+          fetchWithFallbackOnceSafe(src).then((r) => {
+            if (r.ok) onSuccess(r.data);
+            else onFinalError(r.error);
+          });
+        }
+      }).catch(() => {
+        fetchWithFallbackOnceSafe(src).then((r) => {
+          if (r.ok) onSuccess(r.data);
+          else onFinalError(r.error);
+        });
+      });
+    });
+    img.onerror = finish(() => {
+      fetchWithFallbackOnceSafe(src).then((r) => {
+        if (r.ok) onSuccess(r.data);
+        else onFinalError(r.error);
+      });
+    });
+    img.src = src;
+  });
+  _inflight.set(src, p);
+  p.finally(() => _inflight.delete(src));
+  p.catch(() => {
   });
+  return p;
 }
 function snapshotComputedStyle(style) {
   const snap = {};
@@ -393,8 +460,11 @@ function splitBackgroundImage(bg) {
 }
 
 // src/modules/styles.js
+var snapshotCache = /* @__PURE__ */ new WeakMap();
+var snapshotKeyCache = /* @__PURE__ */ new Map();
 function snapshotComputedStyleFull(style) {
   const result = {};
+  const computedVisibility = style.getPropertyValue("visibility");
   for (let i = 0; i < style.length; i++) {
     const prop = style[i];
     let val = style.getPropertyValue(prop);
@@ -403,32 +473,47 @@ function snapshotComputedStyleFull(style) {
     }
     result[prop] = val;
   }
+  if (computedVisibility === "hidden") {
+    result.opacity = "0";
+  }
   return result;
 }
-function inlineAllStyles(source, clone, compress) {
+function inlineAllStyles(source, clone, styleMap, cache2, compress) {
   if (source.tagName === "STYLE") return;
-  if (!cache.preStyle.has(source)) {
-    cache.preStyle.set(source, getStyle(source));
+  if (!cache2.has(source)) {
+    cache2.set(source, getStyle(source));
   }
-  const style = cache.preStyle.get(source);
-  if (!cache.snapshot.has(source)) {
+  const style = cache2.get(source);
+  if (!snapshotCache.has(source)) {
     const snapshot2 = snapshotComputedStyleFull(style);
-    cache.snapshot.set(source, snapshot2);
+    snapshotCache.set(source, snapshot2);
   }
-  const snapshot = cache.snapshot.get(source);
+  const snapshot = snapshotCache.get(source);
   const hash = Object.entries(snapshot).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
-  if (cache.snapshotKey.has(hash)) {
-    cache.preStyleMap.set(clone, cache.snapshotKey.get(hash));
+  if (snapshotKeyCache.has(hash)) {
+    styleMap.set(clone, snapshotKeyCache.get(hash));
     return;
   }
   const tagName = source.tagName?.toLowerCase() || "div";
   const key = getStyleKey(snapshot, tagName, compress);
-  cache.snapshotKey.set(hash, key);
-  cache.preStyleMap.set(clone, key);
+  snapshotKeyCache.set(hash, key);
+  styleMap.set(clone, key);
 }
 
 // src/core/clone.js
-function deepClone(node, compress, options = {}, originalRoot) {
+function freezeImgSrcset(original, cloned) {
+  try {
+    const chosen = original.currentSrc || original.src || "";
+    if (!chosen) return;
+    cloned.setAttribute("src", chosen);
+    cloned.removeAttribute("srcset");
+    cloned.removeAttribute("sizes");
+    cloned.loading = "eager";
+    cloned.decoding = "sync";
+  } catch {
+  }
+}
+function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
   if (!node) throw new Error("Invalid node");
   const clonedAssignedNodes = /* @__PURE__ */ new Set();
   let pendingSelectValue = null;
@@ -477,8 +562,8 @@ function deepClone(node, compress, options = {}, originalRoot) {
   }
   if (node.getAttribute("data-capture") === "placeholder") {
     const clone2 = node.cloneNode(false);
-    cache.preNodeMap.set(clone2, node);
-    inlineAllStyles(node, clone2, compress);
+    nodeMap.set(clone2, node);
+    inlineAllStyles(node, clone2, styleMap, styleCache, compress);
     const placeholder = document.createElement("div");
     placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
     placeholder.style.cssText = `color:#666;font-size:12px;text-align:center;line-height:1.4;padding:0.5em;box-sizing:border-box;`;
@@ -491,14 +576,17 @@ function deepClone(node, compress, options = {}, originalRoot) {
     img.src = dataURL;
     img.width = node.width;
     img.height = node.height;
-    cache.preNodeMap.set(img, node);
-    inlineAllStyles(node, img, compress);
+    nodeMap.set(img, node);
+    inlineAllStyles(node, img, styleMap, styleCache, compress);
     return img;
   }
   let clone;
   try {
     clone = node.cloneNode(false);
-    cache.preNodeMap.set(clone, node);
+    nodeMap.set(clone, node);
+    if (node.tagName === "IMG") {
+      freezeImgSrcset(node, clone);
+    }
   } catch (err) {
     console.error("[Snapdom] Failed to clone node:", node, err);
     throw err;
@@ -523,7 +611,7 @@ function deepClone(node, compress, options = {}, originalRoot) {
   if (node instanceof HTMLSelectElement) {
     pendingSelectValue = node.value;
   }
-  inlineAllStyles(node, clone, compress);
+  inlineAllStyles(node, clone, styleMap, styleCache, compress);
   if (node.shadowRoot) {
     const hasSlot = Array.from(node.shadowRoot.querySelectorAll("slot")).length > 0;
     if (hasSlot) {
@@ -531,8 +619,7 @@ function deepClone(node, compress, options = {}, originalRoot) {
         if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
           const cssText = child.textContent || "";
           if (cssText.trim() && compress) {
-            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
-            cache.preStyle.set(child, cssText);
+            styleCache.set(child, cssText);
           }
         }
       }
@@ -542,12 +629,11 @@ function deepClone(node, compress, options = {}, originalRoot) {
         if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
           const cssText = child.textContent || "";
           if (cssText.trim() && compress) {
-            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
-            cache.preStyle.set(child, cssText);
+            styleCache.set(child, cssText);
           }
           continue;
         }
-        const clonedChild = deepClone(child, compress, options, originalRoot || node);
+        const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
         if (clonedChild) shadowFrag.appendChild(clonedChild);
       }
       clone.appendChild(shadowFrag);
@@ -558,14 +644,14 @@ function deepClone(node, compress, options = {}, originalRoot) {
     const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
     const fragment = document.createDocumentFragment();
     for (const child of nodesToClone) {
-      const clonedChild = deepClone(child, compress, options, originalRoot || node);
+      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
       if (clonedChild) fragment.appendChild(clonedChild);
     }
     return fragment;
   }
   for (const child of node.childNodes) {
     if (clonedAssignedNodes.has(child)) continue;
-    const clonedChild = deepClone(child, compress, options, originalRoot || node);
+    const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
     if (clonedChild) clone.appendChild(clonedChild);
   }
   if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
@@ -622,25 +708,38 @@ function isIconFont(input) {
 async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
   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;
+  await 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) {
   return Array.from(document.styleSheets).some((sheet) => sheet.href === href);
@@ -657,7 +756,7 @@ function injectLinkIfMissing(href) {
     document.head.appendChild(link);
   });
 }
-async function embedCustomFonts({ preCached = false } = {}) {
+async function embedCustomFonts({ preCached = false, localFonts = [], useProxy = "" } = {}) {
   if (cache.resource.has("fonts-embed-css")) {
     if (preCached) {
       const style = document.createElement("style");
@@ -667,6 +766,15 @@ async function embedCustomFonts({ preCached = false } = {}) {
     }
     return cache.resource.get("fonts-embed-css");
   }
+  const loadedFonts = /* @__PURE__ */ new Set();
+  try {
+    for (const f of document.fonts) {
+      if (f.status === "loaded") {
+        loadedFonts.add(`${f.family}__${f.weight || "normal"}__${f.style || "normal"}`);
+      }
+    }
+  } catch {
+  }
   const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
   const styleImports = [];
   for (const styleTag of document.querySelectorAll("style")) {
@@ -685,26 +793,48 @@ async function embedCustomFonts({ preCached = false } = {}) {
   let finalCSS = "";
   for (const link of links) {
     try {
-      const res = await fetch(link.href);
+      const res = await fetchResource(link.href, { useProxy });
       const cssText = await res.text();
       if (isIconFont(link.href) || isIconFont(cssText)) continue;
-      const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
-      const inlinedCSS = await Promise.all(
-        Array.from(cssText.matchAll(urlRegex)).map(async (match) => {
+      const faceRegex = /@font-face[^{}]*{[^}]*}/g;
+      let cssFinal = cssText;
+      for (const face of cssText.match(faceRegex) || []) {
+        const famMatch = face.match(/font-family:\s*([^;]+);/i);
+        if (!famMatch) continue;
+        const family = famMatch[1].replace(/['"]/g, "").trim();
+        const weightMatch = face.match(/font-weight:\s*([^;]+);/i);
+        const styleMatch = face.match(/font-style:\s*([^;]+);/i);
+        const weight = weightMatch ? weightMatch[1].trim() : "normal";
+        const style = styleMatch ? styleMatch[1].trim() : "normal";
+        const key = `${family}__${weight}__${style}`;
+        const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
+        const hasURL = /url\(/i.test(face);
+        const hasLocal = /local\(/i.test(face);
+        if (!hasURL && hasLocal) {
+          continue;
+        }
+        if (!loadedFonts.has(key)) {
+          cssFinal = cssFinal.replace(face, "");
+          continue;
+        }
+        let inlined = face;
+        const matches = Array.from(face.matchAll(urlRegex));
+        for (const match of matches) {
           let rawUrl = extractURL(match[0]);
-          if (!rawUrl) return null;
+          if (!rawUrl) continue;
           let url = rawUrl;
           if (!url.startsWith("http") && !url.startsWith("data:")) {
             url = new URL(url, link.href).href;
           }
-          if (isIconFont(url)) return null;
+          if (isIconFont(url)) continue;
           if (cache.resource.has(url)) {
             cache.font.add(url);
-            return { original: match[0], inlined: `url(${cache.resource.get(url)})` };
+            inlined = inlined.replace(match[0], `url(${cache.resource.get(url)})`);
+            continue;
           }
-          if (cache.font.has(url)) return null;
+          if (cache.font.has(url)) continue;
           try {
-            const fontRes = await fetch(url);
+            const fontRes = await fetchResource(url, { useProxy });
             const blob = await fontRes.blob();
             const b64 = await new Promise((resolve) => {
               const reader = new FileReader();
@@ -713,16 +843,12 @@ async function embedCustomFonts({ preCached = false } = {}) {
             });
             cache.resource.set(url, b64);
             cache.font.add(url);
-            return { original: match[0], inlined: `url(${b64})` };
+            inlined = inlined.replace(match[0], `url(${b64})`);
           } catch (e) {
             console.warn("[snapdom] Failed to fetch font resource:", url);
-            return null;
           }
-        })
-      );
-      let cssFinal = cssText;
-      for (const r of inlinedCSS) {
-        if (r) cssFinal = cssFinal.replace(r.original, r.inlined);
+        }
+        cssFinal = cssFinal.replace(face, inlined);
       }
       finalCSS += cssFinal + "\n";
     } catch (e) {
@@ -737,14 +863,18 @@ async function embedCustomFonts({ preCached = false } = {}) {
             const src = rule.style.getPropertyValue("src");
             const family = rule.style.getPropertyValue("font-family");
             if (!src || isIconFont(family)) continue;
+            const weightVal = rule.style.getPropertyValue("font-weight") || "normal";
+            const styleVal = rule.style.getPropertyValue("font-style") || "normal";
+            const key = `${family}__${weightVal}__${styleVal}`;
             const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
             const localRegex = /local\((["']?)[^)]+?\1\)/g;
             const hasURL = !!src.match(urlRegex);
             const hasLocal = !!src.match(localRegex);
             if (!hasURL && hasLocal) {
-              finalCSS += `@font-face{font-family:${family};src:${src};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
+              finalCSS += `@font-face{font-family:${family};src:${src};font-style:${styleVal};font-weight:${weightVal};}`;
               continue;
             }
+            if (!loadedFonts.has(key)) continue;
             let inlinedSrc = src;
             const matches = Array.from(src.matchAll(urlRegex));
             for (const match of matches) {
@@ -762,7 +892,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
               }
               if (cache.font.has(url)) continue;
               try {
-                const res = await fetch(url);
+                const res = await fetchResource(url, { useProxy });
                 const blob = await res.blob();
                 const b64 = await new Promise((resolve) => {
                   const reader = new FileReader();
@@ -776,7 +906,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
               }
             }
-            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
+            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleVal};font-weight:${weightVal};}`;
           }
         }
       }
@@ -794,7 +924,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
           cache.font.add(font._snapdomSrc);
         } else if (!cache.font.has(font._snapdomSrc)) {
           try {
-            const res = await fetch(font._snapdomSrc);
+            const res = await fetchResource(font._snapdomSrc, { useProxy });
             const blob = await res.blob();
             b64 = await new Promise((resolve) => {
               const reader = new FileReader();
@@ -812,6 +942,32 @@ async function embedCustomFonts({ preCached = false } = {}) {
       finalCSS += `@font-face{font-family:'${font.family}';src:url(${b64});font-style:${font.style || "normal"};font-weight:${font.weight || "normal"};}`;
     }
   }
+  for (const font of localFonts) {
+    if (!font || typeof font !== "object") continue;
+    const { family, src, weight = "normal", style = "normal" } = font;
+    if (!family || !src) continue;
+    let b64 = src;
+    if (!b64.startsWith("data:")) {
+      try {
+        const res = await fetchResource(src, { useProxy });
+        const blob = await res.blob();
+        b64 = await new Promise((resolve) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.readAsDataURL(blob);
+        });
+        cache.resource.set(src, b64);
+        cache.font.add(src);
+      } catch (e) {
+        console.warn("[snapdom] Failed to load local font:", src);
+        continue;
+      }
+    } else {
+      cache.resource.set(src, b64);
+      cache.font.add(src);
+    }
+    finalCSS += `@font-face{font-family:'${family}';src:url(${b64});font-style:${style};font-weight:${weight};}`;
+  }
   if (finalCSS) {
     cache.resource.set("fonts-embed-css", finalCSS);
     if (preCached) {
@@ -825,18 +981,20 @@ async function embedCustomFonts({ preCached = false } = {}) {
 }
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
+async function inlinePseudoElements(source, clone, styleMap, styleCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       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) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim().length > 0
         );
         if (!textNode) continue;
         const text = textNode.textContent;
@@ -848,57 +1006,55 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
         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 } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
         const imgEl = document.createElement("img");
-        imgEl.src = await 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?.trim()) {
           try {
             const imgEl = document.createElement("img");
-            const dataUrl = await fetchImage(safeEncodeURI(rawUrl, { useProxy }));
+            const dataUrl = await fetchImage(safeEncodeURI(rawUrl), options);
             imgEl.src = dataUrl;
             imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
             pseudoEl.appendChild(imgEl);
@@ -912,19 +1068,21 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
       if (hasBg) {
         try {
           const bgSplits = splitBackgroundImage(bg);
-          const newBgParts = await Promise.all(
-            bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
-          );
+          const newBgParts = await 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 || pseudoEl.textContent?.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);
     }
@@ -932,84 +1090,111 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
   const sChildren = Array.from(source.children);
   const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
   for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-    await inlinePseudoElements(
-      sChildren[i],
-      cChildren[i],
-      compress,
-      embedFonts,
-      useProxy
-    );
+    await 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
 async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
+  const styleMap = /* @__PURE__ */ new Map();
+  const styleCache = /* @__PURE__ */ new WeakMap();
+  const nodeMap = /* @__PURE__ */ new Map();
   let clone;
   let classCSS = "";
+  stabilizeLayout(element);
   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 {
-    await 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);
+    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
   } catch (e) {
-    console.warn("inlineExternalDef failed:", e);
+    console.warn("inlinePseudoElements failed:", e);
   }
+  await resolveBlobUrlsInTree(clone);
   if (compress) {
-    const keyToClass = generateCSSClasses();
+    const keyToClass = generateCSSClasses(styleMap);
     classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
-    for (const [node, key] of cache.preStyleMap.entries()) {
+    for (const [node, key] of styleMap.entries()) {
       if (node.tagName === "STYLE") continue;
+      if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
+        node.setAttribute("style", key.replace(/;/g, "; "));
+        continue;
+      }
       const className = keyToClass.get(key);
       if (className) node.classList.add(className);
       const bgImage = node.style?.backgroundImage;
-      node.removeAttribute("style");
+      const hasIcon = node.dataset?.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;
@@ -1028,9 +1213,9 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       cloneNode.appendChild(inner);
     }
   }
-  if (element === cache.preNodeMap.get(clone)) {
-    const computed = cache.preStyle.get(element) || window.getComputedStyle(element);
-    cache.preStyle.set(element, computed);
+  if (element === nodeMap.get(clone)) {
+    const computed = styleCache.get(element) || window.getComputedStyle(element);
+    styleCache.set(element, computed);
     const transform = stripTranslate(computed.transform);
     clone.style.margin = "0";
     clone.style.position = "static";
@@ -1043,19 +1228,160 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     clone.style.clear = "none";
     clone.style.transform = transform || "";
   }
-  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
+  for (const [cloneNode, originalNode] of nodeMap.entries()) {
     if (originalNode.tagName === "PRE") {
       cloneNode.style.marginTop = "0";
       cloneNode.style.marginBlockStart = "0";
     }
   }
-  return { clone, classCSS };
+  return { clone, classCSS, styleCache };
+}
+function stabilizeLayout(element) {
+  const style = getComputedStyle(element);
+  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();
+async function blobUrlToDataUrl(blobUrl) {
+  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+  const res = await fetch(blobUrl);
+  if (!res.ok) throw new Error(`[SnapDOM] HTTP ${res.status} on blob fetch (${blobUrl})`);
+  const blob = await res.blob();
+  const dataUrl = await new Promise((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onloadend = () => {
+      const v = fr.result;
+      if (typeof v === "string" && v.startsWith("data:")) resolve(v);
+      else reject(new Error("[SnapDOM] Invalid data URL from blob"));
+    };
+    fr.onerror = () => reject(new Error("[SnapDOM] FileReader error"));
+    fr.readAsDataURL(blob);
+  });
+  _blobToDataUrlCache.set(blobUrl, dataUrl);
+  return dataUrl;
+}
+var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
+async function replaceBlobUrlsInCssText(cssText) {
+  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
+  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
+  if (uniques.length === 0) return cssText;
+  let out = cssText;
+  for (const u of uniques) {
+    try {
+      const d = await blobUrlToDataUrl(u);
+      out = out.split(u).join(d);
+    } catch {
+    }
+  }
+  return out;
+}
+function isBlobUrl(u) {
+  return typeof u === "string" && u.startsWith("blob:");
+}
+function parseSrcset(srcset) {
+  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
+    const m = item.match(/^(\S+)(\s+.+)?$/);
+    return m ? { url: m[1], desc: m[2] || "" } : null;
+  }).filter(Boolean);
+}
+function stringifySrcset(parts) {
+  return parts.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
+}
+async function resolveBlobUrlsInTree(root) {
+  if (!root) return;
+  const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
+  for (const img of imgs) {
+    try {
+      const srcAttr = img.getAttribute("src");
+      const effective = srcAttr || img.currentSrc || "";
+      if (isBlobUrl(effective)) {
+        const data = await blobUrlToDataUrl(effective);
+        img.setAttribute("src", data);
+      }
+      const srcset = img.getAttribute("srcset");
+      if (srcset && srcset.includes("blob:")) {
+        const parts = parseSrcset(srcset);
+        let changed = false;
+        for (const p of parts) {
+          if (isBlobUrl(p.url)) {
+            try {
+              p.url = await blobUrlToDataUrl(p.url);
+              changed = true;
+            } catch {
+            }
+          }
+        }
+        if (changed) img.setAttribute("srcset", stringifySrcset(parts));
+      }
+    } catch {
+    }
+  }
+  const svgImages = root.querySelectorAll ? root.querySelectorAll("image") : [];
+  for (const node of svgImages) {
+    try {
+      const XLINK_NS = "http://www.w3.org/1999/xlink";
+      const href = node.getAttribute("href") || node.getAttributeNS?.(XLINK_NS, "href");
+      if (isBlobUrl(href)) {
+        const d = await blobUrlToDataUrl(href);
+        node.setAttribute("href", d);
+        node.removeAttributeNS?.(XLINK_NS, "href");
+      }
+    } catch {
+    }
+  }
+  const styled = root.querySelectorAll ? root.querySelectorAll("[style*='blob:']") : [];
+  for (const el of styled) {
+    try {
+      const styleText = el.getAttribute("style");
+      if (styleText && styleText.includes("blob:")) {
+        const replaced = await replaceBlobUrlsInCssText(styleText);
+        el.setAttribute("style", replaced);
+      }
+    } catch {
+    }
+  }
+  const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
+  for (const s of styleTags) {
+    try {
+      const css = s.textContent || "";
+      if (css.includes("blob:")) {
+        s.textContent = await replaceBlobUrlsInCssText(css);
+      }
+    } catch {
+    }
+  }
+  const urlAttrs = ["poster"];
+  for (const attr of urlAttrs) {
+    const nodes = root.querySelectorAll ? root.querySelectorAll(`[${attr}^='blob:']`) : [];
+    for (const n of nodes) {
+      try {
+        const u = n.getAttribute(attr);
+        if (isBlobUrl(u)) {
+          n.setAttribute(attr, await blobUrlToDataUrl(u));
+        }
+      } catch {
+      }
+    }
+  }
 }
 
 // src/modules/images.js
 async function inlineImages(clone, options = {}) {
   const imgs = Array.from(clone.querySelectorAll("img"));
   const processImg = async (img) => {
+    if (!img.getAttribute("src")) {
+      const eff = img.currentSrc || img.src || "";
+      if (eff) img.setAttribute("src", eff);
+    }
+    img.removeAttribute("srcset");
+    img.removeAttribute("sizes");
     const src = img.src;
     try {
       const dataUrl = await fetchImage(src, { useProxy: options.useProxy });
@@ -1076,7 +1402,7 @@ async function inlineImages(clone, options = {}) {
 }
 
 // src/modules/background.js
-async function inlineBackgroundImages(source, clone, options = {}) {
+async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
   const queue = [[source, clone]];
   const imageProps = [
     "background-image",
@@ -1086,13 +1412,27 @@ async function inlineBackgroundImages(source, clone, options = {}) {
     "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);
@@ -1119,13 +1459,13 @@ async function inlineBackgroundImages(source, clone, options = {}) {
 async function captureDOM(element, options = {}) {
   if (!element) throw new Error("Element cannot be null or undefined");
   cache.reset();
-  const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "" } = options;
-  let clone, classCSS;
+  const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "", localFonts = [] } = options;
+  let clone, classCSS, styleCache;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS } = await prepareClone(element, compress, embedFonts, options));
+  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -1134,14 +1474,14 @@ async function captureDOM(element, options = {}) {
   });
   await new Promise((resolve) => {
     idle(async () => {
-      await inlineBackgroundImages(element, clone, options);
+      await inlineBackgroundImages(element, clone, styleCache, options);
       resolve();
     }, { fast });
   });
   if (embedFonts) {
     await new Promise((resolve) => {
       idle(async () => {
-        fontsCSS = await embedCustomFonts();
+        fontsCSS = await embedCustomFonts({ localFonts, useProxy });
         resolve();
       }, { fast });
     });
@@ -1218,12 +1558,14 @@ async function captureDOM(element, options = {}) {
 }
 
 // src/api/snapdom.js
-async function toImg(url, { dpr = 1, scale = 1 }) {
+async function toImg(url, { scale = 1 } = {}) {
   const img = new Image();
   img.src = url;
   await 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;
 }
 async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
@@ -1246,8 +1588,8 @@ async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
     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);
@@ -1339,19 +1681,19 @@ async function snapdom(element, options = {}) {
 }
 snapdom.capture = async (el, options = {}) => {
   const url = await captureDOM(el, options);
-  const dpr = window.devicePixelRatio || 1;
+  const dpr = options.dpr ?? (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, { dpr, scale, ...options2 }),
-    toPng: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "png"),
-    toJpg: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "jpeg"),
-    toWebp: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "webp"),
-    download: ({ format = "png", filename = "capture", backgroundColor } = {}) => download(url, { dpr, scale, backgroundColor, format, filename })
+    toImg: (opts = {}) => toImg(url, { dpr, scale, ...opts }),
+    toCanvas: (opts = {}) => toCanvas(url, { dpr, scale, ...opts }),
+    toBlob: (opts = {}) => toBlob(url, { dpr, scale, ...opts }),
+    toPng: (opts = {}) => toRasterImg(url, { dpr, scale, ...opts }, "png"),
+    toJpg: (opts = {}) => toRasterImg(url, { dpr, scale, ...opts }, "jpeg"),
+    toWebp: (opts = {}) => toRasterImg(url, { dpr, scale, ...opts }, "webp"),
+    download: ({ format = "png", filename = "snapDOM", backgroundColor, ...opts } = {}) => download(url, { dpr, scale, format, filename, backgroundColor, ...opts })
   };
 };
 snapdom.toRaw = async (el, options) => (await snapdom.capture(el, options)).toRaw();
@@ -1374,12 +1716,21 @@ snapdom.download = async (el, options = {}) => {
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {
-  const { embedFonts = true, reset = false } = options;
+  const { embedFonts = true, reset = false, useProxy } = options;
   if (reset) {
-    cache.reset();
+    cache.image.clear();
+    cache.background.clear();
+    cache.resource.clear();
+    cache.defaultStyle.clear();
+    cache.baseStyle.clear();
+    cache.font.clear();
+    cache.computedStyle = /* @__PURE__ */ new WeakMap();
     return;
   }
-  await document.fonts.ready;
+  try {
+    await document.fonts.ready;
+  } catch {
+  }
   precacheCommonTags();
   let imgEls = [], allEls = [];
   if (root?.querySelectorAll) {
@@ -1388,33 +1739,41 @@ async function preCache(root = document, options = {}) {
   }
   const promises = [];
   for (const img of imgEls) {
-    const src = img.src;
+    const src = img?.src;
+    if (!src) continue;
     if (!cache.image.has(src)) {
-      promises.push(
-        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => cache.image.set(src, dataURL)).catch(() => {
-        })
-      );
+      const p = Promise.resolve().then(() => fetchImage(src, { useProxy })).then((dataURL) => {
+        cache.image.set(src, dataURL);
+      }).catch(() => {
+      });
+      promises.push(p);
     }
   }
   for (const el of allEls) {
-    const bg = getStyle(el).backgroundImage;
+    let bg = "";
+    try {
+      bg = getStyle(el).backgroundImage;
+    } catch {
+    }
     if (bg && bg !== "none") {
       const bgSplits = splitBackgroundImage(bg);
       for (const entry of bgSplits) {
-        const isUrl = entry.startsWith("url(");
-        if (isUrl) {
-          promises.push(
-            inlineSingleBackgroundEntry(entry, options).catch(() => {
-            })
-          );
+        if (entry.startsWith("url(")) {
+          const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy })).catch(() => {
+          });
+          promises.push(p);
         }
       }
     }
   }
   if (embedFonts) {
-    await embedCustomFonts({ preCached: true });
+    try {
+      await embedCustomFonts({ preCached: true, localFonts: options.localFonts, useProxy: options.useProxy });
+    } catch {
+    }
+    ;
   }
-  await Promise.all(promises);
+  await Promise.allSettled(promises);
 }
 export {
   preCache,