mulmocast 2.6.3 → 2.6.5

package/lib/types/schema.js

@@ -189,6 +189,8 @@ export const mulmoChartMediaSchema = z
     type: z.literal("chart"),
     title: z.string(),
     chartData: z.record(z.string(), z.any()),
+    style: z.string().optional(),
+    backgroundImage: backgroundImageSchema,
 })
     .strict();
 export const mulmoMermaidMediaSchema = z
@@ -342,6 +344,8 @@ export const mulmoImagePromptMediaSchema = z
     type: z.literal("imagePrompt"),
     prompt: z.string().min(1),
     canvasSize: z.object({ width: z.number(), height: z.number() }).strict().optional(),
+    referenceImageName: imageIdSchema.optional().describe("Reference another imageRefs key as input for image generation"),
+    referenceImage: mediaSourceSchema.optional().describe("Direct source (path/url/base64) as reference image for generation"),
 })
     .strict();
 export const mulmoImageParamsImagesValueSchema = z.union([
@@ -466,6 +470,10 @@ export const mulmoTransitionSchema = z.object({
     ]),
     duration: z.number().min(0).max(2).optional().default(0.3), // transition duration in seconds
 });
+export const movieReferenceImageSchema = z.object({
+    imageName: imageIdSchema.describe("Reference an imageRefs key"),
+    referenceType: z.enum(["ASSET", "STYLE"]).describe("ASSET: scene/object/character, STYLE: aesthetics/lighting"),
+});
 export const mulmoMovieParamsSchema = z.object({
     provider: text2MovieProviderSchema.optional(),
     model: z.string().optional(),
@@ -474,6 +482,12 @@ export const mulmoMovieParamsSchema = z.object({
     filters: z.array(mulmoVideoFilterSchema).optional(), // for movie.ts
     vertexai_project: z.string().optional(), // Google Cloud Project ID for Vertex AI
     vertexai_location: z.string().optional(), // Vertex AI location (default: us-central1)
+    firstFrameImageName: imageIdSchema.optional().describe("Reference an imageRefs key for the first frame (image-to-video input)"),
+    lastFrameImageName: imageIdSchema.optional().describe("Reference an imageRefs key for the last frame (image-to-video interpolation)"),
+    referenceImages: z
+        .array(movieReferenceImageSchema)
+        .optional()
+        .describe("Style/asset reference images (Veo 3.1). Mutually exclusive with imageName/lastFrameImageName"),
 });
 export const mulmoBeatSchema = z
     .object({

package/lib/types/slide.d.ts

@@ -4284,6 +4284,74 @@ export declare const tableSlideSchema: z.ZodObject<{
     }, z.core.$strip>>;
     layout: z.ZodLiteral<"table">;
 }, z.core.$strip>;
+export declare const waterfallItemSchema: z.ZodObject<{
+    label: z.ZodString;
+    value: z.ZodNumber;
+    isTotal: z.ZodOptional<z.ZodBoolean>;
+    color: z.ZodOptional<z.ZodEnum<{
+        success: "success";
+        primary: "primary";
+        accent: "accent";
+        warning: "warning";
+        danger: "danger";
+        info: "info";
+        highlight: "highlight";
+    }>>;
+}, z.core.$strip>;
+export declare const waterfallSlideSchema: z.ZodObject<{
+    title: z.ZodString;
+    stepLabel: z.ZodOptional<z.ZodString>;
+    subtitle: z.ZodOptional<z.ZodString>;
+    items: z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodNumber;
+        isTotal: z.ZodOptional<z.ZodBoolean>;
+        color: z.ZodOptional<z.ZodEnum<{
+            success: "success";
+            primary: "primary";
+            accent: "accent";
+            warning: "warning";
+            danger: "danger";
+            info: "info";
+            highlight: "highlight";
+        }>>;
+    }, z.core.$strip>>;
+    unit: z.ZodOptional<z.ZodString>;
+    callout: z.ZodOptional<z.ZodObject<{
+        text: z.ZodString;
+        label: z.ZodOptional<z.ZodString>;
+        color: z.ZodOptional<z.ZodEnum<{
+            success: "success";
+            primary: "primary";
+            accent: "accent";
+            warning: "warning";
+            danger: "danger";
+            info: "info";
+            highlight: "highlight";
+        }>>;
+        align: z.ZodOptional<z.ZodEnum<{
+            left: "left";
+            center: "center";
+        }>>;
+        leftBar: z.ZodOptional<z.ZodBoolean>;
+    }, z.core.$strip>>;
+    accentColor: z.ZodOptional<z.ZodEnum<{
+        success: "success";
+        primary: "primary";
+        accent: "accent";
+        warning: "warning";
+        danger: "danger";
+        info: "info";
+        highlight: "highlight";
+    }>>;
+    style: z.ZodOptional<z.ZodObject<{
+        bgColor: z.ZodOptional<z.ZodString>;
+        decorations: z.ZodOptional<z.ZodBoolean>;
+        bgOpacity: z.ZodOptional<z.ZodNumber>;
+        footer: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    layout: z.ZodLiteral<"waterfall">;
+}, z.core.$strip>;
 export declare const funnelStageSchema: z.ZodObject<{
     label: z.ZodString;
     value: z.ZodOptional<z.ZodString>;
@@ -6714,6 +6782,59 @@ export declare const slideLayoutSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
         footer: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;
     layout: z.ZodLiteral<"funnel">;
+}, z.core.$strip>, z.ZodObject<{
+    title: z.ZodString;
+    stepLabel: z.ZodOptional<z.ZodString>;
+    subtitle: z.ZodOptional<z.ZodString>;
+    items: z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodNumber;
+        isTotal: z.ZodOptional<z.ZodBoolean>;
+        color: z.ZodOptional<z.ZodEnum<{
+            success: "success";
+            primary: "primary";
+            accent: "accent";
+            warning: "warning";
+            danger: "danger";
+            info: "info";
+            highlight: "highlight";
+        }>>;
+    }, z.core.$strip>>;
+    unit: z.ZodOptional<z.ZodString>;
+    callout: z.ZodOptional<z.ZodObject<{
+        text: z.ZodString;
+        label: z.ZodOptional<z.ZodString>;
+        color: z.ZodOptional<z.ZodEnum<{
+            success: "success";
+            primary: "primary";
+            accent: "accent";
+            warning: "warning";
+            danger: "danger";
+            info: "info";
+            highlight: "highlight";
+        }>>;
+        align: z.ZodOptional<z.ZodEnum<{
+            left: "left";
+            center: "center";
+        }>>;
+        leftBar: z.ZodOptional<z.ZodBoolean>;
+    }, z.core.$strip>>;
+    accentColor: z.ZodOptional<z.ZodEnum<{
+        success: "success";
+        primary: "primary";
+        accent: "accent";
+        warning: "warning";
+        danger: "danger";
+        info: "info";
+        highlight: "highlight";
+    }>>;
+    style: z.ZodOptional<z.ZodObject<{
+        bgColor: z.ZodOptional<z.ZodString>;
+        decorations: z.ZodOptional<z.ZodBoolean>;
+        bgOpacity: z.ZodOptional<z.ZodNumber>;
+        footer: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    layout: z.ZodLiteral<"waterfall">;
 }, z.core.$strip>], "layout">;
 /** Media schema registered in mulmoImageAssetSchema */
 export declare const mulmoSlideMediaSchema: z.ZodObject<{
@@ -9043,6 +9164,59 @@ export declare const mulmoSlideMediaSchema: z.ZodObject<{
             footer: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>;
         layout: z.ZodLiteral<"funnel">;
+    }, z.core.$strip>, z.ZodObject<{
+        title: z.ZodString;
+        stepLabel: z.ZodOptional<z.ZodString>;
+        subtitle: z.ZodOptional<z.ZodString>;
+        items: z.ZodArray<z.ZodObject<{
+            label: z.ZodString;
+            value: z.ZodNumber;
+            isTotal: z.ZodOptional<z.ZodBoolean>;
+            color: z.ZodOptional<z.ZodEnum<{
+                success: "success";
+                primary: "primary";
+                accent: "accent";
+                warning: "warning";
+                danger: "danger";
+                info: "info";
+                highlight: "highlight";
+            }>>;
+        }, z.core.$strip>>;
+        unit: z.ZodOptional<z.ZodString>;
+        callout: z.ZodOptional<z.ZodObject<{
+            text: z.ZodString;
+            label: z.ZodOptional<z.ZodString>;
+            color: z.ZodOptional<z.ZodEnum<{
+                success: "success";
+                primary: "primary";
+                accent: "accent";
+                warning: "warning";
+                danger: "danger";
+                info: "info";
+                highlight: "highlight";
+            }>>;
+            align: z.ZodOptional<z.ZodEnum<{
+                left: "left";
+                center: "center";
+            }>>;
+            leftBar: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>>;
+        accentColor: z.ZodOptional<z.ZodEnum<{
+            success: "success";
+            primary: "primary";
+            accent: "accent";
+            warning: "warning";
+            danger: "danger";
+            info: "info";
+            highlight: "highlight";
+        }>>;
+        style: z.ZodOptional<z.ZodObject<{
+            bgColor: z.ZodOptional<z.ZodString>;
+            decorations: z.ZodOptional<z.ZodBoolean>;
+            bgOpacity: z.ZodOptional<z.ZodNumber>;
+            footer: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>>;
+        layout: z.ZodLiteral<"waterfall">;
     }, z.core.$strip>], "layout">;
     reference: z.ZodOptional<z.ZodString>;
     branding: z.ZodOptional<z.ZodNullable<z.ZodObject<{
@@ -9128,6 +9302,8 @@ export type TableCellValue = z.infer<typeof tableCellValueSchema>;
 export type TableSlide = z.infer<typeof tableSlideSchema>;
 export type FunnelStage = z.infer<typeof funnelStageSchema>;
 export type FunnelSlide = z.infer<typeof funnelSlideSchema>;
+export type WaterfallItem = z.infer<typeof waterfallItemSchema>;
+export type WaterfallSlide = z.infer<typeof waterfallSlideSchema>;
 export type SlideBrandingLogo = z.infer<typeof slideBrandingLogoSchema>;
 export type SlideBranding = z.infer<typeof slideBrandingSchema>;
 export type MulmoSlideMedia = z.infer<typeof mulmoSlideMediaSchema>;

package/lib/types/slide.js

@@ -341,6 +341,23 @@ export const tableSlideSchema = z.object({
     striped: z.boolean().optional(),
     callout: calloutBarSchema.optional(),
 });
+// ─── waterfall ───
+export const waterfallItemSchema = z.object({
+    label: z.string(),
+    value: z.number(),
+    isTotal: z.boolean().optional(),
+    color: accentColorKeySchema.optional(),
+});
+export const waterfallSlideSchema = z.object({
+    layout: z.literal("waterfall"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    items: z.array(waterfallItemSchema),
+    unit: z.string().optional(),
+    callout: calloutBarSchema.optional(),
+});
 // ─── funnel ───
 export const funnelStageSchema = z.object({
     label: z.string(),
@@ -403,6 +420,7 @@ export const slideLayoutSchema = z.discriminatedUnion("layout", [
     matrixSlideSchema,
     tableSlideSchema,
     funnelSlideSchema,
+    waterfallSlideSchema,
 ]);
 /** Media schema registered in mulmoImageAssetSchema */
 export const mulmoSlideMediaSchema = z

package/lib/utils/context.d.ts

@@ -89,6 +89,17 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                     width: number;
                     height: number;
                 } | undefined;
+                referenceImageName?: string | undefined;
+                referenceImage?: {
+                    kind: "url";
+                    url: string;
+                } | {
+                    kind: "base64";
+                    data: string;
+                } | {
+                    kind: "path";
+                    path: string;
+                } | undefined;
             }> | undefined;
             backgroundImage?: string | {
                 source: {
@@ -263,6 +274,12 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
             })[] | undefined;
             vertexai_project?: string | undefined;
             vertexai_location?: string | undefined;
+            firstFrameImageName?: string | undefined;
+            lastFrameImageName?: string | undefined;
+            referenceImages?: {
+                imageName: string;
+                referenceType: "ASSET" | "STYLE";
+            }[] | undefined;
         };
         soundEffectParams: {
             provider?: string | undefined;
@@ -1548,6 +1565,32 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                         bgOpacity?: number | undefined;
                         footer?: string | undefined;
                     } | undefined;
+                } | {
+                    title: string;
+                    items: {
+                        label: string;
+                        value: number;
+                        isTotal?: boolean | undefined;
+                        color?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
+                    }[];
+                    layout: "waterfall";
+                    stepLabel?: string | undefined;
+                    subtitle?: string | undefined;
+                    unit?: string | undefined;
+                    callout?: {
+                        text: string;
+                        label?: string | undefined;
+                        color?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
+                        align?: "left" | "center" | undefined;
+                        leftBar?: boolean | undefined;
+                    } | undefined;
+                    accentColor?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
+                    style?: {
+                        bgColor?: string | undefined;
+                        decorations?: boolean | undefined;
+                        bgOpacity?: number | undefined;
+                        footer?: string | undefined;
+                    } | undefined;
                 };
                 theme?: {
                     colors: {
@@ -1707,6 +1750,21 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 type: "chart";
                 title: string;
                 chartData: Record<string, any>;
+                style?: string | undefined;
+                backgroundImage?: string | {
+                    source: {
+                        kind: "url";
+                        url: string;
+                    } | {
+                        kind: "base64";
+                        data: string;
+                    } | {
+                        kind: "path";
+                        path: string;
+                    };
+                    size?: "contain" | "cover" | "fill" | "auto" | undefined;
+                    opacity?: number | undefined;
+                } | null | undefined;
             } | {
                 type: "mermaid";
                 title: string;
@@ -1949,6 +2007,12 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                 })[] | undefined;
                 vertexai_project?: string | undefined;
                 vertexai_location?: string | undefined;
+                firstFrameImageName?: string | undefined;
+                lastFrameImageName?: string | undefined;
+                referenceImages?: {
+                    imageName: string;
+                    referenceType: "ASSET" | "STYLE";
+                }[] | undefined;
                 speed?: number | undefined;
             } | undefined;
             soundEffectParams?: {
@@ -2019,6 +2083,17 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
                     width: number;
                     height: number;
                 } | undefined;
+                referenceImageName?: string | undefined;
+                referenceImage?: {
+                    kind: "url";
+                    url: string;
+                } | {
+                    kind: "base64";
+                    data: string;
+                } | {
+                    kind: "path";
+                    path: string;
+                } | undefined;
             }> | undefined;
             imageNames?: string[] | undefined;
             imagePrompt?: string | undefined;
@@ -2241,6 +2316,17 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                         width: number;
                         height: number;
                     } | undefined;
+                    referenceImageName?: string | undefined;
+                    referenceImage?: {
+                        kind: "url";
+                        url: string;
+                    } | {
+                        kind: "base64";
+                        data: string;
+                    } | {
+                        kind: "path";
+                        path: string;
+                    } | undefined;
                 }> | undefined;
                 backgroundImage?: string | {
                     source: {
@@ -2415,6 +2501,12 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                 })[] | undefined;
                 vertexai_project?: string | undefined;
                 vertexai_location?: string | undefined;
