docgen-utils 1.0.11 → 1.0.12

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

@@ -5,6 +5,7 @@
  * Usage: const slides = await importPptx(arrayBuffer);
  */
 import JSZip from "jszip";
+import { cssFontFamily } from "./fonts";
 // ============================================================================
 // Constants
 // ============================================================================
@@ -13,121 +14,9 @@ const TARGET_WIDTH = 1280;
 const TARGET_HEIGHT = 720;
 // EMU (English Metric Units) to pixels: 1 inch = 914400 EMU, 96 DPI
 const EMU_PER_PX = 914400 / 96;
-// Font fallback mapping: maps fonts that may not be installed to the closest
-// available alternatives. This improves rendering fidelity when exact fonts
-// are not present on the system. Each value is a comma-separated CSS font stack.
-const FONT_FALLBACK_MAP = {
-    // Microsoft Office fonts → metrically compatible open-source alternatives
-    "Calibri": "'Calibri','Carlito','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Calibri Light": "'Calibri Light','Carlito','Helvetica Neue Light','Helvetica Neue',Arial,sans-serif",
-    "Cambria": "'Cambria','Caladea','Times New Roman',Georgia,serif",
-    "Cambria Math": "'Cambria Math','Caladea','Times New Roman',serif",
-    "Consolas": "'Consolas','Courier New',monospace",
-    "Aptos": "'Aptos','Carlito','Helvetica Neue',Arial,sans-serif",
-    "Times New Roman": "'Times New Roman','Liberation Serif',Georgia,serif",
-    // Handwriting / decorative fonts
-    "MV Boli": "'MV Boli','Comic Sans MS','Marker Felt',cursive",
-    "Kristen ITC": "'Kristen ITC','Comic Sans MS','Marker Felt',cursive",
-    "Stylus BT": "'Stylus BT','Brush Script MT','Snell Roundhand',cursive",
-    // Japanese sans-serif fonts → Noto Sans CJK JP (commonly installed)
-    "MS Gothic": "'MS Gothic','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif",
-    "MS PGothic": "'MS PGothic','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif",
-    "ＭＳ Ｐゴシック": "'ＭＳ Ｐゴシック','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif",
-    "ＭＳ ゴシック": "'ＭＳ ゴシック','Noto Sans CJK JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif",
-    "Kozuka Gothic Pro R": "'Kozuka Gothic Pro R','Noto Sans CJK JP','Hiragino Kaku Gothic ProN',sans-serif",
-    "Kozuka Gothic Pro B": "'Kozuka Gothic Pro B','Noto Sans CJK JP Bold','Hiragino Kaku Gothic ProN',sans-serif",
-    "Kozuka Gothic Pro M": "'Kozuka Gothic Pro M','Noto Sans CJK JP Medium','Hiragino Kaku Gothic ProN',sans-serif",
-    "Kozuka Gothic Pro EL": "'Kozuka Gothic Pro EL','Noto Sans CJK JP Light','Hiragino Kaku Gothic ProN',sans-serif",
-    "HGSKyokashotai": "'HGSKyokashotai','Noto Sans CJK JP','Hiragino Kaku Gothic ProN',sans-serif",
-    // Japanese serif fonts → Noto Serif CJK JP
-    "MS Mincho": "'MS Mincho','Noto Serif CJK JP','Hiragino Mincho ProN','Yu Mincho',serif",
-    "MS PMincho": "'MS PMincho','Noto Serif CJK JP','Hiragino Mincho ProN','Yu Mincho',serif",
-    // CJK fonts
-    "宋体": "'宋体','Noto Serif CJK SC','Songti SC','STSong',serif",
-    "新細明體": "'新細明體','Noto Serif CJK TC','Songti TC',serif",
-    "黑体": "'黑体','Noto Sans CJK SC','Heiti SC','STHeiti',sans-serif",
-    "微軟正黑體": "'微軟正黑體','Noto Sans CJK TC','Heiti TC',sans-serif",
-    "맑은 고딕": "'맑은 고딕','Apple SD Gothic Neo',sans-serif",
-    // UI / system fonts
-    "Lucida Sans Unicode": "'Lucida Sans Unicode','Lucida Grande','Lucida Sans',sans-serif",
-    "Segoe UI": "'Segoe UI','-apple-system','Helvetica Neue',sans-serif",
-    "Segoe Sans Display": "'Segoe Sans Display','-apple-system','Helvetica Neue',Arial,sans-serif",
-    "Segoe Sans Display Semibold": "'Segoe Sans Display Semibold','-apple-system','Helvetica Neue',Arial,sans-serif",
-    // Google Fonts / web fonts commonly used in presentations
-    "Inter": "'Inter','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Inter Light": "'Inter Light','Inter','Helvetica Neue',Arial,sans-serif",
-    "Inter ExtraBold": "'Inter ExtraBold','Inter','Helvetica Neue',Arial,sans-serif",
-    "Space Grotesk": "'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Montserrat": "'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Open Sans": "'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Lato": "'Lato','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Oswald": "'Oswald','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Archivo": "'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Economica": "'Economica','Helvetica Neue',Arial,sans-serif",
-    "Libre Baskerville": "'Libre Baskerville','Georgia','Times New Roman',serif",
-    // GitHub Copilot fonts
-    "Ginto Copilot": "'Ginto Copilot','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Ginto Copilot Light": "'Ginto Copilot Light','Helvetica Neue Light','Helvetica Neue',Arial,sans-serif",
-    "Ginto Copilot 400": "'Ginto Copilot 400','Helvetica Neue',Helvetica,Arial,sans-serif",
-    // Google Fonts / decorative (serif & display)
-    "Playfair Display": "'Playfair Display','Georgia','Times New Roman',serif",
-    "Playfair Display SemiBold": "'Playfair Display SemiBold','Playfair Display','Georgia',serif",
-    "Caveat": "'Caveat','Comic Sans MS','Marker Felt',cursive",
-    "Syncopate": "'Syncopate','Helvetica Neue',Helvetica,Arial,sans-serif",
-    // Montserrat weight variants
-    "Montserrat SemiBold": "'Montserrat SemiBold','Montserrat','Helvetica Neue',Arial,sans-serif",
-    "Montserrat ExtraBold": "'Montserrat ExtraBold','Montserrat','Helvetica Neue',Arial,sans-serif",
-    // GitHub Copilot font variants
-    "Ginto Copilot Medium": "'Ginto Copilot Medium','Ginto Copilot','Helvetica Neue',Arial,sans-serif",
-    "Ginto Copilot Black": "'Ginto Copilot Black','Ginto Copilot','Helvetica Neue',Arial,sans-serif",
-    "Ginto Copilot Thin": "'Ginto Copilot Thin','Ginto Copilot Light','Helvetica Neue',Arial,sans-serif",
-    // Microsoft UI fonts
-    "Segoe Sans Small Regular": "'Segoe Sans Small Regular','Segoe UI','-apple-system','Helvetica Neue',sans-serif",
-    "Segoe Sans Text Regular": "'Segoe Sans Text Regular','Segoe UI','-apple-system','Helvetica Neue',sans-serif",
-    "Grandview": "'Grandview','Helvetica Neue',Arial,sans-serif",
-    "Nirmala UI": "'Nirmala UI','Helvetica Neue',Arial,sans-serif",
-    "Ebrima": "'Ebrima','Helvetica Neue',Arial,sans-serif",
-    // Common system fonts with fallbacks
-    "Arial": "Arial,'Helvetica Neue',Helvetica,sans-serif",
-    "Arial Black": "'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif",
-    "Georgia": "Georgia,'Times New Roman',serif",
-    "Georgia Regular": "'Georgia Regular',Georgia,'Times New Roman',serif",
-    "Courier New": "'Courier New',Courier,monospace",
-    "Times": "Times,'Times New Roman',serif",
-    // Symbol fonts (preserved as-is with system fallback)
-    "Wingdings": "'Wingdings','Zapf Dingbats',sans-serif",
-    "Wingdings 2": "'Wingdings 2','Zapf Dingbats',sans-serif",
-    "Wingdings 3": "'Wingdings 3','Zapf Dingbats',sans-serif",
-    // Common fallbacks
-    "Tahoma": "'Tahoma','Verdana','Geneva',sans-serif",
-    "Verdana": "'Verdana','Geneva',sans-serif",
-    "Helvetica Neue Light": "'Helvetica Neue Light','Helvetica Neue',Helvetica,Arial,sans-serif",
-};
 // ============================================================================
 // Utility Functions
 // ============================================================================
