@invisibleloop/pulse 0.1.21

package/examples/pricing.js

@@ -0,0 +1,244 @@
+/**
+ * Pulse — Pricing page example
+ *
+ * Demonstrates:
+ *   - Landing page components (nav, pricing, accordion, cta, footer)
+ *   - Billing-period toggle (monthly / annual) via mutation
+ *   - Layout components (section, container, stack, cluster, grid)
+ *   - No server data — fully static, still gets streaming SSR
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/pricing
+ */
+
+import {
+  nav as uiNav, pricing, accordion, cta, footer as uiFooter,
+  section as uiSection, container, stack, cluster,
+  button, heading,
+} from '../src/ui/index.js'
+
+const PLANS = {
+  monthly: [
+    {
+      name:        'Starter',
+      price:       '£0',
+      period:      'forever',
+      description: 'For personal projects and tinkering.',
+      features: [
+        '1 project',
+        '5,000 page views / month',
+        'Pulse framework',
+        'Community support',
+      ],
+      action:      button({ label: 'Get started free', variant: 'secondary', href: '/getting-started', fullWidth: true }),
+      highlighted: false,
+    },
+    {
+      name:        'Pro',
+      price:       '£12',
+      period:      '/ month',
+      description: 'For indie developers and small teams.',
+      badge:       'Most popular',
+      features: [
+        '10 projects',
+        '500,000 page views / month',
+        'Everything in Starter',
+        'Streaming SSR',
+        'Global CDN',
+        'Email support',
+      ],
+      action:      button({ label: 'Start free trial', variant: 'primary', href: '/getting-started', fullWidth: true }),
+      highlighted: true,
+    },
+    {
+      name:        'Team',
+      price:       '£49',
+      period:      '/ month',
+      description: 'For growing teams shipping fast.',
+      features: [
+        'Unlimited projects',
+        '5M page views / month',
+        'Everything in Pro',
+        'Team collaboration',
+        'Custom domains',
+        'Priority support',
+        'SLA guarantee',
+      ],
+      action:      button({ label: 'Contact sales', variant: 'secondary', href: '/contact', fullWidth: true }),
+      highlighted: false,
+    },
+  ],
+  annual: [
+    {
+      name:        'Starter',
+      price:       '£0',
+      period:      'forever',
+      description: 'For personal projects and tinkering.',
+      features: [
+        '1 project',
+        '5,000 page views / month',
+        'Pulse framework',
+        'Community support',
+      ],
+      action:      button({ label: 'Get started free', variant: 'secondary', href: '/getting-started', fullWidth: true }),
+      highlighted: false,
+    },
+    {
+      name:        'Pro',
+      price:       '£9',
+      period:      '/ month',
+      description: 'For indie developers and small teams.',
+      badge:       'Most popular',
+      features: [
+        '10 projects',
+        '500,000 page views / month',
+        'Everything in Starter',
+        'Streaming SSR',
+        'Global CDN',
+        'Email support',
+      ],
+      action:      button({ label: 'Start free trial', variant: 'primary', href: '/getting-started', fullWidth: true }),
+      highlighted: true,
+    },
+    {
+      name:        'Team',
+      price:       '£39',
+      period:      '/ month',
+      description: 'For growing teams shipping fast.',
+      features: [
+        'Unlimited projects',
+        '5M page views / month',
+        'Everything in Pro',
+        'Team collaboration',
+        'Custom domains',
+        'Priority support',
+        'SLA guarantee',
+      ],
+      action:      button({ label: 'Contact sales', variant: 'secondary', href: '/contact', fullWidth: true }),
+      highlighted: false,
+    },
+  ],
+}
+
+export const FAQ = [
+  { question: 'Can I change plans later?',               answer: 'Yes — upgrade or downgrade at any time. Changes take effect immediately; you\'ll be charged or credited on a pro-rated basis.' },
+  { question: 'What counts as a page view?',             answer: 'A page view is a single server-rendered HTML response. Static assets, API calls, and navigations that reuse cached HTML are not counted.' },
+  { question: 'Do you offer a free trial?',              answer: 'Pro and Team plans include a 14-day free trial — no credit card required. You\'ll get a reminder before the trial ends.' },
+  { question: 'What happens if I exceed my page views?', answer: 'We\'ll notify you when you reach 80% of your limit. Your site stays live — we won\'t cut you off mid-month. Additional usage is billed at £1 per 100k views.' },
+  { question: 'Is there a discount for non-profits?',    answer: 'Yes — registered non-profits and open source projects qualify for 50% off any paid plan. Email us with your details.' },
+]
+
+export default {
+  route:   '/pricing',
+  hydrate: '/examples/pricing.js',
+
+  meta: {
+    title:       'Pricing — Pulse',
+    description: 'Simple, transparent pricing for every stage. Starter is free forever. Pro and Team plans include a 14-day trial.',
+    styles:      ['/pulse-ui.css', '/examples/pricing.css'],
+  },
+
+  state: {
+    billing: 'monthly',   // monthly | annual
+  },
+
+  mutations: {
+    setBilling: (_state, e) => ({
+      billing: e.target.closest('[data-billing]')?.dataset.billing || 'monthly',
+    }),
+  },
+
+  view: (state) => {
+    const plans = PLANS[state.billing]
+
+    return `
+    ${uiNav({
+      logo:     `<span class="pr-logo">⚡ Pulse</span>`,
+      logoHref: '/pricing',
+      links: [
+        { label: 'Counter',  href: '/counter'  },
+        { label: 'Todos',    href: '/todos'     },
+        { label: 'Contact',  href: '/contact'  },
+        { label: 'Quiz',     href: '/quiz'      },
+        { label: 'Products', href: '/products' },
+        { label: 'Pricing',  href: '/pricing'  },
+      ],
+      sticky: true,
+    })}
+
+    <main id="main-content">
+
+    ${uiSection({ content: container({ size: 'lg', content: stack({ gap: 'lg', align: 'center', content: `
+
+      <div class="pr-eyebrow">Pricing</div>
+      <h1 class="pr-hero-title">Simple, honest pricing.</h1>
+      <p class="pr-hero-sub">Starter is free forever. Paid plans include a 14-day trial — no credit card required.</p>
+
+      <div class="pr-toggle" role="group" aria-label="Billing period">
+        ${button({ label: 'Monthly', variant: state.billing === 'monthly' ? 'primary' : 'ghost', size: 'sm', attrs: { 'data-event': 'setBilling', 'data-billing': 'monthly', 'aria-pressed': String(state.billing === 'monthly') } })}
+        ${button({ label: 'Annual', variant: state.billing === 'annual' ? 'primary' : 'ghost', size: 'sm', iconAfter: '<span class="pr-save-label">Save 25%</span>', attrs: { 'data-event': 'setBilling', 'data-billing': 'annual', 'aria-pressed': String(state.billing === 'annual') } })}
+      </div>
+
+      ${state.billing === 'annual' ? `<p class="pr-annual-note">Annual plans are billed yearly. Prices shown are monthly equivalents.</p>` : ''}
+
+      <div class="pr-plans">
+        ${plans.map(p => pricing({ ...p, level: 2 })).join('')}
+      </div>
+
+    ` }) }) })}
+
+    ${uiSection({ variant: 'alt', content: container({ size: 'md', content: stack({ gap: 'xl', align: 'center', content: `
+
+      ${heading({ level: 2, text: 'Everything you need to ship', size: '3xl', class: 'u-text-center' })}
+
+      <div class="pr-feature-table" role="region" aria-label="Feature comparison">
+        <div class="pr-feature-header">
+          <span>Feature</span>
+          <span>Starter</span>
+          <span>Pro</span>
+          <span>Team</span>
+        </div>
+        ${[
+          ['Streaming SSR',          '✓', '✓', '✓'],
+          ['Security headers',       '✓', '✓', '✓'],
+          ['Immutable asset caching','✓', '✓', '✓'],
+          ['Custom domains',         '—', '—', '✓'],
+          ['Global CDN',             '—', '✓', '✓'],
+          ['Team seats',             '1', '3', 'Unlimited'],
+          ['Support',                'Community', 'Email', 'Priority + SLA'],
+        ].map(([feat, ...vals]) => `
+        <div class="pr-feature-row">
+          <span class="pr-feature-name">${feat}</span>
+          ${vals.map(v => `<span class="pr-feature-val${v === '—' ? ' pr-feature-val--no' : v === '✓' ? ' pr-feature-val--yes' : ''}">${v}</span>`).join('')}
+        </div>`).join('')}
+      </div>
+
+    ` }) }) })}
+
+    ${uiSection({ content: container({ size: 'md', content: stack({ gap: 'lg', align: 'center', content: `
+      ${heading({ level: 2, text: 'Frequently asked questions', size: '3xl', class: 'u-text-center' })}
+      ${accordion({ items: FAQ })}
+    ` }) }) })}
+
+    ${cta({
+      title:   'Ready to build?',
+      content: 'Starter is free forever. No credit card. No catch.',
+      actions: cluster({ justify: 'center', content:
+        button({ label: 'Get started free', href: '/getting-started', size: 'lg' }) + ' ' +
+        button({ label: 'Read the docs', href: '/getting-started', variant: 'secondary', size: 'lg' })
+      }),
+    })}
+
+    </main>
+
+    ${uiFooter({
+      logo:      '<span class="pr-logo">⚡ Pulse</span>',
+      tagline:   'The spec-first web framework.',
+      columns: [
+        { heading: 'Product',  links: [{ label: 'Counter',  href: '/counter'  }, { label: 'Todos', href: '/todos' }, { label: 'Contact', href: '/contact' }] },
+        { heading: 'Examples', links: [{ label: 'Quiz',     href: '/quiz'     }, { label: 'Products', href: '/products' }] },
+        { heading: 'Docs',     links: [{ label: 'Getting Started', href: '/getting-started' }, { label: 'Spec Reference', href: '/spec' }] },
+      ],
+      copy: `© ${new Date().getFullYear()} Pulse. Built with Pulse.`,
+    })}`
+  },
+}

