docgen-utils 1.0.9 → 1.0.11

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

@@ -13,9 +13,121 @@ 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;
 }
@@ -95,6 +207,25 @@ function extractGradientFill(parent, themeColors) {
     }
     if (stops.length === 0)
         return undefined;
+    // Check for radial gradient (path element with path="circle")
+    const pathEl = findChild(gradFill, "path");
+    if (pathEl && pathEl.getAttribute("path") === "circle") {
+        // Extract center position from fillToRect
+        const fillToRect = findChild(pathEl, "fillToRect");
+        let centerX = 50;
+        let centerY = 50;
+        if (fillToRect) {
+            // OOXML uses l/t/r/b as percentages * 1000 from edges
+            // l=50000, t=50000 means center is at 50%, 50%
+            const l = parseInt(fillToRect.getAttribute("l") ?? "50000", 10) / 1000;
+            const t = parseInt(fillToRect.getAttribute("t") ?? "50000", 10) / 1000;
+            centerX = l;
+            centerY = t;
+        }
+        const stopStr = stops.map((s) => `${s.color} ${s.pos}%`).join(",");
+        return `radial-gradient(ellipse at ${centerX}% ${centerY}%,${stopStr})`;
+    }
+    // Linear gradient
     const lin = findChild(gradFill, "lin");
     const angAttr = lin?.getAttribute("ang");
     const cssDeg = angAttr ? ooxmlAngleToCss(parseInt(angAttr, 10)) : 180;
@@ -126,12 +257,88 @@ function extractRunProps(rPr, scale, themeColors) {
         if (color)
             result.color = color;
     }
+    // Handle gradient fill for text - use CSS background-clip:text technique
+    if (!result.color) {
+        const gradFill = findChild(rPr, "gradFill");
+        if (gradFill) {
+            const gsLst = findChild(gradFill, "gsLst");
+            if (gsLst) {
+                const gsEls = findChildren(gsLst, "gs");
+                if (gsEls.length > 0) {
+                    // Extract gradient stops
+                    const stops = [];
+                    for (const gs of gsEls) {
+                        const pos = parseInt(gs.getAttribute("pos") ?? "0", 10) / 1000;
+                        const color = resolveColor(gs, themeColors);
+                        if (color)
+                            stops.push({ pos, color });
+                    }
+                    if (stops.length >= 2) {
+                        // Extract angle from lin element
+                        const lin = findChild(gradFill, "lin");
+                        const angAttr = lin?.getAttribute("ang");
+                        const cssDeg = angAttr ? ooxmlAngleToCss(parseInt(angAttr, 10)) : 135;
+                        const stopStr = stops.map((s) => `${s.color} ${s.pos}%`).join(",");
+                        result.gradientFill = `linear-gradient(${cssDeg}deg,${stopStr})`;
+                    }
+                    // Also set color as fallback (first gradient stop)
+                    const firstColor = resolveColor(gsEls[0], themeColors);
+                    if (firstColor)
+                        result.color = firstColor;
+                }
+            }
+        }
+    }
     const latin = findChild(rPr, "latin");
     if (latin) {
         const typeface = latin.getAttribute("typeface");
         if (typeface)
             result.fontFamily = typeface;
     }
