mulmocast 2.6.3 → 2.6.4

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

@@ -263,6 +263,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 +1554,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 +1739,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 +1996,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?: {
@@ -2415,6 +2468,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 +3759,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 +3944,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 +4201,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?: {
@@ -4574,6 +4680,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.4",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",