@zumer/snapdom 1.9.12-dev.3 → 1.9.13

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.12-dev.3
+* v.1.9.12-dev.4
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -664,8 +664,9 @@
   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
@@ -857,6 +858,65 @@
     delete snap["block-size"];
   }
 
+  // src/modules/CSSVar.js
+  function resolveCSSVars(sourceEl, cloneEl) {
+    var _a, _b, _c;
+    if (!(sourceEl instanceof Element) || !(cloneEl instanceof Element)) return;
+    const styleAttr = (_a = sourceEl.getAttribute) == null ? void 0 : _a.call(sourceEl, "style");
+    let hasVar = !!(styleAttr && styleAttr.includes("var("));
+    if (!hasVar && ((_b = sourceEl.attributes) == null ? void 0 : _b.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 (e) {
+      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 (e) {
+          }
+        }
+      }
+    }
+    if ((_c = sourceEl.attributes) == null ? void 0 : _c.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 (e) {
+        }
+        if (resolved) {
+          try {
+            cloneEl.style.setProperty(propName, resolved.trim());
+          } catch (e) {
+          }
+        }
+      }
+    }
+  }
+
   // src/core/clone.js
   function idleCallback(childList, callback, fast) {
     return Promise.all(childList.map((child) => {
@@ -878,7 +938,7 @@
   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) {
@@ -1174,7 +1234,7 @@
         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;
       }
@@ -1191,6 +1251,7 @@
       let clone;
       try {
         clone = node.cloneNode(false);
+        resolveCSSVars(node, clone);
         sessionCache.nodeMap.set(clone, node);
         if (node.tagName === "IMG") {
           freezeImgSrcset(node, clone);
@@ -1246,7 +1307,7 @@
           } else {
             deepClone(child, sessionCache, options).then((clonedChild) => {
               resolve(clonedChild || null);
-            }).catch((e) => {
+            }).catch(() => {
               resolve(null);
             });
           }
@@ -1287,7 +1348,7 @@
               markSlottedSubtree(clonedChild);
             }
             resolve(clonedChild || null);
-          }).catch((e) => {
+          }).catch(() => {
             resolve(null);
           });
         };
@@ -1302,7 +1363,7 @@
         if (clonedAssignedNodes.has(child)) return resolve(null);
         deepClone(child, sessionCache, options).then((clonedChild) => {
           resolve(clonedChild || null);
-        }).catch((e) => {
+        }).catch(() => {
           resolve(null);
         });
       }