+    // Extract glow effect from effectLst
+    const effectLst = findChild(rPr, "effectLst");
+    if (effectLst) {
+        const glow = findChild(effectLst, "glow");
+        if (glow) {
+            // rad is in EMUs (English Metric Units)
+            const radAttr = glow.getAttribute("rad");
+            const radiusEmu = radAttr ? parseInt(radAttr, 10) : 0;
+            // Convert EMU to pixels: 914400 EMU = 1 inch = 96 pixels
+            const radiusPx = Math.round(emuToPx(radiusEmu) * scale);
+            // Get glow color
+            const glowColor = resolveColor(glow, themeColors);
+            if (glowColor && radiusPx > 0) {
+                // During export, CSS text-shadow is scaled for OOXML visual equivalence:
+                // - Size scaled by 2.5x (CSS blur spreads wider than OOXML glow)
+                // - Opacity scaled by 0.3x (OOXML glow appears more intense)
+                //
+                // During import, apply inverse scaling to restore CSS-like values:
+                const INVERSE_GLOW_SIZE_SCALE = 0.4; // 1/2.5
+                const INVERSE_GLOW_OPACITY_SCALE = 3.33; // 1/0.3
+                const cssRadius = Math.round(radiusPx * INVERSE_GLOW_SIZE_SCALE);
+                // Extract and scale opacity from rgba color
+                const rgbaMatch = glowColor.match(/rgba?\((\d+),(\d+),(\d+)(?:,([0-9.]+))?\)/);
+                if (rgbaMatch) {
+                    const r = rgbaMatch[1];
+                    const g = rgbaMatch[2];
+                    const b = rgbaMatch[3];
+                    const originalAlpha = rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1;
+                    const scaledAlpha = Math.min(originalAlpha * INVERSE_GLOW_OPACITY_SCALE, 1.0);
+                    result.textShadow = `0 0 ${cssRadius}px rgba(${r},${g},${b},${scaledAlpha.toFixed(2)})`;
+                }
+                else if (glowColor.startsWith('#')) {
+                    // Hex color - assume full opacity, apply scaling
+                    const r = parseInt(glowColor.slice(1, 3), 16);
+                    const g = parseInt(glowColor.slice(3, 5), 16);
+                    const b = parseInt(glowColor.slice(5, 7), 16);
+                    result.textShadow = `0 0 ${cssRadius}px rgba(${r},${g},${b},1)`;
+                }
+                else {
+                    result.textShadow = `0 0 ${cssRadius}px ${glowColor}`;
+                }
+            }
+        }
+    }
     return result;
 }
 // ============================================================================
@@ -158,9 +365,10 @@ function parseShape(sp, scale, themeColors) {
         fill: extractFill(spPr, themeColors),
         paragraphs: [],
     };
-    // Border radius from prstGeom roundRect
+    // Border radius from prstGeom roundRect or ellipse
     const prstGeom = findChild(spPr, "prstGeom");
