mulmocast 2.1.40 → 2.2.1

package/lib/utils/context.d.ts

@@ -331,6 +331,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                         footer?: string | undefined;
                         label?: string | undefined;
@@ -398,6 +411,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                         footer?: string | undefined;
                     };
@@ -441,6 +467,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                         footer?: string | undefined;
                     };
@@ -506,6 +545,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                     }[];
                     layout: "grid";
@@ -619,6 +671,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                         dark?: boolean | undefined;
                         ratio?: number | undefined;
@@ -665,6 +730,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                         dark?: boolean | undefined;
                         ratio?: number | undefined;
@@ -718,6 +796,19 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                             src: string;
                             alt?: string | undefined;
                             fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "imageRef";
+                            ref: string;
+                            alt?: string | undefined;
+                            fit?: "contain" | "cover" | undefined;
+                        } | {
+                            type: "chart";
+                            chartData: Record<string, unknown>;
+                            title?: string | undefined;
+                        } | {
+                            type: "mermaid";
+                            code: string;
+                            title?: string | undefined;
                         })[] | undefined;
                         accentColor?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
                     }[];
@@ -1623,6 +1714,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                             footer?: string | undefined;
                             label?: string | undefined;
@@ -1690,6 +1794,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                             footer?: string | undefined;
                         };
@@ -1733,6 +1850,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                             footer?: string | undefined;
                         };
@@ -1798,6 +1928,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                         }[];
                         layout: "grid";
@@ -1911,6 +2054,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                             dark?: boolean | undefined;
                             ratio?: number | undefined;
@@ -1957,6 +2113,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                             dark?: boolean | undefined;
                             ratio?: number | undefined;
@@ -2010,6 +2179,19 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                                 src: string;
                                 alt?: string | undefined;
                                 fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "imageRef";
+                                ref: string;
+                                alt?: string | undefined;
+                                fit?: "contain" | "cover" | undefined;
+                            } | {
+                                type: "chart";
+                                chartData: Record<string, unknown>;
+                                title?: string | undefined;
+                            } | {
+                                type: "mermaid";
+                                code: string;
+                                title?: string | undefined;
                             })[] | undefined;
                             accentColor?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
                         }[];

package/lib/utils/html_render.js

@@ -1,17 +1,55 @@
+import fs from "node:fs";
+import os from "node:os";
+import nodePath from "node:path";
+import crypto from "node:crypto";
 import { marked } from "marked";
 import puppeteer from "puppeteer";
 const isCI = process.env.CI === "true";
