stagecraft 0.1.0

package/src/components/line-chart.js

@@ -0,0 +1,215 @@
+'use strict';
+
+/**
+ * Stage.LineChart — SVG line chart with optional area fill.
+ *
+ * Usage:
+ *   Stage.register(Stage.LineChart({
+ *     section: 5,
+ *     title: '05 · adoption curve',
+ *     series: [
+ *       { label: 'Q1', color: 'accent', points: [10, 15, 22, 36, 51, 70] },
+ *       { label: 'Q2', color: 'blue',   points: [ 8, 12, 18, 24, 35, 48] }
+ *     ],
+ *     xLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+ *     yMax: 80,                              // optional, defaults to max+10%
+ *     area: true,                            // optional, fills below line
+ *     reveal: 'animated'                     // 'animated' | 'instant'
+ *   }));
+ *
+ * On init each line draws from left to right using stroke-dasharray.
+ *
+ * Edit paths: series[i].label, xLabels[i]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  const COLOR_MAP = {
+    accent: 'var(--accent)',
+    amber:  'var(--amber)',
+    blue:   'var(--blue)',
+    red:    'var(--red)',
+    dim:    'var(--dim)',
+    fg:     'var(--fg)'
+  };
+
+  function colorFor(name, idx) {
+    if (COLOR_MAP[name]) return COLOR_MAP[name];
+    const cycle = ['var(--accent)', 'var(--blue)', 'var(--amber)', 'var(--red)', 'var(--dim)'];
+    return cycle[idx % cycle.length];
+  }
+
+  // viewBox geometry
+  const VB_W = 800;
+  const VB_H = 400;
+  const PAD_L = 50;
+  const PAD_R = 20;
+  const PAD_T = 20;
+  const PAD_B = 40;
+  const PLOT_W = VB_W - PAD_L - PAD_R;
+  const PLOT_H = VB_H - PAD_T - PAD_B;
+
+  Stage.LineChart = function (opts) {
+    const series = opts.series || [];
+    const xLabels = opts.xLabels || [];
+    const reveal = opts.reveal || 'animated';
+    const area = !!opts.area;
+
+    // Find global max
+    let allMax = 0;
+    series.forEach(s => (s.points || []).forEach(p => { if (Number(p) > allMax) allMax = Number(p); }));
+    const yMax = Number(opts.yMax) > 0 ? Number(opts.yMax) : (allMax > 0 ? allMax * 1.1 : 1);
+
+    // Use the longest series for x grid
+    const maxLen = series.reduce((m, s) => Math.max(m, (s.points || []).length), 0);
+
+    function xAt(i, n) {
+      if (n <= 1) return PAD_L + PLOT_W / 2;
+      return PAD_L + (i / (n - 1)) * PLOT_W;
+    }
+    function yAt(v) {
+      return PAD_T + PLOT_H - (v / yMax) * PLOT_H;
+    }
+
+    function pathFor(points) {
+      if (!points.length) return '';
+      const n = points.length;
+      return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAt(i, n).toFixed(2)} ${yAt(Number(p) || 0).toFixed(2)}`).join(' ');
+    }
+    function areaFor(points) {
+      if (!points.length) return '';
+      const n = points.length;
+      const top = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAt(i, n).toFixed(2)} ${yAt(Number(p) || 0).toFixed(2)}`).join(' ');
+      const right = `L ${xAt(n - 1, n).toFixed(2)} ${(PAD_T + PLOT_H).toFixed(2)}`;
+      const left = `L ${xAt(0, n).toFixed(2)} ${(PAD_T + PLOT_H).toFixed(2)} Z`;
+      return `${top} ${right} ${left}`;
+    }
+
+    // y-axis ticks: 4 evenly spaced labels
+    const yTicks = [0, 0.25, 0.5, 0.75, 1].map(t => ({
+      y: PAD_T + PLOT_H - t * PLOT_H,
+      label: formatNum(yMax * t)
+    }));
+
+    function formatNum(v) {
+      if (v >= 1000) return (v / 1000).toFixed(v >= 10000 ? 0 : 1) + 'k';
+      return Number.isInteger(v) ? String(v) : v.toFixed(1);
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const gridLines = yTicks.map(t => `
+          <line class="lc-grid" x1="${PAD_L}" x2="${VB_W - PAD_R}" y1="${t.y}" y2="${t.y}"/>
+          <text class="lc-y-label" x="${PAD_L - 8}" y="${t.y + 4}" text-anchor="end">${escape(t.label)}</text>
+        `).join('');
+
+        const xTicks = xLabels.slice(0, maxLen).map((lbl, i) => `
+          <text class="lc-x-label"
+                data-stage-edit="xLabels[${i}]"
+                x="${xAt(i, maxLen).toFixed(2)}"
+                y="${(VB_H - PAD_B + 22).toFixed(2)}"
+                text-anchor="middle">${escape(lbl)}</text>
+        `).join('');
+
+        const seriesSvg = series.map((s, i) => {
+          const points = s.points || [];
+          const stroke = colorFor(s.color, i);
+          const d = pathFor(points);
+          const aPath = area ? areaFor(points) : '';
+          return `
+            <g class="lc-series" data-i="${i}" data-stage-key="LineChart/series[${i}]">
+              ${area ? `<path class="lc-area" data-i="${i}" d="${aPath}" fill="${stroke}" fill-opacity="0.12"/>` : ''}
+              <path class="lc-line" data-i="${i}" d="${d}" stroke="${stroke}"/>
+              ${points.map((p, j) => `
+                <circle class="lc-dot" data-i="${i}" data-j="${j}"
+                        cx="${xAt(j, points.length).toFixed(2)}"
+                        cy="${yAt(Number(p) || 0).toFixed(2)}"
+                        r="3" fill="${stroke}"/>
+              `).join('')}
+            </g>
+          `;
+        }).join('');
+
+        const legend = series.map((s, i) => `
+          <div class="lc-leg-row" data-stage-key="LineChart/legend[${i}]">
+            <span class="lc-dot-leg" style="--lc-color: ${colorFor(s.color, i)};"></span>
+            <span class="lc-leg-label" data-stage-edit="series[${i}].label">${escape(s.label || '')}</span>
+          </div>
+        `).join('');
+
+        el.innerHTML = `
+          <div class="linechart" data-stage-key="LineChart">
+            <div class="lc-svg-wrap">
+              <svg class="lc-svg" viewBox="0 0 ${VB_W} ${VB_H}" preserveAspectRatio="xMidYMid meet">
+                ${gridLines}
+                ${xTicks}
+                ${seriesSvg}
+              </svg>
+            </div>
+            ${series.length > 1 ? `<div class="lc-legend">${legend}</div>` : ''}
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.lc-line').forEach(line => {
+            line.style.strokeDasharray = 'none';
+            line.style.strokeDashoffset = '0';
+          });
+          el.querySelectorAll('.lc-dot').forEach(d => d.classList.add('in'));
+          el.querySelectorAll('.lc-area').forEach(a => a.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'animated') {
+      slide.init = function (el) {
+        const lines = Array.from(el.querySelectorAll('.lc-line'));
+        const areas = Array.from(el.querySelectorAll('.lc-area'));
+        const dots = Array.from(el.querySelectorAll('.lc-dot'));
+        const timers = [];
+
+        lines.forEach((line, idx) => {
+          const length = line.getTotalLength ? line.getTotalLength() : 1000;
+          line.style.strokeDasharray = `${length}`;
+          line.style.strokeDashoffset = `${length}`;
+          // Force reflow
+          // eslint-disable-next-line no-unused-expressions
+          line.getBoundingClientRect();
+          timers.push(setTimeout(() => {
+            line.style.transition = 'stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1)';
+            line.style.strokeDashoffset = '0';
+          }, 100 + idx * 200));
+        });
+        areas.forEach((a, idx) => {
+          timers.push(setTimeout(() => a.classList.add('in'), 800 + idx * 200));
+        });
+        dots.forEach((d, idx) => {
+          timers.push(setTimeout(() => d.classList.add('in'), 800 + idx * 60));
+        });
+
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.lc-line').forEach(line => {
+          line.style.transition = 'none';
+          const length = line.getTotalLength ? line.getTotalLength() : 1000;
+          line.style.strokeDasharray = `${length}`;
+          line.style.strokeDashoffset = `${length}`;
+        });
+        el.querySelectorAll('.lc-dot').forEach(d => d.classList.remove('in'));
+        el.querySelectorAll('.lc-area').forEach(a => a.classList.remove('in'));
+        return this.init(el);
+      };
+    }
+
+    return slide;
+  };
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/manifesto.js

@@ -0,0 +1,104 @@
+'use strict';
+
+/**
+ * Stage.Manifesto — numbered list of "We believe..." declarations.
+ *
+ * Usage:
+ *   Stage.register(Stage.Manifesto({
+ *     section: 3,
+ *     title: '03 · What we believe',
+ *     intro: 'A working manifesto, revised quarterly.',
+ *     declarations: [
+ *       { text: 'Taste is the scarce part.',     emphasis: ['scarce'] },
+ *       { text: 'Speed without review is debt.', emphasis: ['debt'] },
+ *       { text: 'The model is a colleague, not an oracle.', emphasis: ['colleague','oracle'] }
+ *     ],
+ *     reveal: 'staggered'   // 'staggered' | 'per-click' | 'instant'
+ *   }));
+ *
+ * Edit paths:
+ *   intro / declarations[i].text
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Manifesto = function (opts) {
+    const declarations = opts.declarations || [];
+    const intro = opts.intro || '';
+    const reveal = opts.reveal || 'staggered';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="manifesto" data-stage-key="Manifesto">
+            ${intro ? `<div class="mf-intro" data-stage-edit="intro" data-stage-key="Manifesto/intro">${escape(intro)}</div>` : ''}
+            <ol class="mf-list">
+              ${declarations.map((d, i) => `
+                <li class="mf-item" data-step="${i + 1}" data-stage-key="Manifesto/decl[${i}]">
+                  <span class="mf-num" aria-hidden="true">${String(i + 1).padStart(2, '0')}</span>
+                  <span class="mf-text" data-stage-edit="declarations[${i}].text" data-stage-key="Manifesto/decl[${i}]/text">${emphasizeHTML(d.text || '', d.emphasis || [])}</span>
+                </li>
+              `).join('')}
+            </ol>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.mf-item, .mf-intro').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const intro = el.querySelector('.mf-intro');
+        const timers = [];
+        if (intro) timers.push(setTimeout(() => intro.classList.add('in'), 100));
+        const items = el.querySelectorAll('.mf-item');
+        items.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 400 + i * 220));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.mf-item, .mf-intro').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = declarations.length;
+      slide.init = function (el) {
+        const intro = el.querySelector('.mf-intro');
+        if (intro) setTimeout(() => intro.classList.add('in'), 100);
+      };
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.mf-item').forEach(n => {
+          n.classList.toggle('in', Number(n.dataset.step) <= step);
+        });
+      };
+    }
+
+    return slide;
+  };
+
+  function emphasizeHTML(raw, emphasis) {
+    let html = escape(raw);
+    const sorted = [...emphasis].filter(Boolean).sort((a, b) => b.length - a.length);
+    for (const phrase of sorted) {
+      const esc = escape(phrase);
+      const re = new RegExp(escapeRegex(esc), 'g');
+      html = html.replace(re, `<span class="mf-em">${esc}</span>`);
+    }
+    return html;
+  }
+
+  function escapeRegex(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/marquee.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/**
+ * Stage.Marquee — horizontal scrolling text strip (stock-ticker style).
+ *
+ * Usage:
+ *   Stage.register(Stage.Marquee({
+ *     section: 8,
+ *     title: '08 · Headlines',
+ *     items: ['ship faster', 'review harder', 'measure everything', 'sleep sometimes'],
+ *     direction: 'left',   // 'left' | 'right'
+ *     speed: 'medium',     // 'slow' | 'medium' | 'fast'
+ *     double: true         // optional second track in opposite direction
+ *   }));
+ *
+ * Pauses on hover. Pure CSS animation.
+ *
+ * Edit paths:
+ *   items[i]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Marquee = function (opts) {
+    const items = Array.isArray(opts.items) ? opts.items : [];
+    const direction = opts.direction === 'right' ? 'right' : 'left';
+    const speed = ['slow', 'medium', 'fast'].includes(opts.speed) ? opts.speed : 'medium';
+    const double = !!opts.double;
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.classList.add('marquee-host');
+        el.innerHTML = `
+          <div class="marquee mq--${escape(speed)} mq--${escape(direction)}" data-stage-key="Marquee">
+            ${renderTrack(items, 'a')}
+            ${double ? renderTrack(items, 'b', true) : ''}
+          </div>
+        `;
+      }
+    };
+  };
+
+  function renderTrack(items, key, reverse) {
+    // Duplicate items so we can loop translateX 0 → -50% seamlessly.
+    const track = items.map((it, i) => `
+      <span class="mq-item" data-stage-edit="items[${i}]" data-stage-key="Marquee/item[${i}]">${escape(it)}</span>
+      <span class="mq-sep" aria-hidden="true">·</span>
+    `).join('');
+    return `
+      <div class="mq-track mq-track--${key} ${reverse ? 'mq-track--rev' : ''}" aria-hidden="${key === 'b' ? 'true' : 'false'}">
+        <div class="mq-row">${track}${track}</div>
+      </div>
+    `;
+  }
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/matrix2x2.js

@@ -0,0 +1,151 @@
+'use strict';
+
+/**
+ * Stage.Matrix2x2 — classic 2x2 decision/priority matrix
+ * (e.g. Eisenhower, Effort/Impact, Importance/Urgency).
+ *
+ * Usage:
+ *   Stage.register(Stage.Matrix2x2({
+ *     section: 5,
+ *     title: '05 · prioritize',
+ *     axes: {
+ *       x: { label: 'effort',    low: 'low',  high: 'high' },
+ *       y: { label: 'impact',    low: 'low',  high: 'high' }
+ *     },
+ *     quadrants: [
+ *       { x: 'low',  y: 'high', label: 'Quick wins',   body: 'do these first',  color: 'accent' },
+ *       { x: 'high', y: 'high', label: 'Big bets',     body: 'plan carefully',  color: 'blue' },
+ *       { x: 'low',  y: 'low',  label: 'Fill-ins',     body: 'spare cycles' },
+ *       { x: 'high', y: 'low',  label: 'Money pit',    body: 'avoid',           color: 'red' }
+ *     ],
+ *     reveal: 'staggered'   // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Layer-3 (inline edit):
+ *   axes.x.label, axes.x.low, axes.x.high
+ *   axes.y.label, axes.y.low, axes.y.high
+ *   quadrants[i].label, quadrants[i].body
+ *
+ * Per-click: each click highlights one more quadrant (in array order).
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  const COLOR_MAP = {
+    accent: 'var(--accent)',
+    amber:  'var(--amber)',
+    blue:   'var(--blue)',
+    red:    'var(--red)',
+    dim:    'var(--dim)',
+    fg:     'var(--fg)'
+  };
+
+  Stage.Matrix2x2 = function (opts) {
+    const axes = opts.axes || { x: {}, y: {} };
+    const xAxis = axes.x || {};
+    const yAxis = axes.y || {};
+    const quadrants = (opts.quadrants || []).slice(0, 4);
+    const reveal = opts.reveal || 'instant';
+
+    // Build a 2x2 grid lookup keyed by `${yPos}-${xPos}`. Render order is
+    // top-left, top-right, bottom-left, bottom-right (CSS grid order).
+    const cellOrder = [
+      { x: 'low',  y: 'high' },
+      { x: 'high', y: 'high' },
+      { x: 'low',  y: 'low'  },
+      { x: 'high', y: 'low'  }
+    ];
+
+    function findQuadrant(x, y) {
+      const idx = quadrants.findIndex(q => q.x === x && q.y === y);
+      return idx >= 0 ? { q: quadrants[idx], idx } : { q: null, idx: -1 };
+    }
+
+    function colorFor(name) {
+      return COLOR_MAP[name] || COLOR_MAP.accent;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.classList.add('has-matrix');
+        const cells = cellOrder.map((pos, cellIdx) => {
+          const { q, idx } = findQuadrant(pos.x, pos.y);
+          if (!q) {
+            return `<div class="quadrant placeholder" data-stage-key="Matrix2x2/cell[${cellIdx}]"></div>`;
+          }
+          const color = colorFor(q.color);
+          const tag = `${labelShort(pos.y)} · ${labelShort(pos.x)}`;
+          return `
+            <div class="quadrant"
+                 data-quad-index="${idx}"
+                 data-stage-key="Matrix2x2/quadrant[${idx}]"
+                 style="--q-color: ${color};">
+              <div class="q-tag">${escape(tag)}</div>
+              <div class="q-label" data-stage-edit="quadrants[${idx}].label">${escape(q.label || '')}</div>
+              ${q.body ? `<div class="q-body" data-stage-edit="quadrants[${idx}].body">${escape(q.body)}</div>` : ''}
+            </div>
+          `;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="matrix2x2" data-stage-key="Matrix2x2">
+            <div class="y-axis" data-stage-key="Matrix2x2/y-axis">
+              <span class="hi" data-stage-edit="axes.y.high">${escape(yAxis.high || 'high')}</span>
+              <span class="label" data-stage-edit="axes.y.label">${escape(yAxis.label || '')}</span>
+              <span class="lo" data-stage-edit="axes.y.low">${escape(yAxis.low || 'low')}</span>
+            </div>
+            <div class="grid" data-stage-key="Matrix2x2/grid">
+              ${cells}
+            </div>
+            <div class="x-axis" data-stage-key="Matrix2x2/x-axis">
+              <span class="lo" data-stage-edit="axes.x.low">${escape(xAxis.low || 'low')}</span>
+              <span class="label" data-stage-edit="axes.x.label">${escape(xAxis.label || '')}</span>
+              <span class="hi" data-stage-edit="axes.x.high">${escape(xAxis.high || 'high')}</span>
+            </div>
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.quadrant[data-quad-index]').forEach(n => n.classList.add('active'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const nodes = el.querySelectorAll('.quadrant[data-quad-index]');
+        const timers = [];
+        nodes.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('active'), 220 + i * 260));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.quadrant').forEach(n => n.classList.remove('active'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = quadrants.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.quadrant[data-quad-index]').forEach(n => {
+          const idx = Number(n.dataset.quadIndex);
+          n.classList.toggle('active', idx < step);
+        });
+      };
+    }
+
+    return slide;
+  };
+
+  function labelShort(pos) {
+    return pos === 'high' ? 'hi' : 'lo';
+  }
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/pillars.js

@@ -0,0 +1,80 @@
+'use strict';
+
+/**
+ * Stage.Pillars — N evenly-spaced columns, each with material icon, heading, body.
+ *
+ * Usage:
+ *   Stage.register(Stage.Pillars({
+ *     section: 4,
+ *     title: '04 · Three pillars',
+ *     intro: 'How the work splits',
+ *     pillars: [
+ *       { icon: 'bolt',  heading: 'Speed',    body: 'tight loops',   color: 'accent' },
+ *       { icon: 'shield',heading: 'Trust',    body: 'evidence first',color: 'blue'   },
+ *       { icon: 'eco',   heading: 'Restraint',body: 'do less',       color: 'amber'  }
+ *     ],
+ *     reveal: 'staggered'   // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Edit paths:
+ *   intro / pillars[i].icon / pillars[i].heading / pillars[i].body
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Pillars = function (opts) {
+    const pillars = opts.pillars || [];
+    const reveal = opts.reveal || 'instant';
+    const intro = opts.intro || '';
+    const count = Math.min(pillars.length, 5);
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="pillars-wrap" data-stage-key="Pillars">
+            ${intro ? `<div class="pillars-intro" data-stage-edit="intro" data-stage-key="Pillars/intro">${escape(intro)}</div>` : ''}
+            <div class="pillars-grid" style="--pillars-count: ${count};">
+              ${pillars.map((p, i) => `
+                <div class="pillar ${p.color ? 'pc-' + escape(p.color) : ''}" data-step="${i + 1}" data-stage-key="Pillars/pillar[${i}]">
+                  <span class="pillar-icon material-symbols-outlined" data-stage-edit="pillars[${i}].icon">${escape(p.icon || 'circle')}</span>
+                  <div class="pillar-heading" data-stage-edit="pillars[${i}].heading" data-stage-key="Pillars/pillar[${i}]/heading">${escape(p.heading || '')}</div>
+                  ${p.body ? `<div class="pillar-body" data-stage-edit="pillars[${i}].body" data-stage-key="Pillars/pillar[${i}]/body">${escape(p.body)}</div>` : ''}
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.pillar').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.pillar'), 180, 200);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.pillar').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = pillars.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.pillar').forEach(n => {
+          n.classList.toggle('in', Number(n.dataset.step) <= step);
+        });
+      };
+    }
+
+    return slide;
+  };
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);