npm - docgen-utils - Versions diffs - 1.0.27 → 1.0.29 - Mend

docgen-utils 1.0.27 → 1.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/README.md +3 -3
package/dist/bundle.js +2896 -389
package/dist/bundle.min.js +105 -103
package/dist/cli.js +142 -79
package/dist/packages/cli/commands/export-docs.d.ts +1 -0
package/dist/packages/cli/commands/export-docs.d.ts.map +1 -1
package/dist/packages/cli/commands/export-docs.js +15 -5
package/dist/packages/cli/commands/export-docs.js.map +1 -1
package/dist/packages/cli/commands/export-slides.d.ts +1 -1
package/dist/packages/cli/commands/export-slides.d.ts.map +1 -1
package/dist/packages/cli/commands/export-slides.js +15 -5
package/dist/packages/cli/commands/export-slides.js.map +1 -1
package/dist/packages/cli/index.js +9 -6
package/dist/packages/cli/index.js.map +1 -1
package/dist/packages/docs/convert.d.ts.map +1 -1
package/dist/packages/docs/convert.js +0 -197
package/dist/packages/docs/convert.js.map +1 -1
package/dist/packages/docs/import-docx.d.ts.map +1 -1
package/dist/packages/docs/import-docx.js +1 -6
package/dist/packages/docs/import-docx.js.map +1 -1
package/dist/packages/docs/parse.js +1 -1
package/dist/packages/docs/parse.js.map +1 -1
package/dist/packages/shared/convert-to-pdf.d.ts +16 -0
package/dist/packages/shared/convert-to-pdf.d.ts.map +1 -0
package/dist/packages/shared/convert-to-pdf.js +65 -0
package/dist/packages/shared/convert-to-pdf.js.map +1 -0
package/dist/packages/slides/common.d.ts +44 -2
package/dist/packages/slides/common.d.ts.map +1 -1
package/dist/packages/slides/convert.d.ts.map +1 -1
package/dist/packages/slides/convert.js +66 -14
package/dist/packages/slides/convert.js.map +1 -1
package/dist/packages/slides/parse.d.ts.map +1 -1
package/dist/packages/slides/parse.js +3546 -393
package/dist/packages/slides/parse.js.map +1 -1
package/dist/packages/slides/transform.d.ts.map +1 -1
package/dist/packages/slides/transform.js +2 -1
package/dist/packages/slides/transform.js.map +1 -1
package/dist/packages/slides/vendor/VENDORING.md +1 -0
package/dist/packages/slides/vendor/pptxgen.d.ts +2 -2
package/dist/packages/slides/vendor/pptxgen.js +8 -2
package/package.json +1 -1

package/dist/packages/slides/parse.js CHANGED Viewed

@@ -71,6 +71,46 @@ function extractAlpha(rgbStr) {
     const alpha = parseFloat(match[4]);
     return Math.round((1 - alpha) * 100);
 }
+/**
+ * Extract z-index from computed style.
+ * Returns undefined if z-index is 'auto' or not explicitly set.
+ * Used for element stacking order in PPTX.
+ */
+function extractZIndex(computed) {
+    const zIndex = computed.zIndex;
+    if (zIndex === 'auto' || zIndex === '')
+        return undefined;
+    const parsed = parseInt(zIndex, 10);
+    if (isNaN(parsed))
+        return undefined;
+    return parsed;
+}
+/**
+ * Compute the effective (accumulated) opacity for an element by multiplying
+ * the element's own opacity with all ancestor opacities.
+ *
+ * CSS opacity does NOT inherit — a child element with opacity:1 inside a parent
+ * with opacity:0.5 renders at 50% opacity visually, but getComputedStyle on the
+ * child returns opacity:1. This function walks up the DOM tree to compute the
+ * true visual opacity.
+ *
+ * @param element - The element to check
+ * @param win - The window object for getComputedStyle
+ * @returns The effective opacity (0-1), or 1 if all ancestors are fully opaque
+ */
+function getEffectiveOpacity(element, win) {
+    let effectiveOpacity = 1;
+    let current = element;
+    while (current && current !== win.document.body && current !== win.document.documentElement) {
+        const computed = win.getComputedStyle(current);
+        const opacity = parseFloat(computed.opacity);
+        if (!isNaN(opacity) && opacity < 1) {
+            effectiveOpacity *= opacity;
+        }
+        current = current.parentElement;
+    }
+    return effectiveOpacity;
+}
 /**
  * Convert CSS border-style to PPTX dashType.
  * Returns undefined for solid borders (the default).
@@ -147,26 +187,6 @@ function extractTranslation(computed) {
 // ---------------------------------------------------------------------------
 // Effective opacity (accumulated from ancestor chain)
 // ---------------------------------------------------------------------------
-/**
- * Compute the effective (accumulated) opacity of an element by walking up the
- * ancestor chain. CSS `opacity` is NOT inherited — each element has its own
- * computed value. However, visually the browser composites each stacking
- * context, so the real visual opacity is the product of all ancestor opacities.
- *
- * Stops at `<body>` since that is the slide boundary.
- */
-function getEffectiveOpacity(el, win) {
-    let opacity = 1;
-    let node = el;
-    while (node && node.tagName !== 'HTML') {
-        const style = win.getComputedStyle(node);
-        const nodeOpacity = parseFloat(style.opacity);
-        if (!isNaN(nodeOpacity))
-            opacity *= nodeOpacity;
-        node = node.parentElement;
-    }
-    return opacity;
-}
 // ---------------------------------------------------------------------------
 // Split multiple CSS background gradients
 // ---------------------------------------------------------------------------
@@ -692,13 +712,67 @@ function applyTextTransform(text, textTransform) {
     }
     return text;
 }
+/**
+ * List of monospace font families that indicate code/preformatted content.
+ * When these fonts are used, leading/trailing whitespace should be preserved.
+ */
+const monospaceFonts = new Set([
+    'consolas', 'courier', 'courier new', 'monospace', 'monaco',
+    'lucida console', 'dejavu sans mono', 'source code pro', 'fira code',
+    'roboto mono', 'jetbrains mono', 'inconsolata', 'menlo', 'sf mono',
+    'ubuntu mono', 'droid sans mono', 'andale mono', 'liberation mono',
+]);
+/**
+ * Check if the font family indicates monospace/code content.
+ * Monospace fonts typically mean code where whitespace indentation matters.
+ */
+function isMonospaceFont(fontFamily) {
+    // Extract the primary font family (first in the list)
+    const primaryFont = fontFamily.split(',')[0].trim().replace(/['"]/g, '').toLowerCase();
+    if (monospaceFonts.has(primaryFont)) {
+        return true;
+    }
+    // Also check if any of the fallback fonts is 'monospace'
+    const fonts = fontFamily.toLowerCase();
+    return fonts.includes('monospace') || fonts.includes('consolas') || fonts.includes('courier');
+}
+/**
+ * Determine if whitespace should be preserved for an element.
+ * This is true when:
+ * 1. white-space is 'pre', 'pre-wrap', or 'pre-line' (CSS preformatted text)
+ * 2. The font-family is a monospace font (indicates code content where indentation matters)
+ */
+function shouldPreserveWhitespace(computed) {
+    const whiteSpace = computed.whiteSpace;
+    if (whiteSpace === 'pre' || whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
+        return true;
+    }
+    // Check if it's a monospace font - indicates code content
+    return isMonospaceFont(computed.fontFamily);
+}
 /**
  * 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.
+ *
+ * When white-space is 'pre', 'pre-wrap', or 'pre-line', or when the font is monospace
+ * (indicating code content), whitespace and newlines are preserved.
  */
 function getTransformedText(element, computed) {
-    const rawText = element.textContent?.trim() || '';
+    const preserveWhitespace = shouldPreserveWhitespace(computed);
+    let rawText;
+    if (preserveWhitespace) {
+        // Preserve whitespace and newlines for preformatted text
+        // Use innerText which respects CSS whitespace handling, or fall back to textContent
+        rawText = element.innerText || element.textContent || '';
+        // Don't trim - preserve leading/trailing whitespace
+    }
+    else {
+        rawText = element.textContent?.trim() || '';
+    }
+    // Convert non-breaking spaces (&nbsp; / \u00A0) to regular spaces
+    // This is important for proper rendering in PPTX, especially for indentation
+    rawText = rawText.replace(/\u00A0/g, ' ');
     const textTransform = computed.textTransform;
     if (textTransform && textTransform !== 'none') {
         return applyTextTransform(rawText, textTransform);
@@ -1425,6 +1499,9 @@ function extractPseudoElements(el, win) {
     const parentRect = el.getBoundingClientRect();
     if (parentRect.width <= 0 || parentRect.height <= 0)
         return results;
+    // Get parent element's z-index for inheritance by pseudo-elements
+    const parentComputed = win.getComputedStyle(el);
+    const parentZIndex = extractZIndex(parentComputed);
     for (const pseudo of ['::before', '::after']) {
         const pComputed = win.getComputedStyle(el, pseudo);
         // Skip if no content or content is 'none'
@@ -1647,13 +1724,24 @@ function extractPseudoElements(el, win) {
         const transformOffsetY = translation?.y ?? 0;
         const absLeft = parentRect.left + pLeft + borderOffsetLeft + transformOffsetX;
         const absTop = parentRect.top + pTop + borderOffsetTop + transformOffsetY;
-        // Check for visual content: background color, gradient, or border
+        // Check for visual content: background color, gradient, border, or background image
         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)
+        // Check for border
+        const pseudoBorderTopWidth = parseFloat(pComputed.borderTopWidth) || 0;
+        const pseudoBorderRightWidth = parseFloat(pComputed.borderRightWidth) || 0;
+        const pseudoBorderBottomWidth = parseFloat(pComputed.borderBottomWidth) || 0;
+        const pseudoBorderLeftWidth = parseFloat(pComputed.borderLeftWidth) || 0;
+        const hasPseudoBorder = pseudoBorderTopWidth > 0 || pseudoBorderRightWidth > 0 ||
+            pseudoBorderBottomWidth > 0 || pseudoBorderLeftWidth > 0;
+        const hasUniformPseudoBorder = hasPseudoBorder &&
+            pseudoBorderTopWidth === pseudoBorderRightWidth &&
+            pseudoBorderRightWidth === pseudoBorderBottomWidth &&
+            pseudoBorderBottomWidth === pseudoBorderLeftWidth;
+        if (!hasBg && !hasGradient && !hasBgImage && !hasPseudoBorder)
             continue;
         // Parse gradient(s) — a single background-image property may contain multiple gradients
         let gradient = null;
@@ -1674,16 +1762,26 @@ function extractPseudoElements(el, win) {
         const elementOpacity = parentEffectiveOpacity * (isNaN(pseudoOwnOpacity) ? 1 : pseudoOwnOpacity);
         const hasOpacity = elementOpacity < 1;
         // Parse border-radius and detect ellipse shape
+        // Also parse individual corner radii for non-uniform border-radius detection
         let rectRadius = 0;
         const borderRadius = pComputed.borderRadius;
         const radiusValue = parseFloat(borderRadius);
+        // Parse individual corner radii (for non-uniform border-radius like "16px 16px 0 0")
+        const pseudoRadiusTL = parseFloat(pComputed.borderTopLeftRadius) || 0;
+        const pseudoRadiusTR = parseFloat(pComputed.borderTopRightRadius) || 0;
+        const pseudoRadiusBL = parseFloat(pComputed.borderBottomLeftRadius) || 0;
+        const pseudoRadiusBR = parseFloat(pComputed.borderBottomRightRadius) || 0;
+        const hasPseudoRadius = pseudoRadiusTL > 0 || pseudoRadiusTR > 0 || pseudoRadiusBL > 0 || pseudoRadiusBR > 0;
+        const hasNonUniformPseudoRadius = hasPseudoRadius &&
+            (pseudoRadiusTL !== pseudoRadiusTR || pseudoRadiusTL !== pseudoRadiusBL || pseudoRadiusTL !== pseudoRadiusBR);
         // 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 (radiusValue > 0 && !isEllipse && !hasNonUniformPseudoRadius) {
+            // Only use uniform rectRadius if all corners have the same radius
             if (borderRadius.includes('%')) {
                 const minDim = Math.min(pWidth, pHeight);
                 rectRadius = (radiusValue / 100) * pxToInch(minDim);
@@ -1694,6 +1792,8 @@ function extractPseudoElements(el, win) {
         }
         // Parse box-shadow
         const shadow = parseBoxShadow(pComputed.boxShadow);
+        // Extract rotation angle from CSS transform
+        const pseudoRotation = extractRotationAngle(pComputed);
         // Inherit parent border-radius when pseudo-element is flush at the edge of a
         // parent with overflow:hidden. In CSS, the parent clips the pseudo-element;
         // in PPTX there's no clipping group, so we must round the pseudo-element's
@@ -1730,6 +1830,326 @@ function extractPseudoElements(el, win) {
                 }
             }
         }
+        // Generate custom geometry for thin bars that need overflow clipping
+        // When a pseudo-element is thinner than the parent's border-radius, the standard
+        // roundRect approach doesn't work because PptxGenJS clamps the radius.
+        // We need custom geometry to follow the parent's arc correctly.
+        let asymmetricCornerGeometry = null;
+        if (rectRadius === 0 && !isEllipse && effectiveRectRadius > 0) {
+            // We've determined this element should have rounded corners from parent overflow
+            const parentComputed = win.getComputedStyle(el);
+            const parentRadius = parseFloat(parentComputed.borderRadius);
+            // Check if element is thinner than the radius in any dimension
+            const isThinHorizontal = pHeight < parentRadius && pWidth >= parentRadius * 2;
+            const isThinVertical = pWidth < parentRadius && pHeight >= parentRadius * 2;
+            if (isThinHorizontal || isThinVertical) {
+                // Determine which corners need rounding based on flush edges
+                const parentBorderLeft = parseFloat(parentComputed.borderLeftWidth) || 0;
+                const parentBorderRight = parseFloat(parentComputed.borderRightWidth) || 0;
+                const parentBorderTop = parseFloat(parentComputed.borderTopWidth) || 0;
+                const parentBorderBottom = parseFloat(parentComputed.borderBottomWidth) || 0;
+                const parentInnerWidth = parentRect.width - parentBorderLeft - parentBorderRight;
+                const parentInnerHeight = parentRect.height - parentBorderTop - parentBorderBottom;
+                const flushTop = Math.abs(pTop) < 2;
+                const flushLeft = Math.abs(pLeft) < 2;
+                const flushRight = Math.abs(pLeft + pWidth - parentRect.width) < 2 ||
+                    Math.abs(pLeft + pWidth - parentInnerWidth) < 2;
+                const flushBottom = Math.abs(pTop + pHeight - parentRect.height) < 2 ||
+                    Math.abs(pTop + pHeight - parentInnerHeight) < 2;
+                // For thin elements, we need to follow the parent's arc, not just use clamped radius.
+                // At y=h (bottom of a top bar), the parent's arc is at x = arcXAtY(r, h) from the corner.
+                // arcXAtY(r, y) = r - sqrt(r² - (r-y)²) for y < r
+                const arcXAtY = (r, y) => {
+                    if (y <= 0)
+                        return r;
+                    if (y >= r)
+                        return 0;
+                    const dy = r - y;
+                    return r - Math.sqrt(r * r - dy * dy);
+                };
+                // Calculate the arc intersection point for each dimension
+                const h = pHeight; // bar height
+                const w = pWidth; // bar width
+                const r = parentRadius;
+                const EMU_PER_PX = 914400 / 96;
+                const points = [];
+                if (isThinHorizontal && flushTop) {
+                    // Thin horizontal bar at TOP - approximate arc with multiple line segments
+                    // At y=0, the arc starts at x=r from the corner
+                    // At y=h, the arc is at x=arcXAtY(r, h) from the corner
+                    // Use 4 segments to approximate the arc for smooth appearance
+                    // Generate intermediate points along the arc
+                    const segments = 8;
+                    const arcPointsLeft = [];
+                    const arcPointsRight = [];
+                    for (let i = 0; i <= segments; i++) {
+                        const t = i / segments;
+                        const y = t * h;
+                        const x = arcXAtY(r, y);
+                        arcPointsLeft.push({
+                            x: Math.round(x * EMU_PER_PX),
+                            y: Math.round(y * EMU_PER_PX)
+                        });
+                        arcPointsRight.push({
+                            x: Math.round((w - x) * EMU_PER_PX),
+                            y: Math.round(y * EMU_PER_PX)
+                        });
+                    }
+                    // Build path: TL arc → top edge → TR arc → bottom edge
+                    // Start at top of TL arc
+                    points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                    // Top edge to TR
+                    points.push({ x: arcPointsRight[0].x, y: arcPointsRight[0].y });
+                    // TR arc going down
+                    for (let i = 1; i <= segments; i++) {
+                        points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                    }
+                    // Bottom edge from TR to TL
+                    points.push({ x: arcPointsLeft[segments].x, y: arcPointsLeft[segments].y });
+                    // TL arc going up (skip i=0 since that's the start point, close will handle it)
+                    for (let i = segments - 1; i >= 1; i--) {
+                        points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                    }
+                    // Close the path - this draws a line from the last point (arcPointsLeft[1])
+                    // back to the start point (arcPointsLeft[0])
+                    points.push({ x: 0, y: 0, close: true });
+                    asymmetricCornerGeometry = points;
+                }
+                else if (isThinHorizontal && flushBottom) {
+                    // Thin horizontal bar at BOTTOM - approximate arc with multiple line segments
+                    // Generate intermediate points along the arc (from top to bottom of bar)
+                    const segments = 8;
+                    const arcPointsLeft = [];
+                    const arcPointsRight = [];
+                    for (let i = 0; i <= segments; i++) {
+                        const t = i / segments;
+                        const y = t * h; // y from 0 to h within the bar
+                        // For bottom bar, we need to flip: at y=0 (top of bar), arc is closer to edge
+                        // at y=h (bottom of bar), arc is at full radius
+                        const arcDistance = arcXAtY(r, h - y); // distance from corner at this y
+                        arcPointsLeft.push({
+                            x: Math.round(arcDistance * EMU_PER_PX),
+                            y: Math.round(y * EMU_PER_PX)
+                        });
+                        arcPointsRight.push({
+                            x: Math.round((w - arcDistance) * EMU_PER_PX),
+                            y: Math.round(y * EMU_PER_PX)
+                        });
+                    }
+                    // Build path: start at top-left corner, go right, down TR arc, left, up TL arc
+                    points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                    points.push({ x: arcPointsRight[0].x, y: arcPointsRight[0].y });
+                    // TR arc going down
+                    for (let i = 1; i <= segments; i++) {
+                        points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                    }
+                    // Bottom edge from BR to BL
+                    points.push({ x: arcPointsLeft[segments].x, y: arcPointsLeft[segments].y });
+                    // BL arc going up
+                    for (let i = segments - 1; i >= 0; i--) {
+                        if (i === 0) {
+                            points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y, close: true });
+                        }
+                        else {
+                            points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                        }
+                    }
+                    asymmetricCornerGeometry = points;
+                }
+                else if (isThinVertical && flushLeft) {
+                    // Thin vertical bar on LEFT - approximate arc with multiple line segments
+                    // For vertical bar, we need arcYAtX: at x=w, where is the arc?
+                    // arcYAtX(r, x) = r - sqrt(r² - (r-x)²) for x < r
+                    const arcYAtX = (radius, x) => {
+                        if (x <= 0)
+                            return radius;
+                        if (x >= radius)
+                            return 0;
+                        const dx = radius - x;
+                        return radius - Math.sqrt(radius * radius - dx * dx);
+                    };
+                    // Generate intermediate points along the arc
+                    const segments = 8;
+                    const arcPointsTop = [];
+                    const arcPointsBottom = [];
+                    for (let i = 0; i <= segments; i++) {
+                        const t = i / segments;
+                        const x = t * w; // x from 0 to w within the bar
+                        const arcDistance = arcYAtX(r, x); // y distance from corner at this x
+                        arcPointsTop.push({
+                            x: Math.round(x * EMU_PER_PX),
+                            y: Math.round(arcDistance * EMU_PER_PX)
+                        });
+                        arcPointsBottom.push({
+                            x: Math.round(x * EMU_PER_PX),
+                            y: Math.round((h - arcDistance) * EMU_PER_PX)
+                        });
+                    }
+                    // Build path: start at TL arc (left edge, y=r), go right along TL arc,
+                    // down right edge, left along BL arc, up left edge
+                    points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                    // TL arc going right
+                    for (let i = 1; i <= segments; i++) {
+                        points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                    }
+                    // Right edge down to BL arc start
+                    points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                    // BL arc going left
+                    for (let i = segments - 1; i >= 0; i--) {
+                        points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                    }
+                    // Close back to start
+                    points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                    asymmetricCornerGeometry = points;
+                }
+                else if (isThinVertical && flushRight) {
+                    // Thin vertical bar on RIGHT - approximate arc with multiple line segments
+                    const arcYAtX = (radius, x) => {
+                        if (x <= 0)
+                            return radius;
+                        if (x >= radius)
+                            return 0;
+                        const dx = radius - x;
+                        return radius - Math.sqrt(radius * radius - dx * dx);
+                    };
+                    // Generate intermediate points along the arc
+                    const segments = 8;
+                    const arcPointsTop = [];
+                    const arcPointsBottom = [];
+                    for (let i = 0; i <= segments; i++) {
+                        const t = i / segments;
+                        const x = t * w; // x from 0 to w within the bar
+                        // For right bar, we flip: at x=0 (left edge of bar), arc is closer to edge
+                        // at x=w (right edge), arc is at full radius
+                        const arcDistance = arcYAtX(r, w - x); // y distance from corner at this x
+                        arcPointsTop.push({
+                            x: Math.round(x * EMU_PER_PX),
+                            y: Math.round(arcDistance * EMU_PER_PX)
+                        });
+                        arcPointsBottom.push({
+                            x: Math.round(x * EMU_PER_PX),
+                            y: Math.round((h - arcDistance) * EMU_PER_PX)
+                        });
+                    }
+                    // Build path: start at left edge TR arc intersection, go right along TR arc,
+                    // down right edge, left along BR arc, up left edge
+                    points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                    // TR arc going right
+                    for (let i = 1; i <= segments; i++) {
+                        points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                    }
+                    // Right edge down to BR arc start
+                    points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                    // BR arc going left
+                    for (let i = segments - 1; i >= 0; i--) {
+                        points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                    }
+                    // Close back to start
+                    points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                    asymmetricCornerGeometry = points;
+                }
+                // If we generated custom geometry, clear the rect radius
+                // (custom geometry replaces roundRect)
+                if (asymmetricCornerGeometry) {
+                    effectiveRectRadius = 0;
+                }
+            }
+        }
+        // Generate custom geometry for non-uniform border-radius on the pseudo-element itself
+        // (e.g., border-radius: 16px 16px 0 0 for only top corners rounded)
+        if (!asymmetricCornerGeometry && hasNonUniformPseudoRadius && !isEllipse) {
+            const w = pWidth;
+            const h = pHeight;
+            const EMU_PER_PX = 914400 / 96;
+            const widthEmu = Math.round(w * EMU_PER_PX);
+            const heightEmu = Math.round(h * EMU_PER_PX);
+            const segments = 8;
+            const points = [];
+            // Generate arc points for a corner
+            const addCornerArc = (cornerRadius, isRight, isBottom) => {
+                if (cornerRadius <= 0)
+                    return; // No arc for square corner
+                for (let i = 0; i <= segments; i++) {
+                    const t = i / segments;
+                    const angle = t * Math.PI / 2;
+                    let x, y;
+                    if (!isRight && !isBottom) {
+                        // TL corner: arc from (radius, 0) to (0, radius)
+                        x = cornerRadius * (1 - Math.sin(angle));
+                        y = cornerRadius * (1 - Math.cos(angle));
+                    }
+                    else if (isRight && !isBottom) {
+                        // TR corner: arc from (w-radius, 0) to (w, radius)
+                        x = w - cornerRadius + cornerRadius * Math.sin(angle);
+                        y = cornerRadius * (1 - Math.cos(angle));
+                    }
+                    else if (!isRight && isBottom) {
+                        // BL corner: arc from (0, h-radius) to (radius, h)
+                        x = cornerRadius * (1 - Math.cos(angle));
+                        y = h - cornerRadius + cornerRadius * Math.sin(angle);
+                    }
+                    else {
+                        // BR corner: arc from (w, h-radius) to (w-radius, h)
+                        x = w - cornerRadius + cornerRadius * Math.cos(angle);
+                        y = h - cornerRadius + cornerRadius * Math.sin(angle);
+                    }
+                    // Clamp to element bounds
+                    x = Math.max(0, Math.min(w, x));
+                    y = Math.max(0, Math.min(h, y));
+                    points.push({
+                        x: Math.round(x * EMU_PER_PX),
+                        y: Math.round(y * EMU_PER_PX),
+                        ...(points.length === 0 ? { moveTo: true } : {})
+                    });
+                }
+            };
+            // Build path clockwise: start at top-left, go right to top-right, down to bottom-right,
+            // left to bottom-left, up back to top-left
+            if (pseudoRadiusTL > 0) {
+                points.push({ x: Math.round(pseudoRadiusTL * EMU_PER_PX), y: 0, moveTo: true });
+            }
+            else {
+                points.push({ x: 0, y: 0, moveTo: true });
+            }
+            // Top edge to top-right
+            if (pseudoRadiusTR > 0) {
+                points.push({ x: Math.round((w - pseudoRadiusTR) * EMU_PER_PX), y: 0 });
+                addCornerArc(pseudoRadiusTR, true, false);
+            }
+            else {
+                points.push({ x: widthEmu, y: 0 });
+            }
+            // Right edge to bottom-right
+            if (pseudoRadiusBR > 0) {
+                points.push({ x: widthEmu, y: Math.round((h - pseudoRadiusBR) * EMU_PER_PX) });
+                addCornerArc(pseudoRadiusBR, true, true);
+            }
+            else {
+                points.push({ x: widthEmu, y: heightEmu });
+            }
+            // Bottom edge to bottom-left
+            if (pseudoRadiusBL > 0) {
+                points.push({ x: Math.round(pseudoRadiusBL * EMU_PER_PX), y: heightEmu });
+                addCornerArc(pseudoRadiusBL, false, true);
+            }
+            else {
+                points.push({ x: 0, y: heightEmu });
+            }
+            // Left edge back to top-left
+            if (pseudoRadiusTL > 0) {
+                points.push({ x: 0, y: Math.round(pseudoRadiusTL * EMU_PER_PX) });
+                addCornerArc(pseudoRadiusTL, false, false);
+            }
+            // Close the path
+            if (points.length > 0) {
+                const firstPoint = points[0];
+                points.push({ x: firstPoint.x, y: firstPoint.y, close: true });
+            }
+            if (points.length > 5) {
+                asymmetricCornerGeometry = points;
+                effectiveRectRadius = 0;
+            }
+        }
         // Create shape element
         const shapeElement = {
             type: 'shape',
@@ -1746,15 +2166,24 @@ function extractPseudoElements(el, win) {
                 fill: hasBg ? rgbToHex(pComputed.backgroundColor) : null,
                 gradient: gradient,
                 transparency: hasBg ? extractAlpha(pComputed.backgroundColor) : null,
-                line: null,
+                line: hasUniformPseudoBorder
+                    ? {
+                        color: rgbToHex(pComputed.borderColor),
+                        width: pxToPoints(pComputed.borderTopWidth),
+                        transparency: extractAlpha(pComputed.borderColor),
+                        dashType: extractDashType(pComputed.borderStyle),
+                    }
+                    : null,
                 rectRadius: effectiveRectRadius,
                 shadow: shadow,
                 opacity: hasOpacity ? elementOpacity : null,
                 isEllipse: isEllipse,
                 softEdge: null,
-                rotate: null,
-                customGeometry: null,
+                rotate: pseudoRotation,
+                cssTriangle: null,
+                customGeometry: asymmetricCornerGeometry,
             },
+            zIndex: parentZIndex,
         };
         results.push(shapeElement);
         // Add additional shape elements for extra gradient layers
@@ -1776,15 +2205,17 @@ function extractPseudoElements(el, win) {
                     isEllipse: false,
                     softEdge: null,
                     rotate: null,
+                    cssTriangle: null,
                     customGeometry: null,
                 },
+                zIndex: parentZIndex,
             };
             results.push(extraShape);
         }
     }
     return results;
 }
