onbuzz 4.9.13 → 4.10.0

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

@@ -1,94 +1,93 @@
-/**
- * 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' },
-    });
-  }
-}
+/**
+ * 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 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/table.js

@@ -1,74 +1,73 @@
-/**
- * Archetype: table — title + a striped data table.
- *
- * Slots:
- *   - title     (optional)
- *   - headers   (required) array of column header strings
- *   - rows      (required) array of arrays — one inner array per row
- *
- * Stripes use the palette's `surface` colour for odd rows; numeric-
- * looking cells right-align automatically. Data-heavy renders numbers
- * in monospace.
- */
-import { applyChrome, placeText } from './_helpers.js';
-import { textStyle } from '../typography.js';
-
-export const id = 'table';
-export const slots = ['title', 'headers', 'rows'];
-
-function isNumeric(value) {
-  if (value === null || value === undefined) return false;
-  const s = String(value).replace(/[\s,$%]/g, '');
-  return s !== '' && !isNaN(Number(s));
-}
-
-export default function render(slide, resolved, content, _pptx, ctx) {
-  applyChrome(slide, resolved, { bgOverride: content.background, seed: 73, ctx });
-
-  const cfg = resolved.archetypeConfig('table');
-  const { header, body } = resolved.spacing;
-
-  placeText(slide, resolved, 'title', content.title, {
-    x: header.x, y: header.y, w: header.w, h: 0.7,
-  }, { color: resolved.palette.text, align: 'left' });
-
-  const headers = content.headers || [];
-  const rows = content.rows || [];
-  if (headers.length === 0) return;
-
-  // Header row
-  const headerRow = headers.map(h => ({
-    text: String(h ?? ''),
-    options: {
-      bold: true,
-      color: resolved.palette.text,
-      fontFace: resolved.typography.subtitle.fontFace,
-      fontSize: resolved.typography.body.fontSize,
-      fill: { color: resolved.palette.surface },
-      align: 'left',
-    },
-  }));
-
-  // Data rows
-  const monoFont = cfg.monospaceNumbers ? resolved.typography.mono.fontFace : null;
-  const tableRows = rows.map((row, i) => row.map((cell) => {
-    const numeric = isNumeric(cell);
-    const fontFace = (numeric && monoFont) ? monoFont : resolved.typography.body.fontFace;
-    return {
-      text: cell === null || cell === undefined ? '' : String(cell),
-      options: {
-        color: resolved.palette.text,
-        fontFace,
-        fontSize: resolved.typography.body.fontSize,
-        align: numeric ? 'right' : 'left',
-        fill: (cfg.striped && i % 2 === 1) ? { color: resolved.palette.surface } : undefined,
-      },
-    };
-  }));
-
-  slide.addTable([headerRow, ...tableRows], {
-    x: body.x, y: body.y, w: body.w, h: body.h,
-    border: { type: 'solid', pt: 0.5, color: resolved.palette.subtle },
-    autoPage: false,
-  });
-}
+/**
+ * Archetype: table — title + a striped data table.
+ *
+ * Slots:
+ *   - title     (optional)
+ *   - headers   (required) array of column header strings
+ *   - rows      (required) array of arrays — one inner array per row
+ *
+ * Stripes use the palette's `surface` colour for odd rows; numeric-
+ * looking cells right-align automatically. Data-heavy renders numbers
+ * in monospace.
+ */
+import { applyChrome, placeText } from './_helpers.js';
+
+export const id = 'table';
+export const slots = ['title', 'headers', 'rows'];
+
+function isNumeric(value) {
+  if (value === null || value === undefined) return false;
+  const s = String(value).replace(/[\s,$%]/g, '');
+  return s !== '' && !isNaN(Number(s));
+}
+
+export default function render(slide, resolved, content, _pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 73, ctx });
+
+  const cfg = resolved.archetypeConfig('table');
+  const { header, body } = resolved.spacing;
+
+  placeText(slide, resolved, 'title', content.title, {
+    x: header.x, y: header.y, w: header.w, h: 0.7,
+  }, { color: resolved.palette.text, align: 'left' });
+
+  const headers = content.headers || [];
+  const rows = content.rows || [];
+  if (headers.length === 0) return;
+
+  // Header row
+  const headerRow = headers.map(h => ({
+    text: String(h ?? ''),
+    options: {
+      bold: true,
+      color: resolved.palette.text,
+      fontFace: resolved.typography.subtitle.fontFace,
+      fontSize: resolved.typography.body.fontSize,
+      fill: { color: resolved.palette.surface },
+      align: 'left',
+    },
+  }));
+
+  // Data rows
+  const monoFont = cfg.monospaceNumbers ? resolved.typography.mono.fontFace : null;
+  const tableRows = rows.map((row, i) => row.map((cell) => {
+    const numeric = isNumeric(cell);
+    const fontFace = (numeric && monoFont) ? monoFont : resolved.typography.body.fontFace;
+    return {
+      text: cell === null || cell === undefined ? '' : String(cell),
+      options: {
+        color: resolved.palette.text,
+        fontFace,
+        fontSize: resolved.typography.body.fontSize,
+        align: numeric ? 'right' : 'left',
+        fill: (cfg.striped && i % 2 === 1) ? { color: resolved.palette.surface } : undefined,
+      },
+    };
+  }));
+
+  slide.addTable([headerRow, ...tableRows], {
+    x: body.x, y: body.y, w: body.w, h: body.h,
+    border: { type: 'solid', pt: 0.5, color: resolved.palette.subtle },
+    autoPage: false,
+  });
+}

package/src/tools/office/pres/backgrounds/orb.js

