@zumer/snapdom 0.9.1 → 0.9.7

package/dist/snapdom.js

@@ -1,34 +1,144 @@
 
 /*
 * snapdom
-* v.0.9.1
+* v.0.9.7
 * Author Juan Martin Muda
 * License MIT
 **/
 (() => {
+  // src/core/cache.js
+  var imageCache = /* @__PURE__ */ new Map();
+  var bgCache = /* @__PURE__ */ new Map();
+  var resourceCache = /* @__PURE__ */ new Map();
+  var defaultStylesCache = /* @__PURE__ */ new Map();
+  var baseCSSCache = /* @__PURE__ */ new Map();
+  var computedStyleCache = /* @__PURE__ */ new WeakMap();
+
   // src/utils/cssTools.js
-  function getDefaultStyles() {
-    const defaultEl = document.createElement("div");
-    document.body.appendChild(defaultEl);
-    const styles = window.getComputedStyle(defaultEl);
+  var commonTags = [
+    "div",
+    "span",
+    "p",
+    "a",
+    "img",
+    "ul",
+    "li",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "label",
+    "section",
+    "article",
+    "header",
+    "footer",
+    "nav",
+    "main",
+    "aside",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "svg",
+    "path",
+    "circle",
+    "rect",
+    "line",
+    "g",
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "td",
+    "th"
+  ];
+  function precacheCommonTags() {
+    for (let tag of commonTags) {
+      getDefaultStyleForTag(tag);
+    }
+  }
+  function getDefaultStyleForTag(tagName) {
+    if (defaultStylesCache.has(tagName)) {
+      return defaultStylesCache.get(tagName);
+    }
+    const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
+    if (skipTags.has(tagName)) {
+      const empty = {};
+      defaultStylesCache.set(tagName, empty);
+      return empty;
+    }
+    let sandbox = document.getElementById("snapdom-sandbox");
+    if (!sandbox) {
+      sandbox = document.createElement("div");
+      sandbox.id = "snapdom-sandbox";
+      sandbox.style.position = "absolute";
+      sandbox.style.left = "-9999px";
+      sandbox.style.top = "-9999px";
+      sandbox.style.width = "0";
+      sandbox.style.height = "0";
+      sandbox.style.overflow = "hidden";
+      document.body.appendChild(sandbox);
+    }
+    const el = document.createElement(tagName);
+    el.style.all = "initial";
+    sandbox.appendChild(el);
+    const styles = getComputedStyle(el);
     const defaults = {};
     for (let prop of styles) {
       defaults[prop] = styles.getPropertyValue(prop);
     }
-    document.body.removeChild(defaultEl);
+    sandbox.removeChild(el);
+    defaultStylesCache.set(tagName, defaults);
     return defaults;
   }
-  function getStyleKey(style, defaults) {
+  function getStyleKey(snapshot, tagName, compress = false) {
     const entries = [];
-    for (let prop of Array.from(style)) {
-      const value = style.getPropertyValue(prop);
-      if (value && value !== defaults[prop]) {
-        entries.push(`${prop}:${value}`);
+    const defaultStyles = getDefaultStyleForTag(tagName);
+    for (let [prop, value] of Object.entries(snapshot)) {
+      if (!compress) {
+        if (value) {
+          entries.push(`${prop}:${value}`);
+        }
+      } else {
+        const defaultValue = defaultStyles[prop];
+        if (value && value !== defaultValue) {
+          entries.push(`${prop}:${value}`);
+        }
       }
     }
     return entries.sort().join(";");
   }
-  function generateReusableCSSClasses(styleMap) {
+  function collectUsedTagNames(root) {
+    const tagSet = /* @__PURE__ */ new Set();
+    if (root.tagName) {
+      tagSet.add(root.tagName.toLowerCase());
+    }
+    root.querySelectorAll("*").forEach((el) => {
+      tagSet.add(el.tagName.toLowerCase());
+    });
+    return Array.from(tagSet);
+  }
+  function generateDedupedBaseCSS(usedTagNames) {
+    const groups = /* @__PURE__ */ new Map();
+    for (let tagName of usedTagNames) {
+      const styles = defaultStylesCache.get(tagName);
+      if (!styles) continue;
+      const key = Object.entries(styles).map(([k, v]) => `${k}:${v};`).sort().join("");
+      if (!groups.has(key)) {
+        groups.set(key, []);
+      }
+      groups.get(key).push(tagName);
+    }
+    let css = "";
+    for (let [styleBlock, tagList] of groups.entries()) {
+      css += `${tagList.join(",")} { ${styleBlock} }
+`;
+    }
+    return css;
+  }
+  function generateCSSClasses(styleMap) {
     const keySet = new Set(styleMap.values());
     const classMap = /* @__PURE__ */ new Map();
     let counter = 1;
@@ -38,19 +148,118 @@
     return classMap;
   }
 
+  // src/utils/helpers.js
+  function idle(fn, { fast = false } = {}) {
+    if (fast) return fn();
+    if ("requestIdleCallback" in window) {
+      requestIdleCallback(fn, { timeout: 50 });
+    } else {
+      setTimeout(fn, 1);
+    }
+  }
+  function getStyle(el, pseudo = null) {
+    if (!(el instanceof Element)) {
+      return window.getComputedStyle(el, pseudo);
+    }
+    let map = computedStyleCache.get(el);
+    if (!map) {
+      map = /* @__PURE__ */ new Map();
+      computedStyleCache.set(el, map);
+    }
+    if (!map.has(pseudo)) {
+      const st = window.getComputedStyle(el, pseudo);
+      map.set(pseudo, st);
+    }
+    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 extractUrl(cssValue) {
+    const m = cssValue.match(/url\(["']?([^"')]+)["']?\)/);
+    return m ? m[1] : null;
+  }
+  function isIconFont(familyOrUrl) {
+    const iconFontPatterns = [
+      /font\s*awesome/i,
+      /material\s*icons/i,
+      /ionicons/i,
+      /glyphicons/i,
+      /feather/i,
+      /bootstrap\s*icons/i,
+      /remix\s*icons/i,
+      /heroicons/i
+    ];
+    return iconFontPatterns.some((rx) => rx.test(familyOrUrl));
+  }
+  function fetchImage(src, timeout = 3e3) {
+    if (imageCache.has(src)) {
+      return Promise.resolve(imageCache.get(src));
+    }
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        reject(new Error("Image load timed out"));
+      }, timeout);
+      const image = new Image();
+      image.crossOrigin = "anonymous";
+      image.onload = async () => {
+        clearTimeout(timeoutId);
+        try {
+          await image.decode();
+          const canvas = document.createElement("canvas");
+          canvas.width = image.width;
+          canvas.height = image.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(image, 0, 0);
+          try {
+            const dataURL = canvas.toDataURL("image/png");
+            imageCache.set(src, dataURL);
+            resolve(dataURL);
+          } catch (e) {
+            reject(new Error("CORS restrictions prevented image capture"));
+          }
+        } catch (e) {
+          reject(e);
+        }
+      };
+      image.onerror = (e) => {
+        clearTimeout(timeoutId);
+        reject(new Error("Failed to load image: " + (e.message || "Unknown error")));
+      };
+      image.src = src;
+    });
+  }
+  function snapshotComputedStyle(style) {
+    const snap = {};
+    for (let prop of style) {
+      snap[prop] = style.getPropertyValue(prop);
+    }
+    return snap;
+  }
+
   // src/modules/styles.js
-  function inlineAllStyles(source, clone, styleMap, defaults, cache) {
+  function inlineAllStyles(source, clone, styleMap, cache, compress) {
     if (source.tagName === "STYLE") return;
     if (!cache.has(source)) {
-      cache.set(source, window.getComputedStyle(source));
+      cache.set(source, getStyle(source));
     }
     const style = cache.get(source);
-    const key = getStyleKey(style, defaults);
+    const snapshot = snapshotComputedStyle(style);
+    const tagName = source.tagName?.toLowerCase() || "div";
+    const key = getStyleKey(snapshot, tagName, compress);
     styleMap.set(clone, key);
   }
 
   // src/core/clone.js
-  function deepCloneWithShadow(node, styleMap, defaults, styleCache, nodeMap) {
+  function deepClone(node, styleMap, styleCache, nodeMap, compress) {
     if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "exclude") {
       const spacer = document.createElement("div");
       const rect = node.getBoundingClientRect();
@@ -66,7 +275,7 @@
     if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "placeholder") {
       const clone2 = node.cloneNode(false);
       nodeMap.set(clone2, node);
-      inlineAllStyles(node, clone2, styleMap, defaults, styleCache);
+      inlineAllStyles(node, clone2, styleMap, styleCache, compress);
       const placeholder = document.createElement("div");
       placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
       placeholder.style.cssText = `color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;`;
@@ -93,187 +302,143 @@
     if (node.nodeType !== Node.ELEMENT_NODE) return node.cloneNode(true);
     const clone = node.cloneNode(false);
     nodeMap.set(clone, node);
-    inlineAllStyles(node, clone, styleMap, defaults, styleCache);
+    inlineAllStyles(node, clone, styleMap, styleCache, compress);
     const frag = document.createDocumentFragment();
     node.childNodes.forEach((child) => {
-      const clonedChild = deepCloneWithShadow(child, styleMap, defaults, styleCache, nodeMap);
+      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress);
       if (clonedChild) frag.appendChild(clonedChild);
     });
     clone.appendChild(frag);
     if (node.shadowRoot) {
-      const shadowContent = Array.from(node.shadowRoot.children).filter((el) => el.tagName !== "STYLE").map((el) => deepCloneWithShadow(el, styleMap, defaults, styleCache, nodeMap)).filter(Boolean);
+      const shadowContent = Array.from(node.shadowRoot.children).filter((el) => el.tagName !== "STYLE").map((el) => deepClone(el, styleMap, styleCache, nodeMap)).filter(Boolean);
       const shadowFrag = document.createDocumentFragment();
       shadowContent.forEach((child) => shadowFrag.appendChild(child));
       clone.appendChild(shadowFrag);
     }
-    clone.querySelectorAll("style").forEach((tag) => tag.removeAttribute("style"));
-    if (clone.tagName === "STYLE") clone.removeAttribute("style");
     return clone;
   }
 
-  // src/utils/fetchImage.js
-  function fetchImageAsDataURL(src, timeout = 3e3) {
-    return new Promise((resolve, reject) => {
-      const timeoutId = setTimeout(() => {
-        reject(new Error("Image load timed out"));
-      }, timeout);
-      const image = new Image();
-      image.crossOrigin = "anonymous";
-      image.onload = async () => {
-        clearTimeout(timeoutId);
-        try {
-          await image.decode();
-          const canvas = document.createElement("canvas");
-          canvas.width = image.width;
-          canvas.height = image.height;
-          const ctx = canvas.getContext("2d");
-          ctx.drawImage(image, 0, 0);
-          try {
-            const dataURL = canvas.toDataURL("image/png");
-            resolve(dataURL);
-          } catch (e) {
-            reject(new Error("CORS restrictions prevented image capture"));
-          }
-        } catch (e) {
-          reject(e);
-        }
-      };
-      image.onerror = (e) => {
-        clearTimeout(timeoutId);
-        reject(new Error("Failed to load image: " + (e.message || "Unknown error")));
-      };
-      image.src = src;
-    });
-  }
-
-  // src/utils/delay.js
-  function delay(ms = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+  // src/modules/fonts.js
+  async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
+    fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
+    await document.fonts.ready;
+    await document.fonts.load(`${fontSize}px "${fontFamily}"`);
+    const canvas = document.createElement("canvas");
+    canvas.width = fontSize;
+    canvas.height = fontSize;
+    const ctx = canvas.getContext("2d");
+    ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : ` ${fontSize}px "${fontFamily}"`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = color;
+    ctx.fillText(unicodeChar, canvas.width / 2, canvas.height / 2);
+    return canvas.toDataURL();
   }
-
-  // src/modules/images.js
-  async function inlineImages(clone) {
-    const imgs = Array.from(clone.querySelectorAll("img"));
-    const processImg = async (img) => {
-      const src = img.src;
+  async function embedCustomFonts({ ignoreIconFonts = true, preCached = false }) {
+    const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).filter((link) => link.href);
+    let finalCSS = "";
+    for (const link of links) {
       try {
-        const dataUrl = await fetchImageAsDataURL(src);
-        img.src = dataUrl;
-        if (!img.width) img.width = img.naturalWidth || 100;
-        if (!img.height) img.height = img.naturalHeight || 100;
-      } catch {
-        const fallback = document.createElement("div");
-        fallback.style = `width: ${img.width || 100}px; height: ${img.height || 100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${img.height || 100}px; color: #666; font-size: 12px;`;
-        fallback.innerText = "img";
-        img.replaceWith(fallback);
-      }
-    };
-    for (let i = 0; i < imgs.length; i += 4) {
-      const group = imgs.slice(i, i + 4).map(processImg);
-      await Promise.allSettled(group);
-      await delay(1);
-    }
-  }
-
-  // src/modules/background.js
-  async function inlineBackgroundImages(source, clone, styleCache) {
-    const queue = [[source, clone]];
-    while (queue.length) {
-      const [srcNode, cloneNode] = queue.shift();
-      const style = styleCache.get(srcNode) || window.getComputedStyle(srcNode);
-      if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
-      const bg = style.getPropertyValue("background-image");
-      if (bg && bg.includes("url(")) {
-        const match = bg.match(/url\(["']?([^"')]+)["']?\)/);
-        if (match?.[1]) {
-          try {
-            const dataUrl = await fetchImageAsDataURL(match[1]);
-            cloneNode.style.backgroundImage = `url(${dataUrl})`;
-          } catch {
-            cloneNode.style.backgroundImage = "none";
+        const res = await fetch(link.href);
+        const cssText = await res.text();
+        if (ignoreIconFonts && (isIconFont(link.href) || isIconFont(cssText))) {
+          console.log("\u23ED\uFE0F Ignorando icon font CSS:", link.href);
+          continue;
+        }
+        const urlRegex = /url\(([^)]+)\)/g;
+        const inlinedCSS = await Promise.all(
+          Array.from(cssText.matchAll(urlRegex)).map(async (match) => {
+            let url = match[1].replace(/["']/g, "");
+            if (!url.startsWith("http")) {
+              url = new URL(url, link.href).href;
+            }
+            if (ignoreIconFonts && isIconFont(url)) {
+              console.log("\u23ED\uFE0F Ignorando icon font URL:", url);
+              return null;
+            }
+            if (resourceCache.has(url)) {
+              return { original: match[0], inlined: `url(${resourceCache.get(url)})` };
+            }
+            try {
+              const fontRes = await fetch(url);
+              const blob = await fontRes.blob();
+              const b64 = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(blob);
+              });
+              resourceCache.set(url, b64);
+              return { original: match[0], inlined: `url(${b64})` };
+            } catch (err) {
+              console.warn("\u274C No pude fetch font", url);
+              return null;
+            }
+          })
+        );
+        let cssFinal = cssText;
+        for (const r of inlinedCSS) {
+          if (r) {
+            cssFinal = cssFinal.replace(r.original, r.inlined);
           }
         }
+        finalCSS += cssFinal + "\n";
+      } catch (e) {
+        console.warn("\u274C No pude fetch CSS", link.href);
       }
-      const sChildren = Array.from(srcNode.children);
-      const cChildren = Array.from(cloneNode.children);
-      for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-        queue.push([sChildren[i], cChildren[i]]);
-      }
-      await delay(1);
     }
+    if (finalCSS && preCached) {
+      const style = document.createElement("style");
+      style.setAttribute("data-snapdom", "embedFonts");
+      style.textContent = finalCSS;
+      document.head.appendChild(style);
+    }
+    return finalCSS;
   }
 
   // src/modules/pseudo.js
-  async function inlinePseudoElements(source, clone) {
-    const importantProps = [
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "width",
-      "height",
-      "min-width",
-      "max-width",
-      "min-height",
-      "max-height",
-      "margin",
-      "padding",
-      "border",
-      "border-radius",
-      "background",
-      "background-color",
-      "background-image",
-      "color",
-      "font",
-      "font-family",
-      "font-size",
-      "font-weight",
-      "text-align",
-      "text-decoration",
-      "line-height",
-      "letter-spacing",
-      "display",
-      "visibility",
-      "opacity",
-      "overflow",
-      "box-shadow",
-      "transform",
-      "transition",
-      "flex",
-      "grid"
-    ];
+  async function inlinePseudoElements(source, clone, styleMap, styleCache, compress) {
+    if (!(source instanceof Element) || !(clone instanceof Element)) return;
     for (const pseudo of ["::before", "::after"]) {
       try {
-        const style = window.getComputedStyle(source, pseudo);
+        const style = getStyle(source, pseudo);
+        if (!style) continue;
         const content = style.getPropertyValue("content");
-        if (content && content !== "none" && content !== '""' && content !== "''") {
+        const bg = style.getPropertyValue("background-image");
+        const hasContent = content && content !== "none" && content !== '""' && content !== "''";
+        const hasBg = bg && bg.startsWith("url(");
+        if (hasContent || hasBg) {
+          const fontFamily = style.getPropertyValue("font-family");
+          const fontSize = parseInt(style.getPropertyValue("font-size")) || 32;
+          const fontWeight = parseInt(style.getPropertyValue("font-weight")) || false;
+          const color = style.getPropertyValue("color") || "#000";
           const pseudoEl = document.createElement("span");
-          pseudoEl.className = `snapdom-pseudo-${pseudo.replace("::", "")}`;
-          let cleanContent = content.replace(/^\"|\"$/g, "");
-          if (cleanContent.startsWith("url(")) {
+          pseudoEl.dataset.snapdomPseudo = pseudo;
+          const snapshot = snapshotComputedStyle(style);
+          const key = getStyleKey(snapshot, "span", compress);
+          styleMap.set(pseudoEl, key);
+          const isIconFont2 = fontFamily && /font.*awesome|material|bootstrap|glyphicons|ionicons|remixicon|simple-line-icons|octicons|feather|typicons|weathericons/i.test(fontFamily);
+          let cleanContent = parseContent(content);
+          if (isIconFont2 && cleanContent.length === 1) {
+            const imgEl = document.createElement("img");
+            imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
+            imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
+            pseudoEl.appendChild(imgEl);
+          } else if (cleanContent.startsWith("url(")) {
             const match = cleanContent.match(/url\(["']?([^"')]+)["']?\)/);
             if (match?.[1]) {
               try {
                 const imgEl = document.createElement("img");
-                const dataUrl = await fetchImageAsDataURL(match[1]);
+                const dataUrl = await fetchImage(match[1]);
                 imgEl.src = dataUrl;
                 imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
                 pseudoEl.appendChild(imgEl);
               } catch (e) {
+                console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
               }
             }
-          } else {
+          } else if (cleanContent && cleanContent !== "none") {
             pseudoEl.textContent = cleanContent;
           }
-          for (const prop of importantProps) {
-            const value = style.getPropertyValue(prop);
-            if (value) {
-              pseudoEl.style[prop] = value;
-            }
-          }
-          if (!pseudoEl.style.position) pseudoEl.style.position = "absolute";
           if (pseudo === "::before") {
             clone.insertBefore(pseudoEl, clone.firstChild);
           } else {
@@ -281,146 +446,41 @@
           }
         }
       } catch (e) {
+        console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
       }
     }
     const sChildren = Array.from(source.children);
     const cChildren = Array.from(clone.children).filter(
-      (child) => !child.classList.contains("snapdom-pseudo-before") && !child.classList.contains("snapdom-pseudo-after")
+      (child) => !child.dataset.snapdomPseudo
     );
     for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-      await inlinePseudoElements(sChildren[i], cChildren[i]);
-      if (i % 5 === 0) await delay(1);
+      await inlinePseudoElements(sChildren[i], cChildren[i], styleMap, styleCache, compress);
     }
   }
 
-  // src/utils/normalize.js
-  function normalizeFontName(str) {
-    return str.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
-  }
-  function normalizeVariation(value) {
-    const mappings = {
-      "normal": "400",
-      "bold": "700",
-      "italic": "italic",
-      "oblique": "italic",
-      "ultra-condensed": "50",
-      "extra-condensed": "62",
-      "condensed": "75",
-      "semi-condensed": "87",
-      "expanded": "125",
-      "semi-expanded": "112",
-      "extra-expanded": "150",
-      "ultra-expanded": "200"
-    };
-    return mappings[value] || value.replace(/%/g, "");
-  }
-
-  // src/modules/fonts.js
-  async function inlineFonts(styleCache = /* @__PURE__ */ new WeakMap()) {
-    await document.fonts.ready;
-    const fontFaceRules = [];
-    Array.from(document.styleSheets).forEach((sheet) => {
-      try {
-        Array.from(sheet.cssRules).forEach((rule) => {
-          if (rule instanceof CSSFontFaceRule) {
-            fontFaceRules.push(rule.cssText);
-          }
-        });
-      } catch (e) {
-        console.warn("Could not access stylesheet rules:", e);
-      }
-    });
-    const fontData = /* @__PURE__ */ new Map();
-    const elements = document.querySelectorAll("*");
-    elements.forEach((el) => {
-      const style = styleCache.get(el) || window.getComputedStyle(el);
-      if (!styleCache.has(el)) styleCache.set(el, style);
-      const family = style.fontFamily?.split(",")[0]?.trim().replace(/["']/g, "");
-      if (!family) return;
-      const weight = normalizeVariation(style.fontWeight || "400");
-      const styleAttr = normalizeVariation(style.fontStyle || "normal");
-      const stretch = normalizeVariation(style.fontStretch || "normal");
-      if (!fontData.has(family)) {
-        fontData.set(family, /* @__PURE__ */ new Set());
-      }
-      fontData.get(family).add(`${weight}_${styleAttr}_${stretch}`);
-    });
-    const cssClasses = [...fontFaceRules];
-    for (const [family, variations] of fontData) {
-      const safeFamily = normalizeFontName(family);
-      for (const variation of variations) {
-        const [weight, styleAttr, stretch] = variation.split("_");
-        const variationClass = `fg-f-${safeFamily}-w${weight}-${styleAttr}-s${stretch}`;
-        const cssProps = [
-          `font-family:"${family}",sans-serif`,
-          `font-weight:${weight}`,
-          `font-style:${styleAttr}`,
-          `font-stretch:${stretch}%`
-        ].filter(Boolean).join(";");
-        cssClasses.push(`.${variationClass}{${cssProps}}`);
-      }
-    }
-    cssClasses.push("*{font-family:inherit;font-weight:inherit;font-style:inherit;}");
-    return cssClasses.join("");
-  }
-  function applyFontClasses(clone, original, styleCache) {
-    const style = styleCache.get(original) || window.getComputedStyle(original);
-    const family = style.fontFamily?.split(",")[0]?.trim().replace(/["']/g, "");
-    if (!family) return;
-    const weight = normalizeVariation(style.fontWeight || "400");
-    const styleAttr = normalizeVariation(style.fontStyle || "normal");
-    const stretch = normalizeVariation(style.fontStretch || "normal");
-    const safeFamily = normalizeFontName(family);
-    clone.classList.add(`fg-f-${safeFamily}-w${weight}-${styleAttr}-s${stretch}`);
-  }
-
   // src/core/prepare.js
-  async function prepareClone(element) {
+  async function prepareClone(element, compress = false) {
     const styleMap = /* @__PURE__ */ new Map();
     const styleCache = /* @__PURE__ */ new WeakMap();
     const nodeMap = /* @__PURE__ */ new WeakMap();
-    let defaults;
-    try {
-      defaults = getDefaultStyles();
-    } catch (e) {
-      console.warn("getDefaultStyles failed:", e);
-      defaults = {};
-    }
     let clone;
     try {
-      clone = deepCloneWithShadow(element, styleMap, defaults, styleCache, nodeMap);
+      clone = deepClone(element, styleMap, styleCache, nodeMap, compress);
     } catch (e) {
-      console.warn("deepCloneWithShadow failed:", e);
+      console.warn("deepClone failed:", e);
       throw e;
     }
     try {
-      await inlineImages(clone);
-    } catch (e) {
-      console.warn("inlineImages failed:", e);
-    }
-    try {
-      await inlineBackgroundImages(element, clone, styleCache);
-    } catch (e) {
-      console.warn("inlineBackgroundImages failed:", e);
-    }
-    try {
-      await inlinePseudoElements(element, clone);
+      await inlinePseudoElements(element, clone, styleMap, styleCache, compress);
     } catch (e) {
       console.warn("inlinePseudoElements failed:", e);
     }
-    const keyToClass = generateReusableCSSClasses(styleMap);
+    const keyToClass = generateCSSClasses(styleMap);
     const classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
     for (const [node, key] of styleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       const className = keyToClass.get(key);
-      if (className) {
-        node.classList.add(className);
-        try {
-          applyFontClasses(node, nodeMap.get(node), styleCache);
-        } catch (e) {
-          console.warn("applyFontClasses failed for node:", node, e);
-        }
-      }
+      if (className) node.classList.add(className);
       const bgImage = node.style?.backgroundImage;
       node.removeAttribute("style");
       if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
@@ -428,97 +488,280 @@
     return { clone, classCSS, styleCache };
   }
 
-  // src/utils/minifySVG.js
-  function minifySVG(svgString) {
-    return svgString.replace(/>\s+</g, "><").replace(/\s{2,}/g, " ").replace(/\n/g, "").trim();
+  // src/modules/images.js
+  async function inlineImages(clone) {
+    const imgs = Array.from(clone.querySelectorAll("img"));
+    const processImg = async (img) => {
+      const src = img.src;
+      try {
+        const dataUrl = await fetchImage(src);
+        img.src = dataUrl;
+        if (!img.width) img.width = img.naturalWidth || 100;
+        if (!img.height) img.height = img.naturalHeight || 100;
+      } catch {
+        const fallback = document.createElement("div");
+        fallback.style = `width: ${img.width || 100}px; height: ${img.height || 100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${img.height || 100}px; color: #666; font-size: 12px;`;
+        fallback.innerText = "img";
+        img.replaceWith(fallback);
+      }
+    };
+    for (let i = 0; i < imgs.length; i += 4) {
+      const group = imgs.slice(i, i + 4).map(processImg);
+      await Promise.allSettled(group);
+    }
+  }
+
+  // src/modules/background.js
+  async function inlineBackgroundImages(source, clone, styleCache) {
+    const queue = [[source, clone]];
+    while (queue.length) {
+      const [srcNode, cloneNode] = queue.shift();
+      const style = styleCache.get(srcNode) || getStyle(srcNode);
+      if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
+      const bg = style.getPropertyValue("background-image");
+      if (bg && bg.includes("url(")) {
+        const match = bg.match(/url\(["']?([^"')]+)["']?\)/);
+        if (match?.[1]) {
+          try {
+            const bgUrl = match[1];
+            let dataUrl;
+            if (bgCache.has(bgUrl)) {
+              dataUrl = bgCache.get(bgUrl);
+            } else {
+              dataUrl = await fetchImage(bgUrl);
+              bgCache.set(bgUrl, dataUrl);
+            }
+            cloneNode.style.backgroundImage = `url(${dataUrl})`;
+          } catch {
+            cloneNode.style.backgroundImage = "none";
+          }
+        }
+      }
+      const sChildren = Array.from(srcNode.children);
+      const cChildren = Array.from(cloneNode.children);
+      for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
+        queue.push([sChildren[i], cChildren[i]]);
+      }
+    }
   }
 
   // src/core/capture.js
-  async function capture(element, scale = 1) {
+  async function captureDOM(element, options = {}) {
+    if (!element) throw new Error("Element cannot be null or undefined");
+    const { compress = true, embedFonts = false, fast = true, scale = 1 } = options;
     let clone, classCSS, styleCache;
-    try {
-      ({ clone, classCSS, styleCache } = await prepareClone(element));
-    } catch (e) {
-      console.error("prepareClone failed:", e);
-      throw e;
+    let fontsCSS = "";
+    let baseCSS = "";
+    let dataBlob;
+    let svgString;
+    ({ clone, classCSS, styleCache } = await prepareClone(element, compress));
+    await new Promise((resolve) => {
+      idle(async () => {
+        await inlineImages(clone);
+        resolve();
+      }, { fast });
+    });
+    await new Promise((resolve) => {
+      idle(async () => {
+        await inlineBackgroundImages(element, clone, styleCache);
+        resolve();
+      }, { fast });
+    });
+    if (embedFonts) {
+      await new Promise((resolve) => {
+        idle(async () => {
+          fontsCSS = await embedCustomFonts({ ignoreIconFonts: true });
+          resolve();
+        }, { fast });
+      });
     }
-    const w = element.offsetWidth * scale;
-    const h = element.offsetHeight * scale;
-    let fonts = "";
-    try {
-      fonts = await inlineFonts(styleCache);
-    } catch (e) {
-      console.warn("inlineFonts failed:", e);
-    }
-    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("width", w);
-    svg.setAttribute("height", h);
-    svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
-    const fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
-    fo.setAttribute("width", "100%");
-    fo.setAttribute("height", "100%");
-    const div = document.createElement("div");
-    div.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-    div.setAttribute("style", `width:${w}px;height:${h}px;`);
-    const styleTag = document.createElement("style");
-    styleTag.textContent = fonts + "svg{overflow:visible}" + classCSS;
-    div.appendChild(styleTag);
-    div.appendChild(clone);
-    fo.appendChild(div);
-    svg.appendChild(fo);
-    try {
-      const svgStr = new XMLSerializer().serializeToString(svg);
-      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(minifySVG(svgStr))}`;
-    } catch (e) {
-      console.error("SVG serialization failed:", e);
-      throw e;
+    if (compress) {
+      const usedTags = collectUsedTagNames(clone).sort();
+      const tagKey = usedTags.join(",");
+      if (baseCSSCache.has(tagKey)) {
+        baseCSS = baseCSSCache.get(tagKey);
+      } else {
+        await new Promise((resolve) => {
+          idle(() => {
+            baseCSS = generateDedupedBaseCSS(usedTags);
+            baseCSSCache.set(tagKey, baseCSS);
+            resolve();
+          }, { fast });
+        });
+      }
+    }
+    await new Promise((resolve) => {
+      idle(() => {
+        const rect = element.getBoundingClientRect();
+        const w = rect.width * scale;
+        const h = rect.height * scale;
+        if (scale !== 1) {
+          clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+          clone.style.transform = `scale(${scale})`;
+          clone.style.transformOrigin = "top left";
+          clone.style.width = `${rect.width}px`;
+          clone.style.height = `${rect.height}px`;
+        }
+        const svgNS = "http://www.w3.org/2000/svg";
+        const fo = document.createElementNS(svgNS, "foreignObject");
+        fo.setAttribute("width", "100%");
+        fo.setAttribute("height", "100%");
+        const styleTag = document.createElement("style");
+        styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;}" + classCSS;
+        fo.appendChild(styleTag);
+        fo.appendChild(clone);
+        const serializer = new XMLSerializer();
+        const foString = serializer.serializeToString(fo);
+        const svgHeader = `<svg xmlns="${svgNS}" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
+        const svgFooter = "</svg>";
+        svgString = svgHeader + foString + svgFooter;
+        const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+        dataBlob = URL.createObjectURL(blob);
+        resolve();
+      }, { fast });
+    });
+    const sandbox = document.getElementById("snapdom-sandbox");
+    if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
+    if (options.dataURL) {
+      return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+    } else {
+      return dataBlob;
     }
   }
 
   // src/api/snapdom.js
-  async function snapdom(el, scale = 1) {
-    return await capture(el, scale);
+  async function snapdom(element, options = {}) {
+    if (!element) {
+      throw new Error("Element cannot be null or undefined");
+    }
+    return await captureDOM(element, options);
   }
-  snapdom.toImg = async function(el, scale = 1) {
-    const dataURL = await snapdom(el, scale);
+  snapdom.toImg = async (el, options = {}) => {
+    const url = await snapdom(el, options);
     const img = new Image();
-    img.src = dataURL;
+    img.src = url;
     await img.decode();
     return img;
   };
-  snapdom.toCanvas = async function(el, scale = 1) {
-    const img = await snapdom.toImg(el, scale);
+  snapdom.toCanvas = async (el, options = {}) => {
+    const img = await snapdom.toImg(el, options);
     const canvas = document.createElement("canvas");
     canvas.width = img.width;
     canvas.height = img.height;
-    const ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0);
+    canvas.getContext("2d").drawImage(img, 0, 0);
     return canvas;
   };
-  snapdom.toPng = async function(el, scale = 1) {
-    const canvas = await snapdom.toCanvas(el, scale);
+  snapdom.toPng = async (el, options = {}) => {
+    const canvas = await snapdom.toCanvas(el, options);
     const img = new Image();
     img.src = canvas.toDataURL("image/png");
     await img.decode();
     return img;
   };
-  snapdom.toJpg = async function(el, scale = 1, quality = 0.92) {
-    const canvas = await snapdom.toCanvas(el, scale);
+  snapdom.toJpg = async (el, options = {}) => {
+    const { backgroundColor = "#fff", quality = 1 } = options;
+    const canvas = await snapdom.toCanvas(el, options);
+    const temp = document.createElement("canvas");
+    temp.width = canvas.width;
+    temp.height = canvas.height;
+    const ctx = temp.getContext("2d");
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, temp.width, temp.height);
+    ctx.drawImage(canvas, 0, 0);
     const img = new Image();
-    img.src = canvas.toDataURL("image/jpeg", quality);
+    img.src = temp.toDataURL("image/jpeg", quality);
     await img.decode();
     return img;
   };
-  snapdom.toWebp = async function(el, scale = 1, quality = 0.92) {
-    const canvas = await snapdom.toCanvas(el, scale);
+  snapdom.toWebp = async (el, options = {}) => {
+    const { backgroundColor = "#fff", quality = 1 } = options;
+    const canvas = await snapdom.toCanvas(el, options);
+    const temp = document.createElement("canvas");
+    temp.width = canvas.width;
+    temp.height = canvas.height;
+    const ctx = temp.getContext("2d");
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, temp.width, temp.height);
+    ctx.drawImage(canvas, 0, 0);
     const img = new Image();
-    img.src = canvas.toDataURL("image/webp", quality);
+    img.src = temp.toDataURL("image/webp", quality);
     await img.decode();
     return img;
   };
-  snapdom.toBlob = async function(el, scale = 1) {
-    const dataURL = await snapdom(el, scale);
-    const svgXml = decodeURIComponent(dataURL.split(",")[1]);
-    return new Blob([svgXml], { type: "image/svg+xml" });
+  snapdom.toBlob = async (el, options = {}) => {
+    const dataUrl = await snapdom(el, options);
+    const svgText = decodeURIComponent(dataUrl.split(",")[1]);
+    return new Blob([svgText], { type: "image/svg+xml" });
   };
+
+  // src/api/preCache.js
+  async function preCache(root = document, options = {}) {
+    const { embedFonts = true, reset = false, preWarm = true } = options;
+    if (reset) {
+      imageCache.clear();
+      bgCache.clear();
+      resourceCache.clear();
+      baseCSSCache.clear();
+      computedStyleCache.clear();
+      return;
+    }
+    await document.fonts.ready;
+    precacheCommonTags();
+    let imgEls = [], allEls = [];
+    if (root?.querySelectorAll) {
+      imgEls = Array.from(root.querySelectorAll("img[src]"));
+      allEls = Array.from(root.querySelectorAll("*"));
+    }
+    const promises = [];
+    for (const img of imgEls) {
+      const src = img.src;
+      if (!imageCache.has(src)) {
+        promises.push(
+          fetchImage(src).then((dataURL) => imageCache.set(src, dataURL)).catch(() => {
+          })
+        );
+      }
+    }
+    for (const el of allEls) {
+      const bg = getComputedStyle(el).backgroundImage;
+      const url = extractUrl(bg);
+      if (url && !bgCache.has(url)) {
+        promises.push(
+          fetchImage(url).then((dataURL) => bgCache.set(url, dataURL)).catch(() => {
+          })
+        );
+      }
+    }
+    if (embedFonts) {
+      await embedCustomFonts({ ignoreIconFonts: true, preCached: true });
+    }
+    await Promise.all(promises);
+    if (preWarm) {
+      const usedTags = collectUsedTagNames(root).sort();
+      const tagKey = usedTags.join(",");
+      if (!baseCSSCache.has(tagKey)) {
+        const css = generateDedupedBaseCSS(usedTags);
+        baseCSSCache.set(tagKey, css);
+      }
+      const clone = root.cloneNode(false);
+      await inlinePseudoElements(
+        root,
+        clone,
+        /* @__PURE__ */ new Map(),
+        /* @__PURE__ */ new WeakMap(),
+        /* compress */
+        false
+      );
+    }
+    if (preWarm) {
+      try {
+        await prepareClone(
+          root,
+          /* compress: */
+          options.preWarm
+        );
+      } catch (e) {
+      }
+    }
+  }
 })();