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

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.12-dev.0
+* v.1.9.12-dev.1
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -626,7 +626,10 @@ function idle(fn, { fast = false } = {}) {
   }
 }
 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
@@ -660,7 +663,7 @@ function setupInvalidationOnce(root = document.documentElement) {
   } catch {
   }
 }
-function snapshotComputedStyleFull(style) {
+function snapshotComputedStyleFull(style, options = {}) {
   const out = {};
   const vis = style.getPropertyValue("visibility");
   for (let i = 0; i < style.length; i++) {
@@ -671,6 +674,24 @@ function snapshotComputedStyleFull(style) {
     }
     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 {
+      }
+    }
+  }
   if (vis === "hidden") out.opacity = "0";
   return out;
 }
@@ -683,11 +704,11 @@ function styleSignature(snap) {
   __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;
 }
@@ -741,7 +762,7 @@ async function inlineAllStyles(source, clone, sessionOrCtx, opts) {
     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) {
@@ -985,7 +1006,7 @@ async function deepClone(node, sessionCache, options) {
     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;`;
@@ -998,7 +1019,7 @@ async function deepClone(node, sessionCache, options) {
     for (const selector of options.exclude) {
       try {
         if (node.matches?.(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;`;
@@ -1015,7 +1036,7 @@ async function deepClone(node, sessionCache, options) {
   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;`;
@@ -1898,7 +1919,182 @@ async function ensureFontsReady(families, warmupRepetitions = 2) {
   }
 }
 
+// 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?.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) => {
+    const map = cloneMap(baseMap);
+    let reset;
+    try {
+      reset = el.style?.counterReset || getComputedStyle(el).counterReset;
+    } catch {
+    }
+    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 = el.style?.counterIncrement || getComputedStyle(el).counterIncrement;
+    } catch {
+    }
+    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 {
+    }
+    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) {
+      const s = nodeCounters.get(node)?.get(name);
+      return s && s.length ? s[s.length - 1] : 0;
+    },
+    getStack(node, name) {
+      const s = nodeCounters.get(node)?.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) => {
+      const parts = String(args).split(",").map((s) => s.trim());
+      if (fn === "counter") {
+        const name = parts[0]?.replace(/^["']|["']$/g, "");
+        const style = (parts[1] || "decimal").toLowerCase();
+        const v = ctx.get(node, name);
+        return formatCounter(v, style);
+      } else {
+        const name = parts[0]?.replace(/^["']|["']$/g, "");
+        const sep = parts[1]?.replace(/^["']|["']$/g, "") ?? "";
+        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 {
+    return "- ";
+  }
+}
+
 // src/modules/pseudo.js
+var counterCtx = null;
 async function inlinePseudoElements(source, clone, sessionCache, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
@@ -1932,7 +2128,11 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
         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;
@@ -2317,8 +2517,8 @@ async function inlineImages(clone, options = {}) {
       if (!img.height) img.height = img.naturalHeight || 100;
       return;
     }
-    const { defaultImageUrl } = options || {};
-    if (defaultImageUrl) {
+    const { fallbackURL } = options || {};
+    if (fallbackURL) {
       try {
         const dsW = parseInt(img.dataset?.snapdomWidth || "", 10) || 0;
         const dsH = parseInt(img.dataset?.snapdomHeight || "", 10) || 0;
@@ -2326,14 +2526,14 @@ async function inlineImages(clone, options = {}) {
         const attrH = parseInt(img.getAttribute("height") || "", 10) || 0;
         const styleW = parseFloat(img.style?.width || "") || 0;
         const styleH = parseFloat(img.style?.height || "") || 0;
-        const width = dsW || styleW || attrW || img.width || void 0;
-        const height = dsH || styleH || attrH || img.height || void 0;
-        const fallbackUrl = typeof defaultImageUrl === "function" ? await defaultImageUrl({ width, height, src, element: img }) : defaultImageUrl;
+        const fbW = dsW || styleW || attrW || img.width || void 0;
+        const fbH = dsH || styleH || attrH || img.height || void 0;
+        const fallbackUrl = typeof fallbackURL === "function" ? await fallbackURL({ width: fbW, height: fbH, src, element: img }) : fallbackURL;
         if (fallbackUrl) {
           const fallbackData = await snapFetch(fallbackUrl, { as: "dataURL", useProxy: options.useProxy });
           img.src = fallbackData.data;
-          if (!img.width && 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;
@@ -2452,6 +2652,63 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
   }
 }
 
+// src/modules/lineClamp.js
+function lineClamp(el) {
+  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 = el.textContent ?? "";
+  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
 async function captureDOM(element, options) {
   if (!element) throw new Error("Element cannot be null or undefined");
@@ -2462,7 +2719,12 @@ async function captureDOM(element, options) {
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS, styleCache } = await prepareClone(element, options));
+  const undoClamp = lineClamp(element);
+  try {
+    ({ clone, classCSS, styleCache } = await prepareClone(element, options));
+  } finally {
+    undoClamp();
+  }
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -2512,28 +2774,28 @@ async function captureDOM(element, options) {
   }
   await new Promise((resolve) => {
     idle(() => {
-      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 = options.scale ?? 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);
@@ -2604,7 +2866,9 @@ async function captureDOM(element, options) {
       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)}`;
@@ -2615,17 +2879,6 @@ async function captureDOM(element, options) {
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
   return dataURL;
 }
-function getNaturalBorderBoxSize(el) {
-  const cs = getComputedStyle(el);
-  const px = (v) => parseFloat(v) || 0;
-  let w = px(cs.width);
-  let h = px(cs.height);
-  if (cs.boxSizing === "content-box") {
-    w += px(cs.paddingLeft) + px(cs.paddingRight) + px(cs.borderLeftWidth) + px(cs.borderRightWidth);
-    h += px(cs.paddingTop) + px(cs.paddingBottom) + px(cs.borderTopWidth) + px(cs.borderBottomWidth);
-  }
-  return { width: w, height: h };
-}
 function matrixFromComputed(el) {
   const tr = getComputedStyle(el).transform;
   if (!tr || tr === "none") return new DOMMatrix();
@@ -2657,24 +2910,33 @@ function bboxFromMatrix(w, h, M2D) {
 }
 function readIndividualTransforms(el) {
   const out = { rotate: "0deg", scale: null, translate: null };
-  const map = el.computedStyleMap?.();
+  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 {
+        return null;
+      }
+    };
+    const rot = safeGet("rotate");
     if (rot) {
       const ang = rot.angle ?? rot;
-      if (ang && "unit" in ang) {
+      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 = sc[0]?.value ?? 1;
       const sy = sc[1]?.value ?? sx;
       out.scale = `${sx} ${sy}`;
     }
-    const tr = map.get("translate");
+    const tr = safeGet("translate");
     if (tr && tr.length) {
       const tx = tr[0]?.value ?? 0;
       const ty = tr[1]?.value ?? 0;
@@ -2759,9 +3021,9 @@ function createContext(options = {}) {
     scale: options.scale ?? 1,
     // DOM filters
     exclude: options.exclude ?? [],
-    excludeMode: options.excludeMode ?? "visuallyHide",
+    excludeMode: options.excludeMode ?? "hide",
     filter: options.filter ?? null,
-    filterMode: options.filterMode ?? "visuallyHide",
+    filterMode: options.filterMode ?? "hide",
     placeholders: options.placeholders !== false,
     // default true
     // Fuentes
@@ -2769,7 +3031,7 @@ function createContext(options = {}) {
     iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
     localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
     excludeFonts: options.excludeFonts ?? void 0,
-    defaultImageUrl: options.defaultImageUrl ?? void 0,
+    fallbackURL: options.fallbackURL ?? void 0,
     /** Cache policy (disabled|full|auto|soft). Default: "soft" */
     /** @type {CachePolicy} */
     cache: cachePolicy,
@@ -2855,6 +3117,7 @@ async function rasterize(url, options) {
 
 // src/exporters/download.js
 async function download(url, options) {
+  options.dpr = 1;
   if (options.format === "svg") {
     const blob = await toBlob(url, { ...options, type: "svg" });
     const objectURL = URL.createObjectURL(blob);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.12-dev.0",
+  "version": "1.9.12-dev.1",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",

package/types/snapdom.d.ts

@@ -13,8 +13,8 @@ export type BlobType = "svg" | RasterMime;
 export type IconFontMatcher = string | RegExp;
 export type CachePolicy = "disabled" | "full" | "auto" | "soft";
 
-export type ExcludeMode = 'visuallyHide' | 'remove';
-export type FilterMode = 'visuallyHide' | 'remove';
+export type ExcludeMode = 'hide' | 'remove';
+export type FilterMode = 'hide' | 'remove';
 
 export interface LocalFontDescriptor {
   /** CSS font-family name (e.g. "Inter"). */
@@ -92,7 +92,7 @@ export interface CaptureOptions {
 
   /**
    * Mode applied to excluded nodes of the cloned tree.
-   * Default: "visuallyHide"
+   * Default: "hide"
    */
   excludeMode?: ExcludeMode;
 
@@ -104,7 +104,7 @@ export interface CaptureOptions {
 
   /**
    * Mode applied to filtered nodes of the cloned tree.
-   * Default: "visuallyHide"
+   * Default: "hide"
    */
   filterMode?: FilterMode;
 
@@ -141,7 +141,7 @@ export interface CaptureOptions {
    * - String: use as-is.
    * - Callback: receives measured width/height and original src, returns a URL string.
    */
-  defaultImageUrl?:
+  fallbackURL?:
     | string
     | ((
         args: {