@agenthippo-ai/agenthippo 1.110.11 → 1.110.19

package/out/base-prompts/skills/pptx/scripts/html2pptx.js

@@ -1,984 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/**
- * html2pptx - Convert HTML slide to pptxgenjs slide with positioned elements
- *
- * USAGE:
- *   const pptx = new pptxgen();
- *   pptx.layout = 'LAYOUT_16x9';  // Must match HTML body dimensions
- *
- *   const { slide, placeholders } = await html2pptx('slide.html', pptx);
- *   slide.addChart(pptx.charts.LINE, data, placeholders[0]);
- *
- *   await pptx.writeFile('output.pptx');
- *
- * FEATURES:
- *   - Converts HTML to PowerPoint with accurate positioning
- *   - Supports text, images, shapes, and bullet lists
- *   - Extracts placeholder elements (class="placeholder") with positions
- *   - Handles CSS gradients, borders, and margins
- *
- * VALIDATION:
- *   - Uses body width/height from HTML for viewport sizing
- *   - Throws error if HTML dimensions don't match presentation layout
- *   - Throws error if content overflows body (with overflow details)
- *
- * RETURNS:
- *   { slide, placeholders } where placeholders is an array of { id, x, y, w, h }
- */
-
-const { chromium } = require('playwright');
-const path = require('path');
-const sharp = require('sharp');
-
-const PT_PER_PX = 0.75;
-const PX_PER_IN = 96;
-const EMU_PER_IN = 914400;
-
-// Helper: Get body dimensions and check for overflow
-async function getBodyDimensions(page) {
-	const bodyDimensions = await page.evaluate(() => {
-		const body = document.body;
-		const style = window.getComputedStyle(body);
-
-		return {
-			width: parseFloat(style.width),
-			height: parseFloat(style.height),
-			scrollWidth: body.scrollWidth,
-			scrollHeight: body.scrollHeight
-		};
-	});
-
-	const errors = [];
-	const widthOverflowPx = Math.max(0, bodyDimensions.scrollWidth - bodyDimensions.width - 1);
-	const heightOverflowPx = Math.max(0, bodyDimensions.scrollHeight - bodyDimensions.height - 1);
-
-	const widthOverflowPt = widthOverflowPx * PT_PER_PX;
-	const heightOverflowPt = heightOverflowPx * PT_PER_PX;
-
-	if (widthOverflowPt > 0 || heightOverflowPt > 0) {
-		const directions = [];
-		if (widthOverflowPt > 0) directions.push(`${widthOverflowPt.toFixed(1)}pt horizontally`);
-		if (heightOverflowPt > 0) directions.push(`${heightOverflowPt.toFixed(1)}pt vertically`);
-		const reminder = heightOverflowPt > 0 ? ' (Remember: leave 0.5" margin at bottom of slide)' : '';
-		errors.push(`HTML content overflows body by ${directions.join(' and ')}${reminder}`);
-	}
-
-	return { ...bodyDimensions, errors };
-}
-
-// Helper: Validate dimensions match presentation layout
-function validateDimensions(bodyDimensions, pres) {
-	const errors = [];
-	const widthInches = bodyDimensions.width / PX_PER_IN;
-	const heightInches = bodyDimensions.height / PX_PER_IN;
-
-	if (pres.presLayout) {
-		const layoutWidth = pres.presLayout.width / EMU_PER_IN;
-		const layoutHeight = pres.presLayout.height / EMU_PER_IN;
-
-		if (Math.abs(layoutWidth - widthInches) > 0.1 || Math.abs(layoutHeight - heightInches) > 0.1) {
-			errors.push(
-				`HTML dimensions (${widthInches.toFixed(1)}" × ${heightInches.toFixed(1)}") ` +
-				`don't match presentation layout (${layoutWidth.toFixed(1)}" × ${layoutHeight.toFixed(1)}")`
-			);
-		}
-	}
-	return errors;
-}
-
-function validateTextBoxPosition(slideData, bodyDimensions) {
-	const errors = [];
-	const slideHeightInches = bodyDimensions.height / PX_PER_IN;
-	const minBottomMargin = 0.5; // 0.5 inches from bottom
-
-	for (const el of slideData.elements) {
-		// Check text elements (p, h1-h6, list)
-		if (['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'list'].includes(el.type)) {
-			const fontSize = el.style?.fontSize || 0;
-			const bottomEdge = el.position.y + el.position.h;
-			const distanceFromBottom = slideHeightInches - bottomEdge;
-
-			if (fontSize > 12 && distanceFromBottom < minBottomMargin) {
-				const getText = () => {
-					if (typeof el.text === 'string') return el.text;
-					if (Array.isArray(el.text)) return el.text.find(t => t.text)?.text || '';
-					if (Array.isArray(el.items)) return el.items.find(item => item.text)?.text || '';
-					return '';
-				};
-				const textPrefix = getText().substring(0, 50) + (getText().length > 50 ? '...' : '');
-
-				errors.push(
-					`Text box "${textPrefix}" ends too close to bottom edge ` +
-					`(${distanceFromBottom.toFixed(2)}" from bottom, minimum ${minBottomMargin}" required)`
-				);
-			}
-		}
-	}
-
-	return errors;
-}
-
-// Helper: Add background to slide
-async function addBackground(slideData, targetSlide, tmpDir) {
-	if (slideData.background.type === 'image' && slideData.background.path) {
-		let imagePath = slideData.background.path.startsWith('file://')
-			? slideData.background.path.replace('file://', '')
-			: slideData.background.path;
-		targetSlide.background = { path: imagePath };
-	} else if (slideData.background.type === 'color' && slideData.background.value) {
-		targetSlide.background = { color: slideData.background.value };
-	}
-}
-
-// Helper: Add elements to slide
-function addElements(slideData, targetSlide, pres) {
-	for (const el of slideData.elements) {
-		if (el.type === 'image') {
-			let imagePath = el.src.startsWith('file://') ? el.src.replace('file://', '') : el.src;
-			targetSlide.addImage({
-				path: imagePath,
-				x: el.position.x,
-				y: el.position.y,
-				w: el.position.w,
-				h: el.position.h
-			});
-		} else if (el.type === 'line') {
-			targetSlide.addShape(pres.ShapeType.line, {
-				x: el.x1,
-				y: el.y1,
-				w: el.x2 - el.x1,
-				h: el.y2 - el.y1,
-				line: { color: el.color, width: el.width }
-			});
-		} else if (el.type === 'shape') {
-			const shapeOptions = {
-				x: el.position.x,
-				y: el.position.y,
-				w: el.position.w,
-				h: el.position.h,
-				shape: el.shape.rectRadius > 0 ? pres.ShapeType.roundRect : pres.ShapeType.rect
-			};
-
-			if (el.shape.fill) {
-				shapeOptions.fill = { color: el.shape.fill };
-				if (el.shape.transparency != null) shapeOptions.fill.transparency = el.shape.transparency;
-			}
-			if (el.shape.line) shapeOptions.line = el.shape.line;
-			if (el.shape.rectRadius > 0) shapeOptions.rectRadius = el.shape.rectRadius;
-			if (el.shape.shadow) shapeOptions.shadow = el.shape.shadow;
-
-			targetSlide.addText(el.text || '', shapeOptions);
-		} else if (el.type === 'list') {
-			const listOptions = {
-				x: el.position.x,
-				y: el.position.y,
-				w: el.position.w,
-				h: el.position.h,
-				fontSize: el.style.fontSize,
-				fontFace: el.style.fontFace,
-				color: el.style.color,
-				align: el.style.align,
-				valign: 'top',
-				lineSpacing: el.style.lineSpacing,
-				paraSpaceBefore: el.style.paraSpaceBefore,
-				paraSpaceAfter: el.style.paraSpaceAfter,
-				margin: el.style.margin
-			};
-			if (el.style.margin) listOptions.margin = el.style.margin;
-			targetSlide.addText(el.items, listOptions);
-		} else {
-			// Check if text is single-line (height suggests one line)
-			const lineHeight = el.style.lineSpacing || el.style.fontSize * 1.2;
-			const isSingleLine = el.position.h <= lineHeight * 1.5;
-
-			let adjustedX = el.position.x;
-			let adjustedW = el.position.w;
-
-			// Make single-line text 2% wider to account for underestimate
-			if (isSingleLine) {
-				const widthIncrease = el.position.w * 0.02;
-				const align = el.style.align;
-
-				if (align === 'center') {
-					// Center: expand both sides
-					adjustedX = el.position.x - (widthIncrease / 2);
-					adjustedW = el.position.w + widthIncrease;
-				} else if (align === 'right') {
-					// Right: expand to the left
-					adjustedX = el.position.x - widthIncrease;
-					adjustedW = el.position.w + widthIncrease;
-				} else {
-					// Left (default): expand to the right
-					adjustedW = el.position.w + widthIncrease;
-				}
-			}
-
-			const textOptions = {
-				x: adjustedX,
-				y: el.position.y,
-				w: adjustedW,
-				h: el.position.h,
-				fontSize: el.style.fontSize,
-				fontFace: el.style.fontFace,
-				color: el.style.color,
-				bold: el.style.bold,
-				italic: el.style.italic,
-				underline: el.style.underline,
-				valign: 'top',
-				lineSpacing: el.style.lineSpacing,
-				paraSpaceBefore: el.style.paraSpaceBefore,
-				paraSpaceAfter: el.style.paraSpaceAfter,
-				inset: 0  // Remove default PowerPoint internal padding
-			};
-
-			if (el.style.align) textOptions.align = el.style.align;
-			if (el.style.margin) textOptions.margin = el.style.margin;
-			if (el.style.rotate !== undefined) textOptions.rotate = el.style.rotate;
-			if (el.style.transparency !== null && el.style.transparency !== undefined) textOptions.transparency = el.style.transparency;
-
-			targetSlide.addText(el.text, textOptions);
-		}
-	}
-}
-
-// Helper: Extract slide data from HTML page
-async function extractSlideData(page) {
-	return await page.evaluate(() => {
-		const PT_PER_PX = 0.75;
-		const PX_PER_IN = 96;
-
-		// Fonts that are single-weight and should not have bold applied
-		// (applying bold causes PowerPoint to use faux bold which makes text wider)
-		const SINGLE_WEIGHT_FONTS = ['impact'];
-
-		// Helper: Check if a font should skip bold formatting
-		const shouldSkipBold = (fontFamily) => {
-			if (!fontFamily) return false;
-			const normalizedFont = fontFamily.toLowerCase().replace(/['"]/g, '').split(',')[0].trim();
-			return SINGLE_WEIGHT_FONTS.includes(normalizedFont);
-		};
-
-		// Unit conversion helpers
-		const pxToInch = (px) => px / PX_PER_IN;
-		const pxToPoints = (pxStr) => parseFloat(pxStr) * PT_PER_PX;
-		const rgbToHex = (rgbStr) => {
-			// Handle transparent backgrounds by defaulting to white
-			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('');
-		};
-
-		const 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);
-		};
-
-		const 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;
-		};
-
-		// Extract rotation angle from CSS transform and writing-mode
-		const getRotation = (transform, writingMode) => {
-			let angle = 0;
-
-			// Handle writing-mode first
-			// PowerPoint: 90° = text rotated 90° clockwise (reads top to bottom, letters upright)
-			// PowerPoint: 270° = text rotated 270° clockwise (reads bottom to top, letters upright)
-			if (writingMode === 'vertical-rl') {
-				// vertical-rl alone = text reads top to bottom = 90° in PowerPoint
-				angle = 90;
-			} else if (writingMode === 'vertical-lr') {
-				// vertical-lr alone = text reads bottom to top = 270° in PowerPoint
-				angle = 270;
-			}
-
-			// Then add any transform rotation
-			if (transform && transform !== 'none') {
-				// Try to match rotate() function
-				const rotateMatch = transform.match(/rotate\((-?\d+(?:\.\d+)?)deg\)/);
-				if (rotateMatch) {
-					angle += parseFloat(rotateMatch[1]);
-				} else {
-					// Browser may compute as matrix - extract rotation from matrix
-					const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
-					if (matrixMatch) {
-						const values = matrixMatch[1].split(',').map(parseFloat);
-						// matrix(a, b, c, d, e, f) where rotation = atan2(b, a)
-						const matrixAngle = Math.atan2(values[1], values[0]) * (180 / Math.PI);
-						angle += Math.round(matrixAngle);
-					}
-				}
-			}
-
-			// Normalize to 0-359 range
-			angle = angle % 360;
-			if (angle < 0) angle += 360;
-
-			return angle === 0 ? null : angle;
-		};
-
-		// Get position/dimensions accounting for rotation
-		const getPositionAndSize = (el, rect, rotation) => {
-			if (rotation === null) {
-				return { x: rect.left, y: rect.top, w: rect.width, h: rect.height };
-			}
-
-			// For 90° or 270° rotations, swap width and height
-			// because PowerPoint applies rotation to the original (unrotated) box
-			const isVertical = rotation === 90 || rotation === 270;
-
-			if (isVertical) {
-				// The browser shows us the rotated dimensions (tall box for vertical text)
-				// But PowerPoint needs the pre-rotation dimensions (wide box that will be rotated)
-				// So we swap: browser's height becomes PPT's width, browser's width becomes PPT's height
-				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
-				};
-			}
-
-			// For other rotations, use element's offset dimensions
-			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
-			};
-		};
-
-		// Parse CSS box-shadow into PptxGenJS shadow properties
-		const parseBoxShadow = (boxShadow) => {
-			if (!boxShadow || boxShadow === 'none') return null;
-
-			// Browser computed style format: "rgba(0, 0, 0, 0.3) 2px 2px 8px 0px [inset]"
-			// CSS format: "[inset] 2px 2px 8px 0px rgba(0, 0, 0, 0.3)"
-
-			const insetMatch = boxShadow.match(/inset/);
-
-			// IMPORTANT: PptxGenJS/PowerPoint doesn't properly support inset shadows
-			// Only process outer shadows to avoid file corruption
-			if (insetMatch) return null;
-
-			// Extract color first (rgba or rgb at start)
-			const colorMatch = boxShadow.match(/rgba?\([^)]+\)/);
-
-			// Extract numeric values (handles both px and pt units)
-			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;
-
-			// Calculate angle from offsets (in degrees, 0 = right, 90 = down)
-			let angle = 0;
-			if (offsetX !== 0 || offsetY !== 0) {
-				angle = Math.atan2(offsetY, offsetX) * (180 / Math.PI);
-				if (angle < 0) angle += 360;
-			}
-
-			// Calculate offset distance (hypotenuse)
-			const offset = Math.sqrt(offsetX * offsetX + offsetY * offsetY) * PT_PER_PX;
-
-			// Extract opacity from rgba
-			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, // Convert to points
-				color: colorMatch ? rgbToHex(colorMatch[0]) : '000000',
-				offset: offset,
-				opacity
-			};
-		};
-
-		// Parse inline formatting tags (<b>, <i>, <u>, <strong>, <em>, <span>) into text runs
-		const parseInlineFormatting = (element, baseOptions = {}, runs = [], baseTextTransform = (x) => x) => {
-			let prevNodeIsText = false;
-
-			element.childNodes.forEach((node) => {
-				let textTransform = baseTextTransform;
-
-				const isText = node.nodeType === Node.TEXT_NODE || node.tagName === 'BR';
-				if (isText) {
-					const text = node.tagName === 'BR' ? '\n' : textTransform(node.textContent.replace(/\s+/g, ' '));
-					const prevRun = runs[runs.length - 1];
-					if (prevNodeIsText && prevRun) {
-						prevRun.text += text;
-					} else {
-						runs.push({ text, options: { ...baseOptions } });
-					}
-
-				} else if (node.nodeType === Node.ELEMENT_NODE && node.textContent.trim()) {
-					const options = { ...baseOptions };
-					const computed = window.getComputedStyle(node);
-
-					// Handle inline elements with computed styles
-					if (node.tagName === 'SPAN' || node.tagName === 'B' || node.tagName === 'STRONG' || node.tagName === 'I' || node.tagName === 'EM' || node.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);
-
-						// Apply text-transform on the span element itself
-						if (computed.textTransform && computed.textTransform !== 'none') {
-							const transformStr = computed.textTransform;
-							textTransform = (text) => applyTextTransform(text, transformStr);
-						}
-
-						// Validate: Check for margins on inline elements
-						if (computed.marginLeft && parseFloat(computed.marginLeft) > 0) {
-							errors.push(`Inline element <${node.tagName.toLowerCase()}> has margin-left which is not supported in PowerPoint. Remove margin from inline elements.`);
-						}
-						if (computed.marginRight && parseFloat(computed.marginRight) > 0) {
-							errors.push(`Inline element <${node.tagName.toLowerCase()}> has margin-right which is not supported in PowerPoint. Remove margin from inline elements.`);
-						}
-						if (computed.marginTop && parseFloat(computed.marginTop) > 0) {
-							errors.push(`Inline element <${node.tagName.toLowerCase()}> has margin-top which is not supported in PowerPoint. Remove margin from inline elements.`);
-						}
-						if (computed.marginBottom && parseFloat(computed.marginBottom) > 0) {
-							errors.push(`Inline element <${node.tagName.toLowerCase()}> has margin-bottom which is not supported in PowerPoint. Remove margin from inline elements.`);
-						}
-
-						// Recursively process the child node. This will flatten nested spans into multiple runs.
-						parseInlineFormatting(node, options, runs, textTransform);
-					}
-				}
-
-				prevNodeIsText = isText;
-			});
-
-			// Trim leading space from first run and trailing space from last run
-			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);
-		};
-
-		// Extract background from body (image or color)
-		const body = document.body;
-		const bodyStyle = window.getComputedStyle(body);
-		const bgImage = bodyStyle.backgroundImage;
-		const bgColor = bodyStyle.backgroundColor;
-
-		// Collect validation errors
-		const errors = [];
-
-		// Validate: Check for CSS gradients
-		if (bgImage && (bgImage.includes('linear-gradient') || bgImage.includes('radial-gradient'))) {
-			errors.push(
-				'CSS gradients are not supported. Use Sharp to rasterize gradients as PNG images first, ' +
-				'then reference with background-image: url(\'gradient.png\')'
-			);
-		}
-
-		let background;
-		if (bgImage && bgImage !== 'none') {
-			// Extract URL from url("...") or url(...)
-			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'];
-		const processed = new Set();
-
-		document.querySelectorAll('*').forEach((el) => {
-			if (processed.has(el)) return;
-
-			// Validate text elements don't have backgrounds, borders, or shadows
-			if (textTags.includes(el.tagName)) {
-				const computed = window.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;
-				}
-			}
-
-			// Extract placeholder elements (for charts, etc.)
-			if (el.className && el.className.includes('placeholder')) {
-				const rect = el.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 = el.getBoundingClientRect();
-				if (rect.width > 0 && rect.height > 0) {
-					elements.push({
-						type: 'image',
-						src: el.src,
-						position: {
-							x: pxToInch(rect.left),
-							y: pxToInch(rect.top),
-							w: pxToInch(rect.width),
-							h: pxToInch(rect.height)
-						}
-					});
-					processed.add(el);
-					return;
-				}
-			}
-
-			// Extract DIVs with backgrounds/borders as shapes
-			const isContainer = el.tagName === 'DIV' && !textTags.includes(el.tagName);
-			if (isContainer) {
-				const computed = window.getComputedStyle(el);
-				const hasBg = computed.backgroundColor && computed.backgroundColor !== 'rgba(0, 0, 0, 0)';
-
-				// Validate: Check for unwrapped text content in DIV
-				for (const node of el.childNodes) {
-					if (node.nodeType === Node.TEXT_NODE) {
-						const text = node.textContent.trim();
-						if (text) {
-							errors.push(
-								`DIV element contains unwrapped text "${text.substring(0, 50)}${text.length > 50 ? '...' : ''}". ` +
-								'All text must be wrapped in <p>, <h1>-<h6>, <ul>, or <ol> tags to appear in PowerPoint.'
-							);
-						}
-					}
-				}
-
-				// Check for background images on shapes
-				const bgImage = computed.backgroundImage;
-				if (bgImage && bgImage !== 'none') {
-					errors.push(
-						'Background images on DIV elements are not supported. ' +
-						'Use solid colors or borders for shapes, or use slide.addImage() in PptxGenJS to layer images.'
-					);
-					return;
-				}
-
-				// Check for borders - both uniform and partial
-				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 = el.getBoundingClientRect();
-					const x = pxToInch(rect.left);
-					const y = pxToInch(rect.top);
-					const w = pxToInch(rect.width);
-					const h = pxToInch(rect.height);
-
-					// Collect lines to add after shape (inset by half the line width to center on edge)
-					if (parseFloat(borderTop) > 0) {
-						const widthPt = pxToPoints(borderTop);
-						const inset = (widthPt / 72) / 2; // Convert points to inches, then half
-						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) {
-					const rect = el.getBoundingClientRect();
-					if (rect.width > 0 && rect.height > 0) {
-						const shadow = parseBoxShadow(computed.boxShadow);
-
-						// Only add shape if there's background or uniform border
-						if (hasBg || hasUniformBorder) {
-							elements.push({
-								type: 'shape',
-								text: '',  // Shape only - child text elements render on top
-								position: {
-									x: pxToInch(rect.left),
-									y: pxToInch(rect.top),
-									w: pxToInch(rect.width),
-									h: pxToInch(rect.height)
-								},
-								shape: {
-									fill: hasBg ? rgbToHex(computed.backgroundColor) : null,
-									transparency: hasBg ? extractAlpha(computed.backgroundColor) : null,
-									line: hasUniformBorder ? {
-										color: rgbToHex(computed.borderColor),
-										width: pxToPoints(computed.borderWidth)
-									} : null,
-									// Convert border-radius to rectRadius (in inches)
-									// % values: 50%+ = circle (1), <50% = percentage of min dimension
-									// pt values: divide by 72 (72pt = 1 inch)
-									// px values: divide by 96 (96px = 1 inch)
-									rectRadius: (() => {
-										const radius = computed.borderRadius;
-										const radiusValue = parseFloat(radius);
-										if (radiusValue === 0) return 0;
-
-										if (radius.includes('%')) {
-											if (radiusValue >= 50) return 1;
-											// Calculate percentage of smaller dimension
-											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
-								}
-							});
-						}
-
-						// Add partial border lines
-						elements.push(...borderLines);
-
-						processed.add(el);
-						return;
-					}
-				}
-			}
-
-			// Extract bullet lists as single text block
-			if (el.tagName === 'UL' || el.tagName === 'OL') {
-				const rect = el.getBoundingClientRect();
-				if (rect.width === 0 || rect.height === 0) return;
-
-				const liElements = Array.from(el.querySelectorAll('li'));
-				const items = [];
-				const ulComputed = window.getComputedStyle(el);
-				const ulPaddingLeftPt = pxToPoints(ulComputed.paddingLeft);
-
-				// Split: margin-left for bullet position, indent for text position
-				// margin-left + indent = ul padding-left
-				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 });
-					// Clean manual bullets from first run
-					if (runs.length > 0) {
-						runs[0].text = runs[0].text.replace(/^[•\-\*▪▸]\s*/, '');
-						runs[0].options.bullet = { indent: textIndent };
-					}
-					// Set breakLine on last run
-					if (runs.length > 0 && !isLast) {
-						runs[runs.length - 1].options.breakLine = true;
-					}
-					items.push(...runs);
-				});
-
-				const computed = window.getComputedStyle(liElements[0] || el);
-
-				elements.push({
-					type: 'list',
-					items: items,
-					position: {
-						x: pxToInch(rect.left),
-						y: pxToInch(rect.top),
-						w: pxToInch(rect.width),
-						h: pxToInch(rect.height)
-					},
-					style: {
-						fontSize: pxToPoints(computed.fontSize),
-						fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
-						color: rgbToHex(computed.color),
-						transparency: extractAlpha(computed.color),
-						align: computed.textAlign === 'start' ? 'left' : computed.textAlign,
-						lineSpacing: computed.lineHeight && computed.lineHeight !== 'normal' ? pxToPoints(computed.lineHeight) : null,
-						paraSpaceBefore: 0,
-						paraSpaceAfter: pxToPoints(computed.marginBottom),
-						// PptxGenJS margin array is [left, right, bottom, top]
-						margin: [marginLeft, 0, 0, 0]
-					}
-				});
-
-				liElements.forEach(li => processed.add(li));
-				processed.add(el);
-				return;
-			}
-
-			// Extract text elements (P, H1, H2, etc.)
-			if (!textTags.includes(el.tagName)) return;
-
-			const rect = el.getBoundingClientRect();
-			const text = el.textContent.trim();
-			if (rect.width === 0 || rect.height === 0 || !text) return;
-
-			// Validate: Check for manual bullet symbols in text elements (not in lists)
-			if (el.tagName !== 'LI' && /^[•\-\*▪▸○●◆◇■□]\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 = window.getComputedStyle(el);
-			const rotation = getRotation(computed.transform, computed.writingMode);
-			const { x, y, w, h } = getPositionAndSize(el, rect, rotation);
-
-			const baseStyle = {
-				fontSize: pxToPoints(computed.fontSize),
-				fontFace: computed.fontFamily.split(',')[0].replace(/['"]/g, '').trim(),
-				color: rgbToHex(computed.color),
-				align: computed.textAlign === 'start' ? 'left' : computed.textAlign,
-				lineSpacing: pxToPoints(computed.lineHeight),
-				paraSpaceBefore: pxToPoints(computed.marginTop),
-				paraSpaceAfter: pxToPoints(computed.marginBottom),
-				// PptxGenJS margin array is [left, right, bottom, top] (not [top, right, bottom, left] as documented)
-				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 hasFormatting = el.querySelector('b, i, u, strong, em, span, br');
-
-			if (hasFormatting) {
-				// Text with inline formatting
-				const transformStr = computed.textTransform;
-				const runs = parseInlineFormatting(el, {}, [], (str) => applyTextTransform(str, transformStr));
-
-				// Adjust lineSpacing based on largest fontSize in runs
-				const adjustedStyle = { ...baseStyle };
-				if (adjustedStyle.lineSpacing) {
-					const maxFontSize = Math.max(
-						adjustedStyle.fontSize,
-						...runs.map(r => r.options?.fontSize || 0)
-					);
-					if (maxFontSize > adjustedStyle.fontSize) {
-						const lineHeightMultiplier = adjustedStyle.lineSpacing / adjustedStyle.fontSize;
-						adjustedStyle.lineSpacing = maxFontSize * lineHeightMultiplier;
-					}
-				}
-
-				elements.push({
-					type: el.tagName.toLowerCase(),
-					text: runs,
-					position: { x: pxToInch(x), y: pxToInch(y), w: pxToInch(w), h: pxToInch(h) },
-					style: adjustedStyle
-				});
-			} else {
-				// Plain text - inherit CSS formatting
-				const textTransform = computed.textTransform;
-				const transformedText = applyTextTransform(text, textTransform);
-
-				const isBold = computed.fontWeight === 'bold' || parseInt(computed.fontWeight) >= 600;
-
-				elements.push({
-					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')
-					}
-				});
-			}
-
-			processed.add(el);
-		});
-
-		return { background, elements, placeholders, errors };
-	});
-}
-
-async function html2pptx(htmlFile, pres, options = {}) {
-	const {
-		tmpDir = process.env.TMPDIR || '/tmp',
-		slide = null
-	} = options;
-
-	try {
-		// Use Chrome on macOS, default Chromium on Unix
-		const launchOptions = { env: { TMPDIR: tmpDir } };
-		if (process.platform === 'darwin') {
-			launchOptions.channel = 'chrome';
-		}
-
-		const browser = await chromium.launch(launchOptions);
-
-		let bodyDimensions;
-		let slideData;
-
-		const filePath = path.isAbsolute(htmlFile) ? htmlFile : path.join(process.cwd(), htmlFile);
-		const validationErrors = [];
-
-		try {
-			const page = await browser.newPage();
-			page.on('console', (msg) => {
-				// Log the message text to your test runner's console
-				console.log(`Browser console: ${msg.text()}`);
-			});
-
-			await page.goto(`file://${filePath}`);
-
-			bodyDimensions = await getBodyDimensions(page);
-
-			await page.setViewportSize({
-				width: Math.round(bodyDimensions.width),
-				height: Math.round(bodyDimensions.height)
-			});
-
-			slideData = await extractSlideData(page);
-		} finally {
-			await browser.close();
-		}
-
-		// Collect all validation errors
-		if (bodyDimensions.errors && bodyDimensions.errors.length > 0) {
-			validationErrors.push(...bodyDimensions.errors);
-		}
-
-		const dimensionErrors = validateDimensions(bodyDimensions, pres);
-		if (dimensionErrors.length > 0) {
-			validationErrors.push(...dimensionErrors);
-		}
-
-		const textBoxPositionErrors = validateTextBoxPosition(slideData, bodyDimensions);
-		if (textBoxPositionErrors.length > 0) {
-			validationErrors.push(...textBoxPositionErrors);
-		}
-
-		if (slideData.errors && slideData.errors.length > 0) {
-			validationErrors.push(...slideData.errors);
-		}
-
-		// Throw all errors at once if any exist
-		if (validationErrors.length > 0) {
-			const errorMessage = validationErrors.length === 1
-				? validationErrors[0]
-				: `Multiple validation errors found:\n${validationErrors.map((e, i) => `  ${i + 1}. ${e}`).join('\n')}`;
-			throw new Error(errorMessage);
-		}
-
-		const targetSlide = slide || pres.addSlide();
-
-		await addBackground(slideData, targetSlide, tmpDir);
-		addElements(slideData, targetSlide, pres);
-
-		return { slide: targetSlide, placeholders: slideData.placeholders };
-	} catch (error) {
-		if (!error.message.startsWith(htmlFile)) {
-			throw new Error(`${htmlFile}: ${error.message}`);
-		}
-		throw error;
-	}
-}
-
-module.exports = html2pptx;