onbuzz 4.9.5 → 4.9.8

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' });
+  }
+}

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

@@ -0,0 +1,74 @@
+/**
+ * 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,
+  });
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Archetype: twoColChart — text on the left, chart on the right.
+ *
+ * Slots:
+ *   - title       (optional) header text
+ *   - leftText  { headline, body }   (required)
+ *   - chart     { type, ... }        (required) — see pres/charts
+ *
+ * tech-bold puts the chart inside a surface-coloured card with soft
+ * shadow; editorial and data-heavy leave it inline.
+ */
+import { applyChrome, callout, placeText } from './_helpers.js';
+import { resolveChart } from '../charts/index.js';
+
+export const id = 'twoColChart';
+export const slots = ['title', 'leftText', 'chart'];
+
+export default function render(slide, resolved, content, pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 47, ctx });
+
+  const cfg = resolved.archetypeConfig('twoColChart');
+  const { header, body, col } = 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' });
+
+  // Left text column — 5/12 of the grid.
+  const left = { ...col(1, 5), y: body.y, h: body.h };
+  if (content.leftText) {
+    placeText(slide, resolved, 'subtitle', content.leftText.headline, {
+      x: left.x, y: left.y, w: left.w, h: 0.6,
+    }, { color: resolved.palette.primary, align: 'left', bold: true });
+
+    placeText(slide, resolved, 'body', content.leftText.body, {
+      x: left.x, y: left.y + 0.7, w: left.w, h: left.h - 0.7,
+    }, { color: resolved.palette.text, align: 'left', valign: 'top' });
+  }
+
+  // Right chart column — 7/12 of the grid.
+  const right = { ...col(6, 7), y: body.y, h: body.h };
+
+  if (cfg.chartElevated) {
+    callout(slide, resolved, right, resolved.palette.surface);
+  }
+
+  const chartSpec = resolveChart(content.chart, resolved);
+  if (chartSpec && pptx) {
+    const padding = resolved.spacing.blockPadding;
+    const chartFrame = {
+      x: right.x + (cfg.chartElevated ? padding : 0),
+      y: right.y + (cfg.chartElevated ? padding : 0),
+      w: right.w - (cfg.chartElevated ? padding * 2 : 0),
+      h: right.h - (cfg.chartElevated ? padding * 2 : 0),
+    };
+    slide.addChart(pptx.ChartType[chartSpec.type] || chartSpec.type, chartSpec.data, {
+      ...chartFrame,
+      ...chartSpec.opts,
+    });
+  }
+}

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

@@ -0,0 +1,40 @@
+/**
+ * Archetype: twoColText — title + two text columns side by side.
+ *
+ * Slots:
+ *   - title         (optional)
+ *   - left  { headline, body }   (required)
+ *   - right { headline, body }   (required)
+ *
+ * Each column shares one column of the 12-col grid (6 wide each with
+ * a single gutter between). Headlines render in subtitle weight,
+ * body text in body weight, both colored from the palette.
+ */
+import { applyChrome, placeText } from './_helpers.js';
+
+export const id = 'twoColText';
+export const slots = ['title', 'left', 'right'];
+
+export default function render(slide, resolved, content, _pptx, ctx) {
+  applyChrome(slide, resolved, { bgOverride: content.background, seed: 41, ctx });
+
+  const { header, body, col } = 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 leftFrame  = { ...col(1, 6),  y: body.y, h: body.h };
+  const rightFrame = { ...col(7, 6),  y: body.y, h: body.h };
+
+  for (const [frame, side] of [[leftFrame, content.left], [rightFrame, content.right]]) {
+    if (!side) continue;
+    placeText(slide, resolved, 'subtitle', side.headline, {
+      x: frame.x, y: frame.y, w: frame.w, h: 0.6,
+    }, { color: resolved.palette.primary, align: 'left', bold: true });
+
+    placeText(slide, resolved, 'body', side.body, {
+      x: frame.x, y: frame.y + 0.7, w: frame.w, h: frame.h - 0.7,
+    }, { color: resolved.palette.text, align: 'left', valign: 'top' });
+  }
+}

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

@@ -13,9 +13,11 @@ import mesh from './mesh.js';
 import noise from './noise.js';
 import geometric from './geometric.js';
 import grid from './grid.js';
+import voidBg from './void.js';
+import orb from './orb.js';
 
 const BACKGROUNDS = {
-  solid, gradient, mesh, noise, geometric, grid,
+  solid, gradient, mesh, noise, geometric, grid, void: voidBg, orb,
 };
 
 export function listBackgrounds() {

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

@@ -1,68 +1,57 @@
 /**
- * Background: mesh gradient (simulated).
+ * Background: mesh gradient — Stripe / Linear-style 4-corner radials.
  *
- * 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.
+ * Industry pattern: a deterministic 4-corner radial mesh. One hue per
+ * corner, each blob at ~55% slide diameter, positioned partially
+ * off-canvas so only the soft arc bleeds onto the slide. From a
+ * distance reads as a continuous mesh; up close it's four overlapping
+ * orbs. Hue assignment uses palette roles so the same palette always
+ * produces the same mesh.
  */
 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;
-  };
+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 applyMesh(slide, resolved, opts = {}) {
-  slide.background = { color: resolved.palette.bg };
+export default function applyMesh(slide, resolved, _opts = {}) {
+  const palette = resolved.palette;
+  slide.background = { color: palette.bg };
 
-  const seed = opts.seed ?? 1;
   const saturation = resolved.decoration?.mesh?.saturation || 'vivid';
-  const rand = prng(seed);
+  const blur = resolved.decoration?.mesh?.blur || 'normal';
+  const bgIsDark = isDarkHex(palette.bg);
+  const baseTrans = bgIsDark ? 65 : 80;
+  const blurAdj = blur === 'high' ? 8 : blur === 'low' ? -8 : 0;
+  const transparency = baseTrans + blurAdj;
+
+  const W = SLIDE_DIMENSIONS.width;
+  const H = SLIDE_DIMENSIONS.height;
+  const diameter = W * 0.55;
+  const offset = -W * 0.12;
+  const corners = [
+    { x: offset,                  y: offset,                  color: palette.primary },
+    { x: W - diameter - offset,   y: offset,                  color: palette.accent  },
+    { x: offset,                  y: H - diameter - offset,   color: shade(palette.primary, -20) },
+    { x: W - diameter - offset,   y: H - diameter - offset,   color: palette.highlight || palette.accent },
+  ];
 
-  // 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),
-        ];
+  if (saturation === 'muted') {
+    for (const c of corners) c.color = shade(c.color, bgIsDark ? -25 : 35);
+  }
 
-  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;
+  for (const c of corners) {
     slide.addShape('ellipse', {
-      x: cx - radius,
-      y: cy - radius,
-      w: radius * 2,
-      h: radius * 2,
-      fill: { color, transparency: 55 },
+      x: c.x, y: c.y, w: diameter, h: diameter,
+      fill: { color: c.color, transparency },
       line: { type: 'none' },
     });
   }
 }
+