onbuzz 4.9.1 → 4.9.7

package/src/tools/office/pres/archetypes/headlineMessage.js

@@ -0,0 +1,52 @@
+/**
+ * Archetype: headlineMessage — one sentence, the entire slide.
+ *
+ * The YC / Apple / a16z move: a single message that fills the whole
+ * canvas. No supporting copy, no decoration. The headline carries it.
+ *
+ * Slots:
+ *   eyebrow   (optional) small upper label
+ *   message   (required) the sentence itself
+ *   footnote  (optional) tiny source/credit
+ */
+import { applyChrome, eyebrow, placeText, rule } from './_helpers.js';
+import { textStyle } from '../typography.js';
+
+export const id = 'headlineMessage';
+export const slots = ['eyebrow', 'message', 'footnote'];
+
+export default function render(slide, resolved, content, _pptx, _ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 137, chrome: false });
+
+  const { safe } = resolved.spacing;
+  const palette = resolved.palette;
+
+  if (content.eyebrow) {
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: safe.x, y: safe.y, w: safe.w * 0.5, color: palette.primary,
+    });
+  }
+
+  // The message fills the upper 65% of the slide. fit:'shrink' lets
+  // PPTX scale the text down if the agent passes a longer sentence so
+  // we never overflow.
+  const msgY = safe.y + 0.6;
+  const msgH = safe.h * 0.65;
+  slide.addText(String(content.message ?? ''), {
+    x: safe.x, y: msgY, w: safe.w * 0.85, h: msgH,
+    ...textStyle(resolved.typography, 'display', {
+      color: palette.ink,
+      align: 'left',
+      valign: 'middle',
+      fit: 'shrink',
+    }),
+  });
+
+  if (content.footnote) {
+    const footY = safe.y + safe.h - 0.35;
+    rule(slide, safe.x, footY - 0.08, 0.6, palette.primary, 1.2);
+    placeText(slide, resolved, 'caption', content.footnote, {
+      x: safe.x, y: footY, w: safe.w * 0.8, h: 0.3,
+    }, { color: palette.subtle, align: 'left' });
+  }
+}

package/src/tools/office/pres/archetypes/hero.js

@@ -0,0 +1,70 @@
+/**
+ * Archetype: hero — title slide opening a deck.
+ *
+ * Slots:
+ *   - eyebrow   (optional) small uppercase label above title
+ *   - title     (required) huge display text — the deck's name
+ *   - subtitle  (optional) supporting line below title
+ *   - author    (optional) presenter name in footer
+ *   - date      (optional) date string in footer
+ *   - background (optional) per-slide bg override; defaults to theme.bg
+ *
+ * Layout is left-aligned by default; theme `archetypes.hero.align`
+ * can switch to 'center'. Tech-bold likes the eyebrow rendered in
+ * accent colour; editorial puts a hairline rule under the eyebrow.
+ */
+import { applyChrome, eyebrow, placeText, rule } from './_helpers.js';
+
+export const id = 'hero';
+export const slots = ['eyebrow', 'title', 'subtitle', 'author', 'date'];
+
+export default function render(slide, resolved, content, _pptx, _ctx) {
+  // Hero opts out of the chrome master — clean canvas for the title.
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 11, chrome: false });
+
+  const cfg = resolved.archetypeConfig('hero');
+  const align = cfg.align || 'left';
+  const { safe, body } = resolved.spacing;
+
+  // Title block roughly vertically centered in the body region but
+  // weighted up slightly so subtitle + footer have breathing room.
+  const titleY = safe.y + safe.h * 0.32;
+  const titleFrame = { x: safe.x, y: titleY, w: safe.w, h: 2 };
+
+  if (content.eyebrow) {
+    const ebColor = cfg.eyebrowOnAccent ? resolved.palette.accent : resolved.palette.primary;
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: safe.x, y: titleY - 0.5, w: safe.w / 2, color: ebColor,
+    });
+    if (cfg.eyebrowDivider) {
+      rule(slide, safe.x, titleY - 0.18, 0.6, ebColor, 1);
+    }
+  }
+
+  placeText(slide, resolved, 'display', content.title, titleFrame, {
+    color: resolved.palette.text,
+    align,
+    valign: 'top',
+    fit: 'shrink',
+  });
+
+  if (content.subtitle) {
+    placeText(slide, resolved, 'subtitle', content.subtitle, {
+      x: safe.x, y: titleY + 1.9, w: safe.w * 0.78, h: 1.2,
+    }, {
+      color: resolved.palette.subtle,
+      align,
+    });
+  }
+
+  // Footer: author · date, on a single line, subtle colour, hairline above.
+  const footerY = resolved.spacing.slide.height - resolved.spacing.pageMargin - 0.5;
+  if (content.author || content.date) {
+    const parts = [content.author, content.date].filter(Boolean).join('  ·  ');
+    placeText(slide, resolved, 'caption', parts, {
+      x: safe.x, y: footerY, w: safe.w, h: 0.3,
+    }, { color: resolved.palette.subtle, align: 'left' });
+
+    rule(slide, safe.x, footerY - 0.08, 0.6, resolved.palette.primary, 1);
+  }
+}

