mulmocast 2.1.40 → 2.2.1

package/lib/data/slideStyles.js

@@ -0,0 +1,206 @@
+export const slideStyles = {
+    slide_corporate: {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        canvasSize: {
+            height: 720,
+            width: 1280,
+        },
+        slideParams: {
+            theme: {
+                colors: {
+                    accent: "7C3AED",
+                    bg: "F8FAFC",
+                    bgCard: "FFFFFF",
+                    bgCardAlt: "F1F5F9",
+                    danger: "DC2626",
+                    highlight: "DB2777",
+                    info: "0891B2",
+                    primary: "2563EB",
+                    success: "16A34A",
+                    text: "0F172A",
+                    textDim: "94A3B8",
+                    textMuted: "475569",
+                    warning: "EA580C",
+                },
+                fonts: {
+                    body: "Helvetica",
+                    mono: "Menlo",
+                    title: "Georgia",
+                },
+            },
+        },
+    },
+    slide_creative: {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        canvasSize: {
+            height: 720,
+            width: 1280,
+        },
+        slideParams: {
+            theme: {
+                colors: {
+                    accent: "FB923C",
+                    bg: "1C1917",
+                    bgCard: "292524",
+                    bgCardAlt: "3D3733",
+                    danger: "EF4444",
+                    highlight: "E879F9",
+                    info: "38BDF8",
+                    primary: "F43F5E",
+                    success: "4ADE80",
+                    text: "FAFAF9",
+                    textDim: "A8A29E",
+                    textMuted: "D6D3D1",
+                    warning: "FBBF24",
+                },
+                fonts: {
+                    body: "Helvetica",
+                    mono: "Consolas",
+                    title: "Georgia",
+                },
+            },
+        },
+    },
+    slide_dark: {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        canvasSize: {
+            height: 720,
+            width: 1280,
+        },
+        slideParams: {
+            theme: {
+                colors: {
+                    accent: "8B5CF6",
+                    bg: "0F172A",
+                    bgCard: "1E293B",
+                    bgCardAlt: "334155",
+                    danger: "EF4444",
+                    highlight: "EC4899",
+                    info: "14B8A6",
+                    primary: "3B82F6",
+                    success: "22C55E",
+                    text: "F8FAFC",
+                    textDim: "64748B",
+                    textMuted: "CBD5E1",
+                    warning: "F59E0B",
+                },
+                fonts: {
+                    body: "Calibri",
+                    mono: "Consolas",
+                    title: "Georgia",
+                },
+            },
+        },
+    },
+    slide_minimal: {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        canvasSize: {
+            height: 720,
+            width: 1280,
+        },
+        slideParams: {
+            theme: {
+                colors: {
+                    accent: "7C3AED",
+                    bg: "F8FAFC",
+                    bgCard: "FFFFFF",
+                    bgCardAlt: "F1F5F9",
+                    danger: "DC2626",
+                    highlight: "DB2777",
+                    info: "0891B2",
+                    primary: "2563EB",
+                    success: "059669",
+                    text: "0F172A",
+                    textDim: "94A3B8",
+                    textMuted: "475569",
+                    warning: "D97706",
+                },
+                fonts: {
+                    body: "Calibri",
+                    mono: "Consolas",
+                    title: "Trebuchet MS",
+                },
+            },
+        },
+    },
+    slide_pop: {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        canvasSize: {
+            height: 720,
+            width: 1280,
+        },
+        slideParams: {
+            theme: {
+                colors: {
+                    accent: "7C3AED",
+                    bg: "FFF0F5",
+                    bgCard: "FFFFFF",
+                    bgCardAlt: "FDE8EF",
+                    danger: "EF4444",
+                    highlight: "F97316",
+                    info: "06B6D4",
+                    primary: "E91E63",
+                    success: "10B981",
+                    text: "1A1A2E",
+                    textDim: "9090B0",
+                    textMuted: "4A4A6A",
+                    warning: "F59E0B",
+                },
+                fonts: {
+                    body: "Calibri",
+                    mono: "Consolas",
+                    title: "Georgia",
+                },
+            },
+        },
+    },
+    slide_warm: {
+        $mulmocast: {
+            credit: "closing",
+            version: "1.1",
+        },
+        canvasSize: {
+            height: 720,
+            width: 1280,
+        },
+        slideParams: {
+            theme: {
+                colors: {
+                    accent: "D946EF",
+                    bg: "FFFBEB",
+                    bgCard: "FFFFFF",
+                    bgCardAlt: "FEF3C7",
+                    danger: "DC2626",
+                    highlight: "E11D48",
+                    info: "0284C7",
+                    primary: "EA580C",
+                    success: "16A34A",
+                    text: "1C1917",
+                    textDim: "A8A29E",
+                    textMuted: "57534E",
+                    warning: "CA8A04",
+                },
+                fonts: {
+                    body: "Calibri",
+                    mono: "Consolas",
+                    title: "Georgia",
+                },
+            },
+        },
+    },
+};

