@zumer/snapdom 1.9.14 → 2.0.0-dev.0

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.14
+* v.2.0.0-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -23,6 +23,7 @@ var cache = {
   }
 };
 function applyCachePolicy(policy = "soft") {
+  cache.session.__counterEpoch = (cache.session.__counterEpoch || 0) + 1;
   switch (policy) {
     case "auto": {
       cache.session.styleMap = /* @__PURE__ */ new Map();
@@ -808,6 +809,27 @@ function stripHeightForWrappers(el, cs, snap) {
 }
 
 // src/modules/CSSVar.js
+var KEY_PROPS = ["fill", "stroke", "color", "background-color", "stop-color"];
+var __BASELINE_CACHE = /* @__PURE__ */ new Map();
+function getBaselineComputed(tagName, ns) {
+  const key = ns + "::" + tagName.toLowerCase();
+  let entry = __BASELINE_CACHE.get(key);
+  if (entry) return entry;
+  const doc = document;
+  const el = ns === "http://www.w3.org/2000/svg" ? doc.createElementNS(ns, tagName) : doc.createElement(tagName);
+  const holder = doc.createElement("div");
+  holder.style.cssText = "position:absolute;left:-99999px;top:-99999px;contain:strict;display:block;";
+  holder.appendChild(el);
+  doc.documentElement.appendChild(holder);
+  const cs = getComputedStyle(el);
+  const base = {};
+  for (const p of KEY_PROPS) {
+    base[p] = cs.getPropertyValue(p) || "";
+  }
+  holder.remove();
+  __BASELINE_CACHE.set(key, base);
+  return base;
+}
 function resolveCSSVars(sourceEl, cloneEl) {
   if (!(sourceEl instanceof Element) || !(cloneEl instanceof Element)) return;
   const styleAttr = sourceEl.getAttribute?.("style");
@@ -822,42 +844,62 @@ function resolveCSSVars(sourceEl, cloneEl) {
       }
     }
   }
-  if (!hasVar) return;
-  let cs;
-  try {
-    cs = getComputedStyle(sourceEl);
-  } catch {
-    return;
+  let cs = null;
+  if (hasVar) {
+    try {
+      cs = getComputedStyle(sourceEl);
+    } catch {
+    }
   }
-  const author = sourceEl.style;
-  if (author && author.length) {
-    for (let i = 0; i < author.length; i++) {
-      const prop = author[i];
-      const val = author.getPropertyValue(prop);
-      if (!val || !val.includes("var(")) continue;
-      const resolved = cs.getPropertyValue(prop);
-      if (resolved) {
-        try {
-          cloneEl.style.setProperty(prop, resolved.trim(), author.getPropertyPriority(prop));
-        } catch {
+  if (hasVar) {
+    const author = sourceEl.style;
+    if (author && author.length) {
+      for (let i = 0; i < author.length; i++) {
+        const prop = author[i];
+        const val = author.getPropertyValue(prop);
+        if (!val || !val.includes("var(")) continue;
+        const resolved = cs && cs.getPropertyValue(prop);
+        if (resolved) {
+          try {
+            cloneEl.style.setProperty(prop, resolved.trim(), author.getPropertyPriority(prop));
+          } catch {
+          }
         }
       }
     }
   }
-  if (sourceEl.attributes?.length) {
+  if (hasVar && sourceEl.attributes?.length) {
     const attrs = sourceEl.attributes;
     for (let i = 0; i < attrs.length; i++) {
       const a = attrs[i];
       if (!a || typeof a.value !== "string" || !a.value.includes("var(")) continue;
       const propName = a.name;
-      let resolved = "";
+      const resolved = cs && cs.getPropertyValue(propName);
+      if (resolved) {
+        try {
+          cloneEl.style.setProperty(propName, resolved.trim());
+        } catch {
+        }
+      }
+    }
+  }
+  if (!hasVar) {
+    if (!cs) {
       try {
-        resolved = cs.getPropertyValue(propName);
+        cs = getComputedStyle(sourceEl);
       } catch {
+        cs = null;
       }
-      if (resolved) {
+    }
+    if (!cs) return;
+    const ns = sourceEl.namespaceURI || "html";
+    const base = getBaselineComputed(sourceEl.tagName, ns);
+    for (const prop of KEY_PROPS) {
+      const v = cs.getPropertyValue(prop) || "";
+      const b = base[prop] || "";
+      if (v && v !== b) {
         try {
-          cloneEl.style.setProperty(propName, resolved.trim());
+          cloneEl.style.setProperty(prop, v.trim());
         } catch {
         }
       }
@@ -1180,11 +1222,50 @@ async function deepClone(node, sessionCache, options) {
     return clone2;
   }
   if (node.tagName === "CANVAS") {
-    const dataURL = node.toDataURL();
+    let url = "";
+    try {
+      const ctx = node.getContext("2d", { willReadFrequently: true });
+      try {
+        ctx && ctx.getImageData(0, 0, 1, 1);
+      } catch {
+      }
+      await new Promise((r) => requestAnimationFrame(r));
+      url = node.toDataURL("image/png");
+      if (!url || url === "data:,") {
+        try {
+          ctx && ctx.getImageData(0, 0, 1, 1);
+        } catch {
+        }
+        await new Promise((r) => requestAnimationFrame(r));
+        url = node.toDataURL("image/png");
+        if (!url || url === "data:,") {
+          const scratch = document.createElement("canvas");
+          scratch.width = node.width;
+          scratch.height = node.height;
+          const sctx = scratch.getContext("2d");
+          if (sctx) {
+            sctx.drawImage(node, 0, 0);
+            url = scratch.toDataURL("image/png");
+          }
+        }
+      }
+    } catch {
+    }
     const img = document.createElement("img");
-    img.src = dataURL;
+    try {
+      img.decoding = "sync";
+      img.loading = "eager";
+    } catch {
+    }
+    if (url) img.src = url;
     img.width = node.width;
     img.height = node.height;
+    try {
+      const cs = getComputedStyle(node);
+      if (cs.width) img.style.width = cs.width;
+      if (cs.height) img.style.height = cs.height;
+    } catch {
+    }
     sessionCache.nodeMap.set(img, node);
     inlineAllStyles(node, img, sessionCache, options);
     return img;
@@ -2176,6 +2257,8 @@ function formatCounter(value, style) {
   }
 }
 function buildCounterContext(root) {
+  const getEpoch = () => cache?.session?.__counterEpoch ?? 0;
+  let run = getEpoch();
   const nodeCounters = /* @__PURE__ */ new WeakMap();
   const rootEl = root instanceof Document ? root.documentElement : root;
   const isLi = (el) => el && el.tagName === "LI";
@@ -2268,6 +2351,14 @@ function buildCounterContext(root) {
   };
   const empty = /* @__PURE__ */ new Map();
   build(rootEl, empty, empty);
+  function ensureFresh() {
+    const now = getEpoch();
+    if (now !== run) {
+      run = now;
+      const empty2 = /* @__PURE__ */ new Map();
+      build(rootEl, empty2, empty2);
+    }
+  }
   return {
     /**
      * Get top value for counter name at given node.
@@ -2275,6 +2366,7 @@ function buildCounterContext(root) {
      * @param {string} name
      */
     get(node, name) {
+      ensureFresh();
       const s = nodeCounters.get(node)?.get(name);
       return s && s.length ? s[s.length - 1] : 0;
     },
@@ -2284,6 +2376,7 @@ function buildCounterContext(root) {
      * @param {string} name
      */
     getStack(node, name) {
+      ensureFresh();
       const s = nodeCounters.get(node)?.get(name);
       return s ? s.slice() : [];
     }
@@ -2317,8 +2410,8 @@ function resolveCountersInContent(raw, node, ctx) {
 }
 
 // src/modules/pseudo.js
-var counterCtx = null;
 var __siblingCounters = /* @__PURE__ */ new WeakMap();
+var __pseudoEpoch = -1;
 function unquoteDoubleStrings2(s) {
   return (s || "").replace(/"([^"]*)"/g, "$1");
 }
@@ -2415,12 +2508,19 @@ function resolvePseudoContentAndIncs(node, pseudo, baseCtx) {
 }
 async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
-  if (!counterCtx) {
+  const epoch = cache?.session?.__counterEpoch ?? 0;
+  if (__pseudoEpoch !== epoch) {
+    __siblingCounters = /* @__PURE__ */ new WeakMap();
+    if (sessionCache) sessionCache.__counterCtx = null;
+    __pseudoEpoch = epoch;
+  }
+  if (!sessionCache.__counterCtx) {
     try {
-      counterCtx = buildCounterContext(source.ownerDocument || document);
+      sessionCache.__counterCtx = buildCounterContext(source.ownerDocument || document);
     } catch {
     }
   }
+  const counterCtx = sessionCache.__counterCtx;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       const style = getStyle(source, pseudo);
@@ -2485,7 +2585,8 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       }
       const pseudoEl = document.createElement("span");
       pseudoEl.dataset.snapdomPseudo = pseudo;
-      pseudoEl.style.verticalAlign = "middle";
+      pseudoEl.style.display = "inline";
+      pseudoEl.style.verticalAlign = "baseline";
       pseudoEl.style.pointerEvents = "none";
       const snapshot = snapshotComputedStyle(style);
       const key = getStyleKey(snapshot, "span");
@@ -2513,9 +2614,23 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       } else if (!isIconFont22 && hasExplicitContent) {
         pseudoEl.textContent = cleanContent;
       }
-      pseudoEl.style.background = "none";
-      if ("mask" in pseudoEl.style) {
-        pseudoEl.style.mask = "none";
+      pseudoEl.style.backgroundImage = "none";
+      if ("maskImage" in pseudoEl.style) pseudoEl.style.maskImage = "none";
+      if ("webkitMaskImage" in pseudoEl.style) pseudoEl.style.webkitMaskImage = "none";
+      try {
+        pseudoEl.style.backgroundRepeat = style.backgroundRepeat;
+        pseudoEl.style.backgroundSize = style.backgroundSize;
+        if (style.backgroundPositionX && style.backgroundPositionY) {
+          pseudoEl.style.backgroundPositionX = style.backgroundPositionX;
+          pseudoEl.style.backgroundPositionY = style.backgroundPositionY;
+        } else {
+          pseudoEl.style.backgroundPosition = style.backgroundPosition;
+        }
+        pseudoEl.style.backgroundOrigin = style.backgroundOrigin;
+        pseudoEl.style.backgroundClip = style.backgroundClip;
+        pseudoEl.style.backgroundAttachment = style.backgroundAttachment;
+        pseudoEl.style.backgroundBlendMode = style.backgroundBlendMode;
+      } catch {
       }
       if (hasBg) {
         try {
@@ -2558,53 +2673,113 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
 }
 
 // src/modules/svgDefs.js
-function inlineExternalDefsAndSymbols(rootElement) {
-  if (!rootElement) return;
-  const usedIds = /* @__PURE__ */ new Set();
-  rootElement.querySelectorAll("use").forEach((use) => {
-    const href = use.getAttribute("xlink:href") || use.getAttribute("href");
-    if (href && href.startsWith("#")) {
-      usedIds.add(href.slice(1));
+function inlineExternalDefsAndSymbols(element, lookupRoot) {
+  if (!element || !(element instanceof Element)) return;
+  const doc = element.ownerDocument || document;
+  const searchRoot = lookupRoot || doc;
+  const svgRoots = element instanceof SVGSVGElement ? [element] : Array.from(element.querySelectorAll("svg"));
+  if (svgRoots.length === 0) return;
+  const URL_ID_RE = /url\(\s*#([^)]+)\)/g;
+  const URL_ATTRS = [
+    "fill",
+    "stroke",
+    "filter",
+    "clip-path",
+    "mask",
+    "marker",
+    "marker-start",
+    "marker-mid",
+    "marker-end"
+  ];
+  const cssEscape = (s) => window.CSS && CSS.escape ? CSS.escape(s) : s.replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+  const globalExistingIds = new Set(
+    Array.from(element.querySelectorAll("[id]")).map((n) => n.id)
+  );
+  const neededIds = /* @__PURE__ */ new Set();
+  let sawAnyReference = false;
+  const addUrlIdsFromValue = (val) => {
+    if (!val) return;
+    URL_ID_RE.lastIndex = 0;
+    let m;
+    while (m = URL_ID_RE.exec(val)) {
+      sawAnyReference = true;
+      const id = (m[1] || "").trim();
+      if (id && !globalExistingIds.has(id)) neededIds.add(id);
     }
-  });
-  if (!usedIds.size) return;
-  const allGlobal = Array.from(document.querySelectorAll("svg > symbol, svg > defs"));
-  const globalSymbols = allGlobal.filter((el) => el.tagName.toLowerCase() === "symbol");
-  const globalDefs = allGlobal.filter((el) => el.tagName.toLowerCase() === "defs");
-  let container = rootElement.querySelector("svg.inline-defs-container");
-  if (!container) {
-    container = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    container.setAttribute("aria-hidden", "true");
-    container.setAttribute("style", "position: absolute; width: 0; height: 0; overflow: hidden;");
-    container.classList.add("inline-defs-container");
-    rootElement.insertBefore(container, rootElement.firstChild);
-  }
-  const existingIds = /* @__PURE__ */ new Set();
-  rootElement.querySelectorAll("symbol[id], defs > *[id]").forEach((el) => {
-    existingIds.add(el.id);
-  });
-  usedIds.forEach((id) => {
-    if (existingIds.has(id)) return;
-    const symbol = globalSymbols.find((sym) => sym.id === id);
-    if (symbol) {
-      container.appendChild(symbol.cloneNode(true));
-      existingIds.add(id);
-      return;
+  };
+  const collectReferencesInSvg = (rootSvg) => {
+    const uses = rootSvg.querySelectorAll('use[href^="#"], use[xlink\\:href^="#"]');
+    for (const u of uses) {
+      const href = u.getAttribute("href") || u.getAttribute("xlink:href");
+      if (!href || !href.startsWith("#")) continue;
+      sawAnyReference = true;
+      const id = href.slice(1).trim();
+      if (id && !globalExistingIds.has(id)) neededIds.add(id);
     }
-    for (const defs of globalDefs) {
-      const defEl = defs.querySelector(`#${CSS.escape(id)}`);
-      if (defEl) {
-        let defsContainer = container.querySelector("defs");
-        if (!defsContainer) {
-          defsContainer = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-          container.appendChild(defsContainer);
-        }
-        defsContainer.appendChild(defEl.cloneNode(true));
-        existingIds.add(id);
-        break;
+    let query = '*[style*="url("],*[fill^="url("], *[stroke^="url("],*[filter^="url("], *[clip-path^="url("],*[mask^="url("],*[marker^="url("], *[marker-start^="url("],*[marker-mid^="url("], *[marker-end^="url("]';
+    const candidates = rootSvg.querySelectorAll(query);
+    for (const el of candidates) {
+      addUrlIdsFromValue(el.getAttribute("style") || "");
+      for (const a of URL_ATTRS) addUrlIdsFromValue(el.getAttribute(a));
+    }
+  };
+  for (const svg of svgRoots) collectReferencesInSvg(svg);
+  if (!sawAnyReference) return;
+  let defsHost = element.querySelector("svg.inline-defs-container");
+  if (!defsHost) {
+    defsHost = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+    defsHost.classList.add("inline-defs-container");
+    defsHost.setAttribute("aria-hidden", "true");
+    defsHost.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden");
+    element.insertBefore(defsHost, element.firstChild || null);
+  }
+  let localDefs = defsHost.querySelector("defs") || null;
+  const findGlobalById = (id) => {
+    if (!id) return null;
+    if (globalExistingIds.has(id)) return null;
+    const esc = cssEscape(id);
+    const tryFind = (sel) => {
+      const el = searchRoot.querySelector(sel);
+      return el && !element.contains(el) ? el : null;
+    };
+    return tryFind(`svg defs > *#${esc}`) || tryFind(`svg > symbol#${esc}`) || tryFind(`*#${esc}`);
+  };
+  if (!neededIds.size) return;
+  const queued = new Set(neededIds);
+  const inlined = /* @__PURE__ */ new Set();
+  while (queued.size) {
+    const id = queued.values().next().value;
+    queued.delete(id);
+    if (!id || globalExistingIds.has(id) || inlined.has(id)) continue;
+    const source = findGlobalById(id);
+    if (!source) {
+      inlined.add(id);
+      continue;
+    }
+    if (!localDefs) {
+      localDefs = doc.createElementNS("http://www.w3.org/2000/svg", "defs");
+      defsHost.appendChild(localDefs);
+    }
+    const clone = source.cloneNode(true);
+    if (!clone.id) clone.setAttribute("id", id);
+    localDefs.appendChild(clone);
+    inlined.add(id);
+    globalExistingIds.add(id);
+    const walk = [clone, ...clone.querySelectorAll("*")];
+    for (const node of walk) {
+      const h = node.getAttribute?.("href") || node.getAttribute?.("xlink:href");
+      if (h && h.startsWith("#")) {
+        const ref = h.slice(1).trim();
+        if (ref && !globalExistingIds.has(ref) && !inlined.has(ref)) queued.add(ref);
+      }
+      const style = node.getAttribute?.("style") || "";
+      if (style) addUrlIdsFromValue(style);
+      for (const a of URL_ATTRS) {
+        const v = node.getAttribute?.(a);
+        if (v) addUrlIdsFromValue(v);
       }
     }
-  });
+  }
 }
 
 // src/modules/changeCSS.js
@@ -3050,6 +3225,17 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
     "-webkit-mask-position-x",
     "-webkit-mask-position-y"
   ];
+  const BG_LAYOUT_PROPS = [
+    "background-position",
+    "background-position-x",
+    "background-position-y",
+    "background-size",
+    "background-repeat",
+    "background-origin",
+    "background-clip",
+    "background-attachment",
+    "background-blend-mode"
+  ];
   const BORDER_AUX_PROPS = [
     "border-image-slice",
     "border-image-width",
@@ -3065,6 +3251,11 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
       const bis = style.getPropertyValue("border-image-source");
       return bi && bi !== "none" || bis && bis !== "none";
     })();
+    for (const prop of BG_LAYOUT_PROPS) {
+      const v = style.getPropertyValue(prop);
+      if (!v) continue;
+      cloneNode.style.setProperty(prop, v);
+    }
     for (const prop of URL_PROPS) {
       const val = style.getPropertyValue(prop);
       if (!val || val === "none") continue;
@@ -3089,7 +3280,7 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
       }
     }
     const sChildren = Array.from(srcNode.children);
-    const cChildren = Array.from(cloneNode.children);
+    const cChildren = Array.from(cloneNode.children).filter((el) => !(el.dataset && el.dataset.snapdomPseudo));
     for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
       queue.push([sChildren[i], cChildren[i]]);
     }
@@ -3153,6 +3344,81 @@ function isPlainTextContainer(el) {
   return Array.from(el.childNodes).some((n) => n.nodeType === Node.TEXT_NODE);
 }
 
+// src/core/plugins.js
+var __plugins = [];
+function normalizePlugin(spec) {
+  if (!spec) return null;
+  if (Array.isArray(spec)) {
+    const [factory, options] = spec;
+    return typeof factory === "function" ? factory(options) : factory;
+  }
+  if (typeof spec === "object" && "plugin" in spec) {
+    const { plugin, options } = spec;
+    return typeof plugin === "function" ? plugin(options) : plugin;
+  }
+  if (typeof spec === "function") return spec();
+  return spec;
+}
+function registerPlugins(...defs) {
+  const flat = defs.flat();
+  for (const d of flat) {
+    const inst = normalizePlugin(d);
+    if (!inst) continue;
+    if (!__plugins.some((p) => p && p.name && inst.name && p.name === inst.name)) {
+      __plugins.push(inst);
+    }
+  }
+}
+function getContextPlugins(context) {
+  const arr = context && Array.isArray(context.plugins) ? context.plugins : __plugins;
+  return arr || __plugins;
+}
+async function runHook(name, context, payload) {
+  let acc = payload;
+  const list = getContextPlugins(context);
+  for (const p of list) {
+    const fn = p && typeof p[name] === "function" ? p[name] : null;
+    if (!fn) continue;
+    const out = await fn(context, acc);
+    if (typeof out !== "undefined") acc = out;
+  }
+  return acc;
+}
+async function runAll(name, context, payload) {
+  const outs = [];
+  const list = getContextPlugins(context);
+  for (const p of list) {
+    const fn = p && typeof p[name] === "function" ? p[name] : null;
+    if (!fn) continue;
+    const out = await fn(context, payload);
+    if (typeof out !== "undefined") outs.push(out);
+  }
+  return outs;
+}
+function mergePlugins(localDefs) {
+  const out = [];
+  if (Array.isArray(localDefs)) {
+    for (const d of localDefs) {
+      const inst = normalizePlugin(d);
+      if (!inst || !inst.name) continue;
+      const i = out.findIndex((x) => x && x.name === inst.name);
+      if (i >= 0) out.splice(i, 1);
+      out.push(inst);
+    }
+  }
+  for (const g of __plugins) {
+    if (g && g.name && !out.some((x) => x.name === g.name)) {
+      out.push(g);
+    }
+  }
+  return Object.freeze(out);
+}
+function attachSessionPlugins(context, localDefs, force = false) {
+  if (!context || context.plugins && !force) return context;
+  context.plugins = mergePlugins(localDefs);
+  return context;
+}
+
 // src/core/capture.js
 function stripRootShadows(originalEl, cloneRoot) {
   if (!originalEl || !cloneRoot || !cloneRoot.style) return;
@@ -3182,41 +3448,46 @@ async function captureDOM(element, options) {
   const fast = options.fast;
   const straighten = !!options.straighten;
   const noShadows = !!options.noShadows;
+  let state = { element, options, plugins: options.plugins };
   let clone, classCSS, styleCache;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
   let rootTransform2D = null;
-  const undoClamp = lineClamp(element);
+  await runHook("beforeSnap", state);
+  await runHook("beforeClone", state);
+  const undoClamp = lineClamp(state.element);
   try {
-    ({ clone, classCSS, styleCache } = await prepareClone(element, options));
+    ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options));
     if (straighten && clone) {
-      rootTransform2D = normalizeRootTransforms(element, clone);
+      rootTransform2D = normalizeRootTransforms(state.element, state.clone);
     }
     if (noShadows && clone) {
-      stripRootShadows(element, clone);
+      stripRootShadows(state.element, state.clone);
     }
   } finally {
     undoClamp();
   }
+  state = { clone, classCSS, styleCache, ...state };
+  await runHook("afterClone", state);
   await new Promise((resolve) => {
     idle(async () => {
-      await inlineImages(clone, options);
+      await inlineImages(state.clone, state.options);
       resolve();
     }, { fast });
   });
   await new Promise((resolve) => {
     idle(async () => {
-      await inlineBackgroundImages(element, clone, styleCache, options);
+      await inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
       resolve();
     }, { fast });
   });
   if (options.embedFonts) {
     await new Promise((resolve) => {
       idle(async () => {
-        const required = collectUsedFontVariants(element);
-        const usedCodepoints = collectUsedCodepoints(element);
+        const required = collectUsedFontVariants(state.element);
+        const usedCodepoints = collectUsedCodepoints(state.element);
         if (isSafari()) {
           const families = new Set(
             Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
@@ -3227,14 +3498,14 @@ async function captureDOM(element, options) {
           required,
           usedCodepoints,
           preCached: false,
-          exclude: options.excludeFonts,
-          useProxy: options.useProxy
+          exclude: state.options.excludeFonts,
+          useProxy: state.options.useProxy
         });
         resolve();
       }, { fast });
     });
   }
-  const usedTags = collectUsedTagNames(clone).sort();
+  const usedTags = collectUsedTagNames(state.clone).sort();
   const tagKey = usedTags.join(",");
   if (cache.baseStyle.has(tagKey)) {
     baseCSS = cache.baseStyle.get(tagKey);
@@ -3247,69 +3518,57 @@ async function captureDOM(element, options) {
       }, { fast });
     });
   }
+  state = { fontsCSS, baseCSS, ...state };
+  await runHook("beforeRender", state);
   await new Promise((resolve) => {
     idle(() => {
-      const csEl = getComputedStyle(element);
-      function parseFilterDropShadows(cs) {
-        const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
-        if (!raw || raw === "none") {
-          return { bleed: { top: 0, right: 0, bottom: 0, left: 0 }, has: false };
-        }
-        const tokens = raw.match(/drop-shadow\((?:[^()]|\([^()]*\))*\)/gi) || [];
-        let t = 0, r = 0, b = 0, l = 0;
-        let found = false;
-        for (const tok of tokens) {
-          found = true;
-          const nums = tok.match(/-?\d+(?:\.\d+)?px/gi)?.map((v) => parseFloat(v)) || [];
-          const [ox = 0, oy = 0, blur = 0] = nums;
-          const extX = Math.abs(ox) + blur;
-          const extY = Math.abs(oy) + blur;
-          r = Math.max(r, extX + Math.max(ox, 0));
-          l = Math.max(l, extX + Math.max(-ox, 0));
-          b = Math.max(b, extY + Math.max(oy, 0));
-          t = Math.max(t, extY + Math.max(-oy, 0));
-        }
-        return { bleed: { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b), left: Math.ceil(l) }, has: found };
-      }
-      const rect = element.getBoundingClientRect();
-      const w0 = Math.max(1, Math.ceil(element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
-      const h0 = Math.max(1, Math.ceil(element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      const csEl = getComputedStyle(state.element);
+      const rect = state.element.getBoundingClientRect();
+      const w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
+      const h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
       const coerceNum = (v, def = NaN) => {
         const n = typeof v === "string" ? parseFloat(v) : v;
         return Number.isFinite(n) ? n : def;
       };
-      const optW = coerceNum(options.width);
-      const optH = coerceNum(options.height);
+      const optW = coerceNum(state.options.width);
+      const optH = coerceNum(state.options.height);
       let w = w0, h = h0;
       const hasW = Number.isFinite(optW);
       const hasH = Number.isFinite(optH);
       const aspect0 = h0 > 0 ? w0 / h0 : 1;
       if (hasW && hasH) {
-        w = Math.max(1, Math.ceil(optW));
-        h = Math.max(1, Math.ceil(optH));
+        w = Math.max(1, limitDecimals(optW));
+        h = Math.max(1, limitDecimals(optH));
       } else if (hasW) {
-        w = Math.max(1, Math.ceil(optW));
-        h = Math.max(1, Math.ceil(w / (aspect0 || 1)));
+        w = Math.max(1, limitDecimals(optW));
+        h = Math.max(1, limitDecimals(w / (aspect0 || 1)));
       } else if (hasH) {
-        h = Math.max(1, Math.ceil(optH));
-        w = Math.max(1, Math.ceil(h * (aspect0 || 1)));
+        h = Math.max(1, limitDecimals(optH));
+        w = Math.max(1, limitDecimals(h * (aspect0 || 1)));
       } else {
         w = w0;
         h = h0;
       }
       let minX = 0, minY = 0, maxX = w0, maxY = h0;
       if (straighten && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
-        const M2 = { a: rootTransform2D.a, b: rootTransform2D.b || 0, c: rootTransform2D.c || 0, d: rootTransform2D.d || 1, e: 0, f: 0 };
+        const M2 = {
+          a: rootTransform2D.a,
+          b: rootTransform2D.b || 0,
+          c: rootTransform2D.c || 0,
+          d: rootTransform2D.d || 1,
+          e: 0,
+          f: 0
+        };
         const bb2 = bboxWithOriginFull(w0, h0, M2, 0, 0);
-        minX = bb2.minX;
-        minY = bb2.minY;
-        maxX = bb2.maxX;
-        maxY = bb2.maxY;
+        minX = limitDecimals(bb2.minX);
+        minY = limitDecimals(bb2.minY);
+        maxX = limitDecimals(bb2.maxX);
+        maxY = limitDecimals(bb2.maxY);
       } else {
-        const useTFBBox = !straighten && hasTFBBox(element);
+        const useTFBBox = !straighten && hasTFBBox(state.element);
         if (useTFBBox) {
           const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
-          const ind2 = readIndividualTransforms(element);
+          const ind2 = readIndividualTransforms(state.element);
           const TOTAL = readTotalTransformMatrix({
             baseTransform: baseTransform2,
             rotate: ind2.rotate || "0deg",
@@ -3319,10 +3578,10 @@ async function captureDOM(element, options) {
           const { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0);
           const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString());
           const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2);
-          minX = bb.minX;
-          minY = bb.minY;
-          maxX = bb.maxX;
-          maxY = bb.maxY;
+          minX = limitDecimals(bb.minX);
+          minY = limitDecimals(bb.minY);
+          maxX = limitDecimals(bb.maxX);
+          maxY = limitDecimals(bb.maxY);
         }
       }
       const bleedShadow = parseBoxShadow(csEl);
@@ -3330,60 +3589,94 @@ async function captureDOM(element, options) {
       const bleedOutline = parseOutline(csEl);
       const drop = parseFilterDropShadows(csEl);
       const bleed = noShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
-        top: bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top,
-        right: bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right,
-        bottom: bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom,
-        left: bleedShadow.left + bleedBlur.left + bleedOutline.left + drop.bleed.left
+        top: limitDecimals(bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top),
+        right: limitDecimals(bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right),
+        bottom: limitDecimals(bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom),
+        left: limitDecimals(bleedShadow.left + bleedBlur.left + bleedOutline.left + drop.bleed.left)
       };
-      minX -= bleed.left;
-      minY -= bleed.top;
-      maxX += bleed.right;
-      maxY += bleed.bottom;
-      const vbW0 = Math.max(1, Math.ceil(maxX - minX));
-      const vbH0 = Math.max(1, Math.ceil(maxY - minY));
-      const outW = Math.max(1, Math.round(vbW0 * (hasW || hasH ? w / w0 : 1)));
-      const outH = Math.max(1, Math.round(vbH0 * (hasH || hasW ? h / h0 : 1)));
+      minX = limitDecimals(minX - bleed.left);
+      minY = limitDecimals(minY - bleed.top);
+      maxX = limitDecimals(maxX + bleed.right);
+      maxY = limitDecimals(maxY + bleed.bottom);
+      const vbW0 = Math.max(1, limitDecimals(maxX - minX));
+      const vbH0 = Math.max(1, limitDecimals(maxY - minY));
+      const scaleW = hasW || hasH ? limitDecimals(w / w0) : 1;
+      const scaleH = hasH || hasW ? limitDecimals(h / h0) : 1;
+      const outW = Math.max(1, limitDecimals(vbW0 * scaleW));
+      const outH = Math.max(1, limitDecimals(vbH0 * scaleH));
       const svgNS = "http://www.w3.org/2000/svg";
       const basePad = isSafari() ? 1 : 0;
       const extraPad = straighten ? 1 : 0;
-      const pad = basePad + extraPad;
+      const pad = limitDecimals(basePad + extraPad);
       const fo = document.createElementNS(svgNS, "foreignObject");
-      const vbMinX = Math.floor(minX);
-      const vbMinY = Math.floor(minY);
-      fo.setAttribute("x", String(-(vbMinX - pad)));
-      fo.setAttribute("y", String(-(vbMinY - pad)));
-      fo.setAttribute("width", String(Math.ceil(w0 + pad * 2)));
-      fo.setAttribute("height", String(Math.ceil(h0 + pad * 2)));
+      const vbMinX = limitDecimals(minX);
+      const vbMinY = limitDecimals(minY);
+      fo.setAttribute("x", String(limitDecimals(-(vbMinX - pad))));
+      fo.setAttribute("y", String(limitDecimals(-(vbMinY - pad))));
+      fo.setAttribute("width", String(limitDecimals(w0 + pad * 2)));
+      fo.setAttribute("height", String(limitDecimals(h0 + pad * 2)));
       fo.style.overflow = "visible";
       const styleTag = document.createElement("style");
-      styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;} foreignObject{overflow:visible;}" + classCSS;
+      styleTag.textContent = state.baseCSS + state.fontsCSS + "svg{overflow:visible;} foreignObject{overflow:visible;}" + state.classCSS;
       fo.appendChild(styleTag);
       const container = document.createElement("div");
       container.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      container.style.width = `${w0}px`;
-      container.style.height = `${h0}px`;
+      container.style.width = `${limitDecimals(w0)}px`;
+      container.style.height = `${limitDecimals(h0)}px`;
       container.style.overflow = "visible";
-      clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-      container.appendChild(clone);
+      state.clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+      container.appendChild(state.clone);
       fo.appendChild(container);
       const serializer = new XMLSerializer();
       const foString = serializer.serializeToString(fo);
-      const vbW = vbW0 + pad * 2;
-      const vbH = vbH0 + pad * 2;
+      const vbW = limitDecimals(vbW0 + pad * 2);
+      const vbH = limitDecimals(vbH0 + pad * 2);
       const wantsSize = hasW || hasH;
       options.meta = { w0, h0, vbW, vbH, targetW: w, targetH: h };
-      const svgOutW = isSafari() && wantsSize ? vbW : outW + pad * 2;
-      const svgOutH = isSafari() && wantsSize ? vbH : outH + pad * 2;
+      const svgOutW = isSafari() && wantsSize ? vbW : limitDecimals(outW + pad * 2);
+      const svgOutH = isSafari() && wantsSize ? vbH : limitDecimals(outH + pad * 2);
       const svgHeader = `<svg xmlns="${svgNS}" width="${svgOutW}" height="${svgOutH}" viewBox="0 0 ${vbW} ${vbH}">`;
       const svgFooter = "</svg>";
       svgString = svgHeader + foString + svgFooter;
       dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+      state = { svgString, dataURL, ...state };
       resolve();
     }, { fast });
   });
+  await runHook("afterRender", state);
   const sandbox = document.getElementById("snapdom-sandbox");
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
-  return dataURL;
+  return state.dataURL;
+}
+var limitDecimals = (v, n = 3) => Number.isFinite(v) ? Math.round(v * 10 ** n) / 10 ** n : v;
+function parseFilterDropShadows(cs) {
+  const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
+  if (!raw || raw === "none") {
+    return { bleed: { top: 0, right: 0, bottom: 0, left: 0 }, has: false };
+  }
+  const tokens = raw.match(/drop-shadow\((?:[^()]|\([^()]*\))*\)/gi) || [];
+  let t = 0, r = 0, b = 0, l = 0;
+  let found = false;
+  for (const tok of tokens) {
+    found = true;
+    const nums = tok.match(/-?\d+(?:\.\d+)?px/gi)?.map((v) => parseFloat(v)) || [];
+    const [ox = 0, oy = 0, blur = 0] = nums;
+    const extX = Math.abs(ox) + blur;
+    const extY = Math.abs(oy) + blur;
+    r = Math.max(r, extX + Math.max(ox, 0));
+    l = Math.max(l, extX + Math.max(-ox, 0));
+    b = Math.max(b, extY + Math.max(oy, 0));
+    t = Math.max(t, extY + Math.max(-oy, 0));
+  }
+  return {
+    bleed: {
+      top: limitDecimals(t),
+      right: limitDecimals(r),
+      bottom: limitDecimals(b),
+      left: limitDecimals(l)
+    },
+    has: found
+  };
 }
 function normalizeRootTransforms(originalEl, cloneRoot) {
   if (!originalEl || !cloneRoot || !cloneRoot.style) return null;
@@ -3634,7 +3927,8 @@ function normalizeCachePolicy(v) {
   return "soft";
 }
 function createContext(options = {}) {
-  const resolvedFormat = options.format ?? "png";
+  let resolvedFormat = options.format ?? "png";
+  if (resolvedFormat === "jpg") resolvedFormat = "jpeg";
   const cachePolicy = normalizeCachePolicy(options.cache);
   return {
     // Debug & perf
@@ -3666,7 +3960,7 @@ function createContext(options = {}) {
     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),
+    backgroundColor: options.backgroundColor ?? (["jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null),
     filename: options.filename ?? "snapDOM",
     // NEW flags (user-friendly)
     straighten: options.straighten ?? false,
@@ -3797,20 +4091,20 @@ async function toCanvas(url, options) {
   } else if (hasW) {
     const k = optW / Math.max(1, refW);
     outW = optW;
-    outH = Math.round(refH * k);
+    outH = refH * k;
   } else if (hasH) {
     const k = optH / Math.max(1, refH);
     outH = optH;
-    outW = Math.round(refW * k);
+    outW = refW * k;
   } else {
     outW = natW;
     outH = natH;
   }
-  outW = Math.round(outW * scale);
-  outH = Math.round(outH * scale);
+  outW = outW * scale;
+  outH = outH * scale;
   const canvas = document.createElement("canvas");
-  canvas.width = Math.ceil(outW * dpr);
-  canvas.height = Math.ceil(outH * dpr);
+  canvas.width = outW * dpr;
+  canvas.height = outH * dpr;
   canvas.style.width = `${outW}px`;
   canvas.style.height = `${outH}px`;
   const ctx = canvas.getContext("2d");
@@ -3919,16 +4213,22 @@ async function download(url, options) {
 }
 
 // src/api/snapdom.js
+snapdom.plugins = (...defs) => {
+  registerPlugins(...defs);
+  return snapdom;
+};
 var INTERNAL_TOKEN = Symbol("snapdom.internal");
+var INTERNAL_EXPORT_TOKEN = Symbol("snapdom.internal.silent");
 var _safariWarmup = false;
 async function snapdom(element, userOptions) {
   if (!element) throw new Error("Element cannot be null or undefined");
   const context = createContext(userOptions);
+  attachSessionPlugins(context, userOptions && userOptions.plugins);
   if (isSafari() && (context.embedFonts === true || hasBackgroundOrMask(element))) {
     for (let i = 0; i < 3; i++) {
       try {
         await safariWarmup(element, userOptions);
-        console.log("Iteraci\xF3n n\xFAmero:", i);
+        console.log("safariWarmup:", i);
         _safariWarmup = false;
       } catch {
       }
@@ -3943,31 +4243,90 @@ async function snapdom(element, userOptions) {
   }
   return snapdom.capture(element, context, INTERNAL_TOKEN);
 }
+snapdom.plugins = (...defs) => {
+  registerPlugins(...defs);
+  return snapdom;
+};
 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) => {
-    const next = ensureContext({ ...opts || {}, format });
-    const wantsJpeg = format === "jpeg" || format === "jpg";
-    const noBg = next.backgroundColor == null || next.backgroundColor === "transparent";
-    if (wantsJpeg && noBg) {
-      next.backgroundColor = "#ffffff";
-    }
-    return rasterize(url, next);
+  const coreExports = {
+    img: async (ctx, opts) => toImg(url, { ...ctx, ...opts || {} }),
+    svg: async (ctx, opts) => toImg(url, { ...ctx, ...opts || {} }),
+    canvas: async (ctx, opts) => toCanvas(url, { ...ctx, ...opts || {} }),
+    blob: async (ctx, opts) => toBlob(url, { ...ctx, ...opts || {} }),
+    png: async (ctx, opts) => rasterize(url, { ...ctx, ...opts || {}, format: "png" }),
+    jpeg: async (ctx, opts) => rasterize(url, { ...ctx, ...opts || {}, format: "jpeg" }),
+    webp: async (ctx, opts) => rasterize(url, { ...ctx, ...opts || {}, format: "webp" }),
+    download: async (ctx, opts) => download(url, { ...ctx, ...opts || {} })
   };
-  return {
+  const _pluginExports = {
+    svg: (opts) => toImg(url, { ...context, ...opts || {}, [INTERNAL_EXPORT_TOKEN]: true }),
+    canvas: (opts) => toCanvas(url, { ...context, ...opts || {}, [INTERNAL_EXPORT_TOKEN]: true }),
+    png: (opts) => rasterize(url, { ...context, ...opts || {}, format: "png", [INTERNAL_EXPORT_TOKEN]: true }),
+    jpeg: (opts) => rasterize(url, { ...context, ...opts || {}, format: "jpeg", [INTERNAL_EXPORT_TOKEN]: true }),
+    jpg: (opts) => rasterize(url, { ...context, ...opts || {}, format: "jpeg", [INTERNAL_EXPORT_TOKEN]: true }),
+    webp: (opts) => rasterize(url, { ...context, ...opts || {}, format: "webp", [INTERNAL_EXPORT_TOKEN]: true }),
+    blob: (opts) => toBlob(url, { ...context, ...opts || {}, [INTERNAL_EXPORT_TOKEN]: true }),
+    img: (opts) => toImg(url, { ...context, ...opts || {}, [INTERNAL_EXPORT_TOKEN]: true })
+  };
+  const _defineCtx = { ...context, export: { url }, exports: _pluginExports };
+  const providedMaps = await runAll("defineExports", _defineCtx);
+  const provided = Object.assign({}, ...providedMaps.filter((x) => x && typeof x === "object"));
+  const exportsMap = { ...coreExports, ...provided };
+  if (exportsMap.jpeg && !exportsMap.jpg) {
+    exportsMap.jpg = (ctx, opts) => exportsMap.jpeg(ctx, opts);
+  }
+  function normalizeExportOptions(type, opts) {
+    const next = { ...context, ...opts || {} };
+    if (type === "jpeg" || type === "jpg") {
+      const noBg = next.backgroundColor == null || next.backgroundColor === "transparent";
+      if (noBg) next.backgroundColor = "#ffffff";
+    }
+    return next;
+  }
+  let afterSnapFired = false;
+  let _exportQueue = Promise.resolve();
+  async function runExport(type, opts) {
+    const job = async () => {
+      const work = exportsMap[type];
+      if (!work) throw new Error(`[snapdom] Unknown export type: ${type}`);
+      const nextOpts = normalizeExportOptions(type, opts);
+      const ctx = { ...context, export: { type, options: nextOpts, url } };
+      await runHook("beforeExport", ctx);
+      const result2 = await work(ctx, nextOpts);
+      await runHook("afterExport", ctx, result2);
+      if (!afterSnapFired) {
+        afterSnapFired = true;
+        await runHook("afterSnap", context);
+      }
+      return result2;
+    };
+    return _exportQueue = _exportQueue.then(job);
+  }
+  const result = {
     url,
     toRaw: () => url,
-    toImg: (opts) => toImg(url, ensureContext(opts)),
-    toSvg: (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))
+    to: (type, opts) => runExport(type, opts),
+    // Métodos “clásicos” que los tests esperan:
+    toImg: (opts) => runExport("img", opts),
+    toSvg: (opts) => runExport("svg", opts),
+    toCanvas: (opts) => runExport("canvas", opts),
+    toBlob: (opts) => runExport("blob", opts),
+    toPng: (opts) => runExport("png", opts),
+    toJpg: (opts) => runExport("jpg", opts),
+    // ← alias requerido por los tests
+    toWebp: (opts) => runExport("webp", opts),
+    download: (opts) => runExport("download", opts)
+    // ← método directo (no toDownload)
   };
+  for (const key of Object.keys(exportsMap)) {
+    const helper = "to" + key.charAt(0).toUpperCase() + key.slice(1);
+    if (!result[helper]) {
+      result[helper] = (opts) => runExport(key, opts);
+    }
+  }
+  return result;
 };
 snapdom.toRaw = (el, options) => snapdom(el, options).then((result) => result.toRaw());
 snapdom.toImg = (el, options) => snapdom(el, options).then((result) => result.toImg());
@@ -3990,30 +4349,47 @@ async function safariWarmup(element, baseOptions) {
   try {
     url = await captureDOM(element, preflight);
   } catch {
-    return;
   }
-  await new Promise((resolve) => {
-    const img = new Image();
-    img.decoding = "sync";
-    img.loading = "eager";
-    img.style.position = "fixed";
-    img.style.left = 0;
-    img.style.top = 0;
-    img.style.width = "10px";
-    img.style.height = "10px";
-    img.style.opacity = "0.01";
-    img.style.transform = "translateZ(10px)";
-    img.style.willChange = "transform,opacity;";
-    img.src = url;
-    const cleanup = async () => {
-      await new Promise((r) => setTimeout(r, 100));
-      if (img && img.parentNode) img.parentNode.removeChild(img);
-      _safariWarmup = true;
-      resolve();
-    };
-    document.body.appendChild(img);
-    cleanup();
+  await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+  if (url) {
+    await new Promise((resolve) => {
+      const img = new Image();
+      try {
+        img.decoding = "sync";
+        img.loading = "eager";
+      } catch {
+      }
+      img.style.cssText = "position:fixed;left:0px;top:0px;width:10px;height:10px;opacity:0.01;pointer-events:none;";
+      img.src = url;
+      document.body.appendChild(img);
+      (async () => {
+        try {
+          if (typeof img.decode === "function") await img.decode();
+        } catch {
+        }
+        const start = performance.now();
+        while (!(img.complete && img.naturalWidth > 0) && performance.now() - start < 900) {
+          await new Promise((r) => setTimeout(r, 50));
+        }
+        await new Promise((r) => requestAnimationFrame(r));
+        try {
+          img.remove();
+        } catch {
+        }
+        resolve();
+      })();
+    });
+  }
+  element.querySelectorAll("canvas").forEach((c) => {
+    try {
+      const ctx = c.getContext("2d", { willReadFrequently: true });
+      if (ctx) {
+        ctx.getImageData(0, 0, 1, 1);
+      }
+    } catch {
+    }
   });
+  _safariWarmup = true;
 }
 function hasBackgroundOrMask(el) {
   const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
@@ -4026,6 +4402,7 @@ function hasBackgroundOrMask(el) {
     const bg = cs.backgroundImage && cs.backgroundImage !== "none";
     const mask = cs.maskImage && cs.maskImage !== "none" || cs.webkitMaskImage && cs.webkitMaskImage !== "none";
     if (bg || mask) return true;
+    if (node.tagName === "CANVAS") return true;
   }
   return false;
 }
@@ -4051,6 +4428,7 @@ async function preCache(root = document, options = {}) {
     cache.session.styleCache = /* @__PURE__ */ new WeakMap();
   }
   cache.image = cache.image || /* @__PURE__ */ new Map();
+  cache.background = cache.background || /* @__PURE__ */ new Map();
   try {
     await inlineBackgroundImages(
       root,
@@ -4063,7 +4441,13 @@ async function preCache(root = document, options = {}) {
   }
   let imgEls = [], allEls = [];
   try {
-    if (root?.querySelectorAll) {
+    if (root && root.nodeType === 1) {
+      const descendants = root.querySelectorAll ? Array.from(root.querySelectorAll("*")) : [];
+      allEls = [root, ...descendants];
+      imgEls = [];
+      if (root.tagName === "IMG" && root.getAttribute("src")) imgEls.push(root);
+      imgEls.push(...Array.from(root.querySelectorAll?.("img[src]") || []));
+    } else if (root?.querySelectorAll) {
       imgEls = Array.from(root.querySelectorAll("img[src]"));
       allEls = Array.from(root.querySelectorAll("*"));
     }
@@ -4087,17 +4471,18 @@ async function preCache(root = document, options = {}) {
   for (const el of allEls) {
     let bg = "";
     try {
-      bg = getStyle(el).backgroundImage;
+      bg = el?.style?.backgroundImage || "";
+      if (!bg || bg === "none") {
+        bg = getStyle(el).backgroundImage;
+      }
     } catch {
     }
     if (bg && bg !== "none") {
-      const parts = splitBackgroundImage(bg);
-      for (const entry of parts) {
-        if (entry.startsWith("url(")) {
-          const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy })).catch(() => {
-          });
-          promises.push(p);
-        }
+      const urlEntries = bg.match(/url\((?:[^()"']+|"(?:[^"]*)"|'(?:[^']*)')\)/gi) || [];
+      for (const entry of urlEntries) {
+        const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy })).catch(() => {
+        });
+        promises.push(p);
       }
     }
   }