docgen-utils 1.0.6 → 1.0.7

package/dist/packages/slides/parse.js

@@ -43,6 +43,20 @@ export function rgbToHex(rgbStr) {
         .map((n) => parseInt(n).toString(16).padStart(2, '0'))
         .join('');
 }
+/**
+ * Check if a CSS color value is fully transparent (alpha = 0).
+ * Returns `true` for `transparent`, `rgba(0,0,0,0)`, or any `rgba()` with alpha ≤ 0.
+ */
+function isFullyTransparent(colorStr) {
+    if (colorStr === 'transparent' || colorStr === 'rgba(0, 0, 0, 0)')
+        return true;
+    const match = colorStr.match(/rgba\(\d+,\s*\d+,\s*\d+,\s*([\d.]+)\)/);
+    if (match) {
+        const alpha = parseFloat(match[1]);
+        return alpha <= 0;
+    }
+    return false;
+}
 /**
  * Extract transparency percentage from an `rgba()` string.
  * Returns `null` for opaque or non-rgba values, otherwise 0-100.
@@ -65,7 +79,11 @@ export function extractAlpha(rgbStr) {
  */
 export function parseCssGradient(gradientStr) {
     const colorToHex = (colorStr) => {
-        colorStr = colorStr.trim();
+        colorStr = colorStr.trim().toLowerCase();
+        // Handle 'transparent' keyword (equivalent to rgba(0,0,0,0))
+        if (colorStr === 'transparent') {
+            return '000000';
+        }
         if (colorStr.startsWith('#')) {
             let hex = colorStr.slice(1);
             if (hex.length === 3)
@@ -83,7 +101,11 @@ export function parseCssGradient(gradientStr) {
         return 'FFFFFF';
     };
     const extractTransparency = (colorStr) => {
-        colorStr = colorStr.trim();
+        colorStr = colorStr.trim().toLowerCase();
+        // Handle 'transparent' keyword (equivalent to rgba(0,0,0,0) - fully transparent)
+        if (colorStr === 'transparent') {
+            return 100; // 100% transparency = fully transparent
+        }
         const rgbaMatch = colorStr.match(/rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/);
         if (rgbaMatch) {
             const alpha = parseFloat(rgbaMatch[1]);
@@ -220,6 +242,125 @@ function shouldSkipBold(fontFamily) {
     const normalizedFont = fontFamily.toLowerCase().replace(/['"]/g, '').split(',')[0].trim();
     return SINGLE_WEIGHT_FONTS.includes(normalizedFont);
 }
+/**
+ * Extract letter-spacing as points from computed style.
+ * Returns the value in points, or null if normal/zero.
+ */
+function extractLetterSpacing(computed) {
+    const ls = computed.letterSpacing;
+    if (!ls || ls === 'normal' || ls === '0px')
+        return null;
+    const pxVal = parseFloat(ls);
+    if (isNaN(pxVal) || pxVal === 0)
+        return null;
+    return pxVal * PT_PER_PX;
+}
+/**
+ * Parse CSS text-shadow into a glow effect and/or shadow.
+ *
+ * Patterns:
+ *   - `0 0 <blur> <color>` → glow (zero offset, radial blur)
+ *   - `<offsetX> <offsetY> <blur> <color>` → shadow (with direction)
+ *
+ * When multiple shadows are present, we pick the most impactful one
+ * (largest blur for glow, largest offset for shadow).
+ *
+ * Returns `{ glow, shadow }` — either or both may be null.
+ */
+function parseTextShadow(textShadow) {
+    if (!textShadow || textShadow === 'none')
+        return { glow: null, shadow: null };
+    // Split multiple shadows by comma, but respect parentheses
+    const shadows = [];
+    let current = '';
+    let depth = 0;
+    for (const char of textShadow) {
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        if (char === ',' && depth === 0) {
+            shadows.push(current.trim());
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim())
+        shadows.push(current.trim());
+    let bestGlow = null;
+    let bestShadow = null;
+    let bestGlowBlur = 0;
+    let bestShadowOffset = 0;
+    for (const shadowStr of shadows) {
+        // Extract color (rgb/rgba)
+        const colorMatch = shadowStr.match(/rgba?\([^)]+\)/);
+        // Extract numeric values (offsetX offsetY blur [spread])
+        const numericParts = shadowStr.match(/([-\d.]+)px/g);
+        if (!numericParts || numericParts.length < 2)
+            continue;
+        const offsetX = parseFloat(numericParts[0]);
+        const offsetY = parseFloat(numericParts[1]);
+        const blur = numericParts.length > 2 ? parseFloat(numericParts[2]) : 0;
+        if (blur <= 0)
+            continue; // No visual effect without blur
+        // Extract alpha from rgba
+        let opacity = 1.0;
+        if (colorMatch) {
+            const alphaMatch = colorMatch[0].match(/rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/);
+            if (alphaMatch) {
+                opacity = parseFloat(alphaMatch[1]);
+            }
+        }
+        const color = colorMatch ? rgbToHex(colorMatch[0]) : '000000';
+        const isGlow = Math.abs(offsetX) < 1 && Math.abs(offsetY) < 1;
+        if (isGlow) {
+            // Glow: zero offset, large blur
+            // CSS text-shadow blur radius defines the Gaussian blur standard deviation.
+            // OOXML <a:glow rad> defines how far the glow extends beyond the shape.
+            //
+            // Visual testing shows that CSS Gaussian blur appears much larger and more
+            // vibrant than OOXML glow at equivalent numeric values. This is because:
+            // 1. CSS blur uses a Gaussian distribution that spreads intensity over ~2-3x the radius
+            // 2. OOXML glow has a sharper falloff and appears more contained
+            // 3. LibreOffice/PowerPoint may render glows more subtly than browsers
+            //
+            // To achieve visual equivalence:
+            // - Scale glow size by 2.5x (CSS blur spreads much wider than OOXML glow)
+            // - Scale opacity by 0.3x (OOXML glow appears more intense at same alpha)
+            const GLOW_SIZE_SCALE = 2.5;
+            const GLOW_OPACITY_SCALE = 0.3;
+            if (blur > bestGlowBlur) {
+                bestGlowBlur = blur;
+                bestGlow = {
+                    size: blur * PT_PER_PX * GLOW_SIZE_SCALE,
+                    color,
+                    opacity: Math.min(opacity * GLOW_OPACITY_SCALE, 1.0),
+                };
+            }
+        }
+        else {
+            // Shadow: has offset
+            const offset = Math.sqrt(offsetX * offsetX + offsetY * offsetY);
+            if (offset > bestShadowOffset) {
+                bestShadowOffset = offset;
+                let angle = Math.atan2(offsetY, offsetX) * (180 / Math.PI);
+                if (angle < 0)
+                    angle += 360;
+                bestShadow = {
+                    type: 'outer',
+                    angle: Math.round(angle),
+                    blur: blur * PT_PER_PX,
+                    color,
+                    offset: offset * PT_PER_PX,
+                    opacity,
+                };
+            }
+        }
+    }
+    return { glow: bestGlow, shadow: bestShadow };
+}
 function applyTextTransform(text, textTransform) {
     if (textTransform === 'uppercase')
         return text.toUpperCase();
@@ -281,6 +422,216 @@ function getPositionAndSize(el, rect, rotation) {
         h: el.offsetHeight,
     };
 }
+/**
+ * Apply CSS filter effects (brightness, contrast, saturate) to an image by
+ * rendering it through a canvas with the filter applied. Returns a new data
+ * URI with the filters baked into the pixel data.
+ *
+ * This avoids relying on OOXML `<a:lum>` which LibreOffice renders differently
+ * than CSS `filter: brightness() contrast()`. By pre-processing the image,
+ * the result looks identical regardless of the presentation software.
+ *
+ * Returns the original src if canvas filter is not supported or fails.
+ */
+function applyImageFilter(img, filter) {
+    try {
+        // Only process if the image is loaded and has dimensions
+        if (!img.naturalWidth || !img.naturalHeight)
+            return img.src;
+        if (!filter || filter === 'none')
+            return img.src;
+        const canvas = document.createElement('canvas');
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return img.src;
+        // Apply the CSS filter to the canvas context
+        // Canvas2D supports the same filter syntax as CSS
+        ctx.filter = filter;
+        ctx.drawImage(img, 0, 0);
+        // Export as JPEG data URI (smaller than PNG for photos)
+        return canvas.toDataURL('image/jpeg', 0.90);
+    }
+    catch {
+        // If anything fails (CORS, etc.), return original
+        return img.src;
+    }
+}
+/**
+ * Apply CSS mask-image gradient to an image using canvas.
+ *
+ * CSS mask-image creates a transparency effect based on the mask's alpha values.
+ * We simulate this by:
+ * 1. Drawing the image on a canvas
+ * 2. Drawing a gradient mask on top using 'destination-in' composite mode
+ *
+ * Returns a PNG data URI with the mask applied, or null if masking fails.
+ *
+ * @param img - The image element to mask
+ * @param maskGradient - The parsed gradient to use as a mask
+ * @param displayWidth - Display width in pixels
+ * @param displayHeight - Display height in pixels
+ * @param cssOpacity - Optional CSS opacity to bake into the mask (0-1)
+ */
+function applyImageMask(img, maskGradient, displayWidth, displayHeight, cssOpacity) {
+    try {
+        if (!img.naturalWidth || !img.naturalHeight)
+            return null;
+        if (!img.complete)
+            return null;
+        const canvas = document.createElement('canvas');
+        // Use display dimensions for the masked output
+        canvas.width = Math.round(displayWidth);
+        canvas.height = Math.round(displayHeight);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return null;
+        // Apply CSS opacity to the image if specified
+        if (cssOpacity !== undefined && cssOpacity < 1) {
+            ctx.globalAlpha = cssOpacity;
+        }
+        // Draw the image scaled to display size
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        // Reset globalAlpha for the mask operation
+        ctx.globalAlpha = 1;
+        // Check if canvas has content (CORS check)
+        try {
+            ctx.getImageData(0, 0, 1, 1);
+        }
+        catch {
+            // CORS failure - can't read image data
+            return null;
+        }
+        // Apply the mask gradient
+        applyMaskGradientToCanvas(ctx, canvas.width, canvas.height, maskGradient);
+        // Export as PNG (needs alpha channel for transparency)
+        return canvas.toDataURL('image/png');
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Apply mask gradient to a canvas context using destination-in composite mode.
+ * This creates transparency based on the gradient's alpha values.
+ */
+function applyMaskGradientToCanvas(ctx, width, height, maskGradient) {
+    ctx.globalCompositeOperation = 'destination-in';
+    // Create gradient for the mask
+    let gradient;
+    if (maskGradient.type === 'radial') {
+        const cx = (maskGradient.centerX ?? 50) / 100 * width;
+        const cy = (maskGradient.centerY ?? 50) / 100 * height;
+        const radius = Math.max(width, height);
+        gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+    }
+    else {
+        // Linear gradient - CSS angle to canvas coordinates
+        // CSS angles: 0° = to top, 90° = to right, 180° = to bottom, 270° = to left
+        // We map the gradient to span the full image dimensions along the gradient axis
+        const cssAngle = maskGradient.angle ?? 180;
+        const angleRad = (cssAngle - 90) * Math.PI / 180;
+        // For cardinal directions, use exact edge-to-edge gradients
+        // This ensures position 0% and 100% map exactly to the image edges
+        let x1, y1, x2, y2;
+        if (cssAngle === 0) {
+            // to top: bottom to top
+            x1 = width / 2;
+            y1 = height;
+            x2 = width / 2;
+            y2 = 0;
+        }
+        else if (cssAngle === 90) {
+            // to right: left to right
+            x1 = 0;
+            y1 = height / 2;
+            x2 = width;
+            y2 = height / 2;
+        }
+        else if (cssAngle === 180) {
+            // to bottom: top to bottom
+            x1 = width / 2;
+            y1 = 0;
+            x2 = width / 2;
+            y2 = height;
+        }
+        else if (cssAngle === 270) {
+            // to left: right to left
+            x1 = width;
+            y1 = height / 2;
+            x2 = 0;
+            y2 = height / 2;
+        }
+        else {
+            // For non-cardinal angles, use diagonal calculation
+            const halfDiag = Math.sqrt(width * width + height * height) / 2;
+            const cx = width / 2;
+            const cy = height / 2;
+            x1 = cx - Math.cos(angleRad) * halfDiag;
+            y1 = cy - Math.sin(angleRad) * halfDiag;
+            x2 = cx + Math.cos(angleRad) * halfDiag;
+            y2 = cy + Math.sin(angleRad) * halfDiag;
+        }
+        gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    }
+    // Add color stops with alpha from the mask gradient
+    for (const stop of maskGradient.stops) {
+        // transparency is 0-100 where 100 = fully transparent
+        // Canvas alpha is 0-1 where 1 = fully opaque
+        const alpha = stop.transparency !== undefined ? (100 - stop.transparency) / 100 : 1;
+        gradient.addColorStop(stop.position / 100, `rgba(255,255,255,${alpha})`);
+    }
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+}
+/**
+ * Parse CSS `filter` property to extract brightness, contrast, and saturate values.
+ *
+ * Returns an object with the extracted values in OOXML-compatible format:
+ *   - brightness: percent change (-100 to 100). brightness(0.6) → -40.
+ *   - contrast: percent change (-100 to 100). contrast(1.1) → 10.
+ *   - saturation: percent (0 = grayscale, 100 = normal). saturate(1.1) → 110.
+ *
+ * Returns null if no relevant filter functions found.
+ */
+function parseCssFilter(filter) {
+    if (!filter || filter === 'none')
+        return null;
+    const result = {};
+    let hasValues = false;
+    // Match brightness(value) — value is a multiplier (0.6 = 60% brightness)
+    const brightnessMatch = filter.match(/brightness\(([\d.]+)\)/);
+    if (brightnessMatch) {
+        const val = parseFloat(brightnessMatch[1]);
+        if (val !== 1.0) {
+            // Convert: brightness(0.6) → bright = (0.6 - 1) * 100 = -40
+            result.brightness = Math.round((val - 1) * 100);
+            hasValues = true;
+        }
+    }
+    // Match contrast(value) — value is a multiplier (1.1 = 110% contrast)
+    const contrastMatch = filter.match(/contrast\(([\d.]+)\)/);
+    if (contrastMatch) {
+        const val = parseFloat(contrastMatch[1]);
+        if (val !== 1.0) {
+            // Convert: contrast(1.1) → contrast = (1.1 - 1) * 100 = 10
+            result.contrast = Math.round((val - 1) * 100);
+            hasValues = true;
+        }
+    }
+    // Match saturate(value) — value is a multiplier (1.1 = 110% saturation)
+    const saturateMatch = filter.match(/saturate\(([\d.]+)\)/);
+    if (saturateMatch) {
+        const val = parseFloat(saturateMatch[1]);
+        if (val !== 1.0) {
+            // Convert: saturate(1.1) → saturation = 110
+            result.saturation = Math.round(val * 100);
+            hasValues = true;
+        }
+    }
+    return hasValues ? result : null;
+}
 function parseBoxShadow(boxShadow) {
     if (!boxShadow || boxShadow === 'none')
         return null;
@@ -317,6 +668,134 @@ function parseBoxShadow(boxShadow) {
         opacity,
     };
 }
+/**
+ * Extract visible CSS pseudo-elements (::before, ::after) from an element.
+ *
+ * Pseudo-elements are invisible to the DOM but can create visual content via CSS.
+ * Common patterns:
+ *   - Accent lines: thin gradient lines at edges of cards/titles
+ *   - Overlays: gradient fades over images
+ *   - Background glows: large low-opacity radial gradients
+ *
+ * Returns an array of ShapeElements representing the pseudo-elements.
+ */
+function extractPseudoElements(el, win) {
+    const results = [];
+    const parentRect = el.getBoundingClientRect();
+    if (parentRect.width <= 0 || parentRect.height <= 0)
+        return results;
+    for (const pseudo of ['::before', '::after']) {
+        const pComputed = win.getComputedStyle(el, pseudo);
+        // Skip if no content or content is 'none'
+        const content = pComputed.content;
+        if (!content || content === 'none' || content === 'normal')
+            continue;
+        // Skip if display is none
+        if (pComputed.display === 'none')
+            continue;
+        // Parse dimensions
+        let pWidth = parseFloat(pComputed.width);
+        let pHeight = parseFloat(pComputed.height);
+        // If dimensions are auto/0, infer from parent and positioning
+        if (isNaN(pWidth) || pWidth <= 0) {
+            // Check if left/right both set (→ width = parent width)
+            const left = parseFloat(pComputed.left);
+            const right = parseFloat(pComputed.right);
+            if (!isNaN(left) && !isNaN(right)) {
+                pWidth = parentRect.width - left - right;
+            }
+            else {
+                pWidth = parentRect.width;
+            }
+        }
+        if (isNaN(pHeight) || pHeight <= 0) {
+            // Check if top/bottom both set (→ height = parent height)
+            const top = parseFloat(pComputed.top);
+            const bottom = parseFloat(pComputed.bottom);
+            if (!isNaN(top) && !isNaN(bottom)) {
+                pHeight = parentRect.height - top - bottom;
+            }
+            else {
+                pHeight = parentRect.height;
+            }
+        }
+        // Skip tiny elements that won't be visible
+        if (pWidth < 1 || pHeight < 1)
+            continue;
+        // Determine position (relative to parent)
+        let pLeft = parseFloat(pComputed.left);
+        let pTop = parseFloat(pComputed.top);
+        if (isNaN(pLeft))
+            pLeft = 0;
+        if (isNaN(pTop))
+            pTop = 0;
+        // Convert to absolute page coordinates
+        const absLeft = parentRect.left + pLeft;
+        const absTop = parentRect.top + pTop;
+        // Check for visual content: background color, gradient, or border
+        const hasBg = pComputed.backgroundColor && pComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+        const bgImage = pComputed.backgroundImage;
+        const hasGradient = bgImage && bgImage !== 'none' &&
+            (bgImage.includes('linear-gradient') || bgImage.includes('radial-gradient'));
+        const hasBgImage = bgImage && bgImage !== 'none' && bgImage.includes('url(');
+        if (!hasBg && !hasGradient && !hasBgImage)
+            continue;
+        // Parse gradient if present
+        let gradient = null;
+        if (hasGradient) {
+            gradient = parseCssGradient(bgImage);
+        }
+        // Parse opacity
+        const elementOpacity = parseFloat(pComputed.opacity);
+        const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
+        // Parse border-radius
+        let rectRadius = 0;
+        const borderRadius = pComputed.borderRadius;
+        const radiusValue = parseFloat(borderRadius);
+        if (radiusValue > 0) {
+            if (borderRadius.includes('%')) {
+                if (radiusValue >= 50) {
+                    rectRadius = 1; // Fully rounded (pill shape)
+                }
+                else {
+                    const minDim = Math.min(pWidth, pHeight);
+                    rectRadius = (radiusValue / 100) * pxToInch(minDim);
+                }
+            }
+            else {
+                rectRadius = pxToInch(radiusValue);
+            }
+        }
+        // Parse box-shadow
+        const shadow = parseBoxShadow(pComputed.boxShadow);
+        // Create shape element
+        const shapeElement = {
+            type: 'shape',
+            text: '',
+            textRuns: null,
+            style: null,
+            position: {
+                x: pxToInch(absLeft),
+                y: pxToInch(absTop),
+                w: pxToInch(pWidth),
+                h: pxToInch(pHeight),
+            },
+            shape: {
+                fill: hasBg ? rgbToHex(pComputed.backgroundColor) : null,
+                gradient: gradient,
+                transparency: hasBg ? extractAlpha(pComputed.backgroundColor) : null,
+                line: null,
+                rectRadius: rectRadius,
+                shadow: shadow,
+                opacity: hasOpacity ? elementOpacity : null,
+                isEllipse: false,
+                softEdge: null,
+            },
+        };
+        results.push(shapeElement);
+    }
+    return results;
+}
 function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win) {
     let prevNodeIsText = false;
     let pendingSoftBreak = false;
@@ -346,12 +825,13 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
             const el = node;
             const options = { ...baseOptions };
             const computed = win.getComputedStyle(el);
-            if (el.tagName === 'SPAN' ||
-                el.tagName === 'B' ||
-                el.tagName === 'STRONG' ||
-                el.tagName === 'I' ||
-                el.tagName === 'EM' ||
-                el.tagName === 'U') {
+            // Handle all inline formatting elements
+            const inlineTags = new Set([
+                'SPAN', 'B', 'STRONG', 'I', 'EM', 'U',
+                'CODE', 'A', 'MARK', 'SUB', 'SUP', 'SMALL', 'S', 'DEL', 'INS',
+                'ABBR', 'TIME', 'CITE', 'Q', 'DFN', 'KBD', 'SAMP', 'VAR',
+            ]);
+            if (inlineTags.has(el.tagName)) {
                 const isBold = computed.fontWeight === 'bold' || parseInt(computed.fontWeight) >= 600;
                 if (isBold && !shouldSkipBold(computed.fontFamily))
                     options.bold = true;
@@ -367,6 +847,12 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                 }
                 if (computed.fontSize)
                     options.fontSize = pxToPoints(computed.fontSize);
+                if (computed.fontFamily) {
+                    options.fontFace = computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim();
+                }
+                const runLetterSpacing = extractLetterSpacing(computed);
+                if (runLetterSpacing !== null)
+                    options.charSpacing = runLetterSpacing;
                 if (computed.textTransform && computed.textTransform !== 'none') {
                     const transformStr = computed.textTransform;
                     textTransform = (text) => applyTextTransform(text, transformStr);
@@ -436,6 +922,9 @@ export function parseSlideHtml(doc) {
     const placeholders = [];
     const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'UL', 'OL', 'LI', 'SPAN'];
     const processed = new Set();
+    // Extract pseudo-elements from body (e.g., body::before radial glows)
+    const bodyPseudoElements = extractPseudoElements(body, win);
+    elements.push(...bodyPseudoElements);
     doc.querySelectorAll('*').forEach((el) => {
         if (processed.has(el))
             return;
@@ -465,7 +954,12 @@ export function parseSlideHtml(doc) {
                 (computed.borderRightWidth && parseFloat(computed.borderRightWidth) > 0) ||
                 (computed.borderBottomWidth && parseFloat(computed.borderBottomWidth) > 0) ||
                 (computed.borderLeftWidth && parseFloat(computed.borderLeftWidth) > 0);
-            if (hasBg || hasBorder) {
+            // Check for gradient background (backgroundImage contains linear-gradient or radial-gradient)
+            const spanBgImage = computed.backgroundImage;
+            const hasGradientBg = spanBgImage &&
+                spanBgImage !== 'none' &&
+                (spanBgImage.includes('linear-gradient') || spanBgImage.includes('radial-gradient'));
+            if (hasBg || hasBorder || hasGradientBg) {
                 const rect = htmlEl.getBoundingClientRect();
                 if (rect.width > 0 && rect.height > 0) {
                     const text = el.textContent.trim();
@@ -473,7 +967,13 @@ export function parseSlideHtml(doc) {
                     const borderRadius = computed.borderRadius;
                     const radiusValue = parseFloat(borderRadius);
                     let rectRadius = 0;
-                    if (radiusValue > 0) {
+                    // Detect ellipse: border-radius >= 50% on roughly square elements
+                    const isCircularRadius = borderRadius.includes('%')
+                        ? radiusValue >= 50
+                        : (radiusValue > 0 && radiusValue >= Math.min(rect.width, rect.height) / 2 - 1);
+                    const aspectRatio = rect.width / rect.height;
+                    const spanIsEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2.0;
+                    if (radiusValue > 0 && !spanIsEllipse) {
                         if (borderRadius.includes('%')) {
                             const minDim = Math.min(rect.width, rect.height);
                             rectRadius = (radiusValue / 100) * pxToInch(minDim);
@@ -490,6 +990,11 @@ export function parseSlideHtml(doc) {
                         borderTop === borderRight &&
                         borderRight === borderBottom &&
                         borderBottom === borderLeft;
+                    // Extract opacity
+                    const spanOpacity = parseFloat(computed.opacity);
+                    const hasSpanOpacity = !isNaN(spanOpacity) && spanOpacity < 1;
+                    // Extract box-shadow
+                    const spanShadow = parseBoxShadow(computed.boxShadow);
                     const shapeElement = {
                         type: 'shape',
                         position: {
@@ -500,26 +1005,30 @@ export function parseSlideHtml(doc) {
                         },
                         text: text,
                         textRuns: null,
-                        style: {
+                        style: text ? {
                             fontSize: pxToPoints(computed.fontSize),
                             fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
                             color: rgbToHex(computed.color),
                             bold: parseInt(computed.fontWeight) >= 600,
                             align: 'center',
                             valign: 'middle',
-                        },
+                        } : null,
                         shape: {
                             fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
                             gradient: bgGradient,
-                            transparency: null,
+                            transparency: hasBg ? extractAlpha(computed.backgroundColor) : null,
                             line: hasUniformBorder
                                 ? {
                                     color: rgbToHex(computed.borderColor),
                                     width: pxToPoints(borderTop),
+                                    transparency: extractAlpha(computed.borderColor),
                                 }
                                 : null,
-                            rectRadius: rectRadius,
-                            shadow: null,
+                            rectRadius: spanIsEllipse ? 0 : rectRadius,
+                            shadow: spanShadow,
+                            opacity: hasSpanOpacity ? spanOpacity : null,
+                            isEllipse: spanIsEllipse,
+                            softEdge: null,
                         },
                     };
                     elements.push(shapeElement);
@@ -598,52 +1107,266 @@ export function parseSlideHtml(doc) {
                 const nearOrigin = rect.left <= 10 && rect.top <= 10;
                 const isFullSlideImage = coversWidth && coversHeight && nearOrigin;
                 const objectFit = imgComputed.objectFit;
-                // Check for ancestor with overflow:hidden and border-radius
+                // Check for ancestor with overflow:hidden for border-radius AND clipping.
+                // getBoundingClientRect() on IMG returns the FULL layout box regardless of
+                // ancestor overflow:hidden — we must manually intersect with clipping ancestors
+                // to get the visible area.
                 let imgRectRadius = null;
+                let clipLeft = rect.left;
+                let clipTop = rect.top;
+                let clipRight = rect.right;
+                let clipBottom = rect.bottom;
                 let ancestor = el.parentElement;
                 while (ancestor && ancestor !== doc.body) {
                     const ancestorComputed = win.getComputedStyle(ancestor);
                     const ancestorOverflow = ancestorComputed.overflow;
-                    const ancestorBorderRadius = ancestorComputed.borderRadius;
-                    if ((ancestorOverflow === 'hidden' || ancestorOverflow === 'clip') &&
-                        ancestorBorderRadius) {
-                        const radiusValue = parseFloat(ancestorBorderRadius);
-                        if (radiusValue > 0) {
-                            if (ancestorBorderRadius.includes('%')) {
-                                const ancestorRect = ancestor.getBoundingClientRect();
-                                const minDim = Math.min(ancestorRect.width, ancestorRect.height);
-                                imgRectRadius = (radiusValue / 100) * pxToInch(minDim);
-                            }
-                            else if (ancestorBorderRadius.includes('pt')) {
-                                imgRectRadius = radiusValue / 72;
-                            }
-                            else {
-                                imgRectRadius = pxToInch(radiusValue);
+                    if (ancestorOverflow === 'hidden' || ancestorOverflow === 'clip') {
+                        // Compute clip intersection with this ancestor's rect
+                        const ancestorRect = ancestor.getBoundingClientRect();
+                        clipLeft = Math.max(clipLeft, ancestorRect.left);
+                        clipTop = Math.max(clipTop, ancestorRect.top);
+                        clipRight = Math.min(clipRight, ancestorRect.right);
+                        clipBottom = Math.min(clipBottom, ancestorRect.bottom);
+                        // Also extract border-radius for rounded corners
+                        const ancestorBorderRadius = ancestorComputed.borderRadius;
+                        if (ancestorBorderRadius && imgRectRadius === null) {
+                            const radiusValue = parseFloat(ancestorBorderRadius);
+                            if (radiusValue > 0) {
+                                if (ancestorBorderRadius.includes('%')) {
+                                    const minDim = Math.min(ancestorRect.width, ancestorRect.height);
+                                    imgRectRadius = (radiusValue / 100) * pxToInch(minDim);
+                                }
+                                else if (ancestorBorderRadius.includes('pt')) {
+                                    imgRectRadius = radiusValue / 72;
+                                }
+                                else {
+                                    imgRectRadius = pxToInch(radiusValue);
+                                }
                             }
-                            break;
                         }
                     }
                     ancestor = ancestor.parentElement;
                 }
+                // Use the clipped rect (intersection with overflow:hidden ancestors)
+                const clippedW = Math.max(0, clipRight - clipLeft);
+                const clippedH = Math.max(0, clipBottom - clipTop);
+                const wasClipped = clippedW < rect.width - 1 || clippedH < rect.height - 1;
+                // Pre-bake CSS filter effects (brightness, contrast, saturate) into the
+                // image pixels via canvas rendering. This avoids relying on OOXML <a:lum>
+                // which LibreOffice renders differently than CSS filters.
+                const cssFilter = imgComputed.filter;
+                let imgSrc = el.src;
+                let filterPreBaked = false;
+                if (cssFilter && cssFilter !== 'none') {
+                    const bakedSrc = applyImageFilter(el, cssFilter);
+                    if (bakedSrc !== imgSrc) {
+                        imgSrc = bakedSrc;
+                        filterPreBaked = true;
+                    }
+                }
+                // Pre-bake CSS mask-image gradient into the image using canvas.
+                // This creates a transparency gradient effect that PPTX can display natively.
+                const maskImageProp = imgComputed.maskImage ||
+                    imgComputed.webkitMaskImage ||
+                    imgComputed.getPropertyValue('mask-image') ||
+                    imgComputed.getPropertyValue('-webkit-mask-image');
+                // Extract CSS opacity early so we can bake it into the mask if present
+                const imgOpacity = parseFloat(imgComputed.opacity);
+                const hasOpacity = !isNaN(imgOpacity) && imgOpacity < 1 && imgOpacity >= 0;
+                // Pre-bake CSS mask-image gradient into the image using canvas.
+                // This creates a transparency gradient effect (PNG with alpha) that PPTX displays natively.
+                // When a mask is applied, we also bake in the CSS opacity to ensure correct alpha blending.
+                let maskApplied = false;
+                if (maskImageProp && maskImageProp !== 'none' &&
+                    (maskImageProp.includes('linear-gradient') || maskImageProp.includes('radial-gradient'))) {
+                    const maskGradient = parseCssGradient(maskImageProp);
+                    if (maskGradient) {
+                        const displayW = wasClipped ? clippedW : rect.width;
+                        const displayH = wasClipped ? clippedH : rect.height;
+                        // Pass CSS opacity to bake into the mask - this ensures the gradient transparency
+                        // is combined with the overall image opacity in a single PNG alpha channel
+                        const maskedSrc = applyImageMask(el, maskGradient, displayW, displayH, hasOpacity ? imgOpacity : undefined);
+                        if (maskedSrc) {
+                            imgSrc = maskedSrc;
+                            maskApplied = true;
+                        }
+                    }
+                }
+                // Read intrinsic image dimensions for object-fit:cover crop calculation
+                const imgEl = el;
+                const natW = imgEl.naturalWidth;
+                const natH = imgEl.naturalHeight;
                 const imageElement = {
                     type: isFullSlideImage ? 'slideBackgroundImage' : 'image',
-                    src: el.src,
+                    src: imgSrc,
                     position: {
-                        x: pxToInch(rect.left),
-                        y: pxToInch(rect.top),
-                        w: pxToInch(rect.width),
-                        h: pxToInch(rect.height),
+                        x: pxToInch(wasClipped ? clipLeft : rect.left),
+                        y: pxToInch(wasClipped ? clipTop : rect.top),
+                        w: pxToInch(wasClipped ? clippedW : rect.width),
+                        h: pxToInch(wasClipped ? clippedH : rect.height),
                     },
                     sizing: objectFit === 'cover' ? { type: 'cover' } : null,
                 };
+                // Store natural dimensions for cover crop calculation in convert.ts
+                if (objectFit === 'cover' && natW > 0 && natH > 0 && !isFullSlideImage) {
+                    imageElement.naturalWidth = natW;
+                    imageElement.naturalHeight = natH;
+                }
                 if (imgRectRadius !== null) {
                     imageElement.rectRadius = imgRectRadius;
                 }
+                // If canvas pre-bake failed (e.g. CORS), fall back to OOXML filter properties.
+                // These use <a:lum> / <a:duotone> which LibreOffice may render differently,
+                // but it's better than no filter at all.
+                if (!filterPreBaked && cssFilter && cssFilter !== 'none') {
+                    const filterValues = parseCssFilter(cssFilter);
+                    if (filterValues) {
+                        if (filterValues.brightness !== undefined) {
+                            imageElement.brightness = filterValues.brightness;
+                        }
+                        if (filterValues.contrast !== undefined) {
+                            imageElement.contrast = filterValues.contrast;
+                        }
+                        if (filterValues.saturation !== undefined) {
+                            imageElement.saturation = filterValues.saturation;
+                        }
+                    }
+                }
+                // Extract CSS opacity on the image element itself
+                // Skip if mask was applied since opacity is already baked into the PNG
+                if (hasOpacity && !maskApplied) {
+                    imageElement.transparency = Math.round((1 - imgOpacity) * 100);
+                }
                 elements.push(imageElement);
                 processed.add(el);
                 return;
             }
         }
+        // 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') {
+            const rect = htmlEl.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                // Skip SVGs with very low opacity - these are usually decorative overlays
+                // (e.g., grain textures, noise patterns) that won't render well in PPTX
+                const computedStyle = win.getComputedStyle(htmlEl);
+                const opacity = parseFloat(computedStyle.opacity || '1');
+                if (opacity < 0.1) {
+                    processed.add(el);
+                    el.querySelectorAll('*').forEach((child) => processed.add(child));
+                    return;
+                }
+                // Skip SVGs that rely primarily on filter or pattern elements for rendering.
+                // These use feTurbulence, feGaussianBlur, pattern fills, etc. that won't render
+                // correctly when converted to static PNG for PPTX embedding.
+                const svgEl = el;
+                const hasFilter = svgEl.querySelector('filter, pattern');
+                const hasRenderableContent = svgEl.querySelector('path, circle, ellipse, line, polyline, polygon, text, image');
+                // Check for rects that use filter references (filter="url(...)")
+                const allRects = svgEl.querySelectorAll('rect');
+                const hasRectWithoutFilter = Array.from(allRects).some((r) => !r.getAttribute('filter')?.startsWith('url('));
+                const hasOnlyFilterPattern = hasFilter && !hasRenderableContent && !hasRectWithoutFilter;
+                if (hasOnlyFilterPattern) {
+                    processed.add(el);
+                    el.querySelectorAll('*').forEach((child) => processed.add(child));
+                    return;
+                }
+                // Also skip SVGs where ALL visible elements use filters (noise/grain overlays)
+                // even if they have other rect elements for background
+                const usesFilterRef = svgEl.querySelector('[filter^="url("]');
+                if (hasFilter && usesFilterRef && !hasRenderableContent) {
+                    processed.add(el);
+                    el.querySelectorAll('*').forEach((child) => processed.add(child));
+                    return;
+                }
+                // Clone the SVG to avoid modifying the original
+                const svgClone = el.cloneNode(true);
+                // Ensure the SVG has proper xmlns attribute for standalone rendering
+                if (!svgClone.hasAttribute('xmlns')) {
+                    svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+                }
+                // ALWAYS set width/height to the rendered dimensions.
+                // The original SVG may have unitless width/height (e.g., width="40") which
+                // are NOT scaled by transform.ts's px→pt conversion. Using the rendered
+                // bounding rect ensures the SVG image matches the actual displayed size.
+                svgClone.setAttribute('width', String(rect.width));
+                svgClone.setAttribute('height', String(rect.height));
+                // Resolve 'currentColor' to the actual computed color value.
+                // SVGs often use fill="currentColor" to inherit the text color from CSS.
+                // When serializing for PPTX embedding, we must replace currentColor with
+                // the actual hex/rgb value since PowerPoint doesn't support CSS inheritance.
+                const computedColor = win.getComputedStyle(htmlEl).color;
+                const rootStyles = win.getComputedStyle(doc.documentElement);
+                // Helper to resolve CSS color values including var() custom properties
+                const resolveColorValue = (value) => {
+                    if (!value)
+                        return null;
+                    // Handle currentColor
+                    if (value === 'currentColor') {
+                        return computedColor || null;
+                    }
+                    // Handle CSS custom properties: var(--xxx) or var(--xxx, fallback)
+                    const varMatch = value.match(/^var\(\s*(--[\w-]+)(?:\s*,\s*(.+))?\s*\)$/);
+                    if (varMatch) {
+                        const propName = varMatch[1];
+                        const fallback = varMatch[2];
+                        const resolvedValue = rootStyles.getPropertyValue(propName).trim();
+                        return resolvedValue || fallback || null;
+                    }
+                    return null; // Not a dynamic value, keep as-is
+                };
+                // Replace dynamic color values (currentColor, var()) in fill and stroke attributes
+                const resolveDynamicColors = (element) => {
+                    const fill = element.getAttribute('fill');
+                    const resolvedFill = resolveColorValue(fill);
+                    if (resolvedFill) {
+                        element.setAttribute('fill', resolvedFill);
+                    }
+                    const stroke = element.getAttribute('stroke');
+                    const resolvedStroke = resolveColorValue(stroke);
+                    if (resolvedStroke) {
+                        element.setAttribute('stroke', resolvedStroke);
+                    }
+                    // Recurse into child elements
+                    element.querySelectorAll('*').forEach(resolveDynamicColors);
+                };
+                resolveDynamicColors(svgClone);
+                // 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}`;
+                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);
+                processed.add(el);
+                // Also mark all SVG children as processed to avoid re-processing
+                el.querySelectorAll('*').forEach((child) => processed.add(child));
+                return;
+            }
+        }
+        // Handle <i> elements — skip Font Awesome / icon font elements cleanly.
+        // 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.
+        if (el.tagName === 'I') {
+            processed.add(el);
+            return;
+        }
         // Extract DIVs with backgrounds/borders as shapes
         const isContainer = el.tagName === 'DIV' && !textTags.includes(el.tagName);
         if (isContainer) {
@@ -684,7 +1407,7 @@ export function parseSlideHtml(doc) {
                 const y = pxToInch(rect.top);
                 const w = pxToInch(rect.width);
                 const h = pxToInch(rect.height);
-                if (parseFloat(borderTop) > 0) {
+                if (parseFloat(borderTop) > 0 && !isFullyTransparent(computed.borderTopColor)) {
                     const widthPt = pxToPoints(borderTop);
                     const inset = widthPt / 72 / 2;
                     borderLines.push({
@@ -695,9 +1418,10 @@ export function parseSlideHtml(doc) {
                         y2: y + inset,
                         width: widthPt,
                         color: rgbToHex(computed.borderTopColor),
+                        transparency: extractAlpha(computed.borderTopColor),
                     });
                 }
-                if (parseFloat(borderRight) > 0) {
+                if (parseFloat(borderRight) > 0 && !isFullyTransparent(computed.borderRightColor)) {
                     const widthPt = pxToPoints(borderRight);
                     const inset = widthPt / 72 / 2;
                     borderLines.push({
@@ -708,9 +1432,10 @@ export function parseSlideHtml(doc) {
                         y2: y + h,
                         width: widthPt,
                         color: rgbToHex(computed.borderRightColor),
+                        transparency: extractAlpha(computed.borderRightColor),
                     });
                 }
-                if (parseFloat(borderBottom) > 0) {
+                if (parseFloat(borderBottom) > 0 && !isFullyTransparent(computed.borderBottomColor)) {
                     const widthPt = pxToPoints(borderBottom);
                     const inset = widthPt / 72 / 2;
                     borderLines.push({
@@ -721,9 +1446,10 @@ export function parseSlideHtml(doc) {
                         y2: y + h - inset,
                         width: widthPt,
                         color: rgbToHex(computed.borderBottomColor),
+                        transparency: extractAlpha(computed.borderBottomColor),
                     });
                 }
-                if (parseFloat(borderLeft) > 0) {
+                if (parseFloat(borderLeft) > 0 && !isFullyTransparent(computed.borderLeftColor)) {
                     const widthPt = pxToPoints(borderLeft);
                     const inset = widthPt / 72 / 2;
                     borderLines.push({
@@ -734,6 +1460,7 @@ export function parseSlideHtml(doc) {
                         y2: y + h,
                         width: widthPt,
                         color: rgbToHex(computed.borderLeftColor),
+                        transparency: extractAlpha(computed.borderLeftColor),
                     });
                 }
             }
@@ -763,11 +1490,65 @@ export function parseSlideHtml(doc) {
                         };
                         elements.push(bgImgElement);
                     }
-                    // Check for text children
-                    const textChildren = Array.from(el.children).filter((child) => ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN'].includes(child.tagName));
-                    const nonTextChildren = Array.from(el.children).filter((child) => !['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN'].includes(child.tagName));
+                    // Check for text children — include standard text tags plus leaf DIVs with only direct text
+                    const textTagSet = new Set(['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN']);
+                    const allChildren = Array.from(el.children);
+                    // Collect text-bearing children: standard text tags AND leaf DIVs (no child elements, only text nodes)
+                    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
+                        // 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>
+                        if (child.tagName === 'DIV') {
+                            const childElements = Array.from(child.children);
+                            // A text-only DIV has:
+                            // - no child elements, OR
+                            // - only <br> children (inline breaks), OR
+                            // - a single <p> child (injected by transform.ts text wrapping)
+                            const isTextOnlyDiv = childElements.length === 0 ||
+                                childElements.every(ce => ce.tagName === 'BR') ||
+                                (childElements.length === 1 && childElements[0].tagName === 'P' &&
+                                    childElements[0].children.length === 0);
+                            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 = [
+                                childComputed.borderTopWidth,
+                                childComputed.borderRightWidth,
+                                childComputed.borderBottomWidth,
+                                childComputed.borderLeftWidth,
+                            ].map(b => parseFloat(b) || 0);
+                            const childHasBorder = childBorders.some(b => b > 0);
+                            // Only treat as text child if the DIV is unstyled text-only div
+                            return !childHasBg && !childHasBgImg && !childHasBorder;
+                        }
+                        return false;
+                    });
+                    // Non-text children exclude decorative elements (icons, SVGs) for text extraction purposes
+                    const decorativeTags = new Set(['I', 'SVG', 'CANVAS', 'VIDEO', 'AUDIO', 'IFRAME']);
+                    const nonTextChildren = allChildren.filter((child) => !textTagSet.has(child.tagName) &&
+                        !decorativeTags.has(child.tagName) &&
+                        !(child.tagName === 'DIV' && textChildren.includes(child)));
                     const isSingleTextChild = textChildren.length === 1 &&
-                        textChildren[0].children.length === 0 &&
+                        (() => {
+                            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)
+                            return tcChildren.length === 0 ||
+                                tcChildren.every(ce => ce.tagName === 'BR') ||
+                                (tcChildren.length === 1 && tcChildren[0].tagName === 'P' && tcChildren[0].children.length === 0);
+                        })() &&
                         nonTextChildren.length === 0;
                     // Detect flexbox alignment
                     const display = computed.display;
@@ -830,8 +1611,16 @@ export function parseSlideHtml(doc) {
                     let shapeText = '';
                     let shapeTextRuns = null;
                     let shapeStyle = null;
-                    const hasTextChildren = textChildren.length > 0 && nonTextChildren.length === 0;
-                    if (hasTextChildren) {
+                    const hasTextChildren = textChildren.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)
+                    const shouldMergeText = hasTextChildren && (isSingleTextChild ||
+                        nonTextChildren.length === 0);
+                    if (shouldMergeText) {
                         if (isSingleTextChild) {
                             const textEl = textChildren[0];
                             const textComputed = win.getComputedStyle(textEl);
@@ -902,37 +1691,87 @@ export function parseSlideHtml(doc) {
                                 inset: 0,
                                 wrap: !shouldNotWrap,
                             };
+                            const shapeLetterSpacing = extractLetterSpacing(textComputed);
+                            if (shapeLetterSpacing !== null)
+                                shapeStyle.charSpacing = shapeLetterSpacing;
+                            // Extract text-shadow for shape text
+                            const shapeTextShadow = parseTextShadow(textComputed.textShadow);
+                            if (shapeTextShadow.glow)
+                                shapeStyle.glow = shapeTextShadow.glow;
+                            if (shapeTextShadow.shadow)
+                                shapeStyle.textShadow = shapeTextShadow.shadow;
                             processed.add(textEl);
+                            // Also mark descendants as processed (e.g., <p> from transform.ts wrapping)
+                            textEl.querySelectorAll('*').forEach(desc => processed.add(desc));
                         }
                         else {
                             shapeTextRuns = [];
                             textChildren.forEach((textChild, idx) => {
                                 const textEl = textChild;
                                 const textComputed = win.getComputedStyle(textEl);
-                                const text = textEl.textContent.trim();
-                                if (!text)
+                                const fullText = textEl.textContent.trim();
+                                if (!fullText)
                                     return;
                                 const isBold = textComputed.fontWeight === 'bold' ||
                                     parseInt(textComputed.fontWeight) >= 600;
                                 const isItalic = textComputed.fontStyle === 'italic';
                                 const isUnderline = textComputed.textDecoration &&
                                     textComputed.textDecoration.includes('underline');
-                                const runText = idx > 0 && shapeTextRuns.length > 0 ? ' ' + text : text;
-                                shapeTextRuns.push({
-                                    text: runText,
-                                    options: {
-                                        fontSize: pxToPoints(textComputed.fontSize),
-                                        fontFace: textComputed.fontFamily
-                                            .split(',')[0]
-                                            .replace(/['"]/g, '')
-                                            .trim(),
-                                        color: rgbToHex(textComputed.color),
-                                        bold: isBold,
-                                        italic: isItalic,
-                                        underline: isUnderline || false,
-                                    },
-                                });
+                                const baseRunOptions = {
+                                    fontSize: pxToPoints(textComputed.fontSize),
+                                    fontFace: textComputed.fontFamily
+                                        .split(',')[0]
+                                        .replace(/['"]/g, '')
+                                        .trim(),
+                                    color: rgbToHex(textComputed.color),
+                                    bold: isBold,
+                                    italic: isItalic,
+                                    underline: isUnderline || false,
+                                    ...(extractLetterSpacing(textComputed) !== null ? { charSpacing: extractLetterSpacing(textComputed) } : {}),
+                                    ...(() => {
+                                        const ts = parseTextShadow(textComputed.textShadow);
+                                        return ts.glow ? { glow: ts.glow } : {};
+                                    })(),
+                                };
+                                // Check if this element contains <br> tags — split into multiple runs with line breaks
+                                const hasBrChildren = textEl.querySelector('br') !== null;
+                                if (hasBrChildren) {
+                                    // Walk child nodes to split text at <br> boundaries
+                                    let segments = [];
+                                    let currentSegment = '';
+                                    for (const node of Array.from(textEl.childNodes)) {
+                                        if (node.tagName === 'BR') {
+                                            segments.push(currentSegment.trim());
+                                            currentSegment = '';
+                                        }
+                                        else {
+                                            currentSegment += node.textContent || '';
+                                        }
+                                    }
+                                    if (currentSegment.trim())
+                                        segments.push(currentSegment.trim());
+                                    segments = segments.filter(s => s.length > 0);
+                                    segments.forEach((segment, segIdx) => {
+                                        const prefix = (segIdx === 0 && idx > 0 && shapeTextRuns.length > 0) ? '\n' : '';
+                                        const runText = prefix + segment;
+                                        const options = { ...baseRunOptions };
+                                        if (segIdx > 0) {
+                                            options.softBreakBefore = true;
+                                        }
+                                        shapeTextRuns.push({ text: runText, options });
+                                    });
+                                }
+                                else {
+                                    const runText = idx > 0 && shapeTextRuns.length > 0 ? '\n' + fullText : fullText;
+                                    const options = idx > 0 && shapeTextRuns.length > 0
+                                        ? { ...baseRunOptions, breakLine: true }
+                                        : baseRunOptions;
+                                    shapeTextRuns.push({ text: runText, options });
+                                }
                                 processed.add(textEl);
+                                // Also mark all descendant elements as processed (e.g., <p> tags injected
+                                // by transform.ts wrapping, <br> tags, <span> inline formatting)
+                                textEl.querySelectorAll('*').forEach(desc => processed.add(desc));
                             });
                             shapeStyle = {
                                 align: align,
@@ -942,6 +1781,42 @@ export function parseSlideHtml(doc) {
                         }
                     }
                     if (hasBg || hasUniformBorder || bgGradient) {
+                        // Detect element-level opacity
+                        const elementOpacity = parseFloat(computed.opacity);
+                        const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
+                        // Detect CSS filter: blur() for soft-edge effect
+                        let softEdgePt = null;
+                        const filterStr = computed.filter;
+                        if (filterStr && filterStr !== 'none') {
+                            const blurMatch = filterStr.match(/blur\(([\d.]+)px\)/);
+                            if (blurMatch) {
+                                const blurPx = parseFloat(blurMatch[1]);
+                                if (blurPx > 0) {
+                                    softEdgePt = blurPx * PT_PER_PX;
+                                }
+                            }
+                        }
+                        // Detect ellipse shape: border-radius >= 50% on roughly square elements
+                        const borderRadiusStr = computed.borderRadius;
+                        const borderRadiusVal = parseFloat(borderRadiusStr);
+                        const isCircularRadius = borderRadiusStr.includes('%')
+                            ? borderRadiusVal >= 50
+                            : (borderRadiusVal > 0 && borderRadiusVal >= Math.min(rect.width, rect.height) / 2 - 1);
+                        const aspectRatio = rect.width / rect.height;
+                        const isEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2.0;
+                        // Note: backdrop-filter: blur() has no PPTX equivalent. The
+                        // --has-backdrop-filter marker from transform.ts is available but we
+                        // intentionally do NOT adjust fill opacity here — attempting to
+                        // compensate creates large opaque panels that look worse than the
+                        // slightly different (non-frosted) appearance. The HTML screenshot
+                        // comparison uses the raw HTML which renders backdrop-filter, so
+                        // slight differences are expected and acceptable.
+                        // Extract padding for text body insets
+                        const paddingTop = parseFloat(computed.paddingTop) || 0;
+                        const paddingRight = parseFloat(computed.paddingRight) || 0;
+                        const paddingBottom = parseFloat(computed.paddingBottom) || 0;
+                        const paddingLeft = parseFloat(computed.paddingLeft) || 0;
+                        const hasPadding = paddingTop > 2 || paddingRight > 2 || paddingBottom > 2 || paddingLeft > 2;
                         const shapeElement = {
                             type: 'shape',
                             text: shapeText,
@@ -961,9 +1836,12 @@ export function parseSlideHtml(doc) {
                                     ? {
                                         color: rgbToHex(computed.borderColor),
                                         width: pxToPoints(computed.borderWidth),
+                                        transparency: extractAlpha(computed.borderColor),
                                     }
                                     : null,
                                 rectRadius: (() => {
+                                    if (isEllipse)
+                                        return 0; // Ellipses don't need rectRadius
                                     const radius = computed.borderRadius;
                                     const radiusValue = parseFloat(radius);
                                     if (radiusValue === 0)
@@ -979,8 +1857,20 @@ export function parseSlideHtml(doc) {
                                     return radiusValue / PX_PER_IN;
                                 })(),
                                 shadow: shadow,
+                                opacity: hasOpacity ? elementOpacity : null,
+                                isEllipse: isEllipse,
+                                softEdge: softEdgePt,
                             },
                         };
+                        // Apply CSS padding as text body insets when shape has text content
+                        if (hasPadding && shapeElement.style && (shapeText || (shapeTextRuns && shapeTextRuns.length > 0))) {
+                            shapeElement.style.margin = [
+                                paddingLeft * PT_PER_PX, // left
+                                paddingRight * PT_PER_PX, // right
+                                paddingBottom * PT_PER_PX, // bottom
+                                paddingTop * PT_PER_PX, // top
+                            ];
+                        }
                         elements.push(shapeElement);
                     }
                     else if (shapeStyle && shapeStyle.fontFill) {
@@ -1005,6 +1895,79 @@ export function parseSlideHtml(doc) {
                     return;
                 }
             }
+            // 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.
+            if (isContainer) {
+                const rect = htmlEl.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                    // Collect direct text nodes (not from children)
+                    // Also handle <p>-wrapped text from transform.ts which wraps bare text in <p> tags
+                    let directText = '';
+                    for (const child of Array.from(el.childNodes)) {
+                        if (child.nodeType === Node.TEXT_NODE) {
+                            directText += child.textContent || '';
+                        }
+                    }
+                    directText = directText.trim();
+                    // If no direct text nodes, check for a single <p> wrapper (from transform.ts)
+                    const childElements = Array.from(el.children);
+                    if (!directText && childElements.length === 1 && childElements[0].tagName === 'P' &&
+                        childElements[0].children.length === 0) {
+                        directText = childElements[0].textContent?.trim() || '';
+                    }
+                    // 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) {
+                        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;
+                        const textElement = {
+                            type: 'p',
+                            text: [{ text: directText, options: {} }],
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(rect.height),
+                            },
+                            style: {
+                                fontSize: pxToPoints(computed2.fontSize),
+                                fontFace: computed2.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                                color: rgbToHex(computed2.color),
+                                bold: parseInt(computed2.fontWeight) >= 600,
+                                italic: computed2.fontStyle === 'italic',
+                                align: computed2.textAlign === 'center'
+                                    ? 'center'
+                                    : computed2.textAlign === 'right' || computed2.textAlign === 'end'
+                                        ? 'right'
+                                        : 'left',
+                                valign: 'middle',
+                                lineSpacing: lineHeightMultiplier * pxToPoints(computed2.fontSize),
+                            },
+                        };
+                        // Check for text transparency
+                        const textTransparency = extractAlpha(computed2.color);
+                        if (textTransparency !== null) {
+                            textElement.style.transparency = textTransparency;
+                        }
+                        // Check for letter-spacing
+                        const ls = extractLetterSpacing(computed2);
+                        if (ls !== null)
+                            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));
+                        return;
+                    }
+                }
+            }
         }
         // Extract bullet lists
         if (el.tagName === 'UL' || el.tagName === 'OL') {
@@ -1017,12 +1980,37 @@ export function parseSlideHtml(doc) {
             const ulPaddingLeftPt = pxToPoints(ulComputed.paddingLeft);
             const marginLeft = ulPaddingLeftPt * 0.5;
             const textIndent = ulPaddingLeftPt * 0.5;
+            // Check if the list has explicit list-style: none — if so, the HTML is using
+            // custom bullet decorations (e.g. icon shapes) instead of native bullets.
+            // We should not add PptxGenJS bullets to avoid double-bullet artifacts.
+            const listStyleType = ulComputed.listStyleType;
+            const hasNativeBullets = listStyleType !== 'none';
+            // Check if LI items are flex containers — in this case, each child element
+            // (icon shapes, text nodes) should be processed individually at its actual
+            // position rather than merged into a single list element. This handles
+            // modern CSS patterns like icon+text list items where positioning is
+            // determined by flexbox, not by list indentation.
+            const hasFlexLiItems = liElements.some((li) => {
+                const liComputed = win.getComputedStyle(li);
+                return liComputed.display === 'flex' || liComputed.display === 'inline-flex';
+            });
+            // For flex list items without native bullets, skip the merged list processing.
+            // Let the normal DOM walk handle each child element individually.
+            // This ensures icons, shapes, and text are each positioned at their actual
+            // rendered location rather than being merged into one text box.
+            if (hasFlexLiItems && !hasNativeBullets) {
+                // Don't mark anything as processed — let the DOM walk continue
+                // and process each child element (SVGs, spans, text nodes) individually
+                return;
+            }
             liElements.forEach((li, idx) => {
                 const isLast = idx === liElements.length - 1;
                 const runs = parseInlineFormatting(li, { breakLine: false }, [], (x) => x, win);
                 if (runs.length > 0) {
                     runs[0].text = runs[0].text.replace(/^[•\-\*\u25AA\u25B8]\s*/, '');
-                    runs[0].options.bullet = { indent: textIndent };
+                    if (hasNativeBullets) {
+                        runs[0].options.bullet = { indent: textIndent };
+                    }
                 }
                 if (runs.length > 0 && !isLast) {
                     runs[runs.length - 1].options.breakLine = true;
@@ -1066,17 +2054,42 @@ export function parseSlideHtml(doc) {
         // Extract text elements
         if (!textTags.includes(el.tagName) || el.tagName === 'SPAN')
             return;
-        const rect = htmlEl.getBoundingClientRect();
-        const text = el.textContent.trim();
+        let rect = htmlEl.getBoundingClientRect();
+        let text = el.textContent.trim();
         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.
+        const isFlexContainer = computed.display === 'flex' || computed.display === 'inline-flex';
+        if (isFlexContainer && el.children.length > 0) {
+            // Collect direct text nodes (not in child elements)
+            const textNodes = [];
+            el.childNodes.forEach((node) => {
+                if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
+                    textNodes.push(node);
+                }
+            });
+            if (textNodes.length > 0) {
+                // Create a Range to measure the actual text position
+                const range = doc.createRange();
+                range.setStartBefore(textNodes[0]);
+                range.setEndAfter(textNodes[textNodes.length - 1]);
+                const textRect = range.getBoundingClientRect();
+                // 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();
+                }
+            }
+        }
         if (el.tagName !== 'LI' &&
             /^[•\-\*\u25AA\u25B8\u25CB\u25CF\u25C6\u25C7\u25A0\u25A1]\s/.test(text.trimStart())) {
             errors.push(`Text element <${el.tagName.toLowerCase()}> starts with bullet symbol "${text.substring(0, 20)}...". ` +
                 'Use <ul> or <ol> lists instead of manual bullet symbols.');
             return;
         }
-        const computed = win.getComputedStyle(el);
         const rotation = getRotation(computed.transform, computed.writingMode);
         const { x, y, w, h } = getPositionAndSize(htmlEl, rect, rotation);
         const fontSizePx = parseFloat(computed.fontSize);
@@ -1128,6 +2141,15 @@ export function parseSlideHtml(doc) {
         const transparency = extractAlpha(computed.color);
         if (transparency !== null)
             baseStyle.transparency = transparency;
+        const letterSpacing = extractLetterSpacing(computed);
+        if (letterSpacing !== null)
+            baseStyle.charSpacing = letterSpacing;
+        // Extract text-shadow → glow and/or shadow
+        const textShadowResult = parseTextShadow(computed.textShadow);
+        if (textShadowResult.glow)
+            baseStyle.glow = textShadowResult.glow;
+        if (textShadowResult.shadow)
+            baseStyle.textShadow = textShadowResult.shadow;
         if (rotation !== null)
             baseStyle.rotate = rotation;
         const bgClip = computed.webkitBackgroundClip || computed.backgroundClip;
@@ -1149,7 +2171,7 @@ export function parseSlideHtml(doc) {
                 }
             }
         }
-        const hasFormatting = el.querySelector('b, i, u, strong, em, span, br');
+        const hasFormatting = el.querySelector('b, i, u, strong, em, span, br, code, a, mark, sub, sup, small, s, del, ins, abbr, time, cite, q, dfn, kbd, samp, var');
         if (hasFormatting) {
             const transformStr = computed.textTransform;
             const runs = parseInlineFormatting(el, {}, [], (str) => applyTextTransform(str, transformStr), win);
@@ -1180,6 +2202,30 @@ export function parseSlideHtml(doc) {
         }
         processed.add(el);
     });
+    // Second pass: extract pseudo-elements for all processed elements
+    // This must be done after the main pass so we know which elements have been processed
+    processed.forEach((processedEl) => {
+        const htmlEl = processedEl;
+        if (htmlEl.tagName === 'BODY')
+            return; // Already handled above
+        const pseudoElements = extractPseudoElements(htmlEl, win);
+        elements.push(...pseudoElements);
+    });
+    // Third pass: extract pseudo-elements from unprocessed container DIVs
+    // Some DIVs (e.g., .image-side with overflow:hidden) have no bg/border/gradient
+    // themselves but have ::before/::after pseudo-elements with gradient overlays.
+    doc.querySelectorAll('div').forEach((divEl) => {
+        if (processed.has(divEl))
+            return; // Already handled in second pass
+        const htmlDiv = divEl;
+        if (htmlDiv === body)
+            return; // Body already handled
+        const rect = htmlDiv.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        const pseudoElements = extractPseudoElements(htmlDiv, win);
+        elements.push(...pseudoElements);
+    });
     return { background, elements, placeholders, errors };
 }
 //# sourceMappingURL=parse.js.map