package/src/tools/office/pres/archetypes/imageFullBleed.js

@@ -0,0 +1,79 @@
+/**
+ * Archetype: imageFullBleed — full-slide image with optional overlay text.
+ *
+ * Slots:
+ *   - imagePath / imageData  (one required) full-bleed image source
+ *   - title    (optional) overlay caption — left-aligned at bottom
+ *   - eyebrow  (optional) small label above the title
+ *   - overlay  (optional) 'dark' | 'light' | 'none' — gradient over
+ *              the image so overlay text stays legible
+ *
+ * If no image is provided the archetype renders a graceful fallback —
+ * a single accent-coloured panel with the overlay text — so the deck
+ * still builds when the agent's image path is missing.
+ */
+import { applyChrome, eyebrow, placeText } from './_helpers.js';
+import { SLIDE_DIMENSIONS } from '../grid.js';
+
+export const id = 'imageFullBleed';
+export const slots = ['imagePath', 'imageData', 'title', 'eyebrow', 'overlay'];
+
+export default function render(slide, resolved, content, _pptx, _ctx) {
+  applyChrome(slide, resolved, { bgOverride: 'solid', seed: 67, chrome: false });
+
+  const hasImage = content.imagePath || content.imageData;
+  if (hasImage) {
+    const imgOpts = {
+      x: 0, y: 0,
+      w: SLIDE_DIMENSIONS.width,
+      h: SLIDE_DIMENSIONS.height,
+      sizing: { type: 'cover', w: SLIDE_DIMENSIONS.width, h: SLIDE_DIMENSIONS.height },
+    };
+    if (content.imagePath) imgOpts.path = content.imagePath;
+    if (content.imageData) imgOpts.data = content.imageData;
+    slide.addImage(imgOpts);
+  } else {
+    // Fallback: solid accent panel so overlay text still reads.
+    slide.addShape('rect', {
+      x: 0, y: 0,
+      w: SLIDE_DIMENSIONS.width, h: SLIDE_DIMENSIONS.height,
+      fill: { color: resolved.palette.primary },
+      line: { type: 'none' },
+    });
+  }
+
+  // Bottom overlay — dark gradient on light overlay, light on dark.
+  const overlayMode = content.overlay || (hasImage ? 'dark' : 'none');
+  if (overlayMode !== 'none') {
+    const overlayColor = overlayMode === 'light' ? 'FFFFFF' : '000000';
+    slide.addShape('rect', {
+      x: 0,
+      y: SLIDE_DIMENSIONS.height * 0.55,
+      w: SLIDE_DIMENSIONS.width,
+      h: SLIDE_DIMENSIONS.height * 0.45,
+      fill: { color: overlayColor, transparency: 60 },
+      line: { type: 'none' },
+    });
+  }
+
+  const textColor = overlayMode === 'light' ? resolved.palette.text : 'FFFFFF';
+  const overlayY = SLIDE_DIMENSIONS.height - resolved.spacing.pageMargin - 1.5;
+
+  if (content.eyebrow) {
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: resolved.spacing.safe.x,
+      y: overlayY,
+      w: resolved.spacing.safe.w,
+      color: resolved.palette.accent,
+    });
+  }
+
+  if (content.title) {
+    placeText(slide, resolved, 'title', content.title, {
+      x: resolved.spacing.safe.x,
+      y: overlayY + 0.3,
+      w: resolved.spacing.safe.w * 0.85,
+      h: 1.1,
+    }, { color: textColor, align: 'left' });
+  }
+}

package/src/tools/office/pres/archetypes/index.js

