stagecraft 0.1.0

package/src/components/roadmap.js

@@ -0,0 +1,130 @@
+'use strict';
+
+/**
+ * Stage.Roadmap — horizontal timeline with swimlanes.
+ *
+ * Usage:
+ *   Stage.register(Stage.Roadmap({
+ *     section: 5,
+ *     title: '05 · 2026 roadmap',
+ *     months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+ *     lanes: [
+ *       { label: 'Platform', color: 'accent', bars: [
+ *           { start: 0, end: 3, label: 'rewrite core' },
+ *           { start: 4, end: 7, label: 'observability' }
+ *       ]},
+ *       { label: 'Product',  color: 'blue', bars: [
+ *           { start: 2, end: 6, label: 'collab editor' }
+ *       ]}
+ *     ],
+ *     reveal: 'staggered'                   // 'instant' | 'staggered'
+ *   }));
+ *
+ * `start` and `end` are indices into `months` (or arbitrary numbers if no months).
+ *
+ * Edit paths: lanes[i].label, lanes[i].bars[j].label, months[k]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Roadmap = function (opts) {
+    const lanes = opts.lanes || [];
+    const months = opts.months || [];
+    const reveal = opts.reveal || 'staggered';
+
+    // Determine min/max for normalisation
+    let lo = months.length ? 0 : Infinity;
+    let hi = months.length ? months.length : -Infinity;
+    if (!months.length) {
+      lanes.forEach(lane => (lane.bars || []).forEach(b => {
+        const s = Number(b.start);
+        const e = Number(b.end);
+        if (Number.isFinite(s) && s < lo) lo = s;
+        if (Number.isFinite(e) && e > hi) hi = e;
+      }));
+    }
+    if (!Number.isFinite(lo)) lo = 0;
+    if (!Number.isFinite(hi)) hi = 1;
+    const span = (hi - lo) || 1;
+
+    function pct(v) {
+      return ((Number(v) - lo) / span) * 100;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        // Month headers
+        const monthCells = months.length
+          ? months.map((m, i) => `<div class="rm-month" data-stage-edit="months[${i}]">${escape(m)}</div>`).join('')
+          : '';
+
+        const laneRows = lanes.map((lane, i) => {
+          const colorClass = lane.color ? `rm-${escape(lane.color)}` : '';
+          const bars = (lane.bars || []).map((b, j) => {
+            const left = pct(b.start);
+            const right = pct(b.end);
+            const w = Math.max(0, right - left);
+            return `<div class="rm-bar ${colorClass}"
+                         data-i="${i}" data-j="${j}"
+                         data-stage-key="Roadmap/lane[${i}]/bar[${j}]"
+                         style="--rm-left: ${left.toFixed(2)}%; --rm-width: ${w.toFixed(2)}%;">
+                      <span class="rm-bar-label" data-stage-edit="lanes[${i}].bars[${j}].label">${escape(b.label || '')}</span>
+                    </div>`;
+          }).join('');
+          return `<div class="rm-lane" data-stage-key="Roadmap/lane[${i}]">
+                    <div class="rm-lane-label ${colorClass}" data-stage-edit="lanes[${i}].label">${escape(lane.label || '')}</div>
+                    <div class="rm-lane-track">${bars}</div>
+                  </div>`;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="roadmap" data-stage-key="Roadmap">
+            ${months.length ? `
+              <div class="rm-header">
+                <div class="rm-lane-label-spacer"></div>
+                <div class="rm-months" style="--rm-cols: ${months.length};">${monthCells}</div>
+              </div>
+            ` : ''}
+            <div class="rm-body">
+              ${laneRows}
+            </div>
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.rm-bar, .rm-lane').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const lanesEl = Array.from(el.querySelectorAll('.rm-lane'));
+        const barsEl = Array.from(el.querySelectorAll('.rm-bar'));
+        const timers = [];
+        lanesEl.forEach((lane, i) => {
+          timers.push(setTimeout(() => lane.classList.add('in'), 150 + i * 180));
+        });
+        barsEl.forEach((bar, i) => {
+          const laneIdx = Number(bar.dataset.i);
+          timers.push(setTimeout(() => bar.classList.add('in'), 400 + laneIdx * 180 + Number(bar.dataset.j) * 120));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.rm-bar, .rm-lane').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/section-card.js

@@ -0,0 +1,45 @@
+'use strict';
+
+/**
+ * Stage.SectionCard — section divider with number + title + tag.
+ *
+ * Usage:
+ *   Stage.register(Stage.SectionCard({
+ *     section: 2,
+ *     number: '02',
+ *     title: 'What changed',
+ *     tag: 'the shift in cost'
+ *   }));
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.SectionCard = function (opts) {
+    return {
+      section: opts.section,
+      title: opts.title || `${opts.number} · ${opts.titleText || ''}`.trim(),
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="section-card stagger" data-stage-key="SectionCard">
+            <div class="sec-rule">
+              <div class="sec-line"></div>
+              <div class="sec-num" data-stage-edit="number" data-stage-key="SectionCard/number">${escape(opts.number || '')}</div>
+              <div class="sec-line"></div>
+            </div>
+            <div class="sec-title" data-stage-edit="title" data-stage-key="SectionCard/title">${escape(opts.title || '')}</div>
+            ${opts.tag ? `<div class="sec-tag" data-stage-edit="tag" data-stage-key="SectionCard/tag">${escape(opts.tag)}</div>` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        return Stage.staggerIn(el.querySelectorAll('.section-card > *'), 200, 100);
+      }
+    };
+  };
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/shift-arrow.js

@@ -0,0 +1,41 @@
+'use strict';
+
+/**
+ * Stage.ShiftArrow — "from → to" mental-model shift pattern.
+ *
+ * Usage:
+ *   Stage.register(Stage.ShiftArrow({
+ *     section: 6,
+ *     title: 'the shift',
+ *     from: 'writing code',
+ *     to: 'reviewing code'
+ *   }));
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.ShiftArrow = function (opts) {
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="shift-line stagger" data-stage-key="ShiftArrow">
+            <div class="shift-from" data-stage-edit="from" data-stage-key="ShiftArrow/from">${escape(opts.from || '')}</div>
+            <div class="shift-arrow">→</div>
+            <div class="shift-to" data-stage-edit="to" data-stage-key="ShiftArrow/to">${escape(opts.to || '')}</div>
+          </div>
+        `;
+      },
+      init(el) {
+        return Stage.staggerIn(el.querySelectorAll('.shift-line > *'), 350, 200);
+      }
+    };
+  };
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/spark-line.js

@@ -0,0 +1,147 @@
+'use strict';
+
+/**
+ * Stage.SparkLine — hero number with an inline trend sparkline.
+ *
+ * Usage:
+ *   Stage.register(Stage.SparkLine({
+ *     section: 5,
+ *     title: '05 · daily commits',
+ *     value: 247,
+ *     label: 'commits today',
+ *     points: [42, 51, 68, 95, 130, 178, 247],
+ *     color: 'accent',
+ *     period: 'last 7 days'
+ *   }));
+ *
+ * Big number counts up; sparkline draws on init.
+ *
+ * Edit paths: value / label / period
+ */
+
+(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)'
+  };
+
+  // viewBox 200x60
+  const VB_W = 200;
+  const VB_H = 60;
+  const PAD = 4;
+
+  Stage.SparkLine = function (opts) {
+    const target = Number(opts.value) || 0;
+    const label = opts.label || '';
+    const points = (opts.points || []).map(p => Number(p) || 0);
+    const color = opts.color || 'accent';
+    const period = opts.period || '';
+    const stroke = COLOR_MAP[color] || COLOR_MAP.accent;
+
+    const pMax = points.length ? Math.max(...points) : 1;
+    const pMin = points.length ? Math.min(...points) : 0;
+    const range = pMax - pMin || 1;
+
+    function xAt(i, n) {
+      if (n <= 1) return VB_W / 2;
+      return PAD + (i / (n - 1)) * (VB_W - 2 * PAD);
+    }
+    function yAt(v) {
+      return VB_H - PAD - ((v - pMin) / range) * (VB_H - 2 * PAD);
+    }
+
+    const path = points.length
+      ? points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${xAt(i, points.length).toFixed(2)} ${yAt(p).toFixed(2)}`).join(' ')
+      : '';
+    const areaPath = points.length
+      ? `${path} L ${xAt(points.length - 1, points.length).toFixed(2)} ${VB_H - PAD} L ${xAt(0, points.length).toFixed(2)} ${VB_H - PAD} Z`
+      : '';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="sparkline sparkline--${escape(color)}" data-stage-key="SparkLine">
+            <div class="sl-figure">
+              <span class="sl-num" data-stage-edit="value" data-target="${target}">0</span>
+            </div>
+            <div class="sl-label" data-stage-edit="label" data-stage-key="SparkLine/label">${escape(label)}</div>
+            <div class="sl-svg-wrap">
+              <svg class="sl-svg" viewBox="0 0 ${VB_W} ${VB_H}" preserveAspectRatio="none">
+                ${areaPath ? `<path class="sl-area" d="${areaPath}" fill="${stroke}" fill-opacity="0.14"/>` : ''}
+                ${path ? `<path class="sl-line" d="${path}" stroke="${stroke}" fill="none"/>` : ''}
+                ${points.length ? `<circle class="sl-tip" cx="${xAt(points.length - 1, points.length).toFixed(2)}" cy="${yAt(points[points.length - 1]).toFixed(2)}" r="3" fill="${stroke}"/>` : ''}
+              </svg>
+            </div>
+            ${period ? `<div class="sl-period" data-stage-edit="period">${escape(period)}</div>` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        const numEl = el.querySelector('.sl-num');
+        const line = el.querySelector('.sl-line');
+        const area = el.querySelector('.sl-area');
+        const tip = el.querySelector('.sl-tip');
+        const duration = 1200;
+        const start = performance.now();
+        const isInt = Number.isInteger(target);
+        let rafId;
+
+        function tick(now) {
+          const t = Math.min(1, (now - start) / duration);
+          const eased = 1 - Math.pow(1 - t, 3);
+          const val = target * eased;
+          if (numEl) numEl.textContent = isInt ? Math.floor(val).toLocaleString() : val.toFixed(1);
+          if (t < 1) rafId = requestAnimationFrame(tick);
+          else if (numEl) numEl.textContent = isInt ? target.toLocaleString() : String(target);
+        }
+        rafId = requestAnimationFrame(tick);
+
+        const timers = [];
+        if (line) {
+          const length = line.getTotalLength ? line.getTotalLength() : 500;
+          line.style.strokeDasharray = `${length}`;
+          line.style.strokeDashoffset = `${length}`;
+          // eslint-disable-next-line no-unused-expressions
+          line.getBoundingClientRect();
+          timers.push(setTimeout(() => {
+            line.style.transition = 'stroke-dashoffset 1300ms cubic-bezier(0.16, 1, 0.3, 1)';
+            line.style.strokeDashoffset = '0';
+          }, 200));
+        }
+        if (area) timers.push(setTimeout(() => area.classList.add('in'), 800));
+        if (tip)  timers.push(setTimeout(() => tip.classList.add('in'), 1400));
+
+        return () => {
+          cancelAnimationFrame(rafId);
+          timers.forEach(clearTimeout);
+        };
+      },
+      replay(el) {
+        const numEl = el.querySelector('.sl-num');
+        if (numEl) numEl.textContent = '0';
+        const line = el.querySelector('.sl-line');
+        if (line) {
+          line.style.transition = 'none';
+          const length = line.getTotalLength ? line.getTotalLength() : 500;
+          line.style.strokeDasharray = `${length}`;
+          line.style.strokeDashoffset = `${length}`;
+        }
+        el.querySelectorAll('.sl-area, .sl-tip').forEach(n => n.classList.remove('in'));
+        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/spotlight.js

@@ -0,0 +1,85 @@
+'use strict';
+
+/**
+ * Stage.Spotlight — one focal item with dimmer supporting items beneath.
+ *
+ * Usage:
+ *   Stage.register(Stage.Spotlight({
+ *     section: 7,
+ *     title: '07 · The one thing',
+ *     focus: {
+ *       icon: 'auto_awesome',
+ *       heading: 'Taste',
+ *       body: 'The scarce part. Still yours to bring.'
+ *     },
+ *     context: ['speed', 'scale', 'cost', 'tooling'],
+ *     reveal: 'staggered'   // 'staggered' | 'instant'
+ *   }));
+ *
+ * Edit paths:
+ *   focus.heading / focus.body / focus.icon / context[i]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Spotlight = function (opts) {
+    const focus = opts.focus || {};
+    const context = Array.isArray(opts.context) ? opts.context : [];
+    const reveal = opts.reveal || 'instant';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="spotlight" data-stage-key="Spotlight">
+            <div class="sp-focus" data-stage-key="Spotlight/focus">
+              ${focus.icon ? `<span class="sp-icon material-symbols-outlined" data-stage-edit="focus.icon">${escape(focus.icon)}</span>` : ''}
+              <div class="sp-focus-text">
+                <div class="sp-heading" data-stage-edit="focus.heading" data-stage-key="Spotlight/focus/heading">${escape(focus.heading || '')}</div>
+                ${focus.body ? `<div class="sp-body" data-stage-edit="focus.body" data-stage-key="Spotlight/focus/body">${escape(focus.body)}</div>` : ''}
+              </div>
+            </div>
+            ${context.length ? `
+              <div class="sp-context" data-stage-key="Spotlight/context">
+                ${context.map((c, i) => `
+                  <div class="sp-ctx-item" data-step="${i + 1}" data-stage-edit="context[${i}]" data-stage-key="Spotlight/context[${i}]">${escape(c)}</div>
+                `).join('')}
+              </div>
+            ` : ''}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          const focusEl = el.querySelector('.sp-focus');
+          if (focusEl) focusEl.classList.add('in');
+          el.querySelectorAll('.sp-ctx-item').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const focusEl = el.querySelector('.sp-focus');
+        const ctx = el.querySelectorAll('.sp-ctx-item');
+        const timers = [];
+        timers.push(setTimeout(() => focusEl && focusEl.classList.add('in'), 150));
+        ctx.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 700 + i * 140));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.sp-focus, .sp-ctx-item').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/statement.js

@@ -0,0 +1,106 @@
+'use strict';
+
+/**
+ * Stage.Statement — one massive declarative sentence, centered.
+ *
+ * Usage:
+ *   Stage.register(Stage.Statement({
+ *     section: 1,
+ *     title: '01 · Thesis',
+ *     text: 'We are not in the business of making widgets. We are in the business of trust.',
+ *     emphasis: ['trust'],   // substrings within text get accent color
+ *     color: 'accent'        // 'accent' | 'amber' | 'blue' — controls emphasis color
+ *   }));
+ *
+ * On init the text reveals word by word.
+ *
+ * Edit paths:
+ *   text  (the whole sentence; emphasis is structural, not inline-editable)
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Statement = function (opts) {
+    const text = opts.text || '';
+    const emphasis = Array.isArray(opts.emphasis) ? opts.emphasis : [];
+    const color = opts.color || 'accent';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.classList.add('statement-host');
+        // Build emphasized HTML, then split by whitespace into word spans so we
+        // can stagger reveal. We escape first, then wrap emphasis spans.
+        const emphasized = emphasizeHTML(text, emphasis, color);
+        const words = splitWords(emphasized);
+
+        el.innerHTML = `
+          <div class="statement" data-stage-key="Statement">
+            <p class="statement-text" data-stage-edit="text" data-stage-key="Statement/text">${
+              words.map((w, i) => `<span class="st-word" data-i="${i}">${w}</span>`).join(' ')
+            }</p>
+          </div>
+        `;
+      },
+      init(el) {
+        const words = el.querySelectorAll('.st-word');
+        const timers = [];
+        words.forEach((w, i) => {
+          timers.push(setTimeout(() => w.classList.add('in'), 120 + i * 90));
+        });
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.st-word').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      }
+    };
+  };
+
+  // Build escaped HTML where each emphasis substring becomes
+  // <span class="st-em st-em--accent">...</span>.
+  function emphasizeHTML(raw, emphasis, color) {
+    let html = escape(raw);
+    // Sort longest first so substrings don't shadow longer matches.
+    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="st-em st-em--${escape(color)}">${esc}</span>`);
+    }
+    return html;
+  }
+
+  // Split into word tokens, preserving emphasis tags intact (don't split inside <span>).
+  function splitWords(html) {
+    // Tokenize: keep tag-blocks atomic by splitting on plain whitespace
+    // but only outside tags. Simple state machine.
+    const tokens = [];
+    let buf = '';
+    let depth = 0;
+    for (let i = 0; i < html.length; i++) {
+      const c = html[i];
+      if (c === '<') depth++;
+      if (c === ' ' && depth === 0) {
+        if (buf) tokens.push(buf);
+        buf = '';
+      } else {
+        buf += c;
+      }
+      if (c === '>') depth--;
+    }
+    if (buf) tokens.push(buf);
+    return tokens;
+  }
+
+  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/stats.js

