@mulmocast/deck 0.4.0 → 0.5.1

package/README.md

@@ -45,16 +45,304 @@ const html = generateSlideHTML(theme, slide);
 
 ## Available layouts
 
-`title` · `bigQuote` · `columns` · `comparison` · `stats` · `table` · `timeline` · `matrix` · `grid` · `split` · `funnel` · `waterfall`
+`title` · `bigQuote` · `columns` · `comparison` · `stats` · `table` · `timeline` · `matrix` · `grid` · `split` · `funnel` · `waterfall` · `manifesto`
 
 Each layout has its own Zod schema under `slideLayoutSchema` (a discriminated union). See `src/schema.ts` for the full shape.
 
+## Content blocks
+
+`text` · `bullets` · `code` · `callout` · `metric` · `divider` · `image` · `imageRef` · `chart` · `mermaid` · `section` · `table` · `tag`
+
+## Enhancements (0.2 – 0.5)
+
+All fields below are **optional and additive**. Existing decks render byte-identically when they're absent.
+
+### Theme — backgrounds, gradient titles, accent font (0.2.0)
+
+```ts
+const theme: SlideTheme = {
+  colors: { /* ... */ },
+  fonts: {
+    title: "'Noto Sans JP', system-ui, sans-serif",
+    body:  "'Noto Sans JP', system-ui, sans-serif",
+    mono:  "Consolas",
+    accent: "Outfit",                                       // optional
+  },
+  bgGradient: `
+    radial-gradient(1200px 700px at 12% -10%, rgba(56,189,248,.16), transparent 60%),
+    linear-gradient(160deg, #0A0F24, #16224D)
+  `,                                                        // optional
+  titleGradient: "linear-gradient(100deg, #FFF, #38BDF8 60%, #818CF8)", // optional
+};
+```
+
+- `bgGradient` — any CSS background string. Each slide also accepts `style.bgGradient` to override per-slide.
+- `titleGradient` — applied as `background-clip: text` to slide `<h1>` / `<h2>` for gradient-filled titles.
+- `fonts.accent` — registered as a Tailwind `font-accent` class. Used for tracking-heavy uppercase labels (eyebrow, numLabel, chip stats, etc.).
+- `isSafeCssBackground()` is exported — bad values are silently dropped so you can't break out of the CSS context.
+
+### Eyebrow — small uppercase category pill (0.3.0)
+
+Available on every layout that uses the standard slide header (`stats`, `columns`, `comparison`, `grid`, `timeline`, `matrix`, `funnel`, `waterfall`, `manifesto`) plus `title` and `bigQuote`.
+
+```ts
+{
+  layout: "stats",
+  eyebrow: { label: "Highlights" },                   // primary by default
+  // or with explicit color
+  // eyebrow: { label: "重要", color: "warning" },
+  title: "Quarterly Snapshot",
+  stats: [/* ... */],
+}
+```
+
+### Chips row (title layout) — pill badges (0.3.0)
+
+```ts
+{
+  layout: "title",
+  title: "第4回 BootCamp\nキックオフ",
+  chips: ["🚀 deploy or die", "🔁 ドッグフーディング", "⚡ 週1アウトプット"],
+}
+```
+
+### numLabel — accent-colored prefix (0.3.0)
+
+Available on `stats[]` items and `columns[]` cards. Renders as a small accent-colored typographic prefix above (stats) or before (columns) the title — useful for "01 / 02 / 03 …" numbered lists.
+
+```ts
+{
+  layout: "stats",
+  title: "Quarterly Snapshot",
+  stats: [
+    { numLabel: "01", value: "+42%", label: "Revenue YoY", color: "success" },
+    { numLabel: "02", value: "1.8M", label: "Active Users", color: "primary" },
+  ],
+}
+```
+
+```ts
+{
+  layout: "columns",
+  title: "Agenda",
+  columns: [
+    { numLabel: "01", title: "Origin",  content: [/* ... */] },
+    { numLabel: "02", title: "Plan",    content: [/* ... */] },
+  ],
+}
+```
+
+### Icon bullets — status glyphs (0.4.0)
+
+Bullet items now accept `{ icon: "ok" | "no" | "warn" }` to render ✓ / ✕ / ⚠ in the success / danger / warning theme color, replacing the default block marker.
+
+```ts
+{
+  type: "bullets",
+  items: [
+    { text: "all green",   icon: "ok"   },   // ✓ in success color
+    { text: "broken",      icon: "no"   },   // ✕ in danger color
+    { text: "watch out",   icon: "warn" },   // ⚠ in warning color
+    "plain string still works (uses block-level marker)",
+  ],
+}
+```
+
+### Hot timeline — "you are here" emphasis (0.4.0)
+
+Add `hot: true` to a `timeline` item to ring its dot. Defaults the color to `warning` when no `color` is set; otherwise it preserves the item's color.
+
+```ts
+{
+  layout: "timeline",
+  title: "Roadmap",
+  items: [
+    { date: "Q1", title: "Kickoff",    done: true,  color: "success" },
+    { date: "Q2", title: "MVP",        done: true,  color: "success" },
+    { date: "Q3", title: "Dogfooding", hot: true,   color: "warning" }, // ← ring
+    { date: "Q4", title: "Launch" },
+  ],
+}
+```
+
+### Manifesto layout — principles grid (0.4.0)
+
+Grid of small left-bordered cards. Useful for creeds / "what we believe" lists / commitments. Configurable column count (1-4); each line has its own `accentColor` for the left bar.
+
+```ts
+{
+  layout: "manifesto",
+  eyebrow: { label: "Culture" },
+  title: "SS の行動哲学",
+  columns: 2,                                 // optional, default 2 (1-4)
+  items: [
+    { title: "行動する、それがすべて。",
+      description: "考えているだけでは、存在しないのと同じ。",
+      accentColor: "primary" },
+    { title: "deploy or die.",
+      description: "社会に実装していくことが、すべて。",
+      accentColor: "warning" },
+    { title: "締切のないタスクは、やらなくていいタスク。",
+      accentColor: "success" },
+    { title: "失敗していない＝挑戦していない。",
+      accentColor: "danger" },
+  ],
+}
+```
+
+### Text size variants — lead / big / sub (0.5.0)
+
+Theme-aware size variants for `text`, `bullets`, and `callout` blocks. Use these instead of hand-picking pixel sizes so the (font + color) tuple stays consistent.
+
+| `size` | px | color | role |
+|--|--|--|--|
+| `default` (omitted) | 15 | text-muted | body |
+| `lead` | 17 | text-muted | intro paragraph |
+| `big` | 19 | text-full | emphasized body |
+| `sub` | 13 | text-dim | card footnote |
+
+```ts
+// Block-level (applies to every item in the list)
+{ type: "bullets", size: "lead", items: ["…", "…"] }
+
+// Per-item override (mixes sizes inside one block)
+{ type: "bullets", size: "lead", items: [
+    "intro size lead",
+    { text: "footnote size sub", size: "sub" },
+]}
+
+// callout with smaller body text
+{ type: "callout", label: "Note", text: "…", size: "sub" }
+```
+
+### Inline `*emphasis*` (0.5.0)
+
+In addition to `**bold**` and `{color:text}`, single-asterisk emphasis renders as warning-colored bold (mimics reveal.js amber `<em>`):
+
+```
+**bold**     → strong, full text color
+*emphasis*   → bold, warning color (amber)
+{primary:x}  → primary-colored span
+```
+
+`*` is treated as emphasis only at word boundaries — mid-word `a*b*c` (and `* spaced *`) are left as literal asterisks, so existing prose isn't accidentally parsed.
+
+### Slide density — compact (0.5.0)
+
+`density: "compact"` shrinks body / list text and tightens padding for slides with a lot of content. Approximates reveal.js' autofit, no JS required.
+
+```ts
+{
+  layout: "comparison",
+  density: "compact",
+  // …content-heavy comparison content here…
+}
+```
+
+CSS is scoped to `.density-compact` on the slide wrapper so it can't leak.
+
+### Comparison panel `ratio` and `cardless` (0.5.0)
+
+`comparison.left.ratio` / `comparison.right.ratio` (numeric) give asymmetric left/right panels. `cardless: true` drops the card chrome and renders content directly on the slide — useful for the reveal.js `.two` pattern (bare list left, boxed callout right).
+
+```ts
+{
+  layout: "comparison",
+  left: {
+    title: "共有する",
+    cardless: true,
+    ratio: 1.2,
+    content: [{ type: "bullets", size: "lead", items: [...] }],
+  },
+  right: {
+    title: "まず動く最小(MVP)",
+    content: [
+      { type: "tag", text: "MVP", color: "warning" },
+      { type: "text", value: "…", size: "sub" },
+    ],
+  },
+}
+```
+
+### Grid item `span` (0.5.0)
+
+Asymmetric grids — one wide item spanning multiple columns.
+
+```ts
+{
+  layout: "grid",
+  gridColumns: 3,
+  items: [
+    { title: "wide hero card", span: 2 },   // takes two columns
+    { title: "narrow card" },
+    { title: "another", span: 3 },          // spans full row
+  ],
+}
+```
+
+### Title size override — small / default / large / hero (0.5.0)
+
+Per-slide override for the slide title. Applies to layouts that use `slideHeader` / `centeredSlideHeader` (most layouts), and to the `title` layout's h1.
+
+| `titleSize` | h2 (px) | title-layout h1 (px) |
+|--|--|--|
+| `small` | 34 | 48 |
+| `default` (omitted) | 42 | 60 |
+| `large` | 52 | 68 |
+| `hero` | 64 | 76 |
+
+```ts
+{ layout: "title", titleSize: "hero", title: "OPENING" }
+{ layout: "comparison", titleSize: "small", density: "compact", title: "ルールと注意点", … }
+```
+
+### Subtitle size — default / lead / big (0.5.0)
+
+```ts
+{
+  layout: "stats",
+  title: "Q1 Snapshot",
+  subtitle: "売上は前年同期比 +42%",
+  subtitleSize: "big",  // 22px — matches reveal.js .big.muted
+}
+```
+
+### Glass card style (0.5.0)
+
+`theme.cardStyle: "glass"` swaps the default opaque `bg-d-card` for a subtle white-gradient + 1px translucent border + 16px radius. Off by default — when set, every card on every slide gets the treatment.
+
+```ts
+const theme: SlideTheme = {
+  colors: { … },
+  fonts: { … },
+  cardStyle: "glass",
+};
+```
+
+### `tag` content block (0.5.0)
+
+Small uppercase accent label intended for use INSIDE cards. Distinct from the slide-level `eyebrow` (which sits at the top of the whole slide).
+
+```ts
+{
+  layout: "comparison",
+  right: {
+    title: "価値が伝わる最小のものを",
+    content: [
+      { type: "tag", text: "まず動く最小 (MVP)", color: "warning" },
+      { type: "text", value: "CLI / HTML1枚 / LP / モック でいい。", size: "sub" },
+    ],
+  },
+}
+```
+
 ## Design
 
 - **Data → HTML, no side effects.** Pure functions, easy to test and use anywhere.
 - **Tailwind via CDN.** Themes resolve to CSS variables; no compile step.
 - **Schema-first.** All shapes are validated with [Zod](https://zod.dev), so types are derived (not duplicated).
 - **Browser-safe.** No Node-only APIs. Just import in a Vite/Vue/React app and render into an iframe.
+- **Additive evolution.** New optional fields never break existing decks — guaranteed by the test suite.
 
 ## Consumers
 

package/lib/blocks.js

@@ -1,4 +1,17 @@
 import { escapeHtml, c, generateSlideId, renderInlineMarkup, blockTitle, resolveChangeColor, resolveAccent } from "./utils.js";
+/**
+ * Map a TextSize variant to its Tailwind classes.
+ * default — body / muted (the original 0.1.x behavior; emitted only when neither size nor numeric fontSize is set).
+ * lead    — slightly larger muted intro paragraph.
+ * big     — larger, full text color.
+ * sub     — smaller, dimmer card footnote.
+ */
+const TEXT_SIZE_STYLES = {
+    default: { fontCls: "text-[15px]", colorCls: "text-d-muted" },
+    lead: { fontCls: "text-[17px] leading-relaxed", colorCls: "text-d-muted" },
+    big: { fontCls: "text-[19px] leading-snug", colorCls: "text-d-text" },
+    sub: { fontCls: "text-[13px] leading-snug", colorCls: "text-d-dim" },
+};
 // ─── Table cell rendering (shared with layouts/table.ts) ───
 export const resolveCellColor = (cellObj, isRowHeader) => {
     if (cellObj.color)
@@ -76,10 +89,17 @@ export const renderContentBlock = (block) => {
             return renderSection(block);
         case "table":
             return renderTableBlock(block);
+        case "tag":
+            return renderTag(block);
         default:
             return `<p class="text-sm text-d-muted font-body">[unknown block type]</p>`;
     }
 };
+/** Render a card-internal accent tag (small uppercase label, sits above an h3). Matches reveal.js .tag. */
+const renderTag = (block) => {
+    const color = c(block.color || "primary");
+    return `<span class="text-xs font-bold uppercase tracking-[0.12em] text-${color} font-accent">${renderInlineMarkup(block.text)}</span>`;
+};
 /** Render an array of content blocks to HTML */
 export const renderContentBlocks = (blocks) => {
     return blocks.map(renderContentBlock).join("\n");
@@ -95,12 +115,13 @@ export const renderCardContentBlocks = (blocks) => {
     })
         .join("\n");
 };
+/** When the author explicitly sets color/dim, honor it; otherwise inherit from the size variant's default. */
 const resolveTextColor = (block) => {
     if (block.color)
         return `text-${c(block.color)}`;
     if (block.dim)
         return "text-d-dim";
-    return "text-d-muted";
+    return undefined;
 };
 const resolveAlign = (align) => {
     if (align === "center")
@@ -110,11 +131,15 @@ const resolveAlign = (align) => {
     return "";
 };
 const renderText = (block) => {
-    const color = resolveTextColor(block);
+    // Resolution order for size: explicit numeric `fontSize` (legacy) wins over new `size` variant.
+    const legacyXl = block.fontSize !== undefined && block.fontSize >= 18;
+    const style = TEXT_SIZE_STYLES[block.size ?? "default"];
+    const sizeCls = legacyXl ? "text-xl" : style.fontCls;
+    const explicitColor = resolveTextColor(block);
+    const colorCls = explicitColor ?? style.colorCls ?? "text-d-muted";
     const bold = block.bold ? "font-bold" : "";
-    const size = block.fontSize !== undefined && block.fontSize >= 18 ? "text-xl" : "text-[15px]";
     const alignCls = resolveAlign(block.align);
-    return `<p class="${size} ${color} ${bold} ${alignCls} font-body leading-relaxed">${renderInlineMarkup(block.value)}</p>`;
+    return `<p class="${sizeCls} ${colorCls} ${bold} ${alignCls} font-body leading-relaxed">${renderInlineMarkup(block.value)}</p>`;
 };
 /** Extract text from a bullet item (string or object) */
 const bulletItemText = (item) => {
@@ -137,8 +162,15 @@ const STATUS_ICON_GLYPHS = {
     no: { glyph: "\u2715", color: "danger" }, // \u2715
     warn: { glyph: "\u26a0", color: "warning" }, // \u26a0
 };
+/** Resolve the size variant for a bullet item \u2014 per-item size wins over block-level size. */
+const resolveBulletSize = (block, item) => {
+    if (typeof item === "object" && item.size)
+        return item.size;
+    return block.size ?? "default";
+};
 const renderBullets = (block) => {
     const tag = block.ordered ? "ol" : "ul";
+    const blockStyle = TEXT_SIZE_STYLES[block.size ?? "default"];
     const items = block.items
         .map((item, i) => {
         // Per-item status icon overrides the block-level marker / numbered prefix.
@@ -148,10 +180,13 @@ const renderBullets = (block) => {
             : `<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">${markerHtml}<span>${renderInlineMarkup(text)}</span></div>${subHtml}</li>`;
+        const itemStyle = TEXT_SIZE_STYLES[resolveBulletSize(block, item)];
+        // Emit per-item classes only when they differ from the block-level style so output stays compact in the common case.
+        const itemCls = itemStyle.fontCls === blockStyle.fontCls && itemStyle.colorCls === blockStyle.colorCls ? "" : ` ${itemStyle.fontCls} ${itemStyle.colorCls}`;
+        return `  <li class="flex flex-col gap-1${itemCls}"><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}>`;
+    return `<${tag} class="space-y-2 ${blockStyle.fontCls} ${blockStyle.colorCls} font-body">\n${items}\n</${tag}>`;
 };
 const renderCode = (block) => {
     return `<pre class="bg-[#0D1117] p-4 rounded text-sm font-mono text-d-dim leading-relaxed whitespace-pre-wrap">${escapeHtml(block.code)}</pre>`;
@@ -167,11 +202,13 @@ const renderCallout = (block) => {
     };
     const borderCls = resolveBorderCls(block.style);
     const bg = isQuote ? "bg-d-alt" : "bg-d-card";
-    const textCls = isQuote ? "italic text-d-muted" : "text-d-muted";
+    // Pre-Phase-4 default was `text-sm` (~14px). Map to the size variants only when explicitly requested.
+    const sizeStyle = block.size ? TEXT_SIZE_STYLES[block.size] : { fontCls: "text-sm", colorCls: "text-d-muted" };
+    const textCls = isQuote ? `italic ${sizeStyle.colorCls}` : sizeStyle.colorCls;
     const content = block.label
-        ? `<span class="font-bold text-${c(block.color || "warning")}">${renderInlineMarkup(block.label)}:</span> <span class="text-d-muted">${renderInlineMarkup(block.text)}</span>`
+        ? `<span class="font-bold text-${c(block.color || "warning")}">${renderInlineMarkup(block.label)}:</span> <span class="${textCls}">${renderInlineMarkup(block.text)}</span>`
         : `<span class="${textCls}">${renderInlineMarkup(block.text)}</span>`;
-    return `<div class="${bg} ${borderCls} p-3 rounded text-sm font-body">${content}</div>`;
+    return `<div class="${bg} ${borderCls} p-3 rounded ${sizeStyle.fontCls} font-body">${content}</div>`;
 };
 const renderMetric = (block) => {
     const lines = [];

package/lib/index.d.ts

@@ -4,4 +4,4 @@ export { renderSlideContent } from "./layouts/index.js";
 export { renderContentBlock, renderContentBlocks } from "./blocks.js";
 export { escapeHtml, resetSlideIdCounter, renderInlineMarkup } from "./utils.js";
 export { mulmoSlideMediaSchema, slideLayoutSchema, slideThemeSchema, contentBlockSchema, imageRefBlockSchema, chartBlockSchema, mermaidBlockSchema, accentColorKeySchema, slideBrandingLogoSchema, slideBrandingSchema, } from "./schema.js";
-export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, ContentBlock, ImageRefBlock, ChartBlock, MermaidBlock, AccentColorKey, TitleSlide, ColumnsSlide, ComparisonSlide, GridSlide, BigQuoteSlide, StatsSlide, TimelineSlide, SplitSlide, MatrixSlide, TableSlide, FunnelSlide, Card, CalloutBar, SlideStyle, SlideBrandingLogo, SlideBranding, } from "./schema.js";
+export type { MulmoSlideMedia, SlideLayout, SlideTheme, SlideThemeColors, SlideThemeFonts, AccentColorKey, ContentBlock, TextBlock, BulletsBlock, BulletItem, CodeBlock, CalloutBlock, MetricBlock, DividerBlock, ImageBlock, ImageRefBlock, ChartBlock, MermaidBlock, SectionBlock, TableBlock, TagBlock, TableCellValue, TitleSlide, ColumnsSlide, ComparisonSlide, ComparisonPanel, GridSlide, GridItem, BigQuoteSlide, StatsSlide, StatItem, TimelineSlide, TimelineItem, SplitSlide, SplitPanel, MatrixSlide, MatrixCell, TableSlide, FunnelSlide, FunnelStage, WaterfallSlide, WaterfallItem, ManifestoSlide, ManifestoLine, Card, CalloutBar, SlideStyle, SlideBrandingLogo, SlideBranding, BulletIcon, TextSize, SlideDensity, SlideTitleSize, SlideSubtitleSize, SlideCardStyle, } from "./schema.js";

package/lib/layouts/comparison.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, cardWrap, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, c, accentBar, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 const buildPanel = (panel) => {
     const accent = resolveAccent(panel.accentColor);
@@ -12,7 +12,23 @@ const buildPanel = (panel) => {
     if (panel.footer) {
         inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${renderInlineMarkup(panel.footer)}</p>`);
     }
-    return cardWrap(accent, inner.join("\n"), "flex-1");
+    // Tailwind's arbitrary `flex-[1.5]` works at runtime but stops short of clean class sanitization;
+    // emitting `flex-grow` inline keeps the output predictable and avoids depending on JIT mode.
+    const flexStyle = panel.ratio !== undefined ? ` style="flex-grow:${panel.ratio};flex-shrink:1;flex-basis:0"` : "";
+    const flexCls = panel.ratio !== undefined ? "" : " flex-1";
+    // Cardless: render content directly without card chrome. Useful for the bullet-list / card mixed layout
+    // common in slide decks (one bare list, one boxed callout).
+    if (panel.cardless) {
+        return `<div class="flex flex-col min-h-0${flexCls} py-1"${flexStyle}>
+${inner.join("\n")}
+</div>`;
+    }
+    return `<div class="bg-d-card rounded-lg shadow-lg overflow-hidden flex flex-col min-h-0${flexCls}"${flexStyle}>
+  ${accentBar(accent)}
+  <div class="p-5 flex flex-col flex-1 min-h-0 overflow-hidden">
+${inner.join("\n")}
+  </div>
+</div>`;
 };
 export const layoutComparison = (data) => {
     const parts = [slideHeader(data)];

package/lib/layouts/grid.js

@@ -28,7 +28,10 @@ export const layoutGrid = (data) => {
         if (item.content) {
             inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">${renderCardContentBlocks(item.content)}</div>`);
         }
-        parts.push(cardWrap(itemAccent, inner.join("\n")));
+        // Asymmetric grids: items can span multiple columns. Class names are mapped explicitly so the JIT compiler keeps them.
+        const SPAN_CLS = { 1: "", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" };
+        const spanCls = item.span && item.span > 1 ? SPAN_CLS[item.span] || "" : "";
+        parts.push(cardWrap(itemAccent, inner.join("\n"), spanCls));
     });
     parts.push(`</div>`);
     if (data.footer) {

package/lib/layouts/title.js

@@ -1,15 +1,26 @@
 import { renderInlineMarkup, accentBar, renderEyebrow, renderChipRow, resolveAccent } from "../utils.js";
+/**
+ * h1 font-size for the title layout, keyed by titleSize variant.
+ * Tuned to match reveal.js scale (base 30px × multiplier): default ≈ 2em, hero ≈ 2.5em.
+ */
+const TITLE_H1_CLS = {
+    small: "text-[48px]",
+    default: "text-[60px]",
+    large: "text-[68px]",
+    hero: "text-[76px]",
+};
 export const layoutTitle = (data) => {
     const accent = resolveAccent(data.accentColor);
     const eyebrowHtml = renderEyebrow(data.eyebrow, accent);
     const chipsHtml = renderChipRow(data.chips);
+    const titleCls = TITLE_H1_CLS[data.titleSize ?? "default"];
     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>`,
+        `  <h1 class="${titleCls} 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

package/lib/render.js

@@ -88,6 +88,19 @@ export const generateSlideHTML = (theme, slide, reference, branding) => {
     const titleGradientCss = theme.titleGradient && isSafeCssBackground(theme.titleGradient)
         ? `\n<style>h1.font-title.font-bold{background:${theme.titleGradient};-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}</style>`
         : "";
+    // Density: when slide.density === "compact", shrink body text and pad spacing — approximates reveal.js' autofit.
+    // Scoped to .density-compact so the override never leaks to other slides; the rules are intentionally !important
+    // because they have to win over per-utility Tailwind rules injected by the CDN at runtime.
+    const densityCss = slide.density === "compact"
+        ? `\n<style>.density-compact p,.density-compact li{font-size:14px!important;line-height:1.5}.density-compact h2{font-size:32px!important}.density-compact h3{font-size:17px!important}.density-compact .px-12{padding-left:28px!important;padding-right:28px!important}.density-compact .px-16{padding-left:36px!important;padding-right:36px!important}.density-compact .pt-5{padding-top:10px!important}.density-compact .mt-10{margin-top:16px!important}.density-compact .mt-5{margin-top:10px!important}.density-compact .gap-4{gap:10px!important}.density-compact .gap-6{gap:14px!important}.density-compact .space-y-2>*+*{margin-top:4px!important}.density-compact .space-y-4>*+*{margin-top:8px!important}.density-compact .p-5{padding:14px!important}.density-compact .p-10{padding:20px!important}</style>`
+        : "";
+    const densityCls = slide.density === "compact" ? " density-compact" : "";
+    // Glass card style: swap the default solid bg-d-card cards for a subtle gradient + border (reveal.js-style "glass" cards).
+    // Scoped to .card-glass on the slide wrapper so it doesn't leak to other slides on the same page.
+    const cardGlassCss = theme.cardStyle === "glass"
+        ? `\n<style>.card-glass .bg-d-card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;border:1px solid rgba(120,150,220,.22)!important;box-shadow:none!important}.card-glass .rounded-lg{border-radius:16px!important}</style>`
+        : "";
+    const cardStyleCls = theme.cardStyle === "glass" ? " card-glass" : "";
     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>`
@@ -105,10 +118,10 @@ export const generateSlideHTML = (theme, slide, reference, branding) => {
 ${cdnScripts}
 <style>
   html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
-</style>${titleGradientCss}
+</style>${titleGradientCss}${densityCss}${cardGlassCss}
 </head>
 <body class="h-full">
-<div class="relative overflow-hidden ${bgCls} w-full h-full flex flex-col"${inlineStyle}>
+<div class="relative overflow-hidden ${bgCls}${densityCls}${cardStyleCls} w-full h-full flex flex-col"${inlineStyle}>
 ${brandingBg}
 <div class="relative z-[1] flex flex-col flex-1">
 ${content}