-    if (prstGeom?.getAttribute("prst") === "roundRect") {
+    const prstType = prstGeom?.getAttribute("prst");
+    if (prstType === "roundRect" && prstGeom) {
         const avLst = findChild(prstGeom, "avLst");
         const gd = avLst ? findChild(avLst, "gd") : null;
         const adjVal = gd
@@ -170,6 +378,10 @@ function parseShape(sp, scale, themeColors) {
         const radiusEmu = (minDim * Math.min(adjVal, 50000)) / 100000;
         shape.borderRadius = Math.round(emuToPx(radiusEmu) * scale);
     }
+    else if (prstType === "ellipse") {
+        // Ellipse shapes should have border-radius: 50% to render as circles
+        shape.isEllipse = true;
+    }
     // Border from a:ln
     const ln = findChild(spPr, "ln");
     if (ln) {
@@ -180,6 +392,14 @@ function parseShape(sp, scale, themeColors) {
             if (lnFill) {
                 shape.borderColor = resolveColor(lnFill, themeColors);
             }
+            // Extract dash type from prstDash
+            const prstDash = findChild(ln, "prstDash");
+            if (prstDash) {
+                const dashVal = prstDash.getAttribute("val");
+                if (dashVal && dashVal !== "solid") {
+                    shape.borderDashType = dashVal;
+                }
+            }
         }
     }
     // Body properties: vertical alignment and padding
@@ -261,21 +481,42 @@ function parseShape(sp, scale, themeColors) {
                     para.bulletChar = buChar.getAttribute("char") ?? undefined;
                 }
             }
-            const runs = findChildren(p, "r");
-            for (const r of runs) {
-                const rPr = findChild(r, "rPr");
-                const props = extractRunProps(rPr, scale, themeColors);
-                const tEls = findChildren(r, "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,
-                    });
+            // 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
+            for (const child of Array.from(p.childNodes)) {
+                if (child.nodeType !== 1)
+                    continue; // ELEMENT_NODE = 1
+                const el = child;
+                const localName = el.localName || el.nodeName.split(':').pop();
+                if (localName === 'r') {
+                    // Text run
+                    const rPr = findChild(el, "rPr");
+                    const props = extractRunProps(rPr, scale, themeColors);
+                    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') {
+                    // Line break - add a newline to the previous run or create a new run with just newline
+                    if (para.runs.length > 0) {
+                        // Append newline to the last run's text
+                        para.runs[para.runs.length - 1].text += '\n';
+                    }
+                    else {
+                        // No previous run, create a new one with just newline
+                        para.runs.push({ text: '\n' });
+                    }
                 }
             }
             if (para.runs.length > 0) {
@@ -302,8 +543,34 @@ function parsePicture(pic, scale, imageMap) {
     const blip = findChild(blipFill, "blip");
     if (!blip)
         return null;
-    const rEmbed = blip.getAttribute("r:embed") ??
-        blip.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "embed");
+    // First, try to get SVG from asvg:svgBlip (higher quality)
+    let rEmbed = null;
+    const extLst = findChild(blip, "extLst");
+    if (extLst) {
+        for (let i = 0; i < extLst.children.length; i++) {
+            const ext = extLst.children[i];
+            if (ext.localName === "ext") {
+                // Look for svgBlip in extension
+                for (let j = 0; j < ext.children.length; j++) {
+                    const child = ext.children[j];
+                    if (child.localName === "svgBlip") {
+                        rEmbed =
+                            child.getAttribute("r:embed") ??
+                                child.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "embed");
+                        break;
+                    }
+                }
+                if (rEmbed)
+                    break;
+            }
+        }
+    }
+    // Fallback to regular blip if no SVG found
+    if (!rEmbed) {
+        rEmbed =
+            blip.getAttribute("r:embed") ??
+                blip.getAttributeNS("http://schemas.openxmlformats.org/officeDocument/2006/relationships", "embed");
+    }
     if (!rEmbed)
         return null;
     const dataUri = imageMap.get(rEmbed);
@@ -312,6 +579,34 @@ 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
+    const srcRect = findChild(blipFill, "srcRect");
+    let hasCrop = false;
+    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;
+    }
+    // Extract border-radius from roundRect preset geometry
+    let borderRadius;
+    const prstGeom = findChild(spPr, "prstGeom");
+    if (prstGeom?.getAttribute("prst") === "roundRect") {
+        const avLst = findChild(prstGeom, "avLst");
+        const gd = avLst ? findChild(avLst, "gd") : null;
+        // Default adj value for roundRect is 16667 (1/6 of 100000)
+        const adjVal = gd
+            ? parseInt(gd.getAttribute("fmla")?.replace("val ", "") ?? "16667", 10)
+            : 16667;
+        const wEmu = parseInt(ext.getAttribute("cx") ?? "0", 10);
+        const hEmu = parseInt(ext.getAttribute("cy") ?? "0", 10);
+        const minDim = Math.min(wEmu, hEmu);
+        // The adjustment value is a percentage where 50000 = 50% = max possible radius
+        const radiusEmu = (minDim * Math.min(adjVal, 50000)) / 100000;
+        borderRadius = Math.round(emuToPx(radiusEmu) * scale);
+    }
     return {
         x: Math.round(emuToPx(parseInt(off.getAttribute("x") ?? "0", 10)) * scale),
         y: Math.round(emuToPx(parseInt(off.getAttribute("y") ?? "0", 10)) * scale),
@@ -319,6 +614,8 @@ function parsePicture(pic, scale, imageMap) {
         h: Math.round(emuToPx(parseInt(ext.getAttribute("cy") ?? "0", 10)) * scale),
         dataUri,
         alt,
+        borderRadius,
+        hasCrop,
     };
 }
 // ============================================================================
