mulmocast 2.2.0 → 2.2.2

package/lib/data/slideThemes.d.ts

@@ -0,0 +1,134 @@
+export declare const slideThemes: {
+    corporate: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    creative: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    dark: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    minimal: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    pop: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    warm: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+};

package/lib/data/slideThemes.js

@@ -0,0 +1,134 @@
+export const slideThemes = {
+    corporate: {
+        colors: {
+            accent: "7C3AED",
+            bg: "F8FAFC",
+            bgCard: "FFFFFF",
+            bgCardAlt: "F1F5F9",
+            danger: "DC2626",
+            highlight: "DB2777",
+            info: "0891B2",
+            primary: "2563EB",
+            success: "16A34A",
+            text: "0F172A",
+            textDim: "94A3B8",
+            textMuted: "475569",
+            warning: "EA580C",
+        },
+        fonts: {
+            body: "Helvetica",
+            mono: "Menlo",
+            title: "Georgia",
+        },
+    },
+    creative: {
+        colors: {
+            accent: "FB923C",
+            bg: "1C1917",
+            bgCard: "292524",
+            bgCardAlt: "3D3733",
+            danger: "EF4444",
+            highlight: "E879F9",
+            info: "38BDF8",
+            primary: "F43F5E",
+            success: "4ADE80",
+            text: "FAFAF9",
+            textDim: "A8A29E",
+            textMuted: "D6D3D1",
+            warning: "FBBF24",
+        },
+        fonts: {
+            body: "Helvetica",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+    dark: {
+        colors: {
+            accent: "8B5CF6",
+            bg: "0F172A",
+            bgCard: "1E293B",
+            bgCardAlt: "334155",
+            danger: "EF4444",
+            highlight: "EC4899",
+            info: "14B8A6",
+            primary: "3B82F6",
+            success: "22C55E",
+            text: "F8FAFC",
+            textDim: "64748B",
+            textMuted: "CBD5E1",
+            warning: "F59E0B",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+    minimal: {
+        colors: {
+            accent: "7C3AED",
+            bg: "F8FAFC",
+            bgCard: "FFFFFF",
+            bgCardAlt: "F1F5F9",
+            danger: "DC2626",
+            highlight: "DB2777",
+            info: "0891B2",
+            primary: "2563EB",
+            success: "059669",
+            text: "0F172A",
+            textDim: "94A3B8",
+            textMuted: "475569",
+            warning: "D97706",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Trebuchet MS",
+        },
+    },
+    pop: {
+        colors: {
+            accent: "7C3AED",
+            bg: "FFF0F5",
+            bgCard: "FFFFFF",
+            bgCardAlt: "FDE8EF",
+            danger: "EF4444",
+            highlight: "F97316",
+            info: "06B6D4",
+            primary: "E91E63",
+            success: "10B981",
+            text: "1A1A2E",
+            textDim: "9090B0",
+            textMuted: "4A4A6A",
+            warning: "F59E0B",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+    warm: {
+        colors: {
+            accent: "D946EF",
+            bg: "FFFBEB",
+            bgCard: "FFFFFF",
+            bgCardAlt: "FEF3C7",
+            danger: "DC2626",
+            highlight: "E11D48",
+            info: "0284C7",
+            primary: "EA580C",
+            success: "16A34A",
+            text: "1C1917",
+            textDim: "A8A29E",
+            textMuted: "57534E",
+            warning: "CA8A04",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+};

package/lib/slide/layouts/columns.js

@@ -23,13 +23,12 @@ const buildColumnCard = (col) => {
     }
     if (col.content) {
         const centerCls = col.icon ? "text-center" : "";
-        inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col ${centerCls}">`);
+        inner.push(`<div class="mt-4 space-y-4 flex-1 min-h-0 overflow-auto flex flex-col ${centerCls}">`);
         inner.push(renderCardContentBlocks(col.content));
         inner.push(`</div>`);
     }
     if (col.footer) {
-        inner.push(`<div class="flex-1"></div>`);
-        inner.push(`<p class="text-sm text-d-dim font-body mt-3">${escapeHtml(col.footer)}</p>`);
+        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${escapeHtml(col.footer)}</p>`);
     }
     return cardWrap(accent, inner.join("\n"), "flex-1");
 };
@@ -43,7 +42,7 @@ export const layoutColumns = (data) => {
             colElements.push(`<div class="flex items-center shrink-0"><span class="text-2xl text-d-dim">\u25B6</span></div>`);
         }
     });
-    parts.push(`<div class="flex gap-4 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
+    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) {

package/lib/slide/layouts/comparison.js

@@ -5,20 +5,18 @@ const buildPanel = (panel) => {
     const inner = [];
     inner.push(`<h3 class="text-xl font-bold text-${c(accent)} font-body">${escapeHtml(panel.title)}</h3>`);
     if (panel.content) {
-        inner.push(`<div class="mt-4 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">`);
+        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) {
-        if (!panel.content)
-            inner.push(`<div class="flex-1"></div>`);
-        inner.push(`<p class="text-sm text-d-dim font-body mt-3">${escapeHtml(panel.footer)}</p>`);
+        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${escapeHtml(panel.footer)}</p>`);
     }
     return cardWrap(accent, inner.join("\n"), "flex-1");
 };
 export const layoutComparison = (data) => {
     const parts = [slideHeader(data)];
-    parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
+    parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1 min-h-0 items-start">`);
     parts.push(buildPanel(data.left));
     parts.push(buildPanel(data.right));
     parts.push(`</div>`);

package/lib/slide/layouts/grid.js

@@ -8,7 +8,7 @@ export const layoutGrid = (data) => {
     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(`</div>`);
-    parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-start">`);
+    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 inner = [];

package/lib/slide/layouts/stats.js

@@ -1,21 +1,34 @@
-import { escapeHtml, c, slideHeader, renderCalloutBar } from "../utils.js";
+import { escapeHtml, nl2br, c, renderCalloutBar } from "../utils.js";
 export const layoutStats = (data) => {
-    const parts = [slideHeader(data)];
+    const accent = data.accentColor || "primary";
     const stats = data.stats || [];
-    parts.push(`<div class="flex gap-6 px-12 mt-8 flex-1 items-start">`);
+    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">${escapeHtml(data.stepLabel)}</p>`);
+    }
+    parts.push(`<h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h2>`);
+    if (data.subtitle) {
+        parts.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${nl2br(data.subtitle)}</p>`);
+    }
+    // Stats cards
+    parts.push(`<div class="flex gap-6 mt-10">`);
     stats.forEach((stat) => {
         const color = stat.color || data.accentColor || "primary";
-        parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-8 text-center">`);
+        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-[48px] font-bold text-${c(color)} font-body leading-none">${escapeHtml(stat.value)}</p>`);
-        parts.push(`  <p class="text-base text-d-muted font-body mt-3">${escapeHtml(stat.label)}</p>`);
+        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>`);
         if (stat.change) {
             const changeColor = stat.change.startsWith("+") ? "success" : "danger";
-            parts.push(`  <p class="text-sm font-bold text-${c(changeColor)} font-body mt-2">${escapeHtml(stat.change)}</p>`);
+            parts.push(`  <p class="text-base font-bold text-${c(changeColor)} font-body mt-3">${escapeHtml(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>`);
     }

package/lib/slide/layouts/timeline.js

@@ -1,9 +1,21 @@
-import { escapeHtml, nl2br, c, slideHeader } from "../utils.js";
+import { escapeHtml, nl2br, c } from "../utils.js";
 export const layoutTimeline = (data) => {
-    const parts = [slideHeader(data)];
+    const accent = data.accentColor || "primary";
+    const parts = [];
     const items = data.items || [];
-    parts.push(`<div class="flex items-start px-12 mt-8 flex-1 relative">`);
-    parts.push(`<div class="absolute left-16 right-16 top-[52px] h-[2px] bg-d-alt"></div>`);
+    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">${escapeHtml(data.stepLabel)}</p>`);
+    }
+    parts.push(`<h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h2>`);
+    if (data.subtitle) {
+        parts.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${nl2br(data.subtitle)}</p>`);
+    }
+    // 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 dotBorder = item.done ? `bg-${c(color)}` : `bg-d-alt`;
@@ -20,5 +32,6 @@ export const layoutTimeline = (data) => {
         parts.push(`</div>`);
     });
     parts.push(`</div>`);
+    parts.push(`</div>`);
     return parts.join("\n");
 };

package/lib/slide/render.d.ts

@@ -1,3 +1,3 @@
 import type { SlideTheme, SlideLayout } from "./schema.js";
 /** Generate a complete HTML document for a single slide */
-export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout) => string;
+export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout, reference?: string) => string;

package/lib/slide/render.js

@@ -22,7 +22,7 @@ const buildCdnScripts = (theme, slide) => {
     return scripts.join("\n");
 };
 /** Generate a complete HTML document for a single slide */
-export const generateSlideHTML = (theme, slide) => {
+export const generateSlideHTML = (theme, slide, reference) => {
     const content = renderSlideContent(slide);
     const twConfig = buildTailwindConfig(theme);
     const cdnScripts = buildCdnScripts(theme, slide);
@@ -30,6 +30,9 @@ export const generateSlideHTML = (theme, slide) => {
     const bgCls = slideStyle?.bgColor ? "" : "bg-d-bg";
     const inlineStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
     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>`
+        : "";
     return `<!DOCTYPE html>
 <html lang="en" class="h-full">
 <head>
@@ -45,6 +48,7 @@ ${cdnScripts}
 <body class="h-full">
 <div class="relative overflow-hidden ${bgCls} w-full h-full flex flex-col"${inlineStyle}>
 ${content}
+${referenceHtml}
 ${footer}
 </div>
 </body>

package/lib/slide/schema.d.ts

@@ -4421,6 +4421,7 @@ export declare const mulmoSlideMediaSchema: z.ZodObject<{
         }, z.core.$strip>>;
         layout: z.ZodLiteral<"funnel">;
     }, z.core.$strip>], "layout">;
+    reference: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>;
 export type AccentColorKey = z.infer<typeof accentColorKeySchema>;
 export type SlideThemeColors = z.infer<typeof slideThemeColorsSchema>;

package/lib/slide/schema.js

@@ -345,5 +345,6 @@ export const mulmoSlideMediaSchema = z
     type: z.literal("slide"),
     theme: slideThemeSchema.optional(),
     slide: slideLayoutSchema,
+    reference: z.string().optional(),
 })
     .strict();

package/lib/types/schema.d.ts

@@ -1740,6 +1740,7 @@ export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
         }, z.core.$strip>>;
         layout: z.ZodLiteral<"funnel">;
     }, z.core.$strip>], "layout">;
+    reference: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>]>;
 export declare const mulmoAudioAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"audio">;
@@ -3566,6 +3567,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
             }, z.core.$strip>>;
             layout: z.ZodLiteral<"funnel">;
         }, z.core.$strip>], "layout">;
+        reference: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>]>>;
     audio: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
         type: z.ZodLiteral<"audio">;
@@ -6093,6 +6095,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
                 }, z.core.$strip>>;
                 layout: z.ZodLiteral<"funnel">;
             }, z.core.$strip>], "layout">;
+            reference: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>]>>;
         audio: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             type: z.ZodLiteral<"audio">;
@@ -8281,6 +8284,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                     }, z.core.$strip>>;
                     layout: z.ZodLiteral<"funnel">;
                 }, z.core.$strip>], "layout">;
+                reference: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>]>>;
             audio: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
                 type: z.ZodLiteral<"audio">;

package/lib/types/slide.d.ts

@@ -4421,6 +4421,7 @@ export declare const mulmoSlideMediaSchema: z.ZodObject<{
         }, z.core.$strip>>;
         layout: z.ZodLiteral<"funnel">;
     }, z.core.$strip>], "layout">;
+    reference: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>;
 export type AccentColorKey = z.infer<typeof accentColorKeySchema>;
 export type SlideThemeColors = z.infer<typeof slideThemeColorsSchema>;

package/lib/types/slide.js

@@ -345,5 +345,6 @@ export const mulmoSlideMediaSchema = z
     type: z.literal("slide"),
     theme: slideThemeSchema.optional(),
     slide: slideLayoutSchema,
+    reference: z.string().optional(),
 })
     .strict();

package/lib/utils/context.d.ts

@@ -909,6 +909,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                         mono: string;
                     };
                 } | undefined;
+                reference?: string | undefined;
             } | {
                 type: "image";
                 source: {
@@ -2292,6 +2293,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                             mono: string;
                         };
                     } | undefined;
+                    reference?: string | undefined;
                 } | {
                     type: "image";
                     source: {

package/lib/utils/image_plugins/slide.js

@@ -117,7 +117,8 @@ const processSlide = async (params) => {
         return;
     const theme = resolveTheme(params);
     const slide = resolveSlide(params, toFileUrl);
-    const html = generateSlideHTML(theme, slide);
+    const reference = beat.image.reference;
+    const html = generateSlideHTML(theme, slide, reference);
     await renderHTMLToImage(html, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };
@@ -127,7 +128,8 @@ const dumpHtml = async (params) => {
         return;
     const theme = resolveTheme(params);
     const slide = resolveSlide(params);
-    return generateSlideHTML(theme, slide);
+    const reference = beat.image.reference;
+    return generateSlideHTML(theme, slide, reference);
 };
 export const process = processSlide;
 export const path = parrotingImagePath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -17,7 +17,14 @@
       "default": "./lib/data/index.js"
     },
     "./assets/*": "./assets/*",
-    "./scripts/*": "./scripts/*"
+    "./scripts/*": "./scripts/*",
+    "./tools/complete_script": {
+      "types": "./lib/tools/complete_script.d.ts",
+      "default": "./lib/tools/complete_script.js"
+    }
+  },
+  "resolutions": {
+    "minimatch": "^10.2.2"
   },
   "bin": {
     "mulmo": "lib/cli/bin.js",
@@ -30,6 +37,9 @@
     "./assets/audio/silent60sec.mp3",
     "./assets/html/",
     "./assets/images/",
+    "./assets/schemas/",
+    "./assets/slide_themes/",
+    "./assets/styles/",
     "./assets/templates/"
   ],
   "directories": {
@@ -100,7 +110,7 @@
     "marked": "^17.0.3",
     "mulmocast-vision": "^1.0.8",
     "ora": "^9.3.0",
-    "puppeteer": "^24.37.4",
+    "puppeteer": "^24.37.5",
     "replicate": "^1.4.0",
     "yaml": "^2.8.2",
     "yargs": "^18.0.0",
@@ -114,7 +124,7 @@
     "@types/jsdom": "^27.0.0",
     "@types/yargs": "^17.0.35",
     "cross-env": "^10.1.0",
-    "eslint": "^10.0.0",
+    "eslint": "^10.0.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-sonarjs": "^4.0.0",

package/scripts/test/test_slide_image_ref_en.json

@@ -280,7 +280,8 @@
             "text": "5σ means the probability of a fluke is 1 in 3.5 million — the threshold for 'discovery' in particle physics.",
             "color": "warning"
           }
-        }
+        },
+        "reference": "Source: CERN Annual Report 2024 — https://home.cern/resources/report"
       }
     }
   ]