mulmocast 2.2.4 → 2.2.6

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/index.d.ts

@@ -1,5 +1,6 @@
 export { generateSlideHTML } from "./render.js";
+export type { ResolvedBranding } 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";
+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/slide/index.js

@@ -4,4 +4,4 @@ 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";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, slideBrandingLogoSchema, slideBrandingSchema, } from "./schema.js";

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/render.d.ts

@@ -1,3 +1,17 @@
 import type { SlideTheme, SlideLayout } from "./schema.js";
+/** Pre-resolved branding data (all sources converted to data URLs) */
+export type ResolvedBranding = {
+    logo?: {
+        dataUrl: string;
+        position: string;
+        width: number;
+    };
+    backgroundImage?: {
+        dataUrl: string;
+        size: string;
+        opacity: number;
+        bgOpacity?: number;
+    };
+};
 /** Generate a complete HTML document for a single slide */
-export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout, reference?: string) => string;
+export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout, reference?: string, branding?: ResolvedBranding) => string;

package/lib/slide/render.js

@@ -21,18 +21,56 @@ const buildCdnScripts = (theme, slide) => {
     }
     return scripts.join("\n");
 };
+/** Map branding logo position to Tailwind CSS classes */
+const logoPositionClasses = {
+    "top-left": "top-5 left-6",
+    "top-right": "top-5 right-6",
+    "bottom-left": "bottom-5 left-6",
+    "bottom-right": "bottom-5 right-6",
+};
+/**
+ * Render branding background layers.
+ * - Without bgOpacity: image overlaid on slide bg at given opacity
+ * - With bgOpacity: image at full opacity, then slide bg color as semi-transparent overlay
+ */
+const renderBrandingBackground = (branding, bgHex) => {
+    if (!branding.backgroundImage)
+        return "";
+    const { dataUrl, size, opacity, bgOpacity } = branding.backgroundImage;
+    const bgSize = size === "fill" ? "100% 100%" : size;
+    if (bgOpacity !== undefined) {
+        const parts = [];
+        parts.push(`<div class="absolute inset-0 z-0" style="background-image:url('${dataUrl}');background-size:${bgSize};background-position:center;background-repeat:no-repeat;opacity:${opacity}"></div>`);
+        parts.push(`<div class="absolute inset-0 z-0" style="background-color:#${bgHex};opacity:${bgOpacity}"></div>`);
+        return parts.join("\n");
+    }
+    return `<div class="absolute inset-0 z-0" style="background-image:url('${dataUrl}');background-size:${bgSize};background-position:center;background-repeat:no-repeat;opacity:${opacity}"></div>`;
+};
+/** Render branding logo element */
+const renderBrandingLogo = (branding) => {
+    if (!branding.logo)
+        return "";
+    const { dataUrl, position, width } = branding.logo;
+    const posClasses = logoPositionClasses[position] ?? logoPositionClasses["top-right"];
+    return `<img class="absolute ${posClasses} z-10" src="${dataUrl}" width="${width}" alt="" style="pointer-events:none">`;
+};
 /** Generate a complete HTML document for a single slide */
-export const generateSlideHTML = (theme, slide, reference) => {
+export const generateSlideHTML = (theme, slide, reference, branding) => {
     const content = renderSlideContent(slide);
     const twConfig = buildTailwindConfig(theme);
     const cdnScripts = buildCdnScripts(theme, slide);
     const slideStyle = slide.style;
-    const bgCls = slideStyle?.bgColor ? "" : "bg-d-bg";
-    const inlineStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
+    const hasBgOpacity = branding?.backgroundImage?.bgOpacity !== undefined;
+    const bgCls = hasBgOpacity || slideStyle?.bgColor ? "" : "bg-d-bg";
+    const bgColorStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
+    const inlineStyle = hasBgOpacity ? "" : bgColorStyle;
     const footer = slideStyle?.footer ? `<p class="absolute bottom-2 right-4 text-xs text-d-dim font-body">${escapeHtml(slideStyle.footer)}</p>` : "";
     const referenceHtml = reference
         ? `<div class="mt-auto px-4 pb-2"><p class="text-sm text-d-muted font-body opacity-80">${escapeHtml(reference)}</p></div>`
         : "";
+    const bgHex = sanitizeHex(slideStyle?.bgColor ?? theme.colors.bg);
+    const brandingBg = branding ? renderBrandingBackground(branding, bgHex) : "";
+    const brandingLogo = branding ? renderBrandingLogo(branding) : "";
     return `<!DOCTYPE html>
 <html lang="en" class="h-full">
 <head>
@@ -47,10 +85,14 @@ ${cdnScripts}
 </head>
 <body class="h-full">
 <div class="relative overflow-hidden ${bgCls} w-full h-full flex flex-col"${inlineStyle}>
+${brandingBg}
+<div class="relative z-[1] flex flex-col flex-1">
 ${content}
 ${referenceHtml}
 ${footer}
 </div>
+${brandingLogo}
+</div>
 </body>
 </html>`;
 };