-function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win) {
+function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win, preserveWhitespace = false) {
     let prevNodeIsText = false;
     let pendingSoftBreak = false;
     element.childNodes.forEach((node) => {
@@ -1794,7 +2225,43 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
             prevNodeIsText = false;
         }
         else if (node.nodeType === Node.TEXT_NODE) {
-            const text = textTransform(node.textContent.replace(/\s+/g, ' '));
+            // For preformatted text (white-space: pre), preserve whitespace and newlines
+            // by converting newlines to softBreakBefore markers
+            let rawText = node.textContent || '';
+            // Convert non-breaking spaces (&nbsp; / \u00A0) to regular spaces
+            rawText = rawText.replace(/\u00A0/g, ' ');
+            let text;
+            if (preserveWhitespace) {
+                // Split by newlines and create separate runs with softBreakBefore
+                const lines = rawText.split('\n');
+                for (let i = 0; i < lines.length; i++) {
+                    let lineText = lines[i];
+                    // Preserve spaces (don't collapse to single space)
+                    lineText = textTransform(lineText);
+                    const prevRun = runs[runs.length - 1];
+                    if (i === 0 && prevNodeIsText && prevRun && !pendingSoftBreak) {
+                        // First line continues previous text
+                        prevRun.text += lineText;
+                    }
+                    else {
+                        // Create a new run for this line
+                        const runOptions = { ...baseOptions };
+                        if (i > 0 || pendingSoftBreak) {
+                            runOptions.softBreakBefore = true;
+                            pendingSoftBreak = false;
+                        }
+                        // For empty lines, use a space to preserve the line break in PPTX
+                        // (PPTX doesn't render runs with empty text, so we need at least a space)
+                        const runText = lineText.length > 0 ? lineText : ' ';
+                        runs.push({ text: runText, options: runOptions });
+                    }
+                }
+                prevNodeIsText = true;
+                return; // Early return - we've handled all the text
+            }
+            else {
+                text = textTransform(rawText.replace(/\s+/g, ' '));
+            }
             const prevRun = runs[runs.length - 1];
             if (prevNodeIsText && prevRun && !pendingSoftBreak) {
                 prevRun.text += text;
@@ -1833,6 +2300,22 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                     if (transparency !== null)
                         options.transparency = transparency;
                 }
+                // Extract background color for inline elements (CODE, SPAN, etc.)
+                // This becomes a highlight/shading on the text run in PPTX
+                if (computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)') {
+                    const bgAlpha = extractAlpha(computed.backgroundColor);
+                    if (bgAlpha !== null && bgAlpha > 0) {
+                        // Has transparency - use object form with transparency
+                        options.highlight = {
+                            color: rgbToHex(computed.backgroundColor),
+                            transparency: bgAlpha,
+                        };
+                    }
+                    else {
+                        // Fully opaque - use simple hex string
+                        options.highlight = rgbToHex(computed.backgroundColor);
+                    }
+                }
                 // Check for gradient text fill (-webkit-background-clip: text + transparent text-fill-color)
                 const bgClip = computed.webkitBackgroundClip || computed.backgroundClip;
                 const textFillColor = computed.webkitTextFillColor;
@@ -1850,10 +2333,29 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                         }
                     }
                 }
-                if (computed.fontSize)
-                    options.fontSize = pxToPoints(computed.fontSize);
-                if (computed.fontFamily) {
-                    options.fontFace = extractFontFace(computed.fontFamily);
+                // Handle font-size: if baseOptions has a fontSize from a monospace context,
+                // prefer the base fontSize to maintain uniform code block sizing.
+                // This fixes the issue where CSS rules like ".gh-body p { font-size: 13px }"
+                // override ".code-block { font-size: 10.5px }" for inline elements inside P tags
+                // that were inserted by transform.ts.
+                //
+                // The key insight: transform.ts wraps text in P tags which breaks font inheritance,
+                // causing inline SPANs to inherit from P (Calibri 7.3pt) instead of the code-block
+                // (Consolas 5.9pt). We detect this by checking if baseOptions came from a monospace
+                // context - if so, we keep the base fontSize for uniform sizing.
+                const inlineFontFace = computed.fontFamily ? extractFontFace(computed.fontFamily) : null;
+                const baseFontFaceForCheck = baseOptions.fontFace || '';
+                const baseFontFaceIsMonospace = baseFontFaceForCheck && isMonospaceFont(baseFontFaceForCheck);
+                // If base came from a monospace context AND base already has a fontSize,
+                // keep the base fontSize (don't let CSS inheritance override code block sizing)
+                if (computed.fontSize) {
+                    const shouldKeepBaseFontSize = baseOptions.fontSize && baseFontFaceIsMonospace;
+                    if (!shouldKeepBaseFontSize) {
+                        options.fontSize = pxToPoints(computed.fontSize);
+                    }
+                }
+                if (inlineFontFace) {
+                    options.fontFace = inlineFontFace;
                 }
                 const runLetterSpacing = extractLetterSpacing(computed);
                 if (runLetterSpacing !== null)
@@ -1870,7 +2372,7 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                 if (pendingSoftBreak) {
                     pendingSoftBreak = false; // Clear before recursion
                 }
-                parseInlineFormatting(el, options, runs, textTransform, win);
+                parseInlineFormatting(el, options, runs, textTransform, win, preserveWhitespace);
                 // Apply softBreakBefore to the first run added by the recursive call
                 if (hadPendingSoftBreak && runs.length > runsBeforeRecurse) {
                     runs[runsBeforeRecurse].options = {
@@ -1879,10 +2381,73 @@ function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, wi
                     };
                 }
             }
+            else {
+                // Non-inline element (like P, DIV, etc.) - recurse into it with block-level formatting
+                // This allows inline formatting inside block elements to be extracted while
+                // preserving the block element's own styling (font-size, font-weight, color, etc.)
+                const blockTags = new Set(['P', 'DIV', 'LI', 'BLOCKQUOTE', 'PRE', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
+                if (blockTags.has(el.tagName)) {
+                    const runsBeforeRecurse = runs.length;
+                    const hadPendingSoftBreak = pendingSoftBreak;
+                    if (pendingSoftBreak) {
+                        pendingSoftBreak = false;
+                    }
+                    // For block elements like PRE, check if they have white-space: pre
+                    let blockPreserveWhitespace = preserveWhitespace;
+                    const blockComputed = win.getComputedStyle(el);
+                    if (el.tagName === 'PRE') {
+                        const ws = blockComputed.whiteSpace;
+                        blockPreserveWhitespace = ws === 'pre' || ws === 'pre-wrap' || ws === 'pre-line';
+                    }
+                    // Extract block element's formatting to pass to children
+                    // This ensures nested DIVs like .data-value (bold, 20px) and .data-desc (muted, 14px)
+                    // each get their own formatting instead of inheriting only from the parent
+                    const blockOptions = { ...baseOptions };
+                    const blockIsBold = blockComputed.fontWeight === 'bold' || parseInt(blockComputed.fontWeight) >= 600;
+                    if (blockIsBold && !shouldSkipBold(blockComputed.fontFamily)) {
+                        blockOptions.bold = true;
+                    }
+                    if (blockComputed.fontStyle === 'italic') {
+                        blockOptions.italic = true;
+                    }
+                    if (blockComputed.textDecoration?.includes('underline')) {
+                        blockOptions.underline = true;
+                    }
+                    // Extract color if different from default/base
+                    if (blockComputed.color && blockComputed.color !== 'rgb(0, 0, 0)') {
+                        blockOptions.color = rgbToHex(blockComputed.color);
+                        const transparency = extractAlpha(blockComputed.color);
+                        if (transparency !== null)
+                            blockOptions.transparency = transparency;
+                    }
+                    // Extract font size if specified
+                    if (blockComputed.fontSize) {
+                        blockOptions.fontSize = pxToPoints(blockComputed.fontSize);
+                    }
+                    // Extract font family if specified
+                    if (blockComputed.fontFamily) {
+                        blockOptions.fontFace = extractFontFace(blockComputed.fontFamily);
+                    }
+                    parseInlineFormatting(el, blockOptions, runs, textTransform, win, blockPreserveWhitespace);
+                    // Block elements should start on a new line if there's content before them.
+                    // Apply breakLine to the first run added by the recursive call.
+                    if (runs.length > runsBeforeRecurse) {
+                        if (hadPendingSoftBreak || runsBeforeRecurse > 0) {
+                            // There's either a pending <br> or existing content before this block,
+                            // so start this block on a new line
+                            runs[runsBeforeRecurse].options = {
+                                ...runs[runsBeforeRecurse].options,
+                                breakLine: true,
+                            };
+                        }
+                    }
+                }
+            }
             prevNodeIsText = false;
         }
     });
-    if (runs.length > 0) {
+    // Only trim leading/trailing whitespace when not preserving whitespace
+    if (!preserveWhitespace && runs.length > 0) {
         runs[0].text = runs[0].text.replace(/^\s+/, '');
         runs[runs.length - 1].text = runs[runs.length - 1].text.replace(/\s+$/, '');
     }
@@ -1940,7 +2505,7 @@ export function parseSlideHtml(doc) {
     // -------------------------------------------------------------------------
     const elements = [];
     const placeholders = [];
-    const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'UL', 'OL', 'LI', 'SPAN'];
+    const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'UL', 'OL', 'LI', 'SPAN', 'PRE'];
     const processed = new Set();
     // Extract pseudo-elements from body (e.g., body::before radial glows)
     const bodyPseudoElements = extractPseudoElements(body, win);
@@ -1960,55 +2525,34 @@ export function parseSlideHtml(doc) {
                 (computed.borderLeftWidth && parseFloat(computed.borderLeftWidth) > 0);
             const hasShadow = computed.boxShadow && computed.boxShadow !== 'none';
             if (hasBg || hasBorder || hasShadow) {
-                errors.push(`Text element <${el.tagName.toLowerCase()}> has ${hasBg ? 'background' : hasBorder ? 'border' : 'shadow'}. ` +
-                    'Backgrounds, borders, and shadows are only supported on <div> elements, not text elements.');
-                return;
-            }
-        }
-        // Handle SPAN and A elements with backgrounds/borders as shapes
-        // <a> tags styled as buttons (e.g. CTA buttons with gradient backgrounds,
-        // border-radius, box-shadow) need the same shape treatment as SPANs.
-        if (el.tagName === 'SPAN' || el.tagName === 'A') {
-            const computed = win.getComputedStyle(el);
-            const hasBg = computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
-            const hasBorder = (computed.borderWidth && parseFloat(computed.borderWidth) > 0) ||
-                (computed.borderTopWidth && parseFloat(computed.borderTopWidth) > 0) ||
-                (computed.borderRightWidth && parseFloat(computed.borderRightWidth) > 0) ||
-                (computed.borderBottomWidth && parseFloat(computed.borderBottomWidth) > 0) ||
-                (computed.borderLeftWidth && parseFloat(computed.borderLeftWidth) > 0);
-            // 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'));
-            // 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) {
+                // Treat styled text elements (H1-H6, P, etc.) as shapes, similar to SPAN/A handling
                 const rect = htmlEl.getBoundingClientRect();
                 if (rect.width > 0 && rect.height > 0) {
-                    const text = getTransformedText(htmlEl, computed);
+                    // Check if this is a flex container with multiple children — if so, don't merge
+                    // text into the shape. The children will be extracted separately at their own
+                    // positions (e.g., flex LI items with icon shapes + text labels).
+                    const styledTextDisplay = computed.display;
+                    const styledTextFlexDir = computed.flexDirection || 'row';
+                    const styledTextChildCount = el.children.length;
+                    const isStyledTextFlexRow = (styledTextDisplay === 'flex' || styledTextDisplay === 'inline-flex') &&
+                        (styledTextFlexDir === 'row' || styledTextFlexDir === 'row-reverse') &&
+                        styledTextChildCount > 1;
+                    const isStyledTextFlexCol = (styledTextDisplay === 'flex' || styledTextDisplay === 'inline-flex') &&
+                        (styledTextFlexDir === 'column' || styledTextFlexDir === 'column-reverse') &&
+                        styledTextChildCount > 1;
+                    const isStyledTextGrid = styledTextDisplay === 'grid' || styledTextDisplay === 'inline-grid';
+                    const shouldMergeStyledText = !isStyledTextFlexRow && !isStyledTextFlexCol && !isStyledTextGrid;
+                    const text = shouldMergeStyledText ? getTransformedText(htmlEl, computed) : '';
                     const bgGradient = parseCssGradient(computed.backgroundImage);
                     const borderRadius = computed.borderRadius;
                     const radiusValue = parseFloat(borderRadius);
                     let rectRadius = 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) {
+                    const styledTextIsEllipse = isCircularRadius && aspectRatio > 0.5 && aspectRatio < 2.0;
+                    if (radiusValue > 0 && !styledTextIsEllipse) {
                         if (borderRadius.includes('%')) {
                             const minDim = Math.min(rect.width, rect.height);
                             rectRadius = (radiusValue / 100) * pxToInch(minDim);
@@ -2021,21 +2565,23 @@ export function parseSlideHtml(doc) {
                     const borderRight = computed.borderRightWidth;
                     const borderBottom = computed.borderBottomWidth;
                     const borderLeft = computed.borderLeftWidth;
+                    const borders = [parseFloat(borderTop) || 0, parseFloat(borderRight) || 0, parseFloat(borderBottom) || 0, parseFloat(borderLeft) || 0];
                     const hasUniformBorder = hasBorder &&
-                        borderTop === borderRight &&
-                        borderRight === borderBottom &&
-                        borderBottom === borderLeft;
-                    // Extract effective opacity (including ancestor chain)
-                    const spanOpacity = getEffectiveOpacity(el, win);
-                    const hasSpanOpacity = spanOpacity < 1;
+                        borders.every((b) => b === borders[0]);
+                    // Extract effective opacity
+                    const styledTextOpacity = getEffectiveOpacity(el, win);
+                    const hasStyledTextOpacity = styledTextOpacity < 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 styledTextShadow = parseBoxShadow(computed.boxShadow);
+                    // Determine text alignment from computed style
+                    const computedAlign = computed.textAlign;
+                    let textAlign = 'left';
+                    if (computedAlign === 'center')
+                        textAlign = 'center';
+                    else if (computedAlign === 'right')
+                        textAlign = 'right';
+                    else if (computedAlign === 'justify')
+                        textAlign = 'justify';
                     const shapeElement = {
                         type: 'shape',
                         position: {
@@ -2051,9 +2597,10 @@ export function parseSlideHtml(doc) {
                             fontFace: extractFontFace(computed.fontFamily),
                             color: rgbToHex(computed.color),
                             bold: parseInt(computed.fontWeight) >= 600,
-                            align: 'center',
+                            align: textAlign,
                             valign: 'middle',
-                            wrap: !spanShouldNotWrap,
+                            wrap: true,
+                            ...(extractAlpha(computed.color) !== null ? { transparency: extractAlpha(computed.color) } : {}),
                         } : null,
                         shape: {
                             fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
@@ -2067,60 +2614,1101 @@ export function parseSlideHtml(doc) {
                                     dashType: extractDashType(computed.borderStyle),
                                 }
                                 : null,
-                            rectRadius: spanIsEllipse ? 0 : rectRadius,
-                            shadow: spanShadow,
-                            opacity: hasSpanOpacity ? spanOpacity : null,
-                            isEllipse: spanIsEllipse,
+                            rectRadius: styledTextIsEllipse ? 0 : rectRadius,
+                            shadow: styledTextShadow,
+                            opacity: hasStyledTextOpacity ? styledTextOpacity : null,
+                            isEllipse: styledTextIsEllipse,
                             softEdge: null,
                             rotate: null,
+                            cssTriangle: null,
                             customGeometry: null,
                         },
+                        zIndex: extractZIndex(computed),
                     };
                     elements.push(shapeElement);
-                    processed.add(el);
-                    return;
-                }
-            }
-            // Handle plain SPANs that are direct children of DIV elements
-            const parent = el.parentElement;
-            if (parent && parent.tagName === 'DIV') {
-                const rect = htmlEl.getBoundingClientRect();
-                const computed2 = win.getComputedStyle(el);
-                const text = getTransformedText(htmlEl, computed2);
-                if (rect.width > 0 && rect.height > 0 && text) {
-                    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
+                    // Handle accent borders (border-left/border-right) that are thicker than the base
+                    // or have a different color than the main shape line
+                    if (hasBorder && !hasUniformBorder) {
+                        // Find the minimum border width among top/right/bottom (excluding left for comparison)
+                        const topRightBottomBorders = [borders[0], borders[1], borders[2]].filter(b => b > 0);
+                        const minTopRightBottom = topRightBottomBorders.length > 0 ? Math.min(...topRightBottomBorders) : 0;
+                        // Find the minimum border width among top/left/bottom (excluding right for comparison)
+                        const topLeftBottomBorders = [borders[0], borders[3], borders[2]].filter(b => b > 0);
+                        const minTopLeftBottom = topLeftBottomBorders.length > 0 ? Math.min(...topLeftBottomBorders) : 0;
+                        const borderLeftW = borders[3];
+                        const borderRightW = borders[1];
+                        // Get colors for comparison
+                        const borderLeftHex = rgbToHex(computed.borderLeftColor);
+                        const borderRightHex = rgbToHex(computed.borderRightColor);
+                        const borderTopHex = rgbToHex(computed.borderTopColor);
+                        // Get alpha values - border-left might have higher opacity than semi-transparent top/bottom
+                        const borderLeftAlpha = extractAlpha(computed.borderLeftColor);
+                        const borderTopAlpha = extractAlpha(computed.borderTopColor);
+                        const borderRightAlpha = extractAlpha(computed.borderRightColor);
+                        // Border-left accent: create a filled shape when:
+                        // 1. border-left is thicker than the minimum of other borders, OR
+                        // 2. border-left is the only border on this element, OR
+                        // 3. border-left has a different RGB color than the base shape line (top border), OR
+                        // 4. border-left is more opaque than the base shape line (even if same RGB)
+                        const borderLeftHasDifferentColor = borderTopHex !== borderLeftHex;
+                        const borderLeftIsMoreOpaque = (borderLeftAlpha ?? 0) < (borderTopAlpha ?? 0); // lower value = more opaque
+                        if (borderLeftW > 0 && !isFullyTransparent(computed.borderLeftColor) &&
+                            (borderLeftW > minTopRightBottom || minTopRightBottom === 0 || borderLeftHasDifferentColor || borderLeftIsMoreOpaque)) {
+                            // If there's a border-radius, use custom geometry to curve the outer (left) edge
+                            if (radiusValue > 0) {
+                                // Generate custom geometry for thin vertical bar on LEFT
+                                const w = borderLeftW;
+                                const h = rect.height;
+                                const r = radiusValue;
+                                const EMU_PER_PX = 914400 / 96;
+                                // arcYAtX: at x distance from the left edge, how far is the arc from the top/bottom?
+                                const arcYAtX = (radius, x) => {
+                                    if (x <= 0)
+                                        return radius;
+                                    if (x >= radius)
+                                        return 0;
+                                    const dx = radius - x;
+                                    return radius - Math.sqrt(radius * radius - dx * dx);
+                                };
+                                // Generate intermediate points along the arc
+                                const segments = 8;
+                                const arcPointsTop = [];
+                                const arcPointsBottom = [];
+                                for (let i = 0; i <= segments; i++) {
+                                    const t = i / segments;
+                                    const x = t * w;
+                                    const arcDistance = arcYAtX(r, x);
+                                    arcPointsTop.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round(arcDistance * EMU_PER_PX)
+                                    });
+                                    arcPointsBottom.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round((h - arcDistance) * EMU_PER_PX)
+                                    });
+                                }
+                                // Build path
+                                const points = [];
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                                for (let i = 1; i <= segments; i++) {
+                                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                                }
+                                points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                                for (let i = segments - 1; i >= 0; i--) {
+                                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                                }
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                                const borderLeftShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderLeftW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderLeftColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderLeftColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: points,
+                                    },
+                                };
+                                elements.push(borderLeftShape);
+                            }
+                            else {
+                                // No border-radius - use simple rectangle
+                                const borderLeftShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderLeftW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderLeftColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderLeftColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: null,
+                                    },
+                                };
+                                elements.push(borderLeftShape);
+                            }
                         }
