onbuzz 4.9.13 → 4.10.0

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

@@ -1,142 +1,140 @@
-/**
- * Archetype: bigStat — one HUGE number that fills the slide.
- *
- * For when the data is the entire message. The number renders at
- * the theme's `stat` size (200pt+) with optional ghosted backdrop
- * numeral behind it for drama. A small label sits underneath, a
- * footnote at the bottom edge.
- *
- * Slots:
- *   eyebrow   (optional) small label above the stat
- *   stat      (required) the number itself — e.g. "+143%" or "$4.2B"
- *   unit      (optional) shown smaller next to the stat ("%", "M", "x")
- *   label     (required) one-line description of what the stat measures
- *   footnote  (optional) source / methodology
- *   tags      (optional) [{label, kind}] — tag chips below the label
- *   delta     (optional) {value, direction: 'up'|'down'}
- */
-import { applyChrome, eyebrow, rule, placeText } from './_helpers.js';
-import { textStyle } from '../typography.js';
-import { backdropNumeral, tag } from '../components.js';
-
-export const id = 'bigStat';
-export const slots = ['eyebrow', 'stat', 'unit', 'label', 'footnote', 'tags', 'delta'];
-
-export default function render(slide, resolved, content, _pptx, ctx) {
-  applyChrome(slide, resolved, { bgOverride: content.background, seed: 103, ctx });
-
-  const { safe } = resolved.spacing;
-  const palette = resolved.palette;
-
-  // Backdrop ghost numeral — first digit of the stat, sitting behind
-  // the foreground. Editorial themes skip this for cleaner look.
-  if (resolved.theme.family !== 'editorial' && content.stat) {
-    const firstDigit = String(content.stat).match(/[0-9]/);
-    if (firstDigit) {
-      backdropNumeral(slide, resolved, {
-        text: firstDigit[0],
-        x: safe.x + safe.w * 0.45,
-        y: safe.y - safe.h * 0.15,
-        w: safe.w * 0.6,
-        h: safe.h,
-        color: palette.primary,
-        transparency: 90,
-        size: 560,
-      });
-    }
-  }
-
-  // Eyebrow + optional tags row at the top.
-  let cursorY = safe.y + safe.h * 0.18;
-  if (content.eyebrow) {
-    eyebrow(slide, resolved, content.eyebrow, {
-      x: safe.x, y: cursorY, w: safe.w * 0.6, color: palette.primary,
-    });
-    cursorY += 0.5;
-  }
-
-  // Layout slots — anchor everything to fixed rows so nothing overlaps.
-  // Top  : eyebrow band (already drawn above)
-  // Mid  : stat + delta
-  // Lower-mid : label (one line)
-  // Bottom-ish: tags row
-  // Footer: footnote
-  const statY = safe.y + safe.h * 0.28;
-  const statH = safe.h * 0.40;
-  const chunks = [{
-    text: String(content.stat ?? ''),
-    options: {
-      fontFace: resolved.typography.display.fontFace,
-      fontSize: resolved.typography.stat.fontSize,
-      bold: true,
-      color: palette.ink,
-      charSpacing: -4,
-    },
-  }];
-  if (content.unit) {
-    chunks.push({
-      text: ' ' + String(content.unit),
-      options: {
-        fontFace: resolved.typography.body.fontFace,
-        fontSize: resolved.typography.stat.fontSize * 0.32,
-        bold: true,
-        color: palette.subtle,
-      },
-    });
-  }
-  slide.addText(chunks, {
-    x: safe.x, y: statY, w: safe.w * 0.65, h: statH,
-    align: 'left', valign: 'middle', fit: 'shrink', wrap: false,
-  });
-
-  // Delta — to the right of the stat (not below) so it doesn't push
-  // the label down. Vertically baseline-aligned with the stat.
-  if (content.delta) {
-    const d = content.delta;
-    const direction = d.direction || (String(d.value || d).startsWith('-') ? 'down' : 'up');
-    const arrowColor = direction === 'down' ? palette.highlight : palette.primary;
-    const arrow = direction === 'down' ? '▼' : '▲';
-    slide.addText(`${arrow}  ${d.value ?? d}`, {
-      x: safe.x + safe.w * 0.65, y: statY,
-      w: safe.w * 0.35, h: statH,
-      fontFace: resolved.typography.subtitle.fontFace,
-      fontSize: 26,
-      bold: true,
-      color: arrowColor,
-      align: 'left',
-      valign: 'middle',
-    });
-  }
-
-  // Label — fixed slot well below the stat band.
-  const labelY = statY + statH + 0.25;
-  const labelH = 0.8;
-  if (content.label) {
-    placeText(slide, resolved, 'subtitle', content.label, {
-      x: safe.x, y: labelY, w: safe.w * 0.85, h: labelH,
-    }, { color: palette.text, align: 'left' });
-  }
-
-  // Tags row — fixed slot below the label, well above the footnote.
-  if (Array.isArray(content.tags) && content.tags.length) {
-    let tagX = safe.x;
-    const tagY = labelY + labelH + 0.15;
-    for (const t of content.tags) {
-      const placed = tag(slide, resolved, {
-        x: tagX, y: tagY,
-        label: typeof t === 'string' ? t : t.label,
-        kind: typeof t === 'object' ? (t.kind || 'subtle') : 'subtle',
-      });
-      tagX += placed.w + 0.12;
-    }
-  }
-
-  // Footnote at the very bottom of the safe area, with a hairline above.
-  if (content.footnote) {
-    const footY = safe.y + safe.h - 0.45;
-    rule(slide, safe.x, footY - 0.08, 0.5, palette.subtle, 0.5);
-    placeText(slide, resolved, 'caption', content.footnote, {
-      x: safe.x, y: footY, w: safe.w, h: 0.35,
-    }, { color: palette.subtle, align: 'left' });
-  }
-}
+/**
+ * Archetype: bigStat — one HUGE number that fills the slide.
+ *
+ * For when the data is the entire message. The number renders at
+ * the theme's `stat` size (200pt+) with optional ghosted backdrop
+ * numeral behind it for drama. A small label sits underneath, a
+ * footnote at the bottom edge.
+ *
+ * Slots:
+ *   eyebrow   (optional) small label above the stat
+ *   stat      (required) the number itself — e.g. "+143%" or "$4.2B"
+ *   unit      (optional) shown smaller next to the stat ("%", "M", "x")
+ *   label     (required) one-line description of what the stat measures
+ *   footnote  (optional) source / methodology
+ *   tags      (optional) [{label, kind}] — tag chips below the label
+ *   delta     (optional) {value, direction: 'up'|'down'}
+ */
+import { applyChrome, eyebrow, rule, placeText } from './_helpers.js';
+import { backdropNumeral, tag } from '../components.js';
+
+export const id = 'bigStat';
+export const slots = ['eyebrow', 'stat', 'unit', 'label', 'footnote', 'tags', 'delta'];
+
+export default function render(slide, resolved, content, _pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 103, ctx });
+
+  const { safe } = resolved.spacing;
+  const palette = resolved.palette;
+
+  // Backdrop ghost numeral — first digit of the stat, sitting behind
+  // the foreground. Editorial themes skip this for cleaner look.
+  if (resolved.theme.family !== 'editorial' && content.stat) {
+    const firstDigit = String(content.stat).match(/[0-9]/);
+    if (firstDigit) {
+      backdropNumeral(slide, resolved, {
+        text: firstDigit[0],
+        x: safe.x + safe.w * 0.45,
+        y: safe.y - safe.h * 0.15,
+        w: safe.w * 0.6,
+        h: safe.h,
+        color: palette.primary,
+        transparency: 90,
+        size: 560,
+      });
+    }
+  }
+
+  // Eyebrow + optional tags row at the top.
+  const cursorY = safe.y + safe.h * 0.18;
+  if (content.eyebrow) {
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: safe.x, y: cursorY, w: safe.w * 0.6, color: palette.primary,
+    });
+  }
+
+  // Layout slots — anchor everything to fixed rows so nothing overlaps.
+  // Top  : eyebrow band (already drawn above)
+  // Mid  : stat + delta
+  // Lower-mid : label (one line)
+  // Bottom-ish: tags row
+  // Footer: footnote
+  const statY = safe.y + safe.h * 0.28;
+  const statH = safe.h * 0.40;
+  const chunks = [{
+    text: String(content.stat ?? ''),
+    options: {
+      fontFace: resolved.typography.display.fontFace,
+      fontSize: resolved.typography.stat.fontSize,
+      bold: true,
+      color: palette.ink,
+      charSpacing: -4,
+    },
+  }];
+  if (content.unit) {
+    chunks.push({
+      text: ' ' + String(content.unit),
+      options: {
+        fontFace: resolved.typography.body.fontFace,
+        fontSize: resolved.typography.stat.fontSize * 0.32,
+        bold: true,
+        color: palette.subtle,
+      },
+    });
+  }
+  slide.addText(chunks, {
+    x: safe.x, y: statY, w: safe.w * 0.65, h: statH,
+    align: 'left', valign: 'middle', fit: 'shrink', wrap: false,
+  });
+
+  // Delta — to the right of the stat (not below) so it doesn't push
+  // the label down. Vertically baseline-aligned with the stat.
+  if (content.delta) {
+    const d = content.delta;
+    const direction = d.direction || (String(d.value || d).startsWith('-') ? 'down' : 'up');
+    const arrowColor = direction === 'down' ? palette.highlight : palette.primary;
+    const arrow = direction === 'down' ? '▼' : '▲';
+    slide.addText(`${arrow}  ${d.value ?? d}`, {
+      x: safe.x + safe.w * 0.65, y: statY,
+      w: safe.w * 0.35, h: statH,
+      fontFace: resolved.typography.subtitle.fontFace,
+      fontSize: 26,
+      bold: true,
+      color: arrowColor,
+      align: 'left',
+      valign: 'middle',
+    });
+  }
+
+  // Label — fixed slot well below the stat band.
+  const labelY = statY + statH + 0.25;
+  const labelH = 0.8;
+  if (content.label) {
+    placeText(slide, resolved, 'subtitle', content.label, {
+      x: safe.x, y: labelY, w: safe.w * 0.85, h: labelH,
+    }, { color: palette.text, align: 'left' });
+  }
+
+  // Tags row — fixed slot below the label, well above the footnote.
+  if (Array.isArray(content.tags) && content.tags.length) {
+    let tagX = safe.x;
+    const tagY = labelY + labelH + 0.15;
+    for (const t of content.tags) {
+      const placed = tag(slide, resolved, {
+        x: tagX, y: tagY,
+        label: typeof t === 'string' ? t : t.label,
+        kind: typeof t === 'object' ? (t.kind || 'subtle') : 'subtle',
+      });
+      tagX += placed.w + 0.12;
+    }
+  }
+
+  // Footnote at the very bottom of the safe area, with a hairline above.
+  if (content.footnote) {
+    const footY = safe.y + safe.h - 0.45;
+    rule(slide, safe.x, footY - 0.08, 0.5, palette.subtle, 0.5);
+    placeText(slide, resolved, 'caption', content.footnote, {
+      x: safe.x, y: footY, w: safe.w, h: 0.35,
+    }, { color: palette.subtle, align: 'left' });
+  }
+}

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

