@mulmocast/deck 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Satoshi Nakajima
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# @mulmocast/deck
+
+Self-contained deck DSL for MulmoCast.
+
+A `SlideLayout` JSON object describes a single semantic slide (e.g. `stats`, `comparison`, `timeline`, `table`, `columns`, …). `generateSlideHTML()` renders it to a single HTML string styled with Tailwind via CDN. No Puppeteer, no filesystem — pure data → HTML. Works in both Node.js and the browser.
+
+## Install
+
+```bash
+yarn add @mulmocast/deck
+```
+
+## Usage
+
+```ts
+import { generateSlideHTML, type SlideLayout, type SlideTheme } from "@mulmocast/deck";
+
+const slide: SlideLayout = {
+  layout: "stats",
+  title: "Quarterly Highlights",
+  subtitle: "FY2026 Q1",
+  stats: [
+    { value: "+42%", label: "Revenue YoY",       color: "success" },
+    { value: "1.8M", label: "Active Users",      color: "primary" },
+    { value: "4.6",  label: "Avg NPS",           color: "info" },
+    { value: "98%",  label: "Uptime",            color: "accent" },
+  ],
+};
+
+const theme: SlideTheme = {
+  colors: {
+    bg: "FFFBEB", bgCard: "FFFFFF", bgCardAlt: "FEF3C7",
+    text: "1C1917", textMuted: "57534E", textDim: "A8A29E",
+    primary: "EA580C", accent: "D946EF",
+    success: "16A34A", warning: "CA8A04", danger: "DC2626",
+    info: "0284C7", highlight: "E11D48",
+  },
+  fonts: { title: "Georgia", body: "Calibri", mono: "Consolas" },
+};
+
+const html = generateSlideHTML(theme, slide);
+// → self-contained HTML string. Drop into an iframe srcdoc for live preview,
+// or pass to Puppeteer for PNG/PDF rendering (see mulmocast-cli).
+```
+
+## Available layouts
+
+`title` · `bigQuote` · `columns` · `comparison` · `stats` · `table` · `timeline` · `matrix` · `grid` · `split` · `funnel` · `waterfall`
+
+Each layout has its own Zod schema under `slideLayoutSchema` (a discriminated union). See `src/schema.ts` for the full shape.
+
+## Design
+
+- **Data → HTML, no side effects.** Pure functions, easy to test and use anywhere.
+- **Tailwind via CDN.** Themes resolve to CSS variables; no compile step.
+- **Schema-first.** All shapes are validated with [Zod](https://zod.dev), so types are derived (not duplicated).
+- **Browser-safe.** No Node-only APIs. Just import in a Vite/Vue/React app and render into an iframe.
+
+## Consumers
+
+- [`mulmocast`](https://www.npmjs.com/package/mulmocast) — CLI uses `generateSlideHTML()` then snapshots to PNG with Puppeteer.
+- `@mulmocast/deck-web` *(WIP)* — Browser editor with live preview and schema-driven inspector.
+
+## License
+
+MIT

package/lib/blocks.d.ts

@@ -0,0 +1,13 @@
+import type { ContentBlock, TableCellValue } from "./schema.js";
+export declare const resolveCellColor: (cellObj: {
+    color?: string;
+}, isRowHeader: boolean) => string;
+export declare const renderBadge: (text: string, color: string) => string;
+export declare const renderCellValue: (cell: TableCellValue, isRowHeader: boolean) => string;
+export declare const renderTableCore: (headers: string[] | undefined, rows: TableCellValue[][], rowHeaders?: boolean, striped?: boolean) => string;
+/** 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/blocks.js

@@ -0,0 +1,251 @@
+import { escapeHtml, c, generateSlideId, renderInlineMarkup, blockTitle, resolveChangeColor, resolveAccent } from "./utils.js";
+// ─── Table cell rendering (shared with layouts/table.ts) ───
+export const resolveCellColor = (cellObj, isRowHeader) => {
+    if (cellObj.color)
+        return `text-${c(cellObj.color)}`;
+    if (isRowHeader)
+        return "text-d-text";
+    return "text-d-muted";
+};
+export const renderBadge = (text, color) => {
+    return `<span class="px-2 py-0.5 rounded-full text-xs font-bold text-white bg-${c(color)}">${renderInlineMarkup(text)}</span>`;
+};
+export const renderCellValue = (cell, isRowHeader) => {
+    const cellObj = typeof cell === "object" && cell !== null ? cell : { text: String(cell) };
+    if (cellObj.badge && cellObj.color) {
+        return `<td class="px-4 py-3 text-sm font-body border-b border-d-alt">${renderBadge(cellObj.text, cellObj.color)}</td>`;
+    }
+    const colorCls = resolveCellColor(cellObj, isRowHeader);
+    const boldCls = cellObj.bold || isRowHeader ? "font-bold" : "";
+    return `<td class="px-4 py-3 text-sm ${colorCls} ${boldCls} font-body border-b border-d-alt">${renderInlineMarkup(cellObj.text)}</td>`;
+};
+export const renderTableCore = (headers, rows, rowHeaders, striped) => {
+    const parts = [];
+    const isStriped = striped !== false;
+    parts.push(`<table class="w-full border-collapse">`);
+    if (headers && headers.length > 0) {
+        parts.push(`<thead>`);
+        parts.push(`<tr>`);
+        headers.forEach((h) => {
+            parts.push(`  <th class="text-left px-4 py-3 text-sm font-bold text-d-text font-body border-b-2 border-d-alt">${renderInlineMarkup(h)}</th>`);
+        });
+        parts.push(`</tr>`);
+        parts.push(`</thead>`);
+    }
+    parts.push(`<tbody>`);
+    rows.forEach((row, ri) => {
+        const bgCls = isStriped && ri % 2 === 1 ? "bg-d-alt/30" : "";
+        parts.push(`<tr class="${bgCls}">`);
+        (row || []).forEach((cell, ci) => {
+            const isRowHeader = ci === 0 && !!rowHeaders;
+            parts.push(`  ${renderCellValue(cell, isRowHeader)}`);
+        });
+        parts.push(`</tr>`);
+    });
+    parts.push(`</tbody>`);
+    parts.push(`</table>`);
+    return parts.join("\n");
+};
+const renderTableBlock = (block) => {
+    return `<div class="overflow-auto">${blockTitle(block.title)}${renderTableCore(block.headers, block.rows, block.rowHeaders, block.striped)}</div>`;
+};
+/** 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);
+        case "section":
+            return renderSection(block);
+        case "table":
+            return renderTableBlock(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">${renderInlineMarkup(block.value)}</p>`;
+};
+/** Extract text from a bullet item (string or object) */
+const bulletItemText = (item) => {
+    return typeof item === "string" ? item : item.text;
+};
+/** Render sub-bullets for a nested bullet item */
+const renderSubBullets = (item) => {
+    if (typeof item === "string" || !item.items || item.items.length === 0)
+        return "";
+    const subs = item.items
+        .map((sub) => {
+        return `    <li class="flex gap-2 ml-6 text-[14px]"><span class="text-d-dim shrink-0">\u25E6</span><span>${renderInlineMarkup(bulletItemText(sub))}</span></li>`;
+    })
+        .join("\n");
+    return `\n${subs}`;
+};
+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");
+        const text = bulletItemText(item);
+        const subHtml = renderSubBullets(item);
+        return `  <li class="flex flex-col gap-1"><div class="flex gap-2"><span class="text-d-dim shrink-0">${marker}</span><span>${renderInlineMarkup(text)}</span></div>${subHtml}</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")}">${renderInlineMarkup(block.label)}:</span> <span class="text-d-muted">${renderInlineMarkup(block.text)}</span>`
+        : `<span class="${textCls}">${renderInlineMarkup(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(resolveAccent(block.color))}">${renderInlineMarkup(block.value)}</p>`);
+    lines.push(`  <p class="text-sm text-d-dim mt-1">${renderInlineMarkup(block.label)}</p>`);
+    if (block.change) {
+        lines.push(`  <p class="text-sm font-bold text-${c(resolveChangeColor(block.change))} 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);
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${blockTitle(block.title)}
+  <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");
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${blockTitle(block.title)}
+  <div class="flex-1 min-h-0 flex justify-center items-center">
+    <div id="${mermaidId}" class="mermaid">${escapeHtml(block.code)}</div>
+  </div>
+</div>`;
+};
+/** Render the text + content blocks inside a section (shared by sidebar/default variants) */
+const renderSectionContent = (block) => {
+    const parts = [];
+    if (block.text) {
+        parts.push(`<p class="text-[15px] text-d-muted font-body">${renderInlineMarkup(block.text)}</p>`);
+    }
+    if (block.content) {
+        parts.push(block.content.map(renderContentBlock).join("\n"));
+    }
+    return parts.join("\n");
+};
+const renderSectionSidebar = (block) => {
+    const color = resolveAccent(block.color);
+    const chars = block.label
+        .split("")
+        .map((ch) => escapeHtml(ch))
+        .join("<br>");
+    const sidebar = `<div class="w-[48px] shrink-0 rounded-l bg-${c(color)} flex items-center justify-center"><span class="text-sm font-bold text-white font-body leading-snug text-center">${chars}</span></div>`;
+    return `<div class="flex rounded overflow-hidden bg-d-card">
+  ${sidebar}
+  <div class="flex-1 space-y-2 p-3">${renderSectionContent(block)}</div>
+</div>`;
+};
+const renderSectionDefault = (block) => {
+    const color = resolveAccent(block.color);
+    const badge = `<span class="min-w-[80px] px-3 py-1 rounded text-sm font-bold text-white bg-${c(color)} shrink-0">${renderInlineMarkup(block.label)}</span>`;
+    return `<div class="flex gap-4 items-start">
+  ${badge}
+  <div class="flex-1 space-y-2">${renderSectionContent(block)}</div>
+</div>`;
+};
+const renderSection = (block) => {
+    return block.sidebar ? renderSectionSidebar(block) : renderSectionDefault(block);
+};

package/lib/index.d.ts

@@ -0,0 +1,7 @@
+export { generateSlideHTML } from "./render.js";
+export type { ResolvedBranding } from "./render.js";
+export { renderSlideContent } from "./layouts/index.js";
+export { renderContentBlock, renderContentBlocks } from "./blocks.js";
+export { escapeHtml } from "./utils.js";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, slideBrandingLogoSchema, slideBrandingSchema, } 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, SlideBrandingLogo, SlideBranding, } from "./schema.js";

