@pixldocs/canvas-renderer 0.5.24 → 0.5.26

package/dist/index.d.ts

@@ -100,8 +100,8 @@ export declare function embedFontsInPdf(pdf: jsPDF, fontFamilies: Set<string>, f
  * 1. Walks ALL text nodes (including clones/repeatables) collecting
  *    fontFamily + fontWeight + fontStyle.
  * 2. Loads each unique family via Google Fonts CSS v1 (idempotent).
- * 3. Waits for each weight+style combo via `document.fonts.load()` so export
- *    capture never uses fallback font decoration metrics.
+ * 3. Kicks off each weight+style combo via `document.fonts.load()` without
+ *    blocking render completion; late font load reflow handles final metrics.
  *
  * Idempotent — safe to call multiple times for the same config.
  */
@@ -286,6 +286,8 @@ declare interface PixldocsPreviewBaseProps {
     onReady?: () => void;
     /** Called when resolution or rendering fails */
     onError?: (error: Error) => void;
+    /** Allow package previews to skip the blocking font-ready wait used by app preview */
+    skipFontReadyWait?: boolean;
 }
 
 /** Mode 1: Pre-resolved config */

package/dist/index.js

@@ -11833,73 +11833,16 @@ async function ensureFontsForResolvedConfig(config) {
   if (typeof document === "undefined") return;
   const descriptors = collectFontDescriptorsFromConfig(config);
   const families = new Set(descriptors.map((d) => d.family));
-  await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 6e3);
+  void withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 2500);
   if (document.fonts) {
-    await withTimeout(Promise.all(descriptors.map((d) => {
+    descriptors.forEach((d) => {
       const stylePrefix = d.style === "italic" ? "italic " : "";
       const weightStr = String(d.weight);
       const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
-      return document.fonts.load(spec).catch(() => {
+      document.fonts.load(spec).catch(() => {
       });
-    })), 6e3);
-    await withTimeout(document.fonts.ready, 6e3);
-  }
-}
-const TEXT_TYPES = /* @__PURE__ */ new Set(["textbox", "text", "i-text"]);
-function getFabricCanvasFromContainer(container) {
-  const registry2 = window.__fabricCanvasRegistry;
-  if (registry2 instanceof Map) {
-    for (const entry of registry2.values()) {
-      const canvas = (entry == null ? void 0 : entry.canvas) || entry;
-      if (!canvas || typeof canvas.toSVG !== "function") continue;
-      const el = canvas.lowerCanvasEl || canvas.upperCanvasEl;
-      if (el && container.contains(el)) return canvas;
-    }
+    });
   }
-  return null;
-}
-function stabilizeFabricTextObjects(fabricInstance) {
-  var _a, _b, _c;
-  if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
-  clearFabricCharCache();
-  clearMeasurementCache();
-  const walk = (obj) => {
-    var _a2, _b2, _c2, _d;
-    if (!obj) return;
-    const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
-    if (children.length) children.forEach(walk);
-    const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (TEXT_TYPES.has(obj.type) || obj.isEditing !== void 0);
-    if (!isTextObject) return;
-    const saved = { width: obj.width, scaleX: obj.scaleX, scaleY: obj.scaleY };
-    const reset = () => {
-      var _a3;
-      (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
-      obj.__charBounds = [];
-      obj.__lineWidths = [];
-      obj.__lineHeights = [];
-      obj.__graphemeLines = [];
-      obj._textLines = [];
-      obj.textLines = [];
-      obj._styleMap = null;
-      obj.styleMap = null;
-      obj.dirty = true;
-    };
-    reset();
-    obj.initDimensions();
-    if (saved.width != null) {
-      (_a2 = obj.set) == null ? void 0 : _a2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
-      reset();
-      obj.initDimensions();
-      (_b2 = obj.set) == null ? void 0 : _b2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
-    }
-    obj.dirty = true;
-    (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
-    (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
-  };
-  fabricInstance.getObjects().forEach(walk);
-  (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
-  (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
-  (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
 }
 function PixldocsPreview(props) {
   const {
@@ -11911,7 +11854,8 @@ function PixldocsPreview(props) {
     style,
     onDynamicFieldClick,
     onReady,
-    onError
+    onError,
+    skipFontReadyWait = true
   } = props;
   useEffect(() => {
     setPackageApiUrl(imageProxyUrl);
@@ -11997,13 +11941,6 @@ function PixldocsPreview(props) {
     () => `${pageIndex}-${fontsReadyVersion}-${stabilizationPass}`,
     [pageIndex, fontsReadyVersion, stabilizationPass]
   );
-  const previewWrapRef = useCallback((node) => {
-    if (!node || !config) return;
-    requestAnimationFrame(() => {
-      const fabricCanvas = getFabricCanvasFromContainer(node);
-      if (fabricCanvas) stabilizeFabricTextObjects(fabricCanvas);
-    });
-  }, [config, previewKey]);
   useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
@@ -12034,13 +11971,14 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, style: { ...style, position: "relative" }, children: [
-    /* @__PURE__ */ jsx("div", { ref: previewWrapRef, style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx(
       PreviewCanvas,
       {
         config,
         pageIndex,
         zoom,
         absoluteZoom,
+        skipFontReadyWait,
         onDynamicFieldClick,
         onReady: handleCanvasReady
       },
@@ -12049,66 +11987,6 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const inlinedAssetCache = /* @__PURE__ */ new Map();
-function shouldInlineImageUrl(url) {
-  if (!url || url.startsWith("data:")) return false;
-  if (url.startsWith("blob:")) return true;
-  if (url.startsWith("/") && !url.startsWith("//")) return true;
-  try {
-    const parsed = new URL(url, window.location.href);
-    const current = new URL(window.location.href);
-    const host = parsed.hostname.toLowerCase();
-    return parsed.origin === current.origin || host === "localhost" || host === "127.0.0.1" || host === "0.0.0.0" || host.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(host);
-  } catch {
-    return false;
-  }
-}
-async function imageUrlToDataUrl(url) {
-  if (inlinedAssetCache.has(url)) return inlinedAssetCache.get(url) ?? null;
-  try {
-    const response = await fetch(url);
-    if (!response.ok) throw new Error(`HTTP ${response.status}`);
-    const blob = await response.blob();
-    if (blob.type.includes("text/html")) throw new Error("Expected image but got text/html");
-    const dataUrl = await new Promise((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(String(reader.result || ""));
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-    inlinedAssetCache.set(url, dataUrl);
-    return dataUrl;
-  } catch (error) {
-    console.warn("[@pixldocs/canvas-renderer] Failed to inline image asset:", url, error);
-    inlinedAssetCache.set(url, null);
-    return null;
-  }
-}
-async function inlineNodeAssets(node) {
-  if (node.type === "image") {
-    const url = typeof node.src === "string" && node.src.trim() ? node.src.trim() : typeof node.imageUrl === "string" ? node.imageUrl.trim() : "";
-    if (shouldInlineImageUrl(url)) {
-      const dataUrl = await imageUrlToDataUrl(url);
-      if (dataUrl) {
-        node.src = dataUrl;
-        node.imageUrl = dataUrl;
-      }
-    }
-  }
-  if (Array.isArray(node.children)) {
-    await Promise.all(node.children.map(inlineNodeAssets));
-  }
-}
-async function inlineBrowserReachableImageAssets(config) {
-  if (typeof window === "undefined" || typeof fetch === "undefined" || typeof FileReader === "undefined") {
-    return config;
-  }
-  const cloned = JSON.parse(JSON.stringify(config));
-  await Promise.all(
-    (cloned.pages || []).flatMap((page) => (page.children || []).map(inlineNodeAssets))
-  );
-  return cloned;
-}
 class PixldocsRenderer {
   constructor(config) {
     __publicField(this, "config");
@@ -12119,22 +11997,21 @@ class PixldocsRenderer {
    * Mounts a hidden PreviewCanvas component and captures the Fabric canvas output.
    */
   async render(templateConfig, options = {}) {
-    const renderConfig = await inlineBrowserReachableImageAssets(templateConfig);
     const pageIndex = options.pageIndex ?? 0;
     const format = options.format ?? "png";
     const quality = options.quality ?? 0.92;
     const pixelRatio = options.pixelRatio ?? this.config.pixelRatio ?? 2;
-    const canvasWidth = renderConfig.canvas.width;
-    const canvasHeight = renderConfig.canvas.height;
-    const page = renderConfig.pages[pageIndex];
+    const canvasWidth = templateConfig.canvas.width;
+    const canvasHeight = templateConfig.canvas.height;
+    const page = templateConfig.pages[pageIndex];
     if (!page) {
-      throw new Error(`Page index ${pageIndex} not found (template has ${renderConfig.pages.length} pages)`);
+      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
     }
-    await ensureFontsForResolvedConfig(renderConfig);
+    await ensureFontsForResolvedConfig(templateConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const dataUrl = await this.renderPageViaPreviewCanvas(
-      renderConfig,
+      templateConfig,
       pageIndex,
       pixelRatio,
       format,
@@ -12186,17 +12063,16 @@ class PixldocsRenderer {
    * This is the key building block for client-side vector PDF export.
    */
   async renderPageSvg(templateConfig, pageIndex = 0) {
-    const renderConfig = await inlineBrowserReachableImageAssets(templateConfig);
-    const page = renderConfig.pages[pageIndex];
+    const page = templateConfig.pages[pageIndex];
     if (!page) {
-      throw new Error(`Page index ${pageIndex} not found (template has ${renderConfig.pages.length} pages)`);
+      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
     }
-    await ensureFontsForResolvedConfig(renderConfig);
+    await ensureFontsForResolvedConfig(templateConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
-    const canvasWidth = renderConfig.canvas.width;
-    const canvasHeight = renderConfig.canvas.height;
-    return this.captureSvgViaPreviewCanvas(renderConfig, pageIndex, canvasWidth, canvasHeight);
+    const canvasWidth = templateConfig.canvas.width;
+    const canvasHeight = templateConfig.canvas.height;
+    return this.captureSvgViaPreviewCanvas(templateConfig, pageIndex, canvasWidth, canvasHeight);
   }
   /**
    * Render all pages and return SVG strings for each.
@@ -12537,14 +12413,13 @@ class PixldocsRenderer {
       container.style.cssText = `
         position: fixed; left: -99999px; top: -99999px;
         width: ${canvasWidth}px; height: ${canvasHeight}px;
-        overflow: hidden; pointer-events: none; visibility: hidden;
+        overflow: hidden; pointer-events: none; opacity: 0;
       `;
       document.body.appendChild(container);
       const timeout = setTimeout(() => {
         cleanup();
         reject(new Error("Render timeout (30s)"));
       }, 3e4);
-      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12554,12 +12429,8 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (finished) return;
-        finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           try {
-            await this.waitForStableTextMetrics(container, config, true);
-            await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
             await this.waitForCanvasImages(container, expectedImageCount);
@@ -12571,8 +12442,8 @@ class PixldocsRenderer {
               return;
             }
             const exportCanvas = document.createElement("canvas");
-            exportCanvas.width = Math.round(canvasWidth * pixelRatio);
-            exportCanvas.height = Math.round(canvasHeight * pixelRatio);
+            exportCanvas.width = sourceCanvas.width;
+            exportCanvas.height = sourceCanvas.height;
             const exportCtx = exportCanvas.getContext("2d");
             if (!exportCtx) {
               cleanup();
@@ -12580,10 +12451,10 @@ class PixldocsRenderer {
               return;
             }
             exportCtx.save();
-            exportCtx.scale(exportCanvas.width / canvasWidth, exportCanvas.height / canvasHeight);
+            exportCtx.scale(sourceCanvas.width / canvasWidth, sourceCanvas.height / canvasHeight);
             this.paintPageBackground(exportCtx, config.pages[pageIndex], canvasWidth, canvasHeight);
             exportCtx.restore();
-            exportCtx.drawImage(sourceCanvas, 0, 0, exportCanvas.width, exportCanvas.height);
+            exportCtx.drawImage(sourceCanvas, 0, 0);
             const mimeType = format === "jpeg" ? "image/jpeg" : format === "webp" ? "image/webp" : "image/png";
             const dataUrl = exportCanvas.toDataURL(mimeType, quality);
             cleanup();
@@ -12599,8 +12470,9 @@ class PixldocsRenderer {
         createElement(PreviewCanvas2, {
           config,
           pageIndex,
-          zoom: 1,
+          zoom: pixelRatio,
           absoluteZoom: true,
+          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12622,14 +12494,13 @@ class PixldocsRenderer {
       container.style.cssText = `
         position: fixed; left: -99999px; top: -99999px;
         width: ${canvasWidth}px; height: ${canvasHeight}px;
-        overflow: hidden; pointer-events: none; visibility: hidden;
+        overflow: hidden; pointer-events: none; opacity: 0;
       `;
       document.body.appendChild(container);
       const timeout = setTimeout(() => {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
-      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12639,13 +12510,9 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (finished) return;
-        finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           var _a, _b;
           try {
-            await this.waitForStableTextMetrics(container, config, true);
-            await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             if (!fabricInstance) {
               cleanup();
@@ -12704,6 +12571,7 @@ class PixldocsRenderer {
           zoom: 1,
           // 1:1 — no UI scaling for SVG capture
           absoluteZoom: true,
+          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12764,12 +12632,21 @@ class PixldocsRenderer {
    * using the global __fabricCanvasRegistry (set by PageCanvas).
    */
   getFabricCanvasFromContainer(container) {
-    return getFabricCanvasFromContainer(container);
+    const registry2 = window.__fabricCanvasRegistry;
+    if (registry2 instanceof Map) {
+      for (const entry of registry2.values()) {
+        const canvas = (entry == null ? void 0 : entry.canvas) || entry;
+        if (!canvas || typeof canvas.toSVG !== "function") continue;
+        const el = canvas.lowerCanvasEl || canvas.upperCanvasEl;
+        if (el && container.contains(el)) return canvas;
+      }
+    }
+    return null;
   }
-  async waitForStableTextMetrics(container, config, strictFontWait = false) {
+  async waitForStableTextMetrics(container, config) {
     if (typeof document !== "undefined") {
-      await ensureFontsForResolvedConfig(config);
-      await this.waitForRelevantFonts(config, strictFontWait ? 6e3 : 1800);
+      void ensureFontsForResolvedConfig(config);
+      await this.waitForRelevantFonts(config);
     }
     const fabricInstance = this.getFabricCanvasFromContainer(container);
     if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
@@ -12778,7 +12655,59 @@ class PixldocsRenderer {
       clearFabricCharCache();
       clearMeasurementCache();
     };
-    const reflowTextboxes = () => stabilizeFabricTextObjects(fabricInstance);
+    const reflowTextboxes = () => {
+      var _a, _b, _c;
+      const walk = (obj) => {
+        var _a2, _b2, _c2, _d;
+        if (!obj) return;
+        const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+        if (children.length) children.forEach(walk);
+        const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text" || obj.isEditing !== void 0);
+        if (isTextObject) {
+          const saved = {
+            width: obj.width,
+            scaleX: obj.scaleX,
+            scaleY: obj.scaleY
+          };
+          const resetTextboxLayoutInternals = () => {
+            var _a3;
+            (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
+            obj.__charBounds = [];
+            obj.__lineWidths = [];
+            obj.__lineHeights = [];
+            obj.__graphemeLines = [];
+            obj._textLines = [];
+            obj.textLines = [];
+            obj._styleMap = null;
+            obj.styleMap = null;
+            obj.dirty = true;
+          };
+          resetTextboxLayoutInternals();
+          obj.initDimensions();
+          if (saved.width != null) {
+            (_a2 = obj.set) == null ? void 0 : _a2.call(obj, {
+              width: saved.width,
+              scaleX: saved.scaleX,
+              scaleY: saved.scaleY
+            });
+            resetTextboxLayoutInternals();
+            obj.initDimensions();
+          }
+          (_b2 = obj.set) == null ? void 0 : _b2.call(obj, {
+            width: saved.width,
+            scaleX: saved.scaleX,
+            scaleY: saved.scaleY,
+            dirty: true
+          });
+          (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
+          (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
+        }
+      };
+      fabricInstance.getObjects().forEach(walk);
+      (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
+      (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
+      (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
+    };
     clearTextMetricCaches();
     await waitForPaint();
     reflowTextboxes();
@@ -13512,6 +13441,9 @@ function rewriteSvgFontsForJsPDF(svgStr) {
     const resolved = resolveFontWeight(weight);
     const isItalic = /italic|oblique/i.test(styleRaw);
     const jsPdfName = getEmbeddedJsPDFFontName(clean, resolved, isItalic);
+    el.setAttribute("data-source-font-family", clean);
+    el.setAttribute("data-source-font-weight", String(resolved));
+    el.setAttribute("data-source-font-style", isItalic ? "italic" : "normal");
     const directText = Array.from(el.childNodes).filter((n) => n.nodeType === 3).map((n) => n.textContent || "").join("");
     const hasDevanagari = containsDevanagari(directText);
     if (hasDevanagari && directText.length > 0) {
@@ -14493,24 +14425,89 @@ async function svg2pdfWithDomMount(svg, pdf, opts) {
     if (wrap.parentNode) document.body.removeChild(wrap);
   }
 }
-function convertTextDecorationsToLines(svg) {
+async function convertTextDecorationsToLines(svg) {
   const doc = svg.ownerDocument;
   if (!doc) return;
-  let measureCanvas = null;
+  const resolveInheritedSvgValue = (el, attr, styleProp = attr) => {
+    var _a, _b;
+    let current = el;
+    while (current) {
+      const attrValue = (_a = current.getAttribute(attr)) == null ? void 0 : _a.trim();
+      if (attrValue) return attrValue;
+      const styleValue = (_b = getInlineStyleValue(current, styleProp)) == null ? void 0 : _b.trim();
+      if (styleValue) return styleValue;
+      current = current.parentElement;
+    }
+    return null;
+  };
+  if (typeof document !== "undefined" && document.fonts) {
+    const fontFamilies = /* @__PURE__ */ new Set();
+    for (const textEl of svg.querySelectorAll("text")) {
+      const ff = textEl.getAttribute("data-source-font-family") || textEl.getAttribute("font-family");
+      if (ff) fontFamilies.add(ff.replace(/'/g, ""));
+      for (const tspan of textEl.querySelectorAll("tspan")) {
+        const tff = tspan.getAttribute("data-source-font-family") || tspan.getAttribute("font-family");
+        if (tff) fontFamilies.add(tff.replace(/'/g, ""));
+      }
+    }
+    await Promise.all(Array.from(fontFamilies).flatMap((ff) => [
+      document.fonts.load(`16px "${ff}"`).then(() => {
+      }).catch(() => {
+      }),
+      document.fonts.load(`bold 16px "${ff}"`).then(() => {
+      }).catch(() => {
+      })
+    ]));
+    await document.fonts.ready;
+  }
+  let tempContainer = null;
+  let liveSvg = null;
+  try {
+    if (typeof document !== "undefined") {
+      tempContainer = document.createElement("div");
+      tempContainer.style.cssText = "position:fixed;left:-9999px;top:-9999px;visibility:hidden;pointer-events:none;";
+      document.body.appendChild(tempContainer);
+      const clone = svg.cloneNode(true);
+      for (const textNode of clone.querySelectorAll("text, tspan, textPath")) {
+        const sourceFamily = textNode.getAttribute("data-source-font-family");
+        const sourceWeight = textNode.getAttribute("data-source-font-weight");
+        const sourceStyle = textNode.getAttribute("data-source-font-style");
+        if (sourceFamily) textNode.setAttribute("font-family", sourceFamily);
+        if (sourceWeight) textNode.setAttribute("font-weight", sourceWeight);
+        if (sourceStyle) textNode.setAttribute("font-style", sourceStyle);
+        const inlineStyle = textNode.getAttribute("style") || "";
+        const stylePairs = inlineStyle.split(";").map((part) => part.trim()).filter(Boolean).filter((part) => !/^font-family\s*:/i.test(part) && !/^font-weight\s*:/i.test(part) && !/^font-style\s*:/i.test(part));
+        if (sourceFamily) stylePairs.push(`font-family: ${sourceFamily}`);
+        if (sourceWeight) stylePairs.push(`font-weight: ${sourceWeight}`);
+        if (sourceStyle) stylePairs.push(`font-style: ${sourceStyle}`);
+        if (stylePairs.length > 0) textNode.setAttribute("style", stylePairs.join("; "));
+      }
+      tempContainer.appendChild(clone);
+      liveSvg = clone;
+    }
+  } catch {
+  }
   let ctx = null;
   try {
-    measureCanvas = doc.createElement("canvas");
+    const realDoc = typeof document !== "undefined" ? document : doc;
+    const measureCanvas = realDoc.createElement("canvas");
     ctx = measureCanvas.getContext("2d");
   } catch {
   }
   const textEls = Array.from(svg.querySelectorAll("text"));
-  for (const textEl of textEls) {
+  const liveTextEls = liveSvg ? Array.from(liveSvg.querySelectorAll("text")) : null;
+  for (let ti = 0; ti < textEls.length; ti++) {
+    const textEl = textEls[ti];
+    const liveTextEl = liveTextEls == null ? void 0 : liveTextEls[ti];
     const tspans = Array.from(textEl.querySelectorAll("tspan"));
     if (tspans.length === 0) continue;
+    const liveTspans = liveTextEl ? Array.from(liveTextEl.querySelectorAll("tspan")) : null;
     const textDecOnText = (textEl.getAttribute("text-decoration") || "").toLowerCase();
     const textStyleDec = (getInlineStyleValue(textEl, "text-decoration") || "").toLowerCase();
     const textHasUnderline = textDecOnText.includes("underline") || textStyleDec.includes("underline");
-    for (const tspan of tspans) {
+    for (let si = 0; si < tspans.length; si++) {
+      const tspan = tspans[si];
+      const liveTspan = liveTspans == null ? void 0 : liveTspans[si];
       const tspanDec = (tspan.getAttribute("text-decoration") || "").toLowerCase();
       const tspanStyleDec = (getInlineStyleValue(tspan, "text-decoration") || "").toLowerCase();
       const hasUnderline = tspanDec.includes("underline") || tspanStyleDec.includes("underline") || textHasUnderline;
@@ -14524,41 +14521,73 @@ function convertTextDecorationsToLines(svg) {
       const fontSize = parseFloat(
         tspan.getAttribute("font-size") || textEl.getAttribute("font-size") || "16"
       );
-      const fontFamily = tspan.getAttribute("font-family") || textEl.getAttribute("font-family") || "sans-serif";
-      const fontWeight = tspan.getAttribute("font-weight") || textEl.getAttribute("font-weight") || "normal";
+      const fontFamily = tspan.getAttribute("data-source-font-family") || textEl.getAttribute("data-source-font-family") || resolveInheritedSvgValue(tspan, "font-family") || "sans-serif";
+      const fontWeight = tspan.getAttribute("data-source-font-weight") || textEl.getAttribute("data-source-font-weight") || resolveInheritedSvgValue(tspan, "font-weight") || "normal";
+      const fontStyle = tspan.getAttribute("data-source-font-style") || textEl.getAttribute("data-source-font-style") || resolveInheritedSvgValue(tspan, "font-style") || "normal";
       const fill = tspan.getAttribute("fill") || textEl.getAttribute("fill") || "#000000";
-      let textWidth = 0;
-      if (typeof tspan.getComputedTextLength === "function") {
+      let textWidth = content.length * fontSize * 0.6;
+      if (ctx) {
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily.replace(/'/g, "")}`;
+        textWidth = ctx.measureText(content).width;
+      }
+      const textAnchorRaw = (resolveInheritedSvgValue(tspan, "text-anchor") || "start").toLowerCase();
+      const textAnchor = textAnchorRaw === "middle" || textAnchorRaw === "end" ? textAnchorRaw : "start";
+      let lineStartX = x - (textAnchor === "middle" ? textWidth / 2 : textAnchor === "end" ? textWidth : 0);
+      let lineEndX = lineStartX + textWidth;
+      let baselineY = y;
+      if (liveTspan) {
         try {
-          textWidth = tspan.getComputedTextLength();
+          const liveCharCount = liveTspan.getNumberOfChars();
+          const svgWidth = liveTspan.getComputedTextLength();
+          if (Number.isFinite(svgWidth) && svgWidth > 0) {
+            textWidth = Math.max(textWidth, svgWidth);
+          }
+          if (liveCharCount > 0) {
+            const start = liveTspan.getStartPositionOfChar(0);
+            const end = liveTspan.getEndPositionOfChar(liveCharCount - 1);
+            if (Number.isFinite(start.x)) lineStartX = start.x;
+            if (Number.isFinite(start.y)) baselineY = start.y;
+            if (Number.isFinite(end.x)) lineEndX = Math.max(end.x, lineStartX + textWidth);
+            if (Number.isFinite(end.y) && !Number.isFinite(baselineY)) baselineY = end.y;
+          } else {
+            lineEndX = lineStartX + textWidth;
+          }
+          const bbox = liveTspan.getBBox();
+          if (Number.isFinite(bbox.x) && Number.isFinite(bbox.width)) {
+            lineStartX = Math.min(lineStartX, bbox.x);
+            lineEndX = Math.max(lineEndX, bbox.x + bbox.width);
+          }
         } catch {
         }
       }
-      if (!Number.isFinite(textWidth) || textWidth <= 0) {
-        if (ctx) {
-          ctx.font = `${fontWeight} ${fontSize}px ${fontFamily.replace(/'/g, "")}`;
-          textWidth = ctx.measureText(content).width;
-        } else {
-          textWidth = content.length * fontSize * 0.6;
-        }
+      if (!(lineEndX > lineStartX)) {
+        lineStartX = x - (textAnchor === "middle" ? textWidth / 2 : textAnchor === "end" ? textWidth : 0);
+        lineEndX = lineStartX + textWidth;
       }
-      const underlineY = y + fontSize * 0.15;
+      const underlineY = baselineY + fontSize * 0.15;
       const thickness = Math.max(0.5, fontSize * 0.066667);
       const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");
-      line.setAttribute("x1", String(x));
+      line.setAttribute("x1", String(lineStartX));
       line.setAttribute("y1", String(underlineY));
-      line.setAttribute("x2", String(x + textWidth));
+      line.setAttribute("x2", String(lineEndX));
       line.setAttribute("y2", String(underlineY));
       line.setAttribute("stroke", fill.startsWith("url(") ? "#000000" : fill);
       line.setAttribute("stroke-width", String(thickness));
+      line.setAttribute("stroke-linecap", "butt");
       line.setAttribute("fill", "none");
       if (textEl.parentElement) {
         textEl.parentElement.insertBefore(line, textEl.nextSibling);
       }
     }
   }
+  if (tempContainer) {
+    try {
+      document.body.removeChild(tempContainer);
+    } catch {
+    }
+  }
 }
-function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey, options) {
+async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey, options) {
   try {
     const parser = new DOMParser();
     const processedSvg = inlineNestedSvgImageDataUris(rawSvg, parser);
@@ -14587,7 +14616,6 @@ function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey, opti
     stripSuspiciousFullPageOverlayNodes(svgToDraw);
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
-    convertTextDecorationsToLines(svgToDraw);
     return svgToDraw;
   } catch {
     return null;
@@ -14690,7 +14718,7 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
     const hasGradient = !!((_b = (_a = page.backgroundGradient) == null ? void 0 : _a.stops) == null ? void 0 : _b.length);
     drawPageBackground(pdf, i, page.width, page.height, page.backgroundColor, page.backgroundGradient);
     const shouldStripBg = stripPageBackground ?? hasGradient;
-    let processedSvg = prepareLiveCanvasSvgForPdf(page.svg, page.width, page.height, `page-${i + 1}`, {
+    let processedSvg = await prepareLiveCanvasSvgForPdf(page.svg, page.width, page.height, `page-${i + 1}`, {
       stripPageBackground: shouldStripBg
     });
     if (processedSvg) {
@@ -14699,6 +14727,7 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
       const reParser = new DOMParser();
       const reDoc = reParser.parseFromString(rewrittenSvg, "image/svg+xml");
       processedSvg = reDoc.documentElement;
+      await convertTextDecorationsToLines(processedSvg);
     }
     if (processedSvg) {
       pdf.setFillColor(0, 0, 0);