docgen-utils 1.0.9 → 1.0.10

package/dist/packages/slides/parse.js

@@ -18,6 +18,57 @@ const PX_PER_IN = 96;
 // ---------------------------------------------------------------------------
 const SINGLE_WEIGHT_FONTS = ['impact'];
 // ---------------------------------------------------------------------------
+// Font family mapping for Office compatibility
+// Maps web fonts to their closest Office-installed equivalents
+// ---------------------------------------------------------------------------
+const FONT_FAMILY_MAP = {
+    // Common sans-serif web fonts → Calibri (default Office sans-serif)
+    // Fonts that are commonly available via Google Fonts CDN are NOT mapped here,
+    // to preserve original font names for systems that have them installed.
+    'roboto': 'Calibri',
+    'open sans': 'Calibri',
+    'lato': 'Calibri',
+    'montserrat': 'Calibri',
+    'poppins': 'Calibri',
+    'source sans pro': 'Calibri',
+    'nunito': 'Calibri',
+    'raleway': 'Calibri',
+    'ubuntu': 'Calibri',
+    'pt sans': 'Calibri',
+    'noto sans': 'Calibri',
+    'fira sans': 'Calibri',
+    'work sans': 'Calibri',
+    // Serif fonts → Georgia (closest web-safe serif)
+    'playfair display': 'Georgia',
+    'merriweather': 'Georgia',
+    'libre baskerville': 'Georgia',
+    'pt serif': 'Georgia',
+    'noto serif': 'Georgia',
+    'lora': 'Georgia',
+    // Monospace fonts → Courier New (standard monospace)
+    'fira code': 'Courier New',
+    'source code pro': 'Courier New',
+    'jetbrains mono': 'Courier New',
+};
+/**
+ * Map a font family to its Office-compatible equivalent.
+ * Returns the mapped font if found, or the original font if no mapping exists.
+ */
+function mapFontFamily(fontFamily) {
+    const normalized = fontFamily.toLowerCase().trim();
+    return FONT_FAMILY_MAP[normalized] || fontFamily;
+}
+/**
+ * Extract and map fontFace from a computed style or font-family string.
+ * Takes the first font in the stack and maps it to an Office-compatible equivalent.
+ */
+function extractFontFace(fontFamily) {
+    if (!fontFamily)
+        return undefined;
+    const firstFont = fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+    return mapFontFamily(firstFont);
+}
+// ---------------------------------------------------------------------------
 // Exported helper functions
 // ---------------------------------------------------------------------------
 /** Convert pixel value to inches. */