@@ -1,70 +1,70 @@
-/**
- * Archetype: closing — final slide. Thank-you, CTA, contact.
- *
- * Slots:
- *   - eyebrow  (optional) "Thank you." or a similar sign-off label
- *   - title    (required) the closing message ("Let's build this together.")
- *   - cta      (optional) {label, url} — a single emphatic line
- *   - contact  (optional) [{label, value}] — array of contact rows
- *
- * Visual: large title, accent-color CTA, contact rows as a small
- * justified list at the bottom. Always uses the theme default
- * background unless overridden — the closing slide should match the
- * hero in mood.
- */
-import { applyChrome, eyebrow, placeText, rule } from './_helpers.js';
-import { textStyle } from '../typography.js';
-
-export const id = 'closing';
-export const slots = ['eyebrow', 'title', 'cta', 'contact'];
-
-export default function render(slide, resolved, content, _pptx, _ctx) {
-  applyChrome(slide, resolved, { bgOverride: content.background, seed: 83, chrome: false });
-
-  const { safe } = resolved.spacing;
-  const titleY = safe.y + safe.h * 0.36;
-
-  if (content.eyebrow) {
-    eyebrow(slide, resolved, content.eyebrow, {
-      x: safe.x, y: titleY - 0.45, w: safe.w / 2,
-      color: resolved.palette.accent,
-    });
-  }
-
-  placeText(slide, resolved, 'display', content.title, {
-    x: safe.x, y: titleY, w: safe.w * 0.85, h: 2,
-  }, {
-    color: resolved.palette.text,
-    align: 'left',
-    fit: 'shrink',
-  });
-
-  if (content.cta) {
-    const ctaY = titleY + 2.1;
-    rule(slide, safe.x, ctaY, 0.6, resolved.palette.primary, 1.2);
-    const ctaText = content.cta.label || content.cta.url || String(content.cta);
-    slide.addText(ctaText, {
-      x: safe.x, y: ctaY + 0.1, w: safe.w * 0.8, h: 0.5,
-      ...textStyle(resolved.typography, 'subtitle', {
-        color: resolved.palette.primary,
-        align: 'left',
-        bold: true,
-      }),
-      hyperlink: content.cta.url ? { url: content.cta.url } : undefined,
-    });
-  }
-
-  if (Array.isArray(content.contact) && content.contact.length) {
-    const rowsY = safe.y + safe.h - 0.9;
-    const colW = safe.w / Math.max(content.contact.length, 1);
-    content.contact.forEach((row, i) => {
-      const x = safe.x + i * colW;
-      placeText(slide, resolved, 'caption', row.label || '', {
-        x, y: rowsY, w: colW - 0.2, h: 0.3,
-      }, { color: resolved.palette.subtle, align: 'left' });
-      placeText(slide, resolved, 'body', row.value || '', {
-        x, y: rowsY + 0.3, w: colW - 0.2, h: 0.4,
-      }, { color: resolved.palette.text, align: 'left' });
-    });
-  }
-}
+/**
+ * Archetype: closing — final slide. Thank-you, CTA, contact.
+ *
+ * Slots:
+ *   - eyebrow  (optional) "Thank you." or a similar sign-off label
+ *   - title    (required) the closing message ("Let's build this together.")
+ *   - cta      (optional) {label, url} — a single emphatic line
+ *   - contact  (optional) [{label, value}] — array of contact rows
+ *
+ * Visual: large title, accent-color CTA, contact rows as a small
+ * justified list at the bottom. Always uses the theme default
+ * background unless overridden — the closing slide should match the
+ * hero in mood.
+ */
+import { applyChrome, eyebrow, placeText, rule } from './_helpers.js';
+import { textStyle } from '../typography.js';
+
+export const id = 'closing';
+export const slots = ['eyebrow', 'title', 'cta', 'contact'];
+
+export default function render(slide, resolved, content) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 83, chrome: false });
+
+  const { safe } = resolved.spacing;
+  const titleY = safe.y + safe.h * 0.36;
+
+  if (content.eyebrow) {
+    eyebrow(slide, resolved, content.eyebrow, {
+      x: safe.x, y: titleY - 0.45, w: safe.w / 2,
+      color: resolved.palette.accent,
+    });
+  }
+
+  placeText(slide, resolved, 'display', content.title, {
+    x: safe.x, y: titleY, w: safe.w * 0.85, h: 2,
+  }, {
+    color: resolved.palette.text,
+    align: 'left',
+    fit: 'shrink',
+  });
+
+  if (content.cta) {
+    const ctaY = titleY + 2.1;
+    rule(slide, safe.x, ctaY, 0.6, resolved.palette.primary, 1.2);
+    const ctaText = content.cta.label || content.cta.url || String(content.cta);
+    slide.addText(ctaText, {
+      x: safe.x, y: ctaY + 0.1, w: safe.w * 0.8, h: 0.5,
+      ...textStyle(resolved.typography, 'subtitle', {
+        color: resolved.palette.primary,
+        align: 'left',
+        bold: true,
+      }),
+      hyperlink: content.cta.url ? { url: content.cta.url } : undefined,
+    });
+  }
+
+  if (Array.isArray(content.contact) && content.contact.length) {
+    const rowsY = safe.y + safe.h - 0.9;
+    const colW = safe.w / Math.max(content.contact.length, 1);
+    content.contact.forEach((row, i) => {
+      const x = safe.x + i * colW;
+      placeText(slide, resolved, 'caption', row.label || '', {
+        x, y: rowsY, w: colW - 0.2, h: 0.3,
+      }, { color: resolved.palette.subtle, align: 'left' });
+      placeText(slide, resolved, 'body', row.value || '', {
+        x, y: rowsY + 0.3, w: colW - 0.2, h: 0.4,
+      }, { color: resolved.palette.text, align: 'left' });
+    });
+  }
+}

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

@@ -1,70 +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);
-  }
-}
+/**
+ * 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) {
+  // 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 } = 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);
+  }
+}