-/**
- * Returns a CSS font-family value for the given font name.
- * Uses FONT_FALLBACK_MAP to provide platform-appropriate fallbacks
- * for fonts that may not be installed on the system.
- */
-function cssFontFamily(fontName) {
-    const mapped = FONT_FALLBACK_MAP[fontName];
-    if (mapped)
-        return mapped;
-    // Handle malformed typeface attributes that already contain commas (e.g. "Arial,Sans-Serif")
-    if (fontName.includes(',')) {
-        return fontName.split(',').map(f => {
-            const trimmed = f.trim();
-            const lower = trimmed.toLowerCase();
-            if (lower === 'sans-serif' || lower === 'serif' || lower === 'monospace' || lower === 'cursive' || lower === 'fantasy') {
-                return lower;
-            }
-            return `'${trimmed}'`;
-        }).join(',');
-    }
-    return `'${fontName}',sans-serif`;
-}
 function emuToPx(emu) {
     return emu / EMU_PER_PX;
 }
@@ -238,7 +127,7 @@ function extractFill(spPr, themeColors) {
         return resolveColor(solidFill, themeColors);
     return extractGradientFill(spPr, themeColors);
 }
-function extractRunProps(rPr, scale, themeColors) {
+function extractRunProps(rPr, scale, themeColors, themeFonts) {
     if (!rPr)
         return {};
     const result = {};
@@ -291,10 +180,32 @@ function extractRunProps(rPr, scale, themeColors) {
     }
     const latin = findChild(rPr, "latin");
     if (latin) {
-        const typeface = latin.getAttribute("typeface");
-        if (typeface)
+        let typeface = latin.getAttribute("typeface");
+        if (typeface && themeFonts) {
+            // Resolve theme font references
+            if (typeface === "+mn-lt")
+                typeface = themeFonts.minorLatin;
+            else if (typeface === "+mj-lt")
+                typeface = themeFonts.majorLatin;
+        }
+        if (typeface && !typeface.startsWith("+"))
             result.fontFamily = typeface;
     }
+    // Fallback: check East Asian font
+    if (!result.fontFamily) {
+        const ea = findChild(rPr, "ea");
+        if (ea) {
+            let typeface = ea.getAttribute("typeface");
+            if (typeface && themeFonts) {
+                if (typeface === "+mn-ea")
+                    typeface = themeFonts.minorEastAsian ?? themeFonts.minorLatin;
+                else if (typeface === "+mj-ea")
+                    typeface = themeFonts.majorEastAsian ?? themeFonts.majorLatin;
+            }
+            if (typeface && !typeface.startsWith("+"))
+                result.fontFamily = typeface;
+        }
+    }
     // Extract glow effect from effectLst
     const effectLst = findChild(rPr, "effectLst");
     if (effectLst) {
@@ -344,7 +255,7 @@ function extractRunProps(rPr, scale, themeColors) {
 // ============================================================================
 // Parsing Functions
 // ============================================================================
-function parseShape(sp, scale, themeColors) {
+function parseShape(sp, scale, themeColors, themeFonts) {
     const spPr = findChild(sp, "spPr");
     if (!spPr)
         return null;
@@ -450,10 +361,23 @@ function parseShape(sp, scale, themeColors) {
                     para.indentPx = Math.round(emuToPx(parseInt(indent, 10)) * scale);
                 const defRPr = findChild(pPr, "defRPr");
                 if (defRPr) {
-                    defaults = extractRunProps(defRPr, scale, themeColors);
+                    defaults = extractRunProps(defRPr, scale, themeColors, themeFonts);
                 }
                 const lnSpc = findChild(pPr, "lnSpc");
                 if (lnSpc) {
+                    const spcPct = findChild(lnSpc, "spcPct");
+                    if (spcPct) {
+                        const pctVal = parseInt(spcPct.getAttribute("val") ?? "100000", 10);
+                        // PPTX spcPct 100000 = 100% = "single" spacing.
+                        // In CSS, line-height:100% is actually tighter than normal (~120%),
+                        // so we only emit lineSpacingPercent when it differs from the default.
+                        // This avoids both the tighter-than-intended 100% and the text-overflow
+                        // issues caused by large values like 160% inside fixed-height boxes.
+                        const pct = pctVal / 1000;
+                        if (pct !== 100) {
+                            para.lineSpacingPercent = pct;
+                        }
+                    }
                     const spcPts = findChild(lnSpc, "spcPts");
                     if (spcPts) {
                         para.lineSpacingPt =
@@ -480,6 +404,11 @@ function parseShape(sp, scale, themeColors) {
                 if (buChar) {
                     para.bulletChar = buChar.getAttribute("char") ?? undefined;
                 }
+                // Bullet color
+                const buClr = findChild(pPr, "buClr");
+                if (buClr) {
+                    para.bulletColor = resolveColor(buClr, themeColors);
+                }
             }
             // Iterate over all children to handle both text runs (<a:r>) and line breaks (<a:br>)
             // This ensures proper spacing when text spans multiple lines
@@ -491,7 +420,7 @@ function parseShape(sp, scale, themeColors) {
                 if (localName === 'r') {
                     // Text run
                     const rPr = findChild(el, "rPr");
-                    const props = extractRunProps(rPr, scale, themeColors);
+                    const props = extractRunProps(rPr, scale, themeColors, themeFonts);
                     const tEls = findChildren(el, "t");
                     const text = tEls.map((t) => t.textContent ?? "").join("");
                     if (text) {
@@ -619,6 +548,379 @@ function parsePicture(pic, scale, imageMap) {
     };
 }
 // ============================================================================
+// Table Style Parsing
+// ============================================================================
+/**
+ * Parse ppt/tableStyles.xml and return a map from style GUID to TableStyleInfo.
+ * Table styles define default fills for wholeTbl, banded rows, header row, etc.
+ * Cells without explicit fills inherit colors from their table style.
+ */
+async function parseTableStyles(zip, parser, themeColors) {
+    const map = new Map();
+    const xml = await zip.file("ppt/tableStyles.xml")?.async("text");
+    if (!xml)
+        return map;
+    const doc = parser.parseFromString(xml, "application/xml");
+    // Each <a:tblStyle styleId="{GUID}"> defines one table style
+    const styleEls = doc.getElementsByTagName("a:tblStyle");
+    for (let i = 0; i < styleEls.length; i++) {
+        const styleEl = styleEls[i];
+        const styleId = styleEl.getAttribute("styleId");
+        if (!styleId)
+            continue;
+        const info = {};
+        // Helper: extract solid fill color from a tcStyle element
+        const extractTcStyleFill = (sectionEl) => {
+            const tcStyle = findChild(sectionEl, "tcStyle");
+            if (!tcStyle)
+                return undefined;
+            const fill = findChild(tcStyle, "fill");
+            if (!fill)
+                return undefined;
+            const solidFill = findChild(fill, "solidFill");
+            if (!solidFill)
+                return undefined;
+            return resolveColor(solidFill, themeColors);
+        };
+        // wholeTbl — default fill for all cells
+        const wholeTbl = findChild(styleEl, "wholeTbl");
+        if (wholeTbl) {
+            info.wholeTblFill = extractTcStyleFill(wholeTbl);
+        }
+        // band1H — odd-row banding fill
+        const band1H = findChild(styleEl, "band1H");
+        if (band1H) {
+            info.band1Fill = extractTcStyleFill(band1H);
+        }
+        // band2H — even-row banding fill (if absent, inherits wholeTblFill)
+        const band2H = findChild(styleEl, "band2H");
+        if (band2H) {
+            info.band2Fill = extractTcStyleFill(band2H);
+        }
+        // firstRow — header-row fill
+        const firstRow = findChild(styleEl, "firstRow");
+        if (firstRow) {
+            info.firstRowFill = extractTcStyleFill(firstRow);
+        }
+        map.set(styleId, info);
+    }
+    return map;
+}
+// ============================================================================
+// Table Parsing Functions
+// ============================================================================
+function parseCellBorder(tcPr, borderName, scale, themeColors) {
+    const borderEl = findChild(tcPr, borderName);
+    if (!borderEl)
+        return undefined;
+    // Check for noFill (no border)
+    const noFill = findChild(borderEl, "noFill");
+    if (noFill)
+        return undefined;
+    const wAttr = borderEl.getAttribute("w");
+    const width = wAttr
+        ? Math.max(1, Math.round(emuToPx(parseInt(wAttr, 10)) * scale))
+        : 1;
+    const solidFill = findChild(borderEl, "solidFill");
+    const color = solidFill ? resolveColor(solidFill, themeColors) ?? "#000000" : "#000000";
+    // Borders with fully-transparent color (alpha=0) are effectively invisible;
+    // treat them as no border to avoid layout artifacts in the HTML output.
+    if (color.startsWith("rgba(") && color.endsWith(",0)"))
+        return undefined;
+    // Parse dash type
+    let style = "solid";
+    const prstDash = findChild(borderEl, "prstDash");
+    if (prstDash) {
+        const dashVal = prstDash.getAttribute("val");
+        if (dashVal === "dash" || dashVal === "lgDash" || dashVal === "sysDash") {
+            style = "dashed";
+        }
+        else if (dashVal === "dot" || dashVal === "sysDot") {
+            style = "dotted";
+        }
+    }
+    return { width, color, style };
+}
+function parseParagraphsFromTxBody(txBody, scale, themeColors, themeFonts) {
+    const paragraphs = [];
+    const pEls = findChildren(txBody, "p");
+    for (const p of pEls) {
+        const para = { runs: [] };
+        const pPr = findChild(p, "pPr");
+        let defaults = undefined;
+        if (pPr) {
+            const algn = pPr.getAttribute("algn");
+            if (algn) {
+                para.align =
+                    algn === "ctr"
+                        ? "center"
+                        : algn === "r"
+                            ? "right"
+                            : algn === "just"
+                                ? "justify"
+                                : "left";
+            }
+            const marL = pPr.getAttribute("marL");
+            if (marL)
+                para.marginLeftPx = Math.round(emuToPx(parseInt(marL, 10)) * scale);
+            const indent = pPr.getAttribute("indent");
+            if (indent)
+                para.indentPx = Math.round(emuToPx(parseInt(indent, 10)) * scale);
+            const defRPr = findChild(pPr, "defRPr");
+            if (defRPr) {
+                defaults = extractRunProps(defRPr, scale, themeColors, themeFonts);
+            }
+            const lnSpc = findChild(pPr, "lnSpc");
+            if (lnSpc) {
+                const spcPct = findChild(lnSpc, "spcPct");
+                if (spcPct) {
+                    const pctVal = parseInt(spcPct.getAttribute("val") ?? "100000", 10);
+                    // spcPct val is percentage * 1000, e.g. 150000 = 150%
+                    // Skip 100% (default single spacing) — CSS line-height:100% is tighter than intended
+                    const pct = pctVal / 1000;
+                    if (pct !== 100) {
+                        para.lineSpacingPercent = pct;
+                    }
+                }
+                const spcPts = findChild(lnSpc, "spcPts");
+                if (spcPts) {
+                    para.lineSpacingPt =
+                        parseInt(spcPts.getAttribute("val") ?? "0", 10) / 100;
+                }
+            }
+            const spcAft = findChild(pPr, "spcAft");
+            if (spcAft) {
+                const spcPts = findChild(spcAft, "spcPts");
+                if (spcPts) {
+                    para.spacingAfterPt =
+                        parseInt(spcPts.getAttribute("val") ?? "0", 10) / 100;
+                }
+            }
+            const spcBef = findChild(pPr, "spcBef");
+            if (spcBef) {
+                const spcPts = findChild(spcBef, "spcPts");
+                if (spcPts) {
+                    para.spacingBeforePt =
+                        parseInt(spcPts.getAttribute("val") ?? "0", 10) / 100;
+                }
+            }
+            const buChar = findChild(pPr, "buChar");
+            if (buChar) {
+                para.bulletChar = buChar.getAttribute("char") ?? undefined;
+            }
+            // Bullet color
+            const buClr = findChild(pPr, "buClr");
+            if (buClr) {
+                para.bulletColor = resolveColor(buClr, themeColors);
+            }
+        }
+        for (const child of Array.from(p.childNodes)) {
+            if (child.nodeType !== 1)
+                continue;
+            const el = child;
+            const localName = el.localName || el.nodeName.split(':').pop();
+            if (localName === 'r') {
+                const rPr = findChild(el, "rPr");
+                const props = extractRunProps(rPr, scale, themeColors, themeFonts);
+                const tEls = findChildren(el, "t");
+                const text = tEls.map((t) => t.textContent ?? "").join("");
+                if (text) {
+                    para.runs.push({
+                        text,
+                        bold: props.bold ?? defaults?.bold,
+                        italic: props.italic ?? defaults?.italic,
+                        fontSize: props.fontSize ?? defaults?.fontSize,
+                        color: props.color ?? defaults?.color,
+                        fontFamily: props.fontFamily ?? defaults?.fontFamily,
+                        textShadow: props.textShadow ?? defaults?.textShadow,
+                        gradientFill: props.gradientFill ?? defaults?.gradientFill,
+                    });
+                }
+            }
+            else if (localName === 'br') {
+                if (para.runs.length > 0) {
+                    para.runs[para.runs.length - 1].text += '\n';
+                }
+                else {
+                    para.runs.push({ text: '\n' });
+                }
+            }
+        }
+        if (para.runs.length > 0) {
+            paragraphs.push(para);
+        }
+    }
+    return paragraphs;
+}
+function parseTable(graphicFrame, scale, themeColors, themeFonts, tableStyleMap) {
+    // Extract position from xfrm
+    const xfrm = findChild(graphicFrame, "xfrm");
+    if (!xfrm)
+        return null;
+    const off = findChild(xfrm, "off");
+    const ext = findChild(xfrm, "ext");
+    if (!off || !ext)
+        return null;
+    // Find the table element: graphicFrame > graphic > graphicData > tbl
+    const graphic = findChild(graphicFrame, "graphic");
+    if (!graphic)
+        return null;
+    const graphicData = findChild(graphic, "graphicData");
+    if (!graphicData)
+        return null;
+    // Check if it's a table (URI should contain "table")
+    const uri = graphicData.getAttribute("uri") ?? "";
+    if (!uri.includes("table"))
+        return null;
+    const tbl = findChild(graphicData, "tbl");
+    if (!tbl)
+        return null;
+    // Read table properties for style flags
+    const tblPr = findChild(tbl, "tblPr");
+    const hasFirstRow = tblPr?.getAttribute("firstRow") === "1";
+    const hasBandRow = tblPr?.getAttribute("bandRow") === "1";
+    // Look up table style for fill defaults
+    let styleInfo;
+    if (tblPr && tableStyleMap) {
+        const styleIdEl = findChild(tblPr, "tableStyleId");
+        if (styleIdEl) {
+            const styleId = styleIdEl.textContent?.trim();
+            if (styleId)
+                styleInfo = tableStyleMap.get(styleId);
+        }
+    }
+    const table = {
+        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(parseInt(ext.getAttribute("cx") ?? "0", 10)) * scale),
+        h: Math.round(emuToPx(parseInt(ext.getAttribute("cy") ?? "0", 10)) * scale),
+        rows: [],
+        colWidths: [],
+    };
+    // Parse column widths from tblGrid
+    const tblGrid = findChild(tbl, "tblGrid");
+    if (tblGrid) {
+        const gridCols = findChildren(tblGrid, "gridCol");
+        for (const col of gridCols) {
+            const w = parseInt(col.getAttribute("w") ?? "0", 10);
+            table.colWidths.push(Math.round(emuToPx(w) * scale));
+        }
+    }
+    // Parse rows
+    const trEls = findChildren(tbl, "tr");
+    let rowIndex = 0;
+    for (const tr of trEls) {
+        const rowHeight = tr.getAttribute("h");
+        const row = {
+            cells: [],
+            height: rowHeight
+                ? Math.round(emuToPx(parseInt(rowHeight, 10)) * scale)
+                : undefined,
+        };
+        const tcEls = findChildren(tr, "tc");
+        for (const tc of tcEls) {
+            const cell = {
+                paragraphs: [],
+            };
+            // Parse cell text content
+            const txBody = findChild(tc, "txBody");
+            if (txBody) {
+                cell.paragraphs = parseParagraphsFromTxBody(txBody, scale, themeColors, themeFonts);
+            }
+            // Parse cell properties
+            const tcPr = findChild(tc, "tcPr");
+            if (tcPr) {
+                // Cell fill — use explicit fill from tcPr first, then fall back to
+                // the table style fill based on row position and style flags.
+                const explicitFill = extractFill(tcPr, themeColors);
+                let styleFill;
+                if (styleInfo) {
+                    if (hasFirstRow && rowIndex === 0) {
+                        // Header row: use firstRowFill from the table style
+                        styleFill = styleInfo.firstRowFill;
+                    }
+                    else if (hasBandRow) {
+                        // Body rows with banding enabled: alternate between band fills.
+                        // The "data row index" starts after the header (if present).
+                        const dataRowIdx = hasFirstRow ? rowIndex - 1 : rowIndex;
+                        styleFill =
+                            dataRowIdx % 2 === 0
+                                ? styleInfo.band1Fill ?? styleInfo.wholeTblFill
+                                : styleInfo.band2Fill ?? styleInfo.wholeTblFill;
+                    }
+                    else {
+                        styleFill = styleInfo.wholeTblFill;
+                    }
+                }
+                cell.fill = explicitFill ?? styleFill;
+                // Vertical alignment
+                const anchor = tcPr.getAttribute("anchor");
+                if (anchor === "ctr")
+                    cell.verticalAlign = "center";
+                else if (anchor === "b")
+                    cell.verticalAlign = "bottom";
+                else
+                    cell.verticalAlign = "top";
+                // Cell margins (PPTX defaults: L/R=91440 EMU ~9.6px, T/B=45720 EMU ~4.8px)
+                const marL = tcPr.getAttribute("marL");
+                const marR = tcPr.getAttribute("marR");
+                const marT = tcPr.getAttribute("marT");
+                const marB = tcPr.getAttribute("marB");
+                cell.padding = {
+                    left: Math.round(emuToPx(parseInt(marL ?? "91440", 10)) * scale),
+                    right: Math.round(emuToPx(parseInt(marR ?? "91440", 10)) * scale),
+                    top: Math.round(emuToPx(parseInt(marT ?? "45720", 10)) * scale),
+                    bottom: Math.round(emuToPx(parseInt(marB ?? "45720", 10)) * scale),
+                };
+                // Cell borders
+                cell.borderLeft = parseCellBorder(tcPr, "lnL", scale, themeColors);
+                cell.borderRight = parseCellBorder(tcPr, "lnR", scale, themeColors);
+                cell.borderTop = parseCellBorder(tcPr, "lnT", scale, themeColors);
+                cell.borderBottom = parseCellBorder(tcPr, "lnB", scale, themeColors);
+            }
+            else {
+                // No tcPr: use PPTX default margins
+                cell.padding = {
+                    left: Math.round(emuToPx(91440) * scale),
+                    right: Math.round(emuToPx(91440) * scale),
+                    top: Math.round(emuToPx(45720) * scale),
+                    bottom: Math.round(emuToPx(45720) * scale),
+                };
+            }
+            // Column span
+            const gridSpan = tc.getAttribute("gridSpan");
+            if (gridSpan) {
+                const span = parseInt(gridSpan, 10);
+                if (span > 1)
+                    cell.colSpan = span;
+            }
+            // Row span
+            const rowSpan = tc.getAttribute("rowSpan");
+            if (rowSpan) {
+                const span = parseInt(rowSpan, 10);
+                if (span > 1)
+                    cell.rowSpan = span;
+            }
+            // Skip merged cells (vMerge = vertically merged continuation)
+            const vMerge = tc.getAttribute("vMerge");
+            if (vMerge === "1" || vMerge === "true") {
+                // This cell is a continuation of a vertical merge - still add it but mark it
+                // We'll skip rendering it in the HTML
+                continue;
+            }
+            // Skip horizontally merged continuation cells
+            const hMerge = tc.getAttribute("hMerge");
+            if (hMerge === "1" || hMerge === "true") {
+                continue;
+            }
+            row.cells.push(cell);
+        }
+        table.rows.push(row);
+        rowIndex++;
+    }
+    return table;
+}
+// ============================================================================
 // Rendering Functions
 // ============================================================================
 function renderSlideHtml(elements, bgColor) {
@@ -653,6 +955,121 @@ function renderSlideHtml(elements, bgColor) {
             inner += `<img id="${elId}" data-elementType="image" src="${img.dataUri}"${altAttr} style="${styles}" />\n`;
             continue;
         }
+        if (el.kind === "table") {
+            const table = el.data;
+            const tableStyles = [
+                "position:absolute",
+                `left:${table.x}px`,
+                `top:${table.y}px`,
+                `width:${table.w}px`,
+                `height:${table.h}px`,
+            ];
+            let tableHtml = `<table style="border-collapse:collapse;width:100%;height:100%;table-layout:fixed">`;
+            // Column widths via colgroup
+            if (table.colWidths.length > 0) {
+                tableHtml += `<colgroup>`;
+                for (const cw of table.colWidths) {
+                    tableHtml += `<col style="width:${cw}px">`;
+                }
+                tableHtml += `</colgroup>`;
+            }
+            for (const row of table.rows) {
+                const rowStyle = row.height ? ` style="height:${row.height}px"` : "";
+                tableHtml += `<tr${rowStyle}>`;
+                for (const cell of row.cells) {
+                    const cellPad = cell.padding ?? { top: 5, right: 10, bottom: 5, left: 10 };
+                    const tdStyles = [
+                        "box-sizing:border-box",
+                        "overflow:hidden",
+                        `padding:${cellPad.top}px ${cellPad.right}px ${cellPad.bottom}px ${cellPad.left}px`,
+                    ];
+                    if (cell.fill) {
+                        tdStyles.push(`background:${cell.fill}`);
+                    }
+                    if (cell.verticalAlign === "center") {
+                        tdStyles.push("vertical-align:middle");
+                    }
+                    else if (cell.verticalAlign === "bottom") {
+                        tdStyles.push("vertical-align:bottom");
+                    }
+                    else {
+                        tdStyles.push("vertical-align:top");
+                    }
+                    // Cell borders
+                    if (cell.borderTop) {
+                        tdStyles.push(`border-top:${cell.borderTop.width}px ${cell.borderTop.style} ${cell.borderTop.color}`);
+                    }
+                    if (cell.borderBottom) {
+                        tdStyles.push(`border-bottom:${cell.borderBottom.width}px ${cell.borderBottom.style} ${cell.borderBottom.color}`);
+                    }
+                    if (cell.borderLeft) {
+                        tdStyles.push(`border-left:${cell.borderLeft.width}px ${cell.borderLeft.style} ${cell.borderLeft.color}`);
+                    }
+                    if (cell.borderRight) {
+                        tdStyles.push(`border-right:${cell.borderRight.width}px ${cell.borderRight.style} ${cell.borderRight.color}`);
+                    }
+                    const spanAttrs = [];
+                    if (cell.colSpan && cell.colSpan > 1)
+                        spanAttrs.push(` colspan="${cell.colSpan}"`);
+                    if (cell.rowSpan && cell.rowSpan > 1)
+                        spanAttrs.push(` rowspan="${cell.rowSpan}"`);
+                    tableHtml += `<td style="${tdStyles.join(";")}"${spanAttrs.join("")}>`;
+                    // Render cell paragraphs
+                    for (const para of cell.paragraphs) {
+                        const pStyles = ["margin:0"];
+                        if (para.align)
+                            pStyles.push(`text-align:${para.align}`);
+                        if (para.spacingAfterPt)
+                            pStyles.push(`margin-bottom:${para.spacingAfterPt}pt`);
+                        if (para.spacingBeforePt)
+                            pStyles.push(`margin-top:${para.spacingBeforePt}pt`);
+                        if (para.lineSpacingPt)
+                            pStyles.push(`line-height:${para.lineSpacingPt}pt`);
+                        else if (para.lineSpacingPercent)
+                            pStyles.push(`line-height:${para.lineSpacingPercent}%`);
+                        let runHtml = "";
+                        for (const run of para.runs) {
+                            const rStyles = [];
+                            if (run.fontSize)
+                                rStyles.push(`font-size:${run.fontSize}px`);
+                            if (run.gradientFill) {
+                                rStyles.push(`background:${run.gradientFill}`);
+                                rStyles.push("-webkit-background-clip:text");
+                                rStyles.push("-webkit-text-fill-color:transparent");
+                                rStyles.push("background-clip:text");
+                            }
+                            else if (run.color) {
+                                rStyles.push(`color:${run.color}`);
+                            }
+                            if (run.bold)
+                                rStyles.push("font-weight:bold");
+                            if (run.italic)
+                                rStyles.push("font-style:italic");
+                            if (run.fontFamily)
+                                rStyles.push(`font-family:${cssFontFamily(run.fontFamily)}`);
+                            if (run.textShadow)
+                                rStyles.push(`text-shadow:${run.textShadow}`);
+                            const escapedText = run.text
+                                .replace(/&/g, "&amp;")
+                                .replace(/</g, "&lt;")
+                                .replace(/>/g, "&gt;");
+                            if (rStyles.length > 0) {
+                                runHtml += `<span style="${rStyles.join(";")}">${escapedText}</span>`;
+                            }
+                            else {
+                                runHtml += escapedText;
+                            }
+                        }
+                        tableHtml += `<p style="${pStyles.join(";")}">${runHtml}</p>`;
+                    }
+                    tableHtml += `</td>`;
+                }
+                tableHtml += `</tr>`;
+            }
+            tableHtml += `</table>`;
+            inner += `<div id="${elId}" data-elementType="table" style="${tableStyles.join(";")}">${tableHtml}</div>\n`;
+            continue;
+        }
         const shape = el.data;
         const styles = [
             "position:absolute",
@@ -717,13 +1134,20 @@ function renderSlideHtml(elements, bgColor) {
                 pStyles.push(`margin-top:${para.spacingBeforePt}pt`);
             if (para.lineSpacingPt)
                 pStyles.push(`line-height:${para.lineSpacingPt}pt`);
+            // Note: lineSpacingPercent is intentionally NOT emitted for shapes.
+            // Applying percentage-based line-height to fixed-height text boxes
+            // often causes visual regressions (overlaps, clipping). It works
+            // reliably only for tables where cell height auto-adjusts.
             if (para.marginLeftPx)
                 pStyles.push(`padding-left:${para.marginLeftPx}px`);
             if (para.indentPx)
                 pStyles.push(`text-indent:${para.indentPx}px`);
             let runHtml = "";
             if (para.bulletChar) {
-                runHtml += `<span style="margin-right:4px">${para.bulletChar}</span>`;
+                const bulletStyle = para.bulletColor
+                    ? `margin-right:4px;color:${para.bulletColor}`
+                    : "margin-right:4px";
+                runHtml += `<span style="${bulletStyle}">${para.bulletChar}</span>`;
             }
             for (const run of para.runs) {
                 const rStyles = [];
@@ -880,7 +1304,41 @@ export default async function importPptx(arrayBuffer) {
                 }
             }
         }
+        // Add OOXML aliases: tx1/tx2 map to dk1/dk2, bg1/bg2 map to lt1/lt2
+        const dk1Color = themeColors.get("dk1");
+        if (dk1Color)
+            themeColors.set("tx1", dk1Color);
+        const dk2Color = themeColors.get("dk2");
+        if (dk2Color)
+            themeColors.set("tx2", dk2Color);
+        const lt1Color = themeColors.get("lt1");
+        if (lt1Color)
+            themeColors.set("bg1", lt1Color);
+        const lt2Color = themeColors.get("lt2");
+        if (lt2Color)
+            themeColors.set("bg2", lt2Color);
     }
+    // Parse theme fonts
+    let themeFonts;
+    if (themeXml) {
+        const themeDoc = parser.parseFromString(themeXml, "application/xml");
+        const majorFont = themeDoc.getElementsByTagName("a:majorFont")[0];
+        const minorFont = themeDoc.getElementsByTagName("a:minorFont")[0];
+        if (majorFont || minorFont) {
+            const majorLatin = majorFont ? findChild(majorFont, "latin")?.getAttribute("typeface") : null;
+            const minorLatin = minorFont ? findChild(minorFont, "latin")?.getAttribute("typeface") : null;
+            const majorEa = majorFont ? findChild(majorFont, "ea")?.getAttribute("typeface") : null;
+            const minorEa = minorFont ? findChild(minorFont, "ea")?.getAttribute("typeface") : null;
+            themeFonts = {
+                majorLatin: majorLatin ?? "Calibri",
+                minorLatin: minorLatin ?? "Calibri",
+                majorEastAsian: majorEa ?? undefined,
+                minorEastAsian: minorEa ?? undefined,
+            };
+        }
+    }
+    // Parse table styles from ppt/tableStyles.xml
+    const tableStyleMap = await parseTableStyles(zip, parser, themeColors);
     // Parse embedded fonts from presentation.xml
     // PPTX files can embed TrueType fonts in ppt/fonts/ as .fntdata (EOT format)
     const embeddedFontNames = new Set();
@@ -961,7 +1419,7 @@ export default async function importPptx(arrayBuffer) {
         for (let i = 0; i < spTree.children.length; i++) {
             const child = spTree.children[i];
             if (child.localName === "sp") {
-                const shape = parseShape(child, scale, themeColors);
+                const shape = parseShape(child, scale, themeColors, themeFonts);
                 if (shape)
                     elements.push({ kind: "shape", data: shape });
             }
@@ -970,6 +1428,11 @@ export default async function importPptx(arrayBuffer) {
                 if (img)
                     elements.push({ kind: "image", data: img });
             }
+            else if (child.localName === "graphicFrame") {
+                const table = parseTable(child, scale, themeColors, themeFonts, tableStyleMap);
+                if (table)
+                    elements.push({ kind: "table", data: table });
+            }
         }
         slides.push(renderSlideHtml(elements, slideBg));
     }