@@ -0,0 +1,57 @@
+/**
+ * pres/archetypes — registry + dispatch.
+ *
+ * The agent picks an archetype id per slide; this module routes to the
+ * matching renderer. Unknown ids fall back to `freeform` so the deck
+ * still builds.
+ */
+import hero from './hero.js';
+import agenda from './agenda.js';
+import sectionHeader from './sectionHeader.js';
+import headlineMessage from './headlineMessage.js';
+import productHero from './productHero.js';
+import statCallout from './statCallout.js';
+import bigStat from './bigStat.js';
+import statTrio from './statTrio.js';
+import comparisonGrid from './comparisonGrid.js';
+import bentoGrid from './bentoGrid.js';
+import bullets from './bullets.js';
+import twoColText from './twoColText.js';
+import twoColChart from './twoColChart.js';
+import quote from './quote.js';
+import imageFullBleed from './imageFullBleed.js';
+import table from './table.js';
+import closing from './closing.js';
+import freeform from './freeform.js';
+
+const ARCHETYPES = {
+  hero, agenda, sectionHeader, headlineMessage, productHero,
+  statCallout, bigStat, statTrio, comparisonGrid, bentoGrid,
+  bullets, twoColText, twoColChart, quote, imageFullBleed, table,
+  closing, freeform,
+};
+
+export function listArchetypes() {
+  return Object.keys(ARCHETYPES);
+}
+
+/**
+ * Render one slide given the slide spec (with `archetype` field).
+ * Always renders something — unknown archetypes route to freeform.
+ *
+ *   `ctx` carries deck-level state: slideIndex, totalSlides,
+ *   sectionName, sectionIdx, sectionTotal, brand, isSectionStart.
+ *   Archetypes use it to render the chrome (page number, section
+ *   progress dots) without the agent having to thread it through
+ *   every slide spec.
+ */
+export function renderArchetype(slide, resolved, slideSpec, pptx, ctx = {}) {
+  const id = slideSpec.archetype || 'freeform';
+  const fn = ARCHETYPES[id] || ARCHETYPES.freeform;
+  fn(slide, resolved, slideSpec, pptx, ctx);
+
+  // Speaker notes — supported on every archetype.
+  if (slideSpec.notes) {
+    slide.addNotes(String(slideSpec.notes));
+  }
+}

package/src/tools/office/pres/archetypes/productHero.js

@@ -0,0 +1,94 @@
+/**
+ * Archetype: productHero — image-bottom + title-top (Apple WWDC style).
+ *
+ * The Apple keynote opener: title sits in the upper third, product
+ * imagery bleeds the bottom two thirds. No frames, no shadows on the
+ * hero shot. Single high-contrast text block.
+ *
+ * Slots:
+ *   eyebrow    (optional)  small label above the title
+ *   title      (required)  the headline — usually a short product name
+ *   subtitle   (optional)  one-line supporting copy
+ *   imagePath  | imageData (optional) hero image; falls back to a
+ *                          tinted-accent panel when neither supplied
+ *   imagePosition (optional) 'bottom' (default) | 'right' | 'left'
+ */
+import { applyChrome, eyebrow, placeText } from './_helpers.js';
+import { textStyle } from '../typography.js';
+import { SLIDE_DIMENSIONS } from '../grid.js';
+
+export const id = 'productHero';
+export const slots = ['eyebrow', 'title', 'subtitle', 'imagePath', 'imageData', 'imagePosition'];
+
+export default function render(slide, resolved, content, _pptx, _ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background || 'void', seed: 139, chrome: false });
+
+  const { safe } = resolved.spacing;
+  const palette = resolved.palette;
+  const W = SLIDE_DIMENSIONS.width;
+  const H = SLIDE_DIMENSIONS.height;
+  const hasImage = !!(content.imagePath || content.imageData);
+  const position = content.imagePosition || 'bottom';
+
+  // Image region (or fallback accent panel) — pre-paint it so text
+  // lands on top of any soft edges.
+  let textRegion;
+  if (position === 'right') {
+    const imageRegion = { x: W * 0.5, y: 0, w: W * 0.5, h: H };
+    textRegion = { x: safe.x, y: safe.y, w: W * 0.5 - safe.x - 0.3, h: safe.h };
+    drawImageOrPanel(slide, content, palette, imageRegion);
+  } else if (position === 'left') {
+    const imageRegion = { x: 0, y: 0, w: W * 0.5, h: H };
+    textRegion = { x: W * 0.5 + 0.3, y: safe.y, w: W * 0.5 - safe.x - 0.3, h: safe.h };
+    drawImageOrPanel(slide, content, palette, imageRegion);
+  } else {
+    // bottom (default) — Apple keynote layout
+    const imageRegion = { x: 0, y: H * 0.42, w: W, h: H * 0.58 };
+    textRegion = { x: safe.x, y: safe.y + 0.3, w: safe.w, h: H * 0.4 };
+    drawImageOrPanel(slide, content, palette, imageRegion);
+  }
+
+  // Eyebrow + title + subtitle stack in the text region.
+  let yCursor = textRegion.y;
+  if (content.eyebrow) {
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: textRegion.x, y: yCursor, w: textRegion.w * 0.7, color: palette.accent,
+    });
+    yCursor += 0.45;
+  }
+  slide.addText(String(content.title ?? ''), {
+    x: textRegion.x, y: yCursor, w: textRegion.w * 0.9, h: position === 'bottom' ? 1.8 : 3,
+    ...textStyle(resolved.typography, 'display', {
+      color: palette.ink,
+      align: 'left',
+      valign: 'top',
+      fit: 'shrink',
+    }),
+  });
+  if (content.subtitle) {
+    const subY = position === 'bottom' ? yCursor + 1.9 : yCursor + 3.1;
+    placeText(slide, resolved, 'subtitle', content.subtitle, {
+      x: textRegion.x, y: subY, w: textRegion.w * 0.85, h: 1.0,
+    }, { color: palette.subtle, align: 'left' });
+  }
+}
+
+function drawImageOrPanel(slide, content, palette, region) {
+  if (content.imagePath || content.imageData) {
+    const opts = {
+      x: region.x, y: region.y, w: region.w, h: region.h,
+      sizing: { type: 'cover', w: region.w, h: region.h },
+    };
+    if (content.imagePath) opts.path = content.imagePath;
+    if (content.imageData) opts.data = content.imageData;
+    slide.addImage(opts);
+  } else {
+    // Fallback: tinted accent panel so the slide still has visual
+    // weight when the agent hasn't supplied an image yet.
+    slide.addShape('rect', {
+      x: region.x, y: region.y, w: region.w, h: region.h,
+      fill: { color: palette.primary, transparency: 0 },
+      line: { type: 'none' },
+    });
+  }
+}

