mulmocast 2.2.5 → 2.2.6

package/lib/slide/index.d.ts

@@ -1,5 +1,6 @@
 export { generateSlideHTML } from "./render.js";
+export type { ResolvedBranding } from "./render.js";
 export { renderSlideContent } from "./layouts/index.js";
 export { renderContentBlock, renderContentBlocks } from "./blocks.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";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, slideBrandingLogoSchema, slideBrandingSchema, } 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, SlideBrandingLogo, SlideBranding, } 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, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, } from "./schema.js";
+export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, slideBrandingLogoSchema, slideBrandingSchema, } from "./schema.js";

package/lib/slide/render.d.ts

@@ -1,3 +1,17 @@
 import type { SlideTheme, SlideLayout } from "./schema.js";
+/** Pre-resolved branding data (all sources converted to data URLs) */
+export type ResolvedBranding = {
+    logo?: {
+        dataUrl: string;
+        position: string;
+        width: number;
+    };
+    backgroundImage?: {
+        dataUrl: string;
+        size: string;
+        opacity: number;
+        bgOpacity?: number;
+    };
+};
 /** Generate a complete HTML document for a single slide */
-export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout, reference?: string) => string;
+export declare const generateSlideHTML: (theme: SlideTheme, slide: SlideLayout, reference?: string, branding?: ResolvedBranding) => string;

package/lib/slide/render.js

@@ -21,18 +21,56 @@ const buildCdnScripts = (theme, slide) => {
     }
     return scripts.join("\n");
 };
+/** Map branding logo position to Tailwind CSS classes */
+const logoPositionClasses = {
+    "top-left": "top-5 left-6",
+    "top-right": "top-5 right-6",
+    "bottom-left": "bottom-5 left-6",
+    "bottom-right": "bottom-5 right-6",
+};
+/**
+ * Render branding background layers.
+ * - Without bgOpacity: image overlaid on slide bg at given opacity
+ * - With bgOpacity: image at full opacity, then slide bg color as semi-transparent overlay
+ */
+const renderBrandingBackground = (branding, bgHex) => {
+    if (!branding.backgroundImage)
+        return "";
+    const { dataUrl, size, opacity, bgOpacity } = branding.backgroundImage;
+    const bgSize = size === "fill" ? "100% 100%" : size;
+    if (bgOpacity !== undefined) {
+        const parts = [];
+        parts.push(`<div class="absolute inset-0 z-0" style="background-image:url('${dataUrl}');background-size:${bgSize};background-position:center;background-repeat:no-repeat;opacity:${opacity}"></div>`);
+        parts.push(`<div class="absolute inset-0 z-0" style="background-color:#${bgHex};opacity:${bgOpacity}"></div>`);
+        return parts.join("\n");
+    }
+    return `<div class="absolute inset-0 z-0" style="background-image:url('${dataUrl}');background-size:${bgSize};background-position:center;background-repeat:no-repeat;opacity:${opacity}"></div>`;
+};
+/** Render branding logo element */
+const renderBrandingLogo = (branding) => {
+    if (!branding.logo)
+        return "";
+    const { dataUrl, position, width } = branding.logo;
+    const posClasses = logoPositionClasses[position] ?? logoPositionClasses["top-right"];
+    return `<img class="absolute ${posClasses} z-10" src="${dataUrl}" width="${width}" alt="" style="pointer-events:none">`;
+};
 /** Generate a complete HTML document for a single slide */
