mulmocast 2.1.40 → 2.2.0

package/README.md

@@ -350,7 +350,7 @@ MulmoCast includes a powerful **Slide DSL** (`type: "slide"`) for creating struc
 ### Features
 
 - **11 Layouts**: title, columns, comparison, grid, bigQuote, stats, timeline, split, matrix, table, funnel
-- **7 Content Block Types**: text, bullets, code, callout, metric, divider, image
+- **10 Content Block Types**: text, bullets, code, callout, metric, divider, image, imageRef, chart, mermaid
 - **13-Color Theme System**: Semantic color palette with dark/light support
 - **6 Preset Themes**: dark, pop, warm, creative, minimal, corporate
 

package/lib/actions/image_agents.d.ts

@@ -52,12 +52,13 @@ export declare const imagePreprocessAgent: (namedInputs: {
     context: MulmoStudioContext;
     beat: MulmoBeat;
     index: number;
-    imageRefs: Record<string, string>;
+    imageRefs?: Record<string, string>;
 }) => Promise<ImagePreprocessAgentResponse>;
 export declare const imagePluginAgent: (namedInputs: {
     context: MulmoStudioContext;
     beat: MulmoBeat;
     index: number;
+    imageRefs?: Record<string, string>;
 }) => Promise<void>;
 export declare const htmlImageGeneratorAgent: (namedInputs: {
     file: string;

package/lib/actions/image_agents.js

@@ -88,18 +88,18 @@ export const imagePreprocessAgent = async (namedInputs) => {
         return { ...returnValue, imagePath, imageFromMovie: true }; // no image prompt, only movie prompt
     }
     // referenceImages for "edit_image", openai agent.
-    const referenceImages = MulmoBeatMethods.getImageReferenceForImageGenerator(beat, imageRefs);
+    const referenceImages = MulmoBeatMethods.getImageReferenceForImageGenerator(beat, imageRefs ?? {});
     const prompt = imagePrompt(beat, imageAgentInfo.imageParams.style);
     // ImageGenearalPreprocessAgentResponse
     return { ...returnValue, imagePath, referenceImageForMovie: imagePath, imageAgentInfo, prompt, referenceImages };
 };
 export const imagePluginAgent = async (namedInputs) => {
-    const { context, beat, index } = namedInputs;
+    const { context, beat, index, imageRefs } = namedInputs;
     const { imagePath } = getBeatPngImagePath(context, index);
     const plugin = MulmoBeatMethods.getPlugin(beat);
     try {
         MulmoStudioContextMethods.setBeatSessionState(context, "image", index, beat.id, true);
-        const processorParams = { beat, context, imagePath, ...htmlStyle(context, beat) };
+        const processorParams = { beat, context, imagePath, imageRefs, ...htmlStyle(context, beat) };
         await plugin.process(processorParams);
         MulmoStudioContextMethods.setBeatSessionState(context, "image", index, beat.id, false);
     }

package/lib/actions/images.d.ts

@@ -29,7 +29,7 @@ export declare const beat_graph_data: {
                 context: MulmoStudioContext;
                 beat: import("../types/type.js").MulmoBeat;
                 index: number;
-                imageRefs: Record<string, string>;
+                imageRefs?: Record<string, string>;
             }) => Promise<({
                 imageParams?: MulmoImageParams;
                 movieFile?: string;
@@ -162,11 +162,13 @@ export declare const beat_graph_data: {
                 context: MulmoStudioContext;
                 beat: import("../types/type.js").MulmoBeat;
                 index: number;
+                imageRefs?: Record<string, string>;
             }) => Promise<void>;
             inputs: {
                 context: string;
                 beat: string;
                 index: string;
+                imageRefs: string;
                 onComplete: string[];
             };
         };

package/lib/actions/images.js

@@ -76,6 +76,7 @@ export const beat_graph_data = {
                 context: ":context",
                 beat: ":beat",
                 index: ":__mapIndex",
+                imageRefs: ":imageRefs",
                 onComplete: [":preprocessor"],
             },
         },

package/lib/methods/mulmo_media_source.d.ts

@@ -1,5 +1,6 @@
 import type { MulmoMediaSource, MulmoMediaMermaidSource, MulmoStudioContext, ImageType } from "../types/index.js";
 export declare const getExtention: (contentType: string | null, url: string) => string;
+export declare const pathToDataUrl: (filePath: string) => string;
 export declare const MulmoMediaSourceMethods: {
     getText(mediaSource: MulmoMediaMermaidSource, context: MulmoStudioContext): Promise<string | null>;
     resolve(mediaSource: MulmoMediaSource | undefined, context: MulmoStudioContext): string | null;

package/lib/methods/mulmo_media_source.js

@@ -60,12 +60,26 @@ const urlToDataUrl = async (url, timeoutMs = DEFAULT_FETCH_TIMEOUT_MS) => {
         clearTimeout(timeoutId);
     }
 };
