@zumer/snapdom 1.9.12-dev.2 → 1.9.12-dev.4

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.12-dev.2
+* v.1.9.12-dev.4
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -581,17 +581,6 @@ function getStyle(el, pseudo = null) {
   }
   return map.get(pseudo);
 }
-function parseContent(content) {
-  let clean = content.replace(/^['"]|['"]$/g, "");
-  if (clean.startsWith("\\")) {
-    try {
-      return String.fromCharCode(parseInt(clean.replace("\\", ""), 16));
-    } catch {
-      return clean;
-    }
-  }
-  return clean;
-}
 function snapshotComputedStyle(style) {
   const snap = {};
   for (let prop of style) {
@@ -628,8 +617,9 @@ function idle(fn, { fast = false } = {}) {
 function isSafari() {
   const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
   const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
+  const isUIWebView = /AppleWebKit/i.test(ua) && /Mobile/i.test(ua) && !/Safari/i.test(ua);
   const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
-  return isSafariUA || isWeChatUA;
+  return isSafariUA || isUIWebView || isWeChatUA;
 }
 
 // src/modules/styles.js
@@ -2100,10 +2090,20 @@ function buildCounterContext(root) {
   const empty = /* @__PURE__ */ new Map();
   build(rootEl, empty, empty);
   return {
+    /**
+     * Get top value for counter name at given node.
+     * @param {Element} node
+     * @param {string} name
+     */
     get(node, name) {
       const s = nodeCounters.get(node)?.get(name);
       return s && s.length ? s[s.length - 1] : 0;
     },
+    /**
+     * Get full stack for counter name at given node.
+     * @param {Element} node
+     * @param {string} name
+     */
     getStack(node, name) {
       const s = nodeCounters.get(node)?.get(name);
       return s ? s.slice() : [];
@@ -2139,8 +2139,109 @@ function resolveCountersInContent(raw, node, ctx) {
 
 // src/modules/pseudo.js
 var counterCtx = null;
+var __siblingCounters = /* @__PURE__ */ new WeakMap();
+function unquoteDoubleStrings2(s) {
+  return (s || "").replace(/"([^"]*)"/g, "$1");
+}
+function collapseCssContent(raw) {
+  if (!raw) return "";
+  const tokens = [];
+  const rx = /"([^"]*)"/g;
+  let m;
+  while (m = rx.exec(raw)) tokens.push(m[1]);
+  if (tokens.length) return tokens.join("");
+  return unquoteDoubleStrings2(raw);
+}
+function withSiblingOverrides(node, base) {
+  const parent = node.parentElement;
+  const map = parent ? __siblingCounters.get(parent) : null;
+  if (!map) return base;
+  return {
+    get(n, name) {
+      const v = base.get(n, name);
+      const ov = map.get(name);
+      return typeof ov === "number" ? Math.max(v, ov) : v;
+    },
+    getStack(n, name) {
+      const s = base.getStack(n, name);
+      if (!s.length) return s;
+      const ov = map.get(name);
+      if (typeof ov === "number") {
+        const out = s.slice();
+        out[out.length - 1] = Math.max(out[out.length - 1], ov);
+        return out;
+      }
+      return s;
+    }
+  };
+}
+function deriveCounterCtxForPseudo(node, pseudoStyle, baseCtx) {
+  const modStacks = /* @__PURE__ */ new Map();
+  function parseListDecl(value) {
+    const out = [];
+    if (!value || value === "none") return out;
+    for (const part of String(value).split(",")) {
+      const toks = part.trim().split(/\s+/);
+      const name = toks[0];
+      const num = Number.isFinite(Number(toks[1])) ? Number(toks[1]) : void 0;
+      if (name) out.push({ name, num });
+    }
+    return out;
+  }
+  const resets = parseListDecl(pseudoStyle?.counterReset);
+  const incs = parseListDecl(pseudoStyle?.counterIncrement);
+  function getStackDerived(name) {
+    if (modStacks.has(name)) return modStacks.get(name).slice();
+    let stack = baseCtx.getStack(node, name);
+    stack = stack.length ? stack.slice() : [];
+    const r = resets.find((x) => x.name === name);
+    if (r) {
+      const val = Number.isFinite(r.num) ? r.num : 0;
+      stack = stack.length ? [...stack, val] : [val];
+    }
+    const inc = incs.find((x) => x.name === name);
+    if (inc) {
+      const by = Number.isFinite(inc.num) ? inc.num : 1;
+      if (stack.length === 0) stack = [0];
+      stack[stack.length - 1] += by;
+    }
+    modStacks.set(name, stack.slice());
+    return stack;
+  }
+  return {
+    get(_node, name) {
+      const s = getStackDerived(name);
+      return s.length ? s[s.length - 1] : 0;
+    },
+    getStack(_node, name) {
+      return getStackDerived(name);
+    },
+    /** expone increments del pseudo para que el caller pueda propagar a hermanos */
+    __incs: incs
+  };
+}
+function resolvePseudoContentAndIncs(node, pseudo, baseCtx) {
+  let ps;
+  try {
+    ps = getComputedStyle(node, pseudo);
+  } catch {
+  }
+  const raw = ps?.content;
+  if (!raw || raw === "none" || raw === "normal") return { text: "", incs: [] };
+  const baseWithSiblings = withSiblingOverrides(node, baseCtx);
+  const derived = deriveCounterCtxForPseudo(node, ps, baseWithSiblings);
+  let resolved = hasCounters(raw) ? resolveCountersInContent(raw, node, derived) : raw;
+  const text = collapseCssContent(resolved);
+  return { text, incs: derived.__incs || [] };
+}
 async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
+  if (!counterCtx) {
+    try {
+      counterCtx = buildCounterContext(source.ownerDocument || document);
+    } catch {
+    }
+  }
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       const style = getStyle(source, pseudo);
@@ -2171,12 +2272,8 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
         clone.insertBefore(span, restNode);
         continue;
       }
-      const content = style.content;
-      let cleanContent = parseContent(content);
-      if (hasCounters(content)) {
-        counterCtx = buildCounterContext(source.ownerDocument || document);
-        cleanContent = resolveCountersInContent(cleanContent, source, counterCtx);
-      }
+      const rawContent = style.content;
+      const { text: cleanContent, incs } = resolvePseudoContentAndIncs(source, pseudo, counterCtx);
       const bg = style.backgroundImage;
       const bgColor = style.backgroundColor;
       const fontFamily = style.fontFamily;
@@ -2190,28 +2287,42 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       const borderWidth = parseFloat(style.borderWidth);
       const transform = style.transform;
       const isIconFont22 = isIconFont2(fontFamily);
-      const hasExplicitContent = content !== "none" && cleanContent !== "";
+      const hasExplicitContent = rawContent !== "none" && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
       const hasBox2 = display !== "inline" && (width > 0 || height > 0);
       const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
       const hasTransform = transform && transform !== "none";
-      const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox2 || hasBorder || hasTransform;
-      if (!shouldRender) continue;
+      const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBorder || hasTransform;
+      if (!shouldRender) {
+        if (incs && incs.length && source.parentElement) {
+          const map = __siblingCounters.get(source.parentElement) || /* @__PURE__ */ new Map();
+          for (const { name, num } of incs) {
+            if (!name) continue;
+            const baseWithSibs = withSiblingOverrides(source, counterCtx);
+            const derived = deriveCounterCtxForPseudo(source, getComputedStyle(source, pseudo), baseWithSibs);
+            const finalVal = derived.get(source, name);
+            map.set(name, finalVal);
+          }
+          __siblingCounters.set(source.parentElement, map);
+        }
+        continue;
+      }
       const pseudoEl = document.createElement("span");
       pseudoEl.dataset.snapdomPseudo = pseudo;
       pseudoEl.style.verticalAlign = "middle";
+      pseudoEl.style.pointerEvents = "none";
       const snapshot = snapshotComputedStyle(style);
       const key = getStyleKey(snapshot, "span");
       sessionCache.styleMap.set(pseudoEl, key);
-      if (isIconFont22 && cleanContent.length === 1) {
-        const { dataUrl, width: width2, height: height2 } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
+      if (isIconFont22 && cleanContent && cleanContent.length === 1) {
+        const { dataUrl, width: w, height: h } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
         const imgEl = document.createElement("img");
         imgEl.src = dataUrl;
-        imgEl.style = `height:${fontSize}px;width:${width2 / height2 * fontSize}px;object-fit:contain;`;
+        imgEl.style = `height:${fontSize}px;width:${w / h * fontSize}px;object-fit:contain;`;
         pseudoEl.appendChild(imgEl);
         clone.dataset.snapdomHasIcon = "true";
-      } else if (cleanContent.startsWith("url(")) {
+      } else if (cleanContent && cleanContent.startsWith("url(")) {
         const rawUrl = extractURL(cleanContent);
         if (rawUrl?.trim()) {
           try {
@@ -2227,6 +2338,10 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       } else if (!isIconFont22 && hasExplicitContent) {
         pseudoEl.textContent = cleanContent;
       }
+      pseudoEl.style.background = "none";
+      if ("mask" in pseudoEl.style) {
+        pseudoEl.style.mask = "none";
+      }
       if (hasBg) {
         try {
           const bgSplits = splitBackgroundImage(bg);
@@ -2238,7 +2353,18 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       }
       if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
       const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent?.trim() !== "";
-      const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox2 || hasBorder || hasTransform;
+      const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBorder || hasTransform;
+      if (incs && incs.length && source.parentElement) {
+        const map = __siblingCounters.get(source.parentElement) || /* @__PURE__ */ new Map();
+        const baseWithSibs = withSiblingOverrides(source, counterCtx);
+        const derived = deriveCounterCtxForPseudo(source, getComputedStyle(source, pseudo), baseWithSibs);
+        for (const { name } of incs) {
+          if (!name) continue;
+          const finalVal = derived.get(source, name);
+          map.set(name, finalVal);
+        }
+        __siblingCounters.set(source.parentElement, map);
+      }
       if (!hasVisibleBox) continue;
       if (pseudo === "::before") {
         clone.insertBefore(pseudoEl, clone.firstChild);
@@ -2306,6 +2432,102 @@ function inlineExternalDefsAndSymbols(rootElement) {
   });
 }
 
+// src/modules/changeCSS.js
+function freezeSticky(originalRoot, cloneRoot) {
+  if (!originalRoot || !cloneRoot) return;
+  const scrollTop = originalRoot.scrollTop || 0;
+  if (!scrollTop) return;
+  if (getComputedStyle(cloneRoot).position === "static") {
+    cloneRoot.style.position = "relative";
+  }
+  const rootRect = originalRoot.getBoundingClientRect();
+  const viewportH = originalRoot.clientHeight;
+  const PH_ATTR = "data-snap-ph";
+  const walker = document.createTreeWalker(originalRoot, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const el = (
+      /** @type {HTMLElement} */
+      walker.currentNode
+    );
+    const cs = getComputedStyle(el);
+    const pos = cs.position;
+    if (pos !== "sticky" && pos !== "-webkit-sticky") continue;
+    const topInit = _toPx(cs.top);
+    const bottomInit = _toPx(cs.bottom);
+    if (topInit == null && bottomInit == null) continue;
+    const path = _pathOf(el, originalRoot);
+    const cloneEl = _findByPathIgnoringPlaceholders(cloneRoot, path, PH_ATTR);
+    if (!cloneEl) continue;
+    const elRect = el.getBoundingClientRect();
+    const widthPx = elRect.width;
+    const heightPx = elRect.height;
+    const leftPx = elRect.left - rootRect.left;
+    if (!(widthPx > 0 && heightPx > 0)) continue;
+    if (!Number.isFinite(leftPx)) continue;
+    const topAbsPx = topInit != null ? topInit + scrollTop : scrollTop + (viewportH - heightPx - /** bottomInit non-null */
+    bottomInit);
+    if (!Number.isFinite(topAbsPx)) continue;
+    const zParsed = Number.parseInt(cs.zIndex, 10);
+    const hasZ = Number.isFinite(zParsed);
+    const overlayZ = hasZ ? Math.max(zParsed, 1) + 1 : 2;
+    const placeholderZ = hasZ ? zParsed - 1 : 0;
+    const ph = cloneEl.cloneNode(false);
+    ph.setAttribute(PH_ATTR, "1");
+    ph.style.position = "sticky";
+    ph.style.left = `${leftPx}px`;
+    ph.style.top = `${topAbsPx}px`;
+    ph.style.width = `${widthPx}px`;
+    ph.style.height = `${heightPx}px`;
+    ph.style.visibility = "hidden";
+    ph.style.zIndex = String(placeholderZ);
+    ph.style.overflow = "hidden";
+    ph.style.background = "transparent";
+    ph.style.boxShadow = "none";
+    ph.style.filter = "none";
+    cloneEl.parentElement?.insertBefore(ph, cloneEl);
+    cloneEl.style.position = "absolute";
+    cloneEl.style.left = `${leftPx}px`;
+    cloneEl.style.top = `${topAbsPx}px`;
+    cloneEl.style.bottom = "auto";
+    cloneEl.style.zIndex = String(overlayZ);
+    cloneEl.style.pointerEvents = "none";
+  }
+}
+function _toPx(v) {
+  if (!v || v === "auto") return null;
+  const n = Number.parseFloat(v);
+  return Number.isFinite(n) ? n : null;
+}
+function _pathOf(el, root) {
+  const path = [];
+  for (let cur = el; cur && cur !== root; ) {
+    const p = cur.parentElement;
+    if (!p) break;
+    path.push(Array.prototype.indexOf.call(p.children, cur));
+    cur = p;
+  }
+  return path.reverse();
+}
+function _findByPathIgnoringPlaceholders(root, path, phAttr) {
+  let cur = root;
+  for (let i = 0; i < path.length; i++) {
+    const kids = _childrenWithoutPlaceholders(cur, phAttr);
+    cur = /** @type {HTMLElement|undefined} */
+    kids[path[i]];
+    if (!cur) return null;
+  }
+  return cur instanceof HTMLElement ? cur : null;
+}
+function _childrenWithoutPlaceholders(el, phAttr) {
+  const out = [];
+  const ch = el.children;
+  for (let i = 0; i < ch.length; i++) {
+    const c = ch[i];
+    if (!c.hasAttribute(phAttr)) out.push(c);
+  }
+  return out;
+}
+
 // src/core/prepare.js
 async function prepareClone(element, options = {}) {
   const sessionCache = {
@@ -2380,17 +2602,20 @@ async function prepareClone(element, options = {}) {
       cloneNode.appendChild(inner);
     }
   }
+  const contentRoot = clone instanceof HTMLElement && clone.firstElementChild instanceof HTMLElement ? clone.firstElementChild : clone;
+  freezeSticky(element, contentRoot);
   if (element === sessionCache.nodeMap.get(clone)) {
     const computed = sessionCache.styleCache.get(element) || window.getComputedStyle(element);
     sessionCache.styleCache.set(element, computed);
     const transform = stripTranslate(computed.transform);
     clone.style.margin = "0";
-    clone.style.position = "static";
     clone.style.top = "auto";
     clone.style.left = "auto";
     clone.style.right = "auto";
     clone.style.bottom = "auto";
-    clone.style.zIndex = "auto";
+    clone.style.animation = "none";
+    clone.style.transition = "none";
+    clone.style.willChange = "auto";
     clone.style.float = "none";
     clone.style.clear = "none";
     clone.style.transform = transform || "";
@@ -2786,7 +3011,7 @@ async function captureDOM(element, options) {
       idle(async () => {
         const required = collectUsedFontVariants(element);
         const usedCodepoints = collectUsedCodepoints(element);
-        if (isSafari) {
+        if (isSafari()) {
           const families = new Set(
             Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
           );
@@ -2818,101 +3043,186 @@ async function captureDOM(element, options) {
   }
   await new Promise((resolve) => {
     idle(() => {
-      const rect = element.getBoundingClientRect();
-      let w = Number(rect.width) || 0;
-      let h = Number(rect.height) || 0;
-      const hasW = Number.isFinite(options.width);
-      const hasH = Number.isFinite(options.height);
-      const scaleOpt = options.scale ?? 1;
-      const hasScale = typeof scaleOpt === "number" && scaleOpt !== 1;
-      if (!hasScale) {
-        const aspect = h > 0 ? w / h : 1;
-        if (hasW && hasH) {
-          w = Number(options.width);
-          h = Number(options.height);
-        } else if (hasW) {
-          w = Number(options.width);
-          h = w / (aspect || 1);
-        } else if (hasH) {
-          h = Number(options.height);
-          w = h * (aspect || 1);
+      const csEl = getComputedStyle(element);
+      function parseFilterDropShadows(cs) {
+        const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
+        if (!raw || raw === "none") {
+          return { bleed: { top: 0, right: 0, bottom: 0, left: 0 }, has: false };
+        }
+        const tokens = raw.match(/drop-shadow\((?:[^()]|\([^()]*\))*\)/gi) || [];
+        let t = 0, r = 0, b = 0, l = 0;
+        let found = false;
+        for (const tok of tokens) {
+          found = true;
+          const nums = tok.match(/-?\d+(?:\.\d+)?px/gi)?.map((v) => parseFloat(v)) || [];
+          const [ox = 0, oy = 0, blur = 0] = nums;
+          const extX = Math.abs(ox) + blur;
+          const extY = Math.abs(oy) + blur;
+          r = Math.max(r, extX + Math.max(ox, 0));
+          l = Math.max(l, extX + Math.max(-ox, 0));
+          b = Math.max(b, extY + Math.max(oy, 0));
+          t = Math.max(t, extY + Math.max(-oy, 0));
+        }
+        return {
+          bleed: { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b), left: Math.ceil(l) },
+          has: found
+        };
+      }
+      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) {
+          let X = x - ox2, Y = y - oy2;
+          let X2 = a2 * X + c2 * Y, Y2 = b2 * X + d2 * Y;
+          X2 += ox2 + e2;
+          Y2 += oy2 + f2;
+          return [X2, Y2];
+        }
+        const P = [pt(0, 0), pt(w2, 0), pt(0, h2), pt(w2, h2)];
+        let minX2 = Infinity, minY2 = Infinity, maxX2 = -Infinity, maxY2 = -Infinity;
+        for (const [X, Y] of P) {
+          if (X < minX2) minX2 = X;
+          if (Y < minY2) minY2 = Y;
+          if (X > maxX2) maxX2 = X;
+          if (Y > maxY2) maxY2 = Y;
         }
+        return { minX: minX2, minY: minY2, maxX: maxX2, maxY: maxY2, width: maxX2 - minX2, height: maxY2 - minY2 };
       }
-      w = Math.max(1, Math.ceil(Number.isFinite(w) ? w : 1));
-      h = Math.max(1, Math.ceil(Number.isFinite(h) ? h : 1));
-      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));
+      function hasTFBBox(el) {
+        return hasBBoxAffectingTransform(el);
+      }
+      const rect = element.getBoundingClientRect();
+      const w0 = Math.max(1, Math.ceil(element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
+      const h0 = Math.max(1, Math.ceil(element.offsetHeight || parseFloat(csEl.height) || rect.height || 1));
+      const coerceNum = (v, def = NaN) => {
+        const n = typeof v === "string" ? parseFloat(v) : v;
+        return Number.isFinite(n) ? n : def;
+      };
+      const optW = coerceNum(options.width);
+      const optH = coerceNum(options.height);
+      let w = w0, h = h0;
+      const hasW = Number.isFinite(optW);
+      const hasH = Number.isFinite(optH);
+      const aspect0 = h0 > 0 ? w0 / h0 : 1;
+      if (hasW && hasH) {
+        w = Math.max(1, Math.ceil(optW));
+        h = Math.max(1, Math.ceil(optH));
+      } else if (hasW) {
+        w = Math.max(1, Math.ceil(optW));
+        h = Math.max(1, Math.ceil(w / (aspect0 || 1)));
+      } else if (hasH) {
+        h = Math.max(1, Math.ceil(optH));
+        w = Math.max(1, Math.ceil(h * (aspect0 || 1)));
       } else {
+        w = w0;
+        h = h0;
+      }
+      let minX = 0, minY = 0, maxX = w0, maxY = h0;
+      if (hasTFBBox(element)) {
+        const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
+        const ind2 = readIndividualTransforms(element);
         const TOTAL = readTotalTransformMatrix({
-          baseTransform,
-          rotate: ind.rotate || "0deg",
-          scale: ind.scale,
-          translate: ind.translate
+          baseTransform: baseTransform2,
+          rotate: ind2.rotate || "0deg",
+          scale: ind2.scale,
+          translate: ind2.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 { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0);
+        const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString());
+        const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2);
+        minX = bb.minX;
+        minY = bb.minY;
+        maxX = bb.maxX;
+        maxY = bb.maxY;
+      }
+      const bleedShadow = parseBoxShadow(csEl);
+      const bleedBlur = parseFilterBlur(csEl);
+      const bleedOutline = parseOutline(csEl);
+      const drop = parseFilterDropShadows(csEl);
+      const bleed = {
+        top: bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top,
+        right: bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right,
+        bottom: bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom,
+        left: bleedShadow.left + bleedBlur.left + bleedOutline.left + drop.bleed.left
+      };
+      minX -= bleed.left;
+      minY -= bleed.top;
+      maxX += bleed.right;
+      maxY += bleed.bottom;
+      const vbW0 = Math.max(1, Math.ceil(maxX - minX));
+      const vbH0 = Math.max(1, Math.ceil(maxY - minY));
+      const outW = Math.max(1, Math.round(vbW0 * (hasW || hasH ? w / w0 : 1)));
+      const outH = Math.max(1, Math.round(vbH0 * (hasH || hasW ? h / h0 : 1)));
       const svgNS = "http://www.w3.org/2000/svg";
+      const pad = isSafari() ? 1 : 0;
       const fo = document.createElementNS(svgNS, "foreignObject");
-      fo.setAttribute("width", "100%");
-      fo.setAttribute("height", "100%");
-      fo.setAttribute("x", String(tx));
-      fo.setAttribute("y", String(ty));
+      const vbMinX = Math.floor(minX);
+      const vbMinY = Math.floor(minY);
+      fo.setAttribute("x", String(-(vbMinX - pad)));
+      fo.setAttribute("y", String(-(vbMinY - pad)));
+      fo.setAttribute("width", String(Math.ceil(w0 + pad * 2)));
+      fo.setAttribute("height", String(Math.ceil(h0 + pad * 2)));
       fo.style.overflow = "visible";
       const styleTag = document.createElement("style");
       styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;} foreignObject{overflow:visible;}" + classCSS;
       fo.appendChild(styleTag);
       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.width = `${w0}px`;
+      container.style.height = `${h0}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 finalW = !hasScale && (hasW || hasH) ? w : outW;
-      const finalH = !hasScale && (hasH || hasW) ? h : outH;
-      const svgHeader = `<svg xmlns="${svgNS}" width="${finalW}" height="${finalH}" viewBox="0 0 ${outW} ${outH}">`;
+      const vbW = vbW0 + pad * 2;
+      const vbH = vbH0 + pad * 2;
+      const wantsSize = hasW || hasH;
+      options.meta = {
+        w0,
+        // ancho natural del elemento
+        h0,
+        // alto natural
+        vbW,
+        // ancho del viewBox
+        vbH,
+        // alto del viewBox
+        targetW: w,
+        // ancho deseado según options.width
+        targetH: h
+        // alto deseado según options.height
+      };
+      const svgOutW = isSafari() && wantsSize ? vbW : outW + pad * 2;
+      const svgOutH = isSafari() && wantsSize ? vbH : 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)}`;
@@ -2932,26 +3242,6 @@ function matrixFromComputed(el) {
     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 = typeof el.computedStyleMap === "function" ? el.computedStyleMap() : null;
@@ -2967,26 +3257,37 @@ function readIndividualTransforms(el) {
     };
     const rot = safeGet("rotate");
     if (rot) {
-      const ang = rot.angle ?? rot;
-      if (ang && typeof ang === "object" && "unit" in ang) {
+      if (rot.angle) {
+        const ang = rot.angle;
         out.rotate = ang.unit === "rad" ? ang.value * 180 / Math.PI + "deg" : ang.value + ang.unit;
+      } else if (rot.unit) {
+        out.rotate = rot.unit === "rad" ? rot.value * 180 / Math.PI + "deg" : rot.value + rot.unit;
       } else {
         out.rotate = String(rot);
       }
+    } else {
+      const cs2 = getComputedStyle(el);
+      out.rotate = cs2.rotate && cs2.rotate !== "none" ? cs2.rotate : "0deg";
     }
     const sc = safeGet("scale");
-    if (sc && sc.length) {
-      const sx = sc[0]?.value ?? 1;
-      const sy = sc[1]?.value ?? sx;
+    if (sc) {
+      const sx = "x" in sc && sc.x?.value != null ? sc.x.value : Array.isArray(sc) ? sc[0]?.value : Number(sc) || 1;
+      const sy = "y" in sc && sc.y?.value != null ? sc.y.value : Array.isArray(sc) ? sc[1]?.value : sx;
       out.scale = `${sx} ${sy}`;
+    } else {
+      const cs2 = getComputedStyle(el);
+      out.scale = cs2.scale && cs2.scale !== "none" ? cs2.scale : null;
     }
     const tr = safeGet("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";
+    if (tr) {
+      const tx = "x" in tr && "value" in tr.x ? tr.x.value : Array.isArray(tr) ? tr[0]?.value : 0;
+      const ty = "y" in tr && "value" in tr.y ? tr.y.value : Array.isArray(tr) ? tr[1]?.value : 0;
+      const ux = "x" in tr && tr.x?.unit ? tr.x.unit : "px";
+      const uy = "y" in tr && tr.y?.unit ? tr.y.unit : "px";
       out.translate = `${tx}${ux} ${ty}${uy}`;
+    } else {
+      const cs2 = getComputedStyle(el);
+      out.translate = cs2.translate && cs2.translate !== "none" ? cs2.translate : null;
     }
     return out;
   }
@@ -2997,17 +3298,33 @@ function readIndividualTransforms(el) {
   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 };
+  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() {
@@ -3095,40 +3412,198 @@ function createContext(options = {}) {
   };
 }
 
-// src/exporters/toImg.js
-async function toImg(url, options) {
-  const img = new Image();
-  img.src = url;
-  await img.decode();
-  if (options.scale !== 1) {
-    img.style.width = `${img.naturalWidth * options.scale}px`;
-    img.style.height = `${img.naturalHeight * options.scale}px`;
+// src/exporters/toCanvas.js
+function isSvgDataURL(u) {
+  return typeof u === "string" && /^data:image\/svg\+xml/i.test(u);
+}
+function decodeSvgFromDataURL(u) {
+  const i = u.indexOf(",");
+  return i >= 0 ? decodeURIComponent(u.slice(i + 1)) : "";
+}
+function encodeSvgToDataURL(svgText) {
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
+}
+function splitDecls(s) {
+  let parts = [], buf = "", depth = 0;
+  for (let i = 0; i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "(") depth++;
+    if (ch === ")") depth = Math.max(0, depth - 1);
+    if (ch === ";" && depth === 0) {
+      parts.push(buf);
+      buf = "";
+    } else buf += ch;
+  }
+  if (buf.trim()) parts.push(buf);
+  return parts.map((x) => x.trim()).filter(Boolean);
+}
+function boxShadowToDropShadow(value) {
+  const layers = [];
+  let buf = "", depth = 0;
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === "(") depth++;
+    if (ch === ")") depth = Math.max(0, depth - 1);
+    if (ch === "," && depth === 0) {
+      layers.push(buf.trim());
+      buf = "";
+    } else buf += ch;
+  }
+  if (buf.trim()) layers.push(buf.trim());
+  const fns = [];
+  for (const layer of layers) {
+    if (/\binset\b/i.test(layer)) continue;
+    const nums = layer.match(/-?\d+(?:\.\d+)?px/gi) || [];
+    const [ox = "0px", oy = "0px", blur = "0px"] = nums;
+    let color = layer.replace(/-?\d+(?:\.\d+)?px/gi, "").replace(/\binset\b/ig, "").trim().replace(/\s{2,}/g, " ");
+    const hasColor = !!color && color !== ",";
+    fns.push(`drop-shadow(${ox} ${oy} ${blur}${hasColor ? ` ${color}` : ""})`);
+  }
+  return fns.join(" ");
+}
+function rewriteDeclList(list) {
+  const decls = splitDecls(list);
+  let filter = null, wfilter = null, box = null;
+  const rest = [];
+  for (const d of decls) {
+    const idx = d.indexOf(":");
+    if (idx < 0) continue;
+    const prop = d.slice(0, idx).trim().toLowerCase();
+    const val = d.slice(idx + 1).trim();
+    if (prop === "box-shadow") box = val;
+    else if (prop === "filter") filter = val;
+    else if (prop === "-webkit-filter") wfilter = val;
+    else rest.push([prop, val]);
+  }
+  if (box) {
+    const ds = boxShadowToDropShadow(box);
+    if (ds) {
+      filter = filter ? `${filter} ${ds}` : ds;
+      wfilter = wfilter ? `${wfilter} ${ds}` : ds;
+    }
+  }
+  const out = [...rest];
+  if (filter) out.push(["filter", filter]);
+  if (wfilter) out.push(["-webkit-filter", wfilter]);
+  return out.map(([k, v]) => `${k}:${v}`).join(";");
+}
+function rewriteCssBlock(css) {
+  return css.replace(/([^{}]+)\{([^}]*)\}/g, (_m, sel, body) => `${sel}{${rewriteDeclList(body)}}`);
+}
+function rewriteSvgBoxShadowToDropShadow(svgText) {
+  svgText = svgText.replace(
+    /<style[^>]*>([\s\S]*?)<\/style>/gi,
+    (m, css) => m.replace(css, rewriteCssBlock(css))
+  );
+  svgText = svgText.replace(
+    /style=(['"])([\s\S]*?)\1/gi,
+    (m, q, body) => `style=${q}${rewriteDeclList(body)}${q}`
+  );
+  return svgText;
+}
+function maybeConvertBoxShadowForSafari(url) {
+  if (!isSafari() || !isSvgDataURL(url)) return url;
+  try {
+    const svg = decodeSvgFromDataURL(url);
+    const fixed = rewriteSvgBoxShadowToDropShadow(svg);
+    return encodeSvgToDataURL(fixed);
+  } catch {
+    return url;
   }
-  return img;
 }
-
-// src/exporters/toCanvas.js
 async function toCanvas(url, options) {
-  const { scale, dpr } = options;
+  let { width: optW, height: optH, scale = 1, dpr = 1, meta = {} } = options;
+  url = maybeConvertBoxShadowForSafari(url);
   const img = new Image();
-  img.crossOrigin = "anonymous";
   img.loading = "eager";
   img.decoding = "sync";
+  img.crossOrigin = "anonymous";
   img.src = url;
   await img.decode();
-  const width = img.naturalWidth * scale;
-  const height = img.naturalHeight * scale;
+  const natW = img.naturalWidth;
+  const natH = img.naturalHeight;
+  const refW = Number.isFinite(meta.w0) ? meta.w0 : natW;
+  const refH = Number.isFinite(meta.h0) ? meta.h0 : natH;
+  let outW, outH;
+  const hasW = Number.isFinite(optW);
+  const hasH = Number.isFinite(optH);
+  if (hasW && hasH) {
+    outW = Math.max(1, optW);
+    outH = Math.max(1, optH);
+  } else if (hasW) {
+    const k = optW / Math.max(1, refW);
+    outW = optW;
+    outH = Math.round(refH * k);
+  } else if (hasH) {
+    const k = optH / Math.max(1, refH);
+    outH = optH;
+    outW = Math.round(refW * k);
+  } else {
+    outW = natW;
+    outH = natH;
+  }
+  outW = Math.round(outW * scale);
+  outH = Math.round(outH * scale);
   const canvas = document.createElement("canvas");
-  canvas.width = Math.ceil(width * dpr);
-  canvas.height = Math.ceil(height * dpr);
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
+  canvas.width = Math.ceil(outW * dpr);
+  canvas.height = Math.ceil(outH * dpr);
+  canvas.style.width = `${outW}px`;
+  canvas.style.height = `${outH}px`;
   const ctx = canvas.getContext("2d");
   if (dpr !== 1) ctx.scale(dpr, dpr);
-  ctx.drawImage(img, 0, 0, width, height);
+  ctx.drawImage(img, 0, 0, outW, outH);
   return canvas;
 }
 
+// src/modules/rasterize.js
+async function rasterize(url, options) {
+  const canvas = await toCanvas(url, options);
+  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
+  const img = new Image();
+  img.src = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
+  await img.decode();
+  img.style.width = `${finalCanvas.width / options.dpr}px`;
+  img.style.height = `${finalCanvas.height / options.dpr}px`;
+  return img;
+}
+
+// src/exporters/toImg.js
+async function toImg(url, options) {
+  const { scale = 1, width, height, meta = {} } = options;
+  const hasW = Number.isFinite(width);
+  const hasH = Number.isFinite(height);
+  const wantsScale = Number.isFinite(scale) && scale !== 1 || hasW || hasH;
+  if (isSafari() && wantsScale) {
+    const pngUrl = await rasterize(url, { ...options, format: "png", quality: 1, meta });
+    return pngUrl;
+  }
+  const img = new Image();
+  img.decoding = "sync";
+  img.loading = "eager";
+  img.src = url;
+  await img.decode();
+  if (hasW && hasH) {
+    img.style.width = `${width}px`;
+    img.style.height = `${height}px`;
+  } else if (hasW) {
+    const refW = Number.isFinite(meta.w0) ? meta.w0 : img.naturalWidth;
+    const refH = Number.isFinite(meta.h0) ? meta.h0 : img.naturalHeight;
+    const k = width / Math.max(1, refW);
+    img.style.width = `${width}px`;
+    img.style.height = `${Math.round(refH * k)}px`;
+  } else if (hasH) {
+    const refW = Number.isFinite(meta.w0) ? meta.w0 : img.naturalWidth;
+    const refH = Number.isFinite(meta.h0) ? meta.h0 : img.naturalHeight;
+    const k = height / Math.max(1, refH);
+    img.style.height = `${height}px`;
+    img.style.width = `${Math.round(refW * k)}px`;
+  } else if (scale !== 1) {
+    img.style.width = `${Math.round(img.naturalWidth * scale)}px`;
+    img.style.height = `${Math.round(img.naturalHeight * scale)}px`;
+  }
+  return img;
+}
+
 // src/exporters/toBlob.js
 async function toBlob(url, options) {
   const type = options.type;
@@ -3147,18 +3622,6 @@ async function toBlob(url, options) {
   );
 }
 
-// src/modules/rasterize.js
-async function rasterize(url, options) {
-  const canvas = await toCanvas(url, options);
-  const finalCanvas = options.backgroundColor ? createBackground(canvas, options.backgroundColor) : canvas;
-  const img = new Image();
-  img.src = finalCanvas.toDataURL(`image/${options.format}`, options.quality);
-  await img.decode();
-  img.style.width = `${finalCanvas.width / options.dpr}px`;
-  img.style.height = `${finalCanvas.height / options.dpr}px`;
-  return img;
-}
-
 // src/exporters/download.js
 async function download(url, options) {
   options.dpr = 1;
@@ -3185,7 +3648,8 @@ var INTERNAL_TOKEN = Symbol("snapdom.internal");
 var _safariWarmup = false;
 async function snapdom(element, userOptions) {
   if (!element) throw new Error("Element cannot be null or undefined");
-  if (isSafari()) {
+  const context = createContext(userOptions);
+  if (isSafari() && (context.embedFonts === true || hasBackgroundOrMask(element))) {
     for (let i = 0; i < 3; i++) {
       try {
         await safariWarmup(element, userOptions);
@@ -3195,7 +3659,6 @@ async function snapdom(element, userOptions) {
       }
     }
   }
-  const context = createContext(userOptions);
   if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts);
   if (!context.snap) {
     context.snap = {
@@ -3275,6 +3738,20 @@ async function safariWarmup(element, baseOptions) {
     cleanup();
   });
 }
+function hasBackgroundOrMask(el) {
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const node = (
+      /** @type {Element} */
+      walker.currentNode
+    );
+    const cs = getComputedStyle(node);
+    const bg = cs.backgroundImage && cs.backgroundImage !== "none";
+    const mask = cs.maskImage && cs.maskImage !== "none" || cs.webkitMaskImage && cs.webkitMaskImage !== "none";
+    if (bg || mask) return true;
+  }
+  return false;
+}
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {