mulmocast 2.1.39 → 2.2.0

package/README.md

@@ -343,6 +343,49 @@ To force regeneration, delete the old files — including temporary files — un
 
 If you modify the text or instruction fields in a MulmoScript, mulmo will automatically detect the changes and regenerate the corresponding audio content upon re-run.
 
+## Slide Presentations
+
+MulmoCast includes a powerful **Slide DSL** (`type: "slide"`) for creating structured presentation slides with JSON. Slides are rendered via Tailwind CSS + Puppeteer into images.
+
+### Features
+
+- **11 Layouts**: title, columns, comparison, grid, bigQuote, stats, timeline, split, matrix, table, funnel
+- **10 Content Block Types**: text, bullets, code, callout, metric, divider, image, imageRef, chart, mermaid
+- **13-Color Theme System**: Semantic color palette with dark/light support
+- **6 Preset Themes**: dark, pop, warm, creative, minimal, corporate
+
+### Usage
+
+Set a theme once with `slideParams.theme`, then use `"type": "slide"` in each beat:
+
+```json
+{
+  "$mulmocast": { "version": "1.1" },
+  "slideParams": {
+    "theme": { "colors": { "bg": "0F172A", "bgCard": "1E293B", "bgCardAlt": "334155", "text": "F8FAFC", "textMuted": "CBD5E1", "textDim": "64748B", "primary": "3B82F6", "accent": "8B5CF6", "success": "22C55E", "warning": "F59E0B", "danger": "EF4444", "info": "14B8A6", "highlight": "EC4899" }, "fonts": { "title": "Georgia", "body": "Calibri", "mono": "Consolas" } }
+  },
+  "beats": [
+    {
+      "text": "Welcome to the presentation",
+      "image": {
+        "type": "slide",
+        "slide": { "layout": "title", "title": "Main Title", "subtitle": "Subtitle" }
+      }
+    }
+  ]
+}
+```
+
+Or use a preset presentation style:
+
+```bash
+mulmo tool complete beats.json -s slide_dark -o presentation.json
+```
+
+Available preset styles: `slide_dark`, `slide_pop`, `slide_warm`, `slide_creative`, `slide_minimal`, `slide_corporate`
+
+For detailed layout specifications and content block reference, see the [Slide DSL documentation](./.claude/skills/slide/SKILL.md).
+
 ## Markdown Slide Styles
 
 MulmoCast includes 100 pre-designed CSS styles for markdown slides, organized in 10 categories:

package/lib/actions/image_agents.d.ts

@@ -52,12 +52,13 @@ export declare const imagePreprocessAgent: (namedInputs: {
     context: MulmoStudioContext;
     beat: MulmoBeat;
     index: number;
-    imageRefs: Record<string, string>;
+    imageRefs?: Record<string, string>;
 }) => Promise<ImagePreprocessAgentResponse>;
 export declare const imagePluginAgent: (namedInputs: {
     context: MulmoStudioContext;
     beat: MulmoBeat;
     index: number;
+    imageRefs?: Record<string, string>;
 }) => Promise<void>;
 export declare const htmlImageGeneratorAgent: (namedInputs: {
     file: string;

package/lib/actions/image_agents.js

@@ -88,18 +88,18 @@ export const imagePreprocessAgent = async (namedInputs) => {
         return { ...returnValue, imagePath, imageFromMovie: true }; // no image prompt, only movie prompt
     }
     // referenceImages for "edit_image", openai agent.
-    const referenceImages = MulmoBeatMethods.getImageReferenceForImageGenerator(beat, imageRefs);
+    const referenceImages = MulmoBeatMethods.getImageReferenceForImageGenerator(beat, imageRefs ?? {});
     const prompt = imagePrompt(beat, imageAgentInfo.imageParams.style);
     // ImageGenearalPreprocessAgentResponse
     return { ...returnValue, imagePath, referenceImageForMovie: imagePath, imageAgentInfo, prompt, referenceImages };
 };
 export const imagePluginAgent = async (namedInputs) => {
-    const { context, beat, index } = namedInputs;
+    const { context, beat, index, imageRefs } = namedInputs;
     const { imagePath } = getBeatPngImagePath(context, index);
     const plugin = MulmoBeatMethods.getPlugin(beat);
     try {
         MulmoStudioContextMethods.setBeatSessionState(context, "image", index, beat.id, true);
-        const processorParams = { beat, context, imagePath, ...htmlStyle(context, beat) };
+        const processorParams = { beat, context, imagePath, imageRefs, ...htmlStyle(context, beat) };
         await plugin.process(processorParams);
         MulmoStudioContextMethods.setBeatSessionState(context, "image", index, beat.id, false);
     }

package/lib/actions/images.d.ts

@@ -29,7 +29,7 @@ export declare const beat_graph_data: {
                 context: MulmoStudioContext;
                 beat: import("../types/type.js").MulmoBeat;
                 index: number;
-                imageRefs: Record<string, string>;
+                imageRefs?: Record<string, string>;
             }) => Promise<({
                 imageParams?: MulmoImageParams;
                 movieFile?: string;
@@ -162,11 +162,13 @@ export declare const beat_graph_data: {
                 context: MulmoStudioContext;
                 beat: import("../types/type.js").MulmoBeat;
                 index: number;
+                imageRefs?: Record<string, string>;
             }) => Promise<void>;
             inputs: {
                 context: string;
                 beat: string;
                 index: string;
+                imageRefs: string;
                 onComplete: string[];
             };
         };

package/lib/actions/images.js

@@ -76,6 +76,7 @@ export const beat_graph_data = {
                 context: ":context",
                 beat: ":beat",
                 index: ":__mapIndex",
+                imageRefs: ":imageRefs",
                 onComplete: [":preprocessor"],
             },
         },

