mulmocast 2.2.2 → 2.2.4

package/lib/slide/blocks.d.ts

@@ -1,4 +1,10 @@
-import type { ContentBlock } from "./schema.js";
+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 */

package/lib/slide/blocks.js

@@ -1,4 +1,55 @@
-import { escapeHtml, nl2br, c, generateSlideId } from "./utils.js";
+import { escapeHtml, c, generateSlideId, renderInlineMarkup } 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) => {
+    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>`;
+};
 /** Render a single content block to HTML */
 export const renderContentBlock = (block) => {
     switch (block.type) {
@@ -22,6 +73,10 @@ export const renderContentBlock = (block) => {
             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>`;
     }
@@ -60,14 +115,31 @@ const renderText = (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>`;
+    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");
-        return `  <li class="flex gap-2"><span class="text-d-dim shrink-0">${marker}</span><span>${escapeHtml(item)}</span></li>`;
+        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}>`;
@@ -88,15 +160,15 @@ const renderCallout = (block) => {
     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>`;
+        ? `<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(block.color || "primary")}">${escapeHtml(block.value)}</p>`);
-    lines.push(`  <p class="text-sm text-d-dim mt-1">${escapeHtml(block.label)}</p>`);
+    lines.push(`  <p class="text-4xl font-bold text-${c(block.color || "primary")}">${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>`);
@@ -119,7 +191,7 @@ 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">${escapeHtml(block.title)}</p>` : "";
+    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}
   <div class="flex-1 min-h-0 relative">
@@ -139,7 +211,7 @@ 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">${escapeHtml(block.title)}</p>` : "";
+    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}
   <div class="flex-1 min-h-0 flex justify-center items-center">
@@ -147,3 +219,40 @@ const renderMermaid = (block) => {
   </div>
 </div>`;
 };
+const renderSectionSidebar = (block) => {
+    const color = block.color || "primary";
+    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>`;
+};
+const renderSectionDefault = (block) => {
+    const color = block.color || "primary";
+    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>`;
+};
+const renderSection = (block) => {
+    return block.sidebar ? renderSectionSidebar(block) : renderSectionDefault(block);
+};

package/lib/slide/layouts/big_quote.js

@@ -1,18 +1,18 @@
-import { escapeHtml, nl2br, c } from "../utils.js";
+import { renderInlineMarkup, 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(`    &ldquo;${renderInlineMarkup(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>`);
+        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">${escapeHtml(data.role)}</p>`);
+        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/slide/layouts/columns.js

@@ -1,4 +1,4 @@
-import { escapeHtml, c, cardWrap, numBadge, iconSquare, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderCalloutBar } from "../utils.js";
 import { renderCardContentBlocks } from "../blocks.js";
 const buildColumnCard = (col) => {
     const accent = col.accentColor || "primary";
@@ -7,19 +7,19 @@ const buildColumnCard = (col) => {
         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>`);
+        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">${escapeHtml(col.title)}</h3>`);
+        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">${escapeHtml(col.label)}</p>`);
+            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">${escapeHtml(col.title)}</h3>`);
+        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" : "";
@@ -28,7 +28,7 @@ const buildColumnCard = (col) => {
         inner.push(`</div>`);
     }
     if (col.footer) {
-        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${escapeHtml(col.footer)}</p>`);
+        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");
 };
@@ -49,7 +49,7 @@ export const layoutColumns = (data) => {
         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>`);
+        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/slide/layouts/comparison.js

@@ -1,16 +1,16 @@
-import { escapeHtml, c, cardWrap, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, 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>`);
+    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">${escapeHtml(panel.footer)}</p>`);
+        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");
 };

package/lib/slide/layouts/funnel.js

@@ -1,4 +1,4 @@
-import { escapeHtml, c, slideHeader, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, c, slideHeader, renderCalloutBar } from "../utils.js";
 export const layoutFunnel = (data) => {
     const parts = [slideHeader(data)];
     const stages = data.stages || [];
@@ -9,13 +9,13 @@ export const layoutFunnel = (data) => {
         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>`);
+        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">${escapeHtml(stage.description)}</span>`);
+            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">${escapeHtml(stage.value)}</span>`);
+            parts.push(`  <span class="text-lg font-bold text-white font-body">${renderInlineMarkup(stage.value)}</span>`);
         }
         parts.push(`</div>`);
     });

package/lib/slide/layouts/grid.js