+/** Map file extension to MIME type for data URLs */
+const extensionToMimeType = (ext) => {
+    const mimeMap = {
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        webp: "image/webp",
+        svg: "image/svg+xml",
+        bmp: "image/bmp",
+        ico: "image/x-icon",
+    };
+    return mimeMap[ext.toLowerCase()] ?? `image/${ext}`;
+};
 // Convert local file path to data URL (base64 encoded)
-const pathToDataUrl = (filePath) => {
+export const pathToDataUrl = (filePath) => {
     assert(fs.existsSync(filePath), `File not found: ${filePath}`, false, mediaSourceFileNotFoundError(filePath));
     const buffer = fs.readFileSync(filePath);
-    const extension = getExtention(null, filePath);
-    const mimeType = extension === "jpg" ? "image/jpeg" : `image/${extension}`;
+    const ext = filePath.split(".").pop()?.toLowerCase() ?? "png";
+    const mimeType = extensionToMimeType(ext);
     return `data:${mimeType};base64,${buffer.toString("base64")}`;
 };
 // Convert base64 string to data URL format

package/lib/slide/blocks.d.ts

@@ -3,3 +3,5 @@ import type { ContentBlock } from "./schema.js";
 export declare const renderContentBlock: (block: ContentBlock) => string;
 /** Render an array of content blocks to HTML */
 export declare const renderContentBlocks: (blocks: ContentBlock[]) => string;
+/** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
+export declare const renderCardContentBlocks: (blocks: ContentBlock[]) => string;

package/lib/slide/blocks.js

@@ -1,4 +1,4 @@
-import { escapeHtml, nl2br, c } from "./utils.js";
+import { escapeHtml, nl2br, c, generateSlideId } from "./utils.js";
 /** Render a single content block to HTML */
 export const renderContentBlock = (block) => {
     switch (block.type) {
@@ -16,6 +16,12 @@ export const renderContentBlock = (block) => {
             return renderDivider(block);
         case "image":
             return renderImage(block);
+        case "imageRef":
+            return renderImageRefPlaceholder(block);
+        case "chart":
+            return renderChart(block);
+        case "mermaid":
+            return renderMermaid(block);
         default:
             return `<p class="text-sm text-d-muted font-body">[unknown block type]</p>`;
     }
@@ -24,6 +30,17 @@ export const renderContentBlock = (block) => {
 export const renderContentBlocks = (blocks) => {
     return blocks.map(renderContentBlock).join("\n");
 };
+/** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
+export const renderCardContentBlocks = (blocks) => {
+    return blocks
+        .map((block) => {
+        if (block.type === "image") {
+            return `<div class="aspect-video shrink-0 overflow-hidden">${renderContentBlock(block)}</div>`;
+        }
+        return renderContentBlock(block);
+    })
+        .join("\n");
+};
 const resolveTextColor = (block) => {
     if (block.color)
         return `text-${c(block.color)}`;
@@ -93,5 +110,40 @@ const renderDivider = (block) => {
 };
 const renderImage = (block) => {
     const fit = block.fit === "cover" ? "object-cover" : "object-contain";
-    return `<img src="${escapeHtml(block.src)}" alt="${escapeHtml(block.alt || "")}" class="rounded ${fit} max-h-full w-full" />`;
+    return `<div class="min-h-0 flex-1 overflow-hidden flex items-center"><img src="${escapeHtml(block.src)}" alt="${escapeHtml(block.alt || "")}" class="rounded ${fit} w-full h-full" /></div>`;
+};
+/** Placeholder for unresolved imageRef blocks — should be resolved before rendering */
+const renderImageRefPlaceholder = (block) => {
+    return `<div class="min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-d-alt rounded"><p class="text-sm text-d-dim font-body">[imageRef: ${escapeHtml(block.ref)}]</p></div>`;
+};
+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>` : "";
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${titleHtml}
+  <div class="flex-1 min-h-0 relative">
+    <canvas id="${chartId}" data-chart-ready="false"></canvas>
+  </div>
+  <script>(function(){
+    const ctx=document.getElementById('${chartId}');
+    const d=${chartData};
+    if(!d.options)d.options={};
+    d.options.animation=false;
+    d.options.responsive=true;
+    d.options.maintainAspectRatio=false;
+    new Chart(ctx,d);
+    requestAnimationFrame(()=>requestAnimationFrame(()=>{ctx.dataset.chartReady="true"}));
+  })()</script>
+</div>`;
+};
+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>` : "";
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${titleHtml}
+  <div class="flex-1 min-h-0 flex justify-center items-center">
+    <div id="${mermaidId}" class="mermaid">${escapeHtml(block.code)}</div>
+  </div>
+</div>`;
 };

package/lib/slide/index.d.ts

@@ -1,5 +1,5 @@
 export { generateSlideHTML } from "./render.js";
 export { renderSlideContent } from "./layouts/index.js";
 export { renderContentBlock, renderContentBlocks } from "./blocks.js";
-export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, accentColorKeySchema } from "./schema.js";
-export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, ContentBlock, 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, } 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";

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

