docgen-utils 1.0.5

package/dist/packages/docs/convert.js

@@ -0,0 +1,1399 @@
+import { AlignmentType, BorderStyle, ImageRun, LineRuleType, Paragraph, ShadingType, Table, TableCell as DocxTableCell, TableRow, TextRun, UnderlineType, WidthType, convertInchesToTwip, XmlComponent } from "docx";
+import { HEADING_LEVEL_MAP } from "./common";
+// Line spacing: HTML line-height 1.7
+// Word LineRuleType.AUTO uses "240ths of a line" - so 240 = single spacing, 360 = 1.5, 480 = double
+// For 1.7 line height: 240 * 1.7 = 408
+const PARAGRAPH_SPACING = {
+    line: 408, // 1.7 line height (240 * 1.7)
+    lineRule: LineRuleType.AUTO,
+    after: 240, // 1em (1rem = 16px = 12pt) after paragraph
+};
+// Heading line-height is 1.3 (tighter than body text)
+// 240 * 1.3 = 312
+const HEADING_LINE_SPACING = {
+    line: 312, // 1.3 line height (240 * 1.3)
+    lineRule: LineRuleType.AUTO,
+};
+// Heading spacing based on HTML CSS
+const HEADING_SPACING = {
+    h1: { before: 160, after: 240 }, // 0.67em / 1em
+    h2: { before: 480, after: 240 }, // margin-top: 2rem, margin-bottom: 1rem
+    h3: { before: 360, after: 240 }, // margin-top: 1.5rem
+};
+/**
+ * Concrete XmlComponent implementation for building custom XML elements.
+ */
+class XmlElement extends XmlComponent {
+    constructor(name, attributes) {
+        super(name);
+        if (attributes) {
+            // Attributes must be added as a special _attr object
+            this.root.push({ _attr: attributes });
+        }
+    }
+    /** Add text content to this element */
+    addText(text) {
+        this.root.push(text);
+        return this;
+    }
+}
+/**
+ * Custom XmlComponent for gradient text fill (w14:textFill).
+ * This creates the OOXML structure for gradient text in Word.
+ *
+ * The gradient fill XML structure:
+ * <w14:textFill>
+ *   <w14:gradFill>
+ *     <w14:gsLst>
+ *       <w14:gs w14:pos="0">
+ *         <w14:srgbClr w14:val="7C3AED"/>
+ *       </w14:gs>
+ *       <w14:gs w14:pos="50000">
+ *         <w14:srgbClr w14:val="A78BFA"/>
+ *       </w14:gs>
+ *       <w14:gs w14:pos="100000">
+ *         <w14:srgbClr w14:val="C084FC"/>
+ *       </w14:gs>
+ *     </w14:gsLst>
+ *     <w14:lin w14:ang="2700000" w14:scaled="0"/>
+ *   </w14:gradFill>
+ * </w14:textFill>
+ */
+class GradientTextFill extends XmlElement {
+    constructor(gradient) {
+        super("w14:textFill");
+        // Create gradFill element
+        const gradFill = new XmlElement("w14:gradFill");
+        // Create gsLst (gradient stop list)
+        const gsLst = new XmlElement("w14:gsLst");
+        for (const stop of gradient.stops) {
+            // Position is in 1/1000ths of a percent (0-100000)
+            const pos = Math.round(stop.position * 1000);
+            const gs = new GradientStopXml(pos, stop.color);
+            gsLst.addChildElement(gs);
+        }
+        gradFill.addChildElement(gsLst);
+        // Create lin (linear gradient) element
+        // Angle is in 1/60000ths of a degree (so 135deg = 135 * 60000 = 8100000)
+        // Word uses a different angle system: 0 = right, 90 = down, etc.
+        // CSS: 0 = up, 90 = right, 180 = down, 270 = left
+        // Word: needs to be converted (Word 0 = right, going counterclockwise)
+        // Formula: wordAngle = (450 - cssAngle) % 360
+        const wordAngle = ((450 - gradient.angle) % 360) * 60000;
+        const lin = new XmlElement("w14:lin", {
+            "w14:ang": wordAngle.toString(),
+            "w14:scaled": "0",
+        });
+        gradFill.addChildElement(lin);
+        this.addChildElement(gradFill);
+    }
+}
+/**
+ * Custom XmlComponent for a gradient stop (w14:gs).
+ */
+class GradientStopXml extends XmlElement {
+    constructor(position, color) {
+        super("w14:gs", { "w14:pos": position.toString() });
+        const srgbClr = new XmlElement("w14:srgbClr", { "w14:val": color.toUpperCase() });
+        this.addChildElement(srgbClr);
+    }
+}
+/**
+ * Custom XmlComponent for a gradient stop in DrawingML (a:gs).
+ * Used for shape gradient fills in anchored drawings.
+ */
+class DrawingGradientStop extends XmlElement {
+    constructor(position, color) {
+        // Position is in 1/1000ths of a percent (0-100000)
+        super("a:gs", { pos: (position * 1000).toString() });
+        const srgbClr = new XmlElement("a:srgbClr", { val: color.toUpperCase() });
+        this.addChildElement(srgbClr);
+    }
+}
+/**
+ * Creates a VML (Vector Markup Language) gradient-filled rectangle wrapped in a run.
+ * VML is the legacy format that LibreOffice supports better than DrawingML.
+ *
+ * This gradient is designed to be placed BEFORE the content (in a spacing paragraph).
+ * It uses absolute positioning relative to the margin and a large height that
+ * visually covers the content below without affecting its layout.
+ */
+class VmlGradientBackground extends XmlElement {
+    constructor(gradient, widthInches) {
+        super("w:r");
+        // VML uses points
+        const widthPt = widthInches * 72;
+        // Use a large height - this won't affect layout because the shape is in a
+        // separate paragraph before the table and has wrap type "none"
+        const heightPt = 1000;
+        // VML gradient angle conversion
+        const vmlAngle = gradient.angle - 90;
+        // Get first and last gradient colors - swap them for VML
+        const sortedStops = [...gradient.stops].sort((a, b) => a.position - b.position);
+        const startColor = sortedStops[sortedStops.length - 1]?.color || "E9D5FF";
+        const endColor = sortedStops[0]?.color || "7C3AED";
+        // Create w:pict container
+        const pict = new XmlElement("w:pict");
+        // Create VML rect shape positioned relative to margin
+        // margin-top: small offset to align with table content below
+        const rect = new XmlElement("v:rect", {
+            "xmlns:v": "urn:schemas-microsoft-com:vml",
+            "xmlns:o": "urn:schemas-microsoft-com:office:office",
+            "style": `position:absolute;margin-left:0;margin-top:0.15in;width:${widthPt}pt;height:${heightPt}pt;z-index:-251658240`,
+            "filled": "t",
+            "stroked": "f",
+        });
+        // Add gradient fill
+        const fill = new XmlElement("v:fill", {
+            "type": "gradient",
+            "color": `#${startColor}`,
+            "color2": `#${endColor}`,
+            "angle": vmlAngle.toString(),
+        });
+        rect.addChildElement(fill);
+        // Wrap settings - anchored to margin, type "none" so text flows over
+        const wrap = new XmlElement("w10:wrap", {
+            "xmlns:w10": "urn:schemas-microsoft-com:office:word",
+            "type": "none",
+            "anchorx": "margin",
+            "anchory": "paragraph",
+        });
+        rect.addChildElement(wrap);
+        pict.addChildElement(rect);
+        this.addChildElement(pict);
+    }
+}
+/**
+ * Creates an anchored drawing with a gradient-filled rectangle.
+ * Uses wp:anchor with behindDoc="1" to position the shape behind text.
+ * This acts as a true background that content flows over.
+ */
+class GradientBackgroundDrawing extends XmlElement {
+    constructor(gradient, widthEmu, heightEmu, placement = "before-table") {
+        super("w:drawing");
+        // Calculate offsets based on placement strategy
+        // EMUs: 1 inch = 914400 EMUs
+        let leftOffsetEmu;
+        let topOffsetEmu;
+        if (placement === "inside-cell") {
+            // Old approach: negative offsets to compensate for table cell margins
+            // Cell margins are: top=0.25in, left=0.35in
+            leftOffsetEmu = Math.round(-0.35 * 914400); // -320040
+            topOffsetEmu = Math.round(-0.25 * 914400); // -228600
+        }
+        else {
+            // New approach: position relative to the paragraph before the table
+            // No horizontal offset needed (starts at left margin)
+            // Small positive vertical offset to position just below the paragraph
+            leftOffsetEmu = 0;
+            topOffsetEmu = Math.round(0.15 * 914400); // ~0.15 inch below paragraph
+        }
+        // Use anchor positioning with behindDoc to place behind text
+        const anchor = new XmlElement("wp:anchor", {
+            distT: "0",
+            distB: "0",
+            distL: "0",
+            distR: "0",
+            simplePos: "0",
+            relativeHeight: "0", // Behind everything
+            behindDoc: "1", // Position behind text
+            locked: "0",
+            layoutInCell: "1", // Allow layout in cell (for LibreOffice compatibility)
+            allowOverlap: "1",
+        });
+        // Simple position (required but not used when simplePos="0")
+        anchor.addChildElement(new XmlElement("wp:simplePos", { x: "0", y: "0" }));
+        // Horizontal position - align to margin for full-width coverage
+        const posH = new XmlElement("wp:positionH", { relativeFrom: placement === "inside-cell" ? "column" : "margin" });
+        posH.addChildElement(new XmlElement("wp:posOffset").addText(leftOffsetEmu.toString()));
+        anchor.addChildElement(posH);
+        // Vertical position - align to paragraph
+        const posV = new XmlElement("wp:positionV", { relativeFrom: "paragraph" });
+        posV.addChildElement(new XmlElement("wp:posOffset").addText(topOffsetEmu.toString()));
+        anchor.addChildElement(posV);
+        // Extent (size of the drawing)
+        anchor.addChildElement(new XmlElement("wp:extent", {
+            cx: widthEmu.toString(),
+            cy: heightEmu.toString(),
+        }));
+        // Effect extent (no effects)
+        anchor.addChildElement(new XmlElement("wp:effectExtent", {
+            l: "0", t: "0", r: "0", b: "0",
+        }));
+        // Wrap none (allow text to flow over the shape)
+        anchor.addChildElement(new XmlElement("wp:wrapNone"));
+        // Document properties
+        anchor.addChildElement(new XmlElement("wp:docPr", {
+            id: "1",
+            name: "Gradient Background",
+        }));
+        // Non-visual properties
+        const cNvGraphicFramePr = new XmlElement("wp:cNvGraphicFramePr");
+        cNvGraphicFramePr.addChildElement(new XmlElement("a:graphicFrameLocks", {
+            "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+        }));
+        anchor.addChildElement(cNvGraphicFramePr);
+        // Graphic element
+        const graphic = new XmlElement("a:graphic", {
+            "xmlns:a": "http://schemas.openxmlformats.org/drawingml/2006/main",
+        });
+        // Graphic data with wordprocessingShape
+        const graphicData = new XmlElement("a:graphicData", {
+            uri: "http://schemas.microsoft.com/office/word/2010/wordprocessingShape",
+        });
+        // WordprocessingShape
+        const wsp = new XmlElement("wps:wsp", {
+            "xmlns:wps": "http://schemas.microsoft.com/office/word/2010/wordprocessingShape",
+        });
+        // Non-visual shape properties
+        wsp.addChildElement(new XmlElement("wps:cNvSpPr"));
+        // Shape properties
+        const spPr = new XmlElement("wps:spPr");
+        // Transform
+        const xfrm = new XmlElement("a:xfrm");
+        xfrm.addChildElement(new XmlElement("a:off", { x: "0", y: "0" }));
+        xfrm.addChildElement(new XmlElement("a:ext", {
+            cx: widthEmu.toString(),
+            cy: heightEmu.toString(),
+        }));
+        spPr.addChildElement(xfrm);
+        // Preset geometry (rectangle)
+        const prstGeom = new XmlElement("a:prstGeom", { prst: "rect" });
+        prstGeom.addChildElement(new XmlElement("a:avLst"));
+        spPr.addChildElement(prstGeom);
+        // Gradient fill
+        const gradFill = new XmlElement("a:gradFill", { rotWithShape: "1" });
+        // Gradient stop list
+        const gsLst = new XmlElement("a:gsLst");
+        for (const stop of gradient.stops) {
+            gsLst.addChildElement(new DrawingGradientStop(stop.position, stop.color));
+        }
+        gradFill.addChildElement(gsLst);
+        // Linear gradient direction
+        // CSS angle: 0deg = to top, 90deg = to right, 135deg = to bottom-right
+        // DrawingML: 0 = left to right, angles in 1/60000ths of a degree
+        const normalizedAngle = ((90 - gradient.angle) % 360 + 360) % 360;
+        const drawingAngle = normalizedAngle * 60000;
+        gradFill.addChildElement(new XmlElement("a:lin", {
+            ang: drawingAngle.toString(),
+            scaled: "0",
+        }));
+        spPr.addChildElement(gradFill);
+        // No outline
+        const ln = new XmlElement("a:ln");
+        ln.addChildElement(new XmlElement("a:noFill"));
+        spPr.addChildElement(ln);
+        wsp.addChildElement(spPr);
+        // Body properties (required)
+        wsp.addChildElement(new XmlElement("wps:bodyPr"));
+        graphicData.addChildElement(wsp);
+        graphic.addChildElement(graphicData);
+        anchor.addChildElement(graphic);
+        this.addChildElement(anchor);
+    }
+}
+/**
+ * Custom TextRun with gradient fill support.
+ * Extends the standard TextRun by adding w14:textFill to the run properties.
+ */
+class GradientTextRun extends XmlElement {
+    constructor(options) {
+        super("w:r");
+        // Add run properties (w:rPr)
+        const rPr = new XmlElement("w:rPr");
+        // Bold
+        if (options.bold) {
+            rPr.addChildElement(new XmlElement("w:b"));
+        }
+        // Italics
+        if (options.italics) {
+            rPr.addChildElement(new XmlElement("w:i"));
+        }
+        // Font size (in half-points)
+        if (options.size) {
+            rPr.addChildElement(new XmlElement("w:sz", { "w:val": options.size.toString() }));
+            rPr.addChildElement(new XmlElement("w:szCs", { "w:val": options.size.toString() }));
+        }
+        // Font family
+        if (options.font) {
+            rPr.addChildElement(new XmlElement("w:rFonts", {
+                "w:ascii": options.font,
+                "w:hAnsi": options.font,
+                "w:cs": options.font,
+            }));
+        }
+        // Add solid color fallback for LibreOffice compatibility
+        // LibreOffice ignores w14:textFill gradients but renders w:color
+        // Word will use the gradient (w14:textFill takes precedence over w:color)
+        const fallbackColor = options.fallbackColor || options.gradient.stops[0]?.color;
+        if (fallbackColor) {
+            rPr.addChildElement(new XmlElement("w:color", { "w:val": fallbackColor.toUpperCase() }));
+        }
+        // Add gradient text fill (Word uses this, LibreOffice ignores it)
+        rPr.addChildElement(new GradientTextFill(options.gradient));
+        this.addChildElement(rPr);
+        // Add text element (w:t)
+        const t = new XmlElement("w:t", { "xml:space": "preserve" });
+        t.addText(options.text);
+        this.addChildElement(t);
+    }
+}
+/**
+ * Convert TextAlignment to AlignmentType.
+ */
+function textAlignmentToDocx(alignment) {
+    if (!alignment)
+        return undefined;
+    switch (alignment) {
+        case "left":
+            return AlignmentType.LEFT;
+        case "center":
+            return AlignmentType.CENTER;
+        case "right":
+            return AlignmentType.RIGHT;
+        case "justify":
+            return AlignmentType.JUSTIFIED;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Convert InlineRun array to TextRun array for docx.
+ * Uses shading for exact background color matching from HTML.
+ * Note: shading uses the exact hex color from HTML (no approximation).
+ * Handles line breaks (\n) by splitting into separate TextRuns with break: true.
+ * Optionally applies text-transform to all text.
+ * Supports gradient text fills using custom XmlComponent.
+ */
+function inlineRunsToTextRuns(runs, textTransform) {
+    const result = [];
+    // Helper to apply text transform
+    const applyTransform = (text) => {
+        if (!textTransform)
+            return text;
+        if (textTransform === "uppercase")
+            return text.toUpperCase();
+        if (textTransform === "lowercase")
+            return text.toLowerCase();
+        if (textTransform === "capitalize")
+            return text.replace(/\b\w/g, c => c.toUpperCase());
+        return text;
+    };
+    // Helper to convert underline type
+    const getUnderlineType = (type) => {
+        switch (type) {
+            case "single": return UnderlineType.SINGLE;
+            case "dotted": return UnderlineType.DOTTED;
+            case "double": return UnderlineType.DOUBLE;
+            case "wave": return UnderlineType.WAVE;
+            default: return UnderlineType.SINGLE;
+        }
+    };
+    for (const run of runs) {
+        // Split text by newlines to handle <br> tags
+        const parts = run.text.split('\n');
+        // Build underline config if present
+        const underlineConfig = run.underline ? {
+            type: getUnderlineType(run.underline.type),
+            color: run.underline.color,
+        } : undefined;
+        for (let i = 0; i < parts.length; i++) {
+            const part = applyTransform(parts[i]);
+            // Add a line break before this part (except for the first part)
+            if (i > 0) {
+                result.push(new TextRun({
+                    break: 1,
+                    bold: run.bold,
+                    italics: run.italic,
+                    color: run.color,
+                    size: run.size,
+                    font: run.fontFamily,
+                    superScript: run.superscript,
+                    subScript: run.subscript,
+                    underline: underlineConfig,
+                    shading: run.backgroundColor ? {
+                        type: ShadingType.SOLID,
+                        fill: run.backgroundColor,
+                        color: run.backgroundColor,
+                    } : undefined,
+                }));
+            }
+            // Add the text part (skip empty parts)
+            if (part) {
+                // Use GradientTextRun for gradient fills
+                if (run.gradient) {
+                    result.push(new GradientTextRun({
+                        text: part,
+                        gradient: run.gradient,
+                        bold: run.bold,
+                        italics: run.italic,
+                        size: run.size,
+                        font: run.fontFamily,
+                        fallbackColor: run.color, // Solid color fallback for LibreOffice
+                    }));
+                }
+                else {
+                    result.push(new TextRun({
+                        text: part,
+                        bold: run.bold,
+                        italics: run.italic,
+                        color: run.color,
+                        size: run.size,
+                        font: run.fontFamily,
+                        superScript: run.superscript,
+                        subScript: run.subscript,
+                        underline: underlineConfig,
+                        shading: run.backgroundColor ? {
+                            type: ShadingType.SOLID,
+                            fill: run.backgroundColor,
+                            color: run.backgroundColor,
+                        } : undefined,
+                    }));
+                }
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Create a table row from cells.
+ */
+function createTableRow(cells, isHeaderRow, columnCount, cellPadding, headerBackgroundColor, headerTextColor, rowBackgroundColor) {
+    // Helper to convert underline type for table cells
+    const getUnderlineTypeForTable = (type) => {
+        switch (type) {
+            case "single": return UnderlineType.SINGLE;
+            case "dotted": return UnderlineType.DOTTED;
+            case "double": return UnderlineType.DOUBLE;
+            case "wave": return UnderlineType.WAVE;
+            default: return UnderlineType.SINGLE;
+        }
+    };
+    return new TableRow({
+        tableHeader: isHeaderRow,
+        children: cells.map((cell) => {
+            // Build text runs with formatting preserved
+            // Apply header text color if specified, otherwise use run's color or default
+            const textRuns = typeof cell === "string"
+                ? [new TextRun({
+                        text: cell,
+                        bold: isHeaderRow,
+                        color: isHeaderRow && headerTextColor ? headerTextColor : undefined,
+                    })]
+                : cell.map(run => new TextRun({
+                    text: run.text,
+                    bold: isHeaderRow || run.bold,
+                    italics: run.italic,
+                    // Use header text color for header rows, otherwise use run's color
+                    color: isHeaderRow && headerTextColor ? headerTextColor : run.color,
+                    size: run.size,
+                    font: run.fontFamily,
+                    superScript: run.superscript,
+                    subScript: run.subscript,
+                    underline: run.underline ? {
+                        type: getUnderlineTypeForTable(run.underline.type),
+                        color: run.underline.color,
+                    } : undefined,
+                }));
+            // Determine cell shading: header row uses headerBackgroundColor, even rows use rowBackgroundColor
+            let shading;
+            if (isHeaderRow && headerBackgroundColor) {
+                shading = {
+                    type: ShadingType.SOLID,
+                    color: headerBackgroundColor,
+                    fill: headerBackgroundColor,
+                };
+            }
+            else if (!isHeaderRow && rowBackgroundColor) {
+                shading = {
+                    type: ShadingType.SOLID,
+                    color: rowBackgroundColor,
+                    fill: rowBackgroundColor,
+                };
+            }
+            else if (isHeaderRow) {
+                // Default header shading if no custom color specified
+                shading = {
+                    type: ShadingType.SOLID,
+                    color: "F9FAFB",
+                    fill: "F9FAFB",
+                };
+            }
+            return new DocxTableCell({
+                children: [
+                    new Paragraph({
+                        children: textRuns,
+                    }),
+                ],
+                width: {
+                    size: 100 / columnCount,
+                    type: WidthType.PERCENTAGE,
+                },
+                shading,
+                // Apply cell padding from CSS
+                margins: cellPadding ? {
+                    top: cellPadding.top,
+                    bottom: cellPadding.bottom,
+                    left: cellPadding.left,
+                    right: cellPadding.right,
+                } : undefined,
+            });
+        }),
+    });
+}
+/**
+ * Create a paragraph for a list item.
+ * Indentation increases with nesting level:
+ * - Level 0: 720 twips (0.5") left indent
+ * - Level 1: 1440 twips (1.0") left indent
+ * - etc.
+ */
+function createListItemParagraph(item, ordered, level = 0) {
+    const children = typeof item === "string"
+        ? [new TextRun({ text: item })]
+        : inlineRunsToTextRuns(item);
+    // Indentation increases by 720 twips (0.5") per level
+    // Base indent: 720 + (level * 720)
+    const leftIndent = 720 + (level * 720);
+    const indent = { left: leftIndent, hanging: 360 };
+    // List items use body text line-height (1.7)
+    const listSpacing = {
+        line: PARAGRAPH_SPACING.line,
+        lineRule: PARAGRAPH_SPACING.lineRule,
+        after: 60, // Small spacing between list items (~0.25em)
+    };
+    if (ordered) {
+        return new Paragraph({
+            children,
+            numbering: {
+                reference: "default-numbering",
+                level,
+            },
+            indent,
+            spacing: listSpacing,
+        });
+    }
+    return new Paragraph({
+        children,
+        bullet: {
+            level,
+        },
+        indent,
+        spacing: listSpacing,
+    });
+}
+/**
+ * Convert a parsed element to docx paragraphs or tables.
+ */
+export function convertElementToDocx(element) {
+    switch (element.type) {
+        case "heading": {
+            const headingLevel = HEADING_LEVEL_MAP[element.level];
+            const alignment = textAlignmentToDocx(element.alignment);
+            // Get heading-specific spacing
+            const spacingKey = `h${element.level}`;
+            const headingSpacing = HEADING_SPACING[spacingKey] || { before: 240, after: 240 };
+            // Apply text-transform if specified
+            let displayText = element.text;
+            if (element.textTransform === "uppercase") {
+                displayText = displayText.toUpperCase();
+            }
+            else if (element.textTransform === "lowercase") {
+                displayText = displayText.toLowerCase();
+            }
+            else if (element.textTransform === "capitalize") {
+                displayText = displayText.replace(/\b\w/g, c => c.toUpperCase());
+            }
+            // Use runs array if available (for headings with inline badges/badges)
+            // Otherwise fallback to simple text with color
+            let children;
+            if (element.runs) {
+                children = inlineRunsToTextRuns(element.runs, element.textTransform);
+            }
+            else {
+                // Use color extracted from HTML if available, otherwise let DOCX use its default
+                const textRunOptions = { text: displayText };
+                if (element.color) {
+                    textRunOptions.color = element.color;
+                }
+                // Apply font-family extracted from CSS (e.g., h1 { font-family: 'Source Serif Pro'; })
+                if (element.fontFamily) {
+                    textRunOptions.font = element.fontFamily;
+                }
+                children = [new TextRun(textRunOptions)];
+            }
+            // Build paragraph options with optional border-bottom
+            const paragraphOptions = {
+                children,
+                heading: headingLevel,
+                alignment,
+                spacing: {
+                    // GENERALIZED: Use lineSpacing from CSS if available, otherwise use default
+                    line: element.lineSpacing !== undefined ? element.lineSpacing : HEADING_LINE_SPACING.line,
+                    lineRule: HEADING_LINE_SPACING.lineRule,
+                    before: headingSpacing.before,
+                    after: element.spacingAfter !== undefined ? element.spacingAfter : headingSpacing.after,
+                },
+            };
+            // Add border-bottom if present (heading underline style)
+            if (element.borderBottom) {
+                paragraphOptions.border = {
+                    bottom: { style: BorderStyle.SINGLE, size: 6, color: element.borderBottom },
+                };
+            }
+            return [new Paragraph(paragraphOptions)];
+        }
+        case "paragraph": {
+            // Apply text-transform if specified
+            let displayText = element.text;
+            if (element.textTransform === "uppercase") {
+                displayText = displayText.toUpperCase();
+            }
+            else if (element.textTransform === "lowercase") {
+                displayText = displayText.toLowerCase();
+            }
+            else if (element.textTransform === "capitalize") {
+                displayText = displayText.replace(/\b\w/g, c => c.toUpperCase());
+            }
+            // Use runs array if available for inline formatting, otherwise fallback to simple text
+            const children = element.runs
+                ? inlineRunsToTextRuns(element.runs, element.textTransform)
+                : [
+                    new TextRun({
+                        text: displayText,
+                        bold: element.bold,
+                        italics: element.italic,
+                        color: element.color,
+                        font: element.fontFamily,
+                    }),
+                ];
+            const alignment = textAlignmentToDocx(element.alignment);
+            // Build indent configuration
+            const indent = {};
+            if (element.firstLineIndent) {
+                indent.firstLine = element.firstLineIndent;
+            }
+            if (element.hangingIndent) {
+                // Hanging indent: left margin equals the hanging amount, first line outdented
+                indent.hanging = element.hangingIndent;
+                indent.left = element.hangingIndent;
+            }
+            // GENERALIZED: Use element's spacingAfter if provided, otherwise default
+            const afterSpacing = element.spacingAfter !== undefined ? element.spacingAfter : PARAGRAPH_SPACING.after;
+            // GENERALIZED: Use element's lineSpacing if provided, otherwise default
+            const lineSpacing = element.lineSpacing !== undefined ? element.lineSpacing : PARAGRAPH_SPACING.line;
+            return [
+                new Paragraph({
+                    children,
+                    alignment,
+                    indent: Object.keys(indent).length > 0 ? indent : undefined,
+                    spacing: {
+                        line: lineSpacing,
+                        lineRule: PARAGRAPH_SPACING.lineRule,
+                        after: afterSpacing,
+                    },
+                }),
+            ];
+        }
+        case "list": {
+            return element.items.map((item) => {
+                // Check if item is a ListItem with level information
+                if (typeof item === "object" && "level" in item && "ordered" in item) {
+                    const listItem = item;
+                    return createListItemParagraph(listItem.content, listItem.ordered, listItem.level);
+                }
+                // Legacy format: string or InlineRun[] without level info
+                return createListItemParagraph(item, element.ordered, 0);
+            });
+        }
+        case "table": {
+            // For noBorders tables (like flex column layouts), don't apply header styling
+            // For regular tables (with borders), default to treating first row as header unless explicitly disabled
+            const useHeaderStyling = element.noBorders ? false : (element.hasHeader !== false);
+            const tableRows = element.rows.map((row, rowIndex) => createTableRow(row, useHeaderStyling && rowIndex === 0, row.length, element.cellPadding, element.headerBackgroundColor, element.headerTextColor, 
+            // Apply even row background color for alternating row styling (rowIndex > 0 and odd = even rows in 0-indexed)
+            rowIndex > 0 && rowIndex % 2 === 0 ? element.evenRowBackgroundColor : undefined));
+            // Default table border color (light gray), or no borders
+            const borderColor = "E5E7EB";
+            const noBorderStyle = { style: BorderStyle.NONE, size: 0, color: "FFFFFF" };
+            const borderStyle = element.noBorders
+                ? noBorderStyle
+                : { style: BorderStyle.SINGLE, size: 4, color: borderColor };
+            const dataTable = new Table({
+                rows: tableRows,
+                width: {
+                    size: 100,
+                    type: WidthType.PERCENTAGE,
+                },
+                borders: {
+                    top: borderStyle,
+                    bottom: borderStyle,
+                    left: borderStyle,
+                    right: borderStyle,
+                    insideHorizontal: borderStyle,
+                    insideVertical: borderStyle,
+                },
+            });
+            // Add spacing paragraphs before and after the table to ensure proper separation
+            // from surrounding content (especially other tables)
+            const spacingBefore = new Paragraph({
+                children: [],
+                spacing: { before: 200, after: 0 },
+            });
+            const spacingAfter = new Paragraph({
+                children: [],
+                spacing: { before: 0, after: 200 },
+            });
+            return [spacingBefore, dataTable, spacingAfter];
+        }
+        case "code": {
+            return [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: element.text,
+                            font: "Courier New",
+                            size: 20,
+                        }),
+                    ],
+                    border: {
+                        top: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" },
+                        bottom: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" },
+                        left: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" },
+                        right: { style: BorderStyle.SINGLE, size: 1, color: "CCCCCC" },
+                    },
+                    shading: {
+                        fill: "F5F5F5",
+                    },
+                }),
+            ];
+        }
+        case "blockquote": {
+            // Render blockquote/callout as a single-cell table to create a "box" effect
+            // This ensures consistent background shading and proper containment of content
+            // For gradient backgrounds, we use a DrawingML shape anchor with behindDoc="1"
+            const borderColor = element.borderColor || "CCCCCC";
+            const backgroundColor = element.backgroundColor || "FFFFFF";
+            const backgroundGradient = element.backgroundGradient;
+            const isCallout = element.variant === "callout";
+            const hasFullBorder = element.borderStyle === "full";
+            const hasNoBorder = element.borderStyle === "none";
+            // Callout label uses darker blue color (#1d4ed8)
+            const labelColor = isCallout ? "1D4ED8" : borderColor;
+            // Convert all inner content to paragraphs for the cell
+            const cellContent = [];
+            for (const innerElement of element.content) {
+                if (innerElement.type === "paragraph") {
+                    // Use the paragraph's own color if available (from CSS like .cta p { color: white; })
+                    // For bold paragraphs (like callout labels), fall back to label color
+                    const shouldApplyLabelColor = innerElement.bold && !innerElement.color;
+                    const paragraphColor = innerElement.color || (shouldApplyLabelColor ? labelColor : undefined);
+                    const textChildren = innerElement.runs
+                        ? inlineRunsToTextRuns(innerElement.runs)
+                        : [
+                            new TextRun({
+                                text: innerElement.text,
+                                bold: innerElement.bold,
+                                italics: innerElement.italic,
+                                color: paragraphColor,
+                            }),
+                        ];
+                    cellContent.push(new Paragraph({
+                        children: textChildren,
+                        spacing: {
+                            line: PARAGRAPH_SPACING.line,
+                            lineRule: PARAGRAPH_SPACING.lineRule,
+                            after: 120,
+                        }, // Space between elements inside the box
+                    }));
+                }
+                else if (innerElement.type === "list") {
+                    // Render list items inside the cell
+                    // GENERALIZED: Respect ordered vs unordered list type from HTML
+                    for (let i = 0; i < innerElement.items.length; i++) {
+                        const item = innerElement.items[i];
+                        // Determine content and whether ordered based on item type
+                        let content;
+                        let isOrdered;
+                        let level = 0;
+                        if (typeof item === "object" && "level" in item && "ordered" in item) {
+                            // ListItem with level info
+                            const listItem = item;
+                            content = listItem.content;
+                            isOrdered = listItem.ordered;
+                            level = listItem.level;
+                        }
+                        else {
+                            // Legacy format: string or InlineRun[]
+                            content = item;
+                            isOrdered = innerElement.ordered;
+                        }
+                        const textChildren = typeof content === "string"
+                            ? [new TextRun({ text: content })]
+                            : inlineRunsToTextRuns(content);
+                        // Use number or bullet based on list type (extracted from HTML)
+                        const prefix = isOrdered
+                            ? `${i + 1}.  ` // Numbered: "1.  ", "2.  ", etc.
+                            : "•  "; // Bullet: "•  "
+                        const prefixRun = new TextRun({ text: prefix });
+                        const children = [prefixRun, ...textChildren];
+                        // Indent based on level
+                        const leftIndent = 240 + (level * 240);
+                        cellContent.push(new Paragraph({
+                            children,
+                            indent: { left: leftIndent }, // Indent list items within cell
+                            spacing: {
+                                line: PARAGRAPH_SPACING.line,
+                                lineRule: PARAGRAPH_SPACING.lineRule,
+                                after: 100,
+                            }, // Space between list items
+                        }));
+                    }
+                }
+                else if (innerElement.type === "heading") {
+                    // Handle headings inside blockquotes
+                    // Use the heading's own color if available (from CSS like .key-takeaways h3 { color: ... })
+                    // Otherwise fall back to the blockquote's border color
+                    const headingColor = innerElement.color || borderColor;
+                    const textChildren = innerElement.runs
+                        ? inlineRunsToTextRuns(innerElement.runs)
+                        : [
+                            new TextRun({
+                                text: innerElement.text,
+                                color: headingColor,
+                            }),
+                        ];
+                    cellContent.push(new Paragraph({
+                        children: textChildren,
+                        heading: HEADING_LEVEL_MAP[innerElement.level],
+                        spacing: {
+                            line: HEADING_LINE_SPACING.line,
+                            lineRule: HEADING_LINE_SPACING.lineRule,
+                            after: 120,
+                        },
+                    }));
+                }
+                else if (innerElement.type === "table") {
+                    // GENERALIZED: Handle tables inside blockquotes (e.g., horizontal flex containers)
+                    // For tables with noBorders (horizontal flex), render as inline text within a paragraph
+                    // to maintain the horizontal layout without nested table complexity
+                    if (innerElement.noBorders && innerElement.rows.length === 1) {
+                        // Single-row borderless table = horizontal flex layout
+                        // Render as a single paragraph with tab-separated content
+                        const row = innerElement.rows[0];
+                        const children = [];
+                        for (let cellIndex = 0; cellIndex < row.length; cellIndex++) {
+                            const cell = row[cellIndex];
+                            if (typeof cell === "string") {
+                                children.push(new TextRun({ text: cell }));
+                            }
+                            else {
+                                // InlineRun array
+                                children.push(...inlineRunsToTextRuns(cell));
+                            }
+                            // Add tab separator between cells (except after last cell)
+                            if (cellIndex < row.length - 1) {
+                                children.push(new TextRun({ text: "\t" }));
+                            }
+                        }
+                        cellContent.push(new Paragraph({
+                            children,
+                            spacing: {
+                                line: PARAGRAPH_SPACING.line,
+                                lineRule: PARAGRAPH_SPACING.lineRule,
+                                after: 120,
+                            },
+                        }));
+                    }
+                    // For regular tables inside blockquotes, we could add full table rendering,
+                    // but for now we skip them as nested tables in Word can be problematic
+                }
+            }
+            // Create table to act as the box
+            // For gradient backgrounds, the DrawingML shape is already inserted in the first paragraph
+            // Cell margins provide the padding effect
+            // Cell shading provides the background color (solid fallback)
+            // Table/cell borders provide the border effect
+            // Build the table rows - always a single row
+            const tableRows = [];
+            const finalCellContent = cellContent.length > 0
+                ? cellContent
+                : [new Paragraph({ children: [] })];
+            // Single row with solid background (unless we have a gradient, which provides its own fill)
+            // When using gradient, don't apply shading - the gradient drawing covers the cell
+            // For gradient backgrounds, use the midpoint color as a solid fallback
+            // LibreOffice doesn't support gradient cell backgrounds, and VML shapes
+            // can't auto-size to content height. A solid color ensures correct height behavior.
+            let effectiveBackgroundColor = backgroundColor;
+            if (backgroundGradient && hasNoBorder) {
+                // Use the color at ~40% position (second stop in typical gradients)
+                const sortedStops = [...backgroundGradient.stops].sort((a, b) => a.position - b.position);
+                if (sortedStops.length >= 2) {
+                    effectiveBackgroundColor = sortedStops[1]?.color || sortedStops[0]?.color || backgroundColor;
+                }
+                else if (sortedStops.length === 1) {
+                    effectiveBackgroundColor = sortedStops[0]?.color || backgroundColor;
+                }
+            }
+            const cellShading = {
+                type: ShadingType.SOLID,
+                color: effectiveBackgroundColor,
+                fill: effectiveBackgroundColor,
+            };
+            tableRows.push(new TableRow({
+                children: [
+                    new DocxTableCell({
+                        children: finalCellContent,
+                        shading: cellShading,
+                        margins: {
+                            top: convertInchesToTwip(0.25), // ~18pt padding top
+                            bottom: convertInchesToTwip(0.25), // ~18pt padding bottom
+                            left: convertInchesToTwip(0.35), // ~25pt padding left (after border)
+                            right: convertInchesToTwip(0.35), // ~25pt padding right
+                        },
+                        borders: hasNoBorder
+                            ? {
+                                // No border - just background color (for title blocks, hero sections)
+                                top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                                bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                                left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                                right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                            }
+                            : hasFullBorder
+                                ? {
+                                    // Full border on all sides (for image placeholders, etc.)
+                                    top: { style: BorderStyle.SINGLE, size: 6, color: borderColor },
+                                    bottom: { style: BorderStyle.SINGLE, size: 6, color: borderColor },
+                                    left: { style: BorderStyle.SINGLE, size: 6, color: borderColor },
+                                    right: { style: BorderStyle.SINGLE, size: 6, color: borderColor },
+                                }
+                                : {
+                                    // Left accent border only (callout style)
+                                    top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                                    bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                                    left: { style: BorderStyle.SINGLE, size: 24, color: borderColor }, // Thick left border
+                                    right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                                },
+                    }),
+                ],
+            }));
+            const boxTable = new Table({
+                rows: tableRows,
+                width: {
+                    size: 100,
+                    type: WidthType.PERCENTAGE,
+                },
+                // Remove outer table borders - we only want the cell's left border
+                borders: {
+                    top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    insideHorizontal: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    insideVertical: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                },
+            });
+            // Add spacing paragraphs before and after the table to ensure proper separation
+            // from surrounding content (especially other tables)
+            const spacingBefore = new Paragraph({
+                children: [],
+                spacing: { before: 240, after: 0 }, // ~12pt spacing before the callout box
+            });
+            const spacingAfter = new Paragraph({
+                children: [],
+                spacing: { before: 0, after: 240 }, // ~12pt spacing after the callout box
+            });
+            return [spacingBefore, boxTable, spacingAfter];
+        }
+        case "chart-placeholder": {
+            // Render a placeholder for charts that can't be converted
+            const text = element.title ? `[Chart: ${element.title}]` : "[Chart]";
+            return [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text,
+                            italics: true,
+                            color: "808080",
+                        }),
+                    ],
+                    alignment: AlignmentType.CENTER,
+                    border: {
+                        top: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                        bottom: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                        left: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                        right: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                    },
+                    shading: {
+                        type: ShadingType.SOLID,
+                        color: "F9FAFB",
+                        fill: "F9FAFB",
+                    },
+                    spacing: {
+                        before: 200,
+                        after: 200,
+                    },
+                }),
+            ];
+        }
+        case "svg-chart": {
+            // SVG charts need to be converted to images before reaching here
+            // Fall back to placeholder if not converted
+            const text = element.title ? `[Chart: ${element.title}]` : "[Chart]";
+            return [
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text,
+                            italics: true,
+                            color: "808080",
+                        }),
+                    ],
+                    alignment: AlignmentType.CENTER,
+                    border: {
+                        top: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                        bottom: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                        left: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                        right: { style: BorderStyle.SINGLE, size: 1, color: "E5E7EB" },
+                    },
+                    shading: {
+                        type: ShadingType.SOLID,
+                        color: "F9FAFB",
+                        fill: "F9FAFB",
+                    },
+                    spacing: {
+                        before: 200,
+                        after: 200,
+                    },
+                }),
+            ];
+        }
+        case "chart-image": {
+            // Render chart as an embedded image
+            const { imageData } = element;
+            return [
+                new Paragraph({
+                    children: [
+                        new ImageRun({
+                            data: imageData.data,
+                            transformation: {
+                                width: imageData.width,
+                                height: imageData.height,
+                            },
+                            type: "png",
+                        }),
+                    ],
+                    alignment: AlignmentType.CENTER,
+                    spacing: {
+                        before: 200,
+                        after: 200,
+                    },
+                }),
+            ];
+        }
+        case "image": {
+            // Render external image as an embedded image
+            // Images must have their imageData populated by the fetch step before conversion
+            const { imageData, caption, alt } = element;
+            // If imageData is not available, render a placeholder with the alt text
+            if (!imageData) {
+                const placeholderText = alt || "[Image]";
+                return [
+                    new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: placeholderText,
+                                italics: true,
+                                color: "6B7280", // Gray text for placeholder
+                            }),
+                        ],
+                        alignment: AlignmentType.CENTER,
+                        spacing: {
+                            before: 200,
+                            after: caption ? 80 : 200,
+                        },
+                    }),
+                    ...(caption
+                        ? [
+                            new Paragraph({
+                                children: [
+                                    new TextRun({
+                                        text: caption,
+                                        italics: true,
+                                        size: 20, // 10pt
+                                        color: "6B7280",
+                                    }),
+                                ],
+                                alignment: AlignmentType.CENTER,
+                                spacing: {
+                                    after: 200,
+                                },
+                            }),
+                        ]
+                        : []),
+                ];
+            }
+            // Render the actual image
+            const paragraphs = [
+                new Paragraph({
+                    children: [
+                        new ImageRun({
+                            data: imageData.data,
+                            transformation: {
+                                width: imageData.width,
+                                height: imageData.height,
+                            },
+                            type: "png",
+                        }),
+                    ],
+                    alignment: AlignmentType.CENTER,
+                    spacing: {
+                        before: 200,
+                        after: caption ? 80 : 200,
+                    },
+                }),
+            ];
+            // Add caption if present
+            if (caption) {
+                paragraphs.push(new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: caption,
+                            italics: true,
+                            size: 20, // 10pt
+                            color: "6B7280",
+                        }),
+                    ],
+                    alignment: AlignmentType.CENTER,
+                    spacing: {
+                        after: 200,
+                    },
+                }));
+            }
+            return paragraphs;
+        }
+        case "horizontal-rule": {
+            // Render a horizontal rule as a paragraph with a border
+            const borderColor = element.color || "E5E7EB"; // Default to light gray
+            // Use spacingBefore/After if provided, default to 240 for standalone rules
+            const spacingBefore = element.spacingBefore !== undefined ? element.spacingBefore : 240;
+            const spacingAfter = element.spacingAfter !== undefined ? element.spacingAfter : 240;
+            // Use top or bottom border based on position (default to bottom for standalone HR)
+            const borderPosition = element.borderPosition || "bottom";
+            const border = borderPosition === "top"
+                ? { top: { style: BorderStyle.SINGLE, size: 6, color: borderColor } }
+                : { bottom: { style: BorderStyle.SINGLE, size: 6, color: borderColor } };
+            return [
+                new Paragraph({
+                    children: [],
+                    border,
+                    spacing: {
+                        before: spacingBefore,
+                        after: spacingAfter,
+                    },
+                }),
+            ];
+        }
+        case "stats-grid": {
+            // Render stats grid as a table with multiple columns
+            // Each stat card becomes a cell with value (large, colored), label (muted), and optional change text (trend indicator)
+            const { cards } = element;
+            if (cards.length === 0)
+                return [];
+            // Create a single-row table with one cell per card
+            const tableCells = cards.map((card) => {
+                // Cell content: value paragraph + label paragraph + optional change paragraph
+                const cellContent = [
+                    new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: card.value,
+                                bold: true,
+                                size: 36, // Large font for stat value (18pt)
+                                color: card.valueColor || "2563EB", // Blue default
+                            }),
+                        ],
+                        alignment: AlignmentType.CENTER,
+                        spacing: { after: 80 },
+                    }),
+                    new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: card.label,
+                                size: 20, // Smaller font for label (10pt)
+                                color: card.labelColor || "6B7280", // Gray default
+                            }),
+                        ],
+                        alignment: AlignmentType.CENTER,
+                        spacing: { after: card.change ? 60 : 0 },
+                    }),
+                ];
+                // Add change text if present (e.g., "↑ 8% vs Q4 2024")
+                if (card.change) {
+                    cellContent.push(new Paragraph({
+                        children: [
+                            new TextRun({
+                                text: card.change,
+                                size: 16, // Even smaller font for change indicator (8pt)
+                                bold: true,
+                                color: card.changeColor || "10B981", // Green default for positive changes
+                            }),
+                        ],
+                        alignment: AlignmentType.CENTER,
+                    }));
+                }
+                return new DocxTableCell({
+                    children: cellContent,
+                    width: {
+                        size: Math.floor(100 / cards.length),
+                        type: WidthType.PERCENTAGE,
+                    },
+                    margins: {
+                        top: convertInchesToTwip(0.15),
+                        bottom: convertInchesToTwip(0.15),
+                        left: convertInchesToTwip(0.1),
+                        right: convertInchesToTwip(0.1),
+                    },
+                    shading: card.backgroundColor ? {
+                        type: ShadingType.SOLID,
+                        color: card.backgroundColor,
+                        fill: card.backgroundColor,
+                    } : undefined,
+                    borders: card.borderColor ? {
+                        top: { style: BorderStyle.SINGLE, size: 4, color: card.borderColor },
+                        bottom: { style: BorderStyle.SINGLE, size: 4, color: card.borderColor },
+                        left: { style: BorderStyle.SINGLE, size: 4, color: card.borderColor },
+                        right: { style: BorderStyle.SINGLE, size: 4, color: card.borderColor },
+                    } : {
+                        top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                        bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                        left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                        right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    },
+                });
+            });
+            const statsTable = new Table({
+                rows: [
+                    new TableRow({
+                        children: tableCells,
+                    }),
+                ],
+                width: {
+                    size: 100,
+                    type: WidthType.PERCENTAGE,
+                },
+                borders: {
+                    top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    insideHorizontal: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    insideVertical: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                },
+            });
+            // Add spacing paragraphs before and after the stats grid to ensure proper separation
+            // from surrounding content (especially other tables like blockquotes)
+            const spacingBefore = new Paragraph({
+                children: [],
+                spacing: { before: 240, after: 0 }, // ~12pt spacing before the stats grid
+            });
+            const spacingAfter = new Paragraph({
+                children: [],
+                spacing: { before: 0, after: 240 }, // ~12pt spacing after the stats grid
+            });
+            return [spacingBefore, statsTable, spacingAfter];
+        }
+        case "two-column-layout": {
+            // Render two-column layout as a table with sidebar and main content columns
+            const { sidebar, main } = element;
+            const sidebarWidth = sidebar.widthPercent || 25;
+            const mainWidth = 100 - sidebarWidth;
+            // Convert sidebar content to DOCX elements
+            const sidebarContent = [];
+            for (const el of sidebar.content) {
+                // Apply sidebar text color to elements that don't have their own color
+                if (el.type === "heading" && !el.color && sidebar.textColor) {
+                    el.color = sidebar.textColor;
+                }
+                else if (el.type === "paragraph" && !el.color && sidebar.textColor) {
+                    el.color = sidebar.textColor;
+                }
+                sidebarContent.push(...convertElementToDocx(el));
+            }
+            // Convert main content to DOCX elements
+            const mainContent = [];
+            for (const el of main.content) {
+                mainContent.push(...convertElementToDocx(el));
+            }
+            // Create sidebar cell with background color
+            const sidebarCell = new DocxTableCell({
+                children: sidebarContent.length > 0 ? sidebarContent : [new Paragraph({ children: [] })],
+                width: {
+                    size: sidebarWidth,
+                    type: WidthType.PERCENTAGE,
+                },
+                shading: sidebar.backgroundColor ? {
+                    type: ShadingType.SOLID,
+                    color: sidebar.backgroundColor,
+                    fill: sidebar.backgroundColor,
+                } : undefined,
+                margins: {
+                    top: convertInchesToTwip(0.25),
+                    bottom: convertInchesToTwip(0.25),
+                    left: convertInchesToTwip(0.2),
+                    right: convertInchesToTwip(0.2),
+                },
+                borders: {
+                    top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                },
+            });
+            // Create main content cell
+            const mainCell = new DocxTableCell({
+                children: mainContent.length > 0 ? mainContent : [new Paragraph({ children: [] })],
+                width: {
+                    size: mainWidth,
+                    type: WidthType.PERCENTAGE,
+                },
+                margins: {
+                    top: convertInchesToTwip(0.25),
+                    bottom: convertInchesToTwip(0.25),
+                    left: convertInchesToTwip(0.3),
+                    right: convertInchesToTwip(0.2),
+                },
+                borders: {
+                    top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                },
+            });
+            // Create the two-column table
+            const twoColumnTable = new Table({
+                rows: [
+                    new TableRow({
+                        children: [sidebarCell, mainCell],
+                    }),
+                ],
+                width: {
+                    size: 100,
+                    type: WidthType.PERCENTAGE,
+                },
+                borders: {
+                    top: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    bottom: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    left: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    right: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    insideHorizontal: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                    insideVertical: { style: BorderStyle.NIL, size: 0, color: "FFFFFF" },
+                },
+            });
+            return [twoColumnTable];
+        }
+        default:
+            return [];
+    }
+}
+//# sourceMappingURL=convert.js.map