mulmocast 2.1.39 → 2.1.40

package/lib/slide/schema.js

@@ -0,0 +1,330 @@
+import { z } from "zod";
+// ═══════════════════════════════════════════════════════════
+// Foundation: Colors & Typography
+// ═══════════════════════════════════════════════════════════
+/** 6-digit hex without '#' prefix, e.g. "3B82F6" */
+const hexColorSchema = z.string().regex(/^[0-9A-Fa-f]{6}$/);
+/** Semantic accent colors usable on cards, badges, borders, etc. */
+export const accentColorKeySchema = z.enum(["primary", "accent", "success", "warning", "danger", "info", "highlight"]);
+export const slideThemeColorsSchema = z.object({
+    bg: hexColorSchema,
+    bgCard: hexColorSchema,
+    bgCardAlt: hexColorSchema,
+    text: hexColorSchema,
+    textMuted: hexColorSchema,
+    textDim: hexColorSchema,
+    primary: hexColorSchema,
+    accent: hexColorSchema,
+    success: hexColorSchema,
+    warning: hexColorSchema,
+    danger: hexColorSchema,
+    info: hexColorSchema,
+    highlight: hexColorSchema,
+});
+export const slideThemeFontsSchema = z.object({
+    title: z.string(),
+    body: z.string(),
+    mono: z.string(),
+});
+export const slideThemeSchema = z.object({
+    colors: slideThemeColorsSchema,
+    fonts: slideThemeFontsSchema,
+});
+// ═══════════════════════════════════════════════════════════
+// Content Blocks — the atoms of slide content
+// ═══════════════════════════════════════════════════════════
+export const textBlockSchema = z.object({
+    type: z.literal("text"),
+    value: z.string(),
+    align: z.enum(["left", "center", "right"]).optional(),
+    bold: z.boolean().optional(),
+    dim: z.boolean().optional(),
+    fontSize: z.number().optional(),
+    color: accentColorKeySchema.optional(),
+});
+export const bulletsBlockSchema = z.object({
+    type: z.literal("bullets"),
+    items: z.array(z.string()),
+    ordered: z.boolean().optional(),
+    icon: z.string().optional(),
+});
+export const codeBlockSchema = z.object({
+    type: z.literal("code"),
+    code: z.string(),
+    language: z.string().optional(),
+});
+export const calloutBlockSchema = z.object({
+    type: z.literal("callout"),
+    text: z.string(),
+    label: z.string().optional(),
+    color: accentColorKeySchema.optional(),
+    style: z.enum(["quote", "info", "warning"]).optional(),
+});
+export const metricBlockSchema = z.object({
+    type: z.literal("metric"),
+    value: z.string(),
+    label: z.string(),
+    color: accentColorKeySchema.optional(),
+    change: z.string().optional(),
+});
+export const dividerBlockSchema = z.object({
+    type: z.literal("divider"),
+    color: accentColorKeySchema.optional(),
+});
+export const imageBlockSchema = z.object({
+    type: z.literal("image"),
+    src: z.string(),
+    alt: z.string().optional(),
+    fit: z.enum(["contain", "cover"]).optional(),
+});
+export const contentBlockSchema = z.discriminatedUnion("type", [
+    textBlockSchema,
+    bulletsBlockSchema,
+    codeBlockSchema,
+    calloutBlockSchema,
+    metricBlockSchema,
+    dividerBlockSchema,
+    imageBlockSchema,
+]);
+// ═══════════════════════════════════════════════════════════
+// Shared Components
+// ═══════════════════════════════════════════════════════════
+/** Bottom-of-slide callout bar */
+export const calloutBarSchema = z.object({
+    text: z.string(),
+    label: z.string().optional(),
+    color: accentColorKeySchema.optional(),
+    align: z.enum(["left", "center"]).optional(),
+    leftBar: z.boolean().optional(),
+});
+/** Reusable card definition — used by columns, grid */
+export const cardSchema = z.object({
+    title: z.string(),
+    accentColor: accentColorKeySchema.optional(),
+    content: z.array(contentBlockSchema).optional(),
+    footer: z.string().optional(),
+    label: z.string().optional(),
+    num: z.number().optional(),
+    icon: z.string().optional(),
+});
+// ═══════════════════════════════════════════════════════════
+// Slide-level styling — orthogonal to layout
+// ═══════════════════════════════════════════════════════════
+export const slideStyleSchema = z.object({
+    bgColor: z.string().optional(),
+    decorations: z.boolean().optional(),
+    bgOpacity: z.number().optional(),
+    footer: z.string().optional(),
+});
+/** Common slide properties shared across all layouts */
+const slideBaseFields = {
+    accentColor: accentColorKeySchema.optional(),
+    style: slideStyleSchema.optional(),
+};
+// ═══════════════════════════════════════════════════════════
+// Layouts
+// ═══════════════════════════════════════════════════════════
+// ─── title ───
+export const titleSlideSchema = z.object({
+    layout: z.literal("title"),
+    ...slideBaseFields,
+    title: z.string(),
+    subtitle: z.string().optional(),
+    author: z.string().optional(),
+    note: z.string().optional(),
+});
+// ─── columns ───
+export const columnsSlideSchema = z.object({
+    layout: z.literal("columns"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    columns: z.array(cardSchema),
+    showArrows: z.boolean().optional(),
+    callout: calloutBarSchema.optional(),
+    bottomText: z.string().optional(),
+});
+// ─── comparison ───
+export const comparisonPanelSchema = z.object({
+    title: z.string(),
+    accentColor: accentColorKeySchema.optional(),
+    content: z.array(contentBlockSchema).optional(),
+    footer: z.string().optional(),
+});
+export const comparisonSlideSchema = z.object({
+    layout: z.literal("comparison"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    left: comparisonPanelSchema,
+    right: comparisonPanelSchema,
+    callout: calloutBarSchema.optional(),
+});
+// ─── grid ───
+export const gridItemSchema = z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    accentColor: accentColorKeySchema.optional(),
+    num: z.number().optional(),
+    icon: z.string().optional(),
+    content: z.array(contentBlockSchema).optional(),
+});
+export const gridSlideSchema = z.object({
+    layout: z.literal("grid"),
+    ...slideBaseFields,
+    title: z.string(),
+    subtitle: z.string().optional(),
+    gridColumns: z.number().optional(),
+    items: z.array(gridItemSchema),
+    footer: z.string().optional(),
+});
+// ─── bigQuote ───
+export const bigQuoteSlideSchema = z.object({
+    layout: z.literal("bigQuote"),
+    ...slideBaseFields,
+    quote: z.string(),
+    author: z.string().optional(),
+    role: z.string().optional(),
+});
+// ─── stats ───
+export const statItemSchema = z.object({
+    value: z.string(),
+    label: z.string(),
+    color: accentColorKeySchema.optional(),
+    change: z.string().optional(),
+});
+export const statsSlideSchema = z.object({
+    layout: z.literal("stats"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    stats: z.array(statItemSchema),
+    callout: calloutBarSchema.optional(),
+});
+// ─── timeline ───
+export const timelineItemSchema = z.object({
+    date: z.string(),
+    title: z.string(),
+    description: z.string().optional(),
+    color: accentColorKeySchema.optional(),
+    done: z.boolean().optional(),
+});
+export const timelineSlideSchema = z.object({
+    layout: z.literal("timeline"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    items: z.array(timelineItemSchema),
+});
+// ─── split ───
+export const splitPanelSchema = z.object({
+    title: z.string().optional(),
+    subtitle: z.string().optional(),
+    label: z.string().optional(),
+    accentColor: accentColorKeySchema.optional(),
+    content: z.array(contentBlockSchema).optional(),
+    dark: z.boolean().optional(),
+    ratio: z.number().optional(),
+});
+export const splitSlideSchema = z.object({
+    layout: z.literal("split"),
+    ...slideBaseFields,
+    left: splitPanelSchema.optional(),
+    right: splitPanelSchema.optional(),
+});
+// ─── matrix ───
+export const matrixCellSchema = z.object({
+    label: z.string(),
+    items: z.array(z.string()).optional(),
+    content: z.array(contentBlockSchema).optional(),
+    accentColor: accentColorKeySchema.optional(),
+});
+export const matrixSlideSchema = z.object({
+    layout: z.literal("matrix"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    rows: z.number().optional(),
+    cols: z.number().optional(),
+    xAxis: z
+        .object({
+        low: z.string().optional(),
+        high: z.string().optional(),
+        label: z.string().optional(),
+    })
+        .optional(),
+    yAxis: z
+        .object({
+        low: z.string().optional(),
+        high: z.string().optional(),
+        label: z.string().optional(),
+    })
+        .optional(),
+    cells: z.array(matrixCellSchema),
+});
+// ─── table ───
+export const tableCellValueSchema = z.union([
+    z.string(),
+    z.object({
+        text: z.string(),
+        color: accentColorKeySchema.optional(),
+        bold: z.boolean().optional(),
+    }),
+]);
+export const tableSlideSchema = z.object({
+    layout: z.literal("table"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    headers: z.array(z.string()),
+    rows: z.array(z.array(tableCellValueSchema)),
+    rowHeaders: z.boolean().optional(),
+    striped: z.boolean().optional(),
+    callout: calloutBarSchema.optional(),
+});
+// ─── funnel ───
+export const funnelStageSchema = z.object({
+    label: z.string(),
+    value: z.string().optional(),
+    description: z.string().optional(),
+    color: accentColorKeySchema.optional(),
+});
+export const funnelSlideSchema = z.object({
+    layout: z.literal("funnel"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    stages: z.array(funnelStageSchema),
+    callout: calloutBarSchema.optional(),
+});
+// ═══════════════════════════════════════════════════════════
+// Slide Union & Media Schema
+// ═══════════════════════════════════════════════════════════
+export const slideLayoutSchema = z.discriminatedUnion("layout", [
+    titleSlideSchema,
+    columnsSlideSchema,
+    comparisonSlideSchema,
+    gridSlideSchema,
+    bigQuoteSlideSchema,
+    statsSlideSchema,
+    timelineSlideSchema,
+    splitSlideSchema,
+    matrixSlideSchema,
+    tableSlideSchema,
+    funnelSlideSchema,
+]);
+/** Media schema registered in mulmoImageAssetSchema */
+export const mulmoSlideMediaSchema = z
+    .object({
+    type: z.literal("slide"),
+    theme: slideThemeSchema.optional(),
+    slide: slideLayoutSchema,
+})
+    .strict();

package/lib/slide/utils.d.ts

@@ -0,0 +1,32 @@
+import type { SlideTheme } from "./schema.js";
+/** Escape HTML special characters */
+export declare const escapeHtml: (s: string) => string;
+/** Escape HTML and convert newlines to <br> */
+export declare const nl2br: (s: string) => string;
+/** Sanitize a hex color value (hex digits only) */
+export declare const sanitizeHex: (s: string) => string;
+/** Accent color key → Tailwind class segment: "primary" → "d-primary" */
+export declare const c: (key: string) => string;
+/** Build the Tailwind config JSON string for theme colors and fonts */
+export declare const buildTailwindConfig: (theme: SlideTheme) => string;
+/** Render a numbered circle badge */
+export declare const numBadge: (num: number, colorKey: string) => string;
+/** Render an icon in a square container */
+export declare const iconSquare: (icon: string, colorKey: string) => string;
+/** Render a card wrapper with accent top bar */
+export declare const cardWrap: (accentColor: string, innerHtml: string, extraClass?: string) => string;
+/** Render a callout bar at the bottom of a slide */
+export declare const renderCalloutBar: (obj: {
+    text: string;
+    label?: string;
+    color?: string;
+    align?: string;
+    leftBar?: boolean;
+}) => string;
+/** Render the common slide header (accent bar + title + subtitle) */
+export declare const slideHeader: (data: {
+    accentColor?: string;
+    stepLabel?: string;
+    title: string;
+    subtitle?: string;
+}) => string;

package/lib/slide/utils.js

@@ -0,0 +1,112 @@
+/** Escape HTML special characters */
+export const escapeHtml = (s) => {
+    return String(s || "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+};
+/** Escape HTML and convert newlines to <br> */
+export const nl2br = (s) => {
+    return escapeHtml(s).replace(/\n/g, "<br>");
+};
+/** Sanitize a value for safe use in CSS class names (alphanumeric + hyphens only) */
+const sanitizeCssClass = (s) => {
+    return s.replace(/[^a-zA-Z0-9-]/g, "");
+};
+/** Sanitize a hex color value (hex digits only) */
+export const sanitizeHex = (s) => {
+    return s.replace(/[^0-9A-Fa-f]/g, "");
+};
+/** Accent color key → Tailwind class segment: "primary" → "d-primary" */
+export const c = (key) => {
+    return `d-${sanitizeCssClass(key)}`;
+};
+const colorKeyMap = {
+    bg: "bg",
+    bgCard: "card",
+    bgCardAlt: "alt",
+    text: "text",
+    textMuted: "muted",
+    textDim: "dim",
+    primary: "primary",
+    accent: "accent",
+    success: "success",
+    warning: "warning",
+    danger: "danger",
+    info: "info",
+    highlight: "highlight",
+};
+/** Build the Tailwind config JSON string for theme colors and fonts */
+export const buildTailwindConfig = (theme) => {
+    const colorMap = {};
+    Object.entries(theme.colors).forEach(([k, v]) => {
+        const mapped = colorKeyMap[k];
+        if (mapped) {
+            colorMap[mapped] = `#${v}`;
+        }
+    });
+    return JSON.stringify({
+        theme: {
+            extend: {
+                colors: { d: colorMap },
+                fontFamily: {
+                    title: [theme.fonts.title, "serif"],
+                    body: [theme.fonts.body, "Arial", "sans-serif"],
+                    mono: [theme.fonts.mono, "monospace"],
+                },
+            },
+        },
+    });
+};
+/** Render a numbered circle badge */
+export const numBadge = (num, colorKey) => {
+    return `<div class="w-10 h-10 rounded-full bg-${c(colorKey)} flex items-center justify-center shrink-0">
+  <span class="text-white font-bold text-sm">${num}</span>
+</div>`;
+};
+/** Render an icon in a square container */
+export const iconSquare = (icon, colorKey) => {
+    return `<div class="w-16 h-16 bg-d-alt flex items-center justify-center rounded">
+  <span class="text-2xl font-mono font-bold text-${c(colorKey)}">${escapeHtml(icon)}</span>
+</div>`;
+};
+/** Render a card wrapper with accent top bar */
+export const cardWrap = (accentColor, innerHtml, extraClass) => {
+    return `<div class="bg-d-card rounded-lg shadow-lg overflow-hidden flex flex-col ${sanitizeCssClass(extraClass || "")}">
+  <div class="h-[3px] bg-${c(accentColor)} shrink-0"></div>
+  <div class="p-5 flex flex-col flex-1">
+${innerHtml}
+  </div>
+</div>`;
+};
+/** Render a callout bar at the bottom of a slide */
+export const renderCalloutBar = (obj) => {
+    const color = obj.color || "warning";
+    const leftBar = obj.leftBar ? `<div class="w-1 bg-${c(color)} shrink-0"></div>` : "";
+    const align = obj.align === "center" ? "text-center" : "";
+    const inner = obj.label
+        ? `<span class="font-bold text-${c(color)}">${escapeHtml(obj.label)}:</span> <span class="text-d-muted">${escapeHtml(obj.text)}</span>`
+        : `<span class="text-d-muted">${escapeHtml(obj.text)}</span>`;
+    return `<div class="mx-12 bg-d-card rounded flex overflow-hidden ${align}">
+  ${leftBar}
+  <div class="px-4 py-3 text-sm font-body flex-1">${inner}</div>
+</div>`;
+};
+/** Render the common slide header (accent bar + title + subtitle) */
+export const slideHeader = (data) => {
+    const accent = data.accentColor || "primary";
+    const lines = [];
+    lines.push(`<div class="h-[3px] bg-${c(accent)} shrink-0"></div>`);
+    lines.push(`<div class="px-12 pt-5 shrink-0">`);
+    if (data.stepLabel) {
+        lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body">${escapeHtml(data.stepLabel)}</p>`);
+    }
+    lines.push(`  <h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${nl2br(data.title)}</h2>`);
+    if (data.subtitle) {
+        lines.push(`  <p class="text-[15px] text-d-dim mt-2 font-body">${nl2br(data.subtitle)}</p>`);
+    }
+    lines.push(`</div>`);
+    return lines.join("\n");
+};