@mulmocast/deck 0.2.0 → 0.4.0

package/lib/blocks.js

@@ -131,14 +131,24 @@ const renderSubBullets = (item) => {
         .join("\n");
     return `\n${subs}`;
 };
+/** Map a per-item status icon variant to its glyph and color class segment. */
+const STATUS_ICON_GLYPHS = {
+    ok: { glyph: "\u2713", color: "success" }, // \u2713
+    no: { glyph: "\u2715", color: "danger" }, // \u2715
+    warn: { glyph: "\u26a0", color: "warning" }, // \u26a0
+};
 const renderBullets = (block) => {
     const tag = block.ordered ? "ol" : "ul";
     const items = block.items
         .map((item, i) => {
-        const marker = block.ordered ? `${i + 1}.` : escapeHtml(block.icon || "\u2022");
+        // Per-item status icon overrides the block-level marker / numbered prefix.
+        const statusIcon = typeof item === "object" && item.icon ? STATUS_ICON_GLYPHS[item.icon] : undefined;
+        const markerHtml = statusIcon
+            ? `<span class="text-${c(statusIcon.color)} font-extrabold shrink-0">${statusIcon.glyph}</span>`
+            : `<span class="text-d-dim shrink-0">${block.ordered ? `${i + 1}.` : escapeHtml(block.icon || "\u2022")}</span>`;
         const text = bulletItemText(item);
         const subHtml = renderSubBullets(item);
-        return `  <li class="flex flex-col gap-1"><div class="flex gap-2"><span class="text-d-dim shrink-0">${marker}</span><span>${renderInlineMarkup(text)}</span></div>${subHtml}</li>`;
+        return `  <li class="flex flex-col gap-1"><div class="flex gap-2">${markerHtml}<span>${renderInlineMarkup(text)}</span></div>${subHtml}</li>`;
     })
         .join("\n");
     return `<${tag} class="space-y-2 text-[15px] text-d-muted font-body">\n${items}\n</${tag}>`;

package/lib/layouts/big_quote.js

@@ -1,8 +1,11 @@
-import { renderInlineMarkup, accentBar, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, accentBar, resolveAccent, renderEyebrow } from "../utils.js";
 export const layoutBigQuote = (data) => {
     const accent = resolveAccent(data.accentColor);
+    const eyebrowHtml = renderEyebrow(data.eyebrow, accent);
     const parts = [];
     parts.push(`<div class="flex flex-col items-center justify-center h-full px-20">`);
+    if (eyebrowHtml)
+        parts.push(`  <div class="mb-6">${eyebrowHtml}</div>`);
     parts.push(`  ${accentBar(accent, "w-24 mb-8")}`);
     parts.push(`  <blockquote class="text-[32px] text-d-text font-title italic text-center leading-relaxed">`);
     parts.push(`    &ldquo;${renderInlineMarkup(data.quote)}&rdquo;`);

package/lib/layouts/columns.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderOptionalCallout, resolveAccent, renderNumLabel } from "../utils.js";
 import { renderCardContentBlocks } from "../blocks.js";
 const buildColumnCard = (col) => {
     const accent = resolveAccent(col.accentColor);
@@ -19,7 +19,8 @@ const buildColumnCard = (col) => {
         if (col.label) {
             inner.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(col.label)}</p>`);
         }
-        inner.push(`<h3 class="text-2xl font-title font-bold text-d-text mt-1">${renderInlineMarkup(col.title)}</h3>`);
+        const numPrefix = renderNumLabel(col.numLabel, accent);
+        inner.push(`<h3 class="text-2xl font-title font-bold text-d-text mt-1">${numPrefix}${renderInlineMarkup(col.title)}</h3>`);
     }
     if (col.content) {
         const centerCls = col.icon ? "text-center" : "";

package/lib/layouts/index.js

@@ -10,6 +10,7 @@ import { layoutMatrix } from "./matrix.js";
 import { layoutTable } from "./table.js";
 import { layoutFunnel } from "./funnel.js";
 import { layoutWaterfall } from "./waterfall.js";
+import { layoutManifesto } from "./manifesto.js";
 import { escapeHtml } from "../utils.js";
 /** Render the inner content of a slide (without the wrapper div) */
 export const renderSlideContent = (slide) => {
@@ -38,6 +39,8 @@ export const renderSlideContent = (slide) => {
             return layoutFunnel(slide);
         case "waterfall":
             return layoutWaterfall(slide);
+        case "manifesto":
+            return layoutManifesto(slide);
         default: {
             const _exhaustive = slide;
             return `<p class="text-white p-8">Unknown layout: ${escapeHtml(String(_exhaustive.layout))}</p>`;

package/lib/layouts/manifesto.d.ts

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

package/lib/layouts/manifesto.js

@@ -0,0 +1,39 @@
+import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor } from "../utils.js";
+const buildManifestoCard = (line, slideAccent) => {
+    const color = resolveItemColor(line.accentColor, slideAccent);
+    const parts = [];
+    parts.push(`<div class="relative bg-d-card rounded-lg shadow-md overflow-hidden flex flex-col">`);
+    parts.push(`  <div class="absolute left-0 top-0 bottom-0 w-1 bg-${c(color)}"></div>`);
+    parts.push(`  <div class="px-5 py-4 pl-6 flex-1">`);
+    parts.push(`    <h3 class="text-lg font-bold text-d-text font-body leading-snug">${renderInlineMarkup(line.title)}</h3>`);
+    if (line.description) {
+        parts.push(`    <p class="text-sm text-d-muted font-body mt-1 leading-relaxed">${renderInlineMarkup(line.description)}</p>`);
+    }
+    parts.push(`  </div>`);
+    parts.push(`</div>`);
+    return parts.join("\n");
+};
+const DEFAULT_COLUMNS = 2;
+const MAX_COLUMNS = 4;
+const gridColsClass = (columns) => {
+    // Tailwind requires literal class names — map explicitly.
+    const cls = {
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+    };
+    return cls[columns] || cls[DEFAULT_COLUMNS];
+};
+export const layoutManifesto = (data) => {
+    const cols = Math.min(Math.max(data.columns ?? DEFAULT_COLUMNS, 1), MAX_COLUMNS);
+    const items = data.items || [];
+    const parts = [slideHeader(data)];
+    parts.push(`<div class="grid ${gridColsClass(cols)} gap-4 px-12 mt-5 flex-1 min-h-0 content-start">`);
+    items.forEach((line) => {
+        parts.push(buildManifestoCard(line, data.accentColor));
+    });
+    parts.push(`</div>`);
+    parts.push(renderOptionalCallout(data.callout));
+    return parts.join("\n");
+};

package/lib/layouts/stats.js

@@ -9,6 +9,9 @@ export const layoutStats = (data) => {
         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>`);
+        if (stat.numLabel) {
+            parts.push(`  <p class="font-accent font-extrabold text-${c(color)} text-sm tracking-wider mb-2">${renderInlineMarkup(stat.numLabel)}</p>`);
+        }
         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) {

package/lib/layouts/timeline.js

@@ -7,11 +7,14 @@ export const layoutTimeline = (data) => {
     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 baseColor = resolveItemColor(item.color, data.accentColor);
+        // 'hot' items are emphasized — keep the configured color when set, else fall back to warning (amber) for visibility.
+        const color = item.hot ? item.color || "warning" : baseColor;
         const dotBorder = item.done ? `bg-${c(color)}` : `bg-d-alt`;
         const dotInner = item.done ? "bg-d-text" : `bg-${c(color)}`;
+        const hotRing = item.hot ? ` ring-2 ring-${c(color)} ring-offset-2 ring-offset-d-bg` : "";
         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-10 h-10 rounded-full ${dotBorder} flex items-center justify-center shadow-lg${hotRing}">`);
         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>`);

package/lib/layouts/title.js

@@ -1,16 +1,21 @@
-import { renderInlineMarkup, accentBar } from "../utils.js";
+import { renderInlineMarkup, accentBar, renderEyebrow, renderChipRow, resolveAccent } from "../utils.js";
 export const layoutTitle = (data) => {
+    const accent = resolveAccent(data.accentColor);
+    const eyebrowHtml = renderEyebrow(data.eyebrow, accent);
+    const chipsHtml = renderChipRow(data.chips);
     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">`,
+        eyebrowHtml ? `  <div class="mb-4">${eyebrowHtml}</div>` : "",
         `  <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>`
             : "",
+        chipsHtml,
         `</div>`,
         accentBar("accent", "absolute bottom-0 left-0 right-0"),
     ]