stagecraft 0.1.0

package/src/components/cycle.js

@@ -0,0 +1,146 @@
+'use strict';
+
+/**
+ * Stage.Cycle — items arranged on a circle with curved arrows between them.
+ *
+ * Usage:
+ *   Stage.register(Stage.Cycle({
+ *     section: 7,
+ *     title: '07 · The loop',
+ *     items: [
+ *       { label: 'Plan',    icon: 'edit_note',     color: 'accent' },
+ *       { label: 'Build',   icon: 'construction'                   },
+ *       { label: 'Verify',  icon: 'fact_check'                     },
+ *       { label: 'Reflect', icon: 'psychology'                     }
+ *     ],
+ *     reveal: 'instant'    // 'instant' | 'rotate' | 'per-click'
+ *   }));
+ *
+ * SVG provides the circle + arcs; HTML cards float on top at polar positions.
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Cycle = function (opts) {
+    const items = opts.items || [];
+    const reveal = opts.reveal || 'instant';
+    const n = items.length;
+    const VB = 1000;
+    const CX = VB / 2;
+    const CY = VB / 2;
+    const R = VB * 0.36;
+    const ITEM_R = VB * 0.11; // ring offset for label cards
+
+    // Start at top (-PI/2) and go clockwise.
+    function angle(i) { return -Math.PI / 2 + (i / Math.max(1, n)) * Math.PI * 2; }
+    function pt(a, r) { return { x: CX + Math.cos(a) * r, y: CY + Math.sin(a) * r }; }
+
+    // Build an arc from item i -> i+1 that sits *outside* the inner clear area,
+    // so it visually connects the two cards.
+    function arcPath(i) {
+      const a1 = angle(i);
+      const a2 = angle((i + 1) % n);
+      const p1 = pt(a1, R);
+      const p2 = pt(a2, R);
+      // Use the circle radius itself for the SVG arc command; large-arc=0, sweep=1 (clockwise).
+      return `M ${p1.x.toFixed(1)} ${p1.y.toFixed(1)} A ${R} ${R} 0 0 1 ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
+    }
+
+    // Arrow tip near each next item.
+    function arrowAt(i) {
+      const a = angle((i + 1) % n);
+      // Pull tip slightly back along the tangent so it lands cleanly.
+      const tipA = a - 0.18;
+      const tip = pt(tipA, R);
+      // Tangent direction (perpendicular to radius, clockwise).
+      const tx = -Math.sin(tipA);
+      const ty = Math.cos(tipA);
+      const size = VB * 0.018;
+      // Two wings off the tangent.
+      const ax = tip.x - tx * size + ty * size * 0.6;
+      const ay = tip.y - ty * size - tx * size * 0.6;
+      const bx = tip.x - tx * size - ty * size * 0.6;
+      const by = tip.y - ty * size + tx * size * 0.6;
+      return `M ${tip.x.toFixed(1)} ${tip.y.toFixed(1)} L ${ax.toFixed(1)} ${ay.toFixed(1)} M ${tip.x.toFixed(1)} ${tip.y.toFixed(1)} L ${bx.toFixed(1)} ${by.toFixed(1)}`;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const cardsHtml = items.map((it, i) => {
+          const p = pt(angle(i), R);
+          const xPct = (p.x / VB) * 100;
+          const yPct = (p.y / VB) * 100;
+          return `
+            <div class="cyc-item ${it.color ? 'cyc-' + escape(it.color) : ''}"
+                 data-step="${i + 1}"
+                 style="left: ${xPct.toFixed(2)}%; top: ${yPct.toFixed(2)}%;"
+                 data-stage-key="Cycle/item[${i}]">
+              ${it.icon ? `<span class="cyc-icon material-symbols-outlined" data-stage-edit="items[${i}].icon">${escape(it.icon)}</span>` : ''}
+              <div class="cyc-label" data-stage-edit="items[${i}].label" data-stage-key="Cycle/item[${i}]/label">${escape(it.label || '')}</div>
+            </div>
+          `;
+        }).join('');
+
+        const arcs = [];
+        for (let i = 0; i < n; i++) {
+          arcs.push(`<path class="cyc-arc" d="${arcPath(i)}" data-step="${i + 1}"/>`);
+          arcs.push(`<path class="cyc-arrow" d="${arrowAt(i)}" data-step="${i + 1}"/>`);
+        }
+
+        el.innerHTML = `
+          <div class="cycle" data-stage-key="Cycle">
+            <div class="cyc-frame">
+              <svg class="cyc-svg" viewBox="0 0 ${VB} ${VB}" preserveAspectRatio="xMidYMid meet">
+                <circle class="cyc-ring" cx="${CX}" cy="${CY}" r="${R}"/>
+                ${arcs.join('')}
+              </svg>
+              <div class="cyc-items">
+                ${cardsHtml}
+              </div>
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant' || reveal === 'rotate') {
+          el.querySelectorAll('.cyc-item, .cyc-arc, .cyc-arrow').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'rotate') {
+      slide.init = function (el) {
+        const frame = el.querySelector('.cyc-frame');
+        if (frame) {
+          frame.classList.add('rotating');
+          const id = setTimeout(() => frame.classList.remove('rotating'), 1700);
+          return () => clearTimeout(id);
+        }
+      };
+      slide.replay = function (el) {
+        const frame = el.querySelector('.cyc-frame');
+        if (frame) { frame.classList.remove('rotating'); void frame.offsetWidth; }
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = items.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.cyc-item').forEach(node => {
+          node.classList.toggle('in', Number(node.dataset.step) <= step);
+        });
+        el.querySelectorAll('.cyc-arc, .cyc-arrow').forEach(node => {
+          // Arc i connects item i -> i+1; show when both endpoints are in.
+          node.classList.toggle('in', Number(node.dataset.step) < step || (Number(node.dataset.step) === step && step === n));
+        });
+      };
+    }
+
+    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/definition.js

@@ -0,0 +1,96 @@
+'use strict';
+
+/**
+ * Stage.Definition — dictionary-style entry.
+ *
+ * Usage:
+ *   Stage.register(Stage.Definition({
+ *     section: 5,
+ *     title: '05 · Define your terms',
+ *     term: 'taste',
+ *     definition: 'the ability to tell a good answer from a plausible one.',
+ *     etymology: 'from Old French "tast" — to touch, to feel.',   // optional
+ *     examples: [                                                  // optional, 1-2
+ *       'You can rent skill. You cannot rent taste.',
+ *       'Without taste, the model writes very fast nonsense.'
+ *     ]
+ *   }));
+ *
+ * In examples, occurrences of the term get highlighted automatically.
+ *
+ * Edit paths:
+ *   term / definition / etymology / examples[i]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Definition = function (opts) {
+    const term = opts.term || '';
+    const definition = opts.definition || '';
+    const etymology = opts.etymology || '';
+    const examples = Array.isArray(opts.examples) ? opts.examples : [];
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <article class="definition" data-stage-key="Definition">
+            <header class="df-head">
+              <h1 class="df-term" data-stage-edit="term" data-stage-key="Definition/term">${escape(term)}</h1>
+              <span class="df-pos" aria-hidden="true">n.</span>
+            </header>
+            <p class="df-def" data-stage-edit="definition" data-stage-key="Definition/definition">${escape(definition)}</p>
+            ${etymology ? `<p class="df-ety" data-stage-edit="etymology" data-stage-key="Definition/etymology">${escape(etymology)}</p>` : ''}
+            ${examples.length ? `
+              <ul class="df-examples">
+                ${examples.map((ex, i) => `
+                  <li class="df-ex" data-stage-edit="examples[${i}]" data-stage-key="Definition/example[${i}]">${highlight(ex, term)}</li>
+                `).join('')}
+              </ul>
+            ` : ''}
+          </article>
+        `;
+      },
+      init(el) {
+        const term = el.querySelector('.df-term');
+        const pos = el.querySelector('.df-pos');
+        const def = el.querySelector('.df-def');
+        const ety = el.querySelector('.df-ety');
+        const exs = el.querySelectorAll('.df-ex');
+        const timers = [];
+        timers.push(setTimeout(() => term && term.classList.add('in'), 120));
+        timers.push(setTimeout(() => pos && pos.classList.add('in'), 350));
+        timers.push(setTimeout(() => def && def.classList.add('in'), 700));
+        timers.push(setTimeout(() => ety && ety.classList.add('in'), 1100));
+        exs.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 1400 + i * 280));
+        });
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.df-term, .df-pos, .df-def, .df-ety, .df-ex')
+          .forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      }
+    };
+  };
+
+  function highlight(raw, term) {
+    let html = escape(raw);
+    if (!term) return html;
+    const esc = escape(term);
+    const re = new RegExp(escapeRegex(esc), 'gi');
+    return html.replace(re, m => `<span class="df-mark">${m}</span>`);
+  }
+
+  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/donut-chart.js

@@ -0,0 +1,179 @@
+'use strict';
+
+/**
+ * Stage.DonutChart — SVG donut chart with legend.
+ *
+ * Usage:
+ *   Stage.register(Stage.DonutChart({
+ *     section: 5,
+ *     title: '05 · time allocation',
+ *     segments: [
+ *       { label: 'Coding',   value: 42, color: 'accent' },
+ *       { label: 'Meetings', value: 23, color: 'amber'  },
+ *       { label: 'Review',   value: 18, color: 'blue'   },
+ *       { label: 'Slack',    value: 17, color: 'red'    }
+ *     ],
+ *     centerLabel: 'time',
+ *     reveal: 'animated'   // 'instant' | 'animated' | 'staggered'
+ *   }));
+ *
+ * Each segment grows from 0 (length-0 arc) on init.
+ *
+ * Edit paths: segments[i].label / segments[i].value / centerLabel
+ */
+
+(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, fallbackIdx) {
+    if (COLOR_MAP[name]) return COLOR_MAP[name];
+    const cycle = ['var(--accent)', 'var(--blue)', 'var(--amber)', 'var(--red)', 'var(--dim)'];
+    return cycle[fallbackIdx % cycle.length];
+  }
+
+  Stage.DonutChart = function (opts) {
+    const segments = opts.segments || [];
+    const centerLabel = opts.centerLabel || '';
+    const reveal = opts.reveal || 'animated';
+
+    const total = segments.reduce((s, x) => s + (Number(x.value) || 0), 0) || 1;
+    // SVG circle: cx=50, cy=50, r=40, circumference = 2*pi*40 ≈ 251.327
+    const R = 40;
+    const C = 2 * Math.PI * R;
+
+    // Compute cumulative offsets so each segment is drawn at the right position
+    let cum = 0;
+    const arcs = segments.map((seg, i) => {
+      const value = Number(seg.value) || 0;
+      const fraction = value / total;
+      const length = fraction * C;
+      const offset = -cum * C;     // negative because SVG draws clockwise from 3 o'clock; we rotate to 12 o'clock
+      cum += fraction;
+      return {
+        i,
+        label: seg.label || '',
+        value,
+        color: colorFor(seg.color, i),
+        length,
+        offset,
+        percent: Math.round(fraction * 100)
+      };
+    });
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const svgArcs = arcs.map(a => `
+          <circle class="donut-arc"
+                  data-i="${a.i}"
+                  data-stage-key="DonutChart/arc[${a.i}]"
+                  cx="50" cy="50" r="${R}"
+                  fill="none"
+                  stroke="${a.color}"
+                  stroke-width="12"
+                  stroke-dasharray="0 ${C.toFixed(3)}"
+                  stroke-dashoffset="${a.offset.toFixed(3)}"
+                  data-length="${a.length.toFixed(3)}"
+                  data-circumference="${C.toFixed(3)}"/>
+        `).join('');
+
+        const legend = arcs.map(a => `
+          <div class="donut-legend-row" data-i="${a.i}" data-stage-key="DonutChart/legend[${a.i}]">
+            <span class="donut-dot" style="--dc-color: ${a.color};"></span>
+            <span class="donut-leg-label" data-stage-edit="segments[${a.i}].label">${escape(a.label)}</span>
+            <span class="donut-leg-value" data-stage-edit="segments[${a.i}].value">${escape(String(a.value))}</span>
+            <span class="donut-leg-pct">${a.percent}%</span>
+          </div>
+        `).join('');
+
+        el.innerHTML = `
+          <div class="donut" data-stage-key="DonutChart">
+            <div class="donut-svg-wrap">
+              <svg class="donut-svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+                <circle class="donut-track" cx="50" cy="50" r="${R}" fill="none" stroke="var(--dim-2)" stroke-width="12"/>
+                <g class="donut-arcs" transform="rotate(-90 50 50)">
+                  ${svgArcs}
+                </g>
+              </svg>
+              ${centerLabel ? `<div class="donut-center" data-stage-edit="centerLabel" data-stage-key="DonutChart/center">${escape(centerLabel)}</div>` : ''}
+            </div>
+            <div class="donut-legend" data-stage-key="DonutChart/legend">
+              ${legend}
+            </div>
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.donut-arc').forEach(arc => {
+            const len = arc.dataset.length;
+            arc.setAttribute('stroke-dasharray', `${len} ${C - Number(len)}`);
+          });
+          el.querySelectorAll('.donut-legend-row').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    function animateArc(arc, durationMs) {
+      const target = Number(arc.dataset.length);
+      const start = performance.now();
+      let rafId;
+      function tick(now) {
+        const t = Math.min(1, (now - start) / durationMs);
+        const eased = 1 - Math.pow(1 - t, 3);
+        const len = target * eased;
+        arc.setAttribute('stroke-dasharray', `${len.toFixed(3)} ${(C - len).toFixed(3)}`);
+        if (t < 1) rafId = requestAnimationFrame(tick);
+      }
+      rafId = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(rafId);
+    }
+
+    if (reveal === 'animated' || reveal === 'staggered') {
+      slide.init = function (el) {
+        const arcsEl = Array.from(el.querySelectorAll('.donut-arc'));
+        const rows = Array.from(el.querySelectorAll('.donut-legend-row'));
+        const cancels = [];
+        const timers = [];
+        if (reveal === 'staggered') {
+          arcsEl.forEach((arc, i) => {
+            timers.push(setTimeout(() => cancels.push(animateArc(arc, 700)), 100 + i * 320));
+            timers.push(setTimeout(() => rows[i] && rows[i].classList.add('in'), 200 + i * 320));
+          });
+        } else {
+          arcsEl.forEach(arc => cancels.push(animateArc(arc, 1200)));
+          rows.forEach((row, i) => {
+            timers.push(setTimeout(() => row.classList.add('in'), 200 + i * 120));
+          });
+        }
+        return () => {
+          cancels.forEach(c => c());
+          timers.forEach(clearTimeout);
+        };
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.donut-arc').forEach(arc => {
+          arc.setAttribute('stroke-dasharray', `0 ${C}`);
+        });
+        el.querySelectorAll('.donut-legend-row').forEach(n => n.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/full-image.js

@@ -0,0 +1,82 @@
+'use strict';
+
+/**
+ * Stage.FullImage — full-bleed background image with optional text overlay.
+ *
+ * Usage:
+ *   Stage.register(Stage.FullImage({
+ *     section: 4,
+ *     title: '04 · The terrain',
+ *     image: { src: 'https://...', alt: 'A wide horizon' },
+ *     overlay: {
+ *       position: 'bottom-left',             // 'center' | 'bottom-left' | 'top' | 'bottom-right'
+ *       headline: 'Most slides should be quiet.',
+ *       body: 'Let the picture speak first.' // optional
+ *     }
+ *   }));
+ *
+ * If `overlay` is omitted, the image gets a subtle ken-burns drift on init.
+ *
+ * Edit paths:
+ *   image.src / image.alt / overlay.headline / overlay.body
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.FullImage = function (opts) {
+    const image = opts.image || {};
+    const overlay = opts.overlay;
+    const position = overlay && overlay.position ? overlay.position : 'center';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.classList.add('full-image-host');
+        el.innerHTML = `
+          <div class="full-image" data-stage-key="FullImage">
+            <div class="fi-bg"
+              style="background-image: url('${escape(image.src || '')}')"
+              role="img"
+              aria-label="${escape(image.alt || '')}"
+              data-stage-edit="image.src"></div>
+            ${overlay ? `
+              <div class="fi-overlay fi-overlay--${position}" data-stage-key="FullImage/overlay">
+                <div class="fi-scrim fi-scrim--${position}"></div>
+                <div class="fi-overlay-inner">
+                  <div class="fi-headline" data-stage-edit="overlay.headline" data-stage-key="FullImage/headline">${escape(overlay.headline || '')}</div>
+                  ${overlay.body ? `<div class="fi-body" data-stage-edit="overlay.body" data-stage-key="FullImage/body">${escape(overlay.body)}</div>` : ''}
+                </div>
+              </div>
+            ` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        const bg = el.querySelector('.fi-bg');
+        const headline = el.querySelector('.fi-headline');
+        const body = el.querySelector('.fi-body');
+        const timers = [];
+        timers.push(setTimeout(() => bg && bg.classList.add('in'), 50));
+        if (!overlay) {
+          // ken-burns on the bg
+          timers.push(setTimeout(() => bg && bg.classList.add('drift'), 400));
+        }
+        if (headline) timers.push(setTimeout(() => headline.classList.add('in'), 600));
+        if (body)     timers.push(setTimeout(() => body.classList.add('in'), 900));
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.fi-bg, .fi-headline, .fi-body')
+          .forEach(n => { n.classList.remove('in'); n.classList.remove('drift'); });
+        return this.init(el);
+      }
+    };
+  };
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/funnel.js

