mulmocast 2.1.29 → 2.1.30

package/README.md

@@ -343,6 +343,50 @@ To force regeneration, delete the old files — including temporary files — un
 
 If you modify the text or instruction fields in a MulmoScript, mulmo will automatically detect the changes and regenerate the corresponding audio content upon re-run.
 
+## Markdown Slide Styles
+
+MulmoCast includes 100 pre-designed CSS styles for markdown slides, organized in 10 categories:
+
+| Category | Description | Example Styles |
+|----------|-------------|----------------|
+| business | Professional corporate designs | corporate-blue, executive-gray, finance-green |
+| tech | Technology and developer themes | cyber-neon, matrix-green, terminal-dark |
+| creative | Artistic and expressive styles | artistic-splash, watercolor-soft, graffiti |
+| minimalist | Clean and simple designs | clean-white, zen-beige, nordic-light |
+| nature | Nature-inspired themes | forest-green, ocean-blue, sunset-orange |
+| dark | Dark mode and elegant themes | charcoal-elegant, midnight-blue, obsidian |
+| colorful | Vibrant and bold colors | vibrant-pink, candy-colors, aurora |
+| vintage | Retro and classic styles | retro-70s, art-deco, typewriter |
+| japanese | Japanese aesthetic designs | washi-paper, sakura-pink, zen-garden |
+| geometric | Pattern-based designs | hexagon-pattern, isometric, bauhaus |
+
+### Usage
+
+Add the `style` property to a markdown beat:
+
+```json
+{
+  "beats": [
+    {
+      "text": "Corporate presentation slide",
+      "image": {
+        "type": "markdown",
+        "markdown": "# Quarterly Report\n\n## Key Highlights\n\n- Revenue up 15%\n- New market expansion\n- Team growth",
+        "style": "corporate-blue"
+      }
+    }
+  ]
+}
+```
+
+### Discover Available Styles
+
+Use the `mulmo tool info` command to see all available styles:
+
+```bash
+mulmo tool info styles
+```
+
 ## MulmoScript Format
 
 MulmoScript is a JSON format to define podcast or video scripts:
@@ -569,6 +613,7 @@ Commands:
   mulmo tool complete <file> Complete partial MulmoScript with defaults
   mulmo tool prompt          Dump prompt from template
   mulmo tool schema          Dump mulmocast schema
+  mulmo tool info [category] Show available options (styles, bgm, voices, etc.)
 
 Options:
       --version  Show version number                                   [boolean]
@@ -686,6 +731,38 @@ Examples:
   mulmo tool complete input.json -t children_book
 ```
 
+```
+mulmo tool info [category]
+
+Show available options for MulmoScript configuration
+
+Positionals:
+  category  Category to show info for
+    [string] [choices: "styles", "bgm", "templates", "voices", "images", "movies", "llm"]
+
+Options:
+      --version  Show version number                                   [boolean]
+  -v, --verbose  verbose log               [boolean] [required] [default: false]
+  -h, --help     Show help                                             [boolean]
+  -F, --format   Output format      [string] [choices: "text", "json", "yaml"]
+
+Examples:
+  # Show all available categories
+  mulmo tool info
+
+  # List all 100 markdown styles
+  mulmo tool info styles
+
+  # List available BGM assets
+  mulmo tool info bgm
+
+  # List TTS providers and voices
+  mulmo tool info voices
+
+  # Output as JSON for programmatic use
+  mulmo tool info styles --format json
+```
+
 
 
 ## Contributing

package/assets/html/tailwind.html

@@ -7,6 +7,39 @@
   <title>${title}</title>
   <!-- Tailwind CSS CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Mermaid CDN for embedded diagrams -->
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <script>
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: 'default',
+      flowchart: { useMaxWidth: true }
+    });
+    document.addEventListener("DOMContentLoaded", () => {
+      const mermaidElements = document.querySelectorAll(".mermaid");
+      if (mermaidElements.length > 0) {
+        mermaid.init(undefined, ".mermaid");
+        mermaidElements.forEach(el => el.dataset.ready = "true");
+      }
+    });
+  </script>
+  <style>
+    /* Mermaid diagram styling */
+    .mermaid {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      min-height: 100px;
+    }
+    .mermaid svg {
+      max-width: 100%;
+      max-height: 100%;
+      width: auto;
+      height: auto;
+    }
+    ${custom_style}
+  </style>
 </head>
 <body class="bg-white text-gray-800 h-full flex flex-col">
   ${html_body}

package/lib/types/schema.d.ts

@@ -179,9 +179,30 @@ 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<{
@@ -204,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";
@@ -271,7 +293,16 @@ 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">;
@@ -331,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;
@@ -798,7 +830,16 @@ 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">;
@@ -858,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;
@@ -1983,7 +2025,16 @@ 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">;
@@ -2043,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;
@@ -2872,7 +2924,16 @@ 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">;
@@ -2932,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,29 @@ 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();
@@ -120,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,16 @@ 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";
@@ -322,6 +331,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                     subtitle?: string | undefined;
                     bullets?: string[] | undefined;
                 };
+                style?: string | undefined;
             } | {
                 type: "chart";
                 title: string;
@@ -931,7 +941,16 @@ 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";
@@ -979,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; 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,29 +1,72 @@
-import { renderMarkdownToImage } from "../html_render.js";
-import { parrotingImagePath } from "./utils.js";
-import { getMarkdownStyle } from "../../data/markdownStyles.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) ?? "";
-    // Use custom style if specified, otherwise use default textSlideStyle
-    const styleName = beat.image.style;
-    const customStyle = styleName ? getMarkdownStyle(styleName) : undefined;
-    const style = customStyle ? customStyle.css : textSlideStyle;
-    await renderMarkdownToImage(markdown, style, 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 };