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

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.12-dev.0
+* v.1.9.12-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -673,7 +673,10 @@
     }
   }
   function isSafari() {
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
+    const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
+    const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
+    return isSafariUA || isWeChatUA;
   }
 
   // src/modules/styles.js
@@ -708,7 +711,7 @@
     } catch (e) {
     }
   }
-  function snapshotComputedStyleFull(style) {
+  function snapshotComputedStyleFull(style, options = {}) {
     const out = {};
     const vis = style.getPropertyValue("visibility");
     for (let i = 0; i < style.length; i++) {
@@ -719,6 +722,24 @@
       }
       out[prop] = val;
     }
+    if (options.embedFonts) {
+      const EXTRA_FONT_PROPS = [
+        "font-feature-settings",
+        "font-variation-settings",
+        "font-kerning",
+        "font-variant",
+        "font-variant-ligatures",
+        "font-optical-sizing"
+      ];
+      for (const prop of EXTRA_FONT_PROPS) {
+        if (out[prop]) continue;
+        try {
+          const v = style.getPropertyValue(prop);
+          if (v) out[prop] = v;
+        } catch (e) {
+        }
+      }
+    }
     if (vis === "hidden") out.opacity = "0";
     return out;
   }
@@ -731,11 +752,11 @@
     __snapshotSig.set(snap, sig);
     return sig;
   }
-  function getSnapshot(el, preStyle = null) {
+  function getSnapshot(el, preStyle = null, options = {}) {
     const rec = snapshotCache.get(el);
     if (rec && rec.epoch === __epoch) return rec.snapshot;
     const style = preStyle || getComputedStyle(el);
-    const snap = snapshotComputedStyleFull(style);
+    const snap = snapshotComputedStyleFull(style, options);
     snapshotCache.set(el, { epoch: __epoch, snapshot: snap });
     return snap;
   }
@@ -791,7 +812,7 @@
         session.styleCache.set(source, getComputedStyle(source));
       }
       const pre = session.styleCache.get(source);