-                    }
-                    const textElement = {
-                        type: 'p',
-                        text: [{ text: text, options: spanFontFill ? { fontFill: spanFontFill } : {} }],
-                        position: {
-                            x: pxToInch(rect.left),
-                            y: pxToInch(rect.top),
-                            w: pxToInch(rect.width),
-                            h: pxToInch(rect.height),
-                        },
-                        style: {
+                        // Border-right accent: create a filled shape when:
+                        // 1. border-right is thicker than the minimum of other borders, OR
+                        // 2. border-right is the only border on this element, OR
+                        // 3. border-right has a different color than the base shape line (top border)
+                        const borderRightHasDifferentColor = borderTopHex !== borderRightHex;
+                        const borderRightIsMoreOpaque = (borderRightAlpha ?? 0) < (borderTopAlpha ?? 0); // lower value = more opaque
+                        if (borderRightW > 0 && !isFullyTransparent(computed.borderRightColor) &&
+                            (borderRightW > minTopLeftBottom || minTopLeftBottom === 0 || borderRightHasDifferentColor || borderRightIsMoreOpaque)) {
+                            // If there's a border-radius, use custom geometry to curve the outer (right) edge
+                            if (radiusValue > 0) {
+                                const w = borderRightW;
+                                const h = rect.height;
+                                const r = radiusValue;
+                                const EMU_PER_PX = 914400 / 96;
+                                const arcYAtX = (radius, x) => {
+                                    if (x <= 0)
+                                        return radius;
+                                    if (x >= radius)
+                                        return 0;
+                                    const dx = radius - x;
+                                    return radius - Math.sqrt(radius * radius - dx * dx);
+                                };
+                                const segments = 8;
+                                const arcPointsTop = [];
+                                const arcPointsBottom = [];
+                                for (let i = 0; i <= segments; i++) {
+                                    const t = i / segments;
+                                    const x = t * w;
+                                    const arcDistance = arcYAtX(r, w - x);
+                                    arcPointsTop.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round(arcDistance * EMU_PER_PX)
+                                    });
+                                    arcPointsBottom.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round((h - arcDistance) * EMU_PER_PX)
+                                    });
+                                }
+                                const points = [];
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                                for (let i = 1; i <= segments; i++) {
+                                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                                }
+                                points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                                for (let i = segments - 1; i >= 0; i--) {
+                                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                                }
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                                const borderRightShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left + rect.width - borderRightW),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderRightW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderRightColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderRightColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: points,
+                                    },
+                                };
+                                elements.push(borderRightShape);
+                            }
+                            else {
+                                const borderRightShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left + rect.width - borderRightW),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderRightW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderRightColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderRightColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: null,
+                                    },
+                                };
+                                elements.push(borderRightShape);
+                            }
+                        }
+                    }
+                    // Find the minimum border width among left/right/bottom (excluding top for comparison)
+                    const leftRightBottomBorders = [borders[3], borders[1], borders[2]].filter(b => b > 0);
+                    const minLeftRightBottom = leftRightBottomBorders.length > 0 ? Math.min(...leftRightBottomBorders) : 0;
+                    // Find the minimum border width among left/right/top (excluding bottom for comparison)
+                    const leftRightTopBorders = [borders[3], borders[1], borders[0]].filter(b => b > 0);
+                    const minLeftRightTop = leftRightTopBorders.length > 0 ? Math.min(...leftRightTopBorders) : 0;
+                    // Border-top accent: create a filled rectangle when border-top is thicker than others
+                    // or when border-top is the only border on this element
+                    const borderTopW = borders[0];
+                    if (borderTopW > 0 && !isFullyTransparent(computed.borderTopColor) &&
+                        (borderTopW > minLeftRightBottom || minLeftRightBottom === 0)) {
+                        if (radiusValue > 0) {
+                            // Generate custom geometry for thin horizontal bar on TOP
+                            const w = rect.width;
+                            const h = borderTopW;
+                            const r = radiusValue;
+                            const EMU_PER_PX = 914400 / 96;
+                            const arcXAtY = (radius, y) => {
+                                if (y <= 0)
+                                    return radius;
+                                if (y >= radius)
+                                    return 0;
+                                const dy = radius - y;
+                                return radius - Math.sqrt(radius * radius - dy * dy);
+                            };
+                            const segments = 8;
+                            const arcPointsLeft = [];
+                            const arcPointsRight = [];
+                            for (let i = 0; i <= segments; i++) {
+                                const t = i / segments;
+                                const y = t * h;
+                                const arcDistance = arcXAtY(r, y);
+                                arcPointsLeft.push({
+                                    x: Math.round(arcDistance * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                                arcPointsRight.push({
+                                    x: Math.round((w - arcDistance) * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                            }
+                            const points = [];
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                            for (let i = 1; i <= segments; i++) {
+                                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                            }
+                            points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                            for (let i = segments - 1; i >= 0; i--) {
+                                points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                            }
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                            const borderTopShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderTopW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderTopColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderTopColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: points,
+                                },
+                            };
+                            elements.push(borderTopShape);
+                        }
+                        else {
+                            const borderTopShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderTopW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderTopColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderTopColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: null,
+                                },
+                            };
+                            elements.push(borderTopShape);
+                        }
+                    }
+                    // Border-bottom accent: create a filled rectangle when border-bottom is thicker than others
+                    // or when border-bottom is the only border on this element
+                    const borderBottomW = borders[2];
+                    if (borderBottomW > 0 && !isFullyTransparent(computed.borderBottomColor) &&
+                        (borderBottomW > minLeftRightTop || minLeftRightTop === 0)) {
+                        if (radiusValue > 0) {
+                            // Generate custom geometry for thin horizontal bar on BOTTOM
+                            const w = rect.width;
+                            const h = borderBottomW;
+                            const r = radiusValue;
+                            const EMU_PER_PX = 914400 / 96;
+                            const arcXAtY = (radius, y) => {
+                                if (y <= 0)
+                                    return radius;
+                                if (y >= radius)
+                                    return 0;
+                                const dy = radius - y;
+                                return radius - Math.sqrt(radius * radius - dy * dy);
+                            };
+                            const segments = 8;
+                            const arcPointsLeft = [];
+                            const arcPointsRight = [];
+                            for (let i = 0; i <= segments; i++) {
+                                const t = i / segments;
+                                const y = t * h;
+                                const arcDistance = arcXAtY(r, h - y);
+                                arcPointsLeft.push({
+                                    x: Math.round(arcDistance * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                                arcPointsRight.push({
+                                    x: Math.round((w - arcDistance) * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                            }
+                            const points = [];
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                            for (let i = 1; i <= segments; i++) {
+                                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                            }
+                            points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                            for (let i = segments - 1; i >= 0; i--) {
+                                points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                            }
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                            const borderBottomShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top + rect.height - borderBottomW),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderBottomW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderBottomColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderBottomColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: points,
+                                },
+                            };
+                            elements.push(borderBottomShape);
+                        }
+                        else {
+                            const borderBottomShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top + rect.height - borderBottomW),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderBottomW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderBottomColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderBottomColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: null,
+                                },
+                            };
+                            elements.push(borderBottomShape);
+                        }
+                    }
+                }
+                processed.add(el);
+                return;
+            }
+        }
+        // Handle SPAN, A, and CODE elements with backgrounds/borders as shapes
+        // <a> tags styled as buttons (e.g. CTA buttons with gradient backgrounds,
+        // border-radius, box-shadow) need the same shape treatment as SPANs.
+        // <code> tags with styled backgrounds (e.g., inline code snippets) also need this.
+        //
+        // IMPORTANT: Skip if parent is a text element (P, H1-H6, etc.) - in that case,
+        // the styled inline element should remain part of the text flow, not be extracted
+        // as a separate absolutely-positioned shape (which would cause text duplication).
+        if (el.tagName === 'SPAN' || el.tagName === 'A' || el.tagName === 'CODE') {
+            // Check if this is an empty decorative element (like a bullet dot)
+            // Empty SPANs with background color should be extracted as shapes even if
+            // they're inside text parent elements (e.g., LI items with custom bullet styling)
+            const spanText = el.textContent?.trim() || '';
+            const isEmptyDecorative = spanText.length === 0;
+            // Check if parent is a text element - if so, don't extract as separate shape
+            // UNLESS it's an empty decorative element with styling (like a bullet dot)
+            const parentTag = el.parentElement?.tagName;
+            const textParentTags = new Set(['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'TD', 'TH', 'FIGCAPTION', 'BLOCKQUOTE', 'LABEL']);
+            if (parentTag && textParentTags.has(parentTag) && !isEmptyDecorative) {
+                // This is an inline element with text within a text paragraph - don't extract as shape
+                // The text will be included in the parent's text runs via parseInlineFormatting
+                processed.add(el);
+                return;
+            }
+            const computed = win.getComputedStyle(el);
+            const hasBg = computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+            const hasBorder = (computed.borderWidth && parseFloat(computed.borderWidth) > 0) ||
+                (computed.borderTopWidth && parseFloat(computed.borderTopWidth) > 0) ||
+                (computed.borderRightWidth && parseFloat(computed.borderRightWidth) > 0) ||
+                (computed.borderBottomWidth && parseFloat(computed.borderBottomWidth) > 0) ||
+                (computed.borderLeftWidth && parseFloat(computed.borderLeftWidth) > 0);
+            // 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'));
+            // 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 = getTransformedText(htmlEl, computed);
+                    const bgGradient = parseCssGradient(computed.backgroundImage);
+                    const borderRadius = computed.borderRadius;
+                    const radiusValue = parseFloat(borderRadius);
+                    let rectRadius = 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);
+                        }
+                        else {
+                            rectRadius = pxToInch(radiusValue);
+                        }
+                    }
+                    const borderTop = computed.borderTopWidth;
+                    const borderRight = computed.borderRightWidth;
+                    const borderBottom = computed.borderBottomWidth;
+                    const borderLeft = computed.borderLeftWidth;
+                    const borders = [parseFloat(borderTop) || 0, parseFloat(borderRight) || 0, parseFloat(borderBottom) || 0, parseFloat(borderLeft) || 0];
+                    const hasUniformBorder = hasBorder &&
+                        borders.every((b) => b === borders[0]);
+                    // Extract effective opacity (including ancestor chain)
+                    const spanOpacity = getEffectiveOpacity(el, win);
+                    const hasSpanOpacity = 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: {
+                            x: pxToInch(rect.left),
+                            y: pxToInch(rect.top),
+                            w: pxToInch(rect.width),
+                            h: pxToInch(rect.height),
+                        },
+                        text: text,
+                        textRuns: null,
+                        style: text ? {
+                            fontSize: pxToPoints(computed.fontSize),
+                            fontFace: extractFontFace(computed.fontFamily),
+                            color: rgbToHex(computed.color),
+                            bold: parseInt(computed.fontWeight) >= 600,
+                            align: 'center',
+                            valign: 'middle',
+                            wrap: !spanShouldNotWrap,
+                            ...(extractAlpha(computed.color) !== null ? { transparency: extractAlpha(computed.color) } : {}),
+                        } : null,
+                        shape: {
+                            fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
+                            gradient: bgGradient,
+                            transparency: hasBg ? extractAlpha(computed.backgroundColor) : null,
+                            line: hasUniformBorder
+                                ? {
+                                    color: rgbToHex(computed.borderColor),
+                                    width: pxToPoints(borderTop),
+                                    transparency: extractAlpha(computed.borderColor),
+                                    dashType: extractDashType(computed.borderStyle),
+                                }
+                                : null,
+                            rectRadius: spanIsEllipse ? 0 : rectRadius,
+                            shadow: spanShadow,
+                            opacity: hasSpanOpacity ? spanOpacity : null,
+                            isEllipse: spanIsEllipse,
+                            softEdge: null,
+                            rotate: null,
+                            cssTriangle: null,
+                            customGeometry: null,
+                        },
+                        zIndex: extractZIndex(computed),
+                    };
+                    elements.push(shapeElement);
+                    // Handle accent borders (border-left/border-right) that are thicker than the base
+                    // or have a different color than the main shape line
+                    if (hasBorder && !hasUniformBorder) {
+                        // Find the minimum border width among top/right/bottom (excluding left for comparison)
+                        const topRightBottomBorders = [borders[0], borders[1], borders[2]].filter(b => b > 0);
+                        const minTopRightBottom = topRightBottomBorders.length > 0 ? Math.min(...topRightBottomBorders) : 0;
+                        // Find the minimum border width among top/left/bottom (excluding right for comparison)
+                        const topLeftBottomBorders = [borders[0], borders[3], borders[2]].filter(b => b > 0);
+                        const minTopLeftBottom = topLeftBottomBorders.length > 0 ? Math.min(...topLeftBottomBorders) : 0;
+                        const borderLeftW = borders[3];
+                        const borderRightW = borders[1];
+                        // Get colors for comparison
+                        const borderLeftHex = rgbToHex(computed.borderLeftColor);
+                        const borderRightHex = rgbToHex(computed.borderRightColor);
+                        const borderTopHex = rgbToHex(computed.borderTopColor);
+                        // Get alpha values - border-left might have higher opacity than semi-transparent top/bottom
+                        const borderLeftAlpha = extractAlpha(computed.borderLeftColor);
+                        const borderTopAlpha = extractAlpha(computed.borderTopColor);
+                        const borderRightAlpha = extractAlpha(computed.borderRightColor);
+                        // Border-left accent: create a filled shape when:
+                        // 1. border-left is thicker than the minimum of other borders, OR
+                        // 2. border-left is the only border on this element, OR
+                        // 3. border-left has a different RGB color than the base shape line (top border), OR
+                        // 4. border-left is more opaque than the base shape line (even if same RGB)
+                        const borderLeftHasDifferentColor = borderTopHex !== borderLeftHex;
+                        const borderLeftIsMoreOpaque = (borderLeftAlpha ?? 0) < (borderTopAlpha ?? 0); // lower value = more opaque
+                        if (borderLeftW > 0 && !isFullyTransparent(computed.borderLeftColor) &&
+                            (borderLeftW > minTopRightBottom || minTopRightBottom === 0 || borderLeftHasDifferentColor || borderLeftIsMoreOpaque)) {
+                            // If there's a border-radius, use custom geometry to curve the outer (left) edge
+                            if (radiusValue > 0) {
+                                // Generate custom geometry for thin vertical bar on LEFT
+                                const w = borderLeftW;
+                                const h = rect.height;
+                                const r = radiusValue;
+                                const EMU_PER_PX = 914400 / 96;
+                                // arcYAtX: at x distance from the left edge, how far is the arc from the top/bottom?
+                                const arcYAtX = (radius, x) => {
+                                    if (x <= 0)
+                                        return radius;
+                                    if (x >= radius)
+                                        return 0;
+                                    const dx = radius - x;
+                                    return radius - Math.sqrt(radius * radius - dx * dx);
+                                };
+                                // Generate intermediate points along the arc
+                                const segments = 8;
+                                const arcPointsTop = [];
+                                const arcPointsBottom = [];
+                                for (let i = 0; i <= segments; i++) {
+                                    const t = i / segments;
+                                    const x = t * w;
+                                    const arcDistance = arcYAtX(r, x);
+                                    arcPointsTop.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round(arcDistance * EMU_PER_PX)
+                                    });
+                                    arcPointsBottom.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round((h - arcDistance) * EMU_PER_PX)
+                                    });
+                                }
+                                // Build path
+                                const points = [];
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                                for (let i = 1; i <= segments; i++) {
+                                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                                }
+                                points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                                for (let i = segments - 1; i >= 0; i--) {
+                                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                                }
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                                const borderLeftShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderLeftW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderLeftColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderLeftColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: points,
+                                    },
+                                };
+                                elements.push(borderLeftShape);
+                            }
+                            else {
+                                // No border-radius - use simple rectangle
+                                const borderLeftShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderLeftW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderLeftColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderLeftColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: null,
+                                    },
+                                };
+                                elements.push(borderLeftShape);
+                            }
+                        }
+                        // Border-right accent: create a filled shape when:
+                        // 1. border-right is thicker than the minimum of other borders, OR
+                        // 2. border-right is the only border on this element, OR
+                        // 3. border-right has a different color than the base shape line (top border)
+                        const borderRightHasDifferentColor = borderTopHex !== borderRightHex;
+                        const borderRightIsMoreOpaque = (borderRightAlpha ?? 0) < (borderTopAlpha ?? 0); // lower value = more opaque
+                        if (borderRightW > 0 && !isFullyTransparent(computed.borderRightColor) &&
+                            (borderRightW > minTopLeftBottom || minTopLeftBottom === 0 || borderRightHasDifferentColor || borderRightIsMoreOpaque)) {
+                            // If there's a border-radius, use custom geometry to curve the outer (right) edge
+                            if (radiusValue > 0) {
+                                const w = borderRightW;
+                                const h = rect.height;
+                                const r = radiusValue;
+                                const EMU_PER_PX = 914400 / 96;
+                                const arcYAtX = (radius, x) => {
+                                    if (x <= 0)
+                                        return radius;
+                                    if (x >= radius)
+                                        return 0;
+                                    const dx = radius - x;
+                                    return radius - Math.sqrt(radius * radius - dx * dx);
+                                };
+                                const segments = 8;
+                                const arcPointsTop = [];
+                                const arcPointsBottom = [];
+                                for (let i = 0; i <= segments; i++) {
+                                    const t = i / segments;
+                                    const x = t * w;
+                                    const arcDistance = arcYAtX(r, w - x);
+                                    arcPointsTop.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round(arcDistance * EMU_PER_PX)
+                                    });
+                                    arcPointsBottom.push({
+                                        x: Math.round(x * EMU_PER_PX),
+                                        y: Math.round((h - arcDistance) * EMU_PER_PX)
+                                    });
+                                }
+                                const points = [];
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                                for (let i = 1; i <= segments; i++) {
+                                    points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                                }
+                                points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                                for (let i = segments - 1; i >= 0; i--) {
+                                    points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                                }
+                                points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                                const borderRightShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left + rect.width - borderRightW),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderRightW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderRightColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderRightColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: points,
+                                    },
+                                };
+                                elements.push(borderRightShape);
+                            }
+                            else {
+                                const borderRightShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: {
+                                        x: pxToInch(rect.left + rect.width - borderRightW),
+                                        y: pxToInch(rect.top),
+                                        w: pxToInch(borderRightW),
+                                        h: pxToInch(rect.height),
+                                    },
+                                    shape: {
+                                        fill: rgbToHex(computed.borderRightColor),
+                                        gradient: null,
+                                        transparency: extractAlpha(computed.borderRightColor),
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: null,
+                                    },
+                                };
+                                elements.push(borderRightShape);
+                            }
+                        }
+                    }
+                    // Find the minimum border width among left/right/bottom (excluding top for comparison)
+                    const leftRightBottomBorders = [borders[3], borders[1], borders[2]].filter(b => b > 0);
+                    const minLeftRightBottom = leftRightBottomBorders.length > 0 ? Math.min(...leftRightBottomBorders) : 0;
+                    // Find the minimum border width among left/right/top (excluding bottom for comparison)
+                    const leftRightTopBorders = [borders[3], borders[1], borders[0]].filter(b => b > 0);
+                    const minLeftRightTop = leftRightTopBorders.length > 0 ? Math.min(...leftRightTopBorders) : 0;
+                    // Border-top accent: create a filled rectangle when border-top is thicker than others
+                    // or when border-top is the only border on this element
+                    const borderTopW = borders[0];
+                    if (borderTopW > 0 && !isFullyTransparent(computed.borderTopColor) &&
+                        (borderTopW > minLeftRightBottom || minLeftRightBottom === 0)) {
+                        if (radiusValue > 0) {
+                            // Generate custom geometry for thin horizontal bar on TOP
+                            const w = rect.width;
+                            const h = borderTopW;
+                            const r = radiusValue;
+                            const EMU_PER_PX = 914400 / 96;
+                            const arcXAtY = (radius, y) => {
+                                if (y <= 0)
+                                    return radius;
+                                if (y >= radius)
+                                    return 0;
+                                const dy = radius - y;
+                                return radius - Math.sqrt(radius * radius - dy * dy);
+                            };
+                            const segments = 8;
+                            const arcPointsLeft = [];
+                            const arcPointsRight = [];
+                            for (let i = 0; i <= segments; i++) {
+                                const t = i / segments;
+                                const y = t * h;
+                                const arcDistance = arcXAtY(r, y);
+                                arcPointsLeft.push({
+                                    x: Math.round(arcDistance * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                                arcPointsRight.push({
+                                    x: Math.round((w - arcDistance) * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                            }
+                            const points = [];
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                            for (let i = 1; i <= segments; i++) {
+                                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                            }
+                            points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                            for (let i = segments - 1; i >= 0; i--) {
+                                points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                            }
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                            const borderTopShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderTopW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderTopColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderTopColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: points,
+                                },
+                            };
+                            elements.push(borderTopShape);
+                        }
+                        else {
+                            const borderTopShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderTopW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderTopColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderTopColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: null,
+                                },
+                            };
+                            elements.push(borderTopShape);
+                        }
+                    }
+                    // Border-bottom accent: create a filled rectangle when border-bottom is thicker than others
+                    // or when border-bottom is the only border on this element
+                    const borderBottomW = borders[2];
+                    if (borderBottomW > 0 && !isFullyTransparent(computed.borderBottomColor) &&
+                        (borderBottomW > minLeftRightTop || minLeftRightTop === 0)) {
+                        if (radiusValue > 0) {
+                            // Generate custom geometry for thin horizontal bar on BOTTOM
+                            const w = rect.width;
+                            const h = borderBottomW;
+                            const r = radiusValue;
+                            const EMU_PER_PX = 914400 / 96;
+                            const arcXAtY = (radius, y) => {
+                                if (y <= 0)
+                                    return radius;
+                                if (y >= radius)
+                                    return 0;
+                                const dy = radius - y;
+                                return radius - Math.sqrt(radius * radius - dy * dy);
+                            };
+                            const segments = 8;
+                            const arcPointsLeft = [];
+                            const arcPointsRight = [];
+                            for (let i = 0; i <= segments; i++) {
+                                const t = i / segments;
+                                const y = t * h;
+                                const arcDistance = arcXAtY(r, h - y);
+                                arcPointsLeft.push({
+                                    x: Math.round(arcDistance * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                                arcPointsRight.push({
+                                    x: Math.round((w - arcDistance) * EMU_PER_PX),
+                                    y: Math.round(y * EMU_PER_PX)
+                                });
+                            }
+                            const points = [];
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                            for (let i = 1; i <= segments; i++) {
+                                points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                            }
+                            points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                            for (let i = segments - 1; i >= 0; i--) {
+                                points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                            }
+                            points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                            const borderBottomShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top + rect.height - borderBottomW),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderBottomW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderBottomColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderBottomColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: points,
+                                },
+                            };
+                            elements.push(borderBottomShape);
+                        }
+                        else {
+                            const borderBottomShape = {
+                                type: 'shape',
+                                text: '',
+                                textRuns: null,
+                                style: null,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top + rect.height - borderBottomW),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(borderBottomW),
+                                },
+                                shape: {
+                                    fill: rgbToHex(computed.borderBottomColor),
+                                    gradient: null,
+                                    transparency: extractAlpha(computed.borderBottomColor),
+                                    line: null,
+                                    rectRadius: 0,
+                                    shadow: null,
+                                    opacity: null,
+                                    isEllipse: false,
+                                    softEdge: null,
+                                    rotate: null,
+                                    cssTriangle: null,
+                                    customGeometry: null,
+                                },
+                            };
+                            elements.push(borderBottomShape);
+                        }
+                    }
+                }
+                processed.add(el);
+                return;
+            }
+            // Handle plain SPANs that are direct children of DIV elements
+            const parent = el.parentElement;
+            if (parent && parent.tagName === 'DIV') {
+                const rect = htmlEl.getBoundingClientRect();
+                const computed2 = win.getComputedStyle(el);
+                const text = getTransformedText(htmlEl, computed2);
+                if (rect.width > 0 && rect.height > 0 && text) {
+                    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: spanFontFill ? { fontFill: spanFontFill } : {} }],
+                        position: {
+                            x: pxToInch(rect.left),
+                            y: pxToInch(rect.top),
+                            w: pxToInch(rect.width),
+                            h: pxToInch(rect.height),
+                        },
+                        style: {
                             fontSize: pxToPoints(computed2.fontSize),
                             fontFace: extractFontFace(computed2.fontFamily),
                             color: spanTextColor,
@@ -2134,6 +3722,7 @@ export function parseSlideHtml(doc) {
                             valign: 'middle',
                             lineSpacing: lineHeightMultiplier * pxToPoints(computed2.fontSize),
                             fontFill: spanFontFill,
+                            ...(extractAlpha(computed2.color) !== null ? { transparency: extractAlpha(computed2.color) } : {}),
                         },
                     };
                     elements.push(textElement);
