@zumer/snapdom 1.9.12-dev.1 → 1.9.12-dev.3

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.12-dev.1
+* v.1.9.12-dev.3
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -628,17 +628,6 @@
     }
     return map.get(pseudo);
   }
-  function parseContent(content) {
-    let clean = content.replace(/^['"]|['"]$/g, "");
-    if (clean.startsWith("\\")) {
-      try {
-        return String.fromCharCode(parseInt(clean.replace("\\", ""), 16));
-      } catch (e) {
-        return clean;
-      }
-    }
-    return clean;
-  }
   function snapshotComputedStyle(style) {
     const snap = {};
     for (let prop of style) {
@@ -757,6 +746,7 @@
     if (rec && rec.epoch === __epoch) return rec.snapshot;
     const style = preStyle || getComputedStyle(el);
     const snap = snapshotComputedStyleFull(style, options);
+    stripHeightForWrappers(el, style, snap);
     snapshotCache.set(el, { epoch: __epoch, snapshot: snap });
     return snap;
   }
@@ -823,6 +813,49 @@
       session.styleMap.set(clone, key);
     });
   }
+  function isReplaced(el) {
+    return el instanceof HTMLImageElement || el instanceof HTMLCanvasElement || el instanceof HTMLVideoElement || el instanceof HTMLIFrameElement || el instanceof SVGElement || el instanceof HTMLObjectElement || el instanceof HTMLEmbedElement;
+  }
+  function hasBox(cs) {
+    if (cs.backgroundImage && cs.backgroundImage !== "none") return true;
+    if (cs.backgroundColor && cs.backgroundColor !== "rgba(0, 0, 0, 0)" && cs.backgroundColor !== "transparent") return true;
+    if ((parseFloat(cs.borderTopWidth) || 0) > 0) return true;
+    if ((parseFloat(cs.borderBottomWidth) || 0) > 0) return true;
+    if ((parseFloat(cs.paddingTop) || 0) > 0) return true;
+    if ((parseFloat(cs.paddingBottom) || 0) > 0) return true;
+    const ob = cs.overflowBlock || cs.overflowY || "visible";
+    return ob !== "visible";
+  }
+  function isFlexOrGridItem(el) {
+    const p = el.parentElement;
+    if (!p) return false;
+    const pd = getComputedStyle(p).display || "";
+    return pd.includes("flex") || pd.includes("grid");
+  }
+  function hasFlowFast(el, cs) {
+    if (el.textContent && /\S/.test(el.textContent)) return true;
+    const f = el.firstElementChild, l = el.lastElementChild;
+    if (f && f.tagName === "BR" || l && l.tagName === "BR") return true;
+    const sh = el.scrollHeight;
+    if (sh === 0) return false;
+    const pt = parseFloat(cs.paddingTop) || 0;
+    const pb = parseFloat(cs.paddingBottom) || 0;
+    return sh > pt + pb;
+  }
+  function stripHeightForWrappers(el, cs, snap) {
+    if (el instanceof HTMLElement && el.style && el.style.height) return;
+    const disp = cs.display || "";
+    if (disp.includes("flex") || disp.includes("grid")) return;
+    if (isReplaced(el)) return;
+    const pos = cs.position;
+    if (pos === "absolute" || pos === "fixed" || pos === "sticky") return;
+    if (cs.transform !== "none") return;
+    if (hasBox(cs)) return;
+    if (isFlexOrGridItem(el)) return;
+    if (!hasFlowFast(el, cs)) return;
+    delete snap.height;
+    delete snap["block-size"];
+  }
 
   // src/core/clone.js
   function idleCallback(childList, callback, fast) {
@@ -2128,11 +2161,21 @@
     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) {
         var _a;
         const s = (_a = nodeCounters.get(node)) == null ? void 0 : _a.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) {
         var _a;
         const s = (_a = nodeCounters.get(node)) == null ? void 0 : _a.get(name);
@@ -2170,10 +2213,111 @@
 
   // 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 == null ? void 0 : pseudoStyle.counterReset);
+    const incs = parseListDecl(pseudoStyle == null ? void 0 : 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 (e) {
+    }
+    const raw = ps == null ? void 0 : 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 || [] };
+  }
   function inlinePseudoElements(source, clone, sessionCache, options) {
     return __async(this, null, function* () {
       var _a;
       if (!(source instanceof Element) || !(clone instanceof Element)) return;
+      if (!counterCtx) {
+        try {
+          counterCtx = buildCounterContext(source.ownerDocument || document);
+        } catch (e) {
+        }
+      }
       for (const pseudo of ["::before", "::after", "::first-letter"]) {
         try {
           const style = getStyle(source, pseudo);
@@ -2207,12 +2351,8 @@
             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;
@@ -2226,28 +2366,41 @@
           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 hasBox = display !== "inline" && (width > 0 || height > 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 || hasBox || hasBorder || hasTransform;
-          if (!shouldRender) continue;
+          const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox2 || 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";
           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 } = yield iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
+          if (isIconFont22 && cleanContent && cleanContent.length === 1) {
+            const { dataUrl, width: w, height: h } = yield 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 == null ? void 0 : rawUrl.trim()) {
               try {
@@ -2274,7 +2427,18 @@
           }
           if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
           const hasContent2 = pseudoEl.childNodes.length > 0 || ((_a = pseudoEl.textContent) == null ? void 0 : _a.trim()) !== "";
-          const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
+          const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox2 || 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);
@@ -2424,12 +2588,13 @@
         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 || "";
@@ -2842,7 +3007,7 @@
           idle(() => __async(null, null, function* () {
             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)
               );
@@ -2874,102 +3039,188 @@
       }
       yield new Promise((resolve) => {
         idle(() => {
-          var _a, _b, _c, _d, _e;
-          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 = (_a = options.scale) != null ? _a : 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) {
+            var _a;
+            const raw = `${cs.filter || ""} ${cs.webkitFilter || ""}`.trim();
+            if (!raw || raw === "none") {
+              return { bleed: { top: 0, right: 0, bottom: 0, left: 0 }, has: false };
+            }
+            const tokens = raw.match(/drop-shadow\((?:[^()]|\([^()]*\))*\)/gi) || [];
+            let t = 0, r = 0, b = 0, l = 0;
+            let found = false;
+            for (const tok of tokens) {
+              found = true;
+              const nums = ((_a = tok.match(/-?\d+(?:\.\d+)?px/gi)) == null ? void 0 : _a.map((v) => parseFloat(v))) || [];
+              const [ox = 0, oy = 0, blur = 0] = nums;
+              const extX = Math.abs(ox) + blur;
+              const extY = Math.abs(oy) + blur;
+              r = Math.max(r, extX + Math.max(ox, 0));
+              l = Math.max(l, extX + Math.max(-ox, 0));
+              b = Math.max(b, extY + Math.max(oy, 0));
+              t = Math.max(t, extY + Math.max(-oy, 0));
             }
+            return {
+              bleed: { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b), left: Math.ceil(l) },
+              has: found
+            };
           }
-          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 parseBoxShadow(cs) {
+            var _a;
+            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 = ((_a = part.match(/-?\d+(\.\d+)?px/g)) == null ? void 0 : _a.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 };
+          }
+          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 = (_c = (_b = TOTAL.e) != null ? _b : TOTAL.m41) != null ? _c : 0;
-            const f = (_e = (_d = TOTAL.f) != null ? _d : TOTAL.m42) != null ? _e : 0;
-            cancelTranslateX = -e;
-            cancelTranslateY = -f;
-            const M2D = TOTAL.is2D ? matrix2DNoTranslate(TOTAL) : matrix2DNoTranslate(new DOMMatrix(TOTAL.toString()));
-            const bb = bboxFromMatrix(w, h, M2D);
-            outW = Math.max(1, Math.ceil(bb.width));
-            outH = Math.max(1, Math.ceil(bb.height));
-            tx = -bb.minX;
-            ty = -bb.minY;
+            const { 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)}`;
@@ -2990,28 +3241,8 @@
       return new WebKitCSSMatrix(tr);
     }
   }
-  function matrix2DNoTranslate(M) {
-    return new DOMMatrix([M.a, M.b, M.c, M.d, 0, 0]);
-  }
-  function bboxFromMatrix(w, h, M2D) {
-    const pts = [
-      { x: 0, y: 0 },
-      { x: w, y: 0 },
-      { x: 0, y: h },
-      { x: w, y: h }
-    ];
-    const t = pts.map((p) => ({
-      x: M2D.a * p.x + M2D.c * p.y,
-      y: M2D.b * p.x + M2D.d * p.y
-    }));
-    const minX = Math.min(...t.map((p) => p.x));
-    const maxX = Math.max(...t.map((p) => p.x));
-    const minY = Math.min(...t.map((p) => p.y));
-    const maxY = Math.max(...t.map((p) => p.y));
-    return { minX, minY, width: maxX - minX, height: maxY - minY };
-  }
   function readIndividualTransforms(el) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const out = { rotate: "0deg", scale: null, translate: null };
     const map = typeof el.computedStyleMap === "function" ? el.computedStyleMap() : null;
     if (map) {
@@ -3026,26 +3257,37 @@
       };
       const rot = safeGet("rotate");
       if (rot) {
-        const ang = (_a = rot.angle) != null ? _a : 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 = (_c = (_b = sc[0]) == null ? void 0 : _b.value) != null ? _c : 1;
-        const sy = (_e = (_d = sc[1]) == null ? void 0 : _d.value) != null ? _e : sx;
+      if (sc) {
+        const sx = "x" in sc && ((_a = sc.x) == null ? void 0 : _a.value) != null ? sc.x.value : Array.isArray(sc) ? (_b = sc[0]) == null ? void 0 : _b.value : Number(sc) || 1;
+        const sy = "y" in sc && ((_c = sc.y) == null ? void 0 : _c.value) != null ? sc.y.value : Array.isArray(sc) ? (_d = sc[1]) == null ? void 0 : _d.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 = (_g = (_f = tr[0]) == null ? void 0 : _f.value) != null ? _g : 0;
-        const ty = (_i = (_h = tr[1]) == null ? void 0 : _h.value) != null ? _i : 0;
-        const ux = (_k = (_j = tr[0]) == null ? void 0 : _j.unit) != null ? _k : "px";
-        const uy = (_m = (_l = tr[1]) == null ? void 0 : _l.unit) != null ? _m : "px";
+      if (tr) {
+        const tx = "x" in tr && "value" in tr.x ? tr.x.value : Array.isArray(tr) ? (_e = tr[0]) == null ? void 0 : _e.value : 0;
+        const ty = "y" in tr && "value" in tr.y ? tr.y.value : Array.isArray(tr) ? (_f = tr[1]) == null ? void 0 : _f.value : 0;
+        const ux = "x" in tr && ((_g = tr.x) == null ? void 0 : _g.unit) ? tr.x.unit : "px";
+        const uy = "y" in tr && ((_h = tr.y) == null ? void 0 : _h.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;
     }
@@ -3056,17 +3298,33 @@
     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() {
@@ -3155,41 +3413,201 @@
     };
   }
 
-  // src/exporters/toImg.js
-  function toImg(url, options) {
+  // 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 (e) {
+      return url;
+    }
+  }
+  function toCanvas(url, options) {
     return __async(this, null, function* () {
+      let { width: optW, height: optH, scale = 1, dpr = 1, meta = {} } = options;
+      url = maybeConvertBoxShadowForSafari(url);
       const img = new Image();
+      img.loading = "eager";
+      img.decoding = "sync";
+      img.crossOrigin = "anonymous";
       img.src = url;
       yield img.decode();
-      if (options.scale !== 1) {
-        img.style.width = `${img.naturalWidth * options.scale}px`;
-        img.style.height = `${img.naturalHeight * options.scale}px`;
+      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(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, outW, outH);
+      return canvas;
+    });
+  }
+
+  // src/modules/rasterize.js
+  function rasterize(url, options) {
+    return __async(this, null, function* () {
+      const canvas = yield 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);
+      yield img.decode();
+      img.style.width = `${finalCanvas.width / options.dpr}px`;
+      img.style.height = `${finalCanvas.height / options.dpr}px`;
       return img;
     });
   }
 
-  // src/exporters/toCanvas.js
-  function toCanvas(url, options) {
+  // src/exporters/toImg.js
+  function toImg(url, options) {
     return __async(this, null, function* () {
-      const { scale, dpr } = 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 = yield rasterize(url, __spreadProps(__spreadValues({}, options), { format: "png", quality: 1, meta }));
+        return pngUrl;
+      }
       const img = new Image();
-      img.crossOrigin = "anonymous";
-      img.loading = "eager";
       img.decoding = "sync";
+      img.loading = "eager";
       img.src = url;
       yield img.decode();
-      const width = img.naturalWidth * scale;
-      const height = img.naturalHeight * scale;
-      const canvas = document.createElement("canvas");
-      canvas.width = Math.ceil(width * dpr);
-      canvas.height = Math.ceil(height * dpr);
-      canvas.style.width = `${width}px`;
-      canvas.style.height = `${height}px`;
-      const ctx = canvas.getContext("2d");
-      if (dpr !== 1) ctx.scale(dpr, dpr);
-      ctx.drawImage(img, 0, 0, width, height);
-      return canvas;
+      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;
     });
   }
 
@@ -3213,20 +3631,6 @@
     });
   }
 
-  // src/modules/rasterize.js
-  function rasterize(url, options) {
-    return __async(this, null, function* () {
-      const canvas = yield 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);
-      yield img.decode();
-      img.style.width = `${finalCanvas.width / options.dpr}px`;
-      img.style.height = `${finalCanvas.height / options.dpr}px`;
-      return img;
-    });
-  }
-
   // src/exporters/download.js
   function download(url, options) {
     return __async(this, null, function* () {
@@ -3256,7 +3660,8 @@
   function snapdom(element, userOptions) {
     return __async(this, null, function* () {
       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 {
             yield safariWarmup(element, userOptions);
@@ -3266,7 +3671,6 @@
           }
         }
       }
-      const context = createContext(userOptions);
       if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts);
       if (!context.snap) {
         context.snap = {
@@ -3348,6 +3752,20 @@
       });
     });
   }
+  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
   function preCache() {