stagecraft 0.1.0

package/src/components/agenda.js

@@ -0,0 +1,79 @@
+'use strict';
+
+/**
+ * Stage.Agenda — vertical schedule with time on left, label on right.
+ *
+ * Usage:
+ *   Stage.register(Stage.Agenda({
+ *     section: 63,
+ *     title: '63 · Today',
+ *     items: [
+ *       { time: '09:00', label: 'Welcome',        duration: '15 min', icon: 'waving_hand' },
+ *       { time: '09:15', label: 'Keynote',        duration: '45 min', icon: 'campaign' },
+ *       { time: '10:00', label: 'Coffee',         duration: '20 min', icon: 'coffee' }
+ *     ],
+ *     reveal: 'staggered'  // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Edit paths: items[i].time / .label / .duration / .icon
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Agenda = function (opts) {
+    const items = opts.items || [];
+    const reveal = opts.reveal || 'instant';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="agenda" data-stage-key="Agenda">
+            <div class="agenda-rail"></div>
+            ${items.map((it, i) => `
+              <div class="agenda-item" data-step="${i + 1}" data-stage-key="Agenda/item[${i}]">
+                ${it.time ? `<div class="agenda-time" data-stage-edit="items[${i}].time">${escape(it.time)}</div>` : `<div class="agenda-time"></div>`}
+                <div class="agenda-dot">
+                  ${it.icon ? `<span class="material-symbols-outlined" data-stage-edit="items[${i}].icon">${escape(it.icon)}</span>` : ''}
+                </div>
+                <div class="agenda-body">
+                  <div class="agenda-label" data-stage-edit="items[${i}].label">${escape(it.label || '')}</div>
+                  ${it.duration ? `<div class="agenda-duration" data-stage-edit="items[${i}].duration">${escape(it.duration)}</div>` : ''}
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.agenda-item').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.agenda-item'), 140, 180);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.agenda-item').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = items.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.agenda-item').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);

package/src/components/bar-chart.js

@@ -0,0 +1,162 @@
+'use strict';
+
+/**
+ * Stage.BarChart — simple horizontal or vertical bar chart.
+ *
+ * Usage:
+ *   Stage.register(Stage.BarChart({
+ *     section: 4,
+ *     title: '04 · where the hours go',
+ *     orientation: 'horizontal',   // default
+ *     bars: [
+ *       { label: 'Coding',    value: 6,  color: 'accent' },
+ *       { label: 'Meetings',  value: 3,  color: 'amber'  },
+ *       { label: 'Slack',     value: 2,  color: 'blue'   },
+ *       { label: 'Thinking',  value: 1,  color: 'dim'    }
+ *     ],
+ *     unit: ' h',
+ *     reveal: 'animated'  // 'instant' | 'animated' | 'per-click'
+ *   }));
+ *
+ * `maxValue` defaults to max(values) * 1.1.
+ * Animation: CSS transitions on width/height when `.fill` class lands.
+ *
+ * Layer-3 (inline edit): bars[i].label, bars[i].value, unit, title.
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.BarChart = function (opts) {
+    const bars = opts.bars || [];
+    const orientation = opts.orientation === 'vertical' ? 'vertical' : 'horizontal';
+    const unit = opts.unit || '';
+    const reveal = opts.reveal || 'instant';
+    const values = bars.map(b => Number(b.value) || 0);
+    const computedMax = values.length ? Math.max(...values) : 1;
+    const maxValue = Number(opts.maxValue) > 0
+      ? Number(opts.maxValue)
+      : (computedMax > 0 ? computedMax * 1.1 : 1);
+
+    function pct(v) {
+      const p = (Number(v) || 0) / maxValue * 100;
+      return Math.max(0, Math.min(100, p));
+    }
+
+    function formatValue(v) {
+      // Keep simple — leave numeric formatting to the caller via value/unit.
+      return `${v}${unit}`;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const sizeProp = orientation === 'vertical' ? 'height' : 'width';
+        const rows = bars.map((b, i) => {
+          const colorCls = b.color ? ` ${b.color}` : '';
+          const p = pct(b.value);
+          return `
+            <div class="bar-row${colorCls}"
+                 data-step="${i + 1}"
+                 data-pct="${p}"
+                 data-stage-key="BarChart/bar[${i}]">
+              <div class="bar-label" data-stage-edit="bars[${i}].label">${escape(b.label || '')}</div>
+              <div class="bar-track" data-stage-key="BarChart/bar[${i}]/track">
+                <div class="bar-fill" style="${sizeProp}: 0%;"></div>
+              </div>
+              <div class="bar-value" data-stage-edit="bars[${i}].value">${escape(formatValue(b.value))}</div>
+            </div>
+          `;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="barchart ${orientation}" data-stage-key="BarChart">
+            ${rows}
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          // Place rows + fills in their final state with no transition.
+          el.querySelectorAll('.bar-row').forEach(n => n.classList.add('in'));
+          el.querySelectorAll('.bar-row').forEach(row => {
+            const fill = row.querySelector('.bar-fill');
+            const p = row.dataset.pct;
+            if (fill) {
+              // Suppress the transition for the initial paint only.
+              fill.style.transition = 'none';
+              fill.style[sizeProp] = `${p}%`;
+              // Force reflow then restore transition.
+              // eslint-disable-next-line no-unused-expressions
+              fill.offsetWidth;
+              fill.style.transition = '';
+            }
+          });
+        }
+      }
+    };
+
+    const sizeProp = orientation === 'vertical' ? 'height' : 'width';
+
+    function fillRow(row, immediate) {
+      const fill = row.querySelector('.bar-fill');
+      if (!fill) return;
+      const p = row.dataset.pct;
+      if (immediate) {
+        fill.style.transition = 'none';
+        fill.style[sizeProp] = `${p}%`;
+        // eslint-disable-next-line no-unused-expressions
+        fill.offsetWidth;
+        fill.style.transition = '';
+      } else {
+        fill.style[sizeProp] = `${p}%`;
+      }
+    }
+
+    if (reveal === 'animated') {
+      slide.init = function (el) {
+        const rows = Array.from(el.querySelectorAll('.bar-row'));
+        const timers = [];
+        rows.forEach((row, i) => {
+          timers.push(setTimeout(() => {
+            row.classList.add('in');
+            fillRow(row, false);
+          }, 200 + i * 220));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.bar-row').forEach(row => {
+          row.classList.remove('in');
+          const fill = row.querySelector('.bar-fill');
+          if (fill) {
+            fill.style.transition = 'none';
+            fill.style[sizeProp] = '0%';
+            // eslint-disable-next-line no-unused-expressions
+            fill.offsetWidth;
+            fill.style.transition = '';
+          }
+        });
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = bars.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.bar-row').forEach((row) => {
+          const s = Number(row.dataset.step);
+          const on = s <= step;
+          row.classList.toggle('in', on);
+          const fill = row.querySelector('.bar-fill');
+          if (fill) fill.style[sizeProp] = on ? `${row.dataset.pct}%` : '0%';
+        });
+      };
+    }
+
+    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/before-after.js

@@ -0,0 +1,135 @@
+'use strict';
+
+/**
+ * Stage.BeforeAfter — split comparison: image-vs-image or text-vs-text.
+ *
+ * Usage (text vs text):
+ *   Stage.register(Stage.BeforeAfter({
+ *     section: 69,
+ *     title: '69 · Before / After',
+ *     before: { label: 'Before', text: 'Manual reviews. 3-day cycles.' },
+ *     after:  { label: 'After',  text: 'AI-drafted reviews. 30-minute cycles.' },
+ *     reveal: 'staggered'  // 'instant' | 'staggered' | 'slider'
+ *   }));
+ *
+ * Usage (image vs image with slider):
+ *   Stage.register(Stage.BeforeAfter({
+ *     section: 69,
+ *     before: { label: 'Before', image: 'https://picsum.photos/seed/before/1200/800' },
+ *     after:  { label: 'After',  image: 'https://picsum.photos/seed/after/1200/800' },
+ *     reveal: 'slider'
+ *   }));
+ *
+ * `reveal: 'slider'` animates a diagonal divider from 0 to 50% on init (image mode).
+ *
+ * Edit paths: before.label / before.text / after.label / after.text
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.BeforeAfter = function (opts) {
+    const before = opts.before || {};
+    const after = opts.after || {};
+    const reveal = opts.reveal || 'instant';
+    const isImage = !!(before.image || after.image);
+    const mode = isImage ? 'image' : 'text';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        if (mode === 'image') {
+          el.innerHTML = `
+            <div class="before-after before-after--image" data-stage-key="BeforeAfter" style="--ba-clip: 0%;">
+              <div class="ba-pane ba-before" data-stage-key="BeforeAfter/before">
+                ${before.image ? `<img class="ba-img" src="${escape(before.image)}" alt="${escape(before.label || 'before')}">` : ''}
+                <div class="ba-label ba-label--left">
+                  <span class="ba-tag">${escape(before.label || 'Before')}</span>
+                </div>
+              </div>
+              <div class="ba-pane ba-after" data-stage-key="BeforeAfter/after">
+                ${after.image ? `<img class="ba-img" src="${escape(after.image)}" alt="${escape(after.label || 'after')}">` : ''}
+                <div class="ba-label ba-label--right">
+                  <span class="ba-tag ba-tag--accent">${escape(after.label || 'After')}</span>
+                </div>
+              </div>
+              <div class="ba-divider"></div>
+            </div>
+          `;
+        } else {
+          el.innerHTML = `
+            <div class="before-after before-after--text" data-stage-key="BeforeAfter">
+              <div class="ba-col ba-before" data-stage-key="BeforeAfter/before">
+                <div class="ba-col-tag">${escape(before.label || 'Before')}</div>
+                <div class="ba-col-text" data-stage-edit="before.text">${escape(before.text || '')}</div>
+              </div>
+              <div class="ba-arrow material-symbols-outlined">arrow_forward</div>
+              <div class="ba-col ba-after" data-stage-key="BeforeAfter/after">
+                <div class="ba-col-tag ba-col-tag--accent">${escape(after.label || 'After')}</div>
+                <div class="ba-col-text" data-stage-edit="after.text">${escape(after.text || '')}</div>
+              </div>
+            </div>
+          `;
+        }
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.ba-pane, .ba-col, .ba-arrow').forEach(n => n.classList.add('in'));
+          if (mode === 'image') {
+            const root = el.querySelector('.before-after--image');
+            if (root) root.style.setProperty('--ba-clip', '50%');
+          }
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const nodes = mode === 'image'
+          ? el.querySelectorAll('.ba-pane')
+          : el.querySelectorAll('.ba-col, .ba-arrow');
+        const cleanup = Stage.staggerIn(nodes, 220, 200);
+        let extra;
+        if (mode === 'image') {
+          extra = setTimeout(() => {
+            const root = el.querySelector('.before-after--image');
+            if (root) root.style.setProperty('--ba-clip', '50%');
+          }, 600);
+        }
+        return () => { cleanup(); if (extra) clearTimeout(extra); };
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.ba-pane, .ba-col, .ba-arrow').forEach(n => n.classList.remove('in'));
+        if (mode === 'image') {
+          const root = el.querySelector('.before-after--image');
+          if (root) root.style.setProperty('--ba-clip', '0%');
+        }
+        return this.init(el);
+      };
+    } else if (reveal === 'slider') {
+      slide.init = function (el) {
+        el.querySelectorAll('.ba-pane, .ba-col, .ba-arrow').forEach(n => n.classList.add('in'));
+        const root = el.querySelector('.before-after--image');
+        if (!root) return;
+        root.style.setProperty('--ba-clip', '0%');
+        // Force reflow then animate.
+        // eslint-disable-next-line no-unused-expressions
+        root.offsetWidth;
+        const t = setTimeout(() => root.style.setProperty('--ba-clip', '50%'), 200);
+        return () => clearTimeout(t);
+      };
+      slide.replay = function (el) {
+        const root = el.querySelector('.before-after--image');
+        if (root) root.style.setProperty('--ba-clip', '0%');
+        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/bento.js

@@ -0,0 +1,73 @@
+'use strict';
+
+/**
+ * Stage.Bento — modular bento grid of cells.
+ *
+ * Usage:
+ *   Stage.register(Stage.Bento({
+ *     section: 7,
+ *     title: '07 · The kit',
+ *     cells: [
+ *       { span: 2, heading: 'Agents', body: 'long-running, async, tool-using.', color: 'accent' },
+ *       { heading: 'Reviews', body: 'human in the loop.' },
+ *       { heading: 'Eval',    body: 'measure, then ship.', color: 'amber' },
+ *       { heading: 'Specs',   image: { src: 'https://...' } },
+ *       { heading: 'Notes',   body: 'cheap, persistent.', color: 'blue' }
+ *     ]
+ *   }));
+ *
+ * Layout: 4-column CSS grid. Cells default to 1 col, `span: 2` makes a cell wider.
+ *
+ * Edit paths:
+ *   cells[i].heading / cells[i].body / cells[i].image.src
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Bento = function (opts) {
+    const cells = opts.cells || [];
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="bento" data-stage-key="Bento">
+            ${cells.map((c, i) => {
+              const colorClass = c.color ? `bento-cell--${c.color}` : '';
+              const spanClass = c.span === 2 ? 'bento-cell--span-2' : '';
+              const hasImage = c.image && c.image.src;
+              const bg = hasImage
+                ? `style="background-image: linear-gradient(180deg, rgba(10,10,10,0.45), rgba(10,10,10,0.85)), url('${escape(c.image.src)}')"`
+                : '';
+              return `
+                <div class="bento-cell ${spanClass} ${colorClass} ${hasImage ? 'bento-cell--image' : ''}"
+                     ${bg}
+                     data-stage-key="Bento/cell[${i}]">
+                  <div class="bento-cell-body">
+                    <div class="bento-heading" data-stage-edit="cells[${i}].heading">${escape(c.heading || '')}</div>
+                    ${c.body ? `<div class="bento-body" data-stage-edit="cells[${i}].body">${escape(c.body)}</div>` : ''}
+                  </div>
+                </div>
+              `;
+            }).join('')}
+          </div>
+        `;
+      },
+      init(el) {
+        const nodes = el.querySelectorAll('.bento-cell');
+        return Stage.staggerIn(nodes, 120, 150);
+      },
+      replay(el) {
+        el.querySelectorAll('.bento-cell').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/big-number.js

@@ -0,0 +1,87 @@
+'use strict';
+
+/**
+ * Stage.BigNumber — one massive headline number with a label.
+ *
+ * Usage:
+ *   Stage.register(Stage.BigNumber({
+ *     section: 6,
+ *     title: '06 · Cost collapse',
+ *     number: 92,
+ *     unit: '%',                              // optional
+ *     label: 'drop in cost-per-token',
+ *     caption: '2023 → 2026, frontier models' // optional
+ *   }));
+ *
+ * On init the number counts up from 0 → target in ~1.2s.
+ *
+ * Edit paths: number / unit / label / caption
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.BigNumber = function (opts) {
+    const target = Number(opts.number) || 0;
+    const unit = opts.unit || '';
+    const label = opts.label || '';
+    const caption = opts.caption || '';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="big-number" data-stage-key="BigNumber">
+            <div class="bn-figure" data-stage-key="BigNumber/figure">
+              <span class="bn-num" data-stage-edit="number" data-target="${target}">0</span>${unit ? `<span class="bn-unit" data-stage-edit="unit">${escape(unit)}</span>` : ''}
+            </div>
+            <div class="bn-label" data-stage-edit="label" data-stage-key="BigNumber/label">${escape(label)}</div>
+            ${caption ? `<div class="bn-caption" data-stage-edit="caption" data-stage-key="BigNumber/caption">${escape(caption)}</div>` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        const numEl = el.querySelector('.bn-num');
+        const unitEl = el.querySelector('.bn-unit');
+        const labelEl = el.querySelector('.bn-label');
+        const capEl = el.querySelector('.bn-caption');
+        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);
+          // easeOutCubic
+          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(() => unitEl && unitEl.classList.add('in'), 200));
+        timers.push(setTimeout(() => labelEl && labelEl.classList.add('in'), 600));
+        timers.push(setTimeout(() => capEl && capEl.classList.add('in'), 1100));
+
+        return () => {
+          cancelAnimationFrame(rafId);
+          timers.forEach(clearTimeout);
+        };
+      },
+      replay(el) {
+        const numEl = el.querySelector('.bn-num');
+        if (numEl) numEl.textContent = '0';
+        el.querySelectorAll('.bn-unit, .bn-label, .bn-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/callout.js

@@ -0,0 +1,75 @@
+'use strict';
+
+/**
+ * Stage.Callout — sidebar callout box with colored left border and icon.
+ *
+ * Usage:
+ *   Stage.register(Stage.Callout({
+ *     section: 67,
+ *     title: '67 · Callout',
+ *     kind: 'tip',          // 'info' | 'tip' | 'warning' | 'danger' | 'success'
+ *     icon: 'lightbulb',    // optional override; default per kind
+ *     heading: 'Pro tip',
+ *     body: 'Keep your specs short and your reviews shorter.',
+ *     reveal: 'staggered'   // 'instant' | 'staggered'
+ *   }));
+ *
+ * Edit paths: heading / body
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  const DEFAULTS = {
+    info:    { icon: 'info'         },
+    tip:     { icon: 'lightbulb'    },
+    warning: { icon: 'warning'      },
+    danger:  { icon: 'error'        },
+    success: { icon: 'check_circle' }
+  };
+
+  Stage.Callout = function (opts) {
+    const kind = DEFAULTS[opts.kind] ? opts.kind : 'info';
+    const icon = opts.icon || DEFAULTS[kind].icon;
+    const reveal = opts.reveal || 'instant';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="callout callout--${kind}" data-stage-key="Callout">
+            <span class="callout-icon material-symbols-outlined">${escape(icon)}</span>
+            <div class="callout-body">
+              <div class="callout-heading" data-stage-edit="heading" data-stage-key="Callout/heading">${escape(opts.heading || '')}</div>
+              <div class="callout-text" data-stage-edit="body" data-stage-key="Callout/body">${escape(opts.body || '')}</div>
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelector('.callout')?.classList.add('in');
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const co = el.querySelector('.callout');
+        const t1 = setTimeout(() => co?.classList.add('in'), 120);
+        const t2 = setTimeout(() => co?.classList.add('reveal-text'), 480);
+        return () => { clearTimeout(t1); clearTimeout(t2); };
+      };
+      slide.replay = function (el) {
+        el.querySelector('.callout')?.classList.remove('in', 'reveal-text');
+        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);