@zumer/snapdom 1.9.14 → 2.0.0-dev.1

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.14
+* v.2.0.0-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -13,6 +13,7 @@
   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
   var __propIsEnum = Object.prototype.propertyIsEnumerable;
+  var __pow = Math.pow;
   var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues = (a, b) => {
     for (var prop in b || (b = {}))
@@ -63,6 +64,7 @@
     }
   };
   function applyCachePolicy(policy = "soft") {
+    cache.session.__counterEpoch = (cache.session.__counterEpoch || 0) + 1;
     switch (policy) {
       case "auto": {
         cache.session.styleMap = /* @__PURE__ */ new Map();
@@ -859,6 +861,27 @@
   }
 
   // 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) {
     var _a, _b, _c;
     if (!(sourceEl instanceof Element) || !(cloneEl instanceof Element)) return;
@@ -874,42 +897,62 @@
         }
       }
     }
-    if (!hasVar) return;
-    let cs;
-    try {
-      cs = getComputedStyle(sourceEl);
-    } catch (e) {
-      return;
+    let cs = null;
+    if (hasVar) {
+      try {
+        cs = getComputedStyle(sourceEl);
+      } catch (e) {
+      }
     }
-    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 (e) {
+    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 (e) {
+            }
           }
         }
       }
     }