-export const generateSlideHTML = (theme, slide, reference) => {
+export const generateSlideHTML = (theme, slide, reference, branding) => {
     const content = renderSlideContent(slide);
     const twConfig = buildTailwindConfig(theme);
     const cdnScripts = buildCdnScripts(theme, slide);
     const slideStyle = slide.style;
-    const bgCls = slideStyle?.bgColor ? "" : "bg-d-bg";
-    const inlineStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
+    const hasBgOpacity = branding?.backgroundImage?.bgOpacity !== undefined;
+    const bgCls = hasBgOpacity || slideStyle?.bgColor ? "" : "bg-d-bg";
+    const bgColorStyle = slideStyle?.bgColor ? ` style="background-color:#${sanitizeHex(slideStyle.bgColor)}"` : "";
+    const inlineStyle = hasBgOpacity ? "" : bgColorStyle;
     const footer = slideStyle?.footer ? `<p class="absolute bottom-2 right-4 text-xs text-d-dim font-body">${escapeHtml(slideStyle.footer)}</p>` : "";
     const referenceHtml = reference
         ? `<div class="mt-auto px-4 pb-2"><p class="text-sm text-d-muted font-body opacity-80">${escapeHtml(reference)}</p></div>`
         : "";
+    const bgHex = sanitizeHex(slideStyle?.bgColor ?? theme.colors.bg);
+    const brandingBg = branding ? renderBrandingBackground(branding, bgHex) : "";
+    const brandingLogo = branding ? renderBrandingLogo(branding) : "";
     return `<!DOCTYPE html>
 <html lang="en" class="h-full">
 <head>
@@ -47,10 +85,14 @@ ${cdnScripts}
 </head>
 <body class="h-full">
 <div class="relative overflow-hidden ${bgCls} w-full h-full flex flex-col"${inlineStyle}>
+${brandingBg}
+<div class="relative z-[1] flex flex-col flex-1">
 ${content}
 ${referenceHtml}
 ${footer}
 </div>
+${brandingLogo}
+</div>
 </body>
 </html>`;
 };

package/lib/slide/schema.d.ts

@@ -4351,6 +4351,66 @@ export declare const funnelSlideSchema: z.ZodObject<{
     }, z.core.$strip>>;
     layout: z.ZodLiteral<"funnel">;
 }, z.core.$strip>;
+export declare const slideBrandingLogoSchema: z.ZodObject<{
+    source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+        kind: z.ZodLiteral<"url">;
+        url: z.ZodURL;
+    }, z.core.$strict>, z.ZodObject<{
+        kind: z.ZodLiteral<"base64">;
+        data: z.ZodString;
+    }, z.core.$strict>, z.ZodObject<{
+        kind: z.ZodLiteral<"path">;
+        path: z.ZodString;
+    }, z.core.$strict>], "kind">;
+    position: z.ZodDefault<z.ZodEnum<{
+        "top-left": "top-left";
+        "top-right": "top-right";
+        "bottom-left": "bottom-left";
+        "bottom-right": "bottom-right";
+    }>>;
+    width: z.ZodDefault<z.ZodNumber>;
+}, z.core.$strict>;
+export declare const slideBrandingSchema: z.ZodObject<{
+    logo: z.ZodOptional<z.ZodObject<{
+        source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+            kind: z.ZodLiteral<"url">;
+            url: z.ZodURL;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"base64">;
+            data: z.ZodString;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"path">;
+            path: z.ZodString;
+        }, z.core.$strict>], "kind">;
+        position: z.ZodDefault<z.ZodEnum<{
+            "top-left": "top-left";
+            "top-right": "top-right";
+            "bottom-left": "bottom-left";
+            "bottom-right": "bottom-right";
+        }>>;
+        width: z.ZodDefault<z.ZodNumber>;
+    }, z.core.$strict>>;
+    backgroundImage: z.ZodOptional<z.ZodObject<{
+        source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+            kind: z.ZodLiteral<"url">;
+            url: z.ZodURL;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"base64">;
+            data: z.ZodString;
+        }, z.core.$strict>, z.ZodObject<{
+            kind: z.ZodLiteral<"path">;
+            path: z.ZodString;
+        }, z.core.$strict>], "kind">;
+        size: z.ZodOptional<z.ZodEnum<{
+            contain: "contain";
+            cover: "cover";
+            fill: "fill";
+            auto: "auto";
+        }>>;
+        opacity: z.ZodOptional<z.ZodNumber>;
+        bgOpacity: z.ZodOptional<z.ZodNumber>;
+    }, z.core.$strip>>;
+}, z.core.$strict>;
 export declare const slideLayoutSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     title: z.ZodString;
     subtitle: z.ZodOptional<z.ZodString>;
@@ -8985,6 +9045,47 @@ export declare const mulmoSlideMediaSchema: z.ZodObject<{
         layout: z.ZodLiteral<"funnel">;
     }, z.core.$strip>], "layout">;
     reference: z.ZodOptional<z.ZodString>;