package/src/tools/office/pres/archetypes/quote.js

@@ -0,0 +1,70 @@
+/**
+ * Archetype: quote — pull-quote with attribution.
+ *
+ * Slots:
+ *   - quote        (required) the quoted text
+ *   - attribution  (optional) source / speaker
+ *   - subtext      (optional) extra context shown beneath attribution
+ *
+ * Editorial wraps the quote in giant serif quote marks; tech-bold and
+ * data-heavy use a tighter inline mark + accent rule.
+ */
+import { applyChrome, placeText, rule } from './_helpers.js';
+import { textStyle } from '../typography.js';
+
+export const id = 'quote';
+export const slots = ['quote', 'attribution', 'subtext'];
+
+export default function render(slide, resolved, content, _pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 59, ctx });
+
+  const cfg = resolved.archetypeConfig('quote');
+  const { safe } = resolved.spacing;
+
+  // Optional huge serif quote glyph in the top-left — editorial-style.
+  if (cfg.bigQuotes) {
+    slide.addText('"', {
+      x: safe.x, y: safe.y - 0.4, w: 2, h: 2,
+      ...textStyle(resolved.typography, 'display', {
+        color: resolved.palette.primary,
+        fontSize: 180,
+        align: 'left',
+        valign: 'top',
+      }),
+      transparency: 40,
+    });
+  }
+
+  // The quote — slightly narrower than safe width for a "column-of-text"
+  // editorial feel.
+  const quoteX = safe.x + safe.w * 0.05;
+  const quoteW = safe.w * 0.85;
+  const quoteY = safe.y + safe.h * 0.22;
+  const quoteRole = cfg.bigQuotes ? 'title' : 'subtitle';
+
+  placeText(slide, resolved, quoteRole, content.quote, {
+    x: quoteX, y: quoteY, w: quoteW, h: safe.h * 0.55,
+  }, {
+    color: resolved.palette.text,
+    italic: cfg.bigQuotes,
+    align: 'left',
+    fontSize: cfg.bigQuotes ? 32 : 28,
+  });
+
+  // Hairline above attribution.
+  const attrY = safe.y + safe.h * 0.84;
+  if (content.attribution) {
+    if (cfg.attributionRule) {
+      rule(slide, quoteX, attrY - 0.15, 0.6, resolved.palette.primary, 1);
+    }
+    placeText(slide, resolved, 'subtitle', `— ${content.attribution}`, {
+      x: quoteX, y: attrY, w: quoteW, h: 0.5,
+    }, { color: resolved.palette.subtle, align: 'left', italic: false });
+  }
+
+  if (content.subtext) {
+    placeText(slide, resolved, 'caption', content.subtext, {
+      x: quoteX, y: attrY + 0.4, w: quoteW, h: 0.3,
+    }, { color: resolved.palette.subtle, align: 'left' });
+  }
+}