@@ -331,14 +628,25 @@ function renderSlideHtml(elements, bgColor) {
         const elId = `el-${elementIndex++}`;
         if (el.kind === "image") {
             const img = el.data;
-            const styles = [
+            // Detect images that should use object-fit:cover:
+            // 1. Fullbleed images (covering entire slide)
+            // 2. Images with srcRect cropping applied (hasCrop)
+            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";
+            const stylesList = [
                 "position:absolute",
                 `left:${img.x}px`,
                 `top:${img.y}px`,
                 `width:${img.w}px`,
                 `height:${img.h}px`,
-                "object-fit:contain",
-            ].join(";");
+                `object-fit:${objectFit}`,
+            ];
+            // 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;")}"`
                 : "";
@@ -360,8 +668,27 @@ function renderSlideHtml(elements, bgColor) {
         if (shape.borderRadius) {
             styles.push(`border-radius:${shape.borderRadius}px`);
         }
+        else if (shape.isEllipse) {
+            // Ellipse shapes render as circles/ovals with 50% border-radius
+            styles.push(`border-radius:50%`);
+        }
         if (shape.borderWidth && shape.borderColor) {
-            styles.push(`border:${shape.borderWidth}px solid ${shape.borderColor}`);
+            // Convert PPTX dashType to CSS border-style
+            let borderStyle = "solid";
+            if (shape.borderDashType) {
+                switch (shape.borderDashType) {
+                    case "dash":
+                    case "lgDash":
+                    case "sysDash":
+                        borderStyle = "dashed";
+                        break;
+                    case "sysDot":
+                    case "dot":
+                        borderStyle = "dotted";
+                        break;
+                }
+            }
+            styles.push(`border:${shape.borderWidth}px ${borderStyle} ${shape.borderColor}`);
             styles.push("box-sizing:border-box");
         }
         if (shape.padding) {
@@ -402,14 +729,24 @@ function renderSlideHtml(elements, bgColor) {
                 const rStyles = [];
                 if (run.fontSize)
                     rStyles.push(`font-size:${run.fontSize}px`);
-                if (run.color)
+                if (run.gradientFill) {
+                    // CSS gradient text using background-clip technique
+                    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:'${run.fontFamily}',sans-serif`);
+                    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;")
@@ -544,6 +881,28 @@ export default async function importPptx(arrayBuffer) {
             }
         }
     }
+    // Parse embedded fonts from presentation.xml
+    // PPTX files can embed TrueType fonts in ppt/fonts/ as .fntdata (EOT format)
+    const embeddedFontNames = new Set();
+    const embeddedFontEls = presDoc.getElementsByTagName("p:embeddedFont");
+    for (let i = 0; i < embeddedFontEls.length; i++) {
+        const fontEl = embeddedFontEls[i].getElementsByTagName("p:font")[0];
+        if (fontEl) {
+            const typeface = fontEl.getAttribute("typeface");
+            if (typeface)
+                embeddedFontNames.add(typeface);
+        }
+    }
+    // Build Google Fonts link for embedded font families
+    // EOT files in PPTX are compressed and not usable in modern browsers,
+    // so we load them via Google Fonts CDN if available.
+    let fontStyleBlock = "";
+    if (embeddedFontNames.size > 0) {
+        const fontFamilies = Array.from(embeddedFontNames)
+            .map((name) => name.replace(/ /g, "+") + ":ital,wght@0,400;0,700;1,400;1,700")
+            .join("&family=");
+        fontStyleBlock = `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${fontFamilies}&display=swap">`;
+    }
     const slides = [];
     for (const slideFile of slideFiles) {
         const slideXml = await zip.file(slideFile)?.async("text");
@@ -614,6 +973,10 @@ export default async function importPptx(arrayBuffer) {
         }
         slides.push(renderSlideHtml(elements, slideBg));
     }
+    // Prepend font style block to first slide so embedded fonts load via Google Fonts
+    if (fontStyleBlock && slides.length > 0) {
+        slides[0] = fontStyleBlock + slides[0];
+    }
     return slides;
 }
 //# sourceMappingURL=import-pptx.js.map