@@ -2385,12 +3974,23 @@ export function parseSlideHtml(doc) {
                 if (!svgClone.hasAttribute('xmlns')) {
                     svgClone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
                 }
-                // ALWAYS set width/height to the rendered dimensions.
+                // Set width/height for the SVG data URI used by PptxGenJS to create PNG fallback.
                 // 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));
+                //
+                // IMPORTANT: For small SVGs (< 64px), we scale up the SVG dimensions in the
+                // data URI to ensure the PNG fallback has sufficient resolution. LibreOffice
+                // uses the PNG fallback instead of the SVG, and tiny PNGs (e.g., 14x14)
+                // become invisible or extremely blurry when rendered. By setting a minimum
+                // size of 64px while preserving the viewBox, the PNG fallback will have
+                // good quality. The actual PPTX display size is controlled by
+                // ImageElement.position.w/h which uses the original rect dimensions.
+                const MIN_SVG_RENDER_SIZE = 128;
+                const svgRenderWidth = Math.max(rect.width, MIN_SVG_RENDER_SIZE);
+                const svgRenderHeight = Math.max(rect.height, MIN_SVG_RENDER_SIZE);
+                svgClone.setAttribute('width', String(svgRenderWidth));
+                svgClone.setAttribute('height', String(svgRenderHeight));
                 // 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
@@ -2481,15 +4081,18 @@ export function parseSlideHtml(doc) {
                 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.
+                // NOTE: getBoundingClientRect() already returns the correct position for block-level
+                // elements with margin: auto centering - the browser computes the actual pixel values.
+                // Only apply vertical-align adjustment for INLINE SVGs where vertical-align affects positioning.
+                const svgX = rect.left;
                 let svgY = rect.top;
                 const computedAlign = win.getComputedStyle(htmlEl);
                 const verticalAlign = computedAlign.verticalAlign;
+                const svgDisplay = computedAlign.display;
                 // 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) {
+                // Also skip if SVG has display: block - vertical-align only affects inline elements
+                if (verticalAlign === 'middle' && svgDisplay !== 'block' && el.parentElement) {
                     const parentComputed = win.getComputedStyle(el.parentElement);
                     const parentIsFlex = parentComputed.display === 'flex' || parentComputed.display === 'inline-flex';
                     if (!parentIsFlex) {
@@ -2504,14 +4107,33 @@ export function parseSlideHtml(doc) {
                 // PPTX doesn't have opacity containers, so the visual opacity must be
                 // applied directly to each element.
                 const svgEffectiveOpacity = getEffectiveOpacity(el, win);
+                let displayW = pxToInch(rect.width);
+                let displayH = pxToInch(rect.height);
+                let displayX = pxToInch(svgX);
+                let displayY = pxToInch(svgY);
+                // Scale up very small SVGs to a minimum display size.
+                // LibreOffice doesn't render images smaller than ~13-14px clearly.
+                // Only scale if BOTH dimensions are below threshold (truly tiny icons).
+                // Use 0.145" (~14px) as threshold to catch 13px icons but not 15px ones.
+                const MIN_SVG_DISPLAY_SIZE_IN = 0.145;
+                if (displayW < MIN_SVG_DISPLAY_SIZE_IN && displayH < MIN_SVG_DISPLAY_SIZE_IN) {
+                    const originalCenterX = displayX + displayW / 2;
+                    const originalCenterY = displayY + displayH / 2;
+                    const scaleFactor = Math.max(MIN_SVG_DISPLAY_SIZE_IN / displayW, MIN_SVG_DISPLAY_SIZE_IN / displayH);
+                    displayW = displayW * scaleFactor;
+                    displayH = displayH * scaleFactor;
+                    // Re-center at the original center point
+                    displayX = originalCenterX - displayW / 2;
+                    displayY = originalCenterY - displayH / 2;
+                }
                 const imageElement = {
                     type: 'image',
                     src: dataUri,
                     position: {
-                        x: pxToInch(rect.left),
-                        y: pxToInch(svgY),
-                        w: pxToInch(rect.width),
-                        h: pxToInch(rect.height),
+                        x: displayX,
+                        y: displayY,
+                        w: displayW,
+                        h: displayH,
                     },
                     sizing: null,
                     transparency: svgEffectiveOpacity < 1 ? Math.round((1 - svgEffectiveOpacity) * 100) : undefined,
@@ -2618,8 +4240,11 @@ export function parseSlideHtml(doc) {
             processed.add(el);
             return;
         }
-        // Extract DIVs with backgrounds/borders as shapes
-        const isContainer = el.tagName === 'DIV' && !textTags.includes(el.tagName);
+        // Extract DIVs and TABLE-related elements with backgrounds/borders as shapes
+        // TABLE, TR, TD, TH, TBODY, THEAD, TFOOT, CENTER elements need the same shape treatment
+        // as DIVs to properly render HTML pages using TABLE-based layouts (like Hacker News).
+        const containerTags = new Set(['DIV', 'TABLE', 'TR', 'TD', 'TH', 'TBODY', 'THEAD', 'TFOOT', 'CENTER']);
+        const isContainer = containerTags.has(el.tagName) && !textTags.includes(el.tagName);
         if (isContainer) {
             const computed = win.getComputedStyle(el);
             // === LARGE BLUR ELEMENTS: render as image ===
@@ -2673,160 +4298,676 @@ export function parseSlideHtml(doc) {
                             src: conicDataUri,
                             position: {
                                 x: pxToInch(rect.left),
-                                y: pxToInch(rect.top),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(rect.height),
+                            },
+                            sizing: null,
+                            rectRadius: 0,
+                        };
+                        elements.push(imgElement);
+                        hasConicGradientImage = true;
+                        // Don't mark as fully processed — children (text, pseudo-elements) still need extraction
+                        // Just skip the shape creation for this element's background
+                    }
+                }
+            }
+            // === CSS TRIANGLE DETECTION ===
+            // Detect CSS triangle technique: width:0; height:0 with border-based coloring.
+            // Pattern: two transparent borders (left+right) and one colored border (top or bottom)
+            // creates a triangle pointing in the direction of the colored border.
+            // Use clientWidth/clientHeight which give content box size (excluding borders).
+            // For CSS triangles, the content box is 0x0 but borders create the visual shape.
+            const contentWidth = htmlEl.clientWidth;
+            const contentHeight = htmlEl.clientHeight;
+            const borderTopW = parseFloat(computed.borderTopWidth) || 0;
+            const borderRightW = parseFloat(computed.borderRightWidth) || 0;
+            const borderBottomW = parseFloat(computed.borderBottomWidth) || 0;
+            const borderLeftW = parseFloat(computed.borderLeftWidth) || 0;
+            // Check if this is a CSS triangle: zero content area with borders
+            if (contentWidth === 0 && contentHeight === 0 &&
+                (borderTopW > 0 || borderBottomW > 0 || borderLeftW > 0 || borderRightW > 0)) {
+                // A border is "effectively transparent" if its width is 0 OR its color is fully transparent
+                const isTopEffectivelyTransparent = borderTopW === 0 || isFullyTransparent(computed.borderTopColor);
+                const isBottomEffectivelyTransparent = borderBottomW === 0 || isFullyTransparent(computed.borderBottomColor);
+                const isLeftEffectivelyTransparent = borderLeftW === 0 || isFullyTransparent(computed.borderLeftColor);
+                const isRightEffectivelyTransparent = borderRightW === 0 || isFullyTransparent(computed.borderRightColor);
+                // Determine triangle direction based on which border is colored
+                let triangleDirection = null;
+                let triangleColor = '';
+                let triangleTransparency = 0;
+                let triangleWidth = 0; // horizontal extent
+                let triangleHeight = 0; // vertical extent
+                // Triangle pointing UP: border-bottom is colored, left+right transparent (or zero-width)
+                if (!isBottomEffectivelyTransparent && isLeftEffectivelyTransparent && isRightEffectivelyTransparent && isTopEffectivelyTransparent) {
+                    triangleDirection = 'up';
+                    triangleColor = rgbToHex(computed.borderBottomColor);
+                    triangleTransparency = extractAlpha(computed.borderBottomColor) ?? 0;
+                    triangleWidth = borderLeftW + borderRightW;
+                    triangleHeight = borderBottomW;
+                }
+                // Triangle pointing DOWN: border-top is colored, left+right transparent (or zero-width)
+                else if (!isTopEffectivelyTransparent && isLeftEffectivelyTransparent && isRightEffectivelyTransparent && isBottomEffectivelyTransparent) {
+                    triangleDirection = 'down';
+                    triangleColor = rgbToHex(computed.borderTopColor);
+                    triangleTransparency = extractAlpha(computed.borderTopColor) ?? 0;
+                    triangleWidth = borderLeftW + borderRightW;
+                    triangleHeight = borderTopW;
+                }
+                // Triangle pointing LEFT: border-right is colored, top+bottom transparent (or zero-width)
+                else if (!isRightEffectivelyTransparent && isTopEffectivelyTransparent && isBottomEffectivelyTransparent && isLeftEffectivelyTransparent) {
+                    triangleDirection = 'left';
+                    triangleColor = rgbToHex(computed.borderRightColor);
+                    triangleTransparency = extractAlpha(computed.borderRightColor) ?? 0;
+                    triangleWidth = borderRightW;
+                    triangleHeight = borderTopW + borderBottomW;
+                }
+                // Triangle pointing RIGHT: border-left is colored, top+bottom transparent (or zero-width)
+                else if (!isLeftEffectivelyTransparent && isTopEffectivelyTransparent && isBottomEffectivelyTransparent && isRightEffectivelyTransparent) {
+                    triangleDirection = 'right';
+                    triangleColor = rgbToHex(computed.borderLeftColor);
+                    triangleTransparency = extractAlpha(computed.borderLeftColor) ?? 0;
+                    triangleWidth = borderLeftW;
+                    triangleHeight = borderTopW + borderBottomW;
+                }
+                if (triangleDirection && triangleWidth > 0 && triangleHeight > 0) {
+                    // Get the element's bounding rect for position
+                    const triRect = htmlEl.getBoundingClientRect();
+                    // The bounding rect for a CSS triangle is the border-box
+                    const triX = pxToInch(triRect.left);
+                    const triY = pxToInch(triRect.top);
+                    const triW = pxToInch(triangleWidth);
+                    const triH = pxToInch(triangleHeight);
+                    // Extract rotation
+                    const triRotation = extractRotationAngle(computed);
+                    const triangleShape = {
+                        type: 'shape',
+                        text: '',
+                        textRuns: null,
+                        style: null,
+                        position: { x: triX, y: triY, w: triW, h: triH },
+                        shape: {
+                            fill: triangleColor,
+                            gradient: null,
+                            transparency: triangleTransparency > 0 ? triangleTransparency : null,
+                            line: null,
+                            rectRadius: 0,
+                            shadow: null,
+                            opacity: null,
+                            isEllipse: false,
+                            softEdge: null,
+                            rotate: triRotation,
+                            cssTriangle: { direction: triangleDirection },
+                            customGeometry: null,
+                        },
+                    };
+                    elements.push(triangleShape);
+                    processed.add(el);
+                    return;
+                }
+            }
+            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;
+            let bgImageSize = null;
+            let bgImagePosition = null;
+            let bgGradient = null;
+            const extraDivGradients = [];
+            if (elBgImage && elBgImage !== 'none') {
+                if (elBgImage.includes('linear-gradient') ||
+                    elBgImage.includes('radial-gradient')) {
+                    const gradParts = splitCssBackgroundGradients(elBgImage);
+                    // Detect complex repeating-pattern backgrounds (4+ gradient layers,
+                    // often combined with a small background-size for tiling). These CSS
+                    // patterns (hex grids, noise textures, etc.) cannot be faithfully
+                    // reproduced as PPTX gradients, so we rasterize them to a canvas image.
+                    const bgSize = computed.backgroundSize;
+                    const isRepeatingPattern = gradParts.length >= 4 &&
+                        bgSize &&
+                        bgSize !== 'auto' &&
+                        !bgSize.includes('100%');
+                    if (isRepeatingPattern) {
+                        // Complex repeating CSS pattern — rasterize to canvas image.
+                        // PPTX gradients cannot represent tiled multi-layer patterns like
+                        // hex grids, but the Canvas 2D API can draw them faithfully.
+                        const rect = htmlEl.getBoundingClientRect();
+                        const patternDataUri = renderRepeatingGradientPatternAsImage(elBgImage, bgSize, computed.backgroundPosition || '0px 0px', rect.width, rect.height, win.document);
+                        if (patternDataUri) {
+                            const effOp = getEffectiveOpacity(htmlEl, win);
+                            const imgElement = {
+                                type: 'image',
+                                src: patternDataUri,
+                                position: {
+                                    x: pxToInch(rect.left),
+                                    y: pxToInch(rect.top),
+                                    w: pxToInch(rect.width),
+                                    h: pxToInch(rect.height),
+                                },
+                                sizing: null,
+                                rectRadius: 0,
+                                transparency: effOp < 1 ? Math.round((1 - effOp) * 100) : undefined,
+                            };
+                            elements.push(imgElement);
+                        }
+                        bgGradient = null;
+                    }
+                    else if (gradParts.length > 0) {
+                        bgGradient = parseCssGradient(gradParts[0]);
+                        // Collect additional gradient layers as separate shapes (up to 3 extra)
+                        for (let gi = 1; gi < Math.min(gradParts.length, 4); gi++) {
+                            const g = parseCssGradient(gradParts[gi]);
+                            if (g)
+                                extraDivGradients.push(g);
+                        }
+                    }
+                }
+                else {
+                    const urlMatch = elBgImage.match(/url\(["']?([^"')]+)["']?\)/);
+                    if (urlMatch) {
+                        bgImageUrl = urlMatch[1];
+                        bgImageSize = computed.backgroundSize || 'auto';
+                        bgImagePosition = computed.backgroundPosition || '0% 0%';
+                    }
+                }
+            }
+            // Check for borders
+            const borderTop = computed.borderTopWidth;
+            const borderRight = computed.borderRightWidth;
+            const borderBottom = computed.borderBottomWidth;
+            const borderLeft = computed.borderLeftWidth;
+            const borders = [borderTop, borderRight, borderBottom, borderLeft].map((b) => parseFloat(b) || 0);
+            const hasBorder = borders.some((b) => b > 0);
+            const hasUniformBorder = hasBorder && borders.every((b) => b === borders[0]);
+            const borderShapes = [];
+            // Parse border-radius for non-uniform border handling
+            const divBorderRadius = parseFloat(computed.borderRadius) || 0;
+            // For non-uniform borders, only create accent shapes for the thicker borders (border-left/border-right).
+            // Don't add the base border to the shape's line property - the thin semi-transparent borders
+            // are often barely visible in HTML and should be skipped for better visual fidelity.
+            if (hasBorder && !hasUniformBorder) {
+                const rect = htmlEl.getBoundingClientRect();
+                // Find the minimum border width among top/right/bottom (excluding left for comparison)
+                const topRightBottomBorders = [borders[0], borders[1], borders[2]].filter(b => b > 0);
+                const minTopRightBottom = topRightBottomBorders.length > 0 ? Math.min(...topRightBottomBorders) : 0;
+                // Find the minimum border width among top/left/bottom (excluding right for comparison)
+                const topLeftBottomBorders = [borders[0], borders[3], borders[2]].filter(b => b > 0);
+                const minTopLeftBottom = topLeftBottomBorders.length > 0 ? Math.min(...topLeftBottomBorders) : 0;
+                // Get colors for comparison
+                const borderLeftHex = rgbToHex(computed.borderLeftColor);
+                const borderRightHex = rgbToHex(computed.borderRightColor);
+                const borderTopHex = rgbToHex(computed.borderTopColor);
+                // Get alpha values - border-left might have higher opacity than semi-transparent top/bottom
+                const borderLeftAlpha = extractAlpha(computed.borderLeftColor);
+                const borderTopAlpha = extractAlpha(computed.borderTopColor);
+                const borderRightAlpha = extractAlpha(computed.borderRightColor);
+                // Border-left accent: create a filled shape when:
+                // 1. border-left is thicker than the minimum of other borders, OR
+                // 2. border-left is the only border on this element, OR
+                // 3. border-left has a different RGB color than the base shape line (top border), OR
+                // 4. border-left is more opaque than the base shape line (even if same RGB)
+                const borderLeftW = borders[3];
+                const borderLeftHasDifferentColor = borderTopHex !== borderLeftHex;
+                const borderLeftIsMoreOpaque = (borderLeftAlpha ?? 0) < (borderTopAlpha ?? 0); // lower value = more opaque
+                if (borderLeftW > 0 && !isFullyTransparent(computed.borderLeftColor) &&
+                    (borderLeftW > minTopRightBottom || minTopRightBottom === 0 || borderLeftHasDifferentColor || borderLeftIsMoreOpaque)) {
+                    // If the parent has border-radius, create a custom geometry shape that follows
+                    // the parent's arc on the outer (left) edge while keeping the inner (right) edge straight.
+                    // A simple rectRadius doesn't work because it curves ALL corners equally.
+                    if (divBorderRadius > 0) {
+                        // Generate custom geometry for thin vertical bar on LEFT
+                        // that follows the parent's arc at the outer (left) edge
+                        const w = borderLeftW;
+                        const h = rect.height;
+                        const r = divBorderRadius;
+                        const EMU_PER_PX = 914400 / 96;
+                        // arcYAtX: at x distance from the left edge, how far is the arc from the top/bottom?
+                        const arcYAtX = (radius, x) => {
+                            if (x <= 0)
+                                return radius;
+                            if (x >= radius)
+                                return 0;
+                            const dx = radius - x;
+                            return radius - Math.sqrt(radius * radius - dx * dx);
+                        };
+                        // Generate intermediate points along the arc
+                        const segments = 8;
+                        const arcPointsTop = [];
+                        const arcPointsBottom = [];
+                        for (let i = 0; i <= segments; i++) {
+                            const t = i / segments;
+                            const x = t * w; // x from 0 to w within the bar
+                            const arcDistance = arcYAtX(r, x); // y distance from corner at this x
+                            arcPointsTop.push({
+                                x: Math.round(x * EMU_PER_PX),
+                                y: Math.round(arcDistance * EMU_PER_PX)
+                            });
+                            arcPointsBottom.push({
+                                x: Math.round(x * EMU_PER_PX),
+                                y: Math.round((h - arcDistance) * EMU_PER_PX)
+                            });
+                        }
+                        // Build path: start at TL arc (left edge, y=r), go right along TL arc,
+                        // down right edge, left along BL arc, up left edge
+                        const points = [];
+                        points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                        // TL arc going right (toward the right edge of the border)
+                        for (let i = 1; i <= segments; i++) {
+                            points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                        }
+                        // Right edge down to BL arc start (straight line)
+                        points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                        // BL arc going left (back toward the left edge)
+                        for (let i = segments - 1; i >= 0; i--) {
+                            points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                        }
+                        // Close back to start
+                        points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(borderLeftW),
+                                h: pxToInch(rect.height),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderLeftColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderLeftColor),
+                                line: null,
+                                rectRadius: 0, // Using custom geometry instead
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: points,
+                            },
+                        });
+                    }
+                    else {
+                        // No border-radius - use a simple straight rectangle
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(borderLeftW),
+                                h: pxToInch(rect.height),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderLeftColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderLeftColor),
+                                line: null,
+                                rectRadius: 0,
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: null,
+                            },
+                        });
+                    }
+                }
+                // Border-right accent: create a filled shape when:
+                // 1. border-right is thicker than the minimum of other borders, OR
+                // 2. border-right is the only border on this element, OR
+                // 3. border-right has a different color than the base shape line (top border), OR
+                // 4. border-right is more opaque than the base shape line (even if same RGB)
+                const borderRightW = borders[1];
+                const borderRightHasDifferentColor = borderTopHex !== borderRightHex;
+                const borderRightIsMoreOpaque = (borderRightAlpha ?? 0) < (borderTopAlpha ?? 0); // lower value = more opaque
+                if (borderRightW > 0 && !isFullyTransparent(computed.borderRightColor) &&
+                    (borderRightW > minTopLeftBottom || minTopLeftBottom === 0 || borderRightHasDifferentColor || borderRightIsMoreOpaque)) {
+                    // Similar to border-left: if parent has border-radius, use custom geometry
+                    if (divBorderRadius > 0) {
+                        // Generate custom geometry for thin vertical bar on RIGHT
+                        // that follows the parent's arc at the outer (right) edge
+                        const w = borderRightW;
+                        const h = rect.height;
+                        const r = divBorderRadius;
+                        const EMU_PER_PX = 914400 / 96;
+                        // arcYAtX: at x distance from the edge, how far is the arc from the top/bottom?
+                        const arcYAtX = (radius, x) => {
+                            if (x <= 0)
+                                return radius;
+                            if (x >= radius)
+                                return 0;
+                            const dx = radius - x;
+                            return radius - Math.sqrt(radius * radius - dx * dx);
+                        };
+                        // Generate intermediate points along the arc
+                        const segments = 8;
+                        const arcPointsTop = [];
+                        const arcPointsBottom = [];
+                        for (let i = 0; i <= segments; i++) {
+                            const t = i / segments;
+                            const x = t * w; // x from 0 to w within the bar
+                            // For right bar, we flip: at x=0 (left edge of bar, toward center), arc is closer to edge
+                            // at x=w (right edge, outer), arc is at full radius
+                            const arcDistance = arcYAtX(r, w - x); // y distance from corner at this x
+                            arcPointsTop.push({
+                                x: Math.round(x * EMU_PER_PX),
+                                y: Math.round(arcDistance * EMU_PER_PX)
+                            });
+                            arcPointsBottom.push({
+                                x: Math.round(x * EMU_PER_PX),
+                                y: Math.round((h - arcDistance) * EMU_PER_PX)
+                            });
+                        }
+                        // Build path: start at left edge TR arc intersection, go right along TR arc,
+                        // down right edge, left along BR arc, up left edge
+                        const points = [];
+                        points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, moveTo: true });
+                        // TR arc going right
+                        for (let i = 1; i <= segments; i++) {
+                            points.push({ x: arcPointsTop[i].x, y: arcPointsTop[i].y });
+                        }
+                        // Right edge down to BR arc start
+                        points.push({ x: arcPointsBottom[segments].x, y: arcPointsBottom[segments].y });
+                        // BR arc going left
+                        for (let i = segments - 1; i >= 0; i--) {
+                            points.push({ x: arcPointsBottom[i].x, y: arcPointsBottom[i].y });
+                        }
+                        // Close back to start
+                        points.push({ x: arcPointsTop[0].x, y: arcPointsTop[0].y, close: true });
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left + rect.width - borderRightW),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(borderRightW),
+                                h: pxToInch(rect.height),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderRightColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderRightColor),
+                                line: null,
+                                rectRadius: 0, // Using custom geometry instead
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: points,
+                            },
+                        });
+                    }
+                    else {
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left + rect.width - borderRightW),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(borderRightW),
+                                h: pxToInch(rect.height),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderRightColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderRightColor),
+                                line: null,
+                                rectRadius: 0,
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: null,
+                            },
+                        });
+                    }
+                }
+                // Find the minimum border width among left/right/bottom (excluding top for comparison)
+                const leftRightBottomBorders = [borders[3], borders[1], borders[2]].filter(b => b > 0);
+                const minLeftRightBottom = leftRightBottomBorders.length > 0 ? Math.min(...leftRightBottomBorders) : 0;
+                // Find the minimum border width among left/right/top (excluding bottom for comparison)
+                const leftRightTopBorders = [borders[3], borders[1], borders[0]].filter(b => b > 0);
+                const minLeftRightTop = leftRightTopBorders.length > 0 ? Math.min(...leftRightTopBorders) : 0;
+                // Border-top accent: create a filled rectangle when border-top is thicker than others
+                // or when border-top is the only border on this element
+                const borderTopW = borders[0];
+                if (borderTopW > 0 && !isFullyTransparent(computed.borderTopColor) &&
+                    (borderTopW > minLeftRightBottom || minLeftRightBottom === 0)) {
+                    if (divBorderRadius > 0) {
+                        // Generate custom geometry for thin horizontal bar on TOP
+                        // that follows the parent's arc at the outer (top) edge
+                        const w = rect.width;
+                        const h = borderTopW;
+                        const r = divBorderRadius;
+                        const EMU_PER_PX = 914400 / 96;
+                        // arcXAtY: at y distance from the top edge, how far is the arc from the left/right?
+                        const arcXAtY = (radius, y) => {
+                            if (y <= 0)
+                                return radius;
+                            if (y >= radius)
+                                return 0;
+                            const dy = radius - y;
+                            return radius - Math.sqrt(radius * radius - dy * dy);
+                        };
+                        const segments = 8;
+                        const arcPointsLeft = [];
+                        const arcPointsRight = [];
+                        for (let i = 0; i <= segments; i++) {
+                            const t = i / segments;
+                            const y = t * h; // y from 0 to h within the bar
+                            const arcDistance = arcXAtY(r, y); // x distance from corner at this y
+                            arcPointsLeft.push({
+                                x: Math.round(arcDistance * EMU_PER_PX),
+                                y: Math.round(y * EMU_PER_PX)
+                            });
+                            arcPointsRight.push({
+                                x: Math.round((w - arcDistance) * EMU_PER_PX),
+                                y: Math.round(y * EMU_PER_PX)
+                            });
+                        }
+                        // Build path: start at TL arc (top, x=r), go down along TL arc,
+                        // right along bottom edge, up along TR arc, left along top edge
+                        const points = [];
+                        points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                        // TL arc going down
+                        for (let i = 1; i <= segments; i++) {
+                            points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                        }
+                        // Bottom edge going right to TR arc
+                        points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                        // TR arc going up
+                        for (let i = segments - 1; i >= 0; i--) {
+                            points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                        }
+                        // Close back to start
+                        points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(borderTopW),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderTopColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderTopColor),
+                                line: null,
+                                rectRadius: 0,
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: points,
+                            },
+                        });
+                    }
+                    else {
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(borderTopW),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderTopColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderTopColor),
+                                line: null,
+                                rectRadius: 0,
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: null,
+                            },
+                        });
+                    }
+                }
+                // Border-bottom accent: create a filled rectangle when border-bottom is thicker than others
+                // or when border-bottom is the only border on this element
+                const borderBottomW = borders[2];
+                if (borderBottomW > 0 && !isFullyTransparent(computed.borderBottomColor) &&
+                    (borderBottomW > minLeftRightTop || minLeftRightTop === 0)) {
+                    if (divBorderRadius > 0) {
+                        // Generate custom geometry for thin horizontal bar on BOTTOM
+                        // that follows the parent's arc at the outer (bottom) edge
+                        const w = rect.width;
+                        const h = borderBottomW;
+                        const r = divBorderRadius;
+                        const EMU_PER_PX = 914400 / 96;
+                        // arcXAtY: at y distance from the edge, how far is the arc from the left/right?
+                        const arcXAtY = (radius, y) => {
+                            if (y <= 0)
+                                return radius;
+                            if (y >= radius)
+                                return 0;
+                            const dy = radius - y;
+                            return radius - Math.sqrt(radius * radius - dy * dy);
+                        };
+                        const segments = 8;
+                        const arcPointsLeft = [];
+                        const arcPointsRight = [];
+                        for (let i = 0; i <= segments; i++) {
+                            const t = i / segments;
+                            const y = t * h; // y from 0 to h within the bar
+                            // For bottom bar, we flip: at y=0 (top edge of bar, toward center), arc is closer to edge
+                            // at y=h (bottom edge, outer), arc is at full radius
+                            const arcDistance = arcXAtY(r, h - y);
+                            arcPointsLeft.push({
+                                x: Math.round(arcDistance * EMU_PER_PX),
+                                y: Math.round(y * EMU_PER_PX)
+                            });
+                            arcPointsRight.push({
+                                x: Math.round((w - arcDistance) * EMU_PER_PX),
+                                y: Math.round(y * EMU_PER_PX)
+                            });
+                        }
+                        // Build path: start at BL arc (left edge, y=0), go down along BL arc,
+                        // right along bottom edge, up along BR arc, left along top edge
+                        const points = [];
+                        points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, moveTo: true });
+                        // BL arc going down
+                        for (let i = 1; i <= segments; i++) {
+                            points.push({ x: arcPointsLeft[i].x, y: arcPointsLeft[i].y });
+                        }
+                        // Bottom edge going right to BR arc
+                        points.push({ x: arcPointsRight[segments].x, y: arcPointsRight[segments].y });
+                        // BR arc going up
+                        for (let i = segments - 1; i >= 0; i--) {
+                            points.push({ x: arcPointsRight[i].x, y: arcPointsRight[i].y });
+                        }
+                        // Close back to start
+                        points.push({ x: arcPointsLeft[0].x, y: arcPointsLeft[0].y, close: true });
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top + rect.height - borderBottomW),
                                 w: pxToInch(rect.width),