@@ -1,66 +1,66 @@
-/**
- * Background: orb — Linear-style single soft orb (not Stripe-4-corner-mesh).
- *
- * Reference: Linear's product launch decks. ONE big purple-blue blur
- * orb anchored in the lower-right, positioned partially off-canvas
- * so only its soft arc bleeds onto the slide. A smaller cyan accent
- * orb sits diagonally opposite for visual rhythm.
- *
- * Distinguished from `mesh` (which uses 4 corner-anchored orbs in
- * the Stripe Sessions pattern): orb has the orbs in deliberate
- * dramatic positions, not a uniform corner-fill.
- */
-import { SLIDE_DIMENSIONS } from '../grid.js';
-import { shade } from '../palettes.js';
-
-function isDarkHex(hex) {
-  const s = String(hex).replace(/^#/, '');
-  if (!/^[0-9A-Fa-f]{6}$/.test(s)) return false;
-  const r = parseInt(s.slice(0, 2), 16);
-  const g = parseInt(s.slice(2, 4), 16);
-  const b = parseInt(s.slice(4, 6), 16);
-  return (0.299 * r + 0.587 * g + 0.114 * b) < 110;
-}
-
-export default function applyOrb(slide, resolved, _opts = {}) {
-  const palette = resolved.palette;
-  slide.background = { color: palette.bg };
-
-  const W = SLIDE_DIMENSIONS.width;
-  const H = SLIDE_DIMENSIONS.height;
-  const bgIsDark = isDarkHex(palette.bg);
-  // On dark themes the orbs need lower transparency to read; on light
-  // themes they need higher (or they overpower content).
-  const mainTrans = bgIsDark ? 55 : 78;
-  const accentTrans = bgIsDark ? 70 : 85;
-
-  // Primary orb — lower-right, large. Drama anchor for the slide.
-  const mainSize = W * 0.7;
-  slide.addShape('ellipse', {
-    x: W * 0.55, y: H * 0.45,
-    w: mainSize, h: mainSize,
-    fill: { color: palette.primary, transparency: mainTrans },
-    line: { type: 'none' },
-  });
-
-  // Accent orb — upper-left, smaller. Counterweight for composition.
-  const accentSize = W * 0.42;
-  slide.addShape('ellipse', {
-    x: -accentSize * 0.4, y: -accentSize * 0.3,
-    w: accentSize, h: accentSize,
-    fill: { color: palette.highlight || palette.accent, transparency: accentTrans },
-    line: { type: 'none' },
-  });
-
-  // Optional darker shaded primary tucked behind the main orb — adds
-  // depth without a second visible orb.
-  if (bgIsDark) {
-    const depthSize = W * 0.5;
-    slide.addShape('ellipse', {
-      x: W * 0.7, y: H * 0.3,
-      w: depthSize, h: depthSize,
-      fill: { color: shade(palette.primary, -30), transparency: 60 },
-      line: { type: 'none' },
-    });
-  }
-}
+/**
+ * Background: orb — Linear-style single soft orb (not Stripe-4-corner-mesh).
+ *
+ * Reference: Linear's product launch decks. ONE big purple-blue blur
+ * orb anchored in the lower-right, positioned partially off-canvas
+ * so only its soft arc bleeds onto the slide. A smaller cyan accent
+ * orb sits diagonally opposite for visual rhythm.
+ *
+ * Distinguished from `mesh` (which uses 4 corner-anchored orbs in
+ * the Stripe Sessions pattern): orb has the orbs in deliberate
+ * dramatic positions, not a uniform corner-fill.
+ */
+import { SLIDE_DIMENSIONS } from '../grid.js';
+import { shade } from '../palettes.js';
+
+function isDarkHex(hex) {
+  const s = String(hex).replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{6}$/.test(s)) return false;
+  const r = parseInt(s.slice(0, 2), 16);
+  const g = parseInt(s.slice(2, 4), 16);
+  const b = parseInt(s.slice(4, 6), 16);
+  return (0.299 * r + 0.587 * g + 0.114 * b) < 110;
+}
+
+export default function applyOrb(slide, resolved) {
+  const palette = resolved.palette;
+  slide.background = { color: palette.bg };
+
+  const W = SLIDE_DIMENSIONS.width;
+  const H = SLIDE_DIMENSIONS.height;
+  const bgIsDark = isDarkHex(palette.bg);
+  // On dark themes the orbs need lower transparency to read; on light
+  // themes they need higher (or they overpower content).
+  const mainTrans = bgIsDark ? 55 : 78;
+  const accentTrans = bgIsDark ? 70 : 85;
+
+  // Primary orb — lower-right, large. Drama anchor for the slide.
+  const mainSize = W * 0.7;
+  slide.addShape('ellipse', {
+    x: W * 0.55, y: H * 0.45,
+    w: mainSize, h: mainSize,
+    fill: { color: palette.primary, transparency: mainTrans },
+    line: { type: 'none' },
+  });
+
+  // Accent orb — upper-left, smaller. Counterweight for composition.
+  const accentSize = W * 0.42;
+  slide.addShape('ellipse', {
+    x: -accentSize * 0.4, y: -accentSize * 0.3,
+    w: accentSize, h: accentSize,
+    fill: { color: palette.highlight || palette.accent, transparency: accentTrans },
+    line: { type: 'none' },
+  });
+
+  // Optional darker shaded primary tucked behind the main orb — adds
+  // depth without a second visible orb.
+  if (bgIsDark) {
+    const depthSize = W * 0.5;
+    slide.addShape('ellipse', {
+      x: W * 0.7, y: H * 0.3,
+      w: depthSize, h: depthSize,
+      fill: { color: shade(palette.primary, -30), transparency: 60 },
+      line: { type: 'none' },
+    });
+  }
+}