@mulmocast/deck 0.1.0

package/lib/layouts/matrix.js

@@ -0,0 +1,53 @@
+import { renderInlineMarkup, c, cardWrap, slideHeader, resolveAccent } from "../utils.js";
+import { renderContentBlocks } from "../blocks.js";
+export const layoutMatrix = (data) => {
+    const parts = [slideHeader(data)];
+    const rows = data.rows || 2;
+    const cols = data.cols || 2;
+    const cells = data.cells || [];
+    parts.push(`<div class="flex flex-1 px-12 mt-4 gap-2">`);
+    if (data.yAxis) {
+        parts.push(`<div class="flex flex-col justify-between items-center w-6 shrink-0 py-4">`);
+        parts.push(`  <span class="text-xs text-d-dim font-body [writing-mode:vertical-lr] rotate-180">${renderInlineMarkup(data.yAxis.high || "")}</span>`);
+        if (data.yAxis.label) {
+            parts.push(`  <span class="text-xs font-bold text-d-muted font-body [writing-mode:vertical-lr] rotate-180">${renderInlineMarkup(data.yAxis.label)}</span>`);
+        }
+        parts.push(`  <span class="text-xs text-d-dim font-body [writing-mode:vertical-lr] rotate-180">${renderInlineMarkup(data.yAxis.low || "")}</span>`);
+        parts.push(`</div>`);
+    }
+    parts.push(`<div class="flex-1 flex flex-col gap-3">`);
+    Array.from({ length: rows }).forEach((_row, r) => {
+        parts.push(`<div class="flex gap-3 flex-1">`);
+        Array.from({ length: cols }).forEach((_col, ci) => {
+            const idx = r * cols + ci;
+            const cell = cells[idx] || { label: "" };
+            const accent = resolveAccent(cell.accentColor);
+            const inner = [];
+            inner.push(`<h3 class="text-lg font-bold text-${c(accent)} font-body">${renderInlineMarkup(cell.label)}</h3>`);
+            if (cell.items) {
+                inner.push(`<ul class="mt-2 space-y-1 text-sm text-d-muted font-body">`);
+                cell.items.forEach((item) => {
+                    inner.push(`  <li class="flex gap-2"><span class="text-d-dim shrink-0">&bull;</span><span>${renderInlineMarkup(item)}</span></li>`);
+                });
+                inner.push(`</ul>`);
+            }
+            if (cell.content) {
+                inner.push(`<div class="mt-2 space-y-2">${renderContentBlocks(cell.content)}</div>`);
+            }
+            parts.push(cardWrap(accent, inner.join("\n"), "flex-1"));
+        });
+        parts.push(`</div>`);
+    });
+    if (data.xAxis) {
+        parts.push(`<div class="flex justify-between px-2 mt-1">`);
+        parts.push(`  <span class="text-xs text-d-dim font-body">${renderInlineMarkup(data.xAxis.low || "")}</span>`);
+        if (data.xAxis.label) {
+            parts.push(`  <span class="text-xs font-bold text-d-muted font-body">${renderInlineMarkup(data.xAxis.label)}</span>`);
+        }
+        parts.push(`  <span class="text-xs text-d-dim font-body">${renderInlineMarkup(data.xAxis.high || "")}</span>`);
+        parts.push(`</div>`);
+    }
+    parts.push(`</div>`);
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

package/lib/layouts/split.d.ts

@@ -0,0 +1,2 @@
+import type { SplitSlide } from "../schema.js";
+export declare const layoutSplit: (data: SplitSlide) => string;

package/lib/layouts/split.js

@@ -0,0 +1,51 @@
+import { renderInlineMarkup, c, accentBar, resolveAccent } from "../utils.js";
+import { renderContentBlocks } from "../blocks.js";
+const resolveValign = (valign) => {
+    if (valign === "top")
+        return "justify-start";
+    if (valign === "bottom")
+        return "justify-end";
+    return "justify-center";
+};
+const buildSplitPanel = (panel, fallbackAccent, ratio) => {
+    const accent = panel.accentColor || fallbackAccent;
+    const bg = panel.dark ? "bg-d-card" : "";
+    const vCls = resolveValign(panel.valign);
+    const lines = [];
+    lines.push(`<div class="${bg} flex flex-col ${vCls} px-10 py-8" style="flex: ${ratio}">`);
+    if (panel.label) {
+        if (panel.labelBadge) {
+            lines.push(`  <span class="inline-block self-start px-6 py-2.5 rounded-lg bg-${c(accent)} text-lg font-bold text-white font-title mb-4">${renderInlineMarkup(panel.label)}</span>`);
+        }
+        else {
+            lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body mb-2">${renderInlineMarkup(panel.label)}</p>`);
+        }
+    }
+    if (panel.title) {
+        lines.push(`  <h2 class="text-[36px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(panel.title)}</h2>`);
+    }
+    if (panel.subtitle) {
+        lines.push(`  <p class="text-base text-d-dim font-body mt-3">${renderInlineMarkup(panel.subtitle)}</p>`);
+    }
+    if (panel.content) {
+        lines.push(`  <div class="mt-6 space-y-3">${renderContentBlocks(panel.content)}</div>`);
+    }
+    lines.push(`</div>`);
+    return lines.join("\n");
+};
+export const layoutSplit = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    const parts = [];
+    parts.push(accentBar(accent));
+    const leftRatio = data.left?.ratio || 50;
+    const rightRatio = data.right?.ratio || 50;
+    parts.push(`<div class="flex h-full">`);
+    if (data.left) {
+        parts.push(buildSplitPanel(data.left, accent, leftRatio));
+    }
+    if (data.right) {
+        parts.push(buildSplitPanel(data.right, accent, rightRatio));
+    }
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

package/lib/layouts/stats.d.ts

@@ -0,0 +1,2 @@
+import type { StatsSlide } from "../schema.js";
+export declare const layoutStats: (data: StatsSlide) => string;

package/lib/layouts/stats.js

@@ -0,0 +1,23 @@
+import { renderInlineMarkup, c, resolveItemColor, resolveChangeColor, centeredSlideHeader, renderOptionalCallout } from "../utils.js";
+export const layoutStats = (data) => {
+    const stats = data.stats || [];
+    const parts = [];
+    parts.push(centeredSlideHeader(data));
+    // Stats cards
+    parts.push(`<div class="flex gap-6 mt-10">`);
+    stats.forEach((stat) => {
+        const color = resolveItemColor(stat.color, data.accentColor);
+        parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-10 text-center">`);
+        parts.push(`  <div class="h-[3px] bg-${c(color)} rounded-full w-12 mx-auto mb-6"></div>`);
+        parts.push(`  <p class="text-[52px] font-bold text-${c(color)} font-body leading-none">${renderInlineMarkup(stat.value)}</p>`);
+        parts.push(`  <p class="text-lg text-d-muted font-body mt-4">${renderInlineMarkup(stat.label)}</p>`);
+        if (stat.change) {
+            parts.push(`  <p class="text-base font-bold text-${c(resolveChangeColor(stat.change))} font-body mt-3">${renderInlineMarkup(stat.change)}</p>`);
+        }
+        parts.push(`</div>`);
+    });
+    parts.push(`</div>`);
+    parts.push(`</div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    return parts.join("\n");
+};

package/lib/layouts/table.d.ts

@@ -0,0 +1,2 @@
+import type { TableSlide } from "../schema.js";
+export declare const layoutTable: (data: TableSlide) => string;

package/lib/layouts/table.js

@@ -0,0 +1,10 @@
+import { slideHeader, renderOptionalCallout } from "../utils.js";
+import { renderTableCore } from "../blocks.js";
+export const layoutTable = (data) => {
+    const parts = [slideHeader(data)];
+    parts.push(`<div class="px-12 mt-5 flex-1 overflow-auto">`);
+    parts.push(renderTableCore(data.headers, data.rows, data.rowHeaders, data.striped));
+    parts.push(`</div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    return parts.join("\n");
+};

package/lib/layouts/timeline.d.ts

@@ -0,0 +1,2 @@
+import type { TimelineSlide } from "../schema.js";
+export declare const layoutTimeline: (data: TimelineSlide) => string;

package/lib/layouts/timeline.js

@@ -0,0 +1,27 @@
+import { renderInlineMarkup, c, resolveItemColor, centeredSlideHeader } from "../utils.js";
+export const layoutTimeline = (data) => {
+    const parts = [];
+    const items = data.items || [];
+    parts.push(centeredSlideHeader(data));
+    // Timeline items
+    parts.push(`<div class="flex items-start mt-10 relative">`);
+    parts.push(`<div class="absolute left-4 right-4 top-[52px] h-[2px] bg-d-alt"></div>`);
+    items.forEach((item) => {
+        const color = resolveItemColor(item.color, data.accentColor);
+        const dotBorder = item.done ? `bg-${c(color)}` : `bg-d-alt`;
+        const dotInner = item.done ? "bg-d-text" : `bg-${c(color)}`;
+        parts.push(`<div class="flex-1 flex flex-col items-center text-center relative z-10">`);
+        parts.push(`  <div class="w-10 h-10 rounded-full ${dotBorder} flex items-center justify-center shadow-lg">`);
+        parts.push(`    <div class="w-4 h-4 rounded-full ${dotInner}"></div>`);
+        parts.push(`  </div>`);
+        parts.push(`  <p class="text-sm font-bold text-${c(color)} font-body mt-4">${renderInlineMarkup(item.date)}</p>`);
+        parts.push(`  <p class="text-base font-bold text-d-text font-body mt-2">${renderInlineMarkup(item.title)}</p>`);
+        if (item.description) {
+            parts.push(`  <p class="text-sm text-d-muted font-body mt-1 px-3">${renderInlineMarkup(item.description)}</p>`);
+        }
+        parts.push(`</div>`);
+    });
+    parts.push(`</div>`);
+    parts.push(`</div>`);
+    return parts.join("\n");
+};

package/lib/layouts/title.d.ts

@@ -0,0 +1,2 @@
+import type { TitleSlide } from "../schema.js";
+export declare const layoutTitle: (data: TitleSlide) => string;

package/lib/layouts/title.js

@@ -0,0 +1,19 @@
+import { renderInlineMarkup, accentBar } from "../utils.js";
+export const layoutTitle = (data) => {
+    return [
+        accentBar("primary"),
+        `<div class="absolute -top-20 -right-8 w-[360px] h-[360px] rounded-full bg-d-primary opacity-10"></div>`,
+        `<div class="absolute -bottom-12 -left-16 w-[280px] h-[280px] rounded-full bg-d-accent opacity-10"></div>`,
+        `<div class="flex flex-col justify-center h-full px-16 relative z-10">`,
+        `  <h1 class="text-[60px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h1>`,
+        data.subtitle ? `  <p class="text-2xl text-d-muted mt-6 font-body">${renderInlineMarkup(data.subtitle)}</p>` : "",
+        data.author ? `  <p class="text-lg text-d-dim mt-10 font-body">${renderInlineMarkup(data.author)}</p>` : "",
+        data.note
+            ? `  <div class="bg-d-card px-4 py-2 mt-6 inline-block rounded"><p class="text-sm text-d-dim font-body">${renderInlineMarkup(data.note)}</p></div>`
+            : "",
+        `</div>`,
+        accentBar("accent", "absolute bottom-0 left-0 right-0"),
+    ]
+        .filter(Boolean)
+        .join("\n");
+};

package/lib/layouts/waterfall.d.ts

@@ -0,0 +1,2 @@
+import type { WaterfallSlide } from "../schema.js";
+export declare const layoutWaterfall: (data: WaterfallSlide) => string;

package/lib/layouts/waterfall.js

@@ -0,0 +1,63 @@
+import { renderInlineMarkup, c, slideHeader, renderOptionalCallout } from "../utils.js";
+/** Height of the chart area as percentage of available space */
+const CHART_HEIGHT_PCT = 75;
+export const layoutWaterfall = (data) => {
+    const parts = [slideHeader(data)];
+    const items = data.items || [];
+    const positions = buildWaterfallPositions(items);
+    const globalMax = Math.max(...positions.map((p) => p.top));
+    const globalMin = Math.min(...positions.map((p) => p.bottom));
+    const range = globalMax - globalMin || 1;
+    parts.push(`<div class="flex gap-1 px-12 mt-4 flex-1" style="min-height: 0">`);
+    items.forEach((item, i) => {
+        const pos = positions[i];
+        const isTotal = item.isTotal ?? false;
+        const isPositive = item.value >= 0;
+        const color = resolveBarColor(item.color, isTotal, isPositive);
+        const bottomPct = ((pos.bottom - globalMin) / range) * CHART_HEIGHT_PCT;
+        const heightPct = Math.max(((pos.top - pos.bottom) / range) * CHART_HEIGHT_PCT, 1.5);
+        const topOfBar = bottomPct + heightPct;
+        const labelTopPct = 100 - topOfBar;
+        const formattedValue = formatValue(item.value, data.unit, isTotal);
+        parts.push(`<div class="flex-1 relative" style="height: 100%">`);
+        // Value label (above bar)
+        parts.push(`  <p class="absolute w-full text-xs font-bold text-d-text font-body text-center" style="top: ${labelTopPct - 4}%">${renderInlineMarkup(formattedValue)}</p>`);
+        // Bar (absolute positioned from bottom)
+        parts.push(`  <div class="absolute left-1 right-1 bg-${c(color)} rounded-t" style="bottom: ${bottomPct}%; height: ${heightPct}%"></div>`);
+        // Bottom label
+        parts.push(`  <p class="absolute bottom-0 w-full text-xs text-d-muted font-body text-center" style="transform: translateY(100%)">${renderInlineMarkup(item.label)}</p>`);
+        parts.push(`</div>`);
+    });
+    parts.push(`</div>`);
+    // Labels area
+    parts.push(`<div class="h-10 shrink-0"></div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    return parts.join("\n");
+};
+const buildWaterfallPositions = (items) => {
+    let runningTotal = 0;
+    return items.map((item) => {
+        if (item.isTotal) {
+            runningTotal = item.value;
+            return { top: Math.max(item.value, 0), bottom: Math.min(item.value, 0) };
+        }
+        const prevTotal = runningTotal;
+        runningTotal += item.value;
+        if (item.value >= 0) {
+            return { top: runningTotal, bottom: prevTotal };
+        }
+        return { top: prevTotal, bottom: runningTotal };
+    });
+};
+const resolveBarColor = (itemColor, isTotal, isPositive) => {
+    if (itemColor)
+        return itemColor;
+    if (isTotal)
+        return "primary";
+    return isPositive ? "success" : "danger";
+};
+const formatValue = (value, unit, isTotal) => {
+    const prefix = !isTotal && value > 0 ? "+" : "";
+    const suffix = unit ? ` ${unit}` : "";
+    return `${prefix}${value}${suffix}`;
+};

package/lib/render.d.ts

@@ -0,0 +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, branding?: ResolvedBranding) => string;

package/lib/render.js

@@ -0,0 +1,101 @@
+import { escapeHtml, buildTailwindConfig, sanitizeHex, detectBlockTypes } from "./utils.js";
+import { renderSlideContent } from "./layouts/index.js";
+/** Determine if a hex color is dark (luminance < 128) */
+const isDarkBg = (hex) => {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 < 128;
+};
+/** Build CDN script tags for chart/mermaid when needed */
+const buildCdnScripts = (theme, slide) => {
+    const { hasChart, hasMermaid, chartPlugins } = detectBlockTypes(slide);
+    const scripts = [];
+    if (hasChart) {
+        scripts.push('<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>');
+        chartPlugins.forEach((cdn) => {
+            scripts.push(`<script src="${cdn}"></script>`);
+        });
+    }
+    if (hasMermaid) {
+        const mermaidTheme = isDarkBg(theme.colors.bg) ? "dark" : "default";
+        scripts.push(`<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true,theme:'${mermaidTheme}'})</script>`);
+    }
+    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, branding) => {
+    const content = renderSlideContent(slide);
+    const twConfig = buildTailwindConfig(theme);
+    const cdnScripts = buildCdnScripts(theme, slide);
+    const slideStyle = slide.style;
+    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>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<script src="https://cdn.tailwindcss.com"></script>
+<script>tailwind.config = ${twConfig}</script>
+${cdnScripts}
+<style>
+  html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
+</style>
+</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>`;
+};