mulmocast 2.1.39 → 2.1.40

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
+- **7 Content Block Types**: text, bullets, code, callout, metric, divider, image
+- **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/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/slide/blocks.d.ts

@@ -0,0 +1,5 @@
+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;

package/lib/slide/blocks.js

@@ -0,0 +1,97 @@
+import { escapeHtml, nl2br, c } 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);
+        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");
+};
+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 `<img src="${escapeHtml(block.src)}" alt="${escapeHtml(block.alt || "")}" class="rounded ${fit} max-h-full w-full" />`;
+};

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, accentColorKeySchema } from "./schema.js";
+export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, ContentBlock, 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, 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 { renderContentBlocks } 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 ${centerCls}">`);
+        inner.push(renderContentBlocks(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">`);
+    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,28 @@
+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">`);
+        inner.push(renderContentBlocks(panel.content));
+        inner.push(`</div>`);
+    }
+    if (panel.footer) {
+        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">`);
+    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 { renderContentBlocks } 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 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">${renderContentBlocks(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;

package/lib/slide/layouts/index.js

@@ -0,0 +1,43 @@
+import { layoutTitle } from "./title.js";
+import { layoutColumns } from "./columns.js";
+import { layoutComparison } from "./comparison.js";
+import { layoutGrid } from "./grid.js";
+import { layoutBigQuote } from "./big_quote.js";
+import { layoutStats } from "./stats.js";
+import { layoutTimeline } from "./timeline.js";
+import { layoutSplit } from "./split.js";
+import { layoutMatrix } from "./matrix.js";
+import { layoutTable } from "./table.js";
+import { layoutFunnel } from "./funnel.js";
+import { escapeHtml } from "../utils.js";
+/** Render the inner content of a slide (without the wrapper div) */
+export const renderSlideContent = (slide) => {
+    switch (slide.layout) {
+        case "title":
+            return layoutTitle(slide);
+        case "columns":
+            return layoutColumns(slide);
+        case "comparison":
+            return layoutComparison(slide);
+        case "grid":
+            return layoutGrid(slide);
+        case "bigQuote":
+            return layoutBigQuote(slide);
+        case "stats":
+            return layoutStats(slide);
+        case "timeline":
+            return layoutTimeline(slide);
+        case "split":
+            return layoutSplit(slide);
+        case "matrix":
+            return layoutMatrix(slide);
+        case "table":
+            return layoutTable(slide);
+        case "funnel":
+            return layoutFunnel(slide);
+        default: {
+            const _exhaustive = slide;
+            return `<p class="text-white p-8">Unknown layout: ${escapeHtml(String(_exhaustive.layout))}</p>`;
+        }
+    }
+};

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

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

package/lib/slide/layouts/matrix.js

@@ -0,0 +1,53 @@
+import { escapeHtml, c, cardWrap, slideHeader } from "../utils.js";
+import { renderContentBlocks } from "../blocks.js";
+export const layoutMatrix = (data) => {
+    const parts = [slideHeader(data)];
+    const rows = data.rows || 2;
+    const cols = data.cols || 2;
+    const cells = data.cells || [];
+    parts.push(`<div class="flex flex-1 px-12 mt-4 gap-2">`);
+    if (data.yAxis) {
+        parts.push(`<div class="flex flex-col justify-between items-center w-6 shrink-0 py-4">`);
+        parts.push(`  <span class="text-xs text-d-dim font-body [writing-mode:vertical-lr] rotate-180">${escapeHtml(data.yAxis.high || "")}</span>`);
+        if (data.yAxis.label) {
+            parts.push(`  <span class="text-xs font-bold text-d-muted font-body [writing-mode:vertical-lr] rotate-180">${escapeHtml(data.yAxis.label)}</span>`);
+        }
+        parts.push(`  <span class="text-xs text-d-dim font-body [writing-mode:vertical-lr] rotate-180">${escapeHtml(data.yAxis.low || "")}</span>`);
+        parts.push(`</div>`);
+    }
+    parts.push(`<div class="flex-1 flex flex-col gap-3">`);
+    Array.from({ length: rows }).forEach((_row, r) => {
+        parts.push(`<div class="flex gap-3 flex-1">`);
+        Array.from({ length: cols }).forEach((_col, ci) => {
+            const idx = r * cols + ci;
+            const cell = cells[idx] || { label: "" };
+            const accent = cell.accentColor || "primary";
+            const inner = [];
+            inner.push(`<h3 class="text-lg font-bold text-${c(accent)} font-body">${escapeHtml(cell.label)}</h3>`);
+            if (cell.items) {
+                inner.push(`<ul class="mt-2 space-y-1 text-sm text-d-muted font-body">`);
+                cell.items.forEach((item) => {
+                    inner.push(`  <li class="flex gap-2"><span class="text-d-dim shrink-0">&bull;</span><span>${escapeHtml(item)}</span></li>`);
+                });
+                inner.push(`</ul>`);
+            }
+            if (cell.content) {
+                inner.push(`<div class="mt-2 space-y-2">${renderContentBlocks(cell.content)}</div>`);
+            }
+            parts.push(cardWrap(accent, inner.join("\n"), "flex-1"));
+        });
+        parts.push(`</div>`);
+    });
+    if (data.xAxis) {
+        parts.push(`<div class="flex justify-between px-2 mt-1">`);
+        parts.push(`  <span class="text-xs text-d-dim font-body">${escapeHtml(data.xAxis.low || "")}</span>`);
+        if (data.xAxis.label) {
+            parts.push(`  <span class="text-xs font-bold text-d-muted font-body">${escapeHtml(data.xAxis.label)}</span>`);
+        }
+        parts.push(`  <span class="text-xs text-d-dim font-body">${escapeHtml(data.xAxis.high || "")}</span>`);
+        parts.push(`</div>`);
+    }
+    parts.push(`</div>`);
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

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

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

package/lib/slide/layouts/split.js

@@ -0,0 +1,38 @@
+import { escapeHtml, nl2br, c } from "../utils.js";
+import { renderContentBlocks } from "../blocks.js";
+const buildSplitPanel = (panel, fallbackAccent, ratio) => {
+    const accent = panel.accentColor || fallbackAccent;
+    const bg = panel.dark ? "bg-d-card" : "";
+    const lines = [];
+    lines.push(`<div class="${bg} flex flex-col justify-center px-10 py-8" style="flex: ${ratio}">`);
+    if (panel.label) {
+        lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body mb-2">${escapeHtml(panel.label)}</p>`);
+    }
+    if (panel.title) {
+        lines.push(`  <h2 class="text-[36px] leading-tight font-title font-bold text-d-text">${nl2br(panel.title)}</h2>`);
+    }
+    if (panel.subtitle) {
+        lines.push(`  <p class="text-base text-d-dim font-body mt-3">${nl2br(panel.subtitle)}</p>`);
+    }
+    if (panel.content) {
+        lines.push(`  <div class="mt-6 space-y-3">${renderContentBlocks(panel.content)}</div>`);
+    }
+    lines.push(`</div>`);
+    return lines.join("\n");
+};
+export const layoutSplit = (data) => {
+    const accent = data.accentColor || "primary";
+    const parts = [];
+    parts.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
+    const leftRatio = data.left?.ratio || 50;
+    const rightRatio = data.right?.ratio || 50;
+    parts.push(`<div class="flex h-full">`);
+    if (data.left) {
+        parts.push(buildSplitPanel(data.left, accent, leftRatio));
+    }
+    if (data.right) {
+        parts.push(buildSplitPanel(data.right, accent, rightRatio));
+    }
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

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

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

package/lib/slide/layouts/stats.js

@@ -0,0 +1,23 @@
+import { escapeHtml, c, slideHeader, renderCalloutBar } from "../utils.js";
+export const layoutStats = (data) => {
+    const parts = [slideHeader(data)];
+    const stats = data.stats || [];
+    parts.push(`<div class="flex gap-6 px-12 mt-8 flex-1 items-start">`);
+    stats.forEach((stat) => {
+        const color = stat.color || data.accentColor || "primary";
+        parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-8 text-center">`);
+        parts.push(`  <div class="h-[3px] bg-${c(color)} rounded-full w-12 mx-auto mb-6"></div>`);
+        parts.push(`  <p class="text-[48px] font-bold text-${c(color)} font-body leading-none">${escapeHtml(stat.value)}</p>`);
+        parts.push(`  <p class="text-base text-d-muted font-body mt-3">${escapeHtml(stat.label)}</p>`);
+        if (stat.change) {
+            const changeColor = stat.change.startsWith("+") ? "success" : "danger";
+            parts.push(`  <p class="text-sm font-bold text-${c(changeColor)} font-body mt-2">${escapeHtml(stat.change)}</p>`);
+        }
+        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/table.d.ts

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