package/lib/data/slideThemes.d.ts

@@ -0,0 +1,134 @@
+export declare const slideThemes: {
+    corporate: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    creative: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    dark: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    minimal: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    pop: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+    warm: {
+        colors: {
+            accent: string;
+            bg: string;
+            bgCard: string;
+            bgCardAlt: string;
+            danger: string;
+            highlight: string;
+            info: string;
+            primary: string;
+            success: string;
+            text: string;
+            textDim: string;
+            textMuted: string;
+            warning: string;
+        };
+        fonts: {
+            body: string;
+            mono: string;
+            title: string;
+        };
+    };
+};

package/lib/data/slideThemes.js

@@ -0,0 +1,134 @@
+export const slideThemes = {
+    corporate: {
+        colors: {
+            accent: "7C3AED",
+            bg: "F8FAFC",
+            bgCard: "FFFFFF",
+            bgCardAlt: "F1F5F9",
+            danger: "DC2626",
+            highlight: "DB2777",
+            info: "0891B2",
+            primary: "2563EB",
+            success: "16A34A",
+            text: "0F172A",
+            textDim: "94A3B8",
+            textMuted: "475569",
+            warning: "EA580C",
+        },
+        fonts: {
+            body: "Helvetica",
+            mono: "Menlo",
+            title: "Georgia",
+        },
+    },
+    creative: {
+        colors: {
+            accent: "FB923C",
+            bg: "1C1917",
+            bgCard: "292524",
+            bgCardAlt: "3D3733",
+            danger: "EF4444",
+            highlight: "E879F9",
+            info: "38BDF8",
+            primary: "F43F5E",
+            success: "4ADE80",
+            text: "FAFAF9",
+            textDim: "A8A29E",
+            textMuted: "D6D3D1",
+            warning: "FBBF24",
+        },
+        fonts: {
+            body: "Helvetica",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+    dark: {
+        colors: {
+            accent: "8B5CF6",
+            bg: "0F172A",
+            bgCard: "1E293B",
+            bgCardAlt: "334155",
+            danger: "EF4444",
+            highlight: "EC4899",
+            info: "14B8A6",
+            primary: "3B82F6",
+            success: "22C55E",
+            text: "F8FAFC",
+            textDim: "64748B",
+            textMuted: "CBD5E1",
+            warning: "F59E0B",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+    minimal: {
+        colors: {
+            accent: "7C3AED",
+            bg: "F8FAFC",
+            bgCard: "FFFFFF",
+            bgCardAlt: "F1F5F9",
+            danger: "DC2626",
+            highlight: "DB2777",
+            info: "0891B2",
+            primary: "2563EB",
+            success: "059669",
+            text: "0F172A",
+            textDim: "94A3B8",
+            textMuted: "475569",
+            warning: "D97706",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Trebuchet MS",
+        },
+    },
+    pop: {
+        colors: {
+            accent: "7C3AED",
+            bg: "FFF0F5",
+            bgCard: "FFFFFF",
+            bgCardAlt: "FDE8EF",
+            danger: "EF4444",
+            highlight: "F97316",
+            info: "06B6D4",
+            primary: "E91E63",
+            success: "10B981",
+            text: "1A1A2E",
+            textDim: "9090B0",
+            textMuted: "4A4A6A",
+            warning: "F59E0B",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+    warm: {
+        colors: {
+            accent: "D946EF",
+            bg: "FFFBEB",
+            bgCard: "FFFFFF",
+            bgCardAlt: "FEF3C7",
+            danger: "DC2626",
+            highlight: "E11D48",
+            info: "0284C7",
+            primary: "EA580C",
+            success: "16A34A",
+            text: "1C1917",
+            textDim: "A8A29E",
+            textMuted: "57534E",
+            warning: "CA8A04",
+        },
+        fonts: {
+            body: "Calibri",
+            mono: "Consolas",
+            title: "Georgia",
+        },
+    },
+};

package/lib/methods/mulmo_media_source.d.ts

@@ -1,5 +1,6 @@
 import type { MulmoMediaSource, MulmoMediaMermaidSource, MulmoStudioContext, ImageType } from "../types/index.js";
 export declare const getExtention: (contentType: string | null, url: string) => string;
+export declare const pathToDataUrl: (filePath: string) => string;
 export declare const MulmoMediaSourceMethods: {
     getText(mediaSource: MulmoMediaMermaidSource, context: MulmoStudioContext): Promise<string | null>;
     resolve(mediaSource: MulmoMediaSource | undefined, context: MulmoStudioContext): string | null;

package/lib/methods/mulmo_media_source.js

@@ -60,12 +60,26 @@ const urlToDataUrl = async (url, timeoutMs = DEFAULT_FETCH_TIMEOUT_MS) => {
         clearTimeout(timeoutId);
     }
 };
+/** Map file extension to MIME type for data URLs */
+const extensionToMimeType = (ext) => {
+    const mimeMap = {
+        jpg: "image/jpeg",
+        jpeg: "image/jpeg",
+        png: "image/png",
+        gif: "image/gif",
+        webp: "image/webp",
+        svg: "image/svg+xml",
+        bmp: "image/bmp",
+        ico: "image/x-icon",
+    };
+    return mimeMap[ext.toLowerCase()] ?? `image/${ext}`;
+};
 // Convert local file path to data URL (base64 encoded)
-const pathToDataUrl = (filePath) => {
+export const pathToDataUrl = (filePath) => {
     assert(fs.existsSync(filePath), `File not found: ${filePath}`, false, mediaSourceFileNotFoundError(filePath));
     const buffer = fs.readFileSync(filePath);
-    const extension = getExtention(null, filePath);
-    const mimeType = extension === "jpg" ? "image/jpeg" : `image/${extension}`;
+    const ext = filePath.split(".").pop()?.toLowerCase() ?? "png";
+    const mimeType = extensionToMimeType(ext);
     return `data:${mimeType};base64,${buffer.toString("base64")}`;
 };
 // Convert base64 string to data URL format

package/lib/slide/blocks.d.ts

@@ -3,3 +3,5 @@ import type { ContentBlock } from "./schema.js";
 export declare const renderContentBlock: (block: ContentBlock) => string;
 /** Render an array of content blocks to HTML */
 export declare const renderContentBlocks: (blocks: ContentBlock[]) => string;
+/** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
+export declare const renderCardContentBlocks: (blocks: ContentBlock[]) => string;

package/lib/slide/blocks.js

@@ -1,4 +1,4 @@
-import { escapeHtml, nl2br, c } from "./utils.js";
+import { escapeHtml, nl2br, c, generateSlideId } from "./utils.js";
 /** Render a single content block to HTML */
 export const renderContentBlock = (block) => {
     switch (block.type) {
@@ -16,6 +16,12 @@ export const renderContentBlock = (block) => {
             return renderDivider(block);
         case "image":
             return renderImage(block);
+        case "imageRef":
+            return renderImageRefPlaceholder(block);
+        case "chart":
+            return renderChart(block);
+        case "mermaid":
+            return renderMermaid(block);
         default:
             return `<p class="text-sm text-d-muted font-body">[unknown block type]</p>`;
     }
@@ -24,6 +30,17 @@ export const renderContentBlock = (block) => {
 export const renderContentBlocks = (blocks) => {
     return blocks.map(renderContentBlock).join("\n");
 };
+/** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
+export const renderCardContentBlocks = (blocks) => {
+    return blocks
+        .map((block) => {
+        if (block.type === "image") {
+            return `<div class="aspect-video shrink-0 overflow-hidden">${renderContentBlock(block)}</div>`;
+        }
+        return renderContentBlock(block);
+    })
+        .join("\n");
+};
 const resolveTextColor = (block) => {
     if (block.color)
         return `text-${c(block.color)}`;
@@ -93,5 +110,40 @@ const renderDivider = (block) => {
 };
 const renderImage = (block) => {
     const fit = block.fit === "cover" ? "object-cover" : "object-contain";
-    return `<img src="${escapeHtml(block.src)}" alt="${escapeHtml(block.alt || "")}" class="rounded ${fit} max-h-full w-full" />`;
+    return `<div class="min-h-0 flex-1 overflow-hidden flex items-center"><img src="${escapeHtml(block.src)}" alt="${escapeHtml(block.alt || "")}" class="rounded ${fit} w-full h-full" /></div>`;
+};
+/** Placeholder for unresolved imageRef blocks — should be resolved before rendering */
+const renderImageRefPlaceholder = (block) => {
+    return `<div class="min-h-0 flex-1 overflow-hidden flex items-center justify-center bg-d-alt rounded"><p class="text-sm text-d-dim font-body">[imageRef: ${escapeHtml(block.ref)}]</p></div>`;
+};
+const renderChart = (block) => {
+    const chartId = generateSlideId("chart");
+    const chartData = JSON.stringify(block.chartData);
+    const titleHtml = block.title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${escapeHtml(block.title)}</p>` : "";
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${titleHtml}
+  <div class="flex-1 min-h-0 relative">
+    <canvas id="${chartId}" data-chart-ready="false"></canvas>
+  </div>
+  <script>(function(){
+    const ctx=document.getElementById('${chartId}');
+    const d=${chartData};
+    if(!d.options)d.options={};
+    d.options.animation=false;
+    d.options.responsive=true;
+    d.options.maintainAspectRatio=false;
+    new Chart(ctx,d);
+    requestAnimationFrame(()=>requestAnimationFrame(()=>{ctx.dataset.chartReady="true"}));
+  })()</script>
+</div>`;
+};
+const renderMermaid = (block) => {
+    const mermaidId = generateSlideId("mermaid");
+    const titleHtml = block.title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${escapeHtml(block.title)}</p>` : "";
+    return `<div class="flex-1 min-h-0 flex flex-col">
+  ${titleHtml}
+  <div class="flex-1 min-h-0 flex justify-center items-center">
+    <div id="${mermaidId}" class="mermaid">${escapeHtml(block.code)}</div>
+  </div>
+</div>`;
 };

package/lib/slide/index.d.ts

@@ -1,5 +1,5 @@
 export { generateSlideHTML } from "./render.js";
 export { renderSlideContent } from "./layouts/index.js";
 export { renderContentBlock, renderContentBlocks } from "./blocks.js";
-export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, accentColorKeySchema } from "./schema.js";
-export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, ContentBlock, AccentColorKey, TitleSlide, ColumnsSlide, ComparisonSlide, GridSlide, BigQuoteSlide, StatsSlide, TimelineSlide, SplitSlide, MatrixSlide, TableSlide, FunnelSlide, Card, CalloutBar, SlideStyle, } from "./schema.js";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, } from "./schema.js";
+export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, ContentBlock, ImageRefBlock, ChartBlock, MermaidBlock, AccentColorKey, TitleSlide, ColumnsSlide, ComparisonSlide, GridSlide, BigQuoteSlide, StatsSlide, TimelineSlide, SplitSlide, MatrixSlide, TableSlide, FunnelSlide, Card, CalloutBar, SlideStyle, } from "./schema.js";

package/lib/slide/index.js

@@ -4,4 +4,4 @@ export { generateSlideHTML } from "./render.js";
 export { renderSlideContent } from "./layouts/index.js";
 export { renderContentBlock, renderContentBlocks } from "./blocks.js";
 // Schemas
-export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, accentColorKeySchema } from "./schema.js";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, } from "./schema.js";

package/lib/slide/layouts/columns.js

@@ -1,5 +1,5 @@
 import { escapeHtml, c, cardWrap, numBadge, iconSquare, slideHeader, renderCalloutBar } from "../utils.js";
-import { renderContentBlocks } from "../blocks.js";
+import { renderCardContentBlocks } from "../blocks.js";
 const buildColumnCard = (col) => {
     const accent = col.accentColor || "primary";
     const inner = [];
@@ -23,8 +23,8 @@ const buildColumnCard = (col) => {
     }
     if (col.content) {
         const centerCls = col.icon ? "text-center" : "";
-        inner.push(`<div class="mt-3 space-y-3 ${centerCls}">`);
-        inner.push(renderContentBlocks(col.content));
+        inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col ${centerCls}">`);
+        inner.push(renderCardContentBlocks(col.content));
         inner.push(`</div>`);
     }
     if (col.footer) {
@@ -43,7 +43,7 @@ export const layoutColumns = (data) => {
             colElements.push(`<div class="flex items-center shrink-0"><span class="text-2xl text-d-dim">\u25B6</span></div>`);
         }
     });
-    parts.push(`<div class="flex gap-4 px-12 mt-5 flex-1">`);
+    parts.push(`<div class="flex gap-4 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
     parts.push(colElements.join("\n"));
     parts.push(`</div>`);
     if (data.callout) {

package/lib/slide/layouts/comparison.js

@@ -5,19 +5,20 @@ const buildPanel = (panel) => {
     const inner = [];
     inner.push(`<h3 class="text-xl font-bold text-${c(accent)} font-body">${escapeHtml(panel.title)}</h3>`);
     if (panel.content) {
-        inner.push(`<div class="mt-4 space-y-3">`);
+        inner.push(`<div class="mt-4 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">`);
         inner.push(renderContentBlocks(panel.content));
         inner.push(`</div>`);
     }
     if (panel.footer) {
-        inner.push(`<div class="flex-1"></div>`);
+        if (!panel.content)
+            inner.push(`<div class="flex-1"></div>`);
         inner.push(`<p class="text-sm text-d-dim font-body mt-3">${escapeHtml(panel.footer)}</p>`);
     }
     return cardWrap(accent, inner.join("\n"), "flex-1");
 };
 export const layoutComparison = (data) => {
     const parts = [slideHeader(data)];
-    parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1">`);
+    parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1 min-h-0 items-stretch">`);
     parts.push(buildPanel(data.left));
     parts.push(buildPanel(data.right));
     parts.push(`</div>`);