@invisibleloop/pulse 0.20.10 → 0.20.19

package/docs/src/pages/templates/retrowheels.js

@@ -1,355 +0,0 @@
-/**
- * Pulse — Retro Wheels Co. example
- *
- * Demonstrates:
- *   - Retro/vintage light-theme branding (1970s enamel-sign aesthetic)
- *   - stat(), cta(), card(), badge() layout components
- *   - Icon imports: iconMapPin, iconPhone, iconClock, iconSend, iconStar
- *   - Async action with onStart / run / onSuccess / onError lifecycle
- *   - State-driven form (idle → sending → sent) with disabled submit
- *   - input() fields inside a card() for the booking enquiry
- *   - System web fonts (Rockwell + Courier New) — zero extra HTTP requests
- *   - Full-bleed hero with background image + gradient overlay
- *   - Stat strip with inverted navy background
- *   - Reviews rendered with card() (quote + name/role + star rating)
- *   - Opening hours list with Courier monospace styling
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/retrowheels
- */
-
-import {
-  nav, footer, button, input, stat, cta, card, badge,
-} from '../../../../src/ui/index.js'
-import { iconMapPin, iconPhone, iconClock, iconSend, iconStar } from '../../../../src/ui/icons.js'
-import { asset } from '../../lib/layout.js'
-
-// ---------------------------------------------------------------------------
-// Static data
-// ---------------------------------------------------------------------------
-
-const SERVICES = [
-  {
-    num:   'No. 01',
-    title: 'Restored Vintage Bicycles',
-    body:  'Lovingly rebuilt Raleighs, Peugeots, and Bianchis from the workshop. Each one inspected, polished, and ready for the road.',
-    price: 'From £325',
-  },
-  {
-    num:   'No. 02',
-    title: 'Hand-Built City Cruisers',
-    body:  'Lugged steel frames, leather saddles, and brass bells. Built to your measurements over four to six weeks.',
-    price: 'From £1,100',
-  },
-  {
-    num:   'No. 03',
-    title: 'Full-Service Workshop',
-    body:  'Brakes, gears, wheels, headsets — whatever the trouble. We work on every era from penny-farthings to ten-speeds.',
-    price: 'From £45',
-  },
-  {
-    num:   'No. 04',
-    title: 'Steel-Frame Tune-Ups',
-    body:  'Bottom bracket overhaul, hub repack, true the wheels, polish the chrome. Your old steed will ride like 1976 again.',
-    price: '£95',
-  },
-  {
-    num:   'No. 05',
-    title: 'Saddles & Leather Goods',
-    body:  'Brooks saddles, twine-wrapped bar tape, canvas tool rolls, and waxed cotton panniers. Stocked and ready to fit.',
-    price: 'From £18',
-  },
-  {
-    num:   'No. 06',
-    title: 'Weekend Group Rides',
-    body:  'Every Saturday at 9 a.m. — twenty miles, a cafe stop, and home by lunch. All paces, all bikes, all welcome.',
-    price: 'Free · BYO bicycle',
-  },
-]
-
-const HOURS = [
-  { day: 'Tuesday',   time: '9 a.m. — 6 p.m.' },
-  { day: 'Wednesday', time: '9 a.m. — 6 p.m.' },
-  { day: 'Thursday',  time: '9 a.m. — 7 p.m.' },
-  { day: 'Friday',    time: '9 a.m. — 6 p.m.' },
-  { day: 'Saturday',  time: '9 a.m. — 5 p.m.' },
-  { day: 'Sunday',    time: '10 a.m. — 4 p.m.' },
-  { day: 'Monday',    time: 'Closed', closed: true },
-]
-
-const REVIEWS = [
-  {
-    quote:  'They rebuilt my grandfather\u2019s 1972 Raleigh Twenty as if it had just left the factory. I cried a little. Worth every penny.',
-    name:   'Eleanor Bishop',
-    role:   'Brought back from the loft',
-    rating: 5,
-  },
-  {
-    quote:  'The custom cruiser I commissioned is the loveliest object I own. Hand-pinstriped name on the down tube. A proper bicycle.',
-    name:   'Marcus O\u2019Halloran',
-    role:   'Custom build, Spring 2026',
-    rating: 5,
-  },
-  {
-    quote:  'Saturday ride is the best thing in my week. Twenty miles, a cafe stop, and not a single person in lycra. Bliss.',
-    name:   'Priya Ramachandran',
-    role:   'Weekend rider since 2024',
-    rating: 5,
-  },
-]
-
-// Logo uses system web fonts — no external request needed
-const LOGO = `<span class="rw-logo-text">Retro Wheels Co.</span>`
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-const renderService = (s) => `
-  <article class="rw-service">
-    <p class="rw-service-num">${s.num}</p>
-    <h3>${s.title}</h3>
-    <p>${s.body}</p>
-    <p class="rw-service-price">${s.price}</p>
-  </article>
-`
-
-const renderHourRow = (h) => `
-  <li class="rw-hours-row">
-    <span>${h.day}</span>
-    <span class="${h.closed ? 'rw-closed' : ''}">${h.time}</span>
-  </li>
-`
-
-// Review card — replaces the removed testimonial() component with card()
-const renderReview = (r) => card({
-  content: `
-    <div class="rw-review-stars" aria-hidden="true">${iconStar({ size: 14 }).repeat(r.rating || 0)}</div>
-    <p class="rw-review-quote">&ldquo;${r.quote}&rdquo;</p>
-  `,
-  footer: `
-    <p class="rw-review-name">${r.name}</p>
-    <p class="rw-review-role">${r.role}</p>
-  `,
-  class: 'rw-review',
-})
-
-// ---------------------------------------------------------------------------
-// Spec
-// ---------------------------------------------------------------------------
-
-export default {
-  route: '/templates/retrowheels',
-
-  meta: {
-    title:       'Retro Wheels Co. — Restored vintage bicycles, est. 1976',
-    description: 'A neighbourhood bicycle shop specialising in restored vintage bikes, hand-built city cruisers, and old-school repairs. Established 1976.',
-    theme:       'light',
-    styles:      ['/pulse-ui.css', '/retrowheels.css'],
-  },
-
-  state: {
-    status: 'idle',   // idle | sending | sent
-  },
-
-  view: (state) => `
-    <a href="#main-content" class="rw-skip-link">Skip to main content</a>
-
-    ${nav({
-      logo:     LOGO,
-      logoHref: '/retrowheels',
-      sticky:   true,
-      links: [
-        { label: 'Workshop', href: '#workshop' },
-        { label: 'Services', href: '#services' },
-        { label: 'Reviews',  href: '#reviews'  },
-        { label: 'Visit',    href: '#visit'    },
-      ],
-      action: button({ label: 'Book a service', href: '#book', size: 'sm' }),
-    })}
-
-    <main id="main-content">
-      <section class="rw-hero" aria-labelledby="hero-title">
-        <div class="rw-hero-inner">
-          <p class="rw-hero-eyebrow">Established 1976</p>
-          <h1 id="hero-title" class="rw-hero-title">
-            Steel frames,<br>
-            <em>old roads,</em><br>
-            new adventures.
-          </h1>
-          <p class="rw-hero-sub">
-            A neighbourhood bicycle shop on Saddler Lane &mdash; restoring vintage bikes,
-            hand-building city cruisers, and keeping every steel-framed bicycle in town
-            rolling sweetly since the Carter administration.
-          </p>
-          <div class="rw-hero-actions">
-            ${button({ label: 'Browse the workshop', href: '#services', variant: 'primary',   size: 'lg' })}
-            ${button({ label: 'Saturday ride',       href: '#ride',     variant: 'secondary', size: 'lg' })}
-          </div>
-        </div>
-        <p class="rw-hero-image-credit">Photo: Unsplash</p>
-      </section>
-
-      <section class="rw-stat-strip" aria-label="Shop facts">
-        <div class="rw-stat-strip-inner">
-          ${stat({ label: 'Established',    value: '1976',   center: true })}
-          ${stat({ label: 'Bikes restored', value: '2,400+', center: true })}
-          ${stat({ label: 'Saturday riders', value: '60/wk', center: true })}
-          ${stat({ label: 'Carbon fibre',   value: 'None',   center: true })}
-        </div>
-      </section>
-
-      <section id="workshop" class="rw-editorial">
-        <p class="rw-eyebrow">The Workshop</p>
-        <h2 class="rw-section-title u-mt-3">A bicycle is a promise that you&rsquo;ll go outside.</h2>
-        <hr class="rw-rule">
-        <p>
-          We opened in the autumn of 1976 in a former ironmonger&rsquo;s on Saddler Lane.
-          Fifty years on, the floorboards still creak, the tea is still strong, and the
-          workbench is still covered in the same small jars of cotter pins and brass
-          ferrules. What we build today is the same thing we built then: bicycles you
-          could leave to your grandchildren.
-        </p>
-        <p>
-          We don&rsquo;t do carbon. We don&rsquo;t do electronic shifting. We do lugged steel,
-          hand-built wheels, three-speed hubs, and a fair few French derailleurs that
-          require patience and the correct sort of grease. If your bicycle has a name,
-          we&rsquo;d like to meet it.
-        </p>
-        ${badge({ label: 'Repairs by appointment · Workshop open Tues — Sun', variant: 'default' })}
-      </section>
-
-      <section id="services" class="rw-section rw-section--alt">
-        <div class="rw-section-inner">
-          <p class="rw-eyebrow">Services &amp; Goods</p>
-          <h2 class="rw-section-title">Six things we&rsquo;re rather good at.</h2>
-          <p class="rw-section-deck">
-            Prices are honest, the work is guaranteed for a year, and every bicycle that
-            leaves the workshop has been ridden round the block by someone who actually
-            cares.
-          </p>
-          <div class="rw-service-grid">
-            ${SERVICES.map(renderService).join('')}
-          </div>
-        </div>
-      </section>
-
-      <section id="reviews" class="rw-section">
-        <div class="rw-section-inner">
-          <p class="rw-eyebrow">From the Logbook</p>
-          <h2 class="rw-section-title">What folks have been saying.</h2>
-          <p class="rw-section-deck">Reviews collected from customers, riders, and the occasional postcard pinned to the workshop wall.</p>
-          <div class="rw-service-grid">
-            ${REVIEWS.map(renderReview).join('')}
-          </div>
-        </div>
-      </section>
-
-      <section id="visit" class="rw-section rw-section--alt">
-        <div class="rw-section-inner">
-          <p class="rw-eyebrow">Visit the Shop</p>
-          <h2 class="rw-section-title">Find us, ring us, or write.</h2>
-          <hr class="rw-rule">
-          <div class="rw-visit-grid">
-            <div>
-              <h3 class="rw-hours-heading">
-                ${iconClock({ size: 18 })} Opening hours
-              </h3>
-              <ul class="rw-hours" aria-label="Opening hours">
-                ${HOURS.map(renderHourRow).join('')}
-              </ul>
-              <div class="rw-address">
-                <p><strong>${iconMapPin({ size: 16 })} 14 Saddler Lane</strong><br>
-                Trumpington, Cambridge<br>
-                CB2 9PQ</p>
-                <p class="u-mt-3">${iconPhone({ size: 16 })} 01223 555 0176<br>
-                hello@retrowheels.co</p>
-              </div>
-            </div>
-
-            <div id="book">
-              ${card({
-                title:   'Book a service',
-                level:   3,
-                content: state.status === 'sent'
-                  ? `<p>Thanks &mdash; we&rsquo;ll be in touch within a working day. Tea&rsquo;s on when you arrive.</p>`
-                  : `<form data-action="bookService" novalidate>
-                       <p class="u-mb-4 u-text-muted">Drop us a line about your bicycle. We&rsquo;ll reply with a slot and an estimate.</p>
-                       ${input({ name: 'name',  label: 'Your name',               required: true })}
-                       ${input({ name: 'email', label: 'Email',                   type: 'email', required: true, class: 'u-mt-3' })}
-                       ${input({ name: 'bike',  label: 'Bicycle (make, year)',    placeholder: 'e.g. 1972 Raleigh Twenty', class: 'u-mt-3' })}
-                       <div class="u-mt-4">
-                         ${button({
-                           label: state.status === 'sending' ? 'Sending\u2026' : 'Send enquiry',
-                           type:  'submit',
-                           icon:  iconSend({ size: 16 }),
-                           attrs: state.status === 'sending' ? { 'aria-busy': 'true', disabled: '' } : {},
-                         })}
-                       </div>
-                     </form>`,
-              })}
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section id="ride" class="rw-ride-banner">
-        <p class="rw-eyebrow rw-eyebrow--on-orange">Every Saturday, 9 a.m. sharp</p>
-        <h2>${iconStar({ size: 28 })} Join the Saturday ride.</h2>
-        <p>Twenty miles, one cafe stop, no lycra required. Meet at the shop. Helmets sensible, bicycle of any vintage welcome.</p>
-        ${button({ label: 'Add me to the list', href: '#book', variant: 'secondary', size: 'lg' })}
-      </section>
-
-      <section class="rw-section">
-        <div class="rw-section-inner">
-          ${cta({
-            eyebrow:  'Workshop & Showroom',
-            title:    'Bring us a bicycle. Leave with a story.',
-            subtitle: 'Walk-ins welcome during opening hours. The kettle is always on.',
-            actions:  button({ label: 'Find the shop', href: '#visit', variant: 'primary', size: 'lg' }),
-          })}
-        </div>
-      </section>
-    </main>
-
-    ${footer({
-      logo:  LOGO,
-      links: [
-        { label: 'Workshop',      href: '#workshop' },
-        { label: 'Services',      href: '#services' },
-        { label: 'Visit',         href: '#visit'    },
-        { label: 'Saturday ride', href: '#ride'     },
-      ],
-      legal: '\u00a9 1976 \u2014 2026 Retro Wheels Co. \u00b7 14 Saddler Lane, Cambridge \u00b7 A bicycle is forever.',
-    })}
-    <script src="${asset('/pulse-ui.js')}" defer></script>
-  `,
-
-  actions: {
-    bookService: {
-      onStart: () => ({ status: 'sending' }),
-      run: async (_state, _server, formData) => {
-        const name  = (formData.get('name')  || '').trim()
-        const email = (formData.get('email') || '').trim()
-        if (!name)  throw new Error('Please tell us your name.')
-        if (!email) throw new Error('Please leave an email so we can reply.')
-        await new Promise(r => setTimeout(r, 350))
-        return { name }
-      },
-      onSuccess: () => ({
-        status: 'sent',
-        _toast: { message: 'Enquiry sent \u2014 we\u2019ll be in touch shortly.', variant: 'success' },
-      }),
-      onError: (_state, err) => ({
-        status: 'idle',
-        _toast: { message: err.message || 'Something went wrong. Try again?', variant: 'error' },
-      }),
-    },
-  },
-
-  onViewError: () => `
-    <main id="main-content" class="rw-editorial">
-      <h1>Spanner in the works</h1>
-      <p>Something went sideways. <a href="/retrowheels">Reload the page</a> or give us a ring on 01223 555 0176.</p>
-    </main>
-  `,
-}

