docgen-utils 1.0.5

package/dist/packages/slides/parse.js

@@ -0,0 +1,1185 @@
+/**
+ * parse.ts - Extract slide data from a live browser DOM.
+ *
+ * This is a faithful TypeScript port of `extractSlideData()` and all its
+ * helper functions from dist/html2pptx.js.  It also ports `parseCssGradient()`
+ * which is used both here and by other modules.
+ *
+ * The main export is `parseSlideHtml(doc)` which walks the DOM tree and returns
+ * a `ParsedSlide` intermediate representation consumed by the rendering layer.
+ */
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const PT_PER_PX = 0.75;
+const PX_PER_IN = 96;
+// ---------------------------------------------------------------------------
+// Single-weight fonts (bold is skipped for these)
+// ---------------------------------------------------------------------------
+const SINGLE_WEIGHT_FONTS = ['impact'];
+// ---------------------------------------------------------------------------
+// Exported helper functions
+// ---------------------------------------------------------------------------
+/** Convert pixel value to inches. */
+export function pxToInch(px) {
+    return px / PX_PER_IN;
+}
+/** Convert a CSS pixel string (e.g. "16px") to points. */
+export function pxToPoints(pxStr) {
+    return parseFloat(pxStr) * PT_PER_PX;
+}
+/**
+ * Convert an `rgb()` / `rgba()` color string to a 6-char hex string.
+ * Returns `'FFFFFF'` for transparent or unparseable values.
+ */
+export function rgbToHex(rgbStr) {
+    if (rgbStr === 'rgba(0, 0, 0, 0)' || rgbStr === 'transparent')
+        return 'FFFFFF';
+    const match = rgbStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (!match)
+        return 'FFFFFF';
+    return match
+        .slice(1)
+        .map((n) => parseInt(n).toString(16).padStart(2, '0'))
+        .join('');
+}
+/**
+ * Extract transparency percentage from an `rgba()` string.
+ * Returns `null` for opaque or non-rgba values, otherwise 0-100.
+ */
+export function extractAlpha(rgbStr) {
+    const match = rgbStr.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
+    if (!match || !match[4])
+        return null;
+    const alpha = parseFloat(match[4]);
+    return Math.round((1 - alpha) * 100);
+}
+// ---------------------------------------------------------------------------
+// parseCssGradient  (exported, used by other modules)
+// ---------------------------------------------------------------------------
+/**
+ * Parse a CSS gradient string (`linear-gradient(...)` or `radial-gradient(...)`)
+ * into a PptxGenJS-compatible `GradientFillProps` object.
+ *
+ * Returns `null` if the string does not contain a recognized gradient.
+ */
+export function parseCssGradient(gradientStr) {
+    const colorToHex = (colorStr) => {
+        colorStr = colorStr.trim();
+        if (colorStr.startsWith('#')) {
+            let hex = colorStr.slice(1);
+            if (hex.length === 3)
+                hex = hex.split('').map((c) => c + c).join('');
+            return hex.toUpperCase();
+        }
+        const rgbMatch = colorStr.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+        if (rgbMatch) {
+            return rgbMatch
+                .slice(1)
+                .map((n) => parseInt(n).toString(16).padStart(2, '0'))
+                .join('')
+                .toUpperCase();
+        }
+        return 'FFFFFF';
+    };
+    const extractTransparency = (colorStr) => {
+        colorStr = colorStr.trim();
+        const rgbaMatch = colorStr.match(/rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*([\d.]+)\s*\)/);
+        if (rgbaMatch) {
+            const alpha = parseFloat(rgbaMatch[1]);
+            if (alpha < 1) {
+                return Math.round((1 - alpha) * 100);
+            }
+        }
+        return null;
+    };
+    const splitGradientParts = (str) => {
+        const parts = [];
+        let current = '';
+        let depth = 0;
+        for (const char of str) {
+            if (char === '(')
+                depth++;
+            else if (char === ')')
+                depth--;
+            if (char === ',' && depth === 0) {
+                parts.push(current.trim());
+                current = '';
+            }
+            else {
+                current += char;
+            }
+        }
+        if (current.trim())
+            parts.push(current.trim());
+        return parts;
+    };
+    const extractGradientContent = (str, prefix) => {
+        const startIdx = str.indexOf(prefix);
+        if (startIdx === -1)
+            return null;
+        let depth = 0;
+        const start = startIdx + prefix.length;
+        for (let i = start; i < str.length; i++) {
+            if (str[i] === '(')
+                depth++;
+            else if (str[i] === ')') {
+                if (depth === 0)
+                    return str.substring(start, i);
+                depth--;
+            }
+        }
+        return null;
+    };
+    // Try linear-gradient
+    const linearContent = extractGradientContent(gradientStr, 'linear-gradient(');
+    if (linearContent) {
+        const parts = splitGradientParts(linearContent);
+        let cssAngle = 180;
+        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 ', '');
+            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);
+        }
+        const stops = colorStops.map((stop, idx) => {
+            const posMatch = stop.match(/([\d.]+)%\s*$/);
+            const position = posMatch
+                ? parseFloat(posMatch[1])
+                : (idx / (colorStops.length - 1)) * 100;
+            const colorPart = posMatch
+                ? stop.replace(/([\d.]+)%\s*$/, '').trim()
+                : stop.trim();
+            const stopData = { color: colorToHex(colorPart), position };
+            const transparency = extractTransparency(colorPart);
+            if (transparency !== null)
+                stopData.transparency = transparency;
+            return stopData;
+        });
+        return { type: 'linear', angle: cssAngle, stops };
+    }
+    // Try radial-gradient
+    const radialContent = extractGradientContent(gradientStr, 'radial-gradient(');
+    if (radialContent) {
+        const parts = splitGradientParts(radialContent);
+        let centerX = 50;
+        let centerY = 50;
+        let colorStops = parts;
+        const posMatch = parts[0].match(/at\s+([\d.]+)%?\s+([\d.]+)%?/);
+        if (posMatch) {
+            centerX = parseFloat(posMatch[1]);
+            centerY = parseFloat(posMatch[2]);
+            colorStops = parts.slice(1);
+        }
+        else if (parts[0].includes('circle') || parts[0].includes('ellipse')) {
+            colorStops = parts.slice(1);
+        }
+        const stops = colorStops.map((stop, idx) => {
+            const posMatch2 = stop.match(/([\d.]+)%\s*$/);
+            const position = posMatch2
+                ? parseFloat(posMatch2[1])
+                : (idx / (colorStops.length - 1)) * 100;
+            const colorPart = posMatch2
+                ? stop.replace(/([\d.]+)%\s*$/, '').trim()
+                : stop.trim();
+            const stopData = { color: colorToHex(colorPart), position };
+            const transparency = extractTransparency(colorPart);
+            if (transparency !== null)
+                stopData.transparency = transparency;
+            return stopData;
+        });
+        return { type: 'radial', centerX, centerY, stops };
+    }
+    return null;
+}
+// ---------------------------------------------------------------------------
+// Internal helpers (not exported)
+// ---------------------------------------------------------------------------
+function shouldSkipBold(fontFamily) {
+    if (!fontFamily)
+        return false;
+    const normalizedFont = fontFamily.toLowerCase().replace(/['"]/g, '').split(',')[0].trim();
+    return SINGLE_WEIGHT_FONTS.includes(normalizedFont);
+}
+function applyTextTransform(text, textTransform) {
+    if (textTransform === 'uppercase')
+        return text.toUpperCase();
+    if (textTransform === 'lowercase')
+        return text.toLowerCase();
+    if (textTransform === 'capitalize') {
+        return text.replace(/\b\w/g, (c) => c.toUpperCase());
+    }
+    return text;
+}
+function getRotation(transform, writingMode) {
+    let angle = 0;
+    if (writingMode === 'vertical-rl') {
+        angle = 90;
+    }
+    else if (writingMode === 'vertical-lr') {
+        angle = 270;
+    }
+    if (transform && transform !== 'none') {
+        const rotateMatch = transform.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
+        if (rotateMatch) {
+            angle += parseFloat(rotateMatch[1]);
+        }
+        else {
+            const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+            if (matrixMatch) {
+                const values = matrixMatch[1].split(',').map(parseFloat);
+                const matrixAngle = Math.atan2(values[1], values[0]) * (180 / Math.PI);
+                angle += Math.round(matrixAngle);
+            }
+        }
+    }
+    angle = angle % 360;
+    if (angle < 0)
+        angle += 360;
+    return angle === 0 ? null : angle;
+}
+function getPositionAndSize(el, rect, rotation) {
+    if (rotation === null) {
+        return { x: rect.left, y: rect.top, w: rect.width, h: rect.height };
+    }
+    const isVertical = rotation === 90 || rotation === 270;
+    if (isVertical) {
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        return {
+            x: centerX - rect.height / 2,
+            y: centerY - rect.width / 2,
+            w: rect.height,
+            h: rect.width,
+        };
+    }
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    return {
+        x: centerX - el.offsetWidth / 2,
+        y: centerY - el.offsetHeight / 2,
+        w: el.offsetWidth,
+        h: el.offsetHeight,
+    };
+}
+function parseBoxShadow(boxShadow) {
+    if (!boxShadow || boxShadow === 'none')
+        return null;
+    const insetMatch = boxShadow.match(/inset/);
+    if (insetMatch)
+        return null;
+    const colorMatch = boxShadow.match(/rgba?\([^)]+\)/);
+    const parts = boxShadow.match(/([-\d.]+)(px|pt)/g);
+    if (!parts || parts.length < 2)
+        return null;
+    const offsetX = parseFloat(parts[0]);
+    const offsetY = parseFloat(parts[1]);
+    const blur = parts.length > 2 ? parseFloat(parts[2]) : 0;
+    let angle = 0;
+    if (offsetX !== 0 || offsetY !== 0) {
+        angle = Math.atan2(offsetY, offsetX) * (180 / Math.PI);
+        if (angle < 0)
+            angle += 360;
+    }
+    const offset = Math.sqrt(offsetX * offsetX + offsetY * offsetY) * PT_PER_PX;
+    let opacity = 0.5;
+    if (colorMatch) {
+        const opacityMatch = colorMatch[0].match(/[\d.]+\)$/);
+        if (opacityMatch) {
+            opacity = parseFloat(opacityMatch[0].replace(')', ''));
+        }
+    }
+    return {
+        type: 'outer',
+        angle: Math.round(angle),
+        blur: blur * 0.75,
+        color: colorMatch ? rgbToHex(colorMatch[0]) : '000000',
+        offset: offset,
+        opacity,
+    };
+}
+function parseInlineFormatting(element, baseOptions, runs, baseTextTransform, win) {
+    let prevNodeIsText = false;
+    let pendingSoftBreak = false;
+    element.childNodes.forEach((node) => {
+        let textTransform = baseTextTransform;
+        if (node.tagName === 'BR') {
+            pendingSoftBreak = true;
+            prevNodeIsText = false;
+        }
+        else if (node.nodeType === Node.TEXT_NODE) {
+            const text = textTransform(node.textContent.replace(/\s+/g, ' '));
+            const prevRun = runs[runs.length - 1];
+            if (prevNodeIsText && prevRun && !pendingSoftBreak) {
+                prevRun.text += text;
+            }
+            else {
+                const runOptions = { ...baseOptions };
+                if (pendingSoftBreak) {
+                    runOptions.softBreakBefore = true;
+                    pendingSoftBreak = false;
+                }
+                runs.push({ text, options: runOptions });
+            }
+            prevNodeIsText = true;
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE && node.textContent.trim()) {
+            const el = node;
+            const options = { ...baseOptions };
+            const computed = win.getComputedStyle(el);
+            if (el.tagName === 'SPAN' ||
+                el.tagName === 'B' ||
+                el.tagName === 'STRONG' ||
+                el.tagName === 'I' ||
+                el.tagName === 'EM' ||
+                el.tagName === 'U') {
+                const isBold = computed.fontWeight === 'bold' || parseInt(computed.fontWeight) >= 600;
+                if (isBold && !shouldSkipBold(computed.fontFamily))
+                    options.bold = true;
+                if (computed.fontStyle === 'italic')
+                    options.italic = true;
+                if (computed.textDecoration && computed.textDecoration.includes('underline'))
+                    options.underline = true;
+                if (computed.color && computed.color !== 'rgb(0, 0, 0)') {
+                    options.color = rgbToHex(computed.color);
+                    const transparency = extractAlpha(computed.color);
+                    if (transparency !== null)
+                        options.transparency = transparency;
+                }
+                if (computed.fontSize)
+                    options.fontSize = pxToPoints(computed.fontSize);
+                if (computed.textTransform && computed.textTransform !== 'none') {
+                    const transformStr = computed.textTransform;
+                    textTransform = (text) => applyTextTransform(text, transformStr);
+                }
+                parseInlineFormatting(el, options, runs, textTransform, win);
+            }
+            prevNodeIsText = false;
+        }
+    });
+    if (runs.length > 0) {
+        runs[0].text = runs[0].text.replace(/^\s+/, '');
+        runs[runs.length - 1].text = runs[runs.length - 1].text.replace(/\s+$/, '');
+    }
+    return runs.filter((r) => r.text.length > 0);
+}
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+/**
+ * Parse a live browser DOM `Document` into a `ParsedSlide` intermediate
+ * representation.
+ *
+ * This is the TypeScript equivalent of `extractSlideData()` from html2pptx.js.
+ * It walks all elements in the document, extracts position, style, text, images,
+ * shapes, and lists, and returns a typed `ParsedSlide`.
+ *
+ * @param doc - A live browser `Document` object (typically from an iframe).
+ */
+export function parseSlideHtml(doc) {
+    const win = doc.defaultView || window;
+    const errors = [];
+    // -------------------------------------------------------------------------
+    // Extract background
+    // -------------------------------------------------------------------------
+    const body = doc.body;
+    const bodyStyle = win.getComputedStyle(body);
+    const bgImage = bodyStyle.backgroundImage;
+    const bgColor = bodyStyle.backgroundColor;
+    let background;
+    if (bgImage && bgImage !== 'none') {
+        if (bgImage.includes('linear-gradient') || bgImage.includes('radial-gradient')) {
+            const gradient = parseCssGradient(bgImage);
+            if (gradient) {
+                background = { type: 'gradient', gradient };
+            }
+            else {
+                background = { type: 'color', value: rgbToHex(bgColor) };
+            }
+        }
+        else {
+            const urlMatch = bgImage.match(/url\(["']?([^"')]+)["']?\)/);
+            if (urlMatch) {
+                background = { type: 'image', path: urlMatch[1] };
+            }
+            else {
+                background = { type: 'color', value: rgbToHex(bgColor) };
+            }
+        }
+    }
+    else {
+        background = { type: 'color', value: rgbToHex(bgColor) };
+    }
+    // -------------------------------------------------------------------------
+    // Process all elements
+    // -------------------------------------------------------------------------
+    const elements = [];
+    const placeholders = [];
+    const textTags = ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'UL', 'OL', 'LI', 'SPAN'];
+    const processed = new Set();
+    doc.querySelectorAll('*').forEach((el) => {
+        if (processed.has(el))
+            return;
+        const htmlEl = el;
+        // Validate text elements
+        if (textTags.includes(el.tagName) && el.tagName !== 'SPAN') {
+            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);
+            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 elements with backgrounds/borders as shapes
+        if (el.tagName === 'SPAN') {
+            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);
+            if (hasBg || hasBorder) {
+                const rect = htmlEl.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                    const text = el.textContent.trim();
+                    const bgGradient = parseCssGradient(computed.backgroundImage);
+                    const borderRadius = computed.borderRadius;
+                    const radiusValue = parseFloat(borderRadius);
+                    let rectRadius = 0;
+                    if (radiusValue > 0) {
+                        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 hasUniformBorder = hasBorder &&
+                        borderTop === borderRight &&
+                        borderRight === borderBottom &&
+                        borderBottom === borderLeft;
+                    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: {
+                            fontSize: pxToPoints(computed.fontSize),
+                            fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                            color: rgbToHex(computed.color),
+                            bold: parseInt(computed.fontWeight) >= 600,
+                            align: 'center',
+                            valign: 'middle',
+                        },
+                        shape: {
+                            fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
+                            gradient: bgGradient,
+                            transparency: null,
+                            line: hasUniformBorder
+                                ? {
+                                    color: rgbToHex(computed.borderColor),
+                                    width: pxToPoints(borderTop),
+                                }
+                                : null,
+                            rectRadius: rectRadius,
+                            shadow: null,
+                        },
+                    };
+                    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 text = el.textContent.trim();
+                if (rect.width > 0 && rect.height > 0 && text) {
+                    const computed2 = win.getComputedStyle(el);
+                    const fontSizePx = parseFloat(computed2.fontSize);
+                    const lineHeightPx = parseFloat(computed2.lineHeight);
+                    const lineHeightMultiplier = fontSizePx > 0 && !isNaN(lineHeightPx) ? lineHeightPx / fontSizePx : 1.0;
+                    const textElement = {
+                        type: 'p',
+                        text: [{ text: text, options: {} }],
+                        position: {
+                            x: pxToInch(rect.left),
+                            y: pxToInch(rect.top),
+                            w: pxToInch(rect.width),
+                            h: pxToInch(rect.height),
+                        },
+                        style: {
+                            fontSize: pxToPoints(computed2.fontSize),
+                            fontFace: computed2.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                            color: rgbToHex(computed2.color),
+                            bold: parseInt(computed2.fontWeight) >= 600,
+                            italic: computed2.fontStyle === 'italic',
+                            align: computed2.textAlign === 'center'
+                                ? 'center'
+                                : computed2.textAlign === 'right'
+                                    ? 'right'
+                                    : 'left',
+                            valign: 'middle',
+                            lineSpacing: lineHeightMultiplier * pxToPoints(computed2.fontSize),
+                        },
+                    };
+                    elements.push(textElement);
+                    processed.add(el);
+                    return;
+                }
+            }
+        }
+        // Extract placeholder elements
+        if (el.className &&
+            typeof el.className === 'string' &&
+            el.className.includes('placeholder')) {
+            const rect = htmlEl.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+                errors.push(`Placeholder "${el.id || 'unnamed'}" has ${rect.width === 0 ? 'width: 0' : 'height: 0'}. Check the layout CSS.`);
+            }
+            else {
+                placeholders.push({
+                    id: el.id || `placeholder-${placeholders.length}`,
+                    x: pxToInch(rect.left),
+                    y: pxToInch(rect.top),
+                    w: pxToInch(rect.width),
+                    h: pxToInch(rect.height),
+                });
+            }
+            processed.add(el);
+            return;
+        }
+        // Extract images
+        if (el.tagName === 'IMG') {
+            const rect = htmlEl.getBoundingClientRect();
+            if (rect.width > 0 && rect.height > 0) {
+                const imgComputed = win.getComputedStyle(el);
+                const bodyRect = doc.body.getBoundingClientRect();
+                const coversWidth = rect.width >= bodyRect.width * 0.95;
+                const coversHeight = rect.height >= bodyRect.height * 0.95;
+                const nearOrigin = rect.left <= 10 && rect.top <= 10;
+                const isFullSlideImage = coversWidth && coversHeight && nearOrigin;
+                const objectFit = imgComputed.objectFit;
+                // Check for ancestor with overflow:hidden and border-radius
+                let imgRectRadius = null;
+                let ancestor = el.parentElement;
+                while (ancestor && ancestor !== doc.body) {
+                    const ancestorComputed = win.getComputedStyle(ancestor);
+                    const ancestorOverflow = ancestorComputed.overflow;
+                    const ancestorBorderRadius = ancestorComputed.borderRadius;
+                    if ((ancestorOverflow === 'hidden' || ancestorOverflow === 'clip') &&
+                        ancestorBorderRadius) {
+                        const radiusValue = parseFloat(ancestorBorderRadius);
+                        if (radiusValue > 0) {
+                            if (ancestorBorderRadius.includes('%')) {
+                                const ancestorRect = ancestor.getBoundingClientRect();
+                                const minDim = Math.min(ancestorRect.width, ancestorRect.height);
+                                imgRectRadius = (radiusValue / 100) * pxToInch(minDim);
+                            }
+                            else if (ancestorBorderRadius.includes('pt')) {
+                                imgRectRadius = radiusValue / 72;
+                            }
+                            else {
+                                imgRectRadius = pxToInch(radiusValue);
+                            }
+                            break;
+                        }
+                    }
+                    ancestor = ancestor.parentElement;
+                }
+                const imageElement = {
+                    type: isFullSlideImage ? 'slideBackgroundImage' : 'image',
+                    src: el.src,
+                    position: {
+                        x: pxToInch(rect.left),
+                        y: pxToInch(rect.top),
+                        w: pxToInch(rect.width),
+                        h: pxToInch(rect.height),
+                    },
+                    sizing: objectFit === 'cover' ? { type: 'cover' } : null,
+                };
+                if (imgRectRadius !== null) {
+                    imageElement.rectRadius = imgRectRadius;
+                }
+                elements.push(imageElement);
+                processed.add(el);
+                return;
+            }
+        }
+        // Extract DIVs with backgrounds/borders as shapes
+        const isContainer = el.tagName === 'DIV' && !textTags.includes(el.tagName);
+        if (isContainer) {
+            const computed = win.getComputedStyle(el);
+            const hasBg = computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
+            // Check for background images or gradients
+            const elBgImage = computed.backgroundImage;
+            let bgImageUrl = null;
+            let bgImageSize = null;
+            let bgImagePosition = null;
+            let bgGradient = null;
+            if (elBgImage && elBgImage !== 'none') {
+                if (elBgImage.includes('linear-gradient') ||
+                    elBgImage.includes('radial-gradient')) {
+                    bgGradient = parseCssGradient(elBgImage);
+                }
+                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 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) {
+                    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),
+                    });
+                }
+                if (parseFloat(borderRight) > 0) {
+                    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),
+                    });
+                }
+                if (parseFloat(borderBottom) > 0) {
+                    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),
+                    });
+                }
+                if (parseFloat(borderLeft) > 0) {
+                    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),
+                    });
+                }
+            }
+            if (hasBg || hasBorder || bgImageUrl || bgGradient) {
+                const rect = htmlEl.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                    const shadow = parseBoxShadow(computed.boxShadow);
+                    // Add background image element first
+                    if (bgImageUrl) {
+                        const bgImgElement = {
+                            type: 'backgroundImage',
+                            src: bgImageUrl,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(rect.height),
+                            },
+                            sizing: {
+                                type: bgImageSize === 'cover'
+                                    ? 'cover'
+                                    : bgImageSize === 'contain'
+                                        ? 'contain'
+                                        : 'cover',
+                                position: bgImagePosition,
+                            },
+                        };
+                        elements.push(bgImgElement);
+                    }
+                    // Check for text children
+                    const textChildren = Array.from(el.children).filter((child) => ['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN'].includes(child.tagName));
+                    const nonTextChildren = Array.from(el.children).filter((child) => !['P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'SPAN'].includes(child.tagName));
+                    const isSingleTextChild = textChildren.length === 1 &&
+                        textChildren[0].children.length === 0 &&
+                        nonTextChildren.length === 0;
+                    // Detect flexbox alignment
+                    const display = computed.display;
+                    const isFlexContainer = display === 'flex' || display === 'inline-flex';
+                    const alignItems = computed.alignItems;
+                    const justifyContent = computed.justifyContent;
+                    let valign = 'top';
+                    let align = 'left';
+                    if (isFlexContainer) {
+                        const flexDirection = computed.flexDirection || 'row';
+                        if (flexDirection === 'row' || flexDirection === 'row-reverse') {
+                            if (alignItems === 'center')
+                                valign = 'middle';
+                            else if (alignItems === 'flex-end' || alignItems === 'end')
+                                valign = 'bottom';
+                            else
+                                valign = 'top';
+                            if (justifyContent === 'center')
+                                align = 'center';
+                            else if (justifyContent === 'flex-end' || justifyContent === 'end')
+                                align = 'right';
+                            else
+                                align = 'left';
+                        }
+                        else {
+                            if (alignItems === 'center')
+                                align = 'center';
+                            else if (alignItems === 'flex-end' || alignItems === 'end')
+                                align = 'right';
+                            else
+                                align = 'left';
+                            if (justifyContent === 'center')
+                                valign = 'middle';
+                            else if (justifyContent === 'flex-end' || justifyContent === 'end')
+                                valign = 'bottom';
+                            else
+                                valign = 'top';
+                        }
+                    }
+                    else {
+                        const textAlign = computed.textAlign;
+                        if (textAlign === 'center') {
+                            align = 'center';
+                        }
+                        else if (textAlign === 'right' || textAlign === 'end') {
+                            align = 'right';
+                        }
+                        else {
+                            const paddingLeft = parseFloat(computed.paddingLeft) || 0;
+                            const paddingRight = parseFloat(computed.paddingRight) || 0;
+                            const paddingDiff = Math.abs(paddingLeft - paddingRight);
+                            if (paddingLeft > 0 && paddingDiff < 2) {
+                                align = 'center';
+                            }
+                            else {
+                                align = 'left';
+                            }
+                        }
+                    }
+                    let shapeText = '';
+                    let shapeTextRuns = null;
+                    let shapeStyle = null;
+                    const hasTextChildren = textChildren.length > 0 && nonTextChildren.length === 0;
+                    if (hasTextChildren) {
+                        if (isSingleTextChild) {
+                            const textEl = textChildren[0];
+                            const textComputed = win.getComputedStyle(textEl);
+                            shapeText = textEl.textContent.trim();
+                            let fontFill = null;
+                            const textBgClip = textComputed.webkitBackgroundClip ||
+                                textComputed.backgroundClip;
+                            const textFillColor = textComputed.webkitTextFillColor;
+                            const textIsTextClip = textBgClip === 'text';
+                            const textFillTransparent = textFillColor === 'transparent' ||
+                                textFillColor === 'rgba(0, 0, 0, 0)' ||
+                                (textFillColor &&
+                                    textFillColor.includes('rgba') &&
+                                    textFillColor.endsWith(', 0)'));
+                            const parentBgClip = computed.webkitBackgroundClip || computed.backgroundClip;
+                            const parentFillColor = computed.webkitTextFillColor;
+                            const parentIsTextClip = parentBgClip === 'text';
+                            const parentFillTransparent = parentFillColor === 'transparent' ||
+                                parentFillColor === 'rgba(0, 0, 0, 0)' ||
+                                (parentFillColor &&
+                                    parentFillColor.includes('rgba') &&
+                                    parentFillColor.endsWith(', 0)'));
+                            if ((textIsTextClip && textFillTransparent) ||
+                                (parentIsTextClip && parentFillTransparent)) {
+                                const gradientSource = textIsTextClip && textFillTransparent
+                                    ? textComputed.backgroundImage
+                                    : computed.backgroundImage;
+                                if (gradientSource &&
+                                    gradientSource !== 'none' &&
+                                    (gradientSource.includes('linear-gradient') ||
+                                        gradientSource.includes('radial-gradient'))) {
+                                    fontFill = {
+                                        type: 'gradient',
+                                        gradient: parseCssGradient(gradientSource) || undefined,
+                                    };
+                                    bgGradient = null;
+                                }
+                            }
+                            const effectiveColor = textComputed.color !== 'rgb(0, 0, 0)' ? textComputed.color : computed.color;
+                            const isBold = textComputed.fontWeight === 'bold' ||
+                                parseInt(textComputed.fontWeight) >= 600 ||
+                                computed.fontWeight === 'bold' ||
+                                parseInt(computed.fontWeight) >= 600;
+                            let effectiveAlign = align;
+                            const childTextAlign = textComputed.textAlign;
+                            if (childTextAlign === 'center' ||
+                                childTextAlign === 'right' ||
+                                childTextAlign === 'end') {
+                                effectiveAlign =
+                                    childTextAlign === 'end' ? 'right' : childTextAlign;
+                            }
+                            const whiteSpace = computed.whiteSpace || textComputed.whiteSpace;
+                            const shouldNotWrap = whiteSpace === 'nowrap' ||
+                                whiteSpace === 'pre' ||
+                                rect.width < 100 ||
+                                rect.height < 50;
+                            shapeStyle = {
+                                fontSize: pxToPoints(textComputed.fontSize || computed.fontSize),
+                                fontFace: (textComputed.fontFamily || computed.fontFamily)
+                                    .split(',')[0]
+                                    .replace(/['"]/g, '')
+                                    .trim(),
+                                color: fontFill ? null : rgbToHex(effectiveColor),
+                                fontFill: fontFill,
+                                bold: isBold,
+                                align: effectiveAlign,
+                                valign: valign,
+                                inset: 0,
+                                wrap: !shouldNotWrap,
+                            };
+                            processed.add(textEl);
+                        }
+                        else {
+                            shapeTextRuns = [];
+                            textChildren.forEach((textChild, idx) => {
+                                const textEl = textChild;
+                                const textComputed = win.getComputedStyle(textEl);
+                                const text = textEl.textContent.trim();
+                                if (!text)
+                                    return;
+                                const isBold = textComputed.fontWeight === 'bold' ||
+                                    parseInt(textComputed.fontWeight) >= 600;
+                                const isItalic = textComputed.fontStyle === 'italic';
+                                const isUnderline = textComputed.textDecoration &&
+                                    textComputed.textDecoration.includes('underline');
+                                const runText = idx > 0 && shapeTextRuns.length > 0 ? ' ' + text : text;
+                                shapeTextRuns.push({
+                                    text: runText,
+                                    options: {
+                                        fontSize: pxToPoints(textComputed.fontSize),
+                                        fontFace: textComputed.fontFamily
+                                            .split(',')[0]
+                                            .replace(/['"]/g, '')
+                                            .trim(),
+                                        color: rgbToHex(textComputed.color),
+                                        bold: isBold,
+                                        italic: isItalic,
+                                        underline: isUnderline || false,
+                                    },
+                                });
+                                processed.add(textEl);
+                            });
+                            shapeStyle = {
+                                align: align,
+                                valign: valign,
+                                inset: 0,
+                            };
+                        }
+                    }
+                    if (hasBg || hasUniformBorder || bgGradient) {
+                        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),
+                            },
+                            shape: {
+                                fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
+                                gradient: bgGradient,
+                                transparency: hasBg ? extractAlpha(computed.backgroundColor) : null,
+                                line: hasUniformBorder
+                                    ? {
+                                        color: rgbToHex(computed.borderColor),
+                                        width: pxToPoints(computed.borderWidth),
+                                    }
+                                    : null,
+                                rectRadius: (() => {
+                                    const radius = computed.borderRadius;
+                                    const radiusValue = parseFloat(radius);
+                                    if (radiusValue === 0)
+                                        return 0;
+                                    if (radius.includes('%')) {
+                                        if (radiusValue >= 50)
+                                            return 1;
+                                        const minDim = Math.min(rect.width, rect.height);
+                                        return (radiusValue / 100) * pxToInch(minDim);
+                                    }
+                                    if (radius.includes('pt'))
+                                        return radiusValue / 72;
+                                    return radiusValue / PX_PER_IN;
+                                })(),
+                                shadow: shadow,
+                            },
+                        };
+                        elements.push(shapeElement);
+                    }
+                    else if (shapeStyle && shapeStyle.fontFill) {
+                        const fontFillTextElement = {
+                            type: 'p',
+                            text: shapeText,
+                            position: {
+                                x: pxToInch(rect.left),
+                                y: pxToInch(rect.top),
+                                w: pxToInch(rect.width),
+                                h: pxToInch(rect.height),
+                            },
+                            style: shapeStyle,
+                        };
+                        elements.push(fontFillTextElement);
+                    }
+                    else if (isSingleTextChild) {
+                        processed.delete(textChildren[0]);
+                    }
+                    elements.push(...borderLines);
+                    processed.add(el);
+                    return;
+                }
+            }
+        }
+        // Extract bullet lists
+        if (el.tagName === 'UL' || el.tagName === 'OL') {
+            const rect = htmlEl.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0)
+                return;
+            const liElements = Array.from(el.querySelectorAll('li'));
+            const items = [];
+            const ulComputed = win.getComputedStyle(el);
+            const ulPaddingLeftPt = pxToPoints(ulComputed.paddingLeft);
+            const marginLeft = ulPaddingLeftPt * 0.5;
+            const textIndent = ulPaddingLeftPt * 0.5;
+            liElements.forEach((li, idx) => {
+                const isLast = idx === liElements.length - 1;
+                const runs = parseInlineFormatting(li, { breakLine: false }, [], (x) => x, win);
+                if (runs.length > 0) {
+                    runs[0].text = runs[0].text.replace(/^[•\-\*\u25AA\u25B8]\s*/, '');
+                    runs[0].options.bullet = { indent: textIndent };
+                }
+                if (runs.length > 0 && !isLast) {
+                    runs[runs.length - 1].options.breakLine = true;
+                }
+                items.push(...runs);
+            });
+            const liComputed = win.getComputedStyle(liElements[0] || el);
+            const listFontSizePx = parseFloat(liComputed.fontSize);
+            const listLineHeightPx = parseFloat(liComputed.lineHeight);
+            const listLineHeightMultiplier = listFontSizePx > 0 && !isNaN(listLineHeightPx)
+                ? listLineHeightPx / listFontSizePx
+                : 1.0;
+            const listElement = {
+                type: 'list',
+                items: items,
+                position: {
+                    x: pxToInch(rect.left),
+                    y: pxToInch(rect.top),
+                    w: pxToInch(rect.width),
+                    h: pxToInch(rect.height),
+                },
+                style: {
+                    fontSize: pxToPoints(liComputed.fontSize),
+                    fontFace: liComputed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+                    color: rgbToHex(liComputed.color),
+                    transparency: extractAlpha(liComputed.color),
+                    align: liComputed.textAlign === 'start'
+                        ? 'left'
+                        : liComputed.textAlign,
+                    lineSpacing: pxToPoints(liComputed.fontSize) * listLineHeightMultiplier,
+                    paraSpaceBefore: 0,
+                    paraSpaceAfter: pxToPoints(liComputed.marginBottom),
+                    margin: [marginLeft, 0, 0, 0],
+                },
+            };
+            elements.push(listElement);
+            liElements.forEach((li) => processed.add(li));
+            processed.add(el);
+            return;
+        }
+        // Extract text elements
+        if (!textTags.includes(el.tagName) || el.tagName === 'SPAN')
+            return;
+        const rect = htmlEl.getBoundingClientRect();
+        const text = el.textContent.trim();
+        if (rect.width === 0 || rect.height === 0 || !text)
+            return;
+        if (el.tagName !== 'LI' &&
+            /^[•\-\*\u25AA\u25B8\u25CB\u25CF\u25C6\u25C7\u25A0\u25A1]\s/.test(text.trimStart())) {
+            errors.push(`Text element <${el.tagName.toLowerCase()}> starts with bullet symbol "${text.substring(0, 20)}...". ` +
+                'Use <ul> or <ol> lists instead of manual bullet symbols.');
+            return;
+        }
+        const computed = win.getComputedStyle(el);
+        const rotation = getRotation(computed.transform, computed.writingMode);
+        const { x, y, w, h } = getPositionAndSize(htmlEl, rect, rotation);
+        const fontSizePx = parseFloat(computed.fontSize);
+        const lineHeightPx = parseFloat(computed.lineHeight);
+        const lineHeightMultiplier = fontSizePx > 0 && !isNaN(lineHeightPx) ? lineHeightPx / fontSizePx : 1.0;
+        let textAlign = computed.textAlign === 'start' ? 'left' : computed.textAlign;
+        let valign = null;
+        const checkFlexParent = (parent) => {
+            if (!parent)
+                return null;
+            const parentComputed = win.getComputedStyle(parent);
+            const parentDisplay = parentComputed.display;
+            if (parentDisplay === 'flex' || parentDisplay === 'inline-flex') {
+                const flexDirection = parentComputed.flexDirection || 'row';
+                const alignItems = parentComputed.alignItems;
+                if ((flexDirection === 'row' || flexDirection === 'row-reverse') &&
+                    parent.children.length > 1) {
+                    return { alignItems, flexDirection };
+                }
+            }
+            return null;
+        };
+        const parentEl = el.parentElement;
+        let flexInfo = checkFlexParent(parentEl);
+        if (!flexInfo && parentEl) {
+            flexInfo = checkFlexParent(parentEl.parentElement);
+        }
+        if (flexInfo) {
+            if (flexInfo.alignItems === 'center') {
+                valign = 'middle';
+            }
+        }
+        const baseStyle = {
+            fontSize: pxToPoints(computed.fontSize),
+            fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
+            color: rgbToHex(computed.color),
+            align: textAlign,
+            valign: valign,
+            lineSpacing: pxToPoints(computed.fontSize) * lineHeightMultiplier,
+            paraSpaceBefore: pxToPoints(computed.marginTop),
+            paraSpaceAfter: pxToPoints(computed.marginBottom),
+            margin: [
+                pxToPoints(computed.paddingLeft),
+                pxToPoints(computed.paddingRight),
+                pxToPoints(computed.paddingBottom),
+                pxToPoints(computed.paddingTop),
+            ],
+        };
+        const transparency = extractAlpha(computed.color);
+        if (transparency !== null)
+            baseStyle.transparency = transparency;
+        if (rotation !== null)
+            baseStyle.rotate = rotation;
+        const bgClip = computed.webkitBackgroundClip || computed.backgroundClip;
+        const textFillColor = computed.webkitTextFillColor;
+        const isTextFillTransparent = textFillColor === 'transparent' ||
+            textFillColor === 'rgba(0, 0, 0, 0)' ||
+            (textFillColor &&
+                textFillColor.includes('rgba') &&
+                textFillColor.endsWith(', 0)'));
+        if (bgClip === 'text' && isTextFillTransparent) {
+            const elBgImg = computed.backgroundImage;
+            if (elBgImg &&
+                elBgImg !== 'none' &&
+                (elBgImg.includes('linear-gradient') || elBgImg.includes('radial-gradient'))) {
+                const textGradient = parseCssGradient(elBgImg);
+                if (textGradient) {
+                    baseStyle.fontFill = { type: 'gradient', gradient: textGradient };
+                    delete baseStyle.color;
+                }
+            }
+        }
+        const hasFormatting = el.querySelector('b, i, u, strong, em, span, br');
+        if (hasFormatting) {
+            const transformStr = computed.textTransform;
+            const runs = parseInlineFormatting(el, {}, [], (str) => applyTextTransform(str, transformStr), win);
+            const textElement = {
+                type: el.tagName.toLowerCase(),
+                text: runs,
+                position: { x: pxToInch(x), y: pxToInch(y), w: pxToInch(w), h: pxToInch(h) },
+                style: baseStyle,
+            };
+            elements.push(textElement);
+        }
+        else {
+            const textTransformVal = computed.textTransform;
+            const transformedText = applyTextTransform(text, textTransformVal);
+            const isBold = computed.fontWeight === 'bold' || parseInt(computed.fontWeight) >= 600;
+            const textElement = {
+                type: el.tagName.toLowerCase(),
+                text: transformedText,
+                position: { x: pxToInch(x), y: pxToInch(y), w: pxToInch(w), h: pxToInch(h) },
+                style: {
+                    ...baseStyle,
+                    bold: isBold && !shouldSkipBold(computed.fontFamily),
+                    italic: computed.fontStyle === 'italic',
+                    underline: computed.textDecoration.includes('underline'),
+                },
+            };
+            elements.push(textElement);
+        }
+        processed.add(el);
+    });
+    return { background, elements, placeholders, errors };
+}
+//# sourceMappingURL=parse.js.map