stagecraft 0.1.0

package/src/components/steps.js

@@ -0,0 +1,83 @@
+'use strict';
+
+/**
+ * Stage.Steps — numbered tutorial steps (big numeral + label + body).
+ *
+ * Usage:
+ *   Stage.register(Stage.Steps({
+ *     section: 65,
+ *     title: '65 · How it works',
+ *     orientation: 'horizontal',   // 'horizontal' | 'vertical'
+ *     steps: [
+ *       { number: '01', label: 'Install',   body: 'Run npx stagecraft init.', icon: 'download' },
+ *       { number: '02', label: 'Write',     body: 'Add slides to slides/.',  icon: 'edit' },
+ *       { number: '03', label: 'Present',   body: 'Open in any browser.',    icon: 'present_to_all' }
+ *     ],
+ *     reveal: 'staggered'   // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Steps differ from ProcessFlow: ProcessFlow is about *flow* (arrows between
+ * states); Steps is about *teaching* (numeral + explanation per step).
+ *
+ * Edit paths: steps[i].number / .label / .body / .icon
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Steps = function (opts) {
+    const stepsList = opts.steps || [];
+    const reveal = opts.reveal || 'instant';
+    const orientation = opts.orientation === 'vertical' ? 'vertical' : 'horizontal';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="steps steps--${orientation}" data-stage-key="Steps">
+            ${stepsList.map((s, i) => `
+              <div class="step-card" data-step="${i + 1}" data-stage-key="Steps/step[${i}]">
+                <div class="step-numeral" data-stage-edit="steps[${i}].number">${escape(s.number || String(i + 1).padStart(2, '0'))}</div>
+                <div class="step-content">
+                  <div class="step-head">
+                    ${s.icon ? `<span class="step-icon material-symbols-outlined" data-stage-edit="steps[${i}].icon">${escape(s.icon)}</span>` : ''}
+                    <div class="step-label" data-stage-edit="steps[${i}].label">${escape(s.label || '')}</div>
+                  </div>
+                  ${s.body ? `<div class="step-body" data-stage-edit="steps[${i}].body">${escape(s.body)}</div>` : ''}
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.step-card').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.step-card'), 200, 220);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.step-card').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = stepsList.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.step-card').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/swot.js

@@ -0,0 +1,110 @@
+'use strict';
+
+/**
+ * Stage.SWOT — 2x2 SWOT grid (Strengths / Weaknesses / Opportunities / Threats).
+ *
+ * Usage:
+ *   Stage.register(Stage.SWOT({
+ *     section: 5,
+ *     title: '05 · SWOT',
+ *     strengths:     ['fast iteration', 'strong brand', 'tier-1 talent'],
+ *     weaknesses:    ['legacy code', 'fragmented data'],
+ *     opportunities: ['agentic tooling', 'developer SaaS reset'],
+ *     threats:       ['foundation model race', 'commoditisation'],
+ *     reveal: 'staggered'   // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * S = accent · W = amber · O = blue · T = red.
+ *
+ * Edit paths: strengths[i] / weaknesses[i] / opportunities[i] / threats[i]
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.SWOT = function (opts) {
+    const strengths     = opts.strengths     || [];
+    const weaknesses    = opts.weaknesses    || [];
+    const opportunities = opts.opportunities || [];
+    const threats       = opts.threats       || [];
+    const reveal        = opts.reveal        || 'instant';
+
+    const cells = [
+      { key: 'strengths',     label: 'Strengths',     short: 'S', color: 'accent', items: strengths     },
+      { key: 'weaknesses',    label: 'Weaknesses',    short: 'W', color: 'amber',  items: weaknesses    },
+      { key: 'opportunities', label: 'Opportunities', short: 'O', color: 'blue',   items: opportunities },
+      { key: 'threats',       label: 'Threats',       short: 'T', color: 'red',    items: threats       }
+    ];
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const cellHtml = cells.map((cell, idx) => {
+          const items = cell.items.map((t, i) => `
+            <li class="swot-item" data-stage-edit="${cell.key}[${i}]" data-stage-key="SWOT/${cell.key}/item[${i}]">${escape(t)}</li>
+          `).join('');
+          return `
+            <div class="swot-cell swot-cell--${cell.color}"
+                 data-quad-index="${idx}"
+                 data-stage-key="SWOT/${cell.key}">
+              <div class="swot-head">
+                <span class="swot-letter">${cell.short}</span>
+                <span class="swot-title">${escape(cell.label)}</span>
+              </div>
+              <ul class="swot-list">${items}</ul>
+            </div>
+          `;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="swot" data-stage-key="SWOT">
+            ${cellHtml}
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.swot-cell, .swot-item').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const cellNodes = Array.from(el.querySelectorAll('.swot-cell'));
+        const timers = [];
+        cellNodes.forEach((cell, i) => {
+          timers.push(setTimeout(() => {
+            cell.classList.add('in');
+            const items = cell.querySelectorAll('.swot-item');
+            items.forEach((it, j) => {
+              timers.push(setTimeout(() => it.classList.add('in'), 200 + j * 120));
+            });
+          }, 200 + i * 350));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.swot-cell, .swot-item').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = cells.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.swot-cell').forEach(n => {
+          const idx = Number(n.dataset.quadIndex);
+          const on = idx < step;
+          n.classList.toggle('in', on);
+          n.querySelectorAll('.swot-item').forEach(it => it.classList.toggle('in', on));
+        });
+      };
+    }
+
+    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/team-grid.js

@@ -0,0 +1,87 @@
+'use strict';
+
+/**
+ * Stage.TeamGrid — grid of people cards with photo, name, role, bio, socials.
+ *
+ * Usage:
+ *   Stage.register(Stage.TeamGrid({
+ *     section: 62,
+ *     title: '62 · The team',
+ *     columns: 3,
+ *     people: [
+ *       { name: 'Avery Chen', role: 'CEO',
+ *         photo: 'https://picsum.photos/seed/avery/400/400',
+ *         bio: 'Ex-Stripe. Loves type systems.',
+ *         social: { linkedin: '#', twitter: '#', github: '#' } }
+ *     ],
+ *     reveal: 'staggered'   // 'instant' | 'staggered'
+ *   }));
+ *
+ * Edit paths: people[i].name / .role / .bio
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  const SOCIAL_ICONS = {
+    linkedin: 'work',
+    twitter: 'alternate_email',
+    github: 'code'
+  };
+
+  Stage.TeamGrid = function (opts) {
+    const people = opts.people || [];
+    const reveal = opts.reveal || 'instant';
+    const columns = Math.min(4, Math.max(2, opts.columns || 3));
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="team-grid team-grid--cols-${columns}" data-stage-key="TeamGrid">
+            ${people.map((p, i) => `
+              <div class="team-card" data-step="${i + 1}" data-stage-key="TeamGrid/person[${i}]">
+                <div class="team-photo-wrap">
+                  ${p.photo
+                    ? `<img class="team-photo" src="${escape(p.photo)}" alt="${escape(p.name || '')}">`
+                    : `<span class="team-photo team-photo--placeholder material-symbols-outlined">person</span>`}
+                </div>
+                <div class="team-name" data-stage-edit="people[${i}].name">${escape(p.name || '')}</div>
+                <div class="team-role" data-stage-edit="people[${i}].role">${escape(p.role || '')}</div>
+                ${p.bio ? `<div class="team-bio" data-stage-edit="people[${i}].bio">${escape(p.bio)}</div>` : ''}
+                ${p.social ? `
+                  <div class="team-social" data-stage-key="TeamGrid/person[${i}]/social">
+                    ${Object.entries(p.social).filter(([, v]) => v).map(([k]) => `
+                      <span class="team-social-icon material-symbols-outlined" title="${escape(k)}">${SOCIAL_ICONS[k] || 'link'}</span>
+                    `).join('')}
+                  </div>
+                ` : ''}
+              </div>
+            `).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.team-card').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.team-card'), 120, 180);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.team-card').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/testimonial.js

@@ -0,0 +1,99 @@
+'use strict';
+
+/**
+ * Stage.Testimonial — single large quote with photo + attribution.
+ *
+ * Usage:
+ *   Stage.register(Stage.Testimonial({
+ *     section: 61,
+ *     title: '61 · Testimonial',
+ *     quote: 'It cut our review cycles in half.',
+ *     author: {
+ *       name: 'Avery Chen',
+ *       role: 'Staff Engineer',
+ *       company: 'Acme Co',
+ *       photo: 'https://picsum.photos/seed/avery/400/400',
+ *       logo: 'https://example.com/logo.svg'
+ *     },
+ *     reveal: 'staggered'   // 'instant' | 'staggered'
+ *   }));
+ *
+ * Edit paths: quote / author.name / author.role / author.company
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Testimonial = function (opts) {
+    const author = opts.author || {};
+    const reveal = opts.reveal || 'instant';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="testimonial" data-stage-key="Testimonial">
+            ${author.photo ? `
+              <div class="testimonial-photo-wrap" data-stage-key="Testimonial/photo">
+                <img class="testimonial-photo" src="${escape(author.photo)}" alt="${escape(author.name || '')}">
+              </div>
+            ` : ''}
+            <div class="testimonial-body">
+              <div class="testimonial-mark material-symbols-outlined">format_quote</div>
+              <blockquote class="testimonial-quote"
+                          data-stage-edit="quote"
+                          data-stage-key="Testimonial/quote">${escape(opts.quote || '')}</blockquote>
+              <div class="testimonial-meta" data-stage-key="Testimonial/meta">
+                <div class="testimonial-author" data-stage-edit="author.name">${escape(author.name || '')}</div>
+                <div class="testimonial-affil">
+                  ${author.role ? `<span data-stage-edit="author.role">${escape(author.role)}</span>` : ''}
+                  ${author.role && author.company ? `<span class="testimonial-sep">·</span>` : ''}
+                  ${author.company ? `<span class="testimonial-company" data-stage-edit="author.company">${escape(author.company)}</span>` : ''}
+                </div>
+                ${author.logo ? `
+                  <img class="testimonial-logo" src="${escape(author.logo)}" alt="${escape(author.company || 'company')}">
+                ` : ''}
+              </div>
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('[data-anim]').forEach(n => n.classList.add('in'));
+          el.querySelector('.testimonial')?.classList.add('in');
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const t = el.querySelector('.testimonial');
+        const nodes = [
+          el.querySelector('.testimonial-photo-wrap'),
+          el.querySelector('.testimonial-mark'),
+          el.querySelector('.testimonial-quote'),
+          el.querySelector('.testimonial-meta')
+        ].filter(Boolean);
+        const timers = [];
+        timers.push(setTimeout(() => t?.classList.add('in'), 80));
+        nodes.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 220 + i * 240));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelector('.testimonial')?.classList.remove('in');
+        el.querySelectorAll('.testimonial-photo-wrap, .testimonial-mark, .testimonial-quote, .testimonial-meta')
+          .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/timeline.js

@@ -0,0 +1,91 @@
+'use strict';
+
+/**
+ * Stage.Timeline — horizontal (default) or vertical milestone track.
+ *
+ * Usage:
+ *   Stage.register(Stage.Timeline({
+ *     section: 5,
+ *     title: '05 · The arc',
+ *     orientation: 'horizontal',   // 'horizontal' | 'vertical'
+ *     events: [
+ *       { date: '2022', heading: 'Copilot',  body: 'autocomplete',    icon: 'flash_on' },
+ *       { date: '2023', heading: 'ChatGPT',  body: 'conversation',    icon: 'chat'     },
+ *       { date: '2024', heading: 'Agents',   body: 'autonomy',        icon: 'memory'   }
+ *     ],
+ *     reveal: 'staggered'          // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Edit paths:
+ *   events[i].date / .heading / .body / .icon
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Timeline = function (opts) {
+    const events = opts.events || [];
+    const reveal = opts.reveal || 'instant';
+    const orientation = opts.orientation === 'vertical' ? 'vertical' : 'horizontal';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="timeline timeline--${orientation}" data-stage-key="Timeline">
+            <div class="timeline-track"></div>
+            <div class="timeline-events">
+              ${events.map((ev, i) => `
+                <div class="tl-event ${ev.color ? 'tc-' + escape(ev.color) : ''}" data-step="${i + 1}" data-stage-key="Timeline/event[${i}]">
+                  <div class="tl-date" data-stage-edit="events[${i}].date" data-stage-key="Timeline/event[${i}]/date">${escape(ev.date || '')}</div>
+                  <div class="tl-dot">
+                    ${ev.icon ? `<span class="tl-icon material-symbols-outlined" data-stage-edit="events[${i}].icon">${escape(ev.icon)}</span>` : ''}
+                  </div>
+                  <div class="tl-text">
+                    <div class="tl-heading" data-stage-edit="events[${i}].heading" data-stage-key="Timeline/event[${i}]/heading">${escape(ev.heading || '')}</div>
+                    ${ev.body ? `<div class="tl-body" data-stage-edit="events[${i}].body" data-stage-key="Timeline/event[${i}]/body">${escape(ev.body)}</div>` : ''}
+                  </div>
+                </div>
+              `).join('')}
+            </div>
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.tl-event').forEach(n => n.classList.add('in', 'active'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const nodes = el.querySelectorAll('.tl-event');
+        const timers = [];
+        nodes.forEach((n, i) => {
+          timers.push(setTimeout(() => { n.classList.add('in'); n.classList.add('active'); }, 200 + i * 280));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.tl-event').forEach(n => n.classList.remove('in', 'active'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = events.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.tl-event').forEach(n => {
+          const idx = Number(n.dataset.step);
+          n.classList.toggle('in', idx <= step);
+          n.classList.toggle('active', idx === 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/tip.js

@@ -0,0 +1,63 @@
+'use strict';
+
+/**
+ * Stage.Tip — compact single-paragraph emphasis box.
+ *
+ * Use when you want to highlight one thought (not a whole section).
+ * For multi-line callouts with heading + body, use Stage.Callout.
+ *
+ * Usage:
+ *   Stage.register(Stage.Tip({
+ *     section: 68,
+ *     title: '68 · Tip',
+ *     kind: 'tip',                 // 'info' | 'tip' | 'warning' | 'danger' | 'success'
+ *     icon: 'lightbulb',           // optional
+ *     body: 'Think before you commit. Commit before you think too much.'
+ *   }));
+ *
+ * Edit path: 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.Tip = function (opts) {
+    const kind = DEFAULTS[opts.kind] ? opts.kind : 'tip';
+    const icon = opts.icon || DEFAULTS[kind].icon;
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="tip tip--${kind}" data-stage-key="Tip">
+            <span class="tip-icon material-symbols-outlined">${escape(icon)}</span>
+            <p class="tip-body" data-stage-edit="body" data-stage-key="Tip/body">${escape(opts.body || '')}</p>
+          </div>
+        `;
+      },
+      init(el) {
+        const tip = el.querySelector('.tip');
+        const t = setTimeout(() => tip?.classList.add('in'), 100);
+        return () => clearTimeout(t);
+      },
+      replay(el) {
+        el.querySelector('.tip')?.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);