package/examples/products.js

@@ -0,0 +1,191 @@
+/**
+ * Pulse — Product catalog example
+ *
+ * Demonstrates:
+ *   - Server data (20 mock products fetched before render)
+ *   - Client-side search, category filter, and sort — all via mutations
+ *   - Streaming SSR (shell instant, product grid deferred)
+ *   - Empty state when no results match
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/products
+ */
+
+import { badge, button, empty, card, heading, search, select, uiImage } from '../src/ui/index.js'
+import { examplesNav } from './shared.js'
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+// ─── Mock data ───────────────────────────────────────────────────────────────
+
+const PRODUCTS = [
+  { id: 1,  name: 'Arc Desk Lamp',          category: 'Lighting',    price: 89,  rating: 4.8, reviews: 312, img: 'https://picsum.photos/seed/desklamp/400/280',     featured: true  },
+  { id: 2,  name: 'Walnut Desk Tray',        category: 'Storage',     price: 45,  rating: 4.7, reviews: 189, img: 'https://picsum.photos/seed/desktray/400/280',     featured: false },
+  { id: 3,  name: 'Linen Desk Pad',          category: 'Accessories', price: 32,  rating: 4.6, reviews: 445, img: 'https://picsum.photos/seed/deskpad/400/280',      featured: false },
+  { id: 4,  name: 'Cable Management Kit',    category: 'Accessories', price: 24,  rating: 4.5, reviews: 678, img: 'https://picsum.photos/seed/cables/400/280',       featured: false },
+  { id: 5,  name: 'Monitor Riser',           category: 'Furniture',   price: 65,  rating: 4.9, reviews: 521, img: 'https://picsum.photos/seed/monitorriser/400/280', featured: true  },
+  { id: 6,  name: 'Ergonomic Chair Cushion', category: 'Furniture',   price: 79,  rating: 4.4, reviews: 234, img: 'https://picsum.photos/seed/cushion/400/280',      featured: false },
+  { id: 7,  name: 'Wireless Charger Pad',    category: 'Accessories', price: 38,  rating: 4.3, reviews: 390, img: 'https://picsum.photos/seed/charger/400/280',      featured: false },
+  { id: 8,  name: 'Bamboo Shelf Organiser',  category: 'Storage',     price: 55,  rating: 4.6, reviews: 167, img: 'https://picsum.photos/seed/bamboo/400/280',       featured: false },
+  { id: 9,  name: 'Mechanical Keyboard',     category: 'Peripherals', price: 129, rating: 4.9, reviews: 891, img: 'https://picsum.photos/seed/keyboard/400/280',     featured: true  },
+  { id: 10, name: 'Wrist Rest Pad',          category: 'Accessories', price: 29,  rating: 4.2, reviews: 276, img: 'https://picsum.photos/seed/wristrest/400/280',    featured: false },
+  { id: 11, name: 'Desk Plant Pot',          category: 'Decor',       price: 22,  rating: 4.7, reviews: 152, img: 'https://picsum.photos/seed/plantpot/400/280',     featured: false },
+  { id: 12, name: 'Anti-Fatigue Mat',        category: 'Furniture',   price: 94,  rating: 4.5, reviews: 308, img: 'https://picsum.photos/seed/floormat/400/280',     featured: false },
+  { id: 13, name: 'USB-C Hub 7-in-1',        category: 'Peripherals', price: 69,  rating: 4.8, reviews: 622, img: 'https://picsum.photos/seed/usbhub/400/280',       featured: false },
+  { id: 14, name: 'Sticky Note Dispenser',   category: 'Storage',     price: 18,  rating: 4.1, reviews: 99,  img: 'https://picsum.photos/seed/stickynote/400/280',   featured: false },
+  { id: 15, name: 'LED Bias Light Strip',    category: 'Lighting',    price: 42,  rating: 4.6, reviews: 287, img: 'https://picsum.photos/seed/ledstrip/400/280',     featured: false },
+  { id: 16, name: 'Laptop Stand',            category: 'Furniture',   price: 58,  rating: 4.7, reviews: 734, img: 'https://picsum.photos/seed/laptopstand/400/280',  featured: true  },
+  { id: 17, name: 'Noise Cancelling Muffs',  category: 'Peripherals', price: 49,  rating: 4.4, reviews: 213, img: 'https://picsum.photos/seed/headphones/400/280',   featured: false },
+  { id: 18, name: 'Desktop Calendar',        category: 'Decor',       price: 16,  rating: 4.3, reviews: 88,  img: 'https://picsum.photos/seed/calendar/400/280',     featured: false },
+  { id: 19, name: 'Document Scanner',        category: 'Peripherals', price: 149, rating: 4.8, reviews: 445, img: 'https://picsum.photos/seed/scanner/400/280',      featured: false },
+  { id: 20, name: 'Velvet Pen Cup',          category: 'Decor',       price: 19,  rating: 4.5, reviews: 131, img: 'https://picsum.photos/seed/pencup/400/280',       featured: false },
+]
+
+export const CATEGORIES = ['All', ...new Set(PRODUCTS.map(p => p.category))].sort((a, b) =>
+  a === 'All' ? -1 : b === 'All' ? 1 : a.localeCompare(b)
+)
+
+export function applyFilters(products, search, category, sort) {
+  let out = products
+
+  if (category && category !== 'All') {
+    out = out.filter(p => p.category === category)
+  }
+
+  if (search) {
+    const q = search.toLowerCase()
+    out = out.filter(p => p.name.toLowerCase().includes(q) || p.category.toLowerCase().includes(q))
+  }
+
+  if (sort === 'price-asc')    out = [...out].sort((a, b) => a.price - b.price)
+  if (sort === 'price-desc')   out = [...out].sort((a, b) => b.price - a.price)
+  if (sort === 'rating')       out = [...out].sort((a, b) => b.rating - a.rating)
+  if (sort === 'reviews')      out = [...out].sort((a, b) => b.reviews - a.reviews)
+
+  return out
+}
+
+// ─── Spec ────────────────────────────────────────────────────────────────────
+
+export default {
+  route:   '/products',
+  hydrate: '/examples/products.js',
+
+  meta: {
+    title:       'Products — Pulse',
+    description: 'A product catalog built with Pulse. Demonstrates server data, client-side filtering, search, and sort.',
+    styles:      ['/pulse-ui.css', '/examples/products.css'],
+    theme:       'light',
+  },
+
+  server: {
+    products: async () => PRODUCTS,
+  },
+
+  stream: {
+    shell:    ['header', 'filters'],
+    deferred: ['grid'],
+  },
+
+  state: {
+    search:   '',
+    category: 'All',
+    sort:     'featured',
+  },
+
+  mutations: {
+    setSearch:   (_state, e) => ({ search:   e.target.value }),
+    setCategory: (_state, e) => ({ category: e.target.closest('[data-cat]')?.dataset.cat || 'All' }),
+    setSort:     (_state, e) => ({ sort:     e.target.value }),
+    clearSearch: () => ({ search: '' }),
+  },
+
+  view: {
+    header: (state, server) => {
+      const total    = server.products?.length ?? 0
+      const filtered = applyFilters(server.products ?? [], state.search, state.category, state.sort)
+
+      return `<div class="pd-root">
+  ${examplesNav('<span class="pd-logo-text">🛍 Products</span>', '/products')}
+
+  <main id="main-content" class="pd-main">
+
+    <div class="pd-page-header">
+      <div>
+        ${heading({ level: 1, text: 'Home Office', size: '2xl' })}
+        <p class="pd-subtitle">Showing <strong>${filtered.length}</strong> of <strong>${total}</strong> products</p>
+      </div>
+      <div class="pd-sort-wrap">
+        ${select({ name: 'sort', label: 'Sort by', event: 'change:setSort', value: state.sort, options: [
+          { value: 'featured',   label: 'Featured'           },
+          { value: 'price-asc',  label: 'Price: low to high' },
+          { value: 'price-desc', label: 'Price: high to low' },
+          { value: 'rating',     label: 'Top rated'          },
+          { value: 'reviews',    label: 'Most reviewed'      },
+        ]})}
+      </div>
+    </div>`
+    },
+
+    filters: (state) => {
+      return `
+    <div class="pd-sidebar">
+
+      ${search({ name: 'search', label: 'Search', placeholder: 'Search products…', value: state.search, event: 'input:setSearch', debounce: 200, clearEvent: 'clearSearch' })}
+
+      <div class="pd-category-wrap">
+        <p class="pd-sidebar-label">Category</p>
+        <ul class="pd-categories" role="list">
+          ${CATEGORIES.map(cat => `<li>
+            ${button({ label: cat, variant: state.category === cat ? 'primary' : 'secondary', size: 'sm', class: 'pd-cat-pill', attrs: { 'data-event': 'setCategory', 'data-cat': cat, 'aria-pressed': String(state.category === cat) } })}
+          </li>`).join('')}
+        </ul>
+      </div>
+
+    </div>`
+    },
+
+    grid: (state, server) => {
+      const filtered = applyFilters(server.products ?? [], state.search, state.category, state.sort)
+
+      const gridContent = filtered.length === 0
+        ? empty({
+            title:       'No products found',
+            description: state.search ? `No results for "${esc(state.search)}".` : 'Try a different category.',
+          })
+        : `<ul class="pd-grid" aria-label="Products">
+            ${filtered.map(p => `<li>
+              ${card({
+                flush: true,
+                content: `
+                  ${uiImage({ src: p.img, alt: p.name, ratio: '16/9' })}
+                  <div class="pd-product-body">
+                    <div class="pd-product-meta">
+                      ${badge({ label: p.category, variant: 'default' })}
+                      ${p.featured ? badge({ label: 'Featured', variant: 'info' }) : ''}
+                    </div>
+                    ${heading({ level: 2, text: p.name, size: 'sm' })}
+                    <div class="pd-product-stats">
+                      <span class="pd-rating" aria-label="${p.rating} out of 5 stars">★ ${p.rating}</span>
+                      <span class="pd-reviews">(${p.reviews.toLocaleString()})</span>
+                    </div>
+                    <p class="pd-price">£${p.price}</p>
+                  </div>
+                `,
+              })}
+            </li>`).join('')}
+          </ul>`
+
+      return `
+    <div class="pd-content">
+      ${gridContent}
+    </div>
+
+  </main>
+</div>`
+    },
+  },
+}