+                firstFrameImageName?: string | undefined;
+                lastFrameImageName?: string | undefined;
+                referenceImages?: {
+                    imageName: string;
+                    referenceType: "ASSET" | "STYLE";
+                }[] | undefined;
             };
             soundEffectParams: {
                 provider?: string | undefined;
@@ -3700,6 +3792,32 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                             bgOpacity?: number | undefined;
                             footer?: string | undefined;
                         } | undefined;
+                    } | {
+                        title: string;
+                        items: {
+                            label: string;
+                            value: number;
+                            isTotal?: boolean | undefined;
+                            color?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
+                        }[];
+                        layout: "waterfall";
+                        stepLabel?: string | undefined;
+                        subtitle?: string | undefined;
+                        unit?: string | undefined;
+                        callout?: {
+                            text: string;
+                            label?: string | undefined;
+                            color?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
+                            align?: "left" | "center" | undefined;
+                            leftBar?: boolean | undefined;
+                        } | undefined;
+                        accentColor?: "success" | "primary" | "accent" | "warning" | "danger" | "info" | "highlight" | undefined;
+                        style?: {
+                            bgColor?: string | undefined;
+                            decorations?: boolean | undefined;
+                            bgOpacity?: number | undefined;
+                            footer?: string | undefined;
+                        } | undefined;
                     };
                     theme?: {
                         colors: {
@@ -3859,6 +3977,21 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     type: "chart";
                     title: string;
                     chartData: Record<string, any>;
+                    style?: string | undefined;
+                    backgroundImage?: string | {
+                        source: {
+                            kind: "url";
+                            url: string;
+                        } | {
+                            kind: "base64";
+                            data: string;
+                        } | {
+                            kind: "path";
+                            path: string;
+                        };
+                        size?: "contain" | "cover" | "fill" | "auto" | undefined;
+                        opacity?: number | undefined;
+                    } | null | undefined;
                 } | {
                     type: "mermaid";
                     title: string;
@@ -4101,6 +4234,12 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     })[] | undefined;
                     vertexai_project?: string | undefined;
                     vertexai_location?: string | undefined;
