mulmocast 2.1.28 → 2.1.30

package/lib/types/schema.d.ts

@@ -179,9 +179,31 @@ export declare const mediaSourceMermaidSchema: z.ZodDiscriminatedUnion<[z.ZodObj
     kind: z.ZodLiteral<"path">;
     path: z.ZodString;
 }, z.core.$strict>], "kind">;
+export declare const row2Schema: z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+export declare const grid2x2Schema: z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+export declare const markdownLayoutSchema: z.ZodIntersection<z.ZodObject<{
+    header: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+    "sidebar-left": z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+}, z.core.$strip>, z.ZodUnion<readonly [z.ZodObject<{
+    "row-2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+}, z.core.$strip>, z.ZodObject<{
+    "2x2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+}, z.core.$strip>, z.ZodObject<{
+    content: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+}, z.core.$strip>]>>;
 export declare const mulmoMarkdownMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"markdown">;
-    markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    markdown: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodIntersection<z.ZodObject<{
+        header: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+        "sidebar-left": z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+    }, z.core.$strip>, z.ZodUnion<readonly [z.ZodObject<{
+        "row-2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+    }, z.core.$strip>, z.ZodObject<{
+        "2x2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+    }, z.core.$strip>, z.ZodObject<{
+        content: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    }, z.core.$strip>]>>]>;
+    style: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>;
 export declare const mulmoImageMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"image">;
@@ -203,6 +225,7 @@ export declare const mulmoTextSlideMediaSchema: z.ZodObject<{
         subtitle: z.ZodOptional<z.ZodString>;
         bullets: z.ZodOptional<z.ZodArray<z.ZodString>>;
     }, z.core.$strip>;
+    style: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>;
 export declare const captionSplitSchema: z.ZodDefault<z.ZodEnum<{
     none: "none";
@@ -270,7 +293,17 @@ export declare const mulmoVisionMediaSchema: z.ZodObject<{
 }, z.core.$strict>;
 export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"markdown">;
-    markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    markdown: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodIntersection<z.ZodObject<{
+        header: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+        "sidebar-left": z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+    }, z.core.$strip>, z.ZodUnion<readonly [z.ZodObject<{
+        "row-2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+    }, z.core.$strip>, z.ZodObject<{
+        "2x2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+    }, z.core.$strip>, z.ZodObject<{
+        content: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    }, z.core.$strip>]>>]>;
+    style: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"web">;
     url: z.ZodURL;
@@ -329,6 +362,7 @@ export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
         subtitle: z.ZodOptional<z.ZodString>;
         bullets: z.ZodOptional<z.ZodArray<z.ZodString>>;
     }, z.core.$strip>;
+    style: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"chart">;
     title: z.ZodString;
@@ -796,7 +830,17 @@ export declare const mulmoBeatSchema: z.ZodObject<{
     description: z.ZodOptional<z.ZodString>;
     image: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
         type: z.ZodLiteral<"markdown">;
-        markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+        markdown: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodIntersection<z.ZodObject<{
+            header: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+            "sidebar-left": z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+        }, z.core.$strip>, z.ZodUnion<readonly [z.ZodObject<{
+            "row-2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+        }, z.core.$strip>, z.ZodObject<{
+            "2x2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+        }, z.core.$strip>, z.ZodObject<{
+            content: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+        }, z.core.$strip>]>>]>;
+        style: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"web">;
         url: z.ZodURL;
@@ -855,6 +899,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
             subtitle: z.ZodOptional<z.ZodString>;
             bullets: z.ZodOptional<z.ZodArray<z.ZodString>>;
         }, z.core.$strip>;
+        style: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"chart">;
         title: z.ZodString;
@@ -1980,7 +2025,17 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         description: z.ZodOptional<z.ZodString>;
         image: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             type: z.ZodLiteral<"markdown">;
-            markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+            markdown: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodIntersection<z.ZodObject<{
+                header: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+                "sidebar-left": z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+            }, z.core.$strip>, z.ZodUnion<readonly [z.ZodObject<{
+                "row-2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+            }, z.core.$strip>, z.ZodObject<{
+                "2x2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+            }, z.core.$strip>, z.ZodObject<{
+                content: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+            }, z.core.$strip>]>>]>;
+            style: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"web">;
             url: z.ZodURL;
