@zumer/snapdom 1.9.6-dev.2 → 1.9.7

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.6-dev.2
+* v.1.9.7
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -223,13 +223,10 @@ function parseContent(content) {
   return clean;
 }
 function extractURL(value) {
-  const urlStart = value.indexOf("url(");
-  if (urlStart === -1) return null;
-  let url = value.slice(urlStart + 4).trim();
-  if (url.endsWith(")")) url = url.slice(0, -1).trim();
-  if (url.startsWith('"') && url.endsWith('"') || url.startsWith("'") && url.endsWith("'")) {
-    url = url.slice(1, -1);
-  }
+  const match = value.match(/url\((['"]?)(.*?)(\1)\)/);
+  if (!match) return null;
+  const url = match[2].trim();
+  if (url.startsWith("#")) return null;
   return url;
 }
 function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
@@ -266,19 +263,15 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
         try {
           return await fetchBlobAsDataURL(proxied);
         } catch {
-          console.error(`[SnapDOM - fetchImage] Proxy fallback failed for: ${url}`);
-          throw new Error("CORS restrictions prevented image capture (even via proxy)");
+          throw new Error("[SnapDOM - fetchImage] CORS restrictions prevented image capture (even via proxy)");
         }
       } else {
-        console.error(`[SnapDOM - fetchImage] No valid proxy URL provided for fallback: ${url}`);
-        throw new Error("Fetch fallback failed and no proxy provided");
+        throw new Error("[SnapDOM - fetchImage] Fetch fallback failed and no proxy provided");
       }
     }
   }
   const crossOriginValue = getCrossOriginMode(src);
-  console.log(`[SnapDOM - fetchImage] Start loading image: ${src} with crossOrigin=${crossOriginValue}`);
   if (cache.image.has(src)) {
-    console.log(`[SnapDOM - fetchImage] Cache hit for: ${src}`);
     return Promise.resolve(cache.image.get(src));
   }
   const isDataURI = src.startsWith("data:image/");
@@ -305,8 +298,7 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
   }
   return new Promise((resolve, reject) => {
     const timeoutId = setTimeout(() => {
-      console.log(`[SnapDOM - fetchImage] Timeout after ${timeout}ms for image: ${src}`);
-      reject(new Error("Image load timed out"));
+      reject(new Error("[SnapDOM - fetchImage] Image load timed out"));
     }, timeout);
     const image = new Image();
     image.crossOrigin = crossOriginValue;
@@ -436,158 +428,157 @@ function inlineAllStyles(source, clone, compress) {
 }
 
 // src/core/clone.js
-function isSlotElement(node) {
-  return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
-}
 function deepClone(node, compress, options = {}, originalRoot) {
-  if (!node) {
-    throw new Error("Invalid node: node is null or undefined");
-  }
-  try {
-    if (node.nodeType === Node.TEXT_NODE) {
-      return node.cloneNode(true);
-    }
-    if (node.nodeType !== Node.ELEMENT_NODE) {
-      return node.cloneNode(true);
-    }
-    if (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 (options.exclude && Array.isArray(options.exclude)) {
-      for (const selector of options.exclude) {
-        try {
-          if (node.matches?.(selector)) {
-            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;
-          }
-        } catch (err) {
-          console.warn(`Invalid selector in exclude option: ${selector}`, err);
-        }
-      }
-    }
-    if (typeof options.filter === "function") {
+  if (!node) throw new Error("Invalid node");
+  const clonedAssignedNodes = /* @__PURE__ */ new Set();
+  let pendingSelectValue = null;
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.cloneNode(true);
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return node.cloneNode(true);
+  }
+  if (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 (options.exclude && Array.isArray(options.exclude)) {
+    for (const selector of options.exclude) {
       try {
-        if (!options.filter(node, originalRoot || node)) {
+        if (node.matches?.(selector)) {
           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;`;
+          spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
           return spacer;
         }
       } catch (err) {
-        console.warn("Error in filter function:", err);
+        console.warn(`Invalid selector in exclude option: ${selector}`, err);
       }
     }
-    if (node.tagName === "IFRAME") {
-      const fallback = document.createElement("div");
-      fallback.textContent = "";
-      fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.offsetHeight}px; background-image: 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.getAttribute("data-capture") === "placeholder") {
-      const clone2 = node.cloneNode(false);
-      cache.preNodeMap.set(clone2, node);
-      inlineAllStyles(node, clone2, 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;`;
-      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;
-      cache.preNodeMap.set(img, node);
-      inlineAllStyles(node, img, compress);
-      return img;
-    }
-    let clone;
+  }
+  if (typeof options.filter === "function") {
     try {
-      clone = node.cloneNode(false);
-      if (!clone) {
-        throw new Error("Failed to clone node: cloneNode returned null");
+      if (!options.filter(node, originalRoot || node)) {
+        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;
       }
-      cache.preNodeMap.set(clone, node);
     } catch (err) {
-      console.error("[Snapdom] Failed to clone node:", node, err);
-      throw err;
+      console.warn("Error in filter function:", err);
     }
-    if (node instanceof HTMLInputElement) {
-      clone.value = node.value;
-      clone.setAttribute("value", node.value);
-      if (node.checked !== void 0) {
-        clone.checked = node.checked;
-        if (node.checked) clone.setAttribute("checked", "");
-      }
-    } else if (node instanceof HTMLTextAreaElement) {
-      const rect = node.getBoundingClientRect();
-      clone.textContent = node.value;
-      clone.style.width = `${rect.width}px`;
-      clone.style.height = `${rect.height}px`;
-    } else if (node instanceof HTMLSelectElement) {
-      clone.value = node.value;
-      Array.from(clone.options).forEach((opt) => {
-        if (opt.value === node.value) {
-          opt.setAttribute("selected", "");
-        } else {
-          opt.removeAttribute("selected");
-        }
-      });
+  }
+  if (node.tagName === "IFRAME") {
+    const fallback = document.createElement("div");
+    fallback.style.cssText = `width:${node.offsetWidth}px;height:${node.offsetHeight}px;background-image: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.getAttribute("data-capture") === "placeholder") {
+    const clone2 = node.cloneNode(false);
+    cache.preNodeMap.set(clone2, node);
+    inlineAllStyles(node, clone2, 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;`;
+    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;
+    cache.preNodeMap.set(img, node);
+    inlineAllStyles(node, img, compress);
+    return img;
+  }
+  let clone;
+  try {
+    clone = node.cloneNode(false);
+    cache.preNodeMap.set(clone, node);
+  } catch (err) {
+    console.error("[Snapdom] Failed to clone node:", node, err);
+    throw err;
+  }
+  if (node instanceof HTMLTextAreaElement) {
+    clone.textContent = node.value;
+    clone.value = node.value;
+    const rect = node.getBoundingClientRect();
+    clone.style.width = `${rect.width}px`;
+    clone.style.height = `${rect.height}px`;
+    return clone;
+  }
+  if (node instanceof HTMLInputElement) {
+    clone.value = node.value;
+    clone.setAttribute("value", node.value);
+    if (node.checked !== void 0) {
+      clone.checked = node.checked;
+      if (node.checked) clone.setAttribute("checked", "");
+      if (node.indeterminate) clone.indeterminate = node.indeterminate;
     }
-    inlineAllStyles(node, clone, compress);
-    try {
-      if (isSlotElement(node)) {
-        const assigned = node.assignedNodes?.({ flatten: true }) || [];
-        const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
-        const fragment = document.createDocumentFragment();
-        for (const child of nodesToClone) {
-          try {
-            const clonedChild = deepClone(child, compress, options, originalRoot || node);
-            if (clonedChild) fragment.appendChild(clonedChild);
-          } catch (err) {
-            console.warn("[Snapdom] Failed to clone slot content:", child, err);
-          }
-        }
-        return fragment;
-      } else {
-        const baseChildren = node.shadowRoot ? node.shadowRoot.childNodes : node.childNodes;
-        for (const child of baseChildren) {
-          try {
-            const clonedChild = deepClone(child, compress, options, originalRoot || node);
-            if (clonedChild) clone.appendChild(clonedChild);
-          } catch (err) {
-            console.warn("[Snapdom] Failed to clone child node:", child, err);
+  }
+  if (node instanceof HTMLSelectElement) {
+    pendingSelectValue = node.value;
+  }
+  inlineAllStyles(node, clone, compress);
+  if (node.shadowRoot) {
+    const hasSlot = Array.from(node.shadowRoot.querySelectorAll("slot")).length > 0;
+    if (hasSlot) {
+      for (const child of node.shadowRoot.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+          const cssText = child.textContent || "";
+          if (cssText.trim() && compress) {
+            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
+            cache.preStyle.set(child, cssText);
           }
         }
-        if (node.shadowRoot && node.childNodes.length > 0 && !node.shadowRoot.querySelector("slot")) {
-          const lightDomContent = document.createDocumentFragment();
-          for (const child of node.childNodes) {
-            try {
-              const clonedChild = deepClone(child, compress, options, originalRoot || node);
-              if (clonedChild) lightDomContent.appendChild(clonedChild);
-            } catch (err) {
-              console.warn("[Snapdom] Failed to clone light DOM child:", child, err);
-            }
+      }
+    } else {
+      const shadowFrag = document.createDocumentFragment();
+      for (const child of node.shadowRoot.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+          const cssText = child.textContent || "";
+          if (cssText.trim() && compress) {
+            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
+            cache.preStyle.set(child, cssText);
           }
-          clone.appendChild(lightDomContent);
+          continue;
         }
+        const clonedChild = deepClone(child, compress, options, originalRoot || node);
+        if (clonedChild) shadowFrag.appendChild(clonedChild);
       }
-    } catch (err) {
-      console.error("[Snapdom] Error cloning children:", err);
-      throw err;
+      clone.appendChild(shadowFrag);
     }
-    return clone;
-  } catch (error) {
-    console.error("[Snapdom] Error in deepClone:", error);
-    throw error;
   }
+  if (node.tagName === "SLOT") {
+    const assigned = node.assignedNodes?.({ flatten: true }) || [];
+    const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
+    const fragment = document.createDocumentFragment();
+    for (const child of nodesToClone) {
+      const clonedChild = deepClone(child, compress, options, originalRoot || node);
+      if (clonedChild) fragment.appendChild(clonedChild);
+    }
+    return fragment;
+  }
+  for (const child of node.childNodes) {
+    if (clonedAssignedNodes.has(child)) continue;
+    const clonedChild = deepClone(child, compress, options, originalRoot || node);
+    if (clonedChild) clone.appendChild(clonedChild);
+  }
+  if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
+    clone.value = pendingSelectValue;
+    for (const opt of clone.options) {
+      if (opt.value === pendingSelectValue) {
+        opt.setAttribute("selected", "");
+      } else {
+        opt.removeAttribute("selected");
+      }
+    }
+  }
+  return clone;
 }
 
 // src/modules/iconFonts.js
@@ -747,6 +738,13 @@ async function embedCustomFonts({ preCached = false } = {}) {
             const family = rule.style.getPropertyValue("font-family");
             if (!src || isIconFont(family)) continue;
             const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
+            const localRegex = /local\((["']?)[^)]+?\1\)/g;
+            const hasURL = !!src.match(urlRegex);
+            const hasLocal = !!src.match(localRegex);
+            if (!hasURL && hasLocal) {
+              finalCSS += `@font-face{font-family:${family};src:${src};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
+              continue;
+            }
             let inlinedSrc = src;
             const matches = Array.from(src.matchAll(urlRegex));
             for (const match of matches) {
@@ -778,13 +776,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
               }
             }
-            finalCSS += `@font-face {
-  font-family: ${family};
-  src: ${inlinedSrc};
-  font-style: ${rule.style.getPropertyValue("font-style") || "normal"};
-  font-weight: ${rule.style.getPropertyValue("font-weight") || "normal"};
-}
-`;
+            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
           }
         }
       }
@@ -817,13 +809,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
           }
         }
       }
-      finalCSS += `@font-face {
-  font-family: '${font.family}';
-  src: url(${b64});
-  font-style: ${font.style || "normal"};
-  font-weight: ${font.weight || "normal"};
-}
-`;
+      finalCSS += `@font-face{font-family:'${font.family}';src:url(${b64});font-style:${font.style || "normal"};font-weight:${font.weight || "normal"};}`;
     }
   }
   if (finalCSS) {
@@ -861,9 +847,9 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
         const span = document.createElement("span");
         span.textContent = first;
         span.dataset.snapdomPseudo = "::first-letter";
-        const snapshot = snapshotComputedStyle(style);
-        const key = getStyleKey(snapshot, "span", compress);
-        cache.preStyleMap.set(span, key);
+        const snapshot2 = snapshotComputedStyle(style);
+        const key2 = getStyleKey(snapshot2, "span", compress);
+        cache.preStyleMap.set(span, key2);
         const restNode = document.createTextNode(rest);
         clone.replaceChild(restNode, textNode);
         clone.insertBefore(span, restNode);
@@ -872,59 +858,73 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
       const content = style.getPropertyValue("content");
       const bg = style.getPropertyValue("background-image");
       const bgColor = style.getPropertyValue("background-color");
+      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 display = style.getPropertyValue("display");
+      const width = parseFloat(style.getPropertyValue("width"));
+      const height = parseFloat(style.getPropertyValue("height"));
+      const borderStyle = style.getPropertyValue("border-style");
+      const transform = style.getPropertyValue("transform");
+      const isIconFont2 = isIconFont(fontFamily);
+      let cleanContent;
+      if (/counter\s*\(|counters\s*\(/.test(content)) {
+        cleanContent = "- ";
+      } else {
+        cleanContent = parseContent(content);
+      }
       const hasContent = content !== "none";
+      const hasExplicitContent = hasContent && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
-      if (hasContent || hasBg || hasBgColor) {
-        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.dataset.snapdomPseudo = pseudo;
-        const snapshot = snapshotComputedStyle(style);
-        const key = getStyleKey(snapshot, "span", compress);
-        cache.preStyleMap.set(pseudoEl, key);
-        const isIconFont2 = isIconFont(fontFamily);
-        const cleanContent = parseContent(content);
-        if (isIconFont2 && cleanContent.length === 1) {
-          const imgEl = document.createElement("img");
-          imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
-          imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
-          pseudoEl.appendChild(imgEl);
-        } else if (cleanContent.startsWith("url(")) {
-          const rawUrl = extractURL(cleanContent);
-          if (rawUrl && rawUrl.trim() !== "") {
-            try {
-              const imgEl = document.createElement("img");
-              const dataUrl = await fetchImage(safeEncodeURI(rawUrl, { useProxy }));
-              imgEl.src = dataUrl;
-              imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
-              pseudoEl.appendChild(imgEl);
-            } catch (e) {
-              console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
-            }
-          }
-        } else if (!isIconFont2 && cleanContent && cleanContent !== "none") {
-          pseudoEl.textContent = cleanContent;
-        }
-        if (hasBg) {
+      const hasBox = display !== "inline" && (width > 0 || height > 0);
+      const hasBorder = borderStyle && borderStyle !== "none";
+      const hasTransform = transform && transform !== "none";
+      const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
+      if (!shouldRender) continue;
+      const pseudoEl = document.createElement("span");
+      pseudoEl.dataset.snapdomPseudo = pseudo;
+      const snapshot = snapshotComputedStyle(style);
+      const key = getStyleKey(snapshot, "span", compress);
+      cache.preStyleMap.set(pseudoEl, key);
+      if (isIconFont2 && cleanContent.length === 1) {
+        const imgEl = document.createElement("img");
+        imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
+        imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
+        pseudoEl.appendChild(imgEl);
+      } else if (cleanContent.startsWith("url(")) {
+        const rawUrl = extractURL(cleanContent);
+        if (rawUrl && rawUrl.trim() !== "") {
           try {
-            const bgSplits = splitBackgroundImage(bg);
-            const newBgParts = await Promise.all(
-              bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
-            );
-            pseudoEl.style.backgroundImage = newBgParts.join(", ");
+            const imgEl = document.createElement("img");
+            const dataUrl = await fetchImage(safeEncodeURI(rawUrl, { useProxy }));
+            imgEl.src = dataUrl;
+            imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
+            pseudoEl.appendChild(imgEl);
           } catch (e) {
-            console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
+            console.error(`[snapdom] Error in pseudo ${pseudo} for`, source, e);
           }
         }
-        if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-        const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
-        const hasVisibleBox = hasContent2 || hasBg || hasBgColor;
-        if (!hasVisibleBox) continue;
-        pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
+      } else if (!isIconFont2 && hasExplicitContent) {
+        pseudoEl.textContent = cleanContent;
       }
+      if (hasBg) {
+        try {
+          const bgSplits = splitBackgroundImage(bg);
+          const newBgParts = await Promise.all(
+            bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
+          );
+          pseudoEl.style.backgroundImage = newBgParts.join(", ");
+        } catch (e) {
+          console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
+        }
+      }
+      if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
+      const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
+      const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
+      if (!hasVisibleBox) continue;
+      pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
     } catch (e) {
       console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
     }
@@ -1194,8 +1194,6 @@ async function captureDOM(element, options = {}) {
         const existingTransform = clone.style.transform || "";
         const scaleTransform = `scale(${scaleX}, ${scaleY})`;
         clone.style.transform = `${scaleTransform} ${existingTransform}`.trim();
-      } else if (hasScale && isSafari()) {
-        clone.style.scale = `${scale}`;
       }
       const svgNS = "http://www.w3.org/2000/svg";
       const fo = document.createElementNS(svgNS, "foreignObject");
@@ -1224,29 +1222,41 @@ async function toImg(url, { dpr = 1, scale = 1 }) {
   const img = new Image();
   img.src = url;
   await img.decode();
-  if (isSafari) {
-    img.width = img.width * scale;
-    img.height = img.height * scale;
-  } else {
-    img.width = img.width / scale;
-    img.height = img.height / scale;
-  }
+  img.width = img.width * scale;
+  img.height = img.height * scale;
   return img;
 }
 async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
   const img = new Image();
   img.src = url;
+  img.crossOrigin = "anonymous";
+  img.loading = "eager";
+  img.decoding = "sync";
+  const isSafariBrowser = isSafari();
+  let appended = false;
+  if (isSafariBrowser) {
+    document.body.appendChild(img);
+    appended = true;
+  }
   await img.decode();
-  const canvas = document.createElement("canvas");
+  if (isSafariBrowser) {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  if (img.width === 0 || img.height === 0) {
+    if (appended) img.remove();
+    throw new Error("Image failed to load or has no dimensions");
+  }
   const width = img.width * scale;
   const height = img.height * scale;
+  const canvas = document.createElement("canvas");
   canvas.width = Math.ceil(width * dpr);
   canvas.height = Math.ceil(height * dpr);
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
   const ctx = canvas.getContext("2d");
   ctx.scale(dpr, dpr);
   ctx.drawImage(img, 0, 0, width, height);
-  canvas.style.width = `${width}px`;
-  canvas.style.height = `${height}px`;
+  if (appended) img.remove();
   return canvas;
 }
 async function toBlob(url, {
@@ -1293,7 +1303,7 @@ async function toRasterImg(url, { dpr = 1, scale = 1, backgroundColor, quality }
   img.style.height = `${canvas.height / dpr}px`;
   return img;
 }
-async function download(url, { dpr = 1, scale = 1, backgroundColor = "#fff", format = "png", filename = "capture" } = {}) {
+async function download(url, { dpr = 1, scale = 1, backgroundColor, format = "png", filename = "snapDOM" } = {}) {
   if (format === "svg") {
     const blob = await toBlob(url);
     const objectURL = URL.createObjectURL(blob);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.6-dev.2",
+  "version": "1.9.7",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",
@@ -15,9 +15,6 @@
     "bump": "npx @zumerbox/bump && npx @zumerbox/changelog",
     "prebuild": "git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags"
   },
-  "engines": {
-    "node": ">= 20"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zumerlab/snapdom.git"