-      const snap = getSnapshot(source, pre);
+      const snap = getSnapshot(source, pre, ctx.options);
       const sig = styleSignature(snap);
       let key = persist.snapshotKeyCache.get(sig);
       if (!key) {
@@ -1043,7 +1064,7 @@
         return node.cloneNode(true);
       }
       if (node.getAttribute("data-capture") === "exclude") {
-        if (options.excludeMode === "visuallyHide") {
+        if (options.excludeMode === "hide") {
           const spacer = document.createElement("div");
           const rect = node.getBoundingClientRect();
           spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
@@ -1056,7 +1077,7 @@
         for (const selector of options.exclude) {
           try {
             if ((_a = node.matches) == null ? void 0 : _a.call(node, selector)) {
-              if (options.excludeMode === "visuallyHide") {
+              if (options.excludeMode === "hide") {
                 const spacer = document.createElement("div");
                 const rect = node.getBoundingClientRect();
                 spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
@@ -1073,7 +1094,7 @@
       if (typeof options.filter === "function") {
         try {
           if (!options.filter(node)) {
-            if (options.filterMode === "visuallyHide") {
+            if (options.filterMode === "hide") {
               const spacer = document.createElement("div");
               const rect = node.getBoundingClientRect();
               spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
@@ -1969,7 +1990,186 @@
     });
   }
 
+  // src/modules/counter.js
+  function hasCounters(input) {
+    return /\bcounter\s*\(|\bcounters\s*\(/.test(input || "");
+  }
+  function unquoteDoubleStrings(s) {
+    return (s || "").replace(/"([^"]*)"/g, "$1");
+  }
+  function alpha(n, upper = false) {
+    let s = "", x = Math.max(1, n);
+    while (x > 0) {
+      x--;
+      s = String.fromCharCode(97 + x % 26) + s;
+      x = Math.floor(x / 26);
+    }
+    return upper ? s.toUpperCase() : s;
+  }
+  function roman(n, upper = true) {
+    const map = [[1e3, "M"], [900, "CM"], [500, "D"], [400, "CD"], [100, "C"], [90, "XC"], [50, "L"], [40, "XL"], [10, "X"], [9, "IX"], [5, "V"], [4, "IV"], [1, "I"]];
+    let num = Math.max(1, Math.min(3999, n)), out = "";
+    for (const [v, sym] of map) while (num >= v) {
+      out += sym;
+      num -= v;
+    }
+    return upper ? out : out.toLowerCase();
+  }
+  function formatCounter(value, style) {
+    switch ((style || "decimal").toLowerCase()) {
+      case "decimal":
+        return String(Math.max(0, value));
+      case "decimal-leading-zero":
+        return (value < 10 ? "0" : "") + String(Math.max(0, value));
+      case "lower-alpha":
+        return alpha(value, false);
+      case "upper-alpha":
+        return alpha(value, true);
+      case "lower-roman":
+        return roman(value, false);
+      case "upper-roman":
+        return roman(value, true);
+      default:
+        return String(Math.max(0, value));
+    }
+  }
+  function buildCounterContext(root) {
+    const nodeCounters = /* @__PURE__ */ new WeakMap();
+    const rootEl = root instanceof Document ? root.documentElement : root;
+    const isLi = (el) => el && el.tagName === "LI";
+    const countPrevLi = (li) => {
+      let c = 0, p = li == null ? void 0 : li.parentElement;
+      if (!p) return 0;
+      for (const sib of p.children) {
+        if (sib === li) break;
+        if (sib.tagName === "LI") c++;
+      }
+      return c;
+    };
+    const cloneMap = (m) => {
+      const out = /* @__PURE__ */ new Map();
+      for (const [k, arr] of m) out.set(k, arr.slice());
+      return out;
+    };
+    const applyTo = (baseMap, parentMap, el) => {
+      var _a, _b;
+      const map = cloneMap(baseMap);
+      let reset;
+      try {
+        reset = ((_a = el.style) == null ? void 0 : _a.counterReset) || getComputedStyle(el).counterReset;
+      } catch (e) {
+      }
+      if (reset && reset !== "none") {
+        for (const part of reset.split(",")) {
+          const toks = part.trim().split(/\s+/);
+          const name = toks[0];
+          const val = Number.isFinite(Number(toks[1])) ? Number(toks[1]) : 0;
+          if (!name) continue;
+          const parentStack = parentMap.get(name);
+          if (parentStack && parentStack.length) {
+            const s = parentStack.slice();
+            s.push(val);
+            map.set(name, s);
+          } else {
+            map.set(name, [val]);
+          }
+        }
+      }
+      let inc;
+      try {
+        inc = ((_b = el.style) == null ? void 0 : _b.counterIncrement) || getComputedStyle(el).counterIncrement;
+      } catch (e) {
+      }
+      if (inc && inc !== "none") {
+        for (const part of inc.split(",")) {
+          const toks = part.trim().split(/\s+/);
+          const name = toks[0];
+          const by = Number.isFinite(Number(toks[1])) ? Number(toks[1]) : 1;
+          if (!name) continue;
+          const stack = map.get(name) || [];
+          if (stack.length === 0) stack.push(0);
+          stack[stack.length - 1] += by;
+          map.set(name, stack);
+        }
+      }
+      try {
+        const cs = getComputedStyle(el);
+        if (cs.display === "list-item" && isLi(el)) {
+          const p = el.parentElement;
+          let idx = 1;
+          if (p && p.tagName === "OL") {
+            const startAttr = p.getAttribute("start");
+            const start = Number.isFinite(Number(startAttr)) ? Number(startAttr) : 1;
+            const prev = countPrevLi(el);
+            const ownAttr = el.getAttribute("value");
+            idx = Number.isFinite(Number(ownAttr)) ? Number(ownAttr) : start + prev;
+          } else {
+            idx = 1 + countPrevLi(el);
+          }
+          const s = map.get("list-item") || [];
+          if (s.length === 0) s.push(0);
+          s[s.length - 1] = idx;
+          map.set("list-item", s);
+        }
+      } catch (e) {
+      }
+      return map;
+    };
+    const build = (el, parentMap, carryMap) => {
+      const curr = applyTo(carryMap, parentMap, el);
+      nodeCounters.set(el, curr);
+      let nextCarry = curr;
+      for (const child of el.children) {
+        const childCarry = build(child, curr, nextCarry);
+        nextCarry = childCarry;
+      }
+      return curr;
+    };
+    const empty = /* @__PURE__ */ new Map();
+    build(rootEl, empty, empty);
+    return {
+      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;
+      },
+      getStack(node, name) {
+        var _a;
+        const s = (_a = nodeCounters.get(node)) == null ? void 0 : _a.get(name);
+        return s ? s.slice() : [];
+      }
+    };
+  }
+  function resolveCountersInContent(raw, node, ctx) {
+    if (!raw || raw === "none") return raw;
+    try {
+      const RX = /\b(counter|counters)\s*\(([^)]+)\)/g;
+      let out = raw.replace(RX, (_, fn, args) => {
+        var _a, _b, _c, _d;
+        const parts = String(args).split(",").map((s) => s.trim());
+        if (fn === "counter") {
+          const name = (_a = parts[0]) == null ? void 0 : _a.replace(/^["']|["']$/g, "");
+          const style = (parts[1] || "decimal").toLowerCase();
+          const v = ctx.get(node, name);
+          return formatCounter(v, style);
+        } else {
+          const name = (_b = parts[0]) == null ? void 0 : _b.replace(/^["']|["']$/g, "");
+          const sep = (_d = (_c = parts[1]) == null ? void 0 : _c.replace(/^["']|["']$/g, "")) != null ? _d : "";
+          const style = (parts[2] || "decimal").toLowerCase();
+          const stack = ctx.getStack(node, name);
+          if (!stack.length) return "";
+          const pieces = stack.map((v) => formatCounter(v, style));
+          return pieces.join(sep);
+        }
+      });
+      return unquoteDoubleStrings(out);
+    } catch (e) {
+      return "- ";
+    }
+  }
+
   // src/modules/pseudo.js
+  var counterCtx = null;
   function inlinePseudoElements(source, clone, sessionCache, options) {
     return __async(this, null, function* () {
       var _a;
@@ -2008,7 +2208,11 @@
             continue;
           }
           const content = style.content;
-          const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+          let cleanContent = parseContent(content);
+          if (hasCounters(content)) {
+            counterCtx = buildCounterContext(source.ownerDocument || document);
+            cleanContent = resolveCountersInContent(cleanContent, source, counterCtx);
+          }
           const bg = style.backgroundImage;
           const bgColor = style.backgroundColor;
           const fontFamily = style.fontFamily;
@@ -2408,8 +2612,8 @@
           if (!img.height) img.height = img.naturalHeight || 100;
           return;
         }
-        const { defaultImageUrl } = options || {};
-        if (defaultImageUrl) {
+        const { fallbackURL } = options || {};
+        if (fallbackURL) {
           try {
             const dsW = parseInt(((_a = img.dataset) == null ? void 0 : _a.snapdomWidth) || "", 10) || 0;
             const dsH = parseInt(((_b = img.dataset) == null ? void 0 : _b.snapdomHeight) || "", 10) || 0;
@@ -2417,14 +2621,14 @@
             const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
             const styleW = parseFloat(((_c = img.style) == null ? void 0 : _c.width) || "") || 0;
             const styleH = parseFloat(((_d = img.style) == null ? void 0 : _d.height) || "") || 0;
-            const width = dsW || styleW || attrW || img.width || void 0;
-            const height = dsH || styleH || attrH || img.height || void 0;
-            const fallbackUrl = typeof defaultImageUrl === "function" ? yield defaultImageUrl({ width, height, src, element: img }) : defaultImageUrl;
+            const fbW = dsW || styleW || attrW || img.width || void 0;
+            const fbH = dsH || styleH || attrH || img.height || void 0;
+            const fallbackUrl = typeof fallbackURL === "function" ? yield fallbackURL({ width: fbW, height: fbH, src, element: img }) : fallbackURL;
             if (fallbackUrl) {
               const fallbackData = yield snapFetch(fallbackUrl, { as: "dataURL", useProxy: options.useProxy });
               img.src = fallbackData.data;
-              if (!img.width && width) img.width = width;
-              if (!img.height && height) img.height = height;
+              if (!img.width && 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;
               return;
@@ -2546,6 +2750,64 @@
     });
   }
 
+  // src/modules/lineClamp.js
+  function lineClamp(el) {
+    var _a;
+    if (!el) return () => {
+    };
+    const lines = getClamp(el);
+    if (lines <= 0) return () => {
+    };
+    if (!isPlainTextContainer(el)) return () => {
+    };
+    const cs = getComputedStyle(el);
+    const targetH = Math.round(usedLineHeightPx(cs) * lines + vpad(cs));
+    const original = (_a = el.textContent) != null ? _a : "";
+    const prevText = original;
+    if (el.scrollHeight <= targetH + 0.5) {
+      return () => {
+      };
+    }
+    let lo = 0, hi = original.length, best = -1;
+    while (lo <= hi) {
+      const mid = lo + hi >> 1;
+      el.textContent = original.slice(0, mid) + "\u2026";
+      if (el.scrollHeight <= targetH + 0.5) {
+        best = mid;
+        lo = mid + 1;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    el.textContent = (best >= 0 ? original.slice(0, best) : "") + "\u2026";
+    return () => {
+      el.textContent = prevText;
+    };
+  }
+  function getClamp(el) {
+    const cs = getComputedStyle(el);
+    let v = cs.getPropertyValue("-webkit-line-clamp") || cs.getPropertyValue("line-clamp");
+    v = (v || "").trim();
+    const n = parseInt(v, 10);
+    return Number.isFinite(n) && n > 0 ? n : 0;
+  }
+  function usedLineHeightPx(cs) {
+    const lh = (cs.lineHeight || "").trim();
+    const fs = parseFloat(cs.fontSize) || 16;
+    if (!lh || lh === "normal") return Math.round(fs * 1.2);
+    if (lh.endsWith("px")) return parseFloat(lh);
+    if (/^\d+(\.\d+)?$/.test(lh)) return Math.round(parseFloat(lh) * fs);
+    if (lh.endsWith("%")) return Math.round(parseFloat(lh) / 100 * fs);
+    return Math.round(fs * 1.2);
+  }
+  function vpad(cs) {
+    return (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+  }
+  function isPlainTextContainer(el) {
+    if (el.childElementCount > 0) return false;
+    return Array.from(el.childNodes).some((n) => n.nodeType === Node.TEXT_NODE);
+  }
+
   // src/core/capture.js
   function captureDOM(element, options) {
     return __async(this, null, function* () {
@@ -2557,7 +2819,12 @@
       let baseCSS = "";
       let dataURL;
       let svgString;
-      ({ clone, classCSS, styleCache } = yield prepareClone(element, options));
+      const undoClamp = lineClamp(element);
+      try {
+        ({ clone, classCSS, styleCache } = yield prepareClone(element, options));
+      } finally {
+        undoClamp();
+      }
       yield new Promise((resolve) => {
         idle(() => __async(null, null, function* () {
           yield inlineImages(clone, options);
@@ -2608,28 +2875,28 @@
       yield new Promise((resolve) => {
         idle(() => {
           var _a, _b, _c, _d, _e;
-          const rect = getNaturalBorderBoxSize(element);
-          let w = rect.width;
-          let h = rect.height;
+          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 = rect.width / rect.height;
+            const aspect = h > 0 ? w / h : 1;
             if (hasW && hasH) {
-              w = options.width;
-              h = options.height;
+              w = Number(options.width);
+              h = Number(options.height);
             } else if (hasW) {
-              w = options.width;
-              h = w / aspect;
+              w = Number(options.width);
+              h = w / (aspect || 1);
             } else if (hasH) {
-              h = options.height;
-              w = h * aspect;
+              h = Number(options.height);
+              w = h * (aspect || 1);
             }
           }
-          w = Math.max(1, Math.ceil(w));
-          h = Math.max(1, Math.ceil(h));
+          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);
@@ -2700,7 +2967,9 @@
           fo.appendChild(container);
           const serializer = new XMLSerializer();
           const foString = serializer.serializeToString(fo);
-          const svgHeader = `<svg xmlns="${svgNS}" width="${outW}" height="${outH}" viewBox="0 0 ${outW} ${outH}">`;
+          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 svgFooter = "</svg>";
           svgString = svgHeader + foString + svgFooter;
           dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
@@ -2712,17 +2981,6 @@
       return dataURL;
     });
   }
-  function getNaturalBorderBoxSize(el) {
-    const cs = getComputedStyle(el);
-    const px = (v) => parseFloat(v) || 0;
-    let w = px(cs.width);
-    let h = px(cs.height);
-    if (cs.boxSizing === "content-box") {
-      w += px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
-      h += px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
-    }
-    return { width: w, height: h };
-  }
   function matrixFromComputed(el) {
     const tr = getComputedStyle(el).transform;
     if (!tr || tr === "none") return new DOMMatrix();
@@ -2753,31 +3011,40 @@
     return { minX, minY, width: maxX - minX, height: maxY - minY };
   }
   function readIndividualTransforms(el) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
     const out = { rotate: "0deg", scale: null, translate: null };
-    const map = (_a = el.computedStyleMap) == null ? void 0 : _a.call(el);
+    const map = typeof el.computedStyleMap === "function" ? el.computedStyleMap() : null;
     if (map) {
-      const rot = map.get("rotate");
+      const safeGet = (prop) => {
+        try {
+          if (typeof map.has === "function" && !map.has(prop)) return null;
+          if (typeof map.get !== "function") return null;
+          return map.get(prop);
+        } catch (e) {
+          return null;
+        }
+      };
+      const rot = safeGet("rotate");
       if (rot) {
-        const ang = (_b = rot.angle) != null ? _b : rot;
-        if (ang && "unit" in ang) {
+        const ang = (_a = rot.angle) != null ? _a : rot;
+        if (ang && typeof ang === "object" && "unit" in ang) {
           out.rotate = ang.unit === "rad" ? ang.value * 180 / Math.PI + "deg" : ang.value + ang.unit;
         } else {
           out.rotate = String(rot);
         }
       }
-      const sc = map.get("scale");
+      const sc = safeGet("scale");
       if (sc && sc.length) {
-        const sx = (_d = (_c = sc[0]) == null ? void 0 : _c.value) != null ? _d : 1;
-        const sy = (_f = (_e = sc[1]) == null ? void 0 : _e.value) != null ? _f : sx;
+        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;
         out.scale = `${sx} ${sy}`;
       }
-      const tr = map.get("translate");
+      const tr = safeGet("translate");
       if (tr && tr.length) {
-        const tx = (_h = (_g = tr[0]) == null ? void 0 : _g.value) != null ? _h : 0;
-        const ty = (_j = (_i = tr[1]) == null ? void 0 : _i.value) != null ? _j : 0;
-        const ux = (_l = (_k = tr[0]) == null ? void 0 : _k.unit) != null ? _l : "px";
-        const uy = (_n = (_m = tr[1]) == null ? void 0 : _m.unit) != null ? _n : "px";
+        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";
         out.translate = `${tx}${ux} ${ty}${uy}`;
       }
       return out;
@@ -2858,9 +3125,9 @@
       scale: (_d = options.scale) != null ? _d : 1,
       // DOM filters
       exclude: (_e = options.exclude) != null ? _e : [],
-      excludeMode: (_f = options.excludeMode) != null ? _f : "visuallyHide",
+      excludeMode: (_f = options.excludeMode) != null ? _f : "hide",
       filter: (_g = options.filter) != null ? _g : null,
-      filterMode: (_h = options.filterMode) != null ? _h : "visuallyHide",
+      filterMode: (_h = options.filterMode) != null ? _h : "hide",
       placeholders: options.placeholders !== false,
       // default true
       // Fuentes
@@ -2868,7 +3135,7 @@
       iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
       localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
       excludeFonts: (_j = options.excludeFonts) != null ? _j : void 0,
-      defaultImageUrl: (_k = options.defaultImageUrl) != null ? _k : void 0,
+      fallbackURL: (_k = options.fallbackURL) != null ? _k : void 0,
       /** Cache policy (disabled|full|auto|soft). Default: "soft" */
       /** @type {CachePolicy} */
       cache: cachePolicy,
@@ -2963,6 +3230,7 @@
   // src/exporters/download.js
   function download(url, options) {
     return __async(this, null, function* () {
+      options.dpr = 1;
       if (options.format === "svg") {
         const blob = yield toBlob(url, __spreadProps(__spreadValues({}, options), { type: "svg" }));
         const objectURL = URL.createObjectURL(blob);