-                                h: pxToInch(rect.height),
+                                h: pxToInch(borderBottomW),
                             },
-                            sizing: null,
-                            rectRadius: 0,
-                        };
-                        elements.push(imgElement);
-                        hasConicGradientImage = true;
-                        // 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;
-            let bgImageSize = null;
-            let bgImagePosition = null;
-            let bgGradient = null;
-            const extraDivGradients = [];
-            if (elBgImage && elBgImage !== 'none') {
-                if (elBgImage.includes('linear-gradient') ||
-                    elBgImage.includes('radial-gradient')) {
-                    const gradParts = splitCssBackgroundGradients(elBgImage);
-                    // Detect complex repeating-pattern backgrounds (4+ gradient layers,
-                    // often combined with a small background-size for tiling). These CSS
-                    // patterns (hex grids, noise textures, etc.) cannot be faithfully
-                    // reproduced as PPTX gradients, so we rasterize them to a canvas image.
-                    const bgSize = computed.backgroundSize;
-                    const isRepeatingPattern = gradParts.length >= 4 &&
-                        bgSize &&
-                        bgSize !== 'auto' &&
-                        !bgSize.includes('100%');
-                    if (isRepeatingPattern) {
-                        // Complex repeating CSS pattern — rasterize to canvas image.
-                        // PPTX gradients cannot represent tiled multi-layer patterns like
-                        // hex grids, but the Canvas 2D API can draw them faithfully.
-                        const rect = htmlEl.getBoundingClientRect();
-                        const patternDataUri = renderRepeatingGradientPatternAsImage(elBgImage, bgSize, computed.backgroundPosition || '0px 0px', rect.width, rect.height, win.document);
-                        if (patternDataUri) {
-                            const effOp = getEffectiveOpacity(htmlEl, win);
-                            const imgElement = {
-                                type: 'image',
-                                src: patternDataUri,
-                                position: {
-                                    x: pxToInch(rect.left),
-                                    y: pxToInch(rect.top),
-                                    w: pxToInch(rect.width),
-                                    h: pxToInch(rect.height),
-                                },
-                                sizing: null,
+                            shape: {
+                                fill: rgbToHex(computed.borderBottomColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderBottomColor),
+                                line: null,
                                 rectRadius: 0,
-                                transparency: effOp < 1 ? Math.round((1 - effOp) * 100) : undefined,
-                            };
-                            elements.push(imgElement);
-                        }
-                        bgGradient = null;
-                    }
-                    else if (gradParts.length > 0) {
-                        bgGradient = parseCssGradient(gradParts[0]);
-                        // Collect additional gradient layers as separate shapes (up to 3 extra)
-                        for (let gi = 1; gi < Math.min(gradParts.length, 4); gi++) {
-                            const g = parseCssGradient(gradParts[gi]);
-                            if (g)
-                                extraDivGradients.push(g);
-                        }
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: points,
+                            },
+                        });
                     }
-                }
-                else {
-                    const urlMatch = elBgImage.match(/url\(["']?([^"')]+)["']?\)/);
-                    if (urlMatch) {
-                        bgImageUrl = urlMatch[1];
-                        bgImageSize = computed.backgroundSize || 'auto';
-                        bgImagePosition = computed.backgroundPosition || '0% 0%';
+                    else {
+                        borderShapes.push({
+                            type: 'shape',
+                            text: '',
+                            textRuns: null,
+                            style: null,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top + rect.height - borderBottomW),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(borderBottomW),
+                            },
+                            shape: {
+                                fill: rgbToHex(computed.borderBottomColor),
+                                gradient: null,
+                                transparency: extractAlpha(computed.borderBottomColor),
+                                line: null,
+                                rectRadius: 0,
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                cssTriangle: null,
+                                customGeometry: null,
+                            },
+                        });
                     }
                 }
             }
-            // Check for borders
-            const borderTop = computed.borderTopWidth;
-            const borderRight = computed.borderRightWidth;
-            const borderBottom = computed.borderBottomWidth;
-            const borderLeft = computed.borderLeftWidth;
-            const borders = [borderTop, borderRight, borderBottom, borderLeft].map((b) => parseFloat(b) || 0);
-            const hasBorder = borders.some((b) => b > 0);
-            const hasUniformBorder = hasBorder && borders.every((b) => b === borders[0]);
-            const borderLines = [];
-            if (hasBorder && !hasUniformBorder) {
-                const rect = htmlEl.getBoundingClientRect();
-                const x = pxToInch(rect.left);
-                const y = pxToInch(rect.top);
-                const w = pxToInch(rect.width);
-                const h = pxToInch(rect.height);
-                if (parseFloat(borderTop) > 0 && !isFullyTransparent(computed.borderTopColor)) {
-                    const widthPt = pxToPoints(borderTop);
-                    const inset = widthPt / 72 / 2;
-                    borderLines.push({
-                        type: 'line',
-                        x1: x,
-                        y1: y + inset,
-                        x2: x + w,
-                        y2: y + inset,
-                        width: widthPt,
-                        color: rgbToHex(computed.borderTopColor),
-                        transparency: extractAlpha(computed.borderTopColor),
-                    });
-                }
-                if (parseFloat(borderRight) > 0 && !isFullyTransparent(computed.borderRightColor)) {
-                    const widthPt = pxToPoints(borderRight);
-                    const inset = widthPt / 72 / 2;
-                    borderLines.push({
-                        type: 'line',
-                        x1: x + w - inset,
-                        y1: y,
-                        x2: x + w - inset,
-                        y2: y + h,
-                        width: widthPt,
-                        color: rgbToHex(computed.borderRightColor),
-                        transparency: extractAlpha(computed.borderRightColor),
-                    });
-                }
-                if (parseFloat(borderBottom) > 0 && !isFullyTransparent(computed.borderBottomColor)) {
-                    const widthPt = pxToPoints(borderBottom);
-                    const inset = widthPt / 72 / 2;
-                    borderLines.push({
-                        type: 'line',
-                        x1: x,
-                        y1: y + h - inset,
-                        x2: x + w,
-                        y2: y + h - inset,
-                        width: widthPt,
-                        color: rgbToHex(computed.borderBottomColor),
-                        transparency: extractAlpha(computed.borderBottomColor),
-                    });
-                }
-                if (parseFloat(borderLeft) > 0 && !isFullyTransparent(computed.borderLeftColor)) {
-                    const widthPt = pxToPoints(borderLeft);
-                    const inset = widthPt / 72 / 2;
-                    borderLines.push({
-                        type: 'line',
-                        x1: x + inset,
-                        y1: y,
-                        x2: x + inset,
-                        y2: y + h,
-                        width: widthPt,
-                        color: rgbToHex(computed.borderLeftColor),
-                        transparency: extractAlpha(computed.borderLeftColor),
-                    });
-                }
-            }
             if (hasBg || hasBorder || bgImageUrl || bgGradient || hasConicGradientImage) {
                 const rect = htmlEl.getBoundingClientRect();
                 if (rect.width > 0 && rect.height > 0) {
@@ -2854,7 +4995,7 @@ export function parseSlideHtml(doc) {
                         elements.push(bgImgElement);
                     }
                     // 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 textTagSet = new Set(['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN', 'PRE']);
                     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) => {
@@ -2884,6 +5025,20 @@ export function parseSlideHtml(doc) {
                                     return false;
                                 }
                             }
+                            // H1-H6 and P elements with backgrounds, borders, or shadows should NOT be merged
+                            // as text children. They need to be processed independently as shape elements.
+                            if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'].includes(child.tagName)) {
+                                const textTagComputed = win.getComputedStyle(child);
+                                const textTagHasBg = textTagComputed.backgroundColor && textTagComputed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+                                const textTagHasBorder = (parseFloat(textTagComputed.borderTopWidth) || 0) > 0 ||
+                                    (parseFloat(textTagComputed.borderRightWidth) || 0) > 0 ||
+                                    (parseFloat(textTagComputed.borderBottomWidth) || 0) > 0 ||
+                                    (parseFloat(textTagComputed.borderLeftWidth) || 0) > 0;
+                                const textTagHasShadow = textTagComputed.boxShadow && textTagComputed.boxShadow !== 'none';
+                                if (textTagHasBg || textTagHasBorder || textTagHasShadow) {
+                                    return false;
+                                }
+                            }
                             return true;
                         }
                         // Include text-only DIVs: DIVs that contain only inline/text content
@@ -2938,11 +5093,55 @@ export function parseSlideHtml(doc) {
                         }
                         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)));
+                    // Non-text children exclude decorative elements (icons, SVGs) for text extraction purposes.
+                    // Also exclude empty spacer DIVs (DIVs with no text and no non-spacer children) to prevent
+                    // them from blocking text merging in code blocks and similar containers.
+                    const decorativeTags = new Set(['I', 'CANVAS', 'VIDEO', 'AUDIO', 'IFRAME']);
+                    const nonTextChildren = allChildren.filter((child) => {
+                        const childTagUpper = child.tagName.toUpperCase();
+                        // Exclude standard text tags
+                        if (textTagSet.has(childTagUpper))
+                            return false;
+                        // Exclude decorative tags (CANVAS, VIDEO, etc. are lowercase in HTML5)
+                        if (decorativeTags.has(childTagUpper))
+                            return false;
+                        // SVG elements with display:block should NOT be excluded - they are structural
+                        // and need independent positioning. Only exclude inline SVGs (decorative icons).
+                        if (childTagUpper === 'SVG') {
+                            const svgComputed = win.getComputedStyle(child);
+                            const svgDisplay = svgComputed.display;
+                            // Block-level SVGs are structural - don't exclude them
+                            if (svgDisplay === 'block')
+                                return true;
+                            // Inline SVGs are decorative - exclude them
+                            return false;
+                        }
+                        // Exclude DIVs that are textChildren
+                        if (child.tagName === 'DIV' && textChildren.includes(child))
+                            return false;
+                        // Exclude empty spacer DIVs (no text content, no meaningful children)
+                        if (child.tagName === 'DIV') {
+                            const divText = child.textContent?.trim();
+                            if (!divText) {
+                                // Check if it has any content children (text OR visual elements like SVG/IMG)
+                                // Also check for <i> tags which may contain CSS-rendered icons (e.g., Font Awesome)
+                                const childElements = Array.from(child.children);
+                                // Note: SVG/CANVAS/VIDEO tagNames are lowercase in HTML5 namespace
+                                const hasContentChildren = childElements.some(c => {
+                                    const tagUpper = c.tagName.toUpperCase();
+                                    return c.textContent?.trim() ||
+                                        tagUpper === 'SVG' ||
+                                        tagUpper === 'IMG' ||
+                                        tagUpper === 'CANVAS' ||
+                                        tagUpper === 'VIDEO' ||
+                                        tagUpper === 'I'; // Font Awesome and other icon fonts use <i> tags
+                                });
+                                if (!hasContentChildren)
+                                    return false; // Empty spacer DIV
+                            }
+                        }
+                        return true;
+                    });
                     // 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 &&
