@zumer/snapdom 1.9.10-dev.1 → 1.9.10

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.10-dev.1
+* v.1.9.10
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -82,10 +82,13 @@
         cache.session.styleMap = /* @__PURE__ */ new Map();
         cache.session.nodeMap = /* @__PURE__ */ new Map();
         cache.session.styleCache = /* @__PURE__ */ new WeakMap();
-        cache.image.clear();
-        cache.background.clear();
-        cache.resource.clear();
-        cache.font.clear();
+        cache.computedStyle = /* @__PURE__ */ new WeakMap();
+        cache.baseStyle = /* @__PURE__ */ new Map();
+        cache.defaultStyle = /* @__PURE__ */ new Map();
+        cache.image = /* @__PURE__ */ new Map();
+        cache.background = /* @__PURE__ */ new Map();
+        cache.resource = /* @__PURE__ */ new Map();
+        cache.font = /* @__PURE__ */ new Set();
         return;
       }
       default: {
@@ -687,6 +690,11 @@
       const ctx = _resolveCtx(sessionOrCtx, opts);
       const resetMode = ctx.options && ctx.options.cache || "auto";
       if (resetMode !== "disabled") setupInvalidationOnce(document.documentElement);
+      if (resetMode === "disabled" && !ctx.session.__bumpedForDisabled) {
+        bumpEpoch();
+        snapshotKeyCache.clear();
+        ctx.session.__bumpedForDisabled = true;
+      }
       if (NO_DEFAULTS_TAGS.has((_a = source.tagName) == null ? void 0 : _a.toLowerCase())) {
         const author = (_b = source.getAttribute) == null ? void 0 : _b.call(source, "style");
         if (author) clone.setAttribute("style", author);
@@ -709,6 +717,31 @@
   }
 
   // src/core/clone.js
+  function idleCallback(childList, callback, fast) {
+    return Promise.all(childList.map((child) => {
+      return new Promise((resolve) => {
+        function deal() {
+          idle(
+            (deadline) => {
+              if (deadline instanceof IdleDeadline) {
+                if (deadline.timeRemaining()) {
+                  callback(child, resolve);
+                } else {
+                  deal();
+                }
+              } else {
+                callback(child, resolve);
+              }
+            },
+            {
+              fast
+            }
+          );
+        }
+        deal();
+      });
+    }));
+  }
   function addNotSlottedRightmost(sel) {
     sel = sel.trim();
     if (!sel) return sel;
@@ -830,185 +863,321 @@
       root.querySelectorAll("*").forEach((el) => el.setAttribute("data-sd-slotted", ""));
     }
   }