@@ -2039,6 +2094,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
                 subtitle: z.ZodOptional<z.ZodString>;
                 bullets: z.ZodOptional<z.ZodArray<z.ZodString>>;
             }, z.core.$strip>;
+            style: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"chart">;
             title: z.ZodString;
@@ -2868,7 +2924,17 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             description: z.ZodOptional<z.ZodString>;
             image: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
                 type: z.ZodLiteral<"markdown">;
-                markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+                markdown: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodIntersection<z.ZodObject<{
+                    header: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+                    "sidebar-left": z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+                }, z.core.$strip>, z.ZodUnion<readonly [z.ZodObject<{
+                    "row-2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+                }, z.core.$strip>, z.ZodObject<{
+                    "2x2": z.ZodTuple<[z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>, z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>], null>;
+                }, z.core.$strip>, z.ZodObject<{
+                    content: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+                }, z.core.$strip>]>>]>;
+                style: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"web">;
                 url: z.ZodURL;
@@ -2927,6 +2993,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
                     subtitle: z.ZodOptional<z.ZodString>;
                     bullets: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>;
+                style: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"chart">;
                 title: z.ZodString;

package/lib/types/schema.js

@@ -75,10 +75,30 @@ export const mediaSourceMermaidSchema = z.discriminatedUnion("kind", [
 ]);
 // String is easier for AI, string array is easier for human
 const stringOrStringArray = z.union([z.string(), z.array(z.string())]);
+export const row2Schema = z.tuple([
+    stringOrStringArray, // left
+    stringOrStringArray, // right
+]);
+export const grid2x2Schema = z.tuple([
+    stringOrStringArray, // top-left
+    stringOrStringArray, // top-right
+    stringOrStringArray, // bottom-left
+    stringOrStringArray, // bottom-right
+]);
+// Frame: optional header and sidebar
+const layoutFrameSchema = z.object({
+    header: stringOrStringArray.optional(),
+    "sidebar-left": stringOrStringArray.optional(),
+});
+// Main: exactly one of row-2, 2x2, or content
+const layoutMainSchema = z.union([z.object({ "row-2": row2Schema }), z.object({ "2x2": grid2x2Schema }), z.object({ content: stringOrStringArray })]);
+// Combine frame + main (loose validation - extra properties not rejected at schema level)
+export const markdownLayoutSchema = layoutFrameSchema.and(layoutMainSchema);
 export const mulmoMarkdownMediaSchema = z
     .object({
     type: z.literal("markdown"),
-    markdown: stringOrStringArray,
+    markdown: z.union([stringOrStringArray, markdownLayoutSchema]),
+    style: z.string().optional(),
 })
     .strict();
 const mulmoWebMediaSchema = z
@@ -119,6 +139,7 @@ export const mulmoTextSlideMediaSchema = z
         subtitle: z.string().optional(),
         bullets: z.array(z.string()).optional(),
     }),
+    style: z.string().optional(),
 })
     .strict();
 export const captionSplitSchema = z.enum(["none", "estimate"]).default("none");

package/lib/types/type.d.ts

@@ -1,5 +1,5 @@
 import { type CallbackFunction } from "graphai";