package/src/tools/office/pres/archetypes/sectionHeader.js

@@ -0,0 +1,56 @@
+/**
+ * Archetype: sectionHeader — transition between deck sections.
+ *
+ * Slots:
+ *   - number    (optional) section number e.g. "02"
+ *   - title     (required) section name
+ *   - subtitle  (optional) one-line description / theme of the section
+ *
+ * Visual: section number rendered huge + subtle as a backdrop, section
+ * title overlaid in primary colour, hairline rule above the title.
+ */
+import { applyChrome, rule, placeText } from './_helpers.js';
+import { textStyle } from '../typography.js';
+
+export const id = 'sectionHeader';
+export const slots = ['number', 'title', 'subtitle'];
+
+export default function render(slide, resolved, content, _pptx, _ctx) {
+  // Section transition — bare canvas, no chrome.
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 17, chrome: false });
+
+  const cfg = resolved.archetypeConfig('sectionHeader');
+  const { safe } = resolved.spacing;
+
+  // Huge backdrop number — sits ~middle-left, very low contrast.
+  if (content.number !== undefined && content.number !== null) {
+    slide.addText(String(content.number), {
+      x: safe.x, y: safe.y + safe.h * 0.10,
+      w: safe.w * 0.6, h: safe.h * 0.55,
+      ...textStyle(resolved.typography, 'display', {
+        color: resolved.palette.primary,
+        align: 'left',
+        fontSize: 160,
+        charSpacing: -4,
+        valign: 'top',
+      }),
+      transparency: 75,
+    });
+  }
+
+  // Optional hairline above the title.
+  const titleY = safe.y + safe.h * 0.55;
+  if (cfg.ruleAbove) {
+    rule(slide, safe.x, titleY - 0.25, 0.6, resolved.palette.primary, 1.2);
+  }
+
+  placeText(slide, resolved, 'title', content.title, {
+    x: safe.x, y: titleY, w: safe.w * 0.85, h: 1.2,
+  }, { color: resolved.palette.text, align: 'left' });
+
+  if (content.subtitle) {
+    placeText(slide, resolved, 'subtitle', content.subtitle, {
+      x: safe.x, y: titleY + 1.1, w: safe.w * 0.7, h: 0.8,
+    }, { color: resolved.palette.subtle, align: 'left' });
+  }
+}

package/src/tools/office/pres/archetypes/statCallout.js

@@ -0,0 +1,84 @@
+/**
+ * Archetype: statCallout — one huge number, one label, optional footnote.
+ *
+ * Slots:
+ *   - eyebrow  (optional) small label above the stat
+ *   - stat     (required) the headline number, e.g. "47%" or "$12.4M"
+ *   - label    (required) what the number means
+ *   - footnote (optional) source / methodology
+ *
+ * tech-bold wraps the stat in a `surface` card with shadow; editorial
+ * and data-heavy leave it on the bg with a hairline rule beneath.
+ */
+import { applyChrome, callout, eyebrow, rule, placeText } from './_helpers.js';
+import { textStyle } from '../typography.js';
+
+export const id = 'statCallout';
+export const slots = ['eyebrow', 'stat', 'label', 'footnote'];
+
+export default function render(slide, resolved, content, _pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 23, ctx });
+
+  const cfg = resolved.archetypeConfig('statCallout');
+  const { safe } = resolved.spacing;
+
+  // Centered card-or-bare composition.
+  const cardW = safe.w * 0.78;
+  const cardH = safe.h * 0.62;
+  const cardX = safe.x + (safe.w - cardW) / 2;
+  const cardY = safe.y + (safe.h - cardH) / 2;
+
+  if (cfg.cardBackground === 'surface') {
+    callout(slide, resolved, { x: cardX, y: cardY, w: cardW, h: cardH }, resolved.palette.surface);
+  }
+
+  const innerPad = resolved.spacing.blockPadding;
+  const inner = {
+    x: cardX + innerPad,
+    y: cardY + innerPad,
+    w: cardW - innerPad * 2,
+    h: cardH - innerPad * 2,
+  };
+
+  let cursorY = inner.y;
+
+  if (content.eyebrow) {
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: inner.x, y: cursorY, w: inner.w,
+      color: cfg.eyebrowOnAccent ? resolved.palette.accent : resolved.palette.primary,
+    });
+    cursorY += 0.4;
+  }
+
+  // The stat — fills most of the vertical space.
+  const statH = inner.h * 0.55;
+  slide.addText(String(content.stat ?? ''), {
+    x: inner.x, y: cursorY, w: inner.w, h: statH,
+    ...textStyle(resolved.typography, 'stat', {
+      color: resolved.palette[cfg.statColor || 'primary'] || resolved.palette.primary,
+      align: 'left',
+      valign: 'middle',
+      fit: 'shrink',
+    }),
+  });
+
+  cursorY += statH + 0.1;
+
+  // Label.
+  if (content.label) {
+    const labelRole = cfg.labelStyle === 'mono' ? 'mono'
+                    : cfg.labelStyle === 'eyebrow' ? 'eyebrow'
+                    : 'subtitle';
+    placeText(slide, resolved, labelRole, content.label, {
+      x: inner.x, y: cursorY, w: inner.w, h: 0.6,
+    }, { color: resolved.palette.text, align: 'left' });
+  }
+
+  // Footnote (optional source).
+  if (content.footnote) {
+    rule(slide, inner.x, inner.y + inner.h - 0.45, 0.4, resolved.palette.subtle, 0.5);
+    placeText(slide, resolved, 'caption', content.footnote, {
+      x: inner.x, y: inner.y + inner.h - 0.35, w: inner.w, h: 0.3,
+    }, { color: resolved.palette.subtle, align: 'left' });
+  }
+}