package/lib/index.js

@@ -0,0 +1,8 @@
+// Public API for @mulmocast/slide
+// Self-contained slide DSL: SlideLayout JSON → Tailwind-based HTML string.
+export { generateSlideHTML } from "./render.js";
+export { renderSlideContent } from "./layouts/index.js";
+export { renderContentBlock, renderContentBlocks } from "./blocks.js";
+export { escapeHtml } from "./utils.js";
+// Schemas
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, slideBrandingLogoSchema, slideBrandingSchema, } from "./schema.js";

package/lib/layouts/big_quote.d.ts

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

package/lib/layouts/big_quote.js

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

package/lib/layouts/columns.d.ts

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

package/lib/layouts/columns.js

@@ -0,0 +1,53 @@
+import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
+import { renderCardContentBlocks } from "../blocks.js";
+const buildColumnCard = (col) => {
+    const accent = resolveAccent(col.accentColor);
+    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">${renderInlineMarkup(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">${renderInlineMarkup(col.title)}</h3>`);
+        inner.push(`</div>`);
+    }
+    else {
+        if (col.label) {
+            inner.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(col.label)}</p>`);
+        }
+        inner.push(`<h3 class="text-2xl font-title font-bold text-d-text mt-1">${renderInlineMarkup(col.title)}</h3>`);
+    }
+    if (col.content) {
+        const centerCls = col.icon ? "text-center" : "";
+        inner.push(`<div class="mt-4 space-y-4 flex-1 min-h-0 overflow-auto flex flex-col ${centerCls}">`);
+        inner.push(renderCardContentBlocks(col.content));
+        inner.push(`</div>`);
+    }
+    if (col.footer) {
+        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${renderInlineMarkup(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-start">`);
+    parts.push(colElements.join("\n"));
+    parts.push(`</div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    if (data.bottomText) {
+        parts.push(`<p class="text-center text-sm text-d-dim font-body pb-4">${renderInlineMarkup(data.bottomText)}</p>`);
+    }
+    return parts.join("\n");
+};

package/lib/layouts/comparison.d.ts

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

package/lib/layouts/comparison.js

@@ -0,0 +1,25 @@
+import { renderInlineMarkup, c, cardWrap, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
+import { renderContentBlocks } from "../blocks.js";
+const buildPanel = (panel) => {
+    const accent = resolveAccent(panel.accentColor);
+    const inner = [];
+    inner.push(`<h3 class="text-xl font-bold text-${c(accent)} font-body">${renderInlineMarkup(panel.title)}</h3>`);
+    if (panel.content) {
+        inner.push(`<div class="mt-5 space-y-4 flex-1 min-h-0 overflow-auto flex flex-col">`);
+        inner.push(renderContentBlocks(panel.content));
+        inner.push(`</div>`);
+    }
+    if (panel.footer) {
+        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${renderInlineMarkup(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-start">`);
+    parts.push(buildPanel(data.left));
+    parts.push(buildPanel(data.right));
+    parts.push(`</div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    return parts.join("\n");
+};

package/lib/layouts/funnel.d.ts

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

package/lib/layouts/funnel.js

@@ -0,0 +1,25 @@
+import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor } 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 = resolveItemColor(stage.color, data.accentColor);
+        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">${renderInlineMarkup(stage.label)}</span>`);
+        if (stage.description) {
+            parts.push(`    <span class="text-sm text-white/70 font-body">${renderInlineMarkup(stage.description)}</span>`);
+        }
+        parts.push(`  </div>`);
+        if (stage.value) {
+            parts.push(`  <span class="text-lg font-bold text-white font-body">${renderInlineMarkup(stage.value)}</span>`);
+        }
+        parts.push(`</div>`);
+    });
+    parts.push(`</div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    return parts.join("\n");
+};

package/lib/layouts/grid.d.ts

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

package/lib/layouts/grid.js

@@ -0,0 +1,38 @@
+import { renderInlineMarkup, cardWrap, numBadge, iconSquare, slideHeader, resolveAccent } from "../utils.js";
+import { renderCardContentBlocks } from "../blocks.js";
+export const layoutGrid = (data) => {
+    const nCols = data.gridColumns || 3;
+    const parts = [slideHeader(data)];
+    parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-center">`);
+    (data.items || []).forEach((item) => {
+        const itemAccent = resolveAccent(item.accentColor);
+        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">${renderInlineMarkup(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">${renderInlineMarkup(item.title)}</h3>`);
+            inner.push(`</div>`);
+        }
+        else {
+            inner.push(`<h3 class="text-lg font-bold text-d-text font-body">${renderInlineMarkup(item.title)}</h3>`);
+        }
+        if (item.description) {
+            inner.push(`<p class="text-sm text-d-muted font-body mt-3">${renderInlineMarkup(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">${renderInlineMarkup(data.footer)}</p>`);
+    }
+    return parts.join("\n");
+};

package/lib/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/layouts/index.js

@@ -0,0 +1,46 @@
+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 { layoutWaterfall } from "./waterfall.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);
+        case "waterfall":
+            return layoutWaterfall(slide);
+        default: {
+            const _exhaustive = slide;
+            return `<p class="text-white p-8">Unknown layout: ${escapeHtml(String(_exhaustive.layout))}</p>`;
+        }
+    }
+};

package/lib/layouts/matrix.d.ts

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