package/docs/src/pages/templates/shop.js

@@ -1,268 +0,0 @@
-/**
- * Template: Shop — Product Page
- *
- * A clean, interactive e-commerce product page.
- * Light theme, blue accent. Full add-to-cart flow with a basket modal,
- * quantity controls, spec grid, and key stats.
- *
- * Vibe: minimal  Theme: light  Palette: blue / white
- *
- * Demonstrates:
- *   - nav() with a custom cart icon trigger and dialog-open
- *   - modal() basket with a live cart table
- *   - Quantity stepper with min/max constraints
- *   - heading(), badge(), stat(), grid()
- *   - Section eyebrow + rule rendered as raw HTML (replaces removed sectionLabel())
- *   - Minimal end-of-page metadata footer rendered as raw HTML (replaces removed colophon())
- *   - _toast on mutation success
- *   - Light theme with custom accent override
- */
-
-import {
-  nav, heading, badge, stat, grid,
-  button, modal, empty,
-  iconPlus, iconMinus, iconShoppingCart, iconCheck, iconPackage,
-} from '../../../../src/ui/index.js'
-import { asset } from '../../lib/layout.js'
-
-const SPECS = [
-  { label: 'Display',    value: '15.6" Retina, 2560×1664' },
-  { label: 'Processor',  value: 'M3 Pro, 12-core CPU' },
-  { label: 'Memory',     value: '32GB Unified Memory' },
-  { label: 'Storage',    value: '1TB SSD' },
-  { label: 'Battery',    value: 'Up to 18 hours' },
-  { label: 'Chassis',    value: 'Space Grey Aluminium' },
-  { label: 'Ports',      value: '3× USB-C, HDMI, SD card' },
-  { label: 'Weight',     value: '1.86 kg' },
-]
-
-const UNIT_PRICE = 1899
-
-export const formatPrice = (p) => `£${p.toLocaleString('en-GB')}`
-export const cartTotal   = (items) => items.reduce((sum, i) => sum + i.qty * i.unitPrice, 0)
-export const cartCount   = (items) => items.reduce((sum, i) => sum + i.qty, 0)
-
-const cartRows = (items) => items.map(({ name, qty, unitPrice }) => [
-  name,
-  String(qty),
-  formatPrice(unitPrice),
-  formatPrice(qty * unitPrice),
-])
-
-// Section eyebrow + heading + rule — replaces the removed sectionLabel() component
-const sectionLabel = ({ eyebrow, heading: headingText }) => `
-  <div class="shop-section-label">
-    <p class="shop-section-label-eyebrow">${eyebrow}</p>
-    ${heading({ text: headingText, level: 2, class: 'shop-section-label-heading' })}
-    <hr class="shop-section-label-rule" aria-hidden="true">
-  </div>
-`
-
-export default {
-  route: '/templates/shop',
-  meta: {
-    title:       'Shop — Product Page Template · Pulse',
-    description: 'Interactive e-commerce product page with cart modal, quantity controls, and spec grid. Built with Pulse.',
-    styles:      [
-      asset('/pulse-ui.css'),
-      asset('/shop.css'),
-    ],
-    theme: 'light',
-  },
-  state: {
-    qty:       1,
-    cartItems: [],
-    added:     false,
-  },
-  mutations: {
-    increment: (state) => ({
-      qty:   Math.min(state.qty + 1, 10),
-      added: false,
-    }),
-    decrement: (state) => ({
-      qty:   Math.max(state.qty - 1, 1),
-      added: false,
-    }),
-    addToCart: (state) => {
-      const existing = state.cartItems.find(i => i.name === 'DevBook Pro 15')
-      const cartItems = existing
-        ? state.cartItems.map(i =>
-            i.name === 'DevBook Pro 15'
-              ? { ...i, qty: i.qty + state.qty }
-              : i
-          )
-        : [...state.cartItems, { name: 'DevBook Pro 15', qty: state.qty, unitPrice: UNIT_PRICE }]
-      return {
-        cartItems,
-        added:  true,
-        _toast: { message: `${state.qty} × DevBook Pro 15 added to cart`, variant: 'success' },
-      }
-    },
-  },
-  view: (state) => {
-    const count = cartCount(state.cartItems)
-    const total = cartTotal(state.cartItems)
-
-    return `
-    ${nav({
-      logo:     `${iconPackage({ size: 18 })} Tech Stuff Inc.`,
-      logoHref: '/',
-      sticky:   true,
-      links:    [
-        { label: 'Laptops',     href: '/templates/shop' },
-        { label: 'Accessories', href: '#' },
-        { label: 'Support',     href: '#' },
-      ],
-      action: `
-        <button
-          type="button"
-          class="cart-trigger"
-          data-dialog-open="cart"
-          aria-label="${count > 0 ? `Open basket, ${count} item${count !== 1 ? 's' : ''}` : 'Open basket'}"
-        >
-          ${iconShoppingCart({ size: 18 })}
-          ${count > 0 ? `<span class="cart-bubble" aria-hidden="true">${count}</span>` : ''}
-        </button>
-      `,
-    })}
-
-    <script src="${asset('/pulse-ui.js')}" defer></script>
-
-    <main id="main-content">
-
-      <div class="page-body product-display">
-        ${heading({ text: 'DevBook Pro 15', level: 1, class: 'product-display-title' })}
-        <p class="product-tagline">Premium developer laptop for people who build things.</p>
-        <div class="product-meta-row">
-          ${badge({ label: 'In Stock', variant: 'success' })}
-          ${badge({ label: 'Ships in 24 hours', variant: 'info' })}
-        </div>
-      </div>
-
-      ${modal({
-        id:      'cart',
-        title:   'Your basket',
-        level:   2,
-        size:    'lg',
-        content: state.cartItems.length === 0
-          ? empty({ title: 'Your basket is empty', description: 'Add a product to get started.' })
-          : `
-            <table class="ui-table cart-table">
-              <thead>
-                <tr>
-                  <th scope="col">Product</th>
-                  <th scope="col" class="cart-col-num">Qty</th>
-                  <th scope="col" class="cart-col-num">Unit price</th>
-                  <th scope="col" class="cart-col-num">Subtotal</th>
-                </tr>
-              </thead>
-              <tbody>
-                ${cartRows(state.cartItems).map(([name, qty, unit, sub]) => `
-                  <tr>
-                    <td>${name}</td>
-                    <td class="cart-col-num">${qty}</td>
-                    <td class="cart-col-num">${unit}</td>
-                    <td class="cart-col-num">${sub}</td>
-                  </tr>
-                `).join('')}
-              </tbody>
-              <tfoot>
-                <tr class="cart-total-row">
-                  <td colspan="3"><strong>Total</strong></td>
-                  <td class="cart-col-num"><strong>${formatPrice(total)}</strong></td>
-                </tr>
-              </tfoot>
-            </table>
-          `,
-        footer: `
-          ${button({ label: 'Continue shopping', variant: 'secondary', attrs: { 'data-dialog-close': '' } })}
-          ${button({ label: 'Checkout', variant: 'primary', disabled: state.cartItems.length === 0 })}
-        `,
-      })}
-
-      <img
-        class="product-photo"
-        src="/images/shop/devbook-pro.jpg"
-        alt="DevBook Pro 15 open on a clean white desk showing a code editor, with headphones, a coffee mug, and a plant nearby"
-        width="1366"
-        height="912"
-      />
-
-      <div class="page-body product-purchase">
-        <p class="product-price">£1,899</p>
-
-        <div class="qty-control">
-          ${button({
-            label:    'Decrease quantity',
-            variant:  'secondary',
-            size:     'sm',
-            disabled: state.qty <= 1,
-            icon:     iconMinus({ size: 14 }),
-            class:    'qty-btn',
-            attrs:    { 'data-event': 'decrement', 'aria-label': 'Decrease quantity' },
-          })}
-          <span class="qty-value" aria-live="polite">${state.qty}</span>
-          ${button({
-            label:    'Increase quantity',
-            variant:  'secondary',
-            size:     'sm',
-            disabled: state.qty >= 10,
-            icon:     iconPlus({ size: 14 }),
-            class:    'qty-btn',
-            attrs:    { 'data-event': 'increment', 'aria-label': 'Increase quantity' },
-          })}
-        </div>
-
-        <div class="cart-actions">
-          ${button({
-            label:   state.added ? 'Added to cart' : 'Add to cart',
-            variant: 'primary',
-            size:    'lg',
-            icon:    state.added ? iconCheck({ size: 16 }) : iconShoppingCart({ size: 16 }),
-            attrs:   { 'data-event': 'addToCart' },
-          })}
-        </div>
-        ${state.added ? `<p class="added-confirm">${state.cartItems.find(i => i.name === 'DevBook Pro 15')?.qty ?? 0} item${(state.cartItems.find(i => i.name === 'DevBook Pro 15')?.qty ?? 0) !== 1 ? 's' : ''} in your basket.</p>` : ''}
-      </div>
-
-      <div class="page-body product-specs">
-        ${sectionLabel({ eyebrow: 'Under the hood', heading: 'Full specifications' })}
-        <div class="spec-grid">
-          ${SPECS.map(({ label, value }) => `
-            <div class="spec-item">
-              <span class="spec-label">${label}</span>
-              <span class="spec-value">${value}</span>
-            </div>
-          `).join('')}
-        </div>
-      </div>
-
-      <div class="page-body product-stats">
-        ${sectionLabel({ eyebrow: 'At a glance', heading: 'Key numbers' })}
-        <div class="product-stats-grid">
-          ${grid({ cols: 3, content:
-            stat({ label: 'Battery life', value: '18 hrs', trend: 'up' }) +
-            stat({ label: 'Unified memory', value: '32 GB' }) +
-            stat({ label: 'Delivery', value: '24 hrs', trend: 'up' })
-          })}
-        </div>
-      </div>
-
-    </main>
-
-    <footer class="shop-colophon">
-      <div class="shop-colophon-inner">
-        <p>© 2026 Tech Stuff Inc. · <a href="#">Terms</a> · <a href="#">Privacy</a></p>
-      </div>
-    </footer>
-  `
-  },
-
-  onViewError: () => `
-    <main id="main-content">
-      <div class="view-error">
-        <p>Something went wrong loading this page. <a href="/templates/shop">Reload</a></p>
-      </div>
-    </main>
-  `,
-}