stagecraft 0.1.0

package/src/components/gauge.js

@@ -0,0 +1,147 @@
+'use strict';
+
+/**
+ * Stage.Gauge — semi-circular gauge with animated arc.
+ *
+ * Usage:
+ *   Stage.register(Stage.Gauge({
+ *     section: 5,
+ *     title: '05 · system load',
+ *     value: 72,
+ *     max: 100,                              // optional, default 100
+ *     label: 'CPU load',                     // optional
+ *     color: 'accent',                       // optional
+ *     ticks: 5                               // optional, marks on the arc
+ *   }));
+ *
+ * Arc fills from 0 → value/max ratio on init.
+ *
+ * Edit paths: value / max / label
+ */
+
+(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 200x120, center (100, 100), radius 80, arc spans 180 degrees
+  const CX = 100;
+  const CY = 100;
+  const R = 80;
+
+  function polar(angleDeg) {
+    // angle 0 = left (180° from positive x), 180 = right (0°)
+    // Math: start at left (180°), end at right (0°) — semi-circle on top
+    const rad = (180 - angleDeg) * Math.PI / 180;
+    return { x: CX + R * Math.cos(rad), y: CY - R * Math.sin(rad) };
+  }
+
+  function arcPath(startDeg, endDeg) {
+    const s = polar(startDeg);
+    const e = polar(endDeg);
+    const large = (endDeg - startDeg) > 180 ? 1 : 0;
+    return `M ${s.x.toFixed(2)} ${s.y.toFixed(2)} A ${R} ${R} 0 ${large} 1 ${e.x.toFixed(2)} ${e.y.toFixed(2)}`;
+  }
+
+  Stage.Gauge = function (opts) {
+    const target = Number(opts.value) || 0;
+    const max = Number(opts.max) || 100;
+    const label = opts.label || '';
+    const color = opts.color || 'accent';
+    const ticks = Math.max(0, Math.min(20, Number(opts.ticks) || 0));
+    const strokeColor = COLOR_MAP[color] || COLOR_MAP.accent;
+
+    const ratio = Math.max(0, Math.min(1, target / max));
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const trackPath = arcPath(0, 180);
+        const fullArcPath = arcPath(0, 180);
+
+        // Tick marks
+        let tickSvg = '';
+        if (ticks > 0) {
+          const tickArr = [];
+          for (let i = 0; i <= ticks; i++) {
+            const deg = (i / ticks) * 180;
+            const outer = polar(deg);
+            const innerR = R - 10;
+            const rad = (180 - deg) * Math.PI / 180;
+            const ix = CX + innerR * Math.cos(rad);
+            const iy = CY - innerR * Math.sin(rad);
+            tickArr.push(`<line class="g-tick" x1="${outer.x.toFixed(2)}" y1="${outer.y.toFixed(2)}" x2="${ix.toFixed(2)}" y2="${iy.toFixed(2)}"/>`);
+          }
+          tickSvg = tickArr.join('');
+        }
+
+        el.innerHTML = `
+          <div class="gauge gauge--${escape(color)}" data-stage-key="Gauge">
+            <div class="g-svg-wrap">
+              <svg class="g-svg" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid meet">
+                <path class="g-track" d="${trackPath}" fill="none" stroke="var(--dim-2)" stroke-width="14" stroke-linecap="round"/>
+                <path class="g-fill"  d="${fullArcPath}"
+                      data-stage-key="Gauge/arc"
+                      fill="none"
+                      stroke="${strokeColor}"
+                      stroke-width="14"
+                      stroke-linecap="round"
+                      pathLength="100"
+                      stroke-dasharray="0 100"/>
+                ${tickSvg}
+              </svg>
+              <div class="g-readout" data-stage-key="Gauge/readout">
+                <div class="g-num"><span class="g-num-val" data-stage-edit="value" data-target="${target}">0</span><span class="g-num-max" data-stage-edit="max">/ ${escape(String(max))}</span></div>
+                ${label ? `<div class="g-label" data-stage-edit="label" data-stage-key="Gauge/label">${escape(label)}</div>` : ''}
+              </div>
+            </div>
+          </div>
+        `;
+      },
+      init(el) {
+        const fill = el.querySelector('.g-fill');
+        const numEl = el.querySelector('.g-num-val');
+        const duration = 1400;
+        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 progress = eased * ratio;
+          if (fill) {
+            fill.setAttribute('stroke-dasharray', `${(progress * 100).toFixed(2)} ${(100 - progress * 100).toFixed(2)}`);
+          }
+          if (numEl) {
+            const val = target * eased;
+            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);
+        return () => cancelAnimationFrame(rafId);
+      },
+      replay(el) {
+        const fill = el.querySelector('.g-fill');
+        const numEl = el.querySelector('.g-num-val');
+        if (fill) fill.setAttribute('stroke-dasharray', '0 100');
+        if (numEl) numEl.textContent = '0';
+        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/heatmap.js

@@ -0,0 +1,141 @@
+'use strict';
+
+/**
+ * Stage.Heatmap — grid of color-intensity cells (GitHub-contribution style).
+ *
+ * Usage:
+ *   Stage.register(Stage.Heatmap({
+ *     section: 5,
+ *     title: '05 · activity',
+ *     rows: 7, cols: 12,
+ *     data: [
+ *       [0, 1, 3, ...],   // row 0
+ *       [1, 2, 4, ...],   // row 1
+ *       ...
+ *     ],
+ *     min: 0, max: 10,                       // optional
+ *     xLabels: ['Jan','Feb',...],            // optional
+ *     yLabels: ['Mon','Tue',...],            // optional
+ *     color: 'accent'                        // optional, default accent
+ *   }));
+ *
+ * Cells fade in with a soft staggered sweep.
+ *
+ * Edit paths: xLabels[i], yLabels[i]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  const COLOR_MAP = {
+    accent: 'var(--accent)',
+    amber:  'var(--amber)',
+    blue:   'var(--blue)',
+    red:    'var(--red)',
+    fg:     'var(--fg)'
+  };
+
+  Stage.Heatmap = function (opts) {
+    const rows = Math.max(1, Number(opts.rows) || (opts.data ? opts.data.length : 1));
+    const cols = Math.max(1, Number(opts.cols) || (opts.data && opts.data[0] ? opts.data[0].length : 1));
+    const data = opts.data || [];
+    const xLabels = opts.xLabels || [];
+    const yLabels = opts.yLabels || [];
+    const color = opts.color || 'accent';
+    const baseColor = COLOR_MAP[color] || COLOR_MAP.accent;
+
+    // Find min/max if not provided
+    let min = Number.isFinite(opts.min) ? Number(opts.min) : Infinity;
+    let max = Number.isFinite(opts.max) ? Number(opts.max) : -Infinity;
+    if (!Number.isFinite(opts.min) || !Number.isFinite(opts.max)) {
+      data.forEach(row => (row || []).forEach(v => {
+        const n = Number(v) || 0;
+        if (!Number.isFinite(opts.min) && n < min) min = n;
+        if (!Number.isFinite(opts.max) && n > max) max = n;
+      }));
+    }
+    if (!Number.isFinite(min)) min = 0;
+    if (!Number.isFinite(max)) max = 1;
+    if (max === min) max = min + 1;
+
+    function intensity(v) {
+      const n = Number(v) || 0;
+      return Math.max(0, Math.min(1, (n - min) / (max - min)));
+    }
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const xLabelRow = xLabels.length
+          ? `<div class="hm-x-labels">
+              <div class="hm-corner"></div>
+              <div class="hm-x-row">
+                ${Array.from({ length: cols }, (_, c) => `
+                  <div class="hm-x-label" data-stage-edit="xLabels[${c}]">${escape(xLabels[c] || '')}</div>
+                `).join('')}
+              </div>
+            </div>`
+          : '';
+
+        const cellRows = Array.from({ length: rows }, (_, r) => {
+          const yLab = yLabels[r] || '';
+          const cells = Array.from({ length: cols }, (_, c) => {
+            const value = (data[r] || [])[c];
+            const inten = intensity(value);
+            return `<div class="hm-cell"
+                         data-r="${r}" data-c="${c}"
+                         data-stage-key="Heatmap/cell[${r}][${c}]"
+                         style="--hm-intensity: ${inten.toFixed(3)};"
+                         title="${escape(String(value ?? ''))}"></div>`;
+          }).join('');
+          return `<div class="hm-row">
+                    ${yLabels.length ? `<div class="hm-y-label" data-stage-edit="yLabels[${r}]">${escape(yLab)}</div>` : ''}
+                    <div class="hm-cells">${cells}</div>
+                  </div>`;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="heatmap heatmap--${escape(color)}"
+               style="--hm-base: ${baseColor}; --hm-cols: ${cols}; --hm-rows: ${rows};"
+               data-stage-key="Heatmap">
+            ${xLabelRow}
+            <div class="hm-body">
+              ${cellRows}
+            </div>
+            <div class="hm-scale">
+              <span class="hm-scale-label">less</span>
+              <span class="hm-scale-step" style="--hm-intensity: 0.05;"></span>
+              <span class="hm-scale-step" style="--hm-intensity: 0.3;"></span>
+              <span class="hm-scale-step" style="--hm-intensity: 0.55;"></span>
+              <span class="hm-scale-step" style="--hm-intensity: 0.8;"></span>
+              <span class="hm-scale-step" style="--hm-intensity: 1;"></span>
+              <span class="hm-scale-label">more</span>
+            </div>
+          </div>
+        `;
+      },
+      init(el) {
+        const cells = Array.from(el.querySelectorAll('.hm-cell'));
+        const timers = [];
+        cells.forEach((cell, i) => {
+          const r = Number(cell.dataset.r);
+          const c = Number(cell.dataset.c);
+          // Diagonal sweep: top-left to bottom-right
+          const delay = 80 + (r + c) * 35;
+          timers.push(setTimeout(() => cell.classList.add('in'), delay));
+        });
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.hm-cell').forEach(c => c.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/image-grid.js

@@ -0,0 +1,80 @@
+'use strict';
+
+/**
+ * Stage.ImageGrid — gallery of images in a grid, with optional captions.
+ *
+ * Usage:
+ *   Stage.register(Stage.ImageGrid({
+ *     section: 6,
+ *     title: '06 · Field notes',
+ *     columns: 3,
+ *     images: [
+ *       { src: 'https://picsum.photos/seed/a/600/400', alt: 'team',    caption: 'team offsite' },
+ *       { src: 'https://picsum.photos/seed/b/600/400', alt: 'console', caption: 'staging burn' },
+ *       { src: 'https://picsum.photos/seed/c/600/400',                 caption: '4 a.m. ship' }
+ *     ],
+ *     reveal: 'cascade'   // 'cascade' (fall-in w/ rotation) | 'staggered' | 'instant'
+ *   }));
+ *
+ * Edit paths:
+ *   images[i].src / images[i].alt / images[i].caption
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.ImageGrid = function (opts) {
+    const images = Array.isArray(opts.images) ? opts.images : [];
+    const columns = [2, 3, 4].includes(opts.columns) ? opts.columns : 3;
+    const reveal = opts.reveal || 'instant';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="image-grid ig-cols-${columns} ig--${escape(reveal)}" data-stage-key="ImageGrid">
+            ${images.map((img, i) => `
+              <figure class="ig-cell" data-step="${i + 1}" data-stage-key="ImageGrid/cell[${i}]">
+                <div class="ig-frame">
+                  <img class="ig-img"
+                    src="${escape(img.src || '')}"
+                    alt="${escape(img.alt || '')}"
+                    loading="lazy"
+                    data-stage-edit="images[${i}].src">
+                </div>
+                ${img.caption ? `<figcaption class="ig-cap" data-stage-edit="images[${i}].caption" data-stage-key="ImageGrid/cell[${i}]/caption">${escape(img.caption)}</figcaption>` : ''}
+              </figure>
+            `).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.ig-cell').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered' || reveal === 'cascade') {
+      slide.init = function (el) {
+        const cells = el.querySelectorAll('.ig-cell');
+        const timers = [];
+        const step = reveal === 'cascade' ? 220 : 150;
+        cells.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 150 + i * step));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.ig-cell').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/image-text.js

@@ -0,0 +1,96 @@
+'use strict';
+
+/**
+ * Stage.ImageText — two-column image + text.
+ *
+ * Usage:
+ *   Stage.register(Stage.ImageText({
+ *     section: 2,
+ *     title: '02 · The view',
+ *     image: { src: 'https://...', alt: 'Field of antennas' },
+ *     side: 'left',                          // 'left' | 'right'
+ *     heading: 'A new shape of work',
+ *     body: 'You stop typing characters and start describing intent.',
+ *     caption: 'Field notes, week 14',       // optional
+ *     reveal: 'staggered'                    // 'staggered' | 'instant'
+ *   }));
+ *
+ * The body string is split on \n into lines for the staggered reveal.
+ *
+ * Edit paths:
+ *   image.src / image.alt / heading / body / caption
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.ImageText = function (opts) {
+    const image = opts.image || {};
+    const side = opts.side === 'right' ? 'right' : 'left';
+    const reveal = opts.reveal || 'instant';
+    const heading = opts.heading || '';
+    const body = opts.body || '';
+    const caption = opts.caption || '';
+    const bodyLines = String(body).split('\n').filter(Boolean);
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="image-text image-text--${side}" data-stage-key="ImageText">
+            <figure class="it-figure" data-stage-key="ImageText/figure">
+              <img class="it-img"
+                src="${escape(image.src || '')}"
+                alt="${escape(image.alt || '')}"
+                data-stage-edit="image.src" />
+              <div class="it-img-frame"></div>
+            </figure>
+            <div class="it-text" data-stage-key="ImageText/text">
+              <h2 class="it-heading" data-stage-edit="heading" data-stage-key="ImageText/heading">${escape(heading)}</h2>
+              <div class="it-body" data-stage-key="ImageText/body">
+                ${bodyLines.map((line, i) => `
+                  <div class="it-line" data-stage-edit="body" data-line-index="${i}">${escape(line)}</div>
+                `).join('')}
+              </div>
+              ${caption ? `<div class="it-caption" data-stage-edit="caption" data-stage-key="ImageText/caption">${escape(caption)}</div>` : ''}
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.it-figure, .it-heading, .it-line, .it-caption')
+            .forEach(n => n.classList.add('in'));
+        }
+      },
+      init(el) {
+        if (reveal === 'instant') return () => {};
+        const timers = [];
+        const figure = el.querySelector('.it-figure');
+        const heading = el.querySelector('.it-heading');
+        const lines = el.querySelectorAll('.it-line');
+        const caption = el.querySelector('.it-caption');
+
+        timers.push(setTimeout(() => figure && figure.classList.add('in'), 100));
+        timers.push(setTimeout(() => heading && heading.classList.add('in'), 500));
+        lines.forEach((line, i) => {
+          timers.push(setTimeout(() => line.classList.add('in'), 800 + i * 220));
+        });
+        const captionDelay = 800 + lines.length * 220 + 200;
+        if (caption) {
+          timers.push(setTimeout(() => caption.classList.add('in'), captionDelay));
+        }
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.it-figure, .it-heading, .it-line, .it-caption')
+          .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/kinetic-text.js

@@ -0,0 +1,72 @@
+'use strict';
+
+/**
+ * Stage.KineticText — multi-line staggered reveal.
+ *
+ * Usage:
+ *   Stage.register(Stage.KineticText({
+ *     section: 2,
+ *     title: '02 · The shift',
+ *     lines: [
+ *       { text: 'You start with a sentence.', color: 'fg' },
+ *       { text: 'You end with the sentence',  color: 'dim' },
+ *       { text: 'rewritten.',                 color: 'accent', pause: 800 }
+ *     ],
+ *     pace: 800
+ *   }));
+ *
+ * Colors: 'fg' (default) | 'dim' | 'accent' | 'amber' | 'blue'.
+ * pause: ms before this specific line appears (in addition to pace).
+ *
+ * Layer-3 (inline edit): each line's text is tagged with
+ *   data-stage-edit="lines[N].text"
+ * Layer-2 (element-pin notes): each line has
+ *   data-stage-key="KineticText/line[N]"
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.KineticText = function (opts) {
+    const lines = opts.lines || [];
+    const pace = opts.pace ?? 800;
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.classList.add('kinetic');
+        el.innerHTML = '';
+        const wrap = document.createElement('div');
+        wrap.className = 'kinetic-wrap';
+        wrap.dataset.stageKey = 'KineticText';
+        lines.forEach((line, i) => {
+          const span = document.createElement('div');
+          span.className = 'line ' + (line.color || 'fg');
+          span.textContent = line.text;
+          span.dataset.stageEdit = `lines[${i}].text`;
+          span.dataset.stageKey = `KineticText/line[${i}]`;
+          wrap.appendChild(span);
+        });
+        el.appendChild(wrap);
+      },
+      init(el) {
+        const nodes = el.querySelectorAll('.line');
+        const timers = [];
+        let acc = 0;
+        nodes.forEach((n, i) => {
+          const line = lines[i] || {};
+          const delay = (line.pause ?? 0) + (i === 0 ? 200 : pace);
+          acc += delay;
+          timers.push(setTimeout(() => n.classList.add('in'), acc));
+        });
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.line').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      }
+    };
+  };
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/kpi.js

@@ -0,0 +1,106 @@
+'use strict';
+
+/**
+ * Stage.KPI — hero metric card with optional trend.
+ *
+ * Usage:
+ *   Stage.register(Stage.KPI({
+ *     section: 5,
+ *     title: '05 · weekly active',
+ *     value: 12480,
+ *     unit: '',
+ *     label: 'weekly active developers',
+ *     change: { value: 12.4, direction: 'up', period: 'vs. last week' },
+ *     color: 'accent',
+ *     icon: 'group'
+ *   }));
+ *
+ * On init the number counts up from 0 → value.
+ * Direction 'up' colors the trend green/accent, 'down' colors it red.
+ *
+ * Edit paths: value / unit / label / change.value / change.period
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.KPI = function (opts) {
+    const target = Number(opts.value) || 0;
+    const unit = opts.unit || '';
+    const label = opts.label || '';
+    const change = opts.change || null;
+    const color = opts.color || 'accent';
+    const icon = opts.icon || '';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const dirClass = change ? (change.direction === 'down' ? 'down' : 'up') : '';
+        const arrow = change
+          ? (change.direction === 'down' ? '▼' : '▲')
+          : '';
+        el.innerHTML = `
+          <div class="kpi kpi--${escape(color)}" data-stage-key="KPI">
+            <div class="kpi-head" data-stage-key="KPI/head">
+              ${icon ? `<span class="kpi-icon material-symbols-outlined">${escape(icon)}</span>` : ''}
+              <span class="kpi-label" data-stage-edit="label" data-stage-key="KPI/label">${escape(label)}</span>
+            </div>
+            <div class="kpi-figure" data-stage-key="KPI/figure">
+              <span class="kpi-num" data-stage-edit="value" data-target="${target}">0</span>${unit ? `<span class="kpi-unit" data-stage-edit="unit">${escape(unit)}</span>` : ''}
+            </div>
+            ${change ? `
+              <div class="kpi-change ${dirClass}" data-stage-key="KPI/change">
+                <span class="kpi-arrow">${arrow}</span>
+                <span class="kpi-change-num" data-stage-edit="change.value">${escape(String(change.value))}%</span>
+                <span class="kpi-change-period" data-stage-edit="change.period">${escape(change.period || '')}</span>
+              </div>
+            ` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        const numEl = el.querySelector('.kpi-num');
+        const card = el.querySelector('.kpi');
+        if (!numEl) return () => {};
+        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 value = target * eased;
+          numEl.textContent = isInt ? Math.floor(value).toLocaleString() : value.toFixed(1);
+          if (t < 1) rafId = requestAnimationFrame(tick);
+          else numEl.textContent = isInt ? target.toLocaleString() : String(target);
+        }
+        rafId = requestAnimationFrame(tick);
+
+        const timers = [];
+        timers.push(setTimeout(() => card && card.classList.add('in'), 80));
+        const changeEl = el.querySelector('.kpi-change');
+        if (changeEl) timers.push(setTimeout(() => changeEl.classList.add('in'), 1100));
+
+        return () => {
+          cancelAnimationFrame(rafId);
+          timers.forEach(clearTimeout);
+        };
+      },
+      replay(el) {
+        const numEl = el.querySelector('.kpi-num');
+        if (numEl) numEl.textContent = '0';
+        const card = el.querySelector('.kpi');
+        if (card) card.classList.remove('in');
+        const changeEl = el.querySelector('.kpi-change');
+        if (changeEl) changeEl.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);