+/** Determine the appropriate waitUntil strategy based on HTML content */
+const resolveWaitUntil = (html) => {
+    const hasExternalImages = html.includes("<img") && /src=["']https?:\/\//.test(html);
+    const hasLocalImages = html.includes("<img") && /src=["']file:\/\//.test(html);
+    if (hasExternalImages)
+        return "networkidle0";
+    if (hasLocalImages)
+        return "load";
+    return "domcontentloaded";
+};
+/**
+ * Load HTML into a Puppeteer page.
+ * When the HTML references file:// URLs, write it to a temp file
+ * and navigate via page.goto (setContent uses about:blank origin
+ * which blocks file:// loading).
+ */
+const loadHtmlIntoPage = async (page, html, timeout_ms) => {
+    const waitUntil = resolveWaitUntil(html);
+    const hasFileUrls = /file:\/\//.test(html);
+    if (hasFileUrls) {
+        const tmpFile = nodePath.join(os.tmpdir(), `mulmocast_render_${crypto.randomUUID()}.html`);
+        fs.writeFileSync(tmpFile, html);
+        try {
+            await page.goto(`file://${tmpFile}`, { waitUntil, timeout: timeout_ms });
+        }
+        finally {
+            try {
+                fs.unlinkSync(tmpFile);
+            }
+            catch {
+                /* ignore cleanup errors */
+            }
+        }
+    }
+    else {
+        await page.setContent(html, { waitUntil, timeout: timeout_ms });
+    }
+};
 export const renderHTMLToImage = async (html, outputPath, width, height, isMermaid = false, omitBackground = false) => {
     // Use Puppeteer to render HTML to an image
     const browser = await puppeteer.launch({
-        args: isCI ? ["--no-sandbox"] : [],
+        args: isCI ? ["--no-sandbox", "--allow-file-access-from-files"] : ["--allow-file-access-from-files"],
     });
     const page = await browser.newPage();
-    // Set the page content to the HTML generated from the Markdown
-    // Use networkidle0 only for external images, otherwise use domcontentloaded for faster rendering
-    const hasExternalImages = html.includes("<img") && /src=["']https?:\/\//.test(html);
-    const waitUntil = hasExternalImages ? "networkidle0" : "domcontentloaded";
-    await page.setContent(html, { waitUntil, timeout: 30000 });
+    await loadHtmlIntoPage(page, html, 30000);
     // Adjust page settings if needed (like width, height, etc.)
     await page.setViewport({ width, height });
     // height:100% ensures background fills viewport; only reset html, let body styles come from custom CSS

package/lib/utils/image_plugins/slide.d.ts

@@ -1,5 +1,19 @@
 import { ImageProcessorParams } from "../../types/index.js";
+import type { SlideLayout, ContentBlock } from "../../slide/index.js";
 export declare const imageType = "slide";
+/**
+ * Collect all content block arrays from a slide layout.
+ * Only layouts that embed ContentBlock[] are handled:
+ *   columns, comparison, grid, split, matrix
+ */
+export declare const collectContentArrays: (slide: SlideLayout) => ContentBlock[][];
+/**
+ * Deep-clone a slide layout and resolve `imageRef` content blocks
+ * into `image` blocks using the resolved imageRefs map and a path-to-URL converter.
+ * Default converter produces data URLs (for self-contained HTML).
+ * Pass `toFileUrl` for Puppeteer rendering (avoids huge inline base64).
+ */
+export declare const resolveSlideImageRefs: (slide: SlideLayout, imageRefs: Record<string, string>, converter?: (filePath: string) => string) => SlideLayout;
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const html: (params: ImageProcessorParams) => Promise<string | undefined>;

package/lib/utils/image_plugins/slide.js

@@ -1,7 +1,93 @@
+import nodePath from "node:path";
+import { pathToFileURL } from "node:url";
 import { generateSlideHTML } from "../../slide/index.js";
 import { renderHTMLToImage } from "../html_render.js";
 import { parrotingImagePath } from "./utils.js";
+import { pathToDataUrl } from "../../methods/mulmo_media_source.js";
+import { imageAction, imageFileTarget, unknownMediaType } from "../error_cause.js";
 export const imageType = "slide";
+const slideImageRefError = (refKey) => ({
+    type: unknownMediaType,
+    action: imageAction,
+    target: imageFileTarget,
+    agentName: "slidePlugin",
+    refKey,
+});
+/** Convert a file path to a file:// URL string */
+const toFileUrl = (filePath) => {
+    return pathToFileURL(nodePath.resolve(filePath)).href;
+};
+/**
+ * Collect all content block arrays from a slide layout.
+ * Only layouts that embed ContentBlock[] are handled:
+ *   columns, comparison, grid, split, matrix
+ */
+export const collectContentArrays = (slide) => {
+    const result = [];
+    switch (slide.layout) {
+        case "columns":
+            slide.columns.forEach((col) => {
+                if (col.content)
+                    result.push(col.content);
+            });
+            break;
+        case "comparison":
+            if (slide.left.content)
+                result.push(slide.left.content);
+            if (slide.right.content)
+                result.push(slide.right.content);
+            break;
+        case "grid":
+            slide.items.forEach((item) => {
+                if (item.content)
+                    result.push(item.content);
+            });
+            break;
+        case "split":
+            if (slide.left?.content)
+                result.push(slide.left.content);
+            if (slide.right?.content)
+                result.push(slide.right.content);
+            break;
+        case "matrix":
+            slide.cells.forEach((cell) => {
+                if (cell.content)
+                    result.push(cell.content);
+            });
+            break;
+        default:
+            // title, bigQuote, stats, timeline, table, funnel — no content blocks
+            break;
+    }
+    return result;
+};
+/**
+ * Deep-clone a slide layout and resolve `imageRef` content blocks
+ * into `image` blocks using the resolved imageRefs map and a path-to-URL converter.
+ * Default converter produces data URLs (for self-contained HTML).
+ * Pass `toFileUrl` for Puppeteer rendering (avoids huge inline base64).
+ */
+export const resolveSlideImageRefs = (slide, imageRefs, converter = pathToDataUrl) => {
+    const cloned = JSON.parse(JSON.stringify(slide));
+    const contentArrays = collectContentArrays(cloned);
+    contentArrays.forEach((blocks) => {
+        blocks.forEach((block, index) => {
+            if (block.type !== "imageRef")
+                return;
+            const filePath = imageRefs[block.ref];
+            if (!filePath) {
+                throw new Error(`Unknown image ref key: "${block.ref}"`, { cause: slideImageRefError(block.ref) });
+            }
+            blocks[index] = {
+                type: "image",
+                src: converter(filePath),
+                ...(block.alt !== undefined && { alt: block.alt }),
+                ...(block.fit !== undefined && { fit: block.fit }),
+            };
+        });
+    });
+    return cloned;
+};
 const resolveTheme = (params) => {
     const { beat, context } = params;
     if (!beat.image || beat.image.type !== imageType) {
@@ -14,12 +100,24 @@ const resolveTheme = (params) => {
     }
     return theme;
 };
+const resolveSlide = (params, converter = pathToDataUrl) => {
+    const { beat, imageRefs } = params;
+    if (!beat.image || beat.image.type !== imageType) {
+        throw new Error("resolveSlide called on non-slide beat");
+    }
+    const slide = beat.image.slide;
+    if (imageRefs && Object.keys(imageRefs).length > 0) {
+        return resolveSlideImageRefs(slide, imageRefs, converter);
+    }
+    return slide;
+};
 const processSlide = async (params) => {
     const { beat, imagePath, canvasSize } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
     const theme = resolveTheme(params);
-    const html = generateSlideHTML(theme, beat.image.slide);
+    const slide = resolveSlide(params, toFileUrl);
+    const html = generateSlideHTML(theme, slide);
     await renderHTMLToImage(html, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };
@@ -28,7 +126,8 @@ const dumpHtml = async (params) => {
     if (!beat.image || beat.image.type !== imageType)
         return;
     const theme = resolveTheme(params);
-    return generateSlideHTML(theme, beat.image.slide);
+    const slide = resolveSlide(params);
+    return generateSlideHTML(theme, slide);
 };
 export const process = processSlide;
 export const path = parrotingImagePath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.1.40",
+  "version": "2.2.1",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -17,7 +17,11 @@
       "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"
+    }
   },
   "bin": {
     "mulmo": "lib/cli/bin.js",
@@ -30,6 +34,9 @@
     "./assets/audio/silent60sec.mp3",
     "./assets/html/",
     "./assets/images/",
+    "./assets/schemas/",
+    "./assets/slide_themes/",
+    "./assets/styles/",
     "./assets/templates/"
   ],
   "directories": {

package/scripts/test/test_slide_chart_mermaid.json

@@ -0,0 +1,148 @@
+{
+  "$mulmocast": { "version": "1.1" },
+  "lang": "en",
+  "title": "Chart & Mermaid Content Blocks Demo",
+  "slideParams": {
+    "theme": {
+      "colors": {
+        "bg": "0F172A",
+        "bgCard": "1E293B",
+        "bgCardAlt": "334155",
+        "text": "F8FAFC",
+        "textMuted": "CBD5E1",
+        "textDim": "64748B",
+        "primary": "3B82F6",
+        "accent": "8B5CF6",
+        "success": "22C55E",
+        "warning": "F59E0B",
+        "danger": "EF4444",
+        "info": "14B8A6",
+        "highlight": "EC4899"
+      },
+      "fonts": { "title": "Georgia", "body": "Calibri", "mono": "Consolas" }
+    }
+  },
+  "beats": [
+    {
+      "text": "This slide shows a bar chart inside a columns layout.",
+      "image": {
+        "type": "slide",
+        "slide": {
+          "layout": "columns",
+          "title": "Quarterly Revenue",
+          "subtitle": "FY2025 performance overview",
+          "columns": [
+            {
+              "title": "Revenue by Quarter",
+              "accentColor": "primary",
+              "content": [
+                {
+                  "type": "chart",
+                  "title": "Revenue ($ millions)",
+                  "chartData": {
+                    "type": "bar",
+                    "data": {
+                      "labels": ["Q1", "Q2", "Q3", "Q4"],
+                      "datasets": [
+                        {
+                          "label": "Revenue",
+                          "data": [12, 19, 15, 24],
+                          "backgroundColor": ["#3B82F6", "#8B5CF6", "#22C55E", "#F59E0B"]
+                        }
+                      ]
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              "title": "Key Takeaways",
+              "accentColor": "success",
+              "content": [
+                { "type": "metric", "value": "$70M", "label": "Total Revenue", "color": "primary" },
+                { "type": "bullets", "items": ["Q4 strongest quarter", "24% QoQ growth in Q4", "Exceeded annual target by 8%"] }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "text": "This slide demonstrates a mermaid diagram in a split layout.",
+      "image": {
+        "type": "slide",
+        "slide": {
+          "layout": "split",
+          "left": {
+            "title": "System Architecture",
+            "accentColor": "accent",
+            "content": [
+              {
+                "type": "mermaid",
+                "title": "Data Flow",
+                "code": "graph TD\n  A[Client] --> B[API Gateway]\n  B --> C[Auth Service]\n  B --> D[App Service]\n  D --> E[Database]\n  D --> F[Cache]"
+              }
+            ]
+          },
+          "right": {
+            "title": "Components",
+            "accentColor": "info",
+            "content": [
+              {
+                "type": "bullets",
+                "items": [
+                  "API Gateway handles routing",
+                  "Auth Service manages tokens",
+                  "App Service processes requests",
+                  "Database stores persistent data",
+                  "Cache layer for performance"
+                ]
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "text": "This slide combines both chart and mermaid in a comparison layout.",
+      "image": {
+        "type": "slide",
+        "slide": {
+          "layout": "comparison",
+          "title": "Pipeline Analysis",
+          "left": {
+            "title": "Conversion Funnel",
+            "accentColor": "primary",
+            "content": [
+              {
+                "type": "chart",
+                "chartData": {
+                  "type": "doughnut",
+                  "data": {
+                    "labels": ["Leads", "Qualified", "Proposals", "Won"],
+                    "datasets": [
+                      {
+                        "data": [500, 200, 80, 35],
+                        "backgroundColor": ["#3B82F6", "#8B5CF6", "#22C55E", "#F59E0B"]
+                      }
+                    ]
+                  }
+                }
+              }
+            ]
+          },
+          "right": {
+            "title": "Process Flow",
+            "accentColor": "accent",
+            "content": [
+              {
+                "type": "mermaid",
+                "code": "graph LR\n  A[Lead] --> B[Qualify]\n  B --> C[Propose]\n  C --> D[Close]\n  D --> E[Onboard]"
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}