@zumer/snapdom 1.9.10-dev.0 → 1.9.10-dev.2

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.10-dev.0
+* v.1.9.10-dev.2
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -42,10 +42,13 @@ function applyCachePolicy(policy = "soft") {
       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: {
@@ -297,7 +300,6 @@ var NO_DEFAULTS_TAGS = /* @__PURE__ */ new Set([
   "script",
   "template",
   // SVG whole namespace (safe for LeaderLine/presentation attrs)
-  "svg",
   "g",
   "defs",
   "use",
@@ -638,6 +640,11 @@ async function inlineAllStyles(source, clone, sessionOrCtx, opts) {
   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(source.tagName?.toLowerCase())) {
     const author = source.getAttribute?.("style");
     if (author) clone.setAttribute("style", author);
@@ -659,6 +666,31 @@ async function inlineAllStyles(source, clone, sessionOrCtx, opts) {
 }
 
 // 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;
@@ -780,10 +812,84 @@ function markSlottedSubtree(root) {
     root.querySelectorAll("*").forEach((el) => el.setAttribute("data-sd-slotted", ""));
   }
 }
-function deepClone(node, sessionCache, options) {
+async function getAccessibleIframeDocument(iframe, attempts = 3) {
+  const probe = () => {
+    try {
+      return iframe.contentDocument || iframe.contentWindow?.document || null;
+    } catch {
+      return null;
+    }
+  };
+  let doc = probe();
+  let i = 0;
+  while (i < attempts && (!doc || !doc.body && !doc.documentElement)) {
+    await 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 {
+  }
+  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 {
+    }
+  };
+}
+async function rasterizeIframe(iframe, sessionCache, options) {
+  const doc = await getAccessibleIframeDocument(iframe, 3);
+  if (!doc) throw new Error("iframe document not accessible/ready");
+  const { contentWidth, contentHeight, rect } = measureContentBox(iframe);
+  const snap = options?.snap;
+  if (!snap || typeof snap.toPng !== "function") {
+    throw new Error("snapdom.toPng not available in iframe or window");
+  }
+  const nested = { ...options, scale: 1 };
+  const unpin = pinIframeViewport(doc, contentWidth, contentHeight);
+  let imgEl;
+  try {
+    imgEl = await 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;
+}
+async function deepClone(node, sessionCache, options) {
   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")) {
@@ -832,9 +938,32 @@ function deepClone(node, sessionCache, options) {
     }
   }
   if (node.tagName === "IFRAME") {
-    const fallback = document.createElement("div");
-    fallback.style.cssText = `width:${node.offsetWidth}px;height:${node.offsetHeight}px;background-image:repeating-linear-gradient(45deg,#ddd,#ddd 5px,#f9f9f9 5px,#f9f9f9 10px);display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;border:1px solid #aaa;`;
-    return fallback;
+    let sameOrigin = false;
+    try {
+      sameOrigin = !!(node.contentDocument || node.contentWindow?.document);
+    } catch {
+      sameOrigin = false;
+    }
+    if (sameOrigin) {
+      try {
+        const wrapper = await 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;
+    }
   }
   if (node.getAttribute("data-capture") === "placeholder") {
     const clone2 = node.cloneNode(false);
@@ -862,18 +991,34 @@ function deepClone(node, sessionCache, options) {
     sessionCache.nodeMap.set(clone, node);
     if (node.tagName === "IMG") {
       freezeImgSrcset(node, clone);
+      try {
+        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 {
+      }
     }
   } 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`;
-    return clone;
   }
   if (node instanceof HTMLInputElement) {
     clone.value = node.value;
@@ -887,8 +1032,22 @@ function deepClone(node, sessionCache, options) {
   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) {
@@ -914,31 +1073,38 @@ function deepClone(node, sessionCache, options) {
     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);
-    }
+    const cloneList2 = await 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 = node.assignedNodes?.({ flatten: true }) || [];
     const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
     const fragment = document.createDocumentFragment();
-    for (const child of nodesToClone) {
-      const clonedChild = deepClone(child, sessionCache, options);
-      if (clonedChild) {
-        markSlottedSubtree(clonedChild);
-        fragment.appendChild(clonedChild);
-      }
-    }
+    const cloneList2 = await idleCallback(Array.from(nodesToClone), callback2, options.fast);
+    fragment.append(...cloneList2.filter((clonedChild) => !!clonedChild));
     return fragment;
   }
-  for (const child of node.childNodes) {
-    if (clonedAssignedNodes.has(child)) continue;
-    const clonedChild = deepClone(child, sessionCache, options);
-    if (clonedChild) clone.appendChild(clonedChild);
+  function callback(child, resolve) {
+    if (clonedAssignedNodes.has(child)) return resolve(null);
+    deepClone(child, sessionCache, options).then((clonedChild) => {
+      resolve(clonedChild || null);
+    }).catch((e) => {
+      resolve(null);
+    });
   }
+  const cloneList = await 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) {
@@ -949,6 +1115,9 @@ function deepClone(node, sessionCache, options) {
       }
     }
   }
+  if (pendingTextAreaValue !== null && clone instanceof HTMLTextAreaElement) {
+    clone.textContent = pendingTextAreaValue;
+  }
   return clone;
 }
 
@@ -1819,7 +1988,7 @@ async function prepareClone(element, options = {}) {
     console.warn("inlineExternal defs or symbol failed:", e);
   }
   try {
-    clone = deepClone(element, sessionCache, options, element);
+    clone = await deepClone(element, sessionCache, options, element);
   } catch (e) {
     console.warn("deepClone failed:", e);
     throw e;
@@ -2057,22 +2226,52 @@ async function inlineImages(clone, options = {}) {
       if (!img.height) img.height = img.naturalHeight || 100;
       return;
     }
+    const { defaultImageUrl } = options || {};
+    if (defaultImageUrl) {
+      try {
+        const dsW = parseInt(img.dataset?.snapdomWidth || "", 10) || 0;
+        const dsH = parseInt(img.dataset?.snapdomHeight || "", 10) || 0;
+        const attrW = parseInt(img.getAttribute("width") || "", 10) || 0;
+        const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
+        const styleW = parseFloat(img.style?.width || "") || 0;
+        const styleH = parseFloat(img.style?.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" ? await defaultImageUrl({ width, height, src, element: img }) : defaultImageUrl;
+        if (fallbackUrl) {
+          const fallbackData = await 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 {
+      }
+    }
     const w = img.width || img.naturalWidth || 100;
     const h = img.height || img.naturalHeight || 100;
-    const fallback = document.createElement("div");
-    fallback.style.cssText = [
-      `width:${w}px`,
-      `height:${h}px`,
-      "background:#ccc",
-      "display:inline-block",
-      "text-align:center",
-      `line-height:${h}px`,
-      "color:#666",
-      "font-size:12px",
-      "overflow:hidden"
-    ].join(";");
-    fallback.textContent = "img";
-    img.replaceWith(fallback);
+    if (options.placeholders !== false) {
+      const fallback = document.createElement("div");
+      fallback.style.cssText = [
+        `width:${w}px`,
+        `height:${h}px`,
+        "background:#ccc",
+        "display:inline-block",
+        "text-align:center",
+        `line-height:${h}px`,
+        "color:#666",
+        "font-size:12px",
+        "overflow:hidden"
+      ].join(";");
+      fallback.textContent = "img";
+      img.replaceWith(fallback);
+    } else {
+      const spacer = document.createElement("div");
+      spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`;
+      img.replaceWith(spacer);
+    }
   };
   for (let i = 0; i < imgs.length; i += 4) {
     const group = imgs.slice(i, i + 4).map(processImg);
@@ -2164,7 +2363,13 @@ async function captureDOM(element, options) {
           );
           await ensureFontsReady(families, 2);
         }
-        fontsCSS = await embedCustomFonts({ required, usedCodepoints, preCached: false, exclude: options.excludeFonts, useProxy: options.useProxy });
+        fontsCSS = await embedCustomFonts({
+          required,
+          usedCodepoints,
+          preCached: false,
+          exclude: options.excludeFonts,
+          useProxy: options.useProxy
+        });
         resolve();
       }, { fast });
     });
@@ -2184,12 +2389,13 @@ async function captureDOM(element, options) {
   }
   await new Promise((resolve) => {
     idle(() => {
-      const rect = element.getBoundingClientRect();
+      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 = options.scale ?? 1;
+      const hasScale = typeof scaleOpt === "number" && scaleOpt !== 1;
       if (!hasScale) {
         const aspect = rect.width / rect.height;
         if (hasW && hasH) {
@@ -2203,30 +2409,79 @@ async function captureDOM(element, options) {
           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 = TOTAL.e ?? TOTAL.m41 ?? 0;
+        const f = TOTAL.f ?? TOTAL.m42 ?? 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)}`;
@@ -2237,6 +2492,128 @@ async function captureDOM(element, options) {
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
   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 {
+    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) {
+  const out = { rotate: "0deg", scale: null, translate: null };
+  const map = el.computedStyleMap?.();
+  if (map) {
+    const rot = map.get("rotate");
+    if (rot) {
+      const ang = rot.angle ?? 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 = sc[0]?.value ?? 1;
+      const sy = sc[1]?.value ?? sx;
+      out.scale = `${sx} ${sy}`;
+    }
+    const tr = map.get("translate");
+    if (tr && tr.length) {
+      const tx = tr[0]?.value ?? 0;
+      const ty = tr[1]?.value ?? 0;
+      const ux = tr[0]?.unit ?? "px";
+      const uy = tr[1]?.unit ?? "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) {
@@ -2262,11 +2639,14 @@ function createContext(options = {}) {
     // DOM filters
     exclude: options.exclude ?? [],
     filter: options.filter ?? null,
+    placeholders: options.placeholders !== false,
+    // default true
     // Fuentes
     embedFonts: options.embedFonts ?? false,
     iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
     localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
     excludeFonts: options.excludeFonts ?? void 0,
+    defaultImageUrl: options.defaultImageUrl ?? void 0,
     /** Cache policy (disabled|full|auto|soft). Default: "soft" */
     /** @type {CachePolicy} */
     cache: cachePolicy,
@@ -2300,31 +2680,41 @@ async function toImg(url, options) {
 
 // src/exporters/toCanvas.js
 async function toCanvas(url, options) {
+  const { scale, dpr } = options;
+  const safari = isSafari();
   const img = new Image();
   img.crossOrigin = "anonymous";
   img.loading = "eager";
   img.decoding = "sync";
   img.src = url;
-  const isSafariBrowser = isSafari();
-  let appended = false;
-  if (isSafariBrowser) {
-    document.body.appendChild(img);
-    appended = true;
+  let tempSlot = null;
+  if (safari) {
+    tempSlot = document.createElement("div");
+    tempSlot.setAttribute("aria-hidden", "true");
+    tempSlot.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;contain:size layout style;";
+    document.body.appendChild(tempSlot);
+    tempSlot.appendChild(img);
   }
   await img.decode();
-  if (isSafariBrowser) await new Promise((resolve) => setTimeout(resolve, 100));
-  const width = img.naturalWidth * options.scale;
-  const height = img.naturalHeight * options.scale;
+  if (safari) {
+    await new Promise((r) => setTimeout(r, 100));
+  }
+  const width = img.naturalWidth * scale;
+  const height = img.naturalHeight * scale;
   const canvas = document.createElement("canvas");
-  const dpr = options.dpr;
   canvas.width = Math.ceil(width * dpr);
   canvas.height = Math.ceil(height * dpr);
   canvas.style.width = `${width}px`;
   canvas.style.height = `${height}px`;
   const ctx = canvas.getContext("2d");
-  ctx.scale(dpr, dpr);
+  if (dpr !== 1) ctx.scale(dpr, dpr);
   ctx.drawImage(img, 0, 0, width, height);
-  if (appended) img.remove();
+  if (tempSlot && tempSlot.parentNode) {
+    try {
+      tempSlot.parentNode.removeChild(tempSlot);
+    } catch {
+    }
+  }
   return canvas;
 }
 
@@ -2384,6 +2774,14 @@ async function snapdom(element, userOptions) {
   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 = {
+      /** Delegates to this module’s PNG path (tu build devuelve <img>). */
+      toPng: (el, opts) => snapdom.toPng(el, opts),
+      /** Útil si en algún flujo necesitás vector o <img> directo. */
+      toImg: (el, opts) => snapdom.toImg(el, opts)
+    };
+  }
   return snapdom.capture(element, context, INTERNAL_TOKEN);
 }
 snapdom.capture = async (el, context, _token) => {