package/examples/quiz.js

@@ -0,0 +1,208 @@
+/**
+ * Pulse — Quiz example
+ *
+ * Demonstrates:
+ *   - Multi-step state machine (intro → question → results)
+ *   - Pure mutation logic with no server data
+ *   - Computed view output from state
+ *   - Restart flow
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/quiz
+ */
+
+import { button, badge, card, container, section, stack, cluster, progress, iconCheck, iconX } from '../src/ui/index.js'
+import { examplesNav } from './shared.js'
+
+export const QUESTIONS = [
+  {
+    id:      1,
+    text:    'What does SSR stand for in web development?',
+    options: ['Static Site Rendering', 'Server-Side Rendering', 'Stylesheet Rendering', 'Synchronous Script Runtime'],
+    answer:  1,
+  },
+  {
+    id:      2,
+    text:    'Which HTTP method is typically used to submit a form?',
+    options: ['GET', 'PUT', 'POST', 'PATCH'],
+    answer:  2,
+  },
+  {
+    id:      3,
+    text:    'What does CLS measure in Core Web Vitals?',
+    options: ['Cumulative Layout Shift', 'Content Loading Speed', 'CSS Load Score', 'Cached Layout State'],
+    answer:  0,
+  },
+  {
+    id:      4,
+    text:    'Which of these is NOT a valid HTTP status code?',
+    options: ['200 OK', '304 Not Modified', '418 I\'m a teapot', '512 Server Timeout'],
+    answer:  3,
+  },
+  {
+    id:      5,
+    text:    'What does the "hydrate" property in a Pulse spec enable?',
+    options: [
+      'Server-side data fetching',
+      'Client-side interactivity by importing the spec in the browser',
+      'Automatic CSS injection',
+      'Database connection pooling',
+    ],
+    answer:  1,
+  },
+]
+
+export function scoreLabel(score, total) {
+  const pct = score / total
+  if (pct === 1)    return { label: 'Perfect score!',     variant: 'success' }
+  if (pct >= 0.8)   return { label: 'Excellent!',          variant: 'success' }
+  if (pct >= 0.6)   return { label: 'Good effort!',        variant: 'info'    }
+  if (pct >= 0.4)   return { label: 'Keep practising!',   variant: 'warning' }
+  return              { label: 'Better luck next time.',   variant: 'error'   }
+}
+
+export default {
+  route:   '/quiz',
+  hydrate: '/examples/quiz.js',
+
+  meta: {
+    title:       'Quiz — Pulse',
+    description: 'A multiple-choice quiz built with Pulse. Demonstrates multi-step state machine and computed views.',
+    styles:      ['/pulse-ui.css'],
+  },
+
+  state: {
+    phase:     'intro',   // intro | question | results
+    current:   0,         // index into QUESTIONS
+    answers:   [],        // [number] — chosen option index per question
+    score:     0,
+  },
+
+  mutations: {
+    start: () => ({
+      phase:   'question',
+      current: 0,
+      answers: [],
+      score:   0,
+    }),
+
+    answer: (state, e) => {
+      const chosen = parseInt(e.target.closest('[data-option]')?.dataset.option, 10)
+      if (isNaN(chosen)) return state
+
+      const q       = QUESTIONS[state.current]
+      const correct = chosen === q.answer
+      const answers = [...state.answers, chosen]
+      const score   = state.score + (correct ? 1 : 0)
+      const last    = state.current === QUESTIONS.length - 1
+
+      return {
+        answers,
+        score,
+        current: last ? state.current : state.current + 1,
+        phase:   last ? 'results' : 'question',
+      }
+    },
+
+    restart: () => ({
+      phase:   'intro',
+      current: 0,
+      answers: [],
+      score:   0,
+    }),
+  },
+
+  view: (state) => {
+    const nav = examplesNav('<span>🧠 Quiz</span>', '/quiz')
+
+    if (state.phase === 'intro') {
+      return `
+  ${nav}
+  <main id="main-content">
+    ${section({ eyebrow: `${QUESTIONS.length} questions · multiple choice`, title: 'Web Dev Quiz', level: 1, subtitle: 'Test your knowledge of web development fundamentals — HTTP, performance, and Pulse.', align: 'center', content:
+      container({ size: 'sm', content:
+        cluster({ justify: 'center', content:
+          button({ label: 'Start quiz', size: 'lg', attrs: { 'data-event': 'start' } })
+        })
+      })
+    })}
+  </main>`
+    }
+
+    if (state.phase === 'question') {
+      const q   = QUESTIONS[state.current]
+      const num = state.current + 1
+      const pct = Math.round((num / QUESTIONS.length) * 100)
+
+      return `
+  ${nav}
+  <main id="main-content">
+    ${section({ content:
+      container({ size: 'sm', content:
+        card({ content: stack({ gap: 'lg', content: `
+
+          ${cluster({ justify: 'between', content:
+            `<span class="u-text-sm u-text-muted">Question ${num} of ${QUESTIONS.length}</span>` +
+            badge({ label: `${state.score} correct`, variant: 'success' })
+          })}
+
+          ${progress({ value: pct, max: 100, label: `Question ${num} of ${QUESTIONS.length}` })}
+
+          ${stack({ gap: 'md', content: `
+            <p class="u-text-lg u-font-semibold" id="question-text">${q.text}</p>
+            <ul role="list" aria-labelledby="question-text">
+              ${q.options.map((opt, i) => `<li>${
+                button({
+                  label:     `${String.fromCharCode(65 + i)}. ${opt}`,
+                  variant:   'secondary',
+                  fullWidth:  true,
+                  attrs:     { 'data-event': 'answer', 'data-option': String(i) },
+                })
+              }</li>`).join('')}
+            </ul>
+          ` })}
+
+        ` }) })
+      })
+    })}
+  </main>`
+    }
+
+    // Results
+    const { label, variant } = scoreLabel(state.score, QUESTIONS.length)
+
+    const resultRows = QUESTIONS.map((q, i) => {
+      const chosen  = state.answers[i]
+      const correct = chosen === q.answer
+      return `<div class="u-flex u-items-start u-gap-3 u-p-3 u-border-b">
+        <span class="${correct ? 'u-text-green' : 'u-text-red'}">${correct ? iconCheck({ size: 16 }) : iconX({ size: 16 })}</span>
+        <div>
+          <p class="u-text-sm">${q.text}</p>
+          ${!correct ? `<p class="u-text-sm u-text-green u-mt-1">Correct: <strong>${q.options[q.answer]}</strong></p>` : ''}
+        </div>
+      </div>`
+    }).join('')
+
+    return `
+  ${nav}
+  <main id="main-content">
+    ${section({ content:
+      container({ size: 'sm', content:
+        card({ content: stack({ gap: 'lg', align: 'center', content: `
+
+          <div class="u-flex u-items-end u-justify-center u-gap-1" aria-label="Your score">
+            <span class="u-text-4xl u-font-bold u-text-accent">${state.score}</span>
+            <span class="u-text-xl u-text-muted">/ ${QUESTIONS.length}</span>
+          </div>
+
+          ${badge({ label, variant })}
+
+          <div class="u-w-full u-border u-rounded-md u-overflow-hidden">${resultRows}</div>
+
+          ${button({ label: 'Try again', variant: 'secondary', attrs: { 'data-event': 'restart' } })}
+
+        ` }) })
+      })
+    })}
+  </main>`
+  },
+}