docgen-utils 1.0.15 → 1.0.17

package/dist/packages/cli/commands/export-docs.d.ts

@@ -1,10 +1,9 @@
 /**
  * Export docs command - converts HTML to DOCX
  *
- * Handles images in a general way:
- * - External <img> tags: fetched via HTTP and embedded
- * - SVG charts: rendered to PNG using Playwright's browser canvas
- * - Data URLs: passed through directly
+ * Uses Playwright to:
+ * - Fetch external images via browser canvas (accurate naturalWidth/naturalHeight)
+ * - Render SVG charts by screenshotting live DOM elements (preserves CSS context)
  */
 export interface ExportDocsOptions {
     name?: string;

package/dist/packages/cli/commands/export-docs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"export-docs.d.ts","sourceRoot":"","sources":["../../../../packages/cli/commands/export-docs.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA+YH,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAsB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuCjH"}
+{"version":3,"file":"export-docs.d.ts","sourceRoot":"","sources":["../../../../packages/cli/commands/export-docs.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAuTH,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAsB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAuDjH"}

package/dist/packages/cli/commands/export-docs.js

@@ -1,338 +1,270 @@
 /**
  * Export docs command - converts HTML to DOCX
  *
- * Handles images in a general way:
- * - External <img> tags: fetched via HTTP and embedded
- * - SVG charts: rendered to PNG using Playwright's browser canvas
- * - Data URLs: passed through directly
+ * Uses Playwright to:
+ * - Fetch external images via browser canvas (accurate naturalWidth/naturalHeight)
+ * - Render SVG charts by screenshotting live DOM elements (preserves CSS context)
  */
 import * as fs from "node:fs";
 import * as path from "node:path";
 import { chromium } from "playwright";
 import { createDocxBuffer } from "../../docs/create-document";
 import { parseHtmlContent } from "../../docs/parse";
-import { fetchWithProxy } from "./common";
+// Maximum content width in DOCX (6.5 inches at 96 DPI = 624 pixels)
+// docx library ImageRun uses pixels: width * 9525 EMU/px
+const MAX_IMAGE_WIDTH = 624;
 /**
- * Recursively find all image elements from parsed elements.
- * Searches top-level elements and also nested structures like blockquotes and two-column layouts.
+ * Fetch external images from the HTML page using Playwright browser canvas.
+ * Opens the actual HTML file so images load naturally, then extracts pixel data
+ * via canvas with accurate naturalWidth/naturalHeight dimensions.
  */
-function findAllImageElements(elements) {
-    const images = [];
-    for (const el of elements) {
-        if (el.type === "image") {
-            images.push(el);
-        }
-        // Recursively search blockquote/callout content
-        if (el.type === "blockquote" && el.content) {
-            images.push(...findAllImageElements(el.content));
-        }
-        // Recursively search two-column-layout content
-        if (el.type === "two-column-layout") {
-            images.push(...findAllImageElements(el.sidebar.content));
-            images.push(...findAllImageElements(el.main.content));
-        }
-    }
-    return images;
-}
-/**
- * Fetch external images from parsed elements and convert to image data.
- * Uses Node.js native fetch API to download images.
- * Returns a Map of image src URL to ChartImageData.
- */
-async function fetchExternalImages(elements) {
+async function fetchExternalImages(browser, htmlPath) {
     const imageMap = new Map();
-    // Find all image elements (including nested ones)
-    const imageElements = findAllImageElements(elements);
-    // Filter to only external HTTP/HTTPS images (skip data URLs)
-    const externalImages = imageElements.filter((el) => el.src.startsWith("http://") || el.src.startsWith("https://"));
-    if (externalImages.length === 0) {
+    const absoluteHtmlPath = path.resolve(htmlPath);
+    if (!fs.existsSync(absoluteHtmlPath)) {
+        return imageMap;
+    }
+    const page = await browser.newPage({
+        viewport: { width: 1200, height: 800 },
+    });
+    // Navigate to the HTML page to have proper context for relative URLs
+    await page.goto(`file://${absoluteHtmlPath}`, {
+        waitUntil: "networkidle",
+    });
+    // Wait for images to load
+    await page.waitForTimeout(1000);
+    // Find all unique image URLs in the page
+    const uniqueSrcs = await page.evaluate(() => {
+        const images = Array.from(document.querySelectorAll("img"));
+        const srcs = images.map(img => img.src).filter(src => src && !src.startsWith("data:"));
+        return [...new Set(srcs)];
+    });
+    if (uniqueSrcs.length === 0) {
+        await page.close();
         return imageMap;
     }
-    console.log(`Fetching ${externalImages.length} external image(s)...`);
-    // Maximum content width in DOCX (6.5 inches at 96 DPI = 624 pixels, but we use 468 for some margin)
-    const maxWidth = 468;
-    for (const imgEl of externalImages) {
+    console.log(`Fetching ${uniqueSrcs.length} external image(s)...`);
+    for (const src of uniqueSrcs) {
         try {
-            const src = imgEl.src;
-            // Fetch the image
-            const response = await fetchWithProxy(src);
-            if (!response.ok) {
-                console.warn(`Failed to fetch image: ${src} (${response.status})`);
-                continue;
-            }
-            const arrayBuffer = await response.arrayBuffer();
-            const data = Buffer.from(arrayBuffer);
-            // Determine image dimensions
-            // For now, use a reasonable default size that fits the document
-            // The actual image will be scaled by the DOCX renderer
-            let width = imgEl.width || 468;
-            let height = imgEl.height || 300;
-            // Try to get actual dimensions from the image data
-            const dimensions = getImageDimensions(data);
-            if (dimensions) {
-                width = dimensions.width;
-                height = dimensions.height;
+            // Use Playwright to fetch and render the image via browser canvas
+            // This handles CORS and gives accurate naturalWidth/naturalHeight
+            const imageData = await page.evaluate(async ({ src, maxWidth }) => {
+                return new Promise((resolve) => {
+                    const img = new Image();
+                    img.crossOrigin = "anonymous";
+                    img.onload = () => {
+                        try {
+                            // Scale to fit within document width
+                            let width = img.naturalWidth;
+                            let height = img.naturalHeight;
+                            if (width > maxWidth) {
+                                const scale = maxWidth / width;
+                                width = maxWidth;
+                                height = Math.round(height * scale);
+                            }
+                            // Draw to canvas and get PNG data
+                            const canvas = document.createElement("canvas");
+                            canvas.width = width;
+                            canvas.height = height;
+                            const ctx = canvas.getContext("2d");
+                            if (!ctx) {
+                                resolve(null);
+                                return;
+                            }
+                            ctx.drawImage(img, 0, 0, width, height);
+                            // Get image data as base64
+                            const dataUrl = canvas.toDataURL("image/png");
+                            const base64 = dataUrl.split(",")[1];
+                            if (!base64) {
+                                resolve(null);
+                                return;
+                            }
+                            // Convert base64 to byte array
+                            const binaryString = atob(base64);
+                            const bytes = new Array(binaryString.length);
+                            for (let i = 0; i < binaryString.length; i++) {
+                                bytes[i] = binaryString.charCodeAt(i);
+                            }
+                            resolve({ data: bytes, width, height });
+                        }
+                        catch (err) {
+                            console.warn("Error processing image:", err);
+                            resolve(null);
+                        }
+                    };
+                    img.onerror = () => {
+                        console.warn("Failed to load image:", src);
+                        resolve(null);
+                    };
+                    // Set timeout for slow images
+                    setTimeout(() => {
+                        console.warn("Image load timeout:", src);
+                        resolve(null);
+                    }, 10000);
+                    img.src = src;
+                });
+            }, { src, maxWidth: MAX_IMAGE_WIDTH });
+            if (imageData) {
+                imageMap.set(src, {
+                    data: Buffer.from(imageData.data),
+                    width: imageData.width,
+                    height: imageData.height,
+                });
             }
-            // Scale to fit within document width
-            if (width > maxWidth) {
-                const scale = maxWidth / width;
-                height = Math.round(height * scale);
-                width = maxWidth;
-            }
-            imageMap.set(src, { data, width, height });
         }
         catch (err) {
-            console.warn(`Error fetching image ${imgEl.src}:`, err);
+            console.warn(`Failed to fetch image ${src}:`, err);
             continue;
         }
     }
+    await page.close();
     return imageMap;
 }
 /**
- * Extract image dimensions from binary data.
- * Supports PNG, JPEG, GIF, and WebP formats.
+ * Render SVG chart elements to PNG by screenshotting them from the live HTML page.
+ *
+ * Opens the actual HTML file in Playwright, locates SVG elements using multiple
+ * matching criteria (viewBox, gradient/pattern IDs, aria-labels), and screenshots
+ * each matched element directly. This preserves full CSS context, fonts, and styling
+ * that would be lost when rendering SVG strings in isolation.
  */
-function getImageDimensions(data) {
-    // PNG: Check for PNG signature and read IHDR chunk
-    if (data[0] === 0x89 && data[1] === 0x50 && data[2] === 0x4E && data[3] === 0x47) {
-        // PNG signature found, IHDR chunk starts at byte 8
-        // Width is at bytes 16-19, Height at bytes 20-23 (big-endian)
-        const width = data.readUInt32BE(16);
-        const height = data.readUInt32BE(20);
-        return { width, height };
+async function renderChartImages(browser, htmlPath) {
+    const chartImages = new Map();
+    const absoluteHtmlPath = path.resolve(htmlPath);
+    if (!fs.existsSync(absoluteHtmlPath)) {
+        return chartImages;
     }
-    // JPEG: Look for SOF0 marker (0xFF 0xC0) or SOF2 (0xFF 0xC2)
-    if (data[0] === 0xFF && data[1] === 0xD8) {
-        let offset = 2;
-        while (offset < data.length - 8) {
-            if (data[offset] !== 0xFF) {
-                offset++;
-                continue;
+    // Parse the HTML using the library to get svg-chart elements
+    const htmlContent = fs.readFileSync(absoluteHtmlPath, "utf-8");
+    const elements = parseHtmlContent(htmlContent);
+    // Get svg-chart elements the library found, including those nested inside blockquotes and layouts
+    const svgChartElements = [];
+    function collectSvgCharts(els) {
+        for (const el of els) {
+            if (el.type === "svg-chart") {
+                svgChartElements.push(el);
             }
-            const marker = data[offset + 1];
-            // SOF0, SOF1, SOF2 markers contain dimensions
-            if (marker >= 0xC0 && marker <= 0xC2) {
-                const height = data.readUInt16BE(offset + 5);
-                const width = data.readUInt16BE(offset + 7);
-                return { width, height };
+            else if (el.type === "blockquote" && el.content) {
+                collectSvgCharts(el.content);
+            }
+            else if (el.type === "two-column-layout") {
+                collectSvgCharts(el.sidebar.content);
+                collectSvgCharts(el.main.content);
             }
-            // Skip to next marker
-            const length = data.readUInt16BE(offset + 2);
-            offset += 2 + length;
-        }
-    }
-    // GIF: Check for GIF87a or GIF89a signature
-    if (data[0] === 0x47 && data[1] === 0x49 && data[2] === 0x46) {
-        const width = data.readUInt16LE(6);
-        const height = data.readUInt16LE(8);
-        return { width, height };
-    }
-    // WebP: Check for RIFF....WEBP signature
-    if (data[0] === 0x52 && data[1] === 0x49 && data[2] === 0x46 && data[3] === 0x46 &&
-        data[8] === 0x57 && data[9] === 0x45 && data[10] === 0x42 && data[11] === 0x50) {
-        // VP8 format (lossy)
-        if (data[12] === 0x56 && data[13] === 0x50 && data[14] === 0x38 && data[15] === 0x20) {
-            const width = data.readUInt16LE(26) & 0x3FFF;
-            const height = data.readUInt16LE(28) & 0x3FFF;
-            return { width, height };
-        }
-        // VP8L format (lossless)
-        if (data[12] === 0x56 && data[13] === 0x50 && data[14] === 0x38 && data[15] === 0x4C) {
-            const bits = data.readUInt32LE(21);
-            const width = (bits & 0x3FFF) + 1;
-            const height = ((bits >> 14) & 0x3FFF) + 1;
-            return { width, height };
         }
     }
-    return null;
-}
-/**
- * Render SVG chart elements to PNG images using Playwright browser canvas.
- * This allows Node.js CLI to render SVGs the same way the browser export does.
- */
-async function renderSvgChartsWithPlaywright(elements) {
-    const chartImages = new Map();
-    // Find all svg-chart elements
-    const svgCharts = elements.filter((el) => el.type === "svg-chart");
-    if (svgCharts.length === 0) {
+    collectSvgCharts(elements);
+    if (svgChartElements.length === 0) {
         return chartImages;
     }
-    // Launch browser
-    const launchOptions = { headless: true };
-    const proxyServer = process.env.HTTPS_PROXY || process.env.HTTP_PROXY;
-    if (proxyServer) {
-        launchOptions.proxy = { server: proxyServer };
-    }
-    const browser = await chromium.launch(launchOptions);
-    try {
-        const context = await browser.newContext({
-            bypassCSP: true,
-            viewport: { width: 1280, height: 800 },
-        });
-        const page = await context.newPage();
-        // Process each SVG chart
-        let svgIndex = 0;
-        for (const chart of svgCharts) {
-            try {
-                const imageData = await renderSvgInBrowser(page, chart.svgContent, chart.width, chart.height, chart.backgroundColor);
-                if (imageData) {
-                    chartImages.set(`svg-chart-${svgIndex}`, imageData);
+    console.log(`Rendering ${svgChartElements.length} SVG chart(s)...`);
+    const page = await browser.newPage({
+        viewport: { width: 1200, height: 800 },
+    });
+    await page.goto(`file://${absoluteHtmlPath}`, {
+        waitUntil: "networkidle",
+    });
+    // Wait for fonts/styles to settle
+    await page.waitForTimeout(500);
+    // For each svg-chart element from the library, find the matching SVG in the DOM
+    // by extracting unique identifiers from the svgContent
+    for (let i = 0; i < svgChartElements.length; i++) {
+        const svgChartEl = svgChartElements[i];
+        const svgContent = svgChartEl.svgContent;
+        // Extract multiple identifiers for robust matching
+        const viewBoxMatch = svgContent.match(/viewBox\s*=\s*["']([^"']+)["']/);
+        const viewBox = viewBoxMatch ? viewBoxMatch[1] : null;
+        // Extract first gradient/pattern ID as a unique identifier
+        const gradientIdMatch = svgContent.match(/id\s*=\s*["']([^"']+)["']/);
+        const firstId = gradientIdMatch ? gradientIdMatch[1] : null;
+        // Extract aria-label as another identifier
+        // Use separate patterns for double-quoted and single-quoted values to handle
+        // aria-labels that contain the other quote character (e.g., "Korea's cat culture")
+        const ariaLabelMatch = svgContent.match(/aria-label\s*=\s*"([^"]+)"/) || svgContent.match(/aria-label\s*=\s*'([^']+)'/);
+        const ariaLabel = ariaLabelMatch ? ariaLabelMatch[1] : null;
+        // Find the SVG with matching identifiers and mark IT directly (not its parent)
+        // This ensures we only screenshot the SVG, not surrounding DOM elements
+        const found = await page.evaluate(({ viewBox, firstId, ariaLabel, index }) => {
+            const svgs = Array.from(document.querySelectorAll("svg"));
+            for (const svg of svgs) {
+                // Skip already marked SVGs
+                if (svg.hasAttribute("data-svg-chart-index"))
+                    continue;
+                // Match by multiple criteria for robustness
+                const svgViewBox = svg.getAttribute("viewBox");
+                const svgAriaLabel = svg.getAttribute("aria-label");
+                // Check for first ID match (gradient/pattern IDs are often unique per SVG)
+                let hasMatchingId = false;
+                if (firstId) {
+                    const idEl = svg.querySelector(`#${CSS.escape(firstId)}`);
+                    hasMatchingId = !!idEl;
+                }
+                // Match: viewBox + (firstId OR ariaLabel)
+                if (viewBox && svgViewBox === viewBox) {
+                    if (hasMatchingId || (ariaLabel && svgAriaLabel === ariaLabel) || (!firstId && !ariaLabel)) {
+                        svg.setAttribute("data-svg-chart-index", String(index));
+                        return true;
+                    }
                 }
             }
-            catch (err) {
-                console.warn(`Failed to render SVG chart ${svgIndex}:`, err);
+            return false;
+        }, { viewBox, firstId, ariaLabel, index: i });
+        if (!found) {
+            // Fallback: try to match by width/height if viewBox matching failed
+            const widthMatch = svgContent.match(/width\s*=\s*["']([^"']+)["']/);
+            const heightMatch = svgContent.match(/height\s*=\s*["']([^"']+)["']/);
+            const svgWidth = widthMatch ? widthMatch[1] : null;
+            const svgHeight = heightMatch ? heightMatch[1] : null;
+            if (svgWidth && svgHeight) {
+                await page.evaluate(({ w, h, firstId, index }) => {
+                    const svgs = Array.from(document.querySelectorAll("svg"));
+                    for (const svg of svgs) {
+                        if (svg.getAttribute("width") === w && svg.getAttribute("height") === h) {
+                            if (!svg.hasAttribute("data-svg-chart-index")) {
+                                // Additional check: if we have firstId, verify it exists in this SVG
+                                if (firstId) {
+                                    const idEl = svg.querySelector(`#${CSS.escape(firstId)}`);
+                                    if (!idEl)
+                                        continue;
+                                }
+                                svg.setAttribute("data-svg-chart-index", String(index));
+                                return true;
+                            }
+                        }
+                    }
+                    return false;
+                }, { w: svgWidth, h: svgHeight, firstId, index: i });
             }
-            svgIndex++;
         }
-        await page.close();
-        await context.close();
     }
-    finally {
-        await browser.close();
-    }
-    return chartImages;
-}
-/**
- * Render a single SVG to PNG in the browser using Canvas.
- */
-async function renderSvgInBrowser(page, svgContent, width, height, backgroundColor) {
-    // Create HTML page with the SVG rendering logic
-    const renderPage = `<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    body { margin: 0; padding: 0; }
-    #svg-container { display: inline-block; }
-  </style>
-</head>
-<body>
-  <div id="svg-container"></div>
-  <canvas id="canvas"></canvas>
-  <script>
-    window.renderSvgToPng = async function(svgContent, width, height, backgroundColor) {
-      // Parse SVG to get dimensions if not provided
-      const parser = new DOMParser();
-      const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
-      const svgElement = svgDoc.querySelector("svg");
-
-      if (!svgElement) {
-        return null;
-      }
-
-      // Get dimensions from SVG
-      let svgWidth = width;
-      let svgHeight = height;
-
-      if (!svgWidth || !svgHeight) {
-        const viewBox = svgElement.getAttribute("viewBox");
-        if (viewBox) {
-          const parts = viewBox.split(/\\s+/).map(Number);
-          if (parts.length >= 4) {
-            svgWidth = svgWidth || parts[2];
-            svgHeight = svgHeight || parts[3];
-          }
-        }
-        if (!svgWidth) {
-          const widthAttr = svgElement.getAttribute("width");
-          if (widthAttr && !widthAttr.includes("%")) {
-            svgWidth = parseFloat(widthAttr);
-          }
+    // Screenshot each marked SVG element directly
+    for (let i = 0; i < svgChartElements.length; i++) {
+        const svgEl = await page.$(`svg[data-svg-chart-index="${i}"]`);
+        if (!svgEl) {
+            continue;
         }
-        if (!svgHeight) {
-          const heightAttr = svgElement.getAttribute("height");
-          if (heightAttr && !heightAttr.includes("%")) {
-            svgHeight = parseFloat(heightAttr);
-          }
+        // Get bounding box
+        const box = await svgEl.boundingBox();
+        if (!box) {
+            continue;
         }
-      }
-
-      // Default dimensions if still not found
-      svgWidth = svgWidth || 624;
-      svgHeight = svgHeight || 468;
-
-      // Ensure SVG has explicit dimensions
-      svgElement.setAttribute("width", String(svgWidth));
-      svgElement.setAttribute("height", String(svgHeight));
-
-      // Ensure SVG has proper XML namespace
-      if (!svgElement.getAttribute("xmlns")) {
-        svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-      }
-
-      // Serialize the modified SVG
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(svgElement);
-
-      // Create a blob URL for the SVG
-      const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
-      const svgUrl = URL.createObjectURL(svgBlob);
-
-      try {
-        // Create an image from the SVG
-        const img = new Image();
-        await new Promise((resolve, reject) => {
-          img.onload = resolve;
-          img.onerror = reject;
-          img.src = svgUrl;
+        // Take screenshot of just this SVG element
+        const screenshot = await svgEl.screenshot({
+            type: "png",
+        });
+        // Scale to fit within document content width
+        const scale = box.width > MAX_IMAGE_WIDTH ? MAX_IMAGE_WIDTH / box.width : 1;
+        const width = Math.round(box.width * scale);
+        const height = Math.round(box.height * scale);
+        // Use svg-chart-{index} as the key to match the library's indexing
+        chartImages.set(`svg-chart-${i}`, {
+            data: screenshot,
+            width,
+            height,
         });
-
-        // Create canvas
-        const scale = window.devicePixelRatio || 1;
-        const canvas = document.getElementById("canvas");
-        canvas.width = svgWidth * scale;
-        canvas.height = svgHeight * scale;
-
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return null;
-
-        // Fill with background color
-        ctx.fillStyle = backgroundColor ? "#" + backgroundColor : "white";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Scale for device pixel ratio
-        ctx.scale(scale, scale);
-
-        // Draw the SVG
-        ctx.drawImage(img, 0, 0, svgWidth, svgHeight);
-
-        // Convert to PNG data URL
-        const dataUrl = canvas.toDataURL("image/png");
-
-        // Scale dimensions to fit within DOCX content width
-        const maxWidth = 624;
-        const aspectRatio = svgHeight / svgWidth;
-        const finalWidth = Math.min(svgWidth, maxWidth);
-        const finalHeight = finalWidth * aspectRatio;
-
-        return {
-          dataUrl,
-          width: Math.round(finalWidth),
-          height: Math.round(finalHeight),
-        };
-      } finally {
-        URL.revokeObjectURL(svgUrl);
-      }
-    };
-  </script>
-</body>
-</html>`;
-    await page.setContent(renderPage, { waitUntil: "domcontentloaded" });
-    // Call the rendering function in the browser
-    const result = await page.evaluate(async ({ svgContent, width, height, backgroundColor }) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return window.renderSvgToPng(svgContent, width, height, backgroundColor);
-    }, { svgContent, width, height, backgroundColor });
-    if (!result || !result.dataUrl) {
-        return null;
     }
-    // Convert data URL to Buffer
-    const base64Data = result.dataUrl.replace(/^data:image\/png;base64,/, "");
-    const data = Buffer.from(base64Data, "base64");
-    return {
-        data,
-        width: result.width,
-        height: result.height,
-    };
+    await page.close();
+    return chartImages;
 }
 export async function exportDocs(filePath, outDir, options = {}) {
     const { name: outputName, pageless } = options;
@@ -345,12 +277,26 @@ export async function exportDocs(filePath, outDir, options = {}) {
     const html = fs.readFileSync(absolutePath, "utf-8");
     // Get filename for title - use provided name or derive from input file
     const baseName = outputName || path.basename(filePath, ".html");
-    // Parse HTML to get elements
+    // Launch browser for image fetching and SVG rendering
+    const launchOptions = { headless: true };
+    const proxyServer = process.env.HTTPS_PROXY || process.env.HTTP_PROXY;
+    if (proxyServer) {
+        launchOptions.proxy = { server: proxyServer };
+    }
+    const browser = await chromium.launch(launchOptions);
+    let imageMap;
+    let chartImages;
+    try {
+        // Fetch external images using browser canvas (accurate dimensions via naturalWidth/naturalHeight)
+        imageMap = await fetchExternalImages(browser, absolutePath);
+        // Render SVG charts by screenshotting live DOM elements (preserves CSS context)
+        chartImages = await renderChartImages(browser, absolutePath);
+    }
+    finally {
+        await browser.close();
+    }
+    // Parse HTML to get elements (pass pre-parsed to avoid double-parsing in createDocxBuffer)
     const elements = parseHtmlContent(html);
-    // Fetch external images (for <img> tags with HTTP URLs)
-    const imageMap = await fetchExternalImages(elements);
-    // Render SVG charts to PNG using Playwright browser canvas
-    const chartImages = await renderSvgChartsWithPlaywright(elements);
     // Create DOCX buffer with pre-parsed elements, external images, and rendered charts
     const buffer = await createDocxBuffer(html, {
         title: baseName,