mulmocast 2.6.16 → 2.6.18

package/lib/slide/layouts/table.js

@@ -1,10 +0,0 @@
-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/slide/layouts/timeline.d.ts

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

package/lib/slide/layouts/timeline.js

@@ -1,27 +0,0 @@
-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/slide/layouts/title.d.ts

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

package/lib/slide/layouts/title.js

@@ -1,19 +0,0 @@
-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/slide/layouts/waterfall.d.ts

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

package/lib/slide/layouts/waterfall.js

@@ -1,63 +0,0 @@
-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/slide/render.d.ts

@@ -1,17 +0,0 @@
-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/slide/render.js

@@ -1,101 +0,0 @@
-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>`;
-};