docgen-utils 1.0.14 → 1.0.15

package/dist/packages/slides/import-pptx.js

@@ -50,28 +50,74 @@ function hexToRgba(hex, alpha100k) {
     const a = Math.round((alpha100k / 100000) * 100) / 100;
     return `rgba(${r},${g},${b},${a})`;
 }
+/**
+ * Apply tint modifier: mix the color toward white.
+ * tintVal is 0-100000 (e.g. 65000 = 65% tint means 65% of original + 35% white)
+ */
+function applyTint(hex, tintVal) {
+    const factor = tintVal / 100000;
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const nr = Math.round(r + (255 - r) * (1 - factor));
+    const ng = Math.round(g + (255 - g) * (1 - factor));
+    const nb = Math.round(b + (255 - b) * (1 - factor));
+    return `#${nr.toString(16).padStart(2, "0")}${ng.toString(16).padStart(2, "0")}${nb.toString(16).padStart(2, "0")}`;
+}
+/**
+ * Apply shade modifier: mix the color toward black.
+ * shadeVal is 0-100000 (e.g. 50000 = 50% shade means darken by 50%)
+ */
+function applyShade(hex, shadeVal) {
+    const factor = shadeVal / 100000;
+    const r = Math.round(parseInt(hex.slice(1, 3), 16) * factor);
+    const g = Math.round(parseInt(hex.slice(3, 5), 16) * factor);
+    const b = Math.round(parseInt(hex.slice(5, 7), 16) * factor);
+    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+/**
+ * Apply color modifiers (tint, shade, alpha) to a color element.
+ * Returns the modified hex color and optional alpha value.
+ */
+function applyColorModifiers(colorEl, hex) {
+    let color = hex;
+    let alphaVal;
+    const tintEl = findChild(colorEl, "tint");
+    if (tintEl) {
+        const val = parseInt(tintEl.getAttribute("val") ?? "100000", 10);
+        color = applyTint(color, val);
+    }
+    const shadeEl = findChild(colorEl, "shade");
+    if (shadeEl) {
+        const val = parseInt(shadeEl.getAttribute("val") ?? "100000", 10);
+        color = applyShade(color, val);
+    }
+    const alphaEl = findChild(colorEl, "alpha");
+    if (alphaEl) {
+        alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
+    }
+    return { color, alpha: alphaVal };
+}
 function resolveColor(parent, themeColors) {
     const srgbClr = findChild(parent, "srgbClr");
     if (srgbClr) {
         const hex = "#" + (srgbClr.getAttribute("val") ?? "000000");
-        const alphaEl = findChild(srgbClr, "alpha");
-        if (alphaEl) {
-            const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
-            return hexToRgba(hex, alphaVal);
+        const { color, alpha } = applyColorModifiers(srgbClr, hex);
+        if (alpha !== undefined && alpha < 100000) {
+            return hexToRgba(color, alpha);
         }
-        return hex;
+        return color;
     }
     const schemeClr = findChild(parent, "schemeClr");
     if (schemeClr) {
         const val = schemeClr.getAttribute("val");
         if (val && themeColors.has(val)) {
             const hex = themeColors.get(val);
-            const alphaEl = findChild(schemeClr, "alpha");
-            if (alphaEl) {
-                const alphaVal = parseInt(alphaEl.getAttribute("val") ?? "100000", 10);
-                return hexToRgba(hex, alphaVal);
+            const { color, alpha } = applyColorModifiers(schemeClr, hex);
+            if (alpha !== undefined && alpha < 100000) {
+                return hexToRgba(color, alpha);
             }
-            return hex;
+            return color;
         }
     }
     return undefined;
@@ -127,6 +173,198 @@ function extractFill(spPr, themeColors) {
         return resolveColor(solidFill, themeColors);
     return extractGradientFill(spPr, themeColors);
 }
+/**
+ * Resolve a bgRef element to a background color/gradient.
+ * bgRef idx=1001-1003 references bgFillStyleLst entries (idx - 1000 = 1-based position).
+ * The bgRef's child color element provides the "placeholder color" (phClr) for the fill style.
+ */
+function resolveBgRef(bgRef, bgFillStyles, themeColors) {
+    const idx = parseInt(bgRef.getAttribute("idx") ?? "0", 10);
+    if (idx < 1001 || bgFillStyles.length === 0)
+        return undefined;
+    const styleIdx = idx - 1001; // 0-based index into bgFillStyleLst
+    if (styleIdx >= bgFillStyles.length)
+        return undefined;
+    const fillStyle = bgFillStyles[styleIdx];
+    // Resolve the placeholder color (phClr) from bgRef's child element
+    const phColor = resolveColor(bgRef, themeColors);
+    // Check what type of fill the style defines
+    if (fillStyle.localName === "solidFill") {
+        // If the fill uses phClr, substitute with bgRef's color
+        const phClr = findChild(fillStyle, "schemeClr");
+        if (phClr?.getAttribute("val") === "phClr" && phColor) {
+            return phColor;
+        }
+        return resolveColor(fillStyle, themeColors) ?? phColor;
+    }
+    if (fillStyle.localName === "gradFill") {
+        // Extract gradient, substituting phClr with bgRef's color
+        return extractGradientFill(
+        // Wrap in a parent element for extractGradientFill
+        { children: [fillStyle] }, themeColors);
+    }
+    // For blipFill or other complex fills, return the placeholder color as fallback
+    return phColor;
+}
+/**
+ * Extract background fill from a bg element, handling both bgPr and bgRef.
+ */
+function extractBgFill(bgEl, bgFillStyles, themeColors) {
+    const bgPr = findChild(bgEl, "bgPr");
+    if (bgPr) {
+        return extractFill(bgPr, themeColors);
+    }
+    const bgRef = findChild(bgEl, "bgRef");
+    if (bgRef) {
+        return resolveBgRef(bgRef, bgFillStyles, themeColors);
+    }
+    return undefined;
+}
+/**
+ * Extract a CSS clip-path polygon from a custGeom element.
+ * Only supports simple paths (moveTo + lineTo, no curves).
+ * Returns undefined if the geometry is too complex.
+ */
+function extractCustGeomClipPath(custGeom) {
+    const pathLst = findChild(custGeom, "pathLst");
+    if (!pathLst)
+        return undefined;
+    const pathEl = findChild(pathLst, "path");
+    if (!pathEl)
+        return undefined;
+    const pathW = parseInt(pathEl.getAttribute("w") ?? "0", 10);
+    const pathH = parseInt(pathEl.getAttribute("h") ?? "0", 10);
+    if (pathW <= 0 || pathH <= 0)
+        return undefined;
+    const points = [];
+    for (let i = 0; i < pathEl.children.length; i++) {
+        const cmd = pathEl.children[i];
+        const localName = cmd.localName;
+        if (localName === "moveTo" || localName === "lnTo") {
+            const pt = findChild(cmd, "pt");
+            if (pt) {
+                const x = parseInt(pt.getAttribute("x") ?? "0", 10);
+                const y = parseInt(pt.getAttribute("y") ?? "0", 10);
+                points.push({ x, y });
+            }
+        }
+        else if (localName === "close") {
+            // close path — don't need to add anything
+        }
+        else {
+            // Unsupported command (cubicBezTo, quadBezTo, arcTo, etc.)
+            // Can't represent as a simple polygon
+            return undefined;
+        }
+    }
+    if (points.length < 3)
+        return undefined;
+    // Convert points to percentage-based polygon
+    const polygonPoints = points.map(p => {
+        const xPct = Math.round((p.x / pathW) * 10000) / 100;
+        const yPct = Math.round((p.y / pathH) * 10000) / 100;
+        return `${xPct}% ${yPct}%`;
+    }).join(", ");
+    return `polygon(${polygonPoints})`;
+}
+/**
+ * Parse non-placeholder shapes from a spTree element (layout or master).
+ * Returns SlideElement[] for decorative shapes that should appear behind slide content.
+ */
+function parseDecorativeShapes(spTree, scale, themeColors, imageMap, themeFonts) {
+    const elements = [];
+    for (let i = 0; i < spTree.children.length; i++) {
+        const child = spTree.children[i];
+        if (child.localName === "sp") {
+            // Skip placeholder shapes — they are content containers, not decorative
+            const nvSpPr = findChild(child, "nvSpPr");
+            if (nvSpPr) {
+                const phEl = findChild(findChild(nvSpPr, "nvPr") ?? nvSpPr, "ph");
+                if (phEl)
+                    continue;
+            }
+            // For custom geometry shapes, try to extract a simple polygon clip-path.
+            // Skip only if the geometry is too complex to represent as a CSS polygon.
+            const spPr = findChild(child, "spPr");
+            if (spPr) {
+                const custGeom = findChild(spPr, "custGeom");
+                if (custGeom) {
+                    const clipPath = extractCustGeomClipPath(custGeom);
+                    if (!clipPath)
+                        continue; // Too complex — skip
+                    // Parse the shape and attach the clip-path
+                    const shape = parseShape(child, scale, themeColors, themeFonts);
+                    if (shape) {
+                        shape.clipPath = clipPath;
+                        elements.push({ kind: "shape", data: shape });
+                    }
+                    continue;
+                }
+            }
+            const shape = parseShape(child, scale, themeColors, themeFonts);
+            if (shape)
+                elements.push({ kind: "shape", data: shape });
+        }
+        else if (child.localName === "pic") {
+            const img = parsePicture(child, scale, imageMap);
+            if (img)
+                elements.push({ kind: "image", data: img });
+        }
+        else if (child.localName === "grpSp") {
+            // Recursively parse group shapes for their decorative children
+            const grpElements = parseGroupShape(child, scale, themeColors, imageMap, themeFonts);
+            elements.push(...grpElements);
+        }
+    }
+    return elements;
+}
+/**
+ * Parse shapes inside a group shape element.
+ * Group shapes have their own coordinate space defined by grpSpPr.
+ */
+function parseGroupShape(grpSp, scale, themeColors, imageMap, themeFonts) {
+    const elements = [];
+    for (let i = 0; i < grpSp.children.length; i++) {
+        const child = grpSp.children[i];
+        if (child.localName === "sp") {
+            const nvSpPr = findChild(child, "nvSpPr");
+            if (nvSpPr) {
+                const phEl = findChild(findChild(nvSpPr, "nvPr") ?? nvSpPr, "ph");
+                if (phEl)
+                    continue;
+            }
+            // Handle freeform shapes in groups with clip-path extraction
+            const spPr = findChild(child, "spPr");
+            if (spPr) {
+                const custGeom = findChild(spPr, "custGeom");
+                if (custGeom) {
+                    const clipPath = extractCustGeomClipPath(custGeom);
+                    if (!clipPath)
+                        continue;
+                    const shape = parseShape(child, scale, themeColors, themeFonts);
+                    if (shape) {
+                        shape.clipPath = clipPath;
+                        elements.push({ kind: "shape", data: shape });
+                    }
+                    continue;
+                }
+            }
+            const shape = parseShape(child, scale, themeColors, themeFonts);
+            if (shape)
+                elements.push({ kind: "shape", data: shape });
+        }
+        else if (child.localName === "pic") {
+            const img = parsePicture(child, scale, imageMap);
+            if (img)
+                elements.push({ kind: "image", data: img });
+        }
+        else if (child.localName === "grpSp") {
+            const nested = parseGroupShape(child, scale, themeColors, imageMap, themeFonts);
+            elements.push(...nested);
+        }
+    }
+    return elements;
+}
 function extractRunProps(rPr, scale, themeColors, themeFonts) {
     if (!rPr)
         return {};
@@ -140,6 +378,9 @@ function extractRunProps(rPr, scale, themeColors, themeFonts) {
     const i = rPr.getAttribute("i");
     if (i === "1" || i === "true")
         result.italic = true;
+    const u = rPr.getAttribute("u");
+    if (u && u !== "none")
+        result.underline = true;
     const solidFill = findChild(rPr, "solidFill");
     if (solidFill) {
         const color = resolveColor(solidFill, themeColors);
@@ -268,14 +509,36 @@ function parseShape(sp, scale, themeColors, themeFonts) {
         return null;
     const wEmu = parseInt(ext.getAttribute("cx") ?? "0", 10);
     const hEmu = parseInt(ext.getAttribute("cy") ?? "0", 10);
+    // Resolve fill: direct spPr fill > p:style fillRef fallback
+    // Only fall back to p:style if spPr has no explicit <a:noFill/>
+    let fill = extractFill(spPr, themeColors);
+    if (!fill && !findChild(spPr, "noFill")) {
+        const styleEl = findChild(sp, "style");
+        if (styleEl) {
+            const fillRef = findChild(styleEl, "fillRef");
+            if (fillRef) {
+                const fillIdx = parseInt(fillRef.getAttribute("idx") ?? "0", 10);
+                if (fillIdx > 0) {
+                    fill = resolveColor(fillRef, themeColors) ?? undefined;
+                }
+            }
+        }
+    }
     const shape = {
         x: Math.round(emuToPx(parseInt(off.getAttribute("x") ?? "0", 10)) * scale),
         y: Math.round(emuToPx(parseInt(off.getAttribute("y") ?? "0", 10)) * scale),
         w: Math.round(emuToPx(wEmu) * scale),
         h: Math.round(emuToPx(hEmu) * scale),
-        fill: extractFill(spPr, themeColors),
+        fill,
         paragraphs: [],
     };
+    // Extract rotation from xfrm (OOXML uses 60,000ths of a degree)
+    const rotAttr = xfrm.getAttribute("rot");
+    if (rotAttr) {
+        const rotDeg = parseInt(rotAttr, 10) / 60000;
+        if (rotDeg !== 0)
+            shape.rotation = rotDeg;
+    }
     // Border radius from prstGeom roundRect or ellipse
     const prstGeom = findChild(spPr, "prstGeom");
     const prstType = prstGeom?.getAttribute("prst");
@@ -293,6 +556,14 @@ function parseShape(sp, scale, themeColors, themeFonts) {
         // Ellipse shapes should have border-radius: 50% to render as circles
         shape.isEllipse = true;
     }
+    else if (prstType === "rtTriangle") {
+        // Right triangle: clip to triangular shape
+        shape.clipPath = "polygon(0 0, 0 100%, 100% 100%)";
+    }
+    else if (prstType === "triangle" || prstType === "isoTriangle") {
+        // Isosceles triangle: point at top center
+        shape.clipPath = "polygon(50% 0, 0 100%, 100% 100%)";
+    }
     // Border from a:ln
     const ln = findChild(spPr, "ln");
     if (ln) {
@@ -404,6 +675,11 @@ function parseShape(sp, scale, themeColors, themeFonts) {
                 if (buChar) {
                     para.bulletChar = buChar.getAttribute("char") ?? undefined;
                 }
+                // Bullet font (e.g. Wingdings, Symbol)
+                const buFont = findChild(pPr, "buFont");
+                if (buFont) {
+                    para.bulletFont = buFont.getAttribute("typeface") ?? undefined;
+                }
                 // Bullet color
                 const buClr = findChild(pPr, "buClr");
                 if (buClr) {
@@ -428,6 +704,7 @@ function parseShape(sp, scale, themeColors, themeFonts) {
                             text,
                             bold: props.bold ?? defaults?.bold,
                             italic: props.italic ?? defaults?.italic,
+                            underline: props.underline ?? defaults?.underline,
                             fontSize: props.fontSize ?? defaults?.fontSize,
                             color: props.color ?? defaults?.color,
                             fontFamily: props.fontFamily ?? defaults?.fontFamily,
@@ -508,16 +785,21 @@ function parsePicture(pic, scale, imageMap) {
     const nvPicPr = findChild(pic, "nvPicPr");
     const cNvPr = nvPicPr ? findChild(nvPicPr, "cNvPr") : null;
     const alt = cNvPr?.getAttribute("descr") ?? undefined;
-    // Check for srcRect cropping - indicates the image should use object-fit:cover
+    // Check for srcRect cropping
     const srcRect = findChild(blipFill, "srcRect");
     let hasCrop = false;
+    let cropLeft = 0;
+    let cropTop = 0;
+    let cropRight = 0;
+    let cropBottom = 0;
     if (srcRect) {
-        const l = parseInt(srcRect.getAttribute("l") ?? "0", 10);
-        const r = parseInt(srcRect.getAttribute("r") ?? "0", 10);
-        const t = parseInt(srcRect.getAttribute("t") ?? "0", 10);
-        const b = parseInt(srcRect.getAttribute("b") ?? "0", 10);
-        // If any cropping is applied, the original image used object-fit:cover
-        hasCrop = l > 0 || r > 0 || t > 0 || b > 0;
+        // srcRect values are in 1/1000th of a percent (e.g., 49710 = 49.71%)
+        cropLeft = parseInt(srcRect.getAttribute("l") ?? "0", 10) / 1000;
+        cropRight = parseInt(srcRect.getAttribute("r") ?? "0", 10) / 1000;
+        cropTop = parseInt(srcRect.getAttribute("t") ?? "0", 10) / 1000;
+        cropBottom = parseInt(srcRect.getAttribute("b") ?? "0", 10) / 1000;
+        // If any cropping is applied, record the crop values
+        hasCrop = cropLeft > 0 || cropRight > 0 || cropTop > 0 || cropBottom > 0;
     }
     // Extract border-radius from roundRect preset geometry
     let borderRadius;
@@ -536,6 +818,14 @@ function parsePicture(pic, scale, imageMap) {
         const radiusEmu = (minDim * Math.min(adjVal, 50000)) / 100000;
         borderRadius = Math.round(emuToPx(radiusEmu) * scale);
     }
+    // Extract rotation from xfrm
+    let rotation;
+    const rotAttr = xfrm.getAttribute("rot");
+    if (rotAttr) {
+        const rotDeg = parseInt(rotAttr, 10) / 60000;
+        if (rotDeg !== 0)
+            rotation = rotDeg;
+    }
     return {
         x: Math.round(emuToPx(parseInt(off.getAttribute("x") ?? "0", 10)) * scale),
         y: Math.round(emuToPx(parseInt(off.getAttribute("y") ?? "0", 10)) * scale),
@@ -545,6 +835,11 @@ function parsePicture(pic, scale, imageMap) {
         alt,
         borderRadius,
         hasCrop,
+        cropLeft: hasCrop ? cropLeft : undefined,
+        cropTop: hasCrop ? cropTop : undefined,
+        cropRight: hasCrop ? cropRight : undefined,
+        cropBottom: hasCrop ? cropBottom : undefined,
+        rotation,
     };
 }
 // ============================================================================
@@ -708,6 +1003,11 @@ function parseParagraphsFromTxBody(txBody, scale, themeColors, themeFonts) {
             if (buChar) {
                 para.bulletChar = buChar.getAttribute("char") ?? undefined;
             }
+            // Bullet font (e.g. Wingdings, Symbol)
+            const buFont = findChild(pPr, "buFont");
+            if (buFont) {
+                para.bulletFont = buFont.getAttribute("typeface") ?? undefined;
+            }
             // Bullet color
             const buClr = findChild(pPr, "buClr");
             if (buClr) {
@@ -729,6 +1029,7 @@ function parseParagraphsFromTxBody(txBody, scale, themeColors, themeFonts) {
                         text,
                         bold: props.bold ?? defaults?.bold,
                         italic: props.italic ?? defaults?.italic,
+                        underline: props.underline ?? defaults?.underline,
                         fontSize: props.fontSize ?? defaults?.fontSize,
                         color: props.color ?? defaults?.color,
                         fontFamily: props.fontFamily ?? defaults?.fontFamily,
@@ -921,21 +1222,666 @@ function parseTable(graphicFrame, scale, themeColors, themeFonts, tableStyleMap)
     return table;
 }
 // ============================================================================
+// Chart Parsing
+// ============================================================================
+/**
+ * Resolve a color from a chart fill element (handles srgbClr and schemeClr).
+ * Chart XML uses DrawingML (a:) namespace, same as shapes.
+ */
+function resolveChartColor(parent, themeColors) {
+    const solidFill = findChild(parent, "solidFill");
+    if (!solidFill)
+        return undefined;
+    return resolveColor(solidFill, themeColors);
+}
+/**
+ * Extract text from a rich text element (c:rich) commonly used for chart/axis titles.
+ * Returns the concatenated text and optional font/color/size from the first run.
+ */
+function parseChartRichText(richEl) {
+    const paragraphs = findChildren(richEl, "p");
+    let text = "";
+    let font;
+    let color;
+    let size;
+    for (const p of paragraphs) {
+        const runs = findChildren(p, "r");
+        for (const r of runs) {
+            const tEl = findChild(r, "t");
+            if (tEl?.textContent)
+                text += tEl.textContent;
+            // Extract formatting from first run only
+            if (font === undefined) {
+                const rPr = findChild(r, "rPr");
+                if (rPr) {
+                    const szAttr = rPr.getAttribute("sz");
+                    if (szAttr)
+                        size = hptToPx(parseInt(szAttr, 10));
+                    const latin = findChild(rPr, "latin");
+                    if (latin)
+                        font = latin.getAttribute("typeface") ?? undefined;
+                    const fill = findChild(rPr, "solidFill");
+                    if (fill) {
+                        const srgb = findChild(fill, "srgbClr");
+                        if (srgb)
+                            color = "#" + (srgb.getAttribute("val") ?? "000000");
+                    }
+                }
+            }
+        }
+    }
+    return { text, font, color, size };
+}
+/**
+ * Extract axis title and label formatting from a chart axis element (c:catAx or c:valAx).
+ */
+function parseChartAxis(axEl, themeColors) {
+    const axis = {
+        position: "b",
+    };
+    // Axis position
+    const axPos = findChild(axEl, "axPos");
+    if (axPos) {
+        const val = axPos.getAttribute("val");
+        if (val === "b" || val === "l" || val === "r" || val === "t") {
+            axis.position = val;
+        }
+    }
+    // Axis title
+    const titleEl = findChild(axEl, "title");
+    if (titleEl) {
+        const tx = findChild(titleEl, "tx");
+        if (tx) {
+            const rich = findChild(tx, "rich");
+            if (rich) {
+                const parsed = parseChartRichText(rich);
+                axis.title = parsed.text;
+            }
+        }
+    }
+    // Number format
+    const numFmt = findChild(axEl, "numFmt");
+    if (numFmt) {
+        const fmt = numFmt.getAttribute("formatCode");
+        if (fmt)
+            axis.numFormat = fmt;
+    }
+    // Label formatting from txPr
+    const txPr = findChild(axEl, "txPr");
+    if (txPr) {
+        const pEls = findChildren(txPr, "p");
+        for (const p of pEls) {
+            const pPr = findChild(p, "pPr");
+            if (pPr) {
+                const defRPr = findChild(pPr, "defRPr");
+                if (defRPr) {
+                    const szAttr = defRPr.getAttribute("sz");
+                    if (szAttr)
+                        axis.labelSize = hptToPx(parseInt(szAttr, 10));
+                    const latin = findChild(defRPr, "latin");
+                    if (latin)
+                        axis.labelFont = latin.getAttribute("typeface") ?? undefined;
+                    const fill = findChild(defRPr, "solidFill");
+                    if (fill) {
+                        const srgb = findChild(fill, "srgbClr");
+                        if (srgb)
+                            axis.labelColor = "#" + (srgb.getAttribute("val") ?? "000000");
+                    }
+                }
+            }
+        }
+    }
+    // Gridlines
+    const gridlines = findChild(axEl, "majorGridlines");
+    if (gridlines) {
+        const spPr = findChild(gridlines, "spPr");
+        if (spPr) {
+            const ln = findChild(spPr, "ln");
+            if (ln) {
+                const fill = findChild(ln, "solidFill");
+                if (fill) {
+                    const srgb = findChild(fill, "srgbClr");
+                    if (srgb) {
+                        axis.gridlineColor = "#" + (srgb.getAttribute("val") ?? "CCCCCC");
+                        const alphaEl = findChild(srgb, "alpha");
+                        if (alphaEl) {
+                            axis.gridlineAlpha = parseInt(alphaEl.getAttribute("val") ?? "100000", 10) / 1000;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // Min value from scaling
+    const scaling = findChild(axEl, "scaling");
+    if (scaling) {
+        const minEl = findChild(scaling, "min");
+        if (minEl) {
+            const val = minEl.getAttribute("val");
+            if (val)
+                axis.min = parseFloat(val);
+        }
+    }
+    return axis;
+}
+/**
+ * Parse a chart XML file and extract chart data for rendering.
+ * Handles bar/column charts (c:barChart).
+ */
+async function parseChart(graphicFrame, scale, themeColors, zip, slideRelsDoc, parser) {
+    // Extract position from xfrm (same pattern as parseTable)
+    const xfrm = findChild(graphicFrame, "xfrm");
+    if (!xfrm)
+        return null;
+    const off = findChild(xfrm, "off");
+    const ext = findChild(xfrm, "ext");
+    if (!off || !ext)
+        return null;
+    // Navigate to graphicData and check URI
+    const graphic = findChild(graphicFrame, "graphic");
+    if (!graphic)
+        return null;
+    const graphicData = findChild(graphic, "graphicData");
+    if (!graphicData)
+        return null;
+    const uri = graphicData.getAttribute("uri") ?? "";
+    if (!uri.includes("chart"))
+        return null;
+    // Find the c:chart reference element inside graphicData
+    let chartRId;
+    for (let i = 0; i < graphicData.children.length; i++) {
+        const child = graphicData.children[i];
+        if (child.localName === "chart") {
+            // r:id attribute - try both with and without namespace prefix
+            chartRId = child.getAttribute("r:id")
+                ?? child.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "id")
+                ?? undefined;
+            break;
+        }
+    }
+    if (!chartRId)
+        return null;
+    // Resolve the rId via slide rels to get chart XML path
+    let chartTarget;
+    const rels = slideRelsDoc.getElementsByTagName("Relationship");
+    for (let ri = 0; ri < rels.length; ri++) {
+        const rel = rels[ri];
+        if (rel.getAttribute("Id") === chartRId) {
+            chartTarget = rel.getAttribute("Target") ?? undefined;
+            break;
+        }
+    }
+    if (!chartTarget)
+        return null;
+    // Resolve relative path (e.g., ../charts/chart1.xml → ppt/charts/chart1.xml)
+    const chartPath = chartTarget.startsWith("../")
+        ? "ppt/" + chartTarget.slice(3)
+        : chartTarget;
+    // Load chart XML from ZIP
+    const chartXml = await zip.file(chartPath)?.async("text");
+    if (!chartXml)
+        return null;
+    const chartDoc = parser.parseFromString(chartXml, "application/xml");
+    const chartSpace = chartDoc.documentElement; // c:chartSpace
+    // Position
+    const x = Math.round(emuToPx(parseInt(off.getAttribute("x") ?? "0", 10)) * scale);
+    const y = Math.round(emuToPx(parseInt(off.getAttribute("y") ?? "0", 10)) * scale);
+    const w = Math.round(emuToPx(parseInt(ext.getAttribute("cx") ?? "0", 10)) * scale);
+    const h = Math.round(emuToPx(parseInt(ext.getAttribute("cy") ?? "0", 10)) * scale);
+    // Navigate to c:chart element
+    const chartEl = findChild(chartSpace, "chart");
+    if (!chartEl)
+        return null;
+    // Parse chart title
+    let title;
+    let titleFont;
+    let titleColor;
+    let titleSize;
+    const titleEl = findChild(chartEl, "title");
+    if (titleEl) {
+        const tx = findChild(titleEl, "tx");
+        if (tx) {
+            const rich = findChild(tx, "rich");
+            if (rich) {
+                const parsed = parseChartRichText(rich);
+                title = parsed.text;
+                titleFont = parsed.font;
+                titleColor = parsed.color;
+                titleSize = parsed.size;
+            }
+        }
+    }
+    // Parse plot area
+    const plotArea = findChild(chartEl, "plotArea");
+    if (!plotArea)
+        return null;
+    // Look for barChart
+    const barChart = findChild(plotArea, "barChart");
+    if (!barChart)
+        return null; // Only bar charts supported for now
+    // Determine chart direction
+    const barDirEl = findChild(barChart, "barDir");
+    const barDir = barDirEl?.getAttribute("val") ?? "col";
+    const chartType = barDir === "bar" ? "bar" : "column";
+    // Gap width
+    const gapWidthEl = findChild(barChart, "gapWidth");
+    const gapWidth = gapWidthEl
+        ? parseInt(gapWidthEl.getAttribute("val") ?? "150", 10)
+        : 150;
+    // Rounded corners
+    const roundedCornersEl = findChild(chartSpace, "roundedCorners");
+    const roundedCorners = roundedCornersEl?.getAttribute("val") === "1";
+    // Parse series
+    const series = [];
+    const serEls = findChildren(barChart, "ser");
+    for (const ser of serEls) {
+        const seriesData = {
+            categories: [],
+            values: [],
+            fillColors: [],
+        };
+        // Series name
+        const txEl = findChild(ser, "tx");
+        if (txEl) {
+            const strRef = findChild(txEl, "strRef");
+            if (strRef) {
+                const strCache = findChild(strRef, "strCache");
+                if (strCache) {
+                    const pt = findChild(strCache, "pt");
+                    if (pt) {
+                        const v = findChild(pt, "v");
+                        if (v?.textContent)
+                            seriesData.name = v.textContent;
+                    }
+                }
+            }
+        }
+        // Series-level color
+        const serSpPr = findChild(ser, "spPr");
+        if (serSpPr) {
+            const color = resolveChartColor(serSpPr, themeColors);
+            if (color)
+                seriesData.seriesColor = color;
+        }
+        // Per-data-point colors from c:dPt
+        const dPtMap = new Map();
+        const dPtEls = findChildren(ser, "dPt");
+        for (const dPt of dPtEls) {
+            const idxEl = findChild(dPt, "idx");
+            const idx = idxEl ? parseInt(idxEl.getAttribute("val") ?? "0", 10) : 0;
+            const spPr = findChild(dPt, "spPr");
+            if (spPr) {
+                const color = resolveChartColor(spPr, themeColors);
+                if (color)
+                    dPtMap.set(idx, color);
+            }
+        }
+        // Categories from c:cat
+        const catEl = findChild(ser, "cat");
+        if (catEl) {
+            const strRef = findChild(catEl, "strRef");
+            if (strRef) {
+                const strCache = findChild(strRef, "strCache");
+                if (strCache) {
+                    const pts = findChildren(strCache, "pt");
+                    for (const pt of pts) {
+                        const v = findChild(pt, "v");
+                        seriesData.categories.push(v?.textContent ?? "");
+                    }
+                }
+            }
+        }
+        // Values from c:val
+        const valEl = findChild(ser, "val");
+        if (valEl) {
+            const numRef = findChild(valEl, "numRef");
+            if (numRef) {
+                const numCache = findChild(numRef, "numCache");
+                if (numCache) {
+                    const pts = findChildren(numCache, "pt");
+                    for (const pt of pts) {
+                        const v = findChild(pt, "v");
+                        seriesData.values.push(parseFloat(v?.textContent ?? "0"));
+                    }
+                }
+            }
+        }
+        // Build per-point fill colors array
+        for (let i = 0; i < seriesData.values.length; i++) {
+            seriesData.fillColors.push(dPtMap.get(i) ?? undefined);
+        }
+        series.push(seriesData);
+    }
+    if (series.length === 0)
+        return null;
+    // Parse axes
+    let categoryAxis;
+    let valueAxis;
+    const catAx = findChild(plotArea, "catAx");
+    if (catAx) {
+        categoryAxis = parseChartAxis(catAx, themeColors);
+    }
+    const valAx = findChild(plotArea, "valAx");
+    if (valAx) {
+        valueAxis = parseChartAxis(valAx, themeColors);
+    }
+    return {
+        x, y, w, h,
+        chartType,
+        title,
+        titleFont,
+        titleColor,
+        titleSize,
+        series,
+        categoryAxis,
+        valueAxis,
+        gapWidth,
+        roundedCorners,
+    };
+}
+// ============================================================================
 // Rendering Functions
 // ============================================================================
-function renderSlideHtml(elements, bgColor) {
+/**
+ * Format a numeric value using an OOXML number format string.
+ * Handles common patterns like "$"#,##0 → $150, #,##0.0 → 150.0, General → raw
+ */
+function formatChartValue(value, numFormat) {
+    if (!numFormat || numFormat === "General") {
+        // Smart default: if the value is a whole number, show no decimals
+        return Number.isInteger(value) ? value.toString() : value.toFixed(1);
+    }
+    // Extract prefix (e.g., "$" or text in quotes)
+    let prefix = "";
+    let suffix = "";
+    let fmt = numFormat;
+    // Handle quoted prefix like "$" or "€"
+    const prefixMatch = fmt.match(/^"([^"]*)"(.*)$/);
+    if (prefixMatch) {
+        prefix = prefixMatch[1];
+        fmt = prefixMatch[2];
+    }
+    // Handle quoted suffix
+    const suffixMatch = fmt.match(/^(.*)"([^"]*)"$/);
+    if (suffixMatch) {
+        fmt = suffixMatch[1];
+        suffix = suffixMatch[2];
+    }
+    // Determine decimal places from format
+    const decimalMatch = fmt.match(/\.(0+)/);
+    const decimals = decimalMatch ? decimalMatch[1].length : 0;
+    // Format the number
+    const absVal = Math.abs(value);
+    let formatted;
+    if (fmt.includes(",")) {
+        // Thousands separator
+        const parts = absVal.toFixed(decimals).split(".");
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        formatted = parts.join(".");
+    }
+    else {
+        formatted = absVal.toFixed(decimals);
+    }
+    const sign = value < 0 ? "-" : "";
+    return sign + prefix + formatted + suffix;
+}
+/**
+ * Escape text for safe embedding inside SVG <text> elements.
+ */
+function escSvg(text) {
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+/**
+ * Render a chart as an inline SVG inside a positioned div.
+ */
+function renderChartSvg(chart, elId) {
+    const { x, y, w, h } = chart;
+    // Layout constants (in px, relative to chart dimensions)
+    const titleHeight = chart.title ? Math.max(24, (chart.titleSize ?? 16) + 12) : 0;
+    const axisLabelHeight = 16; // space for category labels at bottom
+    const axisTitleHeight = chart.categoryAxis?.title ? 18 : 0;
+    const valAxisTitleWidth = chart.valueAxis?.title ? 20 : 0;
+    // Calculate value axis label width based on max formatted value
+    const allValues = chart.series.flatMap(s => s.values);
+    const maxValue = Math.max(...allValues, 0);
+    const valNumFormat = chart.valueAxis?.numFormat;
+    const maxFormattedLabel = formatChartValue(maxValue, valNumFormat);
+    const valLabelCharWidth = (chart.valueAxis?.labelSize ?? 11) * 0.6;
+    const valLabelWidth = Math.max(30, maxFormattedLabel.length * valLabelCharWidth + 8);
+    // Margins
+    const marginTop = 8 + titleHeight;
+    const marginBottom = 8 + axisLabelHeight + axisTitleHeight + 4;
+    const marginLeft = 4 + valAxisTitleWidth + valLabelWidth;
+    const marginRight = 12;
+    // Plot area
+    const plotX = marginLeft;
+    const plotY = marginTop;
+    const plotW = w - marginLeft - marginRight;
+    const plotH = h - marginTop - marginBottom;
+    if (plotW <= 0 || plotH <= 0)
+        return "";
+    // Determine value range
+    const minValue = chart.valueAxis?.min ?? 0;
+    const valueRange = maxValue - minValue;
+    if (valueRange <= 0)
+        return "";
+    // Calculate nice tick intervals for gridlines
+    const rawInterval = valueRange / 5;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(rawInterval)));
+    const normalized = rawInterval / magnitude;
+    let niceInterval;
+    if (normalized <= 1)
+        niceInterval = 1 * magnitude;
+    else if (normalized <= 2)
+        niceInterval = 2 * magnitude;
+    else if (normalized <= 5)
+        niceInterval = 5 * magnitude;
+    else
+        niceInterval = 10 * magnitude;
+    // Generate tick values
+    const ticks = [];
+    let tickVal = Math.ceil(minValue / niceInterval) * niceInterval;
+    while (tickVal <= maxValue) {
+        ticks.push(tickVal);
+        tickVal += niceInterval;
+    }
+    // Always include 0 if in range
+    if (minValue <= 0 && !ticks.includes(0)) {
+        ticks.unshift(0);
+        ticks.sort((a, b) => a - b);
+    }
+    // Font settings
+    const labelFont = chart.categoryAxis?.labelFont ?? chart.titleFont ?? "sans-serif";
+    const labelColor = chart.categoryAxis?.labelColor ?? "#333";
+    const labelSize = chart.categoryAxis?.labelSize ?? 11;
+    const valLabelColor = chart.valueAxis?.labelColor ?? labelColor;
+    const valLabelSize = chart.valueAxis?.labelSize ?? 11;
+    // SVG building
+    let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" style="overflow:visible">`;
+    // Chart title
+    if (chart.title) {
+        const tFont = chart.titleFont ? `font-family:${cssFontFamily(chart.titleFont)};` : `font-family:${cssFontFamily(labelFont)};`;
+        const tColor = chart.titleColor ?? "#000";
+        const tSize = chart.titleSize ?? 16;
+        svg += `<text x="${w / 2}" y="${8 + tSize}" text-anchor="middle" `
+            + `style="${tFont}font-size:${tSize}px;font-weight:bold;fill:${tColor}">`
+            + `${escSvg(chart.title)}</text>`;
+    }
+    // Gridlines
+    if (chart.valueAxis) {
+        const gColor = chart.valueAxis.gridlineColor ?? "#e0e0e0";
+        const gAlpha = chart.valueAxis.gridlineAlpha !== undefined
+            ? chart.valueAxis.gridlineAlpha / 100
+            : 0.3;
+        for (const tick of ticks) {
+            const tickY = plotY + plotH - ((tick - minValue) / valueRange) * plotH;
+            svg += `<line x1="${plotX}" y1="${tickY}" x2="${plotX + plotW}" y2="${tickY}" `
+                + `stroke="${gColor}" stroke-opacity="${gAlpha}" stroke-width="1"/>`;
+        }
+    }
+    // Bars (column chart: vertical bars)
+    const numCategories = chart.series[0]?.categories.length ?? 0;
+    const numSeries = chart.series.length;
+    if (numCategories > 0) {
+        const gapFraction = (chart.gapWidth ?? 150) / 100;
+        const categoryWidth = plotW / numCategories;
+        const barGroupWidth = categoryWidth / (1 + gapFraction);
+        const gapSpace = categoryWidth - barGroupWidth;
+        const barWidth = barGroupWidth / numSeries;
+        const cornerRadius = chart.roundedCorners ? Math.min(barWidth * 0.15, 4) : 0;
+        for (let si = 0; si < numSeries; si++) {
+            const s = chart.series[si];
+            for (let ci = 0; ci < s.values.length; ci++) {
+                const val = s.values[ci];
+                const barH = ((val - minValue) / valueRange) * plotH;
+                const barX = plotX + ci * categoryWidth + gapSpace / 2 + si * barWidth;
+                const barY = plotY + plotH - barH;
+                // Color: per-data-point > series-level > default
+                const fillColor = s.fillColors[ci] ?? s.seriesColor ?? "#4472C4";
+                if (cornerRadius > 0) {
+                    // Rounded top corners only
+                    const r = Math.min(cornerRadius, barH / 2, barWidth / 2);
+                    svg += `<path d="M${barX},${barY + barH} `
+                        + `L${barX},${barY + r} `
+                        + `Q${barX},${barY} ${barX + r},${barY} `
+                        + `L${barX + barWidth - r},${barY} `
+                        + `Q${barX + barWidth},${barY} ${barX + barWidth},${barY + r} `
+                        + `L${barX + barWidth},${barY + barH} Z" `
+                        + `fill="${fillColor}"/>`;
+                }
+                else {
+                    svg += `<rect x="${barX}" y="${barY}" width="${barWidth}" height="${barH}" `
+                        + `fill="${fillColor}"/>`;
+                }
+            }
+        }
+    }
+    // Axis lines
+    // Bottom axis (x)
+    svg += `<line x1="${plotX}" y1="${plotY + plotH}" x2="${plotX + plotW}" y2="${plotY + plotH}" `
+        + `stroke="${labelColor}" stroke-width="1"/>`;
+    // Left axis (y)
+    svg += `<line x1="${plotX}" y1="${plotY}" x2="${plotX}" y2="${plotY + plotH}" `
+        + `stroke="${valLabelColor}" stroke-width="1"/>`;
+    // Category labels (bottom)
+    if (numCategories > 0) {
+        const categoryWidth = plotW / numCategories;
+        const cats = chart.series[0]?.categories ?? [];
+        for (let ci = 0; ci < cats.length; ci++) {
+            const labelX = plotX + ci * categoryWidth + categoryWidth / 2;
+            const labelY = plotY + plotH + 4;
+            const catText = cats[ci];
+            // Handle multi-line labels (split by newline)
+            const lines = catText.split("\n");
+            const lineH = labelSize + 2;
+            for (let li = 0; li < lines.length; li++) {
+                svg += `<text x="${labelX}" y="${labelY + labelSize + li * lineH}" `
+                    + `text-anchor="middle" `
+                    + `style="font-family:${cssFontFamily(labelFont)};font-size:${labelSize}px;fill:${labelColor}">`
+                    + `${escSvg(lines[li])}</text>`;
+            }
+        }
+    }
+    // Value axis labels (left)
+    for (const tick of ticks) {
+        const tickY = plotY + plotH - ((tick - minValue) / valueRange) * plotH;
+        const label = formatChartValue(tick, valNumFormat);
+        svg += `<text x="${plotX - 6}" y="${tickY + valLabelSize * 0.35}" `
+            + `text-anchor="end" `
+            + `style="font-family:${cssFontFamily(labelFont)};font-size:${valLabelSize}px;fill:${valLabelColor}">`
+            + `${escSvg(label)}</text>`;
+    }
+    // Category axis title (bottom)
+    if (chart.categoryAxis?.title) {
+        const axTitleY = plotY + plotH + axisLabelHeight + axisTitleHeight + 2;
+        svg += `<text x="${plotX + plotW / 2}" y="${axTitleY}" `
+            + `text-anchor="middle" `
+            + `style="font-family:${cssFontFamily(labelFont)};font-size:${labelSize}px;fill:${labelColor}">`
+            + `${escSvg(chart.categoryAxis.title)}</text>`;
+    }
+    // Value axis title (left, rotated)
+    if (chart.valueAxis?.title) {
+        const axTitleX = 4 + (chart.titleSize ?? 12) * 0.5;
+        const axTitleY = plotY + plotH / 2;
+        svg += `<text x="${axTitleX}" y="${axTitleY}" `
+            + `text-anchor="middle" `
+            + `transform="rotate(-90, ${axTitleX}, ${axTitleY})" `
+            + `style="font-family:${cssFontFamily(labelFont)};font-size:${labelSize}px;fill:${valLabelColor}">`
+            + `${escSvg(chart.valueAxis.title)}</text>`;
+    }
+    svg += `</svg>`;
+    // Wrap in positioned div
+    const wrapperStyles = [
+        "position:absolute",
+        `left:${x}px`,
+        `top:${y}px`,
+        `width:${w}px`,
+        `height:${h}px`,
+    ];
+    return `<div id="${elId}" data-elementType="chart" style="${wrapperStyles.join(";")}">${svg}</div>\n`;
+}
+function renderSlideHtml(elements, bgColor, contentOffsetX = 0) {
     let inner = "";
     let elementIndex = 0;
     for (const el of elements) {
         const elId = `el-${elementIndex++}`;
         if (el.kind === "image") {
             const img = el.data;
-            // Detect images that should use object-fit:cover:
-            // 1. Fullbleed images (covering entire slide)
-            // 2. Images with srcRect cropping applied (hasCrop)
+            const altAttr = img.alt
+                ? ` alt="${img.alt.replace(/"/g, "&quot;")}"`
+                : "";
+            // Detect fullbleed images (covering entire slide)
             const isFullbleed = img.x <= 10 && img.y <= 10 &&
                 img.w >= TARGET_WIDTH - 20 && img.h >= TARGET_HEIGHT - 20;
-            const objectFit = isFullbleed || img.hasCrop ? "cover" : "contain";
+            // Images with srcRect cropping: use div wrapper + overflow:hidden approach
+            // This correctly reproduces PPTX srcRect behavior by:
+            // 1. Computing the visible fraction of the source image
+            // 2. Scaling the image so the visible region fills the element
+            // 3. Offsetting to align the crop region
+            // 4. Clipping with overflow:hidden
+            if (img.hasCrop && img.cropLeft !== undefined && img.cropTop !== undefined &&
+                img.cropRight !== undefined && img.cropBottom !== undefined) {
+                const visW = (100 - img.cropLeft - img.cropRight) / 100;
+                const visH = (100 - img.cropTop - img.cropBottom) / 100;
+                // Guard against zero/negative visible fractions
+                if (visW > 0 && visH > 0) {
+                    // Scale image so visible region fills the element dimensions
+                    const displayW = img.w / visW;
+                    const displayH = img.h / visH;
+                    // Offset to position the visible region at the element origin
+                    const offsetX = -(img.cropLeft / 100) * displayW;
+                    const offsetY = -(img.cropTop / 100) * displayH;
+                    // Build wrapper div styles
+                    const wrapperStyles = [
+                        "position:absolute",
+                        `left:${img.x}px`,
+                        `top:${img.y}px`,
+                        `width:${img.w}px`,
+                        `height:${img.h}px`,
+                        "overflow:hidden",
+                    ];
+                    // Apply rotation to wrapper if present (PPTX rotation around element center)
+                    if (img.rotation) {
+                        wrapperStyles.push(`transform:rotate(${img.rotation}deg)`);
+                        wrapperStyles.push("transform-origin:center center");
+                    }
+                    // Add border-radius to wrapper if present
+                    if (img.borderRadius && img.borderRadius > 0) {
+                        wrapperStyles.push(`border-radius:${img.borderRadius}px`);
+                    }
+                    const imgStyle = `position:absolute;width:${Math.round(displayW)}px;height:${Math.round(displayH)}px;left:${Math.round(offsetX)}px;top:${Math.round(offsetY)}px`;
+                    inner += `<div id="${elId}" data-elementType="image" style="${wrapperStyles.join(";")}">`;
+                    inner += `<img src="${img.dataUri}"${altAttr} style="${imgStyle}" />`;
+                    inner += `</div>\n`;
+                    continue;
+                }
+            }
+            // Non-cropped images (or fallback): use simple img with object-fit
+            const objectFit = isFullbleed ? "cover" : "contain";
             const stylesList = [
                 "position:absolute",
                 `left:${img.x}px`,
@@ -944,14 +1890,16 @@ function renderSlideHtml(elements, bgColor) {
                 `height:${img.h}px`,
                 `object-fit:${objectFit}`,
             ];
+            // Apply rotation if present (PPTX rotation around element center)
+            if (img.rotation) {
+                stylesList.push(`transform:rotate(${img.rotation}deg)`);
+                stylesList.push("transform-origin:center center");
+            }
             // Add border-radius if present
             if (img.borderRadius && img.borderRadius > 0) {
                 stylesList.push(`border-radius:${img.borderRadius}px`);
             }
             const styles = stylesList.join(";");
-            const altAttr = img.alt
-                ? ` alt="${img.alt.replace(/"/g, "&quot;")}"`
-                : "";
             inner += `<img id="${elId}" data-elementType="image" src="${img.dataUri}"${altAttr} style="${styles}" />\n`;
             continue;
         }
@@ -1045,6 +1993,8 @@ function renderSlideHtml(elements, bgColor) {
                                 rStyles.push("font-weight:bold");
                             if (run.italic)
                                 rStyles.push("font-style:italic");
+                            if (run.underline)
+                                rStyles.push("text-decoration:underline");
                             if (run.fontFamily)
                                 rStyles.push(`font-family:${cssFontFamily(run.fontFamily)}`);
                             if (run.textShadow)
@@ -1070,6 +2020,11 @@ function renderSlideHtml(elements, bgColor) {
             inner += `<div id="${elId}" data-elementType="table" style="${tableStyles.join(";")}">${tableHtml}</div>\n`;
             continue;
         }
+        if (el.kind === "chart") {
+            const chart = el.data;
+            inner += renderChartSvg(chart, elId);
+            continue;
+        }
         const shape = el.data;
         const styles = [
             "position:absolute",
@@ -1082,6 +2037,12 @@ function renderSlideHtml(elements, bgColor) {
         if (shape.fill) {
             styles.push(`background:${shape.fill}`);
         }
+        if (shape.clipPath) {
+            styles.push(`clip-path:${shape.clipPath}`);
+        }
+        if (shape.rotation) {
+            styles.push(`transform:rotate(${shape.rotation}deg)`);
+        }
         if (shape.borderRadius) {
             styles.push(`border-radius:${shape.borderRadius}px`);
         }
@@ -1118,7 +2079,12 @@ function renderSlideHtml(elements, bgColor) {
             else if (shape.verticalAlign === "bottom")
                 styles.push("justify-content:flex-end");
         }
-        if (shape.paragraphs.length === 0 && !shape.fill) {
+        // Skip zero-dimension shapes (e.g. geometry-driven shapes like right triangles
+        // where the visible area comes from path data, not bounding box)
+        if (shape.w <= 0 || shape.h <= 0) {
+            continue;
+        }
+        if (shape.paragraphs.length === 0 && !shape.fill && !shape.borderWidth && !shape.isEllipse) {
             continue;
         }
         const hasText = shape.paragraphs.length > 0;
@@ -1144,10 +2110,16 @@ function renderSlideHtml(elements, bgColor) {
                 pStyles.push(`text-indent:${para.indentPx}px`);
             let runHtml = "";
             if (para.bulletChar) {
-                const bulletStyle = para.bulletColor
-                    ? `margin-right:4px;color:${para.bulletColor}`
-                    : "margin-right:4px";
-                runHtml += `<span style="${bulletStyle}">${para.bulletChar}</span>`;
+                const bulletStyleParts = ["margin-right:4px"];
+                if (para.bulletColor)
+                    bulletStyleParts.push(`color:${para.bulletColor}`);
+                if (para.bulletFont)
+                    bulletStyleParts.push(`font-family:${cssFontFamily(para.bulletFont)}`);
+                // Inherit font size from the first text run so bullet matches text size
+                const firstRunFontSize = para.runs[0]?.fontSize;
+                if (firstRunFontSize)
+                    bulletStyleParts.push(`font-size:${firstRunFontSize}px`);
+                runHtml += `<span style="${bulletStyleParts.join(";")}">${para.bulletChar}</span>`;
             }
             for (const run of para.runs) {
                 const rStyles = [];
@@ -1167,6 +2139,8 @@ function renderSlideHtml(elements, bgColor) {
                     rStyles.push("font-weight:bold");
                 if (run.italic)
                     rStyles.push("font-style:italic");
+                if (run.underline)
+                    rStyles.push("text-decoration:underline");
                 if (run.fontFamily)
                     rStyles.push(`font-family:${cssFontFamily(run.fontFamily)}`);
                 if (run.textShadow)
@@ -1187,7 +2161,10 @@ function renderSlideHtml(elements, bgColor) {
         inner += `<div${idAttr} style="${styles.join(";")}">${content}</div>\n`;
     }
     const bg = bgColor ?? "#fff";
-    return `<div style="position:relative;width:${TARGET_WIDTH}px;height:${TARGET_HEIGHT}px;overflow:hidden;font-family:'Segoe UI',Arial,sans-serif;background:${bg}">\n${inner}</div>`;
+    // For non-16:9 slides, horizontally center the content within the target container
+    const offsetPx = Math.round(contentOffsetX);
+    const innerWrapStyle = offsetPx > 0 ? ` style="position:absolute;left:${offsetPx}px;top:0"` : "";
+    return `<div style="position:relative;width:${TARGET_WIDTH}px;height:${TARGET_HEIGHT}px;overflow:hidden;font-family:'Segoe UI',Arial,sans-serif;background:${bg}">\n<div${innerWrapStyle}>\n${inner}</div>\n</div>`;
 }
 // ============================================================================
 // Main Export Function
@@ -1211,6 +2188,9 @@ export default async function importPptx(arrayBuffer) {
     const slideWPx = emuToPx(slideWEmu);
     const slideHPx = emuToPx(slideHEmu);
     const scale = Math.min(TARGET_WIDTH / slideWPx, TARGET_HEIGHT / slideHPx);
+    // For non-16:9 slides, calculate horizontal offset to center content
+    const scaledContentW = slideWPx * scale;
+    const contentOffsetX = (TARGET_WIDTH - scaledContentW) / 2;
     // Get visible slides from sldIdLst in presentation.xml
     // This determines which slides are actually included in the presentation
     const sldIdLst = presDoc.getElementsByTagName("p:sldIdLst")[0];
@@ -1271,6 +2251,8 @@ export default async function importPptx(arrayBuffer) {
     // Parse theme colors
     const themeColors = new Map();
     const themeXml = await zip.file("ppt/theme/theme1.xml")?.async("text");
+    // Parse bgFillStyleLst from theme for bgRef resolution
+    const bgFillStyles = [];
     if (themeXml) {
         const themeDoc = parser.parseFromString(themeXml, "application/xml");
         const clrScheme = themeDoc.getElementsByTagName("a:clrScheme")[0];
@@ -1317,6 +2299,13 @@ export default async function importPptx(arrayBuffer) {
         const lt2Color = themeColors.get("lt2");
         if (lt2Color)
             themeColors.set("bg2", lt2Color);
+        // Parse bgFillStyleLst for resolving bgRef elements
+        const bgFillStyleLst = themeDoc.getElementsByTagName("a:bgFillStyleLst")[0];
+        if (bgFillStyleLst) {
+            for (let i = 0; i < bgFillStyleLst.children.length; i++) {
+                bgFillStyles.push(bgFillStyleLst.children[i]);
+            }
+        }
     }
     // Parse theme fonts
     let themeFonts;
@@ -1362,35 +2351,164 @@ export default async function importPptx(arrayBuffer) {
         fontStyleBlock = `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${fontFamilies}&display=swap">`;
     }
     const slides = [];
+    // ---- Parse slide master for background and decorative shapes ----
+    // Master shapes appear behind slide content when the layout has showMasterSp != "0"
+    let masterBg;
+    let masterDecorativeElements = [];
+    const masterXml = await zip.file("ppt/slideMasters/slideMaster1.xml")?.async("text");
+    if (masterXml) {
+        const masterDoc = parser.parseFromString(masterXml, "application/xml");
+        // Master background
+        const masterBgEl = masterDoc.getElementsByTagName("p:bg")[0];
+        if (masterBgEl) {
+            masterBg = extractBgFill(masterBgEl, bgFillStyles, themeColors);
+        }
+        // Master decorative shapes (build image map from master rels)
+        const masterImageMap = new Map();
+        const masterRelsXml = await zip.file("ppt/slideMasters/_rels/slideMaster1.xml.rels")?.async("text");
+        if (masterRelsXml) {
+            const relsDoc = parser.parseFromString(masterRelsXml, "application/xml");
+            const rels = relsDoc.getElementsByTagName("Relationship");
+            for (let ri = 0; ri < rels.length; ri++) {
+                const rel = rels[ri];
+                const type = rel.getAttribute("Type") ?? "";
+                if (!type.includes("/image"))
+                    continue;
+                const rId = rel.getAttribute("Id");
+                const target = rel.getAttribute("Target");
+                if (!rId || !target)
+                    continue;
+                const mediaPath = target.startsWith("../") ? "ppt/" + target.slice(3) : 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 === "svg" ? "image/svg+xml" : `image/${ext}`;
+                masterImageMap.set(rId, `data:${mime};base64,${imgData}`);
+            }
+        }
+        const masterSpTree = masterDoc.getElementsByTagName("p:spTree")[0];
+        if (masterSpTree) {
+            masterDecorativeElements = parseDecorativeShapes(masterSpTree, scale, themeColors, masterImageMap, themeFonts);
+        }
+    }
+    // ---- Cache parsed slide layouts ----
+    // Maps layout file path to { bg, showMasterSp, decorativeElements }
+    const layoutCache = new Map();
+    async function getLayoutInfo(layoutPath) {
+        if (layoutCache.has(layoutPath))
+            return layoutCache.get(layoutPath);
+        const result = { bg: undefined, showMasterSp: true, decorativeElements: [] };
+        const layoutXml = await zip.file(layoutPath)?.async("text");
+        if (layoutXml) {
+            const layoutDoc = parser.parseFromString(layoutXml, "application/xml");
+            // Check showMasterSp attribute on cSld
+            const cSld = layoutDoc.getElementsByTagName("p:cSld")[0];
+            // showMasterSp is on the root element of the layout
+            const rootEl = layoutDoc.documentElement;
+            const showMasterSpAttr = rootEl.getAttribute("showMasterSp");
+            if (showMasterSpAttr === "0") {
+                result.showMasterSp = false;
+            }
+            // Layout background
+            const layoutBgEl = layoutDoc.getElementsByTagName("p:bg")[0];
+            if (layoutBgEl) {
+                result.bg = extractBgFill(layoutBgEl, bgFillStyles, themeColors);
+            }
+            // Layout decorative shapes (build image map from layout rels)
+            const layoutImageMap = new Map();
+            const layoutBaseName = layoutPath.split("/").pop();
+            const layoutRelsPath = layoutPath.replace(layoutBaseName, `_rels/${layoutBaseName}.rels`);
+            const layoutRelsXml = await zip.file(layoutRelsPath)?.async("text");
+            if (layoutRelsXml) {
+                const relsDoc = parser.parseFromString(layoutRelsXml, "application/xml");
+                const rels = relsDoc.getElementsByTagName("Relationship");
+                for (let ri = 0; ri < rels.length; ri++) {
+                    const rel = rels[ri];
+                    const type = rel.getAttribute("Type") ?? "";
+                    if (!type.includes("/image"))
+                        continue;
+                    const rId = rel.getAttribute("Id");
+                    const target = rel.getAttribute("Target");
+                    if (!rId || !target)
+                        continue;
+                    const mediaPath = target.startsWith("../") ? "ppt/" + target.slice(3) : 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 === "svg" ? "image/svg+xml" : `image/${ext}`;
+                    layoutImageMap.set(rId, `data:${mime};base64,${imgData}`);
+                }
+            }
+            const layoutSpTree = layoutDoc.getElementsByTagName("p:spTree")[0];
+            if (layoutSpTree) {
+                result.decorativeElements = parseDecorativeShapes(layoutSpTree, scale, themeColors, layoutImageMap, themeFonts);
+            }
+        }
+        layoutCache.set(layoutPath, result);
+        return result;
+    }
     for (const slideFile of slideFiles) {
         const slideXml = await zip.file(slideFile)?.async("text");
         if (!slideXml)
             continue;
         const slideDoc = parser.parseFromString(slideXml, "application/xml");
         const spTree = slideDoc.getElementsByTagName("p:spTree")[0];
-        // Extract slide background
+        // ---- Resolve background with inheritance chain: slide → layout → master ----
         let slideBg = undefined;
         const bgEl = slideDoc.getElementsByTagName("p:bg")[0];
         if (bgEl) {
-            const bgPr = findChild(bgEl, "bgPr");
-            if (bgPr) {
-                slideBg = extractFill(bgPr, themeColors);
-            }
+            slideBg = extractBgFill(bgEl, bgFillStyles, themeColors);
         }
-        if (!spTree) {
-            slides.push(renderSlideHtml([], slideBg));
-            continue;
-        }
-        // Build image map from slide rels
-        const imageMap = new Map();
+        // Determine which layout this slide uses (from slide rels)
         const slideBaseName = slideFile.split("/").pop();
         const relsPath = slideFile.replace(slideBaseName, `_rels/${slideBaseName}.rels`);
         const relsXml = await zip.file(relsPath)?.async("text");
+        let layoutPath;
         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];
+            for (let ri = 0; ri < rels.length; ri++) {
+                const rel = rels[ri];
+                const type = rel.getAttribute("Type") ?? "";
+                if (type.includes("/slideLayout")) {
+                    const target = rel.getAttribute("Target");
+                    if (target) {
+                        layoutPath = target.startsWith("../")
+                            ? "ppt/" + target.slice(3)
+                            : "ppt/slides/" + target;
+                    }
+                    break;
+                }
+            }
+        }
+        // Get layout info for background and shape inheritance
+        let layoutInfo;
+        if (layoutPath) {
+            layoutInfo = await getLayoutInfo(layoutPath);
+        }
+        // Background inheritance: slide bg → layout bg → master bg
+        if (!slideBg && layoutInfo?.bg) {
+            slideBg = layoutInfo.bg;
+        }
+        if (!slideBg && masterBg) {
+            slideBg = masterBg;
+        }
+        if (!spTree) {
+            slides.push(renderSlideHtml([], slideBg, contentOffsetX));
+            continue;
+        }
+        // Build image map from slide rels (reuse relsXml parsed above for layout lookup)
+        const imageMap = new Map();
+        // Parse rels document once for both image map and chart resolution
+        const slideRelsDoc = relsXml ? parser.parseFromString(relsXml, "application/xml") : null;
+        if (slideRelsDoc) {
+            const rels = slideRelsDoc.getElementsByTagName("Relationship");
+            for (let ri = 0; ri < rels.length; ri++) {
+                const rel = rels[ri];
                 const type = rel.getAttribute("Type") ?? "";
                 if (!type.includes("/image"))
                     continue;
@@ -1416,6 +2534,15 @@ export default async function importPptx(arrayBuffer) {
         }
         // Parse all elements
         const elements = [];
+        if (layoutInfo?.showMasterSp !== false) {
+            // Master shapes are shown unless layout explicitly hides them
+            elements.push(...masterDecorativeElements);
+        }
+        // Layout decorative shapes appear after master shapes, before slide content
+        if (layoutInfo?.decorativeElements) {
+            elements.push(...layoutInfo.decorativeElements);
+        }
+        // Parse slide's own elements
         for (let i = 0; i < spTree.children.length; i++) {
             const child = spTree.children[i];
             if (child.localName === "sp") {
@@ -1430,11 +2557,17 @@ export default async function importPptx(arrayBuffer) {
             }
             else if (child.localName === "graphicFrame") {
                 const table = parseTable(child, scale, themeColors, themeFonts, tableStyleMap);
-                if (table)
+                if (table) {
                     elements.push({ kind: "table", data: table });
+                }
+                else if (slideRelsDoc) {
+                    const chart = await parseChart(child, scale, themeColors, zip, slideRelsDoc, parser);
+                    if (chart)
+                        elements.push({ kind: "chart", data: chart });
+                }
             }
         }
-        slides.push(renderSlideHtml(elements, slideBg));
+        slides.push(renderSlideHtml(elements, slideBg, contentOffsetX));
     }
     // Prepend font style block to first slide so embedded fonts load via Google Fonts
     if (fontStyleBlock && slides.length > 0) {