-import { langSchema, localizedTextSchema, mulmoBeatSchema, mulmoScriptSchema, mulmoStudioSchema, mulmoStudioBeatSchema, mulmoStoryboardSchema, mulmoStoryboardSceneSchema, mulmoStudioMultiLingualSchema, mulmoStudioMultiLingualArraySchema, mulmoStudioMultiLingualDataSchema, mulmoStudioMultiLingualFileSchema, speakerDictionarySchema, speakerSchema, mulmoSpeechParamsSchema, mulmoImageParamsSchema, mulmoImageParamsImagesValueSchema, mulmoImageParamsImagesSchema, mulmoFillOptionSchema, mulmoTransitionSchema, mulmoVideoFilterSchema, mulmoMovieParamsSchema, mulmoSoundEffectParamsSchema, mulmoLipSyncParamsSchema, textSlideParamsSchema, speechOptionsSchema, speakerDataSchema, mulmoCanvasDimensionSchema, mulmoPromptTemplateSchema, mulmoPromptTemplateFileSchema, text2ImageProviderSchema, text2HtmlImageProviderSchema, text2MovieProviderSchema, text2SpeechProviderSchema, mulmoPresentationStyleSchema, multiLingualTextsSchema, mulmoImageAssetSchema, mulmoMermaidMediaSchema, mulmoTextSlideMediaSchema, mulmoMarkdownMediaSchema, mulmoImageMediaSchema, mulmoChartMediaSchema, mediaSourceSchema, mediaSourceMermaidSchema, mulmoSessionStateSchema, mulmoOpenAIImageModelSchema, mulmoGoogleImageModelSchema, mulmoGoogleMovieModelSchema, mulmoReplicateMovieModelSchema, mulmoImagePromptMediaSchema } from "./schema.js";
+import { langSchema, localizedTextSchema, mulmoBeatSchema, mulmoScriptSchema, mulmoStudioSchema, mulmoStudioBeatSchema, mulmoStoryboardSchema, mulmoStoryboardSceneSchema, mulmoStudioMultiLingualSchema, mulmoStudioMultiLingualArraySchema, mulmoStudioMultiLingualDataSchema, mulmoStudioMultiLingualFileSchema, speakerDictionarySchema, speakerSchema, mulmoSpeechParamsSchema, mulmoImageParamsSchema, mulmoImageParamsImagesValueSchema, mulmoImageParamsImagesSchema, mulmoFillOptionSchema, mulmoTransitionSchema, mulmoVideoFilterSchema, mulmoMovieParamsSchema, mulmoSoundEffectParamsSchema, mulmoLipSyncParamsSchema, textSlideParamsSchema, speechOptionsSchema, speakerDataSchema, mulmoCanvasDimensionSchema, mulmoPromptTemplateSchema, mulmoPromptTemplateFileSchema, text2ImageProviderSchema, text2HtmlImageProviderSchema, text2MovieProviderSchema, text2SpeechProviderSchema, mulmoPresentationStyleSchema, multiLingualTextsSchema, mulmoImageAssetSchema, mulmoMermaidMediaSchema, mulmoTextSlideMediaSchema, mulmoMarkdownMediaSchema, mulmoImageMediaSchema, mulmoChartMediaSchema, mediaSourceSchema, mediaSourceMermaidSchema, mulmoSessionStateSchema, mulmoOpenAIImageModelSchema, mulmoGoogleImageModelSchema, mulmoGoogleMovieModelSchema, mulmoReplicateMovieModelSchema, mulmoImagePromptMediaSchema, markdownLayoutSchema, row2Schema, grid2x2Schema } from "./schema.js";
 import { pdf_modes, pdf_sizes, storyToScriptGenerateMode } from "./const.js";
 import type { LLM } from "./provider2agent.js";
 import { z } from "zod";
@@ -46,6 +46,9 @@ export type MulmoGoogleImageModel = z.infer<typeof mulmoGoogleImageModelSchema>;
 export type MulmoGoogleMovieModel = z.infer<typeof mulmoGoogleMovieModelSchema>;
 export type MulmoReplicateMovieModel = z.infer<typeof mulmoReplicateMovieModelSchema>;
 export type MulmoImagePromptMedia = z.infer<typeof mulmoImagePromptMediaSchema>;
+export type MulmoMarkdownLayout = z.infer<typeof markdownLayoutSchema>;
+export type MulmoRow2 = z.infer<typeof row2Schema>;
+export type MulmoGrid2x2 = z.infer<typeof grid2x2Schema>;
 export type MulmoImageAsset = z.infer<typeof mulmoImageAssetSchema>;
 export type MulmoTextSlideMedia = z.infer<typeof mulmoTextSlideMediaSchema>;
 export type MulmoMarkdownMedia = z.infer<typeof mulmoMarkdownMediaSchema>;

package/lib/utils/context.d.ts

@@ -274,7 +274,17 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 };
             } | {
                 type: "markdown";
-                markdown: string | string[];
+                markdown: string | string[] | ({
+                    header?: string | string[] | undefined;
+                    "sidebar-left"?: string | string[] | undefined;
+                } & ({
+                    "row-2": [string | string[], string | string[]];
+                } | {
+                    "2x2": [string | string[], string | string[], string | string[], string | string[]];
+                } | {
+                    content: string | string[];
+                }));
+                style?: string | undefined;
             } | {
                 type: "web";
                 url: string;
@@ -321,6 +331,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                     subtitle?: string | undefined;
                     bullets?: string[] | undefined;
                 };
