onbuzz 4.9.0 → 4.9.5

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

@@ -0,0 +1,92 @@
+/**
+ * Shared archetype helpers — text placement, footer chrome,
+ * rule lines, callout cards. Every archetype reuses these so styling
+ * stays consistent across slide types.
+ */
+import { textStyle } from '../typography.js';
+import { cardShape, shapeOpts } from '../shapes.js';
+import { applyBackground } from '../backgrounds/index.js';
+
+/**
+ * Apply background + optional decorative chrome shared across all
+ * archetypes (e.g. footer rule, slide number).
+ *
+ *   - `bgOverride` lets an individual archetype request a different
+ *     background style than the theme default (the hero archetype in
+ *     tech-bold always wants `mesh` even if the deck default is solid).
+ *   - `seed` is forwarded so deterministic generators (mesh) place
+ *     their blobs consistently per slide.
+ */
+export function applyChrome(slide, resolved, { bgOverride, seed, footer } = {}) {
+  applyBackground(slide, resolved, bgOverride || resolved.bg, { seed });
+
+  if (footer && footer.text) {
+    slide.addText(footer.text, {
+      x: resolved.spacing.safe.x,
+      y: resolved.spacing.slide.height - resolved.spacing.pageMargin - 0.3,
+      w: resolved.spacing.safe.w,
+      h: 0.3,
+      ...textStyle(resolved.typography, 'caption', {
+        color: resolved.palette.subtle,
+        align: footer.align || 'left',
+      }),
+    });
+  }
+}
+
+/** Draw a single horizontal accent rule at (x, y, w). */
+export function rule(slide, x, y, w, color, weight = 1) {
+  slide.addShape('line', {
+    x, y, w, h: 0,
+    line: { color, width: weight },
+  });
+}
+
+/** Draw a small uppercase eyebrow label above a title block. */
+export function eyebrow(slide, resolved, text, { x, y, w, color }) {
+  slide.addText(String(text || '').toUpperCase(), {
+    x, y, w, h: 0.25,
+    ...textStyle(resolved.typography, 'eyebrow', {
+      color: color || resolved.palette.primary,
+      align: 'left',
+    }),
+  });
+}
+
+/** Place a single block of text — wraps {@link textStyle} for brevity. */
+export function placeText(slide, resolved, role, text, frame, overrides = {}) {
+  if (text === undefined || text === null || text === '') return;
+  slide.addText(String(text), {
+    ...frame,
+    ...textStyle(resolved.typography, role, overrides),
+  });
+}
+
+/** Place a stack of bullet items into a frame. */
+export function placeBullets(slide, resolved, items, frame, overrides = {}) {
+  const rows = (items || []).map((li) => {
+    const text = typeof li === 'string' ? li : (li.text || '');
+    const bullet = (typeof li === 'object' && li.bullet === false)
+      ? false
+      : { type: (typeof li === 'object' && li.ordered) ? 'number' : 'bullet' };
+    return { text, options: { bullet } };
+  });
+  slide.addText(rows, {
+    ...frame,
+    ...textStyle(resolved.typography, 'body', { color: resolved.palette.text, ...overrides }),
+    paraSpaceAfter: resolved.spacing.paragraphGap * 8, // pptxgenjs unit ≈ point
+  });
+}
+
+/**
+ * Draw a "callout card" — a filled rectangle with optional shadow
+ * and the active shape's corner radius. Used to wrap stat numbers,
+ * data tables, charts on `tech-bold`.
+ */
+export function callout(slide, resolved, frame, fillColor) {
+  const opts = shapeOpts(resolved.shape, 'card', fillColor || resolved.palette.surface);
+  slide.addShape(cardShape(resolved.shape), {
+    x: frame.x, y: frame.y, w: frame.w, h: frame.h,
+    ...opts,
+  });
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Archetype: agenda — numbered list of sections the deck will cover.
+ *
+ * Slots:
+ *   - title  (optional, default "Agenda")
+ *   - items  (required) array of strings or { title, hint } objects
+ *
+ * Numbers are rendered in display-weight; titles in body weight; hints
+ * (when present) in caption colour. Density depends on the spacing
+ * preset — `tight` allows ~10 items, `airy` ~6.
+ */
+import { applyChrome, placeText } from './_helpers.js';
+import { textStyle } from '../typography.js';
+
+export const id = 'agenda';
+export const slots = ['title', 'items'];
+
+export default function render(slide, resolved, content) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 7 });
+
+  const { safe, header, body } = resolved.spacing;
+
+  placeText(slide, resolved, 'title', content.title || 'Agenda', {
+    x: header.x, y: header.y, w: header.w, h: header.h,
+  }, { color: resolved.palette.text, align: 'left' });
+
+  const items = Array.isArray(content.items) ? content.items : [];
+  const n = items.length || 1;
+  const rowH = Math.min(0.9, body.h / Math.max(n, 4));
+
+  items.forEach((raw, i) => {
+    const item = typeof raw === 'string' ? { title: raw } : raw;
+    const y = body.y + i * rowH;
+
+    // Number column
+    slide.addText(String(i + 1).padStart(2, '0'), {
+      x: body.x, y, w: 0.9, h: rowH,
+      ...textStyle(resolved.typography, 'title', {
+        color: resolved.palette.subtle, align: 'left', valign: 'middle',
+      }),
+    });
+
+    // Title column
+    slide.addText(item.title || '', {
+      x: body.x + 1.1, y, w: body.w - 1.1, h: rowH * 0.55,
+      ...textStyle(resolved.typography, 'subtitle', {
+        color: resolved.palette.text, align: 'left', valign: 'middle', bold: true,
+      }),
+    });
+
+    // Hint column (optional, shown beneath title)
+    if (item.hint) {
+      slide.addText(item.hint, {
+        x: body.x + 1.1, y: y + rowH * 0.5, w: body.w - 1.1, h: rowH * 0.5,
+        ...textStyle(resolved.typography, 'caption', {
+          color: resolved.palette.subtle, align: 'left', valign: 'top',
+        }),
+      });
+    }
+  });
+}

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

@@ -0,0 +1,69 @@
+/**
+ * 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) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 11 });
+
+  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/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 };
+}