npm - docgen-utils - Versions diffs - 1.0.12 → 1.0.13 - Mend

docgen-utils 1.0.12 → 1.0.13

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 (65) hide show

package/dist/bundle.js +3189 -1238
package/dist/bundle.min.js +101 -99
package/dist/cli.js +2653 -1117
package/dist/packages/cli/commands/export-docs.d.ts.map +1 -1
package/dist/packages/cli/commands/export-docs.js +131 -2
package/dist/packages/cli/commands/export-docs.js.map +1 -1
package/dist/packages/cli/commands/export-slides.d.ts.map +1 -1
package/dist/packages/cli/commands/export-slides.js +25 -1
package/dist/packages/cli/commands/export-slides.js.map +1 -1
package/dist/packages/docs/common.d.ts +10 -0
package/dist/packages/docs/common.d.ts.map +1 -1
package/dist/packages/docs/common.js.map +1 -1
package/dist/packages/docs/convert.d.ts.map +1 -1
package/dist/packages/docs/convert.js +246 -218
package/dist/packages/docs/convert.js.map +1 -1
package/dist/packages/docs/create-document.d.ts.map +1 -1
package/dist/packages/docs/create-document.js +43 -3
package/dist/packages/docs/create-document.js.map +1 -1
package/dist/packages/docs/export.d.ts +9 -8
package/dist/packages/docs/export.d.ts.map +1 -1
package/dist/packages/docs/export.js +23 -36
package/dist/packages/docs/export.js.map +1 -1
package/dist/packages/docs/parse-colors.d.ts +37 -0
package/dist/packages/docs/parse-colors.d.ts.map +1 -0
package/dist/packages/docs/parse-colors.js +507 -0
package/dist/packages/docs/parse-colors.js.map +1 -0
package/dist/packages/docs/parse-css.d.ts +98 -0
package/dist/packages/docs/parse-css.d.ts.map +1 -0
package/dist/packages/docs/parse-css.js +1592 -0
package/dist/packages/docs/parse-css.js.map +1 -0
package/dist/packages/docs/parse-helpers.d.ts +45 -0
package/dist/packages/docs/parse-helpers.d.ts.map +1 -0
package/dist/packages/docs/parse-helpers.js +214 -0
package/dist/packages/docs/parse-helpers.js.map +1 -0
package/dist/packages/docs/parse-inline.d.ts +41 -0
package/dist/packages/docs/parse-inline.d.ts.map +1 -0
package/dist/packages/docs/parse-inline.js +473 -0
package/dist/packages/docs/parse-inline.js.map +1 -0
package/dist/packages/docs/parse-layout.d.ts +57 -0
package/dist/packages/docs/parse-layout.d.ts.map +1 -0
package/dist/packages/docs/parse-layout.js +295 -0
package/dist/packages/docs/parse-layout.js.map +1 -0
package/dist/packages/docs/parse-special.d.ts +51 -0
package/dist/packages/docs/parse-special.d.ts.map +1 -0
package/dist/packages/docs/parse-special.js +251 -0
package/dist/packages/docs/parse-special.js.map +1 -0
package/dist/packages/docs/parse-units.d.ts +68 -0
package/dist/packages/docs/parse-units.d.ts.map +1 -0
package/dist/packages/docs/parse-units.js +275 -0
package/dist/packages/docs/parse-units.js.map +1 -0
package/dist/packages/docs/parse.d.ts.map +1 -1
package/dist/packages/docs/parse.js +957 -2800
package/dist/packages/docs/parse.js.map +1 -1
package/dist/packages/slides/common.d.ts +7 -0
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 +92 -7
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 +723 -40
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 +12 -7
package/dist/packages/slides/transform.js.map +1 -1
package/package.json +1 -1

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

@@ -87,6 +87,273 @@ function extractDashType(borderStyle) {
     }
 }
 // ---------------------------------------------------------------------------