package/lib/slide/layouts/columns.js

@@ -1,5 +1,5 @@
 import { escapeHtml, c, cardWrap, numBadge, iconSquare, slideHeader, renderCalloutBar } from "../utils.js";
-import { renderContentBlocks } from "../blocks.js";
+import { renderCardContentBlocks } from "../blocks.js";
 const buildColumnCard = (col) => {
     const accent = col.accentColor || "primary";
     const inner = [];
@@ -23,8 +23,8 @@ const buildColumnCard = (col) => {
     }
     if (col.content) {
         const centerCls = col.icon ? "text-center" : "";
-        inner.push(`<div class="mt-3 space-y-3 ${centerCls}">`);
-        inner.push(renderContentBlocks(col.content));
+        inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col ${centerCls}">`);
+        inner.push(renderCardContentBlocks(col.content));
         inner.push(`</div>`);
     }
     if (col.footer) {
@@ -43,7 +43,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">`);
+    parts.push(`<div class="flex gap-4 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
     parts.push(colElements.join("\n"));
     parts.push(`</div>`);
     if (data.callout) {

package/lib/slide/layouts/comparison.js

@@ -5,19 +5,20 @@ 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">`);
+        inner.push(`<div class="mt-4 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">`);
         inner.push(renderContentBlocks(panel.content));
         inner.push(`</div>`);
     }
     if (panel.footer) {
-        inner.push(`<div class="flex-1"></div>`);
+        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>`);
     }
     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">`);
+    parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
     parts.push(buildPanel(data.left));
     parts.push(buildPanel(data.right));
     parts.push(`</div>`);

package/lib/slide/layouts/grid.js

@@ -1,5 +1,5 @@
 import { escapeHtml, nl2br, c, cardWrap, numBadge, iconSquare } from "../utils.js";
-import { renderContentBlocks } from "../blocks.js";
+import { renderCardContentBlocks } from "../blocks.js";
 export const layoutGrid = (data) => {
     const accent = data.accentColor || "primary";
     const nCols = data.gridColumns || 3;
@@ -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 content-start">`);
+    parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-start">`);
     (data.items || []).forEach((item) => {
         const itemAccent = item.accentColor || "primary";
         const inner = [];
@@ -31,7 +31,7 @@ export const layoutGrid = (data) => {
             inner.push(`<p class="text-sm text-d-muted font-body mt-3">${escapeHtml(item.description)}</p>`);
         }
         if (item.content) {
-            inner.push(`<div class="mt-3 space-y-3">${renderContentBlocks(item.content)}</div>`);
+            inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">${renderCardContentBlocks(item.content)}</div>`);
         }
         parts.push(cardWrap(itemAccent, inner.join("\n")));
     });

package/lib/slide/render.js

@@ -1,9 +1,31 @@
-import { escapeHtml, buildTailwindConfig, sanitizeHex } from "./utils.js";
+import { escapeHtml, buildTailwindConfig, sanitizeHex, detectBlockTypes } from "./utils.js";
 import { renderSlideContent } from "./layouts/index.js";
+/** Determine if a hex color is dark (luminance < 128) */
+const isDarkBg = (hex) => {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 < 128;
+};
+/** Build CDN script tags for chart/mermaid when needed */
+const buildCdnScripts = (theme, slide) => {
+    const { hasChart, hasMermaid } = detectBlockTypes(slide);
+    const scripts = [];
+    if (hasChart) {
+        scripts.push('<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>');
+    }
+    if (hasMermaid) {
+        const mermaidTheme = isDarkBg(theme.colors.bg) ? "dark" : "default";
+        scripts.push(`<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true,theme:'${mermaidTheme}'})</script>`);
+    }
+    return scripts.join("\n");
+};
 /** Generate a complete HTML document for a single slide */
 export const generateSlideHTML = (theme, slide) => {
     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)}"` : "";
@@ -15,6 +37,7 @@ export const generateSlideHTML = (theme, slide) => {
 <meta name="viewport" content="width=1280">
 <script src="https://cdn.tailwindcss.com"></script>
 <script>tailwind.config = ${twConfig}</script>
+${cdnScripts}
 <style>
   html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
 </style>