+                    firstFrameImageName?: string | undefined;
+                    lastFrameImageName?: string | undefined;
+                    referenceImages?: {
+                        imageName: string;
+                        referenceType: "ASSET" | "STYLE";
+                    }[] | undefined;
                     speed?: number | undefined;
                 } | undefined;
                 soundEffectParams?: {
@@ -4171,6 +4310,17 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                         width: number;
                         height: number;
                     } | undefined;
+                    referenceImageName?: string | undefined;
+                    referenceImage?: {
+                        kind: "url";
+                        url: string;
+                    } | {
+                        kind: "base64";
+                        data: string;
+                    } | {
+                        kind: "path";
+                        path: string;
+                    } | undefined;
                 }> | undefined;
                 imageNames?: string[] | undefined;
                 imagePrompt?: string | undefined;
@@ -4400,6 +4550,17 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                     width: number;
                     height: number;
                 } | undefined;
+                referenceImageName?: string | undefined;
+                referenceImage?: {
+                    kind: "url";
+                    url: string;
+                } | {
+                    kind: "base64";
+                    data: string;
+                } | {
+                    kind: "path";
+                    path: string;
+                } | undefined;
             }> | undefined;
             backgroundImage?: string | {
                 source: {
@@ -4574,6 +4735,12 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
             })[] | undefined;
             vertexai_project?: string | undefined;
             vertexai_location?: string | undefined;
