onbuzz 4.9.1 → 4.9.5

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

@@ -0,0 +1,74 @@
+/**
+ * Background: geometric.
+ *
+ * Decorative shapes in corners + along edges. Style depends on the
+ * theme's decoration config:
+ *   - editorial: small hairline rules, a single accent square
+ *   - tech:      diagonal slashes, soft blobs in corners
+ *   - data:      a single thin underline + a tiny corner tick
+ *
+ * Always backgrounded — sits behind content but in front of `bg`.
+ */
+import { SLIDE_DIMENSIONS } from '../grid.js';
+import { shade } from '../palettes.js';
+
+export default function applyGeometric(slide, resolved) {
+  slide.background = { color: resolved.palette.bg };
+  const style = resolved.decoration?.geometric?.style || resolved.theme.family;
+  const density = resolved.decoration?.geometric?.density || 'medium';
+
+  if (style === 'editorial') {
+    // A small accent square in the bottom-right + a hairline rule at top.
+    slide.addShape('rect', {
+      x: SLIDE_DIMENSIONS.width - 0.7,
+      y: SLIDE_DIMENSIONS.height - 0.7,
+      w: 0.35, h: 0.35,
+      fill: { color: resolved.palette.accent, transparency: 30 },
+      line: { type: 'none' },
+    });
+    if (density !== 'minimal') {
+      slide.addShape('line', {
+        x: 0.4, y: 0.32, w: 1.8, h: 0,
+        line: { color: resolved.palette.primary, width: 1 },
+      });
+    }
+  } else if (style === 'tech') {
+    // A large soft blob in the top-right + a diagonal accent line in
+    // the bottom-left. Reads as "modern keynote".
+    slide.addShape('ellipse', {
+      x: SLIDE_DIMENSIONS.width - 3.5,
+      y: -1.5,
+      w: 5, h: 4,
+      fill: { color: resolved.palette.primary, transparency: 70 },
+      line: { type: 'none' },
+    });
+    slide.addShape('ellipse', {
+      x: -1.5,
+      y: SLIDE_DIMENSIONS.height - 1.5,
+      w: 3.5, h: 3.5,
+      fill: { color: resolved.palette.accent, transparency: 75 },
+      line: { type: 'none' },
+    });
+    if (density !== 'minimal') {
+      slide.addShape('line', {
+        x: 0.6, y: SLIDE_DIMENSIONS.height - 0.4, w: 1.6, h: 0,
+        line: { color: resolved.palette.accent, width: 1.5 },
+      });
+    }
+  } else if (style === 'data') {
+    // A single thin "rule" under the header + a tiny corner tick.
+    slide.addShape('rect', {
+      x: 0, y: SLIDE_DIMENSIONS.height - 0.06,
+      w: SLIDE_DIMENSIONS.width, h: 0.06,
+      fill: { color: shade(resolved.palette.subtle, 60), transparency: 50 },
+      line: { type: 'none' },
+    });
+    slide.addShape('rect', {
+      x: SLIDE_DIMENSIONS.width - 0.5,
+      y: 0,
+      w: 0.5, h: 0.06,
+      fill: { color: resolved.palette.primary },
+      line: { type: 'none' },
+    });
+  }
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Background: linear gradient (palette → shaded palette).
+ *
+ * pptxgenjs's slide.background has limited gradient support, so we
+ * place a full-slide rect with a two-stop linear gradient fill BEHIND
+ * everything else. This works identically in PowerPoint, Keynote, and
+ * Google Slides.
+ *
+ * Direction: 45° from top-left to bottom-right. Two stops derived from
+ * the palette: `bg` ↔ `bg shaded toward primary` for a subtle tint.
+ */
+import { SLIDE_DIMENSIONS } from '../grid.js';
+import { mix } from '../palettes.js';
+
+export default function applyGradient(slide, resolved) {
+  // Solid fallback so the slide isn't transparent if the gradient shape
+  // renders late.
+  slide.background = { color: resolved.palette.bg };
+
+  const stop0 = resolved.palette.bg;
+  const stop1 = mix(resolved.palette.bg, resolved.palette.primary, 0.18);
+
+  slide.addShape('rect', {
+    x: 0, y: 0,
+    w: SLIDE_DIMENSIONS.width,
+    h: SLIDE_DIMENSIONS.height,
+    fill: {
+      type: 'gradient',
+      gradientType: 'linear',
+      angle: 135,
+      stops: [
+        { pos: 0,   color: stop0 },
+        { pos: 100, color: stop1 },
+      ],
+    },
+    line: { type: 'none' },
+  });
+}

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

@@ -0,0 +1,35 @@
+/**
+ * Background: grid (faint reference grid).
+ *
+ * Data-heavy uses this. Thin horizontal + vertical lines at the theme's
+ * configured `spacing` interval, drawn in `subtle` colour with high
+ * transparency so they never compete with content.
+ *
+ * Reads as "this deck takes itself seriously about numbers."
+ */
+import { SLIDE_DIMENSIONS } from '../grid.js';
+
+export default function applyGrid(slide, resolved) {
+  slide.background = { color: resolved.palette.bg };
+
+  const spacing = resolved.decoration?.grid?.spacing || 0.5;
+  const opacity = resolved.decoration?.grid?.lineOpacity || 8; // 0–100, lower = fainter
+  const lineColor = resolved.palette.subtle;
+  const transparency = 100 - opacity;
+
+  // Horizontal lines.
+  for (let y = spacing; y < SLIDE_DIMENSIONS.height; y += spacing) {
+    slide.addShape('line', {
+      x: 0, y, w: SLIDE_DIMENSIONS.width, h: 0,
+      line: { color: lineColor, width: 0.5, transparency },
+    });
+  }
+
+  // Vertical lines.
+  for (let x = spacing; x < SLIDE_DIMENSIONS.width; x += spacing) {
+    slide.addShape('line', {
+      x, y: 0, w: 0, h: SLIDE_DIMENSIONS.height,
+      line: { color: lineColor, width: 0.5, transparency },
+    });
+  }
+}

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

@@ -0,0 +1,36 @@
+/**
+ * pres/backgrounds — dispatch for the six background styles.
+ *
+ * Every style is a function `(slide, resolved, opts)` that mutates the
+ * pptxgenjs slide in-place, adding a background colour + any decorative
+ * shapes that sit behind content. Archetypes can call this once per
+ * slide; the global theme picks the default style, per-slide overrides
+ * win.
+ */
+import solid from './solid.js';
+import gradient from './gradient.js';
+import mesh from './mesh.js';
+import noise from './noise.js';
+import geometric from './geometric.js';
+import grid from './grid.js';
+
+const BACKGROUNDS = {
+  solid, gradient, mesh, noise, geometric, grid,
+};
+
+export function listBackgrounds() {
+  return Object.keys(BACKGROUNDS);
+}
+
+/**
+ * Apply a background style to a slide.
+ *   - `style`: one of solid | gradient | mesh | noise | geometric | grid
+ *   - `resolved`: full resolved theme (palette + decoration config)
+ *   - `opts.seed`: optional integer for deterministic randomisation
+ *
+ * Unknown styles fall back to solid — never errors.
+ */
+export function applyBackground(slide, resolved, style, opts = {}) {
+  const fn = BACKGROUNDS[style] || BACKGROUNDS.solid;
+  fn(slide, resolved, opts);
+}

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

@@ -0,0 +1,68 @@
+/**
+ * Background: mesh gradient (simulated).
+ *
+ * True mesh gradients require SVG → PNG rasterization or Office 365
+ * features that don't render across PowerPoint / Keynote / Google
+ * Slides. We simulate with 3-5 large soft-edged ovals placed at
+ * deterministic positions, each filled with a palette colour at high
+ * transparency, layered over the slide background. From a distance the
+ * stack reads as a continuous mesh; up close it's individual blobs.
+ *
+ * Deterministic seeding: blob positions come from a tiny xorshift PRNG
+ * seeded with the slide index. Same deck, same positions every time.
+ */
+import { SLIDE_DIMENSIONS } from '../grid.js';
+import { shade } from '../palettes.js';
+
+function prng(seed) {
+  let s = (seed * 2654435761) >>> 0;
+  return () => {
+    s ^= s << 13;
+    s ^= s >>> 17;
+    s ^= s << 5;
+    return ((s >>> 0) % 10000) / 10000;
+  };
+}
+
+export default function applyMesh(slide, resolved, opts = {}) {
+  slide.background = { color: resolved.palette.bg };
+
+  const seed = opts.seed ?? 1;
+  const saturation = resolved.decoration?.mesh?.saturation || 'vivid';
+  const rand = prng(seed);
+
+  // Pick blob colours from the palette. For vivid themes we use primary
+  // + accent + a shaded primary; for muted themes everything sits a few
+  // shades from the bg colour.
+  const blobs =
+    saturation === 'vivid'
+      ? [
+          resolved.palette.primary,
+          resolved.palette.accent,
+          shade(resolved.palette.primary, -25),
+          shade(resolved.palette.accent, -15),
+        ]
+      : [
+          shade(resolved.palette.primary, 30),
+          shade(resolved.palette.accent, 30),
+          shade(resolved.palette.bg, -8),
+        ];
+
+  const stopCount = resolved.decoration?.mesh?.stops || blobs.length;
+  for (let i = 0; i < Math.min(stopCount, blobs.length); i++) {
+    const color = blobs[i];
+    // Position blobs so they bleed off the slide edges — the cropped
+    // ovals look more organic and less like deliberate decoration.
+    const cx = (rand() * 1.4 - 0.2) * SLIDE_DIMENSIONS.width;
+    const cy = (rand() * 1.4 - 0.2) * SLIDE_DIMENSIONS.height;
+    const radius = 4 + rand() * 4;
+    slide.addShape('ellipse', {
+      x: cx - radius,
+      y: cy - radius,
+      w: radius * 2,
+      h: radius * 2,
+      fill: { color, transparency: 55 },
+      line: { type: 'none' },
+    });
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Background: paper-noise.
+ *
+ * Editorial-warm uses this. Subtle warm tint via a single large soft-
+ * edged ellipse in one corner — gives the slide a "this is paper" feel
+ * without needing real raster noise (which would inflate the deck).
+ *
+ * Cheap to render, works everywhere, reads as "this slide is paper."
+ */
+import { SLIDE_DIMENSIONS } from '../grid.js';
+import { shade } from '../palettes.js';
+
+export default function applyNoise(slide, resolved) {
+  slide.background = { color: resolved.palette.bg };
+
+  // A faint warm vignette in the top-right corner — implies natural
+  // paper texture without requiring an embedded image.
+  const tint = shade(resolved.palette.bg, -6);
+  slide.addShape('ellipse', {
+    x: SLIDE_DIMENSIONS.width * 0.55,
+    y: -SLIDE_DIMENSIONS.height * 0.4,
+    w: SLIDE_DIMENSIONS.width * 1.0,
+    h: SLIDE_DIMENSIONS.height * 1.2,
+    fill: { color: tint, transparency: 60 },
+    line: { type: 'none' },
+  });
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Background: solid
+ *
+ * Just sets the slide's `background` colour to the palette's `bg`.
+ * The simplest, most reliable style — no decorative shapes, no
+ * gradient stops, nothing that depends on PPTX renderer fidelity.
+ */
+export default function applySolid(slide, resolved) {
+  slide.background = { color: resolved.palette.bg };
+}

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

@@ -0,0 +1,119 @@
+/**
+ * pres/charts — theme-styled chart wrapper.
+ *
+ * The agent provides data in a simple shape; we resolve colours,
+ * gridlines, and label typography from the active theme and palette,
+ * then return a `(chartType, data, opts)` triple that the archetype
+ * passes to `slide.addChart(...)`.
+ *
+ * Supported shapes:
+ *   { type: 'bar' | 'column' | 'line' | 'area',  categories: [...], series: [{name, data:[...]}, ...] }
+ *   { type: 'pie' | 'donut',                     data: [{ label, value }, ...] }
+ *
+ * Theme decides:
+ *   - colour sequence (from palettes.CHART_SERIES[paletteName])
+ *   - gridline visibility + colour
+ *   - data-label font + size + colour
+ *   - legend placement + typography
+ *   - donut hole size
+ */
+import { CHART_SERIES } from '../palettes.js';
+
+function colorsFor(resolved) {
+  return CHART_SERIES[resolved.palette.name] || [
+    resolved.palette.primary,
+    resolved.palette.accent,
+    resolved.palette.subtle,
+  ];
+}
+
+/**
+ * Resolve a chart spec to (chartType, data, opts) that pptxgenjs
+ * `slide.addChart` accepts. Returns `null` when the spec is malformed
+ * so the archetype can show a fallback panel instead.
+ *
+ * Note: `chartType` is returned as a string identifier (e.g. 'bar',
+ * 'donut'). The archetype maps the string → `pptx.ChartType[...]`
+ * because the ChartType enum is only available on a pptxgenjs instance.
+ */
+export function resolveChart(spec, resolved) {
+  if (!spec || !spec.type) return null;
+  const t = String(spec.type).toLowerCase();
+  const colors = colorsFor(resolved);
+  const family = resolved.theme.family;
+  const typo = resolved.typography;
+
+  const baseOpts = {
+    chartColors: colors,
+    showLegend: spec.showLegend !== false,
+    legendPos: 'r',
+    legendFontFace: typo.caption.fontFace,
+    legendFontSize: typo.caption.fontSize,
+    legendColor: resolved.palette.text,
+
+    catAxisLineShow: family === 'data',
+    valAxisLineShow: family === 'data',
+    catAxisLabelFontFace: typo.caption.fontFace,
+    catAxisLabelFontSize: typo.caption.fontSize,
+    catAxisLabelColor: resolved.palette.subtle,
+    valAxisLabelFontFace: typo.caption.fontFace,
+    valAxisLabelFontSize: typo.caption.fontSize,
+    valAxisLabelColor: resolved.palette.subtle,
+
+    showValue: false,
+    dataLabelFontFace: typo.caption.fontFace,
+    dataLabelFontSize: typo.caption.fontSize,
+    dataLabelColor: resolved.palette.text,
+
+    // Gridline policy: editorial = none, tech = light, data = visible.
+    valGridLine: family === 'editorial'
+      ? { style: 'none' }
+      : family === 'tech'
+        ? { color: resolved.palette.subtle, size: 0.5, transparency: 70 }
+        : { color: resolved.palette.subtle, size: 0.5, transparency: 30 },
+    catGridLine: { style: 'none' },
+  };
+
+  if (t === 'pie' || t === 'donut') {
+    const items = Array.isArray(spec.data) ? spec.data : [];
+    const data = [{
+      name: spec.name || 'Series',
+      labels: items.map(d => String(d.label ?? '')),
+      values: items.map(d => Number(d.value) || 0),
+    }];
+    const opts = {
+      ...baseOpts,
+      showPercent: spec.showPercent !== false,
+      holeSize: t === 'donut' ? (spec.holeSize ?? 60) : 0,
+      dataLabelPosition: t === 'donut' ? 'outEnd' : 'bestFit',
+    };
+    return { type: t === 'donut' ? 'doughnut' : 'pie', data, opts };
+  }
+
+  // bar / column / line / area: same data shape.
+  const categories = Array.isArray(spec.categories) ? spec.categories : [];
+  const series = Array.isArray(spec.series) ? spec.series : [];
+  const data = series.map(s => ({
+    name: s.name || 'Series',
+    labels: categories.map(c => String(c)),
+    values: (s.data || []).map(v => Number(v) || 0),
+  }));
+
+  const opts = { ...baseOpts };
+  if (t === 'bar') {
+    opts.barDir = 'bar';
+    opts.barGrouping = spec.stacked ? 'stacked' : 'clustered';
+  } else if (t === 'column') {
+    opts.barDir = 'col';
+    opts.barGrouping = spec.stacked ? 'stacked' : 'clustered';
+  } else if (t === 'line') {
+    opts.lineDataSymbol = 'circle';
+    opts.lineDataSymbolSize = 5;
+    opts.lineSize = 2.5;
+  } else if (t === 'area') {
+    opts.fill = colors[0];
+  }
+  // pptxgenjs uses 'bar' for both bar + column (direction differs).
+  const pptxType = (t === 'column' || t === 'bar') ? 'bar' : t;
+  return { type: pptxType, data, opts };
+}

package/src/tools/office/pres/grid.js

@@ -0,0 +1,136 @@
+/**
+ * pres/grid — slide geometry + layout math.
+ *
+ * pptxgenjs uses inches as its default unit. The 16:9 wide layout is
+ * 13.333 × 7.5 inches. Everything in the new presentation system is
+ * expressed against this grid so the agent never has to think in pixels
+ * or coordinates — it picks an archetype + spacing density, and the
+ * grid resolves to (x, y, w, h) tuples for pptxgenjs to consume.
+ *
+ * Grid model:
+ *   - 12-column layout (rounded to PPTX-friendly inch fractions)
+ *   - safe-area = full slide minus pageMargin on all sides
+ *   - vertical baseline of 0.25" so type sits on a rhythm
+ *
+ * spacing presets dial the same five knobs (page margin, content gutter,
+ * paragraph gap, header-to-body gap, footer reservation). Changing one
+ * preset restyles every archetype because every archetype reads from
+ * `metrics` and never hardcodes numbers.
+ */
+
+export const SLIDE_DIMENSIONS = {
+  width:  13.333,
+  height: 7.5,
+};
+
+const SPACING_PRESETS = {
+  tight: {
+    pageMargin:       0.4,
+    contentGutter:    0.2,
+    paragraphGap:     0.08,
+    headerBodyGap:    0.2,
+    footerReserve:    0.35,
+    blockPadding:     0.18,
+  },
+  cozy: {
+    pageMargin:       0.6,
+    contentGutter:    0.35,
+    paragraphGap:     0.14,
+    headerBodyGap:    0.35,
+    footerReserve:    0.45,
+    blockPadding:     0.28,
+  },
+  airy: {
+    pageMargin:       0.9,
+    contentGutter:    0.55,
+    paragraphGap:     0.22,
+    headerBodyGap:    0.55,
+    footerReserve:    0.6,
+    blockPadding:     0.4,
+  },
+};
+
+/**
+ * Resolve a spacing preset to absolute metrics + derived helpers.
+ * The agent passes 'tight' | 'cozy' | 'airy' (or omits for 'cozy').
+ */
+export function resolveSpacing(preset = 'cozy') {
+  const base = SPACING_PRESETS[preset] || SPACING_PRESETS.cozy;
+  const { width, height } = SLIDE_DIMENSIONS;
+  const m = base.pageMargin;
+
+  // Safe-area inside the page margins.
+  const safe = {
+    x: m,
+    y: m,
+    w: width  - m * 2,
+    h: height - m * 2,
+  };
+
+  // 12-column grid inside the safe area.
+  const colCount = 12;
+  const colW = (safe.w - base.contentGutter * (colCount - 1)) / colCount;
+
+  /**
+   * Convert a (col, span) pair → { x, w }. Both are 1-based for
+   * readability (col 1 starts at the left margin). Useful for the
+   * two-column / three-column archetypes that the agent can pick
+   * without thinking in inches.
+   */
+  function col(start, span) {
+    const c0 = Math.max(1, Math.min(colCount, start));
+    const cs = Math.max(1, Math.min(colCount - c0 + 1, span));
+    const x = safe.x + (c0 - 1) * (colW + base.contentGutter);
+    const w = cs * colW + (cs - 1) * base.contentGutter;
+    return { x, w };
+  }
+
+  /** Standard header band the title sits in. */
+  const header = {
+    x: safe.x,
+    y: safe.y,
+    w: safe.w,
+    h: 0.9,
+  };
+
+  /** Body area below the header. */
+  const body = {
+    x: safe.x,
+    y: header.y + header.h + base.headerBodyGap,
+    w: safe.w,
+    h: safe.h - (header.h + base.headerBodyGap + base.footerReserve),
+  };
+
+  /** Footer strip reserved at the bottom. */
+  const footer = {
+    x: safe.x,
+    y: height - m - base.footerReserve,
+    w: safe.w,
+    h: base.footerReserve,
+  };
+
+  return {
+    preset,
+    ...base,
+    slide: SLIDE_DIMENSIONS,
+    safe,
+    header,
+    body,
+    footer,
+    colCount,
+    colWidth: colW,
+    col,
+  };
+}
+
+/**
+ * Centered box inside a region — used for hero / quote / closing
+ * archetypes where the content sits in the middle of the slide.
+ */
+export function centerBox(region, w, h) {
+  return {
+    x: region.x + (region.w - w) / 2,
+    y: region.y + (region.h - h) / 2,
+    w, h,
+  };
+}