@@ -33,6 +84,8 @@ export function pxToPoints(pxStr) {
  * Returns `'FFFFFF'` for transparent or unparseable values.
  */
 export function rgbToHex(rgbStr) {
+    // Remove !important suffix if present
+    rgbStr = rgbStr.replace(/\s*!important\s*$/i, '').trim();
     if (rgbStr === 'rgba(0, 0, 0, 0)' || rgbStr === 'transparent')
         return 'FFFFFF';
     const match = rgbStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
@@ -68,6 +121,21 @@ export function extractAlpha(rgbStr) {
     const alpha = parseFloat(match[4]);
     return Math.round((1 - alpha) * 100);
 }
+/**
+ * Convert CSS border-style to PPTX dashType.
+ * Returns undefined for solid borders (the default).
+ */
+function extractDashType(borderStyle) {
+    switch (borderStyle.toLowerCase()) {
+        case 'dashed':
+            return 'dash';
+        case 'dotted':
+            return 'sysDot';
+        case 'solid':
+        default:
+            return undefined; // solid is the default, no need to specify
+    }
+}
 // ---------------------------------------------------------------------------
 // parseCssGradient  (exported, used by other modules)
 // ---------------------------------------------------------------------------
@@ -80,12 +148,16 @@ export function extractAlpha(rgbStr) {
 export function parseCssGradient(gradientStr) {
     const colorToHex = (colorStr) => {
         colorStr = colorStr.trim().toLowerCase();
+        // Remove !important suffix if present
+        colorStr = colorStr.replace(/\s*!important\s*$/i, '');
         // Handle 'transparent' keyword (equivalent to rgba(0,0,0,0))
         if (colorStr === 'transparent') {
             return '000000';
         }
         if (colorStr.startsWith('#')) {
             let hex = colorStr.slice(1);
+            // Remove any trailing non-hex characters (like space + other text)
+            hex = hex.replace(/[^0-9a-f]/gi, '');
             if (hex.length === 3)
                 hex = hex.split('').map((c) => c + c).join('');
             return hex.toUpperCase();
@@ -102,6 +174,8 @@ export function parseCssGradient(gradientStr) {
     };
     const extractTransparency = (colorStr) => {
         colorStr = colorStr.trim().toLowerCase();
+        // Remove !important suffix if present
+        colorStr = colorStr.replace(/\s*!important\s*$/i, '');
         // Handle 'transparent' keyword (equivalent to rgba(0,0,0,0) - fully transparent)
         if (colorStr === 'transparent') {
             return 100; // 100% transparency = fully transparent
@@ -371,6 +445,19 @@ function applyTextTransform(text, textTransform) {
     }
     return text;
 }
+/**
+ * Extract text content from an element with text-transform CSS applied.
+ * This ensures that CSS text-transform (uppercase, lowercase, capitalize)
+ * is baked into the exported text since PPTX doesn't support text-transform.
+ */
+function getTransformedText(element, computed) {
+    const rawText = element.textContent?.trim() || '';
+    const textTransform = computed.textTransform;
+    if (textTransform && textTransform !== 'none') {
+        return applyTextTransform(rawText, textTransform);
+    }
+    return rawText;
+}
 function getRotation(transform, writingMode) {
     let angle = 0;
     if (writingMode === 'vertical-rl') {
@@ -668,6 +755,413 @@ function parseBoxShadow(boxShadow) {
         opacity,
     };
 }
+/**
+ * Parse CSS `clip-path: polygon(...)` into an array of {x, y} coordinate pairs.
+ * Coordinates are normalized (0-1 range) relative to the element's bounding box.
+ * Returns null if the value is not a polygon clip-path or cannot be parsed.
+ */
+function parseClipPathPolygon(clipPath) {
+    if (!clipPath || clipPath === 'none')
+        return null;
+    const polygonMatch = clipPath.match(/polygon\(([^)]+)\)/);
+    if (!polygonMatch)
+        return null;
+    const points = [];
+    const pairs = polygonMatch[1].split(',');
+    for (const pair of pairs) {
+        const coords = pair.trim().split(/\s+/);
+        if (coords.length < 2)
+            continue;
+        const x = parseFloat(coords[0]) / 100; // Convert percentage to 0-1
+        const y = parseFloat(coords[1]) / 100;
+        if (isNaN(x) || isNaN(y))
+            continue;
+        points.push({ x, y });
+    }
+    return points.length >= 3 ? points : null;
+}
+/**
+ * Render a conic-gradient as a canvas image and return a data URI.
+ * Conic gradients have no PPTX equivalent, so we pre-render them as images.
+ * Uses Canvas 2D createConicGradient() for native smooth interpolation.
+ *
+ * Handles:
+ * - `from Xdeg` start angle prefix
+ * - `at X% Y%` center position
+ * - Color stops with `%`, `deg`, or no explicit position (evenly distributed)
+ * - rgba/rgb/hex/named colors with nested parentheses
+ * - Two-position stops (e.g., `red 0% 50%`)
+ *
+ * @param conicGradientCSS - The CSS conic-gradient() string
+ * @param width - Element width in pixels
+ * @param height - Element height in pixels
+ * @param isCircle - Whether the element has border-radius: 50%
+ * @param doc - The document to create the canvas on
+ * @returns PNG data URI, or null if rendering fails
+ */
+function renderConicGradientAsImage(conicGradientCSS, width, height, isCircle, doc) {
+    try {
+        const canvas = doc.createElement('canvas');
+        const scale = 2; // 2x for quality
+        canvas.width = Math.round(width * scale);
+        canvas.height = Math.round(height * scale);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return null;
+        // Extract content between balanced parentheses of conic-gradient(...)
+        const conicIdx = conicGradientCSS.indexOf('conic-gradient(');
+        if (conicIdx === -1)
+            return null;
+        let depth = 0;
+        let startIdx = -1;
+        let endIdx = -1;
+        for (let i = conicIdx + 'conic-gradient'.length; i < conicGradientCSS.length; i++) {
+            if (conicGradientCSS[i] === '(') {
+                if (depth === 0)
+                    startIdx = i + 1;
+                depth++;
+            }
+            else if (conicGradientCSS[i] === ')') {
+                depth--;
+                if (depth === 0) {
+                    endIdx = i;
+                    break;
+                }
+            }
+        }
+        if (startIdx === -1 || endIdx === -1)
+            return null;
+        let innerContent = conicGradientCSS.substring(startIdx, endIdx).trim();
+        // --- Parse optional "from <angle>" prefix ---
+        let startAngleDeg = 0;
+        const fromMatch = innerContent.match(/^from\s+([\d.]+)(deg|rad|turn|grad)/i);
+        if (fromMatch) {
+            const val = parseFloat(fromMatch[1]);
+            const unit = fromMatch[2].toLowerCase();
+            if (unit === 'deg')
+                startAngleDeg = val;
+            else if (unit === 'rad')
+                startAngleDeg = val * (180 / Math.PI);
+            else if (unit === 'turn')
+                startAngleDeg = val * 360;
+            else if (unit === 'grad')
+                startAngleDeg = val * 0.9;
+            // Remove "from Xdeg" and any following comma
+            innerContent = innerContent.substring(fromMatch[0].length).replace(/^\s*,\s*/, '');
+        }
+        // --- Parse optional "at <x> <y>" center position ---
+        let centerXFrac = 0.5;
+        let centerYFrac = 0.5;
+        const atMatch = innerContent.match(/^at\s+([\d.]+)(%|px)?\s+([\d.]+)(%|px)?/i);
+        if (atMatch) {
+            const xVal = parseFloat(atMatch[1]);
+            const xUnit = atMatch[2] || '%';
+            const yVal = parseFloat(atMatch[3]);
+            const yUnit = atMatch[4] || '%';
+            centerXFrac = xUnit === '%' ? xVal / 100 : xVal / width;
+            centerYFrac = yUnit === '%' ? yVal / 100 : yVal / height;
+            innerContent = innerContent.substring(atMatch[0].length).replace(/^\s*,\s*/, '');
+        }
+        // --- Split remaining content by top-level commas ---
+        const stopParts = [];
+        let current = '';
+        let parenDepth = 0;
+        for (let i = 0; i < innerContent.length; i++) {
+            const ch = innerContent[i];
+            if (ch === '(')
+                parenDepth++;
+            else if (ch === ')')
+                parenDepth--;
+            else if (ch === ',' && parenDepth === 0) {
+                stopParts.push(current.trim());
+                current = '';
+                continue;
+            }
+            current += ch;
+        }
+        if (current.trim())
+            stopParts.push(current.trim());
+        if (stopParts.length === 0)
+            return null;
+        const rawStops = [];
+        for (const part of stopParts) {
+            // Separate color from position(s)
+            // Strategy: find rightmost position tokens (deg/% numbers at end)
+            // Color can contain parentheses (rgb/rgba), so work from the end
+            const trimmed = part.trim();
+            // Match position tokens at the end: e.g., "0%", "45deg", "0.5turn"
+            // Could be one or two positions
+            const posPattern = /([\d.]+)(deg|%|turn|rad|grad)/gi;
+            const positions = [];
+            let m;
+            while ((m = posPattern.exec(trimmed)) !== null) {
+                positions.push({ value: parseFloat(m[1]), unit: m[2].toLowerCase(), index: m.index });
+            }
+            // Determine which positions belong to the stop (they must be at the end of the string)
+            // Filter to positions that are at the tail end after the color
+            const trailingPositions = [];
+            if (positions.length > 0) {
+                // Check if the last position token ends at the string end
+                const lastPos = positions[positions.length - 1];
+                const lastEnd = lastPos.index + `${lastPos.value}${lastPos.unit}`.length;
+                if (Math.abs(lastEnd - trimmed.length) <= 1) {
+                    // Work backwards to find trailing position tokens
+                    for (let i = positions.length - 1; i >= 0; i--) {
+                        const p = positions[i];
+                        // Check if this position is NOT inside a color function (rgb/rgba parens)
+                        // by ensuring it's after the last closing paren
+                        const lastParen = trimmed.lastIndexOf(')');
+                        if (p.index > lastParen) {
+                            trailingPositions.unshift({ value: p.value, unit: p.unit });
+                        }
+                    }
+                }
+            }
+            // Extract color: everything before the trailing positions
+            let color;
+            if (trailingPositions.length > 0) {
+                const firstPosIdx = positions.find(p => trailingPositions.some(tp => tp.value === p.value && tp.unit === p.unit))?.index ?? trimmed.length;
+                color = trimmed.substring(0, firstPosIdx).trim();
+            }
+            else {
+                color = trimmed;
+            }
+            // Convert positions to fractions (0-1)
+            const toFraction = (val, unit) => {
+                switch (unit) {
+                    case '%': return val / 100;
+                    case 'deg': return val / 360;
+                    case 'turn': return val;
+                    case 'rad': return val / (Math.PI * 2);
+                    case 'grad': return val / 400;
+                    default: return val / 100;
+                }
+            };
+            if (trailingPositions.length >= 2) {
+                // Two-position stop: color startPos endPos → two entries
+                rawStops.push({ color, position: toFraction(trailingPositions[0].value, trailingPositions[0].unit) });
+                rawStops.push({ color, position: toFraction(trailingPositions[1].value, trailingPositions[1].unit) });
+            }
+            else if (trailingPositions.length === 1) {
+                rawStops.push({ color, position: toFraction(trailingPositions[0].value, trailingPositions[0].unit) });
+            }
+            else {
+                // No explicit position — will be evenly distributed
+                rawStops.push({ color, position: null });
+            }
+        }
+        if (rawStops.length === 0)
+            return null;
+        // --- Fill in missing positions (CSS even distribution rules) ---
+        // First and last stops default to 0 and 1 if missing
+        if (rawStops[0].position === null)
+            rawStops[0].position = 0;
+        if (rawStops[rawStops.length - 1].position === null)
+            rawStops[rawStops.length - 1].position = 1;
+        // Interpolate missing positions between known ones
+        let lastKnownIdx = 0;
+        for (let i = 1; i < rawStops.length; i++) {
+            if (rawStops[i].position !== null) {
+                // Fill gaps between lastKnownIdx and i
+                const gapCount = i - lastKnownIdx;
+                if (gapCount > 1) {
+                    const startVal = rawStops[lastKnownIdx].position;
+                    const endVal = rawStops[i].position;
+                    for (let j = lastKnownIdx + 1; j < i; j++) {
+                        rawStops[j].position = startVal + (endVal - startVal) * ((j - lastKnownIdx) / gapCount);
+                    }
+                }
+                lastKnownIdx = i;
+            }
+        }
+        // --- Create conic gradient using Canvas 2D API ---
+        ctx.scale(scale, scale);
+        const cx = width * centerXFrac;
+        const cy = height * centerYFrac;
+        const startAngleRad = (startAngleDeg * Math.PI) / 180;
+        // Use createConicGradient if available (Chromium supports it)
+        if (typeof ctx.createConicGradient === 'function') {
+            const grad = ctx.createConicGradient(startAngleRad, cx, cy);
+            for (const stop of rawStops) {
+                try {
+                    grad.addColorStop(Math.max(0, Math.min(1, stop.position)), stop.color);
+                }
+                catch {
+                    // Skip invalid color values
+                }
+            }
+            ctx.fillStyle = grad;
+            ctx.fillRect(0, 0, width, height);
+        }
+        else {
+            // Fallback: draw arc segments manually (no smooth interpolation)
+            const scaledCx = cx;
+            const scaledCy = cy;
+            const radius = Math.max(width, height) * 1.5;
+            const angleOffset = startAngleRad - Math.PI / 2; // CSS conic starts at top
+            for (let i = 0; i < rawStops.length - 1; i++) {
+                const startFrac = rawStops[i].position;
+                const endFrac = rawStops[i + 1].position;
+                if (endFrac <= startFrac)
+                    continue;
+                // Draw many small slices for smooth color interpolation
+                const slices = Math.max(1, Math.ceil((endFrac - startFrac) * 360));
+                for (let s = 0; s < slices; s++) {
+                    const t = s / slices;
+                    const fracStart = startFrac + (endFrac - startFrac) * t;
+                    const fracEnd = startFrac + (endFrac - startFrac) * ((s + 1) / slices);
+                    const a1 = fracStart * Math.PI * 2 + angleOffset;
+                    const a2 = fracEnd * Math.PI * 2 + angleOffset;
+                    // Interpolate color (simple RGB lerp)
+                    const c1 = rawStops[i].color;
+                    const c2 = rawStops[i + 1].color;
+                    // Use start color for first half, end color for second half (rough lerp)
+                    const blendColor = t < 0.5 ? c1 : c2;
+                    ctx.beginPath();
+                    ctx.moveTo(scaledCx, scaledCy);
+                    ctx.arc(scaledCx, scaledCy, radius, a1, a2);
+                    ctx.closePath();
+                    ctx.fillStyle = blendColor;
+                    ctx.fill();
+                }
+            }
+        }
+        // Apply circular/rounded mask if the element is circular
+        if (isCircle) {
+            ctx.globalCompositeOperation = 'destination-in';
+            ctx.beginPath();
+            ctx.arc(cx, cy, Math.min(cx, cy), 0, Math.PI * 2);
+            ctx.fill();
+            ctx.globalCompositeOperation = 'source-over';
+        }
+        return canvas.toDataURL('image/png');
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Render an element with CSS filter:blur() as a canvas image.
+ * CSS blur applies a Gaussian blur to the entire element (expanding outward),
+ * which differs from OOXML softEdge (which only fades edges inward).
+ * For large blur values (>20px), rendering as an image produces much better results.
+ *
+ * @param el - The HTML element to render
+ * @param blurPx - The blur radius in pixels
+ * @param win - The window context (for getComputedStyle)
+ * @returns PNG data URI with position/size info, or null if rendering fails
+ */
+function renderBlurredElementAsImage(el, blurPx, win) {
+    try {
+        const rect = el.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return null;
+        const doc = win.document;
+        const computed = win.getComputedStyle(el);
+        // Expand canvas to account for blur spread (3x blur radius on each side)
+        const spread = blurPx * 3;
+        const canvasW = rect.width + spread * 2;
+        const canvasH = rect.height + spread * 2;
+        const scale = 2; // 2x for quality
+        const canvas = doc.createElement('canvas');
+        canvas.width = Math.round(canvasW * scale);
+        canvas.height = Math.round(canvasH * scale);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return null;
+        ctx.scale(scale, scale);
+        // Apply CSS opacity
+        const opacity = parseFloat(computed.opacity);
+        if (!isNaN(opacity) && opacity < 1) {
+            ctx.globalAlpha = opacity;
+        }
+        // Apply blur BEFORE drawing so all subsequent operations are blurred
+        ctx.filter = `blur(${blurPx}px)`;
+        // Parse visual properties
+        const bgImage = computed.backgroundImage;
+        const bgColor = computed.backgroundColor;
+        const borderRadius = parseFloat(computed.borderRadius) || 0;
+        const isCircle = borderRadius >= Math.min(rect.width, rect.height) / 2 - 1;
+        // Position content at center (with spread margin)
+        const offsetX = spread;
+        const offsetY = spread;
+        // Set fill style
+        if (bgImage && bgImage !== 'none' && bgImage.includes('gradient')) {
+            if (bgImage.includes('radial-gradient')) {
+                const centerX = offsetX + rect.width / 2;
+                const centerY = offsetY + rect.height / 2;
+                const gradientRadius = Math.max(rect.width, rect.height) / 2;
+                const canvasGrad = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, gradientRadius);
+                // Parse color stops - handle nested parentheses for rgba
+                const colorRegex = /rgba?\([^)]+\)|transparent|#[0-9a-fA-F]+/g;
+                const pctRegex = /([\d.]+)%/g;
+                const colors = Array.from(bgImage.matchAll(colorRegex)).map(m => m[0]);
+                const percents = Array.from(bgImage.matchAll(pctRegex)).map(m => parseFloat(m[1]) / 100);
+                for (let i = 0; i < colors.length; i++) {
+                    const pct = percents[i] !== undefined ? percents[i] : i / Math.max(colors.length - 1, 1);
+                    try {
+                        canvasGrad.addColorStop(Math.min(1, Math.max(0, pct)), colors[i]);
+                    }
+                    catch { /* skip */ }
+                }
+                ctx.fillStyle = canvasGrad;
+            }
+            else if (bgImage.includes('linear-gradient')) {
+                const canvasGrad = ctx.createLinearGradient(offsetX, offsetY, offsetX + rect.width, offsetY + rect.height);
+                const colorRegex = /rgba?\([^)]+\)|transparent|#[0-9a-fA-F]+/g;
+                const pctRegex = /([\d.]+)%/g;
+                const colors = Array.from(bgImage.matchAll(colorRegex)).map(m => m[0]);
+                const percents = Array.from(bgImage.matchAll(pctRegex)).map(m => parseFloat(m[1]) / 100);
+                for (let i = 0; i < colors.length; i++) {
+                    const pct = percents[i] !== undefined ? percents[i] : i / Math.max(colors.length - 1, 1);
+                    try {
+                        canvasGrad.addColorStop(Math.min(1, Math.max(0, pct)), colors[i]);
+                    }
+                    catch { /* skip */ }
+                }
+                ctx.fillStyle = canvasGrad;
+            }
+        }
+        else if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)') {
+            ctx.fillStyle = bgColor;
+        }
+        // Draw shape with blur filter active
+        if (isCircle) {
+            ctx.beginPath();
+            ctx.arc(offsetX + rect.width / 2, offsetY + rect.height / 2, Math.min(rect.width, rect.height) / 2, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        else if (borderRadius > 0) {
+            const r = Math.min(borderRadius, rect.width / 2, rect.height / 2);
+            ctx.beginPath();
+            ctx.moveTo(offsetX + r, offsetY);
+            ctx.lineTo(offsetX + rect.width - r, offsetY);
+            ctx.quadraticCurveTo(offsetX + rect.width, offsetY, offsetX + rect.width, offsetY + r);
+            ctx.lineTo(offsetX + rect.width, offsetY + rect.height - r);
+            ctx.quadraticCurveTo(offsetX + rect.width, offsetY + rect.height, offsetX + rect.width - r, offsetY + rect.height);
+            ctx.lineTo(offsetX + r, offsetY + rect.height);
+            ctx.quadraticCurveTo(offsetX, offsetY + rect.height, offsetX, offsetY + rect.height - r);
+            ctx.lineTo(offsetX, offsetY + r);
+            ctx.quadraticCurveTo(offsetX, offsetY, offsetX + r, offsetY);
+            ctx.closePath();
+            ctx.fill();
+        }
+        else {
+            ctx.fillRect(offsetX, offsetY, rect.width, rect.height);
+        }
+        const dataUri = canvas.toDataURL('image/png');
+        return {
+            dataUri,
+            x: rect.left - spread,
+            y: rect.top - spread,
+            w: canvasW,
+            h: canvasH,
+        };
+    }
+    catch {
+        return null;
+    }
+}
 /**
  * Extract visible CSS pseudo-elements (::before, ::after) from an element.
  *
@@ -748,19 +1242,20 @@ function extractPseudoElements(el, win) {
         // Parse opacity
         const elementOpacity = parseFloat(pComputed.opacity);
         const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
-        // Parse border-radius
+        // Parse border-radius and detect ellipse shape
         let rectRadius = 0;
         const borderRadius = pComputed.borderRadius;
         const radiusValue = parseFloat(borderRadius);
-        if (radiusValue > 0) {
+        // Detect ellipse: border-radius >= 50% on roughly square elements
+        const isCircularRadius = borderRadius.includes('%')
+            ? radiusValue >= 50
+            : (radiusValue > 0 && radiusValue >= Math.min(pWidth, pHeight) / 2 - 1);
+        const aspectRatio = pWidth / pHeight;
+        const isEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2.0;
+        if (radiusValue > 0 && !isEllipse) {
             if (borderRadius.includes('%')) {
-                if (radiusValue >= 50) {
-                    rectRadius = 1; // Fully rounded (pill shape)
-                }
-                else {
-                    const minDim = Math.min(pWidth, pHeight);
-                    rectRadius = (radiusValue / 100) * pxToInch(minDim);
-                }
+                const minDim = Math.min(pWidth, pHeight);
+                rectRadius = (radiusValue / 100) * pxToInch(minDim);
             }
             else {
                 rectRadius = pxToInch(radiusValue);
@@ -785,11 +1280,12 @@ function extractPseudoElements(el, win) {
                 gradient: gradient,
                 transparency: hasBg ? extractAlpha(pComputed.backgroundColor) : null,
                 line: null,
-                rectRadius: rectRadius,
+                rectRadius: isEllipse ? 0 : rectRadius,
                 shadow: shadow,
                 opacity: hasOpacity ? elementOpacity : null,
-                isEllipse: false,
+                isEllipse: isEllipse,
                 softEdge: null,
+                customGeometry: null,
             },
         };
         results.push(shapeElement);
@@ -845,10 +1341,27 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                     if (transparency !== null)
                         options.transparency = transparency;
                 }
+                // Check for gradient text fill (-webkit-background-clip: text + transparent text-fill-color)
+                const bgClip = computed.webkitBackgroundClip || computed.backgroundClip;
+                const textFillColor = computed.webkitTextFillColor;
+                const isTextFillTransparent = textFillColor === 'transparent' ||
+                    textFillColor === 'rgba(0, 0, 0, 0)' ||
+                    (textFillColor && textFillColor.includes('rgba') && textFillColor.endsWith(', 0)'));
+                if (bgClip === 'text' && isTextFillTransparent) {
+                    const bgImage = computed.backgroundImage;
+                    if (bgImage && bgImage !== 'none' &&
+                        (bgImage.includes('linear-gradient') || bgImage.includes('radial-gradient'))) {
+                        const textGradient = parseCssGradient(bgImage);
+                        if (textGradient) {
+                            options.fontFill = { type: 'gradient', gradient: textGradient };
+                            delete options.color; // Gradient fill takes priority over solid color
+                        }
+                    }
+                }
                 if (computed.fontSize)
                     options.fontSize = pxToPoints(computed.fontSize);
                 if (computed.fontFamily) {
-                    options.fontFace = computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+                    options.fontFace = extractFontFace(computed.fontFamily);
                 }
                 const runLetterSpacing = extractLetterSpacing(computed);
                 if (runLetterSpacing !== null)
@@ -959,10 +1472,23 @@ export function parseSlideHtml(doc) {
             const hasGradientBg = spanBgImage &&
                 spanBgImage !== 'none' &&
                 (spanBgImage.includes('linear-gradient') || spanBgImage.includes('radial-gradient'));
-            if (hasBg || hasBorder || hasGradientBg) {
+            // Check if this gradient is used for gradient text fill (background-clip: text)
+            // In that case, we should NOT create a shape element - the gradient fills the text itself
+            const spanBgClip = computed.webkitBackgroundClip || computed.backgroundClip;
+            const spanTextFillColor = computed.webkitTextFillColor;
+            const isGradientTextFill = hasGradientBg &&
+                spanBgClip === 'text' &&
+                (spanTextFillColor === 'transparent' ||
+                    spanTextFillColor === 'rgba(0, 0, 0, 0)' ||
+                    (spanTextFillColor && spanTextFillColor.includes('rgba') && spanTextFillColor.endsWith(', 0)')));
+            // Skip creating shape for gradient text fills - let text element handler create text with gradient fill
+            if (isGradientTextFill) {
+                // Don't process as shape, let it fall through to text handling
+            }
+            else if (hasBg || hasBorder || hasGradientBg) {
                 const rect = htmlEl.getBoundingClientRect();
                 if (rect.width > 0 && rect.height > 0) {
-                    const text = el.textContent.trim();
+                    const text = getTransformedText(htmlEl, computed);
                     const bgGradient = parseCssGradient(computed.backgroundImage);
                     const borderRadius = computed.borderRadius;
                     const radiusValue = parseFloat(borderRadius);
@@ -995,6 +1521,12 @@ export function parseSlideHtml(doc) {
                     const hasSpanOpacity = !isNaN(spanOpacity) && spanOpacity < 1;
                     // Extract box-shadow
                     const spanShadow = parseBoxShadow(computed.boxShadow);
+                    // For small elements (badges, labels), disable text wrapping to prevent overflow
+                    const spanWhiteSpace = computed.whiteSpace;
+                    const spanShouldNotWrap = spanWhiteSpace === 'nowrap' ||
+                        spanWhiteSpace === 'pre' ||
+                        rect.width < 100 ||
+                        rect.height < 50;
                     const shapeElement = {
                         type: 'shape',
                         position: {
@@ -1007,11 +1539,12 @@ export function parseSlideHtml(doc) {
                         textRuns: null,
                         style: text ? {
                             fontSize: pxToPoints(computed.fontSize),
-                            fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                            fontFace: extractFontFace(computed.fontFamily),
                             color: rgbToHex(computed.color),
                             bold: parseInt(computed.fontWeight) >= 600,
                             align: 'center',
                             valign: 'middle',
+                            wrap: !spanShouldNotWrap,
                         } : null,
                         shape: {
                             fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
@@ -1022,6 +1555,7 @@ export function parseSlideHtml(doc) {
                                     color: rgbToHex(computed.borderColor),
                                     width: pxToPoints(borderTop),
                                     transparency: extractAlpha(computed.borderColor),
+                                    dashType: extractDashType(computed.borderStyle),
                                 }
                                 : null,
                             rectRadius: spanIsEllipse ? 0 : rectRadius,
@@ -1029,6 +1563,7 @@ export function parseSlideHtml(doc) {
                             opacity: hasSpanOpacity ? spanOpacity : null,
                             isEllipse: spanIsEllipse,
                             softEdge: null,
+                            customGeometry: null,
                         },
                     };
                     elements.push(shapeElement);
@@ -1040,15 +1575,35 @@ export function parseSlideHtml(doc) {
             const parent = el.parentElement;
             if (parent && parent.tagName === 'DIV') {
                 const rect = htmlEl.getBoundingClientRect();
-                const text = el.textContent.trim();
+                const computed2 = win.getComputedStyle(el);
+                const text = getTransformedText(htmlEl, computed2);
                 if (rect.width > 0 && rect.height > 0 && text) {
-                    const computed2 = win.getComputedStyle(el);
                     const fontSizePx = parseFloat(computed2.fontSize);
                     const lineHeightPx = parseFloat(computed2.lineHeight);
                     const lineHeightMultiplier = fontSizePx > 0 && !isNaN(lineHeightPx) ? lineHeightPx / fontSizePx : 1.0;
+                    // Check for gradient text fill on plain SPAN elements
+                    const span2BgClip = computed2.webkitBackgroundClip || computed2.backgroundClip;
+                    const span2TextFillColor = computed2.webkitTextFillColor;
+                    const span2IsGradientText = span2BgClip === 'text' &&
+                        (span2TextFillColor === 'transparent' ||
+                            span2TextFillColor === 'rgba(0, 0, 0, 0)' ||
+                            (span2TextFillColor && span2TextFillColor.includes('rgba') && span2TextFillColor.endsWith(', 0)')));
+                    const span2BgImage = computed2.backgroundImage;
+                    const span2HasGradientBg = span2BgImage &&
+                        span2BgImage !== 'none' &&
+                        (span2BgImage.includes('linear-gradient') || span2BgImage.includes('radial-gradient'));
+                    let spanFontFill = undefined;
+                    let spanTextColor = rgbToHex(computed2.color);
+                    if (span2IsGradientText && span2HasGradientBg) {
+                        const spanGradient = parseCssGradient(span2BgImage);
+                        if (spanGradient) {
+                            spanFontFill = { type: 'gradient', gradient: spanGradient };
+                            spanTextColor = null; // Gradient fill takes priority
+                        }
+                    }
                     const textElement = {
                         type: 'p',
-                        text: [{ text: text, options: {} }],
+                        text: [{ text: text, options: spanFontFill ? { fontFill: spanFontFill } : {} }],
                         position: {
                             x: pxToInch(rect.left),
                             y: pxToInch(rect.top),
@@ -1057,8 +1612,8 @@ export function parseSlideHtml(doc) {
                         },
                         style: {
                             fontSize: pxToPoints(computed2.fontSize),
-                            fontFace: computed2.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
-                            color: rgbToHex(computed2.color),
+                            fontFace: extractFontFace(computed2.fontFamily),
+                            color: spanTextColor,
                             bold: parseInt(computed2.fontWeight) >= 600,
                             italic: computed2.fontStyle === 'italic',
                             align: computed2.textAlign === 'center'
@@ -1068,6 +1623,7 @@ export function parseSlideHtml(doc) {
                                     : 'left',
                             valign: 'middle',
                             lineSpacing: lineHeightMultiplier * pxToPoints(computed2.fontSize),
+                            fontFill: spanFontFill,
                         },
                     };
                     elements.push(textElement);
@@ -1245,7 +1801,7 @@ export function parseSlideHtml(doc) {
         // Extract inline SVG elements as images
         // Inline SVGs are converted to data URI images for PPTX embedding.
         // This handles icons, illustrations, and other vector graphics in the HTML.
-        if (el.tagName === 'svg') {
+        if (el.tagName.toLowerCase() === 'svg') {
             const rect = htmlEl.getBoundingClientRect();
             if (rect.width > 0 && rect.height > 0) {
                 // Skip SVGs with very low opacity - these are usually decorative overlays
@@ -1316,34 +1872,97 @@ export function parseSlideHtml(doc) {
                     }
                     return null; // Not a dynamic value, keep as-is
                 };
+                // Build a map of computed styles from ORIGINAL SVG elements (which are in the DOM)
+                // We need to do this BEFORE working with the clone, since the clone isn't attached
+                // to the document and won't have computed CSS styles from stylesheets.
+                const originalElements = [el, ...Array.from(el.querySelectorAll('*'))];
+                const computedStylesMap = new Map();
+                originalElements.forEach((origEl, index) => {
+                    // Use namespaceURI check instead of instanceof SVGElement since we're in an iframe context
+                    // where instanceof checks may fail due to different global objects
+                    const isSvgElement = origEl.namespaceURI === 'http://www.w3.org/2000/svg';
+                    if (isSvgElement) {
+                        const style = win.getComputedStyle(origEl);
+                        computedStylesMap.set(index, {
+                            fill: style.fill || '',
+                            stroke: style.stroke || '',
+                            strokeWidth: style.strokeWidth || '',
+                        });
+                    }
+                });
                 // Replace dynamic color values (currentColor, var()) in fill and stroke attributes
-                const resolveDynamicColors = (element) => {
-                    const fill = element.getAttribute('fill');
+                // Also bake in CSS-inherited fill/stroke when no attribute is present
+                const cloneElements = [svgClone, ...Array.from(svgClone.querySelectorAll('*'))];
+                cloneElements.forEach((cloneEl, index) => {
+                    const isSvgElement = cloneEl.namespaceURI === 'http://www.w3.org/2000/svg';
+                    const fill = cloneEl.getAttribute('fill');
                     const resolvedFill = resolveColorValue(fill);
                     if (resolvedFill) {
-                        element.setAttribute('fill', resolvedFill);
+                        cloneEl.setAttribute('fill', resolvedFill);
+                    }
+                    else if (!fill && isSvgElement) {
+                        // No fill attribute - use computed CSS value from original element
+                        const computed = computedStylesMap.get(index);
+                        if (computed && computed.fill) {
+                            // If CSS says fill: none, explicitly set fill="none" to prevent default black fill
+                            if (computed.fill === 'none') {
+                                cloneEl.setAttribute('fill', 'none');
+                            }
+                            else if (computed.fill !== 'rgb(0, 0, 0)') {
+                                // Apply non-black fill colors
+                                cloneEl.setAttribute('fill', computed.fill);
+                            }
+                        }
                     }
-                    const stroke = element.getAttribute('stroke');
+                    const stroke = cloneEl.getAttribute('stroke');
                     const resolvedStroke = resolveColorValue(stroke);
                     if (resolvedStroke) {
-                        element.setAttribute('stroke', resolvedStroke);
+                        cloneEl.setAttribute('stroke', resolvedStroke);
                     }
-                    // Recurse into child elements
-                    element.querySelectorAll('*').forEach(resolveDynamicColors);
-                };
-                resolveDynamicColors(svgClone);
+                    else if (!stroke && isSvgElement) {
+                        // No stroke attribute - use computed CSS value from original element
+                        const computed = computedStylesMap.get(index);
+                        if (computed && computed.stroke && computed.stroke !== 'none') {
+                            cloneEl.setAttribute('stroke', computed.stroke);
+                        }
+                        // Also bake in stroke-width if CSS provides it
+                        if (computed && computed.strokeWidth && computed.strokeWidth !== '1px' && !cloneEl.getAttribute('stroke-width')) {
+                            cloneEl.setAttribute('stroke-width', computed.strokeWidth);
+                        }
+                    }
+                });
                 // Serialize SVG to string
                 const serializer = new XMLSerializer();
                 const svgString = serializer.serializeToString(svgClone);
                 // Convert to data URI (base64 encoded for better compatibility)
                 const svgBase64 = btoa(unescape(encodeURIComponent(svgString)));
                 const dataUri = `data:image/svg+xml;base64,${svgBase64}`;
+                // Calculate SVG position, accounting for vertical-align
+                // NOTE: getBoundingClientRect() already returns the correct position when the
+                // parent uses flexbox layout. Only apply vertical-align adjustment for non-flex
+                // parents where inline vertical-align actually affects positioning.
+                let svgY = rect.top;
+                const computedAlign = win.getComputedStyle(htmlEl);
+                const verticalAlign = computedAlign.verticalAlign;
+                // If SVG has vertical-align: middle and a parent, center it within parent's height
+                // BUT skip this if parent is a flex container (flexbox already handles positioning)
+                if (verticalAlign === 'middle' && el.parentElement) {
+                    const parentComputed = win.getComputedStyle(el.parentElement);
+                    const parentIsFlex = parentComputed.display === 'flex' || parentComputed.display === 'inline-flex';
+                    if (!parentIsFlex) {
+                        const parentRect = el.parentElement.getBoundingClientRect();
+                        if (parentRect.height > rect.height) {
+                            // Center the SVG vertically within the parent
+                            svgY = parentRect.top + (parentRect.height - rect.height) / 2;
+                        }
+                    }
+                }
                 const imageElement = {
                     type: 'image',
                     src: dataUri,
                     position: {
                         x: pxToInch(rect.left),
-                        y: pxToInch(rect.top),
+                        y: pxToInch(svgY),
                         w: pxToInch(rect.width),
                         h: pxToInch(rect.height),
                     },
@@ -1356,14 +1975,98 @@ export function parseSlideHtml(doc) {
                 return;
             }
         }
-        // Handle <i> elements — skip Font Awesome / icon font elements cleanly.
+        // Handle <i> elements — render Font Awesome / icon font elements as images.
         // Font Awesome uses ::before pseudo-elements with font-family "Font Awesome ..." to render icons
         // as PUA (Private Use Area) Unicode characters. These PUA characters don't have visual
-        // representations in standard fonts used by PowerPoint/LibreOffice, and Unicode symbol
-        // approximations (⊞, ↗, etc.) look too different from the original FA icons, causing
-        // pixel regressions. The icon container shapes (icon-circle DIVs) still render as shapes,
-        // providing visual context. We simply skip the <i> elements entirely.
+        // representations in standard fonts used by PowerPoint/LibreOffice.
+        //
+        // Solution: Render the icon to a canvas and convert to a data URI image.
+        // This preserves the visual appearance regardless of font availability.
         if (el.tagName === 'I') {
+            const rect = htmlEl.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                const computed = win.getComputedStyle(htmlEl);
+                const beforeComputed = win.getComputedStyle(htmlEl, '::before');
+                // Check if this is a Font Awesome or icon font element
+                const fontFamily = beforeComputed.fontFamily || computed.fontFamily;
+                const content = beforeComputed.content;
+                const isFontIcon = fontFamily.toLowerCase().includes('font awesome') ||
+                    fontFamily.toLowerCase().includes('fontawesome') ||
+                    fontFamily.toLowerCase().includes('fa ') ||
+                    fontFamily.toLowerCase().includes('material') ||
+                    fontFamily.toLowerCase().includes('icon');
+                if (isFontIcon && content && content !== 'none' && content !== 'normal') {
+                    // Render the icon to a canvas image.
+                    // Icon fonts (Font Awesome, Material Icons, etc.) use Private Use Area (PUA)
+                    // Unicode characters that won't render in PowerPoint. We capture them as images.
+                    //
+                    // IMPORTANT: Use the iframe's document (via win.document) for canvas creation
+                    // and font checking, since that's where the @font-face fonts are loaded.
+                    try {
+                        const scale = 8;
+                        const w = Math.ceil(rect.width);
+                        const h = Math.ceil(rect.height);
+                        // Create canvas in the iframe's document context where fonts are loaded
+                        const iframeDoc = win.document;
+                        const canvas = iframeDoc.createElement('canvas');
+                        canvas.width = w * scale;
+                        canvas.height = h * scale;
+                        const ctx = canvas.getContext('2d');
+                        if (ctx) {
+                            ctx.scale(scale, scale);
+                            // Get the icon character from content (strip quotes)
+                            let iconChar = content.replace(/['"]/g, '');
+                            // Handle CSS escape sequences like \f015
+                            if (iconChar.startsWith('\\')) {
+                                const codePoint = parseInt(iconChar.slice(1), 16);
+                                if (!isNaN(codePoint)) {
+                                    iconChar = String.fromCodePoint(codePoint);
+                                }
+                            }
+                            // Set up the font
+                            const fontSize = parseFloat(beforeComputed.fontSize) || parseFloat(computed.fontSize) || 16;
+                            const fontWeight = beforeComputed.fontWeight || computed.fontWeight || '900';
+                            // Try each font family in the list until one is verified available
+                            const fontFamilies = fontFamily.split(',').map(f => f.trim().replace(/['"]/g, ''));
+                            let fontSet = false;
+                            for (const ff of fontFamilies) {
+                                const fontSpec = `${fontWeight} ${fontSize}px "${ff}"`;
+                                // Use the iframe's document.fonts to check (that's where @font-face rules live)
+                                if (iframeDoc.fonts && iframeDoc.fonts.check(fontSpec)) {
+                                    ctx.font = fontSpec;
+                                    fontSet = true;
+                                    break;
+                                }
+                            }
+                            if (!fontSet) {
+                                // Fallback: use the full font-family string
+                                ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+                            }
+                            ctx.fillStyle = computed.color || 'white';
+                            ctx.textAlign = 'center';
+                            ctx.textBaseline = 'middle';
+                            // Draw the icon character centered
+                            ctx.fillText(iconChar, w / 2, h / 2);
+                            const dataUri = canvas.toDataURL('image/png');
+                            const imageElement = {
+                                type: 'image',
+                                src: dataUri,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(rect.height),
+                                },
+                                sizing: null,
+                            };
+                            elements.push(imageElement);
+                        }
+                    }
+                    catch {
+                        // If rendering fails, skip the icon
+                    }
+                }
+            }
             processed.add(el);
             return;
         }
@@ -1371,7 +2074,73 @@ export function parseSlideHtml(doc) {
         const isContainer = el.tagName === 'DIV' && !textTags.includes(el.tagName);
         if (isContainer) {
             const computed = win.getComputedStyle(el);
+            // === LARGE BLUR ELEMENTS: render as image ===
+            // CSS filter:blur() does a Gaussian blur expanding outward. OOXML softEdge only
+            // fades edges inward. For blur > 20px (common on decorative orbs), capture the
+            // blurred result as an image for much better visual fidelity.
+            const divFilterStr = computed.filter;
+            if (divFilterStr && divFilterStr !== 'none') {
+                const divBlurMatch = divFilterStr.match(/blur\(([\d.]+)px\)/);
+                if (divBlurMatch) {
+                    const divBlurPx = parseFloat(divBlurMatch[1]);
+                    if (divBlurPx > 20) {
+                        const blurResult = renderBlurredElementAsImage(htmlEl, divBlurPx, win);
+                        if (blurResult) {
+                            const imgElement = {
+                                type: 'image',
+                                src: blurResult.dataUri,
+                                position: {
+                                    x: pxToInch(blurResult.x),
+                                    y: pxToInch(blurResult.y),
+                                    w: pxToInch(blurResult.w),
+                                    h: pxToInch(blurResult.h),
+                                },
+                                sizing: null,
+                                rectRadius: 0,
+                            };
+                            elements.push(imgElement);
+                            processed.add(el);
+                            el.querySelectorAll('*').forEach((child) => processed.add(child));
+                            return;
+                        }
+                    }
+                }
+            }
+            // === CONIC GRADIENT: render as image ===
+            // PPTX has no native conic-gradient support. Render as canvas image.
+            const divBgImageForConic = computed.backgroundImage;
+            if (divBgImageForConic && divBgImageForConic.includes('conic-gradient')) {
+                const rect = htmlEl.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                    const borderRadiusStr = computed.borderRadius;
+                    const radiusVal = parseFloat(borderRadiusStr);
+                    const isCircular = borderRadiusStr.includes('%')
+                        ? radiusVal >= 50
+                        : (radiusVal > 0 && radiusVal >= Math.min(rect.width, rect.height) / 2 - 1);
+                    const conicDataUri = renderConicGradientAsImage(divBgImageForConic, rect.width, rect.height, isCircular, win.document);
+                    if (conicDataUri) {
+                        const imgElement = {
+                            type: 'image',
+                            src: conicDataUri,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(rect.height),
+                            },
+                            sizing: null,
+                            rectRadius: 0,
+                        };
+                        elements.push(imgElement);
+                        // Don't mark as fully processed — children (text, pseudo-elements) still need extraction
+                        // Just skip the shape creation for this element's background
+                    }
+                }
+            }
             const hasBg = computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+            // Check for clip-path: polygon() — store for custom geometry
+            const clipPathValue = computed.clipPath || computed.webkitClipPath;
+            const clipPathPolygon = parseClipPathPolygon(clipPathValue);
             // Check for background images or gradients
             const elBgImage = computed.backgroundImage;
             let bgImageUrl = null;
@@ -1497,27 +2266,44 @@ export function parseSlideHtml(doc) {
                     const textChildren = allChildren.filter((child) => {
                         if (textTagSet.has(child.tagName))
                             return true;
-                        // Include text-only DIVs: leaf (no child elements) OR only <br>/<p> children
+                        // Include text-only DIVs: DIVs that contain only inline/text content
                         // The transformer wraps bare text in <p> tags, so a DIV with a single <p> child
                         // is still effectively a text-only DIV. Examples after transformation:
                         // <div id="stat-value-1"><p>1.1°C</p></div>
                         // <div id="stat-label-1">Global temperature rise since<br>pre-industrial era</div>
+                        // <div class="bullet-desc">Text with <strong>bold</strong> content</div>
                         if (child.tagName === 'DIV') {
+                            const childComputed = win.getComputedStyle(child);
+                            // DIVs that use flex-row or grid layout with multiple children are
+                            // layout containers — their children are positioned spatially (side
+                            // by side) which a PPTX text box cannot reproduce. Don't merge them
+                            // as text; let their children be extracted with independent positions.
+                            const childDisplay = childComputed.display;
+                            const childFlexDir = childComputed.flexDirection || 'row';
+                            const childChildCount = child.children.length;
+                            const isFlexRowLayout = (childDisplay === 'flex' || childDisplay === 'inline-flex') &&
+                                (childFlexDir === 'row' || childFlexDir === 'row-reverse') &&
+                                childChildCount > 1;
+                            const isGridLayout = childDisplay === 'grid' || childDisplay === 'inline-grid';
+                            if (isFlexRowLayout || isGridLayout)
+                                return false;
                             const childElements = Array.from(child.children);
+                            // Inline text elements that don't break text-only status
+                            const inlineTextTags = new Set(['STRONG', 'EM', 'B', 'I', 'A', 'BR', 'SPAN', 'MARK', 'SMALL', 'SUB', 'SUP', 'CODE', 'U', 'S', 'Q', 'CITE', 'ABBR', 'TIME', 'DATA']);
                             // A text-only DIV has:
                             // - no child elements, OR
-                            // - only <br> children (inline breaks), OR
+                            // - only inline text elements (strong, em, br, span, etc.), OR
                             // - a single <p> child (injected by transform.ts text wrapping)
                             const isTextOnlyDiv = childElements.length === 0 ||
-                                childElements.every(ce => ce.tagName === 'BR') ||
+                                childElements.every(ce => inlineTextTags.has(ce.tagName)) ||
                                 (childElements.length === 1 && childElements[0].tagName === 'P' &&
-                                    childElements[0].children.length === 0);
+                                    (childElements[0].children.length === 0 ||
+                                        Array.from(childElements[0].children).every(ce => inlineTextTags.has(ce.tagName))));
                             if (!isTextOnlyDiv)
                                 return false;
                             const childText = child.textContent?.trim();
                             if (!childText)
                                 return false;
-                            const childComputed = win.getComputedStyle(child);
                             const childHasBg = childComputed.backgroundColor && childComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
                             const childHasBgImg = childComputed.backgroundImage && childComputed.backgroundImage !== 'none';
                             const childBorders = [
@@ -1537,17 +2323,21 @@ export function parseSlideHtml(doc) {
                     const nonTextChildren = allChildren.filter((child) => !textTagSet.has(child.tagName) &&
                         !decorativeTags.has(child.tagName) &&
                         !(child.tagName === 'DIV' && textChildren.includes(child)));
+                    // Inline text elements that don't break "simple" text child status
+                    const inlineTextTagsForSimple = new Set(['STRONG', 'EM', 'B', 'I', 'A', 'BR', 'SPAN', 'MARK', 'SMALL', 'SUB', 'SUP', 'CODE', 'U', 'S', 'Q', 'CITE', 'ABBR', 'TIME', 'DATA']);
                     const isSingleTextChild = textChildren.length === 1 &&
                         (() => {
                             const tc = textChildren[0];
                             const tcChildren = Array.from(tc.children);
                             // A text child is "simple" (no further structural content) if:
                             // - it has no child elements, OR
-                            // - all children are <BR> tags (inline breaks), OR
-                            // - it has a single <P> child with no further child elements (from transform.ts wrapping)
+                            // - all children are inline text elements (BR, STRONG, EM, etc.), OR
+                            // - it has a single <P> child with only inline text elements (from transform.ts wrapping)
                             return tcChildren.length === 0 ||
-                                tcChildren.every(ce => ce.tagName === 'BR') ||
-                                (tcChildren.length === 1 && tcChildren[0].tagName === 'P' && tcChildren[0].children.length === 0);
+                                tcChildren.every(ce => inlineTextTagsForSimple.has(ce.tagName)) ||
+                                (tcChildren.length === 1 && tcChildren[0].tagName === 'P' &&
+                                    (tcChildren[0].children.length === 0 ||
+                                        Array.from(tcChildren[0].children).every(ce => inlineTextTagsForSimple.has(ce.tagName))));
                         })() &&
                         nonTextChildren.length === 0;
                     // Detect flexbox alignment
@@ -1597,34 +2387,44 @@ export function parseSlideHtml(doc) {
                             align = 'right';
                         }
                         else {
-                            const paddingLeft = parseFloat(computed.paddingLeft) || 0;
-                            const paddingRight = parseFloat(computed.paddingRight) || 0;
-                            const paddingDiff = Math.abs(paddingLeft - paddingRight);
-                            if (paddingLeft > 0 && paddingDiff < 2) {
-                                align = 'center';
-                            }
-                            else {
-                                align = 'left';
-                            }
+                            align = 'left';
                         }
                     }
                     let shapeText = '';
                     let shapeTextRuns = null;
                     let shapeStyle = null;
                     const hasTextChildren = textChildren.length > 0;
+                    // Check for direct text nodes (not wrapped in elements) — handles badges like:
+                    // <div class="badge"><svg>icon</svg> Heated stone floors</div>
+                    // where "Heated stone floors" is a direct text node, not a child element
+                    let directTextContent = '';
+                    if (!hasTextChildren) {
+                        for (const node of Array.from(el.childNodes)) {
+                            if (node.nodeType === Node.TEXT_NODE) {
+                                directTextContent += node.textContent || '';
+                            }
+                        }
+                        directTextContent = directTextContent.trim();
+                        // Apply text-transform from parent element to direct text nodes
+                        if (directTextContent && computed.textTransform && computed.textTransform !== 'none') {
+                            directTextContent = applyTextTransform(directTextContent, computed.textTransform);
+                        }
+                    }
+                    const hasDirectText = directTextContent.length > 0;
                     // When a container has BOTH non-text children (styled shapes like icon-circles)
                     // AND multiple text children, don't merge the text into the parent shape.
                     // The text children have their own positioning via flex/grid layout and should
                     // remain as standalone elements for better fidelity. Only merge text when:
                     // - It's a single text child (isSingleTextChild), OR
-                    // - There are ONLY text children (no non-text siblings to compete with for space)
+                    // - There are ONLY text children (no non-text siblings to compete with for space), OR
+                    // - There's direct text content (text nodes, not child elements)
                     const shouldMergeText = hasTextChildren && (isSingleTextChild ||
-                        nonTextChildren.length === 0);
+                        nonTextChildren.length === 0) || hasDirectText;
                     if (shouldMergeText) {
                         if (isSingleTextChild) {
                             const textEl = textChildren[0];
                             const textComputed = win.getComputedStyle(textEl);
-                            shapeText = textEl.textContent.trim();
+                            shapeText = getTransformedText(textEl, textComputed);
                             let fontFill = null;
                             const textBgClip = textComputed.webkitBackgroundClip ||
                                 textComputed.backgroundClip;
@@ -1679,10 +2479,7 @@ export function parseSlideHtml(doc) {
                                 rect.height < 50;
                             shapeStyle = {
                                 fontSize: pxToPoints(textComputed.fontSize || computed.fontSize),
-                                fontFace: (textComputed.fontFamily || computed.fontFamily)
-                                    .split(',')[0]
-                                    .replace(/['"]/g, '')
-                                    .trim(),
+                                fontFace: extractFontFace(textComputed.fontFamily || computed.fontFamily),
                                 color: fontFill ? null : rgbToHex(effectiveColor),
                                 fontFill: fontFill,
                                 bold: isBold,
@@ -1704,12 +2501,12 @@ export function parseSlideHtml(doc) {
                             // Also mark descendants as processed (e.g., <p> from transform.ts wrapping)
                             textEl.querySelectorAll('*').forEach(desc => processed.add(desc));
                         }
-                        else {
+                        else if (hasTextChildren) {
                             shapeTextRuns = [];
                             textChildren.forEach((textChild, idx) => {
                                 const textEl = textChild;
                                 const textComputed = win.getComputedStyle(textEl);
-                                const fullText = textEl.textContent.trim();
+                                const fullText = getTransformedText(textEl, textComputed);
                                 if (!fullText)
                                     return;
                                 const isBold = textComputed.fontWeight === 'bold' ||
@@ -1719,10 +2516,7 @@ export function parseSlideHtml(doc) {
                                     textComputed.textDecoration.includes('underline');
                                 const baseRunOptions = {
                                     fontSize: pxToPoints(textComputed.fontSize),
-                                    fontFace: textComputed.fontFamily
-                                        .split(',')[0]
-                                        .replace(/['"]/g, '')
-                                        .trim(),
+                                    fontFace: extractFontFace(textComputed.fontFamily),
                                     color: rgbToHex(textComputed.color),
                                     bold: isBold,
                                     italic: isItalic,
@@ -1751,6 +2545,10 @@ export function parseSlideHtml(doc) {
                                     if (currentSegment.trim())
                                         segments.push(currentSegment.trim());
                                     segments = segments.filter(s => s.length > 0);
+                                    // Apply text-transform to each segment
+                                    if (textComputed.textTransform && textComputed.textTransform !== 'none') {
+                                        segments = segments.map(s => applyTextTransform(s, textComputed.textTransform));
+                                    }
                                     segments.forEach((segment, segIdx) => {
                                         const prefix = (segIdx === 0 && idx > 0 && shapeTextRuns.length > 0) ? '\n' : '';
                                         const runText = prefix + segment;
@@ -1779,6 +2577,34 @@ export function parseSlideHtml(doc) {
                                 inset: 0,
                             };
                         }
+                        else if (hasDirectText) {
+                            // Handle direct text nodes (e.g., badge text alongside SVG icons)
+                            // Use directTextContent which was already extracted above
+                            shapeText = directTextContent;
+                            const isBold = parseInt(computed.fontWeight) >= 600;
+                            const isItalic = computed.fontStyle === 'italic';
+                            // For small elements (badges, labels), disable text wrapping to prevent overflow
+                            const whiteSpace = computed.whiteSpace;
+                            const shouldNotWrap = whiteSpace === 'nowrap' ||
+                                whiteSpace === 'pre' ||
+                                rect.width < 100 ||
+                                rect.height < 50;
+                            shapeStyle = {
+                                fontSize: pxToPoints(computed.fontSize),
+                                fontFace: extractFontFace(computed.fontFamily),
+                                color: rgbToHex(computed.color),
+                                bold: isBold,
+                                italic: isItalic,
+                                align: align,
+                                valign: valign,
+                                inset: 0,
+                                wrap: !shouldNotWrap,
+                            };
+                            // Extract letter-spacing for direct text
+                            const ls = extractLetterSpacing(computed);
+                            if (ls !== null)
+                                shapeStyle.charSpacing = ls;
+                        }
                     }
                     if (hasBg || hasUniformBorder || bgGradient) {
                         // Detect element-level opacity
@@ -1837,6 +2663,7 @@ export function parseSlideHtml(doc) {
                                         color: rgbToHex(computed.borderColor),
                                         width: pxToPoints(computed.borderWidth),
                                         transparency: extractAlpha(computed.borderColor),
+                                        dashType: extractDashType(computed.borderStyle),
                                     }
                                     : null,
                                 rectRadius: (() => {
@@ -1860,12 +2687,51 @@ export function parseSlideHtml(doc) {
                                 opacity: hasOpacity ? elementOpacity : null,
                                 isEllipse: isEllipse,
                                 softEdge: softEdgePt,
+                                customGeometry: clipPathPolygon ? (() => {
+                                    // Convert percentage-based polygon points to EMU coordinates
+                                    // relative to the shape's bounding box.
+                                    // PptxGenJS custGeom uses the cx/cy (extent) as the path coordinate space.
+                                    const EMU = 914400; // EMUs per inch
+                                    const pathW = Math.round(rect.width / PX_PER_IN * EMU);
+                                    const pathH = Math.round(rect.height / PX_PER_IN * EMU);
+                                    const points = [];
+                                    clipPathPolygon.forEach((pt, i) => {
+                                        points.push({
+                                            x: Math.round(pt.x * pathW),
+                                            y: Math.round(pt.y * pathH),
+                                            ...(i === 0 ? { moveTo: true } : {}),
+                                        });
+                                    });
+                                    points.push({ x: 0, y: 0, close: true });
+                                    return points;
+                                })() : null,
                             },
                         };
                         // Apply CSS padding as text body insets when shape has text content
                         if (hasPadding && shapeElement.style && (shapeText || (shapeTextRuns && shapeTextRuns.length > 0))) {
+                            // When there's direct text with sibling elements (e.g., SVG icons),
+                            // we need to increase the left inset to account for the sibling element width + gap
+                            let effectiveLeftPadding = paddingLeft;
+                            if (hasDirectText && allChildren.length > 0) {
+                                // Find preceding sibling elements and calculate total width + gap
+                                for (const child of allChildren) {
+                                    if (child.nodeType === Node.ELEMENT_NODE) {
+                                        const childEl = child;
+                                        const childRect = childEl.getBoundingClientRect();
+                                        const childComputed = win.getComputedStyle(childEl);
+                                        const marginRight = parseFloat(childComputed.marginRight) || 0;
+                                        // Add child width + its margin to effective left padding
+                                        effectiveLeftPadding += childRect.width + marginRight;
+                                    }
+                                }
+                                // Also account for the gap property on flex containers
+                                const gap = parseFloat(computed.gap) || 0;
+                                if (gap > 0 && allChildren.length > 0) {
+                                    effectiveLeftPadding += gap;
+                                }
+                            }
                             shapeElement.style.margin = [
-                                paddingLeft * PT_PER_PX, // left
+                                effectiveLeftPadding * PT_PER_PX, // left
                                 paddingRight * PT_PER_PX, // right
                                 paddingBottom * PT_PER_PX, // bottom
                                 paddingTop * PT_PER_PX, // top
@@ -1890,6 +2756,15 @@ export function parseSlideHtml(doc) {
                     else if (isSingleTextChild) {
                         processed.delete(textChildren[0]);
                     }
+                    else if (textChildren.length > 0) {
+                        // No shape was created (no bg/border/gradient) but text children were
+                        // collected and marked as processed. Un-process them so they can be
+                        // handled by their own tag handlers (e.g., SPAN handler for badge tags).
+                        textChildren.forEach(tc => {
+                            processed.delete(tc);
+                            tc.querySelectorAll('*').forEach(desc => processed.delete(desc));
+                        });
+                    }
                     elements.push(...borderLines);
                     processed.add(el);
                     return;
@@ -1897,11 +2772,16 @@ export function parseSlideHtml(doc) {
             }
             // Plain DIVs with DIRECT text node content but no visual styling
             // (e.g. slide-footer "6 / 6", slide-number "03 / 06", stat values/labels)
-            // CRITICAL: Only extract if the DIV has meaningful direct text nodes,
-            // NOT just text inherited from descendant elements.
+            // Also handles DIVs containing only inline text elements like <strong>, <em>, etc.
+            // (e.g. bullet descriptions with highlighted text)
             if (isContainer) {
                 const rect = htmlEl.getBoundingClientRect();
                 if (rect.width > 0 && rect.height > 0) {
+                    // Inline text elements that don't break text-only status
+                    // Note: P is NOT included here — it's a block-level element with independent
+                    // styling (font size, weight, margins). The single-P wrapper case (from
+                    // transform.ts wrapping bare text) is handled separately below.
+                    const inlineTextTagsSet = new Set(['STRONG', 'EM', 'B', 'I', 'A', 'BR', 'SPAN', 'MARK', 'SMALL', 'SUB', 'SUP', 'CODE', 'U', 'S', 'Q', 'CITE', 'ABBR', 'TIME', 'DATA']);
                     // Collect direct text nodes (not from children)
                     // Also handle <p>-wrapped text from transform.ts which wraps bare text in <p> tags
                     let directText = '';
@@ -1912,33 +2792,142 @@ export function parseSlideHtml(doc) {
                     }
                     directText = directText.trim();
                     // If no direct text nodes, check for a single <p> wrapper (from transform.ts)
+                    // This handles both plain <p>text</p> and <p>text with <strong>bold</strong></p>
                     const childElements = Array.from(el.children);
+                    const singlePInlineCheck = new Set(['STRONG', 'EM', 'B', 'I', 'A', 'BR', 'SPAN', 'MARK', 'SMALL', 'SUB', 'SUP', 'CODE', 'U', 'S']);
                     if (!directText && childElements.length === 1 && childElements[0].tagName === 'P' &&
-                        childElements[0].children.length === 0) {
+                        (childElements[0].children.length === 0 ||
+                            Array.from(childElements[0].children).every(ce => singlePInlineCheck.has(ce.tagName)))) {
                         directText = childElements[0].textContent?.trim() || '';
                     }
+                    // Apply text-transform from CSS (PPTX doesn't support CSS text-transform)
+                    if (directText) {
+                        const directTextComputed = win.getComputedStyle(el);
+                        if (directTextComputed.textTransform && directTextComputed.textTransform !== 'none') {
+                            directText = applyTextTransform(directText, directTextComputed.textTransform);
+                        }
+                    }
+                    // Check if this DIV contains only inline text elements (like <strong>, <em>, etc.)
+                    // mixed with text nodes. If so, we should extract the full textContent.
+                    // BUT: DIVs with flex-row or grid layout containing multiple children are
+                    // layout containers — their children are positioned spatially and must be
+                    // extracted independently to preserve horizontal positioning.
+                    const plainDivComputed = win.getComputedStyle(el);
+                    const plainDivDisplay = plainDivComputed.display;
+                    const plainDivFlexDir = plainDivComputed.flexDirection || 'row';
+                    const plainDivChildCount = el.children.length;
+                    const isPlainDivFlexRow = (plainDivDisplay === 'flex' || plainDivDisplay === 'inline-flex') &&
+                        (plainDivFlexDir === 'row' || plainDivFlexDir === 'row-reverse') &&
+                        plainDivChildCount > 1;
+                    const isPlainDivGrid = plainDivDisplay === 'grid' || plainDivDisplay === 'inline-grid';
+                    const allChildrenAreInlineText = !isPlainDivFlexRow && !isPlainDivGrid && (childElements.length === 0 ||
+                        childElements.every(ce => inlineTextTagsSet.has(ce.tagName.toUpperCase())));
                     // Only proceed if this DIV has meaningful text content
                     // AND has no structural child elements that would be extracted separately
-                    const hasStructuralChildren = childElements.length > 0 &&
-                        !childElements.every(ce => ce.tagName === 'BR') &&
-                        !(childElements.length === 1 && childElements[0].tagName === 'P' && childElements[0].children.length === 0);
-                    if (directText && !hasStructuralChildren) {
+                    // SVG children are decorative (already extracted as images) and shouldn't block text extraction
+                    const structuralChildElements = childElements.filter(ce => {
+                        const tagName = ce.tagName.toUpperCase();
+                        return tagName !== 'BR' &&
+                            tagName !== 'SVG' &&
+                            !inlineTextTagsSet.has(tagName);
+                    });
+                    const hasStructuralChildren = structuralChildElements.length > 0;
+                    // If all children are inline text elements (or no children), use the full textContent
+                    // This handles cases like: "Text with <strong>bold</strong> content"
+                    // where we need to capture both direct text nodes and inline element content
+                    let extractedText = '';
+                    if (allChildrenAreInlineText) {
+                        extractedText = el.textContent?.trim() || '';
+                        // Apply text-transform
+                        const inlineTextComputed = win.getComputedStyle(el);
+                        if (extractedText && inlineTextComputed.textTransform && inlineTextComputed.textTransform !== 'none') {
+                            extractedText = applyTextTransform(extractedText, inlineTextComputed.textTransform);
+                        }
+                    }
+                    else if (directText) {
+                        // Fallback to direct text only if there are structural children
+                        extractedText = directText;
+                    }
+                    if (extractedText && !hasStructuralChildren) {
                         const computed2 = win.getComputedStyle(el);
                         const fontSizePx = parseFloat(computed2.fontSize);
                         const lineHeightPx = parseFloat(computed2.lineHeight);
                         const lineHeightMultiplier = fontSizePx > 0 && !isNaN(lineHeightPx) ? lineHeightPx / fontSizePx : 1.0;
+                        // Calculate text position
+                        // For inline text elements (allChildrenAreInlineText), always use the full container bounds
+                        // For direct text only (no inline children), use Range API to get precise bounds
+                        let textLeft = rect.left;
+                        let textWidth = rect.width;
+                        // Only use Range API positioning for pure direct text (no inline element children)
+                        // When there are inline elements like <strong>, <em>, etc., the text is spread across
+                        // multiple nodes and we need the full container bounds
+                        if (directText && !allChildrenAreInlineText) {
+                            // Find the first non-empty text node and get its bounding rect
+                            for (const child of Array.from(el.childNodes)) {
+                                if (child.nodeType === Node.TEXT_NODE && (child.textContent || '').trim()) {
+                                    const range = document.createRange();
+                                    range.selectNodeContents(child);
+                                    const textRect = range.getBoundingClientRect();
+                                    if (textRect.width > 0) {
+                                        textLeft = textRect.left;
+                                        textWidth = textRect.width;
+                                    }
+                                    break;
+                                }
+                            }
+                        }
+                        // For allChildrenAreInlineText, we use the full container bounds
+                        // which is already set as textLeft = rect.left and textWidth = rect.width
+                        // Use container's Y position for vertical alignment with SVG siblings
+                        // (Range API may return different Y due to line-height/baseline differences)
+                        const textTop = rect.top;
+                        const textHeight = rect.height;
+                        // When the div contains inline text elements (strong, em, etc.),
+                        // use parseInlineFormatting to preserve per-run styling (color, bold, etc.).
+                        // Otherwise, create a single text run.
+                        let textRuns;
+                        if (allChildrenAreInlineText && childElements.length > 0) {
+                            const baseRunOptions = {
+                                fontSize: pxToPoints(computed2.fontSize),
+                                fontFace: extractFontFace(computed2.fontFamily),
+                                color: rgbToHex(computed2.color),
+                            };
+                            if (parseInt(computed2.fontWeight) >= 600)
+                                baseRunOptions.bold = true;
+                            if (computed2.fontStyle === 'italic')
+                                baseRunOptions.italic = true;
+                            // Apply text-transform function
+                            let textTransformFn = (s) => s;
+                            if (computed2.textTransform && computed2.textTransform !== 'none') {
+                                textTransformFn = (text) => applyTextTransform(text, computed2.textTransform);
+                            }
+                            textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win);
+                            // Fallback to single run if parseInlineFormatting produced nothing
+                            if (textRuns.length === 0) {
+                                textRuns = [{ text: extractedText, options: {} }];
+                            }
+                        }
+                        else {
+                            textRuns = [{ text: extractedText, options: {} }];
+                        }
+                        // Extract padding from computed style for PPTX margin/inset
+                        const paddingTop = parseFloat(computed2.paddingTop) || 0;
+                        const paddingRight = parseFloat(computed2.paddingRight) || 0;
+                        const paddingBottom = parseFloat(computed2.paddingBottom) || 0;
+                        const paddingLeft = parseFloat(computed2.paddingLeft) || 0;
+                        const hasPadding = paddingTop > 0 || paddingRight > 0 || paddingBottom > 0 || paddingLeft > 0;
                         const textElement = {
                             type: 'p',
-                            text: [{ text: directText, options: {} }],
+                            text: textRuns,
                             position: {
-                                x: pxToInch(rect.left),
-                                y: pxToInch(rect.top),
-                                w: pxToInch(rect.width),
-                                h: pxToInch(rect.height),
+                                x: pxToInch(textLeft),
+                                y: pxToInch(textTop),
+                                w: pxToInch(textWidth),
+                                h: pxToInch(textHeight),
                             },
                             style: {
                                 fontSize: pxToPoints(computed2.fontSize),
-                                fontFace: computed2.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                                fontFace: extractFontFace(computed2.fontFamily),
                                 color: rgbToHex(computed2.color),
                                 bold: parseInt(computed2.fontWeight) >= 600,
                                 italic: computed2.fontStyle === 'italic',
@@ -1947,8 +2936,11 @@ export function parseSlideHtml(doc) {
                                     : computed2.textAlign === 'right' || computed2.textAlign === 'end'
                                         ? 'right'
                                         : 'left',
-                                valign: 'middle',
+                                valign: hasPadding ? 'top' : 'middle',
                                 lineSpacing: lineHeightMultiplier * pxToPoints(computed2.fontSize),
+                                margin: hasPadding
+                                    ? [paddingLeft * PT_PER_PX, paddingRight * PT_PER_PX, paddingBottom * PT_PER_PX, paddingTop * PT_PER_PX]
+                                    : undefined,
                             },
                         };
                         // Check for text transparency
@@ -1962,8 +2954,13 @@ export function parseSlideHtml(doc) {
                             textElement.style.charSpacing = ls;
                         elements.push(textElement);
                         processed.add(el);
-                        // Also mark <p> or <br> children as processed
-                        el.querySelectorAll('*').forEach(desc => processed.add(desc));
+                        // Mark text-related children as processed, but NOT SVG elements
+                        // (SVGs should be extracted separately as images)
+                        el.querySelectorAll('*').forEach(desc => {
+                            if (desc.tagName.toUpperCase() !== 'SVG') {
+                                processed.add(desc);
+                            }
+                        });
                         return;
                     }
                 }
@@ -2034,7 +3031,7 @@ export function parseSlideHtml(doc) {
                 },
                 style: {
                     fontSize: pxToPoints(liComputed.fontSize),
-                    fontFace: liComputed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                    fontFace: extractFontFace(liComputed.fontFamily),
                     color: rgbToHex(liComputed.color),
                     transparency: extractAlpha(liComputed.color),
                     align: liComputed.textAlign === 'start'
@@ -2055,10 +3052,10 @@ export function parseSlideHtml(doc) {
         if (!textTags.includes(el.tagName) || el.tagName === 'SPAN')
             return;
         let rect = htmlEl.getBoundingClientRect();
-        let text = el.textContent.trim();
+        const computed = win.getComputedStyle(el);
+        let text = getTransformedText(htmlEl, computed);
         if (rect.width === 0 || rect.height === 0 || !text)
             return;
-        const computed = win.getComputedStyle(el);
         // For flex containers with multiple children (e.g., LI with icon + text),
         // find the actual text position using a Range on the text nodes.
         // This ensures text is positioned at its visual location, not the container's.
@@ -2080,7 +3077,24 @@ export function parseSlideHtml(doc) {
                 // Use the text's actual position if it differs from the element's
                 if (textRect.width > 0 && textRect.height > 0) {
                     rect = textRect;
-                    text = textNodes.map((n) => n.textContent.trim()).join(' ').trim();
+                    // Apply text-transform from parent element to text nodes
+                    const rawText = textNodes.map((n) => n.textContent.trim()).join(' ').trim();
+                    text = applyTextTransform(rawText, computed.textTransform || 'none');
+                }
+            }
+            else {
+                // No direct text nodes — check for text inside child SPAN elements
+                // This handles flex LI items like: <li><span class="icon"></span><span class="text">...</span></li>
+                for (const child of Array.from(el.children)) {
+                    if (child.tagName === 'SPAN' && child.textContent?.trim()) {
+                        const childRect = child.getBoundingClientRect();
+                        if (childRect.width > 0 && childRect.height > 0) {
+                            rect = childRect;
+                            const childComputed = win.getComputedStyle(child);
+                            text = getTransformedText(child, childComputed);
+                            break;
+                        }
+                    }
                 }
             }
         }
@@ -2124,7 +3138,7 @@ export function parseSlideHtml(doc) {
         }
         const baseStyle = {
             fontSize: pxToPoints(computed.fontSize),
-            fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+            fontFace: extractFontFace(computed.fontFamily),
             color: rgbToHex(computed.color),
             align: textAlign,
             valign: valign,