+            firstFrameImageName?: string | undefined;
+            lastFrameImageName?: string | undefined;
+            referenceImages?: {
+                imageName: string;
+                referenceType: "ASSET" | "STYLE";
+            }[] | undefined;
         };
         soundEffectParams: {
             provider?: string | undefined;

package/lib/utils/html_render.js

@@ -69,9 +69,9 @@ const scaleContentToFit = async (page, viewportWidth, viewportHeight) => {
 };
 /** Determine the appropriate waitUntil strategy based on HTML content */
 const resolveWaitUntil = (html) => {
-    const hasExternalImages = html.includes("<img") && /src=["']https?:\/\//.test(html);
+    const hasExternalResources = (html.includes("<img") && /src=["']https?:\/\//.test(html)) || /script src=["']https?:\/\//.test(html);
     const hasLocalImages = html.includes("<img") && /src=["']file:\/\//.test(html);
-    if (hasExternalImages)
+    if (hasExternalResources)
         return "networkidle0";
     if (hasLocalImages)
         return "load";
@@ -86,7 +86,8 @@ const resolveWaitUntil = (html) => {
 const loadHtmlIntoPage = async (page, html, timeout_ms) => {
     const waitUntil = resolveWaitUntil(html);
     const hasFileUrls = /file:\/\//.test(html);
-    if (hasFileUrls) {
+    const hasExternalScripts = /script src=["']https?:\/\//.test(html);
+    if (hasFileUrls || hasExternalScripts) {
         const tmpFile = nodePath.join(os.tmpdir(), `mulmocast_render_${crypto.randomUUID()}.html`);
         fs.writeFileSync(tmpFile, html);
         try {

package/lib/utils/image_plugins/chart.js

@@ -1,22 +1,35 @@
 import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate } from "../html_render.js";
 import { parrotingImagePath, generateUniqueId } from "./utils.js";
+import { resolveCombinedStyle } from "./bg_image_util.js";
 export const imageType = "chart";
+/** Chart.js plugin CDN URLs keyed by chart type */
+const CHART_PLUGIN_CDNS = {
+    sankey: "https://cdn.jsdelivr.net/npm/chartjs-chart-sankey",
+    treemap: "https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@3",
+};
+/** Resolve CDN script tags for Chart.js plugins based on chart type */
+const resolveChartPlugins = (chartType) => {
+    const cdn = CHART_PLUGIN_CDNS[chartType];
+    if (!cdn)
+        return "";
+    return `<script src="${cdn}"></script>`;
+};
 const processChart = async (params) => {
-    const { beat, imagePath, canvasSize, textSlideStyle } = params;
+    const { beat, imagePath, canvasSize } = params;
     if (!beat.image || beat.image.type !== imageType)
         return;
-    const isCircular = beat.image.chartData.type === "pie" ||
-        beat.image.chartData.type === "doughnut" ||
-        beat.image.chartData.type === "polarArea" ||
-        beat.image.chartData.type === "radar";
+    const chartType = beat.image.chartData.type;
+    const isCircular = chartType === "pie" || chartType === "doughnut" || chartType === "polarArea" || chartType === "radar";
     const chart_width = isCircular ? Math.min(canvasSize.width, canvasSize.height) * 0.75 : canvasSize.width * 0.75;
+    const combinedStyle = await resolveCombinedStyle(params, beat.image.backgroundImage, beat.image.style);
     const template = getHTMLFile("chart");
     const htmlData = interpolate(template, {
         title: beat.image.title,
-        style: textSlideStyle,
+        style: combinedStyle,
         chart_width: chart_width.toString(),
         chart_data: JSON.stringify(beat.image.chartData),
+        chart_plugins: resolveChartPlugins(chartType),
     });
     await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;

package/lib/utils/image_plugins/mermaid.js

@@ -3,6 +3,7 @@ import { getHTMLFile } from "../file.js";
 import { renderHTMLToImage, interpolate } from "../html_render.js";
 import { parrotingImagePath, generateUniqueId } from "./utils.js";
 import { resolveCombinedStyle } from "./bg_image_util.js";
+import { resolveImageRefs, resolveMovieRefs, resolveRelativeImagePaths } from "./html_tailwind.js";
 export const imageType = "mermaid";
 // Generate mermaid HTML from code string (shared utility)
 export const generateMermaidHtml = (code, title) => {
@@ -26,11 +27,14 @@ const processMermaid = async (params) => {
     const diagram_code = await MulmoMediaSourceMethods.getText(beat.image.code, context);
     if (diagram_code) {
         const combinedStyle = await resolveCombinedStyle(params, beat.image.backgroundImage, beat.image.style);
-        const htmlData = interpolate(template, {
+        const rawHtml = interpolate(template, {
             title: beat.image.title,
             style: combinedStyle,
             diagram_code: `${diagram_code}\n${beat.image.appendix?.join("\n") ?? ""}`,
         });
+        const resolvedImageRefs = resolveImageRefs(rawHtml, params.imageRefs ?? {});
+        const resolvedAllRefs = resolveMovieRefs(resolvedImageRefs, params.movieRefs ?? {});
+        const htmlData = resolveRelativeImagePaths(resolvedAllRefs, context.fileDirs.mulmoFileDirPath);
         await renderHTMLToImage(htmlData, imagePath, canvasSize.width, canvasSize.height, true);
     }
     return imagePath;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.6.3",
+  "version": "2.6.5",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -88,7 +88,7 @@
   "homepage": "https://github.com/receptron/mulmocast-cli#readme",
   "dependencies": {
     "@google-cloud/text-to-speech": "^6.4.0",
-    "@google/genai": "^1.45.0",
+    "@google/genai": "^1.46.0",
     "@graphai/anthropic_agent": "^2.0.12",
     "@graphai/browserless_agent": "^2.0.2",
     "@graphai/gemini_agent": "^2.0.5",
@@ -108,11 +108,11 @@
     "dotenv": "^17.3.1",
     "fluent-ffmpeg": "^2.1.3",
     "graphai": "^2.0.16",
-    "jsdom": "^29.0.0",
-    "marked": "^17.0.4",
+    "jsdom": "^29.0.1",
+    "marked": "^17.0.5",
     "mulmocast-vision": "^1.0.9",
     "ora": "^9.3.0",
-    "puppeteer": "^24.39.1",
+    "puppeteer": "^24.40.0",
     "replicate": "^1.4.0",
     "yaml": "^2.8.2",
     "yargs": "^18.0.0",
@@ -123,10 +123,10 @@
     "@receptron/test_utils": "^2.0.3",
     "@types/archiver": "^7.0.0",
     "@types/fluent-ffmpeg": "^2.1.28",
-    "@types/jsdom": "^28.0.0",
+    "@types/jsdom": "^28.0.1",
     "@types/yargs": "^17.0.35",
     "cross-env": "^10.1.0",
-    "eslint": "^10.0.3",
+    "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-sonarjs": "^4.0.2",