mulmocast 2.2.4 → 2.2.5

package/lib/cli/commands/tool/info/builder.js

@@ -2,7 +2,7 @@ export const builder = (yargs) => yargs
     .positional("category", {
     describe: "Category to show info for",
     type: "string",
-    choices: ["styles", "bgm", "templates", "voices", "images", "movies", "llm"],
+    choices: ["styles", "bgm", "templates", "voices", "images", "movies", "llm", "themes"],
 })
     .option("format", {
     alias: "F",

package/lib/cli/commands/tool/info/handler.js

@@ -2,6 +2,7 @@
 import { getMarkdownStyleNames, getMarkdownCategories, getMarkdownStylesByCategory } from "../../../../data/markdownStyles.js";
 import { bgmAssets } from "../../../../data/bgmAssets.js";
 import { templateDataSet } from "../../../../data/templateDataSet.js";
+import { slideThemes } from "../../../../data/slideThemes.js";
 import { provider2TTSAgent, provider2ImageAgent, provider2MovieAgent, provider2LLMAgent } from "../../../../types/provider2agent.js";
 import YAML from "yaml";
 const formatOutput = (data, format) => {
@@ -78,6 +79,9 @@ const getLlmInfo = () => {
     }
     return { llmProviders: result };
 };
+const getThemesInfo = () => {
+    return { themes: slideThemes, total: Object.keys(slideThemes).length };
+};
 const printStylesText = () => {
     const categories = getMarkdownCategories();
     console.log("\n📎 Markdown Styles (100 styles in 10 categories)\n");
@@ -155,6 +159,17 @@ const printLlmText = () => {
         console.log(`    Models: ${config.models.join(", ")}\n`);
     }
 };
+const printThemesText = () => {
+    const themeEntries = Object.entries(slideThemes);
+    console.log(`\n🎨 Slide Themes (${themeEntries.length} themes)\n`);
+    console.log("Usage: Set 'slideParams.theme' in your script\n");
+    for (const [name, theme] of themeEntries) {
+        const { bg, primary, accent } = theme.colors;
+        const { title, body, mono } = theme.fonts;
+        console.log(`  ${name.padEnd(10)} - bg: ${bg}, primary: ${primary}, accent: ${accent} | fonts: ${title}/${body}/${mono}`);
+    }
+    console.log("");
+};
 const printAllCategories = () => {
     console.log("\n📚 Available Info Categories\n");
     console.log("  Usage: mulmo tool info <category> [--format json|yaml]\n");
@@ -165,9 +180,10 @@ const printAllCategories = () => {
     console.log("    voices     - TTS providers and voice options");
     console.log("    images     - Image generation providers and models");
     console.log("    movies     - Movie generation providers and models");
-    console.log("    llm        - LLM providers and models\n");
+    console.log("    llm        - LLM providers and models");
+    console.log("    themes     - Slide themes and color palettes\n");
 };
-const validCategories = ["styles", "bgm", "templates", "voices", "images", "movies", "llm"];
+const validCategories = ["styles", "bgm", "templates", "voices", "images", "movies", "llm", "themes"];
 const isValidCategory = (category) => {
     return validCategories.includes(category);
 };
@@ -199,6 +215,7 @@ export const handler = (argv) => {
         images: getImagesInfo,
         movies: getMoviesInfo,
         llm: getLlmInfo,
+        themes: getThemesInfo,
     };
     const textPrinters = {
         styles: printStylesText,
@@ -208,6 +225,7 @@ export const handler = (argv) => {
         images: printImagesText,
         movies: printMoviesText,
         llm: printLlmText,
+        themes: printThemesText,
     };
     if (format === "text") {
         textPrinters[category]();

package/lib/cli/commands/tool/info/index.d.ts

@@ -1,4 +1,4 @@
 export declare const command = "info [category]";
-export declare const desc = "Show available options (styles, bgm, templates, voices, images, movies, llm)";
+export declare const desc = "Show available options (styles, bgm, templates, voices, images, movies, llm, themes)";
 export { builder } from "./builder.js";
 export { handler } from "./handler.js";

package/lib/cli/commands/tool/info/index.js

@@ -1,4 +1,4 @@
 export const command = "info [category]";
-export const desc = "Show available options (styles, bgm, templates, voices, images, movies, llm)";
+export const desc = "Show available options (styles, bgm, templates, voices, images, movies, llm, themes)";
 export { builder } from "./builder.js";
 export { handler } from "./handler.js";

package/lib/slide/blocks.js

@@ -1,4 +1,4 @@
-import { escapeHtml, c, generateSlideId, renderInlineMarkup } from "./utils.js";
+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)
@@ -47,8 +47,7 @@ export const renderTableCore = (headers, rows, rowHeaders, striped) => {
     return parts.join("\n");
 };
 const renderTableBlock = (block) => {
-    const titleHtml = block.title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${renderInlineMarkup(block.title)}</p>` : "";
-    return `<div class="overflow-auto">${titleHtml}${renderTableCore(block.headers, block.rows, block.rowHeaders, block.striped)}</div>`;
+    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) => {
@@ -167,11 +166,10 @@ const renderCallout = (block) => {
 const renderMetric = (block) => {
     const lines = [];
     lines.push(`<div class="text-center">`);
-    lines.push(`  <p class="text-4xl font-bold text-${c(block.color || "primary")}">${renderInlineMarkup(block.value)}</p>`);
+    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) {
-        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(`  <p class="text-sm font-bold text-${c(resolveChangeColor(block.change))} mt-1">${escapeHtml(block.change)}</p>`);
     }
     lines.push(`</div>`);
     return lines.join("\n");
@@ -191,9 +189,8 @@ const renderImageRefPlaceholder = (block) => {
 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">${renderInlineMarkup(block.title)}</p>` : "";
     return `<div class="flex-1 min-h-0 flex flex-col">
-  ${titleHtml}
+  ${blockTitle(block.title)}
   <div class="flex-1 min-h-0 relative">
     <canvas id="${chartId}" data-chart-ready="false"></canvas>
   </div>
@@ -211,46 +208,42 @@ const renderChart = (block) => {
 };
 const renderMermaid = (block) => {
     const mermaidId = generateSlideId("mermaid");
-    const titleHtml = block.title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${renderInlineMarkup(block.title)}</p>` : "";
     return `<div class="flex-1 min-h-0 flex flex-col">
-  ${titleHtml}
+  ${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 = block.color || "primary";
+    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>`;
-    const contentParts = [];
-    if (block.text) {
-        contentParts.push(`<p class="text-[15px] text-d-muted font-body">${renderInlineMarkup(block.text)}</p>`);
-    }
-    if (block.content) {
-        contentParts.push(block.content.map(renderContentBlock).join("\n"));
-    }
     return `<div class="flex rounded overflow-hidden bg-d-card">
   ${sidebar}
-  <div class="flex-1 space-y-2 p-3">${contentParts.join("\n")}</div>
+  <div class="flex-1 space-y-2 p-3">${renderSectionContent(block)}</div>
 </div>`;
 };
 const renderSectionDefault = (block) => {
-    const color = block.color || "primary";
+    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>`;
-    const contentParts = [];
-    if (block.text) {
-        contentParts.push(`<p class="text-[15px] text-d-muted font-body">${renderInlineMarkup(block.text)}</p>`);
-    }
-    if (block.content) {
-        contentParts.push(block.content.map(renderContentBlock).join("\n"));
-    }
     return `<div class="flex gap-4 items-start">
   ${badge}
-  <div class="flex-1 space-y-2">${contentParts.join("\n")}</div>
+  <div class="flex-1 space-y-2">${renderSectionContent(block)}</div>
 </div>`;
 };
 const renderSection = (block) => {

package/lib/slide/layouts/big_quote.js

@@ -1,13 +1,13 @@
-import { renderInlineMarkup, c } from "../utils.js";
+import { renderInlineMarkup, accentBar, resolveAccent } from "../utils.js";
 export const layoutBigQuote = (data) => {
-    const accent = data.accentColor || "primary";
+    const accent = resolveAccent(data.accentColor);
     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(`  ${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(`  <div class="h-[3px] w-24 bg-${c(accent)} mt-8 mb-6"></div>`);
+    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>`);
     }

package/lib/slide/layouts/columns.js

@@ -1,7 +1,7 @@
-import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
 import { renderCardContentBlocks } from "../blocks.js";
 const buildColumnCard = (col) => {
-    const accent = col.accentColor || "primary";
+    const accent = resolveAccent(col.accentColor);
     const inner = [];
     if (col.icon) {
         inner.push(`<div class="flex flex-col items-center mb-3">`);
@@ -45,9 +45,7 @@ export const layoutColumns = (data) => {
     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>`);
-    if (data.callout) {
-        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</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>`);
     }

package/lib/slide/layouts/comparison.js

@@ -1,7 +1,7 @@
-import { renderInlineMarkup, c, cardWrap, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 const buildPanel = (panel) => {
-    const accent = panel.accentColor || "primary";
+    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) {
@@ -20,8 +20,6 @@ export const layoutComparison = (data) => {
     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>`);
-    }
+    parts.push(renderOptionalCallout(data.callout));
     return parts.join("\n");
 };

package/lib/slide/layouts/funnel.js

@@ -1,11 +1,11 @@
-import { renderInlineMarkup, c, slideHeader, renderCalloutBar } from "../utils.js";
+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 = stage.color || data.accentColor || "primary";
+        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">`);
@@ -20,8 +20,6 @@ export const layoutFunnel = (data) => {
         parts.push(`</div>`);
     });
     parts.push(`</div>`);
-    if (data.callout) {
-        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
-    }
+    parts.push(renderOptionalCallout(data.callout));
     return parts.join("\n");
 };

package/lib/slide/layouts/grid.js

@@ -1,16 +1,11 @@
-import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare } from "../utils.js";
+import { renderInlineMarkup, cardWrap, numBadge, iconSquare, slideHeader, resolveAccent } 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">${renderInlineMarkup(data.title)}</h2>`);
-    parts.push(`</div>`);
+    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 = item.accentColor || "primary";
+        const itemAccent = resolveAccent(item.accentColor);
         const inner = [];
         if (item.icon) {
             inner.push(`<div class="flex flex-col items-center mb-2">`);

package/lib/slide/layouts/matrix.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, cardWrap, slideHeader } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, slideHeader, resolveAccent } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 export const layoutMatrix = (data) => {
     const parts = [slideHeader(data)];
@@ -21,7 +21,7 @@ export const layoutMatrix = (data) => {
         Array.from({ length: cols }).forEach((_col, ci) => {
             const idx = r * cols + ci;
             const cell = cells[idx] || { label: "" };
-            const accent = cell.accentColor || "primary";
+            const accent = resolveAccent(cell.accentColor);
             const inner = [];
             inner.push(`<h3 class="text-lg font-bold text-${c(accent)} font-body">${renderInlineMarkup(cell.label)}</h3>`);
             if (cell.items) {

package/lib/slide/layouts/split.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c } from "../utils.js";
+import { renderInlineMarkup, c, accentBar, resolveAccent } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 const resolveValign = (valign) => {
     if (valign === "top")
@@ -34,9 +34,9 @@ const buildSplitPanel = (panel, fallbackAccent, ratio) => {
     return lines.join("\n");
 };
 export const layoutSplit = (data) => {
-    const accent = data.accentColor || "primary";
+    const accent = resolveAccent(data.accentColor);
     const parts = [];
-    parts.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
+    parts.push(accentBar(accent));
     const leftRatio = data.left?.ratio || 50;
     const rightRatio = data.right?.ratio || 50;
     parts.push(`<div class="flex h-full">`);

package/lib/slide/layouts/stats.js

@@ -1,36 +1,23 @@
-import { renderInlineMarkup, c, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, c, resolveItemColor, resolveChangeColor, centeredSlideHeader, renderOptionalCallout } from "../utils.js";
 export const layoutStats = (data) => {
-    const accent = data.accentColor || "primary";
     const stats = data.stats || [];
     const parts = [];
-    parts.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
-    parts.push(`<div class="flex-1 flex flex-col justify-center px-12 min-h-0">`);
-    // Header inside centering wrapper
-    if (data.stepLabel) {
-        parts.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
-    }
-    parts.push(`<h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
-    if (data.subtitle) {
-        parts.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
-    }
+    parts.push(centeredSlideHeader(data));
     // Stats cards
     parts.push(`<div class="flex gap-6 mt-10">`);
     stats.forEach((stat) => {
-        const color = stat.color || data.accentColor || "primary";
+        const color = resolveItemColor(stat.color, data.accentColor);
         parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-10 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-[52px] font-bold text-${c(color)} font-body leading-none">${renderInlineMarkup(stat.value)}</p>`);
         parts.push(`  <p class="text-lg text-d-muted font-body mt-4">${renderInlineMarkup(stat.label)}</p>`);
         if (stat.change) {
-            const changeColor = /\+/.test(stat.change) ? "success" : "danger";
-            parts.push(`  <p class="text-base font-bold text-${c(changeColor)} font-body mt-3">${renderInlineMarkup(stat.change)}</p>`);
+            parts.push(`  <p class="text-base font-bold text-${c(resolveChangeColor(stat.change))} font-body mt-3">${renderInlineMarkup(stat.change)}</p>`);
         }
         parts.push(`</div>`);
     });
     parts.push(`</div>`);
     parts.push(`</div>`);
-    if (data.callout) {
-        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
-    }
+    parts.push(renderOptionalCallout(data.callout));
     return parts.join("\n");
 };

package/lib/slide/layouts/table.js

@@ -1,12 +1,10 @@
-import { slideHeader, renderCalloutBar } from "../utils.js";
+import { slideHeader, renderOptionalCallout } from "../utils.js";
 import { renderTableCore } from "../blocks.js";
 export const layoutTable = (data) => {
     const parts = [slideHeader(data)];
     parts.push(`<div class="px-12 mt-5 flex-1 overflow-auto">`);
     parts.push(renderTableCore(data.headers, data.rows, data.rowHeaders, data.striped));
     parts.push(`</div>`);
-    if (data.callout) {
-        parts.push(`<div class="mt-auto pb-4">${renderCalloutBar(data.callout)}</div>`);
-    }
+    parts.push(renderOptionalCallout(data.callout));
     return parts.join("\n");
 };

package/lib/slide/layouts/timeline.js

@@ -1,23 +1,13 @@
-import { renderInlineMarkup, c } from "../utils.js";
+import { renderInlineMarkup, c, resolveItemColor, centeredSlideHeader } from "../utils.js";
 export const layoutTimeline = (data) => {
-    const accent = data.accentColor || "primary";
     const parts = [];
     const items = data.items || [];
-    parts.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
-    parts.push(`<div class="flex-1 flex flex-col justify-center px-12 min-h-0">`);
-    // Header inside centering wrapper
-    if (data.stepLabel) {
-        parts.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
-    }
-    parts.push(`<h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
-    if (data.subtitle) {
-        parts.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
-    }
+    parts.push(centeredSlideHeader(data));
     // Timeline items
     parts.push(`<div class="flex items-start mt-10 relative">`);
     parts.push(`<div class="absolute left-4 right-4 top-[52px] h-[2px] bg-d-alt"></div>`);
     items.forEach((item) => {
-        const color = item.color || data.accentColor || "primary";
+        const color = resolveItemColor(item.color, data.accentColor);
         const dotBorder = item.done ? `bg-${c(color)}` : `bg-d-alt`;
         const dotInner = item.done ? "bg-d-text" : `bg-${c(color)}`;
         parts.push(`<div class="flex-1 flex flex-col items-center text-center relative z-10">`);

package/lib/slide/layouts/title.js

@@ -1,7 +1,7 @@
-import { renderInlineMarkup } from "../utils.js";
+import { renderInlineMarkup, accentBar } from "../utils.js";
 export const layoutTitle = (data) => {
     return [
-        `<div class="h-[3px] bg-d-primary"></div>`,
+        accentBar("primary"),
         `<div class="absolute -top-20 -right-8 w-[360px] h-[360px] rounded-full bg-d-primary opacity-10"></div>`,
         `<div class="absolute -bottom-12 -left-16 w-[280px] h-[280px] rounded-full bg-d-accent opacity-10"></div>`,
         `<div class="flex flex-col justify-center h-full px-16 relative z-10">`,
@@ -12,7 +12,7 @@ export const layoutTitle = (data) => {
             ? `  <div class="bg-d-card px-4 py-2 mt-6 inline-block rounded"><p class="text-sm text-d-dim font-body">${renderInlineMarkup(data.note)}</p></div>`
             : "",
         `</div>`,
-        `<div class="absolute bottom-0 left-0 right-0 h-[3px] bg-d-accent"></div>`,
+        accentBar("accent", "absolute bottom-0 left-0 right-0"),
     ]
         .filter(Boolean)
         .join("\n");

package/lib/slide/utils.d.ts

@@ -1,4 +1,4 @@
-import type { SlideTheme, SlideLayout } from "./schema.js";
+import type { SlideTheme, SlideLayout, CalloutBar } from "./schema.js";
 /** Escape HTML special characters */
 export declare const escapeHtml: (s: string) => string;
 /** Escape HTML and convert newlines to <br> */
@@ -13,6 +13,18 @@ export declare const renderInlineMarkup: (s: string) => string;
 export declare const sanitizeHex: (s: string) => string;
 /** Accent color key → Tailwind class segment: "primary" → "d-primary" */
 export declare const c: (key: string) => string;
+/** Resolve accent color key with "primary" as fallback */
+export declare const resolveAccent: (color: string | undefined) => string;
+/** Resolve item-level color with slide-level fallback then "primary" */
+export declare const resolveItemColor: (itemColor: string | undefined, slideAccent: string | undefined) => string;
+/** Render a horizontal accent bar (3px full-width). Pass extraClass for width/margin variants. */
+export declare const accentBar: (colorKey: string, extraClass?: string) => string;
+/** Render an optional block title (chart, mermaid, table) */
+export declare const blockTitle: (title: string | undefined) => string;
+/** Resolve change indicator color: "success" for positive (+), "danger" for negative */
+export declare const resolveChangeColor: (change: string) => string;
+/** Render the optional callout bar at the bottom of a slide, or empty string */
+export declare const renderOptionalCallout: (callout: CalloutBar | undefined) => string;
 /** Build the Tailwind config JSON string for theme colors and fonts */
 export declare const buildTailwindConfig: (theme: SlideTheme) => string;
 /** Render a numbered circle badge */
@@ -29,6 +41,13 @@ export declare const renderCalloutBar: (obj: {
     align?: string;
     leftBar?: boolean;
 }) => string;
+/** Render header text elements (stepLabel + title + subtitle) without wrapping div */
+export declare const renderHeaderText: (data: {
+    accentColor?: string;
+    stepLabel?: string;
+    title: string;
+    subtitle?: string;
+}) => string;
 /** Render the common slide header (accent bar + title + subtitle) */
 export declare const slideHeader: (data: {
     accentColor?: string;
@@ -36,6 +55,13 @@ export declare const slideHeader: (data: {
     title: string;
     subtitle?: string;
 }) => string;
+/** Render accent bar + vertically-centered wrapper with header text (used by stats, timeline) */
+export declare const centeredSlideHeader: (data: {
+    accentColor?: string;
+    stepLabel?: string;
+    title: string;
+    subtitle?: string;
+}) => string;
 /** Generate a unique ID with the given prefix (e.g. "chart-0", "mermaid-1") */
 export declare const generateSlideId: (prefix: string) => string;
 /** Reset the ID counter (for testing) */

package/lib/slide/utils.js

@@ -45,6 +45,27 @@ export const sanitizeHex = (s) => {
 export const c = (key) => {
     return `d-${sanitizeCssClass(key)}`;
 };
+// ═══════════════════════════════════════════════════════════
+// Shared micro-helpers for HTML generation
+// ═══════════════════════════════════════════════════════════
+/** Default accent color used when none is specified */
+const DEFAULT_ACCENT = "primary";
+/** Resolve accent color key with "primary" as fallback */
+export const resolveAccent = (color) => color || DEFAULT_ACCENT;
+/** Resolve item-level color with slide-level fallback then "primary" */
+export const resolveItemColor = (itemColor, slideAccent) => itemColor || slideAccent || DEFAULT_ACCENT;
+/** Render a horizontal accent bar (3px full-width). Pass extraClass for width/margin variants. */
+export const accentBar = (colorKey, extraClass) => `<div class="h-[3px] bg-${c(colorKey)} shrink-0 ${extraClass || ""}"></div>`;
+/** Render an optional block title (chart, mermaid, table) */
+export const blockTitle = (title) => title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${renderInlineMarkup(title)}</p>` : "";
+/** Resolve change indicator color: "success" for positive (+), "danger" for negative */
+export const resolveChangeColor = (change) => (/\+/.test(change) ? "success" : "danger");
+/** Render the optional callout bar at the bottom of a slide, or empty string */
+export const renderOptionalCallout = (callout) => {
+    if (!callout)
+        return "";
+    return `<div class="mt-auto pb-4">${renderCalloutBar(callout)}</div>`;
+};
 const colorKeyMap = {
     bg: "bg",
     bgCard: "card",
@@ -97,7 +118,7 @@ export const iconSquare = (icon, colorKey) => {
 /** Render a card wrapper with accent top bar */
 export const cardWrap = (accentColor, innerHtml, extraClass) => {
     return `<div class="bg-d-card rounded-lg shadow-lg overflow-hidden flex flex-col min-h-0 ${sanitizeCssClass(extraClass || "")}">
-  <div class="h-[3px] bg-${c(accentColor)} shrink-0"></div>
+  ${accentBar(accentColor)}
   <div class="p-5 flex flex-col flex-1 min-h-0 overflow-hidden">
 ${innerHtml}
   </div>
@@ -116,22 +137,29 @@ export const renderCalloutBar = (obj) => {
   <div class="px-4 py-3 text-sm font-body flex-1">${inner}</div>
 </div>`;
 };
-/** Render the common slide header (accent bar + title + subtitle) */
-export const slideHeader = (data) => {
-    const accent = data.accentColor || "primary";
+/** Render header text elements (stepLabel + title + subtitle) without wrapping div */
+export const renderHeaderText = (data) => {
+    const accent = resolveAccent(data.accentColor);
     const lines = [];
-    lines.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
-    lines.push(`<div class="px-12 pt-5 shrink-0">`);
     if (data.stepLabel) {
-        lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
+        lines.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
     }
-    lines.push(`  <h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
+    lines.push(`<h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
     if (data.subtitle) {
-        lines.push(`  <p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
+        lines.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
     }
-    lines.push(`</div>`);
     return lines.join("\n");
 };
+/** Render the common slide header (accent bar + title + subtitle) */
+export const slideHeader = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    return [accentBar(accent), `<div class="px-12 pt-5 shrink-0">`, renderHeaderText(data), `</div>`].join("\n");
+};
+/** Render accent bar + vertically-centered wrapper with header text (used by stats, timeline) */
+export const centeredSlideHeader = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    return [accentBar(accent), `<div class="flex-1 flex flex-col justify-center px-12 min-h-0">`, renderHeaderText(data)].join("\n");
+};
 // ═══════════════════════════════════════════════════════════
 // Counter-based ID generation (unique within a single slide)
 // ═══════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.2.4",
+  "version": "2.2.5",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",