-    if ((_c = sourceEl.attributes) == null ? void 0 : _c.length) {
+    if (hasVar && ((_c = sourceEl.attributes) == null ? void 0 : _c.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 (e) {
+          }
+        }
+      }
+    }
+    if (!hasVar) {
+      if (!cs) {
         try {
-          resolved = cs.getPropertyValue(propName);
+          cs = getComputedStyle(sourceEl);
         } catch (e) {
+          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 (e) {
           }
         }
@@ -1239,11 +1282,50 @@
         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 (e) {
+          }
+          yield new Promise((r) => requestAnimationFrame(r));
+          url = node.toDataURL("image/png");
+          if (!url || url === "data:,") {
+            try {
+              ctx && ctx.getImageData(0, 0, 1, 1);
+            } catch (e) {
+            }
+            yield 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 (e) {
+        }
         const img = document.createElement("img");
-        img.src = dataURL;
+        try {
+          img.decoding = "sync";
+          img.loading = "eager";
+        } catch (e) {
+        }
+        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 (e) {
+        }
         sessionCache.nodeMap.set(img, node);
         inlineAllStyles(node, img, sessionCache, options);
         return img;
@@ -1422,6 +1504,130 @@
     if (/icon/i.test(text) || /glyph/i.test(text) || /symbols/i.test(text) || /feather/i.test(text) || /fontawesome/i.test(text)) return true;
     return false;
   }
+  function isMaterialFamily(family = "") {
+    const s = String(family).toLowerCase();
+    return /\bmaterial\s*icons\b/.test(s) || /\bmaterial\s*symbols\b/.test(s);
+  }
+  function ensureMaterialFontsReady(family = "Material Icons", px = 24) {
+    return __async(this, null, function* () {
+      try {
+        yield Promise.all([
+          document.fonts.load(`400 ${px}px "${family.replace(/["']/g, "")}"`),
+          document.fonts.ready
+        ]);
+      } catch (e) {
+      }
+    });
+  }
+  function resolvePaintColor(cs) {
+    var _a, _b;
+    let fill = ((_a = cs.getPropertyValue("-webkit-text-fill-color")) == null ? void 0 : _a.trim()) || "";
+    const isTransparent = /rgba?\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(fill);
+    if (fill && !isTransparent && fill.toLowerCase() !== "currentcolor") {
+      return fill;
+    }
+    const c = (_b = cs.color) == null ? void 0 : _b.trim();
+    return c && c !== "inherit" ? c : "#000";
+  }
+  function materialIconToImage(_0) {
+    return __async(this, arguments, function* (ligatureText, {
+      family = "Material Icons",
+      weight = "normal",
+      fontSize = 32,
+      color = "#000",
+      variation = ""
+    } = {}) {
+      const fam = String(family || "").replace(/^['"]+|['"]+$/g, "");
+      const dpr = window.devicePixelRatio || 1;
+      yield ensureMaterialFontsReady(fam, fontSize);
+      const span = document.createElement("span");
+      span.textContent = ligatureText;
+      span.style.position = "absolute";
+      span.style.visibility = "hidden";
+      span.style.left = "-99999px";
+      span.style.whiteSpace = "nowrap";
+      span.style.fontFamily = `"${fam}"`;
+      span.style.fontWeight = String(weight || "normal");
+      span.style.fontSize = `${fontSize}px`;
+      span.style.lineHeight = "1";
+      span.style.margin = "0";
+      span.style.padding = "0";
+      span.style.fontFeatureSettings = "'liga' 1";
+      span.style.fontVariantLigatures = "normal";
+      if (variation) span.style.fontVariationSettings = variation;
+      span.style.color = color;
+      document.body.appendChild(span);
+      const rect = span.getBoundingClientRect();
+      const width = Math.max(1, Math.ceil(rect.width));
+      const height = Math.max(1, Math.ceil(rect.height));
+      document.body.removeChild(span);
+      const canvas = document.createElement("canvas");
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      const ctx = canvas.getContext("2d");
+      ctx.scale(dpr, dpr);
+      ctx.font = `${weight ? `${weight} ` : ""}${fontSize}px "${fam}"`;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "top";
+      ctx.fillStyle = color;
+      try {
+        ctx.fontKerning = "normal";
+      } catch (e) {
+      }
+      ctx.fillText(ligatureText, 0, 0);
+      return {
+        dataUrl: canvas.toDataURL(),
+        width,
+        height
+      };
+    });
+  }
+  function ligatureIconToImage(cloneRoot, sourceRoot) {
+    return __async(this, null, function* () {
+      if (!(cloneRoot instanceof Element)) return 0;
+      const selector = '.material-icons, [class*="material-symbols"]';
+      const cloneNodes = Array.from(
+        cloneRoot.querySelectorAll(selector)
+      ).filter((n) => n && n.textContent && n.textContent.trim());
+      if (cloneNodes.length === 0) return 0;
+      const sourceNodes = sourceRoot instanceof Element ? Array.from(sourceRoot.querySelectorAll(selector)).filter((n) => n && n.textContent && n.textContent.trim()) : [];
+      let replaced = 0;
+      for (let i = 0; i < cloneNodes.length; i++) {
+        const el = cloneNodes[i];
+        const src = sourceNodes[i] || null;
+        try {
+          const csSrc = src ? getComputedStyle(src) : getComputedStyle(el);
+          const family = csSrc.fontFamily || "Material Icons";
+          if (!isMaterialFamily(family)) continue;
+          const text = (src || el).textContent.trim();
+          if (!text) continue;
+          const size = parseInt(csSrc.fontSize, 10) || 24;
+          const weight = csSrc.fontWeight && csSrc.fontWeight !== "normal" ? csSrc.fontWeight : "normal";
+          const color = resolvePaintColor(csSrc);
+          const variation = csSrc.fontVariationSettings && csSrc.fontVariationSettings !== "normal" ? csSrc.fontVariationSettings : "";
+          const { dataUrl, width, height } = yield materialIconToImage(text, {
+            family,
+            weight,
+            fontSize: size,
+            color,
+            variation
+          });
+          el.textContent = "";
+          const img = el.ownerDocument.createElement("img");
+          img.src = dataUrl;
+          img.alt = text;
+          img.style.height = `${size}px`;
+          img.style.width = `${Math.max(1, Math.round(width / height * size))}px`;
+          img.style.objectFit = "contain";
+          img.style.verticalAlign = getComputedStyle(el).verticalAlign || "baseline";
+          el.appendChild(img);
+          replaced++;
+        } catch (e) {
+        }
+      }
+      return replaced;
+    });
+  }
 
   // src/modules/fonts.js
   function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
@@ -2254,6 +2460,11 @@ ${imported}
     }
   }
   function buildCounterContext(root) {
+    const getEpoch = () => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = cache) == null ? void 0 : _a.session) == null ? void 0 : _b.__counterEpoch) != null ? _c : 0;
+    };
+    let run = getEpoch();
     const nodeCounters = /* @__PURE__ */ new WeakMap();
     const rootEl = root instanceof Document ? root.documentElement : root;
     const isLi = (el) => el && el.tagName === "LI";
@@ -2347,6 +2558,14 @@ ${imported}
     };
     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.