@@ -3017,20 +5216,28 @@ export function parseSlideHtml(doc) {
                     // 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
+                    // Also check for mixed content like:
+                    // <div>Plan: <span>1 to add</span>, <span>1 to change</span></div>
+                    // where "Plan: " and ", " are direct text nodes mixed with SPAN children
                     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);
+                    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;
+                    // Check if this element has mixed content (direct text nodes + inline elements like SPANs)
+                    // In this case, we should use parseInlineFormatting on the parent to capture everything
+                    // Note: Inline formatting elements (EM, STRONG, B, I, etc.) are NOT in textTagSet,
+                    // so we need to check for them separately.
+                    const inlineFormattingTagsForMixed = new Set(['STRONG', 'EM', 'B', 'I', 'A', 'SPAN', 'MARK', 'SMALL', 'SUB', 'SUP', 'CODE', 'U', 'S', 'Q', 'CITE', 'ABBR', 'TIME', 'DATA']);
+                    const hasInlineFormattingChildren = allChildren.some(child => inlineFormattingTagsForMixed.has(child.tagName));
+                    const hasMixedInlineContent = hasDirectText && (hasTextChildren || hasInlineFormattingChildren);
                     // 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
@@ -3039,21 +5246,72 @@ export function parseSlideHtml(doc) {
                     // - 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)
                     //
-                    // CRITICAL: If the parent styled DIV is a flex-row container with multiple
-                    // children, the children are laid out horizontally and must be extracted
-                    // separately with their own positions. Merging them into a single text box
-                    // would stack them vertically, breaking the layout.
+                    // CRITICAL: If the parent styled DIV is a flex container with multiple children,
+                    // the children must be extracted separately with their own positions.
+                    // For flex-row: children are laid out horizontally.
+                    // For flex-column: children are laid out vertically at different Y positions.
+                    // Merging them into a single text box would place them at the wrong positions.
                     const isParentFlexRow = isFlexContainer &&
                         (computed.flexDirection === 'row' || computed.flexDirection === 'row-reverse' || !computed.flexDirection) &&
                         allChildren.length > 1;
+                    const isParentFlexColumn = isFlexContainer &&
+                        (computed.flexDirection === 'column' || computed.flexDirection === 'column-reverse') &&
+                        allChildren.length > 1;
                     const isParentGrid = display === 'grid' || display === 'inline-grid';
-                    const shouldMergeText = !isParentFlexRow && !isParentGrid && (hasTextChildren && (isSingleTextChild ||
-                        nonTextChildren.length === 0) || hasDirectText);
+                    const shouldMergeText = !isParentFlexRow && !isParentFlexColumn && !isParentGrid && (hasTextChildren && (isSingleTextChild ||
+                        nonTextChildren.length === 0) || hasDirectText || hasMixedInlineContent);
                     if (shouldMergeText) {
-                        if (isSingleTextChild) {
+                        // Handle mixed inline content first: direct text nodes mixed with inline elements (SPANs)
+                        // Use parseInlineFormatting on the parent element to capture everything
+                        if (hasMixedInlineContent) {
+                            const isBold = computed.fontWeight === 'bold' ||
+                                parseInt(computed.fontWeight) >= 600;
+                            const isItalic = computed.fontStyle === 'italic';
+                            const isUnderline = computed.textDecoration &&
+                                computed.textDecoration.includes('underline');
+                            const baseRunOptions = {
+                                fontSize: pxToPoints(computed.fontSize),
+                                fontFace: extractFontFace(computed.fontFamily),
+                                color: rgbToHex(computed.color),
+                                bold: isBold,
+                                italic: isItalic,
+                                underline: isUnderline || false,
+                                ...(extractLetterSpacing(computed) !== null ? { charSpacing: extractLetterSpacing(computed) } : {}),
+                                ...(extractAlpha(computed.color) !== null ? { transparency: extractAlpha(computed.color) } : {}),
+                                ...(() => {
+                                    const ts = parseTextShadow(computed.textShadow);
+                                    return ts.glow ? { glow: ts.glow } : {};
+                                })(),
+                            };
+                            shapeTextRuns = [];
+                            const textTransformFn = (s) => applyTextTransform(s, computed.textTransform || 'none');
+                            parseInlineFormatting(el, baseRunOptions, shapeTextRuns, textTransformFn, win, false);
+                            shapeStyle = {
+                                fontSize: pxToPoints(computed.fontSize),
+                                fontFace: extractFontFace(computed.fontFamily),
+                                color: rgbToHex(computed.color),
+                                bold: isBold,
+                                italic: isItalic,
+                                valign: valign,
+                                align: align,
+                                lineSpacing: pxToPoints(computed.lineHeight) || undefined,
+                                margin: [
+                                    pxToPoints(computed.paddingLeft),
+                                    pxToPoints(computed.paddingRight),
+                                    pxToPoints(computed.paddingBottom),
+                                    pxToPoints(computed.paddingTop),
+                                ],
+                                ...(extractLetterSpacing(computed) !== null ? { charSpacing: extractLetterSpacing(computed) } : {}),
+                                ...(extractAlpha(computed.color) !== null ? { transparency: extractAlpha(computed.color) } : {}),
+                            };
+                            // Mark all child elements as processed to avoid duplicate extraction
+                            el.querySelectorAll('*').forEach(desc => processed.add(desc));
+                        }
+                        else if (isSingleTextChild) {
                             const textEl = textChildren[0];
                             const textComputed = win.getComputedStyle(textEl);
-                            shapeText = getTransformedText(textEl, textComputed);
+                            // Check if the text child has inline formatting elements that need to be preserved
+                            const hasInlineFormatting = textEl.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');
                             let fontFill = null;
                             const textBgClip = textComputed.webkitBackgroundClip ||
                                 textComputed.backgroundClip;
@@ -3126,16 +5384,42 @@ export function parseSlideHtml(doc) {
                                 shapeStyle.glow = shapeTextShadow.glow;
                             if (shapeTextShadow.shadow)
                                 shapeStyle.textShadow = shapeTextShadow.shadow;
+                            // If the text child has inline formatting, use parseInlineFormatting to preserve it
+                            if (hasInlineFormatting) {
+                                const textTransformFn = (s) => applyTextTransform(s, textComputed.textTransform || 'none');
+                                const baseRunOptions = {
+                                    fontSize: shapeStyle.fontSize,
+                                    fontFace: shapeStyle.fontFace,
+                                    color: shapeStyle.color ?? undefined,
+                                    bold: shapeStyle.bold,
+                                };
+                                // Check if whitespace should be preserved (white-space: pre or monospace font)
+                                // Use parent DIV's computed style if it has a monospace font (for code blocks
+                                // where transform.ts wrapped text in P tags that inherit non-monospace fonts)
+                                const textPreserveWs = shouldPreserveWhitespace(textComputed) || isMonospaceFont(computed.fontFamily);
+                                shapeTextRuns = parseInlineFormatting(textEl, baseRunOptions, [], textTransformFn, win, textPreserveWs);
+                                // Clear shapeText since we're using textRuns instead
+                                shapeText = '';
+                            }
+                            else {
+                                // Also check parent's font for whitespace preservation in non-inline-formatting case
+                                const effectivePreserveWs = shouldPreserveWhitespace(textComputed) || isMonospaceFont(computed.fontFamily);
+                                shapeText = getTransformedText(textEl, effectivePreserveWs ? computed : textComputed);
+                            }
                             processed.add(textEl);
                             // Also mark descendants as processed (e.g., <p> from transform.ts wrapping)
                             textEl.querySelectorAll('*').forEach(desc => processed.add(desc));
                         }
                         else if (hasTextChildren) {
                             shapeTextRuns = [];
+                            // Check if parent has monospace font (for whitespace preservation in code blocks)
+                            const parentHasMonospace = isMonospaceFont(computed.fontFamily);
                             textChildren.forEach((textChild, idx) => {
                                 const textEl = textChild;
                                 const textComputed = win.getComputedStyle(textEl);
-                                const fullText = getTransformedText(textEl, textComputed);
+                                // Use parent's computed style for whitespace preservation if parent has monospace font
+                                const effectiveWsStyle = parentHasMonospace ? computed : textComputed;
+                                const fullText = getTransformedText(textEl, effectiveWsStyle);
                                 if (!fullText)
                                     return;
                                 const isBold = textComputed.fontWeight === 'bold' ||
@@ -3156,44 +5440,63 @@ export function parseSlideHtml(doc) {
                                         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 = '';
+                                // Check if this text child has inline formatting elements that need to be preserved
+                                const hasInlineFormattingInChild = textEl.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 (hasInlineFormattingInChild) {
+                                    // Use parseInlineFormatting to preserve inline styling (colors, bold, italic, etc.)
+                                    const textTransformFn = (s) => applyTextTransform(s, textComputed.textTransform || 'none');
+                                    // Add line break before this text child's runs (if not the first)
+                                    if (idx > 0 && shapeTextRuns.length > 0) {
+                                        // Mark the last run to have a line break after it
+                                        const lastRun = shapeTextRuns[shapeTextRuns.length - 1];
+                                        lastRun.options = { ...lastRun.options, breakLine: true };
+                                    }
+                                    // Check if whitespace should be preserved (white-space: pre or monospace font)
+                                    // Also check parent DIV's font for code blocks where transform.ts wraps text
+                                    const childPreserveWs = shouldPreserveWhitespace(textComputed) || isMonospaceFont(computed.fontFamily);
+                                    parseInlineFormatting(textEl, baseRunOptions, shapeTextRuns, textTransformFn, win, childPreserveWs);
+                                }
+                                else {
+                                    // No inline formatting - use simple text extraction
+                                    // 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 || '';
+                                            }
                                         }
-                                        else {
-                                            currentSegment += node.textContent || '';
+                                        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;
+                                            const options = { ...baseRunOptions };
+                                            if (segIdx > 0) {
+                                                options.softBreakBefore = true;
+                                            }
+                                            shapeTextRuns.push({ text: runText, options });
+                                        });
                                     }
-                                    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;
-                                        const options = { ...baseRunOptions };
-                                        if (segIdx > 0) {
-                                            options.softBreakBefore = true;
-                                        }
+                                    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 });
-                                    });
-                                }
-                                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
@@ -3228,6 +5531,7 @@ export function parseSlideHtml(doc) {
                                 valign: valign,
                                 inset: 0,
                                 wrap: !shouldNotWrap,
+                                ...(extractAlpha(computed.color) !== null ? { transparency: extractAlpha(computed.color) } : {}),
                             };
                             // Extract letter-spacing for direct text
                             const ls = extractLetterSpacing(computed);
@@ -3235,7 +5539,10 @@ export function parseSlideHtml(doc) {
                                 shapeStyle.charSpacing = ls;
                         }
                     }