+    branding: z.ZodOptional<z.ZodNullable<z.ZodObject<{
+        logo: z.ZodOptional<z.ZodObject<{
+            source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                kind: z.ZodLiteral<"url">;
+                url: z.ZodURL;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"base64">;
+                data: z.ZodString;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"path">;
+                path: z.ZodString;
+            }, z.core.$strict>], "kind">;
+            position: z.ZodDefault<z.ZodEnum<{
+                "top-left": "top-left";
+                "top-right": "top-right";
+                "bottom-left": "bottom-left";
+                "bottom-right": "bottom-right";
+            }>>;
+            width: z.ZodDefault<z.ZodNumber>;
+        }, z.core.$strict>>;
+        backgroundImage: z.ZodOptional<z.ZodObject<{
+            source: z.ZodDiscriminatedUnion<[z.ZodObject<{
+                kind: z.ZodLiteral<"url">;
+                url: z.ZodURL;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"base64">;
+                data: z.ZodString;
+            }, z.core.$strict>, z.ZodObject<{
+                kind: z.ZodLiteral<"path">;
+                path: z.ZodString;
+            }, z.core.$strict>], "kind">;
+            size: z.ZodOptional<z.ZodEnum<{
+                contain: "contain";
+                cover: "cover";
+                fill: "fill";
+                auto: "auto";
+            }>>;
+            opacity: z.ZodOptional<z.ZodNumber>;
+            bgOpacity: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strip>>;
+    }, z.core.$strict>>>;
 }, z.core.$strict>;
 export type AccentColorKey = z.infer<typeof accentColorKeySchema>;
 export type SlideThemeColors = z.infer<typeof slideThemeColorsSchema>;
@@ -9027,4 +9128,6 @@ 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 SlideBrandingLogo = z.infer<typeof slideBrandingLogoSchema>;
+export type SlideBranding = z.infer<typeof slideBrandingSchema>;
 export type MulmoSlideMedia = z.infer<typeof mulmoSlideMediaSchema>;

package/lib/slide/schema.js

@@ -358,6 +358,37 @@ export const funnelSlideSchema = z.object({
     callout: calloutBarSchema.optional(),
 });
 // ═══════════════════════════════════════════════════════════
+// Branding — logo & background image overlay
+// ═══════════════════════════════════════════════════════════
+/**
+ * Media source for branding assets (self-contained definition to avoid
+ * circular dependency with src/types/schema.ts).
+ */
+const slideMediaSourceSchema = z.discriminatedUnion("kind", [
+    z.object({ kind: z.literal("url"), url: z.url() }).strict(),
+    z.object({ kind: z.literal("base64"), data: z.string().min(1) }).strict(),
+    z.object({ kind: z.literal("path"), path: z.string().min(1) }).strict(),
+]);
+const slideBackgroundImageSourceSchema = z.object({
+    source: slideMediaSourceSchema,
+    size: z.enum(["cover", "contain", "fill", "auto"]).optional(),
+    opacity: z.number().min(0).max(1).optional(),
+    bgOpacity: z.number().min(0).max(1).optional(),
+});
+export const slideBrandingLogoSchema = z
+    .object({
+    source: slideMediaSourceSchema,
+    position: z.enum(["top-left", "top-right", "bottom-left", "bottom-right"]).default("top-right"),
+    width: z.number().positive().default(120),
+})
+    .strict();
+export const slideBrandingSchema = z
+    .object({
+    logo: slideBrandingLogoSchema.optional(),
+    backgroundImage: slideBackgroundImageSourceSchema.optional(),
+})
+    .strict();
+// ═══════════════════════════════════════════════════════════
 // Slide Union & Media Schema
 // ═══════════════════════════════════════════════════════════
 export const slideLayoutSchema = z.discriminatedUnion("layout", [
@@ -380,5 +411,6 @@ export const mulmoSlideMediaSchema = z
     theme: slideThemeSchema.optional(),
     slide: slideLayoutSchema,
     reference: z.string().optional(),
+    branding: slideBrandingSchema.nullable().optional(),
 })
     .strict();