@zumer/snapdom 2.0.0-dev.2 → 2.0.0-dev.3

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.2.0.0-dev.2
+* v.2.0.0-dev.3
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -919,7 +919,7 @@ function resolveCSSVars(sourceEl, cloneEl) {
   }
 }
 
-// src/core/clone.js
+// src/utils/clone.helpers.js
 function idleCallback(childList, callback, fast) {
   return Promise.all(childList.map((child) => {
     return new Promise((resolve) => {
@@ -1131,6 +1131,134 @@ async function rasterizeIframe(iframe, sessionCache, options) {
   wrapper.appendChild(imgEl);
   return wrapper;
 }
+var _blobToDataUrlCache = /* @__PURE__ */ new Map();
+async function blobUrlToDataUrl(blobUrl) {
+  if (cache.resource?.has(blobUrl)) return cache.resource.get(blobUrl);
+  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+  const p = (async () => {
+    const r = await snapFetch(blobUrl, { as: "dataURL", silent: true });
+    if (!r.ok || typeof r.data !== "string") {
+      throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
+    }
+    cache.resource?.set(blobUrl, r.data);
+    return r.data;
+  })();
+  _blobToDataUrlCache.set(blobUrl, p);
+  try {
+    const data = await p;
+    _blobToDataUrlCache.set(blobUrl, data);
+    return data;
+  } catch (e) {
+    _blobToDataUrlCache.delete(blobUrl);
+    throw e;
+  }
+}
+var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
+async function replaceBlobUrlsInCssText(cssText) {
+  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
+  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
+  if (uniques.length === 0) return cssText;
+  let out = cssText;
+  for (const u of uniques) {
+    try {
+      const d = await blobUrlToDataUrl(u);
+      out = out.split(u).join(d);
+    } catch {
+    }
+  }
+  return out;
+}
+function isBlobUrl(u) {
+  return typeof u === "string" && u.startsWith("blob:");
+}
+function parseSrcset(srcset) {
+  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
+    const m = item.match(/^(\S+)(\s+.+)?$/);
+    return m ? { url: m[1], desc: m[2] || "" } : null;
+  }).filter(Boolean);
+}
+function stringifySrcset(parts) {
+  return parts.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
+}
+async function resolveBlobUrlsInTree(root) {
+  if (!root) return;
+  const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
+  for (const img of imgs) {
+    try {
+      const srcAttr = img.getAttribute("src");
+      const effective = srcAttr || img.currentSrc || "";
+      if (isBlobUrl(effective)) {
+        const data = await blobUrlToDataUrl(effective);
+        img.setAttribute("src", data);
+      }
+      const srcset = img.getAttribute("srcset");
+      if (srcset && srcset.includes("blob:")) {
+        const parts = parseSrcset(srcset);
+        let changed = false;
+        for (const p of parts) {
+          if (isBlobUrl(p.url)) {
+            try {
+              p.url = await blobUrlToDataUrl(p.url);
+              changed = true;
+            } catch {
+            }
+          }
+        }
+        if (changed) img.setAttribute("srcset", stringifySrcset(parts));
+      }
+    } catch {
+    }
+  }
+  const svgImages = root.querySelectorAll ? root.querySelectorAll("image") : [];
+  for (const node of svgImages) {
+    try {
+      const XLINK_NS = "http://www.w3.org/1999/xlink";
+      const href = node.getAttribute("href") || node.getAttributeNS?.(XLINK_NS, "href");
+      if (isBlobUrl(href)) {
+        const d = await blobUrlToDataUrl(href);
+        node.setAttribute("href", d);
+        node.removeAttributeNS?.(XLINK_NS, "href");
+      }
+    } catch {
+    }
+  }
+  const styled = root.querySelectorAll ? root.querySelectorAll("[style*='blob:']") : [];
+  for (const el of styled) {
+    try {
+      const styleText = el.getAttribute("style");
+      if (styleText && styleText.includes("blob:")) {
+        const replaced = await replaceBlobUrlsInCssText(styleText);
+        el.setAttribute("style", replaced);
+      }
+    } catch {
+    }
+  }
+  const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
+  for (const s of styleTags) {
+    try {
+      const css = s.textContent || "";
+      if (css.includes("blob:")) {
+        s.textContent = await replaceBlobUrlsInCssText(css);
+      }
+    } catch {
+    }
+  }
+  const urlAttrs = ["poster"];
+  for (const attr of urlAttrs) {
+    const nodes = root.querySelectorAll ? root.querySelectorAll(`[${attr}^='blob:']`) : [];
+    for (const n of nodes) {
+      try {
+        const u = n.getAttribute(attr);
+        if (isBlobUrl(u)) {
+          n.setAttribute(attr, await blobUrlToDataUrl(u));
+        }
+      } catch {
+      }
+    }
+  }
+}
+
+// src/core/clone.js
 async function deepClone(node, sessionCache, options) {
   if (!node) throw new Error("Invalid node");
   const clonedAssignedNodes = /* @__PURE__ */ new Set();
@@ -2595,6 +2723,152 @@ function resolveCountersInContent(raw, node, ctx) {
 }
 
 // src/modules/pseudo.js
+var __preflightMemo = /* @__PURE__ */ new WeakMap();
+var CSS_RULE_SCAN_BUDGET = 300;
+function preflightWithFp(doc, sessionCache) {
+  const fp = styleFingerprint(doc);
+  if (!sessionCache) return shouldProcessPseudos(doc);
+  if (sessionCache.__pseudoPreflightFp !== fp) {
+    sessionCache.__pseudoPreflight = shouldProcessPseudos(doc);
+    sessionCache.__pseudoPreflightFp = fp;
+  }
+  return !!sessionCache.__pseudoPreflight;
+}
+function safeRules(sheet) {
+  try {
+    return sheet && sheet.cssRules ? sheet.cssRules : null;
+  } catch {
+    return null;
+  }
+}
+function styleFingerprint(doc) {
+  const nodes = doc.querySelectorAll('style,link[rel~="stylesheet"]');
+  let fp = `n:${nodes.length}|`;
+  let totalRules = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.tagName === "STYLE") {
+      const len = n.textContent ? n.textContent.length : 0;
+      fp += `S${len}|`;
+      const sheet = (
+        /** @type {HTMLStyleElement} */
+        n.sheet
+      );
+      const rules = sheet ? safeRules(sheet) : null;
+      if (rules) totalRules += rules.length;
+    } else {
+      const href = n.getAttribute("href") || "";
+      const media = n.getAttribute("media") || "all";
+      fp += `L${href}|m:${media}|`;
+      const sheet = (
+        /** @type {HTMLLinkElement} */
+        n.sheet
+      );
+      const rules = sheet ? safeRules(sheet) : null;
+      if (rules) totalRules += rules.length;
+    }
+  }
+  const ass = (
+    /** @type {any} */
+    doc.adoptedStyleSheets
+  );
+  fp += `ass:${Array.isArray(ass) ? ass.length : 0}|tr:${totalRules}`;
+  return fp;
+}
+function sheetHasNeedles(sheet, needles, state) {
+  const rules = safeRules(sheet);
+  if (!rules) return false;
+  for (let i = 0; i < rules.length; i++) {
+    if (state.budget <= 0) return false;
+    const rule = rules[i];
+    const css = rule && rule.cssText ? rule.cssText : "";
+    state.budget--;
+    for (const k of needles) {
+      if (css.includes(k)) return true;
+    }
+    if (rule && rule.cssRules && rule.cssRules.length) {
+      for (let j = 0; j < rule.cssRules.length && state.budget > 0; j++) {
+        const inner = rule.cssRules[j];
+        const innerCss = inner && inner.cssText ? inner.cssText : "";
+        state.budget--;
+        for (const k of needles) {
+          if (innerCss.includes(k)) return true;
+        }
+      }
+    }
+    if (state.budget <= 0) return false;
+  }
+  return false;
+}
+function shouldProcessPseudos(doc = document) {
+  const fp = styleFingerprint(doc);
+  const memo = __preflightMemo.get(doc);
+  if (memo && memo.fingerprint === fp) return memo.result;
+  const NEEDLES = [
+    // double-colon
+    "::before",
+    "::after",
+    "::first-letter",
+    // single-colon robustness
+    ":before",
+    ":after",
+    ":first-letter",
+    // counters
+    "counter(",
+    "counters(",
+    "counter-increment",
+    "counter-reset"
+  ];
+  const styleEls = doc.querySelectorAll("style");
+  for (let i = 0; i < styleEls.length; i++) {
+    const t = styleEls[i].textContent || "";
+    for (const k of NEEDLES) if (t.includes(k)) {
+      __preflightMemo.set(doc, { fingerprint: fp, result: true });
+      return true;
+    }
+  }
+  const ass = (
+    /** @type {any} */
+    doc.adoptedStyleSheets
+  );
+  if (Array.isArray(ass) && ass.length) {
+    const state = { budget: CSS_RULE_SCAN_BUDGET };
+    try {
+      for (const sheet of ass) {
+        if (sheetHasNeedles(sheet, NEEDLES, state)) {
+          __preflightMemo.set(doc, { fingerprint: fp, result: true });
+          return true;
+        }
+      }
+    } catch {
+    }
+  }
+  {
+    const nodes = doc.querySelectorAll('style,link[rel~="stylesheet"]');
+    const state = { budget: CSS_RULE_SCAN_BUDGET };
+    for (let i = 0; i < nodes.length && state.budget > 0; i++) {
+      const n = nodes[i];
+      let sheet = null;
+      if (n.tagName === "STYLE") {
+        sheet = /** @type {HTMLStyleElement} */
+        n.sheet || null;
+      } else {
+        sheet = /** @type {HTMLLinkElement} */
+        n.sheet || null;
+      }
+      if (sheet && sheetHasNeedles(sheet, NEEDLES, state)) {
+        __preflightMemo.set(doc, { fingerprint: fp, result: true });
+        return true;
+      }
+    }
+  }
+  if (doc.querySelector('[style*="counter("], [style*="counters("]')) {
+    __preflightMemo.set(doc, { fingerprint: fp, result: true });
+    return true;
+  }
+  __preflightMemo.set(doc, { fingerprint: fp, result: false });
+  return false;
+}
 var __siblingCounters = /* @__PURE__ */ new WeakMap();
 var __pseudoEpoch = -1;
 function unquoteDoubleStrings2(s) {
@@ -2693,6 +2967,10 @@ function resolvePseudoContentAndIncs(node, pseudo, baseCtx) {
 }
 async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
+  const doc = source.ownerDocument || document;
+  if (!preflightWithFp(doc, sessionCache)) {
+    return;
+  }
   const epoch = cache?.session?.__counterEpoch ?? 0;
   if (__pseudoEpoch !== epoch) {
     __siblingCounters = /* @__PURE__ */ new WeakMap();
@@ -2709,7 +2987,7 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       const style = getStyle(source, pseudo);
-      if (!style || typeof style[Symbol.iterator] !== "function") continue;
+      if (!style) continue;
       const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
       if (isEmptyPseudo) continue;
       if (pseudo === "::first-letter") {
@@ -2736,7 +3014,8 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
         clone.insertBefore(span, restNode);
         continue;
       }
-      const rawContent = style.content;
+      const rawContent = style.content ?? "";
+      const isNoExplicitContent = rawContent === "" || rawContent === "none" || rawContent === "normal";
       const { text: cleanContent, incs } = resolvePseudoContentAndIncs(source, pseudo, counterCtx);
       const bg = style.backgroundImage;
       const bgColor = style.backgroundColor;
@@ -2748,7 +3027,7 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       const borderWidth = parseFloat(style.borderWidth);
       const transform = style.transform;
       const isIconFont22 = isIconFont2(fontFamily);
-      const hasExplicitContent = rawContent !== "none" && cleanContent !== "";
+      const hasExplicitContent = !isNoExplicitContent && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
       const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
@@ -2770,8 +3049,6 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       }
       const pseudoEl = document.createElement("span");
       pseudoEl.dataset.snapdomPseudo = pseudo;
-      pseudoEl.style.display = "inline";
-      pseudoEl.style.verticalAlign = "baseline";
       pseudoEl.style.pointerEvents = "none";
       const snapshot = snapshotComputedStyle(style);
       const key = getStyleKey(snapshot, "span");
@@ -3063,6 +3340,20 @@ function _childrenWithoutPlaceholders(el, phAttr) {
   return out;
 }
 
+// src/utils/prepare.helpers.js
+function stabilizeLayout(element) {
+  const style = getComputedStyle(element);
+  const outlineStyle = style.outlineStyle;
+  const outlineWidth = style.outlineWidth;
+  const borderStyle = style.borderStyle;
+  const borderWidth = style.borderWidth;
+  const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+  const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+  if (outlineVisible && borderAbsent) {
+    element.style.border = `${outlineWidth} solid transparent`;
+  }
+}
+
 // src/core/prepare.js
 async function prepareClone(element, options = {}) {
   const sessionCache = {
@@ -3163,199 +3454,61 @@ async function prepareClone(element, options = {}) {
   }
   return { clone, classCSS, styleCache: sessionCache.styleCache };
 }
-function stabilizeLayout(element) {
-  const style = getComputedStyle(element);
-  const outlineStyle = style.outlineStyle;
-  const outlineWidth = style.outlineWidth;
-  const borderStyle = style.borderStyle;
-  const borderWidth = style.borderWidth;
-  const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
-  const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
-  if (outlineVisible && borderAbsent) {
-    element.style.border = `${outlineWidth} solid transparent`;
-  }
+
+// src/modules/images.js
+function extractImageDimensions(img) {
+  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 w = dsW || styleW || attrW || img.width || img.naturalWidth || 100;
+  const h = dsH || styleH || attrH || img.height || img.naturalHeight || 100;
+  return { width: w, height: h };
 }
-var _blobToDataUrlCache = /* @__PURE__ */ new Map();
-async function blobUrlToDataUrl(blobUrl) {
-  if (cache.resource?.has(blobUrl)) return cache.resource.get(blobUrl);
-  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
-  const p = (async () => {
-    const r = await snapFetch(blobUrl, { as: "dataURL", silent: true });
-    if (!r.ok || typeof r.data !== "string") {
-      throw new Error(`[snapDOM] Failed to read blob URL: ${blobUrl}`);
+async function inlineImages(clone, options = {}) {
+  const imgs = Array.from(clone.querySelectorAll("img"));
+  const processImg = async (img) => {
+    if (!img.getAttribute("src")) {
+      const eff = img.currentSrc || img.src || "";
+      if (eff) img.setAttribute("src", eff);
     }
-    cache.resource?.set(blobUrl, r.data);
-    return r.data;
-  })();
-  _blobToDataUrlCache.set(blobUrl, p);
-  try {
-    const data = await p;
-    _blobToDataUrlCache.set(blobUrl, data);
-    return data;
-  } catch (e) {
-    _blobToDataUrlCache.delete(blobUrl);
-    throw e;
-  }
-}
-var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
-async function replaceBlobUrlsInCssText(cssText) {
-  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
-  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
-  if (uniques.length === 0) return cssText;
-  let out = cssText;
-  for (const u of uniques) {
-    try {
-      const d = await blobUrlToDataUrl(u);
-      out = out.split(u).join(d);
-    } catch {
-    }
-  }
-  return out;
-}
-function isBlobUrl(u) {
-  return typeof u === "string" && u.startsWith("blob:");
-}
-function parseSrcset(srcset) {
-  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
-    const m = item.match(/^(\S+)(\s+.+)?$/);
-    return m ? { url: m[1], desc: m[2] || "" } : null;
-  }).filter(Boolean);
-}
-function stringifySrcset(parts) {
-  return parts.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
-}
-async function resolveBlobUrlsInTree(root) {
-  if (!root) return;
-  const imgs = root.querySelectorAll ? root.querySelectorAll("img") : [];
-  for (const img of imgs) {
-    try {
-      const srcAttr = img.getAttribute("src");
-      const effective = srcAttr || img.currentSrc || "";
-      if (isBlobUrl(effective)) {
-        const data = await blobUrlToDataUrl(effective);
-        img.setAttribute("src", data);
-      }
-      const srcset = img.getAttribute("srcset");
-      if (srcset && srcset.includes("blob:")) {
-        const parts = parseSrcset(srcset);
-        let changed = false;
-        for (const p of parts) {
-          if (isBlobUrl(p.url)) {
-            try {
-              p.url = await blobUrlToDataUrl(p.url);
-              changed = true;
-            } catch {
-            }
-          }
-        }
-        if (changed) img.setAttribute("srcset", stringifySrcset(parts));
-      }
-    } catch {
-    }
-  }
-  const svgImages = root.querySelectorAll ? root.querySelectorAll("image") : [];
-  for (const node of svgImages) {
-    try {
-      const XLINK_NS = "http://www.w3.org/1999/xlink";
-      const href = node.getAttribute("href") || node.getAttributeNS?.(XLINK_NS, "href");
-      if (isBlobUrl(href)) {
-        const d = await blobUrlToDataUrl(href);
-        node.setAttribute("href", d);
-        node.removeAttributeNS?.(XLINK_NS, "href");
-      }
-    } catch {
-    }
-  }
-  const styled = root.querySelectorAll ? root.querySelectorAll("[style*='blob:']") : [];
-  for (const el of styled) {
-    try {
-      const styleText = el.getAttribute("style");
-      if (styleText && styleText.includes("blob:")) {
-        const replaced = await replaceBlobUrlsInCssText(styleText);
-        el.setAttribute("style", replaced);
-      }
-    } catch {
-    }
-  }
-  const styleTags = root.querySelectorAll ? root.querySelectorAll("style") : [];
-  for (const s of styleTags) {
-    try {
-      const css = s.textContent || "";
-      if (css.includes("blob:")) {
-        s.textContent = await replaceBlobUrlsInCssText(css);
-      }
-    } catch {
-    }
-  }
-  const urlAttrs = ["poster"];
-  for (const attr of urlAttrs) {
-    const nodes = root.querySelectorAll ? root.querySelectorAll(`[${attr}^='blob:']`) : [];
-    for (const n of nodes) {
-      try {
-        const u = n.getAttribute(attr);
-        if (isBlobUrl(u)) {
-          n.setAttribute(attr, await blobUrlToDataUrl(u));
-        }
-      } catch {
-      }
-    }
-  }
-}
-
-// src/modules/images.js
-async function inlineImages(clone, options = {}) {
-  const imgs = Array.from(clone.querySelectorAll("img"));
-  const processImg = async (img) => {
-    if (!img.getAttribute("src")) {
-      const eff = img.currentSrc || img.src || "";
-      if (eff) img.setAttribute("src", eff);
-    }
-    img.removeAttribute("srcset");
-    img.removeAttribute("sizes");
-    const src = img.src || "";
-    if (!src) return;
-    const r = await snapFetch(src, { as: "dataURL", useProxy: options.useProxy });
-    if (r.ok && typeof r.data === "string" && r.data.startsWith("data:")) {
-      img.src = r.data;
-      if (!img.width) img.width = img.naturalWidth || 100;
-      if (!img.height) img.height = img.naturalHeight || 100;
-      return;
+    img.removeAttribute("srcset");
+    img.removeAttribute("sizes");
+    const src = img.src || "";
+    if (!src) return;
+    const r = await snapFetch(src, { as: "dataURL", useProxy: options.useProxy });
+    if (r.ok && typeof r.data === "string" && r.data.startsWith("data:")) {
+      img.src = r.data;
+      if (!img.width) img.width = img.naturalWidth || 100;
+      if (!img.height) img.height = img.naturalHeight || 100;
+      return;
     }
+    const { width: fbW, height: fbH } = extractImageDimensions(img);
     const { fallbackURL } = options || {};
     if (fallbackURL) {
       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 fbW = dsW || styleW || attrW || img.width || void 0;
-        const fbH = dsH || styleH || attrH || img.height || void 0;
         const fallbackUrl = typeof fallbackURL === "function" ? await fallbackURL({ width: fbW, height: fbH, src, element: img }) : fallbackURL;
         if (fallbackUrl) {
           const fallbackData = await snapFetch(fallbackUrl, { as: "dataURL", useProxy: options.useProxy });
           img.src = fallbackData.data;
-          if (!img.width && fbW) img.width = fbW;
-          if (!img.height && fbH) img.height = fbH;
-          if (!img.width) img.width = img.naturalWidth || 100;
-          if (!img.height) img.height = img.naturalHeight || 100;
+          if (!img.width) img.width = fbW;
+          if (!img.height) img.height = fbH;
           return;
         }
       } catch {
       }
     }
-    const w = img.width || img.naturalWidth || 100;
-    const h = img.height || img.naturalHeight || 100;
     if (options.placeholders !== false) {
       const fallback = document.createElement("div");
       fallback.style.cssText = [
-        `width:${w}px`,
-        `height:${h}px`,
+        `width:${fbW}px`,
+        `height:${fbH}px`,
         "background:#ccc",
         "display:inline-block",
         "text-align:center",
-        `line-height:${h}px`,
+        `line-height:${fbH}px`,
         "color:#666",
         "font-size:12px",
         "overflow:hidden"
@@ -3364,7 +3517,7 @@ async function inlineImages(clone, options = {}) {
       img.replaceWith(fallback);
     } else {
       const spacer = document.createElement("div");
-      spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`;
+      spacer.style.cssText = `display:inline-block;width:${fbW}px;height:${fbH}px;visibility:hidden;`;
       img.replaceWith(spacer);
     }
   };
@@ -3604,7 +3757,7 @@ function attachSessionPlugins(context, localDefs, force = false) {
   return context;
 }
 
-// src/core/capture.js
+// src/utils/capture.helpers.js
 function stripRootShadows(originalEl, cloneRoot) {
   if (!originalEl || !cloneRoot || !cloneRoot.style) return;
   const cs = getComputedStyle(originalEl);
@@ -3671,283 +3824,134 @@ function sanitizeCloneForXHTML(root, opts = {}) {
   sanitizeAttributesForXHTML(root, opts);
   removeAllComments(root);
 }
-async function captureDOM(element, options) {
-  if (!element) throw new Error("Element cannot be null or undefined");
-  applyCachePolicy(options.cache);
-  const fast = options.fast;
-  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;
-  await runHook("beforeSnap", state);
-  await runHook("beforeClone", state);
-  const undoClamp = lineClamp(state.element);
+function authorHasExplicitSize(el) {
   try {
-    ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options));
-    if (!outerTransforms && clone) {
-      rootTransform2D = normalizeRootTransforms(state.element, clone);
+    const s = el.getAttribute?.("style") || "";
+    return /\b(height|width|block-size|inline-size)\s*:/.test(s);
+  } catch {
+    return false;
+  }
+}
+function isReplacedElement(el) {
+  return el instanceof HTMLImageElement || el instanceof HTMLCanvasElement || el instanceof HTMLVideoElement || el instanceof HTMLIFrameElement || el instanceof SVGElement || el instanceof HTMLObjectElement || el instanceof HTMLEmbedElement;
+}
+function shouldShrinkBox(srcEl, cs) {
+  if (!(srcEl instanceof Element)) return false;
+  if (authorHasExplicitSize(srcEl)) return false;
+  if (isReplacedElement(srcEl)) return false;
+  const pos = cs.position;
+  if (pos === "absolute" || pos === "fixed" || pos === "sticky") return false;
+  const disp = cs.display || "";
+  if (disp.includes("flex") || disp.includes("grid") || disp.startsWith("table")) return false;
+  if (cs.transform && cs.transform !== "none") return false;
+  return true;
+}
+function shrinkAutoSizeBoxes(sourceRoot, cloneRoot, styleCache = /* @__PURE__ */ new Map()) {
+  function walk(src, cln) {
+    if (!(src instanceof Element) || !(cln instanceof Element)) return;
+    const lostKids = src.childElementCount > cln.childElementCount;
+    const cs = styleCache.get(src) || getComputedStyle(src);
+    if (!styleCache.has(src)) styleCache.set(src, cs);
+    if (lostKids && shouldShrinkBox(src, cs)) {
+      if (!cln.style.height) cln.style.height = "auto";
+      if (!cln.style.width) cln.style.width = "auto";
+      cln.style.removeProperty("block-size");
+      cln.style.removeProperty("inline-size");
+      if (!cln.style.minHeight) cln.style.minHeight = "0";
+      if (!cln.style.minWidth) cln.style.minWidth = "0";
+      if (!cln.style.maxHeight) cln.style.maxHeight = "none";
+      if (!cln.style.maxWidth) cln.style.maxWidth = "none";
+      const oy = cs.overflowY || cs.overflowBlock || "visible";
+      const ox = cs.overflowX || cs.overflowInline || "visible";
+      if (oy !== "visible" || ox !== "visible") {
+        cln.style.overflow = "visible";
+      }
     }
-    if (!outerShadows && clone) {
-      stripRootShadows(state.element, clone);
+    const sKids = Array.from(src.children);
+    const cKids = Array.from(cln.children);
+    for (let i = 0; i < Math.min(sKids.length, cKids.length); i++) {
+      walk(sKids[i], cKids[i]);
     }
-  } finally {
-    undoClamp();
   }
-  state = { clone, classCSS, styleCache, ...state };
-  await runHook("afterClone", state);
-  sanitizeCloneForXHTML(state.clone);
-  if (state.options?.excludeMode === "remove") {
-    try {
-      shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache);
-    } catch (e) {
-      console.warn("[snapdom] shrink pass failed:", e);
+  walk(sourceRoot, cloneRoot);
+}
+function isInNormalFlow(el) {
+  const cs = getComputedStyle(el);
+  if (cs.display === "none") return false;
+  if (cs.position === "absolute" || cs.position === "fixed" || cs.position === "sticky") return false;
+  if ((cs.cssFloat || cs.float || "none") !== "none") return false;
+  if (cs.transform && cs.transform !== "none") return false;
+  return true;
+}
+function willBeExcluded(el, options) {
+  if (!(el instanceof Element)) return false;
+  if (el.getAttribute("data-capture") === "exclude" && options?.excludeMode === "remove") return true;
+  if (Array.isArray(options?.exclude)) {
+    for (const sel of options.exclude) {
+      try {
+        if (el.matches(sel)) return options.excludeMode === "remove";
+      } catch {
+      }
     }
   }
-  try {
-    await ligatureIconToImage(state.clone, state.element);
-  } catch {
-  }
-  await new Promise((resolve) => {
-    idle(async () => {
-      await inlineImages(state.clone, state.options);
-      resolve();
-    }, { fast });
-  });
-  await new Promise((resolve) => {
-    idle(async () => {
-      await inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
-      resolve();
-    }, { fast });
-  });
-  if (options.embedFonts) {
-    await new Promise((resolve) => {
-      idle(async () => {
-        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)
-          );
-          await ensureFontsReady(families, 1);
-        }
-        fontsCSS = await embedCustomFonts({
-          required,
-          usedCodepoints,
-          preCached: false,
-          exclude: state.options.excludeFonts,
-          useProxy: state.options.useProxy
-        });
-        resolve();
-      }, { fast });
-    });
+  return false;
+}
+function estimateKeptHeight(container, options) {
+  const csC = getComputedStyle(container);
+  const rC = container.getBoundingClientRect();
+  let minTop = Infinity;
+  let maxBottom = -Infinity;
+  let found = false;
+  const kids = Array.from(container.children);
+  for (const k of kids) {
+    if (willBeExcluded(k, options)) continue;
+    if (!isInNormalFlow(k)) continue;
+    const rk = k.getBoundingClientRect();
+    const top = rk.top - rC.top;
+    const bottom = rk.bottom - rC.top;
+    if (bottom <= top) continue;
+    if (top < minTop) minTop = top;
+    if (bottom > maxBottom) maxBottom = bottom;
+    found = true;
   }
-  const usedTags = collectUsedTagNames(state.clone).sort();
-  const tagKey = usedTags.join(",");
-  if (cache.baseStyle.has(tagKey)) {
-    baseCSS = cache.baseStyle.get(tagKey);
-  } else {
-    await new Promise((resolve) => {
-      idle(() => {
-        baseCSS = generateDedupedBaseCSS(usedTags);
-        cache.baseStyle.set(tagKey, baseCSS);
-        resolve();
-      }, { fast });
-    });
-  }
-  state = { fontsCSS, baseCSS, ...state };
-  await runHook("beforeRender", state);
-  await new Promise((resolve) => {
-    idle(() => {
-      const csEl = getComputedStyle(state.element);
-      const rect = state.element.getBoundingClientRect();
-      let w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
-      let h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
-      if (state.options?.excludeMode === "remove") {
-        const hEst = estimateKeptHeight(state.element, state.options);
-        const EPS = 1;
-        if (Number.isFinite(hEst) && hEst > 0) {
-          h0 = Math.max(1, Math.min(h0, limitDecimals(hEst + EPS)));
-        }
-      }
-      const coerceNum = (v, def = NaN) => {
-        const n = typeof v === "string" ? parseFloat(v) : v;
-        return Number.isFinite(n) ? n : def;
-      };
-      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, limitDecimals(optW));
-        h = Math.max(1, limitDecimals(optH));
-      } else if (hasW) {
-        w = Math.max(1, limitDecimals(optW));
-        h = Math.max(1, limitDecimals(w / (aspect0 || 1)));
-      } else if (hasH) {
-        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 (!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 = limitDecimals(bb2.minX);
-        minY = limitDecimals(bb2.minY);
-        maxX = limitDecimals(bb2.maxX);
-        maxY = limitDecimals(bb2.maxY);
-      } else {
-        const useTFBBox = outerTransforms && hasTFBBox(state.element);
-        if (useTFBBox) {
-          const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
-          const ind2 = readIndividualTransforms(state.element);
-          const TOTAL = readTotalTransformMatrix({
-            baseTransform: baseTransform2,
-            rotate: ind2.rotate || "0deg",
-            scale: ind2.scale,
-            translate: ind2.translate
-          });
-          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 = 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 = !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 = 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 = !outerTransforms ? 1 : 0;
-      const pad = limitDecimals(basePad + extraPad);
-      const fo = document.createElementNS(svgNS, "foreignObject");
-      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 = 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 = `${limitDecimals(w0)}px`;
-      container.style.height = `${limitDecimals(h0)}px`;
-      container.style.overflow = "visible";
-      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 = 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 : limitDecimals(outW + pad * 2);
-      const svgOutH = isSafari() && wantsSize ? vbH : limitDecimals(outH + pad * 2);
-      const svgHeader = `<svg xmlns="${svgNS}" width="${svgOutW}" height="${svgOutH}" viewBox="0 0 ${vbW} ${vbH}">`;
-      const svgFooter = "</svg>";
-      svgString = svgHeader + foString + svgFooter;
-      dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
-      state = { svgString, dataURL, ...state };
-      resolve();
-    }, { fast });
-  });
-  await runHook("afterRender", state);
-  const sandbox = document.getElementById("snapdom-sandbox");
-  if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
-  return state.dataURL;
+  const contentSpan = found ? Math.max(0, maxBottom - minTop) : 0;
+  const bt = parseFloat(csC.borderTopWidth) || 0;
+  const bb = parseFloat(csC.borderBottomWidth) || 0;
+  const pt = parseFloat(csC.paddingTop) || 0;
+  const pb = parseFloat(csC.paddingBottom) || 0;
+  return bt + bb + pt + pb + contentSpan;
 }
-function authorHasExplicitSize(el) {
-  try {
-    const s = el.getAttribute?.("style") || "";
-    return /\b(height|width|block-size|inline-size)\s*:/.test(s);
-  } catch {
-    return false;
+var limitDecimals = (v, n = 3) => Number.isFinite(v) ? Math.round(v * 10 ** n) / 10 ** n : v;
+
+// src/utils/transforms.helpers.js
+function parseBoxShadow(cs) {
+  const v = cs.boxShadow || "";
+  if (!v || v === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const parts = v.split(/\),(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((s) => s.trim());
+  let t = 0, r = 0, b2 = 0, l = 0;
+  for (const part of parts) {
+    const nums = part.match(/-?\d+(\.\d+)?px/g)?.map((n) => parseFloat(n)) || [];
+    if (nums.length < 2) continue;
+    const [ox2, oy2, blur = 0, spread = 0] = nums;
+    const extX = Math.abs(ox2) + blur + spread;
+    const extY = Math.abs(oy2) + blur + spread;
+    r = Math.max(r, extX + Math.max(ox2, 0));
+    l = Math.max(l, extX + Math.max(-ox2, 0));
+    b2 = Math.max(b2, extY + Math.max(oy2, 0));
+    t = Math.max(t, extY + Math.max(-oy2, 0));
   }
+  return { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b2), left: Math.ceil(l) };
 }
-function isReplacedElement(el) {
-  return el instanceof HTMLImageElement || el instanceof HTMLCanvasElement || el instanceof HTMLVideoElement || el instanceof HTMLIFrameElement || el instanceof SVGElement || el instanceof HTMLObjectElement || el instanceof HTMLEmbedElement;
-}
-function shouldShrinkBox(srcEl, cs) {
-  if (!(srcEl instanceof Element)) return false;
-  if (authorHasExplicitSize(srcEl)) return false;
-  if (isReplacedElement(srcEl)) return false;
-  const pos = cs.position;
-  if (pos === "absolute" || pos === "fixed" || pos === "sticky") return false;
-  const disp = cs.display || "";
-  if (disp.includes("flex") || disp.includes("grid") || disp.startsWith("table")) return false;
-  if (cs.transform && cs.transform !== "none") return false;
-  return true;
+function parseFilterBlur(cs) {
+  const m = (cs.filter || "").match(/blur\(\s*([0-9.]+)px\s*\)/);
+  const b2 = m ? Math.ceil(parseFloat(m[1]) || 0) : 0;
+  return { top: b2, right: b2, bottom: b2, left: b2 };
 }
-function shrinkAutoSizeBoxes(sourceRoot, cloneRoot, styleCache = /* @__PURE__ */ new Map()) {
-  function walk(src, cln) {
-    if (!(src instanceof Element) || !(cln instanceof Element)) return;
-    const lostKids = src.childElementCount > cln.childElementCount;
-    const cs = styleCache.get(src) || getComputedStyle(src);
-    if (!styleCache.has(src)) styleCache.set(src, cs);
-    if (lostKids && shouldShrinkBox(src, cs)) {
-      if (!cln.style.height) cln.style.height = "auto";
-      if (!cln.style.width) cln.style.width = "auto";
-      cln.style.removeProperty("block-size");
-      cln.style.removeProperty("inline-size");
-      if (!cln.style.minHeight) cln.style.minHeight = "0";
-      if (!cln.style.minWidth) cln.style.minWidth = "0";
-      if (!cln.style.maxHeight) cln.style.maxHeight = "none";
-      if (!cln.style.maxWidth) cln.style.maxWidth = "none";
-      const oy = cs.overflowY || cs.overflowBlock || "visible";
-      const ox = cs.overflowX || cs.overflowInline || "visible";
-      if (oy !== "visible" || ox !== "visible") {
-        cln.style.overflow = "visible";
-      }
-    }
-    const sKids = Array.from(src.children);
-    const cKids = Array.from(cln.children);
-    for (let i = 0; i < Math.min(sKids.length, cKids.length); i++) {
-      walk(sKids[i], cKids[i]);
-    }
-  }
-  walk(sourceRoot, cloneRoot);
+function parseOutline(cs) {
+  if ((cs.outlineStyle || "none") === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const w2 = Math.ceil(parseFloat(cs.outlineWidth || "0") || 0);
+  return { top: w2, right: w2, bottom: w2, left: w2 };
 }
-var limitDecimals = (v, n = 3) => Number.isFinite(v) ? Math.round(v * 10 ** n) / 10 ** n : v;
 function parseFilterDropShadows(cs) {
   const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
   if (!raw || raw === "none") {
@@ -4036,34 +4040,6 @@ function normalizeRootTransforms(originalEl, cloneRoot) {
     return null;
   }
 }
-function parseBoxShadow(cs) {
-  const v = cs.boxShadow || "";
-  if (!v || v === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
-  const parts = v.split(/\),(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((s) => s.trim());
-  let t = 0, r = 0, b2 = 0, l = 0;
-  for (const part of parts) {
-    const nums = part.match(/-?\d+(\.\d+)?px/g)?.map((n) => parseFloat(n)) || [];
-    if (nums.length < 2) continue;
-    const [ox2, oy2, blur = 0, spread = 0] = nums;
-    const extX = Math.abs(ox2) + blur + spread;
-    const extY = Math.abs(oy2) + blur + spread;
-    r = Math.max(r, extX + Math.max(ox2, 0));
-    l = Math.max(l, extX + Math.max(-ox2, 0));
-    b2 = Math.max(b2, extY + Math.max(oy2, 0));
-    t = Math.max(t, extY + Math.max(-oy2, 0));
-  }
-  return { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b2), left: Math.ceil(l) };
-}
-function parseFilterBlur(cs) {
-  const m = (cs.filter || "").match(/blur\(\s*([0-9.]+)px\s*\)/);
-  const b2 = m ? Math.ceil(parseFloat(m[1]) || 0) : 0;
-  return { top: b2, right: b2, bottom: b2, left: b2 };
-}
-function parseOutline(cs) {
-  if ((cs.outlineStyle || "none") === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
-  const w2 = Math.ceil(parseFloat(cs.outlineWidth || "0") || 0);
-  return { top: w2, right: w2, bottom: w2, left: w2 };
-}
 function bboxWithOriginFull(w2, h2, M, ox2, oy2) {
   const a2 = M.a, b2 = M.b, c2 = M.c, d2 = M.d, e2 = M.e || 0, f2 = M.f || 0;
   function pt(x, y) {
@@ -4083,17 +4059,24 @@ function bboxWithOriginFull(w2, h2, M, ox2, oy2) {
   }
   return { minX: minX2, minY: minY2, maxX: maxX2, maxY: maxY2, width: maxX2 - minX2, height: maxY2 - minY2 };
 }
-function hasTFBBox(el) {
-  return hasBBoxAffectingTransform(el);
-}
-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 parseTransformOriginPx(cs, w, h) {
+  const raw = (cs.transformOrigin || "0 0").trim().split(/\s+/);
+  const [oxRaw, oyRaw] = [raw[0] || "0", raw[1] || "0"];
+  const toPx = (token, size) => {
+    const t = token.toLowerCase();
+    if (t === "left" || t === "top") return 0;
+    if (t === "center") return size / 2;
+    if (t === "right") return size;
+    if (t === "bottom") return size;
+    if (t.endsWith("px")) return parseFloat(t) || 0;
+    if (t.endsWith("%")) return (parseFloat(t) || 0) * size / 100;
+    if (/^-?\d+(\.\d+)?$/.test(t)) return parseFloat(t) || 0;
+    return 0;
+  };
+  return {
+    ox: toPx(oxRaw, w),
+    oy: toPx(oyRaw, h)
+  };
 }
 function readIndividualTransforms(el) {
   const out = { rotate: "0deg", scale: null, translate: null };
@@ -4150,35 +4133,6 @@ function readIndividualTransforms(el) {
   out.translate = cs.translate && cs.translate !== "none" ? cs.translate : null;
   return out;
 }
-function hasBBoxAffectingTransform(el) {
-  const cs = getComputedStyle(el);
-  const t = cs.transform || "none";
-  const hasMatrix = t !== "none" && !/^matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*,\s*0\s*,\s*0\s*\)$/i.test(t);
-  if (hasMatrix) return true;
-  const r = cs.rotate && cs.rotate !== "none" && cs.rotate !== "0deg";
-  const s = cs.scale && cs.scale !== "none" && cs.scale !== "1";
-  const tr = cs.translate && cs.translate !== "none" && cs.translate !== "0px 0px";
-  return Boolean(r || s || tr);
-}
-function parseTransformOriginPx(cs, w, h) {
-  const raw = (cs.transformOrigin || "0 0").trim().split(/\s+/);
-  const [oxRaw, oyRaw] = [raw[0] || "0", raw[1] || "0"];
-  const toPx = (token, size) => {
-    const t = token.toLowerCase();
-    if (t === "left" || t === "top") return 0;
-    if (t === "center") return size / 2;
-    if (t === "right") return size;
-    if (t === "bottom") return size;
-    if (t.endsWith("px")) return parseFloat(t) || 0;
-    if (t.endsWith("%")) return (parseFloat(t) || 0) * size / 100;
-    if (/^-?\d+(\.\d+)?$/.test(t)) return parseFloat(t) || 0;
-    return 0;
-  };
-  return {
-    ox: toPx(oxRaw, w),
-    oy: toPx(oyRaw, h)
-  };
-}
 var __measureHost = null;
 function getMeasureHost() {
   if (__measureHost) return __measureHost;
@@ -4213,51 +4167,254 @@ function readTotalTransformMatrix(t) {
   host.removeChild(tmp);
   return M;
 }
-function isInNormalFlow(el) {
+function hasBBoxAffectingTransform(el) {
   const cs = getComputedStyle(el);
-  if (cs.display === "none") return false;
-  if (cs.position === "absolute" || cs.position === "fixed" || cs.position === "sticky") return false;
-  if ((cs.cssFloat || cs.float || "none") !== "none") return false;
-  if (cs.transform && cs.transform !== "none") return false;
-  return true;
+  const t = cs.transform || "none";
+  const hasMatrix = t !== "none" && !/^matrix\(\s*1\s*,\s*0\s*,\s*0\s*,\s*1\s*,\s*0\s*,\s*0\s*\)$/i.test(t);
+  if (hasMatrix) return true;
+  const r = cs.rotate && cs.rotate !== "none" && cs.rotate !== "0deg";
+  const s = cs.scale && cs.scale !== "none" && cs.scale !== "1";
+  const tr = cs.translate && cs.translate !== "none" && cs.translate !== "0px 0px";
+  return Boolean(r || s || tr);
 }
-function willBeExcluded(el, options) {
-  if (!(el instanceof Element)) return false;
-  if (el.getAttribute("data-capture") === "exclude" && options?.excludeMode === "remove") return true;
-  if (Array.isArray(options?.exclude)) {
-    for (const sel of options.exclude) {
-      try {
-        if (el.matches(sel)) return options.excludeMode === "remove";
-      } catch {
-      }
-    }
+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);
   }
-  return false;
 }
-function estimateKeptHeight(container, options) {
-  const csC = getComputedStyle(container);
-  const rC = container.getBoundingClientRect();
-  let minTop = Infinity;
-  let maxBottom = -Infinity;
-  let found = false;
-  const kids = Array.from(container.children);
-  for (const k of kids) {
-    if (willBeExcluded(k, options)) continue;
-    if (!isInNormalFlow(k)) continue;
-    const rk = k.getBoundingClientRect();
-    const top = rk.top - rC.top;
-    const bottom = rk.bottom - rC.top;
-    if (bottom <= top) continue;
-    if (top < minTop) minTop = top;
-    if (bottom > maxBottom) maxBottom = bottom;
-    found = true;
+
+// src/core/capture.js
+async function captureDOM(element, options) {
+  if (!element) throw new Error("Element cannot be null or undefined");
+  applyCachePolicy(options.cache);
+  const fast = options.fast;
+  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;
+  await runHook("beforeSnap", state);
+  await runHook("beforeClone", state);
+  const undoClamp = lineClamp(state.element);
+  try {
+    ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options));
+    if (!outerTransforms && clone) {
+      rootTransform2D = normalizeRootTransforms(state.element, clone);
+    }
+    if (!outerShadows && clone) {
+      stripRootShadows(state.element, clone);
+    }
+  } finally {
+    undoClamp();
   }
-  const contentSpan = found ? Math.max(0, maxBottom - minTop) : 0;
-  const bt = parseFloat(csC.borderTopWidth) || 0;
-  const bb = parseFloat(csC.borderBottomWidth) || 0;
-  const pt = parseFloat(csC.paddingTop) || 0;
-  const pb = parseFloat(csC.paddingBottom) || 0;
-  return bt + bb + pt + pb + contentSpan;
+  state = { clone, classCSS, styleCache, ...state };
+  await runHook("afterClone", state);
+  sanitizeCloneForXHTML(state.clone);
+  if (state.options?.excludeMode === "remove") {
+    try {
+      shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache);
+    } catch (e) {
+      console.warn("[snapdom] shrink pass failed:", e);
+    }
+  }
+  try {
+    await ligatureIconToImage(state.clone, state.element);
+  } catch {
+  }
+  await new Promise((resolve) => {
+    idle(async () => {
+      await inlineImages(state.clone, state.options);
+      resolve();
+    }, { fast });
+  });
+  await new Promise((resolve) => {
+    idle(async () => {
+      await inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options);
+      resolve();
+    }, { fast });
+  });
+  if (options.embedFonts) {
+    await new Promise((resolve) => {
+      idle(async () => {
+        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)
+          );
+          await ensureFontsReady(families, 1);
+        }
+        fontsCSS = await embedCustomFonts({
+          required,
+          usedCodepoints,
+          preCached: false,
+          exclude: state.options.excludeFonts,
+          useProxy: state.options.useProxy
+        });
+        resolve();
+      }, { fast });
+    });
+  }
+  const usedTags = collectUsedTagNames(state.clone).sort();
+  const tagKey = usedTags.join(",");
+  if (cache.baseStyle.has(tagKey)) {
+    baseCSS = cache.baseStyle.get(tagKey);
+  } else {
+    await new Promise((resolve) => {
+      idle(() => {
+        baseCSS = generateDedupedBaseCSS(usedTags);
+        cache.baseStyle.set(tagKey, baseCSS);
+        resolve();
+      }, { fast });
+    });
+  }
+  state = { fontsCSS, baseCSS, ...state };
+  await runHook("beforeRender", state);
+  await new Promise((resolve) => {
+    idle(() => {
+      const csEl = getComputedStyle(state.element);
+      const rect = state.element.getBoundingClientRect();
+      let w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
+      let h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      if (state.options?.excludeMode === "remove") {
+        const hEst = estimateKeptHeight(state.element, state.options);
+        const EPS = 1;
+        if (Number.isFinite(hEst) && hEst > 0) {
+          h0 = Math.max(1, Math.min(h0, limitDecimals(hEst + EPS)));
+        }
+      }
+      const coerceNum = (v, def = NaN) => {
+        const n = typeof v === "string" ? parseFloat(v) : v;
+        return Number.isFinite(n) ? n : def;
+      };
+      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, limitDecimals(optW));
+        h = Math.max(1, limitDecimals(optH));
+      } else if (hasW) {
+        w = Math.max(1, limitDecimals(optW));
+        h = Math.max(1, limitDecimals(w / (aspect0 || 1)));
+      } else if (hasH) {
+        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 (!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 = limitDecimals(bb2.minX);
+        minY = limitDecimals(bb2.minY);
+        maxX = limitDecimals(bb2.maxX);
+        maxY = limitDecimals(bb2.maxY);
+      } else {
+        const useTFBBox = outerTransforms && hasTFBBox(state.element);
+        if (useTFBBox) {
+          const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
+          const ind2 = readIndividualTransforms(state.element);
+          const TOTAL = readTotalTransformMatrix({
+            baseTransform: baseTransform2,
+            rotate: ind2.rotate || "0deg",
+            scale: ind2.scale,
+            translate: ind2.translate
+          });
+          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 = 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 = !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 = 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 = !outerTransforms ? 1 : 0;
+      const pad = limitDecimals(basePad + extraPad);
+      const fo = document.createElementNS(svgNS, "foreignObject");
+      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 = 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 = `${limitDecimals(w0)}px`;
+      container.style.height = `${limitDecimals(h0)}px`;
+      container.style.overflow = "visible";
+      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 = 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 : limitDecimals(outW + pad * 2);
+      const svgOutH = isSafari() && wantsSize ? vbH : limitDecimals(outH + pad * 2);
+      const svgHeader = `<svg xmlns="${svgNS}" width="${svgOutW}" height="${svgOutH}" viewBox="0 0 ${vbW} ${vbH}">`;
+      const svgFooter = "</svg>";
+      svgString = svgHeader + foString + svgFooter;
+      dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+      state = { svgString, dataURL, ...state };
+      resolve();
+    }, { fast });
+  });
+  await runHook("afterRender", state);
+  const sandbox = document.getElementById("snapdom-sandbox");
+  if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
+  return state.dataURL;
+}
+function hasTFBBox(el) {
+  return hasBBoxAffectingTransform(el);
 }
 
 // src/core/context.js