@@ -0,0 +1,111 @@
+'use strict';
+
+/**
+ * Stage.Funnel — stacked trapezoids, narrowing top-to-bottom.
+ *
+ * Usage:
+ *   Stage.register(Stage.Funnel({
+ *     section: 8,
+ *     title: '08 · Down to it',
+ *     stages: [
+ *       { label: 'Awareness',  value: '10k', body: 'first touch' },
+ *       { label: 'Trial',      value: '2.4k' },
+ *       { label: 'Adoption',   value: '600' },
+ *       { label: 'Champions',  value: '42',  color: 'accent', body: 'outcome' }
+ *     ],
+ *     reveal: 'staggered'   // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Bottom is treated as the outcome and is implicitly accent-colored
+ * unless its own `color` is set.
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Funnel = function (opts) {
+    const stages = opts.stages || [];
+    const reveal = opts.reveal || 'instant';
+    const n = stages.length;
+
+    // Top widest (100%) -> bottom narrowest (~40%).
+    function topWidth(i) {
+      if (n <= 1) return 100;
+      const min = 38;
+      const max = 100;
+      const t = i / n;            // before this layer
+      return max - (max - min) * t;
+    }
+    function bottomWidth(i) {
+      if (n <= 1) return 38;
+      const min = 38;
+      const max = 100;
+      const t = (i + 1) / n;
+      return max - (max - min) * t;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="funnel" data-stage-key="Funnel">
+            ${stages.map((stage, i) => {
+              const tw = topWidth(i);
+              const bw = bottomWidth(i);
+              const isOutcome = i === n - 1;
+              const colorClass = stage.color
+                ? 'fnc-' + escape(stage.color)
+                : (isOutcome ? 'fnc-accent' : '');
+              // Build a CSS clip-path polygon trapezoid (percentages within the layer).
+              const leftTop = ((100 - tw) / 2).toFixed(2);
+              const rightTop = (100 - (100 - tw) / 2).toFixed(2);
+              const leftBot = ((100 - bw) / 2).toFixed(2);
+              const rightBot = (100 - (100 - bw) / 2).toFixed(2);
+              const clip = `polygon(${leftTop}% 0%, ${rightTop}% 0%, ${rightBot}% 100%, ${leftBot}% 100%)`;
+              return `
+                <div class="fn-stage ${colorClass} ${isOutcome ? 'fn-outcome' : ''}"
+                     data-step="${i + 1}"
+                     data-stage-key="Funnel/stage[${i}]">
+                  <div class="fn-shape" style="clip-path: ${clip}; -webkit-clip-path: ${clip};"></div>
+                  <div class="fn-content" style="--fn-pad: ${((100 - Math.min(tw, bw)) / 2).toFixed(2)}%;">
+                    <div class="fn-label" data-stage-edit="stages[${i}].label" data-stage-key="Funnel/stage[${i}]/label">${escape(stage.label || '')}</div>
+                    ${stage.value ? `<div class="fn-value" data-stage-edit="stages[${i}].value" data-stage-key="Funnel/stage[${i}]/value">${escape(stage.value)}</div>` : ''}
+                    ${stage.body ? `<div class="fn-body" data-stage-edit="stages[${i}].body" data-stage-key="Funnel/stage[${i}]/body">${escape(stage.body)}</div>` : ''}
+                  </div>
+                </div>
+              `;
+            }).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.fn-stage').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.fn-stage'), 220, 200);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.fn-stage').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = stages.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.fn-stage').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);