@@ -0,0 +1,91 @@
+'use strict';
+
+/**
+ * Stage.Stats — grid of statistic mini-cards.
+ *
+ * Usage:
+ *   Stage.register(Stage.Stats({
+ *     section: 6,
+ *     title: '06 · The numbers',
+ *     blocks: [
+ *       { number: 92, unit: '%', label: 'cost-per-token drop', color: 'accent' },
+ *       { number: 7,  unit: 'x', label: 'context window growth', color: 'amber' },
+ *       { number: 3,  unit: 'd', label: 'avg PR turnaround',     color: 'blue' }
+ *     ],
+ *     columns: 3                       // optional, defaults to blocks.length up to 4
+ *   }));
+ *
+ * On init each number counts up from 0 → target, staggered by ~200ms.
+ *
+ * Edit paths: blocks[i].number / blocks[i].unit / blocks[i].label
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Stats = function (opts) {
+    const blocks = opts.blocks || [];
+    const columns = Math.min(4, opts.columns || Math.min(4, blocks.length || 1));
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="stats stats--cols-${columns}" data-stage-key="Stats">
+            ${blocks.map((b, i) => `
+              <div class="stat ${b.color ? 'stat--' + b.color : ''}" data-stage-key="Stats/block[${i}]">
+                <div class="stat-figure">
+                  <span class="stat-num" data-stage-edit="blocks[${i}].number" data-target="${Number(b.number) || 0}">0</span>${b.unit ? `<span class="stat-unit" data-stage-edit="blocks[${i}].unit">${escape(b.unit)}</span>` : ''}
+                </div>
+                <div class="stat-label" data-stage-edit="blocks[${i}].label">${escape(b.label || '')}</div>
+              </div>
+            `).join('')}
+          </div>
+        `;
+      },
+      init(el) {
+        const nums = el.querySelectorAll('.stat-num');
+        const cards = el.querySelectorAll('.stat');
+        const duration = 1200;
+        const stagger = 200;
+        const rafs = [];
+        const timers = [];
+        cards.forEach((card, i) => {
+          timers.push(setTimeout(() => card.classList.add('in'), 100 + i * stagger));
+        });
+        nums.forEach((numEl, i) => {
+          const target = Number(numEl.dataset.target) || 0;
+          const isInt = Number.isInteger(target);
+          const begin = performance.now() + 200 + i * stagger;
+          let rafId;
+          function tick(now) {
+            if (now < begin) { rafId = requestAnimationFrame(tick); rafs.push(rafId); return; }
+            const t = Math.min(1, (now - begin) / duration);
+            const eased = 1 - Math.pow(1 - t, 3);
+            const value = target * eased;
+            numEl.textContent = isInt ? Math.floor(value).toLocaleString() : value.toFixed(1);
+            if (t < 1) { rafId = requestAnimationFrame(tick); rafs.push(rafId); }
+            else numEl.textContent = isInt ? target.toLocaleString() : String(target);
+          }
+          rafId = requestAnimationFrame(tick);
+          rafs.push(rafId);
+        });
+        return () => {
+          rafs.forEach(cancelAnimationFrame);
+          timers.forEach(clearTimeout);
+        };
+      },
+      replay(el) {
+        el.querySelectorAll('.stat-num').forEach(n => n.textContent = '0');
+        el.querySelectorAll('.stat').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      }
+    };
+  };
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);