+                style?: string | undefined;
             } | {
                 type: "chart";
                 title: string;
@@ -930,7 +941,17 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     };
                 } | {
                     type: "markdown";
-                    markdown: string | string[];
+                    markdown: string | string[] | ({
+                        header?: string | string[] | undefined;
+                        "sidebar-left"?: string | string[] | undefined;
+                    } & ({
+                        "row-2": [string | string[], string | string[]];
+                    } | {
+                        "2x2": [string | string[], string | string[], string | string[], string | string[]];
+                    } | {
+                        content: string | string[];
+                    }));
+                    style?: string | undefined;
                 } | {
                     type: "web";
                     url: string;
@@ -977,6 +998,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                         subtitle?: string | undefined;
                         bullets?: string[] | undefined;
                     };
+                    style?: string | undefined;
                 } | {
                     type: "chart";
                     title: string;

package/lib/utils/html_render.js

@@ -8,15 +8,23 @@ export const renderHTMLToImage = async (html, outputPath, width, height, isMerma
     });
     const page = await browser.newPage();
     // Set the page content to the HTML generated from the Markdown
-    await page.setContent(html);
+    // 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 });
     // Adjust page settings if needed (like width, height, etc.)
     await page.setViewport({ width, height });
-    // height:100% ensures background fills viewport; background:white prevents transparent areas
-    await page.addStyleTag({ content: "html,body{height:100%;margin:0;padding:0;overflow:hidden;background:white}" });
+    // height:100% ensures background fills viewport; only reset html, let body styles come from custom CSS
+    await page.addStyleTag({ content: "html{height:100%;margin:0;padding:0;overflow:hidden}" });
     if (isMermaid) {
+        // Wait for mermaid library to load from CDN
+        await page.waitForFunction(() => typeof window.mermaid !== "undefined", { timeout: 20000 });
+        // Wait until all mermaid elements have SVG rendered
         await page.waitForFunction(() => {
-            const element = document.querySelector(".mermaid");
-            return element && element.dataset.ready === "true";
+            const elements = document.querySelectorAll(".mermaid");
+            if (elements.length === 0)
+                return true;
+            return Array.from(elements).every((el) => el.querySelector("svg") !== null);
         }, { timeout: 20000 });
     }
     // Wait for Chart.js to finish rendering if this is a chart

package/lib/utils/image_plugins/chart.js

@@ -1,7 +1,6 @@
 import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
