stagecraft 0.1.0

package/src/components/checklist.js

@@ -0,0 +1,81 @@
+'use strict';
+
+/**
+ * Stage.Checklist — items with checkbox icons; `done: true` items render checked.
+ *
+ * Usage:
+ *   Stage.register(Stage.Checklist({
+ *     section: 64,
+ *     title: '64 · Pre-launch',
+ *     items: [
+ *       { text: 'Specs reviewed', done: true },
+ *       { text: 'Tests green',    done: true,  body: 'CI passing on all branches' },
+ *       { text: 'Docs updated' },
+ *       { text: 'Comms drafted' }
+ *     ],
+ *     reveal: 'staggered'  // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Style choice: done items show a filled accent checkmark + softened text
+ * (no strikethrough — looked cleaner). Undone items show an empty box outline.
+ *
+ * Edit paths: items[i].text / .body
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Checklist = 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="checklist" data-stage-key="Checklist">
+            ${items.map((it, i) => `
+              <div class="checklist-item ${it.done ? 'is-done' : ''}"
+                   data-step="${i + 1}"
+                   data-stage-key="Checklist/item[${i}]">
+                <span class="checklist-box material-symbols-outlined">${it.done ? 'check_box' : 'check_box_outline_blank'}</span>
+                <div class="checklist-body">
+                  <div class="checklist-text" data-stage-edit="items[${i}].text">${escape(it.text || '')}</div>
+                  ${it.body ? `<div class="checklist-sub" data-stage-edit="items[${i}].body">${escape(it.body)}</div>` : ''}
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.checklist-item').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.checklist-item'), 130, 180);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.checklist-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('.checklist-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/code-block.js

@@ -0,0 +1,141 @@
+'use strict';
+
+/**
+ * Stage.CodeBlock — monospace code block with optional reveal animations.
+ *
+ * Usage:
+ *   Stage.register(Stage.CodeBlock({
+ *     section: 5,
+ *     title: '05 · the patch',
+ *     fileName: 'src/agent.ts',
+ *     language: 'typescript',
+ *     code: `function agent(input) {\n  return loop(input);\n}`,
+ *     highlight: [2],                    // 1-based line numbers
+ *     reveal: 'typewriter'               // 'typewriter' | 'lines' | 'instant'
+ *   }));
+ *
+ * Edit paths: code / fileName
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.CodeBlock = function (opts) {
+    const code = String(opts.code || '');
+    const fileName = opts.fileName || '';
+    const language = opts.language || '';
+    const highlight = new Set((opts.highlight || []).map(Number));
+    const reveal = opts.reveal || 'instant';
+
+    const lines = code.split('\n');
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const lineHtml = lines.map((line, i) => {
+          const lineNum = i + 1;
+          const hl = highlight.has(lineNum) ? ' cb-line--highlight' : '';
+          return `
+            <div class="cb-line${hl}" data-line="${lineNum}" data-stage-key="CodeBlock/line[${i}]">
+              <span class="cb-line-num">${lineNum}</span>
+              <span class="cb-line-text">${escape(line) || '&nbsp;'}</span>
+            </div>
+          `;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="codeblock" data-stage-key="CodeBlock">
+            ${fileName ? `
+              <div class="cb-head" data-stage-key="CodeBlock/head">
+                <span class="cb-dots"><span></span><span></span><span></span></span>
+                <span class="cb-file" data-stage-edit="fileName">${escape(fileName)}</span>
+                ${language ? `<span class="cb-lang">${escape(language)}</span>` : ''}
+              </div>
+            ` : ''}
+            <div class="cb-body" data-stage-edit="code">${lineHtml}</div>
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.cb-line').forEach(n => n.classList.add('in'));
+        }
+      },
+      init(el) {
+        const lineNodes = Array.from(el.querySelectorAll('.cb-line'));
+        const timers = [];
+        const rafs = [];
+
+        if (reveal === 'instant') {
+          lineNodes.forEach(n => n.classList.add('in'));
+          return () => {};
+        }
+
+        if (reveal === 'lines') {
+          lineNodes.forEach((n, i) => {
+            timers.push(setTimeout(() => n.classList.add('in'), 80 + i * 90));
+          });
+          return () => timers.forEach(clearTimeout);
+        }
+
+        if (reveal === 'typewriter') {
+          // Hide all line texts, then type them sequentially char-by-char.
+          const originals = lineNodes.map(n => {
+            const txt = n.querySelector('.cb-line-text');
+            return txt ? lines[Number(n.dataset.line) - 1] : '';
+          });
+          lineNodes.forEach(n => {
+            n.classList.add('in');
+            const txt = n.querySelector('.cb-line-text');
+            if (txt) txt.textContent = '';
+          });
+
+          let lineIdx = 0;
+          let charIdx = 0;
+          const speed = 18; // ms/char
+          function step() {
+            if (lineIdx >= lineNodes.length) return;
+            const node = lineNodes[lineIdx];
+            const txt = node.querySelector('.cb-line-text');
+            const target = originals[lineIdx] || '';
+            if (!txt) { lineIdx++; charIdx = 0; rafs.push(requestAnimationFrame(step)); return; }
+            if (charIdx <= target.length) {
+              txt.textContent = target.slice(0, charIdx) || ' ';
+              charIdx++;
+              const id = setTimeout(step, speed);
+              timers.push(id);
+            } else {
+              lineIdx++;
+              charIdx = 0;
+              const id = setTimeout(step, 40);
+              timers.push(id);
+            }
+          }
+          const startId = setTimeout(step, 150);
+          timers.push(startId);
+          return () => {
+            timers.forEach(clearTimeout);
+            rafs.forEach(cancelAnimationFrame);
+          };
+        }
+
+        return () => {};
+      },
+      replay(el) {
+        el.querySelectorAll('.cb-line').forEach(n => n.classList.remove('in'));
+        // Restore text content
+        const lineNodes = el.querySelectorAll('.cb-line');
+        lineNodes.forEach((n, i) => {
+          const txt = n.querySelector('.cb-line-text');
+          if (txt) txt.innerHTML = escape(lines[i] || '') || '&nbsp;';
+        });
+        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/code-diff.js

@@ -0,0 +1,98 @@
+'use strict';
+
+/**
+ * Stage.CodeDiff — git-style diff view with add/remove/context lines.
+ *
+ * Usage:
+ *   Stage.register(Stage.CodeDiff({
+ *     section: 5,
+ *     title: '05 · the refactor',
+ *     fileName: 'src/server.ts',
+ *     language: 'typescript',
+ *     lines: [
+ *       { type: 'context', text: 'function handle(req) {' },
+ *       { type: 'remove',  text: '  return JSON.parse(req.body);' },
+ *       { type: 'add',     text: '  return safeParse(req.body);' },
+ *       { type: 'context', text: '}' }
+ *     ],
+ *     reveal: 'staggered'                // 'instant' | 'staggered'
+ *   }));
+ *
+ * Edit paths: lines[i].text / fileName
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.CodeDiff = function (opts) {
+    const fileName = opts.fileName || '';
+    const language = opts.language || '';
+    const lines = opts.lines || [];
+    const reveal = opts.reveal || 'instant';
+
+    // Track plus/minus counts for header summary
+    const adds = lines.filter(l => l.type === 'add').length;
+    const removes = lines.filter(l => l.type === 'remove').length;
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const lineHtml = lines.map((line, i) => {
+          const type = line.type || 'context';
+          const marker = type === 'add' ? '+' : type === 'remove' ? '-' : ' ';
+          return `
+            <div class="cd-line cd-line--${escape(type)}"
+                 data-i="${i}"
+                 data-stage-key="CodeDiff/line[${i}]">
+              <span class="cd-marker">${marker}</span>
+              <span class="cd-text" data-stage-edit="lines[${i}].text">${escape(line.text || '') || '&nbsp;'}</span>
+            </div>
+          `;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="codediff" data-stage-key="CodeDiff">
+            ${fileName ? `
+              <div class="cd-head" data-stage-key="CodeDiff/head">
+                <span class="cd-file" data-stage-edit="fileName">${escape(fileName)}</span>
+                ${language ? `<span class="cd-lang">${escape(language)}</span>` : ''}
+                <span class="cd-stats">
+                  <span class="cd-adds">+${adds}</span>
+                  <span class="cd-removes">-${removes}</span>
+                </span>
+              </div>
+            ` : ''}
+            <div class="cd-body">${lineHtml}</div>
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.cd-line').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const lineNodes = Array.from(el.querySelectorAll('.cd-line'));
+        const timers = [];
+        lineNodes.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 120 + i * 130));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.cd-line').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/compare.js

@@ -0,0 +1,85 @@
+'use strict';
+
+/**
+ * Stage.Compare — two-column comparison (old vs new).
+ *
+ * Usage:
+ *   Stage.register(Stage.Compare({
+ *     section: 4,
+ *     title: 'before / after',
+ *     left:  { heading: 'OLD', items: ['type', 'compile', 'run'], style: 'strikethrough' },
+ *     right: { heading: 'NEW', items: ['describe', 'review', 'ship'], style: 'accent' },
+ *     reveal: 'staggered' // | 'instant' | 'per-click'
+ *   }));
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Compare = function (opts) {
+    const left = opts.left || { heading: '', items: [] };
+    const right = opts.right || { heading: '', items: [] };
+    const reveal = opts.reveal || 'instant';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="compare" data-stage-key="Compare">
+            <div class="compare-col" data-stage-key="Compare/left">
+              <div class="compare-h ${classFor(left.style)}" data-stage-edit="left.heading">${escape(left.heading)}</div>
+              <ul class="compare-list ${left.style || ''}">
+                ${left.items.map((it, i) => `<li data-step="${i + 1}" data-stage-edit="left.items[${i}]" data-stage-key="Compare/left/item[${i}]">${escape(it)}</li>`).join('')}
+              </ul>
+            </div>
+            <div class="compare-divider"></div>
+            <div class="compare-col" data-stage-key="Compare/right">
+              <div class="compare-h ${classFor(right.style)}" data-stage-edit="right.heading">${escape(right.heading)}</div>
+              <ul class="compare-list ${right.style || ''}">
+                ${right.items.map((it, i) => `<li data-step="${left.items.length + i + 1}" data-stage-edit="right.items[${i}]" data-stage-key="Compare/right/item[${i}]">${escape(it)}</li>`).join('')}
+              </ul>
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('li').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const all = [
+          ...el.querySelectorAll('.compare-col:first-child li'),
+          ...el.querySelectorAll('.compare-col:last-child li')
+        ];
+        return Stage.staggerIn(all, 200, 200);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('li').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = left.items.length + right.items.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('li').forEach(n => {
+          n.classList.toggle('in', Number(n.dataset.step) <= step);
+        });
+      };
+    }
+
+    return slide;
+  };
+
+  function classFor(style) {
+    if (style === 'strikethrough') return 'old';
+    if (style === 'accent') return 'new';
+    return '';
+  }
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+})(typeof window !== 'undefined' ? window : globalThis);

package/src/components/counter.js

@@ -0,0 +1,80 @@
+'use strict';
+
+/**
+ * Stage.Counter — large numeric counters with optional live tick.
+ *
+ * Usage:
+ *   Stage.register(Stage.Counter({
+ *     section: 4,
+ *     title: 'live stats',
+ *     blocks: [
+ *       { label: 'Lines written',  start: 0, perSecond: 47, color: 'accent' },
+ *       { label: 'Bugs introduced', start: 0, perSecond: 3,  color: 'amber' }
+ *     ],
+ *     footer: 'Both numbers are wrong.'
+ *   }));
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Counter = function (opts) {
+    const blocks = opts.blocks || [];
+    const footer = opts.footer || '';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="counter-wrap" data-stage-key="Counter">
+            ${blocks.map((b, i) => `
+              <div class="counter-block" data-stage-key="Counter/block[${i}]">
+                <div class="counter-label ${b.color || ''}">
+                  <span class="dot"></span><span data-stage-edit="blocks[${i}].label">${escape(b.label)}</span>
+                </div>
+                <div class="counter-num ${b.color || ''}" data-i="${i}">${b.start ?? 0}</div>
+              </div>
+            `).join('')}
+          </div>
+          ${footer ? `<div class="counter-foot" data-stage-edit="footer">${footer}</div>` : ''}
+        `;
+      },
+      init(el) {
+        const timers = [];
+        const nums = el.querySelectorAll('.counter-num');
+        blocks.forEach((b, i) => {
+          if (!b.perSecond) return;
+          let value = Number(b.start || 0);
+          const target = nums[i];
+          if (!target) return;
+          const tickMs = Math.max(20, Math.floor(1000 / Math.max(1, b.perSecond)));
+          const inc = b.perSecond * tickMs / 1000;
+          const id = setInterval(() => {
+            value += inc;
+            target.textContent = Math.floor(value).toLocaleString();
+          }, tickMs);
+          timers.push(() => clearInterval(id));
+        });
+        if (footer) {
+          const f = el.querySelector('.counter-foot');
+          const t = setTimeout(() => f && f.classList.add('visible'), 3000);
+          timers.push(() => clearTimeout(t));
+        }
+        return () => timers.forEach(fn => fn());
+      },
+      replay(el) {
+        const nums = el.querySelectorAll('.counter-num');
+        blocks.forEach((b, i) => { if (nums[i]) nums[i].textContent = b.start ?? 0; });
+        const f = el.querySelector('.counter-foot');
+        if (f) f.classList.remove('visible');
+        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/cta.js

@@ -0,0 +1,69 @@
+'use strict';
+
+/**
+ * Stage.CTA — large call-to-action card.
+ *
+ * Usage:
+ *   Stage.register(Stage.CTA({
+ *     section: 66,
+ *     title: '66 · Take action',
+ *     headline: 'Ship the next release with confidence.',
+ *     body: 'Start your 14-day trial. No credit card.',
+ *     action: { label: 'Start free trial', hint: 'No setup required' },
+ *     accent: true
+ *   }));
+ *
+ * The button is visual only — it does not navigate.
+ *
+ * Edit paths: headline / body / action.label / action.hint
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.CTA = function (opts) {
+    const action = opts.action || {};
+    const accent = opts.accent === true;
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="cta ${accent ? 'cta--accent' : ''}" data-stage-key="CTA">
+            <div class="cta-headline" data-stage-edit="headline" data-stage-key="CTA/headline">${escape(opts.headline || '')}</div>
+            ${opts.body ? `<div class="cta-body" data-stage-edit="body" data-stage-key="CTA/body">${escape(opts.body)}</div>` : ''}
+            <div class="cta-action" data-stage-key="CTA/action">
+              <span class="cta-button">
+                <span class="cta-button-label" data-stage-edit="action.label">${escape(action.label || 'Get started')}</span>
+                <span class="cta-button-arrow material-symbols-outlined">arrow_forward</span>
+              </span>
+              ${action.hint ? `<span class="cta-hint" data-stage-edit="action.hint">${escape(action.hint)}</span>` : ''}
+            </div>
+          </div>
+        `;
+      },
+      init(el) {
+        const nodes = [
+          el.querySelector('.cta-headline'),
+          el.querySelector('.cta-body'),
+          el.querySelector('.cta-action')
+        ].filter(Boolean);
+        const timers = [];
+        nodes.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 150 + i * 250));
+        });
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.cta-headline, .cta-body, .cta-action').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);