stagecraft 0.1.0

package/src/components/pricing.js

@@ -0,0 +1,90 @@
+'use strict';
+
+/**
+ * Stage.Pricing — 3-tier (or N-tier) pricing card layout.
+ *
+ * Usage:
+ *   Stage.register(Stage.Pricing({
+ *     section: 60,
+ *     title: '60 · Pricing',
+ *     tiers: [
+ *       { name: 'Starter', price: '$0',  period: '/mo',
+ *         features: ['1 project', 'Community support'], ctaLabel: 'Start free' },
+ *       { name: 'Pro',     price: '$29', period: '/mo', featured: true,
+ *         features: ['Unlimited projects', 'Priority support', 'SAML SSO'],
+ *         ctaLabel: 'Start trial' },
+ *       { name: 'Scale',   price: 'Custom',
+ *         features: ['SLA', 'Dedicated CSM', 'On-prem'], ctaLabel: 'Talk to sales' }
+ *     ],
+ *     reveal: 'staggered'  // 'instant' | 'staggered'
+ *   }));
+ *
+ * Edit paths: tiers[i].name / .price / .period / .features[k] / .ctaLabel
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Pricing = function (opts) {
+    const tiers = opts.tiers || [];
+    const reveal = opts.reveal || 'instant';
+    const cols = Math.min(4, Math.max(1, tiers.length));
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="pricing pricing--cols-${cols}" data-stage-key="Pricing">
+            ${tiers.map((t, i) => `
+              <div class="pricing-tier${t.featured ? ' pricing-tier--featured' : ''}"
+                   data-step="${i + 1}"
+                   data-stage-key="Pricing/tier[${i}]">
+                ${t.featured ? `<div class="pricing-badge">most popular</div>` : ''}
+                <div class="pricing-name" data-stage-edit="tiers[${i}].name">${escape(t.name || '')}</div>
+                <div class="pricing-figure">
+                  <span class="pricing-price" data-stage-edit="tiers[${i}].price">${escape(t.price || '')}</span>
+                  ${t.period ? `<span class="pricing-period" data-stage-edit="tiers[${i}].period">${escape(t.period)}</span>` : ''}
+                </div>
+                <ul class="pricing-features" data-stage-key="Pricing/tier[${i}]/features">
+                  ${(t.features || []).map((f, k) => `
+                    <li class="pricing-feature" data-stage-key="Pricing/tier[${i}]/feature[${k}]">
+                      <span class="pricing-check material-symbols-outlined">check</span>
+                      <span data-stage-edit="tiers[${i}].features[${k}]">${escape(f)}</span>
+                    </li>
+                  `).join('')}
+                </ul>
+                ${t.ctaLabel ? `
+                  <div class="pricing-cta" data-stage-edit="tiers[${i}].ctaLabel">
+                    ${escape(t.ctaLabel)}
+                    <span class="pricing-cta-arrow material-symbols-outlined">arrow_forward</span>
+                  </div>
+                ` : ''}
+              </div>
+            `).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.pricing-tier').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        return Stage.staggerIn(el.querySelectorAll('.pricing-tier'), 180, 200);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.pricing-tier').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/process-flow.js

@@ -0,0 +1,133 @@
+'use strict';
+
+/**
+ * Stage.ProcessFlow — sequence of step cards joined by arrows.
+ *
+ * Usage:
+ *   Stage.register(Stage.ProcessFlow({
+ *     section: 3,
+ *     title: '03 · the loop',
+ *     orientation: 'horizontal',   // default | 'vertical'
+ *     steps: [
+ *       { icon: 'edit_note',    label: 'Draft',  body: 'frame the intent',  color: 'accent' },
+ *       { icon: 'visibility',   label: 'Review', body: 'read the diff',     color: 'blue'   },
+ *       { icon: 'science',      label: 'Verify', body: 'run the evidence',  color: 'amber'  },
+ *       { icon: 'rocket_launch',label: 'Ship',   body: 'land the change'                    }
+ *     ],
+ *     reveal: 'staggered'   // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Icons are Google Material Symbols (rendered via
+ *   <span class="material-symbols-outlined">name</span>).
+ *
+ * For `per-click` reveal each arrow pulses briefly as the next step lands.
+ *
+ * Layer-3 (inline edit): steps[i].label, steps[i].body, steps[i].icon.
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.ProcessFlow = function (opts) {
+    const steps = opts.steps || [];
+    const orientation = opts.orientation === 'vertical' ? 'vertical' : 'horizontal';
+    const reveal = opts.reveal || 'instant';
+    const arrowChar = orientation === 'vertical' ? '↓' : '→';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const parts = [];
+        steps.forEach((s, i) => {
+          const colorCls = s.color ? ` ${s.color}` : '';
+          parts.push(`
+            <div class="pf-step${colorCls}"
+                 data-step="${i + 1}"
+                 data-stage-key="ProcessFlow/step[${i}]">
+              ${s.icon ? `
+                <div class="pf-icon" data-stage-key="ProcessFlow/step[${i}]/icon">
+                  <span class="material-symbols-outlined" data-stage-edit="steps[${i}].icon">${escape(s.icon)}</span>
+                </div>` : ''}
+              <div class="pf-label" data-stage-edit="steps[${i}].label">${escape(s.label || '')}</div>
+              ${s.body ? `<div class="pf-body" data-stage-edit="steps[${i}].body">${escape(s.body)}</div>` : ''}
+            </div>
+          `);
+          if (i < steps.length - 1) {
+            parts.push(`
+              <div class="pf-arrow"
+                   data-step="${i + 1}"
+                   data-arrow-after="${i}"
+                   data-stage-key="ProcessFlow/arrow[${i}]"
+                   aria-hidden="true">${arrowChar}</div>
+            `);
+          }
+        });
+
+        el.innerHTML = `
+          <div class="processflow ${orientation}" data-stage-key="ProcessFlow">
+            ${parts.join('')}
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.pf-step, .pf-arrow').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        const nodes = Array.from(el.querySelectorAll('.pf-step, .pf-arrow'));
+        const timers = [];
+        nodes.forEach((n, i) => {
+          // Steps in a bit longer than arrows so the card lands before the arrow.
+          const delay = 200 + i * 220;
+          timers.push(setTimeout(() => n.classList.add('in'), delay));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.pf-step, .pf-arrow').forEach(n => {
+          n.classList.remove('in');
+          n.classList.remove('pulse');
+        });
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = steps.length;
+      slide.onStep = function (el, step) {
+        const stepNodes = el.querySelectorAll('.pf-step');
+        const arrowNodes = el.querySelectorAll('.pf-arrow');
+        stepNodes.forEach(n => {
+          n.classList.toggle('in', Number(n.dataset.step) <= step);
+        });
+        arrowNodes.forEach(n => {
+          const idx = Number(n.dataset.arrowAfter);
+          // Arrow between step[i] and step[i+1] becomes visible after step[i+1] lands.
+          const visible = (idx + 1) < step;
+          n.classList.toggle('in', visible);
+        });
+        // Pulse the arrow that just connected (if any).
+        if (step >= 2) {
+          const justConnectedIdx = step - 2; // arrow index between step (step-1) and step
+          const arrow = el.querySelector(`.pf-arrow[data-arrow-after="${justConnectedIdx}"]`);
+          if (arrow) {
+            arrow.classList.remove('pulse');
+            // Restart animation
+            // eslint-disable-next-line no-unused-expressions
+            arrow.offsetWidth;
+            arrow.classList.add('pulse');
+          }
+        }
+      };
+    }
+
+    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/progress.js

@@ -0,0 +1,136 @@
+'use strict';
+
+/**
+ * Stage.Progress — stacked horizontal progress bars.
+ *
+ * Usage:
+ *   Stage.register(Stage.Progress({
+ *     section: 6,
+ *     title: '06 · How far we got',
+ *     items: [
+ *       { label: 'Spec',          value: 92, color: 'accent' },
+ *       { label: 'Implementation',value: 68, color: 'blue'   },
+ *       { label: 'Tests',         value: 41, color: 'amber'  },
+ *       { label: 'Docs',          value: 12, color: 'red'    }
+ *     ],
+ *     reveal: 'animated'  // 'instant' | 'animated' | 'per-click'
+ *   }));
+ *
+ * Each item: `value` is treated as a fraction of `total` (default 100).
+ * So the default is straight percentages.
+ *
+ * Layer-3 (inline edit): items[i].label, items[i].value.
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Progress = function (opts) {
+    const items = opts.items || [];
+    const reveal = opts.reveal || 'instant';
+
+    function pctFor(it) {
+      const total = Number(it.total) > 0 ? Number(it.total) : 100;
+      const v = Number(it.value) || 0;
+      return Math.max(0, Math.min(100, (v / total) * 100));
+    }
+
+    function displayFor(it) {
+      // For total=100 (default), show the value itself as percent. Otherwise
+      // show the computed percentage rounded to nearest integer.
+      const total = Number(it.total) > 0 ? Number(it.total) : 100;
+      if (total === 100) return `${Math.round(Number(it.value) || 0)}%`;
+      return `${Math.round(pctFor(it))}%`;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const rows = items.map((it, i) => {
+          const colorCls = it.color ? ` ${it.color}` : '';
+          const p = pctFor(it);
+          return `
+            <div class="progress-row${colorCls}"
+                 data-step="${i + 1}"
+                 data-pct="${p}"
+                 data-stage-key="Progress/item[${i}]">
+              <div class="progress-label" data-stage-edit="items[${i}].label">${escape(it.label || '')}</div>
+              <div class="progress-track" data-stage-key="Progress/item[${i}]/track">
+                <div class="progress-fill" style="width: 0%;"></div>
+              </div>
+              <div class="progress-value" data-stage-edit="items[${i}].value">${escape(displayFor(it))}</div>
+            </div>
+          `;
+        }).join('');
+
+        el.innerHTML = `
+          <div class="progress-list" data-stage-key="Progress">
+            ${rows}
+          </div>
+        `;
+
+        if (reveal === 'instant') {
+          el.querySelectorAll('.progress-row').forEach(row => {
+            row.classList.add('in');
+            const fill = row.querySelector('.progress-fill');
+            if (fill) {
+              fill.style.transition = 'none';
+              fill.style.width = `${row.dataset.pct}%`;
+              // eslint-disable-next-line no-unused-expressions
+              fill.offsetWidth;
+              fill.style.transition = '';
+            }
+          });
+        }
+      }
+    };
+
+    if (reveal === 'animated') {
+      slide.init = function (el) {
+        const rows = Array.from(el.querySelectorAll('.progress-row'));
+        const timers = [];
+        rows.forEach((row, i) => {
+          timers.push(setTimeout(() => {
+            row.classList.add('in');
+            const fill = row.querySelector('.progress-fill');
+            if (fill) fill.style.width = `${row.dataset.pct}%`;
+          }, 200 + i * 180));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.progress-row').forEach(row => {
+          row.classList.remove('in');
+          const fill = row.querySelector('.progress-fill');
+          if (fill) {
+            fill.style.transition = 'none';
+            fill.style.width = '0%';
+            // eslint-disable-next-line no-unused-expressions
+            fill.offsetWidth;
+            fill.style.transition = '';
+          }
+        });
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = items.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.progress-row').forEach((row) => {
+          const s = Number(row.dataset.step);
+          const on = s <= step;
+          row.classList.toggle('in', on);
+          const fill = row.querySelector('.progress-fill');
+          if (fill) fill.style.width = 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/punchline.js

@@ -0,0 +1,82 @@
+'use strict';
+
+/**
+ * Stage.Punchline — small buildup lines fade in, then a massive payoff lands.
+ *
+ * Usage:
+ *   Stage.register(Stage.Punchline({
+ *     section: 4,
+ *     title: '04 · The setup',
+ *     buildup: [
+ *       'We hired the best engineers.',
+ *       'We bought the best tools.',
+ *       'We followed the best practices.'
+ *     ],
+ *     payoff: 'And we still shipped the bug.',
+ *     reveal: 'auto'   // 'auto' (1.2s pacing) | 'manual' (per-click)
+ *   }));
+ *
+ * Edit paths:
+ *   buildup[i] / payoff
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Punchline = function (opts) {
+    const buildup = Array.isArray(opts.buildup) ? opts.buildup : [];
+    const payoff = opts.payoff || '';
+    const reveal = opts.reveal || 'auto';
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="punchline" data-stage-key="Punchline">
+            <div class="pl-buildup">
+              ${buildup.map((b, i) => `
+                <div class="pl-line" data-step="${i + 1}" data-stage-edit="buildup[${i}]" data-stage-key="Punchline/build[${i}]">${escape(b)}</div>
+              `).join('')}
+            </div>
+            <div class="pl-payoff" data-step="${buildup.length + 1}" data-stage-edit="payoff" data-stage-key="Punchline/payoff">${escape(payoff)}</div>
+          </div>
+        `;
+      }
+    };
+
+    if (reveal === 'auto') {
+      slide.init = function (el) {
+        const lines = el.querySelectorAll('.pl-line');
+        const pay = el.querySelector('.pl-payoff');
+        const timers = [];
+        lines.forEach((n, i) => {
+          timers.push(setTimeout(() => n.classList.add('in'), 200 + i * 1200));
+        });
+        timers.push(setTimeout(() => pay && pay.classList.add('in'), 200 + lines.length * 1200 + 400));
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.pl-line, .pl-payoff').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else {
+      // 'manual' — per-click, one buildup line per step, payoff last
+      slide.steps = buildup.length + 1;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.pl-line').forEach(n => {
+          n.classList.toggle('in', Number(n.dataset.step) <= step);
+        });
+        const pay = el.querySelector('.pl-payoff');
+        if (pay) pay.classList.toggle('in', step >= (buildup.length + 1));
+      };
+    }
+
+    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/pyramid.js

@@ -0,0 +1,107 @@
+'use strict';
+
+/**
+ * Stage.Pyramid — stacked horizontal layers (clip-path trapezoids).
+ *
+ * Usage:
+ *   Stage.register(Stage.Pyramid({
+ *     section: 6,
+ *     title: '06 · Trust pyramid',
+ *     orientation: 'up',           // 'up' | 'down'  (up = top narrow)
+ *     layers: [
+ *       { label: 'Vision',  body: 'rare',        color: 'accent' },
+ *       { label: 'Taste',   body: 'felt',        color: 'blue'   },
+ *       { label: 'Skill',   body: 'practiced'                    },
+ *       { label: 'Effort',  body: 'available',   color: 'dim'    }
+ *     ],
+ *     reveal: 'staggered'          // 'instant' | 'staggered' | 'per-click'
+ *   }));
+ *
+ * Reveal order: bottom-up for 'up'; top-down for 'down'.
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Pyramid = function (opts) {
+    const layers = opts.layers || [];
+    const reveal = opts.reveal || 'instant';
+    const orientation = opts.orientation === 'down' ? 'down' : 'up';
+    const n = layers.length;
+
+    // Width ratio per layer index (0 = top in render order).
+    // For 'up' shape: top layer is narrowest, bottom widest.
+    // For 'down': inverted.
+    function widthFor(i) {
+      if (n <= 1) return 100;
+      const min = 32; // %
+      const max = 100;
+      const t = i / (n - 1);
+      const ratio = orientation === 'up' ? t : (1 - t);
+      return min + (max - min) * ratio;
+    }
+
+    const slide = {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="pyramid pyramid--${orientation}" data-stage-key="Pyramid">
+            ${layers.map((layer, i) => {
+              const w = widthFor(i).toFixed(2);
+              // Reveal order: for 'up' we reveal bottom-to-top -> step n-i, for 'down' top-to-bottom -> step i+1.
+              const step = orientation === 'up' ? (n - i) : (i + 1);
+              return `
+                <div class="pyr-layer ${layer.color ? 'pyc-' + escape(layer.color) : ''}"
+                     data-step="${step}"
+                     style="--pyr-w: ${w}%;"
+                     data-stage-key="Pyramid/layer[${i}]">
+                  <div class="pyr-shape">
+                    <div class="pyr-content">
+                      <div class="pyr-label" data-stage-edit="layers[${i}].label" data-stage-key="Pyramid/layer[${i}]/label">${escape(layer.label || '')}</div>
+                      ${layer.body ? `<div class="pyr-body" data-stage-edit="layers[${i}].body" data-stage-key="Pyramid/layer[${i}]/body">${escape(layer.body)}</div>` : ''}
+                    </div>
+                  </div>
+                </div>
+              `;
+            }).join('')}
+          </div>
+        `;
+        if (reveal === 'instant') {
+          el.querySelectorAll('.pyr-layer').forEach(n => n.classList.add('in'));
+        }
+      }
+    };
+
+    if (reveal === 'staggered') {
+      slide.init = function (el) {
+        // Walk in reveal-order (low step first).
+        const nodes = Array.from(el.querySelectorAll('.pyr-layer'))
+          .sort((a, b) => Number(a.dataset.step) - Number(b.dataset.step));
+        const timers = [];
+        nodes.forEach((node, i) => {
+          timers.push(setTimeout(() => node.classList.add('in'), 200 + i * 240));
+        });
+        return () => timers.forEach(clearTimeout);
+      };
+      slide.replay = function (el) {
+        el.querySelectorAll('.pyr-layer').forEach(n => n.classList.remove('in'));
+        return this.init(el);
+      };
+    } else if (reveal === 'per-click') {
+      slide.steps = layers.length;
+      slide.onStep = function (el, step) {
+        el.querySelectorAll('.pyr-layer').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/qanda.js

@@ -0,0 +1,60 @@
+'use strict';
+
+/**
+ * Stage.QandA — large rhetorical question with a big answer below.
+ *
+ * Usage:
+ *   Stage.register(Stage.QandA({
+ *     section: 2,
+ *     title: '02 · The question',
+ *     question: 'What if the bottleneck was never the typing?',
+ *     answer: 'It was always the thinking.',
+ *     attribution: 'after years of waiting for compilers'   // optional, small
+ *   }));
+ *
+ * Edit paths:
+ *   question / answer / attribution
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.QandA = function (opts) {
+    const question = opts.question || '';
+    const answer = opts.answer || '';
+    const attribution = opts.attribution || '';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        el.innerHTML = `
+          <div class="qanda" data-stage-key="QandA">
+            <div class="qa-q" data-stage-edit="question" data-stage-key="QandA/question">${escape(question)}</div>
+            <div class="qa-a" data-stage-edit="answer" data-stage-key="QandA/answer">${escape(answer)}</div>
+            ${attribution ? `<div class="qa-attr" data-stage-edit="attribution" data-stage-key="QandA/attribution">— ${escape(attribution)}</div>` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        const q = el.querySelector('.qa-q');
+        const a = el.querySelector('.qa-a');
+        const attr = el.querySelector('.qa-attr');
+        const timers = [];
+        timers.push(setTimeout(() => q && q.classList.add('in'), 150));
+        timers.push(setTimeout(() => a && a.classList.add('in'), 900));
+        timers.push(setTimeout(() => attr && attr.classList.add('in'), 1500));
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.qa-q, .qa-a, .qa-attr').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/quote.js

@@ -0,0 +1,70 @@
+'use strict';
+
+/**
+ * Stage.Quote — centered pull quote with attribution line.
+ *
+ * Usage:
+ *   Stage.register(Stage.Quote({
+ *     section: 5,
+ *     title: '05 · Voices',
+ *     quote: 'The model is a junior teammate who never sleeps and never learns.',
+ *     author: 'A senior engineer',
+ *     role: 'platform team',     // optional
+ *     source: 'internal Slack'   // optional
+ *   }));
+ *
+ * Edit paths: quote / author / role / source
+ */
+
+(function (root) {
+  const Stage = root.Stage = root.Stage || {};
+
+  Stage.Quote = function (opts) {
+    const quote = opts.quote || '';
+    const author = opts.author || '';
+    const role = opts.role || '';
+    const source = opts.source || '';
+
+    return {
+      section: opts.section,
+      title: opts.title,
+      transition: opts.transition,
+      render(el) {
+        const meta = [
+          author ? `<span class="q-author" data-stage-edit="author" data-stage-key="Quote/author">${escape(author)}</span>` : '',
+          role   ? `<span class="q-role"   data-stage-edit="role"   data-stage-key="Quote/role">${escape(role)}</span>`     : '',
+          source ? `<span class="q-source" data-stage-edit="source" data-stage-key="Quote/source">${escape(source)}</span>` : ''
+        ].filter(Boolean).join('<span class="q-sep">·</span>');
+
+        el.innerHTML = `
+          <div class="quote" data-stage-key="Quote">
+            <div class="q-mark q-mark--open" aria-hidden="true">&#10077;</div>
+            <blockquote class="q-text" data-stage-edit="quote" data-stage-key="Quote/text">${escape(quote)}</blockquote>
+            <div class="q-mark q-mark--close" aria-hidden="true">&#10078;</div>
+            ${meta ? `<div class="q-meta" data-stage-key="Quote/meta">${meta}</div>` : ''}
+          </div>
+        `;
+      },
+      init(el) {
+        const timers = [];
+        const openMark = el.querySelector('.q-mark--open');
+        const text = el.querySelector('.q-text');
+        const closeMark = el.querySelector('.q-mark--close');
+        const meta = el.querySelector('.q-meta');
+        timers.push(setTimeout(() => openMark && openMark.classList.add('in'), 100));
+        timers.push(setTimeout(() => text && text.classList.add('in'), 400));
+        timers.push(setTimeout(() => closeMark && closeMark.classList.add('in'), 900));
+        timers.push(setTimeout(() => meta && meta.classList.add('in'), 1200));
+        return () => timers.forEach(clearTimeout);
+      },
+      replay(el) {
+        el.querySelectorAll('.q-mark, .q-text, .q-meta').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);