@juspay/neurolink 9.30.0 → 9.31.0

package/dist/client/features/ppt/slideRenderers.js

@@ -0,0 +1,2383 @@
+/**
+ * Slide Renderers
+ *
+ * Standalone render functions for each slide type.
+ * Extracted from SlideGenerator to keep functions under 300 lines.
+ *
+ * @module presentation/slideRenderers
+ */
+import { logger } from "../../utils/logger.js";
+import { getBulletOptions, getSlideTypeFormatting } from "./constants.js";
+import { bufferToDataUrl, calculateFontSize, createFormattedTextProps, hasMarkdownFormatting, parseMarkdownText, validateImageBuffer, } from "./utils.js";
+// ============================================================================
+// LAYOUT POSITIONS
+// ============================================================================
+/**
+ * Minimum gap between elements (in inches)
+ */
+const MIN_GAP = 0.1;
+/**
+ * Default text fit option for pptxgenjs
+ * 'shrink' = Shrink text to fit within the container
+ */
+const DEFAULT_TEXT_FIT = "shrink";
+export const LAYOUT_POSITIONS = {
+    margin: { x: 0.5, y: 0.4 },
+    title: { x: 0.5, y: 0.4, w: 9, h: 0.8 },
+    subtitle: { x: 0.5, y: 1.4, w: 9, h: 0.5 },
+    content: { x: 0.5, y: 1.4, w: 9, h: 3.8 },
+    contentFull: { x: 0.5, y: 1.4, w: 9, h: 3.8 },
+    contentLeft: { x: 0.5, y: 1.4, w: 4.2, h: 3.8 },
+    contentRight: { x: 5.3, y: 1.4, w: 4.2, h: 3.8 },
+    imageRight: { x: 5.3, y: 1.4, w: 4.2, h: 3.8 },
+    imageLeft: { x: 0.5, y: 1.4, w: 4.2, h: 3.8 },
+    imageFull: { x: 0, y: 0, w: 10, h: 5.625 },
+    imageCentered: { x: 2, y: 1.2, w: 6, h: 3.6 },
+    columnLeft: { x: 0.5, y: 1.4, w: 4.2, h: 3.8 },
+    columnRight: { x: 5.3, y: 1.4, w: 4.2, h: 3.8 },
+    col1: { x: 0.5, y: 1.4, w: 2.8, h: 3.8 },
+    col2: { x: 3.5, y: 1.4, w: 2.8, h: 3.8 },
+    col3: { x: 6.5, y: 1.4, w: 2.8, h: 3.8 },
+    chart: { x: 0.5, y: 1.4, w: 9, h: 3.8 },
+    statRow: { y: 2.2, h: 2.5 },
+    footer: { x: 0.5, y: 5.2, w: 9, h: 0.3 },
+    logo: {
+        "top-left": { x: 0.3, y: 0.2 },
+        "top-right": { x: 8.5, y: 0.2 },
+        "bottom-left": { x: 0.3, y: 5.0 },
+        "bottom-right": { x: 8.5, y: 5.0 },
+    },
+    quote: { x: 1, y: 1.5, w: 8, h: 2.5 },
+    quoteAuthor: { x: 1, y: 4.2, w: 8, h: 0.5 },
+};
+/**
+ * Map legend position from SlideContent values to pptxgenjs values
+ */
+const LEGEND_POS_MAP = {
+    top: "t",
+    bottom: "b",
+    left: "l",
+    right: "r",
+};
+// ============================================================================
+// HELPER FUNCTIONS - ENHANCED BACKGROUNDS
+// ============================================================================
+/** Extract theme colors for background (strips # prefix) */
+function extractBackgroundColors(theme) {
+    return {
+        primary: theme.colors.primary.replace("#", ""),
+        secondary: theme.colors.secondary.replace("#", ""),
+        accent: theme.colors.accent.replace("#", ""),
+        background: theme.colors.background.replace("#", ""),
+    };
+}
+/** Blue to purple diagonal gradient effect */
+function addGradientBlueBackground(slide, colors) {
+    const { primary, secondary } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: "E8F4FD" },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: 6,
+        h: 3,
+        fill: { color: primary, transparency: 85 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: 4,
+        h: 2,
+        fill: { color: primary, transparency: 75 },
+    });
+    slide.addShape("rect", {
+        x: 5,
+        y: 3,
+        w: 5,
+        h: 2.625,
+        fill: { color: secondary, transparency: 85 },
+    });
+    slide.addShape("rect", {
+        x: 7,
+        y: 4,
+        w: 3,
+        h: 1.625,
+        fill: { color: secondary, transparency: 75 },
+    });
+}
+/** Professional dark blue to teal gradient */
+function addGradientCorporateBackground(slide, colors) {
+    const { primary } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: "F0F9FF" },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: 3,
+        h: "100%",
+        fill: { color: "1E3A5F", transparency: 92 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: 1.5,
+        h: "100%",
+        fill: { color: "1E3A5F", transparency: 85 },
+    });
+    slide.addShape("rect", {
+        x: 7,
+        y: 0,
+        w: 3,
+        h: "100%",
+        fill: { color: "2E7D32", transparency: 92 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 0.03,
+        fill: { color: primary },
+    });
+}
+/** Warm orange to pink gradient */
+function addGradientWarmBackground(slide) {
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: "FFF7ED" },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 2.5,
+        fill: { color: "EA580C", transparency: 90 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 1,
+        fill: { color: "EA580C", transparency: 80 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 4.5,
+        w: "100%",
+        h: 1.125,
+        fill: { color: "DB2777", transparency: 88 },
+    });
+}
+/** Dark theme with accent glow */
+function addGradientDarkBackground(slide) {
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: "0F172A" },
+    });
+    slide.addShape("ellipse", {
+        x: -2,
+        y: -1,
+        w: 6,
+        h: 4,
+        fill: { color: "06B6D4", transparency: 85 },
+    });
+    slide.addShape("ellipse", {
+        x: 7,
+        y: 3,
+        w: 5,
+        h: 4,
+        fill: { color: "A855F7", transparency: 85 },
+    });
+}
+/** Very subtle professional gradient */
+function addGradientSubtleBackground(slide, colors) {
+    const { primary, secondary } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: "FAFBFC" },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 2,
+        fill: { color: primary, transparency: 95 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 4,
+        w: "100%",
+        h: 1.625,
+        fill: { color: secondary, transparency: 96 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 0.02,
+        fill: { color: primary },
+    });
+}
+/** Geometric shapes pattern */
+function addGeometricBackground(slide, colors) {
+    const { primary, secondary, accent, background } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: background },
+    });
+    slide.addShape("rtTriangle", {
+        x: 6,
+        y: 3,
+        w: 4,
+        h: 2.625,
+        fill: { color: primary, transparency: 90 },
+        rotate: 180,
+    });
+    slide.addShape("rtTriangle", {
+        x: 0,
+        y: 0,
+        w: 2.5,
+        h: 2,
+        fill: { color: secondary, transparency: 92 },
+    });
+    slide.addShape("ellipse", {
+        x: 8.5,
+        y: 0.2,
+        w: 1,
+        h: 1,
+        fill: { color: accent, transparency: 85 },
+    });
+    slide.addShape("ellipse", {
+        x: 0.5,
+        y: 4.5,
+        w: 0.6,
+        h: 0.6,
+        fill: { color: primary, transparency: 80 },
+    });
+}
+/** Large corner accent shapes */
+function addCornerAccentBackground(slide, colors) {
+    const { primary, secondary, background } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: background },
+    });
+    slide.addShape("rect", {
+        x: 7,
+        y: 0,
+        w: 3,
+        h: 1.8,
+        fill: { color: primary, transparency: 88 },
+    });
+    slide.addShape("rect", {
+        x: 8.5,
+        y: 0,
+        w: 1.5,
+        h: 1,
+        fill: { color: primary, transparency: 70 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 4,
+        w: 2.5,
+        h: 1.625,
+        fill: { color: secondary, transparency: 88 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 4.8,
+        w: 1.2,
+        h: 0.825,
+        fill: { color: secondary, transparency: 70 },
+    });
+}
+/** Curved wave pattern effect */
+function addWaveBackground(slide, colors) {
+    const { primary, secondary, accent } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: "F8FAFC" },
+    });
+    slide.addShape("ellipse", {
+        x: -3,
+        y: 4,
+        w: 8,
+        h: 3,
+        fill: { color: primary, transparency: 92 },
+    });
+    slide.addShape("ellipse", {
+        x: 2,
+        y: 4.5,
+        w: 7,
+        h: 2.5,
+        fill: { color: secondary, transparency: 93 },
+    });
+    slide.addShape("ellipse", {
+        x: 6,
+        y: 4.2,
+        w: 6,
+        h: 3,
+        fill: { color: accent, transparency: 94 },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 0.03,
+        fill: { color: primary },
+    });
+}
+/** Split diagonal background */
+function addSplitBackground(slide, colors) {
+    const { primary, secondary, background } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: background },
+    });
+    slide.addShape("rect", {
+        x: 5,
+        y: -1,
+        w: 6,
+        h: 8,
+        fill: { color: primary, transparency: 94 },
+        rotate: 15,
+    });
+    slide.addShape("rect", {
+        x: 7,
+        y: -1,
+        w: 5,
+        h: 8,
+        fill: { color: secondary, transparency: 92 },
+        rotate: 15,
+    });
+}
+/** Simple solid with subtle accent */
+function addSolidBackground(slide, colors) {
+    const { primary, background } = colors;
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: { color: background },
+    });
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: 0.02,
+        fill: { color: primary },
+    });
+}
+/**
+ * Add enhanced background with gradient or multi-color designs
+ * Creates visually appealing slides with sophisticated styling
+ */
+export function addEnhancedBackground(slide, theme, style = "gradient-subtle") {
+    const colors = extractBackgroundColors(theme);
+    switch (style) {
+        case "gradient-blue":
+            addGradientBlueBackground(slide, colors);
+            break;
+        case "gradient-corporate":
+            addGradientCorporateBackground(slide, colors);
+            break;
+        case "gradient-warm":
+            addGradientWarmBackground(slide);
+            break;
+        case "gradient-dark":
+            addGradientDarkBackground(slide);
+            break;
+        case "gradient-subtle":
+            addGradientSubtleBackground(slide, colors);
+            break;
+        case "geometric":
+            addGeometricBackground(slide, colors);
+            break;
+        case "corner-accent":
+            addCornerAccentBackground(slide, colors);
+            break;
+        case "wave":
+            addWaveBackground(slide, colors);
+            break;
+        case "split":
+            addSplitBackground(slide, colors);
+            break;
+        case "solid":
+        default:
+            addSolidBackground(slide, colors);
+            break;
+    }
+}
+/**
+ * Add subtle colored background to slides (legacy - use addEnhancedBackground for more options)
+ */
+export function addColoredBackground(slide, theme, opacity = 0.05) {
+    const primaryColor = theme.colors.primary.replace("#", "");
+    slide.addShape("rect", {
+        x: 0,
+        y: 0,
+        w: "100%",
+        h: "100%",
+        fill: {
+            color: primaryColor,
+            transparency: (1 - opacity) * 100, // pptx transparency is 0-100 where 100 is fully transparent
+        },
+    });
+}
+/**
+ * Add modern card-style container with border
+ */
+export function addCardContainer(slide, pos, theme, borderWidth = 2) {
+    // Card background with subtle border
+    slide.addShape("rect", {
+        x: pos.x,
+        y: pos.y,
+        w: pos.w,
+        h: pos.h,
+        fill: {
+            color: theme.colors.background.replace("#", ""),
+            transparency: 0, // Fully opaque
+        },
+        line: {
+            color: theme.colors.muted.replace("#", ""),
+            width: borderWidth,
+        },
+    });
+}
+/**
+ * Add accent bar for visual hierarchy
+ */
+export function addAccentBar(slide, pos, theme, position = "left") {
+    const barConfig = {
+        left: { x: pos.x, y: pos.y, w: 0.1, h: pos.h },
+        top: { x: pos.x, y: pos.y, w: pos.w, h: 0.1 },
+        bottom: { x: pos.x, y: pos.y + pos.h - 0.1, w: pos.w, h: 0.1 },
+    };
+    slide.addShape("rect", {
+        ...barConfig[position],
+        fill: { color: theme.colors.primary.replace("#", "") },
+    });
+}
+/**
+ * Calculate text width in inches based on font size and character count.
+ * Uses typographic metrics for Arial font family.
+ *
+ * @param text - The text string to measure
+ * @param fontSize - Font size in points
+ * @param isBold - Whether the text is bold (adds ~10% width)
+ * @returns Width in inches
+ */
+export function calculateTextWidth(text, fontSize, isBold = false) {
+    // For proportional fonts like Arial:
+    // - Average character width is approximately 0.42 * em-height for normal text
+    // - 1 point = 1/72 inch, so em-height = fontSize / 72 inches
+    // - Bold text is approximately 10% wider
+    const emHeight = fontSize / 72; // em-height in inches
+    const avgCharWidthRatio = 0.42; // Average char width as ratio of em-height (reduced for tighter fit)
+    const boldMultiplier = isBold ? 1.1 : 1.0;
+    const charWidth = emHeight * avgCharWidthRatio * boldMultiplier;
+    return text.length * charWidth;
+}
+export function addTitle(slide, title, theme, showUnderline = true) {
+    slide.addText(title, {
+        x: LAYOUT_POSITIONS.title.x,
+        y: LAYOUT_POSITIONS.title.y,
+        w: LAYOUT_POSITIONS.title.w,
+        h: LAYOUT_POSITIONS.title.h,
+        fontSize: theme.fonts.sizes.heading,
+        fontFace: theme.fonts.heading,
+        color: theme.colors.text.replace("#", ""),
+        bold: true,
+        fit: DEFAULT_TEXT_FIT,
+    });
+    if (showUnderline) {
+        // Calculate dynamic underline width based on actual title text and font size
+        const textWidth = calculateTextWidth(title, theme.fonts.sizes.heading, true);
+        // Constrain to reasonable bounds (min 1.5", max fits within slide margins)
+        const maxWidth = LAYOUT_POSITIONS.title.w; // 9 inches - same as title container
+        const minWidth = 1.0;
+        const calculatedWidth = Math.min(maxWidth, Math.max(minWidth, textWidth));
+        slide.addShape("rect", {
+            x: LAYOUT_POSITIONS.title.x,
+            y: LAYOUT_POSITIONS.title.y + LAYOUT_POSITIONS.title.h + 0.1,
+            w: calculatedWidth,
+            h: 0.03,
+            fill: { color: theme.colors.primary.replace("#", "") },
+        });
+    }
+}
+/**
+ * Add individual bullet items (each as separate text element)
+ * This creates cleaner spacing and no bounding box around bullets
+ * Useful for column layouts and when you want more control over spacing
+ */
+export function addIndividualBullets(options) {
+    const { slide, bullets, startX, startY, width, theme, itemSpacing = 0.45, } = options;
+    if (!bullets || bullets.length === 0) {
+        return;
+    }
+    // Ensure minimum gap between bullets
+    const effectiveSpacing = Math.max(itemSpacing, MIN_GAP * 2);
+    bullets.forEach((bullet, index) => {
+        // Skip invalid bullets
+        if (!bullet || !bullet.text) {
+            return;
+        }
+        const isBold = bullet.bold || bullet.emphasis || false;
+        const color = bullet.color?.replace("#", "") || theme.colors.text.replace("#", "");
+        // Check if bullet text contains markdown formatting
+        if (hasMarkdownFormatting(bullet.text)) {
+            // Parse markdown and create rich text runs with bullet prefix
+            const segments = parseMarkdownText(bullet.text);
+            const textRuns = [
+                {
+                    text: "• ",
+                    options: {
+                        fontSize: theme.fonts.sizes.body,
+                        fontFace: theme.fonts.body,
+                        color,
+                    },
+                },
+                ...createFormattedTextProps(segments, {
+                    fontSize: theme.fonts.sizes.body,
+                    fontFace: theme.fonts.body,
+                    color,
+                    baseBold: isBold,
+                }),
+            ];
+            slide.addText(textRuns, {
+                x: startX,
+                y: startY + index * effectiveSpacing,
+                w: width,
+                h: Math.max(0.4, effectiveSpacing - MIN_GAP),
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        else {
+            // No markdown - use simple text
+            const bulletText = `• ${bullet.text}`;
+            slide.addText(bulletText, {
+                x: startX,
+                y: startY + index * effectiveSpacing,
+                w: width,
+                h: Math.max(0.4, effectiveSpacing - MIN_GAP),
+                fontSize: theme.fonts.sizes.body,
+                fontFace: theme.fonts.body,
+                color,
+                bold: isBold,
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    });
+}
+/**
+ * Add bullets to a slide with hybrid formatting
+ *
+ * Priority: bullet-level > slide-level > type-defaults > theme-defaults
+ *
+ * @param slide - The pptxgenjs slide
+ * @param bullets - Array of bullet points (normalized)
+ * @param pos - Position and dimensions
+ * @param theme - Presentation theme
+ * @param slideType - Slide type for default formatting (optional)
+ */
+export function addBullets(slide, bullets, pos, theme, slideType = "content", options) {
+    if (!bullets || bullets.length === 0) {
+        return;
+    }
+    // Use individual bullets for cleaner spacing (no bounding box)
+    if (options?.useIndividualBullets) {
+        addIndividualBullets({
+            slide,
+            bullets,
+            startX: pos.x,
+            startY: pos.y,
+            width: pos.w,
+            theme,
+            itemSpacing: options.itemSpacing ?? 0.45,
+        });
+        return;
+    }
+    // Get hardcoded defaults for this slide type
+    const typeDefaults = getSlideTypeFormatting(slideType);
+    // Calculate base font size based on bullet count (if not overridden)
+    const calculatedFontSize = calculateFontSize(bullets.length, typeDefaults.baseFontSize || theme.fonts.sizes.body);
+    const textLines = [];
+    bullets.forEach((bullet) => {
+        // Skip invalid bullets
+        if (!bullet || !bullet.text) {
+            return;
+        }
+        // Priority: bullet-level > type-defaults
+        const bulletStyle = bullet.bulletStyle || typeDefaults.bulletStyle || "disc";
+        const fontSize = bullet.fontSize || calculatedFontSize;
+        const color = bullet.color?.replace("#", "") || theme.colors.text.replace("#", "");
+        const isBold = bullet.bold ?? bullet.emphasis ?? false;
+        // Get pptxgenjs bullet options based on style
+        // If bullet has custom icon, use that instead of style
+        let bulletOptions;
+        if (bullet.icon) {
+            bulletOptions = { code: bullet.icon };
+        }
+        else {
+            bulletOptions = getBulletOptions(bulletStyle);
+        }
+        // Check if bullet text contains markdown formatting (**bold**, *italic*)
+        if (hasMarkdownFormatting(bullet.text)) {
+            // Parse markdown and create rich text runs
+            const segments = parseMarkdownText(bullet.text);
+            const textRuns = createFormattedTextProps(segments, {
+                fontSize,
+                fontFace: theme.fonts.body,
+                color,
+                baseBold: isBold,
+            });
+            textLines.push({
+                text: textRuns,
+                options: {
+                    bullet: bulletOptions,
+                    indentLevel: 0,
+                    paraSpaceBefore: 6,
+                    paraSpaceAfter: 6,
+                },
+            });
+        }
+        else {
+            // No markdown - use simple text
+            textLines.push({
+                text: bullet.text,
+                options: {
+                    bullet: bulletOptions,
+                    fontSize,
+                    fontFace: theme.fonts.body,
+                    color,
+                    bold: isBold,
+                    indentLevel: 0,
+                    paraSpaceBefore: 6, // Add space before each paragraph (in points)
+                    paraSpaceAfter: 6, // Add space after each paragraph (in points)
+                },
+            });
+        }
+        // Handle sub-bullets (2pt smaller than main bullet)
+        if (bullet.subBullets && bullet.subBullets.length > 0) {
+            bullet.subBullets.forEach((subBullet) => {
+                // Check for markdown in sub-bullets too
+                if (hasMarkdownFormatting(subBullet)) {
+                    const segments = parseMarkdownText(subBullet);
+                    const textRuns = createFormattedTextProps(segments, {
+                        fontSize: Math.max(10, fontSize - 2),
+                        fontFace: theme.fonts.body,
+                        color: theme.colors.muted.replace("#", ""),
+                    });
+                    textLines.push({
+                        text: textRuns,
+                        options: {
+                            bullet: true,
+                            indentLevel: 1,
+                            paraSpaceBefore: 3,
+                            paraSpaceAfter: 3,
+                        },
+                    });
+                }
+                else {
+                    textLines.push({
+                        text: subBullet,
+                        options: {
+                            bullet: true,
+                            fontSize: Math.max(10, fontSize - 2),
+                            fontFace: theme.fonts.body,
+                            color: theme.colors.muted.replace("#", ""),
+                            indentLevel: 1,
+                            paraSpaceBefore: 3,
+                            paraSpaceAfter: 3,
+                        },
+                    });
+                }
+            });
+        }
+    });
+    slide.addText(textLines, {
+        x: pos.x,
+        y: pos.y,
+        w: pos.w,
+        h: pos.h,
+        valign: "top",
+        fit: DEFAULT_TEXT_FIT,
+    });
+}
+export function addImage(slide, imageBuffer, pos) {
+    // Validate and get data URL
+    const validation = validateImageBuffer(imageBuffer);
+    if (!validation.isValid && validation.format === "") {
+        logger.warn("[addImage] Invalid image buffer", { error: validation.error });
+        return;
+    }
+    if (!validation.isValid) {
+        logger.warn("[addImage] Image validation warning, attempting to add anyway", {
+            error: validation.error,
+            mimeType: validation.mimeType,
+        });
+    }
+    const dataUrl = bufferToDataUrl(imageBuffer);
+    if (!dataUrl) {
+        logger.warn("[addImage] Failed to convert buffer to data URL");
+        return;
+    }
+    try {
+        slide.addImage({
+            data: dataUrl,
+            x: pos.x,
+            y: pos.y,
+            w: pos.w,
+            h: pos.h,
+            sizing: { type: "cover", w: pos.w, h: pos.h },
+        });
+    }
+    catch (error) {
+        logger.error("[addImage] Failed to add image to slide", {
+            error: error instanceof Error ? error.message : String(error),
+        });
+    }
+}
+export function getPptxChartType(slideType) {
+    switch (slideType) {
+        case "chart-bar":
+            return "bar";
+        case "chart-line":
+            return "line";
+        case "chart-pie":
+            return "pie";
+        case "chart-area":
+            return "area";
+        default:
+            return "bar";
+    }
+}
+// ============================================================================
+// SLIDE RENDERERS - OPENING/CLOSING
+// ============================================================================
+export function renderTitleSlide(slide, title, content, theme, imageBuffer) {
+    const layout = content.layoutOptions || {};
+    const titleOpts = layout.title || {};
+    const subtitleOpts = layout.subtitle || {};
+    const bgOpts = layout.background || {};
+    // Background: image > custom color > theme default (white)
+    const imageDataUrl = imageBuffer ? bufferToDataUrl(imageBuffer) : null;
+    if (imageDataUrl) {
+        slide.background = {
+            data: imageDataUrl,
+        };
+        slide.addShape("rect", {
+            x: 0,
+            y: 0,
+            w: "100%",
+            h: "100%",
+            fill: { color: "000000", transparency: 40 },
+        });
+    }
+    else if (bgOpts.color ||
+        bgOpts.useThemePrimary ||
+        bgOpts.useThemeSecondary) {
+        const bgColor = bgOpts.useThemePrimary
+            ? theme.colors.primary
+            : bgOpts.useThemeSecondary
+                ? theme.colors.secondary
+                : bgOpts.color || theme.colors.background;
+        slide.addShape("rect", {
+            x: 0,
+            y: 0,
+            w: 10,
+            h: 5.625,
+            fill: { color: bgColor.replace("#", "") },
+        });
+    }
+    // Determine text colors based on background
+    const hasColoredBg = imageBuffer ||
+        bgOpts.color ||
+        bgOpts.useThemePrimary ||
+        bgOpts.useThemeSecondary;
+    const defaultTitleColor = hasColoredBg
+        ? "FFFFFF"
+        : theme.colors.text.replace("#", "");
+    const defaultSubtitleColor = hasColoredBg
+        ? "FFFFFF"
+        : theme.colors.muted.replace("#", "");
+    // Title
+    slide.addText(title, {
+        x: titleOpts.x ?? 0.5,
+        y: titleOpts.y ?? 2,
+        w: titleOpts.w ?? 9,
+        h: titleOpts.h ?? 1.2,
+        fontSize: titleOpts.fontSize ?? theme.fonts.sizes.title,
+        fontFace: theme.fonts.heading,
+        color: titleOpts.color?.replace("#", "") ?? defaultTitleColor,
+        align: titleOpts.align ?? "center",
+        bold: true,
+        fit: DEFAULT_TEXT_FIT,
+    });
+    // Subtitle
+    if (content.subtitle) {
+        slide.addText(content.subtitle, {
+            x: subtitleOpts.x ?? 0.5,
+            y: subtitleOpts.y ?? 3.3,
+            w: subtitleOpts.w ?? 9,
+            h: subtitleOpts.h ?? 0.6,
+            fontSize: subtitleOpts.fontSize ?? theme.fonts.sizes.subtitle,
+            fontFace: theme.fonts.body,
+            color: subtitleOpts.color?.replace("#", "") ?? defaultSubtitleColor,
+            align: subtitleOpts.align ?? "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+}
+export function renderSectionHeaderSlide(slide, title, content, theme) {
+    const layout = content.layoutOptions || {};
+    const sectionNumOpts = layout.sectionNumber || {};
+    const titleOpts = layout.title || {};
+    const subtitleOpts = layout.subtitle || {};
+    const bgOpts = layout.background || {};
+    // Apply background if specified
+    if (bgOpts.color) {
+        slide.addShape("rect", {
+            x: 0,
+            y: 0,
+            w: 10,
+            h: 5.625,
+            fill: { color: bgOpts.color.replace("#", "") },
+        });
+    }
+    // Section number
+    if (content.sectionNumber) {
+        const isWatermark = sectionNumOpts.style === "watermark";
+        const isSmall = sectionNumOpts.style === "small";
+        slide.addText(String(content.sectionNumber).padStart(2, "0"), {
+            x: sectionNumOpts.x ?? (isWatermark ? 5.5 : 0.5),
+            y: sectionNumOpts.y ?? (isWatermark ? 0.5 : 1.5),
+            w: isWatermark ? 5 : 2,
+            h: isWatermark ? 4 : 1,
+            fontSize: sectionNumOpts.fontSize ?? (isWatermark ? 200 : isSmall ? 32 : 72),
+            fontFace: theme.fonts.heading,
+            color: theme.colors.primary.replace("#", ""),
+            bold: true,
+            align: isWatermark ? "right" : "left",
+            transparency: isWatermark ? 70 : 0,
+        });
+    }
+    // Title
+    slide.addText(title, {
+        x: titleOpts.x ?? 0.5,
+        y: titleOpts.y ?? 2.5,
+        w: titleOpts.w ?? 9,
+        h: titleOpts.h ?? 1,
+        fontSize: titleOpts.fontSize ?? theme.fonts.sizes.title,
+        fontFace: theme.fonts.heading,
+        color: theme.colors.text.replace("#", ""),
+        bold: true,
+        align: titleOpts.align ?? "left",
+    });
+    // Subtitle (if provided)
+    if (content.subtitle) {
+        slide.addText(content.subtitle, {
+            x: subtitleOpts.x ?? 0.5,
+            y: subtitleOpts.y ?? 3.6,
+            w: subtitleOpts.w ?? 8,
+            h: subtitleOpts.h ?? 0.6,
+            fontSize: subtitleOpts.fontSize ?? theme.fonts.sizes.subtitle,
+            fontFace: theme.fonts.body,
+            color: theme.colors.muted.replace("#", ""),
+            align: subtitleOpts.align ?? "left",
+        });
+    }
+}
+export function renderThankYouSlide(slide, title, content, theme, imageBuffer) {
+    if (imageBuffer) {
+        const dataUrl = bufferToDataUrl(imageBuffer);
+        if (dataUrl) {
+            slide.background = {
+                data: dataUrl,
+            };
+            slide.addShape("rect", {
+                x: 0,
+                y: 0,
+                w: "100%",
+                h: "100%",
+                fill: { color: "000000", transparency: 40 },
+            });
+        }
+    }
+    const textColor = imageBuffer ? "FFFFFF" : theme.colors.text.replace("#", "");
+    slide.addText(title || "Thank You!", {
+        x: 0.5,
+        y: 1.8,
+        w: 9,
+        h: 1,
+        fontSize: theme.fonts.sizes.title,
+        fontFace: theme.fonts.heading,
+        color: textColor,
+        align: "center",
+        bold: true,
+        fit: DEFAULT_TEXT_FIT,
+    });
+    if (content.cta) {
+        slide.addText(content.cta, {
+            x: 0.5,
+            y: 2.9,
+            w: 9,
+            h: 0.5,
+            fontSize: theme.fonts.sizes.subtitle,
+            fontFace: theme.fonts.body,
+            color: imageBuffer ? "FFFFFF" : theme.colors.muted.replace("#", ""),
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+    if (content.contactInfo) {
+        const contactLines = [];
+        if (content.contactInfo.email) {
+            contactLines.push(`Email: ${content.contactInfo.email}`);
+        }
+        if (content.contactInfo.website) {
+            contactLines.push(`Web: ${content.contactInfo.website}`);
+        }
+        if (content.contactInfo.phone) {
+            contactLines.push(`Phone: ${content.contactInfo.phone}`);
+        }
+        if (contactLines.length > 0) {
+            slide.addText(contactLines.join("   •   "), {
+                x: 0.5,
+                y: 4.2,
+                w: 9,
+                h: 0.4,
+                fontSize: theme.fonts.sizes.body,
+                fontFace: theme.fonts.body,
+                color: textColor,
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        if (content.contactInfo.social &&
+            Array.isArray(content.contactInfo.social) &&
+            content.contactInfo.social.length > 0) {
+            const socialText = content.contactInfo.social
+                .map((s) => `${s.platform || ""}: ${s.handle || ""}`)
+                .join("   •   ");
+            slide.addText(socialText, {
+                x: 0.5,
+                y: 4.7,
+                w: 9,
+                h: 0.3,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: imageBuffer ? "CCCCCC" : theme.colors.muted.replace("#", ""),
+                align: "center",
+            });
+        }
+    }
+}
+// ============================================================================
+// SLIDE RENDERERS - CONTENT
+// ============================================================================
+export function renderContentSlide(options) {
+    const { slide, title, content, layout, theme, imageBuffer, slideType = "content", } = options;
+    addTitle(slide, title, theme);
+    const hasImage = imageBuffer && layout.includes("image");
+    const contentPos = hasImage
+        ? layout.includes("left")
+            ? LAYOUT_POSITIONS.contentRight
+            : LAYOUT_POSITIONS.contentLeft
+        : LAYOUT_POSITIONS.contentFull;
+    if (content.bullets && content.bullets.length > 0) {
+        addBullets(slide, content.bullets, contentPos, theme, slideType);
+    }
+    else if (content.body) {
+        slide.addText(content.body, {
+            x: contentPos.x,
+            y: contentPos.y,
+            w: contentPos.w,
+            h: contentPos.h,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.body,
+            color: theme.colors.text.replace("#", ""),
+            valign: "top",
+        });
+    }
+    if (imageBuffer && hasImage) {
+        const imagePos = layout.includes("left")
+            ? LAYOUT_POSITIONS.imageLeft
+            : LAYOUT_POSITIONS.imageRight;
+        addImage(slide, imageBuffer, imagePos);
+    }
+}
+export function renderImageSlide(slide, title, content, layout, theme, imageBuffer) {
+    if (layout === "image-full-overlay" && imageBuffer) {
+        const dataUrl = bufferToDataUrl(imageBuffer);
+        if (dataUrl) {
+            slide.background = {
+                data: dataUrl,
+            };
+            slide.addShape("rect", {
+                x: 0,
+                y: 0,
+                w: "100%",
+                h: "100%",
+                fill: { color: "000000", transparency: 50 },
+            });
+            slide.addText(title, {
+                x: 0.5,
+                y: 4.2,
+                w: 9,
+                h: 1,
+                fontSize: theme.fonts.sizes.heading,
+                fontFace: theme.fonts.heading,
+                color: "FFFFFF",
+                bold: true,
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        else {
+            // Fallback to standard layout if image is invalid
+            addTitle(slide, title, theme);
+        }
+    }
+    else if (layout === "image-centered" || layout === "image-full-overlay") {
+        addTitle(slide, title, theme);
+        if (imageBuffer) {
+            addImage(slide, imageBuffer, LAYOUT_POSITIONS.imageCentered);
+        }
+        else {
+            // Fallback when no image is available - show placeholder with content
+            slide.addShape("rect", {
+                x: 1.5,
+                y: 1.8,
+                w: 7,
+                h: 3.5,
+                fill: { color: theme.colors.muted.replace("#", ""), transparency: 90 },
+                line: {
+                    color: theme.colors.muted.replace("#", ""),
+                    width: 1,
+                    dashType: "dash",
+                },
+            });
+            slide.addText("📷", {
+                x: 1.5,
+                y: 2.8,
+                w: 7,
+                h: 1,
+                fontSize: 48,
+                align: "center",
+                valign: "middle",
+                fit: DEFAULT_TEXT_FIT,
+            });
+            slide.addText("Image not available", {
+                x: 1.5,
+                y: 3.8,
+                w: 7,
+                h: 0.5,
+                fontSize: 12,
+                fontFace: theme.fonts.body,
+                color: theme.colors.muted.replace("#", ""),
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        if (content.caption) {
+            slide.addText(content.caption, {
+                x: 0.5,
+                y: 5,
+                w: 9,
+                h: 0.4,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: theme.colors.muted.replace("#", ""),
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    }
+    else {
+        renderContentSlide({ slide, title, content, layout, theme, imageBuffer });
+    }
+}
+// ============================================================================
+// SLIDE RENDERERS - COLUMNS
+// ============================================================================
+// ============================================================================
+// SLIDE RENDERERS - COLUMNS (Generic)
+// ============================================================================
+/**
+ * Generic column slide renderer
+ * Handles 2, 3, or more columns dynamically
+ * Renders each bullet as separate element (comparison-style)
+ */
+export function renderColumnSlide(slide, title, columns, theme, options) {
+    addTitle(slide, title, theme, false);
+    const opts = {
+        headerY: options?.headerY ?? 1.3,
+        headerHeight: options?.headerHeight ?? 0.5,
+        bulletsStartY: options?.bulletsStartY ?? 2.0,
+        columnGap: options?.columnGap ?? 0.3,
+        highlightFirstColumn: options?.highlightFirstColumn ?? true,
+    };
+    const numColumns = columns.length;
+    if (numColumns === 0) {
+        return;
+    }
+    // Calculate dynamic column widths
+    const totalWidth = 9; // Available width (10 - 0.5 margin on each side)
+    const totalGaps = (numColumns - 1) * opts.columnGap;
+    const columnWidth = (totalWidth - totalGaps) / numColumns;
+    const startX = 0.5;
+    columns.forEach((col, index) => {
+        if (!col) {
+            return;
+        }
+        const x = startX + index * (columnWidth + opts.columnGap);
+        const isPrimary = opts.highlightFirstColumn && index === 0;
+        // Render header box if title exists
+        if (col.title) {
+            slide.addShape("roundRect", {
+                x,
+                y: opts.headerY,
+                w: columnWidth,
+                h: opts.headerHeight,
+                fill: {
+                    color: isPrimary
+                        ? theme.colors.primary.replace("#", "")
+                        : theme.colors.muted.replace("#", ""),
+                },
+                rectRadius: 0.05,
+            });
+            // Adjust font size based on column count
+            const headerFontSize = numColumns <= 2 ? theme.fonts.sizes.body : theme.fonts.sizes.body - 2;
+            slide.addText(col.title, {
+                x,
+                y: opts.headerY,
+                w: columnWidth,
+                h: opts.headerHeight,
+                fontSize: headerFontSize,
+                fontFace: theme.fonts.heading,
+                color: isPrimary
+                    ? theme.colors.textOnPrimary.replace("#", "")
+                    : theme.colors.text.replace("#", ""),
+                align: "center",
+                bold: true,
+                valign: "middle",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        // Render bullets individually (like comparison slide)
+        if (col.bullets && col.bullets.length > 0) {
+            addIndividualBullets({
+                slide,
+                bullets: col.bullets,
+                startX: x,
+                startY: opts.bulletsStartY,
+                width: columnWidth,
+                theme,
+            });
+        }
+    });
+}
+export function renderTwoColumnSlide(slide, title, content, layout, theme, imageBuffer) {
+    const columns = [];
+    if (content.leftColumn) {
+        columns.push(content.leftColumn);
+    }
+    if (content.rightColumn) {
+        columns.push(content.rightColumn);
+    }
+    if (columns.length > 0) {
+        renderColumnSlide(slide, title, columns, theme, {
+            highlightFirstColumn: true,
+        });
+    }
+    // Handle image if right column has no bullets
+    if (imageBuffer && !content.rightColumn?.bullets) {
+        addImage(slide, imageBuffer, LAYOUT_POSITIONS.columnRight);
+    }
+}
+export function renderThreeColumnSlide(slide, title, content, theme) {
+    const columns = [];
+    if (content.leftColumn) {
+        columns.push(content.leftColumn);
+    }
+    if (content.centerColumn) {
+        columns.push(content.centerColumn);
+    }
+    if (content.rightColumn) {
+        columns.push(content.rightColumn);
+    }
+    if (columns.length > 0) {
+        renderColumnSlide(slide, title, columns, theme, {
+            highlightFirstColumn: true,
+        });
+    }
+}
+// ============================================================================
+// SLIDE RENDERERS - DATA VISUALIZATION
+// ============================================================================
+export function renderQuoteSlide(slide, title, content, theme) {
+    slide.addText("\u201C", {
+        x: 0.5,
+        y: 1,
+        w: 1,
+        h: 1,
+        fontSize: 120,
+        fontFace: "Georgia",
+        color: theme.colors.primary.replace("#", ""),
+        fit: DEFAULT_TEXT_FIT,
+    });
+    if (content.quote) {
+        slide.addText(content.quote, {
+            x: LAYOUT_POSITIONS.quote.x,
+            y: LAYOUT_POSITIONS.quote.y,
+            w: LAYOUT_POSITIONS.quote.w,
+            h: LAYOUT_POSITIONS.quote.h,
+            fontSize: theme.fonts.sizes.heading,
+            fontFace: "Georgia",
+            color: theme.colors.text.replace("#", ""),
+            italic: true,
+            valign: "middle",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+    if (content.quoteAuthor) {
+        let authorText = `— ${content.quoteAuthor}`;
+        if (content.quoteAuthorTitle) {
+            authorText += `, ${content.quoteAuthorTitle}`;
+        }
+        slide.addText(authorText, {
+            x: LAYOUT_POSITIONS.quoteAuthor.x,
+            y: LAYOUT_POSITIONS.quoteAuthor.y,
+            w: LAYOUT_POSITIONS.quoteAuthor.w,
+            h: LAYOUT_POSITIONS.quoteAuthor.h,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.body,
+            color: theme.colors.muted.replace("#", ""),
+            align: "right",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+}
+export function renderStatisticsSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    if (!content.statistics || content.statistics.length === 0) {
+        return;
+    }
+    const stats = content.statistics.slice(0, 4);
+    const statWidth = 9 / stats.length;
+    stats.forEach((stat, index) => {
+        const x = 0.5 + index * statWidth;
+        slide.addText(stat.value, {
+            x,
+            y: LAYOUT_POSITIONS.statRow.y,
+            w: statWidth - 0.2,
+            h: 1.2,
+            fontSize: 48,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.primary.replace("#", ""),
+            bold: true,
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+        slide.addText(stat.label, {
+            x,
+            y: LAYOUT_POSITIONS.statRow.y + 1.3,
+            w: statWidth - 0.2,
+            h: 0.5,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.body,
+            color: theme.colors.text.replace("#", ""),
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+        if (stat.change || stat.trend) {
+            const trendColor = stat.trend === "up"
+                ? "22C55E"
+                : stat.trend === "down"
+                    ? "EF4444"
+                    : theme.colors.muted.replace("#", "");
+            // Use simple text indicators instead of Unicode arrows for better compatibility
+            const trendSymbol = stat.trend === "up" ? "(+)" : stat.trend === "down" ? "(-)" : "";
+            slide.addText(`${trendSymbol} ${stat.change || ""}`, {
+                x,
+                y: LAYOUT_POSITIONS.statRow.y + 1.8,
+                w: statWidth - 0.2,
+                h: 0.4,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: trendColor,
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    });
+}
+export function renderChartSlide(slide, title, content, chartType, theme) {
+    addTitle(slide, title, theme);
+    // Validate chartData exists with valid series
+    if (!content.chartData ||
+        !content.chartData.series ||
+        content.chartData.series.length === 0) {
+        // Add placeholder text for empty chart
+        slide.addText("No chart data available", {
+            x: LAYOUT_POSITIONS.chart.x,
+            y: LAYOUT_POSITIONS.chart.y + 1,
+            w: LAYOUT_POSITIONS.chart.w,
+            h: 1,
+            fontSize: 18,
+            color: theme.colors.muted.replace("#", ""),
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+        return;
+    }
+    // Filter out invalid series (must have name, labels array, and values array)
+    const validSeries = content.chartData.series.filter((series) => series.name &&
+        Array.isArray(series.labels) &&
+        series.labels.length > 0 &&
+        Array.isArray(series.values) &&
+        series.values.length > 0);
+    if (validSeries.length === 0) {
+        slide.addText("Invalid chart data format", {
+            x: LAYOUT_POSITIONS.chart.x,
+            y: LAYOUT_POSITIONS.chart.y + 1,
+            w: LAYOUT_POSITIONS.chart.w,
+            h: 1,
+            fontSize: 18,
+            color: theme.colors.muted.replace("#", ""),
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+        return;
+    }
+    const pptxChartType = getPptxChartType(chartType);
+    const chartData = validSeries.map((series) => ({
+        name: series.name,
+        labels: series.labels,
+        values: series.values,
+    }));
+    slide.addChart(pptxChartType, chartData, {
+        x: LAYOUT_POSITIONS.chart.x,
+        y: LAYOUT_POSITIONS.chart.y,
+        w: LAYOUT_POSITIONS.chart.w,
+        h: LAYOUT_POSITIONS.chart.h,
+        showTitle: !!content.chartData.title,
+        title: content.chartData.title,
+        showLegend: content.chartData.legendPosition !== "none",
+        legendPos: LEGEND_POS_MAP[content.chartData.legendPosition || "bottom"] || "b",
+        showValue: content.chartData.showLabels,
+        chartColors: [
+            theme.colors.primary.replace("#", ""),
+            theme.colors.secondary.replace("#", ""),
+            theme.colors.accent.replace("#", ""),
+        ],
+    });
+}
+export function renderTableSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    if (!content.tableData) {
+        return;
+    }
+    const { headers, rows, hasHeader } = content.tableData;
+    const tableRows = [];
+    if (hasHeader && headers) {
+        tableRows.push(headers.map((header) => ({
+            text: header,
+            options: {
+                bold: true,
+                fill: { color: theme.colors.primary.replace("#", "") },
+                color: theme.colors.textOnPrimary.replace("#", ""),
+                align: "center",
+            },
+        })));
+    }
+    rows.forEach((row, rowIndex) => {
+        tableRows.push(row.map((cell) => ({
+            text: cell.text,
+            options: {
+                fill: { color: rowIndex % 2 === 0 ? "F8FAFC" : "FFFFFF" },
+                color: theme.colors.text.replace("#", ""),
+                align: (cell.align || "left"),
+            },
+        })));
+    });
+    slide.addTable(tableRows, {
+        x: LAYOUT_POSITIONS.chart.x,
+        y: LAYOUT_POSITIONS.chart.y,
+        w: LAYOUT_POSITIONS.chart.w,
+        colW: Array(headers?.length || rows[0]?.length || 1).fill(LAYOUT_POSITIONS.chart.w / (headers?.length || rows[0]?.length || 1)),
+        fontSize: theme.fonts.sizes.body - 2,
+        fontFace: theme.fonts.body,
+        border: { pt: 0.5, color: "E2E8F0" },
+        autoPage: true,
+    });
+    if (content.tableData.caption) {
+        slide.addText(content.tableData.caption, {
+            x: 0.5,
+            y: 5.1,
+            w: 9,
+            h: 0.3,
+            fontSize: theme.fonts.sizes.caption,
+            fontFace: theme.fonts.body,
+            color: theme.colors.muted.replace("#", ""),
+            align: "center",
+        });
+    }
+}
+// ============================================================================
+// SLIDE RENDERERS - PROCESS & TIMELINE
+// ============================================================================
+export function renderTimelineSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    if (!content.timeline?.items) {
+        return;
+    }
+    const items = content.timeline.items.slice(0, 5);
+    const isHorizontal = content.timeline.orientation !== "vertical";
+    if (isHorizontal) {
+        renderHorizontalTimeline(slide, items, theme);
+    }
+    else {
+        renderVerticalTimeline(slide, items, theme);
+    }
+}
+function renderHorizontalTimeline(slide, items, theme) {
+    const itemWidth = 8 / items.length;
+    const lineY = 2.8;
+    slide.addShape("rect", {
+        x: 1,
+        y: lineY,
+        w: 8,
+        h: 0.02,
+        fill: { color: theme.colors.primary.replace("#", "") },
+    });
+    items.forEach((item, index) => {
+        const x = 1 + index * itemWidth + itemWidth / 2 - 0.15;
+        slide.addShape("ellipse", {
+            x,
+            y: lineY - 0.15,
+            w: 0.3,
+            h: 0.3,
+            fill: { color: theme.colors.primary.replace("#", "") },
+        });
+        slide.addText(item.date, {
+            x: x - itemWidth / 2 + 0.15,
+            y: lineY - 0.8,
+            w: itemWidth,
+            h: 0.4,
+            fontSize: theme.fonts.sizes.caption,
+            fontFace: theme.fonts.body,
+            color: theme.colors.primary.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        slide.addText(item.title, {
+            x: x - itemWidth / 2 + 0.15,
+            y: lineY + 0.4,
+            w: itemWidth,
+            h: 0.4,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.text.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        if (item.description) {
+            slide.addText(item.description, {
+                x: x - itemWidth / 2 + 0.15,
+                y: lineY + 0.85,
+                w: itemWidth,
+                h: 0.8,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: theme.colors.muted.replace("#", ""),
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    });
+}
+function renderVerticalTimeline(slide, items, theme) {
+    const itemHeight = 3 / items.length;
+    const lineX = 1.5;
+    slide.addShape("rect", {
+        x: lineX,
+        y: 1.5,
+        w: 0.04,
+        h: 3.5,
+        fill: { color: theme.colors.primary.replace("#", "") },
+    });
+    items.forEach((item, index) => {
+        const y = 1.7 + index * itemHeight;
+        slide.addShape("ellipse", {
+            x: lineX - 0.12,
+            y,
+            w: 0.28,
+            h: 0.28,
+            fill: { color: theme.colors.primary.replace("#", "") },
+        });
+        slide.addText(item.date, {
+            x: 0.3,
+            y: y - 0.1,
+            w: 1,
+            h: 0.3,
+            fontSize: theme.fonts.sizes.caption,
+            fontFace: theme.fonts.body,
+            color: theme.colors.primary.replace("#", ""),
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        slide.addText(item.title, {
+            x: 2,
+            y: y - 0.1,
+            w: 7,
+            h: 0.4,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.text.replace("#", ""),
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        if (item.description) {
+            slide.addText(item.description, {
+                x: 2,
+                y: y + 0.3,
+                w: 7,
+                h: 0.4,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: theme.colors.muted.replace("#", ""),
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    });
+}
+export function renderProcessFlowSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    if (!content.processSteps) {
+        return;
+    }
+    const steps = content.processSteps.slice(0, 5);
+    const stepWidth = 8 / steps.length;
+    steps.forEach((step, index) => {
+        const x = 1 + index * stepWidth;
+        const boxWidth = stepWidth - 0.4;
+        slide.addShape("roundRect", {
+            x,
+            y: 2,
+            w: boxWidth,
+            h: 2,
+            fill: { color: theme.colors.primary.replace("#", "") },
+            rectRadius: 0.1,
+        });
+        slide.addText(String(step.step), {
+            x,
+            y: 2.1,
+            w: boxWidth,
+            h: 0.5,
+            fontSize: 24,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.textOnPrimary.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        slide.addText(step.title, {
+            x,
+            y: 2.6,
+            w: boxWidth,
+            h: 0.5,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.textOnPrimary.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        if (step.description) {
+            slide.addText(step.description, {
+                x,
+                y: 3.2,
+                w: boxWidth,
+                h: 0.7,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: theme.colors.textOnPrimary.replace("#", ""),
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        if (index < steps.length - 1) {
+            // Use rightArrow shape for better visibility
+            slide.addShape("rightArrow", {
+                x: x + boxWidth + 0.02,
+                y: 2.85,
+                w: 0.35,
+                h: 0.3,
+                fill: { color: theme.colors.primary.replace("#", "") },
+            });
+        }
+    });
+}
+// ============================================================================
+// SLIDE RENDERERS - COMPARISON & FEATURES
+// ============================================================================
+export function renderComparisonSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme, false);
+    if (!content.comparison?.columns) {
+        return;
+    }
+    const columns = content.comparison.columns.slice(0, 2);
+    const columnWidth = 4.2;
+    // Calculate available height for bullet items (from y=2.0 to y=5.0 = 3.0 inches)
+    const contentStartY = 2.0;
+    const contentEndY = 5.0;
+    const availableHeight = contentEndY - contentStartY;
+    // Find max items across columns to calculate consistent spacing
+    const maxItems = Math.max(...columns.map((col) => Math.min(col.items?.length || 0, 6)));
+    // Calculate item height with minimum gap (at least 0.1 inch gap between items)
+    const itemHeight = maxItems > 0
+        ? Math.min(0.7, (availableHeight - MIN_GAP * maxItems) / maxItems)
+        : 0.5;
+    const effectiveSpacing = itemHeight + MIN_GAP;
+    columns.forEach((col, index) => {
+        const x = 0.5 + index * 4.8;
+        slide.addShape("roundRect", {
+            x,
+            y: 1.4,
+            w: columnWidth,
+            h: 0.5,
+            fill: {
+                color: col.highlight
+                    ? theme.colors.primary.replace("#", "")
+                    : theme.colors.muted.replace("#", ""),
+            },
+            rectRadius: 0.05,
+        });
+        slide.addText(col.title, {
+            x,
+            y: 1.4,
+            w: columnWidth,
+            h: 0.5,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.heading,
+            color: col.highlight
+                ? theme.colors.textOnPrimary.replace("#", "")
+                : theme.colors.text.replace("#", ""),
+            align: "center",
+            bold: true,
+            valign: "middle",
+            fit: DEFAULT_TEXT_FIT,
+        });
+        // Limit items to prevent overflow (max 6 items)
+        const items = (col.items || []).slice(0, 6);
+        // Calculate font size based on item count (smaller font for more items)
+        const fontSize = items.length > 4
+            ? Math.max(12, theme.fonts.sizes.body - 2)
+            : theme.fonts.sizes.body;
+        items.forEach((item, itemIndex) => {
+            // Check for markdown formatting
+            if (hasMarkdownFormatting(item)) {
+                const segments = parseMarkdownText(item);
+                const textRuns = [
+                    {
+                        text: "• ",
+                        options: {
+                            fontSize,
+                            fontFace: theme.fonts.body,
+                            color: theme.colors.text.replace("#", ""),
+                        },
+                    },
+                    ...createFormattedTextProps(segments, {
+                        fontSize,
+                        fontFace: theme.fonts.body,
+                        color: theme.colors.text.replace("#", ""),
+                    }),
+                ];
+                slide.addText(textRuns, {
+                    x: x + 0.2,
+                    y: contentStartY + itemIndex * effectiveSpacing,
+                    w: columnWidth - 0.4,
+                    h: itemHeight,
+                    valign: "top",
+                    fit: DEFAULT_TEXT_FIT,
+                });
+            }
+            else {
+                slide.addText(`• ${item}`, {
+                    x: x + 0.2,
+                    y: contentStartY + itemIndex * effectiveSpacing,
+                    w: columnWidth - 0.4,
+                    h: itemHeight,
+                    fontSize,
+                    fontFace: theme.fonts.body,
+                    color: theme.colors.text.replace("#", ""),
+                    valign: "top",
+                    fit: DEFAULT_TEXT_FIT,
+                });
+            }
+        });
+    });
+}
+export function renderFeaturesSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    const rawFeatures = content.features || [];
+    const rawIcons = content.icons || [];
+    const normalizedFeatures = rawFeatures.length > 0
+        ? rawFeatures
+        : rawIcons.map((icon) => ({
+            title: icon.label,
+            description: icon.description || "",
+            icon: icon.icon,
+        }));
+    if (normalizedFeatures.length === 0) {
+        return;
+    }
+    const itemsPerRow = Math.min(normalizedFeatures.length, 3);
+    const itemWidth = 9 / itemsPerRow;
+    normalizedFeatures
+        .slice(0, 6)
+        .forEach((feature, index) => {
+        const row = Math.floor(index / itemsPerRow);
+        const col = index % itemsPerRow;
+        const x = 0.5 + col * itemWidth;
+        const y = 1.6 + row * 1.8;
+        if (feature.icon) {
+            const codePoint = parseInt(feature.icon, 16);
+            if (!Number.isNaN(codePoint) &&
+                codePoint >= 0 &&
+                codePoint <= 0x10ffff) {
+                const iconChar = String.fromCodePoint(codePoint);
+                slide.addText(iconChar, {
+                    x,
+                    y,
+                    w: itemWidth - 0.2,
+                    h: 0.6,
+                    fontSize: 36,
+                    fontFace: "Segoe UI Emoji",
+                    color: theme.colors.primary.replace("#", ""),
+                    align: "center",
+                    fit: DEFAULT_TEXT_FIT,
+                });
+            }
+        }
+        slide.addText(feature.title, {
+            x,
+            y: y + 0.6,
+            w: itemWidth - 0.2,
+            h: 0.4,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.text.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        if (feature.description) {
+            slide.addText(feature.description, {
+                x,
+                y: y + 1,
+                w: itemWidth - 0.2,
+                h: 0.6,
+                fontSize: theme.fonts.sizes.caption,
+                fontFace: theme.fonts.body,
+                color: theme.colors.muted.replace("#", ""),
+                align: "center",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    });
+}
+export function renderTeamSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    if (!content.teamMembers) {
+        return;
+    }
+    const members = content.teamMembers.slice(0, 4);
+    const memberWidth = 9 / members.length;
+    members.forEach((member, index) => {
+        const x = 0.5 + index * memberWidth;
+        slide.addShape("ellipse", {
+            x: x + (memberWidth - 1.5) / 2,
+            y: 1.6,
+            w: 1.5,
+            h: 1.5,
+            fill: { color: theme.colors.muted.replace("#", "") },
+        });
+        const initials = member.name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .substring(0, 2);
+        slide.addText(initials, {
+            x: x + (memberWidth - 1.5) / 2,
+            y: 2,
+            w: 1.5,
+            h: 0.7,
+            fontSize: 28,
+            fontFace: theme.fonts.heading,
+            color: "FFFFFF",
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        slide.addText(member.name, {
+            x,
+            y: 3.3,
+            w: memberWidth - 0.2,
+            h: 0.4,
+            fontSize: theme.fonts.sizes.body,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.text.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        slide.addText(member.role, {
+            x,
+            y: 3.7,
+            w: memberWidth - 0.2,
+            h: 0.3,
+            fontSize: theme.fonts.sizes.caption,
+            fontFace: theme.fonts.body,
+            color: theme.colors.muted.replace("#", ""),
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    });
+}
+export function renderConclusionSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme);
+    if (content.bullets) {
+        const checkmarkBullets = content.bullets.map((bullet) => ({
+            ...bullet,
+            icon: bullet.icon || "2713",
+        }));
+        addBullets(slide, checkmarkBullets, LAYOUT_POSITIONS.contentFull, theme, "conclusion");
+    }
+    if (content.cta) {
+        slide.addText(content.cta, {
+            x: 0.5,
+            y: 4.6,
+            w: 9,
+            h: 0.5,
+            fontSize: theme.fonts.sizes.heading - 4,
+            fontFace: theme.fonts.heading,
+            color: theme.colors.primary.replace("#", ""),
+            align: "center",
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+}
+// ============================================================================
+// COMPOSITE/DASHBOARD SLIDE RENDERERS
+// Mixed content types on a single slide
+// ============================================================================
+/**
+ * Predefined grid layouts for composite slides
+ */
+export const COMPOSITE_LAYOUTS = {
+    // Two halves side by side
+    "left-right": [
+        { x: 0.5, y: 1.4, w: 4.3, h: 3.6 },
+        { x: 5.2, y: 1.4, w: 4.3, h: 3.6 },
+    ],
+    // Top and bottom
+    "top-bottom": [
+        { x: 0.5, y: 1.2, w: 9, h: 1.8 },
+        { x: 0.5, y: 3.2, w: 9, h: 2.0 },
+    ],
+    // Three columns
+    "three-cols": [
+        { x: 0.5, y: 1.4, w: 2.8, h: 3.6 },
+        { x: 3.5, y: 1.4, w: 2.8, h: 3.6 },
+        { x: 6.5, y: 1.4, w: 2.8, h: 3.6 },
+    ],
+    // Four quadrants
+    quadrants: [
+        { x: 0.5, y: 1.2, w: 4.3, h: 1.8 },
+        { x: 5.2, y: 1.2, w: 4.3, h: 1.8 },
+        { x: 0.5, y: 3.2, w: 4.3, h: 1.8 },
+        { x: 5.2, y: 3.2, w: 4.3, h: 1.8 },
+    ],
+    // Five boxes (2 on top, 3 on bottom)
+    "five-boxes": [
+        { x: 0.5, y: 1.2, w: 4.3, h: 1.6 },
+        { x: 5.2, y: 1.2, w: 4.3, h: 1.6 },
+        { x: 0.5, y: 3.0, w: 2.8, h: 2.0 },
+        { x: 3.5, y: 3.0, w: 2.8, h: 2.0 },
+        { x: 6.5, y: 3.0, w: 2.8, h: 2.0 },
+    ],
+    // Six boxes (2x3 grid)
+    "six-boxes": [
+        { x: 0.5, y: 1.2, w: 2.8, h: 1.6 },
+        { x: 3.5, y: 1.2, w: 2.8, h: 1.6 },
+        { x: 6.5, y: 1.2, w: 2.8, h: 1.6 },
+        { x: 0.5, y: 3.0, w: 2.8, h: 1.8 },
+        { x: 3.5, y: 3.0, w: 2.8, h: 1.8 },
+        { x: 6.5, y: 3.0, w: 2.8, h: 1.8 },
+    ],
+    // Main content left, sidebar right
+    "main-sidebar": [
+        { x: 0.5, y: 1.4, w: 5.8, h: 3.6 },
+        { x: 6.5, y: 1.4, w: 3.0, h: 3.6 },
+    ],
+    // Wide top, three boxes bottom
+    "top-three": [
+        { x: 0.5, y: 1.2, w: 9, h: 1.6 },
+        { x: 0.5, y: 3.0, w: 2.8, h: 2.0 },
+        { x: 3.5, y: 3.0, w: 2.8, h: 2.0 },
+        { x: 6.5, y: 3.0, w: 2.8, h: 2.0 },
+    ],
+};
+/**
+ * Render a content box with background
+ */
+function renderContentBox(slide, pos, title, theme, isPrimary = false) {
+    // Add background box
+    slide.addShape("roundRect", {
+        x: pos.x,
+        y: pos.y,
+        w: pos.w,
+        h: pos.h,
+        fill: {
+            color: isPrimary
+                ? theme.colors.primary.replace("#", "") + "15"
+                : "F8F9FA",
+        },
+        line: {
+            color: isPrimary ? theme.colors.primary.replace("#", "") : "E5E7EB",
+            width: 1,
+        },
+        rectRadius: 0.1,
+    });
+    let contentY = pos.y + 0.15;
+    let contentH = pos.h - 0.3;
+    // Add title if provided
+    if (title) {
+        slide.addText(title, {
+            x: pos.x + 0.15,
+            y: pos.y + 0.1,
+            w: pos.w - 0.3,
+            h: 0.35,
+            fontSize: 14,
+            fontFace: theme.fonts.heading,
+            color: isPrimary
+                ? theme.colors.primary.replace("#", "")
+                : theme.colors.text.replace("#", ""),
+            bold: true,
+            fit: DEFAULT_TEXT_FIT,
+        });
+        contentY = pos.y + 0.45;
+        contentH = pos.h - 0.55;
+    }
+    return { contentY, contentH };
+}
+/**
+ * Render bullets in a zone
+ */
+function renderBulletsInZone(slide, bullets, pos, theme, contentY, contentH) {
+    if (!bullets || bullets.length === 0) {
+        return;
+    }
+    const fontSize = Math.max(11, Math.min(14, 16 - bullets.length));
+    const color = theme.colors.text.replace("#", "");
+    bullets.forEach((bullet, idx) => {
+        // Skip invalid bullets
+        if (!bullet || !bullet.text) {
+            return;
+        }
+        const bulletY = contentY + idx * (contentH / bullets.length);
+        // Check if bullet text contains markdown formatting
+        if (hasMarkdownFormatting(bullet.text)) {
+            const segments = parseMarkdownText(bullet.text);
+            const textRuns = [
+                {
+                    text: "• ",
+                    options: { fontSize, fontFace: theme.fonts.body, color },
+                },
+                ...createFormattedTextProps(segments, {
+                    fontSize,
+                    fontFace: theme.fonts.body,
+                    color,
+                }),
+            ];
+            slide.addText(textRuns, {
+                x: pos.x + 0.15,
+                y: bulletY,
+                w: pos.w - 0.3,
+                h: contentH / bullets.length,
+                valign: "top",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+        else {
+            slide.addText(`• ${bullet.text}`, {
+                x: pos.x + 0.15,
+                y: bulletY,
+                w: pos.w - 0.3,
+                h: contentH / bullets.length,
+                fontSize,
+                fontFace: theme.fonts.body,
+                color,
+                valign: "top",
+                fit: DEFAULT_TEXT_FIT,
+            });
+        }
+    });
+}
+/**
+ * Render mini stat in a zone
+ */
+function renderStatInZone(slide, stat, pos, theme, contentY, contentH) {
+    // Value
+    slide.addText(stat.value, {
+        x: pos.x,
+        y: contentY,
+        w: pos.w,
+        h: contentH * 0.6,
+        fontSize: Math.min(32, pos.w * 8),
+        fontFace: theme.fonts.heading,
+        color: theme.colors.primary.replace("#", ""),
+        bold: true,
+        align: "center",
+        valign: "bottom",
+        fit: DEFAULT_TEXT_FIT,
+    });
+    // Label
+    slide.addText(stat.label, {
+        x: pos.x,
+        y: contentY + contentH * 0.6,
+        w: pos.w,
+        h: contentH * 0.4,
+        fontSize: 11,
+        fontFace: theme.fonts.body,
+        color: theme.colors.muted.replace("#", ""),
+        align: "center",
+        valign: "top",
+        fit: DEFAULT_TEXT_FIT,
+    });
+}
+/**
+ * Render icon box in a zone
+ */
+function renderIconBoxInZone(options) {
+    const { slide, icon, label, description, pos, theme, contentY, contentH } = options;
+    // Icon circle
+    const iconSize = Math.min(0.6, pos.w * 0.2);
+    slide.addShape("ellipse", {
+        x: pos.x + (pos.w - iconSize) / 2,
+        y: contentY,
+        w: iconSize,
+        h: iconSize,
+        fill: { color: theme.colors.primary.replace("#", "") },
+    });
+    // Icon text (Unicode)
+    const codePoint = parseInt(icon, 16);
+    if (Number.isNaN(codePoint) || codePoint < 0 || codePoint > 0x10ffff) {
+        logger.warn("[renderIconBoxInZone] Invalid icon code", { icon });
+        return;
+    }
+    const iconChar = String.fromCodePoint(codePoint);
+    slide.addText(iconChar, {
+        x: pos.x + (pos.w - iconSize) / 2,
+        y: contentY,
+        w: iconSize,
+        h: iconSize,
+        fontSize: 16,
+        color: "FFFFFF",
+        align: "center",
+        valign: "middle",
+        fit: DEFAULT_TEXT_FIT,
+    });
+    // Label
+    slide.addText(label, {
+        x: pos.x,
+        y: contentY + iconSize + 0.1,
+        w: pos.w,
+        h: 0.3,
+        fontSize: 12,
+        fontFace: theme.fonts.heading,
+        color: theme.colors.text.replace("#", ""),
+        bold: true,
+        align: "center",
+        fit: DEFAULT_TEXT_FIT,
+    });
+    // Description
+    if (description) {
+        slide.addText(description, {
+            x: pos.x + 0.1,
+            y: contentY + iconSize + 0.4,
+            w: pos.w - 0.2,
+            h: contentH - iconSize - 0.5,
+            fontSize: 10,
+            fontFace: theme.fonts.body,
+            color: theme.colors.muted.replace("#", ""),
+            align: "center",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+}
+/**
+ * Render a mini chart in a zone
+ */
+function renderMiniChartInZone(slide, chartData, pos, theme, contentY, contentH) {
+    const chartType = chartData.type === "pie"
+        ? "pie"
+        : chartData.type === "line"
+            ? "line"
+            : "bar";
+    const series = chartData.series || [];
+    if (series.length === 0) {
+        return;
+    }
+    const chartDataForPptx = series.map((s) => ({
+        name: s.name || "Data",
+        labels: s.labels || [],
+        values: s.values || [],
+    }));
+    try {
+        slide.addChart(chartType, chartDataForPptx, {
+            x: pos.x + 0.1,
+            y: contentY,
+            w: pos.w - 0.2,
+            h: contentH,
+            showLegend: false,
+            showTitle: false,
+            chartColors: [
+                theme.colors.primary.replace("#", ""),
+                theme.colors.secondary.replace("#", ""),
+                theme.colors.accent.replace("#", ""),
+                theme.colors.muted.replace("#", ""),
+            ],
+        });
+    }
+    catch {
+        // Fallback: show placeholder
+        slide.addText("Chart", {
+            x: pos.x,
+            y: contentY,
+            w: pos.w,
+            h: contentH,
+            fontSize: 14,
+            color: theme.colors.muted.replace("#", ""),
+            align: "center",
+            valign: "middle",
+            fit: DEFAULT_TEXT_FIT,
+        });
+    }
+}
+/**
+ * Render a composite/dashboard slide with multiple content zones
+ *
+ * @example
+ * // Left: bullets, Right: chart
+ * renderDashboardSlide(slide, "Overview", {
+ *   layout: "left-right",
+ *   zones: [
+ *     { type: "bullets", title: "Key Points", data: bullets },
+ *     { type: "chart", title: "Trend", data: chartData }
+ *   ]
+ * }, theme);
+ */
+export function renderDashboardSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme, false);
+    const layoutPositions = COMPOSITE_LAYOUTS[content.layout] || COMPOSITE_LAYOUTS["left-right"];
+    const zones = content.zones || [];
+    zones.forEach((zone, idx) => {
+        if (idx >= layoutPositions.length) {
+            return;
+        }
+        const pos = layoutPositions[idx];
+        const { contentY, contentH } = renderContentBox(slide, pos, zone.title, theme, zone.isPrimary);
+        switch (zone.type) {
+            case "bullets":
+                if (Array.isArray(zone.data)) {
+                    renderBulletsInZone(slide, zone.data, pos, theme, contentY, contentH);
+                }
+                break;
+            case "stats":
+                if (zone.data && typeof zone.data === "object") {
+                    renderStatInZone(slide, zone.data, pos, theme, contentY, contentH);
+                }
+                break;
+            case "icon-box":
+                if (zone.data && typeof zone.data === "object") {
+                    const iconData = zone.data;
+                    renderIconBoxInZone({
+                        slide,
+                        icon: iconData.icon,
+                        label: iconData.label,
+                        description: iconData.description,
+                        pos,
+                        theme,
+                        contentY,
+                        contentH,
+                    });
+                }
+                break;
+            case "chart":
+                if (zone.data && typeof zone.data === "object") {
+                    renderMiniChartInZone(slide, zone.data, pos, theme, contentY, contentH);
+                }
+                break;
+            case "text-box":
+                if (typeof zone.data === "string") {
+                    slide.addText(zone.data, {
+                        x: pos.x + 0.15,
+                        y: contentY,
+                        w: pos.w - 0.3,
+                        h: contentH,
+                        fontSize: 12,
+                        fontFace: theme.fonts.body,
+                        color: theme.colors.text.replace("#", ""),
+                        valign: "top",
+                    });
+                }
+                break;
+        }
+    });
+}
+/**
+ * Render a mixed content slide with left bullets and right chart
+ * Common pattern: explanation on left, visualization on right
+ */
+export function renderMixedContentSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme, false);
+    // Left side: bullets or text
+    if (content.bullets && content.bullets.length > 0) {
+        const leftPos = COMPOSITE_LAYOUTS["left-right"][0];
+        const { contentY, contentH } = renderContentBox(slide, leftPos, content.leftColumn?.title, theme, true);
+        renderBulletsInZone(slide, content.bullets, leftPos, theme, contentY, contentH);
+    }
+    // Right side: chart if available
+    if (content.chartData) {
+        const rightPos = COMPOSITE_LAYOUTS["left-right"][1];
+        const { contentY, contentH } = renderContentBox(slide, rightPos, "Data", theme, false);
+        renderMiniChartInZone(slide, content.chartData, rightPos, theme, contentY, contentH);
+    }
+    // Or statistics
+    else if (content.statistics && content.statistics.length > 0) {
+        const rightPos = COMPOSITE_LAYOUTS["left-right"][1];
+        renderContentBox(slide, rightPos, "Metrics", theme, false);
+        // Show up to 3 stats stacked
+        const stats = content.statistics.slice(0, 3);
+        const statHeight = rightPos.h / stats.length;
+        stats.forEach((stat, idx) => {
+            renderStatInZone(slide, stat, { ...rightPos, y: rightPos.y + idx * statHeight, h: statHeight }, theme, rightPos.y + idx * statHeight + 0.1, statHeight - 0.2);
+        });
+    }
+}
+/**
+ * Render a stats grid slide with multiple stat boxes
+ */
+export function renderStatsGridSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme, false);
+    const stats = content.statistics || [];
+    if (stats.length === 0) {
+        return;
+    }
+    // Choose layout based on stat count
+    let layout;
+    if (stats.length <= 2) {
+        layout = COMPOSITE_LAYOUTS["left-right"];
+    }
+    else if (stats.length <= 3) {
+        layout = COMPOSITE_LAYOUTS["three-cols"];
+    }
+    else if (stats.length <= 4) {
+        layout = COMPOSITE_LAYOUTS["quadrants"];
+    }
+    else if (stats.length <= 5) {
+        layout = COMPOSITE_LAYOUTS["five-boxes"];
+    }
+    else {
+        layout = COMPOSITE_LAYOUTS["six-boxes"];
+    }
+    stats.slice(0, layout.length).forEach((stat, idx) => {
+        const pos = layout[idx];
+        const isPrimary = idx === 0;
+        const { contentY, contentH } = renderContentBox(slide, pos, undefined, theme, isPrimary);
+        renderStatInZone(slide, stat, pos, theme, contentY, contentH);
+    });
+}
+/**
+ * Render an icon grid slide with multiple icon boxes
+ */
+export function renderIconGridSlide(slide, title, content, theme) {
+    addTitle(slide, title, theme, false);
+    const icons = content.icons || content.features || [];
+    if (icons.length === 0) {
+        return;
+    }
+    // Choose layout based on icon count
+    let layout;
+    if (icons.length <= 2) {
+        layout = COMPOSITE_LAYOUTS["left-right"];
+    }
+    else if (icons.length <= 3) {
+        layout = COMPOSITE_LAYOUTS["three-cols"];
+    }
+    else if (icons.length <= 4) {
+        layout = COMPOSITE_LAYOUTS["quadrants"];
+    }
+    else if (icons.length <= 5) {
+        layout = COMPOSITE_LAYOUTS["five-boxes"];
+    }
+    else {
+        layout = COMPOSITE_LAYOUTS["six-boxes"];
+    }
+    icons.slice(0, layout.length).forEach((item, idx) => {
+        const pos = layout[idx];
+        const isPrimary = idx === 0;
+        const { contentY, contentH } = renderContentBox(slide, pos, undefined, theme, isPrimary);
+        const icon = item.icon || "1F4A1";
+        const label = item.title || item.label || "";
+        const description = item.description;
+        renderIconBoxInZone({
+            slide,
+            icon,
+            label,
+            description,
+            pos,
+            theme,
+            contentY,
+            contentH,
+        });
+    });
+}