+// CSS transform rotation extraction
+// ---------------------------------------------------------------------------
+/**
+ * Extract the rotation angle (in degrees) from a computed CSS `transform`.
+ *
+ * Browsers resolve any CSS transform to a `matrix(a, b, c, d, e, f)` value.
+ * The rotation component is `atan2(b, a)`. Returns `null` for no rotation
+ * or for rotations smaller than 0.5° (effectively none).
+ */
+function extractRotationAngle(computed) {
+    const transform = computed.transform;
+    if (!transform || transform === 'none')
+        return null;
+    const matrixMatch = transform.match(/matrix\(([-\d.e]+),\s*([-\d.e]+)/);
+    if (matrixMatch) {
+        const a = parseFloat(matrixMatch[1]);
+        const b = parseFloat(matrixMatch[2]);
+        const angle = Math.atan2(b, a) * (180 / Math.PI);
+        if (Math.abs(angle) > 0.5)
+            return Math.round(angle * 10) / 10;
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// 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
+// ---------------------------------------------------------------------------
+/**
+ * Split a CSS `background-image` value that may contain multiple
+ * comma-separated gradients into individual gradient strings.
+ *
+ * Correctly handles nesting (e.g. `rgba()` inside `linear-gradient()`).
+ *
+ * Example:
+ *   "radial-gradient(...), radial-gradient(...)" → ["radial-gradient(...)", "radial-gradient(...)"]
+ */
+function splitCssBackgroundGradients(bgImage) {
+    if (!bgImage || bgImage === 'none')
+        return [];
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for (const char of bgImage) {
+        if (char === '(')
+            depth++;
+        else if (char === ')')
+            depth--;
+        if (char === ',' && depth === 0) {
+            const trimmed = current.trim();
+            if (trimmed)
+                parts.push(trimmed);
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    const trimmed = current.trim();
+    if (trimmed)
+        parts.push(trimmed);
+    return parts.filter((p) => p.includes('linear-gradient') || p.includes('radial-gradient'));
+}
+// ---------------------------------------------------------------------------
+// Rasterize complex repeating CSS gradient patterns to canvas image
+// ---------------------------------------------------------------------------
+/**
+ * Draw a single CSS linear-gradient on a canvas context.
+ *
+ * Parses the gradient string for direction (deg or `to` keyword) and color
+ * stops, then creates a native CanvasGradient and fills the context.
+ *
+ * The CSS color strings coming from `getComputedStyle` are already resolved
+ * (no CSS variables) and are valid canvas color values.
+ */
+function drawCssLinearGradientOnCanvas(ctx, gradStr, w, h) {
+    // Extract content inside linear-gradient(...)
+    const idx = gradStr.indexOf('linear-gradient(');
+    if (idx === -1)
+        return;
+    let depth = 0;
+    const start = idx + 'linear-gradient('.length;
+    let end = start;
+    for (let i = start; i < gradStr.length; i++) {
+        if (gradStr[i] === '(')
+            depth++;
+        else if (gradStr[i] === ')') {
+            if (depth === 0) {
+                end = i;
+                break;
+            }
+            depth--;
+        }
+    }
+    const content = gradStr.substring(start, end);
+    // Split by commas respecting parentheses
+    const parts = [];
+    let current = '';
+    let d = 0;
+    for (const char of content) {
+        if (char === '(')
+            d++;
+        else if (char === ')')
+            d--;
+        if (char === ',' && d === 0) {
+            parts.push(current.trim());
+            current = '';
+        }
+        else {
+            current += char;
+        }
+    }
+    if (current.trim())
+        parts.push(current.trim());
+    // Parse angle
+    let cssAngle = 180; // default: "to bottom"
+    let colorStops = parts;
+    const angleMatch = parts[0]?.match(/^(-?[\d.]+)deg$/);
+    if (angleMatch) {
+        cssAngle = parseFloat(angleMatch[1]);
+        colorStops = parts.slice(1);
+    }
+    else if (parts[0]?.startsWith('to ')) {
+        const dir = parts[0].replace('to ', '').trim();
+        const dirMap = {
+            'top': 0, 'right': 90, 'bottom': 180, 'left': 270,
+            'top right': 45, 'right top': 45, 'bottom right': 135,
+            'right bottom': 135, 'bottom left': 225, 'left bottom': 225,
+            'top left': 315, 'left top': 315,
+        };
+        cssAngle = dirMap[dir] ?? 180;
+        colorStops = parts.slice(1);
+    }
+    // Compute gradient line endpoints per CSS spec:
+    //   direction = (sin(θ), -cos(θ)) in canvas coords (y-down)
+    //   half-length = (|w·sin(θ)| + |h·cos(θ)|) / 2
+    const rad = cssAngle * Math.PI / 180;
+    const dx = Math.sin(rad);
+    const dy = -Math.cos(rad);
+    const halfLen = (Math.abs(w * Math.sin(rad)) + Math.abs(h * Math.cos(rad))) / 2;
+    const cx = w / 2;
+    const cy = h / 2;
+    const grad = ctx.createLinearGradient(cx - halfLen * dx, cy - halfLen * dy, cx + halfLen * dx, cy + halfLen * dy);
+    // Add color stops — CSS color strings from computedStyle work natively in canvas
+    for (let i = 0; i < colorStops.length; i++) {
+        const stop = colorStops[i].trim();
+        const posMatch = stop.match(/([\d.]+)%\s*$/);
+        const position = posMatch
+            ? parseFloat(posMatch[1]) / 100
+            : i / Math.max(colorStops.length - 1, 1);
+        const colorPart = posMatch
+            ? stop.replace(/([\d.]+)%\s*$/, '').trim()
+            : stop.trim();
+        try {
+            grad.addColorStop(Math.max(0, Math.min(1, position)), colorPart);
+        }
+        catch {
+            // Invalid color string — skip this stop
+        }
+    }
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, w, h);
+}
+/**
+ * Render a complex repeating CSS gradient pattern as a rasterized PNG image.
+ *
+ * Some CSS backgrounds use multiple linear-gradient layers combined with
+ * background-size / background-position to create tiled patterns (hex grids,
+ * noise textures, etc.) that PowerPoint gradients cannot represent. This
+ * function rasterises them faithfully using Canvas 2D:
+ *
+ *   1. Parse background-size to get the tile dimensions
+ *   2. Parse background-position offsets per gradient layer
+ *   3. For each gradient layer, draw it on a tile-sized canvas
+ *   4. Use createPattern() to tile each layer across the full element
+ *   5. Return the composited result as a PNG data URI
+ *
+ * @returns PNG data URI or null on failure
+ */
+function renderRepeatingGradientPatternAsImage(bgImage, bgSize, bgPosition, width, height, doc) {
+    try {
+        const gradParts = splitCssBackgroundGradients(bgImage);
+        if (gradParts.length === 0)
+            return null;
+        // Parse background-size → tile dimensions.
+        // `computed.backgroundSize` may be comma-separated (one per layer),
+        // e.g. "80px 140px, 80px 140px, ...". We use the first entry.
+        let tileW = width;
+        let tileH = height;
+        if (bgSize && bgSize !== 'auto') {
+            const firstLayerSize = bgSize.split(',')[0].trim();
+            const sizeParts = firstLayerSize.split(/\s+/);
+            const pw = parseFloat(sizeParts[0]);
+            if (!isNaN(pw) && pw > 0)
+                tileW = pw;
+            if (sizeParts.length >= 2) {
+                const ph = parseFloat(sizeParts[1]);
+                if (!isNaN(ph) && ph > 0)
+                    tileH = ph;
+            }
+            else {
+                tileH = tileW; // single value → square tiles
+            }
+        }
+        // Parse background-position (comma-separated, one per layer)
+        const positionEntries = bgPosition.split(',').map((p) => p.trim());
+        const canvas = doc.createElement('canvas');
+        canvas.width = Math.round(width);
+        canvas.height = Math.round(height);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return null;
+        for (let i = 0; i < gradParts.length; i++) {
+            const gradStr = gradParts[i].trim();
+            if (!gradStr.includes('linear-gradient'))
+                continue; // only handle linear for now
+            // Per-layer position offset (falls back to first entry, then 0 0)
+            const pos = positionEntries[i] || positionEntries[0] || '0px 0px';
+            const posParts = pos.trim().split(/\s+/);
+            const offX = parseFloat(posParts[0]) || 0;
+            const offY = parseFloat(posParts[1]) || 0;
+            // Draw gradient onto a tile-sized canvas
+            const tileCanvas = doc.createElement('canvas');
+            tileCanvas.width = Math.round(tileW);
+            tileCanvas.height = Math.round(tileH);
+            const tileCtx = tileCanvas.getContext('2d');
+            if (!tileCtx)
+                continue;
+            drawCssLinearGradientOnCanvas(tileCtx, gradStr, tileW, tileH);
+            // Tile the gradient across the full element with the offset
+            const pattern = ctx.createPattern(tileCanvas, 'repeat');
+            if (!pattern)
+                continue;
+            ctx.save();
+            ctx.translate(offX, offY);
+            ctx.fillStyle = pattern;
+            ctx.fillRect(-offX, -offY, canvas.width, canvas.height);
+            ctx.restore();
+        }
+        return canvas.toDataURL('image/png');
+    }
+    catch {
+        return null;
+    }
+}
+// ---------------------------------------------------------------------------
 // parseCssGradient  (exported, used by other modules)
 // ---------------------------------------------------------------------------
 /**
@@ -1173,6 +1440,164 @@ function extractPseudoElements(el, win) {
             pLeft = 0;
         if (isNaN(pTop))
             pTop = 0;
+        // ---- Flex / Grid alignment correction for flow-positioned pseudos ----
+        //
+        // Problem: getComputedStyle on pseudo-elements returns 'auto' for left/top
+        // when their position is static. The browser's flex/grid engine computes
+        // offsets from alignment properties (align-items, justify-content, gap)
+        // but does NOT expose them through the CSSOM for pseudo-elements.
+        //
+        // Strategy:
+        //   Cross-axis → derive from align-items (or align-self override)
+        //   Main-axis  → anchor off the nearest real child's rendered
+        //                getBoundingClientRect; fall back to justify-content
+        //                when no real children exist.
+        //
+        const pseudoPos = pComputed.position;
+        if (!pseudoPos || pseudoPos === 'static') {
+            const parentComputed = win.getComputedStyle(el);
+            const parentDisplay = parentComputed.display;
+            const isFlex = parentDisplay === 'flex' || parentDisplay === 'inline-flex';
+            const isGrid = parentDisplay === 'grid' || parentDisplay === 'inline-grid';
+            if (isFlex) {
+                const flexDir = parentComputed.flexDirection || 'row';
+                const isRow = flexDir === 'row' || flexDir === 'row-reverse';
+                const isReverse = flexDir.endsWith('-reverse');
+                // -- Effective cross-axis alignment --
+                // align-self on the pseudo overrides the container's align-items
+                const alignSelf = pComputed.alignSelf;
+                const effectiveAlign = (alignSelf && alignSelf !== 'auto')
+                    ? alignSelf
+                    : (parentComputed.alignItems || 'stretch');
+                // -- Pseudo-element margins --
+                const mTop = parseFloat(pComputed.marginTop) || 0;
+                const mRight = parseFloat(pComputed.marginRight) || 0;
+                const mBottom = parseFloat(pComputed.marginBottom) || 0;
+                const mLeft = parseFloat(pComputed.marginLeft) || 0;
+                // -- Cross-axis offset --
+                // The cross-axis is vertical for row, horizontal for column.
+                const crossSize = isRow ? parentRect.height : parentRect.width;
+                const pseudoCrossOuter = isRow
+                    ? (pHeight + mTop + mBottom)
+                    : (pWidth + mLeft + mRight);
+                const crossMarginBefore = isRow ? mTop : mLeft;
+                let crossOffset;
+                switch (effectiveAlign) {
+                    case 'center':
+                        crossOffset = (crossSize - pseudoCrossOuter) / 2 + crossMarginBefore;
+                        break;
+                    case 'flex-end':
+                    case 'end':
+                        crossOffset = crossSize - pseudoCrossOuter + crossMarginBefore;
+                        break;
+                    case 'stretch':
+                    case 'baseline':
+                    default: // flex-start, start, normal
+                        crossOffset = crossMarginBefore;
+                        break;
+                }
+                // -- Main-axis offset --
+                // Parse the flex gap along the main axis
+                const gapProp = isRow ? parentComputed.columnGap : parentComputed.rowGap;
+                const mainGap = parseFloat(gapProp) || parseFloat(parentComputed.gap) || 0;
+                // Collect visible, in-flow child elements to use as position anchors.
+                // Pseudo-elements are first (::before) or last (::after) in flex order,
+                // so we anchor off the adjacent real child to compute the main-axis offset.
+                const realChildren = Array.from(el.children).filter(c => {
+                    const s = win.getComputedStyle(c);
+                    return s.display !== 'none' && s.position !== 'absolute' && s.position !== 'fixed';
+                });
+                let mainOffset;
+                if (realChildren.length > 0) {
+                    // Determine which child to anchor against and in which direction.
+                    //   ::before + normal  → sits before first child (screen-left / screen-top)
+                    //   ::before + reverse → sits after  first child (screen-right / screen-bottom)
+                    //   ::after  + normal  → sits after  last child
+                    //   ::after  + reverse → sits before last child
+                    const anchor = pseudo === '::before'
+                        ? realChildren[0]
+                        : realChildren[realChildren.length - 1];
+                    const anchorRect = anchor.getBoundingClientRect();
+                    const pseudoSitsAfterAnchor = (pseudo === '::before' && isReverse) ||
+                        (pseudo === '::after' && !isReverse);
+                    if (pseudoSitsAfterAnchor) {
+                        // Pseudo is toward main-end (screen-right in row, screen-bottom in column)
+                        const anchorEnd = isRow
+                            ? (anchorRect.right - parentRect.left)
+                            : (anchorRect.bottom - parentRect.top);
+                        const marginBefore = isRow ? mLeft : mTop;
+                        mainOffset = anchorEnd + mainGap + marginBefore;
+                    }
+                    else {
+                        // Pseudo is toward main-start (screen-left in row, screen-top in column)
+                        const anchorStart = isRow
+                            ? (anchorRect.left - parentRect.left)
+                            : (anchorRect.top - parentRect.top);
+                        const pseudoMainSize = isRow ? pWidth : pHeight;
+                        const marginAfter = isRow ? mRight : mBottom;
+                        const marginBefore = isRow ? mLeft : mTop;
+                        mainOffset = anchorStart - mainGap - marginAfter - pseudoMainSize;
+                        // Clamp: don't go before the start of the parent content area
+                        if (mainOffset < marginBefore)
+                            mainOffset = marginBefore;
+                    }
+                }
+                else {
+                    // No visible real children — position based on justify-content.
+                    // This covers text-only flex containers where the pseudo is the
+                    // only true flex box item (text nodes form anonymous items but
+                    // have no getBoundingClientRect we can query).
+                    const justify = parentComputed.justifyContent || 'normal';
+                    const mainSize = isRow ? parentRect.width : parentRect.height;
+                    const pseudoMainOuter = isRow
+                        ? (pWidth + mLeft + mRight)
+                        : (pHeight + mTop + mBottom);
+                    const marginBefore = isRow ? mLeft : mTop;
+                    if (justify === 'center') {
+                        mainOffset = (mainSize - pseudoMainOuter) / 2 + marginBefore;
+                    }
+                    else if (justify === 'flex-end' || justify === 'end') {
+                        mainOffset = mainSize - pseudoMainOuter + marginBefore;
+                    }
+                    else {
+                        // flex-start, start, normal, space-between/around/evenly
+                        // (with a single item these behave like flex-start)
+                        mainOffset = marginBefore;
+                    }
+                }
+                // Assign to the correct axes
+                pLeft = isRow ? mainOffset : crossOffset;
+                pTop = isRow ? crossOffset : mainOffset;
+            }
+            else if (isGrid) {
+                // Basic grid cross-axis alignment.
+                // Grid pseudo-elements participate as grid items; their alignment
+                // is governed by align-items / justify-items (or their -self variants).
+                const alignSelf = pComputed.alignSelf;
+                const alignItems = (alignSelf && alignSelf !== 'auto')
+                    ? alignSelf
+                    : (parentComputed.alignItems || 'stretch');
+                const justifySelf = pComputed.justifySelf;
+                const justifyItems = (justifySelf && justifySelf !== 'auto')
+                    ? justifySelf
+                    : (parentComputed.justifyItems || 'stretch');
+                if (alignItems === 'center') {
+                    pTop = (parentRect.height - pHeight) / 2;
+                }
+                else if (alignItems === 'end') {
+                    pTop = parentRect.height - pHeight;
+                }
+                if (justifyItems === 'center') {
+                    pLeft = (parentRect.width - pWidth) / 2;
+                }
+                else if (justifyItems === 'end') {
+                    pLeft = parentRect.width - pWidth;
+                }
+            }
+            // For non-flex/grid containers (block/inline), pLeft=0, pTop=0 is a
+            // reasonable approximation: ::before generates content at the start of
+            // the element's content area.
+        }
         // Convert to absolute page coordinates
         const absLeft = parentRect.left + pLeft;
         const absTop = parentRect.top + pTop;
@@ -1184,14 +1609,24 @@ function extractPseudoElements(el, win) {
         const hasBgImage = bgImage && bgImage !== 'none' && bgImage.includes('url(');
         if (!hasBg && !hasGradient && !hasBgImage)
             continue;
-        // Parse gradient if present
+        // Parse gradient(s) — a single background-image property may contain multiple gradients
         let gradient = null;
+        let extraPseudoGradients = [];
         if (hasGradient) {
-            gradient = parseCssGradient(bgImage);
+            const gradParts = splitCssBackgroundGradients(bgImage);
+            if (gradParts.length > 0)
+                gradient = parseCssGradient(gradParts[0]);
+            for (let gi = 1; gi < Math.min(gradParts.length, 4); gi++) {
+                const g = parseCssGradient(gradParts[gi]);
+                if (g)
+                    extraPseudoGradients.push(g);
+            }
         }
-        // Parse opacity
-        const elementOpacity = parseFloat(pComputed.opacity);
-        const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
+        // Parse effective opacity (including ancestor chain)
+        const parentEffectiveOpacity = getEffectiveOpacity(el, win);
+        const pseudoOwnOpacity = parseFloat(pComputed.opacity);
+        const elementOpacity = parentEffectiveOpacity * (isNaN(pseudoOwnOpacity) ? 1 : pseudoOwnOpacity);
+        const hasOpacity = elementOpacity < 1;
         // Parse border-radius and detect ellipse shape
         let rectRadius = 0;
         const borderRadius = pComputed.borderRadius;
@@ -1213,6 +1648,42 @@ function extractPseudoElements(el, win) {
         }
         // Parse box-shadow
         const shadow = parseBoxShadow(pComputed.boxShadow);
+        // 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
+        // corners to match.
+        let effectiveRectRadius = isEllipse ? 0 : rectRadius;
+        if (rectRadius === 0 && !isEllipse) {
+            const parentComputed = win.getComputedStyle(el);
+            const parentOverflow = parentComputed.overflow;
+            if (parentOverflow === 'hidden' || parentOverflow === 'clip') {
+                const parentRadius = parseFloat(parentComputed.borderRadius);
+                if (parentRadius > 0) {
+                    // Account for parent border widths — absolutely positioned pseudo-elements
+                    // with left:0/right:0 resolve inside the padding box, not the border box.
+                    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;
+                    // Check which edges are flush (within 2px tolerance to handle subpixel rounding)
+                    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;
+                    // Only apply if flush at a corner (top+spanning width, or side+spanning height)
+                    const spansFullWidth = flushLeft && flushRight;
+                    const spansFullHeight = flushTop && flushBottom;
+                    if ((flushTop && spansFullWidth) || (flushBottom && spansFullWidth) ||
+                        (flushLeft && spansFullHeight) || (flushRight && spansFullHeight)) {
+                        effectiveRectRadius = pxToInch(parentRadius);
+                    }
+                }
+            }
+        }
         // Create shape element
         const shapeElement = {
             type: 'shape',
@@ -1230,15 +1701,40 @@ function extractPseudoElements(el, win) {
                 gradient: gradient,
                 transparency: hasBg ? extractAlpha(pComputed.backgroundColor) : null,
                 line: null,
-                rectRadius: isEllipse ? 0 : rectRadius,
+                rectRadius: effectiveRectRadius,
                 shadow: shadow,
                 opacity: hasOpacity ? elementOpacity : null,
                 isEllipse: isEllipse,
                 softEdge: null,
+                rotate: null,
                 customGeometry: null,
             },
         };
         results.push(shapeElement);
+        // Add additional shape elements for extra gradient layers
+        for (const extraGrad of extraPseudoGradients) {
+            const extraShape = {
+                type: 'shape',
+                text: '',
+                textRuns: null,
+                style: null,
+                position: { ...shapeElement.position },
+                shape: {
+                    fill: null,
+                    gradient: extraGrad,
+                    transparency: null,
+                    line: null,
+                    rectRadius: 0,
+                    shadow: null,
+                    opacity: shapeElement.shape.opacity,
+                    isEllipse: false,
+                    softEdge: null,
+                    rotate: null,
+                    customGeometry: null,
+                },
+            };
+            results.push(extraShape);
+        }
     }
     return results;
 }
@@ -1408,8 +1904,10 @@ export function parseSlideHtml(doc) {
                 return;
             }
         }
-        // Handle SPAN elements with backgrounds/borders as shapes
-        if (el.tagName === 'SPAN') {
+        // 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) ||
@@ -1466,9 +1964,9 @@ export function parseSlideHtml(doc) {
                         borderTop === borderRight &&
                         borderRight === borderBottom &&
                         borderBottom === borderLeft;
-                    // Extract opacity
-                    const spanOpacity = parseFloat(computed.opacity);
-                    const hasSpanOpacity = !isNaN(spanOpacity) && spanOpacity < 1;
+                    // 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
@@ -1513,6 +2011,7 @@ export function parseSlideHtml(doc) {
                             opacity: hasSpanOpacity ? spanOpacity : null,
                             isEllipse: spanIsEllipse,
                             softEdge: null,
+                            rotate: null,
                             customGeometry: null,
                         },
                     };
@@ -1676,9 +2175,9 @@ export function parseSlideHtml(doc) {
                     imgComputed.webkitMaskImage ||
                     imgComputed.getPropertyValue('mask-image') ||
                     imgComputed.getPropertyValue('-webkit-mask-image');
-                // Extract CSS opacity early so we can bake it into the mask if present
-                const imgOpacity = parseFloat(imgComputed.opacity);
-                const hasOpacity = !isNaN(imgOpacity) && imgOpacity < 1 && imgOpacity >= 0;
+                // Extract effective CSS opacity (including ancestor chain) so we can bake it into the mask if present
+                const imgOpacity = getEffectiveOpacity(el, win);
+                const hasOpacity = imgOpacity < 1 && imgOpacity >= 0;
                 // Pre-bake CSS mask-image gradient into the image using canvas.
                 // This creates a transparency gradient effect (PNG with alpha) that PPTX displays natively.
                 // When a mask is applied, we also bake in the CSS opacity to ensure correct alpha blending.
@@ -1754,11 +2253,13 @@ export function parseSlideHtml(doc) {
         if (el.tagName.toLowerCase() === 'svg') {
             const rect = htmlEl.getBoundingClientRect();
             if (rect.width > 0 && rect.height > 0) {
-                // Skip SVGs with very low opacity - these are usually decorative overlays
-                // (e.g., grain textures, noise patterns) that won't render well in PPTX
+                // Skip SVGs with very low own opacity - these are usually decorative overlays
+                // (e.g., grain textures, noise patterns) that won't render well in PPTX.
+                // Only check the element's own opacity for the skip decision, not ancestors.
+                // Ancestor opacity is applied as transparency on the ImageElement below.
                 const computedStyle = win.getComputedStyle(htmlEl);
-                const opacity = parseFloat(computedStyle.opacity || '1');
-                if (opacity < 0.1) {
+                const ownOpacity = parseFloat(computedStyle.opacity || '1');
+                if (ownOpacity < 0.1) {
                     processed.add(el);
                     el.querySelectorAll('*').forEach((child) => processed.add(child));
                     return;
@@ -1907,6 +2408,10 @@ export function parseSlideHtml(doc) {
                         }
                     }
                 }
+                // Apply effective opacity (including ancestor chain) as image transparency.
+                // PPTX doesn't have opacity containers, so the visual opacity must be
+                // applied directly to each element.
+                const svgEffectiveOpacity = getEffectiveOpacity(el, win);
                 const imageElement = {
                     type: 'image',
                     src: dataUri,
@@ -1917,6 +2422,7 @@ export function parseSlideHtml(doc) {
                         h: pxToInch(rect.height),
                     },
                     sizing: null,
+                    transparency: svgEffectiveOpacity < 1 ? Math.round((1 - svgEffectiveOpacity) * 100) : undefined,
                 };
                 elements.push(imageElement);
                 processed.add(el);
@@ -2058,6 +2564,7 @@ export function parseSlideHtml(doc) {
             }
             // === CONIC GRADIENT: render as image ===
             // PPTX has no native conic-gradient support. Render as canvas image.
+            let hasConicGradientImage = false;
             const divBgImageForConic = computed.backgroundImage;
             if (divBgImageForConic && divBgImageForConic.includes('conic-gradient')) {
                 const rect = htmlEl.getBoundingClientRect();
@@ -2082,6 +2589,7 @@ export function parseSlideHtml(doc) {
                             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
                     }
@@ -2097,10 +2605,54 @@ export function parseSlideHtml(doc) {
             let bgImageSize = null;
             let bgImagePosition = null;
             let bgGradient = null;
+            let extraDivGradients = [];
             if (elBgImage && elBgImage !== 'none') {
                 if (elBgImage.includes('linear-gradient') ||
                     elBgImage.includes('radial-gradient')) {
-                    bgGradient = parseCssGradient(elBgImage);
+                    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\(["']?([^"')]+)["']?\)/);
@@ -2183,7 +2735,7 @@ export function parseSlideHtml(doc) {
                     });
                 }
             }
-            if (hasBg || hasBorder || bgImageUrl || bgGradient) {
+            if (hasBg || hasBorder || bgImageUrl || bgGradient || hasConicGradientImage) {
                 const rect = htmlEl.getBoundingClientRect();
                 if (rect.width > 0 && rect.height > 0) {
                     const shadow = parseBoxShadow(computed.boxShadow);
@@ -2557,9 +3109,9 @@ export function parseSlideHtml(doc) {
                         }
                     }
                     if (hasBg || hasUniformBorder || bgGradient) {
-                        // Detect element-level opacity
-                        const elementOpacity = parseFloat(computed.opacity);
-                        const hasOpacity = !isNaN(elementOpacity) && elementOpacity < 1;
+                        // Detect effective opacity (including ancestor chain)
+                        const elementOpacity = getEffectiveOpacity(htmlEl, win);
+                        const hasOpacity = elementOpacity < 1;
                         // Detect CSS filter: blur() for soft-edge effect
                         let softEdgePt = null;
                         const filterStr = computed.filter;
@@ -2593,16 +3145,39 @@ export function parseSlideHtml(doc) {
                         const paddingBottom = parseFloat(computed.paddingBottom) || 0;
                         const paddingLeft = parseFloat(computed.paddingLeft) || 0;
                         const hasPadding = paddingTop > 2 || paddingRight > 2 || paddingBottom > 2 || paddingLeft > 2;
+                        // --- CSS transform rotation handling ---
+                        // If the element has a CSS rotation, use the pre-rotation dimensions
+                        // and store the rotation angle for the PPTX shape. This prevents
+                        // thin rotated elements (e.g., decorative 1px gradient lines) from
+                        // being blown up to their bounding-box size.
+                        const rotationAngle = extractRotationAngle(computed);
+                        let shapeX = rect.left;
+                        let shapeY = rect.top;
+                        let shapeW = rect.width;
+                        let shapeH = rect.height;
+                        if (rotationAngle !== null) {
+                            const origW = parseFloat(computed.width);
+                            const origH = parseFloat(computed.height);
+                            if (!isNaN(origW) && origW > 0 && !isNaN(origH) && origH > 0) {
+                                // Use bounding-rect center as shape center
+                                const cx = (rect.left + rect.right) / 2;
+                                const cy = (rect.top + rect.bottom) / 2;
+                                shapeW = origW;
+                                shapeH = origH;
+                                shapeX = cx - origW / 2;
+                                shapeY = cy - origH / 2;
+                            }
+                        }
                         const shapeElement = {
                             type: 'shape',
                             text: shapeText,
                             textRuns: shapeTextRuns,
                             style: shapeStyle,
                             position: {
-                                x: pxToInch(rect.left),
-                                y: pxToInch(rect.top),
-                                w: pxToInch(rect.width),
-                                h: pxToInch(rect.height),
+                                x: pxToInch(shapeX),
+                                y: pxToInch(shapeY),
+                                w: pxToInch(shapeW),
+                                h: pxToInch(shapeH),
                             },
                             shape: {
                                 fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
@@ -2637,13 +3212,14 @@ export function parseSlideHtml(doc) {
                                 opacity: hasOpacity ? elementOpacity : null,
                                 isEllipse: isEllipse,
                                 softEdge: softEdgePt,
+                                rotate: rotationAngle,
                                 customGeometry: clipPathPolygon ? (() => {
                                     // Convert percentage-based polygon points to EMU coordinates
                                     // relative to the shape's bounding box.
                                     // PptxGenJS custGeom uses the cx/cy (extent) as the path coordinate space.
                                     const EMU = 914400; // EMUs per inch
-                                    const pathW = Math.round(rect.width / PX_PER_IN * EMU);
-                                    const pathH = Math.round(rect.height / PX_PER_IN * EMU);
+                                    const pathW = Math.round(shapeW / PX_PER_IN * EMU);
+                                    const pathH = Math.round(shapeH / PX_PER_IN * EMU);
                                     const points = [];
                                     clipPathPolygon.forEach((pt, i) => {
                                         points.push({
@@ -2688,6 +3264,32 @@ export function parseSlideHtml(doc) {
                             ];
                         }
                         elements.push(shapeElement);
+                        // Add additional shape elements for extra gradient layers (multiple CSS background gradients)
+                        if (extraDivGradients.length > 0) {
+                            for (const extraGrad of extraDivGradients) {
+                                const extraShape = {
+                                    type: 'shape',
+                                    text: '',
+                                    textRuns: null,
+                                    style: null,
+                                    position: { ...shapeElement.position },
+                                    shape: {
+                                        fill: null,
+                                        gradient: extraGrad,
+                                        transparency: null,
+                                        line: null,
+                                        rectRadius: 0,
+                                        shadow: null,
+                                        opacity: shapeElement.shape.opacity,
+                                        isEllipse: false,
+                                        softEdge: null,
+                                        rotate: null,
+                                        customGeometry: null,
+                                    },
+                                };
+                                elements.push(extraShape);
+                            }
+                        }
                     }
                     else if (shapeStyle && shapeStyle.fontFill) {
                         const fontFillTextElement = {
@@ -2703,6 +3305,37 @@ export function parseSlideHtml(doc) {
                         };
                         elements.push(fontFillTextElement);
                     }
+                    else if (hasConicGradientImage && shapeStyle && (shapeText || (shapeTextRuns && shapeTextRuns.length > 0))) {
+                        // Conic gradient div has text content but no bg/border — create a transparent
+                        // text-only shape to preserve flex alignment (center/middle) on top of the
+                        // conic gradient image.
+                        const conicTextElement = {
+                            type: 'shape',
+                            text: shapeText,
+                            textRuns: shapeTextRuns,
+                            style: shapeStyle,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(rect.height),
+                            },
+                            shape: {
+                                fill: null,
+                                gradient: null,
+                                transparency: null,
+                                line: null,
+                                rectRadius: 0,
+                                shadow: null,
+                                opacity: null,
+                                isEllipse: false,
+                                softEdge: null,
+                                rotate: null,
+                                customGeometry: null,
+                            },
+                        };
+                        elements.push(conicTextElement);
+                    }
                     else if (isSingleTextChild) {
                         processed.delete(textChildren[0]);
                     }
@@ -3010,6 +3643,10 @@ export function parseSlideHtml(doc) {
         // find the actual text position using a Range on the text nodes.
         // This ensures text is positioned at its visual location, not the container's.
         const isFlexContainer = computed.display === 'flex' || computed.display === 'inline-flex';
+        // Track the content child element if a specific child was selected for text
+        // extraction (used later to scope parseInlineFormatting to the content child
+        // instead of the full parent, avoiding duplicate text from shape-children).
+        let flexContentChild = null;
         if (isFlexContainer && el.children.length > 0) {
             // Collect direct text nodes (not in child elements)
             const textNodes = [];
@@ -3033,16 +3670,50 @@ export function parseSlideHtml(doc) {
                 }
             }
             else {
-                // No direct text nodes — check for text inside child SPAN elements
-                // This handles flex LI items like: <li><span class="icon"></span><span class="text">...</span></li>
+                // No direct text nodes — check for text inside child SPAN/elements.
+                // This handles flex LI items like:
+                //   <li><span class="icon">1</span><span class="text">Content...</span></li>
+                //
+                // Skip children that have a background or border — those will be
+                // extracted as independent shapes (e.g. numbered circle badges).
+                // Use the first text-bearing "content" child for the rect and text
+                // so the text element is sized to the content area, not the badge.
                 for (const child of Array.from(el.children)) {
-                    if (child.tagName === 'SPAN' && child.textContent?.trim()) {
-                        const childRect = child.getBoundingClientRect();
-                        if (childRect.width > 0 && childRect.height > 0) {
-                            rect = childRect;
-                            const childComputed = win.getComputedStyle(child);
-                            text = getTransformedText(child, childComputed);
-                            break;
+                    if (!child.textContent?.trim())
+                        continue;
+                    const childEl = child;
+                    const childComp = win.getComputedStyle(childEl);
+                    const childHasBg = childComp.backgroundColor && childComp.backgroundColor !== 'rgba(0, 0, 0, 0)';
+                    const childHasBorder = (parseFloat(childComp.borderTopWidth) || 0) > 0 ||
+                        (parseFloat(childComp.borderRightWidth) || 0) > 0 ||
+                        (parseFloat(childComp.borderBottomWidth) || 0) > 0 ||
+                        (parseFloat(childComp.borderLeftWidth) || 0) > 0;
+                    const childHasGradient = childComp.backgroundImage && childComp.backgroundImage !== 'none' &&
+                        (childComp.backgroundImage.includes('linear-gradient') || childComp.backgroundImage.includes('radial-gradient'));
+                    // Skip shape-like children (bg, border, gradient) — they become
+                    // independent shapes and their text is already included there.
+                    if (childHasBg || childHasBorder || childHasGradient)
+                        continue;
+                    const childRect = childEl.getBoundingClientRect();
+                    if (childRect.width > 0 && childRect.height > 0) {
+                        flexContentChild = child;
+                        rect = childRect;
+                        text = getTransformedText(childEl, childComp);
+                        break;
+                    }
+                }
+                // If no content child found (all children are shapes), fall back
+                // to the first child with text for backwards compatibility.
+                if (!flexContentChild) {
+                    for (const child of Array.from(el.children)) {
+                        if (child.textContent?.trim()) {
+                            const childRect = child.getBoundingClientRect();
+                            if (childRect.width > 0 && childRect.height > 0) {
+                                rect = childRect;
+                                const childComputed = win.getComputedStyle(child);
+                                text = getTransformedText(child, childComputed);
+                                break;
+                            }
                         }
                     }
                 }
@@ -3135,10 +3806,14 @@ export function parseSlideHtml(doc) {
                 }
             }
         }
-        const hasFormatting = el.querySelector('b, i, u, strong, em, span, br, code, a, mark, sub, sup, small, s, del, ins, abbr, time, cite, q, dfn, kbd, samp, var');
+        // When a specific content child was selected from a flex container,
+        // 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');
         if (hasFormatting) {
             const transformStr = computed.textTransform;
-            const runs = parseInlineFormatting(el, {}, [], (str) => applyTextTransform(str, transformStr), win);
+            const runs = parseInlineFormatting(formattingRoot, {}, [], (str) => applyTextTransform(str, transformStr), win);
             const textElement = {
                 type: el.tagName.toLowerCase(),
                 text: runs,
@@ -3165,6 +3840,14 @@ export function parseSlideHtml(doc) {
             elements.push(textElement);
         }
         processed.add(el);
+        // When a flex content child was selected for text extraction (e.g., a DIV
+        // inside a flex LI), mark it and all its descendants as processed so the
+        // DOM walk doesn't create duplicate text elements from child <p> tags
+        // (injected by transform.ts text wrapping) or other text-bearing children.
+        if (flexContentChild) {
+            processed.add(flexContentChild);
+            flexContentChild.querySelectorAll('*').forEach(desc => processed.add(desc));
+        }
     });
     // Second pass: extract pseudo-elements for all processed elements
     // This must be done after the main pass so we know which elements have been processed