@zumer/snapdom 0.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ZumerLab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,163 @@
+# snapDOM
+
+**snapDOM** is a high-fidelity DOM capture tool, developed as part of the animation engine for Zumly — a framework for creating smooth zoom-based view transitions.
+
+It converts any HTML element into a scalable SVG image, preserving styles, fonts, backgrounds, shadow DOM content, pseudo-elements, and more.
+
+- 📸 Full DOM capture
+- 🎨 Embedded styles, pseudo-elements, and fonts
+- 🖼️ Export to SVG, PNG, JPG, WebP, or `canvas`
+- ⚡ Lightweight, no dependencies
+- 📦 100% based on standard Web APIs
+
+---
+¡Obvio, Martín! 🔥  
+Acá te integro la parte de **Installation** agregando también la opción **CDN**, de manera prolija y siguiendo tu estilo:
+
+---
+
+## Installation
+
+You can use **snapDOM** by including it via **CDN**, **script tag**, or by **importing it as a module**.
+
+### CDN
+
+```html
+<script src="https://unpkg.com/@zumer/snapdom@latest/snapdom.min.js"></script>
+```
+
+---
+
+### Script tag (local)
+
+```html
+<script src="snapdom.js"></script>
+```
+
+The global object `snapdom` will be available.
+
+---
+
+### ES Module
+
+```javascript
+import { snapdom } from './snapdom.mjs';
+```
+
+### Script Tag (Type Module)
+
+```
+<script type="module">
+  import { snapdom } from 'https://unpkg.com/@zumer/snapdom@latest/snapdom.mjs';
+</script>
+```
+
+Now you can call `snapdom(el)`, `snapdom.toPng(el)`, etc., directly in your JavaScript.
+
+---
+
+## Basic usage
+
+```javascript
+// Capture an element as SVG Data URL
+const svgDataUrl = await snapdom(document.querySelector("#myElement"));
+
+// Insert the captured image into the page
+const img = new Image();
+img.src = svgDataUrl;
+document.body.appendChild(img);
+```
+
+---
+
+## API
+
+The main API is exposed as `snapdom` and offers multiple capture methods:
+
+| Method | Description | Returns |
+|:-------|:------------|:--------|
+| `snapdom(el, scale?)` | Captures as SVG Data URL | `Promise<string>` |
+| `snapdom.toImg(el, scale?)` | Captures as `HTMLImageElement` (SVG) | `Promise<HTMLImageElement>` |
+| `snapdom.toCanvas(el, scale?)` | Captures as `HTMLCanvasElement` | `Promise<HTMLCanvasElement>` |
+| `snapdom.toPng(el, scale?)` | Captures as PNG image (`Image`) | `Promise<HTMLImageElement>` |
+| `snapdom.toJpg(el, scale?, quality?)` | Captures as JPG image (`Image`) | `Promise<HTMLImageElement>` |
+| `snapdom.toWebp(el, scale?, quality?)` | Captures as WebP image (`Image`) | `Promise<HTMLImageElement>` |
+| `snapdom.toBlob(el, scale?)` | Captures as SVG `Blob` | `Promise<Blob>` |
+
+**Parameters:**
+- `el`: DOM element to capture.
+- `scale`: Scale factor (default is `1`).
+- `quality`: Compression quality for JPG/WebP (range `0`–`1`).
+
+---
+
+## Special features
+
+- **Shadow DOM**: Captures content inside Web Components and `shadowRoot`.
+- **Pseudo-elements**: Captures `::before` and `::after`, including background images.
+- **Backgrounds and images**: Inlines external images as Data URLs.
+- **Fonts**: Replicates applied font families without needing external font files.
+- **Placeholder and Exclusion**:
+  - `data-capture="exclude"`: Skips an element while preserving layout space.
+  - `data-capture="placeholder"` + `data-placeholder-text="Text"`: Replaces an element with decorative placeholder text.
+
+---
+
+## Full example
+
+```html
+<div id="captureMe">
+  <h1 style="color: tomato;">Hello World!</h1>
+  <p>This content will be captured.</p>
+</div>
+
+<script type="module">
+  import { snapdom } from './snapdom.esm.js';
+
+  const button = document.createElement('button');
+  button.textContent = "Capture";
+  button.onclick = async () => {
+    const img = await snapdom.toPng(document.getElementById('captureMe'), 2);
+    document.body.appendChild(img);
+  };
+  document.body.appendChild(button);
+</script>
+```
+
+---
+
+## Limitations
+
+- External images must be CORS-accessible.
+- Fonts must be fully loaded before capturing (`document.fonts.ready` is automatically awaited).
+- Iframes are not captured.
+
+---
+
+## Benchmark
+
+`snapDOM` is not only highly accurate — it's also **extremely fast** at capturing large or complex DOM structures.
+
+In benchmark tests against popular libraries:
+
+| Element Size | Winner | Compared to `modern-screenshot` | Compared to `html2canvas` |
+|:------------:|:------:|:-------------------------------:|:-------------------------:|
+| 200×100 (Small) | `modern-screenshot` | 1.18× faster | 4.46× faster |
+| 400×300 (Modal) | `snapDOM` | 1.04× faster | 4.07× faster |
+| 1200×800 (Page view) | `snapDOM` | 2.43× faster | 5.74× faster |
+| 2000×1500 (Large scroll area) | `snapDOM` | 5.02× faster | 9.35× faster |
+| 4000×2000 (Very large) | `snapDOM` | 11.35× faster | 15.98× faster |
+
+✅ **Key insight**:  
+While `modern-screenshot` is yet slightly faster for very small elements, **snapDOM dramatically outperforms all others as the DOM size grows**.
+
+✅ **Perfect for:**  
+- Capturing full-page views
+- Capturing modal windows
+- Complex layouts with custom fonts, backgrounds, or shadow DOM
+
+---
+
+## License
+
+MIT © Juan Martín Muda - Zumerlab

