mulmocast 2.2.1 → 2.2.3

package/lib/slide/schema.js

@@ -42,9 +42,19 @@ export const textBlockSchema = z.object({
     fontSize: z.number().optional(),
     color: accentColorKeySchema.optional(),
 });
+/** Sub-bullet item: plain string or object with text */
+const subBulletItemSchema = z.union([z.string(), z.object({ text: z.string() })]);
+/** Bullet item: plain string or object with text and optional sub-items (2 levels max) */
+export const bulletItemSchema = z.union([
+    z.string(),
+    z.object({
+        text: z.string(),
+        items: z.array(subBulletItemSchema).optional(),
+    }),
+]);
 export const bulletsBlockSchema = z.object({
     type: z.literal("bullets"),
-    items: z.array(z.string()),
+    items: z.array(bulletItemSchema),
     ordered: z.boolean().optional(),
     icon: z.string().optional(),
 });
@@ -93,7 +103,25 @@ export const mermaidBlockSchema = z.object({
     code: z.string(),
     title: z.string().optional(),
 });
-export const contentBlockSchema = z.discriminatedUnion("type", [
+export const tableCellValueSchema = z.union([
+    z.string(),
+    z.object({
+        text: z.string(),
+        color: accentColorKeySchema.optional(),
+        bold: z.boolean().optional(),
+        badge: z.boolean().optional(),
+    }),
+]);
+export const tableBlockSchema = z.object({
+    type: z.literal("table"),
+    title: z.string().optional(),
+    headers: z.array(z.string()).optional(),
+    rows: z.array(z.array(tableCellValueSchema)),
+    rowHeaders: z.boolean().optional(),
+    striped: z.boolean().optional(),
+});
+/** Block schemas shared between contentBlockSchema and nonSectionContentBlockSchema */
+const baseBlockSchemas = [
     textBlockSchema,
     bulletsBlockSchema,
     codeBlockSchema,
@@ -104,7 +132,19 @@ export const contentBlockSchema = z.discriminatedUnion("type", [
     imageRefBlockSchema,
     chartBlockSchema,
     mermaidBlockSchema,
-]);
+    tableBlockSchema,
+];
+/** All content block types except section (used inside section to prevent recursion) */
+const nonSectionContentBlockSchema = z.discriminatedUnion("type", [...baseBlockSchemas]);
+export const sectionBlockSchema = z.object({
+    type: z.literal("section"),
+    label: z.string(),
+    color: accentColorKeySchema.optional(),
+    content: z.array(nonSectionContentBlockSchema).optional(),
+    text: z.string().optional(),
+    sidebar: z.boolean().optional(),
+});
+export const contentBlockSchema = z.discriminatedUnion("type", [...baseBlockSchemas, sectionBlockSchema]);
 // ═══════════════════════════════════════════════════════════
 // Shared Components
 // ═══════════════════════════════════════════════════════════
@@ -244,10 +284,12 @@ export const splitPanelSchema = z.object({
     title: z.string().optional(),
     subtitle: z.string().optional(),
     label: z.string().optional(),
+    labelBadge: z.boolean().optional(),
     accentColor: accentColorKeySchema.optional(),
     content: z.array(contentBlockSchema).optional(),
     dark: z.boolean().optional(),
     ratio: z.number().optional(),
+    valign: z.enum(["top", "center", "bottom"]).optional(),
 });
 export const splitSlideSchema = z.object({
     layout: z.literal("split"),
@@ -287,14 +329,6 @@ export const matrixSlideSchema = z.object({
     cells: z.array(matrixCellSchema),
 });
 // ─── table ───
-export const tableCellValueSchema = z.union([
-    z.string(),
-    z.object({
-        text: z.string(),
-        color: accentColorKeySchema.optional(),
-        bold: z.boolean().optional(),
-    }),
-]);
 export const tableSlideSchema = z.object({
     layout: z.literal("table"),
     ...slideBaseFields,
@@ -345,5 +379,6 @@ export const mulmoSlideMediaSchema = z
     type: z.literal("slide"),
     theme: slideThemeSchema.optional(),
     slide: slideLayoutSchema,
+    reference: z.string().optional(),
 })
     .strict();

package/lib/slide/utils.d.ts

@@ -3,6 +3,12 @@ import type { SlideTheme, SlideLayout } from "./schema.js";
 export declare const escapeHtml: (s: string) => string;
 /** Escape HTML and convert newlines to <br> */
 export declare const nl2br: (s: string) => string;
+/**
+ * Render inline markup: escape HTML first, then parse **bold** and {color:text}.
+ * Also converts newlines to <br>.
+ * Safe: escapeHtml runs before any markup parsing, so XSS is impossible.
+ */
+export declare const renderInlineMarkup: (s: string) => string;
 /** Sanitize a hex color value (hex digits only) */
 export declare const sanitizeHex: (s: string) => string;
 /** Accent color key → Tailwind class segment: "primary" → "d-primary" */

package/lib/slide/utils.js

@@ -11,6 +11,28 @@ export const escapeHtml = (s) => {
 export const nl2br = (s) => {
     return escapeHtml(s).replace(/\n/g, "<br>");
 };
+/** Valid accent color keys for inline markup */
+const inlineColorKeys = new Set(["primary", "accent", "success", "warning", "danger", "info", "highlight"]);
+/**
+ * Render inline markup: escape HTML first, then parse **bold** and {color:text}.
+ * Also converts newlines to <br>.
+ * Safe: escapeHtml runs before any markup parsing, so XSS is impossible.
+ */
+export const renderInlineMarkup = (s) => {
+    let result = escapeHtml(s);
+    // **bold** → <strong>bold</strong>
+    result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    // {color:text} → <span class="text-d-color">text</span>
+    result = result.replace(/\{([a-z]+):(.+?)\}/g, (_match, color, text) => {
+        if (inlineColorKeys.has(color)) {
+            return `<span class="text-${c(color)}">${text}</span>`;
+        }
+        return `{${color}:${text}}`;
+    });
+    // newlines to <br>
+    result = result.replace(/\n/g, "<br>");
+    return result;
+};
 /** Sanitize a value for safe use in CSS class names (alphanumeric + hyphens only) */
 const sanitizeCssClass = (s) => {
     return s.replace(/[^a-zA-Z0-9-]/g, "");
@@ -87,8 +109,8 @@ export const renderCalloutBar = (obj) => {
     const leftBar = obj.leftBar ? `<div class="w-1 bg-${c(color)} shrink-0"></div>` : "";
     const align = obj.align === "center" ? "text-center" : "";
     const inner = obj.label
-        ? `<span class="font-bold text-${c(color)}">${escapeHtml(obj.label)}:</span> <span class="text-d-muted">${escapeHtml(obj.text)}</span>`
-        : `<span class="text-d-muted">${escapeHtml(obj.text)}</span>`;
+        ? `<span class="font-bold text-${c(color)}">${renderInlineMarkup(obj.label)}:</span> <span class="text-d-muted">${renderInlineMarkup(obj.text)}</span>`
+        : `<span class="text-d-muted">${renderInlineMarkup(obj.text)}</span>`;
     return `<div class="mx-12 bg-d-card rounded flex overflow-hidden ${align}">
   ${leftBar}
   <div class="px-4 py-3 text-sm font-body flex-1">${inner}</div>
@@ -101,11 +123,11 @@ export const slideHeader = (data) => {
     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">${escapeHtml(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">${nl2br(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">${nl2br(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");
@@ -159,6 +181,14 @@ export const detectBlockTypes = (slide) => {
                 hasChart = true;
             if (block.type === "mermaid")
                 hasMermaid = true;
+            if (block.type === "section" && block.content) {
+                block.content.forEach((inner) => {
+                    if (inner.type === "chart")
+                        hasChart = true;
+                    if (inner.type === "mermaid")
+                        hasMermaid = true;
+                });
+            }
         });
     });
     return { hasChart, hasMermaid };