@@ -2355,6 +2574,7 @@ ${imported}
        */
       get(node, name) {
         var _a;
+        ensureFresh();
         const s = (_a = nodeCounters.get(node)) == null ? void 0 : _a.get(name);
         return s && s.length ? s[s.length - 1] : 0;
       },
@@ -2365,6 +2585,7 @@ ${imported}
        */
       getStack(node, name) {
         var _a;
+        ensureFresh();
         const s = (_a = nodeCounters.get(node)) == null ? void 0 : _a.get(name);
         return s ? s.slice() : [];
       }
@@ -2399,8 +2620,8 @@ ${imported}
   }
 
   // src/modules/pseudo.js
-  var counterCtx = null;
   var __siblingCounters = /* @__PURE__ */ new WeakMap();
+  var __pseudoEpoch = -1;
   function unquoteDoubleStrings2(s) {
     return (s || "").replace(/"([^"]*)"/g, "$1");
   }
@@ -2497,14 +2718,21 @@ ${imported}
   }
   function inlinePseudoElements(source, clone, sessionCache, options) {
     return __async(this, null, function* () {
-      var _a;
+      var _a, _b, _c, _d;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
-      if (!counterCtx) {
+      const epoch = (_c = (_b = (_a = cache) == null ? void 0 : _a.session) == null ? void 0 : _b.__counterEpoch) != null ? _c : 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 (e) {
         }
       }
+      const counterCtx = sessionCache.__counterCtx;
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
         try {
           const style = getStyle(source, pseudo);
@@ -2572,7 +2800,8 @@ ${imported}
           }
           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");
@@ -2600,9 +2829,23 @@ ${imported}
           } 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 (e) {
           }
           if (hasBg) {
             try {
@@ -2614,7 +2857,7 @@ ${imported}
             }
           }
           if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_a = pseudoEl.textContent) == null ? void 0 : _a.trim()) !== "";
+          const hasContent2 = pseudoEl.childNodes.length > 0 || ((_d = pseudoEl.textContent) == null ? void 0 : _d.trim()) !== "";
           const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBorder || hasTransform;
           if (incs && incs.length && source.parentElement) {
             const map = __siblingCounters.get(source.parentElement) || /* @__PURE__ */ new Map();
@@ -2646,53 +2889,114 @@ ${imported}
   }
 
   // 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) {
+    var _a, _b, _c, _d;
+    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);
+      }
+      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 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;
+    };
+    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 = ((_a = node.getAttribute) == null ? void 0 : _a.call(node, "href")) || ((_b = node.getAttribute) == null ? void 0 : _b.call(node, "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 = ((_c = node.getAttribute) == null ? void 0 : _c.call(node, "style")) || "";
+        if (style) addUrlIdsFromValue(style);
+        for (const a of URL_ATTRS) {
+          const v = (_d = node.getAttribute) == null ? void 0 : _d.call(node, a);
+          if (v) addUrlIdsFromValue(v);
         }
       }
-    });
+    }
   }
 
   // src/modules/changeCSS.js
@@ -3155,6 +3459,17 @@ ${imported}
         "-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",
@@ -3170,6 +3485,11 @@ ${imported}
           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;
@@ -3194,7 +3514,7 @@ ${imported}
           }
         }
         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]]);
         }
@@ -3260,6 +3580,85 @@ ${imported}
     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;