@@ -1367,7 +1428,10 @@
     return __async(this, null, function* () {
       fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
       const dpr = window.devicePixelRatio || 1;
-      yield document.fonts.ready;
+      try {
+        yield document.fonts.ready;
+      } catch (e) {
+      }
       const span = document.createElement("span");
       span.textContent = unicodeChar;
       span.style.position = "absolute";
@@ -1385,8 +1449,8 @@
       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}"`;
@@ -1506,6 +1570,313 @@
     }
     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 (e) {
+        }
+        return `url("${abs}")`;
+      }
+    );
+  }
+  var IMPORT_ANY_RE = /@import\s+(?:url\(\s*(['"]?)([^)"']+)\1\s*\)|(['"])([^"']+)\3)([^;]*);/g;
+  var MAX_IMPORT_DEPTH = 4;
+  function inlineImportsAndRewrite(cssText, ownerHref, useProxy) {
+    return __async(this, null, function* () {
+      if (!cssText) return cssText;
+      const visited = /* @__PURE__ */ new Set();
+      function normalizeUrl(u, base) {
+        try {
+          return new URL(u, base || location.href).href;
+        } catch (e) {
+          return u;
+        }
+      }
+      function resolveOnce(text, baseHref, depth = 0) {
+        return __async(this, null, function* () {
+          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 = yield snapFetch(absUrl, { as: "text", useProxy, silent: true });
+              if (r.ok && typeof r.data === "string") imported = r.data;
+            } catch (e) {
+            }
+            if (imported) {
+              imported = rewriteRelativeUrls(imported, absUrl);
+              imported = yield 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 = yield 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 (e) {
+        }
+      }
+      urls.push(u);
+    }
+    return urls;
+  }
+  function inlineUrlsInCssBlock(cssBlock, baseHref, useProxy = "") {
+    return __async(this, null, function* () {
+      var _a, _b, _c, _d, _e;
+      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 (e) {
+          }
+        }
+        if (isIconFont2(abs)) continue;
+        if ((_a = cache.resource) == null ? void 0 : _a.has(abs)) {
+          (_b = cache.font) == null ? void 0 : _b.add(abs);
+          out = out.replace(m[0], `url(${cache.resource.get(abs)})`);
+          continue;
+        }
+        if ((_c = cache.font) == null ? void 0 : _c.has(abs)) continue;
+        try {
+          const r = yield snapFetch(abs, { as: "dataURL", useProxy, silent: true });
+          if (r.ok && typeof r.data === "string") {
+            const b64 = r.data;
+            (_d = cache.resource) == null ? void 0 : _d.set(abs, b64);
+            (_e = cache.font) == null ? void 0 : _e.add(abs);
+            out = out.replace(m[0], `url(${b64})`);
+          }
+        } catch (e) {
+          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 (e) {
+          }
+        }
+      }
+      if (subSet.size) {
+        const label = subsetFromRanges(parsedRanges);
+        if (label && subSet.has(label)) return true;
+      }
+      return false;
+    };
+  }
+  function dedupeFontFaces(cssText) {
+    var _a, _b, _c, _d, _e, _f;
+    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 = ((_a = block.match(/font-family:\s*([^;]+);/i)) == null ? void 0 : _a[1]) || "";
+      const family = pickPrimaryFamily(familyRaw);
+      const weightSpec = (((_b = block.match(/font-weight:\s*([^;]+);/i)) == null ? void 0 : _b[1]) || "400").trim();
+      const styleSpec = (((_c = block.match(/font-style:\s*([^;]+);/i)) == null ? void 0 : _c[1]) || "normal").trim();
+      const stretchSpec = (((_d = block.match(/font-stretch:\s*([^;]+);/i)) == null ? void 0 : _d[1]) || "100%").trim();
+      const urange = (((_e = block.match(/unicode-range:\s*([^;]+);/i)) == null ? void 0 : _e[1]) || "").trim();
+      const srcRaw = (((_f = block.match(/src\s*:\s*([^;]+);/i)) == null ? void 0 : _f[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}`;
+  }
+  function collectFacesFromSheet(sheet, baseHref, emitFace, ctx) {
+    return __async(this, null, function* () {
+      let rules;
+      try {
+        rules = sheet.cssRules || [];
+      } catch (e) {
+        return;
+      }
+      const normalizeUrl = (u, base) => {
+        try {
+          return new URL(u, base || location.href).href;
+        } catch (e) {
+          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 = __spreadProps(__spreadValues({}, ctx), { depth: (ctx.depth || 0) + 1 });
+          yield 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 = yield inlineUrlsInCssBlock(srcRaw, baseHref || location.href, ctx.useProxy);
+            yield emitFace(`@font-face{font-family:${family};src:${inlinedSrc};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`);
+          } else {
+            yield emitFace(`@font-face{font-family:${family};src:${srcRaw};font-style:${styleSpec};font-weight:${weightSpec};font-stretch:${stretchSpec};${urange ? `unicode-range:${urange};` : ""}}`);
+          }
+        }
+      }
+    });
+  }
   function embedCustomFonts() {
     return __async(this, arguments, function* ({
       required,
@@ -1525,9 +1896,6 @@
         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);
@@ -1553,192 +1921,23 @@
             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 (e) {
-            }
-          }
-          urls.push(u);
-        }
-        return urls;
-      }
-      function inlineUrlsInCssBlock(cssBlock, baseHref) {
-        return __async(this, null, function* () {
-          var _a2, _b2, _c2, _d2, _e2;
-          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 (e) {
-              }
-            }
-            if (isIconFont2(abs)) continue;
-            if ((_a2 = cache.resource) == null ? void 0 : _a2.has(abs)) {
-              (_b2 = cache.font) == null ? void 0 : _b2.add(abs);
-              out = out.replace(m[0], `url(${cache.resource.get(abs)})`);
-              continue;
-            }
-            if ((_c2 = cache.font) == null ? void 0 : _c2.has(abs)) continue;
-            try {
-              const r = yield snapFetch(abs, { as: "dataURL", useProxy, silent: true });
-              if (r.ok && typeof r.data === "string") {
-                const b64 = r.data;
-                (_d2 = cache.resource) == null ? void 0 : _d2.set(abs, b64);
-                (_e2 = cache.font) == null ? void 0 : _e2.add(abs);
-                out = out.replace(m[0], `url(${b64})`);
-              }
-            } catch (e) {
-              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 (e) {
-              }
-            }
-          }
-          if (subSet.size) {
-            const label = subsetFromRanges(parsedRanges);
-            if (label && subSet.has(label)) return true;
-          }
-          return false;
-        };
-      }
       const simpleExcluder = buildSimpleExcluder(exclude);
-      function dedupeFontFaces(cssText) {
-        var _a2, _b2, _c2, _d2, _e2, _f2;
-        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 = ((_a2 = block.match(/font-family:\s*([^;]+);/i)) == null ? void 0 : _a2[1]) || "";
-          const family = pickPrimaryFamily(familyRaw);
-          const weightSpec = (((_b2 = block.match(/font-weight:\s*([^;]+);/i)) == null ? void 0 : _b2[1]) || "400").trim();
-          const styleSpec = (((_c2 = block.match(/font-style:\s*([^;]+);/i)) == null ? void 0 : _c2[1]) || "normal").trim();
-          const stretchSpec = (((_d2 = block.match(/font-stretch:\s*([^;]+);/i)) == null ? void 0 : _d2[1]) || "100%").trim();
-          const urange = (((_e2 = block.match(/unicode-range:\s*([^;]+);/i)) == null ? void 0 : _e2[1]) || "").trim();
-          const srcRaw = (((_f2 = block.match(/src\s*:\s*([^;]+);/i)) == null ? void 0 : _f2[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 ((_a = cache.resource) == null ? void 0 : _a.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);
@@ -1785,65 +1984,53 @@
             cssText = res.data;
             if (isIconFont2(link.href)) continue;
           }
+          cssText = yield inlineImportsAndRewrite(cssText, link.href, useProxy);
           let facesOut = "";
           for (const face of cssText.match(FACE_RE) || []) {
             const famRaw = (((_b = face.match(/font-family:\s*([^;]+);/i)) == null ? void 0 : _b[1]) || "").trim();
             const family = pickPrimaryFamily(famRaw);
-            if (!family || isIconFont2(family)) {
-              continue;
-            }
+            if (!family || isIconFont2(family)) continue;
             const weightSpec = (((_c = face.match(/font-weight:\s*([^;]+);/i)) == null ? void 0 : _c[1]) || "400").trim();
             const styleSpec = (((_d = face.match(/font-style:\s*([^;]+);/i)) == null ? void 0 : _d[1]) || "normal").trim();
             const stretchSpec = (((_e = face.match(/font-stretch:\s*([^;]+);/i)) == null ? void 0 : _e[1]) || "100%").trim();
             const urange = (((_f = face.match(/unicode-range:\s*([^;]+);/i)) == null ? void 0 : _f[1]) || "").trim();
             const srcRaw = (((_g = face.match(/src\s*:\s*([^;]+);/i)) == null ? void 0 : _g[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) ? yield inlineUrlsInCssBlock(face, link.href) : face;
-            facesOut += newFace + "";
+            if (exclude && simpleExcluder(meta, ranges)) continue;
+            const newFace = /url\(/i.test(srcRaw) ? yield inlineUrlsInCssBlock(face, link.href, useProxy) : face;
+            facesOut += newFace;
           }
-          if (facesOut.trim()) finalCSS += facesOut + "";
+          if (facesOut.trim()) finalCSS += facesOut;
         } catch (e) {
-          console.warn("[snapdom] Failed to process stylesheet:", link.href);
+          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 = yield 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);
+          yield collectFacesFromSheet(
+            sheet,
+            rootHref,
+            (faceCss) => __async(null, null, function* () {
+              finalCSS += faceCss;
+            }),
+            ctx
+          );
         } catch (e) {
         }
       }
@@ -1872,7 +2059,7 @@
                   continue;
                 }
               } catch (e) {
-                console.warn("[snapdom] Failed to fetch dynamic font src:", f._snapdomSrc);
+                console.warn("[snapDOM] Failed to fetch dynamic font src:", f._snapdomSrc);
                 continue;
               }
             }
@@ -1907,7 +2094,7 @@
                 continue;
               }
             } catch (e) {
-              console.warn("[snapdom] Failed to fetch localFonts src:", src);
+              console.warn("[snapDOM] Failed to fetch localFonts src:", src);
               continue;
             }
           }
@@ -1998,7 +2185,7 @@
       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";
@@ -2359,9 +2546,6 @@
           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;
@@ -2369,14 +2553,13 @@
           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);
@@ -2390,6 +2573,7 @@
           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);
@@ -2416,6 +2600,10 @@
           } 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);
@@ -2427,7 +2615,7 @@
           }
           if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
           const hasContent2 = pseudoEl.childNodes.length > 0 || ((_a = pseudoEl.textContent) == null ? void 0 : _a.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);
@@ -2507,6 +2695,103 @@
     });
   }
 
+  // src/modules/changeCSS.js
+  function freezeSticky(originalRoot, cloneRoot) {
+    var _a;
+    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";
+      (_a = cloneEl.parentElement) == null ? void 0 : _a.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
   function prepareClone(_0) {
     return __async(this, arguments, function* (element, options = {}) {
@@ -2583,6 +2868,8 @@
           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);
@@ -2974,19 +3261,50 @@
   }
 
   // src/core/capture.js
+  function stripRootShadows(originalEl, cloneRoot) {
+    if (!originalEl || !cloneRoot || !cloneRoot.style) return;
+    const cs = getComputedStyle(originalEl);
+    try {
+      cloneRoot.style.boxShadow = "none";
+    } catch (e) {
+    }
+    try {
+      cloneRoot.style.textShadow = "none";
+    } catch (e) {
+    }
+    try {
+      cloneRoot.style.outline = "none";
+    } catch (e) {
+    }
+    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 (e) {
+    }
+  }
   function captureDOM(element, options) {
     return __async(this, null, function* () {
       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 } = yield prepareClone(element, options));
+        if (straighten && clone) {
+          rootTransform2D = normalizeRootTransforms(element, clone);
+        }
+        if (noShadows && clone) {
+          stripRootShadows(element, clone);
+        }
       } finally {
         undoClamp();
       }
@@ -3011,7 +3329,7 @@
               const families = new Set(
                 Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
               );
-              yield ensureFontsReady(families, 2);
+              yield ensureFontsReady(families, 1);
             }
             fontsCSS = yield embedCustomFonts({
               required,
@@ -3060,61 +3378,7 @@
               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) {
-            var _a;
-            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 = ((_a = part.match(/-?\d+(\.\d+)?px/g)) == null ? void 0 : _a.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));
@@ -3143,28 +3407,38 @@
             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,
@@ -3179,7 +3453,9 @@
           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);
@@ -3204,20 +3480,7 @@
           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}">`;
@@ -3232,6 +3495,116 @@
       return dataURL;
     });
   }
+  function normalizeRootTransforms(originalEl, cloneRoot) {
+    if (!originalEl || !cloneRoot || !cloneRoot.style) return null;
+    const cs = getComputedStyle(originalEl);
+    try {
+      cloneRoot.style.transformOrigin = "0 0";
+    } catch (e) {
+    }
+    try {
+      if ("translate" in cloneRoot.style) cloneRoot.style.translate = "none";
+      if ("rotate" in cloneRoot.style) cloneRoot.style.rotate = "none";
+    } catch (e) {
+    }
+    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 (e) {
+      }
+    }
+    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 (e) {
+        }
+        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 (e) {
+      return null;
+    }
+  }
+  function parseBoxShadow(cs) {
+    var _a;
+    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 = ((_a = part.match(/-?\d+(\.\d+)?px/g)) == null ? void 0 : _a.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();
@@ -3373,7 +3746,7 @@
     return "soft";
   }
   function createContext(options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
     const resolvedFormat = (_a = options.format) != null ? _a : "png";
     const cachePolicy = normalizeCachePolicy(options.cache);
     return {
@@ -3386,20 +3759,20 @@
       excludeMode: (_f = options.excludeMode) != null ? _f : "hide",
       filter: (_g = options.filter) != null ? _g : null,
       filterMode: (_h = options.filterMode) != null ? _h : "hide",
+      // Placeholders
       placeholders: options.placeholders !== false,
       // default true
-      // Fuentes
+      // Fonts
       embedFonts: (_i = options.embedFonts) != null ? _i : false,
       iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
       localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
       excludeFonts: (_j = options.excludeFonts) != null ? _j : void 0,
       fallbackURL: (_k = options.fallbackURL) != null ? _k : 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: (_l = options.width) != null ? _l : null,
       height: (_m = options.height) != null ? _m : null,
       format: resolvedFormat,
@@ -3407,8 +3780,11 @@
       quality: (_o = options.quality) != null ? _o : 0.92,
       dpr: (_p = options.dpr) != null ? _p : window.devicePixelRatio || 1,
       backgroundColor: (_q = options.backgroundColor) != null ? _q : ["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
-      filename: (_r = options.filename) != null ? _r : "snapDOM"
-      // Plugins (reservado para futura activación)
+      filename: (_r = options.filename) != null ? _r : "snapDOM",
+      // NEW flags (user-friendly)
+      straighten: (_s = options.straighten) != null ? _s : false,
+      noShadows: (_t = options.noShadows) != null ? _t : false
+      // Plugins (reservado)
       // plugins: normalizePlugins(...),
     };
   }
@@ -3603,9 +3979,20 @@
         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 (e) {
+          }
+        }
       }
       return img;
     });
@@ -3667,7 +4054,7 @@
             yield safariWarmup(element, userOptions);
             console.log("Iteraci\xF3n n\xFAmero:", i);
             _safariWarmup = false;
-          } catch (error) {
+          } catch (e) {
           }
         }
       }
@@ -3675,7 +4062,7 @@
       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);
@@ -3698,6 +4085,7 @@
       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"),
@@ -3708,6 +4096,7 @@
   });
   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, __spreadProps(__spreadValues({}, options), { format: "png" })).then((result) => result.toPng());
@@ -3849,7 +4238,7 @@
             const families = new Set(
               Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
             );
-            yield ensureFontsReady(families, 2);
+            yield ensureFontsReady(families, 3);
           }
           yield embedCustomFonts({
             required,