@zumer/snapdom 1.9.9 → 1.9.10-dev.1

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.9
+* v.1.9.10-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -16,15 +16,306 @@ var cache = {
   baseStyle: /* @__PURE__ */ new Map(),
   computedStyle: /* @__PURE__ */ new WeakMap(),
   font: /* @__PURE__ */ new Set(),
-  snapshot: /* @__PURE__ */ new WeakMap(),
-  snapshotKey: /* @__PURE__ */ new Map(),
-  reset: resetCache
+  session: {
+    styleMap: /* @__PURE__ */ new Map(),
+    styleCache: /* @__PURE__ */ new WeakMap(),
+    nodeMap: /* @__PURE__ */ new Map()
+  }
 };
-function resetCache() {
-  cache.computedStyle = /* @__PURE__ */ new WeakMap();
+function applyCachePolicy(policy = "soft") {
+  switch (policy) {
+    case "auto": {
+      cache.session.styleMap = /* @__PURE__ */ new Map();
+      cache.session.nodeMap = /* @__PURE__ */ new Map();
+      return;
+    }
+    case "soft": {
+      cache.session.styleMap = /* @__PURE__ */ new Map();
+      cache.session.nodeMap = /* @__PURE__ */ new Map();
+      cache.session.styleCache = /* @__PURE__ */ new WeakMap();
+      return;
+    }
+    case "full": {
+      return;
+    }
+    case "disabled": {
+      cache.session.styleMap = /* @__PURE__ */ new Map();
+      cache.session.nodeMap = /* @__PURE__ */ new Map();
+      cache.session.styleCache = /* @__PURE__ */ new WeakMap();
+      cache.image.clear();
+      cache.background.clear();
+      cache.resource.clear();
+      cache.font.clear();
+      return;
+    }
+    default: {
+      cache.session.styleMap = /* @__PURE__ */ new Map();
+      cache.session.nodeMap = /* @__PURE__ */ new Map();
+      cache.session.styleCache = /* @__PURE__ */ new WeakMap();
+      return;
+    }
+  }
+}
+
+// src/utils/helpers.js
+function extractURL(value) {
+  const match = value.match(/url\((['"]?)(.*?)(\1)\)/);
+  if (!match) return null;
+  const url = match[2].trim();
+  if (url.startsWith("#")) return null;
+  return url;
+}
+function stripTranslate(transform) {
+  if (!transform || transform === "none") return "";
+  let cleaned = transform.replace(/translate[XY]?\([^)]*\)/g, "");
+  cleaned = cleaned.replace(/matrix\(([^)]+)\)/g, (_, values) => {
+    const parts = values.split(",").map((s) => s.trim());
+    if (parts.length !== 6) return `matrix(${values})`;
+    parts[4] = "0";
+    parts[5] = "0";
+    return `matrix(${parts.join(", ")})`;
+  });
+  cleaned = cleaned.replace(/matrix3d\(([^)]+)\)/g, (_, values) => {
+    const parts = values.split(",").map((s) => s.trim());
+    if (parts.length !== 16) return `matrix3d(${values})`;
+    parts[12] = "0";
+    parts[13] = "0";
+    return `matrix3d(${parts.join(", ")})`;
+  });
+  return cleaned.trim().replace(/\s{2,}/g, " ");
+}
+function safeEncodeURI(uri) {
+  if (/%[0-9A-Fa-f]{2}/.test(uri)) return uri;
+  try {
+    return encodeURI(uri);
+  } catch {
+    return uri;
+  }
+}
+
+// src/modules/snapFetch.js
+function createSnapLogger(prefix = "[snapDOM]", { ttlMs = 5 * 6e4, maxEntries = 12 } = {}) {
+  const seen = /* @__PURE__ */ new Map();
+  let emitted = 0;
+  function log(level, key, msg) {
+    if (emitted >= maxEntries) return;
+    const now = Date.now();
+    const until = seen.get(key) || 0;
+    if (until > now) return;
+    seen.set(key, now + ttlMs);
+    emitted++;
+    if (level === "warn" && console && console.warn) console.warn(`${prefix} ${msg}`);
+    else if (console && console.error) console.error(`${prefix} ${msg}`);
+  }
+  return {
+    warnOnce(key, msg) {
+      log("warn", key, msg);
+    },
+    errorOnce(key, msg) {
+      log("error", key, msg);
+    },
+    reset() {
+      seen.clear();
+      emitted = 0;
+    }
+  };
+}
+var snapLogger = createSnapLogger("[snapDOM]", { ttlMs: 3 * 6e4, maxEntries: 10 });
+var _inflight = /* @__PURE__ */ new Map();
+var _errorCache = /* @__PURE__ */ new Map();
+function isSpecialURL(url) {
+  return /^data:|^blob:|^about:blank$/.test(url);
+}
+function shouldProxy(url, useProxy) {
+  if (!useProxy || isSpecialURL(url)) return false;
+  try {
+    const base = typeof location !== "undefined" && location.href ? location.href : "http://localhost/";
+    const u = new URL(url, base);
+    return typeof location !== "undefined" ? u.origin !== location.origin : true;
+  } catch {
+    return !!useProxy;
+  }
+}
+function applyProxy(url, useProxy) {
+  if (!useProxy) return url;
+  if (useProxy.includes("{url}")) return useProxy.replace("{url}", encodeURIComponent(url));
+  const sep = useProxy.endsWith("?") ? "" : useProxy.includes("?") ? "&" : "?";
+  return `${useProxy}${sep}url=${encodeURIComponent(url)}`;
+}
+function blobToDataURL(blob) {
+  return new Promise((res, rej) => {
+    const fr = new FileReader();
+    fr.onload = () => res(String(fr.result || ""));
+    fr.onerror = () => rej(new Error("read_failed"));
+    fr.readAsDataURL(blob);
+  });
+}
+function makeKey(url, o) {
+  return [
+    o.as || "blob",
+    o.timeout ?? 3e3,
+    o.useProxy || "",
+    o.errorTTL ?? 8e3,
+    url
+  ].join("|");
+}
+async function snapFetch(url, options = {}) {
+  const as = options.as ?? "blob";
+  const timeout = options.timeout ?? 3e3;
+  const useProxy = options.useProxy || "";
+  const errorTTL = options.errorTTL ?? 8e3;
+  const headers = options.headers || {};
+  const silent = !!options.silent;
+  const key = makeKey(url, { as, timeout, useProxy, errorTTL });
+  const e = _errorCache.get(key);
+  if (e && e.until > Date.now()) {
+    return { ...e.result, fromCache: true };
+  } else if (e) {
+    _errorCache.delete(key);
+  }
+  const inflight = _inflight.get(key);
+  if (inflight) return inflight;
+  const finalURL = shouldProxy(url, useProxy) ? applyProxy(url, useProxy) : url;
+  let cred = options.credentials;
+  if (!cred) {
+    try {
+      const base = typeof location !== "undefined" && location.href ? location.href : "http://localhost/";
+      const u = new URL(url, base);
+      const sameOrigin = typeof location !== "undefined" && u.origin === location.origin;
+      cred = sameOrigin ? "include" : "omit";
+    } catch {
+      cred = "omit";
+    }
+  }
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort("timeout"), timeout);
+  const p = (async () => {
+    try {
+      const resp = await fetch(finalURL, { signal: ctrl.signal, credentials: cred, headers });
+      if (!resp.ok) {
+        const result = { ok: false, data: null, status: resp.status, url: finalURL, fromCache: false, reason: "http_error" };
+        _errorCache.set(key, { until: Date.now() + errorTTL, result });
+        if (!silent) {
+          const short = `${resp.status} ${resp.statusText || ""}`.trim();
+          snapLogger.warnOnce(
+            `http:${resp.status}:${as}:${new URL(url, location?.href ?? "http://localhost/").origin}`,
+            `HTTP error ${short} while fetching ${as} ${url}`
+          );
+        }
+        options.onError && options.onError(result);
+        return result;
+      }
+      if (as === "text") {
+        const text = await resp.text();
+        return { ok: true, data: text, status: resp.status, url: finalURL, fromCache: false };
+      }
+      const blob = await resp.blob();
+      const mime = blob.type || resp.headers.get("content-type") || "";
+      if (as === "dataURL") {
+        const dataURL = await blobToDataURL(blob);
+        return { ok: true, data: dataURL, status: resp.status, url: finalURL, fromCache: false, mime };
+      }
+      return { ok: true, data: blob, status: resp.status, url: finalURL, fromCache: false, mime };
+    } catch (err) {
+      const reason = err && typeof err === "object" && "name" in err && err.name === "AbortError" ? String(err.message || "").includes("timeout") ? "timeout" : "abort" : "network";
+      const result = { ok: false, data: null, status: 0, url: finalURL, fromCache: false, reason };
+      _errorCache.set(key, { until: Date.now() + errorTTL, result });
+      if (!silent) {
+        const k = `${reason}:${as}:${new URL(url, location?.href ?? "http://localhost/").origin}`;
+        const tips = reason === "timeout" ? `Timeout after ${timeout}ms. Consider increasing timeout or using a proxy for ${url}` : reason === "abort" ? `Request aborted while fetching ${as} ${url}` : `Network/CORS issue while fetching ${as} ${url}. A proxy may be required`;
+        snapLogger.errorOnce(k, tips);
+      }
+      options.onError && options.onError(result);
+      return result;
+    } finally {
+      clearTimeout(timer);
+      _inflight.delete(key);
+    }
+  })();
+  _inflight.set(key, p);
+  return p;
+}
+
+// src/utils/image.js
+function createBackground(baseCanvas, backgroundColor) {
+  if (!backgroundColor || !baseCanvas.width || !baseCanvas.height) {
+    return baseCanvas;
+  }
+  const temp = document.createElement("canvas");
+  temp.width = baseCanvas.width;
+  temp.height = baseCanvas.height;
+  const ctx = temp.getContext("2d");
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, 0, temp.width, temp.height);
+  ctx.drawImage(baseCanvas, 0, 0);
+  return temp;
+}
+async function inlineSingleBackgroundEntry(entry, options = {}) {
+  const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
+  if (isGradient || entry.trim() === "none") {
+    return entry;
+  }
+  const rawUrl = extractURL(entry);
+  if (!rawUrl) {
+    return entry;
+  }
+  const encodedUrl = safeEncodeURI(rawUrl);
+  if (cache.background.has(encodedUrl)) {
+    const dataUrl = cache.background.get(encodedUrl);
+    return dataUrl ? `url("${dataUrl}")` : "none";
+  }
+  try {
+    const dataUrl = await snapFetch(encodedUrl, { as: "dataURL", useProxy: options.useProxy });
+    if (dataUrl.ok) {
+      cache.background.set(encodedUrl, dataUrl.data);
+      return `url("${dataUrl.data}")`;
+    }
+    cache.background.set(encodedUrl, null);
+    return "none";
+  } catch {
+    cache.background.set(encodedUrl, null);
+    return "none";
+  }
 }
 