package/src/tools/office/pres/archetypes/statTrio.js

@@ -0,0 +1,71 @@
+/**
+ * Archetype: statTrio — three KPI cards in a row.
+ *
+ * The KPI dashboard standard: three numbers side by side, each with
+ * a label, optional unit, and optional delta arrow. Reads as "the
+ * dashboard glance" — what every executive deck has on slide 4.
+ *
+ * Slots:
+ *   title  (optional) header text
+ *   subtitle (optional)
+ *   stats  (required) array of EXACTLY three:
+ *          { label, value, unit?, delta?, deltaDirection?: 'up'|'down' }
+ *   footnote (optional) source line at the bottom
+ *
+ * Cards use the theme's shape (sharp/soft/round/pill) for their
+ * corners + shadow elevation.
+ */
+import { applyChrome, placeText, rule } from './_helpers.js';
+import { kpiCard } from '../components.js';
+
+export const id = 'statTrio';
+export const slots = ['title', 'subtitle', 'stats', 'footnote'];
+
+export default function render(slide, resolved, content, _pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 107, ctx });
+
+  const { safe, header, body, contentGutter } = resolved.spacing;
+  const palette = resolved.palette;
+
+  // Header.
+  placeText(slide, resolved, 'title', content.title, {
+    x: header.x, y: header.y, w: header.w, h: 0.8,
+  }, { color: palette.text, align: 'left' });
+
+  if (content.subtitle) {
+    placeText(slide, resolved, 'subtitle', content.subtitle, {
+      x: header.x, y: header.y + 0.85, w: header.w, h: 0.5,
+    }, { color: palette.subtle, align: 'left' });
+  }
+
+  // Three KPI cards — sized to fill the body region nicely.
+  const stats = Array.isArray(content.stats) ? content.stats.slice(0, 3) : [];
+  while (stats.length < 3) stats.push({});
+
+  const gap = contentGutter;
+  const cardW = (body.w - gap * 2) / 3;
+  const cardH = Math.min(body.h - 0.5, 3.0);
+  const cardY = body.y + (body.h - cardH) / 2;
+
+  stats.forEach((s, i) => {
+    if (!s || (s.value === undefined && !s.label)) return;
+    kpiCard(slide, resolved, {
+      x: body.x + i * (cardW + gap),
+      y: cardY,
+      w: cardW,
+      h: cardH,
+      label: s.label,
+      value: s.value,
+      unit: s.unit,
+      delta: s.delta,
+      deltaDirection: s.deltaDirection,
+    });
+  });
+
+  if (content.footnote) {
+    rule(slide, safe.x, safe.y + safe.h - 0.5, 0.5, palette.subtle, 0.5);
+    placeText(slide, resolved, 'caption', content.footnote, {
+      x: safe.x, y: safe.y + safe.h - 0.42, w: safe.w, h: 0.3,
+    }, { color: palette.subtle, align: 'left' });
+  }
+}