package/dist/snapdom.js

@@ -0,0 +1,524 @@
+
+/*
+* snapdom
+* v.0.9.0
+* Author Juan Martin Muda
+* License MIT
+**/
+(() => {
+  // src/utils/cssTools.js
+  function getDefaultStyles() {
+    const defaultEl = document.createElement("div");
+    document.body.appendChild(defaultEl);
+    const styles = window.getComputedStyle(defaultEl);
+    const defaults = {};
+    for (let prop of styles) {
+      defaults[prop] = styles.getPropertyValue(prop);
+    }
+    document.body.removeChild(defaultEl);
+    return defaults;
+  }
+  function getStyleKey(style, defaults) {
+    const entries = [];
+    for (let prop of Array.from(style)) {
+      const value = style.getPropertyValue(prop);
+      if (value && value !== defaults[prop]) {
+        entries.push(`${prop}:${value}`);
+      }
+    }
+    return entries.sort().join(";");
+  }
+  function generateReusableCSSClasses(styleMap) {
+    const keySet = new Set(styleMap.values());
+    const classMap = /* @__PURE__ */ new Map();
+    let counter = 1;
+    for (const key of keySet) {
+      classMap.set(key, `c${counter++}`);
+    }
+    return classMap;
+  }
+
+  // src/modules/styles.js
+  function inlineAllStyles(source, clone, styleMap, defaults, cache) {
+    if (source.tagName === "STYLE") return;
+    if (!cache.has(source)) {
+      cache.set(source, window.getComputedStyle(source));
+    }
+    const style = cache.get(source);
+    const key = getStyleKey(style, defaults);
+    styleMap.set(clone, key);
+  }
+
+  // src/core/clone.js
+  function deepCloneWithShadow(node, styleMap, defaults, styleCache, nodeMap) {
+    if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "exclude") {
+      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;`;
+      return spacer;
+    }
+    if (node.tagName === "IFRAME") {
+      const fallback = document.createElement("div");
+      fallback.textContent = "";
+      fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.offsetHeight}px; background: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`;
+      return fallback;
+    }
+    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);
+      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;`;
+      clone2.appendChild(placeholder);
+      return clone2;
+    }
+    if (node.tagName === "CANVAS") {
+      const dataURL = node.toDataURL();
+      const img = document.createElement("img");
+      img.src = dataURL;
+      img.width = node.width;
+      img.height = node.height;
+      return img;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      const trimmed = node.textContent.trim();
+      if (!trimmed) return null;
+      if (node.parentElement?.shadowRoot) {
+        const tag = node.parentElement.tagName.toLowerCase();
+        if (customElements.get(tag)) return null;
+      }
+      return node.cloneNode(true);
+    }
+    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);
+    const frag = document.createDocumentFragment();
+    node.childNodes.forEach((child) => {
+      const clonedChild = deepCloneWithShadow(child, styleMap, defaults, styleCache, nodeMap);
+      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 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/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 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 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);
+    }
+  }
+
+  // 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"
+    ];
+    for (const pseudo of ["::before", "::after"]) {
+      try {
+        const style = window.getComputedStyle(source, pseudo);
+        const content = style.getPropertyValue("content");
+        if (content && content !== "none" && content !== '""' && content !== "''") {
+          const pseudoEl = document.createElement("span");
+          pseudoEl.className = `snapdom-pseudo-${pseudo.replace("::", "")}`;
+          let cleanContent = content.replace(/^\"|\"$/g, "");
+          if (cleanContent.startsWith("url(")) {
+            const match = cleanContent.match(/url\(["']?([^"')]+)["']?\)/);
+            if (match?.[1]) {
+              try {
+                const imgEl = document.createElement("img");
+                const dataUrl = await fetchImageAsDataURL(match[1]);
+                imgEl.src = dataUrl;
+                imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
+                pseudoEl.appendChild(imgEl);
+              } catch (e) {
+              }
+            }
+          } else {
+            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 {
+            clone.appendChild(pseudoEl);
+          }
+        }
+      } catch (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")
+    );
+    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);
+    }
+  }
+
+  // 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) {
+    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);
+    } catch (e) {
+      console.warn("deepCloneWithShadow 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);
+    } catch (e) {
+      console.warn("inlinePseudoElements failed:", e);
+    }
+    const keyToClass = generateReusableCSSClasses(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);
+        }
+      }
+      const bgImage = node.style?.backgroundImage;
+      node.removeAttribute("style");
+      if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+    }
+    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/core/capture.js
+  async function capture(element, scale = 1) {
+    let clone, classCSS, styleCache;
+    try {
+      ({ clone, classCSS, styleCache } = await prepareClone(element));
+    } catch (e) {
+      console.error("prepareClone failed:", e);
+      throw e;
+    }
+    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;
+    }
+  }
+
+  // src/api/snapdom.js
+  async function snapdom(el, scale = 1) {
+    return await capture(el, scale);
+  }
+  snapdom.toImg = async function(el, scale = 1) {
+    const dataURL = await snapdom(el, scale);
+    const img = new Image();
+    img.src = dataURL;
+    await img.decode();
+    return img;
+  };
+  snapdom.toCanvas = async function(el, scale = 1) {
+    const img = await snapdom.toImg(el, scale);
+    const canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0);
+    return canvas;
+  };
+  snapdom.toPng = async function(el, scale = 1) {
+    const canvas = await snapdom.toCanvas(el, scale);
+    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);
+    const img = new Image();
+    img.src = canvas.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);
+    const img = new Image();
+    img.src = canvas.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" });
+  };
+})();

package/dist/snapdom.min.js

@@ -0,0 +1 @@
+(()=>{function b(){let t=document.createElement("div");document.body.appendChild(t);let a=window.getComputedStyle(t),r={};for(let e of a)r[e]=a.getPropertyValue(e);return document.body.removeChild(t),r}function S(t,a){let r=[];for(let e of Array.from(t)){let i=t.getPropertyValue(e);i&&i!==a[e]&&r.push(`${e}:${i}`)}return r.sort().join(";")}function E(t){let a=new Set(t.values()),r=new Map,e=1;for(let i of a)r.set(i,`c${e++}`);return r}function w(t,a,r,e,i){if(t.tagName==="STYLE")return;i.has(t)||i.set(t,window.getComputedStyle(t));let o=i.get(t),c=S(o,e);r.set(a,c)}function y(t,a,r,e,i){if(t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("data-capture")==="exclude"){let s=document.createElement("div"),n=t.getBoundingClientRect();return s.style.cssText=`display: inline-block; width: ${n.width}px; height: ${n.height}px; visibility: hidden;`,s}if(t.tagName==="IFRAME"){let s=document.createElement("div");return s.textContent="",s.style.cssText=`width: ${t.offsetWidth}px; height: ${t.offsetHeight}px; background: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`,s}if(t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("data-capture")==="placeholder"){let s=t.cloneNode(!1);i.set(s,t),w(t,s,a,r,e);let n=document.createElement("div");return n.textContent=t.getAttribute("data-placeholder-text")||"",n.style.cssText="color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;",s.appendChild(n),s}if(t.tagName==="CANVAS"){let s=t.toDataURL(),n=document.createElement("img");return n.src=s,n.width=t.width,n.height=t.height,n}if(t.nodeType===Node.TEXT_NODE){if(!t.textContent.trim())return null;if(t.parentElement?.shadowRoot){let n=t.parentElement.tagName.toLowerCase();if(customElements.get(n))return null}return t.cloneNode(!0)}if(t.nodeType!==Node.ELEMENT_NODE)return t.cloneNode(!0);let o=t.cloneNode(!1);i.set(o,t),w(t,o,a,r,e);let c=document.createDocumentFragment();if(t.childNodes.forEach(s=>{let n=y(s,a,r,e,i);n&&c.appendChild(n)}),o.appendChild(c),t.shadowRoot){let s=Array.from(t.shadowRoot.children).filter(d=>d.tagName!=="STYLE").map(d=>y(d,a,r,e,i)).filter(Boolean),n=document.createDocumentFragment();s.forEach(d=>n.appendChild(d)),o.appendChild(n)}return o.querySelectorAll("style").forEach(s=>s.removeAttribute("style")),o.tagName==="STYLE"&&o.removeAttribute("style"),o}function h(t,a=3e3){return new Promise((r,e)=>{let i=setTimeout(()=>{e(new Error("Image load timed out"))},a),o=new Image;o.crossOrigin="anonymous",o.onload=async()=>{clearTimeout(i);try{await o.decode();let c=document.createElement("canvas");c.width=o.width,c.height=o.height,c.getContext("2d").drawImage(o,0,0);try{let n=c.toDataURL("image/png");r(n)}catch{e(new Error("CORS restrictions prevented image capture"))}}catch(c){e(c)}},o.onerror=c=>{clearTimeout(i),e(new Error("Failed to load image: "+(c.message||"Unknown error")))},o.src=t})}function u(t=0){return new Promise(a=>setTimeout(a,t))}async function v(t){let a=Array.from(t.querySelectorAll("img")),r=async e=>{let i=e.src;try{let o=await h(i);e.src=o,e.width||(e.width=e.naturalWidth||100),e.height||(e.height=e.naturalHeight||100)}catch{let o=document.createElement("div");o.style=`width: ${e.width||100}px; height: ${e.height||100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${e.height||100}px; color: #666; font-size: 12px;`,o.innerText="img",e.replaceWith(o)}};for(let e=0;e<a.length;e+=4){let i=a.slice(e,e+4).map(r);await Promise.allSettled(i),await u(1)}}async function A(t,a,r){let e=[[t,a]];for(;e.length;){let[i,o]=e.shift(),c=r.get(i)||window.getComputedStyle(i);r.has(i)||r.set(i,c);let s=c.getPropertyValue("background-image");if(s&&s.includes("url(")){let l=s.match(/url\(["']?([^"')]+)["']?\)/);if(l?.[1])try{let m=await h(l[1]);o.style.backgroundImage=`url(${m})`}catch{o.style.backgroundImage="none"}}let n=Array.from(i.children),d=Array.from(o.children);for(let l=0;l<Math.min(n.length,d.length);l++)e.push([n[l],d[l]]);await u(1)}}async function x(t,a){let r=["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"];for(let o of["::before","::after"])try{let c=window.getComputedStyle(t,o),s=c.getPropertyValue("content");if(s&&s!=="none"&&s!=='""'&&s!=="''"){let n=document.createElement("span");n.className=`snapdom-pseudo-${o.replace("::","")}`;let d=s.replace(/^\"|\"$/g,"");if(d.startsWith("url(")){let l=d.match(/url\(["']?([^"')]+)["']?\)/);if(l?.[1])try{let m=document.createElement("img"),f=await h(l[1]);m.src=f,m.style="display:block;width:100%;height:100%;object-fit:contain;",n.appendChild(m)}catch{}}else n.textContent=d;for(let l of r){let m=c.getPropertyValue(l);m&&(n.style[l]=m)}n.style.position||(n.style.position="absolute"),o==="::before"?a.insertBefore(n,a.firstChild):a.appendChild(n)}}catch{}let e=Array.from(t.children),i=Array.from(a.children).filter(o=>!o.classList.contains("snapdom-pseudo-before")&&!o.classList.contains("snapdom-pseudo-after"));for(let o=0;o<Math.min(e.length,i.length);o++)await x(e[o],i[o]),o%5===0&&await u(1)}function C(t){return t.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"").replace(/-+/g,"-").replace(/^-|-$/g,"")}function g(t){return{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"}[t]||t.replace(/%/g,"")}async function $(t=new WeakMap){await document.fonts.ready;let a=[];Array.from(document.styleSheets).forEach(o=>{try{Array.from(o.cssRules).forEach(c=>{c instanceof CSSFontFaceRule&&a.push(c.cssText)})}catch(c){console.warn("Could not access stylesheet rules:",c)}});let r=new Map;document.querySelectorAll("*").forEach(o=>{let c=t.get(o)||window.getComputedStyle(o);t.has(o)||t.set(o,c);let s=c.fontFamily?.split(",")[0]?.trim().replace(/["']/g,"");if(!s)return;let n=g(c.fontWeight||"400"),d=g(c.fontStyle||"normal"),l=g(c.fontStretch||"normal");r.has(s)||r.set(s,new Set),r.get(s).add(`${n}_${d}_${l}`)});let i=[...a];for(let[o,c]of r){let s=C(o);for(let n of c){let[d,l,m]=n.split("_"),f=`fg-f-${s}-w${d}-${l}-s${m}`,R=[`font-family:"${o}",sans-serif`,`font-weight:${d}`,`font-style:${l}`,`font-stretch:${m}%`].filter(Boolean).join(";");i.push(`.${f}{${R}}`)}}return i.push("*{font-family:inherit;font-weight:inherit;font-style:inherit;}"),i.join("")}function N(t,a,r){let e=r.get(a)||window.getComputedStyle(a),i=e.fontFamily?.split(",")[0]?.trim().replace(/["']/g,"");if(!i)return;let o=g(e.fontWeight||"400"),c=g(e.fontStyle||"normal"),s=g(e.fontStretch||"normal"),n=C(i);t.classList.add(`fg-f-${n}-w${o}-${c}-s${s}`)}async function I(t){let a=new Map,r=new WeakMap,e=new WeakMap,i;try{i=b()}catch(n){console.warn("getDefaultStyles failed:",n),i={}}let o;try{o=y(t,a,i,r,e)}catch(n){throw console.warn("deepCloneWithShadow failed:",n),n}try{await v(o)}catch(n){console.warn("inlineImages failed:",n)}try{await A(t,o,r)}catch(n){console.warn("inlineBackgroundImages failed:",n)}try{await x(t,o)}catch(n){console.warn("inlinePseudoElements failed:",n)}let c=E(a),s=Array.from(c.entries()).map(([n,d])=>`.${d}{${n}}`).join("");for(let[n,d]of a.entries()){if(n.tagName==="STYLE")continue;let l=c.get(d);if(l){n.classList.add(l);try{N(n,e.get(n),r)}catch(f){console.warn("applyFontClasses failed for node:",n,f)}}let m=n.style?.backgroundImage;n.removeAttribute("style"),m&&m!=="none"&&(n.style.backgroundImage=m)}return{clone:o,classCSS:s,styleCache:r}}function k(t){return t.replace(/>\s+</g,"><").replace(/\s{2,}/g," ").replace(/\n/g,"").trim()}async function L(t,a=1){let r,e,i;try{({clone:r,classCSS:e,styleCache:i}=await I(t))}catch(f){throw console.error("prepareClone failed:",f),f}let o=t.offsetWidth*a,c=t.offsetHeight*a,s="";try{s=await $(i)}catch(f){console.warn("inlineFonts failed:",f)}let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",o),n.setAttribute("height",c),n.setAttribute("viewBox",`0 0 ${o} ${c}`);let d=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");d.setAttribute("width","100%"),d.setAttribute("height","100%");let l=document.createElement("div");l.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),l.setAttribute("style",`width:${o}px;height:${c}px;`);let m=document.createElement("style");m.textContent=s+"svg{overflow:visible}"+e,l.appendChild(m),l.appendChild(r),d.appendChild(l),n.appendChild(d);try{let f=new XMLSerializer().serializeToString(n);return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(k(f))}`}catch(f){throw console.error("SVG serialization failed:",f),f}}async function p(t,a=1){return await L(t,a)}p.toImg=async function(t,a=1){let r=await p(t,a),e=new Image;return e.src=r,await e.decode(),e};p.toCanvas=async function(t,a=1){let r=await p.toImg(t,a),e=document.createElement("canvas");return e.width=r.width,e.height=r.height,e.getContext("2d").drawImage(r,0,0),e};p.toPng=async function(t,a=1){let r=await p.toCanvas(t,a),e=new Image;return e.src=r.toDataURL("image/png"),await e.decode(),e};p.toJpg=async function(t,a=1,r=.92){let e=await p.toCanvas(t,a),i=new Image;return i.src=e.toDataURL("image/jpeg",r),await i.decode(),i};p.toWebp=async function(t,a=1,r=.92){let e=await p.toCanvas(t,a),i=new Image;return i.src=e.toDataURL("image/webp",r),await i.decode(),i};p.toBlob=async function(t,a=1){let r=await p(t,a),e=decodeURIComponent(r.split(",")[1]);return new Blob([e],{type:"image/svg+xml"})};})();

package/dist/snapdom.min.mjs

@@ -0,0 +1 @@
+function b(){let t=document.createElement("div");document.body.appendChild(t);let a=window.getComputedStyle(t),r={};for(let e of a)r[e]=a.getPropertyValue(e);return document.body.removeChild(t),r}function S(t,a){let r=[];for(let e of Array.from(t)){let i=t.getPropertyValue(e);i&&i!==a[e]&&r.push(`${e}:${i}`)}return r.sort().join(";")}function E(t){let a=new Set(t.values()),r=new Map,e=1;for(let i of a)r.set(i,`c${e++}`);return r}function w(t,a,r,e,i){if(t.tagName==="STYLE")return;i.has(t)||i.set(t,window.getComputedStyle(t));let o=i.get(t),c=S(o,e);r.set(a,c)}function y(t,a,r,e,i){if(t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("data-capture")==="exclude"){let s=document.createElement("div"),n=t.getBoundingClientRect();return s.style.cssText=`display: inline-block; width: ${n.width}px; height: ${n.height}px; visibility: hidden;`,s}if(t.tagName==="IFRAME"){let s=document.createElement("div");return s.textContent="",s.style.cssText=`width: ${t.offsetWidth}px; height: ${t.offsetHeight}px; background: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`,s}if(t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("data-capture")==="placeholder"){let s=t.cloneNode(!1);i.set(s,t),w(t,s,a,r,e);let n=document.createElement("div");return n.textContent=t.getAttribute("data-placeholder-text")||"",n.style.cssText="color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;",s.appendChild(n),s}if(t.tagName==="CANVAS"){let s=t.toDataURL(),n=document.createElement("img");return n.src=s,n.width=t.width,n.height=t.height,n}if(t.nodeType===Node.TEXT_NODE){if(!t.textContent.trim())return null;if(t.parentElement?.shadowRoot){let n=t.parentElement.tagName.toLowerCase();if(customElements.get(n))return null}return t.cloneNode(!0)}if(t.nodeType!==Node.ELEMENT_NODE)return t.cloneNode(!0);let o=t.cloneNode(!1);i.set(o,t),w(t,o,a,r,e);let c=document.createDocumentFragment();if(t.childNodes.forEach(s=>{let n=y(s,a,r,e,i);n&&c.appendChild(n)}),o.appendChild(c),t.shadowRoot){let s=Array.from(t.shadowRoot.children).filter(d=>d.tagName!=="STYLE").map(d=>y(d,a,r,e,i)).filter(Boolean),n=document.createDocumentFragment();s.forEach(d=>n.appendChild(d)),o.appendChild(n)}return o.querySelectorAll("style").forEach(s=>s.removeAttribute("style")),o.tagName==="STYLE"&&o.removeAttribute("style"),o}function h(t,a=3e3){return new Promise((r,e)=>{let i=setTimeout(()=>{e(new Error("Image load timed out"))},a),o=new Image;o.crossOrigin="anonymous",o.onload=async()=>{clearTimeout(i);try{await o.decode();let c=document.createElement("canvas");c.width=o.width,c.height=o.height,c.getContext("2d").drawImage(o,0,0);try{let n=c.toDataURL("image/png");r(n)}catch{e(new Error("CORS restrictions prevented image capture"))}}catch(c){e(c)}},o.onerror=c=>{clearTimeout(i),e(new Error("Failed to load image: "+(c.message||"Unknown error")))},o.src=t})}function u(t=0){return new Promise(a=>setTimeout(a,t))}async function v(t){let a=Array.from(t.querySelectorAll("img")),r=async e=>{let i=e.src;try{let o=await h(i);e.src=o,e.width||(e.width=e.naturalWidth||100),e.height||(e.height=e.naturalHeight||100)}catch{let o=document.createElement("div");o.style=`width: ${e.width||100}px; height: ${e.height||100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${e.height||100}px; color: #666; font-size: 12px;`,o.innerText="img",e.replaceWith(o)}};for(let e=0;e<a.length;e+=4){let i=a.slice(e,e+4).map(r);await Promise.allSettled(i),await u(1)}}async function A(t,a,r){let e=[[t,a]];for(;e.length;){let[i,o]=e.shift(),c=r.get(i)||window.getComputedStyle(i);r.has(i)||r.set(i,c);let s=c.getPropertyValue("background-image");if(s&&s.includes("url(")){let l=s.match(/url\(["']?([^"')]+)["']?\)/);if(l?.[1])try{let m=await h(l[1]);o.style.backgroundImage=`url(${m})`}catch{o.style.backgroundImage="none"}}let n=Array.from(i.children),d=Array.from(o.children);for(let l=0;l<Math.min(n.length,d.length);l++)e.push([n[l],d[l]]);await u(1)}}async function x(t,a){let r=["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"];for(let o of["::before","::after"])try{let c=window.getComputedStyle(t,o),s=c.getPropertyValue("content");if(s&&s!=="none"&&s!=='""'&&s!=="''"){let n=document.createElement("span");n.className=`snapdom-pseudo-${o.replace("::","")}`;let d=s.replace(/^\"|\"$/g,"");if(d.startsWith("url(")){let l=d.match(/url\(["']?([^"')]+)["']?\)/);if(l?.[1])try{let m=document.createElement("img"),f=await h(l[1]);m.src=f,m.style="display:block;width:100%;height:100%;object-fit:contain;",n.appendChild(m)}catch{}}else n.textContent=d;for(let l of r){let m=c.getPropertyValue(l);m&&(n.style[l]=m)}n.style.position||(n.style.position="absolute"),o==="::before"?a.insertBefore(n,a.firstChild):a.appendChild(n)}}catch{}let e=Array.from(t.children),i=Array.from(a.children).filter(o=>!o.classList.contains("snapdom-pseudo-before")&&!o.classList.contains("snapdom-pseudo-after"));for(let o=0;o<Math.min(e.length,i.length);o++)await x(e[o],i[o]),o%5===0&&await u(1)}function C(t){return t.toLowerCase().replace(/\s+/g,"-").replace(/[^a-z0-9-]/g,"").replace(/-+/g,"-").replace(/^-|-$/g,"")}function g(t){return{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"}[t]||t.replace(/%/g,"")}async function $(t=new WeakMap){await document.fonts.ready;let a=[];Array.from(document.styleSheets).forEach(o=>{try{Array.from(o.cssRules).forEach(c=>{c instanceof CSSFontFaceRule&&a.push(c.cssText)})}catch(c){console.warn("Could not access stylesheet rules:",c)}});let r=new Map;document.querySelectorAll("*").forEach(o=>{let c=t.get(o)||window.getComputedStyle(o);t.has(o)||t.set(o,c);let s=c.fontFamily?.split(",")[0]?.trim().replace(/["']/g,"");if(!s)return;let n=g(c.fontWeight||"400"),d=g(c.fontStyle||"normal"),l=g(c.fontStretch||"normal");r.has(s)||r.set(s,new Set),r.get(s).add(`${n}_${d}_${l}`)});let i=[...a];for(let[o,c]of r){let s=C(o);for(let n of c){let[d,l,m]=n.split("_"),f=`fg-f-${s}-w${d}-${l}-s${m}`,R=[`font-family:"${o}",sans-serif`,`font-weight:${d}`,`font-style:${l}`,`font-stretch:${m}%`].filter(Boolean).join(";");i.push(`.${f}{${R}}`)}}return i.push("*{font-family:inherit;font-weight:inherit;font-style:inherit;}"),i.join("")}function N(t,a,r){let e=r.get(a)||window.getComputedStyle(a),i=e.fontFamily?.split(",")[0]?.trim().replace(/["']/g,"");if(!i)return;let o=g(e.fontWeight||"400"),c=g(e.fontStyle||"normal"),s=g(e.fontStretch||"normal"),n=C(i);t.classList.add(`fg-f-${n}-w${o}-${c}-s${s}`)}async function I(t){let a=new Map,r=new WeakMap,e=new WeakMap,i;try{i=b()}catch(n){console.warn("getDefaultStyles failed:",n),i={}}let o;try{o=y(t,a,i,r,e)}catch(n){throw console.warn("deepCloneWithShadow failed:",n),n}try{await v(o)}catch(n){console.warn("inlineImages failed:",n)}try{await A(t,o,r)}catch(n){console.warn("inlineBackgroundImages failed:",n)}try{await x(t,o)}catch(n){console.warn("inlinePseudoElements failed:",n)}let c=E(a),s=Array.from(c.entries()).map(([n,d])=>`.${d}{${n}}`).join("");for(let[n,d]of a.entries()){if(n.tagName==="STYLE")continue;let l=c.get(d);if(l){n.classList.add(l);try{N(n,e.get(n),r)}catch(f){console.warn("applyFontClasses failed for node:",n,f)}}let m=n.style?.backgroundImage;n.removeAttribute("style"),m&&m!=="none"&&(n.style.backgroundImage=m)}return{clone:o,classCSS:s,styleCache:r}}function k(t){return t.replace(/>\s+</g,"><").replace(/\s{2,}/g," ").replace(/\n/g,"").trim()}async function L(t,a=1){let r,e,i;try{({clone:r,classCSS:e,styleCache:i}=await I(t))}catch(f){throw console.error("prepareClone failed:",f),f}let o=t.offsetWidth*a,c=t.offsetHeight*a,s="";try{s=await $(i)}catch(f){console.warn("inlineFonts failed:",f)}let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",o),n.setAttribute("height",c),n.setAttribute("viewBox",`0 0 ${o} ${c}`);let d=document.createElementNS("http://www.w3.org/2000/svg","foreignObject");d.setAttribute("width","100%"),d.setAttribute("height","100%");let l=document.createElement("div");l.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),l.setAttribute("style",`width:${o}px;height:${c}px;`);let m=document.createElement("style");m.textContent=s+"svg{overflow:visible}"+e,l.appendChild(m),l.appendChild(r),d.appendChild(l),n.appendChild(d);try{let f=new XMLSerializer().serializeToString(n);return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(k(f))}`}catch(f){throw console.error("SVG serialization failed:",f),f}}async function p(t,a=1){return await L(t,a)}p.toImg=async function(t,a=1){let r=await p(t,a),e=new Image;return e.src=r,await e.decode(),e};p.toCanvas=async function(t,a=1){let r=await p.toImg(t,a),e=document.createElement("canvas");return e.width=r.width,e.height=r.height,e.getContext("2d").drawImage(r,0,0),e};p.toPng=async function(t,a=1){let r=await p.toCanvas(t,a),e=new Image;return e.src=r.toDataURL("image/png"),await e.decode(),e};p.toJpg=async function(t,a=1,r=.92){let e=await p.toCanvas(t,a),i=new Image;return i.src=e.toDataURL("image/jpeg",r),await i.decode(),i};p.toWebp=async function(t,a=1,r=.92){let e=await p.toCanvas(t,a),i=new Image;return i.src=e.toDataURL("image/webp",r),await i.decode(),i};p.toBlob=async function(t,a=1){let r=await p(t,a),e=decodeURIComponent(r.split(",")[1]);return new Blob([e],{type:"image/svg+xml"})};export{p as snapdom};

package/dist/snapdom.mjs

@@ -0,0 +1,526 @@
+
+/*
+* snapdom
+* v.0.9.0
+* Author Juan Martin Muda
+* License MIT
+**/
+
+// src/utils/cssTools.js
+function getDefaultStyles() {
+  const defaultEl = document.createElement("div");
+  document.body.appendChild(defaultEl);
+  const styles = window.getComputedStyle(defaultEl);
+  const defaults = {};
+  for (let prop of styles) {
+    defaults[prop] = styles.getPropertyValue(prop);
+  }
+  document.body.removeChild(defaultEl);
+  return defaults;
+}
+function getStyleKey(style, defaults) {
+  const entries = [];
+  for (let prop of Array.from(style)) {
+    const value = style.getPropertyValue(prop);
+    if (value && value !== defaults[prop]) {
+      entries.push(`${prop}:${value}`);
+    }
+  }
+  return entries.sort().join(";");
+}
+function generateReusableCSSClasses(styleMap) {
+  const keySet = new Set(styleMap.values());
+  const classMap = /* @__PURE__ */ new Map();
+  let counter = 1;
+  for (const key of keySet) {
+    classMap.set(key, `c${counter++}`);
+  }
+  return classMap;
+}
+
+// src/modules/styles.js
+function inlineAllStyles(source, clone, styleMap, defaults, cache) {
+  if (source.tagName === "STYLE") return;
+  if (!cache.has(source)) {
+    cache.set(source, window.getComputedStyle(source));
+  }
+  const style = cache.get(source);
+  const key = getStyleKey(style, defaults);
+  styleMap.set(clone, key);
+}
+
+// src/core/clone.js
+function deepCloneWithShadow(node, styleMap, defaults, styleCache, nodeMap) {
+  if (node.nodeType === Node.ELEMENT_NODE && node.getAttribute("data-capture") === "exclude") {
+    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;`;
+    return spacer;
+  }
+  if (node.tagName === "IFRAME") {
+    const fallback = document.createElement("div");
+    fallback.textContent = "";
+    fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.offsetHeight}px; background: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`;
+    return fallback;
+  }
+  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);
+    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;`;
+    clone2.appendChild(placeholder);
+    return clone2;
+  }
+  if (node.tagName === "CANVAS") {
+    const dataURL = node.toDataURL();
+    const img = document.createElement("img");
+    img.src = dataURL;
+    img.width = node.width;
+    img.height = node.height;
+    return img;
+  }
+  if (node.nodeType === Node.TEXT_NODE) {
+    const trimmed = node.textContent.trim();
+    if (!trimmed) return null;
+    if (node.parentElement?.shadowRoot) {
+      const tag = node.parentElement.tagName.toLowerCase();
+      if (customElements.get(tag)) return null;
+    }
+    return node.cloneNode(true);
+  }
+  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);
+  const frag = document.createDocumentFragment();
+  node.childNodes.forEach((child) => {
+    const clonedChild = deepCloneWithShadow(child, styleMap, defaults, styleCache, nodeMap);
+    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 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/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 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 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);
+  }
+}
+
+// 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"
+  ];
+  for (const pseudo of ["::before", "::after"]) {
+    try {
+      const style = window.getComputedStyle(source, pseudo);
+      const content = style.getPropertyValue("content");
+      if (content && content !== "none" && content !== '""' && content !== "''") {
+        const pseudoEl = document.createElement("span");
+        pseudoEl.className = `snapdom-pseudo-${pseudo.replace("::", "")}`;
+        let cleanContent = content.replace(/^\"|\"$/g, "");
+        if (cleanContent.startsWith("url(")) {
+          const match = cleanContent.match(/url\(["']?([^"')]+)["']?\)/);
+          if (match?.[1]) {
+            try {
+              const imgEl = document.createElement("img");
+              const dataUrl = await fetchImageAsDataURL(match[1]);
+              imgEl.src = dataUrl;
+              imgEl.style = "display:block;width:100%;height:100%;object-fit:contain;";
+              pseudoEl.appendChild(imgEl);
+            } catch (e) {
+            }
+          }
+        } else {
+          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 {
+          clone.appendChild(pseudoEl);
+        }
+      }
+    } catch (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")
+  );
+  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);
+  }
+}
+
+// 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) {
+  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);
+  } catch (e) {
+    console.warn("deepCloneWithShadow 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);
+  } catch (e) {
+    console.warn("inlinePseudoElements failed:", e);
+  }
+  const keyToClass = generateReusableCSSClasses(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);
+      }
+    }
+    const bgImage = node.style?.backgroundImage;
+    node.removeAttribute("style");
+    if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+  }
+  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/core/capture.js
+async function capture(element, scale = 1) {
+  let clone, classCSS, styleCache;
+  try {
+    ({ clone, classCSS, styleCache } = await prepareClone(element));
+  } catch (e) {
+    console.error("prepareClone failed:", e);
+    throw e;
+  }
+  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;
+  }
+}
+
+// src/api/snapdom.js
+async function snapdom(el, scale = 1) {
+  return await capture(el, scale);
+}
+snapdom.toImg = async function(el, scale = 1) {
+  const dataURL = await snapdom(el, scale);
+  const img = new Image();
+  img.src = dataURL;
+  await img.decode();
+  return img;
+};
+snapdom.toCanvas = async function(el, scale = 1) {
+  const img = await snapdom.toImg(el, scale);
+  const canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(img, 0, 0);
+  return canvas;
+};
+snapdom.toPng = async function(el, scale = 1) {
+  const canvas = await snapdom.toCanvas(el, scale);
+  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);
+  const img = new Image();
+  img.src = canvas.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);
+  const img = new Image();
+  img.src = canvas.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" });
+};
+export {
+  snapdom
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@zumer/snapdom",
+  "version": "0.9.0",
+  "description": "snapDOM captures DOM elements as images with exceptional speed and minimal overhead. Designed to avoid bottlenecks and long tasks.",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "npx vitest run --browser.headless --reporter=verbose",
+    "test:benchmark": "npx vitest bench --browser.headless --watch=false",
+    "compile-browser": "npx @zumerbox/build -n snapdom -j src/index.js",
+    "compile-esm": "npx @zumerbox/build -n snapdom -j src/index.js -p neutral -x",
+    "compile": "npm run compile-browser && npm run compile-esm",
+    "build": "npm run compile && npm pack",
+    "bump": "npx @zumerbox/bump && npx @zumerbox/changelog",
+    "prebuild": "git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zumerlab/snapdom.git"
+  },
+  "files": [
+    "dist/snapdom.js",
+    "dist/snapdom.min.js",
+    "dist/snapdom.min.mjs",
+    "dist/snapdom.mjs",
+    "README.md"
+  ],
+  "keywords": [
+    "zumerlab",
+    "snapDOM",
+    "screenshot",
+    "engine",
+    "html capture",
+    "dom capture",
+    "html to image",
+    "dom to image",
+    "html screenshot",
+    "capture element",
+    "html snapshot",
+    "element screenshot",
+    "web capture",
+    "snapshot tool",
+    "render html",
+    "capture dom",
+    "web snapshot",
+    "html export",
+    "dom snapshot",
+    "html to png",
+    "html to svg"
+  ],
+  "author": "Juan Martin Muda",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zumerlab/snapdom/issues"
+  },
+  "homepage": "https://github.com/zumerlab/snapdom#readme",
+  "devDependencies": {
+    "@vitest/browser": "^3.1.2",
+    "playwright": "^1.52.0"
+  }
+}

package/src/index.js

@@ -0,0 +1,6 @@
+/**
+ * @file snapdom.js
+ */
+
+export { snapdom } from './api/snapdom';
+