groove-dev 0.26.39 → 0.27.0

package/slides/convert-slides.js

@@ -1,1120 +0,0 @@
-// FSL-1.1-Apache-2.0 — see LICENSE
-const pptxgen = require('pptxgenjs');
-const { createCanvas } = require('canvas');
-const fs = require('fs');
-
-const data = JSON.parse(fs.readFileSync('slides.json', 'utf8'));
-const { meta, slides } = data;
-
-const ACCENT = meta.accentColor || '4338CA';
-const ACCENT_L = meta.accentLight || '6366F1';
-const AMBER = meta.amber || 'D97706';
-const AMBER_L = meta.amberLight || 'F59E0B';
-const ROSE = meta.rose || 'E11D48';
-const FONT_H = meta.fontHeader || 'Georgia';
-const FONT_B = meta.fontBody || 'Arial';
-
-const pres = new pptxgen();
-pres.layout = 'LAYOUT_16x9';
-
-const LAYOUT = {
-  SLIDE_W: 10, SLIDE_H: 5.625,
-  SAFE_X: 0.6, SAFE_R: 9.4, SAFE_W: 8.8,
-  SAFE_TOP: 0.65, SAFE_BOT: 5.125, SAFE_H: 4.475,
-  GAP_TIGHT: 0.1, GAP_STD: 0.25, GAP_SECTION: 0.4,
-  TEXT_INSET: 0.2, BRAND_Y: 0.25, BRAND_H: 0.3,
-  CONTENT_START: 0.65,
-};
-
-// ═══════════════════════════════════════════════════════════
-// UTILITIES
-// ═══════════════════════════════════════════════════════════
-
-function estimateTextHeight(text, fontSize, boxWidth, opts = {}) {
-  const charWidthFactor = opts.bold ? 0.0075 : 0.007;
-  const avgCharWidth = fontSize * charWidthFactor;
-  const margin = opts.margin !== undefined ? opts.margin : 0.1;
-  const effectiveWidth = boxWidth - (margin * 2);
-  const charsPerLine = Math.floor(effectiveWidth / avgCharWidth);
-  if (charsPerLine <= 0) return fontSize / 72;
-  const words = text.split(/\s+/);
-  let lines = 1, lineLen = 0;
-  for (const word of words) {
-    if (lineLen + word.length > charsPerLine && lineLen > 0) { lines++; lineLen = word.length; }
-    else { lineLen += (lineLen > 0 ? 1 : 0) + word.length; }
-  }
-  lines += (text.match(/\n/g) || []).length;
-  const lineHeight = (fontSize * 1.3) / 72;
-  return Math.max(lines * lineHeight, fontSize / 72);
-}
-
-function gradientBg(w, h, angle, stops) {
-  const c = createCanvas(w, h);
-  const ctx = c.getContext('2d');
-  const rad = (angle * Math.PI) / 180;
-  const g = ctx.createLinearGradient(
-    w/2 - Math.cos(rad)*w, h/2 - Math.sin(rad)*h,
-    w/2 + Math.cos(rad)*w, h/2 + Math.sin(rad)*h
-  );
-  stops.forEach(([p, col]) => g.addColorStop(p, col));
-  ctx.fillStyle = g; ctx.fillRect(0, 0, w, h);
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderOrb(accent = '#4338CA', size = 800) {
-  const c = createCanvas(size, size);
-  const ctx = c.getContext('2d');
-  const cx = size/2, cy = size/2, r = size*0.44;
-  const g = ctx.createRadialGradient(cx*0.7, cy*0.6, r*0.1, cx, cy, r);
-  g.addColorStop(0, accent + '80');
-  g.addColorStop(0.4, accent + '4D');
-  g.addColorStop(1, accent + '0D');
-  ctx.fillStyle = g; ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2); ctx.fill();
-  const h = ctx.createRadialGradient(cx*0.65, cy*0.5, 0, cx*0.65, cy*0.5, r*0.5);
-  h.addColorStop(0, 'rgba(255,255,255,0.3)');
-  h.addColorStop(1, 'rgba(255,255,255,0)');
-  ctx.fillStyle = h; ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2); ctx.fill();
-  const s = ctx.createRadialGradient(cx, size*0.88, 0, cx, size*0.88, r*0.7);
-  s.addColorStop(0, 'rgba(0,0,0,0.2)');
-  s.addColorStop(1, 'rgba(0,0,0,0)');
-  ctx.fillStyle = s; ctx.beginPath(); ctx.ellipse(cx, size*0.88, r*0.8, r*0.15, 0, 0, Math.PI*2); ctx.fill();
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderBlob(accent = '#E11D48', size = 600) {
-  const c = createCanvas(size, size);
-  const ctx = c.getContext('2d');
-  const g = ctx.createRadialGradient(size*0.4, size*0.4, 0, size*0.5, size*0.5, size*0.45);
-  g.addColorStop(0, accent + '59');
-  g.addColorStop(1, accent + '00');
-  ctx.filter = 'blur(30px)';
-  ctx.fillStyle = g;
-  ctx.beginPath();
-  ctx.moveTo(300, 80);
-  ctx.bezierCurveTo(420, 80, 520, 180, 500, 300);
-  ctx.bezierCurveTo(480, 420, 380, 520, 260, 500);
-  ctx.bezierCurveTo(140, 480, 60, 380, 80, 260);
-  ctx.bezierCurveTo(100, 140, 180, 80, 300, 80);
-  ctx.fill();
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderRing(pct, accent = '#4338CA', size = 300) {
-  const c = createCanvas(size, size);
-  const ctx = c.getContext('2d');
-  const cx = size/2, cy = size/2, r = size*0.38, lw = size*0.09;
-  ctx.strokeStyle = 'rgba(255,255,255,0.05)';
-  ctx.lineWidth = lw; ctx.lineCap = 'round';
-  ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2); ctx.stroke();
-  const grad = ctx.createLinearGradient(0, 0, size, size);
-  grad.addColorStop(0, accent); grad.addColorStop(1, accent + 'AA');
-  ctx.strokeStyle = grad; ctx.lineWidth = lw; ctx.lineCap = 'round';
-  ctx.shadowColor = accent; ctx.shadowBlur = 12;
-  ctx.beginPath(); ctx.arc(cx, cy, r, -Math.PI/2, -Math.PI/2 + Math.PI*2*pct); ctx.stroke();
-  ctx.shadowBlur = 0;
-  ctx.fillStyle = '#fff'; ctx.font = `bold ${Math.round(size*0.18)}px Georgia`;
-  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-  ctx.fillText(Math.round(pct*100)+'%', cx, cy);
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderProgressArc(pct, accent = '#4338CA', size = 400) {
-  const c = createCanvas(size, size);
-  const ctx = c.getContext('2d');
-  const cx = size/2, cy = size/2, r = size*0.4, lw = size*0.08;
-  ctx.strokeStyle = 'rgba(255,255,255,0.04)';
-  ctx.lineWidth = lw; ctx.lineCap = 'round';
-  ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2); ctx.stroke();
-  const grad = ctx.createLinearGradient(0, 0, size, size);
-  grad.addColorStop(0, '#6366F1'); grad.addColorStop(1, accent);
-  ctx.strokeStyle = grad; ctx.lineWidth = lw; ctx.lineCap = 'round';
-  ctx.shadowColor = accent; ctx.shadowBlur = 16;
-  ctx.beginPath(); ctx.arc(cx, cy, r, -Math.PI/2, -Math.PI/2 + Math.PI*2*pct); ctx.stroke();
-  ctx.shadowBlur = 0;
-  ctx.fillStyle = '#fff'; ctx.font = `bold ${Math.round(size*0.16)}px Georgia`;
-  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-  ctx.fillText(Math.round(pct*100)+'%', cx, cy - size*0.02);
-  ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = `${Math.round(size*0.045)}px Arial`;
-  ctx.fillText('Quality Score', cx, cy + size*0.08);
-  ctx.fillStyle = '#6366F1'; ctx.font = `bold ${Math.round(size*0.035)}px Arial`;
-  ctx.fillText('HEALTHY', cx, cy + size*0.14);
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderSpline(accent = '#4338CA', w = 1200, h = 300) {
-  const c = createCanvas(w, h);
-  const ctx = c.getContext('2d');
-  ctx.strokeStyle = 'rgba(255,255,255,0.04)';
-  ctx.lineWidth = 1;
-  for (let y = 0; y < h; y += h/4) { ctx.beginPath(); ctx.moveTo(40, y); ctx.lineTo(w-20, y); ctx.stroke(); }
-  const grad = ctx.createLinearGradient(0, 0, 0, h);
-  grad.addColorStop(0, accent + '40'); grad.addColorStop(1, accent + '00');
-  ctx.fillStyle = grad;
-  ctx.beginPath();
-  ctx.moveTo(40, h*0.85);
-  ctx.bezierCurveTo(w*0.2, h*0.8, w*0.3, h*0.55, w*0.45, h*0.42);
-  ctx.bezierCurveTo(w*0.55, h*0.32, w*0.7, h*0.18, w*0.85, h*0.12);
-  ctx.lineTo(w*0.85, h); ctx.lineTo(40, h); ctx.closePath(); ctx.fill();
-  ctx.strokeStyle = '#6366F1'; ctx.lineWidth = 3; ctx.lineCap = 'round';
-  ctx.shadowColor = accent; ctx.shadowBlur = 8;
-  ctx.beginPath();
-  ctx.moveTo(40, h*0.85);
-  ctx.bezierCurveTo(w*0.2, h*0.8, w*0.3, h*0.55, w*0.45, h*0.42);
-  ctx.bezierCurveTo(w*0.55, h*0.32, w*0.7, h*0.18, w*0.85, h*0.12);
-  ctx.stroke();
-  ctx.shadowBlur = 0;
-  const points = [[40, h*0.85], [w*0.45, h*0.42], [w*0.85, h*0.12]];
-  points.forEach(([px, py]) => {
-    ctx.fillStyle = '#6366F1'; ctx.shadowColor = accent; ctx.shadowBlur = 10;
-    ctx.beginPath(); ctx.arc(px, py, 5, 0, Math.PI*2); ctx.fill();
-  });
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderRadar(accent = '#4338CA', size = 400) {
-  const c = createCanvas(size, size);
-  const ctx = c.getContext('2d');
-  const cx = size/2, cy = size/2;
-  const axes = 6;
-  const labels = ['Speed', 'Quality', 'Accuracy', 'Cost', 'Context', 'Multi-tool'];
-  const grooveData = [0.92, 0.9, 0.88, 0.85, 0.9, 0.95];
-  const altData = [0.6, 0.7, 0.65, 0.55, 0.5, 0.3];
-  function polyPoints(data, maxR) {
-    return data.map((v, i) => {
-      const angle = (i * Math.PI * 2 / axes) - Math.PI/2;
-      return [cx + maxR * v * Math.cos(angle), cy + maxR * v * Math.sin(angle)];
-    });
-  }
-  [0.33, 0.66, 1.0].forEach(scale => {
-    const r = size * 0.38 * scale;
-    ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1;
-    ctx.beginPath();
-    for (let i = 0; i <= axes; i++) {
-      const angle = (i * Math.PI * 2 / axes) - Math.PI/2;
-      const method = i === 0 ? 'moveTo' : 'lineTo';
-      ctx[method](cx + r * Math.cos(angle), cy + r * Math.sin(angle));
-    }
-    ctx.stroke();
-  });
-  for (let i = 0; i < axes; i++) {
-    const angle = (i * Math.PI * 2 / axes) - Math.PI/2;
-    ctx.strokeStyle = 'rgba(255,255,255,0.03)'; ctx.lineWidth = 1;
-    ctx.beginPath(); ctx.moveTo(cx, cy);
-    ctx.lineTo(cx + size*0.38 * Math.cos(angle), cy + size*0.38 * Math.sin(angle));
-    ctx.stroke();
-  }
-  const altPts = polyPoints(altData, size*0.38);
-  ctx.fillStyle = '#D9770614'; ctx.strokeStyle = '#D97706'; ctx.lineWidth = 1;
-  ctx.setLineDash([4, 4]); ctx.globalAlpha = 0.5;
-  ctx.beginPath(); altPts.forEach(([x, y], i) => i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y));
-  ctx.closePath(); ctx.fill(); ctx.stroke();
-  ctx.setLineDash([]); ctx.globalAlpha = 1;
-  const gPts = polyPoints(grooveData, size*0.38);
-  ctx.fillStyle = accent + '26'; ctx.strokeStyle = '#6366F1'; ctx.lineWidth = 2;
-  ctx.shadowColor = accent; ctx.shadowBlur = 8;
-  ctx.beginPath(); gPts.forEach(([x, y], i) => i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y));
-  ctx.closePath(); ctx.fill(); ctx.stroke();
-  ctx.shadowBlur = 0;
-  gPts.forEach(([x, y]) => {
-    ctx.fillStyle = '#6366F1'; ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI*2); ctx.fill();
-  });
-  ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = `${Math.round(size*0.028)}px Arial`;
-  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-  labels.forEach((label, i) => {
-    const angle = (i * Math.PI * 2 / axes) - Math.PI/2;
-    const lr = size * 0.48;
-    ctx.fillText(label, cx + lr * Math.cos(angle), cy + lr * Math.sin(angle));
-  });
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderHeatmap(heatData, accent = '#4338CA', w = 700, h = 350) {
-  const c = createCanvas(w, h);
-  const ctx = c.getContext('2d');
-  const { providers, features, matrix } = heatData;
-  const rowH = (h - 40) / features.length;
-  const colW = (w - 130) / providers.length;
-  ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.font = '11px Arial'; ctx.textAlign = 'center';
-  providers.forEach((p, i) => { ctx.fillText(p, 130 + i * colW + colW/2, 20); });
-  ctx.textAlign = 'right';
-  features.forEach((f, i) => {
-    ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.font = '11px Arial';
-    ctx.fillText(f, 120, 40 + i * rowH + rowH/2 + 4);
-    matrix[i].forEach((val, j) => {
-      const x = 130 + j * colW + 2;
-      const y = 40 + i * rowH + 2;
-      ctx.fillStyle = `rgba(67, 56, 202, ${val * 0.85})`;
-      ctx.fillRect(x, y, colW - 4, rowH - 4);
-      if (val >= 0.7) {
-        ctx.fillStyle = '#fff'; ctx.font = '14px Arial'; ctx.textAlign = 'center';
-        ctx.fillText('\u2713', x + (colW-4)/2, y + (rowH-4)/2 + 5);
-      } else if (val < 0.3 && val > 0) {
-        ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.font = '12px Arial'; ctx.textAlign = 'center';
-        ctx.fillText('\u2014', x + (colW-4)/2, y + (rowH-4)/2 + 4);
-      } else if (val === 0) {
-        ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.font = '12px Arial'; ctx.textAlign = 'center';
-        ctx.fillText('\u2717', x + (colW-4)/2, y + (rowH-4)/2 + 4);
-      }
-    });
-  });
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderConcentricRings(accent = '#4338CA', size = 500) {
-  const c = createCanvas(size, size);
-  const ctx = c.getContext('2d');
-  const cx = size/2, cy = size/2;
-  [{ r: size*0.42, o: 0.06, sw: 0.15 }, { r: size*0.28, o: 0.12, sw: 0.25 }, { r: size*0.13, o: 0.25, sw: 1 }].forEach(ring => {
-    ctx.fillStyle = accent + Math.round(ring.o * 255).toString(16).padStart(2, '0');
-    ctx.beginPath(); ctx.arc(cx, cy, ring.r, 0, Math.PI*2); ctx.fill();
-    ctx.strokeStyle = '#6366F1'; ctx.lineWidth = ring.sw; ctx.globalAlpha = ring.sw < 1 ? 0.2 : 0.5;
-    ctx.beginPath(); ctx.arc(cx, cy, ring.r, 0, Math.PI*2); ctx.stroke();
-    ctx.globalAlpha = 1;
-  });
-  ctx.shadowColor = accent; ctx.shadowBlur = 8;
-  ctx.fillStyle = '#fff'; ctx.font = `bold ${Math.round(size*0.06)}px Georgia`;
-  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-  ctx.fillText('$800M', cx, cy);
-  ctx.shadowBlur = 0;
-  ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.font = `${Math.round(size*0.042)}px Georgia`;
-  ctx.fillText('$8B', cx, cy - size*0.22);
-  ctx.fillStyle = 'rgba(255,255,255,0.4)';
-  ctx.fillText('$45B', cx, cy - size*0.38);
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderBeforeAfter(w = 800, h = 400) {
-  const c = createCanvas(w, h);
-  const ctx = c.getContext('2d');
-  const mid = w / 2;
-  ctx.strokeStyle = 'rgba(255,255,255,0.06)'; ctx.lineWidth = 1;
-  ctx.beginPath(); ctx.moveTo(mid, 0); ctx.lineTo(mid, h); ctx.stroke();
-  const chaosPoints = [];
-  for (let i = 0; i < 12; i++) {
-    chaosPoints.push([Math.random() * (mid - 40) + 20, Math.random() * (h - 40) + 20]);
-  }
-  chaosPoints.forEach(([x, y]) => {
-    ctx.fillStyle = `rgba(225, 29, 72, ${0.2 + Math.random() * 0.35})`;
-    ctx.beginPath(); ctx.arc(x, y, 3 + Math.random() * 5, 0, Math.PI*2); ctx.fill();
-  });
-  for (let i = 0; i < 6; i++) {
-    const [x1, y1] = chaosPoints[i*2];
-    const [x2, y2] = chaosPoints[i*2+1];
-    ctx.strokeStyle = 'rgba(225, 29, 72, 0.15)'; ctx.lineWidth = 0.5;
-    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
-  }
-  const nodes = [[mid+60, 50], [mid+180, 50], [mid+300, 50], [mid+120, 140], [mid+240, 140], [mid+180, 230]];
-  nodes.forEach(([x, y]) => {
-    ctx.strokeStyle = '#6366F1'; ctx.lineWidth = 1.5;
-    ctx.fillStyle = 'rgba(255,255,255,0.04)';
-    ctx.beginPath(); ctx.arc(x, y, 12, 0, Math.PI*2); ctx.fill(); ctx.stroke();
-  });
-  const connections = [[0,3],[1,3],[1,4],[2,4],[3,5],[4,5]];
-  connections.forEach(([a, b]) => {
-    ctx.strokeStyle = 'rgba(99, 102, 241, 0.35)'; ctx.lineWidth = 1;
-    ctx.beginPath(); ctx.moveTo(nodes[a][0], nodes[a][1]+12); ctx.lineTo(nodes[b][0], nodes[b][1]-12); ctx.stroke();
-  });
-  ctx.fillStyle = 'rgba(225, 29, 72, 0.7)'; ctx.font = 'bold 11px Arial'; ctx.textAlign = 'center';
-  ctx.fillText('HARNESSES', mid/2, h - 20);
-  ctx.fillStyle = 'rgba(99, 102, 241, 0.7)';
-  ctx.fillText('GROOVE', mid + (w-mid)/2, h - 20);
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderNodeGraph(accent = '#4338CA', w = 600, h = 400) {
-  const c = createCanvas(w, h);
-  const ctx = c.getContext('2d');
-  const nodes = [
-    { x: w*0.5, y: 30, r: 22, label: 'GROOVE', color: '#6366F1' },
-    { x: w*0.25, y: 130, r: 18, label: 'Claude', color: '#818CF8' },
-    { x: w*0.75, y: 130, r: 18, label: 'Codex', color: '#A78BFA' },
-    { x: w*0.15, y: 240, r: 15, label: 'Gemini', color: '#D97706' },
-    { x: w*0.5, y: 240, r: 15, label: 'Ollama', color: '#F59E0B' },
-    { x: w*0.85, y: 240, r: 15, label: 'Aider', color: '#818CF8' },
-    { x: w*0.5, y: 340, r: 20, label: 'GUI', color: '#FBBF24' },
-  ];
-  const edges = [[0,1],[0,2],[1,3],[1,4],[2,4],[2,5],[3,6],[4,6],[5,6]];
-  edges.forEach(([a, b]) => {
-    ctx.strokeStyle = nodes[a].color; ctx.lineWidth = 1.5; ctx.globalAlpha = 0.3;
-    ctx.beginPath();
-    ctx.moveTo(nodes[a].x, nodes[a].y + nodes[a].r);
-    const cpY = (nodes[a].y + nodes[b].y) / 2;
-    ctx.bezierCurveTo(nodes[a].x, cpY, nodes[b].x, cpY, nodes[b].x, nodes[b].y - nodes[b].r);
-    ctx.stroke(); ctx.globalAlpha = 1;
-  });
-  nodes.forEach(n => {
-    ctx.fillStyle = 'rgba(255,255,255,0.05)';
-    ctx.strokeStyle = n.color; ctx.lineWidth = 2;
-    ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI*2); ctx.fill(); ctx.stroke();
-    ctx.fillStyle = '#fff'; ctx.font = `bold ${n.r < 18 ? 8 : 9}px Arial`;
-    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-    ctx.fillText(n.label, n.x, n.y);
-  });
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-function renderBars(items, w = 500, h = 350) {
-  const c = createCanvas(w, h);
-  const ctx = c.getContext('2d');
-  const barH = 32;
-  const gap = 15;
-  const maxVal = Math.max(...items.map(i => parseFloat(i.value)));
-  const labelW = 80;
-  const barMaxW = w - labelW - 60;
-  items.forEach((item, i) => {
-    const y = 20 + i * (barH + gap);
-    const val = parseFloat(item.value);
-    const barW = (val / maxVal) * barMaxW;
-    const grad = ctx.createLinearGradient(labelW, 0, labelW + barW, 0);
-    const color = item.color || ACCENT_L;
-    grad.addColorStop(0, '#' + color + '1A');
-    grad.addColorStop(1, '#' + color + 'CC');
-    ctx.fillStyle = grad;
-    ctx.beginPath();
-    const radius = 3;
-    ctx.moveTo(labelW, y); ctx.lineTo(labelW + barW - radius, y);
-    ctx.arcTo(labelW + barW, y, labelW + barW, y + radius, radius);
-    ctx.lineTo(labelW + barW, y + barH - radius);
-    ctx.arcTo(labelW + barW, y + barH, labelW + barW - radius, y + barH, radius);
-    ctx.lineTo(labelW, y + barH); ctx.closePath(); ctx.fill();
-    ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = '11px Arial';
-    ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
-    ctx.fillText(item.label, labelW - 8, y + barH/2);
-    ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.font = 'bold 12px Georgia';
-    ctx.textAlign = 'left';
-    ctx.fillText(item.value, labelW + barW + 8, y + barH/2);
-  });
-  return 'image/png;base64,' + c.toBuffer('image/png').toString('base64');
-}
-
-// ═══════════════════════════════════════════════════════════
-// LAYOUT HELPERS
-// ═══════════════════════════════════════════════════════════
-
-function getBg(slideDef) {
-  const bgName = slideDef.background || 'steel';
-  const bg = meta.backgrounds[bgName] || meta.backgroundGradient;
-  return gradientBg(1920, 1080, bg.angle, bg.stops);
-}
-
-function slideWithBg(slideDef, category) {
-  const s = pres.addSlide();
-  s.background = { data: getBg(slideDef) };
-  s.addText(meta.brand, {
-    x: 0.6, y: 0.25, w: 3, h: 0.3,
-    fontSize: 11, fontFace: FONT_B, bold: true, color: 'F5F5F5', margin: 0
-  });
-  if (category) {
-    s.addText(category.toUpperCase(), {
-      x: 6.5, y: 0.25, w: 3, h: 0.3,
-      fontSize: 9, fontFace: FONT_B, bold: true,
-      color: '94A3B8', align: 'right', charSpacing: 5, margin: 0
-    });
-  }
-  return s;
-}
-
-function addDivider(slide, y, x = 0.6, w = 8.8) {
-  slide.addShape(pres.shapes.LINE, { x, y, w, h: 0, line: { color: 'FFFFFF', width: 0.5, transparency: 94 } });
-}
-
-function accentBorder(slide, x, y, h, color = ACCENT) {
-  slide.addShape(pres.shapes.LINE, { x, y, w: 0, h, line: { color, width: 3 } });
-}
-
-function colDivider(slide, x, y, h) {
-  slide.addShape(pres.shapes.LINE, { x, y, w: 0, h, line: { color: 'FFFFFF', width: 0.5, transparency: 88 } });
-}
-
-function columnLayout(cols, rows, area, gap = 0.4) {
-  const colW = (area.w - gap * (cols - 1)) / cols;
-  const rowH = (area.h - gap * (rows - 1)) / rows;
-  const positions = [];
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      positions.push({ x: area.x + c * (colW + gap), y: area.y + r * (rowH + gap), w: colW, h: rowH });
-    }
-  }
-  return positions;
-}
-
-// ═══════════════════════════════════════════════════════════
-// COLLISION DETECTION
-// ═══════════════════════════════════════════════════════════
-
-function checkCollisions(elements) {
-  const issues = [];
-  for (let i = 0; i < elements.length; i++) {
-    for (let j = i + 1; j < elements.length; j++) {
-      const a = elements[i], b = elements[j];
-      if (a.skipCollision || b.skipCollision) continue;
-      const overlapX = a.x < b.x + b.w && a.x + a.w > b.x;
-      const overlapY = a.y < b.y + b.h && a.y + a.h > b.y;
-      if (overlapX && overlapY) {
-        issues.push(`OVERLAP: "${a.name}" (y:${a.y.toFixed(2)}-${(a.y+a.h).toFixed(2)}) <-> "${b.name}" (y:${b.y.toFixed(2)}-${(b.y+b.h).toFixed(2)})`);
-      }
-    }
-  }
-  return issues;
-}
-
-function checkBounds(elements, { safeTop = 0.25, safeBot = 5.125 } = {}) {
-  const issues = [];
-  for (const el of elements) {
-    if (el.skipBounds) continue;
-    if (el.y + el.h > safeBot) issues.push(`BOTTOM-OVERFLOW: "${el.name}" ends at y=${(el.y + el.h).toFixed(2)} (safe bottom = ${safeBot})`);
-  }
-  return issues;
-}
-
-function checkTextWrap(elements, { slack = 1.3 } = {}) {
-  const issues = [];
-  for (const el of elements) {
-    if (!el.text || !el.fontSize) continue;
-    if (el.shrinkText) continue;
-    const needed = estimateTextHeight(el.text, el.fontSize, el.w, { bold: el.bold, margin: el.margin });
-    if (needed > el.h * slack) {
-      issues.push(`TEXT-WRAP: "${el.name}" needs ~${needed.toFixed(2)}" but got ${el.h.toFixed(2)}"`);
-    }
-  }
-  return issues;
-}
-
-function hardGate(allSlideElements) {
-  const issues = [];
-  for (const [slideName, elements] of allSlideElements) {
-    const slideIssues = [
-      ...checkCollisions(elements),
-      ...checkBounds(elements),
-      ...checkTextWrap(elements),
-    ];
-    for (const msg of slideIssues) issues.push(`[${slideName}] ${msg}`);
-  }
-  if (issues.length === 0) {
-    console.log(`\u2713 Layout gate passed \u2014 ${allSlideElements.length} slides, zero issues.`);
-    return;
-  }
-  console.error(`\u2717 Layout gate FAILED \u2014 ${issues.length} issue(s):\n`);
-  for (const msg of issues) console.error('  ' + msg);
-  console.error('\nFix the slide generators above. Never ship a deck with layout issues.');
-  process.exit(1);
-}
-
-// ═══════════════════════════════════════════════════════════
-// SLIDE RENDERERS
-// ═══════════════════════════════════════════════════════════
-
-function renderTitleSlide(d) {
-  const slide = pres.addSlide();
-  slide.background = { data: getBg(d) };
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = 0.8;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.4;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.9, text: d.title, fontSize: 52, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 1.0;
-
-  slide.addText(d.subtitle, track('subtitle', {
-    x: 0.6, y: Y, w: 5, h: 0.6, text: d.subtitle, fontSize: 20, shrinkText: true,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-  Y += 0.8;
-
-  addDivider(slide, Y, 0.6, 3.5);
-  Y += 0.25;
-
-  slide.addText(d.footer, track('footer', {
-    x: 0.6, y: Y, w: 3, h: 0.2, text: d.footer, fontSize: 11,
-    fontFace: FONT_B, color: '94A3B8', charSpacing: 3, margin: 0
-  }));
-
-  slide.addImage({ data: renderOrb('#' + ACCENT), x: 5.5, y: -0.5, w: 5.5, h: 5.5 });
-
-  return { name: 'title', elements: placed };
-}
-
-function renderProblemSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.85, text: d.title, fontSize: 38, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.95;
-
-  slide.addText(d.body, track('body', {
-    x: 0.6, y: Y, w: 5, h: 0.6, text: d.body, fontSize: 14,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-
-  d.painWords.forEach((pw, i) => {
-    slide.addText(pw.text, {
-      x: pw.x, y: pw.y, w: 2.5, h: 0.4,
-      fontSize: pw.size, fontFace: FONT_B, italic: true,
-      color: 'FFFFFF', transparency: pw.opacity, margin: 0
-    });
-    placed.push({ name: `pain-${i}`, x: pw.x, y: pw.y, w: 2.5, h: 0.4, skipCollision: true, skipBounds: true });
-  });
-
-  slide.addImage({ data: renderBlob('#' + ROSE), x: 6.5, y: 2.0, w: 4.5, h: 4.5 });
-
-  return { name: 'problem', elements: placed };
-}
-
-function renderTokenCrisisSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 34, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.85;
-
-  slide.addText(d.metrics[0].value, track('hero', {
-    x: 0.6, y: Y, w: 3.5, h: 0.85, text: d.metrics[0].value, fontSize: 72, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: AMBER, margin: 0
-  }));
-  Y += 0.85;
-
-  slide.addText(d.metrics[0].label, track('hero-label', {
-    x: 0.6, y: Y, w: 3.5, h: 0.25, text: d.metrics[0].label, fontSize: 16, bold: true,
-    fontFace: FONT_B, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.25;
-
-  slide.addText(d.metrics[0].sublabel, track('hero-sub', {
-    x: 0.6, y: Y, w: 3.5, h: 0.2, text: d.metrics[0].sublabel, fontSize: 12,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-
-  const barItems = [
-    { value: '500', label: 'Pro Cost', color: AMBER },
-    { value: '20', label: 'Pro Pays', color: ACCENT_L },
-    { value: '5000', label: 'Max Cost', color: AMBER },
-    { value: '200', label: 'Max Pays', color: ACCENT_L },
-  ];
-  slide.addImage({ data: renderBars(barItems, 500, 280), x: 5.0, y: 1.5, w: 4.5, h: 3.2 });
-  placed.push({ name: 'bars-visual', x: 5.0, y: 1.5, w: 4.5, h: 3.2, skipCollision: true });
-
-  return { name: 'token-crisis', elements: placed };
-}
-
-function renderSolutionSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5, h: 0.7, text: d.title, fontSize: 32, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.8;
-
-  d.layers.forEach((layer, i) => {
-    const layerY = Y + i * 0.42;
-    accentBorder(slide, 0.6, layerY, 0.32, layer.color);
-    slide.addText([
-      { text: layer.num + '  ', options: { fontSize: 10, color: layer.color, bold: true, charSpacing: 3 } },
-      { text: layer.name + '  ', options: { fontSize: 12, color: 'F5F5F5', bold: true } },
-      { text: layer.desc, options: { fontSize: 10, color: '94A3B8' } },
-    ], track(`layer-${i}`, {
-      x: 0.8, y: layerY, w: 4.3, h: 0.32, text: `${layer.num} ${layer.name} ${layer.desc}`, fontSize: 11,
-      fontFace: FONT_B, margin: 0
-    }));
-  });
-
-  slide.addImage({ data: renderNodeGraph('#' + ACCENT), x: 5.3, y: 1.0, w: 4.5, h: 4.0 });
-  placed.push({ name: 'node-graph', x: 5.3, y: 1.0, w: 4.5, h: 4.0, skipCollision: true });
-
-  return { name: 'solution', elements: placed };
-}
-
-function renderJournalistSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 34, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.8;
-
-  slide.addText(d.body, track('body', {
-    x: 0.6, y: Y, w: 5, h: 0.5, text: d.body, fontSize: 13, shrinkText: true,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-  Y += 0.6;
-
-  const splineH = Math.min(2.2, LAYOUT.SAFE_BOT - Y - 0.1);
-  slide.addImage({ data: renderSpline('#' + ACCENT), x: 0.3, y: Y, w: 9.4, h: splineH });
-  placed.push({ name: 'spline', x: 0.3, y: Y, w: 9.4, h: splineH });
-
-  return { name: 'journalist', elements: placed };
-}
-
-function renderRotationSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5, h: 0.7, text: d.title, fontSize: 36, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.8;
-
-  slide.addText(d.body, track('body', {
-    x: 0.6, y: Y, w: 4.5, h: 0.65, text: d.body, fontSize: 13, shrinkText: true,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-  Y += 0.75;
-
-  d.features.forEach((feat, i) => {
-    const fy = Y + i * 0.6;
-    accentBorder(slide, 0.6, fy, 0.45, feat.color);
-    slide.addText(feat.title, track(`feat-title-${i}`, {
-      x: 0.8, y: fy, w: 4, h: 0.22, text: feat.title, fontSize: 13, bold: true,
-      fontFace: FONT_B, color: 'F5F5F5', margin: 0
-    }));
-    slide.addText(feat.desc, track(`feat-desc-${i}`, {
-      x: 0.8, y: fy + 0.22, w: 4, h: 0.22, text: feat.desc, fontSize: 11, shrinkText: true,
-      fontFace: FONT_B, color: '94A3B8', margin: 0
-    }));
-  });
-
-  slide.addImage({ data: renderProgressArc(d.arcValue, '#' + ACCENT), x: 5.8, y: 1.0, w: 3.5, h: 3.5 });
-  placed.push({ name: 'progress-arc', x: 5.8, y: 1.0, w: 3.5, h: 3.5, skipCollision: true });
-
-  return { name: 'rotation', elements: placed };
-}
-
-function renderRoutingSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5, h: 0.7, text: d.title, fontSize: 32, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.8;
-
-  d.tiers.forEach((tier, i) => {
-    const ty = Y + i * 0.8;
-    slide.addText([
-      { text: tier.level + '  ', options: { fontSize: 11, color: tier.color, bold: true, charSpacing: 3 } },
-      { text: tier.model, options: { fontSize: 18, color: 'F5F5F5', bold: true } },
-    ], track(`tier-name-${i}`, {
-      x: 0.6, y: ty, w: 4.5, h: 0.3, text: `${tier.level} ${tier.model}`, fontSize: 15,
-      fontFace: FONT_B, margin: 0
-    }));
-    slide.addText(tier.desc, track(`tier-desc-${i}`, {
-      x: 0.6, y: ty + 0.3, w: 4.5, h: 0.18, text: tier.desc, fontSize: 11,
-      fontFace: FONT_B, color: '94A3B8', margin: 0
-    }));
-    slide.addText(tier.cost, track(`tier-cost-${i}`, {
-      x: 0.6, y: ty + 0.48, w: 4.5, h: 0.18, text: tier.cost, fontSize: 11,
-      fontFace: FONT_B, color: AMBER, margin: 0
-    }));
-    if (i < d.tiers.length - 1) addDivider(slide, ty + 0.7, 0.6, 4.5);
-  });
-
-  slide.addImage({ data: renderRadar('#' + ACCENT), x: 5.5, y: 1.0, w: 4.0, h: 4.0 });
-  placed.push({ name: 'radar', x: 5.5, y: 1.0, w: 4.0, h: 4.0, skipCollision: true });
-
-  return { name: 'routing', elements: placed };
-}
-
-function renderTokenEconomicsSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 34, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.9;
-
-  const remainH = LAYOUT.SAFE_BOT - Y - 0.1;
-  const cols = columnLayout(2, 1, { x: 0.6, y: Y, w: 8.8, h: remainH }, 0.6);
-  const ringColors = ['#' + ACCENT, '#' + AMBER];
-
-  d.metrics.forEach((m, i) => {
-    const pos = cols[i];
-    if (i > 0) colDivider(slide, pos.x - 0.3, pos.y, pos.h);
-
-    slide.addText(m.value, track(`hero-${i}`, {
-      x: pos.x, y: pos.y, w: pos.w, h: 0.8, text: m.value, fontSize: 64, bold: true, shrinkText: true,
-      fontFace: FONT_H, color: i === 0 ? ACCENT_L : AMBER, margin: 0
-    }));
-    slide.addText(m.label, track(`unit-${i}`, {
-      x: pos.x, y: pos.y + 0.8, w: pos.w, h: 0.28, text: m.label, fontSize: 15, bold: true,
-      fontFace: FONT_B, color: 'F5F5F5', margin: 0
-    }));
-    const ringY = pos.y + 1.2;
-    const ringH = Math.min(1.4, pos.y + pos.h - ringY);
-    slide.addImage({
-      data: renderRing(m.ringPercent, ringColors[i]),
-      x: pos.x + 0.6, y: ringY, w: ringH, h: ringH
-    });
-    placed.push({ name: `ring-${i}`, x: pos.x + 0.6, y: ringY, w: ringH, h: ringH });
-  });
-
-  return { name: 'token-economics', elements: placed };
-}
-
-function renderProviderSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 32, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.75;
-
-  slide.addText(d.body, track('body', {
-    x: 0.6, y: Y, w: 5, h: 0.35, text: d.body, fontSize: 12, shrinkText: true,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-  Y += 0.45;
-
-  const heatH = LAYOUT.SAFE_BOT - Y;
-  slide.addImage({
-    data: renderHeatmap(d.heatmapData, '#' + ACCENT),
-    x: 0.4, y: Y, w: 9.2, h: heatH
-  });
-  placed.push({ name: 'heatmap', x: 0.4, y: Y, w: 9.2, h: heatH });
-
-  return { name: 'providers', elements: placed };
-}
-
-function renderMarketSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5, h: 0.7, text: d.title, fontSize: 34, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.85;
-
-  const markets = [
-    { label: 'TAM', ...d.tam, color: '94A3B8' },
-    { label: 'SAM', ...d.sam, color: ACCENT_L },
-    { label: 'SOM', ...d.som, color: AMBER },
-  ];
-  markets.forEach((m, i) => {
-    const my = Y + i * 0.78;
-    slide.addText(m.label, track(`market-label-${i}`, {
-      x: 0.6, y: my, w: 4, h: 0.18, text: m.label, fontSize: 11, bold: true,
-      fontFace: FONT_B, color: '94A3B8', charSpacing: 4, margin: 0
-    }));
-    slide.addText(m.value, track(`market-val-${i}`, {
-      x: 0.6, y: my + 0.18, w: 4, h: 0.32, text: m.value, fontSize: 26, bold: true, shrinkText: true,
-      fontFace: FONT_H, color: m.color, margin: 0
-    }));
-    slide.addText(m.label_text || m.label, track(`market-desc-${i}`, {
-      x: 0.6, y: my + 0.5, w: 4, h: 0.18, text: m.label, fontSize: 11,
-      fontFace: FONT_B, color: '94A3B8', margin: 0
-    }));
-    if (i < markets.length - 1) addDivider(slide, my + 0.72, 0.6, 3.5);
-  });
-
-  slide.addImage({ data: renderConcentricRings('#' + ACCENT), x: 5.2, y: 0.8, w: 4.2, h: 4.2 });
-  placed.push({ name: 'concentric', x: 5.2, y: 0.8, w: 4.2, h: 4.2, skipCollision: true, skipBounds: true });
-
-  return { name: 'market', elements: placed };
-}
-
-function renderMoatSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 32, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.8;
-
-  const vizH = Math.min(2.4, LAYOUT.SAFE_BOT - Y - 0.45);
-  slide.addImage({ data: renderBeforeAfter(), x: 0.6, y: Y, w: 8.8, h: vizH });
-  placed.push({ name: 'before-after', x: 0.6, y: Y, w: 8.8, h: vizH });
-
-  const leftTextY = Y + vizH + 0.1;
-  slide.addText(d.leftPanel.points.join('  |  '), track('left-points', {
-    x: 0.6, y: leftTextY, w: 4.2, h: 0.25, text: d.leftPanel.points.join('  |  '), fontSize: 9,
-    fontFace: FONT_B, color: ROSE, margin: 0
-  }));
-  slide.addText(d.rightPanel.points.join('  |  '), track('right-points', {
-    x: 5.2, y: leftTextY, w: 4.2, h: 0.25, text: d.rightPanel.points.join('  |  '), fontSize: 9,
-    fontFace: FONT_B, color: ACCENT_L, margin: 0
-  }));
-
-  return { name: 'moat', elements: placed };
-}
-
-function renderProductSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 32, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.85;
-
-  const metricSpacing = Math.min(0.7, (LAYOUT.SAFE_BOT - Y) / d.metrics.length);
-  d.metrics.forEach((m, i) => {
-    const my = Y + i * metricSpacing;
-    accentBorder(slide, 0.6, my, metricSpacing - 0.1, m.color);
-    slide.addText(m.value, track(`prod-val-${i}`, {
-      x: 0.85, y: my, w: 3, h: 0.35, text: m.value, fontSize: 28, bold: true, shrinkText: true,
-      fontFace: FONT_H, color: m.color, margin: 0
-    }));
-    slide.addText(m.label, track(`prod-label-${i}`, {
-      x: 0.85, y: my + 0.35, w: 3, h: 0.2, text: m.label, fontSize: 11,
-      fontFace: FONT_B, color: '94A3B8', margin: 0
-    }));
-  });
-
-  const barItems = d.metrics.map(m => ({ value: m.value.replace('+', ''), label: m.label.split(' ')[0], color: m.color }));
-  slide.addImage({ data: renderBars(barItems), x: 5.0, y: 1.5, w: 4.5, h: 3.2 });
-  placed.push({ name: 'bars', x: 5.0, y: 1.5, w: 4.5, h: 3.2, skipCollision: true });
-
-  return { name: 'product', elements: placed };
-}
-
-function renderPricingSlide(d) {
-  const slide = slideWithBg(d, d.category);
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = LAYOUT.CONTENT_START;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5.5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.3;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.7, text: d.title, fontSize: 32, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.8;
-
-  const tierH = LAYOUT.SAFE_BOT - Y - 0.4;
-  const cols = columnLayout(d.tiers.length, 1, { x: 0.6, y: Y, w: 8.8, h: tierH }, 0.3);
-  d.tiers.forEach((tier, i) => {
-    const pos = cols[i];
-    if (tier.highlighted) {
-      slide.addShape(pres.shapes.RECTANGLE, {
-        x: pos.x - 0.1, y: pos.y - 0.1, w: pos.w + 0.2, h: pos.h + 0.2,
-        fill: { color: 'FFFFFF', transparency: 96 }
-      });
-    }
-    if (i > 0) colDivider(slide, pos.x - 0.15, pos.y, pos.h);
-
-    let innerY = pos.y;
-    slide.addText(tier.name, track(`tier-name-${i}`, {
-      x: pos.x, y: innerY, w: pos.w, h: 0.22, text: tier.name, fontSize: 13, bold: true,
-      fontFace: FONT_B, color: tier.highlighted ? ACCENT_L : 'F5F5F5', margin: 0
-    }));
-    innerY += 0.25;
-
-    slide.addText(tier.price, track(`tier-price-${i}`, {
-      x: pos.x, y: innerY, w: pos.w, h: 0.45, text: tier.price, fontSize: 32, bold: true, shrinkText: true,
-      fontFace: FONT_H, color: tier.highlighted ? ACCENT_L : 'F5F5F5', margin: 0
-    }));
-    innerY += 0.5;
-
-    addDivider(slide, innerY, pos.x, pos.w);
-    innerY += 0.12;
-
-    const featuresH = (pos.y + pos.h) - innerY;
-    const featureText = tier.features.map(f => ({
-      text: f, options: { bullet: true, breakLine: true, fontSize: 10, color: '94A3B8' }
-    }));
-    slide.addText(featureText, {
-      x: pos.x, y: innerY, w: pos.w, h: featuresH,
-      fontFace: FONT_B, margin: 0, valign: 'top'
-    });
-    placed.push({ name: `tier-feats-${i}`, x: pos.x, y: innerY, w: pos.w, h: featuresH });
-  });
-
-  const quoteY = LAYOUT.SAFE_BOT - 0.3;
-  if (d.quote) {
-    slide.addText(d.quote, track('quote', {
-      x: 0.6, y: quoteY, w: 8.8, h: 0.25, text: d.quote, fontSize: 11, italic: true,
-      fontFace: FONT_H, color: '94A3B8', margin: 0
-    }));
-  }
-
-  return { name: 'pricing', elements: placed };
-}
-
-function renderCtaSlide(d) {
-  const slide = pres.addSlide();
-  slide.background = { data: getBg(d) };
-  const placed = [];
-  const track = (name, opts) => { placed.push({ name, ...opts }); return opts; };
-
-  let Y = 0.8;
-  slide.addText(d.label.toUpperCase(), track('label', {
-    x: 0.6, y: Y, w: 5, h: 0.2, text: d.label, fontSize: 11, bold: true,
-    fontFace: FONT_B, color: ACCENT_L, charSpacing: 5, margin: 0
-  }));
-  Y += 0.35;
-
-  slide.addText(d.title, track('title', {
-    x: 0.6, y: Y, w: 5.5, h: 0.9, text: d.title, fontSize: 44, bold: true, shrinkText: true,
-    fontFace: FONT_H, color: 'F5F5F5', margin: 0
-  }));
-  Y += 1.0;
-
-  slide.addText(d.subtitle, track('subtitle', {
-    x: 0.6, y: Y, w: 4.5, h: 0.7, text: d.subtitle, fontSize: 15, shrinkText: true,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-  Y += 0.85;
-
-  addDivider(slide, Y, 0.6, 3.5);
-  Y += 0.25;
-
-  slide.addText(d.contact.email, track('email', {
-    x: 0.6, y: Y, w: 3, h: 0.2, text: d.contact.email, fontSize: 13, bold: true,
-    fontFace: FONT_B, color: 'F5F5F5', margin: 0
-  }));
-  Y += 0.22;
-  slide.addText(d.contact.website, track('website', {
-    x: 0.6, y: Y, w: 3, h: 0.18, text: d.contact.website, fontSize: 11,
-    fontFace: FONT_B, color: '94A3B8', margin: 0
-  }));
-
-  slide.addImage({ data: renderOrb('#' + ACCENT), x: 5.5, y: -0.5, w: 5.5, h: 5.5 });
-
-  return { name: 'cta', elements: placed };
-}
-
-// ═══════════════════════════════════════════════════════════
-// BUILD DECK
-// ═══════════════════════════════════════════════════════════
-
-const allSlides = [];
-
-allSlides.push(renderTitleSlide(slides[0]));
-allSlides.push(renderProblemSlide(slides[1]));
-allSlides.push(renderTokenCrisisSlide(slides[2]));
-allSlides.push(renderSolutionSlide(slides[3]));
-allSlides.push(renderJournalistSlide(slides[4]));
-allSlides.push(renderRotationSlide(slides[5]));
-allSlides.push(renderRoutingSlide(slides[6]));
-allSlides.push(renderTokenEconomicsSlide(slides[7]));
-allSlides.push(renderProviderSlide(slides[8]));
-allSlides.push(renderMarketSlide(slides[9]));
-allSlides.push(renderMoatSlide(slides[10]));
-allSlides.push(renderProductSlide(slides[11]));
-allSlides.push(renderPricingSlide(slides[12]));
-allSlides.push(renderCtaSlide(slides[13]));
-
-hardGate(allSlides.map(s => [s.name, s.elements]));
-
-pres.writeFile({ fileName: 'deck.pptx' }).then(() => {
-  console.log('deck.pptx ready.');
-});