@zumer/snapdom 1.9.12-dev.3 → 1.9.13

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.12-dev.3
+* v.1.9.12-dev.4
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -617,8 +617,9 @@ function idle(fn, { fast = false } = {}) {
 function isSafari() {
   const ua = typeof navigator !== "undefined" && navigator.userAgent ? navigator.userAgent : "";
   const isSafariUA = /^((?!chrome|android).)*safari/i.test(ua);
+  const isUIWebView = /AppleWebKit/i.test(ua) && /Mobile/i.test(ua) && !/Safari/i.test(ua);
   const isWeChatUA = /(MicroMessenger|wxwork|WeCom|WindowsWechat|MacWechat)/i.test(ua);
-  return isSafariUA || isWeChatUA;
+  return isSafariUA || isUIWebView || isWeChatUA;
 }
 
 // src/modules/styles.js
@@ -806,6 +807,64 @@ function stripHeightForWrappers(el, cs, snap) {
   delete snap["block-size"];
 }
 
+// src/modules/CSSVar.js
+function resolveCSSVars(sourceEl, cloneEl) {
+  if (!(sourceEl instanceof Element) || !(cloneEl instanceof Element)) return;
+  const styleAttr = sourceEl.getAttribute?.("style");
+  let hasVar = !!(styleAttr && styleAttr.includes("var("));
+  if (!hasVar && sourceEl.attributes?.length) {
+    const attrs = sourceEl.attributes;
+    for (let i = 0; i < attrs.length; i++) {
+      const a = attrs[i];
+      if (a && typeof a.value === "string" && a.value.includes("var(")) {
+        hasVar = true;
+        break;
+      }
+    }
+  }
+  if (!hasVar) return;
+  let cs;
+  try {
+    cs = getComputedStyle(sourceEl);
+  } catch {
+    return;
+  }
+  const author = sourceEl.style;
+  if (author && author.length) {
+    for (let i = 0; i < author.length; i++) {
+      const prop = author[i];
+      const val = author.getPropertyValue(prop);
+      if (!val || !val.includes("var(")) continue;
+      const resolved = cs.getPropertyValue(prop);
+      if (resolved) {
+        try {
+          cloneEl.style.setProperty(prop, resolved.trim(), author.getPropertyPriority(prop));
+        } catch {
+        }
+      }
+    }
+  }
+  if (sourceEl.attributes?.length) {
+    const attrs = sourceEl.attributes;
+    for (let i = 0; i < attrs.length; i++) {
+      const a = attrs[i];
+      if (!a || typeof a.value !== "string" || !a.value.includes("var(")) continue;
+      const propName = a.name;
+      let resolved = "";
+      try {
+        resolved = cs.getPropertyValue(propName);
+      } catch {
+      }
+      if (resolved) {
+        try {
+          cloneEl.style.setProperty(propName, resolved.trim());
+        } catch {
+        }
+      }
+    }
+  }
+}
+
 // src/core/clone.js
 function idleCallback(childList, callback, fast) {
   return Promise.all(childList.map((child) => {
@@ -827,7 +886,7 @@ function idleCallback(childList, callback, fast) {
 function addNotSlottedRightmost(sel) {
   sel = sel.trim();
   if (!sel) return sel;
-  if (/\:not\(\s*\[data-sd-slotted\]\s*\)\s*$/.test(sel)) return sel;
+  if (/:not\(\s*\[data-sd-slotted\]\s*\)\s*$/.test(sel)) return sel;
   return `${sel}:not([data-sd-slotted])`;
 }
 function wrapWithScope(selectorList, scopeSelector, excludeSlotted = true) {
@@ -1116,7 +1175,7 @@ async function deepClone(node, sessionCache, options) {
     inlineAllStyles(node, clone2, sessionCache, options);
     const placeholder = document.createElement("div");
     placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
-    placeholder.style.cssText = `color:#666;font-size:12px;text-align:center;line-height:1.4;padding:0.5em;box-sizing:border-box;`;
+    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;
   }
@@ -1133,6 +1192,7 @@ async function deepClone(node, sessionCache, options) {
   let clone;
   try {
     clone = node.cloneNode(false);
+    resolveCSSVars(node, clone);
     sessionCache.nodeMap.set(clone, node);
     if (node.tagName === "IMG") {
       freezeImgSrcset(node, clone);
@@ -1188,7 +1248,7 @@ async function deepClone(node, sessionCache, options) {
       } else {
         deepClone(child, sessionCache, options).then((clonedChild) => {
           resolve(clonedChild || null);
-        }).catch((e) => {
+        }).catch(() => {
           resolve(null);
         });
       }
@@ -1229,7 +1289,7 @@ async function deepClone(node, sessionCache, options) {
           markSlottedSubtree(clonedChild);
         }
         resolve(clonedChild || null);
-      }).catch((e) => {
+      }).catch(() => {
         resolve(null);
       });
     };
@@ -1244,7 +1304,7 @@ async function deepClone(node, sessionCache, options) {
     if (clonedAssignedNodes.has(child)) return resolve(null);
     deepClone(child, sessionCache, options).then((clonedChild) => {
       resolve(clonedChild || null);
-    }).catch((e) => {
+    }).catch(() => {
       resolve(null);
     });
   }
@@ -1307,7 +1367,10 @@ function isIconFont2(input) {
 async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
   fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
   const dpr = window.devicePixelRatio || 1;
-  await document.fonts.ready;
+  try {
+    await document.fonts.ready;
+  } catch {
+  }
   const span = document.createElement("span");
   span.textContent = unicodeChar;
   span.style.position = "absolute";
@@ -1325,8 +1388,8 @@ async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, c
   const height = Math.ceil(rect.height);
   document.body.removeChild(span);
   const canvas = document.createElement("canvas");
-  canvas.width = width * dpr;
-  canvas.height = height * dpr;
+  canvas.width = Math.max(1, width * dpr);
+  canvas.height = Math.max(1, height * dpr);
   const ctx = canvas.getContext("2d");
   ctx.scale(dpr, dpr);
   ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
@@ -1444,6 +1507,303 @@ function familiesFromRequired(required) {
   }
   return out;
 }
+function rewriteRelativeUrls(cssText, baseHref) {
+  if (!cssText) return cssText;
+  return cssText.replace(
+    /url\(\s*(['"]?)([^)'"]+)\1\s*\)/g,
+    (m, q, u) => {
+      const src = (u || "").trim();
+      if (!src || /^data:|^blob:|^https?:|^file:|^about:/i.test(src)) return m;
+      let abs = src;
+      try {
+        abs = new URL(src, baseHref || location.href).href;
+      } catch {
+      }
+      return `url("${abs}")`;
+    }
+  );
+}
+var IMPORT_ANY_RE = /@import\s+(?:url\(\s*(['"]?)([^)"']+)\1\s*\)|(['"])([^"']+)\3)([^;]*);/g;
+var MAX_IMPORT_DEPTH = 4;
+async function inlineImportsAndRewrite(cssText, ownerHref, useProxy) {
+  if (!cssText) return cssText;
+  const visited = /* @__PURE__ */ new Set();
+  function normalizeUrl(u, base) {
+    try {
+      return new URL(u, base || location.href).href;
+    } catch {
+      return u;
+    }
+  }
+  async function resolveOnce(text, baseHref, depth = 0) {
+    if (depth > MAX_IMPORT_DEPTH) {
+      console.warn(`[snapDOM] @import depth exceeded (${MAX_IMPORT_DEPTH}) at ${baseHref}`);
+      return text;
+    }
+    let out = "";
+    let last = 0;
+    let m;
+    while (m = IMPORT_ANY_RE.exec(text)) {
+      out += text.slice(last, m.index);
+      last = IMPORT_ANY_RE.lastIndex;
+      const rawUrl = (m[2] || m[4] || "").trim();
+      const absUrl = normalizeUrl(rawUrl, baseHref);
+      if (visited.has(absUrl)) {
+        console.warn("[snapDOM] Skipping circular import");
+        continue;
+      }
+      visited.add(absUrl);
+      let imported = "";
+      try {
+        const r = await snapFetch(absUrl, { as: "text", useProxy, silent: true });
+        if (r.ok && typeof r.data === "string") imported = r.data;
+      } catch {
+      }
+      if (imported) {
+        imported = rewriteRelativeUrls(imported, absUrl);
+        imported = await resolveOnce(imported, absUrl, depth + 1);
+        out += `
+/* inlined: ${absUrl} */
+${imported}
+`;
+      } else {
+        out += m[0];
+      }
+    }
+    out += text.slice(last);
+    return out;
+  }
+  let rewritten = rewriteRelativeUrls(cssText, ownerHref || location.href);
+  rewritten = await resolveOnce(rewritten, ownerHref || location.href, 0);
+  return rewritten;
+}
+var URL_RE = /url\((["']?)([^"')]+)\1\)/g;
+var FACE_RE = /@font-face[^{}]*\{[^}]*\}/g;
+function parseUnicodeRange(ur) {
+  if (!ur) return [];
+  const ranges = [];
+  const parts = ur.split(",").map((s) => s.trim()).filter(Boolean);
+  for (const p of parts) {
+    const m = p.match(/^U\+([0-9A-Fa-f?]+)(?:-([0-9A-Fa-f?]+))?$/);
+    if (!m) continue;
+    const a = m[1], b = m[2];
+    const expand = (hex) => {
+      if (!hex.includes("?")) return parseInt(hex, 16);
+      const min = parseInt(hex.replace(/\?/g, "0"), 16);
+      const max = parseInt(hex.replace(/\?/g, "F"), 16);
+      return [min, max];
+    };
+    if (b) {
+      const A = expand(a), B = expand(b);
+      const min = Array.isArray(A) ? A[0] : A;
+      const max = Array.isArray(B) ? B[1] : B;
+      ranges.push([Math.min(min, max), Math.max(min, max)]);
+    } else {
+      const X = expand(a);
+      if (Array.isArray(X)) ranges.push([X[0], X[1]]);
+      else ranges.push([X, X]);
+    }
+  }
+  return ranges;
+}
+function unicodeIntersects(used, ranges) {
+  if (!ranges.length) return true;
+  if (!used || used.size === 0) return true;
+  for (const cp of used) {
+    for (const [a, b] of ranges) if (cp >= a && cp <= b) return true;
+  }
+  return false;
+}
+function extractSrcUrls(srcValue, baseHref) {
+  const urls = [];
+  if (!srcValue) return urls;
+  for (const m of srcValue.matchAll(URL_RE)) {
+    let u = (m[2] || "").trim();
+    if (!u || u.startsWith("data:")) continue;
+    if (!/^https?:/i.test(u)) {
+      try {
+        u = new URL(u, baseHref || location.href).href;
+      } catch {
+      }
+    }
+    urls.push(u);
+  }
+  return urls;
+}
+async function inlineUrlsInCssBlock(cssBlock, baseHref, useProxy = "") {
+  let out = cssBlock;
+  for (const m of cssBlock.matchAll(URL_RE)) {
+    const raw = extractURL(m[0]);
+    if (!raw) continue;
+    let abs = raw;
+    if (!abs.startsWith("http") && !abs.startsWith("data:")) {
+      try {
+        abs = new URL(abs, baseHref || location.href).href;
+      } catch {
+      }
+    }
+    if (isIconFont2(abs)) continue;
+    if (cache.resource?.has(abs)) {
+      cache.font?.add(abs);
+      out = out.replace(m[0], `url(${cache.resource.get(abs)})`);
+      continue;
+    }
+    if (cache.font?.has(abs)) continue;
+    try {
+      const r = await snapFetch(abs, { as: "dataURL", useProxy, silent: true });
+      if (r.ok && typeof r.data === "string") {
+        const b64 = r.data;
+        cache.resource?.set(abs, b64);
+        cache.font?.add(abs);
+        out = out.replace(m[0], `url(${b64})`);
+      }
+    } catch {
+      console.warn("[snapDOM] Failed to fetch font resource:", abs);
+    }
+  }
+  return out;
+}
+function subsetFromRanges(ranges) {
+  if (!ranges.length) return null;
+  const hit = (a, b) => ranges.some(([x, y]) => !(y < a || x > b));
+  const latin = hit(0, 255) || hit(305, 305);
+  const latinExt = hit(256, 591) || hit(7680, 7935);
+  const greek = hit(880, 1023);
+  const cyr = hit(1024, 1279);
+  const viet = hit(7840, 7929) || hit(258, 259) || hit(416, 417) || hit(431, 432);
+  if (viet) return "vietnamese";
+  if (cyr) return "cyrillic";
+  if (greek) return "greek";
+  if (latinExt) return "latin-ext";
+  if (latin) return "latin";
+  return null;
+}
+function buildSimpleExcluder(ex = {}) {
+  const famSet = new Set((ex.families || []).map((s) => String(s).toLowerCase()));
+  const domSet = new Set((ex.domains || []).map((s) => String(s).toLowerCase()));
+  const subSet = new Set((ex.subsets || []).map((s) => String(s).toLowerCase()));
+  return (meta, parsedRanges) => {
+    if (famSet.size && famSet.has(meta.family.toLowerCase())) return true;
+    if (domSet.size) {
+      for (const u of meta.srcUrls) {
+        try {
+          if (domSet.has(new URL(u).host.toLowerCase())) return true;
+        } catch {
+        }
+      }
+    }
+    if (subSet.size) {
+      const label = subsetFromRanges(parsedRanges);
+      if (label && subSet.has(label)) return true;
+    }
+    return false;
+  };
+}
+function dedupeFontFaces(cssText) {
+  if (!cssText) return cssText;
+  const FACE_RE_G = /@font-face[^{}]*\{[^}]*\}/gi;
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const block of cssText.match(FACE_RE_G) || []) {
+    const familyRaw = block.match(/font-family:\s*([^;]+);/i)?.[1] || "";
+    const family = pickPrimaryFamily(familyRaw);
+    const weightSpec = (block.match(/font-weight:\s*([^;]+);/i)?.[1] || "400").trim();
+    const styleSpec = (block.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
+    const stretchSpec = (block.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
+    const urange = (block.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
+    const srcRaw = (block.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
+    const urls = extractSrcUrls(srcRaw, location.href);
+    const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
+    const key = [
+      String(family || "").toLowerCase(),
+      weightSpec,
+      styleSpec,
+      stretchSpec,
+      urange.toLowerCase(),
+      srcPart
+    ].join("|");
+    if (!seen.has(key)) {
+      seen.add(key);
+      out.push(block);
+    }
+  }
+  if (out.length === 0) return cssText;
+  let i = 0;
+  return cssText.replace(FACE_RE_G, () => out[i++] || "");
+}
+function buildFontsCacheKey(required, exclude, localFonts, useProxy) {
+  const req = Array.from(required || []).sort().join("|");
+  const ex = exclude ? JSON.stringify({
+    families: (exclude.families || []).map((s) => String(s).toLowerCase()).sort(),
+    domains: (exclude.domains || []).map((s) => String(s).toLowerCase()).sort(),
+    subsets: (exclude.subsets || []).map((s) => String(s).toLowerCase()).sort()
+  }) : "";
+  const lf = (localFonts || []).map((f) => `${(f.family || "").toLowerCase()}::${f.weight || "normal"}::${f.style || "normal"}::${f.src || ""}`).sort().join("|");
+  const px = useProxy || "";
+  return `fonts-embed-css::req=${req}::ex=${ex}::lf=${lf}::px=${px}`;
+}
+async function collectFacesFromSheet(sheet, baseHref, emitFace, ctx) {
+  let rules;
+  try {
+    rules = sheet.cssRules || [];
+  } catch {
+    return;
+  }
+  const normalizeUrl = (u, base) => {
+    try {
+      return new URL(u, base || location.href).href;
+    } catch {
+      return u;
+    }
+  };
+  for (const rule of rules) {
+    if (rule.type === CSSRule.IMPORT_RULE && rule.styleSheet) {
+      const childHref = rule.href ? normalizeUrl(rule.href, baseHref) : baseHref;
+      if (ctx.depth >= MAX_IMPORT_DEPTH) {
+        console.warn(`[snapDOM] CSSOM import depth exceeded (${MAX_IMPORT_DEPTH}) at ${childHref}`);
+        continue;
+      }
+      if (childHref && ctx.visitedSheets.has(childHref)) {
+        console.warn(`[snapDOM] Skipping circular CSSOM import: ${childHref}`);
+        continue;
+      }
+      if (childHref) ctx.visitedSheets.add(childHref);
+      const nextCtx = { ...ctx, depth: (ctx.depth || 0) + 1 };
+      await collectFacesFromSheet(rule.styleSheet, childHref, emitFace, nextCtx);
+      continue;
+    }
+    if (rule.type === CSSRule.FONT_FACE_RULE) {
+      const famRaw = (rule.style.getPropertyValue("font-family") || "").trim();
+      const family = pickPrimaryFamily(famRaw);
+      if (!family || isIconFont2(family)) continue;
+      const weightSpec = (rule.style.getPropertyValue("font-weight") || "400").trim();
+      const styleSpec = (rule.style.getPropertyValue("font-style") || "normal").trim();
+      const stretchSpec = (rule.style.getPropertyValue("font-stretch") || "100%").trim();
+      const srcRaw = (rule.style.getPropertyValue("src") || "").trim();
+      const urange = (rule.style.getPropertyValue("unicode-range") || "").trim();
+      if (!ctx.faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
+      const ranges = parseUnicodeRange(urange);
+      if (!unicodeIntersects(ctx.usedCodepoints, ranges)) continue;
+      const meta = {
+        family,
+        weightSpec,
+        styleSpec,
+        stretchSpec,
+        unicodeRange: urange,
+        srcRaw,
+        srcUrls: extractSrcUrls(srcRaw, baseHref || location.href),
+        href: baseHref || location.href
+      };
+      if (ctx.simpleExcluder && ctx.simpleExcluder(meta, ranges)) continue;
+      if (/url\(/i.test(srcRaw)) {
+        const inlinedSrc = await inlineUrlsInCssBlock(srcRaw, baseHref || location.href, ctx.useProxy);
+        await emitFace(`@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`);
+      } else {
+        await emitFace(`@font-face{font-family:${family};src:${srcRaw};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`);
+      }
+    }
+  }
+}
 async function embedCustomFonts({
   required,
   usedCodepoints,
@@ -1461,9 +1821,6 @@ async function embedCustomFonts({
     arr.push({ w: parseInt(w, 10), s, st: parseInt(st, 10) });
     requiredIndex.set(fam, arr);
   }
-  const IMPORT_RE = /@import\s+url\(["']?([^"')]+)["']?\)/g;
-  const URL_RE = /url\((["']?)([^"')]+)\1\)/g;
-  const FACE_RE = /@font-face[^{}]*\{[^}]*\}/g;
   function faceMatchesRequired(fam, styleSpec, weightSpec, stretchSpec) {
     if (!requiredIndex.has(fam)) return false;
     const need = requiredIndex.get(fam);
@@ -1489,188 +1846,23 @@ async function embedCustomFonts({
         const sOk = styleOK(normStyle(r.s));
         const tOk = r.st >= ts.min && r.st <= ts.max;
         const nearWeight = Math.abs(faceSingleW - r.w) <= 300;
-        if (nearWeight && sOk && tOk) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-  function parseUnicodeRange(ur) {
-    if (!ur) return [];
-    const ranges = [];
-    const parts = ur.split(",").map((s) => s.trim()).filter(Boolean);
-    for (const p of parts) {
-      const m = p.match(/^U\+([0-9A-Fa-f?]+)(?:-([0-9A-Fa-f?]+))?$/);
-      if (!m) continue;
-      const a = m[1], b = m[2];
-      const expand = (hex) => {
-        if (!hex.includes("?")) return parseInt(hex, 16);
-        const min = parseInt(hex.replace(/\?/g, "0"), 16);
-        const max = parseInt(hex.replace(/\?/g, "F"), 16);
-        return [min, max];
-      };
-      if (b) {
-        const A = expand(a), B = expand(b);
-        const min = Array.isArray(A) ? A[0] : A;
-        const max = Array.isArray(B) ? B[1] : B;
-        ranges.push([Math.min(min, max), Math.max(min, max)]);
-      } else {
-        const X = expand(a);
-        if (Array.isArray(X)) ranges.push([X[0], X[1]]);
-        else ranges.push([X, X]);
+        if (nearWeight && sOk && tOk) return true;
       }
     }
-    return ranges;
-  }
-  function unicodeIntersects(used, ranges) {
-    if (!ranges.length) return true;
-    if (!used || used.size === 0) return true;
-    for (const cp of used) {
-      for (const [a, b] of ranges) if (cp >= a && cp <= b) return true;
-    }
     return false;
   }
-  function extractSrcUrls(srcValue, baseHref) {
-    const urls = [];
-    if (!srcValue) return urls;
-    for (const m of srcValue.matchAll(URL_RE)) {
-      let u = (m[2] || "").trim();
-      if (!u || u.startsWith("data:")) continue;
-      if (!/^https?:/i.test(u)) {
-        try {
-          u = new URL(u, baseHref || location.href).href;
-        } catch {
-        }
-      }
-      urls.push(u);
-    }
-    return urls;
-  }
-  async function inlineUrlsInCssBlock(cssBlock, baseHref) {
-    let out = cssBlock;
-    for (const m of cssBlock.matchAll(URL_RE)) {
-      const raw = extractURL(m[0]);
-      if (!raw) continue;
-      let abs = raw;
-      if (!abs.startsWith("http") && !abs.startsWith("data:")) {
-        try {
-          abs = new URL(abs, baseHref || location.href).href;
-        } catch {
-        }
-      }
-      if (isIconFont2(abs)) continue;
-      if (cache.resource?.has(abs)) {
-        cache.font?.add(abs);
-        out = out.replace(m[0], `url(${cache.resource.get(abs)})`);
-        continue;
-      }
-      if (cache.font?.has(abs)) continue;
-      try {
-        const r = await snapFetch(abs, { as: "dataURL", useProxy, silent: true });
-        if (r.ok && typeof r.data === "string") {
-          const b64 = r.data;
-          cache.resource?.set(abs, b64);
-          cache.font?.add(abs);
-          out = out.replace(m[0], `url(${b64})`);
-        }
-      } catch {
-        console.warn("[snapDOM] Failed to fetch font resource:", abs);
-      }
-    }
-    return out;
-  }
-  function subsetFromRanges(ranges) {
-    if (!ranges.length) return null;
-    const hit = (a, b) => ranges.some(([x, y]) => !(y < a || x > b));
-    const latin = hit(0, 255) || hit(305, 305);
-    const latinExt = hit(256, 591) || hit(7680, 7935);
-    const greek = hit(880, 1023);
-    const cyr = hit(1024, 1279);
-    const viet = hit(7840, 7929) || hit(258, 259) || hit(416, 417) || hit(431, 432);
-    if (viet) return "vietnamese";
-    if (cyr) return "cyrillic";
-    if (greek) return "greek";
-    if (latinExt) return "latin-ext";
-    if (latin) return "latin";
-    return null;
-  }
-  function buildSimpleExcluder(ex = {}) {
-    const famSet = new Set((ex.families || []).map((s) => String(s).toLowerCase()));
-    const domSet = new Set((ex.domains || []).map((s) => String(s).toLowerCase()));
-    const subSet = new Set((ex.subsets || []).map((s) => String(s).toLowerCase()));
-    return (meta, parsedRanges) => {
-      if (famSet.size && famSet.has(meta.family.toLowerCase())) return true;
-      if (domSet.size) {
-        for (const u of meta.srcUrls) {
-          try {
-            if (domSet.has(new URL(u).host.toLowerCase())) return true;
-          } catch {
-          }
-        }
-      }
-      if (subSet.size) {
-        const label = subsetFromRanges(parsedRanges);
-        if (label && subSet.has(label)) return true;
-      }
-      return false;
-    };
-  }
   const simpleExcluder = buildSimpleExcluder(exclude);
-  function dedupeFontFaces(cssText) {
-    if (!cssText) return cssText;
-    const FACE_RE2 = /@font-face[^{}]*\{[^}]*\}/gi;
-    const seen = /* @__PURE__ */ new Set();
-    const out = [];
-    for (const block of cssText.match(FACE_RE2) || []) {
-      const familyRaw = block.match(/font-family:\s*([^;]+);/i)?.[1] || "";
-      const family = pickPrimaryFamily(familyRaw);
-      const weightSpec = (block.match(/font-weight:\s*([^;]+);/i)?.[1] || "400").trim();
-      const styleSpec = (block.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
-      const stretchSpec = (block.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
-      const urange = (block.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
-      const srcRaw = (block.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
-      const urls = extractSrcUrls(srcRaw, location.href);
-      const srcPart = urls.length ? urls.map((u) => String(u).toLowerCase()).sort().join("|") : srcRaw.toLowerCase();
-      const key = [
-        String(family || "").toLowerCase(),
-        weightSpec,
-        styleSpec,
-        stretchSpec,
-        urange.toLowerCase(),
-        srcPart
-      ].join("|");
-      if (!seen.has(key)) {
-        seen.add(key);
-        out.push(block);
-      }
-    }
-    if (out.length === 0) return cssText;
-    let i = 0;
-    return cssText.replace(FACE_RE2, () => out[i++] || "");
-  }
-  function buildFontsCacheKey() {
-    const req = Array.from(required || []).sort().join("|");
-    const ex = exclude ? JSON.stringify({
-      families: (exclude.families || []).map((s) => String(s).toLowerCase()).sort(),
-      domains: (exclude.domains || []).map((s) => String(s).toLowerCase()).sort(),
-      subsets: (exclude.subsets || []).map((s) => String(s).toLowerCase()).sort()
-    }) : "";
-    const lf = (localFonts || []).map((f) => `${(f.family || "").toLowerCase()}::${f.weight || "normal"}::${f.style || "normal"}::${f.src || ""}`).sort().join("|");
-    const px = useProxy || "";
-    return `fonts-embed-css::req=${req}::ex=${ex}::lf=${lf}::px=${px}`;
-  }
-  const cacheKey = buildFontsCacheKey();
+  const cacheKey = buildFontsCacheKey(required, exclude, localFonts, useProxy);
   if (cache.resource?.has(cacheKey)) {
-    const css = cache.resource.get(cacheKey);
-    return css;
+    return cache.resource.get(cacheKey);
   }
   const requiredFamilies = familiesFromRequired(required);
   const importUrls = [];
+  const IMPORT_ANY_RE_LOCAL = IMPORT_ANY_RE;
   for (const styleTag of document.querySelectorAll("style")) {
     const cssText = styleTag.textContent || "";
-    for (const m of cssText.matchAll(IMPORT_RE)) {
-      const u = m[1];
+    for (const m of cssText.matchAll(IMPORT_ANY_RE_LOCAL)) {
+      const u = (m[2] || m[4] || "").trim();
       if (!u || isIconFont2(u)) continue;
       const hasLink = !!document.querySelector(`link[rel="stylesheet"][href="${u}"]`);
       if (!hasLink) importUrls.push(u);
@@ -1717,65 +1909,53 @@ async function embedCustomFonts({
         cssText = res.data;
         if (isIconFont2(link.href)) continue;
       }
+      cssText = await inlineImportsAndRewrite(cssText, link.href, useProxy);
       let facesOut = "";
       for (const face of cssText.match(FACE_RE) || []) {
         const famRaw = (face.match(/font-family:\s*([^;]+);/i)?.[1] || "").trim();
         const family = pickPrimaryFamily(famRaw);
-        if (!family || isIconFont2(family)) {
-          continue;
-        }
+        if (!family || isIconFont2(family)) continue;
         const weightSpec = (face.match(/font-weight:\s*([^;]+);/i)?.[1] || "400").trim();
         const styleSpec = (face.match(/font-style:\s*([^;]+);/i)?.[1] || "normal").trim();
         const stretchSpec = (face.match(/font-stretch:\s*([^;]+);/i)?.[1] || "100%").trim();
         const urange = (face.match(/unicode-range:\s*([^;]+);/i)?.[1] || "").trim();
         const srcRaw = (face.match(/src\s*:\s*([^;]+);/i)?.[1] || "").trim();
         const srcUrls = extractSrcUrls(srcRaw, link.href);
-        if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) {
-          continue;
-        }
+        if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
         const ranges = parseUnicodeRange(urange);
-        if (!unicodeIntersects(usedCodepoints, ranges)) {
-          continue;
-        }
+        if (!unicodeIntersects(usedCodepoints, ranges)) continue;
         const meta = { family, weightSpec, styleSpec, stretchSpec, unicodeRange: urange, srcRaw, srcUrls, href: link.href };
-        if (exclude && simpleExcluder(meta, ranges)) {
-          continue;
-        }
-        const newFace = /url\(/i.test(srcRaw) ? await inlineUrlsInCssBlock(face, link.href) : face;
-        facesOut += newFace + "";
+        if (exclude && simpleExcluder(meta, ranges)) continue;
+        const newFace = /url\(/i.test(srcRaw) ? await inlineUrlsInCssBlock(face, link.href, useProxy) : face;
+        facesOut += newFace;
       }
-      if (facesOut.trim()) finalCSS += facesOut + "";
-    } catch (e) {
-      console.warn("[snapdom] Failed to process stylesheet:", link.href);
+      if (facesOut.trim()) finalCSS += facesOut;
+    } catch {
+      console.warn("[snapDOM] Failed to process stylesheet:", link.href);
     }
   }
+  const ctx = {
+    requiredIndex,
+    usedCodepoints,
+    faceMatchesRequired,
+    simpleExcluder: exclude ? buildSimpleExcluder(exclude) : null,
+    useProxy,
+    visitedSheets: /* @__PURE__ */ new Set(),
+    depth: 0
+  };
   for (const sheet of document.styleSheets) {
+    if (sheet.href && linkNodes.some((l) => l.href === sheet.href)) continue;
     try {
-      if (sheet.href && linkNodes.some((l) => l.href === sheet.href)) continue;
-      const rules = sheet.cssRules || [];
-      for (const rule of rules) {
-        if (rule.type !== CSSRule.FONT_FACE_RULE) continue;
-        const famRaw = (rule.style.getPropertyValue("font-family") || "").trim();
-        const family = pickPrimaryFamily(famRaw);
-        if (!family || isIconFont2(family)) continue;
-        const weightSpec = (rule.style.getPropertyValue("font-weight") || "400").trim();
-        const styleSpec = (rule.style.getPropertyValue("font-style") || "normal").trim();
-        const stretchSpec = (rule.style.getPropertyValue("font-stretch") || "100%").trim();
-        const srcRaw = (rule.style.getPropertyValue("src") || "").trim();
-        const urange = (rule.style.getPropertyValue("unicode-range") || "").trim();
-        const srcUrls = extractSrcUrls(srcRaw, sheet.href || location.href);
-        if (!faceMatchesRequired(family, styleSpec, weightSpec, stretchSpec)) continue;
-        const ranges = parseUnicodeRange(urange);
-        if (!unicodeIntersects(usedCodepoints, ranges)) continue;
-        const meta = { family, weightSpec, styleSpec, stretchSpec, unicodeRange: urange, srcRaw, srcUrls, href: sheet.href || location.href };
-        if (exclude && simpleExcluder(meta, ranges)) continue;
-        if (/url\(/i.test(srcRaw)) {
-          const inlinedSrc = await inlineUrlsInCssBlock(srcRaw, sheet.href || location.href);
-          finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`;
-        } else {
-          finalCSS += `@font-face{font-family:${family};src:${srcRaw};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`;
-        }
-      }
+      const rootHref = sheet.href || location.href;
+      if (rootHref) ctx.visitedSheets.add(rootHref);
+      await collectFacesFromSheet(
+        sheet,
+        rootHref,
+        async (faceCss) => {
+          finalCSS += faceCss;
+        },
+        ctx
+      );
     } catch {
     }
   }
@@ -1804,7 +1984,7 @@ async function embedCustomFonts({
               continue;
             }
           } catch {
-            console.warn("[snapdom] Failed to fetch dynamic font src:", f._snapdomSrc);
+            console.warn("[snapDOM] Failed to fetch dynamic font src:", f._snapdomSrc);
             continue;
           }
         }
@@ -1839,7 +2019,7 @@ async function embedCustomFonts({
             continue;
           }
         } catch {
-          console.warn("[snapdom] Failed to fetch localFonts src:", src);
+          console.warn("[snapDOM] Failed to fetch localFonts src:", src);
           continue;
         }
       }
@@ -1928,7 +2108,7 @@ async function ensureFontsReady(families, warmupRepetitions = 2) {
   if (fams.length === 0) return;
   const warmupOnce = () => {
     const container = document.createElement("div");
-    container.style.cssText = `position: absolute !important;left: -9999px !important;top: 0 !important;opacity: 0 !important;pointer-events: none !important;contain: layout size style;`;
+    container.style.cssText = "position:absolute!important;left:-9999px!important;top:0!important;opacity:0!important;pointer-events:none!important;contain:layout size style;";
     for (const fam of fams) {
       const span = document.createElement("span");
       span.textContent = "AaBbGg1234\xC1\xC9\xCD\xD3\xDA\xE7\xF1\u2014\u221E";
@@ -2279,9 +2459,6 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       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;
@@ -2289,14 +2466,13 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       const hasExplicitContent = rawContent !== "none" && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
-      const hasBox2 = display !== "inline" && (width > 0 || height > 0);
       const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
       const hasTransform = transform && transform !== "none";
-      const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox2 || hasBorder || hasTransform;
+      const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBorder || hasTransform;
       if (!shouldRender) {
         if (incs && incs.length && source.parentElement) {
           const map = __siblingCounters.get(source.parentElement) || /* @__PURE__ */ new Map();
-          for (const { name, num } of incs) {
+          for (const { name } of incs) {
             if (!name) continue;
             const baseWithSibs = withSiblingOverrides(source, counterCtx);
             const derived = deriveCounterCtxForPseudo(source, getComputedStyle(source, pseudo), baseWithSibs);
@@ -2310,6 +2486,7 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       const pseudoEl = document.createElement("span");
       pseudoEl.dataset.snapdomPseudo = pseudo;
       pseudoEl.style.verticalAlign = "middle";
+      pseudoEl.style.pointerEvents = "none";
       const snapshot = snapshotComputedStyle(style);
       const key = getStyleKey(snapshot, "span");
       sessionCache.styleMap.set(pseudoEl, key);
@@ -2336,6 +2513,10 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       } else if (!isIconFont22 && hasExplicitContent) {
         pseudoEl.textContent = cleanContent;
       }
+      pseudoEl.style.background = "none";
+      if ("mask" in pseudoEl.style) {
+        pseudoEl.style.mask = "none";
+      }
       if (hasBg) {
         try {
           const bgSplits = splitBackgroundImage(bg);
@@ -2347,7 +2528,7 @@ async function inlinePseudoElements(source, clone, sessionCache, options) {
       }
       if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
       const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent?.trim() !== "";
-      const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox2 || hasBorder || hasTransform;
+      const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBorder || hasTransform;
       if (incs && incs.length && source.parentElement) {
         const map = __siblingCounters.get(source.parentElement) || /* @__PURE__ */ new Map();
         const baseWithSibs = withSiblingOverrides(source, counterCtx);
@@ -2426,6 +2607,102 @@ function inlineExternalDefsAndSymbols(rootElement) {
   });
 }
 
+// src/modules/changeCSS.js
+function freezeSticky(originalRoot, cloneRoot) {
+  if (!originalRoot || !cloneRoot) return;
+  const scrollTop = originalRoot.scrollTop || 0;
+  if (!scrollTop) return;
+  if (getComputedStyle(cloneRoot).position === "static") {
+    cloneRoot.style.position = "relative";
+  }
+  const rootRect = originalRoot.getBoundingClientRect();
+  const viewportH = originalRoot.clientHeight;
+  const PH_ATTR = "data-snap-ph";
+  const walker = document.createTreeWalker(originalRoot, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) {
+    const el = (
+      /** @type {HTMLElement} */
+      walker.currentNode
+    );
+    const cs = getComputedStyle(el);
+    const pos = cs.position;
+    if (pos !== "sticky" && pos !== "-webkit-sticky") continue;
+    const topInit = _toPx(cs.top);
+    const bottomInit = _toPx(cs.bottom);
+    if (topInit == null && bottomInit == null) continue;
+    const path = _pathOf(el, originalRoot);
+    const cloneEl = _findByPathIgnoringPlaceholders(cloneRoot, path, PH_ATTR);
+    if (!cloneEl) continue;
+    const elRect = el.getBoundingClientRect();
+    const widthPx = elRect.width;
+    const heightPx = elRect.height;
+    const leftPx = elRect.left - rootRect.left;
+    if (!(widthPx > 0 && heightPx > 0)) continue;
+    if (!Number.isFinite(leftPx)) continue;
+    const topAbsPx = topInit != null ? topInit + scrollTop : scrollTop + (viewportH - heightPx - /** bottomInit non-null */
+    bottomInit);
+    if (!Number.isFinite(topAbsPx)) continue;
+    const zParsed = Number.parseInt(cs.zIndex, 10);
+    const hasZ = Number.isFinite(zParsed);
+    const overlayZ = hasZ ? Math.max(zParsed, 1) + 1 : 2;
+    const placeholderZ = hasZ ? zParsed - 1 : 0;
+    const ph = cloneEl.cloneNode(false);
+    ph.setAttribute(PH_ATTR, "1");
+    ph.style.position = "sticky";
+    ph.style.left = `${leftPx}px`;
+    ph.style.top = `${topAbsPx}px`;
+    ph.style.width = `${widthPx}px`;
+    ph.style.height = `${heightPx}px`;
+    ph.style.visibility = "hidden";
+    ph.style.zIndex = String(placeholderZ);
+    ph.style.overflow = "hidden";
+    ph.style.background = "transparent";
+    ph.style.boxShadow = "none";
+    ph.style.filter = "none";
+    cloneEl.parentElement?.insertBefore(ph, cloneEl);
+    cloneEl.style.position = "absolute";
+    cloneEl.style.left = `${leftPx}px`;
+    cloneEl.style.top = `${topAbsPx}px`;
+    cloneEl.style.bottom = "auto";
+    cloneEl.style.zIndex = String(overlayZ);
+    cloneEl.style.pointerEvents = "none";
+  }
+}
+function _toPx(v) {
+  if (!v || v === "auto") return null;
+  const n = Number.parseFloat(v);
+  return Number.isFinite(n) ? n : null;
+}
+function _pathOf(el, root) {
+  const path = [];
+  for (let cur = el; cur && cur !== root; ) {
+    const p = cur.parentElement;
+    if (!p) break;
+    path.push(Array.prototype.indexOf.call(p.children, cur));
+    cur = p;
+  }
+  return path.reverse();
+}
+function _findByPathIgnoringPlaceholders(root, path, phAttr) {
+  let cur = root;
+  for (let i = 0; i < path.length; i++) {
+    const kids = _childrenWithoutPlaceholders(cur, phAttr);
+    cur = /** @type {HTMLElement|undefined} */
+    kids[path[i]];
+    if (!cur) return null;
+  }
+  return cur instanceof HTMLElement ? cur : null;
+}
+function _childrenWithoutPlaceholders(el, phAttr) {
+  const out = [];
+  const ch = el.children;
+  for (let i = 0; i < ch.length; i++) {
+    const c = ch[i];
+    if (!c.hasAttribute(phAttr)) out.push(c);
+  }
+  return out;
+}
+
 // src/core/prepare.js
 async function prepareClone(element, options = {}) {
   const sessionCache = {
@@ -2500,6 +2777,8 @@ async function prepareClone(element, options = {}) {
       cloneNode.appendChild(inner);
     }
   }
+  const contentRoot = clone instanceof HTMLElement && clone.firstElementChild instanceof HTMLElement ? clone.firstElementChild : clone;
+  freezeSticky(element, contentRoot);
   if (element === sessionCache.nodeMap.get(clone)) {
     const computed = sessionCache.styleCache.get(element) || window.getComputedStyle(element);
     sessionCache.styleCache.set(element, computed);
@@ -2875,18 +3154,49 @@ function isPlainTextContainer(el) {
 }
 
 // src/core/capture.js
+function stripRootShadows(originalEl, cloneRoot) {
+  if (!originalEl || !cloneRoot || !cloneRoot.style) return;
+  const cs = getComputedStyle(originalEl);
+  try {
+    cloneRoot.style.boxShadow = "none";
+  } catch {
+  }
+  try {
+    cloneRoot.style.textShadow = "none";
+  } catch {
+  }
+  try {
+    cloneRoot.style.outline = "none";
+  } catch {
+  }
+  const f = cs.filter || "";
+  const cleaned = f.replace(/\bblur\([^()]*\)\s*/gi, "").replace(/\bdrop-shadow\([^()]*\)\s*/gi, "").trim().replace(/\s+/g, " ");
+  try {
+    cloneRoot.style.filter = cleaned.length ? cleaned : "none";
+  } catch {
+  }
+}
 async function captureDOM(element, options) {
   if (!element) throw new Error("Element cannot be null or undefined");
   applyCachePolicy(options.cache);
   const fast = options.fast;
+  const straighten = !!options.straighten;
+  const noShadows = !!options.noShadows;
   let clone, classCSS, styleCache;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
+  let rootTransform2D = null;
   const undoClamp = lineClamp(element);
   try {
     ({ clone, classCSS, styleCache } = await prepareClone(element, options));
+    if (straighten && clone) {
+      rootTransform2D = normalizeRootTransforms(element, clone);
+    }
+    if (noShadows && clone) {
+      stripRootShadows(element, clone);
+    }
   } finally {
     undoClamp();
   }
@@ -2911,7 +3221,7 @@ async function captureDOM(element, options) {
           const families = new Set(
             Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
           );
-          await ensureFontsReady(families, 2);
+          await ensureFontsReady(families, 1);
         }
         fontsCSS = await embedCustomFonts({
           required,
@@ -2959,60 +3269,7 @@ async function captureDOM(element, options) {
           b = Math.max(b, extY + Math.max(oy, 0));
           t = Math.max(t, extY + Math.max(-oy, 0));
         }
-        return {
-          bleed: { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b), left: Math.ceil(l) },
-          has: found
-        };
-      }
-      function parseBoxShadow(cs) {
-        const v = cs.boxShadow || "";
-        if (!v || v === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
-        const parts = v.split(/\),(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((s) => s.trim());
-        let t = 0, r = 0, b2 = 0, l = 0;
-        for (const part of parts) {
-          const nums = part.match(/-?\d+(\.\d+)?px/g)?.map((n) => parseFloat(n)) || [];
-          if (nums.length < 2) continue;
-          const [ox2, oy2, blur = 0, spread = 0] = nums;
-          const extX = Math.abs(ox2) + blur + spread;
-          const extY = Math.abs(oy2) + blur + spread;
-          r = Math.max(r, extX + Math.max(ox2, 0));
-          l = Math.max(l, extX + Math.max(-ox2, 0));
-          b2 = Math.max(b2, extY + Math.max(oy2, 0));
-          t = Math.max(t, extY + Math.max(-oy2, 0));
-        }
-        return { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b2), left: Math.ceil(l) };
-      }
-      function parseFilterBlur(cs) {
-        const m = (cs.filter || "").match(/blur\(\s*([0-9.]+)px\s*\)/);
-        const b2 = m ? Math.ceil(parseFloat(m[1]) || 0) : 0;
-        return { top: b2, right: b2, bottom: b2, left: b2 };
-      }
-      function parseOutline(cs) {
-        if ((cs.outlineStyle || "none") === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
-        const w2 = Math.ceil(parseFloat(cs.outlineWidth || "0") || 0);
-        return { top: w2, right: w2, bottom: w2, left: w2 };
-      }
-      function bboxWithOriginFull(w2, h2, M, ox2, oy2) {
-        const a2 = M.a, b2 = M.b, c2 = M.c, d2 = M.d, e2 = M.e || 0, f2 = M.f || 0;
-        function pt(x, y) {
-          let X = x - ox2, Y = y - oy2;
-          let X2 = a2 * X + c2 * Y, Y2 = b2 * X + d2 * Y;
-          X2 += ox2 + e2;
-          Y2 += oy2 + f2;
-          return [X2, Y2];
-        }
-        const P = [pt(0, 0), pt(w2, 0), pt(0, h2), pt(w2, h2)];
-        let minX2 = Infinity, minY2 = Infinity, maxX2 = -Infinity, maxY2 = -Infinity;
-        for (const [X, Y] of P) {
-          if (X < minX2) minX2 = X;
-          if (Y < minY2) minY2 = Y;
-          if (X > maxX2) maxX2 = X;
-          if (Y > maxY2) maxY2 = Y;
-        }
-        return { minX: minX2, minY: minY2, maxX: maxX2, maxY: maxY2, width: maxX2 - minX2, height: maxY2 - minY2 };
-      }
-      function hasTFBBox(el) {
-        return hasBBoxAffectingTransform(el);
+        return { bleed: { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b), left: Math.ceil(l) }, has: found };
       }
       const rect = element.getBoundingClientRect();
       const w0 = Math.max(1, Math.ceil(element.offsetWidth || parseFloat(csEl.width) || rect.width || 1));
@@ -3041,28 +3298,38 @@ async function captureDOM(element, options) {
         h = h0;
       }
       let minX = 0, minY = 0, maxX = w0, maxY = h0;
-      if (hasTFBBox(element)) {
-        const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
-        const ind2 = readIndividualTransforms(element);
-        const TOTAL = readTotalTransformMatrix({
-          baseTransform: baseTransform2,
-          rotate: ind2.rotate || "0deg",
-          scale: ind2.scale,
-          translate: ind2.translate
-        });
-        const { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0);
-        const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString());
-        const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2);
-        minX = bb.minX;
-        minY = bb.minY;
-        maxX = bb.maxX;
-        maxY = bb.maxY;
+      if (straighten && rootTransform2D && Number.isFinite(rootTransform2D.a)) {
+        const M2 = { a: rootTransform2D.a, b: rootTransform2D.b || 0, c: rootTransform2D.c || 0, d: rootTransform2D.d || 1, e: 0, f: 0 };
+        const bb2 = bboxWithOriginFull(w0, h0, M2, 0, 0);
+        minX = bb2.minX;
+        minY = bb2.minY;
+        maxX = bb2.maxX;
+        maxY = bb2.maxY;
+      } else {
+        const useTFBBox = !straighten && hasTFBBox(element);
+        if (useTFBBox) {
+          const baseTransform2 = csEl.transform && csEl.transform !== "none" ? csEl.transform : "";
+          const ind2 = readIndividualTransforms(element);
+          const TOTAL = readTotalTransformMatrix({
+            baseTransform: baseTransform2,
+            rotate: ind2.rotate || "0deg",
+            scale: ind2.scale,
+            translate: ind2.translate
+          });
+          const { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0);
+          const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString());
+          const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2);
+          minX = bb.minX;
+          minY = bb.minY;
+          maxX = bb.maxX;
+          maxY = bb.maxY;
+        }
       }
       const bleedShadow = parseBoxShadow(csEl);
       const bleedBlur = parseFilterBlur(csEl);
       const bleedOutline = parseOutline(csEl);
       const drop = parseFilterDropShadows(csEl);
-      const bleed = {
+      const bleed = noShadows ? { top: 0, right: 0, bottom: 0, left: 0 } : {
         top: bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top,
         right: bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right,
         bottom: bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom,
@@ -3077,7 +3344,9 @@ async function captureDOM(element, options) {
       const outW = Math.max(1, Math.round(vbW0 * (hasW || hasH ? w / w0 : 1)));
       const outH = Math.max(1, Math.round(vbH0 * (hasH || hasW ? h / h0 : 1)));
       const svgNS = "http://www.w3.org/2000/svg";
-      const pad = isSafari() ? 1 : 0;
+      const basePad = isSafari() ? 1 : 0;
+      const extraPad = straighten ? 1 : 0;
+      const pad = basePad + extraPad;
       const fo = document.createElementNS(svgNS, "foreignObject");
       const vbMinX = Math.floor(minX);
       const vbMinY = Math.floor(minY);
@@ -3102,20 +3371,7 @@ async function captureDOM(element, options) {
       const vbW = vbW0 + pad * 2;
       const vbH = vbH0 + pad * 2;
       const wantsSize = hasW || hasH;
-      options.meta = {
-        w0,
-        // ancho natural del elemento
-        h0,
-        // alto natural
-        vbW,
-        // ancho del viewBox
-        vbH,
-        // alto del viewBox
-        targetW: w,
-        // ancho deseado según options.width
-        targetH: h
-        // alto deseado según options.height
-      };
+      options.meta = { w0, h0, vbW, vbH, targetW: w, targetH: h };
       const svgOutW = isSafari() && wantsSize ? vbW : outW + pad * 2;
       const svgOutH = isSafari() && wantsSize ? vbH : outH + pad * 2;
       const svgHeader = `<svg xmlns="${svgNS}" width="${svgOutW}" height="${svgOutH}" viewBox="0 0 ${vbW} ${vbH}">`;
@@ -3129,6 +3385,115 @@ async function captureDOM(element, options) {
   if (sandbox && sandbox.style.position === "absolute") sandbox.remove();
   return dataURL;
 }
+function normalizeRootTransforms(originalEl, cloneRoot) {
+  if (!originalEl || !cloneRoot || !cloneRoot.style) return null;
+  const cs = getComputedStyle(originalEl);
+  try {
+    cloneRoot.style.transformOrigin = "0 0";
+  } catch {
+  }
+  try {
+    if ("translate" in cloneRoot.style) cloneRoot.style.translate = "none";
+    if ("rotate" in cloneRoot.style) cloneRoot.style.rotate = "none";
+  } catch {
+  }
+  const tr = cs.transform || "none";
+  if (!tr || tr === "none") {
+    try {
+      const M = matrixFromComputed(originalEl);
+      if (M.a === 1 && M.b === 0 && M.c === 0 && M.d === 1) {
+        cloneRoot.style.transform = "none";
+        return { a: 1, b: 0, c: 0, d: 1 };
+      }
+    } catch {
+    }
+  }
+  const m2d = tr.match(/^matrix\(\s*([^)]+)\)$/i);
+  if (m2d) {
+    const nums = m2d[1].split(",").map((v) => parseFloat(v.trim()));
+    if (nums.length === 6 && nums.every(Number.isFinite)) {
+      const [a, b, c, d] = nums;
+      const scaleX = Math.sqrt(a * a + b * b) || 0;
+      let a1 = 0, b1 = 0, shear = 0, c2 = 0, d2 = 0, scaleY = 0;
+      if (scaleX > 0) {
+        a1 = a / scaleX;
+        b1 = b / scaleX;
+        shear = a1 * c + b1 * d;
+        c2 = c - a1 * shear;
+        d2 = d - b1 * shear;
+        scaleY = Math.sqrt(c2 * c2 + d2 * d2) || 0;
+        if (scaleY > 0) shear = shear / scaleY;
+        else shear = 0;
+      }
+      const aP = scaleX;
+      const bP = 0;
+      const cP = shear * scaleY;
+      const dP = scaleY;
+      try {
+        cloneRoot.style.transform = `matrix(${aP}, ${bP}, ${cP}, ${dP}, 0, 0)`;
+      } catch {
+      }
+      return { a: aP, b: bP, c: cP, d: dP };
+    }
+  }
+  try {
+    const legacy = String(tr).trim();
+    cloneRoot.style.transform = legacy + " translate(0px, 0px) rotate(0deg)";
+    return null;
+  } catch {
+    return null;
+  }
+}
+function parseBoxShadow(cs) {
+  const v = cs.boxShadow || "";
+  if (!v || v === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const parts = v.split(/\),(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((s) => s.trim());
+  let t = 0, r = 0, b2 = 0, l = 0;
+  for (const part of parts) {
+    const nums = part.match(/-?\d+(\.\d+)?px/g)?.map((n) => parseFloat(n)) || [];
+    if (nums.length < 2) continue;
+    const [ox2, oy2, blur = 0, spread = 0] = nums;
+    const extX = Math.abs(ox2) + blur + spread;
+    const extY = Math.abs(oy2) + blur + spread;
+    r = Math.max(r, extX + Math.max(ox2, 0));
+    l = Math.max(l, extX + Math.max(-ox2, 0));
+    b2 = Math.max(b2, extY + Math.max(oy2, 0));
+    t = Math.max(t, extY + Math.max(-oy2, 0));
+  }
+  return { top: Math.ceil(t), right: Math.ceil(r), bottom: Math.ceil(b2), left: Math.ceil(l) };
+}
+function parseFilterBlur(cs) {
+  const m = (cs.filter || "").match(/blur\(\s*([0-9.]+)px\s*\)/);
+  const b2 = m ? Math.ceil(parseFloat(m[1]) || 0) : 0;
+  return { top: b2, right: b2, bottom: b2, left: b2 };
+}
+function parseOutline(cs) {
+  if ((cs.outlineStyle || "none") === "none") return { top: 0, right: 0, bottom: 0, left: 0 };
+  const w2 = Math.ceil(parseFloat(cs.outlineWidth || "0") || 0);
+  return { top: w2, right: w2, bottom: w2, left: w2 };
+}
+function bboxWithOriginFull(w2, h2, M, ox2, oy2) {
+  const a2 = M.a, b2 = M.b, c2 = M.c, d2 = M.d, e2 = M.e || 0, f2 = M.f || 0;
+  function pt(x, y) {
+    let X = x - ox2, Y = y - oy2;
+    let X2 = a2 * X + c2 * Y, Y2 = b2 * X + d2 * Y;
+    X2 += ox2 + e2;
+    Y2 += oy2 + f2;
+    return [X2, Y2];
+  }
+  const P = [pt(0, 0), pt(w2, 0), pt(0, h2), pt(w2, h2)];
+  let minX2 = Infinity, minY2 = Infinity, maxX2 = -Infinity, maxY2 = -Infinity;
+  for (const [X, Y] of P) {
+    if (X < minX2) minX2 = X;
+    if (Y < minY2) minY2 = Y;
+    if (X > maxX2) maxX2 = X;
+    if (Y > maxY2) maxY2 = Y;
+  }
+  return { minX: minX2, minY: minY2, maxX: maxX2, maxY: maxY2, width: maxX2 - minX2, height: maxY2 - minY2 };
+}
+function hasTFBBox(el) {
+  return hasBBoxAffectingTransform(el);
+}
 function matrixFromComputed(el) {
   const tr = getComputedStyle(el).transform;
   if (!tr || tr === "none") return new DOMMatrix();
@@ -3281,20 +3646,20 @@ function createContext(options = {}) {
     excludeMode: options.excludeMode ?? "hide",
     filter: options.filter ?? null,
     filterMode: options.filterMode ?? "hide",
+    // Placeholders
     placeholders: options.placeholders !== false,
     // default true
-    // Fuentes
+    // Fonts
     embedFonts: options.embedFonts ?? false,
     iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
     localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
     excludeFonts: options.excludeFonts ?? void 0,
     fallbackURL: options.fallbackURL ?? void 0,
-    /** Cache policy (disabled|full|auto|soft). Default: "soft" */
     /** @type {CachePolicy} */
     cache: cachePolicy,
-    // Red
+    // Network
     useProxy: typeof options.useProxy === "string" ? options.useProxy : "",
-    // Salida
+    // Output
     width: options.width ?? null,
     height: options.height ?? null,
     format: resolvedFormat,
@@ -3302,8 +3667,11 @@ function createContext(options = {}) {
     quality: options.quality ?? 0.92,
     dpr: options.dpr ?? (window.devicePixelRatio || 1),
     backgroundColor: options.backgroundColor ?? (["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null),
-    filename: options.filename ?? "snapDOM"
-    // Plugins (reservado para futura activación)
+    filename: options.filename ?? "snapDOM",
+    // NEW flags (user-friendly)
+    straighten: options.straighten ?? false,
+    noShadows: options.noShadows ?? false
+    // Plugins (reservado)
     // plugins: normalizePlugins(...),
   };
 }
@@ -3493,9 +3861,20 @@ async function toImg(url, options) {
     const k = height / Math.max(1, refH);
     img.style.height = `${height}px`;
     img.style.width = `${Math.round(refW * k)}px`;
-  } else if (scale !== 1) {
-    img.style.width = `${Math.round(img.naturalWidth * scale)}px`;
-    img.style.height = `${Math.round(img.naturalHeight * scale)}px`;
+  } else {
+    const cssW = Math.round(img.naturalWidth * scale);
+    const cssH = Math.round(img.naturalHeight * scale);
+    img.style.width = `${cssW}px`;
+    img.style.height = `${cssH}px`;
+    if (typeof url === "string" && url.startsWith("data:image/svg+xml")) {
+      try {
+        const decoded = decodeURIComponent(url.split(",")[1]);
+        const patched = decoded.replace(/width="[^"]*"/, `width="${cssW}"`).replace(/height="[^"]*"/, `height="${cssH}"`);
+        url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(patched)}`;
+        img.src = url;
+      } catch {
+      }
+    }
   }
   return img;
 }
@@ -3551,7 +3930,7 @@ async function snapdom(element, userOptions) {
         await safariWarmup(element, userOptions);
         console.log("Iteraci\xF3n n\xFAmero:", i);
         _safariWarmup = false;
-      } catch (error) {
+      } catch {
       }
     }
   }
@@ -3559,7 +3938,7 @@ async function snapdom(element, userOptions) {
   if (!context.snap) {
     context.snap = {
       toPng: (el, opts) => snapdom.toPng(el, opts),
-      toImg: (el, opts) => snapdom.toImg(el, opts)
+      toSvg: (el, opts) => snapdom.toSvg(el, opts)
     };
   }
   return snapdom.capture(element, context, INTERNAL_TOKEN);
@@ -3581,6 +3960,7 @@ snapdom.capture = async (el, context, _token) => {
     url,
     toRaw: () => url,
     toImg: (opts) => toImg(url, ensureContext(opts)),
+    toSvg: (opts) => toImg(url, ensureContext(opts)),
     toCanvas: (opts) => toCanvas(url, ensureContext(opts)),
     toBlob: (opts) => toBlob(url, ensureContext(opts)),
     toPng: withFormat("png"),
@@ -3591,6 +3971,7 @@ snapdom.capture = async (el, context, _token) => {
 };
 snapdom.toRaw = (el, options) => snapdom(el, options).then((result) => result.toRaw());
 snapdom.toImg = (el, options) => snapdom(el, options).then((result) => result.toImg());
+snapdom.toSvg = (el, options) => snapdom(el, options).then((result) => result.toSvg());
 snapdom.toCanvas = (el, options) => snapdom(el, options).then((result) => result.toCanvas());
 snapdom.toBlob = (el, options) => snapdom(el, options).then((result) => result.toBlob());
 snapdom.toPng = (el, options) => snapdom(el, { ...options, format: "png" }).then((result) => result.toPng());
@@ -3729,7 +4110,7 @@ async function preCache(root = document, options = {}) {
         const families = new Set(
           Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
         );
-        await ensureFontsReady(families, 2);
+        await ensureFontsReady(families, 3);
       }
       await embedCustomFonts({
         required,