-                    if (hasBg || hasUniformBorder || bgGradient) {
+                    // Create shape element if there's a visible background/border/gradient,
+                    // OR if there's text content with a border (even non-uniform, like border-top only)
+                    const hasTextToRender = shapeText || (shapeTextRuns && shapeTextRuns.length > 0);
+                    if (hasBg || hasUniformBorder || bgGradient || (hasBorder && hasTextToRender)) {
                         // Detect effective opacity (including ancestor chain)
                         const elementOpacity = getEffectiveOpacity(htmlEl, win);
                         const hasOpacity = elementOpacity < 1;
@@ -3295,11 +5602,596 @@ export function parseSlideHtml(doc) {
                                 shapeY = cy - origH / 2;
                             }
                         }
+                        // --- Overflow clipping with rounded corners ---
+                        // Check for ancestor with overflow:hidden + border-radius.
+                        // If the element extends into the rounded corners, we need custom geometry
+                        // to clip it properly (since PPTX has no clipping groups).
+                        //
+                        // IMPORTANT: The browser applies overflow:hidden in two stages:
+                        // 1. Clip to parent rectangle (elements extending outside are cropped)
+                        // 2. Apply rounded corner clipping (arc intersection in corner zones)
+                        //
+                        // We must emulate both: first adjust shape bounds to fit within parent,
+                        // then generate custom geometry for any corners that need arc clipping.
+                        let overflowClipGeometry = null;
+                        let clippedShapeX = shapeX;
+                        let clippedShapeY = shapeY;
+                        let clippedShapeW = shapeW;
+                        let clippedShapeH = shapeH;
+                        let wasClippedToParent = false;
+                        // DEBUG: Log overflow clipping detection
+                        const DEBUG_OVERFLOW = false; // Set to true for debugging
+                        if (DEBUG_OVERFLOW)
+                            console.log('[OverflowClip] Processing element:', { shapeX, shapeY, shapeW, shapeH, bg: computed.backgroundColor });
+                        let overflowAncestor = htmlEl.parentElement;
+                        while (overflowAncestor && overflowAncestor !== doc.body) {
+                            const ancestorComputed = win.getComputedStyle(overflowAncestor);
+                            const ancestorOverflow = ancestorComputed.overflow;
+                            if (ancestorOverflow === 'hidden' || ancestorOverflow === 'clip') {
+                                const ancestorBorderRadius = parseFloat(ancestorComputed.borderRadius) || 0;
+                                const ancestorRect = overflowAncestor.getBoundingClientRect();
+                                if (DEBUG_OVERFLOW)
+                                    console.log('[OverflowClip] Found overflow ancestor:', { overflow: ancestorOverflow, borderRadius: ancestorBorderRadius, ancestorRect: { left: ancestorRect.left, top: ancestorRect.top, width: ancestorRect.width, height: ancestorRect.height } });
+                                // IMPORTANT: getBoundingClientRect() returns VISIBLE bounds after clipping.
+                                // To detect if an element was clipped, we compare CSS dimensions to rect dimensions.
+                                // If the element has explicit CSS width/height larger than rect, it was clipped.
+                                const cssWidth = parseFloat(computed.width);
+                                const cssHeight = parseFloat(computed.height);
+                                const cssTop = parseFloat(computed.top);
+                                const cssRight = parseFloat(computed.right);
+                                const cssBottom = parseFloat(computed.bottom);
+                                const cssLeft = parseFloat(computed.left);
+                                // Determine original element dimensions (before clipping)
+                                const origW = !isNaN(cssWidth) && cssWidth > 0 ? cssWidth : shapeW;
+                                const origH = !isNaN(cssHeight) && cssHeight > 0 ? cssHeight : shapeH;
+                                // Calculate original position relative to ancestor
+                                // For position:absolute elements, we can use the CSS positioning values
+                                let origRelLeft;
+                                let origRelTop;
+                                const position = computed.position;
+                                if (position === 'absolute' || position === 'fixed') {
+                                    // For absolute positioning, calculate from CSS properties
+                                    if (!isNaN(cssLeft)) {
+                                        origRelLeft = cssLeft;
+                                    }
+                                    else if (!isNaN(cssRight)) {
+                                        origRelLeft = ancestorRect.width - cssRight - origW;
+                                    }
+                                    else {
+                                        origRelLeft = shapeX - ancestorRect.left;
+                                    }
+                                    if (!isNaN(cssTop)) {
+                                        origRelTop = cssTop;
+                                    }
+                                    else if (!isNaN(cssBottom)) {
+                                        origRelTop = ancestorRect.height - cssBottom - origH;
+                                    }
+                                    else {
+                                        origRelTop = shapeY - ancestorRect.top;
+                                    }
+                                }
+                                else {
+                                    // For non-absolute positioning, use rect (best we can do)
+                                    origRelLeft = shapeX - ancestorRect.left;
+                                    origRelTop = shapeY - ancestorRect.top;
+                                }
+                                const origRelRight = origRelLeft + origW;
+                                const origRelBottom = origRelTop + origH;
+                                if (DEBUG_OVERFLOW) {
+                                    console.log('[OverflowClip] Element original position:', {
+                                        origRelLeft, origRelTop, origW, origH,
+                                        cssTop, cssRight, cssBottom, cssLeft,
+                                        rectW: shapeW, rectH: shapeH,
+                                        bgColor: computed.backgroundColor,
+                                        isEllipse,
+                                        borderRadius: borderRadiusStr
+                                    });
+                                }
+                                // Calculate element position relative to ancestor (using original shape coords)
+                                const relLeft = origRelLeft;
+                                const relTop = origRelTop;
+                                const relRight = origRelRight;
+                                const relBottom = origRelBottom;
+                                // Step 1: Clip shape to parent rectangle bounds
+                                // If element extends outside parent, we need to crop it
+                                const needsRectClip = relLeft < 0 ||
+                                    relTop < 0 ||
+                                    relRight > ancestorRect.width ||
+                                    relBottom > ancestorRect.height;
+                                if (needsRectClip) {
+                                    if (DEBUG_OVERFLOW)
+                                        console.log('[OverflowClip] Element needs rect clipping:', { relLeft, relTop, relRight, relBottom });
+                                    // Calculate clipped bounds (intersection with parent)
+                                    const clippedRelLeft = Math.max(0, relLeft);
+                                    const clippedRelTop = Math.max(0, relTop);
+                                    const clippedRelRight = Math.min(ancestorRect.width, relRight);
+                                    const clippedRelBottom = Math.min(ancestorRect.height, relBottom);
+                                    // Update shape position and size to clipped bounds
+                                    clippedShapeX = ancestorRect.left + clippedRelLeft;
+                                    clippedShapeY = ancestorRect.top + clippedRelTop;
+                                    clippedShapeW = clippedRelRight - clippedRelLeft;
+                                    clippedShapeH = clippedRelBottom - clippedRelTop;
+                                    wasClippedToParent = true;
+                                }
+                                // Step 2: Check for rounded corner intersection (using clipped coordinates)
+                                if (ancestorBorderRadius > 0) {
+                                    const r = ancestorBorderRadius;
+                                    // Use clipped coordinates for corner detection
+                                    const clippedRelLeft = clippedShapeX - ancestorRect.left;
+                                    const clippedRelTop = clippedShapeY - ancestorRect.top;
+                                    const clippedRelRight = clippedRelLeft + clippedShapeW;
+                                    const clippedRelBottom = clippedRelTop + clippedShapeH;
+                                    // Determine which corners the CLIPPED element overlaps
+                                    const overlapsTL = clippedRelLeft < r && clippedRelTop < r;
+                                    const overlapsTR = clippedRelRight > ancestorRect.width - r && clippedRelTop < r;
+                                    const overlapsBL = clippedRelLeft < r && clippedRelBottom > ancestorRect.height - r;
+                                    const overlapsBR = clippedRelRight > ancestorRect.width - r && clippedRelBottom > ancestorRect.height - r;
+                                    if ((overlapsTL || overlapsTR || overlapsBL || overlapsBR) && wasClippedToParent) {
+                                        if (DEBUG_OVERFLOW)
+                                            console.log('[OverflowClip] Element overlaps corners:', { overlapsTL, overlapsTR, overlapsBL, overlapsBR, clippedRelLeft, clippedRelTop, clippedRelRight, clippedRelBottom, r, isEllipse, wasClippedToParent });
+                                        // Element overlaps at least one rounded corner - need custom geometry
+                                        const w = clippedShapeW;
+                                        const h = clippedShapeH;
+                                        // EMU conversion
+                                        const EMU_PER_PX = 914400 / 96;
+                                        const widthEmu = Math.round(w * EMU_PER_PX);
+                                        const heightEmu = Math.round(h * EMU_PER_PX);
+                                        const segments = 8;
+                                        const points = [];
+                                        // Generate arc points for a corner, tracing along the arc within the element
+                                        const addCornerArc = (cornerRelX, // corner center X relative to ancestor (0 for TL/BL, ancestorWidth for TR/BR)
+                                        cornerRelY, // corner center Y relative to ancestor (0 for TL/TR, ancestorHeight for BL/BR)
+                                        isRight, // is this a right-side corner
+                                        isBottom, // is this a bottom corner
+                                        goingClockwise // direction along the arc
+                                        ) => {
+                                            // Calculate the portion of the arc that intersects our element
+                                            // Arc center is at (cornerRelX ± r, cornerRelY ± r)
+                                            const arcCenterX = isRight ? cornerRelX - r : cornerRelX + r;
+                                            const arcCenterY = isBottom ? cornerRelY - r : cornerRelY + r;
+                                            // Generate arc points from 0 to 90 degrees
+                                            for (let i = 0; i <= segments; i++) {
+                                                const t = goingClockwise ? i / segments : 1 - i / segments;
+                                                const angle = t * Math.PI / 2;
+                                                // Point on the arc (in arc-center-relative coords)
+                                                let arcRelX, arcRelY;
+                                                if (!isRight && !isBottom) {
+                                                    // TL corner: arc goes from (0, -r) to (-r, 0) as t goes 0->1
+                                                    arcRelX = -r * Math.sin(angle);
+                                                    arcRelY = -r * Math.cos(angle);
+                                                }
+                                                else if (isRight && !isBottom) {
+                                                    // TR corner: arc goes from (r, 0) to (0, -r) as t goes 0->1
+                                                    arcRelX = r * Math.cos(angle);
+                                                    arcRelY = -r * Math.sin(angle);
+                                                }
+                                                else if (!isRight && isBottom) {
+                                                    // BL corner: arc goes from (-r, 0) to (0, r) as t goes 0->1
+                                                    arcRelX = -r * Math.cos(angle);
+                                                    arcRelY = r * Math.sin(angle);
+                                                }
+                                                else {
+                                                    // BR corner: arc goes from (0, r) to (r, 0) as t goes 0->1
+                                                    arcRelX = r * Math.sin(angle);
+                                                    arcRelY = r * Math.cos(angle);
+                                                }
+                                                // Convert to element-relative coordinates
+                                                const x = (arcCenterX + arcRelX) - clippedRelLeft;
+                                                const y = (arcCenterY + arcRelY) - clippedRelTop;
+                                                // Only include points within element bounds
+                                                if (x >= -0.1 && x <= w + 0.1 && y >= -0.1 && y <= h + 0.1) {
+                                                    points.push({
+                                                        x: Math.round(Math.max(0, Math.min(w, x)) * EMU_PER_PX),
+                                                        y: Math.round(Math.max(0, Math.min(h, y)) * EMU_PER_PX),
+                                                        ...(points.length === 0 ? { moveTo: true } : {})
+                                                    });
+                                                }
+                                            }
+                                        };
+                                        // Build the clipped shape path.
+                                        // The path traces the visible area of the element after clipping.
+                                        // For each corner that overlaps the parent's rounded corner, we trace an arc.
+                                        // For edges fully inside the parent, we preserve the element's own shape.
+                                        //
+                                        // CRITICAL: If the element itself is an ellipse/circle, we must preserve
+                                        // its circular shape on edges that aren't clipped by the parent.
+                                        //
+                                        // We trace CLOCKWISE starting from top-left for correct winding order
+                                        if (isEllipse && wasClippedToParent) {
+                                            // For ellipse/circle elements that were clipped by parent overflow,
+                                            // generate a custom geometry that preserves the ellipse's curved shape
+                                            // on the visible portion, while following the clip boundary edges.
+                                            //
+                                            // The shape we need to draw:
+                                            // 1. The visible arc of the ellipse (curved part)
+                                            // 2. Straight lines along the clip boundaries to close the shape
+                                            //
+                                            // Example: circle at top-right, clipped at y=0 and x=w:
+                                            //   - Arc from where it exits at x=w to where it exits at y=0
+                                            //   - Straight line along y=0 to corner (w,0)
+                                            //   - Straight line along x=w back to arc start
+                                            // Use original ellipse dimensions (already calculated in outer scope)
+                                            // origW, origH are the original CSS dimensions before clipping
+                                            const ellipseRx = origW / 2;
+                                            const ellipseRy = origH / 2;
+                                            // Ellipse center relative to the CLIPPED shape's coordinate system
+                                            // relLeft/relTop are original positions, clippedRelLeft/clippedRelTop are clipped
+                                            const centerXInClipped = relLeft + ellipseRx - clippedRelLeft;
+                                            const centerYInClipped = relTop + ellipseRy - clippedRelTop;
+                                            if (DEBUG_OVERFLOW) {
+                                                console.log('[OverflowClip] Ellipse clipping - origW:', origW, 'origH:', origH);
+                                                console.log('[OverflowClip] Ellipse clipping - rx:', ellipseRx, 'ry:', ellipseRy);
+                                                console.log('[OverflowClip] Ellipse clipping - relLeft:', relLeft, 'relTop:', relTop);
+                                                console.log('[OverflowClip] Ellipse clipping - clippedRelLeft:', clippedRelLeft, 'clippedRelTop:', clippedRelTop);
+                                                console.log('[OverflowClip] Ellipse clipping - centerX:', centerXInClipped, 'centerY:', centerYInClipped);
+                                                console.log('[OverflowClip] Ellipse clipping - w:', w, 'h:', h);
+                                                console.log('[OverflowClip] Ellipse clipping - clippedShapeW:', clippedShapeW, 'clippedShapeH:', clippedShapeH);
+                                            }
+                                            // Generate dense arc points for smooth curves
+                                            const arcSegments = 64;
+                                            const pathPoints = [];
+                                            for (let i = 0; i <= arcSegments; i++) {
+                                                const angle = (i / arcSegments) * 2 * Math.PI;
+                                                const px = centerXInClipped + ellipseRx * Math.cos(angle);
+                                                const py = centerYInClipped + ellipseRy * Math.sin(angle);
+                                                const isInside = px >= -0.5 && px <= w + 0.5 && py >= -0.5 && py <= h + 0.5;
+                                                if (i > 0) {
+                                                    const prevAngle = ((i - 1) / arcSegments) * 2 * Math.PI;
+                                                    const prevPx = centerXInClipped + ellipseRx * Math.cos(prevAngle);
+                                                    const prevPy = centerYInClipped + ellipseRy * Math.sin(prevAngle);
+                                                    const prevInside = prevPx >= -0.5 && prevPx <= w + 0.5 && prevPy >= -0.5 && prevPy <= h + 0.5;
+                                                    // Crossing boundary - find intersection
+                                                    if (isInside !== prevInside) {
+                                                        // Binary search for exact crossing point
+                                                        let lowT = 0, highT = 1;
+                                                        for (let iter = 0; iter < 10; iter++) {
+                                                            const midT = (lowT + highT) / 2;
+                                                            const midAngle = prevAngle + midT * (angle - prevAngle);
+                                                            const midPx = centerXInClipped + ellipseRx * Math.cos(midAngle);
+                                                            const midPy = centerYInClipped + ellipseRy * Math.sin(midAngle);
+                                                            const midInside = midPx >= -0.5 && midPx <= w + 0.5 && midPy >= -0.5 && midPy <= h + 0.5;
+                                                            if (midInside === prevInside)
+                                                                lowT = midT;
+                                                            else
+                                                                highT = midT;
+                                                        }
+                                                        const crossT = (lowT + highT) / 2;
+                                                        const crossAngle = prevAngle + crossT * (angle - prevAngle);
+                                                        const crossPx = centerXInClipped + ellipseRx * Math.cos(crossAngle);
+                                                        const crossPy = centerYInClipped + ellipseRy * Math.sin(crossAngle);
+                                                        // Determine which edge we crossed
+                                                        let edge = '';
+                                                        if (Math.abs(crossPy) < 1)
+                                                            edge = 'top';
+                                                        else if (Math.abs(crossPy - h) < 1)
+                                                            edge = 'bottom';
+                                                        else if (Math.abs(crossPx) < 1)
+                                                            edge = 'left';
+                                                        else if (Math.abs(crossPx - w) < 1)
+                                                            edge = 'right';
+                                                        pathPoints.push({
+                                                            x: Math.max(0, Math.min(w, crossPx)),
+                                                            y: Math.max(0, Math.min(h, crossPy)),
+                                                            angle: crossAngle,
+                                                            isEntry: isInside,
+                                                            isExit: !isInside,
+                                                            edge
+                                                        });
+                                                    }
+                                                }
+                                                if (isInside) {
+                                                    pathPoints.push({
+                                                        x: Math.max(0, Math.min(w, px)),
+                                                        y: Math.max(0, Math.min(h, py)),
+                                                        angle
+                                                    });
+                                                }
+                                            }
+                                            if (pathPoints.length >= 3) {
+                                                if (DEBUG_OVERFLOW) {
+                                                    console.log('[OverflowClip] pathPoints count:', pathPoints.length);
+                                                    const entryPt = pathPoints.find(p => p.isEntry);
+                                                    const exitPt = pathPoints.find(p => p.isExit);
+                                                    console.log('[OverflowClip] entry:', entryPt);
+                                                    console.log('[OverflowClip] exit:', exitPt);
+                                                }
+                                                // Build the final path: arc points + boundary edges
+                                                const finalPoints = [];
+                                                // Add all path points (the arc)
+                                                for (const p of pathPoints) {
+                                                    // Skip duplicates
+                                                    if (finalPoints.length > 0) {
+                                                        const last = finalPoints[finalPoints.length - 1];
+                                                        if (Math.abs(p.x - last.x) < 0.5 && Math.abs(p.y - last.y) < 0.5)
+                                                            continue;
+                                                    }
+                                                    finalPoints.push({ x: p.x, y: p.y });
+                                                }
+                                                // Now close the path by following the clip boundary
+                                                // From the last point (exit) back to the first point (entry)
+                                                if (finalPoints.length >= 2) {
+                                                    // If exit and entry are on different edges, add corner points
+                                                    const exitEdge = pathPoints.find(p => p.isExit)?.edge;
+                                                    const entryEdge = pathPoints.find(p => p.isEntry)?.edge;
+                                                    if (exitEdge && entryEdge && exitEdge !== entryEdge) {
+                                                        // Add corner point(s) to connect the edges
+                                                        // Order: top -> right -> bottom -> left -> top (clockwise)
+                                                        const edgeOrder = ['top', 'right', 'bottom', 'left'];
+                                                        // Define which corners are rounded (overlapped by element)
+                                                        const cornerHasArc = {
+                                                            'top-right': overlapsTR && r > 0,
+                                                            'right-bottom': overlapsBR && r > 0,
+                                                            'bottom-left': overlapsBL && r > 0,
+                                                            'left-top': overlapsTL && r > 0
+                                                        };
+                                                        // Corner positions in element-local coordinates
+                                                        // The element is positioned at (clippedRelLeft, clippedRelTop) relative to ancestor
+                                                        const cornerPositions = {
+                                                            'top-right': {
+                                                                x: ancestorRect.width - clippedRelLeft,
+                                                                y: 0,
+                                                                arcCenterX: ancestorRect.width - r - clippedRelLeft,
+                                                                arcCenterY: r - clippedRelTop
+                                                            },
+                                                            'right-bottom': {
+                                                                x: ancestorRect.width - clippedRelLeft,
+                                                                y: ancestorRect.height - clippedRelTop,
+                                                                arcCenterX: ancestorRect.width - r - clippedRelLeft,
+                                                                arcCenterY: ancestorRect.height - r - clippedRelTop
+                                                            },
+                                                            'bottom-left': {
+                                                                x: 0 - clippedRelLeft,
+                                                                y: ancestorRect.height - clippedRelTop,
+                                                                arcCenterX: r - clippedRelLeft,
+                                                                arcCenterY: ancestorRect.height - r - clippedRelTop
+                                                            },
+                                                            'left-top': {
+                                                                x: 0 - clippedRelLeft,
+                                                                y: 0,
+                                                                arcCenterX: r - clippedRelLeft,
+                                                                arcCenterY: r - clippedRelTop
+                                                            }
+                                                        };
+                                                        let exitIdx = edgeOrder.indexOf(exitEdge);
+                                                        const entryIdxTarget = edgeOrder.indexOf(entryEdge);
+                                                        // Walk clockwise from exit to entry, adding corners or arcs
+                                                        while (exitIdx !== entryIdxTarget) {
+                                                            const nextIdx = (exitIdx + 1) % 4;
+                                                            const cornerKey = `${edgeOrder[exitIdx]}-${edgeOrder[nextIdx]}`;
+                                                            const hasArc = cornerHasArc[cornerKey];
+                                                            const cornerPos = cornerPositions[cornerKey];
+                                                            if (hasArc && cornerPos) {
+                                                                // Add arc points along the parent's corner
+                                                                const arcCX = cornerPos.arcCenterX;
+                                                                const arcCY = cornerPos.arcCenterY;
+                                                                const arcSegs = 8;
+                                                                // Determine start and end angles for this corner arc
+                                                                // top-right: arc from top (270°) to right (0°)
+                                                                // right-bottom: arc from right (0°) to bottom (90°)
+                                                                // bottom-left: arc from bottom (90°) to left (180°)
+                                                                // left-top: arc from left (180°) to top (270°)
+                                                                let startAngle, endAngle;
+                                                                switch (cornerKey) {
+                                                                    case 'top-right':
+                                                                        startAngle = -Math.PI / 2; // top (-90° = 270°)
+                                                                        endAngle = 0; // right
+                                                                        break;
+                                                                    case 'right-bottom':
+                                                                        startAngle = 0; // right
+                                                                        endAngle = Math.PI / 2; // bottom
+                                                                        break;
+                                                                    case 'bottom-left':
+                                                                        startAngle = Math.PI / 2; // bottom
+                                                                        endAngle = Math.PI; // left
+                                                                        break;
+                                                                    case 'left-top':
+                                                                        startAngle = Math.PI; // left
+                                                                        endAngle = Math.PI * 1.5; // top (270°)
+                                                                        break;
+                                                                    default:
+                                                                        startAngle = 0;
+                                                                        endAngle = Math.PI / 2;
+                                                                }
+                                                                // Generate arc points
+                                                                for (let ai = 0; ai <= arcSegs; ai++) {
+                                                                    const t = ai / arcSegs;
+                                                                    const angle = startAngle + t * (endAngle - startAngle);
+                                                                    const arcX = arcCX + r * Math.cos(angle);
+                                                                    const arcY = arcCY + r * Math.sin(angle);
+                                                                    // Only add if within element bounds
+                                                                    if (arcX >= -0.5 && arcX <= w + 0.5 && arcY >= -0.5 && arcY <= h + 0.5) {
+                                                                        const clampedX = Math.max(0, Math.min(w, arcX));
+                                                                        const clampedY = Math.max(0, Math.min(h, arcY));
+                                                                        // Skip if too close to last point
+                                                                        if (finalPoints.length > 0) {
+                                                                            const last = finalPoints[finalPoints.length - 1];
+                                                                            if (Math.abs(clampedX - last.x) < 0.5 && Math.abs(clampedY - last.y) < 0.5)
+                                                                                continue;
+                                                                        }
+                                                                        finalPoints.push({ x: clampedX, y: clampedY });
+                                                                    }
+                                                                }
+                                                            }
+                                                            else if (cornerPos) {
+                                                                // Add single corner point for non-rounded corner
+                                                                const clampedX = Math.max(0, Math.min(w, cornerPos.x));
+                                                                const clampedY = Math.max(0, Math.min(h, cornerPos.y));
+                                                                finalPoints.push({ x: clampedX, y: clampedY });
+                                                            }
+                                                            exitIdx = nextIdx;
+                                                        }
+                                                    }
+                                                }
+                                                // Convert to EMU and create path
+                                                if (finalPoints.length >= 3) {
+                                                    if (DEBUG_OVERFLOW) {
+                                                        console.log('[OverflowClip] finalPoints count:', finalPoints.length);
+                                                        console.log('[OverflowClip] first 3 points:', JSON.stringify(finalPoints.slice(0, 3)));
+                                                        console.log('[OverflowClip] last 3 points:', JSON.stringify(finalPoints.slice(-3)));
+                                                    }
+                                                    for (let i = 0; i < finalPoints.length; i++) {
+                                                        points.push({
+                                                            x: Math.round(finalPoints[i].x * EMU_PER_PX),
+                                                            y: Math.round(finalPoints[i].y * EMU_PER_PX),
+                                                            ...(i === 0 ? { moveTo: true } : {})
+                                                        });
+                                                    }
+                                                    points.push({ x: points[0].x, y: points[0].y, close: true });
+                                                }
+                                            }
+                                        }
+                                        else if (!isEllipse) {
+                                            // Non-circular element: use parent arcs for overlapping corners,
+                                            // element's own border-radius for non-overlapping corners
+                                            // Get the element's own border-radius (for corners not clipped by parent)
+                                            const elementBorderRadius = parseFloat(borderRadiusStr) || 0;
+                                            const elemR = elementBorderRadius;
+                                            // Helper function to add element's own corner arc (for non-clipped corners)
+                                            // The path goes clockwise: TL → (down left edge) → BL → (along bottom) → BR → (up right edge) → TR → (along top) → back to TL
+                                            const addElementCornerArc = (isRight, isBottom) => {
+                                                if (elemR <= 0)
+                                                    return; // No radius, skip
+                                                for (let i = 0; i <= segments; i++) {
+                                                    const t = i / segments;
+                                                    const angle = t * Math.PI / 2;
+                                                    let arcX, arcY;
+                                                    if (!isRight && !isBottom) {
+                                                        // TL corner: arc from (elemR, 0) to (0, elemR) - going clockwise
+                                                        // Center at (elemR, elemR), radius elemR
+                                                        // At t=0: angle=0, point at (elemR, 0)
+                                                        // At t=1: angle=90°, point at (0, elemR)
+                                                        arcX = elemR * Math.cos(angle);
+                                                        arcY = elemR * Math.sin(angle);
+                                                    }
+                                                    else if (!isRight && isBottom) {
+                                                        // BL corner: arc from (0, h-elemR) to (elemR, h) - going clockwise
+                                                        // Center at (elemR, h-elemR), radius elemR
+                                                        // At t=0: angle=180°, point at (0, h-elemR)
+                                                        // At t=1: angle=270°, point at (elemR, h)
+                                                        arcX = elemR - elemR * Math.cos(angle);
+                                                        arcY = (h - elemR) + elemR * Math.sin(angle);
+                                                    }
+                                                    else if (isRight && isBottom) {
+                                                        // BR corner: arc from (w-elemR, h) to (w, h-elemR) - going clockwise
+                                                        // Center at (w-elemR, h-elemR), radius elemR
+                                                        // At t=0: angle=90°, point at (w-elemR, h)
+                                                        // At t=1: angle=0°, point at (w, h-elemR)
+                                                        arcX = (w - elemR) + elemR * Math.sin(angle);
+                                                        arcY = (h - elemR) + elemR * Math.cos(angle);
+                                                    }
+                                                    else {
+                                                        // TR corner: arc from (w, elemR) to (w-elemR, 0) - going clockwise
+                                                        // Center at (w-elemR, elemR), radius elemR
+                                                        // At t=0: angle=0°, point at (w, elemR)
+                                                        // At t=1: angle=-90°, point at (w-elemR, 0)
+                                                        arcX = (w - elemR) + elemR * Math.cos(angle);
+                                                        arcY = elemR - elemR * Math.sin(angle);
+                                                    }
+                                                    points.push({
+                                                        x: Math.round(arcX * EMU_PER_PX),
+                                                        y: Math.round(arcY * EMU_PER_PX),
+                                                        ...(points.length === 0 ? { moveTo: true } : {})
+                                                    });
+                                                }
+                                            };
+                                            // Start at top-left: either parent arc (if overlapping) or element's own arc
+                                            // Only apply element's own border-radius if the corner is NOT at the clip boundary
+                                            // (i.e., the element wasn't clipped at that edge)
+                                            const atLeftClipBoundary = wasClippedToParent && clippedRelLeft <= 0.1;
+                                            const atTopClipBoundary = wasClippedToParent && clippedRelTop <= 0.1;
+                                            const atRightClipBoundary = wasClippedToParent && clippedRelRight >= ancestorRect.width - 0.1;
+                                            const atBottomClipBoundary = wasClippedToParent && clippedRelBottom >= ancestorRect.height - 0.1;
+                                            if (overlapsTL) {
+                                                // Arc from (r, 0) -> (0, r) going counter-clockwise
+                                                addCornerArc(0, 0, false, false, true);
+                                            }
+                                            else if (elemR > 0 && !atLeftClipBoundary && !atTopClipBoundary) {
+                                                // Use element's own border-radius for TL corner (only if not at clip boundary)
+                                                addElementCornerArc(false, false);
+                                            }
+                                            else {
+                                                points.push({ x: 0, y: 0, moveTo: true });
+                                            }
+                                            // Continue down the left edge to bottom-left
+                                            if (overlapsBL) {
+                                                // Arc from (0, h-r) -> (r, h) going counter-clockwise
+                                                addCornerArc(0, ancestorRect.height, false, true, true);
+                                            }
+                                            else if (elemR > 0 && !atLeftClipBoundary && !atBottomClipBoundary) {
+                                                // Use element's own border-radius for BL corner (only if not at clip boundary)
+                                                addElementCornerArc(false, true);
+                                            }
+                                            else {
+                                                points.push({ x: 0, y: heightEmu });
+                                            }
+                                            // Continue along bottom edge to bottom-right
+                                            if (overlapsBR) {
+                                                // Arc from (w-r, h) -> (w, h-r) going counter-clockwise
+                                                addCornerArc(ancestorRect.width, ancestorRect.height, true, true, true);
+                                            }
+                                            else if (elemR > 0 && !atRightClipBoundary && !atBottomClipBoundary) {
+                                                // Use element's own border-radius for BR corner (only if not at clip boundary)
+                                                addElementCornerArc(true, true);
+                                            }
+                                            else {
+                                                points.push({ x: widthEmu, y: heightEmu });
+                                            }
+                                            // Continue up the right edge to top-right
+                                            if (overlapsTR) {
+                                                // Arc from (w, r) -> (w-r, 0) going counter-clockwise
+                                                addCornerArc(ancestorRect.width, 0, true, false, true);
+                                            }
+                                            else if (elemR > 0 && !atRightClipBoundary && !atTopClipBoundary) {
+                                                // Use element's own border-radius for TR corner (only if not at clip boundary)
+                                                addElementCornerArc(true, false);
+                                            }
+                                            else {
+                                                points.push({ x: widthEmu, y: 0 });
+                                            }
+                                            // Close the path back to top-left
+                                            points.push({ x: 0, y: 0, close: true });
+                                        }
+                                        // else: isEllipse but not clipped - don't need custom geometry
+                                        // Only use custom geometry if we have meaningful arc clipping
+                                        if (points.length > 5) {
+                                            overflowClipGeometry = points;
+                                            if (DEBUG_OVERFLOW)
+                                                console.log('[OverflowClip] Generated custom geometry with', points.length, 'points');
+                                        }
+                                        else {
+                                            if (DEBUG_OVERFLOW)
+                                                console.log('[OverflowClip] Not enough points for custom geometry:', points.length);
+                                        }
+                                    }
+                                }
+                                break; // Found the clipping ancestor
+                            }
+                            overflowAncestor = overflowAncestor.parentElement;
+                        }
+                        // If shape was clipped to parent bounds, use clipped dimensions
+                        // but remember original dimensions for visibility calculations
+                        let originalShapeW = shapeW;
+                        let originalShapeH = shapeH;
+                        if (wasClippedToParent) {
+                            originalShapeW = shapeW; // shapeW before update is original from getBoundingClientRect
+                            originalShapeH = shapeH;
+                            shapeX = clippedShapeX;
+                            shapeY = clippedShapeY;
+                            shapeW = clippedShapeW;
+                            shapeH = clippedShapeH;
+                        }
+                        // When we have overflow clipping geometry AND text, we need to:
+                        // 1. Create the shape without text (fill/geometry only)
+                        // 2. Create a separate text shape with the same clipping geometry
+                        // This is because PPTX text in shapes is not clipped by custom geometry
+                        const hasTextContent = shapeText || (shapeTextRuns && shapeTextRuns.length > 0);
+                        const shouldSplitTextFromClippedShape = overflowClipGeometry && hasTextContent;
                         const shapeElement = {
                             type: 'shape',
-                            text: shapeText,
-                            textRuns: shapeTextRuns,
-                            style: shapeStyle,
+                            // If splitting text from clipped shape, don't include text in the main shape
+                            text: shouldSplitTextFromClippedShape ? '' : shapeText,
+                            textRuns: shouldSplitTextFromClippedShape ? null : shapeTextRuns,
+                            style: shouldSplitTextFromClippedShape ? null : shapeStyle,
                             position: {
                                 x: pxToInch(shapeX),
                                 y: pxToInch(shapeY),
@@ -3340,7 +6232,8 @@ export function parseSlideHtml(doc) {
                                 isEllipse: isEllipse,
                                 softEdge: softEdgePt,
                                 rotate: rotationAngle,
-                                customGeometry: clipPathPolygon ? (() => {
+                                cssTriangle: null,
+                                customGeometry: overflowClipGeometry ? overflowClipGeometry : (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.
@@ -3357,15 +6250,18 @@ export function parseSlideHtml(doc) {
                                     });
                                     points.push({ x: 0, y: 0, close: true });
                                     return points;
-                                })() : null,
+                                })() : null),
                             },
