docgen-utils 1.0.5

package/dist/packages/docs/import-docx.js

@@ -0,0 +1,2299 @@
+/**
+ * DOCX Import: Parses a DOCX file (ArrayBuffer) into HTML string.
+ * Modeled after slides/import-pptx.ts
+ *
+ * Usage: const html = await importDocx(arrayBuffer);
+ */
+import JSZip from "jszip";
+// ============================================================================
+// Constants
+// ============================================================================
+// Twips to pixels: 1 inch = 1440 twips, 96 DPI
+const TWIPS_PER_PX = 1440 / 96;
+// EMU (English Metric Units) to pixels: 1 inch = 914400 EMU, 96 DPI
+const EMU_PER_PX = 914400 / 96;
+// Half-points to points
+const HALF_POINTS_TO_PT = 0.5;
+// ============================================================================
+// Utility Functions
+// ============================================================================
+function twipsToPx(twips) {
+    return twips / TWIPS_PER_PX;
+}
+function emuToPx(emu) {
+    return emu / EMU_PER_PX;
+}
+function halfPointsToPt(halfPts) {
+    return halfPts * HALF_POINTS_TO_PT;
+}
+function findChild(parent, localName) {
+    for (let i = 0; i < parent.children.length; i++) {
+        if (parent.children[i].localName === localName) {
+            return parent.children[i];
+        }
+    }
+    return null;
+}
+function findChildren(parent, localName) {
+    const result = [];
+    for (let i = 0; i < parent.children.length; i++) {
+        if (parent.children[i].localName === localName) {
+            result.push(parent.children[i]);
+        }
+    }
+    return result;
+}
+function findDescendant(parent, localName) {
+    for (let i = 0; i < parent.children.length; i++) {
+        const child = parent.children[i];
+        if (child.localName === localName) {
+            return child;
+        }
+        const found = findDescendant(child, localName);
+        if (found)
+            return found;
+    }
+    return null;
+}
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function resolveThemeColor(colorRef, themeColors) {
+    // Map theme color names to our stored keys
+    const themeMap = {
+        dk1: "dk1",
+        dk2: "dk2",
+        lt1: "lt1",
+        lt2: "lt2",
+        accent1: "accent1",
+        accent2: "accent2",
+        accent3: "accent3",
+        accent4: "accent4",
+        accent5: "accent5",
+        accent6: "accent6",
+        hlink: "hlink",
+        folHlink: "folHlink",
+        // Additional common mappings
+        text1: "dk1",
+        text2: "dk2",
+        background1: "lt1",
+        background2: "lt2",
+        // Short form mappings (bg1/bg2 = background1/background2, tx1/tx2 = text1/text2)
+        bg1: "lt1",
+        bg2: "lt2",
+        tx1: "dk1",
+        tx2: "dk2",
+    };
+    const key = themeMap[colorRef] ?? colorRef;
+    return themeColors.get(key);
+}
+function resolveColor(parent, themeColors) {
+    // Check for direct color value
+    const colorAttr = parent.getAttribute("w:val");
+    if (colorAttr && colorAttr !== "auto" && /^[0-9A-Fa-f]{6}$/.test(colorAttr)) {
+        return "#" + colorAttr;
+    }
+    // Check for theme color
+    const themeColor = parent.getAttribute("w:themeColor");
+    if (themeColor) {
+        const resolved = resolveThemeColor(themeColor, themeColors);
+        if (resolved)
+            return resolved;
+    }
+    return undefined;
+}
+function resolveThemeFont(fontRef, themeFonts) {
+    if (fontRef === "majorHAnsi" || fontRef === "majorAscii") {
+        return themeFonts.major;
+    }
+    if (fontRef === "minorHAnsi" || fontRef === "minorAscii") {
+        return themeFonts.minor;
+    }
+    return undefined;
+}
+function getBorderStyleCss(style) {
+    const styleMap = {
+        single: "solid",
+        double: "double",
+        dotted: "dotted",
+        dashed: "dashed",
+        dashSmallGap: "dashed",
+        dotDash: "dashed",
+        dotDotDash: "dotted",
+        triple: "double",
+        thick: "solid",
+        nil: "none",
+        none: "none",
+    };
+    return styleMap[style] ?? "solid";
+}
+// ============================================================================
+// Parsing Functions
+// ============================================================================
+function parseThemeColors(themeDoc) {
+    const colors = new Map();
+    const clrScheme = themeDoc.getElementsByTagName("a:clrScheme")[0];
+    if (!clrScheme)
+        return colors;
+    const colorNames = [
+        "dk1", "dk2", "lt1", "lt2",
+        "accent1", "accent2", "accent3", "accent4", "accent5", "accent6",
+        "hlink", "folHlink"
+    ];
+    for (const name of colorNames) {
+        const el = findChild(clrScheme, name);
+        if (!el)
+            continue;
+        const srgbClr = findChild(el, "srgbClr");
+        if (srgbClr) {
+            const val = srgbClr.getAttribute("val");
+            if (val)
+                colors.set(name, "#" + val);
+            continue;
+        }
+        const sysClr = findChild(el, "sysClr");
+        if (sysClr) {
+            const lastClr = sysClr.getAttribute("lastClr");
+            if (lastClr)
+                colors.set(name, "#" + lastClr);
+        }
+    }
+    return colors;
+}
+function parseThemeFonts(themeDoc) {
+    const fonts = { major: "Calibri", minor: "Calibri" };
+    const fontScheme = themeDoc.getElementsByTagName("a:fontScheme")[0];
+    if (!fontScheme)
+        return fonts;
+    const majorFont = findChild(fontScheme, "majorFont");
+    if (majorFont) {
+        const latin = findChild(majorFont, "latin");
+        if (latin) {
+            const typeface = latin.getAttribute("typeface");
+            if (typeface)
+                fonts.major = typeface;
+        }
+    }
+    const minorFont = findChild(fontScheme, "minorFont");
+    if (minorFont) {
+        const latin = findChild(minorFont, "latin");
+        if (latin) {
+            const typeface = latin.getAttribute("typeface");
+            if (typeface)
+                fonts.minor = typeface;
+        }
+    }
+    return fonts;
+}
+function parseStyles(stylesDoc, themeColors, themeFonts) {
+    const styles = new Map();
+    const defaults = {};
+    // Parse document defaults (w:docDefaults)
+    const docDefaults = stylesDoc.getElementsByTagName("w:docDefaults")[0];
+    if (docDefaults) {
+        // Parse default run properties
+        const rPrDefault = findChild(docDefaults, "rPrDefault");
+        if (rPrDefault) {
+            const rPr = findChild(rPrDefault, "rPr");
+            if (rPr) {
+                defaults.rPr = parseRunProps(rPr, themeColors, themeFonts);
+            }
+        }
+        // Parse default paragraph properties
+        const pPrDefault = findChild(docDefaults, "pPrDefault");
+        if (pPrDefault) {
+            const pPr = findChild(pPrDefault, "pPr");
+            if (pPr) {
+                defaults.pPr = parseParagraphProps(pPr);
+            }
+        }
+    }
+    const styleEls = stylesDoc.getElementsByTagName("w:style");
+    for (let i = 0; i < styleEls.length; i++) {
+        const styleEl = styleEls[i];
+        const styleId = styleEl.getAttribute("w:styleId");
+        if (!styleId)
+            continue;
+        const basedOnEl = findChild(styleEl, "basedOn");
+        const basedOn = basedOnEl?.getAttribute("w:val") ?? undefined;
+        const nameEl = findChild(styleEl, "name");
+        const name = nameEl?.getAttribute("w:val") ?? undefined;
+        const pPrEl = findChild(styleEl, "pPr");
+        const rPrEl = findChild(styleEl, "rPr");
+        const pPr = pPrEl ? parseParagraphProps(pPrEl) : undefined;
+        const rPr = rPrEl ? parseRunProps(rPrEl, themeColors, themeFonts) : undefined;
+        styles.set(styleId, { basedOn, pPr, rPr, name });
+    }
+    return { styles, defaults };
+}
+/**
+ * Parse section properties from sectPr element.
+ * Contains page size, margins, columns, etc.
+ */
+function parseSectionProps(sectPr) {
+    const props = {};
+    if (!sectPr)
+        return props;
+    // Page size
+    const pgSz = findChild(sectPr, "pgSz");
+    if (pgSz) {
+        const w = pgSz.getAttribute("w:w");
+        const h = pgSz.getAttribute("w:h");
+        if (w)
+            props.pageWidth = parseInt(w, 10);
+        if (h)
+            props.pageHeight = parseInt(h, 10);
+    }
+    // Page margins
+    const pgMar = findChild(sectPr, "pgMar");
+    if (pgMar) {
+        const top = pgMar.getAttribute("w:top");
+        const right = pgMar.getAttribute("w:right");
+        const bottom = pgMar.getAttribute("w:bottom");
+        const left = pgMar.getAttribute("w:left");
+        if (top)
+            props.marginTop = parseInt(top, 10);
+        if (right)
+            props.marginRight = parseInt(right, 10);
+        if (bottom)
+            props.marginBottom = parseInt(bottom, 10);
+        if (left)
+            props.marginLeft = parseInt(left, 10);
+    }
+    // Columns
+    const cols = findChild(sectPr, "cols");
+    if (cols) {
+        const num = cols.getAttribute("w:num");
+        const space = cols.getAttribute("w:space");
+        if (num)
+            props.columns = parseInt(num, 10);
+        if (space)
+            props.columnSpace = parseInt(space, 10);
+    }
+    return props;
+}
+/**
+ * Parse positioned (anchored) elements from a drawing element.
+ * These are shapes, images, or textboxes with absolute/relative positioning.
+ */
+function parsePositionedElement(drawing, themeColors, themeFonts) {
+    const anchor = findDescendant(drawing, "anchor");
+    if (!anchor)
+        return null;
+    // Get positioning
+    const positionH = findChild(anchor, "positionH");
+    const positionV = findChild(anchor, "positionV");
+    const relativeFromH = positionH?.getAttribute("relativeFrom");
+    const relativeFromV = positionV?.getAttribute("relativeFrom");
+    // Check for alignment or offset
+    let posH = "absolute";
+    let posV = "absolute";
+    let offsetX = 0;
+    let offsetY = 0;
+    if (positionH) {
+        const align = findChild(positionH, "align");
+        const posOffset = findChild(positionH, "posOffset");
+        if (align) {
+            const alignVal = align.textContent?.trim();
+            if (alignVal === "left" || alignVal === "center" || alignVal === "right") {
+                posH = alignVal;
+            }
+        }
+        else if (posOffset) {
+            offsetX = parseInt(posOffset.textContent ?? "0", 10);
+        }
+    }
+    if (positionV) {
+        const align = findChild(positionV, "align");
+        const posOffset = findChild(positionV, "posOffset");
+        if (align) {
+            const alignVal = align.textContent?.trim();
+            if (alignVal === "top" || alignVal === "center" || alignVal === "bottom") {
+                posV = alignVal;
+            }
+        }
+        else if (posOffset) {
+            offsetY = parseInt(posOffset.textContent ?? "0", 10);
+        }
+    }
+    // Get extent (size)
+    const extent = findChild(anchor, "extent");
+    const cx = parseInt(extent?.getAttribute("cx") ?? "0", 10);
+    const cy = parseInt(extent?.getAttribute("cy") ?? "0", 10);
+    // Check if behind document
+    const behindDoc = anchor.getAttribute("behindDoc") === "1";
+    // Check wrap type
+    let wrapType = "none";
+    if (findChild(anchor, "wrapTopAndBottom")) {
+        wrapType = "topAndBottom";
+    }
+    else if (findChild(anchor, "wrapSquare")) {
+        wrapType = "square";
+    }
+    else if (findChild(anchor, "wrapTight")) {
+        wrapType = "tight";
+    }
+    // Look for shape with fill color
+    const wsp = findDescendant(drawing, "wsp");
+    let fillColor;
+    let gradientFill;
+    let elementType = "shape";
+    let shapeType;
+    let shapeAdjust;
+    let textElements;
+    if (wsp) {
+        const spPr = findChild(wsp, "spPr");
+        if (spPr) {
+            // Get preset geometry type
+            const prstGeom = findChild(spPr, "prstGeom");
+            if (prstGeom) {
+                shapeType = prstGeom.getAttribute("prst") ?? undefined;
+                // Get adjustment value if present
+                const avLst = findChild(prstGeom, "avLst");
+                if (avLst) {
+                    const gd = findChild(avLst, "gd");
+                    if (gd) {
+                        const fmla = gd.getAttribute("fmla");
+                        if (fmla) {
+                            // Parse "val XXXX" formula
+                            const match = fmla.match(/val\s+(\d+)/);
+                            if (match) {
+                                // Value is in 1/100000ths (so 2604 = 2.604%)
+                                shapeAdjust = parseInt(match[1], 10) / 100000;
+                            }
+                        }
+                    }
+                }
+            }
+            // Check for gradient fill
+            const gradFill = findChild(spPr, "gradFill");
+            if (gradFill) {
+                const gsLst = findChild(gradFill, "gsLst");
+                if (gsLst) {
+                    const stops = [];
+                    const gsElements = findChildren(gsLst, "gs");
+                    for (const gs of gsElements) {
+                        const pos = parseInt(gs.getAttribute("pos") ?? "0", 10) / 1000; // Convert from 100000ths to percentage
+                        let color = "#000000";
+                        const srgbClr = findChild(gs, "srgbClr");
+                        const schemeClr = findChild(gs, "schemeClr");
+                        if (srgbClr) {
+                            color = "#" + (srgbClr.getAttribute("val") ?? "000000");
+                        }
+                        else if (schemeClr) {
+                            const colorName = schemeClr.getAttribute("val");
+                            if (colorName) {
+                                color = resolveThemeColor(colorName, themeColors) ?? "#000000";
+                            }
+                        }
+                        stops.push({ position: pos, color });
+                    }
+                    // Check gradient direction
+                    const lin = findChild(gradFill, "lin");
+                    let angle = 180; // Default to vertical (top to bottom)
+                    if (lin) {
+                        // Angle is in 60000ths of a degree
+                        const angVal = parseInt(lin.getAttribute("ang") ?? "0", 10);
+                        angle = Math.round(angVal / 60000);
+                    }
+                    if (stops.length >= 2) {
+                        gradientFill = { type: "linear", angle, stops };
+                    }
+                }
+            }
+            else {
+                // Check for solid fill
+                const solidFill = findChild(spPr, "solidFill");
+                if (solidFill) {
+                    const srgbClr = findChild(solidFill, "srgbClr");
+                    if (srgbClr) {
+                        fillColor = "#" + (srgbClr.getAttribute("val") ?? "000000");
+                    }
+                    else {
+                        // Check theme color
+                        const schemeClr = findChild(solidFill, "schemeClr");
+                        if (schemeClr) {
+                            const colorName = schemeClr.getAttribute("val");
+                            if (colorName) {
+                                fillColor = resolveThemeColor(colorName, themeColors);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Check for textbox and extract text content
+        const txbx = findDescendant(wsp, "txbx");
+        if (txbx) {
+            elementType = "textbox";
+            // Parse text content from txbxContent
+            const txbxContent = findDescendant(txbx, "txbxContent");
+            if (txbxContent) {
+                textElements = [];
+                const paragraphs = txbxContent.getElementsByTagName("w:p");
+                for (let i = 0; i < paragraphs.length; i++) {
+                    const para = parseParagraph(paragraphs[i], themeColors, themeFonts);
+                    if (para.runs.length > 0 || para.props.styleId) {
+                        textElements.push(para);
+                    }
+                }
+            }
+        }
+    }
+    else {
+        // Check if it's an image
+        const blip = findDescendant(drawing, "blip");
+        if (blip) {
+            elementType = "image";
+        }
+    }
+    // For images, extract the rId from the blip element and transform/effect properties
+    let imageRId;
+    let imageRotation;
+    let imageFlipH;
+    let imageFlipV;
+    let imageShadow;
+    let imageBorder;
+    if (elementType === "image" || !wsp) {
+        const blip = findDescendant(drawing, "blip");
+        if (blip) {
+            // r:embed is the relationship ID for the image
+            imageRId = blip.getAttribute("r:embed") ?? blip.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "embed") ?? undefined;
+            if (imageRId) {
+                elementType = "image";
+                // Look for pic:spPr > a:xfrm for rotation and flip
+                const pic = findDescendant(drawing, "pic");
+                const picSpPr = pic ? findChild(pic, "spPr") : null;
+                const xfrm = picSpPr ? findChild(picSpPr, "xfrm") : null;
+                if (xfrm) {
+                    // Rotation is in EMUs (60,000 per degree)
+                    const rotAttr = xfrm.getAttribute("rot");
+                    if (rotAttr) {
+                        const rotEmu = parseInt(rotAttr, 10);
+                        // Convert EMUs to degrees (60000 EMUs = 1 degree)
+                        imageRotation = rotEmu / 60000;
+                        // Normalize negative rotations (values like 21253759 = 354.2° = -5.8°)
+                        if (imageRotation > 180) {
+                            imageRotation = imageRotation - 360;
+                        }
+                    }
+                    // Horizontal and vertical flip
+                    imageFlipH = xfrm.getAttribute("flipH") === "1" || undefined;
+                    imageFlipV = xfrm.getAttribute("flipV") === "1" || undefined;
+                }
+                // Parse shadow from a:effectLst > a:outerShdw
+                const effectLst = picSpPr ? findDescendant(picSpPr, "effectLst") : null;
+                if (effectLst) {
+                    const outerShdw = findChild(effectLst, "outerShdw");
+                    if (outerShdw) {
+                        const blurRad = parseInt(outerShdw.getAttribute("blurRad") ?? "0", 10);
+                        const distAttr = outerShdw.getAttribute("dist");
+                        const dirAttr = outerShdw.getAttribute("dir");
+                        // Get shadow color and alpha
+                        let shadowColor = "000000"; // default black
+                        let shadowAlpha = 100;
+                        // Check for prstClr (preset color like "black")
+                        const prstClr = findChild(outerShdw, "prstClr");
+                        if (prstClr) {
+                            const valAttr = prstClr.getAttribute("val");
+                            if (valAttr === "black")
+                                shadowColor = "000000";
+                            else if (valAttr === "white")
+                                shadowColor = "FFFFFF";
+                            // Check for alpha inside prstClr
+                            const alphaEl = findChild(prstClr, "alpha");
+                            if (alphaEl) {
+                                const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
+                                shadowAlpha = Math.round(alphaVal / 1000); // val is in thousandths (40000 = 40%)
+                            }
+                        }
+                        // Check for srgbClr (explicit RGB color)
+                        const srgbClr = findChild(outerShdw, "srgbClr");
+                        if (srgbClr) {
+                            shadowColor = srgbClr.getAttribute("val") ?? "000000";
+                            const alphaEl = findChild(srgbClr, "alpha");
+                            if (alphaEl) {
+                                const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
+                                shadowAlpha = Math.round(alphaVal / 1000);
+                            }
+                        }
+                        // Calculate offset from distance and direction
+                        let shadowOffsetX = 0;
+                        let shadowOffsetY = 0;
+                        if (distAttr && dirAttr) {
+                            const dist = parseInt(distAttr, 10);
+                            const dir = parseInt(dirAttr, 10) / 60000; // Convert EMUs to degrees
+                            const dirRad = (dir * Math.PI) / 180;
+                            shadowOffsetX = Math.round(dist * Math.cos(dirRad));
+                            shadowOffsetY = Math.round(dist * Math.sin(dirRad));
+                        }
+                        imageShadow = {
+                            blurRadius: blurRad,
+                            color: shadowColor,
+                            alpha: shadowAlpha,
+                            offsetX: shadowOffsetX,
+                            offsetY: shadowOffsetY,
+                        };
+                    }
+                }
+                // Parse border from a:ln
+                if (picSpPr) {
+                    const ln = findChild(picSpPr, "ln");
+                    if (ln) {
+                        const widthAttr = ln.getAttribute("w");
+                        const borderWidth = widthAttr ? parseInt(widthAttr, 10) : 0;
+                        if (borderWidth > 0) {
+                            let borderColor;
+                            // Check for solidFill
+                            const solidFill = findChild(ln, "solidFill");
+                            if (solidFill) {
+                                // Check for srgbClr
+                                const srgbClr = findChild(solidFill, "srgbClr");
+                                if (srgbClr) {
+                                    borderColor = srgbClr.getAttribute("val") ?? undefined;
+                                }
+                                // Check for sysClr (system color like "window" = white)
+                                const sysClr = findChild(solidFill, "sysClr");
+                                if (sysClr) {
+                                    const lastClr = sysClr.getAttribute("lastClr");
+                                    if (lastClr) {
+                                        borderColor = lastClr;
+                                    }
+                                    else {
+                                        const valAttr = sysClr.getAttribute("val");
+                                        if (valAttr === "window")
+                                            borderColor = "FFFFFF";
+                                        else if (valAttr === "windowText")
+                                            borderColor = "000000";
+                                    }
+                                }
+                                // Check for schemeClr (theme color reference like "bg1")
+                                const schemeClr = findChild(solidFill, "schemeClr");
+                                if (schemeClr) {
+                                    const colorName = schemeClr.getAttribute("val");
+                                    if (colorName) {
+                                        const resolved = resolveThemeColor(colorName, themeColors);
+                                        if (resolved) {
+                                            // Remove # prefix if present
+                                            borderColor = resolved.startsWith("#") ? resolved.substring(1) : resolved;
+                                        }
+                                    }
+                                }
+                            }
+                            // Only set border if we found a valid color
+                            if (borderColor) {
+                                imageBorder = {
+                                    width: borderWidth,
+                                    color: borderColor,
+                                };
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return {
+        type: elementType,
+        shapeType,
+        shapeAdjust,
+        positionH: posH,
+        positionV: posV,
+        offsetX,
+        offsetY,
+        width: cx,
+        height: cy,
+        relativeFromH,
+        relativeFromV,
+        behindDoc,
+        fillColor,
+        gradientFill,
+        textElements,
+        wrapType,
+        imageRId,
+        imageRotation,
+        imageFlipH,
+        imageFlipV,
+        imageShadow,
+        imageBorder,
+    };
+}
+/**
+ * Parse header or footer XML content.
+ */
+function parseHeaderFooter(doc, type, themeColors, themeFonts) {
+    const result = {
+        type,
+        elements: [],
+        positionedElements: [],
+    };
+    const root = doc.getElementsByTagName(type === "header" ? "w:hdr" : "w:ftr")[0];
+    if (!root)
+        return result;
+    // Parse positioned elements (anchored drawings)
+    const drawings = root.getElementsByTagName("w:drawing");
+    for (let i = 0; i < drawings.length; i++) {
+        const positioned = parsePositionedElement(drawings[i], themeColors, themeFonts);
+        if (positioned) {
+            result.positionedElements.push(positioned);
+        }
+    }
+    // Parse regular paragraphs
+    const paragraphs = findChildren(root, "p");
+    for (const p of paragraphs) {
+        const para = parseParagraph(p, themeColors, themeFonts);
+        if (para.runs.length > 0) {
+            result.elements.push({ kind: "paragraph", data: para });
+        }
+    }
+    return result;
+}
+function parseNumbering(numberingDoc) {
+    const numbering = new Map();
+    if (!numberingDoc)
+        return numbering;
+    // Parse abstract numbering definitions
+    const abstractNums = new Map();
+    const abstractNumEls = numberingDoc.getElementsByTagName("w:abstractNum");
+    for (let i = 0; i < abstractNumEls.length; i++) {
+        const abstractNumEl = abstractNumEls[i];
+        const abstractNumId = parseInt(abstractNumEl.getAttribute("w:abstractNumId") ?? "0", 10);
+        const levels = new Map();
+        const lvlEls = findChildren(abstractNumEl, "lvl");
+        for (const lvlEl of lvlEls) {
+            const ilvl = parseInt(lvlEl.getAttribute("w:ilvl") ?? "0", 10);
+            const numFmtEl = findChild(lvlEl, "numFmt");
+            const lvlTextEl = findChild(lvlEl, "lvlText");
+            const numFmt = numFmtEl?.getAttribute("w:val") ?? "bullet";
+            const lvlText = lvlTextEl?.getAttribute("w:val") ?? "•";
+            levels.set(ilvl, { numFmt, lvlText });
+        }
+        abstractNums.set(abstractNumId, levels);
+    }
+    // Parse num definitions that reference abstract nums
+    const numEls = numberingDoc.getElementsByTagName("w:num");
+    for (let i = 0; i < numEls.length; i++) {
+        const numEl = numEls[i];
+        const numId = parseInt(numEl.getAttribute("w:numId") ?? "0", 10);
+        const abstractNumIdEl = findChild(numEl, "abstractNumId");
+        const abstractNumId = parseInt(abstractNumIdEl?.getAttribute("w:val") ?? "0", 10);
+        const levels = abstractNums.get(abstractNumId);
+        if (levels) {
+            numbering.set(numId, levels);
+        }
+    }
+    return numbering;
+}
+/**
+ * Parse paragraph borders from pBdr element.
+ * Note: These are simpler than table borders - no theme color support here.
+ */
+function parseParagraphBorders(pBdr) {
+    const borders = {};
+    const parseBorder = (el) => {
+        if (!el)
+            return undefined;
+        const style = el.getAttribute("w:val");
+        if (!style || style === "nil" || style === "none")
+            return undefined;
+        const size = parseInt(el.getAttribute("w:sz") ?? "4", 10);
+        let color = el.getAttribute("w:color") ?? "000000";
+        if (color === "auto")
+            color = "000000";
+        return {
+            style,
+            size: size / 8, // Convert from eighths of a point to points
+            color,
+        };
+    };
+    borders.top = parseBorder(findChild(pBdr, "top"));
+    borders.bottom = parseBorder(findChild(pBdr, "bottom"));
+    borders.left = parseBorder(findChild(pBdr, "left"));
+    borders.right = parseBorder(findChild(pBdr, "right"));
+    return borders;
+}
+function parseParagraphProps(pPr) {
+    const props = {};
+    const pStyle = findChild(pPr, "pStyle");
+    if (pStyle) {
+        props.styleId = pStyle.getAttribute("w:val") ?? undefined;
+    }
+    const jc = findChild(pPr, "jc");
+    if (jc) {
+        const val = jc.getAttribute("w:val");
+        if (val === "center")
+            props.alignment = "center";
+        else if (val === "right" || val === "end")
+            props.alignment = "right";
+        else if (val === "both" || val === "distribute")
+            props.alignment = "justify";
+        else
+            props.alignment = "left";
+    }
+    const ind = findChild(pPr, "ind");
+    if (ind) {
+        const left = ind.getAttribute("w:left");
+        if (left)
+            props.indentLeft = parseInt(left, 10);
+        const right = ind.getAttribute("w:right");
+        if (right)
+            props.indentRight = parseInt(right, 10);
+        const firstLine = ind.getAttribute("w:firstLine");
+        if (firstLine)
+            props.indentFirstLine = parseInt(firstLine, 10);
+        const hanging = ind.getAttribute("w:hanging");
+        if (hanging)
+            props.indentFirstLine = -parseInt(hanging, 10);
+    }
+    const spacing = findChild(pPr, "spacing");
+    if (spacing) {
+        const before = spacing.getAttribute("w:before");
+        if (before)
+            props.spacingBefore = parseInt(before, 10);
+        const after = spacing.getAttribute("w:after");
+        if (after)
+            props.spacingAfter = parseInt(after, 10);
+        const line = spacing.getAttribute("w:line");
+        if (line)
+            props.lineSpacing = parseInt(line, 10);
+    }
+    const numPr = findChild(pPr, "numPr");
+    if (numPr) {
+        const numIdEl = findChild(numPr, "numId");
+        const ilvlEl = findChild(numPr, "ilvl");
+        if (numIdEl) {
+            props.numId = parseInt(numIdEl.getAttribute("w:val") ?? "0", 10);
+        }
+        props.ilvl = parseInt(ilvlEl?.getAttribute("w:val") ?? "0", 10);
+    }
+    // Paragraph borders
+    const pBdr = findChild(pPr, "pBdr");
+    if (pBdr) {
+        props.borders = parseParagraphBorders(pBdr);
+    }
+    // Paragraph shading (background color)
+    const shd = findChild(pPr, "shd");
+    if (shd) {
+        const fill = shd.getAttribute("w:fill");
+        if (fill && fill !== "auto") {
+            props.shading = "#" + fill;
+        }
+    }
+    return props;
+}
+function parseRunProps(rPr, themeColors, themeFonts) {
+    const props = {};
+    // Bold
+    const b = findChild(rPr, "b");
+    if (b) {
+        const val = b.getAttribute("w:val");
+        props.bold = val !== "0" && val !== "false";
+    }
+    // Italic
+    const i = findChild(rPr, "i");
+    if (i) {
+        const val = i.getAttribute("w:val");
+        props.italic = val !== "0" && val !== "false";
+    }
+    // Underline
+    const u = findChild(rPr, "u");
+    if (u) {
+        const val = u.getAttribute("w:val");
+        props.underline = val !== "none" && val !== undefined;
+    }
+    // Strikethrough
+    const strike = findChild(rPr, "strike");
+    if (strike) {
+        const val = strike.getAttribute("w:val");
+        props.strike = val !== "0" && val !== "false";
+    }
+    // Color
+    const color = findChild(rPr, "color");
+    if (color) {
+        props.color = resolveColor(color, themeColors);
+    }
+    // Font size (in half-points, convert to points)
+    const sz = findChild(rPr, "sz");
+    if (sz) {
+        const val = sz.getAttribute("w:val");
+        if (val)
+            props.fontSize = halfPointsToPt(parseInt(val, 10));
+    }
+    // Font family
+    const rFonts = findChild(rPr, "rFonts");
+    if (rFonts) {
+        // Try direct font first
+        const ascii = rFonts.getAttribute("w:ascii") ?? rFonts.getAttribute("w:hAnsi");
+        if (ascii) {
+            props.fontFamily = ascii;
+        }
+        else {
+            // Try theme font
+            const asciiTheme = rFonts.getAttribute("w:asciiTheme") ?? rFonts.getAttribute("w:hAnsiTheme");
+            if (asciiTheme) {
+                const resolved = resolveThemeFont(asciiTheme, themeFonts);
+                if (resolved)
+                    props.fontFamily = resolved;
+            }
+        }
+    }
+    // Highlight
+    const highlight = findChild(rPr, "highlight");
+    if (highlight) {
+        const val = highlight.getAttribute("w:val");
+        if (val)
+            props.highlight = val;
+    }
+    // Shading (background color)
+    const shd = findChild(rPr, "shd");
+    if (shd) {
+        const fill = shd.getAttribute("w:fill");
+        if (fill && fill !== "auto") {
+            props.highlight = "#" + fill;
+        }
+    }
+    // Vertical alignment (superscript/subscript)
+    const vertAlign = findChild(rPr, "vertAlign");
+    if (vertAlign) {
+        const val = vertAlign.getAttribute("w:val");
+        if (val === "superscript")
+            props.vertAlign = "superscript";
+        else if (val === "subscript")
+            props.vertAlign = "subscript";
+    }
+    // All caps text transform
+    const caps = findChild(rPr, "caps");
+    if (caps) {
+        const val = caps.getAttribute("w:val");
+        props.caps = val !== "0" && val !== "false";
+    }
+    // Small caps text transform
+    const smallCaps = findChild(rPr, "smallCaps");
+    if (smallCaps) {
+        const val = smallCaps.getAttribute("w:val");
+        props.smallCaps = val !== "0" && val !== "false";
+    }
+    return props;
+}
+function parseTextRun(r, themeColors, themeFonts) {
+    const rPr = findChild(r, "rPr");
+    const props = rPr ? parseRunProps(rPr, themeColors, themeFonts) : {};
+    // Collect all text elements
+    const textParts = [];
+    let image;
+    for (let i = 0; i < r.children.length; i++) {
+        const child = r.children[i];
+        if (child.localName === "t") {
+            textParts.push(child.textContent ?? "");
+        }
+        else if (child.localName === "tab") {
+            textParts.push("\t");
+        }
+        else if (child.localName === "br") {
+            textParts.push("\n");
+        }
+        else if (child.localName === "cr") {
+            textParts.push("\n");
+        }
+        else if (child.localName === "drawing") {
+            // Parse inline drawing (image) - skip anchored drawings which are handled separately
+            const drawingEl = parseDrawing(child, themeColors, true);
+            if (drawingEl?.type === "image") {
+                image = drawingEl.data;
+            }
+        }
+    }
+    const text = textParts.join("");
+    // Return run if it has text or an image
+    if (!text && !image)
+        return null;
+    return { text, props, image };
+}
+function parseParagraph(p, themeColors, themeFonts) {
+    const pPr = findChild(p, "pPr");
+    const props = pPr ? parseParagraphProps(pPr) : {};
+    const runs = [];
+    // Process all children including SDT content
+    const processElement = (el) => {
+        for (let i = 0; i < el.children.length; i++) {
+            const child = el.children[i];
+            if (child.localName === "r") {
+                const run = parseTextRun(child, themeColors, themeFonts);
+                if (run)
+                    runs.push(run);
+            }
+            else if (child.localName === "sdt") {
+                // Structured document tag - process its content
+                const sdtContent = findChild(child, "sdtContent");
+                if (sdtContent) {
+                    processElement(sdtContent);
+                }
+            }
+            else if (child.localName === "hyperlink") {
+                // Process hyperlink runs
+                processElement(child);
+            }
+            else if (child.localName === "bookmarkStart" || child.localName === "bookmarkEnd") {
+                // Skip bookmarks
+            }
+        }
+    };
+    processElement(p);
+    return { runs, props };
+}
+function parseTableCell(tc, themeColors, themeFonts) {
+    const cell = { paragraphs: [] };
+    const tcPr = findChild(tc, "tcPr");
+    if (tcPr) {
+        // Grid span
+        const gridSpan = findChild(tcPr, "gridSpan");
+        if (gridSpan) {
+            cell.gridSpan = parseInt(gridSpan.getAttribute("w:val") ?? "1", 10);
+        }
+        // Vertical merge
+        const vMerge = findChild(tcPr, "vMerge");
+        if (vMerge) {
+            const val = vMerge.getAttribute("w:val");
+            cell.vMerge = val === "restart" ? "restart" : "continue";
+        }
+        // Cell width
+        const tcW = findChild(tcPr, "tcW");
+        if (tcW) {
+            const w = tcW.getAttribute("w:w");
+            if (w)
+                cell.width = parseInt(w, 10);
+        }
+        // Shading/background
+        const shd = findChild(tcPr, "shd");
+        if (shd) {
+            const fill = shd.getAttribute("w:fill");
+            if (fill && fill !== "auto") {
+                cell.shading = "#" + fill;
+            }
+        }
+        // Cell borders
+        const tcBorders = findChild(tcPr, "tcBorders");
+        if (tcBorders) {
+            cell.borders = parseBorders(tcBorders, themeColors);
+        }
+        // Vertical alignment
+        const vAlign = findChild(tcPr, "vAlign");
+        if (vAlign) {
+            const val = vAlign.getAttribute("w:val");
+            if (val === "center" || val === "bottom" || val === "top") {
+                cell.vAlign = val;
+            }
+        }
+    }
+    // Parse paragraphs in cell (including those inside SDT elements)
+    const collectParagraphs = (parent) => {
+        const result = [];
+        for (let i = 0; i < parent.children.length; i++) {
+            const child = parent.children[i];
+            if (child.localName === "p") {
+                result.push(child);
+            }
+            else if (child.localName === "sdt") {
+                // Structured document tag - look inside sdtContent for paragraphs
+                const sdtContent = findChild(child, "sdtContent");
+                if (sdtContent) {
+                    result.push(...collectParagraphs(sdtContent));
+                }
+            }
+        }
+        return result;
+    };
+    const paragraphs = collectParagraphs(tc);
+    for (const p of paragraphs) {
+        cell.paragraphs.push(parseParagraph(p, themeColors, themeFonts));
+    }
+    // Parse nested tables in cell (including those inside SDT elements)
+    const collectTables = (parent) => {
+        const result = [];
+        for (let i = 0; i < parent.children.length; i++) {
+            const child = parent.children[i];
+            if (child.localName === "tbl") {
+                result.push(child);
+            }
+            else if (child.localName === "sdt") {
+                // Structured document tag - look inside sdtContent for tables
+                const sdtContent = findChild(child, "sdtContent");
+                if (sdtContent) {
+                    result.push(...collectTables(sdtContent));
+                }
+            }
+        }
+        return result;
+    };
+    const nestedTables = collectTables(tc);
+    if (nestedTables.length > 0) {
+        cell.nestedTables = nestedTables.map(tbl => parseTable(tbl, themeColors, themeFonts));
+    }
+    return cell;
+}
+function parseBorders(bordersEl, themeColors) {
+    const borders = {};
+    const parseBorder = (el) => {
+        if (!el)
+            return undefined;
+        const style = el.getAttribute("w:val");
+        if (!style || style === "nil" || style === "none")
+            return undefined;
+        const size = parseInt(el.getAttribute("w:sz") ?? "4", 10);
+        let color = el.getAttribute("w:color") ?? "000000";
+        // Handle theme colors
+        const themeColor = el.getAttribute("w:themeColor");
+        if (themeColor) {
+            const resolved = resolveThemeColor(themeColor, themeColors);
+            if (resolved)
+                color = resolved.replace("#", "");
+        }
+        return {
+            style,
+            size: size / 8, // Convert from eighths of a point to points
+            color: color === "auto" ? "000000" : color,
+        };
+    };
+    borders.top = parseBorder(findChild(bordersEl, "top"));
+    borders.bottom = parseBorder(findChild(bordersEl, "bottom"));
+    borders.left = parseBorder(findChild(bordersEl, "left"));
+    borders.right = parseBorder(findChild(bordersEl, "right"));
+    borders.insideH = parseBorder(findChild(bordersEl, "insideH"));
+    borders.insideV = parseBorder(findChild(bordersEl, "insideV"));
+    return borders;
+}
+function parseTable(tbl, themeColors, themeFonts) {
+    const table = { rows: [] };
+    const tblPr = findChild(tbl, "tblPr");
+    if (tblPr) {
+        const tblBorders = findChild(tblPr, "tblBorders");
+        if (tblBorders) {
+            table.borders = parseBorders(tblBorders, themeColors);
+        }
+        // Parse table width
+        const tblW = findChild(tblPr, "tblW");
+        if (tblW) {
+            const w = tblW.getAttribute("w:w");
+            const type = tblW.getAttribute("w:type");
+            if (w && type === "dxa") {
+                table.tableWidth = parseInt(w, 10);
+            }
+        }
+        // Parse table indent (can be negative for extending into margins)
+        const tblInd = findChild(tblPr, "tblInd");
+        if (tblInd) {
+            const w = tblInd.getAttribute("w:w");
+            const type = tblInd.getAttribute("w:type");
+            if (w && type === "dxa") {
+                table.tableIndent = parseInt(w, 10);
+            }
+        }
+    }
+    // Parse column widths from tblGrid
+    const tblGrid = findChild(tbl, "tblGrid");
+    if (tblGrid) {
+        const gridCols = findChildren(tblGrid, "gridCol");
+        table.columnWidths = gridCols.map(col => {
+            const w = col.getAttribute("w:w");
+            return w ? parseInt(w, 10) : 0;
+        });
+    }
+    const trs = findChildren(tbl, "tr");
+    for (const tr of trs) {
+        const row = { cells: [] };
+        const trPr = findChild(tr, "trPr");
+        if (trPr) {
+            const trHeight = findChild(trPr, "trHeight");
+            if (trHeight) {
+                const val = trHeight.getAttribute("w:val");
+                if (val)
+                    row.height = parseInt(val, 10);
+            }
+        }
+        const tcs = findChildren(tr, "tc");
+        for (const tc of tcs) {
+            row.cells.push(parseTableCell(tc, themeColors, themeFonts));
+        }
+        table.rows.push(row);
+    }
+    return table;
+}
+function parseDrawing(drawing, themeColors, inlineOnly = false) {
+    // Look for inline or anchor images
+    const inline = findDescendant(drawing, "inline");
+    const anchor = findDescendant(drawing, "anchor");
+    // If inlineOnly is true, skip anchored drawings (they're handled separately as positioned elements)
+    if (inlineOnly && anchor && !inline) {
+        return null;
+    }
+    const container = inline ?? anchor;
+    if (!container)
+        return null;
+    const extent = findChild(container, "extent");
+    if (!extent)
+        return null;
+    const cx = parseInt(extent.getAttribute("cx") ?? "0", 10);
+    const cy = parseInt(extent.getAttribute("cy") ?? "0", 10);
+    // Get the blip element which contains the image reference
+    const blip = findDescendant(container, "blip");
+    if (!blip)
+        return null;
+    const rEmbed = blip.getAttribute("r:embed") ??
+        blip.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "embed");
+    if (!rEmbed)
+        return null;
+    // Get alt text
+    const docPr = findDescendant(container, "docPr");
+    const alt = docPr?.getAttribute("title") ?? docPr?.getAttribute("descr") ?? undefined;
+    // Parse transform properties (rotation, flip) from a:xfrm
+    // Look in pic:spPr > a:xfrm
+    const spPr = findDescendant(container, "spPr");
+    const xfrm = spPr ? findChild(spPr, "xfrm") : null;
+    let rotation;
+    let flipH;
+    let flipV;
+    if (xfrm) {
+        // Rotation is in EMUs (60,000 per degree)
+        const rotAttr = xfrm.getAttribute("rot");
+        if (rotAttr) {
+            const rotEmu = parseInt(rotAttr, 10);
+            // Convert EMUs to degrees (60000 EMUs = 1 degree)
+            rotation = rotEmu / 60000;
+            // Normalize negative rotations (values like 21253759 = 354.2° = -5.8°)
+            if (rotation > 180) {
+                rotation = rotation - 360;
+            }
+        }
+        // Horizontal and vertical flip
+        flipH = xfrm.getAttribute("flipH") === "1";
+        flipV = xfrm.getAttribute("flipV") === "1";
+    }
+    // Parse shadow from a:effectLst > a:outerShdw
+    let shadow;
+    const effectLst = spPr ? findDescendant(spPr, "effectLst") : null;
+    if (effectLst) {
+        const outerShdw = findChild(effectLst, "outerShdw");
+        if (outerShdw) {
+            const blurRad = parseInt(outerShdw.getAttribute("blurRad") ?? "0", 10);
+            const distAttr = outerShdw.getAttribute("dist");
+            const dirAttr = outerShdw.getAttribute("dir");
+            // Get shadow color and alpha
+            let shadowColor = "000000"; // default black
+            let shadowAlpha = 100;
+            // Check for prstClr (preset color like "black")
+            const prstClr = findChild(outerShdw, "prstClr");
+            if (prstClr) {
+                const valAttr = prstClr.getAttribute("val");
+                if (valAttr === "black")
+                    shadowColor = "000000";
+                else if (valAttr === "white")
+                    shadowColor = "FFFFFF";
+                // Check for alpha inside prstClr
+                const alphaEl = findChild(prstClr, "alpha");
+                if (alphaEl) {
+                    const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
+                    shadowAlpha = Math.round(alphaVal / 1000); // val is in thousandths (40000 = 40%)
+                }
+            }
+            // Check for srgbClr (explicit RGB color)
+            const srgbClr = findChild(outerShdw, "srgbClr");
+            if (srgbClr) {
+                shadowColor = srgbClr.getAttribute("val") ?? "000000";
+                const alphaEl = findChild(srgbClr, "alpha");
+                if (alphaEl) {
+                    const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
+                    shadowAlpha = Math.round(alphaVal / 1000);
+                }
+            }
+            // Calculate offset from distance and direction
+            let offsetX = 0;
+            let offsetY = 0;
+            if (distAttr && dirAttr) {
+                const dist = parseInt(distAttr, 10);
+                const dir = parseInt(dirAttr, 10) / 60000; // Convert EMUs to degrees
+                const dirRad = (dir * Math.PI) / 180;
+                offsetX = Math.round(dist * Math.cos(dirRad));
+                offsetY = Math.round(dist * Math.sin(dirRad));
+            }
+            shadow = {
+                blurRadius: blurRad,
+                color: shadowColor,
+                alpha: shadowAlpha,
+                offsetX,
+                offsetY,
+            };
+        }
+    }
+    // Parse border from a:ln
+    let border;
+    if (spPr) {
+        const ln = findChild(spPr, "ln");
+        if (ln) {
+            const widthAttr = ln.getAttribute("w");
+            const width = widthAttr ? parseInt(widthAttr, 10) : 0;
+            if (width > 0) {
+                let borderColor;
+                // Check for solidFill
+                const solidFill = findChild(ln, "solidFill");
+                if (solidFill) {
+                    // Check for srgbClr
+                    const srgbClr = findChild(solidFill, "srgbClr");
+                    if (srgbClr) {
+                        borderColor = srgbClr.getAttribute("val") ?? undefined;
+                    }
+                    // Check for sysClr (system color like "window" = white)
+                    const sysClr = findChild(solidFill, "sysClr");
+                    if (sysClr) {
+                        const lastClr = sysClr.getAttribute("lastClr");
+                        if (lastClr) {
+                            borderColor = lastClr;
+                        }
+                        else {
+                            const valAttr = sysClr.getAttribute("val");
+                            if (valAttr === "window")
+                                borderColor = "FFFFFF";
+                            else if (valAttr === "windowText")
+                                borderColor = "000000";
+                        }
+                    }
+                    // Check for schemeClr (theme color reference like "bg1")
+                    const schemeClr = findChild(solidFill, "schemeClr");
+                    if (schemeClr && themeColors) {
+                        const colorName = schemeClr.getAttribute("val");
+                        if (colorName) {
+                            const resolved = resolveThemeColor(colorName, themeColors);
+                            if (resolved) {
+                                // Remove # prefix if present
+                                borderColor = resolved.startsWith("#") ? resolved.substring(1) : resolved;
+                            }
+                        }
+                    }
+                }
+                // Only set border if we found a valid color
+                if (borderColor) {
+                    border = {
+                        width,
+                        color: borderColor,
+                    };
+                }
+            }
+        }
+    }
+    return {
+        type: "image",
+        data: {
+            rId: rEmbed,
+            width: cx,
+            height: cy,
+            alt,
+            rotation,
+            flipH: flipH || undefined,
+            flipV: flipV || undefined,
+            shadow,
+            border,
+        },
+    };
+}
+function parseDocument(docDoc, themeColors, themeFonts) {
+    const elements = [];
+    const positionedElements = [];
+    const body = docDoc.getElementsByTagName("w:body")[0];
+    if (!body)
+        return { elements, positionedElements };
+    // Collect anchored drawings from the entire body (these include header banners, shapes with text, etc.)
+    const drawings = body.getElementsByTagName("w:drawing");
+    for (let i = 0; i < drawings.length; i++) {
+        const drawing = drawings[i];
+        // Only process anchored drawings (positioned elements), not inline drawings (images in text flow)
+        const anchor = findDescendant(drawing, "anchor");
+        if (anchor) {
+            const positioned = parsePositionedElement(drawing, themeColors, themeFonts);
+            if (positioned) {
+                positionedElements.push(positioned);
+            }
+        }
+    }
+    const processElement = (el) => {
+        if (el.localName === "p") {
+            // Parse paragraph text (includes any inline drawings/images in runs)
+            const para = parseParagraph(el, themeColors, themeFonts);
+            if (para.runs.length > 0 || para.props.styleId) {
+                elements.push({ kind: "paragraph", data: para });
+            }
+        }
+        else if (el.localName === "tbl") {
+            elements.push({ kind: "table", data: parseTable(el, themeColors, themeFonts) });
+        }
+        else if (el.localName === "sdt") {
+            // Structured document tag - process its content
+            const sdtContent = findChild(el, "sdtContent");
+            if (sdtContent) {
+                for (let i = 0; i < sdtContent.children.length; i++) {
+                    processElement(sdtContent.children[i]);
+                }
+            }
+        }
+    };
+    for (let i = 0; i < body.children.length; i++) {
+        processElement(body.children[i]);
+    }
+    return { elements, positionedElements };
+}
+// ============================================================================
+// HTML Rendering Functions
+// ============================================================================
+function getHighlightColor(highlight) {
+    // Named highlight colors
+    const highlightColors = {
+        yellow: "#ffff00",
+        green: "#00ff00",
+        cyan: "#00ffff",
+        magenta: "#ff00ff",
+        blue: "#0000ff",
+        red: "#ff0000",
+        darkBlue: "#00008b",
+        darkCyan: "#008b8b",
+        darkGreen: "#006400",
+        darkMagenta: "#8b008b",
+        darkRed: "#8b0000",
+        darkYellow: "#808000",
+        darkGray: "#a9a9a9",
+        lightGray: "#d3d3d3",
+        black: "#000000",
+        white: "#ffffff",
+    };
+    if (highlight.startsWith("#"))
+        return highlight;
+    return highlightColors[highlight] ?? highlight;
+}
+function renderRunToHtml(run, imageMap) {
+    const { text, props, image } = run;
+    let result = "";
+    // Handle inline image
+    if (image) {
+        result += renderImageToHtml(image, imageMap);
+    }
+    // Handle text
+    if (text) {
+        const styles = [];
+        if (props.bold)
+            styles.push("font-weight:bold");
+        if (props.italic)
+            styles.push("font-style:italic");
+        if (props.underline)
+            styles.push("text-decoration:underline");
+        if (props.strike)
+            styles.push("text-decoration:line-through");
+        if (props.color)
+            styles.push(`color:${props.color}`);
+        if (props.fontSize)
+            styles.push(`font-size:${props.fontSize}pt`);
+        if (props.fontFamily)
+            styles.push(`font-family:'${props.fontFamily}',sans-serif`);
+        if (props.highlight)
+            styles.push(`background-color:${getHighlightColor(props.highlight)}`);
+        if (props.caps)
+            styles.push("text-transform:uppercase");
+        if (props.smallCaps)
+            styles.push("font-variant:small-caps");
+        let escapedText = escapeHtml(text);
+        // Handle line breaks
+        escapedText = escapedText.replace(/\n/g, "<br>");
+        // Handle tabs
+        escapedText = escapedText.replace(/\t/g, "&emsp;");
+        if (props.vertAlign === "superscript") {
+            escapedText = `<sup>${escapedText}</sup>`;
+        }
+        else if (props.vertAlign === "subscript") {
+            escapedText = `<sub>${escapedText}</sub>`;
+        }
+        if (styles.length > 0) {
+            result += `<span style="${styles.join(";")}">${escapedText}</span>`;
+        }
+        else {
+            result += escapedText;
+        }
+    }
+    return result;
+}
+function renderParagraphToHtml(para, styleMap, numberingMap, imageMap = new Map(), docDefaults = {}) {
+    const { runs, props } = para;
+    const styles = [];
+    // Resolve style hierarchy: document defaults -> style -> paragraph direct props
+    let resolvedProps = { ...props };
+    // Start with document default run properties
+    let resolvedRunProps = docDefaults.rPr ? { ...docDefaults.rPr } : {};
+    if (props.styleId) {
+        const style = styleMap.get(props.styleId);
+        if (style) {
+            if (style.pPr) {
+                resolvedProps = { ...style.pPr, ...resolvedProps };
+            }
+            if (style.rPr) {
+                // Style properties override document defaults
+                resolvedRunProps = { ...resolvedRunProps, ...style.rPr };
+            }
+        }
+    }
+    // Determine HTML tag based on style
+    let tag = "p";
+    let headingLevel = 0;
+    let isTitleStyle = false;
+    let isSubtitleStyle = false;
+    if (props.styleId) {
+        const styleName = styleMap.get(props.styleId)?.name?.toLowerCase() ?? props.styleId.toLowerCase();
+        const headingMatch = styleName.match(/heading\s*(\d)/i);
+        if (headingMatch) {
+            headingLevel = parseInt(headingMatch[1], 10);
+            if (headingLevel >= 1 && headingLevel <= 6) {
+                tag = `h${headingLevel}`;
+            }
+        }
+        else if (styleName === "subtitle" || styleName.startsWith("subtitle")) {
+            // Check subtitle FIRST since "subtitle" contains "title"
+            tag = "h2";
+            isSubtitleStyle = true;
+        }
+        else if (styleName.includes("title")) {
+            tag = "h1";
+            isTitleStyle = true;
+        }
+    }
+    // Check for list formatting
+    const isListItem = props.numId !== undefined && props.numId > 0;
+    // Apply paragraph styles
+    if (resolvedProps.alignment) {
+        styles.push(`text-align:${resolvedProps.alignment}`);
+    }
+    if (resolvedProps.indentLeft) {
+        styles.push(`margin-left:${twipsToPx(resolvedProps.indentLeft)}px`);
+    }
+    if (resolvedProps.indentRight) {
+        styles.push(`margin-right:${twipsToPx(resolvedProps.indentRight)}px`);
+    }
+    if (resolvedProps.indentFirstLine) {
+        styles.push(`text-indent:${twipsToPx(resolvedProps.indentFirstLine)}px`);
+    }
+    if (resolvedProps.spacingBefore) {
+        styles.push(`margin-top:${twipsToPx(resolvedProps.spacingBefore)}px`);
+    }
+    else if (isTitleStyle || isSubtitleStyle) {
+        // Reset margin-top for Title/Subtitle since global h1/h2 CSS has default margins
+        styles.push("margin-top:0");
+    }
+    if (resolvedProps.spacingAfter) {
+        styles.push(`margin-bottom:${twipsToPx(resolvedProps.spacingAfter)}px`);
+    }
+    else if (isTitleStyle || isSubtitleStyle) {
+        // Reset margin-bottom for Title/Subtitle
+        styles.push("margin-bottom:0");
+    }
+    // Apply inherited run properties to paragraph
+    if (resolvedRunProps.fontSize) {
+        styles.push(`font-size:${resolvedRunProps.fontSize}pt`);
+    }
+    if (resolvedRunProps.fontFamily) {
+        styles.push(`font-family:'${resolvedRunProps.fontFamily}',sans-serif`);
+    }
+    if (resolvedRunProps.color) {
+        styles.push(`color:${resolvedRunProps.color}`);
+    }
+    if (resolvedRunProps.bold) {
+        styles.push("font-weight:bold");
+    }
+    if (resolvedRunProps.italic) {
+        styles.push("font-style:italic");
+    }
+    // Apply text transform from inherited run properties
+    if (resolvedRunProps.caps) {
+        styles.push("text-transform:uppercase");
+    }
+    if (resolvedRunProps.smallCaps) {
+        styles.push("font-variant:small-caps");
+    }
+    // Apply paragraph borders
+    if (resolvedProps.borders) {
+        if (resolvedProps.borders.top) {
+            const b = resolvedProps.borders.top;
+            styles.push(`border-top:${b.size}pt ${getBorderStyleCss(b.style)} #${b.color}`);
+        }
+        if (resolvedProps.borders.bottom) {
+            const b = resolvedProps.borders.bottom;
+            styles.push(`border-bottom:${b.size}pt ${getBorderStyleCss(b.style)} #${b.color}`);
+        }
+        if (resolvedProps.borders.left) {
+            const b = resolvedProps.borders.left;
+            styles.push(`border-left:${b.size}pt ${getBorderStyleCss(b.style)} #${b.color}`);
+        }
+        if (resolvedProps.borders.right) {
+            const b = resolvedProps.borders.right;
+            styles.push(`border-right:${b.size}pt ${getBorderStyleCss(b.style)} #${b.color}`);
+        }
+    }
+    else if (isTitleStyle || isSubtitleStyle) {
+        // Reset borders for Title/Subtitle styles since global h1/h2 CSS may have borders
+        // that don't apply to these specific styles
+        styles.push("border:none");
+    }
+    // Apply paragraph shading (background color)
+    if (resolvedProps.shading) {
+        styles.push(`background-color:${resolvedProps.shading}`);
+    }
+    // Render runs
+    let content = runs.map(run => renderRunToHtml(run, imageMap)).join("");
+    // Add list marker if this is a list item
+    // Note: Using CSS for list styling since we render as individual paragraphs
+    // Proper list grouping would require changes at the parent rendering level
+    if (isListItem && props.numId !== undefined) {
+        const numDef = numberingMap.get(props.numId);
+        if (numDef) {
+            const lvlDef = numDef.get(props.ilvl ?? 0);
+            if (lvlDef) {
+                const isBullet = lvlDef.numFmt === "bullet";
+                // Use Unicode bullet point or number as marker
+                const marker = isBullet ? "• " : `${(props.ilvl ?? 0) + 1}. `;
+                const indent = ((props.ilvl ?? 0) + 1) * 20;
+                styles.push(`padding-left:${indent}px`);
+                styles.push("display:block");
+                // Prefix with styled marker
+                content = `<span style="margin-left:-20px;display:inline-block;width:20px">${marker}</span>${content}`;
+            }
+        }
+    }
+    const styleAttr = styles.length > 0 ? ` style="${styles.join(";")}"` : "";
+    // Empty paragraph
+    if (!content) {
+        return `<${tag}${styleAttr}>&nbsp;</${tag}>`;
+    }
+    return `<${tag}${styleAttr}>${content}</${tag}>`;
+}
+function renderTableToHtml(table, styleMap, numberingMap, themeColors, imageMap, docDefaults = {}) {
+    const styles = [
+        "border-collapse:collapse",
+    ];
+    // Set table width from parsed width or 100%
+    if (table.tableWidth) {
+        styles.push(`width:${twipsToPx(table.tableWidth)}px`);
+    }
+    else {
+        styles.push("width:100%");
+    }
+    // Apply table indent (can be negative for extending into margins)
+    if (table.tableIndent) {
+        styles.push(`margin-left:${twipsToPx(table.tableIndent)}px`);
+    }
+    let html = `<table style="${styles.join(";")}">`;
+    // Track column index for applying widths
+    let colIndex = 0;
+    for (const row of table.rows) {
+        const rowStyles = [];
+        if (row.height) {
+            rowStyles.push(`height:${twipsToPx(row.height)}px`);
+        }
+        html += `<tr${rowStyles.length > 0 ? ` style="${rowStyles.join(";")}"` : ""}>`;
+        colIndex = 0;
+        for (const cell of row.cells) {
+            // Skip cells that are part of a vertical merge
+            if (cell.vMerge === "continue") {
+                colIndex += cell.gridSpan ?? 1;
+                continue;
+            }
+            const cellStyles = ["padding:4px 8px"];
+            const cellAttrs = [];
+            // Vertical alignment - use cell's vAlign or default to top
+            const vAlign = cell.vAlign ?? "top";
+            cellStyles.push(`vertical-align:${vAlign}`);
+            // Set cell width from cell width or column grid
+            if (cell.width) {
+                cellStyles.push(`width:${twipsToPx(cell.width)}px`);
+            }
+            else if (table.columnWidths && table.columnWidths[colIndex]) {
+                // Calculate width from column grid (handling colspan)
+                const span = cell.gridSpan ?? 1;
+                let totalWidth = 0;
+                for (let i = 0; i < span && colIndex + i < table.columnWidths.length; i++) {
+                    totalWidth += table.columnWidths[colIndex + i];
+                }
+                if (totalWidth > 0) {
+                    cellStyles.push(`width:${twipsToPx(totalWidth)}px`);
+                }
+            }
+            if (cell.gridSpan && cell.gridSpan > 1) {
+                cellAttrs.push(`colspan="${cell.gridSpan}"`);
+            }
+            if (cell.shading) {
+                cellStyles.push(`background-color:${cell.shading}`);
+            }
+            // Cell borders
+            if (cell.borders) {
+                if (cell.borders.top) {
+                    cellStyles.push(`border-top:${cell.borders.top.size}pt ${getBorderStyleCss(cell.borders.top.style)} #${cell.borders.top.color}`);
+                }
+                if (cell.borders.bottom) {
+                    cellStyles.push(`border-bottom:${cell.borders.bottom.size}pt ${getBorderStyleCss(cell.borders.bottom.style)} #${cell.borders.bottom.color}`);
+                }
+                if (cell.borders.left) {
+                    cellStyles.push(`border-left:${cell.borders.left.size}pt ${getBorderStyleCss(cell.borders.left.style)} #${cell.borders.left.color}`);
+                }
+                if (cell.borders.right) {
+                    cellStyles.push(`border-right:${cell.borders.right.size}pt ${getBorderStyleCss(cell.borders.right.style)} #${cell.borders.right.color}`);
+                }
+            }
+            else if (table.borders) {
+                // Fall back to table borders
+                if (table.borders.top) {
+                    cellStyles.push(`border-top:${table.borders.top.size}pt ${getBorderStyleCss(table.borders.top.style)} #${table.borders.top.color}`);
+                }
+                if (table.borders.bottom) {
+                    cellStyles.push(`border-bottom:${table.borders.bottom.size}pt ${getBorderStyleCss(table.borders.bottom.style)} #${table.borders.bottom.color}`);
+                }
+                if (table.borders.left) {
+                    cellStyles.push(`border-left:${table.borders.left.size}pt ${getBorderStyleCss(table.borders.left.style)} #${table.borders.left.color}`);
+                }
+                if (table.borders.right) {
+                    cellStyles.push(`border-right:${table.borders.right.size}pt ${getBorderStyleCss(table.borders.right.style)} #${table.borders.right.color}`);
+                }
+                if (table.borders.insideH) {
+                    cellStyles.push(`border-top:${table.borders.insideH.size}pt ${getBorderStyleCss(table.borders.insideH.style)} #${table.borders.insideH.color}`);
+                    cellStyles.push(`border-bottom:${table.borders.insideH.size}pt ${getBorderStyleCss(table.borders.insideH.style)} #${table.borders.insideH.color}`);
+                }
+                if (table.borders.insideV) {
+                    cellStyles.push(`border-left:${table.borders.insideV.size}pt ${getBorderStyleCss(table.borders.insideV.style)} #${table.borders.insideV.color}`);
+                    cellStyles.push(`border-right:${table.borders.insideV.size}pt ${getBorderStyleCss(table.borders.insideV.style)} #${table.borders.insideV.color}`);
+                }
+            }
+            const attrsStr = cellAttrs.length > 0 ? " " + cellAttrs.join(" ") : "";
+            html += `<td${attrsStr} style="${cellStyles.join(";")}">`;
+            for (const para of cell.paragraphs) {
+                html += renderParagraphToHtml(para, styleMap, numberingMap, imageMap, docDefaults);
+            }
+            // Render nested tables
+            if (cell.nestedTables) {
+                for (const nestedTable of cell.nestedTables) {
+                    html += renderTableToHtml(nestedTable, styleMap, numberingMap, themeColors, imageMap, docDefaults);
+                }
+            }
+            html += "</td>";
+            colIndex += cell.gridSpan ?? 1;
+        }
+        html += "</tr>";
+    }
+    html += "</table>";
+    return html;
+}
+function renderImageToHtml(img, imageMap) {
+    const dataUri = imageMap.get(img.rId);
+    if (!dataUri)
+        return "";
+    const width = Math.round(emuToPx(img.width));
+    const height = Math.round(emuToPx(img.height));
+    const alt = img.alt ? ` alt="${escapeHtml(img.alt)}"` : "";
+    const styles = [
+        "max-width:100%",
+        `width:${width}px`,
+        `height:${height}px`,
+        "display:block",
+        "margin:8px 0",
+    ];
+    // Build CSS transform for rotation and flip
+    const transforms = [];
+    if (img.rotation) {
+        transforms.push(`rotate(${img.rotation}deg)`);
+    }
+    if (img.flipH) {
+        transforms.push("scaleX(-1)");
+    }
+    if (img.flipV) {
+        transforms.push("scaleY(-1)");
+    }
+    if (transforms.length > 0) {
+        styles.push(`transform:${transforms.join(" ")}`);
+    }
+    // Apply shadow
+    if (img.shadow) {
+        const blurPx = Math.round(emuToPx(img.shadow.blurRadius));
+        const offsetXPx = img.shadow.offsetX ? Math.round(emuToPx(img.shadow.offsetX)) : 0;
+        const offsetYPx = img.shadow.offsetY ? Math.round(emuToPx(img.shadow.offsetY)) : 0;
+        const alpha = img.shadow.alpha / 100;
+        const r = parseInt(img.shadow.color.substring(0, 2), 16);
+        const g = parseInt(img.shadow.color.substring(2, 4), 16);
+        const b = parseInt(img.shadow.color.substring(4, 6), 16);
+        styles.push(`box-shadow:${offsetXPx}px ${offsetYPx}px ${blurPx}px rgba(${r},${g},${b},${alpha})`);
+    }
+    // Apply border
+    if (img.border) {
+        const borderWidthPx = Math.round(emuToPx(img.border.width));
+        styles.push(`border:${borderWidthPx}px solid #${img.border.color}`);
+    }
+    return `<img src="${dataUri}"${alt} style="${styles.join(";")}">`;
+}
+/**
+ * Render positioned elements (shapes, decorative frames, textboxes, images) as positioned divs.
+ */
+function renderPositionedElements(positionedElements, sectionProps, styleMap, themeColors, imageMap, docDefaults = {}) {
+    if (positionedElements.length === 0)
+        return "";
+    let html = "";
+    for (const el of positionedElements) {
+        const styles = [];
+        let innerContent = "";
+        // Width and height
+        const width = Math.round(emuToPx(el.width));
+        const height = Math.round(emuToPx(el.height));
+        styles.push(`width:${width}px`);
+        styles.push(`height:${height}px`);
+        // Determine positioning based on wrap type and relative position
+        if (el.wrapType === "topAndBottom") {
+            // Top and bottom wrapping - element is in the normal flow with margins
+            styles.push("position:relative");
+            styles.push("margin:0 auto"); // Center horizontally by default
+            if (el.positionH === "center") {
+                styles.push("margin-left:auto");
+                styles.push("margin-right:auto");
+            }
+            else if (el.positionH === "left") {
+                styles.push("margin-left:0");
+                styles.push("margin-right:auto");
+            }
+            else if (el.positionH === "right") {
+                styles.push("margin-left:auto");
+                styles.push("margin-right:0");
+            }
+        }
+        else {
+            // Absolute positioning for other wrap types
+            styles.push("position:absolute");
+            // Horizontal positioning
+            if (el.positionH === "center") {
+                styles.push("left:50%");
+                styles.push(`margin-left:${-width / 2}px`);
+            }
+            else if (el.positionH === "right") {
+                styles.push("right:0");
+            }
+            else if (el.positionH === "left") {
+                styles.push("left:0");
+            }
+            else if (el.offsetX !== undefined) {
+                const offsetPx = Math.round(emuToPx(el.offsetX));
+                styles.push(`left:${offsetPx}px`);
+            }
+            // Vertical positioning
+            if (el.positionV === "center") {
+                styles.push("top:50%");
+                styles.push(`margin-top:${-height / 2}px`);
+            }
+            else if (el.positionV === "bottom") {
+                styles.push("bottom:0");
+            }
+            else if (el.positionV === "top") {
+                styles.push("top:0");
+            }
+            else if (el.offsetY !== undefined) {
+                const offsetPx = Math.round(emuToPx(el.offsetY));
+                styles.push(`top:${offsetPx}px`);
+            }
+        }
+        // Z-index for behind/in-front (only for absolutely positioned elements)
+        if (el.wrapType !== "topAndBottom") {
+            if (el.behindDoc) {
+                styles.push("z-index:-1");
+            }
+            else {
+                styles.push("z-index:1");
+            }
+        }
+        // Handle positioned images
+        if (el.type === "image" && el.imageRId) {
+            const dataUri = imageMap.get(el.imageRId);
+            if (dataUri) {
+                // Build CSS transform for rotation and flip (extracted from XML, not hardcoded)
+                const transforms = [];
+                if (el.imageRotation) {
+                    transforms.push(`rotate(${el.imageRotation}deg)`);
+                }
+                if (el.imageFlipH) {
+                    transforms.push("scaleX(-1)");
+                }
+                if (el.imageFlipV) {
+                    transforms.push("scaleY(-1)");
+                }
+                if (transforms.length > 0) {
+                    styles.push(`transform:${transforms.join(" ")}`);
+                }
+                // Apply shadow (extracted from XML, not hardcoded)
+                if (el.imageShadow) {
+                    const blurPx = Math.round(emuToPx(el.imageShadow.blurRadius));
+                    const offsetXPx = el.imageShadow.offsetX ? Math.round(emuToPx(el.imageShadow.offsetX)) : 0;
+                    const offsetYPx = el.imageShadow.offsetY ? Math.round(emuToPx(el.imageShadow.offsetY)) : 0;
+                    const alpha = el.imageShadow.alpha / 100;
+                    const r = parseInt(el.imageShadow.color.substring(0, 2), 16);
+                    const g = parseInt(el.imageShadow.color.substring(2, 4), 16);
+                    const b = parseInt(el.imageShadow.color.substring(4, 6), 16);
+                    styles.push(`box-shadow:${offsetXPx}px ${offsetYPx}px ${blurPx}px rgba(${r},${g},${b},${alpha})`);
+                }
+                // Apply border (extracted from XML, not hardcoded)
+                if (el.imageBorder) {
+                    const borderWidthPx = Math.round(emuToPx(el.imageBorder.width));
+                    styles.push(`border:${borderWidthPx}px solid #${el.imageBorder.color}`);
+                }
+                innerContent = `<img src="${dataUri}" style="width:100%;height:100%;object-fit:cover">`;
+            }
+        }
+        // Handle frame shape specially - render as border, not solid fill
+        else if (el.shapeType === "frame" && el.fillColor) {
+            // Frame shape: render as a border with transparent center
+            const borderPercent = el.shapeAdjust ?? 0.025;
+            const minDimension = Math.min(width, height);
+            const borderWidth = Math.round(minDimension * borderPercent);
+            styles.push(`border:${borderWidth}px solid ${el.fillColor}`);
+            styles.push("box-sizing:border-box");
+        }
+        else if (el.gradientFill) {
+            // Gradient fill
+            const { angle, stops } = el.gradientFill;
+            // Convert DrawingML angle to CSS angle (DrawingML uses different coordinate system)
+            // DrawingML 0° = right, 90° = top; CSS 0° = top, 90° = right
+            const cssAngle = (90 - (angle ?? 90) + 360) % 360;
+            const gradientStops = stops
+                .map(stop => `${stop.color} ${stop.position}%`)
+                .join(", ");
+            styles.push(`background:linear-gradient(${cssAngle}deg, ${gradientStops})`);
+            styles.push("box-sizing:border-box");
+        }
+        else if (el.fillColor) {
+            // Regular shape with solid fill
+            styles.push(`background-color:${el.fillColor}`);
+            styles.push("box-sizing:border-box");
+        }
+        // Render text content if this is a textbox with content
+        if (el.type === "textbox" && el.textElements && el.textElements.length > 0) {
+            styles.push("overflow:hidden");
+            styles.push("padding:8px 12px");
+            // Enable pointer events for text content
+            styles.push("pointer-events:auto");
+            for (const para of el.textElements) {
+                // Use empty numberingMap and imageMap since textboxes typically don't contain lists or images
+                innerContent += renderParagraphToHtml(para, styleMap, new Map(), new Map(), docDefaults);
+            }
+        }
+        else if (el.type !== "image" && el.wrapType !== "topAndBottom") {
+            // Non-text, non-image shapes don't need pointer events
+            styles.push("pointer-events:none");
+        }
+        html += `<div style="${styles.join(";")}">`;
+        html += innerContent;
+        html += `</div>`;
+    }
+    return html;
+}
+/**
+ * Generate CSS for multi-column layout if needed.
+ */
+function generateColumnLayoutCss(sectionProps) {
+    if (!sectionProps.columns || sectionProps.columns <= 1)
+        return "";
+    const gap = sectionProps.columnSpace ? twipsToPx(sectionProps.columnSpace) : 36;
+    return `column-count:${sectionProps.columns};column-gap:${gap}px;`;
+}
+/**
+ * Generate CSS rules from extracted DOCX styles.
+ * Maps Word style definitions to CSS classes.
+ */
+function generateStylesCss(styleMap, themeFonts) {
+    const cssRules = [];
+    const headingStyles = new Map();
+    // Base paragraph style
+    cssRules.push(`p { margin: 0 0 10pt 0; }`);
+    // Base table style
+    cssRules.push(`table { margin: 10pt 0; border-collapse: collapse; }`);
+    // Base image style
+    cssRules.push(`img { max-width: 100%; }`);
+    // Base list styles
+    cssRules.push(`ul, ol { margin: 0 0 10pt 0; padding-left: 24px; }`);
+    cssRules.push(`li { margin: 0 0 4pt 0; }`);
+    // Generate styles for each heading level from styleMap
+    // Only use the first (most specific) definition for each heading level
+    for (const [styleId, style] of styleMap) {
+        const styleName = style.name?.toLowerCase() ?? styleId.toLowerCase();
+        const headingMatch = styleName.match(/heading\s*(\d)/i);
+        if (headingMatch) {
+            const level = parseInt(headingMatch[1], 10);
+            if (level >= 1 && level <= 6 && !headingStyles.has(level)) {
+                const cssProps = [];
+                // Font family from style or theme
+                if (style.rPr?.fontFamily) {
+                    cssProps.push(`font-family: '${style.rPr.fontFamily}', sans-serif`);
+                }
+                else {
+                    cssProps.push(`font-family: '${themeFonts.major}', 'Segoe UI', Arial, sans-serif`);
+                }
+                // Font size from style
+                if (style.rPr?.fontSize) {
+                    cssProps.push(`font-size: ${style.rPr.fontSize}pt`);
+                }
+                else {
+                    // Default heading sizes
+                    const defaultSizes = [24, 18, 14, 12, 11, 10];
+                    cssProps.push(`font-size: ${defaultSizes[level - 1]}pt`);
+                }
+                // Font weight
+                if (style.rPr?.bold !== false) {
+                    cssProps.push(`font-weight: bold`);
+                }
+                // Color
+                if (style.rPr?.color) {
+                    cssProps.push(`color: ${style.rPr.color}`);
+                }
+                // Text transform
+                if (style.rPr?.caps) {
+                    cssProps.push(`text-transform: uppercase`);
+                }
+                if (style.rPr?.smallCaps) {
+                    cssProps.push(`font-variant: small-caps`);
+                }
+                // Margins from paragraph props
+                if (style.pPr?.spacingBefore !== undefined) {
+                    cssProps.push(`margin-top: ${twipsToPx(style.pPr.spacingBefore)}px`);
+                }
+                else {
+                    cssProps.push(`margin-top: 1em`);
+                }
+                if (style.pPr?.spacingAfter !== undefined) {
+                    cssProps.push(`margin-bottom: ${twipsToPx(style.pPr.spacingAfter)}px`);
+                }
+                else {
+                    cssProps.push(`margin-bottom: 0.5em`);
+                }
+                cssProps.push(`line-height: 1.2`);
+                // Borders
+                if (style.pPr?.borders) {
+                    if (style.pPr.borders.top) {
+                        const b = style.pPr.borders.top;
+                        cssProps.push(`border-top: ${b.size}pt ${getBorderStyleCss(b.style)} #${b.color}`);
+                    }
+                    if (style.pPr.borders.bottom) {
+                        const b = style.pPr.borders.bottom;
+                        cssProps.push(`border-bottom: ${b.size}pt ${getBorderStyleCss(b.style)} #${b.color}`);
+                    }
+                }
+                headingStyles.set(level, `h${level} { ${cssProps.join("; ")}; }`);
+            }
+        }
+    }
+    // Add heading styles in order
+    for (let level = 1; level <= 6; level++) {
+        if (headingStyles.has(level)) {
+            cssRules.push(headingStyles.get(level));
+        }
+        else {
+            // Fallback heading styles for any levels not defined in styleMap
+            const defaultSizes = [24, 18, 14, 12, 11, 10];
+            cssRules.push(`h${level} { font-family: '${themeFonts.major}', 'Segoe UI', Arial, sans-serif; font-size: ${defaultSizes[level - 1]}pt; font-weight: bold; margin: 1em 0 0.5em 0; line-height: 1.2; }`);
+        }
+    }
+    return cssRules.join("\n");
+}
+// ============================================================================
+// Main Export Function
+// ============================================================================
+/**
+ * Imports a DOCX file and returns an HTML string.
+ * @param arrayBuffer - The DOCX file as an ArrayBuffer
+ * @returns HTML string representing the document
+ */
+export default async function importDocx(arrayBuffer) {
+    const zip = await JSZip.loadAsync(arrayBuffer);
+    const parser = new DOMParser();
+    // Parse document.xml
+    const docXml = await zip.file("word/document.xml")?.async("text");
+    if (!docXml)
+        throw new Error("Invalid DOCX: no document.xml");
+    const docDoc = parser.parseFromString(docXml, "application/xml");
+    // Parse theme for colors and fonts
+    let themeColors = new Map();
+    let themeFonts = { major: "Calibri", minor: "Calibri" };
+    const themeXml = await zip.file("word/theme/theme1.xml")?.async("text");
+    if (themeXml) {
+        const themeDoc = parser.parseFromString(themeXml, "application/xml");
+        themeColors = parseThemeColors(themeDoc);
+        themeFonts = parseThemeFonts(themeDoc);
+    }
+    // Parse styles - try multiple locations
+    let styleMap = new Map();
+    let docDefaults = {};
+    // Try word/styles.xml first (standard location)
+    let stylesXml = await zip.file("word/styles.xml")?.async("text");
+    // If not found, try glossary/styles.xml (used in some templates)
+    if (!stylesXml) {
+        stylesXml = await zip.file("word/glossary/styles.xml")?.async("text");
+    }
+    if (stylesXml) {
+        const stylesDoc = parser.parseFromString(stylesXml, "application/xml");
+        const parsed = parseStyles(stylesDoc, themeColors, themeFonts);
+        styleMap = parsed.styles;
+        docDefaults = parsed.defaults;
+    }
+    // Parse numbering (for lists) - try multiple locations
+    let numberingMap = new Map();
+    let numberingXml = await zip.file("word/numbering.xml")?.async("text");
+    // If not found, try glossary/numbering.xml
+    if (!numberingXml) {
+        numberingXml = await zip.file("word/glossary/numbering.xml")?.async("text");
+    }
+    if (numberingXml) {
+        const numberingDoc = parser.parseFromString(numberingXml, "application/xml");
+        numberingMap = parseNumbering(numberingDoc);
+    }
+    // Build image map from relationships
+    const imageMap = new Map();
+    const headerFooterRels = new Map(); // rId -> file path
+    const relsXml = await zip.file("word/_rels/document.xml.rels")?.async("text");
+    if (relsXml) {
+        const relsDoc = parser.parseFromString(relsXml, "application/xml");
+        const rels = relsDoc.getElementsByTagName("Relationship");
+        for (let i = 0; i < rels.length; i++) {
+            const rel = rels[i];
+            const type = rel.getAttribute("Type") ?? "";
+            const rId = rel.getAttribute("Id");
+            const target = rel.getAttribute("Target");
+            if (!rId || !target)
+                continue;
+            // Track header/footer relationships
+            if (type.includes("/header") || type.includes("/footer")) {
+                const filePath = target.startsWith("/") ? target.slice(1) : "word/" + target;
+                headerFooterRels.set(rId, filePath);
+                continue;
+            }
+            if (!type.includes("/image"))
+                continue;
+            const mediaPath = target.startsWith("../")
+                ? "word/" + target.slice(3)
+                : target.startsWith("/")
+                    ? target.slice(1)
+                    : "word/" + target;
+            const imgFile = zip.file(mediaPath);
+            if (!imgFile)
+                continue;
+            const imgData = await imgFile.async("base64");
+            const ext = mediaPath.split(".").pop()?.toLowerCase() ?? "png";
+            const mime = ext === "jpg" || ext === "jpeg"
+                ? "image/jpeg"
+                : ext === "gif"
+                    ? "image/gif"
+                    : ext === "svg"
+                        ? "image/svg+xml"
+                        : `image/${ext}`;
+            imageMap.set(rId, `data:${mime};base64,${imgData}`);
+        }
+    }
+    // Parse section properties from document
+    const body = docDoc.getElementsByTagName("w:body")[0];
+    const sectPr = body ? findChild(body, "sectPr") : null;
+    const sectionProps = parseSectionProps(sectPr);
+    // Parse headers and footers for positioned elements (decorative frames, etc.)
+    const headers = [];
+    const footers = [];
+    for (const [rId, filePath] of headerFooterRels) {
+        const hfXml = await zip.file(filePath)?.async("text");
+        if (!hfXml)
+            continue;
+        const hfDoc = parser.parseFromString(hfXml, "application/xml");
+        const isHeader = filePath.includes("header");
+        const hf = parseHeaderFooter(hfDoc, isHeader ? "header" : "footer", themeColors, themeFonts);
+        if (isHeader) {
+            headers.push(hf);
+        }
+        else {
+            footers.push(hf);
+        }
+    }
+    // Collect all positioned elements from headers
+    const positionedElements = [];
+    for (const header of headers) {
+        positionedElements.push(...header.positionedElements);
+    }
+    // Parse document elements and body positioned elements
+    const parsedDoc = parseDocument(docDoc, themeColors, themeFonts);
+    const elements = parsedDoc.elements;
+    // Add positioned elements from document body
+    positionedElements.push(...parsedDoc.positionedElements);
+    // Separate inline elements (topAndBottom wrap) from absolutely positioned elements
+    const inlinePositionedElements = positionedElements.filter(el => el.wrapType === "topAndBottom");
+    const absolutePositionedElements = positionedElements.filter(el => el.wrapType !== "topAndBottom");
+    // Calculate page dimensions for CSS
+    const pageWidthPx = sectionProps.pageWidth ? twipsToPx(sectionProps.pageWidth) : 816;
+    const marginLeftPx = sectionProps.marginLeft ? twipsToPx(sectionProps.marginLeft) : 72;
+    const marginRightPx = sectionProps.marginRight ? twipsToPx(sectionProps.marginRight) : 72;
+    const marginTopPx = sectionProps.marginTop ? twipsToPx(sectionProps.marginTop) : 72;
+    const marginBottomPx = sectionProps.marginBottom ? twipsToPx(sectionProps.marginBottom) : 72;
+    const contentWidth = pageWidthPx - marginLeftPx - marginRightPx;
+    // Generate column layout CSS if multi-column
+    const columnLayoutCss = generateColumnLayoutCss(sectionProps);
+    // Check if we have absolutely positioned elements that need a relative container
+    const hasAbsolutePositionedElements = absolutePositionedElements.length > 0;
+    // Render to HTML - extract actual styles from document
+    // Use computed page dimensions and margins from sectPr
+    // Use document default color if available
+    const defaultColor = docDefaults.rPr?.color ?? "#333";
+    let html = `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+body {
+  font-family: '${themeFonts.minor}', 'Segoe UI', Arial, sans-serif;
+  font-size: 11pt;
+  line-height: 1.5;
+  color: ${defaultColor};
+  max-width: ${Math.round(pageWidthPx)}px;
+  margin: 0 auto;
+  padding: ${Math.round(marginTopPx)}px ${Math.round(marginRightPx)}px ${Math.round(marginBottomPx)}px ${Math.round(marginLeftPx)}px;
+  background: #fff;
+  ${columnLayoutCss}
+  ${hasAbsolutePositionedElements ? "position:relative;" : ""}
+}
+${generateStylesCss(styleMap, themeFonts)}
+</style>
+</head>
+<body>
+`;
+    // Render inline positioned elements (topAndBottom wrap) first - they appear before document content
+    if (inlinePositionedElements.length > 0) {
+        html += renderPositionedElements(inlinePositionedElements, sectionProps, styleMap, themeColors, imageMap, docDefaults);
+    }
+    // Render elements with list grouping
+    html += renderElementsWithListGrouping(elements, styleMap, numberingMap, themeColors, imageMap, docDefaults);
+    // Render absolutely positioned elements (they overlay content)
+    if (absolutePositionedElements.length > 0) {
+        html += renderPositionedElements(absolutePositionedElements, sectionProps, styleMap, themeColors, imageMap, docDefaults);
+    }
+    html += `
+</body>
+</html>`;
+    return html;
+}
+/**
+ * Render document elements, grouping consecutive list items into proper HTML lists.
+ */
+function renderElementsWithListGrouping(elements, styleMap, numberingMap, themeColors, imageMap, docDefaults = {}) {
+    let html = "";
+    let currentListState = null;
+    /**
+     * Get numId and ilvl from paragraph props or from its style.
+     */
+    const getListInfo = (para) => {
+        // First check paragraph's own numPr
+        if (para.props.numId !== undefined && para.props.numId > 0) {
+            return { numId: para.props.numId, ilvl: para.props.ilvl ?? 0 };
+        }
+        // If not, check if the style has numPr
+        if (para.props.styleId) {
+            const style = styleMap.get(para.props.styleId);
+            if (style?.pPr?.numId !== undefined && style.pPr.numId > 0) {
+                return { numId: style.pPr.numId, ilvl: style.pPr.ilvl ?? 0 };
+            }
+        }
+        return { numId: undefined, ilvl: 0 };
+    };
+    for (let i = 0; i < elements.length; i++) {
+        const el = elements[i];
+        if (el.kind === "paragraph") {
+            const para = el.data;
+            const listInfo = getListInfo(para);
+            const isListItem = listInfo.numId !== undefined && listInfo.numId > 0;
+            if (isListItem) {
+                const numDef = numberingMap.get(listInfo.numId);
+                const lvlDef = numDef?.get(listInfo.ilvl);
+                const isBullet = lvlDef?.numFmt === "bullet";
+                const ilvl = listInfo.ilvl;
+                // Check if we need to start a new list or continue existing one
+                if (!currentListState || currentListState.numId !== listInfo.numId || currentListState.ilvl !== ilvl) {
+                    // Close previous list if any
+                    if (currentListState) {
+                        html += currentListState.isBullet ? "</ul>" : "</ol>";
+                    }
+                    // Start new list
+                    currentListState = { numId: listInfo.numId, ilvl, isBullet: isBullet ?? false };
+                    const listStyle = ilvl > 0 ? ` style="margin-left:${ilvl * 24}px"` : "";
+                    html += isBullet ? `<ul${listStyle}>` : `<ol${listStyle}>`;
+                }
+                // Render as list item (without the list marker - will be handled by CSS)
+                html += renderListItemToHtml(para, styleMap, imageMap, docDefaults);
+            }
+            else {
+                // Not a list item - close any open list
+                if (currentListState) {
+                    html += currentListState.isBullet ? "</ul>" : "</ol>";
+                    currentListState = null;
+                }
+                html += renderParagraphToHtml(para, styleMap, numberingMap, imageMap, docDefaults);
+            }
+        }
+        else if (el.kind === "table") {
+            // Close any open list
+            if (currentListState) {
+                html += currentListState.isBullet ? "</ul>" : "</ol>";
+                currentListState = null;
+            }
+            html += renderTableToHtml(el.data, styleMap, numberingMap, themeColors, imageMap, docDefaults);
+        }
+        else if (el.kind === "drawing") {
+            // Close any open list
+            if (currentListState) {
+                html += currentListState.isBullet ? "</ul>" : "</ol>";
+                currentListState = null;
+            }
+            if (el.data.type === "image") {
+                html += renderImageToHtml(el.data.data, imageMap);
+            }
+        }
+    }
+    // Close final list if any
+    if (currentListState) {
+        html += currentListState.isBullet ? "</ul>" : "</ol>";
+    }
+    return html;
+}
+/**
+ * Render a paragraph as a list item (li element).
+ */
+function renderListItemToHtml(para, styleMap, imageMap = new Map(), docDefaults = {}) {
+    const { runs, props } = para;
+    const styles = [];
+    // Resolve style hierarchy for text styling: document defaults -> style
+    let resolvedRunProps = docDefaults.rPr ? { ...docDefaults.rPr } : {};
+    if (props.styleId) {
+        const style = styleMap.get(props.styleId);
+        if (style?.rPr) {
+            resolvedRunProps = { ...resolvedRunProps, ...style.rPr };
+        }
+    }
+    // Apply inherited run properties
+    if (resolvedRunProps.fontSize) {
+        styles.push(`font-size:${resolvedRunProps.fontSize}pt`);
+    }
+    if (resolvedRunProps.fontFamily) {
+        styles.push(`font-family:'${resolvedRunProps.fontFamily}',sans-serif`);
+    }
+    if (resolvedRunProps.color) {
+        styles.push(`color:${resolvedRunProps.color}`);
+    }
+    if (resolvedRunProps.bold) {
+        styles.push("font-weight:bold");
+    }
+    if (resolvedRunProps.italic) {
+        styles.push("font-style:italic");
+    }
+    // Render runs
+    const content = runs.map(run => renderRunToHtml(run, imageMap)).join("");
+    const styleAttr = styles.length > 0 ? ` style="${styles.join(";")}"` : "";
+    return `<li${styleAttr}>${content || "&nbsp;"}</li>`;
+}
+//# sourceMappingURL=import-docx.js.map