-import nodeProcess from "node:process";
+import { parrotingImagePath, generateUniqueId } from "./utils.js";
 export const imageType = "chart";
 const processChart = async (params) => {
     const { beat, imagePath, canvasSize, textSlideStyle } = params;
@@ -28,9 +27,7 @@ const dumpHtml = async (params) => {
         return;
     const chartData = JSON.stringify(beat.image.chartData, null, 2);
     const title = beat.image.title || "Chart";
-    // Safe: UI-only jitter; no security or fairness implications.
-    // eslint-disable-next-line sonarjs/pseudo-random
-    const chartId = nodeProcess.env.NODE_ENV === "test" ? "id" : `chart-${Math.random().toString(36).substr(2, 9)}`;
+    const chartId = generateUniqueId("chart");
     return `
 <div class="chart-container mb-6">
   <h3 class="text-xl font-semibold mb-4">${title}</h3>

package/lib/utils/image_plugins/markdown.js

@@ -1,24 +1,72 @@
-import { renderMarkdownToImage } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
-import { marked } from "marked";
+import { getHTMLFile } from "../file.js";
+import { renderHTMLToImage, interpolate } from "../html_render.js";
+import { parrotingImagePath, resolveStyle } from "./utils.js";
+import { generateLayoutHtml, layoutToMarkdown, toMarkdownString, parseMarkdown } from "./markdown_layout.js";
+import { isObject } from "graphai";
 export const imageType = "markdown";
-const processMarkdown = async (params) => {
-    const { beat, imagePath, textSlideStyle, canvasSize } = params;
+// Type guard for object (data) format
+const isMarkdownLayout = (md) => {
+    return isObject(md) && !Array.isArray(md);
+};
+// Generate markdown in order: header → sidebar-left → content
+const dumpMarkdown = (params) => {
+    const { beat } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
-    const markdown = dumpMarkdown(params) ?? "";
-    await renderMarkdownToImage(markdown, textSlideStyle, imagePath, canvasSize.width, canvasSize.height);
-    return imagePath;
+    const md = beat.image.markdown;
+    // text | text[] format
+    if (!isMarkdownLayout(md)) {
+        return toMarkdownString(md);
+    }
+    // object (data) format
+    return layoutToMarkdown(md);
 };
-const dumpMarkdown = (params) => {
+// Generate full HTML for rendering
+const generateHtml = async (params) => {
     const { beat } = params;
+    if (!beat.image || beat.image.type !== imageType)
+        return "";
+    const md = beat.image.markdown;
+    const style = resolveStyle(beat.image.style, params.textSlideStyle);
+    if (isMarkdownLayout(md)) {
+        const htmlBody = await generateLayoutHtml(md);
+        const template = getHTMLFile("tailwind");
+        return interpolate(template, {
+            title: "Markdown Layout",
+            html_body: htmlBody,
+            custom_style: style,
+        });
+    }
+    const markdown = dumpMarkdown(params) ?? "";
+    const body = await parseMarkdown(markdown);
+    return `<html><head><style>${style}</style></head><body>${body}</body></html>`;
+};
+// Check if markdown content contains mermaid code blocks
+const containsMermaid = (md) => {
+    const text = isMarkdownLayout(md) ? layoutToMarkdown(md) : toMarkdownString(md);
+    return text.includes("```mermaid");
+};
+const processMarkdown = async (params) => {
+    const { beat, imagePath, canvasSize } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
-    return Array.isArray(beat.image.markdown) ? beat.image.markdown.join("\n") : beat.image.markdown;
+    const html = await generateHtml(params);
+    const hasMermaid = containsMermaid(beat.image.markdown);
+    await renderHTMLToImage(html, imagePath, canvasSize.width, canvasSize.height, hasMermaid);
+    return imagePath;
 };
 const dumpHtml = async (params) => {
-    const markdown = dumpMarkdown(params);
-    return await marked.parse(markdown ?? "");
+    const { beat } = params;
+    if (!beat.image || beat.image.type !== imageType)
+        return "";
+    const md = beat.image.markdown;
+    if (isMarkdownLayout(md)) {
+        return await generateLayoutHtml(md);
+    }
+    else {
+        const markdown = dumpMarkdown(params);
+        return await parseMarkdown(markdown ?? "");
+    }
 };
 export const process = processMarkdown;
 export const path = parrotingImagePath;

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

@@ -0,0 +1,6 @@
+import { type MulmoMarkdownLayout } from "../../types/type.js";
+declare const toMarkdownString: (content: string | string[]) => string;
+declare const parseMarkdown: (content: string | string[]) => Promise<string>;
+export declare const generateLayoutHtml: (md: MulmoMarkdownLayout) => Promise<string>;
+export declare const layoutToMarkdown: (md: MulmoMarkdownLayout) => string;
+export { toMarkdownString, parseMarkdown };

package/lib/utils/image_plugins/markdown_layout.js

@@ -0,0 +1,127 @@
+import { marked } from "marked";
+import { generateMermaidHtml } from "./mermaid.js";
+// Regex to match mermaid code blocks
+const mermaidBlockRegex = /```mermaid\n([\s\S]*?)```/g;
+// Convert string or string array to markdown string
+const toMarkdownString = (content) => {
+    if (Array.isArray(content)) {
+        return content.join("\n");
+    }
+    return content;
+};
+// Replace mermaid code blocks with rendered HTML
+const convertMermaidBlocks = (text) => {
+    return text.replace(mermaidBlockRegex, (_match, code) => {
+        return generateMermaidHtml(code.trim());
+    });
+};
+// Parse markdown content to HTML (with mermaid support)
+const parseMarkdown = async (content) => {
+    const text = toMarkdownString(content);
+    const textWithMermaidHtml = convertMermaidBlocks(text);
+    return await marked.parse(textWithMermaidHtml);
+};
+// Generate header HTML
+const generateHeaderHtml = async (data) => {
+    const headerHtml = await parseMarkdown(data);
+    return `
+    <div class="shrink-0 px-8 py-4 border-b border-gray-200 bg-gray-50">
+      <div class="prose prose-lg max-w-none">${headerHtml}</div>
+    </div>
+  `;
+};
+// Generate sidebar HTML
+const generateSidebarHtml = async (data) => {
+    const sidebarHtml = await parseMarkdown(data);
+    return `
+    <div class="shrink-0 w-56 px-4 py-4 border-r border-gray-200 bg-gray-100 overflow-auto">
+      <div class="prose prose-sm max-w-none">${sidebarHtml}</div>
+    </div>
+  `;
+};
+// Generate row-2 layout HTML (two columns)
+const generateRow2Html = async (data) => {
+    const [left, right] = data;
+    const leftHtml = await parseMarkdown(left);
+    const rightHtml = await parseMarkdown(right);
+    return `
+    <div class="h-full flex gap-6">
+      <div class="flex-1 overflow-auto">
+        <div class="prose max-w-none">${leftHtml}</div>
+      </div>
+      <div class="flex-1 overflow-auto">
+        <div class="prose max-w-none">${rightHtml}</div>
+      </div>
+    </div>
+  `;
+};
+// Generate 2x2 grid layout HTML
+const generate2x2Html = async (data) => {
+    const [tl, tr, bl, br] = data;
+    const [tlHtml, trHtml, blHtml, brHtml] = await Promise.all([parseMarkdown(tl), parseMarkdown(tr), parseMarkdown(bl), parseMarkdown(br)]);
+    return `
+    <div class="h-full grid grid-cols-2 grid-rows-2 gap-4">
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${tlHtml}</div>
+      </div>
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${trHtml}</div>
+      </div>
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${blHtml}</div>
+      </div>
+      <div class="overflow-auto p-4 bg-gray-50 rounded-lg">
+        <div class="prose prose-sm max-w-none">${brHtml}</div>
+      </div>
+    </div>
+  `;
+};
+// Generate content HTML (single column)
+const generateContentHtml = async (data) => {
+    const contentHtml = await parseMarkdown(data);
+    return `<div class="prose max-w-none">${contentHtml}</div>`;
+};
+// Generate Tailwind HTML for layout
+export const generateLayoutHtml = async (md) => {
+    const parts = ['<div class="w-full h-full flex flex-col overflow-hidden">'];
+    if (md.header) {
+        parts.push(await generateHeaderHtml(md.header));
+    }
+    parts.push('<div class="flex-1 flex min-h-0 overflow-hidden">');
+    if (md["sidebar-left"]) {
+        parts.push(await generateSidebarHtml(md["sidebar-left"]));
+    }
+    parts.push('<div class="flex-1 p-6 overflow-auto">');
+    if ("row-2" in md) {
+        parts.push(await generateRow2Html(md["row-2"]));
+    }
+    else if ("2x2" in md) {
+        parts.push(await generate2x2Html(md["2x2"]));
+    }
+    else if ("content" in md) {
+        parts.push(await generateContentHtml(md.content));
+    }
+    parts.push("</div>", "</div>", "</div>");
+    return parts.join("");
+};
+// Convert layout to plain markdown string
+export const layoutToMarkdown = (md) => {
+    const parts = [];
+    if (md.header) {
+        parts.push(toMarkdownString(md.header));
+    }
+    if (md["sidebar-left"]) {
+        parts.push(toMarkdownString(md["sidebar-left"]));
+    }
+    if ("row-2" in md) {
+        parts.push(...md["row-2"].map(toMarkdownString));
+    }
+    else if ("2x2" in md) {
+        parts.push(...md["2x2"].map(toMarkdownString));
+    }
+    else if ("content" in md) {
+        parts.push(toMarkdownString(md.content));
+    }
+    return parts.join("\n\n");
+};
+export { toMarkdownString, parseMarkdown };

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

@@ -1,5 +1,6 @@
 import { ImageProcessorParams } from "../../types/index.js";
 export declare const imageType = "mermaid";
+export declare const generateMermaidHtml: (code: string, title?: string) => string;
 export declare const process: (params: ImageProcessorParams) => Promise<string | undefined>;
 export declare const path: (params: ImageProcessorParams) => string;
 export declare const markdown: (params: ImageProcessorParams) => string | undefined;

package/lib/utils/image_plugins/mermaid.js

@@ -1,9 +1,22 @@
 import { MulmoMediaSourceMethods } from "../../methods/index.js";
 import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
-import nodeProcess from "node:process";
+import { parrotingImagePath, generateUniqueId } from "./utils.js";
 export const imageType = "mermaid";
+// Generate mermaid HTML from code string (shared utility)
+export const generateMermaidHtml = (code, title) => {
+    const diagramId = generateUniqueId("mermaid");
+    const titleHtml = title ? `<h3 class="text-xl font-semibold mb-4">${title}</h3>` : "";
+    return `
+<div class="mermaid-container mb-6">
+  ${titleHtml}
+  <div class="flex justify-center">
+    <div id="${diagramId}" class="mermaid">
+      ${code.trim()}
+    </div>
+  </div>
+</div>`;
+};
 const processMermaid = async (params) => {
     const { beat, imagePath, canvasSize, context, textSlideStyle } = params;
     if (!beat?.image || beat.image.type !== imageType)
@@ -38,17 +51,7 @@ const dumpHtml = async (params) => {
     const title = beat.image.title || "Diagram";
     const appendix = beat.image.appendix?.join("\n") || "";
     const fullCode = `${diagramCode}\n${appendix}`.trim();
-    // eslint-disable-next-line sonarjs/pseudo-random
-    const diagramId = nodeProcess.env.NODE_ENV === "test" ? "id" : `mermaid-${Math.random().toString(36).substr(2, 9)}`;
-    return `
-<div class="mermaid-container mb-6">
-  <h3 class="text-xl font-semibold mb-4">${title}</h3>
-  <div class="flex justify-center">
-    <div id="${diagramId}" class="mermaid">
-      ${fullCode}
-    </div>
-  </div>
-</div>`;
+    return generateMermaidHtml(fullCode, title);
 };
 export const process = processMermaid;
 export const path = parrotingImagePath;

package/lib/utils/image_plugins/text_slide.js

@@ -1,5 +1,5 @@
 import { renderMarkdownToImage } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
+import { parrotingImagePath, resolveStyle } from "./utils.js";
 import { marked } from "marked";
 export const imageType = "textSlide";
 const processTextSlide = async (params) => {
@@ -7,6 +7,7 @@ const processTextSlide = async (params) => {
     if (!beat.image || beat.image.type !== imageType)
         return;
     const slide = beat.image.slide;
+    const style = resolveStyle(beat.image.style, textSlideStyle);
     const markdown = dumpMarkdown(params) ?? "";
     const topMargin = (() => {
         if (slide.bullets?.length && slide.bullets.length > 0) {
@@ -15,7 +16,7 @@ const processTextSlide = async (params) => {
         const marginTop = slide.subtitle ? canvasSize.height * 0.4 : canvasSize.height * 0.45;
         return `body {margin-top: ${marginTop}px;}`;
     })();
-    await renderMarkdownToImage(markdown, textSlideStyle + topMargin, imagePath, canvasSize.width, canvasSize.height);
+    await renderMarkdownToImage(markdown, style + topMargin, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };
 const dumpMarkdown = (params) => {

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

@@ -1,2 +1,4 @@
 import { ImageProcessorParams } from "../../types/index.js";
 export declare const parrotingImagePath: (params: ImageProcessorParams) => string;
+export declare const resolveStyle: (styleName: string | undefined, fallbackStyle: string) => string;
+export declare const generateUniqueId: (prefix: string) => string;

package/lib/utils/image_plugins/utils.js

@@ -1,3 +1,16 @@
+import { getMarkdownStyle } from "../../data/markdownStyles.js";
+import { randomUUID } from "node:crypto";
+import nodeProcess from "node:process";
 export const parrotingImagePath = (params) => {
     return params.imagePath;
 };
+export const resolveStyle = (styleName, fallbackStyle) => {
+    const customStyle = styleName ? getMarkdownStyle(styleName) : undefined;
+    return customStyle ? customStyle.css : fallbackStyle;
+};
+export const generateUniqueId = (prefix) => {
+    if (nodeProcess.env.NODE_ENV === "test") {
+        return "id";
+    }
+    return `${prefix}-${randomUUID().slice(0, 8)}`;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.1.28",
+  "version": "2.1.30",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",