package/lib/actions/pdf.js

@@ -96,6 +96,13 @@ const getHandoutTemplateData = (isLandscapeImage) => ({
     text_size: isLandscapeImage ? "width: 55%;" : "height: 40%;",
     item_flex: isLandscapeImage ? "flex: 1;" : "",
 });
+const resolvePageSize = (pdfMode, pdfSize, imageWidth, imageHeight, isLandscape) => {
+    if (pdfMode === "slide")
+        return `${imageWidth}px ${imageHeight}px`;
+    if (pdfMode === "handout")
+        return `${getPdfSize(pdfSize)} portrait`;
+    return `${getPdfSize(pdfSize)} ${isLandscape ? "landscape" : "portrait"}`;
+};
 const generatePDFHTML = async (context, pdfMode, pdfSize) => {
     const { studio, multiLingual, lang = "en" } = context;
     const { width: imageWidth, height: imageHeight } = MulmoPresentationStyleMethods.getCanvasSize(context.presentationStyle);
@@ -103,8 +110,7 @@ const generatePDFHTML = async (context, pdfMode, pdfSize) => {
     const imageFiles = studio.beats.map((beat) => beat.htmlImageFile ?? beat.imageFile);
     const texts = studio.script.beats.map((beat, index) => localizedText(beat, multiLingual?.[index], lang));
     const imageDataUrls = await Promise.all(imageFiles.map(loadImage));
-    const defaultPageSize = `${getPdfSize(pdfSize)} ${isLandscapeImage ? "landscape" : "portrait"}`;
-    const pageSize = pdfMode === "handout" ? `${getPdfSize(pdfSize)} portrait` : defaultPageSize;
+    const pageSize = resolvePageSize(pdfMode, pdfSize, imageWidth, imageHeight, isLandscapeImage);
     const pagesHTML = generatePagesHTML(pdfMode, imageDataUrls, texts);
     const template = getHTMLFile(`pdf_${pdfMode}`);
     const baseTemplateData = {
@@ -116,33 +122,30 @@ const generatePDFHTML = async (context, pdfMode, pdfSize) => {
     const templateData = pdfMode === "handout" ? { ...baseTemplateData, ...getHandoutTemplateData(isLandscapeImage) } : baseTemplateData;
     return interpolate(template, templateData);
 };
-const createPDFOptions = (pdfSize, pdfMode) => {
-    const baseOptions = {
-        format: getPdfSize(pdfSize),
-        margin: {
-            top: "0",
-            bottom: "0",
-            left: "0",
-            right: "0",
-        },
-    };
-    // handout mode always uses portrait orientation
+const zeroMargin = { top: "0", bottom: "0", left: "0", right: "0" };
+const createPDFOptions = (pdfSize, pdfMode, canvasSize) => {
+    if (pdfMode === "slide") {
+        return { width: `${canvasSize.width}px`, height: `${canvasSize.height}px`, margin: zeroMargin };
+    }
+    const baseOptions = { format: getPdfSize(pdfSize), margin: zeroMargin };
     return pdfMode === "handout" ? { ...baseOptions, landscape: false } : baseOptions;
 };
 export const pdfFilePath = (context, pdfMode) => {
     const { studio, fileDirs, lang = "en" } = context;
     return getOutputPdfFilePath(fileDirs.outDirPath, studio.filename, pdfMode, lang);
 };
+const PDF_CONTENT_TIMEOUT_MS = 60000;
 const generatePDF = async (context, pdfMode, pdfSize) => {
     const outputPdfPath = pdfFilePath(context, pdfMode);
     const html = await generatePDFHTML(context, pdfMode, pdfSize);
-    const pdfOptions = createPDFOptions(pdfSize, pdfMode);
+    const canvasSize = MulmoPresentationStyleMethods.getCanvasSize(context.presentationStyle);
+    const pdfOptions = createPDFOptions(pdfSize, pdfMode, canvasSize);
     const browser = await puppeteer.launch({
         args: isCI ? ["--no-sandbox"] : [],
     });
     try {
         const page = await browser.newPage();
-        await page.setContent(html, { waitUntil: "domcontentloaded" });
+        await page.setContent(html, { waitUntil: "domcontentloaded", timeout: PDF_CONTENT_TIMEOUT_MS });
         await sleep(1000);
         await page.pdf({
             path: outputPdfPath,

package/lib/methods/mulmo_media_source.d.ts

@@ -1,5 +1,6 @@
 import type { MulmoMediaSource, MulmoMediaMermaidSource, MulmoStudioContext, ImageType } from "../types/index.js";
 export declare const getExtention: (contentType: string | null, url: string) => string;
+export declare const pathToDataUrl: (filePath: string) => string;
 export declare const MulmoMediaSourceMethods: {
     getText(mediaSource: MulmoMediaMermaidSource, context: MulmoStudioContext): Promise<string | null>;
     resolve(mediaSource: MulmoMediaSource | undefined, context: MulmoStudioContext): string | null;

package/lib/methods/mulmo_media_source.js

@@ -60,12 +60,26 @@ const urlToDataUrl = async (url, timeoutMs = DEFAULT_FETCH_TIMEOUT_MS) => {
         clearTimeout(timeoutId);
     }
 };
+/** Map file extension to MIME type for data URLs */
+const extensionToMimeType = (ext) => {
+    const mimeMap = {
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        webp: "image/webp",
+        svg: "image/svg+xml",
+        bmp: "image/bmp",
+        ico: "image/x-icon",
+    };
+    return mimeMap[ext.toLowerCase()] ?? `image/${ext}`;
+};
 // Convert local file path to data URL (base64 encoded)
-const pathToDataUrl = (filePath) => {
+export const pathToDataUrl = (filePath) => {
     assert(fs.existsSync(filePath), `File not found: ${filePath}`, false, mediaSourceFileNotFoundError(filePath));
     const buffer = fs.readFileSync(filePath);
-    const extension = getExtention(null, filePath);
-    const mimeType = extension === "jpg" ? "image/jpeg" : `image/${extension}`;
+    const ext = filePath.split(".").pop()?.toLowerCase() ?? "png";
+    const mimeType = extensionToMimeType(ext);
     return `data:${mimeType};base64,${buffer.toString("base64")}`;
 };
 // Convert base64 string to data URL format

package/lib/slide/blocks.d.ts

@@ -0,0 +1,7 @@
+import type { ContentBlock } from "./schema.js";
+/** Render a single content block to HTML */
+export declare const renderContentBlock: (block: ContentBlock) => string;
+/** Render an array of content blocks to HTML */
+export declare const renderContentBlocks: (blocks: ContentBlock[]) => string;
+/** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
+export declare const renderCardContentBlocks: (blocks: ContentBlock[]) => string;

package/lib/slide/blocks.js

@@ -0,0 +1,149 @@
+import { escapeHtml, nl2br, c, generateSlideId } from "./utils.js";
+/** Render a single content block to HTML */
+export const renderContentBlock = (block) => {
+    switch (block.type) {
+        case "text":
+            return renderText(block);
+        case "bullets":
+            return renderBullets(block);
+        case "code":
+            return renderCode(block);
+        case "callout":
+            return renderCallout(block);
+        case "metric":
+            return renderMetric(block);
+        case "divider":
+            return renderDivider(block);
+        case "image":
+            return renderImage(block);
+        case "imageRef":
+            return renderImageRefPlaceholder(block);
+        case "chart":
+            return renderChart(block);
+        case "mermaid":
+            return renderMermaid(block);
+        default:
+            return `<p class="text-sm text-d-muted font-body">[unknown block type]</p>`;
+    }
+};
+/** Render an array of content blocks to HTML */
+export const renderContentBlocks = (blocks) => {
+    return blocks.map(renderContentBlock).join("\n");
+};
+/** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
+export const renderCardContentBlocks = (blocks) => {
+    return blocks
+        .map((block) => {
+        if (block.type === "image") {
+            return `<div class="aspect-video shrink-0 overflow-hidden">${renderContentBlock(block)}</div>`;
+        }
+        return renderContentBlock(block);
+    })
+        .join("\n");
+};
+const resolveTextColor = (block) => {
+    if (block.color)
+        return `text-${c(block.color)}`;
+    if (block.dim)
+        return "text-d-dim";
+    return "text-d-muted";
+};
+const resolveAlign = (align) => {
+    if (align === "center")
+        return "text-center";
+    if (align === "right")
+        return "text-right";
+    return "";
+};
+const renderText = (block) => {
+    const color = resolveTextColor(block);
+    const bold = block.bold ? "font-bold" : "";
+    const size = block.fontSize !== undefined && block.fontSize >= 18 ? "text-xl" : "text-[15px]";
+    const alignCls = resolveAlign(block.align);
+    return `<p class="${size} ${color} ${bold} ${alignCls} font-body leading-relaxed">${nl2br(block.value)}</p>`;
+};
+const renderBullets = (block) => {
+    const tag = block.ordered ? "ol" : "ul";
+    const items = block.items
+        .map((item, i) => {
+        const marker = block.ordered ? `${i + 1}.` : escapeHtml(block.icon || "\u2022");
+        return `  <li class="flex gap-2"><span class="text-d-dim shrink-0">${marker}</span><span>${escapeHtml(item)}</span></li>`;
+    })
+        .join("\n");
+    return `<${tag} class="space-y-2 text-[15px] text-d-muted font-body">\n${items}\n</${tag}>`;
+};
+const renderCode = (block) => {
+    return `<pre class="bg-[#0D1117] p-4 rounded text-sm font-mono text-d-dim leading-relaxed whitespace-pre-wrap">${escapeHtml(block.code)}</pre>`;
+};
+const renderCallout = (block) => {
+    const isQuote = block.style === "quote";
+    const resolveBorderCls = (style) => {
+        if (style === "warning")
+            return `border-l-2 border-${c("warning")}`;
+        if (style === "info")
+            return `border-l-2 border-${c("info")}`;
+        return "";
+    };
+    const borderCls = resolveBorderCls(block.style);
+    const bg = isQuote ? "bg-d-alt" : "bg-d-card";
+    const textCls = isQuote ? "italic text-d-muted" : "text-d-muted";
+    const content = block.label
+        ? `<span class="font-bold text-${c(block.color || "warning")}">${escapeHtml(block.label)}:</span> <span class="text-d-muted">${escapeHtml(block.text)}</span>`
+        : `<span class="${textCls}">${nl2br(block.text)}</span>`;
+    return `<div class="${bg} ${borderCls} p-3 rounded text-sm font-body">${content}</div>`;
+};
+const renderMetric = (block) => {
+    const lines = [];
+    lines.push(`<div class="text-center">`);
+    lines.push(`  <p class="text-4xl font-bold text-${c(block.color || "primary")}">${escapeHtml(block.value)}</p>`);
+    lines.push(`  <p class="text-sm text-d-dim mt-1">${escapeHtml(block.label)}</p>`);
+    if (block.change) {
+        const changeColor = block.change.startsWith("+") ? "success" : "danger";
+        lines.push(`  <p class="text-sm font-bold text-${c(changeColor)} mt-1">${escapeHtml(block.change)}</p>`);
+    }
+    lines.push(`</div>`);
+    return lines.join("\n");
+};
+const renderDivider = (block) => {
+    const divColor = block.color ? `bg-${c(block.color)}` : "bg-d-alt";
+    return `<div class="h-[2px] ${divColor} my-2 rounded-full"></div>`;
+};
+const renderImage = (block) => {
+    const fit = block.fit === "cover" ? "object-cover" : "object-contain";
+    return `<div class="min-h-0 flex-1 overflow-hidden flex items-center"><img src="${escapeHtml(block.src)}" alt="${escapeHtml(block.alt || "")}" class="rounded ${fit} w-full h-full" /></div>`;
+};
+/** Placeholder for unresolved imageRef blocks — should be resolved before rendering */
+const renderImageRefPlaceholder = (block) => {
+    return `<div class="min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-d-alt rounded"><p class="text-sm text-d-dim font-body">[imageRef: ${escapeHtml(block.ref)}]</p></div>`;
+};
+const renderChart = (block) => {
+    const chartId = generateSlideId("chart");
+    const chartData = JSON.stringify(block.chartData);
+    const titleHtml = block.title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${escapeHtml(block.title)}</p>` : "";
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${titleHtml}
+  <div class="flex-1 min-h-0 relative">
+    <canvas id="${chartId}" data-chart-ready="false"></canvas>
+  </div>
+  <script>(function(){
+    const ctx=document.getElementById('${chartId}');
+    const d=${chartData};
+    if(!d.options)d.options={};
+    d.options.animation=false;
+    d.options.responsive=true;
+    d.options.maintainAspectRatio=false;
+    new Chart(ctx,d);
+    requestAnimationFrame(()=>requestAnimationFrame(()=>{ctx.dataset.chartReady="true"}));
+  })()</script>
+</div>`;
+};
+const renderMermaid = (block) => {
+    const mermaidId = generateSlideId("mermaid");
+    const titleHtml = block.title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${escapeHtml(block.title)}</p>` : "";
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${titleHtml}
+  <div class="flex-1 min-h-0 flex justify-center items-center">
+    <div id="${mermaidId}" class="mermaid">${escapeHtml(block.code)}</div>
+  </div>
+</div>`;
+};

package/lib/slide/index.d.ts

@@ -0,0 +1,5 @@
+export { generateSlideHTML } from "./render.js";
+export { renderSlideContent } from "./layouts/index.js";
+export { renderContentBlock, renderContentBlocks } from "./blocks.js";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, } from "./schema.js";
+export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, ContentBlock, ImageRefBlock, ChartBlock, MermaidBlock, AccentColorKey, TitleSlide, ColumnsSlide, ComparisonSlide, GridSlide, BigQuoteSlide, StatsSlide, TimelineSlide, SplitSlide, MatrixSlide, TableSlide, FunnelSlide, Card, CalloutBar, SlideStyle, } from "./schema.js";

package/lib/slide/index.js

@@ -0,0 +1,7 @@
+// Public API for the slide module
+// This module is self-contained and can be extracted into a standalone package
+export { generateSlideHTML } from "./render.js";
+export { renderSlideContent } from "./layouts/index.js";
+export { renderContentBlock, renderContentBlocks } from "./blocks.js";
+// Schemas
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, } from "./schema.js";

package/lib/slide/layouts/big_quote.d.ts

@@ -0,0 +1,2 @@
+import type { BigQuoteSlide } from "../schema.js";
+export declare const layoutBigQuote: (data: BigQuoteSlide) => string;

package/lib/slide/layouts/big_quote.js

@@ -0,0 +1,19 @@
+import { escapeHtml, nl2br, c } from "../utils.js";
+export const layoutBigQuote = (data) => {
+    const accent = data.accentColor || "primary";
+    const parts = [];
+    parts.push(`<div class="flex flex-col items-center justify-center h-full px-20">`);
+    parts.push(`  <div class="h-[3px] w-24 bg-${c(accent)} mb-8"></div>`);
+    parts.push(`  <blockquote class="text-[32px] text-d-text font-title italic text-center leading-relaxed">`);
+    parts.push(`    &ldquo;${nl2br(data.quote)}&rdquo;`);
+    parts.push(`  </blockquote>`);
+    parts.push(`  <div class="h-[3px] w-24 bg-${c(accent)} mt-8 mb-6"></div>`);
+    if (data.author) {
+        parts.push(`  <p class="text-lg text-d-muted font-body">${escapeHtml(data.author)}</p>`);
+    }
+    if (data.role) {
+        parts.push(`  <p class="text-sm text-d-dim font-body mt-1">${escapeHtml(data.role)}</p>`);
+    }
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

package/lib/slide/layouts/columns.d.ts

@@ -0,0 +1,2 @@
+import type { ColumnsSlide } from "../schema.js";
+export declare const layoutColumns: (data: ColumnsSlide) => string;

package/lib/slide/layouts/columns.js

@@ -0,0 +1,56 @@
+import { escapeHtml, c, cardWrap, numBadge, iconSquare, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderCardContentBlocks } from "../blocks.js";
+const buildColumnCard = (col) => {
+    const accent = col.accentColor || "primary";
+    const inner = [];
+    if (col.icon) {
+        inner.push(`<div class="flex flex-col items-center mb-3">`);
+        inner.push(`  ${iconSquare(col.icon, accent)}`);
+        inner.push(`</div>`);
+        inner.push(`<h3 class="text-lg font-bold text-d-text text-center font-body">${escapeHtml(col.title)}</h3>`);
+    }
+    else if (col.num != null) {
+        inner.push(`<div class="flex items-center gap-3 mb-1">`);
+        inner.push(`  ${numBadge(col.num, accent)}`);
+        inner.push(`  <h3 class="text-lg font-bold text-d-text font-body">${escapeHtml(col.title)}</h3>`);
+        inner.push(`</div>`);
+    }
+    else {
+        if (col.label) {
+            inner.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${escapeHtml(col.label)}</p>`);
+        }
+        inner.push(`<h3 class="text-2xl font-title font-bold text-d-text mt-1">${escapeHtml(col.title)}</h3>`);
+    }
+    if (col.content) {
+        const centerCls = col.icon ? "text-center" : "";
+        inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col ${centerCls}">`);
+        inner.push(renderCardContentBlocks(col.content));
+        inner.push(`</div>`);
+    }
+    if (col.footer) {
+        inner.push(`<div class="flex-1"></div>`);
+        inner.push(`<p class="text-sm text-d-dim font-body mt-3">${escapeHtml(col.footer)}</p>`);
+    }
+    return cardWrap(accent, inner.join("\n"), "flex-1");
+};
+export const layoutColumns = (data) => {
+    const cols = data.columns || [];
+    const parts = [slideHeader(data)];
+    const colElements = [];
+    cols.forEach((col, i) => {
+        colElements.push(buildColumnCard(col));
+        if (data.showArrows && i < cols.length - 1) {
+            colElements.push(`<div class="flex items-center shrink-0"><span class="text-2xl text-d-dim">\u25B6</span></div>`);
+        }
+    });
+    parts.push(`<div class="flex gap-4 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
+    parts.push(colElements.join("\n"));
+    parts.push(`</div>`);
+    if (data.callout) {
+        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
+    }
+    if (data.bottomText) {
+        parts.push(`<p class="text-center text-sm text-d-dim font-body pb-4">${escapeHtml(data.bottomText)}</p>`);
+    }
+    return parts.join("\n");
+};

package/lib/slide/layouts/comparison.d.ts

@@ -0,0 +1,2 @@
+import type { ComparisonSlide } from "../schema.js";
+export declare const layoutComparison: (data: ComparisonSlide) => string;

package/lib/slide/layouts/comparison.js

@@ -0,0 +1,29 @@
+import { escapeHtml, c, cardWrap, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderContentBlocks } from "../blocks.js";
+const buildPanel = (panel) => {
+    const accent = panel.accentColor || "primary";
+    const inner = [];
+    inner.push(`<h3 class="text-xl font-bold text-${c(accent)} font-body">${escapeHtml(panel.title)}</h3>`);
+    if (panel.content) {
+        inner.push(`<div class="mt-4 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">`);
+        inner.push(renderContentBlocks(panel.content));
+        inner.push(`</div>`);
+    }
+    if (panel.footer) {
+        if (!panel.content)
+            inner.push(`<div class="flex-1"></div>`);
+        inner.push(`<p class="text-sm text-d-dim font-body mt-3">${escapeHtml(panel.footer)}</p>`);
+    }
+    return cardWrap(accent, inner.join("\n"), "flex-1");
+};
+export const layoutComparison = (data) => {
+    const parts = [slideHeader(data)];
+    parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
+    parts.push(buildPanel(data.left));
+    parts.push(buildPanel(data.right));
+    parts.push(`</div>`);
+    if (data.callout) {
+        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
+    }
+    return parts.join("\n");
+};

package/lib/slide/layouts/funnel.d.ts

@@ -0,0 +1,2 @@
+import type { FunnelSlide } from "../schema.js";
+export declare const layoutFunnel: (data: FunnelSlide) => string;

package/lib/slide/layouts/funnel.js

@@ -0,0 +1,27 @@
+import { escapeHtml, c, slideHeader, renderCalloutBar } from "../utils.js";
+export const layoutFunnel = (data) => {
+    const parts = [slideHeader(data)];
+    const stages = data.stages || [];
+    const total = stages.length;
+    parts.push(`<div class="flex flex-col items-center gap-2 px-12 mt-6 flex-1">`);
+    stages.forEach((stage, i) => {
+        const color = stage.color || data.accentColor || "primary";
+        const widthPct = 100 - (i / Math.max(total - 1, 1)) * 55;
+        parts.push(`<div class="bg-${c(color)} rounded-lg flex items-center justify-between px-6 py-4" style="width: ${widthPct}%">`);
+        parts.push(`  <div class="flex items-center gap-3">`);
+        parts.push(`    <span class="text-base font-bold text-white font-body">${escapeHtml(stage.label)}</span>`);
+        if (stage.description) {
+            parts.push(`    <span class="text-sm text-white/70 font-body">${escapeHtml(stage.description)}</span>`);
+        }
+        parts.push(`  </div>`);
+        if (stage.value) {
+            parts.push(`  <span class="text-lg font-bold text-white font-body">${escapeHtml(stage.value)}</span>`);
+        }
+        parts.push(`</div>`);
+    });
+    parts.push(`</div>`);
+    if (data.callout) {
+        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
+    }
+    return parts.join("\n");
+};

package/lib/slide/layouts/grid.d.ts

@@ -0,0 +1,2 @@
+import type { GridSlide } from "../schema.js";
+export declare const layoutGrid: (data: GridSlide) => string;

package/lib/slide/layouts/grid.js

@@ -0,0 +1,43 @@
+import { escapeHtml, nl2br, c, cardWrap, numBadge, iconSquare } from "../utils.js";
+import { renderCardContentBlocks } from "../blocks.js";
+export const layoutGrid = (data) => {
+    const accent = data.accentColor || "primary";
+    const nCols = data.gridColumns || 3;
+    const parts = [];
+    parts.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
+    parts.push(`<div class="px-12 pt-5 shrink-0">`);
+    parts.push(`  <h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h2>`);
+    parts.push(`</div>`);
+    parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-start">`);
+    (data.items || []).forEach((item) => {
+        const itemAccent = item.accentColor || "primary";
+        const inner = [];
+        if (item.icon) {
+            inner.push(`<div class="flex flex-col items-center mb-2">`);
+            inner.push(`  ${iconSquare(item.icon, itemAccent)}`);
+            inner.push(`</div>`);
+            inner.push(`<h3 class="text-lg font-bold text-d-text text-center font-body">${escapeHtml(item.title)}</h3>`);
+        }
+        else if (item.num != null) {
+            inner.push(`<div class="flex items-center gap-3">`);
+            inner.push(`  ${numBadge(item.num, itemAccent)}`);
+            inner.push(`  <h3 class="text-sm font-bold text-d-text font-body">${escapeHtml(item.title)}</h3>`);
+            inner.push(`</div>`);
+        }
+        else {
+            inner.push(`<h3 class="text-lg font-bold text-d-text font-body">${escapeHtml(item.title)}</h3>`);
+        }
+        if (item.description) {
+            inner.push(`<p class="text-sm text-d-muted font-body mt-3">${escapeHtml(item.description)}</p>`);
+        }
+        if (item.content) {
+            inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">${renderCardContentBlocks(item.content)}</div>`);
+        }
+        parts.push(cardWrap(itemAccent, inner.join("\n")));
+    });
+    parts.push(`</div>`);
+    if (data.footer) {
+        parts.push(`<p class="text-xs text-d-dim font-body px-12 pb-3">${escapeHtml(data.footer)}</p>`);
+    }
+    return parts.join("\n");
+};

package/lib/slide/layouts/index.d.ts

@@ -0,0 +1,3 @@
+import type { SlideLayout } from "../schema.js";
+/** Render the inner content of a slide (without the wrapper div) */
+export declare const renderSlideContent: (slide: SlideLayout) => string;