@mulmocast/deck 0.2.0 → 0.4.0

package/lib/schema.js

@@ -50,12 +50,16 @@ export const textBlockSchema = z.object({
 });
 /** 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(),
     }),
 ]);
 export const bulletsBlockSchema = z.object({
@@ -170,6 +174,8 @@ export const cardSchema = z.object({
     footer: z.string().optional(),
     label: z.string().optional(),
     num: z.number().optional(),
+    /** Optional accent-colored typographic prefix before the card title (e.g. "01", "Ⅱ", "★"). */
+    numLabel: z.string().optional(),
     icon: z.string().optional(),
 });
 // ═══════════════════════════════════════════════════════════
@@ -183,10 +189,18 @@ export const slideStyleSchema = z.object({
     bgOpacity: z.number().optional(),
     footer: z.string().optional(),
 });
+/** Optional kicker/category label rendered at the top of a slide (small uppercase pill). */
+export const eyebrowSchema = z.object({
+    label: z.string(),
+    /** Color token (e.g. "primary", "amber", "success"). Falls back to slide.accentColor / theme primary when absent. */
+    color: accentColorKeySchema.optional(),
+});
 /** 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(),
 };
 // ═══════════════════════════════════════════════════════════
 // Layouts
@@ -199,6 +213,8 @@ export const titleSlideSchema = z.object({
     subtitle: z.string().optional(),
     author: z.string().optional(),
     note: z.string().optional(),
+    /** Optional row of small pill badges shown below the subtitle / note (e.g. ["🚀 deploy or die", "⚡ weekly output"]). */
+    chips: z.array(z.string()).optional(),
 });
 // ─── columns ───
 export const columnsSlideSchema = z.object({
@@ -261,6 +277,8 @@ export const statItemSchema = z.object({
     label: z.string(),
     color: accentColorKeySchema.optional(),
     change: z.string().optional(),
+    /** Optional accent-colored typographic prefix shown above the value (e.g. "01"). */
+    numLabel: z.string().optional(),
 });
 export const statsSlideSchema = z.object({
     layout: z.literal("stats"),
@@ -278,6 +296,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"),
@@ -382,6 +402,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
 // ═══════════════════════════════════════════════════════════
@@ -429,6 +472,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

@@ -47,19 +47,39 @@ export declare const renderCalloutBar: (obj: {
     align?: string;
     leftBar?: boolean;
 }) => string;
+/**
+ * Render an eyebrow pill (small uppercase letter-spaced category label).
+ * Renders nothing when `eyebrow` is undefined, so callers can pass through unconditionally.
+ */
+export declare const renderEyebrow: (eyebrow: {
+    label: string;
+    color?: string;
+} | undefined, defaultColor?: string) => string;
+/** Render a chip-row (small bordered pill badges, e.g. tags below a title). Empty / undefined input renders nothing. */
+export declare const renderChipRow: (chips: string[] | undefined) => string;
+/** Render an accent-colored typographic prefix (e.g. "01") to be placed before a card / stat title. */
+export declare const renderNumLabel: (label: string | undefined, colorKey?: string) => string;
 /** Render header text elements (stepLabel + title + subtitle) without wrapping div */
 export declare const renderHeaderText: (data: {
     accentColor?: string;
     stepLabel?: string;
     title: string;
     subtitle?: string;
+    eyebrow?: {
+        label: string;
+        color?: string;
+    };
 }) => string;
-/** Render the common slide header (accent bar + title + subtitle) */
+/** Render the common slide header (accent bar + title + subtitle, plus optional eyebrow pill) */
 export declare const slideHeader: (data: {
     accentColor?: string;
     stepLabel?: string;
     title: string;
     subtitle?: string;
+    eyebrow?: {
+        label: string;
+        color?: string;
+    };
 }) => string;
 /** Render accent bar + vertically-centered wrapper with header text (used by stats, timeline) */
 export declare const centeredSlideHeader: (data: {
@@ -67,6 +87,10 @@ export declare const centeredSlideHeader: (data: {
     stepLabel?: string;
     title: string;
     subtitle?: string;
+    eyebrow?: {
+        label: string;
+        color?: string;
+    };
 }) => 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

@@ -155,10 +155,39 @@ export const renderCalloutBar = (obj) => {
   <div class="px-4 py-3 text-sm font-body flex-1">${inner}</div>
 </div>`;
 };
+/**
+ * Render an eyebrow pill (small uppercase letter-spaced category label).
+ * Renders nothing when `eyebrow` is undefined, so callers can pass through unconditionally.
+ */
+export const renderEyebrow = (eyebrow, defaultColor) => {
+    if (!eyebrow)
+        return "";
+    const color = c(eyebrow.color ?? defaultColor ?? "primary");
+    return `<span class="inline-flex items-center gap-2 font-accent font-extrabold uppercase tracking-[0.16em] text-[12px] px-3 py-1 rounded-full border border-d-textDim/30 bg-${color}/10 text-${color}">${renderInlineMarkup(eyebrow.label)}</span>`;
+};
+/** Render a chip-row (small bordered pill badges, e.g. tags below a title). Empty / undefined input renders nothing. */
+export const renderChipRow = (chips) => {
+    if (!chips || chips.length === 0)
+        return "";
+    const items = chips
+        .map((label) => `<span class="text-sm px-3 py-1.5 rounded-full border border-d-textDim/30 bg-d-card/40 text-d-text">${renderInlineMarkup(label)}</span>`)
+        .join("");
+    return `<div class="flex gap-2 flex-wrap mt-4">${items}</div>`;
+};
+/** Render an accent-colored typographic prefix (e.g. "01") to be placed before a card / stat title. */
+export const renderNumLabel = (label, colorKey) => {
+    if (!label)
+        return "";
+    const color = c(colorKey ?? "primary");
+    return `<span class="font-accent font-extrabold text-${color} mr-2">${renderInlineMarkup(label)}</span>`;
+};
 /** 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>`);
     if (data.stepLabel) {
         lines.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
     }
@@ -168,7 +197,7 @@ export const renderHeaderText = (data) => {
     }
     return lines.join("\n");
 };
-/** Render the common slide header (accent bar + title + subtitle) */
+/** 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");

package/package.json

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