-// src/utils/cssTools.js
+// src/utils/css.js
+var NO_CAPTURE_TAGS = /* @__PURE__ */ new Set([
+  "meta",
+  "script",
+  "noscript",
+  "title",
+  "link",
+  "template"
+]);
+var NO_DEFAULTS_TAGS = /* @__PURE__ */ new Set([
+  // non-painting / head stuff
+  "meta",
+  "link",
+  "style",
+  "title",
+  "noscript",
+  "script",
+  "template",
+  // SVG whole namespace (safe for LeaderLine/presentation attrs)
+  "g",
+  "defs",
+  "use",
+  "marker",
+  "mask",
+  "clipPath",
+  "pattern",
+  "path",
+  "polygon",
+  "polyline",
+  "line",
+  "circle",
+  "ellipse",
+  "rect",
+  "filter",
+  "lineargradient",
+  "radialgradient",
+  "stop"
+]);
 var commonTags = [
   "div",
   "span",
@@ -51,12 +342,6 @@ var commonTags = [
   "h4",
   "h5",
   "h6",
-  "svg",
-  "path",
-  "circle",
-  "rect",
-  "line",
-  "g",
   "table",
   "thead",
   "tbody",
@@ -66,28 +351,33 @@ var commonTags = [
 ];
 function precacheCommonTags() {
   for (let tag of commonTags) {
-    getDefaultStyleForTag(tag);
+    const t = String(tag).toLowerCase();
+    if (NO_CAPTURE_TAGS.has(t)) continue;
+    if (NO_DEFAULTS_TAGS.has(t)) continue;
+    getDefaultStyleForTag(t);
   }
 }
 function getDefaultStyleForTag(tagName) {
-  if (cache.defaultStyle.has(tagName)) {
-    return cache.defaultStyle.get(tagName);
-  }
-  const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template", "defs", "symbol", "title", "metadata", "desc"]);
-  if (skipTags.has(tagName)) {
+  tagName = String(tagName).toLowerCase();
+  if (NO_DEFAULTS_TAGS.has(tagName)) {
     const empty = {};
     cache.defaultStyle.set(tagName, empty);
     return empty;
   }
+  if (cache.defaultStyle.has(tagName)) {
+    return cache.defaultStyle.get(tagName);
+  }
   let sandbox = document.getElementById("snapdom-sandbox");
   if (!sandbox) {
     sandbox = document.createElement("div");
     sandbox.id = "snapdom-sandbox";
+    sandbox.setAttribute("data-snapdom-sandbox", "true");
+    sandbox.setAttribute("aria-hidden", "true");
     sandbox.style.position = "absolute";
     sandbox.style.left = "-9999px";
     sandbox.style.top = "-9999px";
-    sandbox.style.width = "0";
-    sandbox.style.height = "0";
+    sandbox.style.width = "0px";
+    sandbox.style.height = "0px";
     sandbox.style.overflow = "hidden";
     document.body.appendChild(sandbox);
   }
@@ -97,32 +387,55 @@ function getDefaultStyleForTag(tagName) {
   const styles = getComputedStyle(el);
   const defaults = {};
   for (let prop of styles) {
-    defaults[prop] = styles.getPropertyValue(prop);
+    if (shouldIgnoreProp(prop)) continue;
+    const value = styles.getPropertyValue(prop);
+    defaults[prop] = value;
   }
   sandbox.removeChild(el);
   cache.defaultStyle.set(tagName, defaults);
   return defaults;
 }
-var IGNORED_PROPS = /* @__PURE__ */ new Set([
-  "-webkit-locale"
+var NO_PAINT_TOKEN = /(?:^|-)(animation|transition)(?:-|$)/i;
+var NO_PAINT_PREFIX = /^(--|view-timeline|scroll-timeline|animation-trigger|offset-|position-try|app-region|interactivity|overlay|view-transition|-webkit-locale|-webkit-user-(?:drag|modify)|-webkit-tap-highlight-color|-webkit-text-security)$/i;
+var NO_PAINT_EXACT = /* @__PURE__ */ new Set([
+  // Interaction hints
+  "cursor",
+  "pointer-events",
+  "touch-action",
+  "user-select",
+  // Printing/speech/reading-mode hints
+  "print-color-adjust",
+  "speak",
+  "reading-flow",
+  "reading-order",
+  // Anchoring/container/timeline scopes (metadata for layout queries)
+  "anchor-name",
+  "anchor-scope",
+  "container-name",
+  "container-type",
+  "timeline-scope"
 ]);
-function getStyleKey(snapshot, tagName, compress = false) {
+function shouldIgnoreProp(prop) {
+  const p = String(prop).toLowerCase();
+  if (NO_PAINT_EXACT.has(p)) return true;
+  if (NO_PAINT_PREFIX.test(p)) return true;
+  if (NO_PAINT_TOKEN.test(p)) return true;
+  return false;
+}
+function getStyleKey(snapshot, tagName) {
+  tagName = String(tagName || "").toLowerCase();
+  if (NO_DEFAULTS_TAGS.has(tagName)) {
+    return "";
+  }
   const entries = [];
-  const defaultStyles = getDefaultStyleForTag(tagName);
+  const defaults = getDefaultStyleForTag(tagName);
   for (let [prop, value] of Object.entries(snapshot)) {
-    if (IGNORED_PROPS.has(prop)) continue;
-    if (!compress) {
-      if (value) {
-        entries.push(`${prop}:${value}`);
-      }
-    } else {
-      const defaultValue = defaultStyles[prop];
-      if (value && value !== defaultValue) {
-        entries.push(`${prop}:${value}`);
-      }
-    }
+    if (shouldIgnoreProp(prop)) continue;
+    const def = defaults[prop];
+    if (value && value !== def) entries.push(`${prop}:${value}`);
   }
-  return entries.sort().join(";");
+  entries.sort();
+  return entries.join(";");
 }
 function collectUsedTagNames(root) {
   const tagSet = /* @__PURE__ */ new Set();
@@ -143,6 +456,7 @@ function generateDedupedBaseCSS(usedTagNames) {
     const styles = cache.defaultStyle.get(tagName);
     if (!styles) continue;
     const key = Object.entries(styles).map(([k, v]) => `${k}:${v};`).sort().join("");
+    if (!key) continue;
     if (!groups.has(key)) {
       groups.set(key, []);
     }
@@ -156,43 +470,12 @@ function generateDedupedBaseCSS(usedTagNames) {
   return css;
 }
 function generateCSSClasses(styleMap) {
-  const keySet = new Set(styleMap.values());
+  const keys = Array.from(new Set(styleMap.values())).filter(Boolean).sort();
   const classMap = /* @__PURE__ */ new Map();
-  let counter = 1;
-  for (const key of keySet) {
-    if (!key.trim()) continue;
-    classMap.set(key, `c${counter++}`);
-  }
+  let i = 1;
+  for (const k of keys) classMap.set(k, `c${i++}`);
   return classMap;
 }
-
-// src/utils/helpers.js
-async function inlineSingleBackgroundEntry(entry, options = {}) {
-  const rawUrl = extractURL(entry);
-  const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
-  if (rawUrl) {
-    const encodedUrl = safeEncodeURI(rawUrl);
-    if (cache.background.has(encodedUrl)) {
-      return options.skipInline ? void 0 : `url(${cache.background.get(encodedUrl)})`;
-    } else {
-      const dataUrl = await fetchImage(encodedUrl, { useProxy: options.useProxy });
-      cache.background.set(encodedUrl, dataUrl);
-      return options.skipInline ? void 0 : `url("${dataUrl}")`;
-    }
-  }
-  if (isGradient || entry === "none") {
-    return entry;
-  }
-  return entry;
-}
-function idle(fn, { fast = false } = {}) {
-  if (fast) return fn();
-  if ("requestIdleCallback" in window) {
-    requestIdleCallback(fn, { timeout: 50 });
-  } else {
-    setTimeout(fn, 1);
-  }
-}
 function getStyle(el, pseudo = null) {
   if (!(el instanceof Element)) {
     return window.getComputedStyle(el, pseudo);
@@ -219,192 +502,6 @@ function parseContent(content) {
   }
   return clean;
 }
-function extractURL(value) {
-  const match = value.match(/url\((['"]?)(.*?)(\1)\)/);
-  if (!match) return null;
-  const url = match[2].trim();
-  if (url.startsWith("#")) return null;
-  return url;
-}
-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);
-      return parsed.origin === window.location.origin ? "use-credentials" : "anonymous";
-    } catch {
-      return "anonymous";
-    }
-  }
-  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) => {
-        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 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;
-  }
-  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);
-  }
-  if (/\.svg(\?.*)?$/i.test(src)) {
-    const p2 = (async () => {
-      const direct = await (async () => {
-        try {
-          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) {
-          return fail(e);
-        }
-      })();
-      if (direct.ok) {
-        cache.image.set(src, direct.data);
-        return direct.data;
-      }
-      const via = await fetchWithFallbackOnceSafe(src);
-      if (via.ok) {
-        cache.image.set(src, via.data);
-        return via.data;
-      }
-      _errorCache.set(src, now + errorTTL);
-      return Promise.reject(via.error);
-    })();
-    _inflight.set(src, p2);
-    p2.finally(() => _inflight.delete(src));
-    p2.catch(() => {
-    });
-    return p2;
-  }
-  const p = new Promise((resolve, reject) => {
-    let finished = false;
-    const img = new Image();
-    const finish = (fn) => (arg) => {
-      if (finished) return;
-      finished = true;
-      clearTimeout(timeoutId);
-      img.onload = img.onerror = null;
-      fn(arg);
-    };
-    const onSuccess = (d) => {
-      cache.image.set(src, d);
-      resolve(d);
-    };
-    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 = {};
   for (let prop of style) {
@@ -412,36 +509,6 @@ function snapshotComputedStyle(style) {
   }
   return snap;
 }
-function isSafari() {
-  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-}
-function stripTranslate(transform) {
-  if (!transform || transform === "none") return "";
-  let cleaned = transform.replace(/translate[XY]?\([^)]*\)/g, "");
-  cleaned = cleaned.replace(/matrix\(([^)]+)\)/g, (_, values) => {
-    const parts = values.split(",").map((s) => s.trim());
-    if (parts.length !== 6) return `matrix(${values})`;
-    parts[4] = "0";
-    parts[5] = "0";
-    return `matrix(${parts.join(", ")})`;
-  });
-  cleaned = cleaned.replace(/matrix3d\(([^)]+)\)/g, (_, values) => {
-    const parts = values.split(",").map((s) => s.trim());
-    if (parts.length !== 16) return `matrix3d(${values})`;
-    parts[12] = "0";
-    parts[13] = "0";
-    return `matrix3d(${parts.join(", ")})`;
-  });
-  return cleaned.trim().replace(/\s{2,}/g, " ");
-}
-function safeEncodeURI(uri) {
-  if (/%[0-9A-Fa-f]{2}/.test(uri)) return uri;
-  try {
-    return encodeURI(uri);
-  } catch {
-    return uri;
-  }
-}
 function splitBackgroundImage(bg) {
   const parts = [];
   let depth = 0;
@@ -459,48 +526,205 @@ function splitBackgroundImage(bg) {
   return parts;
 }
 
+// src/utils/browser.js
+function idle(fn, { fast = false } = {}) {
+  if (fast) return fn();
+  if ("requestIdleCallback" in window) {
+    requestIdleCallback(fn, { timeout: 50 });
+  } else {
+    setTimeout(fn, 1);
+  }
+}
+function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+
 // src/modules/styles.js
 var snapshotCache = /* @__PURE__ */ new WeakMap();
 var snapshotKeyCache = /* @__PURE__ */ new Map();
+var __epoch = 0;
+function bumpEpoch() {
+  __epoch++;
+}
+var __wired = false;
+function setupInvalidationOnce(root = document.documentElement) {
+  if (__wired) return;
+  __wired = true;
+  try {
+    const domObs = new MutationObserver(() => bumpEpoch());
+    domObs.observe(root, { subtree: true, childList: true, characterData: true, attributes: true });
+  } catch {
+  }
+  try {
+    const headObs = new MutationObserver(() => bumpEpoch());
+    headObs.observe(document.head, { subtree: true, childList: true, characterData: true, attributes: true });
+  } catch {
+  }
+  try {
+    const f = document.fonts;
+    if (f) {
+      f.addEventListener?.("loadingdone", bumpEpoch);
+      f.ready?.then(() => bumpEpoch()).catch(() => {
+      });
+    }
+  } catch {
+  }
+}
 function snapshotComputedStyleFull(style) {
-  const result = {};
-  const computedVisibility = style.getPropertyValue("visibility");
+  const out = {};
+  const vis = style.getPropertyValue("visibility");
   for (let i = 0; i < style.length; i++) {
     const prop = style[i];
     let val = style.getPropertyValue(prop);
     if ((prop === "background-image" || prop === "content") && val.includes("url(") && !val.includes("data:")) {
       val = "none";
     }
-    result[prop] = val;
-  }
-  if (computedVisibility === "hidden") {
-    result.opacity = "0";
+    out[prop] = val;
+  }
+  if (vis === "hidden") out.opacity = "0";
+  return out;
+}
+var __snapshotSig = /* @__PURE__ */ new WeakMap();
+function styleSignature(snap) {
+  let sig = __snapshotSig.get(snap);
+  if (sig) return sig;
+  const entries = Object.entries(snap).sort((a, b) => a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0);
+  sig = entries.map(([k, v]) => `${k}:${v}`).join(";");
+  __snapshotSig.set(snap, sig);
+  return sig;
+}
+function getSnapshot(el, preStyle = null) {
+  const rec = snapshotCache.get(el);
+  if (rec && rec.epoch === __epoch) return rec.snapshot;
+  const style = preStyle || getComputedStyle(el);
+  const snap = snapshotComputedStyleFull(style);
+  snapshotCache.set(el, { epoch: __epoch, snapshot: snap });
+  return snap;
+}
+function _resolveCtx(sessionOrCtx, opts) {
+  if (sessionOrCtx && sessionOrCtx.session && sessionOrCtx.persist) return sessionOrCtx;
+  if (sessionOrCtx && (sessionOrCtx.styleMap || sessionOrCtx.styleCache || sessionOrCtx.nodeMap)) {
+    return {
+      session: sessionOrCtx,
+      persist: {
+        snapshotKeyCache,
+        defaultStyle: cache.defaultStyle,
+        baseStyle: cache.baseStyle,
+        image: cache.image,
+        resource: cache.resource,
+        background: cache.background,
+        font: cache.font
+      },
+      options: opts || {}
+    };
+  }
+  return {
+    session: cache.session,
+    persist: {
+      snapshotKeyCache,
+      defaultStyle: cache.defaultStyle,
+      baseStyle: cache.baseStyle,
+      image: cache.image,
+      resource: cache.resource,
+      background: cache.background,
+      font: cache.font
+    },
+    options: sessionOrCtx || opts || {}
+  };
+}
+async function inlineAllStyles(source, clone, sessionOrCtx, opts) {
+  if (source.tagName === "STYLE") return;
+  const ctx = _resolveCtx(sessionOrCtx, opts);
+  const resetMode = ctx.options && ctx.options.cache || "auto";
+  if (resetMode !== "disabled") setupInvalidationOnce(document.documentElement);
+  if (NO_DEFAULTS_TAGS.has(source.tagName?.toLowerCase())) {
+    const author = source.getAttribute?.("style");
+    if (author) clone.setAttribute("style", author);
+  }
+  const { session, persist } = ctx;
+  if (!session.styleCache.has(source)) {
+    session.styleCache.set(source, getComputedStyle(source));
+  }
+  const pre = session.styleCache.get(source);
+  const snap = getSnapshot(source, pre);
+  const sig = styleSignature(snap);
+  let key = persist.snapshotKeyCache.get(sig);
+  if (!key) {
+    const tag = source.tagName?.toLowerCase() || "div";
+    key = getStyleKey(snap, tag);
+    persist.snapshotKeyCache.set(sig, key);
+  }
+  session.styleMap.set(clone, key);
+}
+
+// src/core/clone.js
+function addNotSlottedRightmost(sel) {
+  sel = sel.trim();
+  if (!sel) return sel;
+  if (/\:not\(\s*\[data-sd-slotted\]\s*\)\s*$/.test(sel)) return sel;
+  return `${sel}:not([data-sd-slotted])`;
+}
+function wrapWithScope(selectorList, scopeSelector, excludeSlotted = true) {
+  return selectorList.split(",").map((s) => s.trim()).filter(Boolean).map((s) => {
+    if (s.startsWith(":where(")) return s;
+    if (s.startsWith("@")) return s;
+    const body = excludeSlotted ? addNotSlottedRightmost(s) : s;
+    return `:where(${scopeSelector} ${body})`;
+  }).join(", ");
+}
+function rewriteShadowCSS(cssText, scopeSelector) {
+  if (!cssText) return "";
+  cssText = cssText.replace(/:host\(([^)]+)\)/g, (_, sel) => {
+    return `:where(${scopeSelector}:is(${sel.trim()}))`;
+  });
+  cssText = cssText.replace(/:host\b/g, `:where(${scopeSelector})`);
+  cssText = cssText.replace(/:host-context\(([^)]+)\)/g, (_, sel) => {
+    return `:where(:where(${sel.trim()}) ${scopeSelector})`;
+  });
+  cssText = cssText.replace(/::slotted\(([^)]+)\)/g, (_, sel) => {
+    return `:where(${scopeSelector} ${sel.trim()})`;
+  });
+  cssText = cssText.replace(/(^|})(\s*)([^@}{]+){/g, (_, brace, ws, selectorList) => {
+    const wrapped = wrapWithScope(
+      selectorList,
+      scopeSelector,
+      /*excludeSlotted*/
+      true
+    );
+    return `${brace}${ws}${wrapped}{`;
+  });
+  return cssText;
+}
+function nextShadowScopeId(sessionCache) {
+  sessionCache.shadowScopeSeq = (sessionCache.shadowScopeSeq || 0) + 1;
+  return `s${sessionCache.shadowScopeSeq}`;
+}
+function extractShadowCSS(sr) {
+  let css = "";
+  try {
+    sr.querySelectorAll("style").forEach((s) => {
+      css += (s.textContent || "") + "\n";
+    });
+    const sheets = sr.adoptedStyleSheets || [];
+    for (const sh of sheets) {
+      try {
+        if (sh && sh.cssRules) {
+          for (const rule of sh.cssRules) css += rule.cssText + "\n";
+        }
+      } catch {
+      }
+    }
+  } catch {
   }
-  return result;
+  return css;
 }
-function inlineAllStyles(source, clone, styleMap, cache2, compress) {
-  if (source.tagName === "STYLE") return;
-  if (!cache2.has(source)) {
-    cache2.set(source, getStyle(source));
-  }
-  const style = cache2.get(source);
-  if (!snapshotCache.has(source)) {
-    const snapshot2 = snapshotComputedStyleFull(style);
-    snapshotCache.set(source, snapshot2);
-  }
-  const snapshot = snapshotCache.get(source);
-  const hash = Object.entries(snapshot).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
-  if (snapshotKeyCache.has(hash)) {
-    styleMap.set(clone, snapshotKeyCache.get(hash));
-    return;
-  }
-  const tagName = source.tagName?.toLowerCase() || "div";
-  const key = getStyleKey(snapshot, tagName, compress);
-  snapshotKeyCache.set(hash, key);
-  styleMap.set(clone, key);
+function injectScopedStyle(hostClone, cssText, scopeId) {
+  if (!cssText) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-sd", scopeId);
+  style.textContent = cssText;
+  hostClone.insertBefore(style, hostClone.firstChild || null);
 }
-
-// src/core/clone.js
 function freezeImgSrcset(original, cloned) {
   try {
     const chosen = original.currentSrc || original.src || "";
@@ -513,10 +737,61 @@ function freezeImgSrcset(original, cloned) {
   } catch {
   }
 }
-function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
+function collectCustomPropsFromCSS(cssText) {
+  const out = /* @__PURE__ */ new Set();
+  if (!cssText) return out;
+  const re = /var\(\s*(--[A-Za-z0-9_-]+)\b/g;
+  let m;
+  while (m = re.exec(cssText)) out.add(m[1]);
+  return out;
+}
+function resolveCustomProp(el, name) {
+  try {
+    const cs = getComputedStyle(el);
+    let v = cs.getPropertyValue(name).trim();
+    if (v) return v;
+  } catch {
+  }
+  try {
+    const rootCS = getComputedStyle(document.documentElement);
+    let v = rootCS.getPropertyValue(name).trim();
+    if (v) return v;
+  } catch {
+  }
+  return "";
+}
+function buildSeedCustomPropsRule(hostEl, names, scopeSelector) {
+  const decls = [];
+  for (const name of names) {
+    const val = resolveCustomProp(hostEl, name);
+    if (val) decls.push(`${name}: ${val};`);
+  }
+  if (!decls.length) return "";
+  return `${scopeSelector}{${decls.join("")}}
+`;
+}
+function markSlottedSubtree(root) {
+  if (!root) return;
+  if (root.nodeType === Node.ELEMENT_NODE) {
+    root.setAttribute("data-sd-slotted", "");
+  }
+  if (root.querySelectorAll) {
+    root.querySelectorAll("*").forEach((el) => el.setAttribute("data-sd-slotted", ""));
+  }
+}
+function deepClone(node, sessionCache, options) {
   if (!node) throw new Error("Invalid node");
   const clonedAssignedNodes = /* @__PURE__ */ new Set();
   let pendingSelectValue = null;
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const tag = (node.localName || node.tagName || "").toLowerCase();
+    if (node.id === "snapdom-sandbox" || node.hasAttribute("data-snapdom-sandbox")) {
+      return null;
+    }
+    if (NO_CAPTURE_TAGS.has(tag)) {
+      return null;
+    }
+  }
   if (node.nodeType === Node.TEXT_NODE) {
     return node.cloneNode(true);
   }
@@ -545,7 +820,7 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
   }
   if (typeof options.filter === "function") {
     try {
-      if (!options.filter(node, originalRoot || node)) {
+      if (!options.filter(node)) {
         const spacer = document.createElement("div");
         const rect = node.getBoundingClientRect();
         spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
@@ -556,14 +831,23 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
     }
   }
   if (node.tagName === "IFRAME") {
-    const fallback = document.createElement("div");
-    fallback.style.cssText = `width:${node.offsetWidth}px;height:${node.offsetHeight}px;background-image:repeating-linear-gradient(45deg,#ddd,#ddd 5px,#f9f9f9 5px,#f9f9f9 10px);display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;border:1px solid #aaa;`;
-    return fallback;
+    if (options.placeholders) {
+      const fallback = document.createElement("div");
+      fallback.style.cssText = `width:${node.offsetWidth}px;height:${node.offsetHeight}px;background-image:repeating-linear-gradient(45deg,#ddd,#ddd 5px,#f9f9f9 5px,#f9f9f9 10px);display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;border:1px solid #aaa;`;
+      inlineAllStyles(node, fallback, sessionCache, options);
+      return fallback;
+    } else {
+      const rect = node.getBoundingClientRect();
+      const spacer = document.createElement("div");
+      spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+      inlineAllStyles(node, spacer, sessionCache, options);
+      return spacer;
+    }
   }
   if (node.getAttribute("data-capture") === "placeholder") {
     const clone2 = node.cloneNode(false);
-    nodeMap.set(clone2, node);
-    inlineAllStyles(node, clone2, styleMap, styleCache, compress);
+    sessionCache.nodeMap.set(clone2, node);
+    inlineAllStyles(node, clone2, sessionCache, options);
     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;`;
@@ -576,14 +860,14 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
     img.src = dataURL;
     img.width = node.width;
     img.height = node.height;
-    nodeMap.set(img, node);
-    inlineAllStyles(node, img, styleMap, styleCache, compress);
+    sessionCache.nodeMap.set(img, node);
+    inlineAllStyles(node, img, sessionCache, options);
     return img;
   }
   let clone;
   try {
     clone = node.cloneNode(false);
-    nodeMap.set(clone, node);
+    sessionCache.nodeMap.set(clone, node);
     if (node.tagName === "IMG") {
       freezeImgSrcset(node, clone);
     }
@@ -597,7 +881,6 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
     const rect = node.getBoundingClientRect();
     clone.style.width = `${rect.width}px`;
     clone.style.height = `${rect.height}px`;
-    return clone;
   }
   if (node instanceof HTMLInputElement) {
     clone.value = node.value;
@@ -611,47 +894,56 @@ function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {},
   if (node instanceof HTMLSelectElement) {
     pendingSelectValue = node.value;
   }
-  inlineAllStyles(node, clone, styleMap, styleCache, compress);
+  inlineAllStyles(node, clone, sessionCache, options);
   if (node.shadowRoot) {
-    const hasSlot = Array.from(node.shadowRoot.querySelectorAll("slot")).length > 0;
-    if (hasSlot) {
-      for (const child of node.shadowRoot.childNodes) {
-        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
-          const cssText = child.textContent || "";
-          if (cssText.trim() && compress) {
-            styleCache.set(child, cssText);
-          }
-        }
-      }
-    } else {
-      const shadowFrag = document.createDocumentFragment();
-      for (const child of node.shadowRoot.childNodes) {
-        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
-          const cssText = child.textContent || "";
-          if (cssText.trim() && compress) {
-            styleCache.set(child, cssText);
-          }
-          continue;
+    try {
+      const slots = node.shadowRoot.querySelectorAll("slot");
+      for (const s of slots) {
+        let assigned = [];
+        try {
+          assigned = s.assignedNodes?.({ flatten: true }) || s.assignedNodes?.() || [];
+        } catch {
+          assigned = s.assignedNodes?.() || [];
         }
-        const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
-        if (clonedChild) shadowFrag.appendChild(clonedChild);
+        for (const an of assigned) clonedAssignedNodes.add(an);
       }
-      clone.appendChild(shadowFrag);
+    } catch {
+    }
+    const scopeId = nextShadowScopeId(sessionCache);
+    const scopeSelector = `[data-sd="${scopeId}"]`;
+    try {
+      clone.setAttribute("data-sd", scopeId);
+    } catch {
+    }
+    const rawCSS = extractShadowCSS(node.shadowRoot);
+    const rewritten = rewriteShadowCSS(rawCSS, scopeSelector);
+    const neededVars = collectCustomPropsFromCSS(rawCSS);
+    const seed = buildSeedCustomPropsRule(node, neededVars, scopeSelector);
+    injectScopedStyle(clone, seed + rewritten, scopeId);
+    const shadowFrag = document.createDocumentFragment();
+    for (const child of node.shadowRoot.childNodes) {
+      if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") continue;
+      const clonedChild = deepClone(child, sessionCache, options);
+      if (clonedChild) shadowFrag.appendChild(clonedChild);
     }
+    clone.appendChild(shadowFrag);
   }
   if (node.tagName === "SLOT") {
     const assigned = node.assignedNodes?.({ flatten: true }) || [];
     const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
     const fragment = document.createDocumentFragment();
     for (const child of nodesToClone) {
-      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
-      if (clonedChild) fragment.appendChild(clonedChild);
+      const clonedChild = deepClone(child, sessionCache, options);
+      if (clonedChild) {
+        markSlottedSubtree(clonedChild);
+        fragment.appendChild(clonedChild);
+      }
     }
     return fragment;
   }
   for (const child of node.childNodes) {
     if (clonedAssignedNodes.has(child)) continue;
-    const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
+    const clonedChild = deepClone(child, sessionCache, options);
     if (clonedChild) clone.appendChild(clonedChild);
   }
   if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
@@ -694,7 +986,7 @@ function extendIconFonts(fonts) {
     }
   }
 }
-function isIconFont(input) {
+function isIconFont2(input) {
   const text = typeof input === "string" ? input : "";
   const candidates = [...defaultIconFonts, ...userIconFonts];
   for (const rx of candidates) {
@@ -741,247 +1033,620 @@ async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, c
     height
   };
 }
-function isStylesheetLoaded(href) {
-  return Array.from(document.styleSheets).some((sheet) => sheet.href === href);
-}
-function injectLinkIfMissing(href) {
-  return new Promise((resolve) => {
-    if (isStylesheetLoaded(href)) return resolve(null);
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = href;
-    link.setAttribute("data-snapdom", "injected-import");
-    link.onload = () => resolve(link);
-    link.onerror = () => resolve(null);
-    document.head.appendChild(link);
-  });
+var GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "emoji",
+  "math",
+  "fangsong",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded"
+]);
+function pickPrimaryFamily(familyList) {
+  if (!familyList) return "";
+  for (let raw of familyList.split(",")) {
+    let f = raw.trim().replace(/^['"]+|['"]+$/g, "");
+    if (!f) continue;
+    if (!GENERIC_FAMILIES.has(f.toLowerCase())) return f;
+  }
+  return "";
+}
+function normWeight(w) {
+  const t = String(w ?? "400").trim().toLowerCase();
+  if (t === "normal") return 400;
+  if (t === "bold") return 700;
+  const n = parseInt(t, 10);
+  return Number.isFinite(n) ? Math.min(900, Math.max(100, n)) : 400;
+}
+function normStyle(s) {
+  const t = String(s ?? "normal").trim().toLowerCase();
+  if (t.startsWith("italic")) return "italic";
+  if (t.startsWith("oblique")) return "oblique";
+  return "normal";
+}
+function normStretchPct(st) {
+  const m = String(st ?? "100%").match(/(\d+(?:\.\d+)?)\s*%/);
+  return m ? Math.max(50, Math.min(200, parseFloat(m[1]))) : 100;
 }
-async function embedCustomFonts({ preCached = false, localFonts = [], useProxy = "" } = {}) {
-  if (cache.resource.has("fonts-embed-css")) {
-    if (preCached) {
-      const style = document.createElement("style");
-      style.setAttribute("data-snapdom", "embedFonts");
-      style.textContent = cache.resource.get("fonts-embed-css");
-      document.head.appendChild(style);
+function parseWeightSpec(spec) {
+  const s = String(spec || "400").trim();
+  const m = s.match(/^(\d{2,3})\s+(\d{2,3})$/);
+  if (m) {
+    const a = normWeight(m[1]), b = normWeight(m[2]);
+    return { min: Math.min(a, b), max: Math.max(a, b) };
+  }
+  const v = normWeight(s);
+  return { min: v, max: v };
+}
+function parseStyleSpec(spec) {
+  const t = String(spec || "normal").trim().toLowerCase();
+  if (t === "italic") return { kind: "italic" };
+  if (t.startsWith("oblique")) return { kind: "oblique" };
+  return { kind: "normal" };
+}
+function parseStretchSpec(spec) {
+  const s = String(spec || "100%").trim();
+  const mm = s.match(/(\d+(?:\.\d+)?)\s*%\s+(\d+(?:\.\d+)?)\s*%/);
+  if (mm) {
+    const a = parseFloat(mm[1]), b = parseFloat(mm[2]);
+    return { min: Math.min(a, b), max: Math.max(a, b) };
+  }
+  const m = s.match(/(\d+(?:\.\d+)?)\s*%/);
+  const v = m ? parseFloat(m[1]) : 100;
+  return { min: v, max: v };
+}
+function isLikelyFontStylesheet(href, requiredFamilies) {
+  if (!href) return false;
+  try {
+    const u = new URL(href, location.href);
+    const sameOrigin = u.origin === location.origin;
+    if (sameOrigin) return true;
+    const host = u.host.toLowerCase();
+    const FONT_HOSTS = [
+      "fonts.googleapis.com",
+      "fonts.gstatic.com",
+      "use.typekit.net",
+      "p.typekit.net",
+      "kit.fontawesome.com",
+      "use.fontawesome.com"
+    ];
+    if (FONT_HOSTS.some((h) => host.endsWith(h))) return true;
+    const path = (u.pathname + u.search).toLowerCase();
+    if (/\bfont(s)?\b/.test(path) || /\.woff2?(\b|$)/.test(path)) return true;
+    for (const fam of requiredFamilies) {
+      const tokenA = fam.toLowerCase().replace(/\s+/g, "+");
+      const tokenB = fam.toLowerCase().replace(/\s+/g, "-");
+      if (path.includes(tokenA) || path.includes(tokenB)) return true;
     }
-    return cache.resource.get("fonts-embed-css");
+    return false;
+  } catch {
+    return false;
   }
-  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"}`);
+}
+function familiesFromRequired(required) {
+  const out = /* @__PURE__ */ new Set();
+  for (const k of required || []) {
+    const fam = String(k).split("__")[0]?.trim();
+    if (fam) out.add(fam);
+  }
+  return out;
+}
+async function embedCustomFonts({
+  required,
+  usedCodepoints,
+  exclude = void 0,
+  localFonts = [],
+  useProxy = ""
+} = {}) {
+  if (!(required instanceof Set)) required = /* @__PURE__ */ new Set();
+  if (!(usedCodepoints instanceof Set)) usedCodepoints = /* @__PURE__ */ new Set();
+  const requiredIndex = /* @__PURE__ */ new Map();
+  for (const key of required) {
+    const [fam, w, s, st] = String(key).split("__");
+    if (!fam) continue;
+    const arr = requiredIndex.get(fam) || [];
+    arr.push({ w: parseInt(w, 10), s, st: parseInt(st, 10) });
+    requiredIndex.set(fam, arr);
+  }
+  const IMPORT_RE = /@import\s+url\(["']?([^"')]+)["']?\)/g;
+  const URL_RE = /url\((["']?)([^"')]+)\1\)/g;
+  const FACE_RE = /@font-face[^{}]*\{[^}]*\}/g;
+  function faceMatchesRequired(fam, styleSpec, weightSpec, stretchSpec) {
+    if (!requiredIndex.has(fam)) return false;
+    const need = requiredIndex.get(fam);
+    const ws = parseWeightSpec(weightSpec);
+    const ss = parseStyleSpec(styleSpec);
+    const ts = parseStretchSpec(stretchSpec);
+    const faceIsRange = ws.min !== ws.max;
+    const faceSingleW = ws.min;
+    const styleOK = (reqKind) => ss.kind === "normal" && reqKind === "normal" || ss.kind !== "normal" && (reqKind === "italic" || reqKind === "oblique");
+    let exactMatched = false;
+    for (const r of need) {
+      const wOk = faceIsRange ? r.w >= ws.min && r.w <= ws.max : r.w === faceSingleW;
+      const sOk = styleOK(normStyle(r.s));
+      const tOk = r.st >= ts.min && r.st <= ts.max;
+      if (wOk && sOk && tOk) {
+        exactMatched = true;
+        break;
       }
     }
-  } catch {
+    if (exactMatched) return true;
+    if (!faceIsRange) {
+      for (const r of need) {
+        const sOk = styleOK(normStyle(r.s));
+        const tOk = r.st >= ts.min && r.st <= ts.max;
+        const nearWeight = Math.abs(faceSingleW - r.w) <= 300;
+        if (nearWeight && sOk && tOk) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  function parseUnicodeRange(ur) {
+    if (!ur) return [];
+    const ranges = [];
+    const parts = ur.split(",").map((s) => s.trim()).filter(Boolean);
+    for (const p of parts) {
+      const m = p.match(/^U\+([0-9A-Fa-f?]+)(?:-([0-9A-Fa-f?]+))?$/);
+      if (!m) continue;
+      const a = m[1], b = m[2];
+      const expand = (hex) => {
+        if (!hex.includes("?")) return parseInt(hex, 16);
+        const min = parseInt(hex.replace(/\?/g, "0"), 16);
+        const max = parseInt(hex.replace(/\?/g, "F"), 16);
+        return [min, max];
+      };
+      if (b) {
+        const A = expand(a), B = expand(b);
+        const min = Array.isArray(A) ? A[0] : A;
+        const max = Array.isArray(B) ? B[1] : B;
+        ranges.push([Math.min(min, max), Math.max(min, max)]);
+      } else {
+        const X = expand(a);
+        if (Array.isArray(X)) ranges.push([X[0], X[1]]);
+        else ranges.push([X, X]);
+      }
+    }
+    return ranges;
+  }
+  function unicodeIntersects(used, ranges) {
+    if (!ranges.length) return true;
+    if (!used || used.size === 0) return true;
+    for (const cp of used) {
+      for (const [a, b] of ranges) if (cp >= a && cp <= b) return true;
+    }
+    return false;
+  }
+  function extractSrcUrls(srcValue, baseHref) {
+    const urls = [];
+    if (!srcValue) return urls;
+    for (const m of srcValue.matchAll(URL_RE)) {
+      let u = (m[2] || "").trim();
+      if (!u || u.startsWith("data:")) continue;
+      if (!/^https?:/i.test(u)) {
+        try {
+          u = new URL(u, baseHref || location.href).href;
+        } catch {
+        }
+      }
+      urls.push(u);
+    }
+    return urls;
+  }
+  async function inlineUrlsInCssBlock(cssBlock, baseHref) {
+    let out = cssBlock;
+    for (const m of cssBlock.matchAll(URL_RE)) {
+      const raw = extractURL(m[0]);
+      if (!raw) continue;
+      let abs = raw;
+      if (!abs.startsWith("http") && !abs.startsWith("data:")) {
+        try {
+          abs = new URL(abs, baseHref || location.href).href;
+        } catch {
+        }
+      }
+      if (isIconFont2(abs)) continue;
+      if (cache.resource?.has(abs)) {
+        cache.font?.add(abs);
+        out = out.replace(m[0], `url(${cache.resource.get(abs)})`);
+        continue;
+      }
+      if (cache.font?.has(abs)) continue;
+      try {
+        const r = await snapFetch(abs, { as: "dataURL", useProxy, silent: true });
+        if (r.ok && typeof r.data === "string") {
+          const b64 = r.data;
+          cache.resource?.set(abs, b64);
+          cache.font?.add(abs);
+          out = out.replace(m[0], `url(${b64})`);
+        }
+      } catch {
+        console.warn("[snapDOM] Failed to fetch font resource:", abs);
+      }
+    }
+    return out;
+  }
+  function subsetFromRanges(ranges) {
+    if (!ranges.length) return null;
+    const hit = (a, b) => ranges.some(([x, y]) => !(y < a || x > b));
+    const latin = hit(0, 255) || hit(305, 305);
+    const latinExt = hit(256, 591) || hit(7680, 7935);
+    const greek = hit(880, 1023);
+    const cyr = hit(1024, 1279);
+    const viet = hit(7840, 7929) || hit(258, 259) || hit(416, 417) || hit(431, 432);
+    if (viet) return "vietnamese";
+    if (cyr) return "cyrillic";
+    if (greek) return "greek";
+    if (latinExt) return "latin-ext";
+    if (latin) return "latin";
+    return null;
+  }
+  function buildSimpleExcluder(ex = {}) {
+    const famSet = new Set((ex.families || []).map((s) => String(s).toLowerCase()));
+    const domSet = new Set((ex.domains || []).map((s) => String(s).toLowerCase()));
+    const subSet = new Set((ex.subsets || []).map((s) => String(s).toLowerCase()));
+    return (meta, parsedRanges) => {
+      if (famSet.size && famSet.has(meta.family.toLowerCase())) return true;
+      if (domSet.size) {
+        for (const u of meta.srcUrls) {
+          try {
+            if (domSet.has(new URL(u).host.toLowerCase())) return true;
+          } catch {
+          }
+        }
+      }
+      if (subSet.size) {
+        const label = subsetFromRanges(parsedRanges);
+        if (label && subSet.has(label)) return true;
+      }
+      return false;
+    };
   }
-  const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
-  const styleImports = [];
+  const simpleExcluder = buildSimpleExcluder(exclude);
+  function dedupeFontFaces(cssText) {
+    if (!cssText) return cssText;
+    const FACE_RE2 = /@font-face[^{}]*\{[^}]*\}/gi;
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const block of cssText.match(FACE_RE2) || []) {
+      const familyRaw = block.match(/font-family:\s*([^;]+);/i)?.[1] || "";
+      const family = pickPrimaryFamily(familyRaw);
+      const weightSpec = (block.match(/font-weight:\s*([^;]+);/i)?.[1] || "400").trim();
+      const styleSpec = (block.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
+      const stretchSpec = (block.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
+      const urange = (block.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
+      const srcRaw = (block.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+      const urls = extractSrcUrls(srcRaw, location.href);
+      const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
+      const key = [
+        String(family || "").toLowerCase(),
+        weightSpec,
+        styleSpec,
+        stretchSpec,
+        urange.toLowerCase(),
+        srcPart
+      ].join("|");
+      if (!seen.has(key)) {
+        seen.add(key);
+        out.push(block);
+      }
+    }
+    if (out.length === 0) return cssText;
+    let i = 0;
+    return cssText.replace(FACE_RE2, () => out[i++] || "");
+  }
+  function buildFontsCacheKey() {
+    const req = Array.from(required || []).sort().join("|");
+    const ex = exclude ? JSON.stringify({
+      families: (exclude.families || []).map((s) => String(s).toLowerCase()).sort(),
+      domains: (exclude.domains || []).map((s) => String(s).toLowerCase()).sort(),
+      subsets: (exclude.subsets || []).map((s) => String(s).toLowerCase()).sort()
+    }) : "";
+    const lf = (localFonts || []).map((f) => `${(f.family || "").toLowerCase()}::${f.weight || "normal"}::${f.style || "normal"}::${f.src || ""}`).sort().join("|");
+    const px = useProxy || "";
+    return `fonts-embed-css::req=${req}::ex=${ex}::lf=${lf}::px=${px}`;
+  }
+  const cacheKey = buildFontsCacheKey();
+  if (cache.resource?.has(cacheKey)) {
+    const css = cache.resource.get(cacheKey);
+    return css;
+  }
+  const requiredFamilies = familiesFromRequired(required);
+  const importUrls = [];
   for (const styleTag of document.querySelectorAll("style")) {
     const cssText = styleTag.textContent || "";
-    const matches = Array.from(cssText.matchAll(importRegex));
-    for (const match of matches) {
-      const importUrl = match[1];
-      if (isIconFont(importUrl)) continue;
-      if (!isStylesheetLoaded(importUrl)) {
-        styleImports.push(importUrl);
-      }
+    for (const m of cssText.matchAll(IMPORT_RE)) {
+      const u = m[1];
+      if (!u || isIconFont2(u)) continue;
+      const hasLink = !!document.querySelector(`link[rel="stylesheet"][href="${u}"]`);
+      if (!hasLink) importUrls.push(u);
     }
   }
-  await Promise.all(styleImports.map(injectLinkIfMissing));
-  const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).filter((link) => link.href);
+  if (importUrls.length) {
+    await Promise.all(importUrls.map((u) => new Promise((resolve) => {
+      if (document.querySelector(`link[rel="stylesheet"][href="${u}"]`)) return resolve(null);
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = u;
+      link.setAttribute("data-snapdom", "injected-import");
+      link.onload = () => resolve(link);
+      link.onerror = () => resolve(null);
+      document.head.appendChild(link);
+    })));
+  }
   let finalCSS = "";
-  for (const link of links) {
+  const linkNodes = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).filter((l) => !!l.href);
+  for (const link of linkNodes) {
     try {
-      const res = await fetchResource(link.href, { useProxy });
-      const cssText = await res.text();
-      if (isIconFont(link.href) || isIconFont(cssText)) continue;
-      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) {
+      if (isIconFont2(link.href)) continue;
+      let cssText = "";
+      let sameOrigin = false;
+      try {
+        sameOrigin = new URL(link.href, location.href).origin === location.origin;
+      } catch {
+      }
+      if (!sameOrigin) {
+        if (!isLikelyFontStylesheet(link.href, requiredFamilies)) continue;
+      }
+      if (sameOrigin) {
+        const sheet = Array.from(document.styleSheets).find((s) => s.href === link.href);
+        if (sheet) {
+          try {
+            const rules = sheet.cssRules || [];
+            cssText = Array.from(rules).map((r) => r.cssText).join("");
+          } catch {
+          }
+        }
+      }
+      if (!cssText) {
+        const res = await snapFetch(link.href, { as: "text", useProxy });
+        cssText = res.data;
+        if (isIconFont2(link.href)) continue;
+      }
+      let facesOut = "";
+      for (const face of cssText.match(FACE_RE) || []) {
+        const famRaw = (face.match(/font-family:\s*([^;]+);/i)?.[1] || "").trim();
+        const family = pickPrimaryFamily(famRaw);
+        if (!family || isIconFont2(family)) {
           continue;
         }
-        if (!loadedFonts.has(key)) {
-          cssFinal = cssFinal.replace(face, "");
+        const weightSpec = (face.match(/font-weight:\s*([^;]+);/i)?.[1] || "400").trim();
+        const styleSpec = (face.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
+        const stretchSpec = (face.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
+        const urange = (face.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
+        const srcRaw = (face.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+        const srcUrls = extractSrcUrls(srcRaw, link.href);
+        if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) {
           continue;
         }
-        let inlined = face;
-        const matches = Array.from(face.matchAll(urlRegex));
-        for (const match of matches) {
-          let rawUrl = extractURL(match[0]);
-          if (!rawUrl) continue;
-          let url = rawUrl;
-          if (!url.startsWith("http") && !url.startsWith("data:")) {
-            url = new URL(url, link.href).href;
-          }
-          if (isIconFont(url)) continue;
-          if (cache.resource.has(url)) {
-            cache.font.add(url);
-            inlined = inlined.replace(match[0], `url(${cache.resource.get(url)})`);
-            continue;
-          }
-          if (cache.font.has(url)) continue;
-          try {
-            const fontRes = await fetchResource(url, { useProxy });
-            const blob = await fontRes.blob();
-            const b64 = await new Promise((resolve) => {
-              const reader = new FileReader();
-              reader.onload = () => resolve(reader.result);
-              reader.readAsDataURL(blob);
-            });
-            cache.resource.set(url, b64);
-            cache.font.add(url);
-            inlined = inlined.replace(match[0], `url(${b64})`);
-          } catch (e) {
-            console.warn("[snapdom] Failed to fetch font resource:", url);
-          }
+        const ranges = parseUnicodeRange(urange);
+        if (!unicodeIntersects(usedCodepoints, ranges)) {
+          continue;
+        }
+        const meta = { family, weightSpec, styleSpec, stretchSpec, unicodeRange: urange, srcRaw, srcUrls, href: link.href };
+        if (exclude && simpleExcluder(meta, ranges)) {
+          continue;
         }
-        cssFinal = cssFinal.replace(face, inlined);
+        const newFace = /url\(/i.test(srcRaw) ? await inlineUrlsInCssBlock(face, link.href) : face;
+        facesOut += newFace + "";
       }
-      finalCSS += cssFinal + "\n";
+      if (facesOut.trim()) finalCSS += facesOut + "";
     } catch (e) {
-      console.warn("[snapdom] Failed to fetch CSS:", link.href);
+      console.warn("[snapdom] Failed to process stylesheet:", link.href);
     }
   }
   for (const sheet of document.styleSheets) {
     try {
-      if (!sheet.href || links.every((link) => link.href !== sheet.href)) {
-        for (const rule of sheet.cssRules) {
-          if (rule.type === CSSRule.FONT_FACE_RULE) {
-            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:${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) {
-              let rawUrl = match[2].trim();
-              if (!rawUrl) continue;
-              let url = rawUrl;
-              if (!url.startsWith("http") && !url.startsWith("data:")) {
-                url = new URL(url, sheet.href || location.href).href;
-              }
-              if (isIconFont(url)) continue;
-              if (cache.resource.has(url)) {
-                cache.font.add(url);
-                inlinedSrc = inlinedSrc.replace(match[0], `url(${cache.resource.get(url)})`);
-                continue;
-              }
-              if (cache.font.has(url)) continue;
-              try {
-                const res = await fetchResource(url, { useProxy });
-                const blob = await res.blob();
-                const b64 = await new Promise((resolve) => {
-                  const reader = new FileReader();
-                  reader.onload = () => resolve(reader.result);
-                  reader.readAsDataURL(blob);
-                });
-                cache.resource.set(url, b64);
-                cache.font.add(url);
-                inlinedSrc = inlinedSrc.replace(match[0], `url(${b64})`);
-              } catch (e) {
-                console.warn("[snapdom] Failed to fetch font URL:", url);
-              }
-            }
-            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleVal};font-weight:${weightVal};}`;
-          }
+      if (sheet.href && linkNodes.some((l) => l.href === sheet.href)) continue;
+      const rules = sheet.cssRules || [];
+      for (const rule of rules) {
+        if (rule.type !== CSSRule.FONT_FACE_RULE) continue;
+        const famRaw = (rule.style.getPropertyValue("font-family") || "").trim();
+        const family = pickPrimaryFamily(famRaw);
+        if (!family || isIconFont2(family)) continue;
+        const weightSpec = (rule.style.getPropertyValue("font-weight") || "400").trim();
+        const styleSpec = (rule.style.getPropertyValue("font-style") || "normal").trim();
+        const stretchSpec = (rule.style.getPropertyValue("font-stretch") || "100%").trim();
+        const srcRaw = (rule.style.getPropertyValue("src") || "").trim();
+        const urange = (rule.style.getPropertyValue("unicode-range") || "").trim();
+        const srcUrls = extractSrcUrls(srcRaw, sheet.href || location.href);
+        if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
+        const ranges = parseUnicodeRange(urange);
+        if (!unicodeIntersects(usedCodepoints, ranges)) continue;
+        const meta = { family, weightSpec, styleSpec, stretchSpec, unicodeRange: urange, srcRaw, srcUrls, href: sheet.href || location.href };
+        if (exclude && simpleExcluder(meta, ranges)) continue;
+        if (/url\(/i.test(srcRaw)) {
+          const inlinedSrc = await inlineUrlsInCssBlock(srcRaw, sheet.href || location.href);
+          finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`;
+        } else {
+          finalCSS += `@font-face{font-family:${family};src:${srcRaw};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`;
         }
       }
-    } catch (e) {
-      console.warn("[snapdom] Cannot access stylesheet", sheet.href, e);
-    }
-  }
-  for (const font of document.fonts) {
-    if (font.family && font.status === "loaded" && font._snapdomSrc) {
-      if (isIconFont(font.family)) continue;
-      let b64 = font._snapdomSrc;
-      if (!b64.startsWith("data:")) {
-        if (cache.resource.has(font._snapdomSrc)) {
-          b64 = cache.resource.get(font._snapdomSrc);
-          cache.font.add(font._snapdomSrc);
-        } else if (!cache.font.has(font._snapdomSrc)) {
+    } catch {
+    }
+  }
+  try {
+    for (const f of document.fonts || []) {
+      if (!f || !f.family || f.status !== "loaded" || !f._snapdomSrc) continue;
+      const fam = String(f.family).replace(/^['"]+|['"]+$/g, "");
+      if (isIconFont2(fam)) continue;
+      if (!requiredIndex.has(fam)) continue;
+      if (exclude?.families && exclude.families.some((n) => String(n).toLowerCase() === fam.toLowerCase())) {
+        continue;
+      }
+      let b64 = f._snapdomSrc;
+      if (!String(b64).startsWith("data:")) {
+        if (cache.resource?.has(f._snapdomSrc)) {
+          b64 = cache.resource.get(f._snapdomSrc);
+          cache.font?.add(f._snapdomSrc);
+        } else if (!cache.font?.has(f._snapdomSrc)) {
           try {
-            const res = await fetchResource(font._snapdomSrc, { 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(font._snapdomSrc, b64);
-            cache.font.add(font._snapdomSrc);
-          } catch (e) {
-            console.warn("[snapdom] Failed to fetch dynamic font src:", font._snapdomSrc);
+            const r = await snapFetch(f._snapdomSrc, { as: "dataURL", useProxy, silent: true });
+            if (r.ok && typeof r.data === "string") {
+              b64 = r.data;
+              cache.resource?.set(f._snapdomSrc, b64);
+              cache.font?.add(f._snapdomSrc);
+            } else {
+              continue;
+            }
+          } catch {
+            console.warn("[snapdom] Failed to fetch dynamic font src:", f._snapdomSrc);
             continue;
           }
         }
       }
-      finalCSS += `@font-face{font-family:'${font.family}';src:url(${b64});font-style:${font.style || "normal"};font-weight:${font.weight || "normal"};}`;
+      finalCSS += `@font-face{font-family:'${fam}';src:url(${b64});font-style:${f.style || "normal"};font-weight:${f.weight || "normal"};}`;
     }
+  } catch {
   }
   for (const font of localFonts) {
     if (!font || typeof font !== "object") continue;
-    const { family, src, weight = "normal", style = "normal" } = font;
-    if (!family || !src) continue;
+    const family = String(font.family || "").replace(/^['"]+|['"]+$/g, "");
+    if (!family || isIconFont2(family)) continue;
+    if (!requiredIndex.has(family)) continue;
+    if (exclude?.families && exclude.families.some((n) => String(n).toLowerCase() === family.toLowerCase())) continue;
+    const weight = font.weight != null ? String(font.weight) : "normal";
+    const style = font.style != null ? String(font.style) : "normal";
+    const stretch = font.stretchPct != null ? `${font.stretchPct}%` : "100%";
+    const src = String(font.src || "");
     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;
+      if (cache.resource?.has(src)) {
+        b64 = cache.resource.get(src);
+        cache.font?.add(src);
+      } else if (!cache.font?.has(src)) {
+        try {
+          const r = await snapFetch(src, { as: "dataURL", useProxy, silent: true });
+          if (r.ok && typeof r.data === "string") {
+            b64 = r.data;
+            cache.resource?.set(src, b64);
+            cache.font?.add(src);
+          } else {
+            continue;
+          }
+        } catch {
+          console.warn("[snapdom] Failed to fetch localFonts src:", 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};}`;
+    finalCSS += `@font-face{font-family:'${family}';src:url(${b64});font-style:${style};font-weight:${weight};font-stretch:${stretch};}`;
   }
   if (finalCSS) {
-    cache.resource.set("fonts-embed-css", finalCSS);
-    if (preCached) {
-      const style = document.createElement("style");
-      style.setAttribute("data-snapdom", "embedFonts");
-      style.textContent = finalCSS;
-      document.head.appendChild(style);
-    }
+    finalCSS = dedupeFontFaces(finalCSS);
+    cache.resource?.set(cacheKey, finalCSS);
   }
   return finalCSS;
 }
+function collectUsedFontVariants(root) {
+  const req = /* @__PURE__ */ new Set();
+  if (!root) return req;
+  const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
+  const addFromStyle = (cs) => {
+    const family = pickPrimaryFamily(cs.fontFamily);
+    if (!family) return;
+    const key = (w, s, st) => `${family}__${normWeight(w)}__${normStyle(s)}__${normStretchPct(st)}`;
+    req.add(key(cs.fontWeight, cs.fontStyle, cs.fontStretch));
+  };
+  addFromStyle(getComputedStyle(root));
+  const csBeforeRoot = getComputedStyle(root, "::before");
+  if (csBeforeRoot && csBeforeRoot.content && csBeforeRoot.content !== "none") addFromStyle(csBeforeRoot);
+  const csAfterRoot = getComputedStyle(root, "::after");
+  if (csAfterRoot && csAfterRoot.content && csAfterRoot.content !== "none") addFromStyle(csAfterRoot);
+  while (tw.nextNode()) {
+    const el = (
+      /** @type {Element} */
+      tw.currentNode
+    );
+    const cs = getComputedStyle(el);
+    addFromStyle(cs);
+    const b = getComputedStyle(el, "::before");
+    if (b && b.content && b.content !== "none") addFromStyle(b);
+    const a = getComputedStyle(el, "::after");
+    if (a && a.content && a.content !== "none") addFromStyle(a);
+  }
+  return req;
+}
+function collectUsedCodepoints(root) {
+  const used = /* @__PURE__ */ new Set();
+  const pushText = (txt) => {
+    if (!txt) return;
+    for (const ch of txt) used.add(ch.codePointAt(0));
+  };
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null);
+  while (walker.nextNode()) {
+    const n = walker.currentNode;
+    if (n.nodeType === Node.TEXT_NODE) {
+      pushText(n.nodeValue || "");
+    } else if (n.nodeType === Node.ELEMENT_NODE) {
+      const el = (
+        /** @type {Element} */
+        n
+      );
+      for (const pseudo of ["::before", "::after"]) {
+        const cs = getComputedStyle(el, pseudo);
+        const c = cs?.getPropertyValue("content");
+        if (!c || c === "none") continue;
+        if (/^"/.test(c) || /^'/.test(c)) {
+          pushText(c.slice(1, -1));
+        } else {
+          const matches = c.match(/\\[0-9A-Fa-f]{1,6}/g);
+          if (matches) {
+            for (const m of matches) {
+              try {
+                used.add(parseInt(m.slice(1), 16));
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  return used;
+}
+async function ensureFontsReady(families, warmupRepetitions = 1) {
+  try {
+    await document.fonts.ready;
+  } catch {
+  }
+  const fams = Array.from(families || []).filter(Boolean);
+  if (fams.length === 0) return;
+  const warmupOnce = () => {
+    const container = document.createElement("div");
+    container.style.cssText = `position: absolute !important;left: -9999px !important;top: 0 !important;opacity: 0 !important;pointer-events: none !important;contain: layout size style;`;
+    for (const fam of fams) {
+      const span = document.createElement("span");
+      span.textContent = "AaBbGg1234\xC1\xC9\xCD\xD3\xDA\xE7\xF1\u2014\u221E";
+      span.style.fontFamily = `"${fam}"`;
+      span.style.fontWeight = "700";
+      span.style.fontStyle = "italic";
+      span.style.fontSize = "32px";
+      span.style.lineHeight = "1";
+      span.style.whiteSpace = "nowrap";
+      span.style.margin = "0";
+      span.style.padding = "0";
+      container.appendChild(span);
+    }
+    document.body.appendChild(container);
+    container.offsetWidth;
+    document.body.removeChild(container);
+  };
+  for (let i = 0; i < Math.max(1, warmupRepetitions); i++) {
+    warmupOnce();
+    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+  }
+}
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, styleMap, styleCache, options) {
+async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
@@ -1006,8 +1671,8 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, options
         span.textContent = first;
         span.dataset.snapdomPseudo = "::first-letter";
         const snapshot2 = snapshotComputedStyle(style);
-        const key2 = getStyleKey(snapshot2, "span", options);
-        styleMap.set(span, key2);
+        const key2 = getStyleKey(snapshot2, "span");
+        sessionCache.styleMap.set(span, key2);
         const restNode = document.createTextNode(rest);
         clone.replaceChild(restNode, textNode);
         clone.insertBefore(span, restNode);
@@ -1027,7 +1692,7 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, options
       const borderStyle = style.borderStyle;
       const borderWidth = parseFloat(style.borderWidth);
       const transform = style.transform;
-      const isIconFont2 = isIconFont(fontFamily);
+      const isIconFont22 = isIconFont2(fontFamily);
       const hasExplicitContent = content !== "none" && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
@@ -1040,9 +1705,9 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, options
       pseudoEl.dataset.snapdomPseudo = pseudo;
       pseudoEl.style.verticalAlign = "middle";
       const snapshot = snapshotComputedStyle(style);
-      const key = getStyleKey(snapshot, "span", options);
-      styleMap.set(pseudoEl, key);
-      if (isIconFont2 && cleanContent.length === 1) {
+      const key = getStyleKey(snapshot, "span");
+      sessionCache.styleMap.set(pseudoEl, key);
+      if (isIconFont22 && cleanContent.length === 1) {
         const { dataUrl, width: width2, height: height2 } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
         const imgEl = document.createElement("img");
         imgEl.src = dataUrl;
@@ -1054,15 +1719,15 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, options
         if (rawUrl?.trim()) {
           try {
             const imgEl = document.createElement("img");
-            const dataUrl = await fetchImage(safeEncodeURI(rawUrl), options);
-            imgEl.src = dataUrl;
+            const dataUrl = await snapFetch(safeEncodeURI(rawUrl), { as: "dataURL", useProxy: options.useProxy });
+            imgEl.src = dataUrl.data;
             imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
             pseudoEl.appendChild(imgEl);
           } catch (e) {
             console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
           }
         }
-      } else if (!isIconFont2 && hasExplicitContent) {
+      } else if (!isIconFont22 && hasExplicitContent) {
         pseudoEl.textContent = cleanContent;
       }
       if (hasBg) {
@@ -1090,7 +1755,7 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, options
   const sChildren = Array.from(source.children);
   const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
   for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-    await inlinePseudoElements(sChildren[i], cChildren[i], styleMap, styleCache, options);
+    await inlinePseudoElements(sChildren[i], cChildren[i], sessionCache, options);
   }
 }
 
@@ -1145,12 +1810,15 @@ function inlineExternalDefsAndSymbols(rootElement) {
 }
 
 // src/core/prepare.js
-async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
-  const styleMap = /* @__PURE__ */ new Map();
-  const styleCache = /* @__PURE__ */ new WeakMap();
-  const nodeMap = /* @__PURE__ */ new Map();
+async function prepareClone(element, options = {}) {
+  const sessionCache = {
+    styleMap: cache.session.styleMap,
+    styleCache: cache.session.styleCache,
+    nodeMap: cache.session.nodeMap
+  };
   let clone;
   let classCSS = "";
+  let shadowScopedCSS = "";
   stabilizeLayout(element);
   try {
     inlineExternalDefsAndSymbols(element);
@@ -1158,43 +1826,45 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     console.warn("inlineExternal defs or symbol failed:", e);
   }
   try {
-    clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
+    clone = deepClone(element, sessionCache, options, element);
   } catch (e) {
     console.warn("deepClone failed:", e);
     throw e;
   }
   try {
-    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
+    await inlinePseudoElements(element, clone, sessionCache, options);
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
   await resolveBlobUrlsInTree(clone);
-  if (compress) {
-    const keyToClass = generateCSSClasses(styleMap);
-    classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
-    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;
-      const hasIcon = node.dataset?.snapdomHasIcon;
-      if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
-      if (hasIcon) {
-        node.style.verticalAlign = "middle";
-        node.style.display = "inline";
-      }
+  try {
+    const styleNodes = clone.querySelectorAll("style[data-sd]");
+    for (const s of styleNodes) {
+      shadowScopedCSS += s.textContent || "";
+      s.remove();
     }
-  } else {
-    for (const [node, key] of styleMap.entries()) {
-      if (node.tagName === "STYLE") continue;
+  } catch {
+  }
+  const keyToClass = generateCSSClasses(sessionCache.styleMap);
+  classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
+  classCSS = shadowScopedCSS + classCSS;
+  for (const [node, key] of sessionCache.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;
+    const hasIcon = node.dataset?.snapdomHasIcon;
+    if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+    if (hasIcon) {
+      node.style.verticalAlign = "middle";
+      node.style.display = "inline";
     }
   }
-  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+  for (const [cloneNode, originalNode] of sessionCache.nodeMap.entries()) {
     const scrollX = originalNode.scrollLeft;
     const scrollY = originalNode.scrollTop;
     const hasScroll = scrollX || scrollY;
@@ -1213,9 +1883,9 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       cloneNode.appendChild(inner);
     }
   }
-  if (element === nodeMap.get(clone)) {
-    const computed = styleCache.get(element) || window.getComputedStyle(element);
-    styleCache.set(element, computed);
+  if (element === sessionCache.nodeMap.get(clone)) {
+    const computed = sessionCache.styleCache.get(element) || window.getComputedStyle(element);
+    sessionCache.styleCache.set(element, computed);
     const transform = stripTranslate(computed.transform);
     clone.style.margin = "0";
     clone.style.position = "static";
@@ -1228,13 +1898,13 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     clone.style.clear = "none";
     clone.style.transform = transform || "";
   }
-  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+  for (const [cloneNode, originalNode] of sessionCache.nodeMap.entries()) {
     if (originalNode.tagName === "PRE") {
       cloneNode.style.marginTop = "0";
       cloneNode.style.marginBlockStart = "0";
     }
   }
-  return { clone, classCSS, styleCache };
+  return { clone, classCSS, styleCache: sessionCache.styleCache };
 }
 function stabilizeLayout(element) {
   const style = getComputedStyle(element);
@@ -1250,22 +1920,25 @@ function stabilizeLayout(element) {
 }
 var _blobToDataUrlCache = /* @__PURE__ */ new Map();
 async function blobUrlToDataUrl(blobUrl) {
+  if (cache.resource?.has(blobUrl)) return cache.resource.get(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;
+  const p = (async () => {
+    const r = await snapFetch(blobUrl, { as: "dataURL", silent: true });
+    if (!r.ok || typeof r.data !== "string") {
+      throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
+    }
+    cache.resource?.set(blobUrl, r.data);
+    return r.data;
+  })();
+  _blobToDataUrlCache.set(blobUrl, p);
+  try {
+    const data = await p;
+    _blobToDataUrlCache.set(blobUrl, data);
+    return data;
+  } catch (e) {
+    _blobToDataUrlCache.delete(blobUrl);
+    throw e;
+  }
 }
 var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
 async function replaceBlobUrlsInCssText(cssText) {
@@ -1382,17 +2055,36 @@ async function inlineImages(clone, options = {}) {
     }
     img.removeAttribute("srcset");
     img.removeAttribute("sizes");
-    const src = img.src;
-    try {
-      const dataUrl = await fetchImage(src, { useProxy: options.useProxy });
-      img.src = dataUrl;
+    const src = img.src || "";
+    if (!src) return;
+    const r = await snapFetch(src, { as: "dataURL", useProxy: options.useProxy });
+    if (r.ok && typeof r.data === "string" && r.data.startsWith("data:")) {
+      img.src = r.data;
       if (!img.width) img.width = img.naturalWidth || 100;
       if (!img.height) img.height = img.naturalHeight || 100;
-    } catch {
+      return;
+    }
+    const w = img.width || img.naturalWidth || 100;
+    const h = img.height || img.naturalHeight || 100;
+    if (options.placeholders !== false) {
       const fallback = document.createElement("div");
-      fallback.style = `width: ${img.width || 100}px; height: ${img.height || 100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${img.height || 100}px; color: #666; font-size: 12px;`;
-      fallback.innerText = "img";
+      fallback.style.cssText = [
+        `width:${w}px`,
+        `height:${h}px`,
+        "background:#ccc",
+        "display:inline-block",
+        "text-align:center",
+        `line-height:${h}px`,
+        "color:#666",
+        "font-size:12px",
+        "overflow:hidden"
+      ].join(";");
+      fallback.textContent = "img";
       img.replaceWith(fallback);
+    } else {
+      const spacer = document.createElement("div");
+      spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`;
+      img.replaceWith(spacer);
     }
   };
   for (let i = 0; i < imgs.length; i += 4) {
@@ -1443,10 +2135,6 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
         cloneNode.style.setProperty(prop, inlined.join(", "));
       }
     }
-    const bgColor = style.getPropertyValue("background-color");
-    if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") {
-      cloneNode.style.backgroundColor = bgColor;
-    }
     const sChildren = Array.from(srcNode.children);
     const cChildren = Array.from(cloneNode.children);
     for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
@@ -1456,16 +2144,16 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
 }
 
 // src/core/capture.js
-async function captureDOM(element, 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 = "", localFonts = [] } = options;
+  applyCachePolicy(options.cache);
+  const fast = options.fast;
   let clone, classCSS, styleCache;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
+  ({ clone, classCSS, styleCache } = await prepareClone(element, options));
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -1478,28 +2166,34 @@ async function captureDOM(element, options = {}) {
       resolve();
     }, { fast });
   });
-  if (embedFonts) {
+  if (options.embedFonts) {
     await new Promise((resolve) => {
       idle(async () => {
-        fontsCSS = await embedCustomFonts({ localFonts, useProxy });
+        const required = collectUsedFontVariants(element);
+        const usedCodepoints = collectUsedCodepoints(element);
+        if (isSafari) {
+          const families = new Set(
+            Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
+          );
+          await ensureFontsReady(families, 2);
+        }
+        fontsCSS = await embedCustomFonts({ required, usedCodepoints, preCached: false, exclude: options.excludeFonts, useProxy: options.useProxy });
         resolve();
       }, { fast });
     });
   }
-  if (compress) {
-    const usedTags = collectUsedTagNames(clone).sort();
-    const tagKey = usedTags.join(",");
-    if (cache.baseStyle.has(tagKey)) {
-      baseCSS = cache.baseStyle.get(tagKey);
-    } else {
-      await new Promise((resolve) => {
-        idle(() => {
-          baseCSS = generateDedupedBaseCSS(usedTags);
-          cache.baseStyle.set(tagKey, baseCSS);
-          resolve();
-        }, { fast });
-      });
-    }
+  const usedTags = collectUsedTagNames(clone).sort();
+  const tagKey = usedTags.join(",");
+  if (cache.baseStyle.has(tagKey)) {
+    baseCSS = cache.baseStyle.get(tagKey);
+  } else {
+    await new Promise((resolve) => {
+      idle(() => {
+        baseCSS = generateDedupedBaseCSS(usedTags);
+        cache.baseStyle.set(tagKey, baseCSS);
+        resolve();
+      }, { fast });
+    });
   }
   await new Promise((resolve) => {
     idle(() => {
@@ -1557,192 +2251,235 @@ async function captureDOM(element, options = {}) {
   return dataURL;
 }
 
-// src/api/snapdom.js
-async function toImg(url, { scale = 1 } = {}) {
+// src/core/context.js
+function normalizeCachePolicy(v) {
+  if (v === true) return "soft";
+  if (v === false) return "disabled";
+  if (typeof v === "string") {
+    const s = v.toLowerCase().trim();
+    if (s === "disabled" || s === "full" || s === "auto" || s === "soft") return (
+      /** @type {CachePolicy} */
+      s
+    );
+  }
+  return "soft";
+}
+function createContext(options = {}) {
+  const resolvedFormat = options.format ?? "png";
+  const cachePolicy = normalizeCachePolicy(options.cache);
+  return {
+    // Debug & perf
+    debug: options.debug ?? false,
+    fast: options.fast ?? true,
+    scale: options.scale ?? 1,
+    // DOM filters
+    exclude: options.exclude ?? [],
+    filter: options.filter ?? null,
+    placeholders: options.placeholders !== false,
+    // default true
+    // Fuentes
+    embedFonts: options.embedFonts ?? false,
+    iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
+    localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
+    excludeFonts: options.excludeFonts ?? void 0,
+    /** Cache policy (disabled|full|auto|soft). Default: "soft" */
+    /** @type {CachePolicy} */
+    cache: cachePolicy,
+    // Red
+    useProxy: typeof options.useProxy === "string" ? options.useProxy : "",
+    // Salida
+    width: options.width ?? null,
+    height: options.height ?? null,
+    format: resolvedFormat,
+    type: options.type ?? "svg",
+    quality: options.quality ?? 0.92,
+    dpr: options.dpr ?? (window.devicePixelRatio || 1),
+    backgroundColor: options.backgroundColor ?? (["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null),
+    filename: options.filename ?? "snapDOM"
+    // Plugins (reservado para futura activación)
+    // plugins: normalizePlugins(...),
+  };
+}
+
+// src/exporters/toImg.js
+async function toImg(url, options) {
   const img = new Image();
   img.src = url;
   await img.decode();
-  if (scale !== 1) {
-    img.style.width = `${img.naturalWidth * scale}px`;
-    img.style.height = `${img.naturalHeight * scale}px`;
+  if (options.scale !== 1) {
+    img.style.width = `${img.naturalWidth * options.scale}px`;
+    img.style.height = `${img.naturalHeight * options.scale}px`;
   }
   return img;
 }
-async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
+
+// src/exporters/toCanvas.js
+async function toCanvas(url, options) {
+  const { scale: scale2, dpr } = options;
+  const safari = isSafari();
   const img = new Image();
-  img.src = url;
   img.crossOrigin = "anonymous";
   img.loading = "eager";
   img.decoding = "sync";
-  const isSafariBrowser = isSafari();
-  let appended = false;
-  if (isSafariBrowser) {
-    document.body.appendChild(img);
-    appended = true;
+  img.src = url;
+  let tempSlot = null;
+  if (safari) {
+    tempSlot = document.createElement("div");
+    tempSlot.setAttribute("aria-hidden", "true");
+    tempSlot.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;contain:size layout style;";
+    document.body.appendChild(tempSlot);
+    tempSlot.appendChild(img);
   }
   await img.decode();
-  if (isSafariBrowser) {
-    await new Promise((resolve) => setTimeout(resolve, 100));
+  if (safari) {
+    await new Promise((r) => setTimeout(r, 100));
   }
-  if (img.width === 0 || img.height === 0) {
-    if (appended) img.remove();
-    throw new Error("Image failed to load or has no dimensions");
-  }
-  const width = img.naturalWidth * scale;
-  const height = img.naturalHeight * scale;
+  const width = img.naturalWidth * scale2;
+  const height = img.naturalHeight * scale2;
   const canvas = document.createElement("canvas");
   canvas.width = Math.ceil(width * dpr);
   canvas.height = Math.ceil(height * dpr);
   canvas.style.width = `${width}px`;
   canvas.style.height = `${height}px`;
   const ctx = canvas.getContext("2d");
-  ctx.scale(dpr, dpr);
+  if (dpr !== 1) ctx.scale(dpr, dpr);
   ctx.drawImage(img, 0, 0, width, height);
-  if (appended) img.remove();
+  if (tempSlot && tempSlot.parentNode) {
+    try {
+      tempSlot.parentNode.removeChild(tempSlot);
+    } catch {
+    }
+  }
   return canvas;
 }
-async function toBlob(url, {
-  type = "svg",
-  scale = 1,
-  backgroundColor = "#fff",
-  quality
-} = {}) {
-  const mime = {
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    png: "image/png",
-    webp: "image/webp"
-  }[type] || "image/png";
+
+// src/exporters/toBlob.js
+async function toBlob(url, options) {
+  const type = options.type;
   if (type === "svg") {
     const svgText = decodeURIComponent(url.split(",")[1]);
     return new Blob([svgText], { type: "image/svg+xml" });
   }
-  const canvas = await createBackground(url, { dpr: 1, scale }, backgroundColor);
-  return new Promise((resolve) => {
-    canvas.toBlob((blob) => resolve(blob), `${mime}`, quality);
-  });
-}
-async function createBackground(url, { dpr = 1, scale = 1 }, backgroundColor) {
-  const baseCanvas = await toCanvas(url, { dpr, scale });
-  if (!backgroundColor) return baseCanvas;
-  const temp = document.createElement("canvas");
-  temp.width = baseCanvas.width;
-  temp.height = baseCanvas.height;
-  const ctx = temp.getContext("2d");
-  ctx.fillStyle = backgroundColor;
-  ctx.fillRect(0, 0, temp.width, temp.height);
-  ctx.drawImage(baseCanvas, 0, 0);
-  return temp;
+  const canvas = await toCanvas(url, options);
+  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
+  return new Promise(
+    (resolve) => finalCanvas.toBlob(
+      (blob) => resolve(blob),
+      `image/${type}`,
+      options.quality
+    )
+  );
 }
-async function toRasterImg(url, { dpr = 1, scale = 1, backgroundColor, quality }, format = "png") {
-  const defaultBg = ["jpg", "jpeg", "webp"].includes(format) ? "#fff" : void 0;
-  const finalBg = backgroundColor ?? defaultBg;
-  const canvas = await createBackground(url, { dpr, scale }, finalBg);
+
+// src/modules/rasterize.js
+async function rasterize(url, options) {
+  const canvas = await toCanvas(url, options);
+  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const img = new Image();
-  img.src = canvas.toDataURL(`image/${format}`, quality);
+  img.src = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
   await img.decode();
-  img.style.width = `${canvas.width / dpr}px`;
-  img.style.height = `${canvas.height / dpr}px`;
+  img.style.width = `${finalCanvas.width / options.dpr}px`;
+  img.style.height = `${finalCanvas.height / options.dpr}px`;
   return img;
 }
-async function download(url, { dpr = 1, scale = 1, backgroundColor, format = "png", filename = "snapDOM" } = {}) {
-  if (format === "svg") {
-    const blob = await toBlob(url);
+
+// src/exporters/download.js
+async function download(url, options) {
+  if (options.format === "svg") {
+    const blob = await toBlob(url, { ...options, type: "svg" });
     const objectURL = URL.createObjectURL(blob);
     const a2 = document.createElement("a");
     a2.href = objectURL;
-    a2.download = `${filename}.svg`;
+    a2.download = options.filename;
     a2.click();
     URL.revokeObjectURL(objectURL);
     return;
   }
-  const defaultBg = ["jpg", "jpeg", "webp"].includes(format) ? "#fff" : void 0;
-  const finalBg = backgroundColor ?? defaultBg;
-  const canvas = await createBackground(url, { dpr, scale }, finalBg);
-  const mime = {
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    png: "image/png",
-    webp: "image/webp"
-  }[format] || "image/png";
-  const dataURL = canvas.toDataURL(mime);
+  const canvas = await toCanvas(url, options);
+  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
   const a = document.createElement("a");
-  a.href = dataURL;
-  a.download = `${filename}.${format}`;
+  a.href = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  a.download = options.filename;
   a.click();
 }
-async function snapdom(element, options = {}) {
-  options = { scale: 1, ...options };
+
+// src/api/snapdom.js
+var INTERNAL_TOKEN = Symbol("snapdom.internal");
+async function snapdom(element, userOptions) {
   if (!element) throw new Error("Element cannot be null or undefined");
-  if (options.iconFonts) {
-    extendIconFonts(options.iconFonts);
-  }
-  return await snapdom.capture(element, options);
+  const context = createContext(userOptions);
+  if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts);
+  return snapdom.capture(element, context, INTERNAL_TOKEN);
 }
-snapdom.capture = async (el, options = {}) => {
-  const url = await captureDOM(el, options);
-  const dpr = options.dpr ?? (window.devicePixelRatio || 1);
-  const scale = options.scale || 1;
+snapdom.capture = async (el, context, _token) => {
+  if (_token !== INTERNAL_TOKEN) {
+    throw new Error("[snapdom.capture] is internal. Use snapdom(...) instead.");
+  }
+  const url = await captureDOM(el, context);
+  const ensureContext = (opts) => ({ ...context, ...opts || {} });
+  const withFormat = (format) => (opts) => rasterize(url, ensureContext({ ...opts || {}, format }));
   return {
     url,
-    options,
     toRaw: () => url,
-    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 })
+    toImg: (opts) => toImg(url, ensureContext(opts)),
+    toCanvas: (opts) => toCanvas(url, ensureContext(opts)),
+    toBlob: (opts) => toBlob(url, ensureContext(opts)),
+    toPng: withFormat("png"),
+    toJpg: withFormat("jpeg"),
+    toWebp: withFormat("webp"),
+    download: (opts) => download(url, ensureContext(opts))
   };
 };
-snapdom.toRaw = async (el, options) => (await snapdom.capture(el, options)).toRaw();
-snapdom.toImg = async (el, options) => (await snapdom.capture(el, options)).toImg();
-snapdom.toCanvas = async (el, options) => (await snapdom.capture(el, options)).toCanvas();
-snapdom.toBlob = async (el, options) => (await snapdom.capture(el, options)).toBlob(options);
-snapdom.toPng = async (el, options) => (await snapdom.capture(el, options)).toPng(options);
-snapdom.toJpg = async (el, options) => (await snapdom.capture(el, options)).toJpg(options);
-snapdom.toWebp = async (el, options) => (await snapdom.capture(el, options)).toWebp(options);
-snapdom.download = async (el, options = {}) => {
-  const {
-    format = "png",
-    filename = "capture",
-    backgroundColor,
-    ...rest
-  } = options;
-  const capture = await snapdom.capture(el, rest);
-  return await capture.download({ format, filename, backgroundColor });
-};
+snapdom.toRaw = (el, options) => snapdom(el, options).then((result) => result.toRaw());
+snapdom.toImg = (el, options) => snapdom(el, options).then((result) => result.toImg());
+snapdom.toCanvas = (el, options) => snapdom(el, options).then((result) => result.toCanvas());
+snapdom.toBlob = (el, options) => snapdom(el, options).then((result) => result.toBlob());
+snapdom.toPng = (el, options) => snapdom(el, { ...options, format: "png" }).then((result) => result.toPng());
+snapdom.toJpg = (el, options) => snapdom(el, { ...options, format: "jpeg" }).then((result) => result.toJpg());
+snapdom.toWebp = (el, options) => snapdom(el, { ...options, format: "webp" }).then((result) => result.toWebp());
+snapdom.download = (el, options) => snapdom(el, options).then((result) => result.download());
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {
-  const { embedFonts = true, reset = false, useProxy } = options;
-  if (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;
-  }
+  const {
+    embedFonts = true,
+    cacheOpt = "full",
+    useProxy = ""
+  } = options;
+  applyCachePolicy(cacheOpt);
   try {
     await document.fonts.ready;
   } catch {
   }
   precacheCommonTags();
+  cache.session = cache.session || {};
+  if (!cache.session.styleCache) {
+    cache.session.styleCache = /* @__PURE__ */ new WeakMap();
+  }
+  try {
+    await inlineBackgroundImages(
+      root,
+      /* mirror */
+      void 0,
+      cache.session.styleCache,
+      { useProxy }
+    );
+  } catch {
+  }
   let imgEls = [], allEls = [];
-  if (root?.querySelectorAll) {
-    imgEls = Array.from(root.querySelectorAll("img[src]"));
-    allEls = Array.from(root.querySelectorAll("*"));
+  try {
+    if (root?.querySelectorAll) {
+      imgEls = Array.from(root.querySelectorAll("img[src]"));
+      allEls = Array.from(root.querySelectorAll("*"));
+    }
+  } catch {
   }
   const promises = [];
   for (const img of imgEls) {
     const src = img?.src;
     if (!src) continue;
     if (!cache.image.has(src)) {
-      const p = Promise.resolve().then(() => fetchImage(src, { useProxy })).then((dataURL) => {
+      const p = Promise.resolve().then(() => snapFetch(src, { as: "dataURL", useProxy })).then((dataURL) => {
         cache.image.set(src, dataURL);
       }).catch(() => {
       });
@@ -1756,8 +2493,8 @@ async function preCache(root = document, options = {}) {
     } catch {
     }
     if (bg && bg !== "none") {
-      const bgSplits = splitBackgroundImage(bg);
-      for (const entry of bgSplits) {
+      const parts = splitBackgroundImage(bg);
+      for (const entry of parts) {
         if (entry.startsWith("url(")) {
           const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy })).catch(() => {
           });
@@ -1768,10 +2505,23 @@ async function preCache(root = document, options = {}) {
   }
   if (embedFonts) {
     try {
-      await embedCustomFonts({ preCached: true, localFonts: options.localFonts, useProxy: options.useProxy });
+      const required = collectUsedFontVariants(root);
+      const usedCodepoints = collectUsedCodepoints(root);
+      if (typeof isSafari === "function" ? isSafari() : !!isSafari) {
+        const families = new Set(
+          Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
+        );
+        await ensureFontsReady(families, 2);
+      }
+      await embedCustomFonts({
+        required,
+        usedCodepoints,
+        exclude: options.excludeFonts,
+        localFonts: options.localFonts,
+        useProxy: options.useProxy ?? useProxy
+      });
     } catch {
     }
-    ;
   }
   await Promise.allSettled(promises);
 }