@invisibleloop/pulse 0.20.10 → 0.20.19

package/examples/retrowheels.js

@@ -1,353 +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'
-
-// ---------------------------------------------------------------------------
-// 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: '/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', '/examples/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.',
-    })}
-  `,
-
-  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/examples/shared.js

@@ -1,84 +0,0 @@
-/**
- * Shared helpers for Pulse examples.
- * All examples import from here to stay DRY.
- */
-
-import { nav }                from '../src/ui/index.js'
-import { iconSun, iconMoon } from '../src/ui/icons.js'
-
-const ALL_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'  },
-  { label: 'Swish',     href: '/swish'     },
-  { label: 'BookWorms',   href: '/bookworms'   },
-  { label: 'Retro Wheels',  href: '/retrowheels'  },
-  { label: 'Susuki Bento', href: '/suzukibento'  },
-  { label: 'Andy Pixel',   href: '/andypixel'    },
-  { label: 'Journey',      href: '/journey'       },
-]
-
-// Both icons rendered in DOM; JS hides the inactive one via `hidden` attribute.
-// Dark mode (default): show sun (click → go light). Light mode: show moon (click → go dark).
-const themeToggleButton = `
-<button id="theme-toggle" class="ui-btn ui-btn--ghost ui-btn--sm" aria-label="Switch to light mode" style="display:flex;align-items:center;">
-  <span id="theme-icon-sun">${iconSun({ size: 16 })}</span>
-  <span id="theme-icon-moon" hidden>${iconMoon({ size: 16 })}</span>
-</button>`
-
-/**
- * Returns a nonce'd theme-switcher script for use as `extraBody` in createServer.
- * Must be injected server-side so the nonce matches the page's CSP header.
- *
- * Usage in dev.server.js:
- *   createServer(specs, { extraBody: themeScript })
- *
- * @param {string} nonce
- */
-export function themeScript(nonce) {
-  return `<script nonce="${nonce}">
-(function () {
-  var KEY = 'pulse-theme', LIGHT = 'light', DARK = 'dark'
-  var theme = localStorage.getItem(KEY) === LIGHT ? LIGHT : DARK
-  document.documentElement.dataset.theme = theme
-
-  function updateUI(t) {
-    var sun  = document.getElementById('theme-icon-sun')
-    var moon = document.getElementById('theme-icon-moon')
-    if (sun)  sun.hidden  = (t === LIGHT)
-    if (moon) moon.hidden = (t !== LIGHT)
-    var btn = document.getElementById('theme-toggle')
-    if (btn)  btn.setAttribute('aria-label', t === LIGHT ? 'Switch to dark mode' : 'Switch to light mode')
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function () { updateUI(theme) }, { once: true })
-  } else {
-    updateUI(theme)
-  }
-
-  if (window.__themeInit) return
-  window.__themeInit = true
-  document.addEventListener('click', function (e) {
-    var btn = e.target.closest('#theme-toggle')
-    if (!btn) return
-    var next = document.documentElement.dataset.theme === LIGHT ? DARK : LIGHT
-    localStorage.setItem(KEY, next)
-    document.documentElement.dataset.theme = next
-    updateUI(next)
-  })
-})()
-</script>`
-}
-
-/**
- * Renders the shared examples nav bar using the ui-nav component.
- * @param {string} logo     - Raw HTML logo slot
- * @param {string} logoHref - Logo link destination
- */
-export function examplesNav(logo, logoHref) {
-  return nav({ logo, logoHref, links: ALL_LINKS, sticky: true, action: themeToggleButton })
-}