@@ -1,4 +1,4 @@
-import { escapeHtml, nl2br, c, cardWrap, numBadge, iconSquare } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare } from "../utils.js";
 import { renderCardContentBlocks } from "../blocks.js";
 export const layoutGrid = (data) => {
     const accent = data.accentColor || "primary";
@@ -6,7 +6,7 @@ export const layoutGrid = (data) => {
     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(`  <h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
     parts.push(`</div>`);
     parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-center">`);
     (data.items || []).forEach((item) => {
@@ -16,19 +16,19 @@ export const layoutGrid = (data) => {
             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>`);
+            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">${escapeHtml(item.title)}</h3>`);
+            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">${escapeHtml(item.title)}</h3>`);
+            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">${escapeHtml(item.description)}</p>`);
+            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>`);
@@ -37,7 +37,7 @@ export const layoutGrid = (data) => {
     });
     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>`);
+        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/slide/layouts/matrix.js

@@ -1,4 +1,4 @@
-import { escapeHtml, c, cardWrap, slideHeader } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, slideHeader } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 export const layoutMatrix = (data) => {
     const parts = [slideHeader(data)];
@@ -8,11 +8,11 @@ export const layoutMatrix = (data) => {
     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>`);
+        parts.push(`  <span class="text-xs text-d-dim font-body [writing-mode:vertical-lr] rotate-180">${renderInlineMarkup(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 font-bold text-d-muted font-body [writing-mode:vertical-lr] rotate-180">${renderInlineMarkup(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(`  <span class="text-xs text-d-dim font-body [writing-mode:vertical-lr] rotate-180">${renderInlineMarkup(data.yAxis.low || "")}</span>`);
         parts.push(`</div>`);
     }
     parts.push(`<div class="flex-1 flex flex-col gap-3">`);
@@ -23,11 +23,11 @@ export const layoutMatrix = (data) => {
             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>`);
+            inner.push(`<h3 class="text-lg font-bold text-${c(accent)} font-body">${renderInlineMarkup(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(`  <li class="flex gap-2"><span class="text-d-dim shrink-0">&bull;</span><span>${renderInlineMarkup(item)}</span></li>`);
                 });
                 inner.push(`</ul>`);
             }
@@ -40,11 +40,11 @@ export const layoutMatrix = (data) => {
     });
     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>`);
+        parts.push(`  <span class="text-xs text-d-dim font-body">${renderInlineMarkup(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 font-bold text-d-muted font-body">${renderInlineMarkup(data.xAxis.label)}</span>`);
         }
-        parts.push(`  <span class="text-xs text-d-dim font-body">${escapeHtml(data.xAxis.high || "")}</span>`);
+        parts.push(`  <span class="text-xs text-d-dim font-body">${renderInlineMarkup(data.xAxis.high || "")}</span>`);
         parts.push(`</div>`);
     }
     parts.push(`</div>`);

package/lib/slide/layouts/split.js

@@ -1,18 +1,31 @@
-import { escapeHtml, nl2br, c } from "../utils.js";
+import { renderInlineMarkup, c } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
+const resolveValign = (valign) => {
+    if (valign === "top")
+        return "justify-start";
+    if (valign === "bottom")
+        return "justify-end";
+    return "justify-center";
+};
 const buildSplitPanel = (panel, fallbackAccent, ratio) => {
     const accent = panel.accentColor || fallbackAccent;
     const bg = panel.dark ? "bg-d-card" : "";
+    const vCls = resolveValign(panel.valign);
     const lines = [];
-    lines.push(`<div class="${bg} flex flex-col justify-center px-10 py-8" style="flex: ${ratio}">`);
+    lines.push(`<div class="${bg} flex flex-col ${vCls} 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.labelBadge) {
+            lines.push(`  <span class="inline-block self-start px-6 py-2.5 rounded-lg bg-${c(accent)} text-lg font-bold text-white font-title mb-4">${renderInlineMarkup(panel.label)}</span>`);
+        }
+        else {
+            lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body mb-2">${renderInlineMarkup(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>`);
+        lines.push(`  <h2 class="text-[36px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(panel.title)}</h2>`);
     }
     if (panel.subtitle) {
-        lines.push(`  <p class="text-base text-d-dim font-body mt-3">${nl2br(panel.subtitle)}</p>`);
+        lines.push(`  <p class="text-base text-d-dim font-body mt-3">${renderInlineMarkup(panel.subtitle)}</p>`);
     }
     if (panel.content) {
         lines.push(`  <div class="mt-6 space-y-3">${renderContentBlocks(panel.content)}</div>`);

package/lib/slide/layouts/stats.js

@@ -1,4 +1,4 @@
-import { escapeHtml, nl2br, c, renderCalloutBar } from "../utils.js";
+import { renderInlineMarkup, c, renderCalloutBar } from "../utils.js";
 export const layoutStats = (data) => {
     const accent = data.accentColor || "primary";
     const stats = data.stats || [];
@@ -7,11 +7,11 @@ export const layoutStats = (data) => {
     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">${escapeHtml(data.stepLabel)}</p>`);
+        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">${nl2br(data.title)}</h2>`);
+    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">${nl2br(data.subtitle)}</p>`);
+        parts.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
     }
     // Stats cards
     parts.push(`<div class="flex gap-6 mt-10">`);
@@ -19,11 +19,11 @@ export const layoutStats = (data) => {
         const color = stat.color || data.accentColor || "primary";
         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">${escapeHtml(stat.value)}</p>`);
-        parts.push(`  <p class="text-lg text-d-muted font-body mt-4">${escapeHtml(stat.label)}</p>`);
+        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 = stat.change.startsWith("+") ? "success" : "danger";
-            parts.push(`  <p class="text-base font-bold text-${c(changeColor)} font-body mt-3">${escapeHtml(stat.change)}</p>`);
+            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(`</div>`);
     });

package/lib/slide/layouts/table.js

@@ -1,43 +1,9 @@
-import { escapeHtml, c, slideHeader, renderCalloutBar } from "../utils.js";
-const resolveCellColor = (cellObj, isRowHeader) => {
-    if (cellObj.color)
-        return `text-${c(cellObj.color)}`;
-    if (isRowHeader)
-        return "text-d-text";
-    return "text-d-muted";
-};
-const renderCellValue = (cell, isRowHeader) => {
-    const cellObj = typeof cell === "object" && cell !== null ? cell : { text: String(cell) };
-    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">${escapeHtml(cellObj.text)}</td>`;
-};
+import { slideHeader, renderCalloutBar } from "../utils.js";
+import { renderTableCore } from "../blocks.js";
 export const layoutTable = (data) => {
     const parts = [slideHeader(data)];
-    const headers = data.headers || [];
-    const rows = data.rows || [];
-    const striped = data.striped !== false;
     parts.push(`<div class="px-12 mt-5 flex-1 overflow-auto">`);
-    parts.push(`<table class="w-full border-collapse">`);
-    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">${escapeHtml(h)}</th>`);
-    });
-    parts.push(`</tr>`);
-    parts.push(`</thead>`);
-    parts.push(`<tbody>`);
-    rows.forEach((row, ri) => {
-        const bgCls = striped && ri % 2 === 1 ? "bg-d-alt/30" : "";
-        parts.push(`<tr class="${bgCls}">`);
-        (row || []).forEach((cell, ci) => {
-            const isRowHeader = ci === 0 && !!data.rowHeaders;
-            parts.push(`  ${renderCellValue(cell, isRowHeader)}`);
-        });
-        parts.push(`</tr>`);
-    });
-    parts.push(`</tbody>`);
-    parts.push(`</table>`);
+    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>`);

package/lib/slide/layouts/timeline.js

@@ -1,4 +1,4 @@
-import { escapeHtml, nl2br, c } from "../utils.js";
+import { renderInlineMarkup, c } from "../utils.js";
 export const layoutTimeline = (data) => {
     const accent = data.accentColor || "primary";
     const parts = [];
@@ -7,11 +7,11 @@ export const layoutTimeline = (data) => {
     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">${escapeHtml(data.stepLabel)}</p>`);
+        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">${nl2br(data.title)}</h2>`);
+    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">${nl2br(data.subtitle)}</p>`);
+        parts.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
     }
     // Timeline items
     parts.push(`<div class="flex items-start mt-10 relative">`);
@@ -24,10 +24,10 @@ export const layoutTimeline = (data) => {
         parts.push(`  <div class="w-10 h-10 rounded-full ${dotBorder} flex items-center justify-center shadow-lg">`);
         parts.push(`    <div class="w-4 h-4 rounded-full ${dotInner}"></div>`);
         parts.push(`  </div>`);
-        parts.push(`  <p class="text-sm font-bold text-${c(color)} font-body mt-4">${escapeHtml(item.date)}</p>`);
-        parts.push(`  <p class="text-base font-bold text-d-text font-body mt-2">${escapeHtml(item.title)}</p>`);
+        parts.push(`  <p class="text-sm font-bold text-${c(color)} font-body mt-4">${renderInlineMarkup(item.date)}</p>`);
+        parts.push(`  <p class="text-base font-bold text-d-text font-body mt-2">${renderInlineMarkup(item.title)}</p>`);
         if (item.description) {
-            parts.push(`  <p class="text-sm text-d-muted font-body mt-1 px-3">${nl2br(item.description)}</p>`);
+            parts.push(`  <p class="text-sm text-d-muted font-body mt-1 px-3">${renderInlineMarkup(item.description)}</p>`);
         }
         parts.push(`</div>`);
     });

package/lib/slide/layouts/title.js

@@ -1,14 +1,16 @@
-import { nl2br } from "../utils.js";
+import { renderInlineMarkup } from "../utils.js";
 export const layoutTitle = (data) => {
     return [
         `<div class="h-[3px] bg-d-primary"></div>`,
         `<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">`,
-        `  <h1 class="text-[60px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h1>`,
-        data.subtitle ? `  <p class="text-2xl text-d-muted mt-6 font-body">${nl2br(data.subtitle)}</p>` : "",
-        data.author ? `  <p class="text-lg text-d-dim mt-10 font-body">${nl2br(data.author)}</p>` : "",
-        data.note ? `  <div class="bg-d-card px-4 py-2 mt-6 inline-block rounded"><p class="text-sm text-d-dim font-body">${nl2br(data.note)}</p></div>` : "",
+        `  <h1 class="text-[60px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h1>`,
+        data.subtitle ? `  <p class="text-2xl text-d-muted mt-6 font-body">${renderInlineMarkup(data.subtitle)}</p>` : "",
+        data.author ? `  <p class="text-lg text-d-dim mt-10 font-body">${renderInlineMarkup(data.author)}</p>` : "",
+        data.note
+            ? `  <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>`,
     ]