@zumer/snapdom 0.9.1 → 0.9.7

package/dist/snapdom.mjs

@@ -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 @@ function generateReusableCSSClasses(styleMap) {
   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 @@ function deepCloneWithShadow(node, styleMap, defaults, styleCache, nodeMap) {
   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 @@ function deepCloneWithShadow(node, styleMap, defaults, styleCache, nodeMap) {
   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 @@ async function inlinePseudoElements(source, clone) {
         }
       }
     } 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,99 +488,283 @@ async function prepareClone(element) {
   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) {
+    }
+  }
+}
 export {
+  preCache,
   snapdom
 };