@mulmocast/deck 0.3.0 → 0.5.0

package/lib/schema.js

@@ -28,6 +28,8 @@ export const slideThemeFontsSchema = z.object({
     /** Optional secondary font for numbers / English labels (e.g. "Outfit"). When set, registers a `font-accent` Tailwind utility. */
     accent: z.string().optional(),
 });
+/** Card visual style. "glass" = transparent gradient bg + subtle border (matches reveal.js polished decks); "solid" = opaque card (default). */
+export const slideCardStyleSchema = z.enum(["glass", "solid"]);
 export const slideThemeSchema = z.object({
     colors: slideThemeColorsSchema,
     fonts: slideThemeFontsSchema,
@@ -35,10 +37,20 @@ export const slideThemeSchema = z.object({
     bgGradient: z.string().optional(),
     /** Optional CSS gradient injected as `<style>` to paint `h1.font-title.font-bold` with `background-clip: text`. */
     titleGradient: z.string().optional(),
+    /** Default card style for the entire deck. Per-slide layouts can still override individual cards. */
+    cardStyle: slideCardStyleSchema.optional(),
 });
 // ═══════════════════════════════════════════════════════════
 // Content Blocks — the atoms of slide content
 // ═══════════════════════════════════════════════════════════
+/**
+ * Abstract text-size variant. Maps to a theme-aware (size, weight, color) tuple,
+ * so authors don't have to hand-pick pixel sizes per slide.
+ *   lead = muted intro paragraph (slightly larger, dim)
+ *   big  = emphasized body (larger, full text color)
+ *   sub  = card / footnote body (smaller, dim)
+ */
+export const textSizeSchema = z.enum(["lead", "big", "sub"]);
 export const textBlockSchema = z.object({
     type: z.literal("text"),
     value: z.string(),
@@ -47,15 +59,22 @@ export const textBlockSchema = z.object({
     dim: z.boolean().optional(),
     fontSize: z.number().optional(),
     color: accentColorKeySchema.optional(),
+    size: textSizeSchema.optional(),
 });
 /** Sub-bullet item: plain string or object with text */
 const subBulletItemSchema = z.union([z.string(), z.object({ text: z.string() })]);
-/** Bullet item: plain string or object with text and optional sub-items (2 levels max) */
+/** Status-icon variants for bullets (renders ✓ / ✕ / ⚠ in the accent color of the variant). */
+export const bulletIconSchema = z.enum(["ok", "no", "warn"]);
+/** Bullet item: plain string, or object with text + optional sub-items + optional status icon. */
 export const bulletItemSchema = z.union([
     z.string(),
     z.object({
         text: z.string(),
         items: z.array(subBulletItemSchema).optional(),
+        /** Optional status icon shown in place of the default bullet marker ("ok" → ✓, "no" → ✕, "warn" → ⚠). */
+        icon: bulletIconSchema.optional(),
+        /** Per-item size variant (overrides the block-level size). */
+        size: textSizeSchema.optional(),
     }),
 ]);
 export const bulletsBlockSchema = z.object({
@@ -63,6 +82,8 @@ export const bulletsBlockSchema = z.object({
     items: z.array(bulletItemSchema),
     ordered: z.boolean().optional(),
     icon: z.string().optional(),
+    /** Block-level size variant — applied to every item that doesn't set its own. */
+    size: textSizeSchema.optional(),
 });
 export const codeBlockSchema = z.object({
     type: z.literal("code"),
@@ -75,6 +96,8 @@ export const calloutBlockSchema = z.object({
     label: z.string().optional(),
     color: accentColorKeySchema.optional(),
     style: z.enum(["quote", "info", "warning"]).optional(),
+    /** Optional size variant for the callout body text. */
+    size: textSizeSchema.optional(),
 });
 export const metricBlockSchema = z.object({
     type: z.literal("metric"),
@@ -87,6 +110,15 @@ export const dividerBlockSchema = z.object({
     type: z.literal("divider"),
     color: accentColorKeySchema.optional(),
 });
+/**
+ * Small uppercase accent label, intended for use INSIDE cards (matches reveal.js .tag).
+ * Distinct from the slide-level `eyebrow`: this is per-block and sits above an h3 / title in a card.
+ */
+export const tagBlockSchema = z.object({
+    type: z.literal("tag"),
+    text: z.string(),
+    color: accentColorKeySchema.optional(),
+});
 export const imageBlockSchema = z.object({
     type: z.literal("image"),
     src: z.string(),
@@ -139,6 +171,7 @@ const baseBlockSchemas = [
     chartBlockSchema,
     mermaidBlockSchema,
     tableBlockSchema,
+    tagBlockSchema,
 ];
 /** All content block types except section (used inside section to prevent recursion) */
 const nonSectionContentBlockSchema = z.discriminatedUnion("type", [...baseBlockSchemas]);
@@ -191,12 +224,24 @@ export const eyebrowSchema = z.object({
     /** Color token (e.g. "primary", "amber", "success"). Falls back to slide.accentColor / theme primary when absent. */
     color: accentColorKeySchema.optional(),
 });
+/** Slide content density. "compact" shrinks body / bullet / callout text and tightens padding (~85% scale). */
+export const slideDensitySchema = z.enum(["compact", "default"]);
+/** Slide title (h2) size override. "small" tightens for content-heavy slides, "hero" enlarges for closing/section slides. */
+export const slideTitleSizeSchema = z.enum(["small", "default", "large", "hero"]);
+/** Slide subtitle size variant. Defaults to body (15px); "big" matches reveal.js .big.muted ≈ 22px. */
+export const slideSubtitleSizeSchema = z.enum(["default", "big", "lead"]);
 /** Common slide properties shared across all layouts */
 const slideBaseFields = {
     accentColor: accentColorKeySchema.optional(),
     style: slideStyleSchema.optional(),
     /** Optional eyebrow (small uppercase pill) shown at the top of the slide above the header/title. */
     eyebrow: eyebrowSchema.optional(),
+    /** Per-slide density. "compact" reduces text size and padding for slides with a lot of content. */
+    density: slideDensitySchema.optional(),
+    /** Optional override for the slide title (h2) size. Affects layouts that go through slideHeader / centeredSlideHeader. */
+    titleSize: slideTitleSizeSchema.optional(),
+    /** Optional override for the slide subtitle size. Defaults to body (15px). */
+    subtitleSize: slideSubtitleSizeSchema.optional(),
 };
 // ═══════════════════════════════════════════════════════════
 // Layouts
@@ -230,6 +275,10 @@ export const comparisonPanelSchema = z.object({
     accentColor: accentColorKeySchema.optional(),
     content: z.array(contentBlockSchema).optional(),
     footer: z.string().optional(),
+    /** Optional column ratio (numeric, used as the panel's flex-grow). Default = 1 on both sides (50/50). */
+    ratio: z.number().positive().optional(),
+    /** When true, drop the card chrome (background, top accent bar, padding) and render content directly on the slide. */
+    cardless: z.boolean().optional(),
 });
 export const comparisonSlideSchema = z.object({
     layout: z.literal("comparison"),
@@ -249,6 +298,8 @@ export const gridItemSchema = z.object({
     num: z.number().optional(),
     icon: z.string().optional(),
     content: z.array(contentBlockSchema).optional(),
+    /** Optional column span (1-4) for asymmetric grids (e.g. one wide item across the row). Default = 1. */
+    span: z.number().int().min(1).max(4).optional(),
 });
 export const gridSlideSchema = z.object({
     layout: z.literal("grid"),
@@ -292,6 +343,8 @@ export const timelineItemSchema = z.object({
     description: z.string().optional(),
     color: accentColorKeySchema.optional(),
     done: z.boolean().optional(),
+    /** Optional emphasis flag — when true the step is rendered with a stronger accent border and tinted background. */
+    hot: z.boolean().optional(),
 });
 export const timelineSlideSchema = z.object({
     layout: z.literal("timeline"),
@@ -396,6 +449,29 @@ export const funnelSlideSchema = z.object({
     stages: z.array(funnelStageSchema),
     callout: calloutBarSchema.optional(),
 });
+// ─── manifesto ───
+/** A single line in a manifesto / creed grid. */
+export const manifestoLineSchema = z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    /** Accent color for the line's left-border highlight. Falls back to slide.accentColor / "primary". */
+    accentColor: accentColorKeySchema.optional(),
+});
+/**
+ * Grid of short bordered cards, each with a colored left accent — useful for manifestos,
+ * principles, "what we believe" lists, etc.
+ */
+export const manifestoSlideSchema = z.object({
+    layout: z.literal("manifesto"),
+    ...slideBaseFields,
+    title: z.string(),
+    stepLabel: z.string().optional(),
+    subtitle: z.string().optional(),
+    items: z.array(manifestoLineSchema),
+    /** Number of grid columns (default: 2). */
+    columns: z.number().int().min(1).max(4).optional(),
+    callout: calloutBarSchema.optional(),
+});
 // ═══════════════════════════════════════════════════════════
 // Branding — logo & background image overlay
 // ═══════════════════════════════════════════════════════════
@@ -443,6 +519,7 @@ export const slideLayoutSchema = z.discriminatedUnion("layout", [
     tableSlideSchema,
     funnelSlideSchema,
     waterfallSlideSchema,
+    manifestoSlideSchema,
 ]);
 /** Media schema registered in mulmoImageAssetSchema */
 export const mulmoSlideMediaSchema = z

package/lib/utils.d.ts

@@ -4,9 +4,15 @@ export declare const escapeHtml: (s: string) => string;
 /** Escape HTML and convert newlines to <br> */
 export declare const nl2br: (s: string) => string;
 /**
- * Render inline markup: escape HTML first, then parse **bold** and {color:text}.
+ * Render inline markup: escape HTML first, then parse **bold**, *emphasis*, and {color:text}.
  * Also converts newlines to <br>.
  * Safe: escapeHtml runs before any markup parsing, so XSS is impossible.
+ *
+ * **bold**     → <strong>...</strong>       (kept as-is for back-compat)
+ * *emphasis*   → <em>...</em>               (rendered in warning color via CSS; mimics reveal.js amber <em>)
+ * {color:text} → <span class="text-d-color">...</span>
+ *
+ * Bold is parsed first; the single-asterisk pass only matches what's left, so "**x**" doesn't double-fire.
  */
 export declare const renderInlineMarkup: (s: string) => string;
 /** Sanitize a hex color value (hex digits only) */
@@ -69,6 +75,8 @@ export declare const renderHeaderText: (data: {
         label: string;
         color?: string;
     };
+    titleSize?: "small" | "default" | "large" | "hero";
+    subtitleSize?: "default" | "big" | "lead";
 }) => string;
 /** Render the common slide header (accent bar + title + subtitle, plus optional eyebrow pill) */
 export declare const slideHeader: (data: {
@@ -80,6 +88,8 @@ export declare const slideHeader: (data: {
         label: string;
         color?: string;
     };
+    titleSize?: "small" | "default" | "large" | "hero";
+    subtitleSize?: "default" | "big" | "lead";
 }) => string;
 /** Render accent bar + vertically-centered wrapper with header text (used by stats, timeline) */
 export declare const centeredSlideHeader: (data: {
@@ -91,6 +101,8 @@ export declare const centeredSlideHeader: (data: {
         label: string;
         color?: string;
     };
+    titleSize?: "small" | "default" | "large" | "hero";
+    subtitleSize?: "default" | "big" | "lead";
 }) => string;
 /** Generate a unique ID with the given prefix (e.g. "chart-0", "mermaid-1") */
 export declare const generateSlideId: (prefix: string) => string;

package/lib/utils.js

@@ -14,14 +14,22 @@ export const nl2br = (s) => {
 /** 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}.
+ * Render inline markup: escape HTML first, then parse **bold**, *emphasis*, and {color:text}.
  * Also converts newlines to <br>.
  * Safe: escapeHtml runs before any markup parsing, so XSS is impossible.
+ *
+ * **bold**     → <strong>...</strong>       (kept as-is for back-compat)
+ * *emphasis*   → <em>...</em>               (rendered in warning color via CSS; mimics reveal.js amber <em>)
+ * {color:text} → <span class="text-d-color">...</span>
+ *
+ * Bold is parsed first; the single-asterisk pass only matches what's left, so "**x**" doesn't double-fire.
  */
 export const renderInlineMarkup = (s) => {
     let result = escapeHtml(s);
-    // **bold** → <strong>bold</strong>
+    // Bold MUST run before emphasis so **x** doesn't get eaten by the single-* pass.
     result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+    // Single-* emphasis. The negative-lookbehind/lookahead keeps it from biting into surviving "**" inside <strong>.
+    result = result.replace(/(?<![*\w])\*(?!\s)([^*\n]+?)(?<!\s)\*(?!\w)/g, '<em class="text-d-warning not-italic font-bold">$1</em>');
     // {color:text} → <span class="text-d-color">text</span>
     result = result.replace(/\{([a-z]+):(.+?)\}/g, (_match, color, text) => {
         if (inlineColorKeys.has(color)) {
@@ -181,26 +189,41 @@ export const renderNumLabel = (label, colorKey) => {
     const color = c(colorKey ?? "primary");
     return `<span class="font-accent font-extrabold text-${color} mr-2">${renderInlineMarkup(label)}</span>`;
 };
+/** h2 font-size by titleSize variant — kept in one place so it's easy to keep proportional to subtitle / body. */
+const TITLE_SIZE_CLS = {
+    small: "text-[34px]",
+    default: "text-[42px]",
+    large: "text-[52px]",
+    hero: "text-[64px]",
+};
+/** Subtitle font-size by variant. Default keeps the original 15px; bigger variants align with the reveal.js .big/.lead helpers. */
+const SUBTITLE_SIZE_CLS = {
+    default: "text-[15px]",
+    lead: "text-[17px]",
+    big: "text-[22px]",
+};
 /** Render header text elements (stepLabel + title + subtitle) without wrapping div */
 export const renderHeaderText = (data) => {
     const accent = resolveAccent(data.accentColor);
     const lines = [];
     const eyebrowHtml = renderEyebrow(data.eyebrow, accent);
     if (eyebrowHtml)
-        lines.push(`<div class="mb-2">${eyebrowHtml}</div>`);
+        lines.push(`<div class="mb-3">${eyebrowHtml}</div>`);
     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>`);
+    const titleCls = TITLE_SIZE_CLS[data.titleSize ?? "default"];
+    lines.push(`<h2 class="${titleCls} 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>`);
+        const subtitleCls = SUBTITLE_SIZE_CLS[data.subtitleSize ?? "default"];
+        lines.push(`<p class="${subtitleCls} text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
     }
     return lines.join("\n");
 };
 /** Render the common slide header (accent bar + title + subtitle, plus optional eyebrow pill) */
 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");
+    return [accentBar(accent), `<div class="px-12 pt-8 shrink-0">`, renderHeaderText(data), `</div>`].join("\n");
 };
 /** Render accent bar + vertically-centered wrapper with header text (used by stats, timeline) */
 export const centeredSlideHeader = (data) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmocast/deck",
-  "version": "0.3.0",
+  "version": "0.5.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",