+  function getAccessibleIframeDocument(iframe, attempts = 3) {
+    return __async(this, null, function* () {
+      const probe = () => {
+        var _a;
+        try {
+          return iframe.contentDocument || ((_a = iframe.contentWindow) == null ? void 0 : _a.document) || null;
+        } catch (e) {
+          return null;
+        }
+      };
+      let doc = probe();
+      let i = 0;
+      while (i < attempts && (!doc || !doc.body && !doc.documentElement)) {
+        yield new Promise((r) => setTimeout(r, 0));
+        doc = probe();
+        i++;
+      }
+      return doc && (doc.body || doc.documentElement) ? doc : null;
+    });
+  }
+  function measureContentBox(el) {
+    const rect = el.getBoundingClientRect();
+    let bl = 0, br = 0, bt = 0, bb = 0;
+    try {
+      const cs = getComputedStyle(el);
+      bl = parseFloat(cs.borderLeftWidth) || 0;
+      br = parseFloat(cs.borderRightWidth) || 0;
+      bt = parseFloat(cs.borderTopWidth) || 0;
+      bb = parseFloat(cs.borderBottomWidth) || 0;
+    } catch (e) {
+    }
+    const contentWidth = Math.max(0, Math.round(rect.width - (bl + br)));
+    const contentHeight = Math.max(0, Math.round(rect.height - (bt + bb)));
+    return { contentWidth, contentHeight, rect };
+  }
+  function pinIframeViewport(doc, w, h) {
+    const style = doc.createElement("style");
+    style.setAttribute("data-sd-iframe-pin", "");
+    style.textContent = `html, body {margin: 0 !important;padding: 0 !important;width: ${w}px !important;height: ${h}px !important;min-width: ${w}px !important;min-height: ${h}px !important;box-sizing: border-box !important;overflow: hidden !important;background-clip: border-box !important;}`;
+    (doc.head || doc.documentElement).appendChild(style);
+    return () => {
+      try {
+        style.remove();
+      } catch (e) {
+      }
+    };
+  }
+  function rasterizeIframe(iframe, sessionCache, options) {
+    return __async(this, null, function* () {
+      const doc = yield getAccessibleIframeDocument(iframe, 3);
+      if (!doc) throw new Error("iframe document not accessible/ready");
+      const { contentWidth, contentHeight, rect } = measureContentBox(iframe);
+      const snap = options == null ? void 0 : options.snap;
+      if (!snap || typeof snap.toPng !== "function") {
+        throw new Error("snapdom.toPng not available in iframe or window");
+      }
+      const nested = __spreadProps(__spreadValues({}, options), { scale: 1 });
+      const unpin = pinIframeViewport(doc, contentWidth, contentHeight);
+      let imgEl;
+      try {
+        imgEl = yield snap.toPng(doc.documentElement, nested);
+      } finally {
+        unpin();
+      }
+      imgEl.style.display = "block";
+      imgEl.style.width = `${contentWidth}px`;
+      imgEl.style.height = `${contentHeight}px`;
+      const wrapper = document.createElement("div");
+      sessionCache.nodeMap.set(wrapper, iframe);
+      inlineAllStyles(iframe, wrapper, sessionCache, options);
+      wrapper.style.overflow = "hidden";
+      wrapper.style.display = "block";
+      if (!wrapper.style.width) wrapper.style.width = `${Math.round(rect.width)}px`;
+      if (!wrapper.style.height) wrapper.style.height = `${Math.round(rect.height)}px`;
+      wrapper.appendChild(imgEl);
+      return wrapper;
+    });
+  }
   function deepClone(node, sessionCache, options) {
-    var _a, _b, _c, _d, _e;
-    if (!node) throw new Error("Invalid node");
-    const clonedAssignedNodes = /* @__PURE__ */ new Set();
-    let pendingSelectValue = null;
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const tag = (node.localName || node.tagName || "").toLowerCase();
-      if (node.id === "snapdom-sandbox" || node.hasAttribute("data-snapdom-sandbox")) {
-        return null;
+    return __async(this, null, function* () {
+      var _a, _b, _c, _d, _e, _f;
+      if (!node) throw new Error("Invalid node");
+      const clonedAssignedNodes = /* @__PURE__ */ new Set();
+      let pendingSelectValue = null;
+      let pendingTextAreaValue = null;
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const tag = (node.localName || node.tagName || "").toLowerCase();
+        if (node.id === "snapdom-sandbox" || node.hasAttribute("data-snapdom-sandbox")) {
+          return null;
+        }
+        if (NO_CAPTURE_TAGS.has(tag)) {
+          return null;
+        }
       }
-      if (NO_CAPTURE_TAGS.has(tag)) {
-        return null;
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.cloneNode(true);
       }
-    }
-    if (node.nodeType === Node.TEXT_NODE) {
-      return node.cloneNode(true);
-    }
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      return node.cloneNode(true);
-    }
-    if (node.getAttribute("data-capture") === "exclude") {
-      const spacer = document.createElement("div");
-      const rect = node.getBoundingClientRect();
-      spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-      return spacer;
-    }
-    if (options.exclude && Array.isArray(options.exclude)) {
-      for (const selector of options.exclude) {
+      if (node.nodeType !== Node.ELEMENT_NODE) {
+        return node.cloneNode(true);
+      }
+      if (node.getAttribute("data-capture") === "exclude") {
+        const spacer = document.createElement("div");
+        const rect = node.getBoundingClientRect();
+        spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+        return spacer;
+      }
+      if (options.exclude && Array.isArray(options.exclude)) {
+        for (const selector of options.exclude) {
+          try {
+            if ((_a = node.matches) == null ? void 0 : _a.call(node, selector)) {
+              const spacer = document.createElement("div");
+              const rect = node.getBoundingClientRect();
+              spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+              return spacer;
+            }
+          } catch (err) {
+            console.warn(`Invalid selector in exclude option: ${selector}`, err);
+          }
+        }
+      }
+      if (typeof options.filter === "function") {
         try {
-          if ((_a = node.matches) == null ? void 0 : _a.call(node, selector)) {
+          if (!options.filter(node)) {
             const spacer = document.createElement("div");
             const rect = node.getBoundingClientRect();
             spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
             return spacer;
           }
         } catch (err) {
-          console.warn(`Invalid selector in exclude option: ${selector}`, err);
+          console.warn("Error in filter function:", err);
         }
       }
-    }
-    if (typeof options.filter === "function") {
-      try {
-        if (!options.filter(node)) {
-          const spacer = document.createElement("div");
+      if (node.tagName === "IFRAME") {
+        let sameOrigin = false;
+        try {
+          sameOrigin = !!(node.contentDocument || ((_b = node.contentWindow) == null ? void 0 : _b.document));
+        } catch (e) {
+          sameOrigin = false;
+        }
+        if (sameOrigin) {
+          try {
+            const wrapper = yield rasterizeIframe(node, sessionCache, options);
+            return wrapper;
+          } catch (err) {
+            console.warn("[SnapDOM] iframe rasterization failed, fallback:", err);
+          }
+        }
+        if (options.placeholders) {
+          const fallback = document.createElement("div");
+          fallback.style.cssText = `width:${node.offsetWidth}px;height:${node.offsetHeight}px;background-image:repeating-linear-gradient(45deg,#ddd,#ddd 5px,#f9f9f9 5px,#f9f9f9 10px);display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;border:1px solid #aaa;`;
+          inlineAllStyles(node, fallback, sessionCache, options);
+          return fallback;
+        } else {
           const rect = node.getBoundingClientRect();
+          const spacer = document.createElement("div");
           spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+          inlineAllStyles(node, spacer, sessionCache, options);
           return spacer;
         }
-      } catch (err) {
-        console.warn("Error in filter function:", err);
       }
-    }
-    if (node.tagName === "IFRAME") {
-      if (options.placeholders) {
-        const fallback = document.createElement("div");
-        fallback.style.cssText = `width:${node.offsetWidth}px;height:${node.offsetHeight}px;background-image:repeating-linear-gradient(45deg,#ddd,#ddd 5px,#f9f9f9 5px,#f9f9f9 10px);display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;border:1px solid #aaa;`;
-        inlineAllStyles(node, fallback, sessionCache, options);
-        return fallback;
-      } else {
-        const rect = node.getBoundingClientRect();
-        const spacer = document.createElement("div");
-        spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-        inlineAllStyles(node, spacer, sessionCache, options);
-        return spacer;
-      }
-    }
-    if (node.getAttribute("data-capture") === "placeholder") {
-      const clone2 = node.cloneNode(false);
-      sessionCache.nodeMap.set(clone2, node);
-      inlineAllStyles(node, clone2, sessionCache, options);
-      const placeholder = document.createElement("div");
-      placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
-      placeholder.style.cssText = `color:#666;font-size:12px;text-align:center;line-height:1.4;padding:0.5em;box-sizing:border-box;`;
-      clone2.appendChild(placeholder);
-      return clone2;
-    }
-    if (node.tagName === "CANVAS") {
-      const dataURL = node.toDataURL();
-      const img = document.createElement("img");
-      img.src = dataURL;
-      img.width = node.width;
-      img.height = node.height;
-      sessionCache.nodeMap.set(img, node);
-      inlineAllStyles(node, img, sessionCache, options);
-      return img;
-    }
-    let clone;
-    try {
-      clone = node.cloneNode(false);
-      sessionCache.nodeMap.set(clone, node);
-      if (node.tagName === "IMG") {
-        freezeImgSrcset(node, clone);
-      }
-    } catch (err) {
-      console.error("[Snapdom] Failed to clone node:", node, err);
-      throw err;
-    }
-    if (node instanceof HTMLTextAreaElement) {
-      clone.textContent = node.value;
-      clone.value = node.value;
-      const rect = node.getBoundingClientRect();
-      clone.style.width = `${rect.width}px`;
-      clone.style.height = `${rect.height}px`;
-    }
-    if (node instanceof HTMLInputElement) {
-      clone.value = node.value;
-      clone.setAttribute("value", node.value);
-      if (node.checked !== void 0) {
-        clone.checked = node.checked;
-        if (node.checked) clone.setAttribute("checked", "");
-        if (node.indeterminate) clone.indeterminate = node.indeterminate;
+      if (node.getAttribute("data-capture") === "placeholder") {
+        const clone2 = node.cloneNode(false);
+        sessionCache.nodeMap.set(clone2, node);
+        inlineAllStyles(node, clone2, sessionCache, options);
+        const placeholder = document.createElement("div");
+        placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
+        placeholder.style.cssText = `color:#666;font-size:12px;text-align:center;line-height:1.4;padding:0.5em;box-sizing:border-box;`;
+        clone2.appendChild(placeholder);
+        return clone2;
+      }
+      if (node.tagName === "CANVAS") {
+        const dataURL = node.toDataURL();
+        const img = document.createElement("img");
+        img.src = dataURL;
+        img.width = node.width;
+        img.height = node.height;
+        sessionCache.nodeMap.set(img, node);
+        inlineAllStyles(node, img, sessionCache, options);
+        return img;
       }
-    }
-    if (node instanceof HTMLSelectElement) {
-      pendingSelectValue = node.value;
-    }
-    inlineAllStyles(node, clone, sessionCache, options);
-    if (node.shadowRoot) {
+      let clone;
       try {
-        const slots = node.shadowRoot.querySelectorAll("slot");
-        for (const s of slots) {
-          let assigned = [];
+        clone = node.cloneNode(false);
+        sessionCache.nodeMap.set(clone, node);
+        if (node.tagName === "IMG") {
+          freezeImgSrcset(node, clone);
           try {
-            assigned = ((_b = s.assignedNodes) == null ? void 0 : _b.call(s, { flatten: true })) || ((_c = s.assignedNodes) == null ? void 0 : _c.call(s)) || [];
+            const rect = node.getBoundingClientRect();
+            let w = Math.round(rect.width || 0);
+            let h = Math.round(rect.height || 0);
+            if (!w || !h) {
+              const computed = window.getComputedStyle(node);
+              const cssW = parseFloat(computed.width) || 0;
+              const cssH = parseFloat(computed.height) || 0;
+              const attrW = parseInt(node.getAttribute("width") || "", 10) || 0;
+              const attrH = parseInt(node.getAttribute("height") || "", 10) || 0;
+              const propW = node.width || node.naturalWidth || 0;
+              const propH = node.height || node.naturalHeight || 0;
+              w = Math.round(w || cssW || attrW || propW || 0);
+              h = Math.round(h || cssH || attrH || propH || 0);
+            }
+            if (w) clone.dataset.snapdomWidth = String(w);
+            if (h) clone.dataset.snapdomHeight = String(h);
           } catch (e) {
-            assigned = ((_d = s.assignedNodes) == null ? void 0 : _d.call(s)) || [];
           }
-          for (const an of assigned) clonedAssignedNodes.add(an);
         }
-      } catch (e) {
+      } catch (err) {
+        console.error("[Snapdom] Failed to clone node:", node, err);
+        throw err;
       }
-      const scopeId = nextShadowScopeId(sessionCache);
-      const scopeSelector = `[data-sd="${scopeId}"]`;
-      try {
-        clone.setAttribute("data-sd", scopeId);
-      } catch (e) {
+      if (node instanceof HTMLTextAreaElement) {
+        const rect = node.getBoundingClientRect();
+        clone.style.width = `${rect.width}px`;
+        clone.style.height = `${rect.height}px`;
+      }
+      if (node instanceof HTMLInputElement) {
+        clone.value = node.value;
+        clone.setAttribute("value", node.value);
+        if (node.checked !== void 0) {
+          clone.checked = node.checked;
+          if (node.checked) clone.setAttribute("checked", "");
+          if (node.indeterminate) clone.indeterminate = node.indeterminate;
+        }
       }
-      const rawCSS = extractShadowCSS(node.shadowRoot);
-      const rewritten = rewriteShadowCSS(rawCSS, scopeSelector);
-      const neededVars = collectCustomPropsFromCSS(rawCSS);
-      const seed = buildSeedCustomPropsRule(node, neededVars, scopeSelector);
-      injectScopedStyle(clone, seed + rewritten, scopeId);
-      const shadowFrag = document.createDocumentFragment();
-      for (const child of node.shadowRoot.childNodes) {
-        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") continue;
-        const clonedChild = deepClone(child, sessionCache, options);
-        if (clonedChild) shadowFrag.appendChild(clonedChild);
-      }
-      clone.appendChild(shadowFrag);
-    }
-    if (node.tagName === "SLOT") {
-      const assigned = ((_e = node.assignedNodes) == null ? void 0 : _e.call(node, { flatten: true })) || [];
-      const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
-      const fragment = document.createDocumentFragment();
-      for (const child of nodesToClone) {
-        const clonedChild = deepClone(child, sessionCache, options);
-        if (clonedChild) {
-          markSlottedSubtree(clonedChild);
-          fragment.appendChild(clonedChild);
+      if (node instanceof HTMLSelectElement) {
+        pendingSelectValue = node.value;
+      }
+      if (node instanceof HTMLTextAreaElement) {
+        pendingTextAreaValue = node.value;
+      }
+      inlineAllStyles(node, clone, sessionCache, options);
+      if (node.shadowRoot) {
+        let callback2 = function(child, resolve) {
+          if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+            return resolve(null);
+          } else {
+            deepClone(child, sessionCache, options).then((clonedChild) => {
+              resolve(clonedChild || null);
+            }).catch((e) => {
+              resolve(null);
+            });
+          }
+        };
+        try {
+          const slots = node.shadowRoot.querySelectorAll("slot");
+          for (const s of slots) {
+            let assigned = [];
+            try {
+              assigned = ((_c = s.assignedNodes) == null ? void 0 : _c.call(s, { flatten: true })) || ((_d = s.assignedNodes) == null ? void 0 : _d.call(s)) || [];
+            } catch (e) {
+              assigned = ((_e = s.assignedNodes) == null ? void 0 : _e.call(s)) || [];
+            }
+            for (const an of assigned) clonedAssignedNodes.add(an);
+          }
+        } catch (e) {
+        }
+        const scopeId = nextShadowScopeId(sessionCache);
+        const scopeSelector = `[data-sd="${scopeId}"]`;
+        try {
+          clone.setAttribute("data-sd", scopeId);
+        } catch (e) {
         }
+        const rawCSS = extractShadowCSS(node.shadowRoot);
+        const rewritten = rewriteShadowCSS(rawCSS, scopeSelector);
+        const neededVars = collectCustomPropsFromCSS(rawCSS);
+        const seed = buildSeedCustomPropsRule(node, neededVars, scopeSelector);
+        injectScopedStyle(clone, seed + rewritten, scopeId);
+        const shadowFrag = document.createDocumentFragment();
+        const cloneList2 = yield idleCallback(Array.from(node.shadowRoot.childNodes), callback2, options.fast);
+        shadowFrag.append(...cloneList2.filter((clonedChild) => !!clonedChild));
+        clone.appendChild(shadowFrag);
+      }
+      if (node.tagName === "SLOT") {
+        let callback2 = function(child, resolve) {
+          deepClone(child, sessionCache, options).then((clonedChild) => {
+            if (clonedChild) {
+              markSlottedSubtree(clonedChild);
+            }
+            resolve(clonedChild || null);
+          }).catch((e) => {
+            resolve(null);
+          });
+        };
+        const assigned = ((_f = node.assignedNodes) == null ? void 0 : _f.call(node, { flatten: true })) || [];
+        const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
+        const fragment = document.createDocumentFragment();
+        const cloneList2 = yield idleCallback(Array.from(nodesToClone), callback2, options.fast);
+        fragment.append(...cloneList2.filter((clonedChild) => !!clonedChild));
+        return fragment;
+      }
+      function callback(child, resolve) {
+        if (clonedAssignedNodes.has(child)) return resolve(null);
+        deepClone(child, sessionCache, options).then((clonedChild) => {
+          resolve(clonedChild || null);
+        }).catch((e) => {
+          resolve(null);
+        });
       }
-      return fragment;
-    }
-    for (const child of node.childNodes) {
-      if (clonedAssignedNodes.has(child)) continue;
-      const clonedChild = deepClone(child, sessionCache, options);
-      if (clonedChild) clone.appendChild(clonedChild);
-    }
-    if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
-      clone.value = pendingSelectValue;
-      for (const opt of clone.options) {
-        if (opt.value === pendingSelectValue) {
-          opt.setAttribute("selected", "");
-        } else {
-          opt.removeAttribute("selected");
+      const cloneList = yield idleCallback(Array.from(node.childNodes), callback, options.fast);
+      clone.append(...cloneList.filter((clonedChild) => !!clonedChild));
+      if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
+        clone.value = pendingSelectValue;
+        for (const opt of clone.options) {
+          if (opt.value === pendingSelectValue) {
+            opt.setAttribute("selected", "");
+          } else {
+            opt.removeAttribute("selected");
+          }
         }
       }
-    }
-    return clone;
+      if (pendingTextAreaValue !== null && clone instanceof HTMLTextAreaElement) {
+        clone.textContent = pendingTextAreaValue;
+      }
+      return clone;
+    });
   }
 
   // src/modules/iconFonts.js
@@ -1898,7 +2067,7 @@
         console.warn("inlineExternal defs or symbol failed:", e);
       }
       try {
-        clone = deepClone(element, sessionCache, options, element);
+        clone = yield deepClone(element, sessionCache, options, element);
       } catch (e) {
         console.warn("deepClone failed:", e);
         throw e;
@@ -2132,6 +2301,7 @@
     return __async(this, arguments, function* (clone, options = {}) {
       const imgs = Array.from(clone.querySelectorAll("img"));
       const processImg = (img) => __async(null, null, function* () {
+        var _a, _b, _c, _d;
         if (!img.getAttribute("src")) {
           const eff = img.currentSrc || img.src || "";
           if (eff) img.setAttribute("src", eff);
@@ -2147,6 +2317,30 @@
           if (!img.height) img.height = img.naturalHeight || 100;
           return;
         }
+        const { defaultImageUrl } = options || {};
+        if (defaultImageUrl) {
+          try {
+            const dsW = parseInt(((_a = img.dataset) == null ? void 0 : _a.snapdomWidth) || "", 10) || 0;
+            const dsH = parseInt(((_b = img.dataset) == null ? void 0 : _b.snapdomHeight) || "", 10) || 0;
+            const attrW = parseInt(img.getAttribute("width") || "", 10) || 0;
+            const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
+            const styleW = parseFloat(((_c = img.style) == null ? void 0 : _c.width) || "") || 0;
+            const styleH = parseFloat(((_d = img.style) == null ? void 0 : _d.height) || "") || 0;
+            const width = dsW || styleW || attrW || img.width || void 0;
+            const height = dsH || styleH || attrH || img.height || void 0;
+            const fallbackUrl = typeof defaultImageUrl === "function" ? yield defaultImageUrl({ width, height, src, element: img }) : defaultImageUrl;
+            if (fallbackUrl) {
+              const fallbackData = yield snapFetch(fallbackUrl, { as: "dataURL", useProxy: options.useProxy });
+              img.src = fallbackData.data;
+              if (!img.width && width) img.width = width;
+              if (!img.height && height) img.height = height;
+              if (!img.width) img.width = img.naturalWidth || 100;
+              if (!img.height) img.height = img.naturalHeight || 100;
+              return;
+            }
+          } catch (e) {
+          }
+        }
         const w = img.width || img.naturalWidth || 100;
         const h = img.height || img.naturalHeight || 100;
         if (options.placeholders !== false) {
@@ -2181,17 +2375,40 @@
   function inlineBackgroundImages(_0, _1, _2) {
     return __async(this, arguments, function* (source, clone, styleCache, options = {}) {
       const queue = [[source, clone]];
-      const imageProps = [
+      const URL_PROPS = [
         "background-image",
+        // Mask shorthands & images (both standard and WebKit)
         "mask",
         "mask-image",
+        "-webkit-mask",
         "-webkit-mask-image",
+        // Mask sources (rare, but keep)
         "mask-source",
         "mask-box-image-source",
         "mask-border-source",
         "-webkit-mask-box-image-source",
+        // Border image
         "border-image",
-        "border-image-source",
+        "border-image-source"
+      ];
+      const MASK_LAYOUT_PROPS = [
+        "mask-position",
+        "mask-size",
+        "mask-repeat",
+        // WebKit variants
+        "-webkit-mask-position",
+        "-webkit-mask-size",
+        "-webkit-mask-repeat",
+        // Extra (optional but helpful across engines)
+        "mask-origin",
+        "mask-clip",
+        "-webkit-mask-origin",
+        "-webkit-mask-clip",
+        // Some engines expose X/Y position separately:
+        "-webkit-mask-position-x",
+        "-webkit-mask-position-y"
+      ];
+      const BORDER_AUX_PROPS = [
         "border-image-slice",
         "border-image-width",
         "border-image-outset",
@@ -2206,10 +2423,7 @@
           const bis = style.getPropertyValue("border-image-source");
           return bi && bi !== "none" || bis && bis !== "none";
         })();
-        for (const prop of imageProps) {
-          if (["border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"].includes(prop) && !hasBorderImage) {
-            continue;
-          }
+        for (const prop of URL_PROPS) {
           const val = style.getPropertyValue(prop);
           if (!val || val === "none") continue;
           const splits = splitBackgroundImage(val);
@@ -2220,6 +2434,18 @@
             cloneNode.style.setProperty(prop, inlined.join(", "));
           }
         }
+        for (const prop of MASK_LAYOUT_PROPS) {
+          const val = style.getPropertyValue(prop);
+          if (!val || val === "initial") continue;
+          cloneNode.style.setProperty(prop, val);
+        }
+        if (hasBorderImage) {
+          for (const prop of BORDER_AUX_PROPS) {
+            const val = style.getPropertyValue(prop);
+            if (!val || val === "initial") continue;
+            cloneNode.style.setProperty(prop, val);
+          }
+        }
         const sChildren = Array.from(srcNode.children);
         const cChildren = Array.from(cloneNode.children);
         for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
@@ -2264,7 +2490,13 @@
               );
               yield ensureFontsReady(families, 2);
             }
-            fontsCSS = yield embedCustomFonts({ required, usedCodepoints, preCached: false, exclude: options.excludeFonts, useProxy: options.useProxy });
+            fontsCSS = yield embedCustomFonts({
+              required,
+              usedCodepoints,
+              preCached: false,
+              exclude: options.excludeFonts,
+              useProxy: options.useProxy
+            });
             resolve();
           }), { fast });
         });
@@ -2284,12 +2516,14 @@
       }
       yield new Promise((resolve) => {
         idle(() => {
-          const rect = element.getBoundingClientRect();
+          var _a, _b, _c, _d, _e;
+          const rect = getNaturalBorderBoxSize(element);
           let w = rect.width;
           let h = rect.height;
           const hasW = Number.isFinite(options.width);
           const hasH = Number.isFinite(options.height);
-          const hasScale = typeof scale === "number" && scale !== 1;
+          const scaleOpt = (_a = options.scale) != null ? _a : 1;
+          const hasScale = typeof scaleOpt === "number" && scaleOpt !== 1;
           if (!hasScale) {
             const aspect = rect.width / rect.height;
             if (hasW && hasH) {
@@ -2303,30 +2537,79 @@
               w = h * aspect;
             }
           }
-          w = Math.ceil(w);
-          h = Math.ceil(h);
-          clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-          clone.style.transformOrigin = "top left";
-          if (!hasScale && (hasW || hasH)) {
-            const originalW = rect.width;
-            const originalH = rect.height;
-            const scaleX = w / originalW;
-            const scaleY = h / originalH;
-            const existingTransform = clone.style.transform || "";
-            const scaleTransform = `scale(${scaleX}, ${scaleY})`;
-            clone.style.transform = `${scaleTransform} ${existingTransform}`.trim();
+          w = Math.max(1, Math.ceil(w));
+          h = Math.max(1, Math.ceil(h));
+          const csEl = getComputedStyle(element);
+          const baseTransform = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
+          const ind = readIndividualTransforms(element);
+          let outW, outH, tx, ty, cancelTranslateX = 0, cancelTranslateY = 0;
+          if (!hasBBoxAffectingTransform(element)) {
+            const r = element.getBoundingClientRect();
+            const vp = inflateRect(r, { top: 0, right: 0, bottom: 0, left: 0 });
+            outW = Math.max(1, vp.width);
+            outH = Math.max(1, vp.height);
+            tx = -(vp.x - Math.floor(r.left));
+            ty = -(vp.y - Math.floor(r.top));
+          } else {
+            const TOTAL = readTotalTransformMatrix({
+              baseTransform,
+              rotate: ind.rotate || "0deg",
+              scale: ind.scale,
+              translate: ind.translate
+            });
+            const e = (_c = (_b = TOTAL.e) != null ? _b : TOTAL.m41) != null ? _c : 0;
+            const f = (_e = (_d = TOTAL.f) != null ? _d : TOTAL.m42) != null ? _e : 0;
+            cancelTranslateX = -e;
+            cancelTranslateY = -f;
+            const M2D = TOTAL.is2D ? matrix2DNoTranslate(TOTAL) : matrix2DNoTranslate(new DOMMatrix(TOTAL.toString()));
+            const bb = bboxFromMatrix(w, h, M2D);
+            outW = Math.max(1, Math.ceil(bb.width));
+            outH = Math.max(1, Math.ceil(bb.height));
+            tx = -bb.minX;
+            ty = -bb.minY;
           }
           const svgNS = "http://www.w3.org/2000/svg";
           const fo = document.createElementNS(svgNS, "foreignObject");
           fo.setAttribute("width", "100%");
           fo.setAttribute("height", "100%");
+          fo.setAttribute("x", String(tx));
+          fo.setAttribute("y", String(ty));
+          fo.style.overflow = "visible";
           const styleTag = document.createElement("style");
-          styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;}" + classCSS;
+          styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;} foreignObject{overflow:visible;}" + classCSS;
           fo.appendChild(styleTag);
-          fo.appendChild(clone);
+          const container = document.createElement("div");
+          container.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+          container.style.width = `${w}px`;
+          container.style.height = `${h}px`;
+          container.style.overflow = "visible";
+          container.style.transformOrigin = "0 0";
+          const cancels = [];
+          if (cancelTranslateX || cancelTranslateY) {
+            cancels.push(`translate(${cancelTranslateX}px, ${cancelTranslateY}px)`);
+          }
+          if (!hasScale && (hasW || hasH)) {
+            const sxWH = rect.width ? w / rect.width : 1;
+            const syWH = rect.height ? h / rect.height : 1;
+            cancels.push(`scale(${sxWH}, ${syWH})`);
+          } else if (hasScale) {
+            cancels.push(`scale(${scaleOpt})`);
+          }
+          if (cancels.length) container.style.transform = cancels.join(" ");
+          clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+          clone.style.transformOrigin = "0 0";
+          clone.style.position = "static";
+          clone.style.left = "0";
+          clone.style.top = "0";
+          if (baseTransform) clone.style.transform = baseTransform;
+          clone.style.rotate = ind.rotate || "0deg";
+          clone.style.scale = ind.scale || "1";
+          clone.style.translate = ind.translate || "0 0";
+          container.appendChild(clone);
+          fo.appendChild(container);
           const serializer = new XMLSerializer();
           const foString = serializer.serializeToString(fo);
-          const svgHeader = `<svg xmlns="${svgNS}" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
+          const svgHeader = `<svg xmlns="${svgNS}" width="${outW}" height="${outH}" viewBox="0 0 ${outW} ${outH}">`;
           const svgFooter = "</svg>";
           svgString = svgHeader + foString + svgFooter;
           dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
@@ -2338,11 +2621,132 @@
       return dataURL;
     });
   }
+  function getNaturalBorderBoxSize(el) {
+    const cs = getComputedStyle(el);
+    const px = (v) => parseFloat(v) || 0;
+    let w = px(cs.width);
+    let h = px(cs.height);
+    if (cs.boxSizing === "content-box") {
+      w += px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
+      h += px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
+    }
+    return { width: w, height: h };
+  }
+  function matrixFromComputed(el) {
+    const tr = getComputedStyle(el).transform;
+    if (!tr || tr === "none") return new DOMMatrix();
+    try {
+      return new DOMMatrix(tr);
+    } catch (e) {
+      return new WebKitCSSMatrix(tr);
+    }
+  }
+  function matrix2DNoTranslate(M) {
+    return new DOMMatrix([M.a, M.b, M.c, M.d, 0, 0]);
+  }
+  function bboxFromMatrix(w, h, M2D) {
+    const pts = [
+      { x: 0, y: 0 },
+      { x: w, y: 0 },
+      { x: 0, y: h },
+      { x: w, y: h }
+    ];
+    const t = pts.map((p) => ({
+      x: M2D.a * p.x + M2D.c * p.y,
+      y: M2D.b * p.x + M2D.d * p.y
+    }));
+    const minX = Math.min(...t.map((p) => p.x));
+    const maxX = Math.max(...t.map((p) => p.x));
+    const minY = Math.min(...t.map((p) => p.y));
+    const maxY = Math.max(...t.map((p) => p.y));
+    return { minX, minY, width: maxX - minX, height: maxY - minY };
+  }
+  function readIndividualTransforms(el) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const out = { rotate: "0deg", scale: null, translate: null };
+    const map = (_a = el.computedStyleMap) == null ? void 0 : _a.call(el);
+    if (map) {
+      const rot = map.get("rotate");
+      if (rot) {
+        const ang = (_b = rot.angle) != null ? _b : rot;
+        if (ang && "unit" in ang) {
+          out.rotate = ang.unit === "rad" ? ang.value * 180 / Math.PI + "deg" : ang.value + ang.unit;
+        } else {
+          out.rotate = String(rot);
+        }
+      }
+      const sc = map.get("scale");
+      if (sc && sc.length) {
+        const sx = (_d = (_c = sc[0]) == null ? void 0 : _c.value) != null ? _d : 1;
+        const sy = (_f = (_e = sc[1]) == null ? void 0 : _e.value) != null ? _f : sx;
+        out.scale = `${sx} ${sy}`;
+      }
+      const tr = map.get("translate");
+      if (tr && tr.length) {
+        const tx = (_h = (_g = tr[0]) == null ? void 0 : _g.value) != null ? _h : 0;
+        const ty = (_j = (_i = tr[1]) == null ? void 0 : _i.value) != null ? _j : 0;
+        const ux = (_l = (_k = tr[0]) == null ? void 0 : _k.unit) != null ? _l : "px";
+        const uy = (_n = (_m = tr[1]) == null ? void 0 : _m.unit) != null ? _n : "px";
+        out.translate = `${tx}${ux} ${ty}${uy}`;
+      }
+      return out;
+    }
+    const cs = getComputedStyle(el);
+    out.rotate = cs.rotate && cs.rotate !== "none" ? cs.rotate : "0deg";
+    out.scale = cs.scale && cs.scale !== "none" ? cs.scale : null;
+    out.translate = cs.translate && cs.translate !== "none" ? cs.translate : null;
+    return out;
+  }
+  function hasBBoxAffectingTransform(el) {
+    const t = getComputedStyle(el).transform || "none";
+    if (t === "none" || t === "matrix(1, 0, 0, 1, 0, 0)") return false;
+    if (/^matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*,/i.test(t)) return false;
+    return true;
+  }
+  function inflateRect(r, p) {
+    const x = Math.floor(r.left - p.left);
+    const y = Math.floor(r.top - p.top);
+    const w = Math.ceil(r.width + p.left + p.right);
+    const h = Math.ceil(r.height + p.top + p.bottom);
+    return { x, y, width: w, height: h };
+  }
+  var __measureHost = null;
+  function getMeasureHost() {
+    if (__measureHost) return __measureHost;
+    const n = document.createElement("div");
+    n.id = "snapdom-measure-slot";
+    n.setAttribute("aria-hidden", "true");
+    Object.assign(n.style, {
+      position: "absolute",
+      left: "-99999px",
+      top: "0px",
+      width: "0px",
+      height: "0px",
+      overflow: "hidden",
+      opacity: "0",
+      pointerEvents: "none",
+      contain: "size layout style"
+    });
+    document.documentElement.appendChild(n);
+    __measureHost = n;
+    return n;
+  }
+  function readTotalTransformMatrix(t) {
+    const host = getMeasureHost();
+    const tmp = document.createElement("div");
+    tmp.style.transformOrigin = "0 0";
+    if (t.baseTransform) tmp.style.transform = t.baseTransform;
+    if (t.rotate) tmp.style.rotate = t.rotate;
+    if (t.scale) tmp.style.scale = t.scale;
+    if (t.translate) tmp.style.translate = t.translate;
+    host.appendChild(tmp);
+    const M = matrixFromComputed(tmp);
+    host.removeChild(tmp);
+    return M;
+  }
 
   // src/core/context.js
   function normalizeCachePolicy(v) {
-    if (v === true) return "soft";
-    if (v === false) return "disabled";
     if (typeof v === "string") {
       const s = v.toLowerCase().trim();
       if (s === "disabled" || s === "full" || s === "auto" || s === "soft") return (
@@ -2353,7 +2757,7 @@
     return "soft";
   }
   function createContext(options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     const resolvedFormat = (_a = options.format) != null ? _a : "png";
     const cachePolicy = normalizeCachePolicy(options.cache);
     return {
@@ -2371,20 +2775,21 @@
       iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
       localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
       excludeFonts: (_h = options.excludeFonts) != null ? _h : void 0,
+      defaultImageUrl: (_i = options.defaultImageUrl) != null ? _i : void 0,
       /** Cache policy (disabled|full|auto|soft). Default: "soft" */
       /** @type {CachePolicy} */
       cache: cachePolicy,
       // Red
       useProxy: typeof options.useProxy === "string" ? options.useProxy : "",
       // Salida
-      width: (_i = options.width) != null ? _i : null,
-      height: (_j = options.height) != null ? _j : null,
+      width: (_j = options.width) != null ? _j : null,
+      height: (_k = options.height) != null ? _k : null,
       format: resolvedFormat,
-      type: (_k = options.type) != null ? _k : "svg",
-      quality: (_l = options.quality) != null ? _l : 0.92,
-      dpr: (_m = options.dpr) != null ? _m : window.devicePixelRatio || 1,
-      backgroundColor: (_n = options.backgroundColor) != null ? _n : ["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
-      filename: (_o = options.filename) != null ? _o : "snapDOM"
+      type: (_l = options.type) != null ? _l : "svg",
+      quality: (_m = options.quality) != null ? _m : 0.92,
+      dpr: (_n = options.dpr) != null ? _n : window.devicePixelRatio || 1,
+      backgroundColor: (_o = options.backgroundColor) != null ? _o : ["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
+      filename: (_p = options.filename) != null ? _p : "snapDOM"
       // Plugins (reservado para futura activación)
       // plugins: normalizePlugins(...),
     };
@@ -2407,7 +2812,7 @@
   // src/exporters/toCanvas.js
   function toCanvas(url, options) {
     return __async(this, null, function* () {
-      const { scale: scale2, dpr } = options;
+      const { scale, dpr } = options;
       const safari = isSafari();
       const img = new Image();
       img.crossOrigin = "anonymous";
@@ -2426,8 +2831,8 @@
       if (safari) {
         yield new Promise((r) => setTimeout(r, 100));
       }
-      const width = img.naturalWidth * scale2;
-      const height = img.naturalHeight * scale2;
+      const width = img.naturalWidth * scale;
+      const height = img.naturalHeight * scale;
       const canvas = document.createElement("canvas");
       canvas.width = Math.ceil(width * dpr);
       canvas.height = Math.ceil(height * dpr);
@@ -2509,16 +2914,28 @@
       if (!element) throw new Error("Element cannot be null or undefined");
       const context = createContext(userOptions);
       if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts);
+      if (!context.snap) {
+        context.snap = {
+          toPng: (el, opts) => snapdom.toPng(el, opts),
+          toImg: (el, opts) => snapdom.toImg(el, opts)
+        };
+      }
       return snapdom.capture(element, context, INTERNAL_TOKEN);
     });
   }
   snapdom.capture = (el, context, _token) => __async(null, null, function* () {
-    if (_token !== INTERNAL_TOKEN) {
-      throw new Error("[snapdom.capture] is internal. Use snapdom(...) instead.");
-    }
+    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) => rasterize(url, ensureContext(__spreadProps(__spreadValues({}, opts || {}), { format })));
+    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);
+    };
     return {
       url,
       toRaw: () => url,