@brainfish-ai/web-tracker 0.0.19 → 0.0.21-rc.1

package/dist/tracker.es.js

@@ -43,7 +43,7 @@ const encodeBlobAsBase64 = (data, callback) => {
   };
   return fileReader.readAsDataURL(data);
 };
-function toArray$1(data) {
+function toArray(data) {
   if (data instanceof Uint8Array) {
     return data;
   } else if (data instanceof ArrayBuffer) {
@@ -55,9 +55,9 @@ function toArray$1(data) {
 let TEXT_ENCODER;
 function encodePacketToBinary(packet, callback) {
   if (withNativeBlob$1 && packet.data instanceof Blob) {
-    return packet.data.arrayBuffer().then(toArray$1).then(callback);
+    return packet.data.arrayBuffer().then(toArray).then(callback);
   } else if (withNativeArrayBuffer$2 && (packet.data instanceof ArrayBuffer || isView$1(packet.data))) {
-    return callback(toArray$1(packet.data));
+    return callback(toArray(packet.data));
   }
   encodePacket(packet, false, (encoded) => {
     if (!TEXT_ENCODER) {
@@ -3357,6 +3357,44 @@ class Client {
     this.socket.on(eventName, (data) => handler(this.decode(data)));
   }
 }
+class HttpClient {
+  constructor(config) {
+    __publicField(this, "baseUrl");
+    __publicField(this, "authToken");
+    __publicField(this, "sdkMetadata");
+    this.baseUrl = config.baseUrl;
+    this.authToken = config.authToken;
+    this.sdkMetadata = config.sdkMetadata;
+  }
+  async send(endpoint, data) {
+    const url2 = new URL(endpoint, this.baseUrl);
+    const requestBody = {
+      ...data,
+      ...this.sdkMetadata && { sdk: this.sdkMetadata }
+    };
+    try {
+      const response = await fetch(url2.toString(), {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...this.authToken && { Authorization: `Bearer ${this.authToken}` }
+        },
+        body: JSON.stringify(requestBody)
+      });
+      if (!response.ok) {
+        return null;
+      }
+      let responseData;
+      try {
+        responseData = await response.json();
+      } catch {
+        responseData = {};
+      }
+      return responseData;
+    } catch (error) {
+    }
+  }
+}
 class TTLSet {
   constructor(defaultTTL) {
     __publicField(this, "defaultTTL");
@@ -3434,6 +3472,7 @@ class TrackerSdk {
   constructor(options) {
     __publicField(this, "options");
     __publicField(this, "client");
+    __publicField(this, "httpClient");
     __publicField(this, "userId");
     __publicField(this, "global");
     __publicField(this, "queue", []);
@@ -3446,11 +3485,21 @@ class TrackerSdk {
       sdk_name: options.sdk || "node",
       sdk_version: options.sdkVersion || ""
     };
+    const baseUrl = options.apiUrl || "https://analytic.brainfi.sh";
+    const authToken = options.accessKey;
     this.client = new Client({
-      baseUrl: options.apiUrl || "https://analytic.brainfi.sh",
-      authToken: options.accessKey,
+      baseUrl,
+      authToken,
       query
     });
+    this.httpClient = new HttpClient({
+      baseUrl,
+      authToken,
+      sdkMetadata: {
+        name: options.sdk || "node",
+        version: options.sdkVersion || ""
+      }
+    });
     this.setupIncomingPayloadHandler();
   }
   // placeholder for future use
@@ -3566,14 +3615,25 @@ class TrackerSdk {
       });
     }
   }
-  async record(events, callback) {
-    return this.send({
+  async record(events) {
+    if (this.options.disabled) {
+      return Promise.resolve(null);
+    }
+    const payload = {
       type: "event.record",
       payload: {
         events,
         userId: this.userId
       }
-    }, callback);
+    };
+    if (this.options.filter && !this.options.filter(payload)) {
+      return Promise.resolve(null);
+    }
+    const response = await this.httpClient.send("/s", {
+      events,
+      userId: this.userId
+    });
+    return response?.sessionId || null;
   }
   async alias(payload) {
     return this.send({
@@ -3611,781 +3671,1659 @@ class TrackerSdk {
     this.queue = [];
   }
 }
-function resolveUrl(url2, baseUrl) {
-  if (url2.match(/^[a-z]+:\/\//i)) {
-    return url2;
-  }
-  if (url2.match(/^\/\//)) {
-    return window.location.protocol + url2;
-  }
-  if (url2.match(/^[a-z]+:/i)) {
-    return url2;
-  }
-  const doc = document.implementation.createHTMLDocument();
-  const base = doc.createElement("base");
-  const a = doc.createElement("a");
-  doc.head.appendChild(base);
-  doc.body.appendChild(a);
-  if (baseUrl) {
-    base.href = baseUrl;
-  }
-  a.href = url2;
-  return a.href;
-}
-const uuid = /* @__PURE__ */ (() => {
-  let counter = 0;
-  const random = () => (
-    // eslint-disable-next-line no-bitwise
-    `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
-  );
-  return () => {
-    counter += 1;
-    return `u${random()}${counter}`;
-  };
-})();
-function toArray(arrayLike) {
-  const arr = [];
-  for (let i = 0, l = arrayLike.length; i < l; i++) {
-    arr.push(arrayLike[i]);
-  }
-  return arr;
-}
-let styleProps = null;
-function getStyleProperties(options = {}) {
-  if (styleProps) {
-    return styleProps;
-  }
-  if (options.includeStyleProperties) {
-    styleProps = options.includeStyleProperties;
-    return styleProps;
-  }
-  styleProps = toArray(window.getComputedStyle(document.documentElement));
-  return styleProps;
-}
-function px(node2, styleProperty) {
-  const win = node2.ownerDocument.defaultView || window;
-  const val = win.getComputedStyle(node2).getPropertyValue(styleProperty);
-  return val ? parseFloat(val.replace("px", "")) : 0;
-}
-function getNodeWidth(node2) {
-  const leftBorder = px(node2, "border-left-width");
-  const rightBorder = px(node2, "border-right-width");
-  return node2.clientWidth + leftBorder + rightBorder;
-}
-function getNodeHeight(node2) {
-  const topBorder = px(node2, "border-top-width");
-  const bottomBorder = px(node2, "border-bottom-width");
-  return node2.clientHeight + topBorder + bottomBorder;
-}
-function getImageSize(targetNode, options = {}) {
-  const width = options.width || getNodeWidth(targetNode);
-  const height = options.height || getNodeHeight(targetNode);
-  return { width, height };
-}
-function getPixelRatio() {
-  let ratio;
-  let FINAL_PROCESS;
-  try {
-    FINAL_PROCESS = process;
-  } catch (e) {
-  }
-  const val = FINAL_PROCESS && FINAL_PROCESS.env ? FINAL_PROCESS.env.devicePixelRatio : null;
-  if (val) {
-    ratio = parseInt(val, 10);
-    if (Number.isNaN(ratio)) {
-      ratio = 1;
+var cache = {
+  image: /* @__PURE__ */ new Map(),
+  background: /* @__PURE__ */ new Map(),
+  resource: /* @__PURE__ */ new Map(),
+  defaultStyle: /* @__PURE__ */ new Map(),
+  baseStyle: /* @__PURE__ */ new Map(),
+  computedStyle: /* @__PURE__ */ new WeakMap(),
+  font: /* @__PURE__ */ new Set(),
+  snapshot: /* @__PURE__ */ new WeakMap(),
+  snapshotKey: /* @__PURE__ */ new Map(),
+  reset: resetCache
+};
+function resetCache() {
+  cache.computedStyle = /* @__PURE__ */ new WeakMap();
+}
+function getDefaultStyleForTag(tagName) {
+  if (cache.defaultStyle.has(tagName)) {
+    return cache.defaultStyle.get(tagName);
+  }
+  const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template", "defs", "symbol", "title", "metadata", "desc"]);
+  if (skipTags.has(tagName)) {
+    const empty2 = {};
+    cache.defaultStyle.set(tagName, empty2);
+    return empty2;
+  }
+  let sandbox = document.getElementById("snapdom-sandbox");
+  if (!sandbox) {
+    sandbox = document.createElement("div");
+    sandbox.id = "snapdom-sandbox";
+    sandbox.style.position = "absolute";
+    sandbox.style.left = "-9999px";
+    sandbox.style.top = "-9999px";
+    sandbox.style.width = "0";
+    sandbox.style.height = "0";
+    sandbox.style.overflow = "hidden";
+    document.body.appendChild(sandbox);
+  }
+  const el = document.createElement(tagName);
+  el.style.all = "initial";
+  sandbox.appendChild(el);
+  const styles = getComputedStyle(el);
+  const defaults = {};
+  for (let prop of styles) {
+    defaults[prop] = styles.getPropertyValue(prop);
+  }
+  sandbox.removeChild(el);
+  cache.defaultStyle.set(tagName, defaults);
+  return defaults;
+}
+var IGNORED_PROPS = /* @__PURE__ */ new Set([
+  "-webkit-locale"
+]);
+function getStyleKey(snapshot2, tagName, compress = false) {
+  const entries = [];
+  const defaultStyles = getDefaultStyleForTag(tagName);
+  for (let [prop, value2] of Object.entries(snapshot2)) {
+    if (IGNORED_PROPS.has(prop)) continue;
+    if (!compress) {
+      if (value2) {
+        entries.push(`${prop}:${value2}`);
+      }
+    } else {
+      const defaultValue = defaultStyles[prop];
+      if (value2 && value2 !== defaultValue) {
+        entries.push(`${prop}:${value2}`);
+      }
     }
   }
-  return ratio || window.devicePixelRatio || 1;
+  return entries.sort().join(";");
 }
-const canvasDimensionLimit = 16384;
-function checkCanvasDimensions(canvas) {
-  if (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) {
-    if (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit) {
-      if (canvas.width > canvas.height) {
-        canvas.height *= canvasDimensionLimit / canvas.width;
-        canvas.width = canvasDimensionLimit;
-      } else {
-        canvas.width *= canvasDimensionLimit / canvas.height;
-        canvas.height = canvasDimensionLimit;
-      }
-    } else if (canvas.width > canvasDimensionLimit) {
-      canvas.height *= canvasDimensionLimit / canvas.width;
-      canvas.width = canvasDimensionLimit;
+function collectUsedTagNames(root2) {
+  const tagSet = /* @__PURE__ */ new Set();
+  if (root2.nodeType !== Node.ELEMENT_NODE && root2.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+    return [];
+  }
+  if (root2.tagName) {
+    tagSet.add(root2.tagName.toLowerCase());
+  }
+  if (typeof root2.querySelectorAll === "function") {
+    root2.querySelectorAll("*").forEach((el) => tagSet.add(el.tagName.toLowerCase()));
+  }
+  return Array.from(tagSet);
+}
+function generateDedupedBaseCSS(usedTagNames) {
+  const groups = /* @__PURE__ */ new Map();
+  for (let tagName of usedTagNames) {
+    const styles = cache.defaultStyle.get(tagName);
+    if (!styles) continue;
+    const key = Object.entries(styles).map(([k, v]) => `${k}:${v};`).sort().join("");
+    if (!groups.has(key)) {
+      groups.set(key, []);
+    }
+    groups.get(key).push(tagName);
+  }
+  let css = "";
+  for (let [styleBlock, tagList] of groups.entries()) {
+    css += `${tagList.join(",")} { ${styleBlock} }
+`;
+  }
+  return css;
+}
+function generateCSSClasses(styleMap) {
+  const keySet = new Set(styleMap.values());
+  const classMap = /* @__PURE__ */ new Map();
+  let counter = 1;
+  for (const key of keySet) {
+    if (!key.trim()) continue;
+    classMap.set(key, `c${counter++}`);
+  }
+  return classMap;
+}
+async function inlineSingleBackgroundEntry(entry, options = {}) {
+  const rawUrl = extractURL(entry);
+  const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
+  if (rawUrl) {
+    const encodedUrl = safeEncodeURI(rawUrl);
+    if (cache.background.has(encodedUrl)) {
+      return options.skipInline ? void 0 : `url(${cache.background.get(encodedUrl)})`;
     } else {
-      canvas.width *= canvasDimensionLimit / canvas.height;
-      canvas.height = canvasDimensionLimit;
+      const dataUrl = await fetchImage(encodedUrl, { useProxy: options.useProxy });
+      cache.background.set(encodedUrl, dataUrl);
+      return options.skipInline ? void 0 : `url("${dataUrl}")`;
     }
   }
+  if (isGradient || entry === "none") {
+    return entry;
+  }
+  return entry;
 }
-function createImage(url2) {
-  return new Promise((resolve2, reject) => {
-    const img = new Image();
-    img.onload = () => {
-      img.decode().then(() => {
-        requestAnimationFrame(() => resolve2(img));
-      });
-    };
-    img.onerror = reject;
-    img.crossOrigin = "anonymous";
-    img.decoding = "async";
-    img.src = url2;
-  });
+function idle(fn, { fast = false } = {}) {
+  if (fast) return fn();
+  if ("requestIdleCallback" in window) {
+    requestIdleCallback(fn, { timeout: 50 });
+  } else {
+    setTimeout(fn, 1);
+  }
 }
-async function svgToDataURL(svg) {
-  return Promise.resolve().then(() => new XMLSerializer().serializeToString(svg)).then(encodeURIComponent).then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
-}
-async function nodeToDataURL(node2, width, height) {
-  const xmlns = "http://www.w3.org/2000/svg";
-  const svg = document.createElementNS(xmlns, "svg");
-  const foreignObject = document.createElementNS(xmlns, "foreignObject");
-  svg.setAttribute("width", `${width}`);
-  svg.setAttribute("height", `${height}`);
-  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  foreignObject.setAttribute("width", "100%");
-  foreignObject.setAttribute("height", "100%");
-  foreignObject.setAttribute("x", "0");
-  foreignObject.setAttribute("y", "0");
-  foreignObject.setAttribute("externalResourcesRequired", "true");
-  svg.appendChild(foreignObject);
-  foreignObject.appendChild(node2);
-  return svgToDataURL(svg);
-}
-const isInstanceOfElement = (node2, instance) => {
-  if (node2 instanceof instance)
-    return true;
-  const nodePrototype = Object.getPrototypeOf(node2);
-  if (nodePrototype === null)
-    return false;
-  return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
-};
-function formatCSSText(style) {
-  const content = style.getPropertyValue("content");
-  return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
-}
-function formatCSSProperties(style, options) {
-  return getStyleProperties(options).map((name) => {
-    const value2 = style.getPropertyValue(name);
-    const priority = style.getPropertyPriority(name);
-    return `${name}: ${value2}${priority ? " !important" : ""};`;
-  }).join(" ");
-}
-function getPseudoElementStyle(className, pseudo, style, options) {
-  const selector = `.${className}:${pseudo}`;
-  const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
-  return document.createTextNode(`${selector}{${cssText}}`);
-}
-function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
-  const style = window.getComputedStyle(nativeNode, pseudo);
-  const content = style.getPropertyValue("content");
-  if (content === "" || content === "none") {
-    return;
+function getStyle(el, pseudo = null) {
+  if (!(el instanceof Element)) {
+    return window.getComputedStyle(el, pseudo);
   }
-  const className = uuid();
-  try {
-    clonedNode.className = `${clonedNode.className} ${className}`;
-  } catch (err) {
-    return;
+  let map = cache.computedStyle.get(el);
+  if (!map) {
+    map = /* @__PURE__ */ new Map();
+    cache.computedStyle.set(el, map);
   }
-  const styleElement = document.createElement("style");
-  styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
-  clonedNode.appendChild(styleElement);
-}
-function clonePseudoElements(nativeNode, clonedNode, options) {
-  clonePseudoElement(nativeNode, clonedNode, ":before", options);
-  clonePseudoElement(nativeNode, clonedNode, ":after", options);
-}
-const WOFF = "application/font-woff";
-const JPEG = "image/jpeg";
-const mimes = {
-  woff: WOFF,
-  woff2: WOFF,
-  ttf: "application/font-truetype",
-  eot: "application/vnd.ms-fontobject",
-  png: "image/png",
-  jpg: JPEG,
-  jpeg: JPEG,
-  gif: "image/gif",
-  tiff: "image/tiff",
-  svg: "image/svg+xml",
-  webp: "image/webp"
-};
-function getExtension(url2) {
-  const match2 = /\.([^./]*?)$/g.exec(url2);
-  return match2 ? match2[1] : "";
-}
-function getMimeType(url2) {
-  const extension = getExtension(url2).toLowerCase();
-  return mimes[extension] || "";
+  if (!map.has(pseudo)) {
+    const st = window.getComputedStyle(el, pseudo);
+    map.set(pseudo, st);
+  }
+  return map.get(pseudo);
 }
-function getContentFromDataUrl(dataURL) {
-  return dataURL.split(/,/)[1];
+function parseContent(content) {
+  let clean = content.replace(/^['"]|['"]$/g, "");
+  if (clean.startsWith("\\")) {
+    try {
+      return String.fromCharCode(parseInt(clean.replace("\\", ""), 16));
+    } catch {
+      return clean;
+    }
+  }
+  return clean;
 }
-function isDataUrl(url2) {
-  return url2.search(/^(data:)/) !== -1;
+function extractURL(value2) {
+  const match2 = value2.match(/url\((['"]?)(.*?)(\1)\)/);
+  if (!match2) return null;
+  const url2 = match2[2].trim();
+  if (url2.startsWith("#")) return null;
+  return url2;
 }
-function makeDataUrl(content, mimeType) {
-  return `data:${mimeType};base64,${content}`;
+async function fetchResource(url2, { useProxy = "" } = {}) {
+  async function doFetch(u) {
+    const res = await fetch(u);
+    if (!res.ok) throw new Error(`[snapdom] Failed to fetch resource: ${u}`);
+    return res;
+  }
+  try {
+    return await doFetch(url2);
+  } catch (e) {
+    if (useProxy && typeof useProxy === "string") {
+      const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url2);
+      return doFetch(proxied);
+    }
+    throw e;
+  }
 }
-async function fetchAsDataURL(url2, init, process2) {
-  const res = await fetch(url2, init);
-  if (res.status === 404) {
-    throw new Error(`Resource "${res.url}" not found`);
+var _inflight = /* @__PURE__ */ new Map();
+var _errorCache = /* @__PURE__ */ new Map();
+function fetchImage(src, { timeout = 3e3, useProxy = "", errorTTL = 8e3 } = {}) {
+  function getCrossOriginMode(url2) {
+    try {
+      const parsed = new URL(url2, window.location.href);
+      return parsed.origin === window.location.origin ? "use-credentials" : "anonymous";
+    } catch {
+      return "anonymous";
+    }
   }
-  const blob2 = await res.blob();
-  return new Promise((resolve2, reject) => {
-    const reader = new FileReader();
-    reader.onerror = reject;
-    reader.onloadend = () => {
-      try {
-        resolve2(process2({ res, result: reader.result }));
-      } catch (error) {
-        reject(error);
+  const ok = (data) => ({ ok: true, data });
+  const fail = (e) => ({ ok: false, error: e instanceof Error ? e : new Error(String(e)) });
+  function fetchBlobAsDataURLSafe(fetchUrl) {
+    try {
+      return fetch(fetchUrl, {
+        mode: "cors",
+        credentials: getCrossOriginMode(fetchUrl) === "use-credentials" ? "include" : "omit"
+      }).then((r) => {
+        if (!r.ok) return fail(new Error("HTTP " + r.status));
+        return r.blob().then((blob2) => new Promise((resolve2) => {
+          const reader = new FileReader();
+          reader.onloadend = () => {
+            const base64 = reader.result;
+            if (typeof base64 !== "string" || !base64.startsWith("data:image/")) {
+              resolve2(fail(new Error("Invalid image data URL")));
+            } else {
+              resolve2(ok(base64));
+            }
+          };
+          reader.onerror = () => resolve2(fail(new Error("FileReader error")));
+          reader.readAsDataURL(blob2);
+        }));
+      }).catch((e) => fail(e));
+    } catch (e) {
+      return Promise.resolve(fail(e));
+    }
+  }
+  function fetchWithFallbackOnceSafe(url2) {
+    return fetchBlobAsDataURLSafe(url2).then((r) => {
+      if (r.ok) return r;
+      if (useProxy && typeof useProxy === "string") {
+        const proxied = useProxy.replace(/\/$/, "") + safeEncodeURI(url2);
+        return fetchBlobAsDataURLSafe(proxied).then((r2) => {
+          if (r2.ok) return r2;
+          return fail(new Error("[SnapDOM - fetchImage] Fetch failed and no proxy provided"));
+        });
       }
+      return fail(new Error("[SnapDOM - fetchImage] Fetch failed and no proxy provided"));
+    });
+  }
+  const now = Date.now();
+  const until = _errorCache.get(src);
+  if (until && until > now) {
+    const pr = Promise.reject(new Error("[SnapDOM - fetchImage] Recently failed (cooldown)."));
+    pr.catch(() => {
+    });
+    return pr;
+  }
+  if (_inflight.has(src)) return _inflight.get(src);
+  const crossOriginValue = getCrossOriginMode(src);
+  if (cache.image.has(src)) return Promise.resolve(cache.image.get(src));
+  if (src.startsWith("data:image/")) {
+    cache.image.set(src, src);
+    return Promise.resolve(src);
+  }
+  if (/\.svg(\?.*)?$/i.test(src)) {
+    const p2 = (async () => {
+      const direct = await (async () => {
+        try {
+          const res = await fetch(src, {
+            mode: "cors",
+            credentials: crossOriginValue === "use-credentials" ? "include" : "omit"
+          });
+          if (!res.ok) return fail(new Error("HTTP " + res.status));
+          const svgText = await res.text();
+          return ok(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`);
+        } catch (e) {
+          return fail(e);
+        }
+      })();
+      if (direct.ok) {
+        cache.image.set(src, direct.data);
+        return direct.data;
+      }
+      const via = await fetchWithFallbackOnceSafe(src);
+      if (via.ok) {
+        cache.image.set(src, via.data);
+        return via.data;
+      }
+      _errorCache.set(src, now + errorTTL);
+      return Promise.reject(via.error);
+    })();
+    _inflight.set(src, p2);
+    p2.finally(() => _inflight.delete(src));
+    p2.catch(() => {
+    });
+    return p2;
+  }
+  const p = new Promise((resolve2, reject) => {
+    let finished = false;
+    const img = new Image();
+    const finish = (fn) => (arg) => {
+      if (finished) return;
+      finished = true;
+      clearTimeout(timeoutId);
+      img.onload = img.onerror = null;
+      fn(arg);
+    };
+    const onSuccess = (d) => {
+      cache.image.set(src, d);
+      resolve2(d);
+    };
+    const onFinalError = (e) => {
+      _errorCache.set(src, Date.now() + errorTTL);
+      reject(e);
     };
-    reader.readAsDataURL(blob2);
+    const timeoutId = setTimeout(
+      finish(() => {
+        fetchWithFallbackOnceSafe(src).then((r) => {
+          if (r.ok) onSuccess(r.data);
+          else onFinalError(new Error("Image load timed out"));
+        });
+      }),
+      timeout
+    );
+    img.crossOrigin = crossOriginValue;
+    img.onload = finish(() => {
+      Promise.resolve(img.decode()).then(() => {
+        try {
+          const canvas = document.createElement("canvas");
+          canvas.width = img.naturalWidth || img.width;
+          canvas.height = img.naturalHeight || img.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          onSuccess(canvas.toDataURL("image/png"));
+        } catch {
+          fetchWithFallbackOnceSafe(src).then((r) => {
+            if (r.ok) onSuccess(r.data);
+            else onFinalError(r.error);
+          });
+        }
+      }).catch(() => {
+        fetchWithFallbackOnceSafe(src).then((r) => {
+          if (r.ok) onSuccess(r.data);
+          else onFinalError(r.error);
+        });
+      });
+    });
+    img.onerror = finish(() => {
+      fetchWithFallbackOnceSafe(src).then((r) => {
+        if (r.ok) onSuccess(r.data);
+        else onFinalError(r.error);
+      });
+    });
+    img.src = src;
+  });
+  _inflight.set(src, p);
+  p.finally(() => _inflight.delete(src));
+  p.catch(() => {
   });
+  return p;
+}
+function snapshotComputedStyle(style) {
+  const snap = {};
+  for (let prop of style) {
+    snap[prop] = style.getPropertyValue(prop);
+  }
+  return snap;
+}
+function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+function stripTranslate(transform) {
+  if (!transform || transform === "none") return "";
+  let cleaned = transform.replace(/translate[XY]?\([^)]*\)/g, "");
+  cleaned = cleaned.replace(/matrix\(([^)]+)\)/g, (_, values) => {
+    const parts2 = values.split(",").map((s) => s.trim());
+    if (parts2.length !== 6) return `matrix(${values})`;
+    parts2[4] = "0";
+    parts2[5] = "0";
+    return `matrix(${parts2.join(", ")})`;
+  });
+  cleaned = cleaned.replace(/matrix3d\(([^)]+)\)/g, (_, values) => {
+    const parts2 = values.split(",").map((s) => s.trim());
+    if (parts2.length !== 16) return `matrix3d(${values})`;
+    parts2[12] = "0";
+    parts2[13] = "0";
+    return `matrix3d(${parts2.join(", ")})`;
+  });
+  return cleaned.trim().replace(/\s{2,}/g, " ");
 }
-const cache = {};
-function getCacheKey(url2, contentType, includeQueryParams) {
-  let key = url2.replace(/\?.*/, "");
-  if (includeQueryParams) {
-    key = url2;
-  }
-  if (/ttf|otf|eot|woff2?/i.test(key)) {
-    key = key.replace(/.*\//, "");
+function safeEncodeURI(uri) {
+  if (/%[0-9A-Fa-f]{2}/.test(uri)) return uri;
+  try {
+    return encodeURI(uri);
+  } catch {
+    return uri;
   }
-  return contentType ? `[${contentType}]${key}` : key;
 }
-async function resourceToDataURL(resourceUrl, contentType, options) {
-  const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
-  if (cache[cacheKey] != null) {
-    return cache[cacheKey];
-  }
-  if (options.cacheBust) {
-    resourceUrl += (/\?/.test(resourceUrl) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
-  }
-  let dataURL;
-  try {
-    const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result: result2 }) => {
-      if (!contentType) {
-        contentType = res.headers.get("Content-Type") || "";
-      }
-      return getContentFromDataUrl(result2);
-    });
-    dataURL = makeDataUrl(content, contentType);
-  } catch (error) {
-    dataURL = options.imagePlaceholder || "";
-    let msg = `Failed to fetch resource: ${resourceUrl}`;
-    if (error) {
-      msg = typeof error === "string" ? error : error.message;
-    }
-    if (msg) {
-      console.warn(msg);
+function splitBackgroundImage(bg) {
+  const parts2 = [];
+  let depth = 0;
+  let lastIndex = 0;
+  for (let i = 0; i < bg.length; i++) {
+    const char = bg[i];
+    if (char === "(") depth++;
+    if (char === ")") depth--;
+    if (char === "," && depth === 0) {
+      parts2.push(bg.slice(lastIndex, i).trim());
+      lastIndex = i + 1;
     }
   }
-  cache[cacheKey] = dataURL;
-  return dataURL;
+  parts2.push(bg.slice(lastIndex).trim());
+  return parts2;
 }
-async function cloneCanvasElement(canvas) {
-  const dataURL = canvas.toDataURL();
-  if (dataURL === "data:,") {
-    return canvas.cloneNode(false);
-  }
-  return createImage(dataURL);
-}
-async function cloneVideoElement(video, options) {
-  if (video.currentSrc) {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    canvas.width = video.clientWidth;
-    canvas.height = video.clientHeight;
-    ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const dataURL2 = canvas.toDataURL();
-    return createImage(dataURL2);
-  }
-  const poster = video.poster;
-  const contentType = getMimeType(poster);
-  const dataURL = await resourceToDataURL(poster, contentType, options);
-  return createImage(dataURL);
-}
-async function cloneIFrameElement(iframe, options) {
-  var _a2;
-  try {
-    if ((_a2 = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a2 === void 0 ? void 0 : _a2.body) {
-      return await cloneNode$3(iframe.contentDocument.body, options, true);
+var snapshotCache = /* @__PURE__ */ new WeakMap();
+var snapshotKeyCache = /* @__PURE__ */ new Map();
+function snapshotComputedStyleFull(style) {
+  const result2 = {};
+  const computedVisibility = style.getPropertyValue("visibility");
+  for (let i = 0; i < style.length; i++) {
+    const prop = style[i];
+    let val = style.getPropertyValue(prop);
+    if ((prop === "background-image" || prop === "content") && val.includes("url(") && !val.includes("data:")) {
+      val = "none";
     }
-  } catch (_b) {
+    result2[prop] = val;
+  }
+  if (computedVisibility === "hidden") {
+    result2.opacity = "0";
   }
-  return iframe.cloneNode(false);
+  return result2;
 }
-async function cloneSingleNode(node2, options) {
-  if (isInstanceOfElement(node2, HTMLCanvasElement)) {
-    return cloneCanvasElement(node2);
+function inlineAllStyles(source, clone, styleMap, cache2, compress) {
+  if (source.tagName === "STYLE") return;
+  if (!cache2.has(source)) {
+    cache2.set(source, getStyle(source));
   }
-  if (isInstanceOfElement(node2, HTMLVideoElement)) {
-    return cloneVideoElement(node2, options);
+  const style = cache2.get(source);
+  if (!snapshotCache.has(source)) {
+    const snapshot22 = snapshotComputedStyleFull(style);
+    snapshotCache.set(source, snapshot22);
   }
-  if (isInstanceOfElement(node2, HTMLIFrameElement)) {
-    return cloneIFrameElement(node2, options);
+  const snapshot2 = snapshotCache.get(source);
+  const hash = Object.entries(snapshot2).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
+  if (snapshotKeyCache.has(hash)) {
+    styleMap.set(clone, snapshotKeyCache.get(hash));
+    return;
   }
-  return node2.cloneNode(isSVGElement$1(node2));
+  const tagName = source.tagName?.toLowerCase() || "div";
+  const key = getStyleKey(snapshot2, tagName, compress);
+  snapshotKeyCache.set(hash, key);
+  styleMap.set(clone, key);
 }
-const isSlotElement = (node2) => node2.tagName != null && node2.tagName.toUpperCase() === "SLOT";
-const isSVGElement$1 = (node2) => node2.tagName != null && node2.tagName.toUpperCase() === "SVG";
-async function cloneChildren(nativeNode, clonedNode, options) {
-  var _a2, _b;
-  if (isSVGElement$1(clonedNode)) {
-    return clonedNode;
-  }
-  let children = [];
-  if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
-    children = toArray(nativeNode.assignedNodes());
-  } else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && ((_a2 = nativeNode.contentDocument) === null || _a2 === void 0 ? void 0 : _a2.body)) {
-    children = toArray(nativeNode.contentDocument.body.childNodes);
-  } else {
-    children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
+function freezeImgSrcset(original, cloned) {
+  try {
+    const chosen = original.currentSrc || original.src || "";
+    if (!chosen) return;
+    cloned.setAttribute("src", chosen);
+    cloned.removeAttribute("srcset");
+    cloned.removeAttribute("sizes");
+    cloned.loading = "eager";
+    cloned.decoding = "sync";
+  } catch {
+  }
+}
+function deepClone(node2, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
+  if (!node2) throw new Error("Invalid node");
+  const clonedAssignedNodes = /* @__PURE__ */ new Set();
+  let pendingSelectValue = null;
+  if (node2.nodeType === Node.TEXT_NODE) {
+    return node2.cloneNode(true);
+  }
+  if (node2.nodeType !== Node.ELEMENT_NODE) {
+    return node2.cloneNode(true);
   }
-  if (children.length === 0 || isInstanceOfElement(nativeNode, HTMLVideoElement)) {
-    return clonedNode;
+  if (node2.getAttribute("data-capture") === "exclude") {
+    const spacer = document.createElement("div");
+    const rect = node2.getBoundingClientRect();
+    spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+    return spacer;
   }
-  await children.reduce((deferred, child) => deferred.then(() => cloneNode$3(child, options)).then((clonedChild) => {
-    if (clonedChild) {
-      clonedNode.appendChild(clonedChild);
+  if (options.exclude && Array.isArray(options.exclude)) {
+    for (const selector of options.exclude) {
+      try {
+        if (node2.matches?.(selector)) {
+          const spacer = document.createElement("div");
+          const rect = node2.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);
+      }
     }
-  }), Promise.resolve());
-  return clonedNode;
-}
-function cloneCSSStyle(nativeNode, clonedNode, options) {
-  const targetStyle = clonedNode.style;
-  if (!targetStyle) {
-    return;
   }
-  const sourceStyle = window.getComputedStyle(nativeNode);
-  if (sourceStyle.cssText) {
-    targetStyle.cssText = sourceStyle.cssText;
-    targetStyle.transformOrigin = sourceStyle.transformOrigin;
-  } else {
-    getStyleProperties(options).forEach((name) => {
-      let value2 = sourceStyle.getPropertyValue(name);
-      if (name === "font-size" && value2.endsWith("px")) {
-        const reducedFont = Math.floor(parseFloat(value2.substring(0, value2.length - 2))) - 0.1;
-        value2 = `${reducedFont}px`;
+  if (typeof options.filter === "function") {
+    try {
+      if (!options.filter(node2, originalRoot || node2)) {
+        const spacer = document.createElement("div");
+        const rect = node2.getBoundingClientRect();
+        spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+        return spacer;
       }
-      if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value2 === "inline") {
-        value2 = "block";
+    } catch (err) {
+      console.warn("Error in filter function:", err);
+    }
+  }
+  if (node2.tagName === "IFRAME") {
+    const fallback = document.createElement("div");
+    fallback.style.cssText = `width:${node2.offsetWidth}px;height:${node2.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 (node2.getAttribute("data-capture") === "placeholder") {
+    const clone2 = node2.cloneNode(false);
+    nodeMap.set(clone2, node2);
+    inlineAllStyles(node2, clone2, styleMap, styleCache, compress);
+    const placeholder = document.createElement("div");
+    placeholder.textContent = node2.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 (node2.tagName === "CANVAS") {
+    const dataURL = node2.toDataURL();
+    const img = document.createElement("img");
+    img.src = dataURL;
+    img.width = node2.width;
+    img.height = node2.height;
+    nodeMap.set(img, node2);
+    inlineAllStyles(node2, img, styleMap, styleCache, compress);
+    return img;
+  }
+  let clone;
+  try {
+    clone = node2.cloneNode(false);
+    nodeMap.set(clone, node2);
+    if (node2.tagName === "IMG") {
+      freezeImgSrcset(node2, clone);
+    }
+  } catch (err) {
+    console.error("[Snapdom] Failed to clone node:", node2, err);
+    throw err;
+  }
+  if (node2 instanceof HTMLTextAreaElement) {
+    clone.textContent = node2.value;
+    clone.value = node2.value;
+    const rect = node2.getBoundingClientRect();
+    clone.style.width = `${rect.width}px`;
+    clone.style.height = `${rect.height}px`;
+    return clone;
+  }
+  if (node2 instanceof HTMLInputElement) {
+    clone.value = node2.value;
+    clone.setAttribute("value", node2.value);
+    if (node2.checked !== void 0) {
+      clone.checked = node2.checked;
+      if (node2.checked) clone.setAttribute("checked", "");
+      if (node2.indeterminate) clone.indeterminate = node2.indeterminate;
+    }
+  }
+  if (node2 instanceof HTMLSelectElement) {
+    pendingSelectValue = node2.value;
+  }
+  inlineAllStyles(node2, clone, styleMap, styleCache, compress);
+  if (node2.shadowRoot) {
+    const hasSlot = Array.from(node2.shadowRoot.querySelectorAll("slot")).length > 0;
+    if (hasSlot) {
+      for (const child of node2.shadowRoot.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+          const cssText = child.textContent || "";
+          if (cssText.trim() && compress) {
+            styleCache.set(child, cssText);
+          }
+        }
       }
-      if (name === "d" && clonedNode.getAttribute("d")) {
-        value2 = `path(${clonedNode.getAttribute("d")})`;
+    } else {
+      const shadowFrag = document.createDocumentFragment();
+      for (const child of node2.shadowRoot.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+          const cssText = child.textContent || "";
+          if (cssText.trim() && compress) {
+            styleCache.set(child, cssText);
+          }
+          continue;
+        }
+        const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node2);
+        if (clonedChild) shadowFrag.appendChild(clonedChild);
       }
-      targetStyle.setProperty(name, value2, sourceStyle.getPropertyPriority(name));
-    });
+      clone.appendChild(shadowFrag);
+    }
   }
-}
-function cloneInputValue(nativeNode, clonedNode) {
-  if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
-    clonedNode.innerHTML = nativeNode.value;
+  if (node2.tagName === "SLOT") {
+    const assigned = node2.assignedNodes?.({ flatten: true }) || [];
+    const nodesToClone = assigned.length > 0 ? assigned : Array.from(node2.childNodes);
+    const fragment = document.createDocumentFragment();
+    for (const child of nodesToClone) {
+      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node2);
+      if (clonedChild) fragment.appendChild(clonedChild);
+    }
+    return fragment;
   }
-  if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
-    clonedNode.setAttribute("value", nativeNode.value);
+  for (const child of node2.childNodes) {
+    if (clonedAssignedNodes.has(child)) continue;
+    const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node2);
+    if (clonedChild) clone.appendChild(clonedChild);
   }
-}
-function cloneSelectValue(nativeNode, clonedNode) {
-  if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
-    const clonedSelect = clonedNode;
-    const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
-    if (selectedOption) {
-      selectedOption.setAttribute("selected", "");
+  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;
 }
-function decorate(nativeNode, clonedNode, options) {
-  if (isInstanceOfElement(clonedNode, Element)) {
-    cloneCSSStyle(nativeNode, clonedNode, options);
-    clonePseudoElements(nativeNode, clonedNode, options);
-    cloneInputValue(nativeNode, clonedNode);
-    cloneSelectValue(nativeNode, clonedNode);
+var defaultIconFonts = [
+  // /uicons/i,
+  /font\s*awesome/i,
+  /material\s*icons/i,
+  /ionicons/i,
+  /glyphicons/i,
+  /feather/i,
+  /bootstrap\s*icons/i,
+  /remix\s*icons/i,
+  /heroicons/i,
+  /layui/i,
+  /lucide/i
+];
+var userIconFonts = [];
+function extendIconFonts(fonts) {
+  const list2 = Array.isArray(fonts) ? fonts : [fonts];
+  for (const f of list2) {
+    if (f instanceof RegExp) {
+      userIconFonts.push(f);
+    } else if (typeof f === "string") {
+      userIconFonts.push(new RegExp(f, "i"));
+    } else {
+      console.warn("[snapdom] Ignored invalid iconFont value:", f);
+    }
   }
-  return clonedNode;
 }
-async function ensureSVGSymbols(clone, options) {
-  const uses = clone.querySelectorAll ? clone.querySelectorAll("use") : [];
-  if (uses.length === 0) {
-    return clone;
-  }
-  const processedDefs = {};
-  for (let i = 0; i < uses.length; i++) {
-    const use = uses[i];
-    const id = use.getAttribute("xlink:href");
-    if (id) {
-      const exist = clone.querySelector(id);
-      const definition = document.querySelector(id);
-      if (!exist && definition && !processedDefs[id]) {
-        processedDefs[id] = await cloneNode$3(definition, options, true);
-      }
-    }
-  }
-  const nodes = Object.values(processedDefs);
-  if (nodes.length) {
-    const ns = "http://www.w3.org/1999/xhtml";
-    const svg = document.createElementNS(ns, "svg");
-    svg.setAttribute("xmlns", ns);
-    svg.style.position = "absolute";
-    svg.style.width = "0";
-    svg.style.height = "0";
-    svg.style.overflow = "hidden";
-    svg.style.display = "none";
-    const defs = document.createElementNS(ns, "defs");
-    svg.appendChild(defs);
-    for (let i = 0; i < nodes.length; i++) {
-      defs.appendChild(nodes[i]);
-    }
-    clone.appendChild(svg);
+function isIconFont(input2) {
+  const text = typeof input2 === "string" ? input2 : "";
+  const candidates = [...defaultIconFonts, ...userIconFonts];
+  for (const rx of candidates) {
+    if (rx instanceof RegExp && rx.test(text)) return true;
   }
-  return clone;
+  if (/icon/i.test(text) || /glyph/i.test(text) || /symbols/i.test(text) || /feather/i.test(text) || /fontawesome/i.test(text)) return true;
+  return false;
 }
-async function cloneNode$3(node2, options, isRoot) {
-  if (!isRoot && options.filter && !options.filter(node2)) {
-    return null;
-  }
-  return Promise.resolve(node2).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node2, clonedNode, options)).then((clonedNode) => decorate(node2, clonedNode, options)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
+  fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
+  const dpr = window.devicePixelRatio || 1;
+  await document.fonts.ready;
+  const span = document.createElement("span");
+  span.textContent = unicodeChar;
+  span.style.position = "absolute";
+  span.style.visibility = "hidden";
+  span.style.fontFamily = `"${fontFamily}"`;
+  span.style.fontWeight = fontWeight || "normal";
+  span.style.fontSize = `${fontSize}px`;
+  span.style.lineHeight = "1";
+  span.style.whiteSpace = "nowrap";
+  span.style.padding = "0";
+  span.style.margin = "0";
+  document.body.appendChild(span);
+  const rect = span.getBoundingClientRect();
+  const width = Math.ceil(rect.width);
+  const height = Math.ceil(rect.height);
+  document.body.removeChild(span);
+  const canvas = document.createElement("canvas");
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
+  const ctx = canvas.getContext("2d");
+  ctx.scale(dpr, dpr);
+  ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "top";
+  ctx.fillStyle = color;
+  ctx.fillText(unicodeChar, 0, 0);
+  return {
+    dataUrl: canvas.toDataURL(),
+    width,
+    height
+  };
 }
-const URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
-const URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
-const FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
-function toRegex(url2) {
-  const escaped = url2.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
-  return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
+function isStylesheetLoaded(href) {
+  return Array.from(document.styleSheets).some((sheet) => sheet.href === href);
 }
-function parseURLs(cssText) {
-  const urls = [];
-  cssText.replace(URL_REGEX, (raw, quotation, url2) => {
-    urls.push(url2);
-    return raw;
+function injectLinkIfMissing(href) {
+  return new Promise((resolve2) => {
+    if (isStylesheetLoaded(href)) return resolve2(null);
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    link.setAttribute("data-snapdom", "injected-import");
+    link.onload = () => resolve2(link);
+    link.onerror = () => resolve2(null);
+    document.head.appendChild(link);
   });
-  return urls.filter((url2) => !isDataUrl(url2));
 }
-async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
-  try {
-    const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
-    const contentType = getMimeType(resourceURL);
-    let dataURL;
-    if (getContentFromUrl) ;
-    else {
-      dataURL = await resourceToDataURL(resolvedURL, contentType, options);
+async function embedCustomFonts({ preCached = false, localFonts = [], useProxy = "" } = {}) {
+  if (cache.resource.has("fonts-embed-css")) {
+    if (preCached) {
+      const style = document.createElement("style");
+      style.setAttribute("data-snapdom", "embedFonts");
+      style.textContent = cache.resource.get("fonts-embed-css");
+      document.head.appendChild(style);
     }
-    return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
-  } catch (error) {
+    return cache.resource.get("fonts-embed-css");
   }
-  return cssText;
-}
-function filterPreferredFontFormat(str, { preferredFontFormat }) {
-  return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, (match2) => {
-    while (true) {
-      const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match2) || [];
-      if (!format) {
-        return "";
+  const loadedFonts = /* @__PURE__ */ new Set();
+  try {
+    for (const f of document.fonts) {
+      if (f.status === "loaded") {
+        loadedFonts.add(`${f.family}__${f.weight || "normal"}__${f.style || "normal"}`);
       }
-      if (format === preferredFontFormat) {
-        return `src: ${src};`;
+    }
+  } catch {
+  }
+  const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
+  const styleImports = [];
+  for (const styleTag of document.querySelectorAll("style")) {
+    const cssText = styleTag.textContent || "";
+    const matches = Array.from(cssText.matchAll(importRegex));
+    for (const match2 of matches) {
+      const importUrl = match2[1];
+      if (isIconFont(importUrl)) continue;
+      if (!isStylesheetLoaded(importUrl)) {
+        styleImports.push(importUrl);
       }
     }
-  });
-}
-function shouldEmbed(url2) {
-  return url2.search(URL_REGEX) !== -1;
-}
-async function embedResources(cssText, baseUrl, options) {
-  if (!shouldEmbed(cssText)) {
-    return cssText;
   }
-  const filteredCSSText = filterPreferredFontFormat(cssText, options);
-  const urls = parseURLs(filteredCSSText);
-  return urls.reduce((deferred, url2) => deferred.then((css) => embed(css, url2, baseUrl, options)), Promise.resolve(filteredCSSText));
-}
-async function embedProp(propName, node2, options) {
-  var _a2;
-  const propValue = (_a2 = node2.style) === null || _a2 === void 0 ? void 0 : _a2.getPropertyValue(propName);
-  if (propValue) {
-    const cssString = await embedResources(propValue, null, options);
-    node2.style.setProperty(propName, cssString, node2.style.getPropertyPriority(propName));
-    return true;
+  await Promise.all(styleImports.map(injectLinkIfMissing));
+  const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).filter((link) => link.href);
+  let finalCSS = "";
+  for (const link of links) {
+    try {
+      const res = await fetchResource(link.href, { useProxy });
+      const cssText = await res.text();
+      if (isIconFont(link.href) || isIconFont(cssText)) continue;
+      const faceRegex = /@font-face[^{}]*{[^}]*}/g;
+      let cssFinal = cssText;
+      for (const face of cssText.match(faceRegex) || []) {
+        const famMatch = face.match(/font-family:\s*([^;]+);/i);
+        if (!famMatch) continue;
+        const family = famMatch[1].replace(/['"]/g, "").trim();
+        const weightMatch = face.match(/font-weight:\s*([^;]+);/i);
+        const styleMatch = face.match(/font-style:\s*([^;]+);/i);
+        const weight = weightMatch ? weightMatch[1].trim() : "normal";
+        const style = styleMatch ? styleMatch[1].trim() : "normal";
+        const key = `${family}__${weight}__${style}`;
+        const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
+        const hasURL = /url\(/i.test(face);
+        const hasLocal = /local\(/i.test(face);
+        if (!hasURL && hasLocal) {
+          continue;
+        }
+        if (!loadedFonts.has(key)) {
+          cssFinal = cssFinal.replace(face, "");
+          continue;
+        }
+        let inlined = face;
+        const matches = Array.from(face.matchAll(urlRegex));
+        for (const match2 of matches) {
+          let rawUrl = extractURL(match2[0]);
+          if (!rawUrl) continue;
+          let url2 = rawUrl;
+          if (!url2.startsWith("http") && !url2.startsWith("data:")) {
+            url2 = new URL(url2, link.href).href;
+          }
+          if (isIconFont(url2)) continue;
+          if (cache.resource.has(url2)) {
+            cache.font.add(url2);
+            inlined = inlined.replace(match2[0], `url(${cache.resource.get(url2)})`);
+            continue;
+          }
+          if (cache.font.has(url2)) continue;
+          try {
+            const fontRes = await fetchResource(url2, { useProxy });
+            const blob2 = await fontRes.blob();
+            const b64 = await new Promise((resolve2) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve2(reader.result);
+              reader.readAsDataURL(blob2);
+            });
+            cache.resource.set(url2, b64);
+            cache.font.add(url2);
+            inlined = inlined.replace(match2[0], `url(${b64})`);
+          } catch (e) {
+            console.warn("[snapdom] Failed to fetch font resource:", url2);
+          }
+        }
+        cssFinal = cssFinal.replace(face, inlined);
+      }
+      finalCSS += cssFinal + "\n";
+    } catch (e) {
+      console.warn("[snapdom] Failed to fetch CSS:", link.href);
+    }
   }
-  return false;
-}
-async function embedBackground(clonedNode, options) {
-  await embedProp("background", clonedNode, options) || await embedProp("background-image", clonedNode, options);
-  await embedProp("mask", clonedNode, options) || await embedProp("-webkit-mask", clonedNode, options) || await embedProp("mask-image", clonedNode, options) || await embedProp("-webkit-mask-image", clonedNode, options);
-}
-async function embedImageNode(clonedNode, options) {
-  const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
-  if (!(isImageElement && !isDataUrl(clonedNode.src)) && !(isInstanceOfElement(clonedNode, SVGImageElement) && !isDataUrl(clonedNode.href.baseVal))) {
-    return;
+  for (const sheet of document.styleSheets) {
+    try {
+      if (!sheet.href || links.every((link) => link.href !== sheet.href)) {
+        for (const rule2 of sheet.cssRules) {
+          if (rule2.type === CSSRule.FONT_FACE_RULE) {
+            const src = rule2.style.getPropertyValue("src");
+            const family = rule2.style.getPropertyValue("font-family");
+            if (!src || isIconFont(family)) continue;
+            const weightVal = rule2.style.getPropertyValue("font-weight") || "normal";
+            const styleVal = rule2.style.getPropertyValue("font-style") || "normal";
+            const key = `${family}__${weightVal}__${styleVal}`;
+            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:${styleVal};font-weight:${weightVal};}`;
+              continue;
+            }
+            if (!loadedFonts.has(key)) continue;
+            let inlinedSrc = src;
+            const matches = Array.from(src.matchAll(urlRegex));
+            for (const match2 of matches) {
+              let rawUrl = match2[2].trim();
+              if (!rawUrl) continue;
+              let url2 = rawUrl;
+              if (!url2.startsWith("http") && !url2.startsWith("data:")) {
+                url2 = new URL(url2, sheet.href || location.href).href;
+              }
+              if (isIconFont(url2)) continue;
+              if (cache.resource.has(url2)) {
+                cache.font.add(url2);
+                inlinedSrc = inlinedSrc.replace(match2[0], `url(${cache.resource.get(url2)})`);
+                continue;
+              }
+              if (cache.font.has(url2)) continue;
+              try {
+                const res = await fetchResource(url2, { useProxy });
+                const blob2 = await res.blob();
+                const b64 = await new Promise((resolve2) => {
+                  const reader = new FileReader();
+                  reader.onload = () => resolve2(reader.result);
+                  reader.readAsDataURL(blob2);
+                });
+                cache.resource.set(url2, b64);
+                cache.font.add(url2);
+                inlinedSrc = inlinedSrc.replace(match2[0], `url(${b64})`);
+              } catch (e) {
+                console.warn("[snapdom] Failed to fetch font URL:", url2);
+              }
+            }
+            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleVal};font-weight:${weightVal};}`;
+          }
+        }
+      }
+    } catch (e) {
+      console.warn("[snapdom] Cannot access stylesheet", sheet.href, e);
+    }
+  }
+  for (const font of document.fonts) {
+    if (font.family && font.status === "loaded" && font._snapdomSrc) {
+      if (isIconFont(font.family)) continue;
+      let b64 = font._snapdomSrc;
+      if (!b64.startsWith("data:")) {
+        if (cache.resource.has(font._snapdomSrc)) {
+          b64 = cache.resource.get(font._snapdomSrc);
+          cache.font.add(font._snapdomSrc);
+        } else if (!cache.font.has(font._snapdomSrc)) {
+          try {
+            const res = await fetchResource(font._snapdomSrc, { useProxy });
+            const blob2 = await res.blob();
+            b64 = await new Promise((resolve2) => {
+              const reader = new FileReader();
+              reader.onload = () => resolve2(reader.result);
+              reader.readAsDataURL(blob2);
+            });
+            cache.resource.set(font._snapdomSrc, b64);
+            cache.font.add(font._snapdomSrc);
+          } catch (e) {
+            console.warn("[snapdom] Failed to fetch dynamic font src:", font._snapdomSrc);
+            continue;
+          }
+        }
+      }
+      finalCSS += `@font-face{font-family:'${font.family}';src:url(${b64});font-style:${font.style || "normal"};font-weight:${font.weight || "normal"};}`;
+    }
   }
-  const url2 = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
-  const dataURL = await resourceToDataURL(url2, getMimeType(url2), options);
-  await new Promise((resolve2, reject) => {
-    clonedNode.onload = resolve2;
-    clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+  for (const font of localFonts) {
+    if (!font || typeof font !== "object") continue;
+    const { family, src, weight = "normal", style = "normal" } = font;
+    if (!family || !src) continue;
+    let b64 = src;
+    if (!b64.startsWith("data:")) {
       try {
-        resolve2(options.onImageErrorHandler(...attributes));
-      } catch (error) {
-        reject(error);
+        const res = await fetchResource(src, { useProxy });
+        const blob2 = await res.blob();
+        b64 = await new Promise((resolve2) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve2(reader.result);
+          reader.readAsDataURL(blob2);
+        });
+        cache.resource.set(src, b64);
+        cache.font.add(src);
+      } catch (e) {
+        console.warn("[snapdom] Failed to load local font:", src);
+        continue;
       }
-    } : reject;
-    const image = clonedNode;
-    if (image.decode) {
-      image.decode = resolve2;
-    }
-    if (image.loading === "lazy") {
-      image.loading = "eager";
-    }
-    if (isImageElement) {
-      clonedNode.srcset = "";
-      clonedNode.src = dataURL;
     } else {
-      clonedNode.href.baseVal = dataURL;
+      cache.resource.set(src, b64);
+      cache.font.add(src);
     }
-  });
-}
-async function embedChildren(clonedNode, options) {
-  const children = toArray(clonedNode.childNodes);
-  const deferreds = children.map((child) => embedImages(child, options));
-  await Promise.all(deferreds).then(() => clonedNode);
-}
-async function embedImages(clonedNode, options) {
-  if (isInstanceOfElement(clonedNode, Element)) {
-    await embedBackground(clonedNode, options);
-    await embedImageNode(clonedNode, options);
-    await embedChildren(clonedNode, options);
-  }
-}
-function applyStyle(node2, options) {
-  const { style } = node2;
-  if (options.backgroundColor) {
-    style.backgroundColor = options.backgroundColor;
+    finalCSS += `@font-face{font-family:'${family}';src:url(${b64});font-style:${style};font-weight:${weight};}`;
   }
-  if (options.width) {
-    style.width = `${options.width}px`;
+  if (finalCSS) {
+    cache.resource.set("fonts-embed-css", finalCSS);
+    if (preCached) {
+      const style = document.createElement("style");
+      style.setAttribute("data-snapdom", "embedFonts");
+      style.textContent = finalCSS;
+      document.head.appendChild(style);
+    }
   }
-  if (options.height) {
-    style.height = `${options.height}px`;
+  return finalCSS;
+}
+async function inlinePseudoElements(source, clone, styleMap, styleCache, options) {
+  if (!(source instanceof Element) || !(clone instanceof Element)) return;
+  for (const pseudo of ["::before", "::after", "::first-letter"]) {
+    try {
+      const style = getStyle(source, pseudo);
+      if (!style || typeof style[Symbol.iterator] !== "function") continue;
+      const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
+      if (isEmptyPseudo) continue;
+      if (pseudo === "::first-letter") {
+        const normal = getComputedStyle(source);
+        const isMeaningful = style.color !== normal.color || style.fontSize !== normal.fontSize || style.fontWeight !== normal.fontWeight;
+        if (!isMeaningful) continue;
+        const textNode = Array.from(clone.childNodes).find(
+          (n2) => n2.nodeType === Node.TEXT_NODE && n2.textContent?.trim().length > 0
+        );
+        if (!textNode) continue;
+        const text = textNode.textContent;
+        const match2 = text.match(/^([^\p{L}\p{N}\s]*[\p{L}\p{N}](?:['’])?)/u);
+        const first = match2?.[0];
+        const rest = text.slice(first?.length || 0);
+        if (!first || /[\uD800-\uDFFF]/.test(first)) continue;
+        const span = document.createElement("span");
+        span.textContent = first;
+        span.dataset.snapdomPseudo = "::first-letter";
+        const snapshot22 = snapshotComputedStyle(style);
+        const key2 = getStyleKey(snapshot22, "span", options);
+        styleMap.set(span, key2);
+        const restNode = document.createTextNode(rest);
+        clone.replaceChild(restNode, textNode);
+        clone.insertBefore(span, restNode);
+        continue;
+      }
+      const content = style.content;
+      const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+      const bg = style.backgroundImage;
+      const bgColor = style.backgroundColor;
+      const fontFamily = style.fontFamily;
+      const fontSize = parseInt(style.fontSize) || 32;
+      const fontWeight = parseInt(style.fontWeight) || false;
+      const color = style.color || "#000";
+      const display = style.display;
+      const width = parseFloat(style.width);
+      const height = parseFloat(style.height);
+      const borderStyle = style.borderStyle;
+      const borderWidth = parseFloat(style.borderWidth);
+      const transform = style.transform;
+      const isIconFont2 = isIconFont(fontFamily);
+      const hasExplicitContent = content !== "none" && cleanContent !== "";
+      const hasBg = bg && bg !== "none";
+      const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
+      const hasBox = display !== "inline" && (width > 0 || height > 0);
+      const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
+      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;
+      pseudoEl.style.verticalAlign = "middle";
+      const snapshot2 = snapshotComputedStyle(style);
+      const key = getStyleKey(snapshot2, "span", options);
+      styleMap.set(pseudoEl, key);
+      if (isIconFont2 && cleanContent.length === 1) {
+        const { dataUrl, width: width2, height: height2 } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
+        const imgEl = document.createElement("img");
+        imgEl.src = dataUrl;
+        imgEl.style = `height:${fontSize}px;width:${width2 / height2 * fontSize}px;object-fit:contain;`;
+        pseudoEl.appendChild(imgEl);
+        clone.dataset.snapdomHasIcon = "true";
+      } else if (cleanContent.startsWith("url(")) {
+        const rawUrl = extractURL(cleanContent);
+        if (rawUrl?.trim()) {
+          try {
+            const imgEl = document.createElement("img");
+            const dataUrl = await fetchImage(safeEncodeURI(rawUrl), options);
+            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 && hasExplicitContent) {
+        pseudoEl.textContent = cleanContent;
+      }
+      if (hasBg) {
+        try {
+          const bgSplits = splitBackgroundImage(bg);
+          const newBgParts = await Promise.all(bgSplits.map(inlineSingleBackgroundEntry));
+          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?.trim() !== "";
+      const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
+      if (!hasVisibleBox) continue;
+      if (pseudo === "::before") {
+        clone.insertBefore(pseudoEl, clone.firstChild);
+      } else {
+        clone.appendChild(pseudoEl);
+      }
+    } catch (e) {
+      console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
+    }
   }
-  const manual = options.style;
-  if (manual != null) {
-    Object.keys(manual).forEach((key) => {
-      style[key] = manual[key];
-    });
+  const sChildren = Array.from(source.children);
+  const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
+  for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
+    await inlinePseudoElements(sChildren[i], cChildren[i], styleMap, styleCache, options);
   }
-  return node2;
 }
-const cssFetchCache = {};
-async function fetchCSS(url2) {
-  let cache2 = cssFetchCache[url2];
-  if (cache2 != null) {
-    return cache2;
-  }
-  const res = await fetch(url2);
-  const cssText = await res.text();
-  cache2 = { url: url2, cssText };
-  cssFetchCache[url2] = cache2;
-  return cache2;
-}
-async function embedFonts(data, options) {
-  let cssText = data.cssText;
-  const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
-  const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
-  const loadFonts = fontLocs.map(async (loc) => {
-    let url2 = loc.replace(regexUrl, "$1");
-    if (!url2.startsWith("https://")) {
-      url2 = new URL(url2, data.url).href;
-    }
-    return fetchAsDataURL(url2, options.fetchRequestInit, ({ result: result2 }) => {
-      cssText = cssText.replace(loc, `url(${result2})`);
-      return [loc, result2];
-    });
+function inlineExternalDefsAndSymbols(rootElement) {
+  if (!rootElement) return;
+  const usedIds = /* @__PURE__ */ new Set();
+  rootElement.querySelectorAll("use").forEach((use) => {
+    const href = use.getAttribute("xlink:href") || use.getAttribute("href");
+    if (href && href.startsWith("#")) {
+      usedIds.add(href.slice(1));
+    }
+  });
+  if (!usedIds.size) return;
+  const allGlobal = Array.from(document.querySelectorAll("svg > symbol, svg > defs"));
+  const globalSymbols = allGlobal.filter((el) => el.tagName.toLowerCase() === "symbol");
+  const globalDefs = allGlobal.filter((el) => el.tagName.toLowerCase() === "defs");
+  let container2 = rootElement.querySelector("svg.inline-defs-container");
+  if (!container2) {
+    container2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    container2.setAttribute("aria-hidden", "true");
+    container2.setAttribute("style", "position: absolute; width: 0; height: 0; overflow: hidden;");
+    container2.classList.add("inline-defs-container");
+    rootElement.insertBefore(container2, rootElement.firstChild);
+  }
+  const existingIds = /* @__PURE__ */ new Set();
+  rootElement.querySelectorAll("symbol[id], defs > *[id]").forEach((el) => {
+    existingIds.add(el.id);
+  });
+  usedIds.forEach((id) => {
+    if (existingIds.has(id)) return;
+    const symbol = globalSymbols.find((sym) => sym.id === id);
+    if (symbol) {
+      container2.appendChild(symbol.cloneNode(true));
+      existingIds.add(id);
+      return;
+    }
+    for (const defs of globalDefs) {
+      const defEl = defs.querySelector(`#${CSS.escape(id)}`);
+      if (defEl) {
+        let defsContainer = container2.querySelector("defs");
+        if (!defsContainer) {
+          defsContainer = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+          container2.appendChild(defsContainer);
+        }
+        defsContainer.appendChild(defEl.cloneNode(true));
+        existingIds.add(id);
+        break;
+      }
+    }
   });
-  return Promise.all(loadFonts).then(() => cssText);
 }
-function parseCSS(source) {
-  if (source == null) {
-    return [];
+async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
+  const styleMap = /* @__PURE__ */ new Map();
+  const styleCache = /* @__PURE__ */ new WeakMap();
+  const nodeMap = /* @__PURE__ */ new Map();
+  let clone;
+  let classCSS = "";
+  stabilizeLayout(element);
+  try {
+    inlineExternalDefsAndSymbols(element);
+  } catch (e) {
+    console.warn("inlineExternal defs or symbol failed:", e);
   }
-  const result2 = [];
-  const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
-  let cssText = source.replace(commentsRegex, "");
-  const keyframesRegex = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
-  while (true) {
-    const matches = keyframesRegex.exec(cssText);
-    if (matches === null) {
-      break;
-    }
-    result2.push(matches[0]);
+  try {
+    clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
+  } catch (e) {
+    console.warn("deepClone failed:", e);
+    throw e;
   }
-  cssText = cssText.replace(keyframesRegex, "");
-  const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
-  const combinedCSSRegex = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})";
-  const unifiedRegex = new RegExp(combinedCSSRegex, "gi");
-  while (true) {
-    let matches = importRegex.exec(cssText);
-    if (matches === null) {
-      matches = unifiedRegex.exec(cssText);
-      if (matches === null) {
-        break;
-      } else {
-        importRegex.lastIndex = unifiedRegex.lastIndex;
+  try {
+    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
+  } catch (e) {
+    console.warn("inlinePseudoElements failed:", e);
+  }
+  await resolveBlobUrlsInTree(clone);
+  if (compress) {
+    const keyToClass = generateCSSClasses(styleMap);
+    classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
+    for (const [node2, key] of styleMap.entries()) {
+      if (node2.tagName === "STYLE") continue;
+      if (node2.getRootNode && node2.getRootNode() instanceof ShadowRoot) {
+        node2.setAttribute("style", key.replace(/;/g, "; "));
+        continue;
+      }
+      const className = keyToClass.get(key);
+      if (className) node2.classList.add(className);
+      const bgImage = node2.style?.backgroundImage;
+      const hasIcon = node2.dataset?.snapdomHasIcon;
+      if (bgImage && bgImage !== "none") node2.style.backgroundImage = bgImage;
+      if (hasIcon) {
+        node2.style.verticalAlign = "middle";
+        node2.style.display = "inline";
       }
-    } else {
-      unifiedRegex.lastIndex = importRegex.lastIndex;
     }
-    result2.push(matches[0]);
+  } else {
+    for (const [node2, key] of styleMap.entries()) {
+      if (node2.tagName === "STYLE") continue;
+      node2.setAttribute("style", key.replace(/;/g, "; "));
+    }
+  }
+  for (const [cloneNode2, originalNode] of nodeMap.entries()) {
+    const scrollX = originalNode.scrollLeft;
+    const scrollY = originalNode.scrollTop;
+    const hasScroll = scrollX || scrollY;
+    if (hasScroll && cloneNode2 instanceof HTMLElement) {
+      cloneNode2.style.overflow = "hidden";
+      cloneNode2.style.scrollbarWidth = "none";
+      cloneNode2.style.msOverflowStyle = "none";
+      const inner = document.createElement("div");
+      inner.style.transform = `translate(${-scrollX}px, ${-scrollY}px)`;
+      inner.style.willChange = "transform";
+      inner.style.display = "inline-block";
+      inner.style.width = "100%";
+      while (cloneNode2.firstChild) {
+        inner.appendChild(cloneNode2.firstChild);
+      }
+      cloneNode2.appendChild(inner);
+    }
+  }
+  if (element === nodeMap.get(clone)) {
+    const computed = styleCache.get(element) || window.getComputedStyle(element);
+    styleCache.set(element, computed);
+    const transform = stripTranslate(computed.transform);
+    clone.style.margin = "0";
+    clone.style.position = "static";
+    clone.style.top = "auto";
+    clone.style.left = "auto";
+    clone.style.right = "auto";
+    clone.style.bottom = "auto";
+    clone.style.zIndex = "auto";
+    clone.style.float = "none";
+    clone.style.clear = "none";
+    clone.style.transform = transform || "";
+  }
+  for (const [cloneNode2, originalNode] of nodeMap.entries()) {
+    if (originalNode.tagName === "PRE") {
+      cloneNode2.style.marginTop = "0";
+      cloneNode2.style.marginBlockStart = "0";
+    }
+  }
+  return { clone, classCSS, styleCache };
+}
+function stabilizeLayout(element) {
+  const style = getComputedStyle(element);
+  const outlineStyle = style.outlineStyle;
+  const outlineWidth = style.outlineWidth;
+  const borderStyle = style.borderStyle;
+  const borderWidth = style.borderWidth;
+  const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+  const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+  if (outlineVisible && borderAbsent) {
+    element.style.border = `${outlineWidth} solid transparent`;
+  }
+}
+var _blobToDataUrlCache = /* @__PURE__ */ new Map();
+async function blobUrlToDataUrl(blobUrl) {
+  if (_blobToDataUrlCache.has(blobUrl)) return _blobToDataUrlCache.get(blobUrl);
+  const res = await fetch(blobUrl);
+  if (!res.ok) throw new Error(`[SnapDOM] HTTP ${res.status} on blob fetch (${blobUrl})`);
+  const blob2 = await res.blob();
+  const dataUrl = await new Promise((resolve2, reject) => {
+    const fr = new FileReader();
+    fr.onloadend = () => {
+      const v = fr.result;
+      if (typeof v === "string" && v.startsWith("data:")) resolve2(v);
+      else reject(new Error("[SnapDOM] Invalid data URL from blob"));
+    };
+    fr.onerror = () => reject(new Error("[SnapDOM] FileReader error"));
+    fr.readAsDataURL(blob2);
+  });
+  _blobToDataUrlCache.set(blobUrl, dataUrl);
+  return dataUrl;
+}
+var BLOB_URL_RE = /\bblob:[^)"'\s]+/g;
+async function replaceBlobUrlsInCssText(cssText) {
+  if (!cssText || cssText.indexOf("blob:") === -1) return cssText;
+  const uniques = Array.from(new Set(cssText.match(BLOB_URL_RE) || []));
+  if (uniques.length === 0) return cssText;
+  let out = cssText;
+  for (const u of uniques) {
+    try {
+      const d = await blobUrlToDataUrl(u);
+      out = out.split(u).join(d);
+    } catch {
+    }
   }
-  return result2;
+  return out;
 }
-async function getCSSRules(styleSheets2, options) {
-  const ret = [];
-  const deferreds = [];
-  styleSheets2.forEach((sheet) => {
-    if ("cssRules" in sheet) {
-      try {
-        toArray(sheet.cssRules || []).forEach((item, index2) => {
-          if (item.type === CSSRule.IMPORT_RULE) {
-            let importIndex = index2 + 1;
-            const url2 = item.href;
-            const deferred = fetchCSS(url2).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule2) => {
-              try {
-                sheet.insertRule(rule2, rule2.startsWith("@import") ? importIndex += 1 : sheet.cssRules.length);
-              } catch (error) {
-                console.error("Error inserting rule from remote css", {
-                  rule: rule2,
-                  error
-                });
-              }
-            })).catch((e) => {
-              console.error("Error loading remote css", e.toString());
-            });
-            deferreds.push(deferred);
+function isBlobUrl(u) {
+  return typeof u === "string" && u.startsWith("blob:");
+}
+function parseSrcset(srcset) {
+  return (srcset || "").split(",").map((s) => s.trim()).filter(Boolean).map((item) => {
+    const m = item.match(/^(\S+)(\s+.+)?$/);
+    return m ? { url: m[1], desc: m[2] || "" } : null;
+  }).filter(Boolean);
+}
+function stringifySrcset(parts2) {
+  return parts2.map((p) => p.desc ? `${p.url} ${p.desc.trim()}` : p.url).join(", ");
+}
+async function resolveBlobUrlsInTree(root2) {
+  if (!root2) return;
+  const imgs = root2.querySelectorAll ? root2.querySelectorAll("img") : [];
+  for (const img of imgs) {
+    try {
+      const srcAttr = img.getAttribute("src");
+      const effective = srcAttr || img.currentSrc || "";
+      if (isBlobUrl(effective)) {
+        const data = await blobUrlToDataUrl(effective);
+        img.setAttribute("src", data);
+      }
+      const srcset = img.getAttribute("srcset");
+      if (srcset && srcset.includes("blob:")) {
+        const parts2 = parseSrcset(srcset);
+        let changed = false;
+        for (const p of parts2) {
+          if (isBlobUrl(p.url)) {
+            try {
+              p.url = await blobUrlToDataUrl(p.url);
+              changed = true;
+            } catch {
+            }
           }
-        });
-      } catch (e) {
-        const inline = styleSheets2.find((a) => a.href == null) || document.styleSheets[0];
-        if (sheet.href != null) {
-          deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule2) => {
-            inline.insertRule(rule2, inline.cssRules.length);
-          })).catch((err) => {
-            console.error("Error loading remote stylesheet", err);
-          }));
         }
-        console.error("Error inlining remote css file", e);
+        if (changed) img.setAttribute("srcset", stringifySrcset(parts2));
       }
+    } catch {
     }
-  });
-  return Promise.all(deferreds).then(() => {
-    styleSheets2.forEach((sheet) => {
-      if ("cssRules" in sheet) {
-        try {
-          toArray(sheet.cssRules || []).forEach((item) => {
-            ret.push(item);
-          });
-        } catch (e) {
-          console.error(`Error while reading CSS rules from ${sheet.href}`, e);
+  }
+  const svgImages = root2.querySelectorAll ? root2.querySelectorAll("image") : [];
+  for (const node2 of svgImages) {
+    try {
+      const XLINK_NS = "http://www.w3.org/1999/xlink";
+      const href = node2.getAttribute("href") || node2.getAttributeNS?.(XLINK_NS, "href");
+      if (isBlobUrl(href)) {
+        const d = await blobUrlToDataUrl(href);
+        node2.setAttribute("href", d);
+        node2.removeAttributeNS?.(XLINK_NS, "href");
+      }
+    } catch {
+    }
+  }
+  const styled = root2.querySelectorAll ? root2.querySelectorAll("[style*='blob:']") : [];
+  for (const el of styled) {
+    try {
+      const styleText = el.getAttribute("style");
+      if (styleText && styleText.includes("blob:")) {
+        const replaced = await replaceBlobUrlsInCssText(styleText);
+        el.setAttribute("style", replaced);
+      }
+    } catch {
+    }
+  }
+  const styleTags = root2.querySelectorAll ? root2.querySelectorAll("style") : [];
+  for (const s of styleTags) {
+    try {
+      const css = s.textContent || "";
+      if (css.includes("blob:")) {
+        s.textContent = await replaceBlobUrlsInCssText(css);
+      }
+    } catch {
+    }
+  }
+  const urlAttrs = ["poster"];
+  for (const attr of urlAttrs) {
+    const nodes = root2.querySelectorAll ? root2.querySelectorAll(`[${attr}^='blob:']`) : [];
+    for (const n2 of nodes) {
+      try {
+        const u = n2.getAttribute(attr);
+        if (isBlobUrl(u)) {
+          n2.setAttribute(attr, await blobUrlToDataUrl(u));
         }
+      } catch {
       }
-    });
-    return ret;
-  });
-}
-function getWebFontRules(cssRules) {
-  return cssRules.filter((rule2) => rule2.type === CSSRule.FONT_FACE_RULE).filter((rule2) => shouldEmbed(rule2.style.getPropertyValue("src")));
-}
-async function parseWebFontRules(node2, options) {
-  if (node2.ownerDocument == null) {
-    throw new Error("Provided element is not within a Document");
+    }
   }
-  const styleSheets2 = toArray(node2.ownerDocument.styleSheets);
-  const cssRules = await getCSSRules(styleSheets2, options);
-  return getWebFontRules(cssRules);
-}
-function normalizeFontFamily(font) {
-  return font.trim().replace(/["']/g, "");
 }
-function getUsedFonts(node2) {
-  const fonts = /* @__PURE__ */ new Set();
-  function traverse(node3) {
-    const fontFamily = node3.style.fontFamily || getComputedStyle(node3).fontFamily;
-    fontFamily.split(",").forEach((font) => {
-      fonts.add(normalizeFontFamily(font));
-    });
-    Array.from(node3.children).forEach((child) => {
-      if (child instanceof HTMLElement) {
-        traverse(child);
+async function inlineImages(clone, options = {}) {
+  const imgs = Array.from(clone.querySelectorAll("img"));
+  const processImg = async (img) => {
+    if (!img.getAttribute("src")) {
+      const eff = img.currentSrc || img.src || "";
+      if (eff) img.setAttribute("src", eff);
+    }
+    img.removeAttribute("srcset");
+    img.removeAttribute("sizes");
+    const src = img.src;
+    try {
+      const dataUrl = await fetchImage(src, { useProxy: options.useProxy });
+      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);
+  }
+}
+async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
+  const queue = [[source, clone]];
+  const imageProps = [
+    "background-image",
+    "mask",
+    "mask-image",
+    "-webkit-mask-image",
+    "mask-source",
+    "mask-box-image-source",
+    "mask-border-source",
+    "-webkit-mask-box-image-source",
+    "border-image",
+    "border-image-source",
+    "border-image-slice",
+    "border-image-width",
+    "border-image-outset",
+    "border-image-repeat"
+  ];
+  while (queue.length) {
+    const [srcNode, cloneNode2] = queue.shift();
+    const style = styleCache.get(srcNode) || getStyle(srcNode);
+    if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
+    const hasBorderImage = (() => {
+      const bi = style.getPropertyValue("border-image");
+      const bis = style.getPropertyValue("border-image-source");
+      return bi && bi !== "none" || bis && bis !== "none";
+    })();
+    for (const prop of imageProps) {
+      if (["border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"].includes(prop) && !hasBorderImage) {
+        continue;
+      }
+      const val = style.getPropertyValue(prop);
+      if (!val || val === "none") continue;
+      const splits = splitBackgroundImage(val);
+      const inlined = await Promise.all(
+        splits.map((entry) => inlineSingleBackgroundEntry(entry, options))
+      );
+      if (inlined.some((p) => p && p !== "none" && !/^url\(undefined/.test(p))) {
+        cloneNode2.style.setProperty(prop, inlined.join(", "));
       }
+    }
+    const bgColor = style.getPropertyValue("background-color");
+    if (bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)") {
+      cloneNode2.style.backgroundColor = bgColor;
+    }
+    const sChildren = Array.from(srcNode.children);
+    const cChildren = Array.from(cloneNode2.children);
+    for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
+      queue.push([sChildren[i], cChildren[i]]);
+    }
+  }
+}
+async function captureDOM(element, options = {}) {
+  if (!element) throw new Error("Element cannot be null or undefined");
+  cache.reset();
+  const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "", localFonts = [] } = options;
+  let clone, classCSS, styleCache;
+  let fontsCSS = "";
+  let baseCSS = "";
+  let dataURL;
+  let svgString;
+  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
+  await new Promise((resolve2) => {
+    idle(async () => {
+      await inlineImages(clone, options);
+      resolve2();
+    }, { fast });
+  });
+  await new Promise((resolve2) => {
+    idle(async () => {
+      await inlineBackgroundImages(element, clone, styleCache, options);
+      resolve2();
+    }, { fast });
+  });
+  if (embedFonts) {
+    await new Promise((resolve2) => {
+      idle(async () => {
+        fontsCSS = await embedCustomFonts({ localFonts, useProxy });
+        resolve2();
+      }, { fast });
     });
   }
-  traverse(node2);
-  return fonts;
-}
-async function getWebFontCSS(node2, options) {
-  const rules = await parseWebFontRules(node2, options);
-  const usedFonts = getUsedFonts(node2);
-  const cssTexts = await Promise.all(rules.filter((rule2) => usedFonts.has(normalizeFontFamily(rule2.style.fontFamily))).map((rule2) => {
-    const baseUrl = rule2.parentStyleSheet ? rule2.parentStyleSheet.href : null;
-    return embedResources(rule2.cssText, baseUrl, options);
-  }));
-  return cssTexts.join("\n");
-}
-async function embedWebFonts(clonedNode, options) {
-  const cssText = options.fontEmbedCSS != null ? options.fontEmbedCSS : options.skipFonts ? null : await getWebFontCSS(clonedNode, options);
-  if (cssText) {
-    const styleNode = document.createElement("style");
-    const sytleContent = document.createTextNode(cssText);
-    styleNode.appendChild(sytleContent);
-    if (clonedNode.firstChild) {
-      clonedNode.insertBefore(styleNode, clonedNode.firstChild);
+  if (compress) {
+    const usedTags = collectUsedTagNames(clone).sort();
+    const tagKey = usedTags.join(",");
+    if (cache.baseStyle.has(tagKey)) {
+      baseCSS = cache.baseStyle.get(tagKey);
     } else {
-      clonedNode.appendChild(styleNode);
+      await new Promise((resolve2) => {
+        idle(() => {
+          baseCSS = generateDedupedBaseCSS(usedTags);
+          cache.baseStyle.set(tagKey, baseCSS);
+          resolve2();
+        }, { fast });
+      });
     }
   }
+  await new Promise((resolve2) => {
+    idle(() => {
+      const rect = element.getBoundingClientRect();
+      let w = rect.width;
+      let h = rect.height;
+      const hasW = Number.isFinite(options.width);
+      const hasH = Number.isFinite(options.height);
+      const hasScale = typeof scale === "number" && scale !== 1;
+      if (!hasScale) {
+        const aspect = rect.width / rect.height;
+        if (hasW && hasH) {
+          w = options.width;
+          h = options.height;
+        } else if (hasW) {
+          w = options.width;
+          h = w / aspect;
+        } else if (hasH) {
+          h = options.height;
+          w = h * aspect;
+        }
+      }
+      w = Math.ceil(w);
+      h = Math.ceil(h);
+      clone.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+      clone.style.transformOrigin = "top left";
+      if (!hasScale && (hasW || hasH)) {
+        const originalW = rect.width;
+        const originalH = rect.height;
+        const scaleX = w / originalW;
+        const scaleY = h / originalH;
+        const existingTransform = clone.style.transform || "";
+        const scaleTransform = `scale(${scaleX}, ${scaleY})`;
+        clone.style.transform = `${scaleTransform} ${existingTransform}`.trim();
+      }
+      const svgNS = "http://www.w3.org/2000/svg";
+      const fo = document.createElementNS(svgNS, "foreignObject");
+      fo.setAttribute("width", "100%");
+      fo.setAttribute("height", "100%");
+      const styleTag = document.createElement("style");
+      styleTag.textContent = baseCSS + fontsCSS + "svg{overflow:visible;}" + classCSS;
+      fo.appendChild(styleTag);
+      fo.appendChild(clone);
+      const serializer = new XMLSerializer();
+      const foString = serializer.serializeToString(fo);
+      const svgHeader = `<svg xmlns="${svgNS}" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`;
+      const svgFooter = "</svg>";
+      svgString = svgHeader + foString + svgFooter;
+      dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+      resolve2();
+    }, { fast });
+  });
+  const sandbox = document.getElementById("snapdom-sandbox");
+  if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
+  return dataURL;
 }
-async function toSvg(node2, options = {}) {
-  const { width, height } = getImageSize(node2, options);
-  const clonedNode = await cloneNode$3(node2, options, true);
-  await embedWebFonts(clonedNode, options);
-  await embedImages(clonedNode, options);
-  applyStyle(clonedNode, options);
-  const datauri = await nodeToDataURL(clonedNode, width, height);
-  return datauri;
-}
-async function toCanvas(node2, options = {}) {
-  const { width, height } = getImageSize(node2, options);
-  const svg = await toSvg(node2, options);
-  const img = await createImage(svg);
+async function toImg(url2, { scale = 1 } = {}) {
+  const img = new Image();
+  img.src = url2;
+  await img.decode();
+  if (scale !== 1) {
+    img.style.width = `${img.naturalWidth * scale}px`;
+    img.style.height = `${img.naturalHeight * scale}px`;
+  }
+  return img;
+}
+async function toCanvas(url2, { dpr = 1, scale = 1 } = {}) {
+  const img = new Image();
+  img.src = url2;
+  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();
+  if (isSafariBrowser) {
+    await new Promise((resolve2) => setTimeout(resolve2, 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.naturalWidth * scale;
+  const height = img.naturalHeight * scale;
   const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  const ratio = options.pixelRatio || getPixelRatio();
-  const canvasWidth = options.canvasWidth || width;
-  const canvasHeight = options.canvasHeight || height;
-  canvas.width = canvasWidth * ratio;
-  canvas.height = canvasHeight * ratio;
-  if (!options.skipAutoScale) {
-    checkCanvasDimensions(canvas);
-  }
-  canvas.style.width = `${canvasWidth}`;
-  canvas.style.height = `${canvasHeight}`;
-  if (options.backgroundColor) {
-    context.fillStyle = options.backgroundColor;
-    context.fillRect(0, 0, canvas.width, canvas.height);
-  }
-  context.drawImage(img, 0, 0, canvas.width, canvas.height);
+  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);
+  if (appended) img.remove();
   return canvas;
 }
-async function toPng(node2, options = {}) {
-  const canvas = await toCanvas(node2, options);
-  return canvas.toDataURL();
+async function toBlob(url2, {
+  type = "svg",
+  scale = 1,
+  backgroundColor = "#fff",
+  quality
+} = {}) {
+  const mime = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp"
+  }[type] || "image/png";
+  if (type === "svg") {
+    const svgText = decodeURIComponent(url2.split(",")[1]);
+    return new Blob([svgText], { type: "image/svg+xml" });
+  }
+  const canvas = await createBackground(url2, { dpr: 1, scale }, backgroundColor);
+  return new Promise((resolve2) => {
+    canvas.toBlob((blob2) => resolve2(blob2), `${mime}`, quality);
+  });
+}
+async function createBackground(url2, { dpr = 1, scale = 1 }, backgroundColor) {
+  const baseCanvas = await toCanvas(url2, { dpr, scale });
+  if (!backgroundColor) return baseCanvas;
+  const temp = document.createElement("canvas");
+  temp.width = baseCanvas.width;
+  temp.height = baseCanvas.height;
+  const ctx = temp.getContext("2d");
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, 0, temp.width, temp.height);
+  ctx.drawImage(baseCanvas, 0, 0);
+  return temp;
+}
+async function toRasterImg(url2, { dpr = 1, scale = 1, backgroundColor, quality }, format = "png") {
+  const defaultBg = ["jpg", "jpeg", "webp"].includes(format) ? "#fff" : void 0;
+  const finalBg = backgroundColor ?? defaultBg;
+  const canvas = await createBackground(url2, { dpr, scale }, finalBg);
+  const img = new Image();
+  img.src = canvas.toDataURL(`image/${format}`, quality);
+  await img.decode();
+  img.style.width = `${canvas.width / dpr}px`;
+  img.style.height = `${canvas.height / dpr}px`;
+  return img;
+}
+async function download(url2, { dpr = 1, scale = 1, backgroundColor, format = "png", filename = "snapDOM" } = {}) {
+  if (format === "svg") {
+    const blob2 = await toBlob(url2);
+    const objectURL = URL.createObjectURL(blob2);
+    const a2 = document.createElement("a");
+    a2.href = objectURL;
+    a2.download = `${filename}.svg`;
+    a2.click();
+    URL.revokeObjectURL(objectURL);
+    return;
+  }
+  const defaultBg = ["jpg", "jpeg", "webp"].includes(format) ? "#fff" : void 0;
+  const finalBg = backgroundColor ?? defaultBg;
+  const canvas = await createBackground(url2, { dpr, scale }, finalBg);
+  const mime = {
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp"
+  }[format] || "image/png";
+  const dataURL = canvas.toDataURL(mime);
+  const a = document.createElement("a");
+  a.href = dataURL;
+  a.download = `${filename}.${format}`;
+  a.click();
+}
+async function snapdom(element, options = {}) {
+  options = { scale: 1, ...options };
+  if (!element) throw new Error("Element cannot be null or undefined");
+  if (options.iconFonts) {
+    extendIconFonts(options.iconFonts);
+  }
+  return await snapdom.capture(element, options);
+}
+snapdom.capture = async (el, options = {}) => {
+  const url2 = await captureDOM(el, options);
+  const dpr = options.dpr ?? (window.devicePixelRatio || 1);
+  const scale = options.scale || 1;
+  return {
+    url: url2,
+    options,
+    toRaw: () => url2,
+    toImg: (opts = {}) => toImg(url2, { scale, ...opts }),
+    toCanvas: (opts = {}) => toCanvas(url2, { dpr, scale, ...opts }),
+    toBlob: (opts = {}) => toBlob(url2, { scale, ...opts }),
+    toPng: (opts = {}) => toRasterImg(url2, { dpr, scale, ...opts }, "png"),
+    toJpg: (opts = {}) => toRasterImg(url2, { dpr, scale, ...opts }, "jpeg"),
+    toWebp: (opts = {}) => toRasterImg(url2, { dpr, scale, ...opts }, "webp"),
+    download: ({ format = "png", filename = "snapDOM", backgroundColor, ...opts } = {}) => download(url2, { dpr, scale, format, filename, backgroundColor, ...opts })
+  };
+};
+snapdom.toRaw = async (el, options) => (await snapdom.capture(el, options)).toRaw();
+snapdom.toImg = async (el, options) => (await snapdom.capture(el, options)).toImg();
+snapdom.toCanvas = async (el, options) => (await snapdom.capture(el, options)).toCanvas();
+snapdom.toBlob = async (el, options) => (await snapdom.capture(el, options)).toBlob(options);
+snapdom.toPng = async (el, options) => (await snapdom.capture(el, options)).toPng(options);
+snapdom.toJpg = async (el, options) => (await snapdom.capture(el, options)).toJpg(options);
+snapdom.toWebp = async (el, options) => (await snapdom.capture(el, options)).toWebp(options);
+snapdom.download = async (el, options = {}) => {
+  const {
+    format = "png",
+    filename = "capture",
+    backgroundColor,
+    ...rest
+  } = options;
+  const capture = await snapdom.capture(el, rest);
+  return await capture.download({ format, filename, backgroundColor });
+};
+const MAX_WIDTH = 1920;
+const MAX_HEIGHT = 1080;
+function getScaledDimensions(originalWidth, originalHeight) {
+  if (originalWidth <= MAX_WIDTH && originalHeight <= MAX_HEIGHT) {
+    return { width: originalWidth, height: originalHeight };
+  }
+  const widthScale = MAX_WIDTH / originalWidth;
+  const heightScale = MAX_HEIGHT / originalHeight;
+  const scale = Math.min(widthScale, heightScale);
+  return {
+    width: Math.round(originalWidth * scale),
+    height: Math.round(originalHeight * scale)
+  };
 }
 async function captureScreenshot(domBody) {
-  const height = document.documentElement.scrollHeight;
-  const width = document.documentElement.scrollWidth;
+  const originalHeight = document.documentElement.scrollHeight;
+  const originalWidth = document.documentElement.scrollWidth;
+  const { width, height } = getScaledDimensions(originalWidth, originalHeight);
   const styles = Array.from(document.styleSheets).map((styleSheet) => {
     try {
       return Array.from(styleSheet.cssRules).map((rule2) => rule2.cssText).join("");
@@ -4396,37 +5334,17 @@ async function captureScreenshot(domBody) {
   const styleElement = document.createElement("style");
   styleElement.textContent = styles;
   domBody.appendChild(styleElement);
-  const filter = (node2) => {
-    const exclusionClasses = ["bf-nocapture"];
-    return !exclusionClasses.some((classname) => node2.classList?.contains(classname));
-  };
-  const image = await toPng(domBody, {
-    quality: 0.7,
-    // Set quality to 0.7
-    width,
-    // Set width to the scroll width
-    height,
-    // Set height to the scroll height
-    style: {
-      transform: "scale(1)"
-      // Set scale to 1 to avoid scaling
-    },
-    skipFonts: true,
-    // Avoid embedding web fonts to bypass SecurityError
-    cacheBust: true,
-    // Prevent caching
-    backgroundColor: "white",
-    // Set background color to white
-    fetchRequestInit: {
-      mode: "cors"
-      // Enable CORS
-    },
-    filter,
-    imagePlaceholder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFdwI2QJIhFwAAAABJRU5ErkJggg=="
-    // Transparent placeholder for CORS-blocked images
-  });
-  domBody.removeChild(styleElement);
-  return image;
+  try {
+    const canvas = await snapdom.toCanvas(domBody, {
+      quality: 0.7,
+      width,
+      height,
+      exclude: [".bf-nocapture"]
+    });
+    return canvas.toDataURL("image/webp", 0.7);
+  } finally {
+    domBody.removeChild(styleElement);
+  }
 }
 const _wellKnownNames = [
   "aaron",
@@ -16913,7 +17831,7 @@ function serializeNode(n2, options) {
     maskTextFn,
     maskInputFn,
     dataURLOptions = {},
-    inlineImages,
+    inlineImages: inlineImages2,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
@@ -16952,7 +17870,7 @@ function serializeNode(n2, options) {
         maskInputOptions,
         maskInputFn,
         dataURLOptions,
-        inlineImages,
+        inlineImages: inlineImages2,
         recordCanvas,
         keepIframeSrcFn,
         newlyAddedElement,
@@ -17020,7 +17938,7 @@ function serializeElementNode(n2, options) {
     maskInputOptions = {},
     maskInputFn,
     dataURLOptions = {},
-    inlineImages,
+    inlineImages: inlineImages2,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
@@ -17117,7 +18035,7 @@ function serializeElementNode(n2, options) {
       }
     }
   }
-  if (tagName === "img" && inlineImages) {
+  if (tagName === "img" && inlineImages2) {
     if (!canvasService) {
       canvasService = doc.createElement("canvas");
       canvasCtx = canvasService.getContext("2d");
@@ -17256,7 +18174,7 @@ function serializeNodeWithId(n2, options) {
     maskInputFn,
     slimDOMOptions,
     dataURLOptions = {},
-    inlineImages = false,
+    inlineImages: inlineImages2 = false,
     recordCanvas = false,
     onSerialize,
     onIframeLoad,
@@ -17289,7 +18207,7 @@ function serializeNodeWithId(n2, options) {
     maskTextFn,
     maskInputFn,
     dataURLOptions,
-    inlineImages,
+    inlineImages: inlineImages2,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement,
@@ -17342,7 +18260,7 @@ function serializeNodeWithId(n2, options) {
       maskInputFn,
       slimDOMOptions,
       dataURLOptions,
-      inlineImages,
+      inlineImages: inlineImages2,
       recordCanvas,
       preserveWhiteSpace,
       onSerialize,
@@ -17401,7 +18319,7 @@ function serializeNodeWithId(n2, options) {
             maskInputFn,
             slimDOMOptions,
             dataURLOptions,
-            inlineImages,
+            inlineImages: inlineImages2,
             recordCanvas,
             preserveWhiteSpace,
             onSerialize,
@@ -17442,7 +18360,7 @@ function serializeNodeWithId(n2, options) {
             maskInputFn,
             slimDOMOptions,
             dataURLOptions,
-            inlineImages,
+            inlineImages: inlineImages2,
             recordCanvas,
             preserveWhiteSpace,
             onSerialize,
@@ -17473,7 +18391,7 @@ function snapshot(n2, options) {
     maskTextClass = "rr-mask",
     maskTextSelector = null,
     inlineStylesheet = true,
-    inlineImages = false,
+    inlineImages: inlineImages2 = false,
     recordCanvas = false,
     maskAllInputs = false,
     maskTextFn,
@@ -17538,7 +18456,7 @@ function snapshot(n2, options) {
     maskInputFn,
     slimDOMOptions,
     dataURLOptions,
-    inlineImages,
+    inlineImages: inlineImages2,
     recordCanvas,
     preserveWhiteSpace,
     onSerialize,
@@ -27864,7 +28782,7 @@ function record(options = {}) {
     recordAfter = options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load",
     userTriggeredOnInput = false,
     collectFonts = false,
-    inlineImages = false,
+    inlineImages: inlineImages2 = false,
     plugins,
     keepIframeSrcFn = () => false,
     ignoreCSSAttributes = /* @__PURE__ */ new Set([]),
@@ -28048,7 +28966,7 @@ function record(options = {}) {
       maskTextFn,
       maskInputFn,
       recordCanvas,
-      inlineImages,
+      inlineImages: inlineImages2,
       sampling,
       slimDOMOptions,
       iframeManager,
@@ -28090,7 +29008,7 @@ function record(options = {}) {
       slimDOM: slimDOMOptions,
       dataURLOptions,
       recordCanvas,
-      inlineImages,
+      inlineImages: inlineImages2,
       onSerialize: (n2) => {
         if (isSerializedIframe$1(n2, mirror)) {
           iframeManager.addIframe(n2);
@@ -28224,7 +29142,7 @@ function record(options = {}) {
           sampling,
           recordDOM,
           recordCanvas,
-          inlineImages,
+          inlineImages: inlineImages2,
           userTriggeredOnInput,
           collectFonts,
           doc,
@@ -37509,7 +38427,7 @@ function toCamelCase(str) {
     ($1) => $1.toUpperCase().replace("-", "").replace("_", "")
   );
 }
-const VERSION = "0.0.19";
+const VERSION = "0.0.21-rc.1";
 class Tracker extends TrackerSdk {
   // 750KB
   constructor(options) {
@@ -37681,14 +38599,12 @@ class Tracker extends TrackerSdk {
    * @param events Array of events to be recorded
    * @returns Promise that resolves when events are recorded and session is managed
    */
-  // NB: this responds to the websocket request, payload is the response
   async recordEventsToServer(events) {
-    this.record(events, (payload) => {
-      this.sessionManager.updateSession(payload.sessionId, {
-        takeFullSnapshot: () => {
-          this.agent.takeFullSnapshot();
-        }
-      });
+    const sessionId = await this.record(events);
+    this.sessionManager.updateSession(sessionId, {
+      takeFullSnapshot: () => {
+        this.agent.takeFullSnapshot();
+      }
     });
   }
   sendScreenViewEvent(props) {