+  }
+  function runHook(name, context, payload) {
+    return __async(this, null, function* () {
+      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 = yield fn(context, acc);
+        if (typeof out !== "undefined") acc = out;
+      }
+      return acc;
+    });
+  }
+  function runAll(name, context, payload) {
+    return __async(this, null, function* () {
+      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 = yield 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;
@@ -3288,43 +3687,52 @@ ${imported}
       if (!element) throw new Error("Element cannot be null or undefined");
       applyCachePolicy(options.cache);
       const fast = options.fast;
-      const straighten = !!options.straighten;
-      const noShadows = !!options.noShadows;
+      const outerTransforms = options.outerTransforms !== false;
+      const outerShadows = !!options.outerShadows;
+      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);
+      yield runHook("beforeSnap", state);
+      yield runHook("beforeClone", state);
+      const undoClamp = lineClamp(state.element);
       try {
-        ({ clone, classCSS, styleCache } = yield prepareClone(element, options));
-        if (straighten && clone) {
-          rootTransform2D = normalizeRootTransforms(element, clone);
+        ({ clone, classCSS, styleCache } = yield prepareClone(state.element, state.options));
+        if (!outerTransforms && clone) {
+          rootTransform2D = normalizeRootTransforms(state.element, clone);
         }
-        if (noShadows && clone) {
-          stripRootShadows(element, clone);
+        if (!outerShadows && clone) {
+          stripRootShadows(state.element, clone);
         }
       } finally {
         undoClamp();
       }
+      state = __spreadValues({ clone, classCSS, styleCache }, state);
+      yield runHook("afterClone", state);
+      try {
+        yield ligatureIconToImage(state.clone, state.element);
+      } catch (e) {
+      }
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
-          yield inlineImages(clone, options);
+          yield inlineImages(state.clone, state.options);
           resolve();
         }), { fast });
       });
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
-          yield inlineBackgroundImages(element, clone, styleCache, options);
+          yield inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
           resolve();
         }), { fast });
       });
       if (options.embedFonts) {
         yield new Promise((resolve) => {
           idle(() => __async(null, null, function* () {
-            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)
@@ -3335,14 +3743,14 @@ ${imported}
               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);
@@ -3355,70 +3763,57 @@ ${imported}
           }, { fast });
         });
       }
+      state = __spreadValues({ fontsCSS, baseCSS }, state);
+      yield runHook("beforeRender", state);
       yield new Promise((resolve) => {
         idle(() => {
-          const csEl = getComputedStyle(element);
-          function parseFilterDropShadows(cs) {
-            var _a;
-            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 = ((_a = tok.match(/-?\d+(?:\.\d+)?px/gi)) == null ? void 0 : _a.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 };
+          if (!outerTransforms && 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 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 = outerTransforms && 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",
@@ -3428,73 +3823,108 @@ ${imported}
               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);
           const bleedBlur = parseFilterBlur(csEl);
           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
+          const bleed = !outerShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
+            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 extraPad = !outerTransforms ? 1 : 0;
+          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 = __spreadValues({ svgString, dataURL }, state);
           resolve();
         }, { fast });
       });
+      yield 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 * __pow(10, n)) / __pow(10, n) : v;
+  function parseFilterDropShadows(cs) {
+    var _a;
+    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 = ((_a = tok.match(/-?\d+(?:\.\d+)?px/gi)) == null ? void 0 : _a.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;
     const cs = getComputedStyle(originalEl);
@@ -3747,7 +4177,8 @@ ${imported}
   }
   function createContext(options = {}) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-    const resolvedFormat = (_a = options.format) != null ? _a : "png";
+    let resolvedFormat = (_a = options.format) != null ? _a : "png";
+    if (resolvedFormat === "jpg") resolvedFormat = "jpeg";
     const cachePolicy = normalizeCachePolicy(options.cache);
     return {
       // Debug & perf
@@ -3779,11 +4210,11 @@ ${imported}
       type: (_n = options.type) != null ? _n : "svg",
       quality: (_o = options.quality) != null ? _o : 0.92,
       dpr: (_p = options.dpr) != null ? _p : window.devicePixelRatio || 1,
-      backgroundColor: (_q = options.backgroundColor) != null ? _q : ["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
+      backgroundColor: (_q = options.backgroundColor) != null ? _q : ["jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
       filename: (_r = options.filename) != null ? _r : "snapDOM",
       // NEW flags (user-friendly)
-      straighten: (_s = options.straighten) != null ? _s : false,
-      noShadows: (_t = options.noShadows) != null ? _t : false
+      outerTransforms: (_s = options.outerTransforms) != null ? _s : true,
+      outerShadows: (_t = options.outerShadows) != null ? _t : false
       // Plugins (reservado)
       // plugins: normalizePlugins(...),
     };
@@ -3911,20 +4342,20 @@ ${imported}
       } 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");
@@ -4042,17 +4473,23 @@ ${imported}
   }
 
   // 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;
   function snapdom(element, userOptions) {
     return __async(this, null, function* () {
       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 {
             yield safariWarmup(element, userOptions);
-            console.log("Iteraci\xF3n n\xFAmero:", i);
+            console.log("safariWarmup:", i);
             _safariWarmup = false;
           } catch (e) {
           }
@@ -4068,31 +4505,108 @@ ${imported}
       return snapdom.capture(element, context, INTERNAL_TOKEN);
     });
   }
+  snapdom.plugins = (...defs) => {
+    registerPlugins(...defs);
+    return snapdom;
+  };
   snapdom.capture = (el, context, _token) => __async(null, null, function* () {
     if (_token !== INTERNAL_TOKEN) throw new Error("[snapdom.capture] is internal. Use snapdom(...) instead.");
     const url = yield captureDOM(el, context);
-    const ensureContext = (opts) => __spreadValues(__spreadValues({}, context), opts || {});
-    const withFormat = (format) => (opts) => {
-      const next = ensureContext(__spreadProps(__spreadValues({}, 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: (ctx, opts) => __async(null, null, function* () {
+        return toImg(url, __spreadValues(__spreadValues({}, ctx), opts || {}));
+      }),
+      svg: (ctx, opts) => __async(null, null, function* () {
+        return toImg(url, __spreadValues(__spreadValues({}, ctx), opts || {}));
+      }),
+      canvas: (ctx, opts) => __async(null, null, function* () {
+        return toCanvas(url, __spreadValues(__spreadValues({}, ctx), opts || {}));
+      }),
+      blob: (ctx, opts) => __async(null, null, function* () {
+        return toBlob(url, __spreadValues(__spreadValues({}, ctx), opts || {}));
+      }),
+      png: (ctx, opts) => __async(null, null, function* () {
+        return rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, ctx), opts || {}), { format: "png" }));
+      }),
+      jpeg: (ctx, opts) => __async(null, null, function* () {
+        return rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, ctx), opts || {}), { format: "jpeg" }));
+      }),
+      webp: (ctx, opts) => __async(null, null, function* () {
+        return rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, ctx), opts || {}), { format: "webp" }));
+      }),
+      download: (ctx, opts) => __async(null, null, function* () {
+        return download(url, __spreadValues(__spreadValues({}, ctx), opts || {}));
+      })
     };
