@mulmocast/deck 0.1.0

package/lib/utils.js

@@ -0,0 +1,243 @@
+/** 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>");
+};
+/** Valid accent color keys for inline markup */
+const inlineColorKeys = new Set(["primary", "accent", "success", "warning", "danger", "info", "highlight"]);
+/**
+ * Render inline markup: escape HTML first, then parse **bold** and {color:text}.
+ * Also converts newlines to <br>.
+ * Safe: escapeHtml runs before any markup parsing, so XSS is impossible.
+ */
+export const renderInlineMarkup = (s) => {
+    let result = escapeHtml(s);
+    // **bold** → <strong>bold</strong>
+    result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    // {color:text} → <span class="text-d-color">text</span>
+    result = result.replace(/\{([a-z]+):(.+?)\}/g, (_match, color, text) => {
+        if (inlineColorKeys.has(color)) {
+            return `<span class="text-${c(color)}">${text}</span>`;
+        }
+        return `{${color}:${text}}`;
+    });
+    // newlines to <br>
+    result = result.replace(/\n/g, "<br>");
+    return result;
+};
+/** 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)}`;
+};
+// ═══════════════════════════════════════════════════════════
+// Shared micro-helpers for HTML generation
+// ═══════════════════════════════════════════════════════════
+/** Default accent color used when none is specified */
+const DEFAULT_ACCENT = "primary";
+/** Resolve accent color key with "primary" as fallback */
+export const resolveAccent = (color) => color || DEFAULT_ACCENT;
+/** Resolve item-level color with slide-level fallback then "primary" */
+export const resolveItemColor = (itemColor, slideAccent) => itemColor || slideAccent || DEFAULT_ACCENT;
+/** Render a horizontal accent bar (3px full-width). Pass extraClass for width/margin variants. */
+export const accentBar = (colorKey, extraClass) => `<div class="h-[3px] bg-${c(colorKey)} shrink-0 ${extraClass || ""}"></div>`;
+/** Render an optional block title (chart, mermaid, table) */
+export const blockTitle = (title) => title ? `<p class="text-sm font-bold text-d-text font-body mb-2">${renderInlineMarkup(title)}</p>` : "";
+/** Resolve change indicator color: "success" for positive (+), "danger" for negative */
+export const resolveChangeColor = (change) => (/\+/.test(change) ? "success" : "danger");
+/** Render the optional callout bar at the bottom of a slide, or empty string */
+export const renderOptionalCallout = (callout) => {
+    if (!callout)
+        return "";
+    return `<div class="mt-auto pb-4">${renderCalloutBar(callout)}</div>`;
+};
+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 min-h-0 ${sanitizeCssClass(extraClass || "")}">
+  ${accentBar(accentColor)}
+  <div class="p-5 flex flex-col flex-1 min-h-0 overflow-hidden">
+${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)}">${renderInlineMarkup(obj.label)}:</span> <span class="text-d-muted">${renderInlineMarkup(obj.text)}</span>`
+        : `<span class="text-d-muted">${renderInlineMarkup(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 header text elements (stepLabel + title + subtitle) without wrapping div */
+export const renderHeaderText = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    const lines = [];
+    if (data.stepLabel) {
+        lines.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
+    }
+    lines.push(`<h2 class="text-[42px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
+    if (data.subtitle) {
+        lines.push(`<p class="text-[15px] text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
+    }
+    return lines.join("\n");
+};
+/** Render the common slide header (accent bar + title + subtitle) */
+export const slideHeader = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    return [accentBar(accent), `<div class="px-12 pt-5 shrink-0">`, renderHeaderText(data), `</div>`].join("\n");
+};
+/** Render accent bar + vertically-centered wrapper with header text (used by stats, timeline) */
+export const centeredSlideHeader = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    return [accentBar(accent), `<div class="flex-1 flex flex-col justify-center px-12 min-h-0">`, renderHeaderText(data)].join("\n");
+};
+// ═══════════════════════════════════════════════════════════
+// Counter-based ID generation (unique within a single slide)
+// ═══════════════════════════════════════════════════════════
+let slideIdCounter = 0;
+/** Generate a unique ID with the given prefix (e.g. "chart-0", "mermaid-1") */
+export const generateSlideId = (prefix) => `${prefix}-${slideIdCounter++}`;
+/** Reset the ID counter (for testing) */
+export const resetSlideIdCounter = () => {
+    slideIdCounter = 0;
+};
+// ═══════════════════════════════════════════════════════════
+// Content block type detection
+// ═══════════════════════════════════════════════════════════
+/** Chart.js plugin CDN URLs keyed by chart type */
+const CHART_PLUGIN_CDNS = {
+    sankey: "https://cdn.jsdelivr.net/npm/chartjs-chart-sankey",
+    treemap: "https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@3",
+};
+/** Collect all content block arrays from a slide layout */
+const collectContentArrays = (slide) => {
+    const arrays = [];
+    const pushIfPresent = (content) => {
+        if (content)
+            arrays.push(content);
+    };
+    switch (slide.layout) {
+        case "columns":
+            slide.columns.forEach((col) => pushIfPresent(col.content));
+            break;
+        case "comparison":
+            pushIfPresent(slide.left.content);
+            pushIfPresent(slide.right.content);
+            break;
+        case "grid":
+            slide.items.forEach((item) => pushIfPresent(item.content));
+            break;
+        case "split":
+            pushIfPresent(slide.left?.content);
+            pushIfPresent(slide.right?.content);
+            break;
+        case "matrix":
+            slide.cells.forEach((cell) => pushIfPresent(cell.content));
+            break;
+    }
+    return arrays;
+};
+/** Collect chart type from a chart block */
+const collectChartPlugin = (block, plugins) => {
+    if (block.type === "chart") {
+        const chartType = block.chartData?.type;
+        if (chartType && CHART_PLUGIN_CDNS[chartType]) {
+            plugins.add(CHART_PLUGIN_CDNS[chartType]);
+        }
+    }
+};
+/** Detect whether chart or mermaid content blocks exist in a slide */
+export const detectBlockTypes = (slide) => {
+    const arrays = collectContentArrays(slide);
+    let hasChart = false;
+    let hasMermaid = false;
+    const plugins = new Set();
+    arrays.forEach((blocks) => {
+        blocks.forEach((block) => {
+            if (block.type === "chart")
+                hasChart = true;
+            if (block.type === "mermaid")
+                hasMermaid = true;
+            collectChartPlugin(block, plugins);
+            if (block.type === "section" && block.content) {
+                block.content.forEach((inner) => {
+                    if (inner.type === "chart")
+                        hasChart = true;
+                    if (inner.type === "mermaid")
+                        hasMermaid = true;
+                    collectChartPlugin(inner, plugins);
+                });
+            }
+        });
+    });
+    return { hasChart, hasMermaid, chartPlugins: [...plugins] };
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@mulmocast/deck",
+  "version": "0.1.0",
+  "description": "MulmoCast deck DSL: JSON-described semantic slide layouts (stats, comparison, timeline, ...) rendered to Tailwind-based HTML",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint src test",
+    "format": "prettier --write '{src,test}/**/*.ts'",
+    "test": "tsx --test ./test/test_*.ts",
+    "prepublishOnly": "yarn run build"
+  },
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.4.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "tsx": "^4.22.3",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "mulmocast",
+    "deck",
+    "slide",
+    "dsl",
+    "tailwind",
+    "presentation"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/receptron/mulmocast-deck.git"
+  },
+  "bugs": {
+    "url": "https://github.com/receptron/mulmocast-deck/issues"
+  },
+  "homepage": "https://github.com/receptron/mulmocast-deck#readme",
+  "engines": {
+    "node": ">=22.0.0"
+  }
+}