+                            zIndex: extractZIndex(computed),
                         };
                         // 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
+                            // we need to increase the left inset to account for the sibling element width + gap.
+                            // BUT: Skip this for mixed inline content (e.g., "Plan: <span>1 to add</span>, <span>1 to change</span>")
+                            // because the spans are PART of the text runs, not separate icons to offset past.
                             let effectiveLeftPadding = paddingLeft;
-                            if (hasDirectText && allChildren.length > 0) {
+                            if (hasDirectText && allChildren.length > 0 && !hasMixedInlineContent) {
                                 // Find preceding sibling elements and calculate total width + gap
                                 for (const child of allChildren) {
                                     if (child.nodeType === Node.ELEMENT_NODE) {
@@ -3391,6 +6287,83 @@ export function parseSlideHtml(doc) {
                             ];
                         }
                         elements.push(shapeElement);
+                        // When text children exist but weren't merged into the shape (shouldMergeText=false),
+                        // un-process them so they can be extracted independently by their tag handlers.
+                        // This handles cases like code cards with PRE elements that have sibling DIVs.
+                        if (!shouldMergeText && textChildren.length > 0) {
+                            textChildren.forEach(tc => {
+                                processed.delete(tc);
+                                tc.querySelectorAll('*').forEach(desc => processed.delete(desc));
+                            });
+                        }
+                        // If we split text from a clipped shape, create a separate text-only shape
+                        // Note: PPTX does NOT clip text to custom geometry paths - text is rendered
+                        // within the bounding box regardless of the path shape. So we DON'T apply
+                        // custom geometry to the text shape. Instead, we use the clipped rectangular
+                        // bounds to constrain the text area to the visible portion.
+                        //
+                        // If the visible area is too small (less than 50% of original), skip the text
+                        // entirely as it won't display properly and will overflow the visible region.
+                        if (shouldSplitTextFromClippedShape && overflowClipGeometry) {
+                            // Calculate what percentage of the original shape is visible
+                            const originalArea = originalShapeW * originalShapeH;
+                            const clippedArea = clippedShapeW * clippedShapeH;
+                            const visiblePercent = (clippedArea / originalArea) * 100;
+                            if (DEBUG_OVERFLOW)
+                                console.log('[OverflowClip] Text shape visibility:', {
+                                    originalShapeW, originalShapeH, originalArea,
+                                    clippedShapeW, clippedShapeH, clippedArea,
+                                    visiblePercent: visiblePercent.toFixed(1) + '%'
+                                });
+                            // Only show text if at least 50% of the shape is visible
+                            // This prevents text from overflowing small visible areas
+                            if (visiblePercent >= 50) {
+                                // Use the clipped dimensions (visible area) for the text shape
+                                const clippedTextShape = {
+                                    type: 'shape',
+                                    text: shapeText,
+                                    textRuns: shapeTextRuns,
+                                    style: shapeStyle,
+                                    position: {
+                                        // Use clipped dimensions to constrain text to visible area
+                                        x: pxToInch(clippedShapeX),
+                                        y: pxToInch(clippedShapeY),
+                                        w: pxToInch(clippedShapeW),
+                                        h: pxToInch(clippedShapeH),
+                                    },
+                                    shape: {
+                                        fill: null, // No fill - just text
+                                        gradient: null,
+                                        transparency: null,
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: null,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        cssTriangle: null,
+                                        customGeometry: null, // NO custom geometry - PPTX doesn't clip text to paths
+                                    },
+                                };
+                                // Apply CSS padding as text body insets
+                                if (hasPadding && clippedTextShape.style) {
+                                    clippedTextShape.style.margin = [
+                                        paddingLeft * PT_PER_PX, // left
+                                        paddingRight * PT_PER_PX, // right
+                                        paddingBottom * PT_PER_PX, // bottom
+                                        paddingTop * PT_PER_PX, // top
+                                    ];
+                                }
+                                elements.push(clippedTextShape);
+                                if (DEBUG_OVERFLOW)
+                                    console.log('[OverflowClip] Created separate clipped text shape for:', shapeText);
+                            }
+                            else {
+                                if (DEBUG_OVERFLOW)
+                                    console.log('[OverflowClip] Skipping text (visible area too small):', shapeText);
+                            }
+                        }
                         // Add additional shape elements for extra gradient layers (multiple CSS background gradients)
                         if (extraDivGradients.length > 0) {
                             for (const extraGrad of extraDivGradients) {
@@ -3411,6 +6384,7 @@ export function parseSlideHtml(doc) {
                                         isEllipse: false,
                                         softEdge: null,
                                         rotate: null,
+                                        cssTriangle: null,
                                         customGeometry: null,
                                     },
                                 };
@@ -3458,6 +6432,7 @@ export function parseSlideHtml(doc) {
                                 isEllipse: false,
                                 softEdge: null,
                                 rotate: null,
+                                cssTriangle: null,
                                 customGeometry: null,
                             },
                         };
@@ -3475,7 +6450,7 @@ export function parseSlideHtml(doc) {
                             tc.querySelectorAll('*').forEach(desc => processed.delete(desc));
                         });
                     }
-                    elements.push(...borderLines);
+                    elements.push(...borderShapes);
                     processed.add(el);
                     return;
                 }
@@ -3640,16 +6615,37 @@ export function parseSlideHtml(doc) {
                         const isFlexColumn = (plainDivDisplay === 'flex' || plainDivDisplay === 'inline-flex') &&
                             (plainDivFlexDir === 'column' || plainDivFlexDir === 'column-reverse') &&
                             childElements.length > 1;
+                        // Define baseRunOptions outside the if block so it's available for all text extraction paths
+                        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;
+                        // Add transparency from color alpha or element-level opacity
+                        // Use getEffectiveOpacity to accumulate opacity from all ancestors
+                        // (CSS opacity doesn't inherit - child elements report opacity:1 even if parent is 0.2)
+                        const colorAlphaTransparency = extractAlpha(computed2.color);
+                        const elementOpacityVal = getEffectiveOpacity(el, win);
+                        if (colorAlphaTransparency !== null || elementOpacityVal < 1) {
+                            // Start with color alpha transparency if present
+                            let runTransparency = colorAlphaTransparency !== null ? colorAlphaTransparency : 0;
+                            // If effective opacity < 1, combine with color alpha
+                            if (elementOpacityVal < 1) {
+                                // opacity (0-1) to transparency (0-100): transparency = (1 - opacity) * 100
+                                // Combine: final_opacity = existing_opacity * element_opacity
+                                const existingOpacity = 1 - (runTransparency / 100);
+                                const combinedOpacity = existingOpacity * elementOpacityVal;
+                                runTransparency = Math.round((1 - combinedOpacity) * 100);
+                            }
+                            if (runTransparency > 0) {
+                                baseRunOptions.transparency = runTransparency;
+                            }
+                        }
                         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') {
@@ -3679,6 +6675,14 @@ export function parseSlideHtml(doc) {
                                     const childColor = rgbToHex(childComputed.color);
                                     if (childColor)
                                         childRunOptions.color = childColor;
+                                    const childColorTransparency = extractAlpha(childComputed.color);
+                                    if (childColorTransparency !== null) {
+                                        childRunOptions.transparency = childColorTransparency;
+                                    }
+                                    else {
+                                        // Clear any inherited transparency if child color is fully opaque
+                                        delete childRunOptions.transparency;
+                                    }
                                     if (parseInt(childComputed.fontWeight) >= 600) {
                                         childRunOptions.bold = true;
                                     }
@@ -3704,15 +6708,17 @@ export function parseSlideHtml(doc) {
                                 }
                             }
                             else {
-                                textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win);
+                                // Check if whitespace should be preserved (white-space: pre or monospace font)
+                                const elPreserveWs = shouldPreserveWhitespace(computed2);
+                                textRuns = parseInlineFormatting(el, baseRunOptions, [], textTransformFn, win, elPreserveWs);
                             }
                             // Fallback to single run if parseInlineFormatting produced nothing
                             if (textRuns.length === 0) {
-                                textRuns = [{ text: extractedText, options: {} }];
+                                textRuns = [{ text: extractedText, options: baseRunOptions }];
                             }
                         }
                         else {
-                            textRuns = [{ text: extractedText, options: {} }];
+                            textRuns = [{ text: extractedText, options: baseRunOptions }];
                         }
                         // Extract padding from computed style for PPTX margin/inset
                         const paddingTop = parseFloat(computed2.paddingTop) || 0;
@@ -3747,10 +6753,11 @@ export function parseSlideHtml(doc) {
                                     : undefined,
                             },
                         };
-                        // Check for text transparency
-                        const textTransparency = extractAlpha(computed2.color);
-                        if (textTransparency !== null) {
-                            textElement.style.transparency = textTransparency;
+                        // Set element-level transparency (computed from color alpha + CSS opacity)
+                        // This mirrors what we set in baseRunOptions.transparency but also
+                        // makes it available on the element style for convert.ts
+                        if (baseRunOptions.transparency !== undefined && baseRunOptions.transparency > 0) {
+                            textElement.style.transparency = baseRunOptions.transparency;
                         }
                         // Check for letter-spacing
                         const ls = extractLetterSpacing(computed2);
@@ -3828,7 +6835,9 @@ export function parseSlideHtml(doc) {
                     // Get the text content, offset by padding-left
                     const textLeft = liRect.left + liPaddingLeft;
                     const textWidth = liRect.width - liPaddingLeft;
-                    const runs = parseInlineFormatting(liEl, { breakLine: false }, [], (x) => x, win);
+                    // Check if whitespace should be preserved (white-space: pre or monospace font)
+                    const liPreserveWs = shouldPreserveWhitespace(liComputed);
+                    const runs = parseInlineFormatting(liEl, { breakLine: false }, [], (x) => x, win, liPreserveWs);
                     if (runs.length === 0)
                         return;
                     // Strip any leading bullet characters that might have been left over
@@ -3862,7 +6871,11 @@ export function parseSlideHtml(doc) {
             }
             liElements.forEach((li, idx) => {
                 const isLast = idx === liElements.length - 1;
-                const runs = parseInlineFormatting(li, { breakLine: false }, [], (x) => x, win);
+                // Check if whitespace should be preserved (white-space: pre or monospace font)
+                const liEl = li;
+                const liItemComputed = win.getComputedStyle(liEl);
+                const liItemPreserveWs = shouldPreserveWhitespace(liItemComputed);
+                const runs = parseInlineFormatting(li, { breakLine: false }, [], (x) => x, win, liItemPreserveWs);
                 if (runs.length > 0) {
                     runs[0].text = runs[0].text.replace(/^[•\-*\u25AA\u25B8]\s*/, '');
                     if (hasNativeBullets) {
@@ -3913,9 +6926,56 @@ export function parseSlideHtml(doc) {
             return;
         let rect = htmlEl.getBoundingClientRect();
         const computed = win.getComputedStyle(el);
-        let text = getTransformedText(htmlEl, computed);
+        // For P elements wrapped by transform.ts, check if parent DIV has a monospace font
+        // This affects whether whitespace should be preserved (leading spaces/indentation)
+        let effectiveComputedForWhitespace = computed;
+        const pParentEl = htmlEl.parentElement;
+        if (el.tagName === 'P' && pParentEl && pParentEl.tagName === 'DIV') {
+            const pParentChildren = Array.from(pParentEl.children);
+            const nonBrChildren = pParentChildren.filter(c => c.tagName !== 'BR');
+            if (nonBrChildren.length === 1 && nonBrChildren[0] === el) {
+                // This P is a transform.ts wrapper - check if parent has monospace font
+                const pParentComputed = win.getComputedStyle(pParentEl);
+                if (isMonospaceFont(pParentComputed.fontFamily)) {
+                    // Use parent's computed style for whitespace preservation check
+                    effectiveComputedForWhitespace = pParentComputed;
+                }
+            }
+        }
+        let text = getTransformedText(htmlEl, effectiveComputedForWhitespace);
         if (rect.width === 0 || rect.height === 0 || !text)
             return;
+        // For P elements wrapped by transform.ts, line-height/font-size may be on the parent DIV
+        // (CSS line-height on a parent DIV affects text rendering but P's computed style may differ)
+        let effectiveFontSizeForOverflow = computed.fontSize;
+        let effectiveLineHeightForOverflow = computed.lineHeight;
+        if (el.tagName === 'P' && pParentEl && pParentEl.tagName === 'DIV') {
+            const pParentChildren = Array.from(pParentEl.children);
+            const nonBrChildren = pParentChildren.filter(c => c.tagName !== 'BR');
+            if (nonBrChildren.length === 1 && nonBrChildren[0] === el) {
+                // This P is a transform.ts wrapper - use parent's line-height and font-size
+                const pParentComputedForOverflow = win.getComputedStyle(pParentEl);
+                effectiveFontSizeForOverflow = pParentComputedForOverflow.fontSize;
+                effectiveLineHeightForOverflow = pParentComputedForOverflow.lineHeight;
+            }
+        }
+        // When line-height is smaller than font-size, text can overflow its container box
+        // both upward and downward. We need to:
+        // 1. Expand the box height to fit the actual font size
+        // 2. Shift the y-position DOWN by the overflow amount so the text doesn't overlap with elements above
+        // The overflow amount is (font-size - line-height) because the glyph extends beyond the line box
+        const earlyFontSizePx = parseFloat(effectiveFontSizeForOverflow);
+        const earlyLineHeightPx = parseFloat(effectiveLineHeightForOverflow);
+        if (!isNaN(earlyFontSizePx) && !isNaN(earlyLineHeightPx) && earlyLineHeightPx < earlyFontSizePx) {
+            // Calculate the overflow: when line-height < font-size, text extends beyond the line box
+            // We shift down by the full difference to ensure no overlap with elements above
+            const lineHeightOverflowOffsetPx = earlyFontSizePx - earlyLineHeightPx;
+            // Expand the rect height to fit the font (1.3x font size for breathing room)
+            const minHeightPx = earlyFontSizePx * 1.3;
+            const newHeight = Math.max(rect.height, minHeightPx);
+            // Shift the y-position down by the overflow amount
+            rect = new DOMRect(rect.x, rect.y + lineHeightOverflowOffsetPx, rect.width, newHeight);
+        }
         // 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.
@@ -4034,13 +7094,64 @@ export function parseSlideHtml(doc) {
                 valign = 'middle';
             }
         }
+        // When line-height is smaller than font-size, text can overflow its container box.
+        // Set valign to 'top' to anchor text at the top of the box, so any visual overflow
+        // goes downward instead of upward (preventing overlap with elements above).
+        // Note: The box height expansion is done earlier, before getPositionAndSize().
+        // Use effective values from parent DIV for P elements wrapped by transform.ts.
+        if (!isNaN(earlyFontSizePx) && !isNaN(earlyLineHeightPx) && earlyLineHeightPx < earlyFontSizePx) {
+            valign = 'top';
+        }
+        // For P elements that are the only child of a DIV (transform.ts wrapping pattern),
+        // check if the parent DIV has a different explicit color, font, or font-size.
+        // If so, prefer the parent's values to avoid CSS rules like ".container p { color: X; font-family: Y; font-size: Z }"
+        // overriding the intended styling from the parent DIV's class (e.g., ".code-block { font-family: Consolas; font-size: 10.5px }").
+        let effectiveColor = computed.color;
+        let effectiveFontFamily = computed.fontFamily;
+        let effectiveFontSize = computed.fontSize;
+        if (el.tagName === 'P' && parentEl && parentEl.tagName === 'DIV') {
+            // Check if this P is the only significant child of the parent DIV
+            const parentChildren = Array.from(parentEl.children);
+            const nonBrChildren = parentChildren.filter(c => c.tagName !== 'BR');
+            if (nonBrChildren.length === 1 && nonBrChildren[0] === el) {
+                // This P is a transform.ts wrapper - check parent's color and font
+                const parentComputed = win.getComputedStyle(parentEl);
+                // The parent DIV's color may be different if it has an explicit color class/style
+                // Only override if parent's color is different from P's color AND parent's color
+                // is not the default black (which indicates no explicit color on parent)
+                if (parentComputed.color !== computed.color &&
+                    parentComputed.color !== 'rgb(0, 0, 0)') {
+                    effectiveColor = parentComputed.color;
+                }
+                // Similarly for font-family: if the parent has a different font (especially monospace
+                // for code blocks), prefer the parent's font. This handles cases where CSS rules like
+                // ".gh-body p { font-family: Calibri }" override ".code-block { font-family: Consolas }"
+                if (parentComputed.fontFamily !== computed.fontFamily) {
+                    // Check if parent has a monospace font - these typically indicate code blocks
+                    // where the font is intentionally different from body text
+                    if (isMonospaceFont(parentComputed.fontFamily)) {
+                        effectiveFontFamily = parentComputed.fontFamily;
+                    }
+                }
+                // Similarly for font-size: if the parent has a different font-size and uses a monospace font,
+                // prefer the parent's font-size. This handles CSS rules like ".gh-body p { font-size: 13px }"
+                // overriding ".code-block { font-size: 10.5px }" for P elements inserted by transform.ts.
+                if (parentComputed.fontSize !== computed.fontSize) {
+                    // Check if parent has a monospace font - these typically indicate code blocks
+                    // where font-size is intentionally smaller/specific
+                    if (isMonospaceFont(parentComputed.fontFamily)) {
+                        effectiveFontSize = parentComputed.fontSize;
+                    }
+                }
+            }
+        }
         const baseStyle = {
-            fontSize: pxToPoints(computed.fontSize),
-            fontFace: extractFontFace(computed.fontFamily),
-            color: rgbToHex(computed.color),
+            fontSize: pxToPoints(effectiveFontSize),
+            fontFace: extractFontFace(effectiveFontFamily),
+            color: rgbToHex(effectiveColor),
             align: textAlign,
             valign: valign,
-            lineSpacing: pxToPoints(computed.fontSize) * lineHeightMultiplier,
+            lineSpacing: pxToPoints(effectiveFontSize) * lineHeightMultiplier,
             paraSpaceBefore: pxToPoints(computed.marginTop),
             paraSpaceAfter: pxToPoints(computed.marginBottom),
             margin: [
@@ -4050,9 +7161,25 @@ export function parseSlideHtml(doc) {
                 pxToPoints(computed.paddingTop),
             ],
         };
-        const transparency = extractAlpha(computed.color);
-        if (transparency !== null)
-            baseStyle.transparency = transparency;
+        // Extract transparency from color alpha and CSS opacity
+        // Use getEffectiveOpacity to accumulate opacity from all ancestors
+        // (CSS opacity doesn't inherit - child elements report opacity:1 even if parent is 0.2)
+        const colorAlphaTransparency = extractAlpha(effectiveColor);
+        const effectiveOpacity = getEffectiveOpacity(el, win);
+        if (colorAlphaTransparency !== null || effectiveOpacity < 1) {
+            // Start with color alpha transparency if present
+            let finalTransparency = colorAlphaTransparency !== null ? colorAlphaTransparency : 0;
+            // If effective opacity < 1, combine with color alpha
+            if (effectiveOpacity < 1) {
+                // Combine: final_opacity = existing_opacity * element_opacity
+                const existingOpacity = 1 - (finalTransparency / 100);
+                const combinedOpacity = existingOpacity * effectiveOpacity;
+                finalTransparency = Math.round((1 - combinedOpacity) * 100);
+            }
+            if (finalTransparency > 0) {
+                baseStyle.transparency = finalTransparency;
+            }
+        }
         const letterSpacing = extractLetterSpacing(computed);
         if (letterSpacing !== null)
             baseStyle.charSpacing = letterSpacing;
@@ -4087,10 +7214,27 @@ export function parseSlideHtml(doc) {
         // scope formatting checks & parseInlineFormatting to that child so
         // text from shape-children (e.g. numbered circles) isn't duplicated.
         const formattingRoot = flexContentChild ?? el;
-        const hasFormatting = formattingRoot.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');
+        // Include DIV and P in the hasFormatting check because nested block elements
+        // can have different styling (e.g., .data-value with bold/larger font vs
+        // .data-desc with muted color/smaller font). Without this, the text would
+        // be combined into a single run with the parent's formatting, losing the
+        // individual block-level styles.
+        const hasFormatting = formattingRoot.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, div, p');
         if (hasFormatting) {
             const transformStr = computed.textTransform;
-            const runs = parseInlineFormatting(formattingRoot, {}, [], (str) => applyTextTransform(str, transformStr), win);
+            // Check if whitespace should be preserved (white-space: pre or monospace font)
+            // Use effectiveComputedForWhitespace which may point to parent DIV's style for P elements wrapped by transform.ts
+            const textPreserveWs = shouldPreserveWhitespace(effectiveComputedForWhitespace);
+            // Pass base font info to parseInlineFormatting so inline elements (SPANs)
+            // inherit the correct font size in monospace contexts (code blocks).
+            // Without this, SPANs would use their computed font size which may be wrong
+            // due to CSS rules like ".gh-body p { font-size: 13px }" overriding the code block's font size.
+            const baseRunOptions = {
+                fontSize: baseStyle.fontSize,
+                fontFace: baseStyle.fontFace,
+                color: baseStyle.color ?? undefined,
+            };
+            const runs = parseInlineFormatting(formattingRoot, baseRunOptions, [], (str) => applyTextTransform(str, transformStr), win, textPreserveWs);
             const textElement = {
                 type: el.tagName.toLowerCase(),
                 text: runs,
@@ -4150,6 +7294,15 @@ export function parseSlideHtml(doc) {
         const pseudoElements = extractPseudoElements(htmlDiv, win);
         elements.push(...pseudoElements);
     });
+    // Sort elements by z-index for proper stacking order in PPTX.
+    // PPTX renders shapes in XML order (later = on top), so we sort by z-index
+    // to ensure elements with higher z-index appear later in the array.
+    // Elements without z-index (undefined) are treated as z-index: 0.
+    elements.sort((a, b) => {
+        const zIndexA = ('zIndex' in a && a.zIndex !== undefined) ? a.zIndex : 0;
+        const zIndexB = ('zIndex' in b && b.zIndex !== undefined) ? b.zIndex : 0;
+        return zIndexA - zIndexB;
+    });
     return { background, elements, placeholders, errors };
 }
 //# sourceMappingURL=parse.js.map