-    return {
+    const _pluginExports = {
+      svg: (opts) => toImg(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { [INTERNAL_EXPORT_TOKEN]: true })),
+      canvas: (opts) => toCanvas(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { [INTERNAL_EXPORT_TOKEN]: true })),
+      png: (opts) => rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { format: "png", [INTERNAL_EXPORT_TOKEN]: true })),
+      jpeg: (opts) => rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { format: "jpeg", [INTERNAL_EXPORT_TOKEN]: true })),
+      jpg: (opts) => rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { format: "jpeg", [INTERNAL_EXPORT_TOKEN]: true })),
+      webp: (opts) => rasterize(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { format: "webp", [INTERNAL_EXPORT_TOKEN]: true })),
+      blob: (opts) => toBlob(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { [INTERNAL_EXPORT_TOKEN]: true })),
+      img: (opts) => toImg(url, __spreadProps(__spreadValues(__spreadValues({}, context), opts || {}), { [INTERNAL_EXPORT_TOKEN]: true }))
+    };
+    const _defineCtx = __spreadProps(__spreadValues({}, context), { export: { url }, exports: _pluginExports });
+    const providedMaps = yield runAll("defineExports", _defineCtx);
+    const provided = Object.assign({}, ...providedMaps.filter((x) => x && typeof x === "object"));
+    const exportsMap = __spreadValues(__spreadValues({}, coreExports), provided);
+    if (exportsMap.jpeg && !exportsMap.jpg) {
+      exportsMap.jpg = (ctx, opts) => exportsMap.jpeg(ctx, opts);
+    }
+    function normalizeExportOptions(type, opts) {
+      const next = __spreadValues(__spreadValues({}, 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();
+    function runExport(type, opts) {
+      return __async(this, null, function* () {
+        const job = () => __async(null, null, function* () {
+          const work = exportsMap[type];
+          if (!work) throw new Error(`[snapdom] Unknown export type: ${type}`);
+          const nextOpts = normalizeExportOptions(type, opts);
+          const ctx = __spreadProps(__spreadValues({}, context), { export: { type, options: nextOpts, url } });
+          yield runHook("beforeExport", ctx);
+          const result2 = yield work(ctx, nextOpts);
+          yield runHook("afterExport", ctx, result2);
+          if (!afterSnapFired) {
+            afterSnapFired = true;
+            yield 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());
@@ -4115,30 +4629,47 @@ ${imported}
       try {
         url = yield captureDOM(element, preflight);
       } catch (e) {
-        return;
       }
-      yield 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(null, null, function* () {
-          yield new Promise((r) => setTimeout(r, 100));
-          if (img && img.parentNode) img.parentNode.removeChild(img);
-          _safariWarmup = true;
-          resolve();
+      yield new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+      if (url) {
+        yield new Promise((resolve) => {
+          const img = new Image();
+          try {
+            img.decoding = "sync";
+            img.loading = "eager";
+          } catch (e) {
+          }
+          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(null, null, function* () {
+            try {
+              if (typeof img.decode === "function") yield img.decode();
+            } catch (e) {
+            }
+            const start = performance.now();
+            while (!(img.complete && img.naturalWidth > 0) && performance.now() - start < 900) {
+              yield new Promise((r) => setTimeout(r, 50));
+            }
+            yield new Promise((r) => requestAnimationFrame(r));
+            try {
+              img.remove();
+            } catch (e) {
+            }
+            resolve();
+          }))();
         });
-        document.body.appendChild(img);
-        cleanup();
+      }
+      element.querySelectorAll("canvas").forEach((c) => {
+        try {
+          const ctx = c.getContext("2d", { willReadFrequently: true });
+          if (ctx) {
+            ctx.getImageData(0, 0, 1, 1);
+          }
+        } catch (e) {
+        }
       });
+      _safariWarmup = true;
     });
   }
   function hasBackgroundOrMask(el) {
@@ -4152,6 +4683,7 @@ ${imported}
       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;
   }
@@ -4159,7 +4691,7 @@ ${imported}
   // src/api/preCache.js
   function preCache() {
     return __async(this, arguments, function* (root = document, options = {}) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       const {
         embedFonts = true,
         useProxy = ""
@@ -4179,6 +4711,7 @@ ${imported}
         cache.session.styleCache = /* @__PURE__ */ new WeakMap();
       }
       cache.image = cache.image || /* @__PURE__ */ new Map();
+      cache.background = cache.background || /* @__PURE__ */ new Map();
       try {
         yield inlineBackgroundImages(
           root,
@@ -4191,7 +4724,13 @@ ${imported}
       }
       let imgEls = [], allEls = [];
       try {
-        if (root == null ? void 0 : 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(((_d = root.querySelectorAll) == null ? void 0 : _d.call(root, "img[src]")) || []));
+        } else if (root == null ? void 0 : root.querySelectorAll) {
           imgEls = Array.from(root.querySelectorAll("img[src]"));
           allEls = Array.from(root.querySelectorAll("*"));
         }
@@ -4215,17 +4754,18 @@ ${imported}
       for (const el of allEls) {
         let bg = "";
         try {
-          bg = getStyle(el).backgroundImage;
+          bg = ((_e = el == null ? void 0 : el.style) == null ? void 0 : _e.backgroundImage) || "";
+          if (!bg || bg === "none") {
+            bg = getStyle(el).backgroundImage;
+          }
         } catch (e) {
         }
         if (bg && bg !== "none") {
-          const parts = splitBackgroundImage(bg);
-          for (const entry of parts) {
-            if (entry.startsWith("url(")) {
-              const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, __spreadProps(__spreadValues({}, options), { useProxy }))).catch(() => {
-              });
-              promises.push(p);
-            }
+          const urlEntries = bg.match(/url\((?:[^()"']+|"(?:[^"]*)"|'(?:[^']*)')\)/gi) || [];
+          for (const entry of urlEntries) {
+            const p = Promise.resolve().then(() => inlineSingleBackgroundEntry(entry, __spreadProps(__spreadValues({}, options), { useProxy }))).catch(() => {
+            });
+            promises.push(p);
           }
         }
       }
@@ -4245,7 +4785,7 @@ ${imported}
             usedCodepoints,
             exclude: options.excludeFonts,
             localFonts: options.localFonts,
-            useProxy: (_d = options.useProxy) != null ? _d : useProxy
+            useProxy: (_f = options.useProxy) != null ? _f : useProxy
           });
         } catch (e) {
         }