@invisibleloop/pulse 0.20.11 → 0.20.19

package/examples/bookworms.js

@@ -1,225 +0,0 @@
-/**
- * Pulse — BookWorms example
- *
- * Demonstrates:
- *   - Light-theme editorial branding for a physical/independent business
- *   - nav() with logo text, anchor links, and a CTA action button
- *   - Pure HTML sections — no Pulse section/container wrappers (shows the
- *     framework is just strings; you can write vanilla HTML where it fits)
- *   - Book card grid (staff picks) with cover images from picsum.photos
- *   - Pull-quote / press quote breakout
- *   - Two-column feature grid
- *   - Bordered event list with date / title / host columns
- *   - Centred CTA section
- *   - footer() with flat link list
- *   - Google Fonts (Fraunces) for display headings
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/bookworms
- */
-
-import { nav, button, footer } from '../src/ui/index.js'
-
-// ---------------------------------------------------------------------------
-// Static data
-// ---------------------------------------------------------------------------
-
-const picks = [
-  {
-    tag:    'Fiction · Staff pick',
-    title:  'The Lantern Keepers',
-    author: 'Iris Aldenmoor',
-    note:   'A quiet novel about three sisters, an unreliable lighthouse, and the long winter that follows a single decision.',
-    cover:  '/images/bookworms/lantern-keepers.jpg',
-  },
-  {
-    tag:    'Non-fiction · This week',
-    title:  'How We Read Now',
-    author: 'Dr. Samuel Okafor',
-    note:   'A short, generous history of attention — from monastic libraries to the open browser tab.',
-    cover:  '/images/bookworms/how-we-read-now.jpg',
-  },
-  {
-    tag:    'Rare find · Just arrived',
-    title:  'Letters from a Provincial Bookseller',
-    author: 'M. Halloran (1927)',
-    note:   'First edition, lightly foxed. A wry account of running a shop through a quiet decade.',
-    cover:  '/images/bookworms/provincial-bookseller.jpg',
-  },
-]
-
-const features = [
-  {
-    title: 'Curated, not algorithmic',
-    body:  'Every recommendation comes from one of our booksellers. No bestseller lists, no engagement metrics — just books we\'ve read and would lend you ourselves.',
-  },
-  {
-    title: 'Browse by mood',
-    body:  'Looking for something restorative? Something difficult? Our shelves are arranged the way readers actually think.',
-  },
-  {
-    title: 'Author evenings & book clubs',
-    body:  'Small, considered events with writers we admire. Wine, conversation, and signed copies — no panels of four.',
-  },
-  {
-    title: 'Free delivery over £25',
-    body:  'Wrapped by hand, delivered locally by bicycle. Posted further afield by the next morning.',
-  },
-  {
-    title: 'Gift cards & reader subscriptions',
-    body:  'A monthly book chosen for one specific reader, with a note from the bookseller who picked it.',
-  },
-  {
-    title: 'Open seven days',
-    body:  'Old Market Lane, opposite the bakery. Coffee from nine, books from ten.',
-  },
-]
-
-const events = [
-  { date: '12 June',  title: 'An evening with Iris Aldenmoor', host: 'In conversation with Priya Joshi' },
-  { date: '21 June',  title: 'Slow Reading Club — Middlemarch, part one', host: 'Hosted by the BookWorms team' },
-  { date: '03 July',  title: 'New voices in non-fiction', host: 'Three debut authors read and answer questions' },
-]
-
-const navLinks = [
-  { label: 'Browse',      href: '#browse' },
-  { label: 'Staff picks', href: '#picks'  },
-  { label: 'Events',      href: '#events' },
-  { label: 'Visit',       href: '#visit'  },
-]
-
-// ---------------------------------------------------------------------------
-// Spec
-// ---------------------------------------------------------------------------
-
-export default {
-  route: '/bookworms',
-
-  meta: {
-    title:       'BookWorms — an independent bookstore for curious readers',
-    description: 'Handpicked fiction, non-fiction, and rare finds. Weekly staff picks, author evenings, and a slow reading club. Open seven days on Old Market Lane.',
-    theme:       'light',
-    styles:      [
-      'https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap',
-      '/pulse-ui.css',
-      '/examples/bookworms.css',
-    ],
-  },
-
-  view: () => `
-    ${nav({
-      logo:   'BookWorms',
-      links:  navLinks,
-      action: button({ label: 'Visit the shop', href: '#visit', variant: 'primary', size: 'sm' }),
-      sticky: true,
-    })}
-
-    <main id="main-content">
-      <section class="bw-hero">
-        <div class="bw-shell bw-hero__inner">
-          <div class="bw-hero__content">
-            <p class="bw-eyebrow">Independent bookstore · Old Market Lane</p>
-            <h1 class="bw-hero-title">Books, handpicked for the curious.</h1>
-            <p class="bw-hero-lede">
-              BookWorms is a small shop with a long memory. Every title on our shelves has been read by
-              someone who works here — and is waiting for the right reader to find it.
-            </p>
-            <div class="bw-cta-actions bw-cta-actions--start">
-              ${button({ label: 'See this week\u2019s picks', href: '#picks', variant: 'primary' })}
-              ${button({ label: 'Upcoming events',            href: '#events', variant: 'secondary' })}
-            </div>
-          </div>
-          <div class="bw-hero__image" aria-hidden="true">
-            <img src="/images/bookworms/hero-books.jpg" alt="" width="820" height="1080" />
-          </div>
-        </div>
-      </section>
-
-      <section class="bw-section" id="picks">
-        <div class="bw-shell">
-          <p class="bw-section-label">This week</p>
-          <h2 class="bw-section-title">Three books we\u2019re pressing into people\u2019s hands.</h2>
-          <div class="bw-picks">
-            ${picks.map((p, i) => `
-              <article>
-                <div class="bw-pick-cover-wrap">
-                  <img class="bw-pick-cover" src="${p.cover}" alt="Cover of ${p.title} by ${p.author}" width="400" height="600" loading="lazy" />
-                  <div class="bw-pick-overlay">
-                    <h3 class="bw-pick-overlay-title">${p.title}</h3>
-                    <p class="bw-pick-overlay-author">${i === 2 ? p.author.replace(/\s*\(\d{4}\)/, '') : 'by ' + p.author}</p>
-                  </div>
-                </div>
-                <p class="bw-pick-meta">${p.tag}</p>
-                <h3 class="bw-pick-title">${p.title}</h3>
-                <p class="bw-pick-author">by ${p.author}</p>
-                <p class="bw-pick-note">${p.note}</p>
-              </article>
-            `).join('')}
-          </div>
-        </div>
-      </section>
-
-      <section class="bw-pull">
-        <div class="bw-shell">
-          <p class="bw-pull-quote">\u201cThe kind of shop where you walk in for one book and leave with three you didn\u2019t know you needed.\u201d</p>
-          <p class="bw-pull-cite">\u2014 The Quarterly Review</p>
-        </div>
-      </section>
-
-      <section class="bw-section" id="browse">
-        <div class="bw-shell">
-          <p class="bw-section-label">What we do</p>
-          <h2 class="bw-section-title">A bookstore that still reads.</h2>
-          <div class="bw-features">
-            ${features.map(f => `
-              <div>
-                <h3 class="bw-feature-title">${f.title}</h3>
-                <p class="bw-feature-body">${f.body}</p>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-      </section>
-
-      <section class="bw-section" id="events">
-        <div class="bw-shell">
-          <p class="bw-section-label">Upcoming</p>
-          <h2 class="bw-section-title">Evenings worth turning up for.</h2>
-          <div class="bw-events">
-            ${events.map(e => `
-              <article class="bw-event">
-                <p class="bw-event-date">${e.date}</p>
-                <h3 class="bw-event-title">${e.title}</h3>
-                <p class="bw-event-host">${e.host}</p>
-              </article>
-            `).join('')}
-          </div>
-        </div>
-      </section>
-
-      <section class="bw-cta" id="visit">
-        <div class="bw-shell">
-          <h2 class="bw-cta-title">Come and browse.</h2>
-          <p class="bw-cta-sub">
-            14 Old Market Lane, opposite the bakery. Open Monday to Sunday, 10am\u20137pm.
-            Or sign up to receive one handpicked book each month.
-          </p>
-          <div class="bw-cta-actions">
-            ${button({ label: 'Plan a visit',          href: '#visit', variant: 'primary'   })}
-            ${button({ label: 'Reader subscription',   href: '#visit', variant: 'secondary' })}
-          </div>
-        </div>
-      </section>
-    </main>
-
-    ${footer({
-      logo:  'BookWorms',
-      links: [
-        { label: 'Browse',  href: '#browse' },
-        { label: 'Events',  href: '#events' },
-        { label: 'Visit',   href: '#visit'  },
-        { label: 'Contact', href: '#visit'  },
-      ],
-      legal: '\u00a9 2026 BookWorms \u00b7 14 Old Market Lane',
-    })}
-  `,
-}

package/examples/contact.js

@@ -1,166 +0,0 @@
-/**
- * Pulse — Contact form example
- *
- * Demonstrates:
- *   - Server data (fetched before render, passed to view)
- *   - Validation (required, email format, length limits)
- *   - Async action with full lifecycle: onStart → validate → run → onSuccess/onError
- *   - Loading, success, and error states
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/contact
- */
-
-import { button, alert, heading, input, textarea, card, container, section, stack, grid, iconMail, iconPhone, iconMapPin, iconClock, iconCheckCircle } from '../src/ui/index.js'
-import { examplesNav } from './shared.js'
-
-function infoDetail(icon, label, value, href) {
-  const valueHtml = href
-    ? `<a href="${href}" class="u-text-default">${value}</a>`
-    : `<span>${value}</span>`
-  return `<div class="u-flex u-items-start u-gap-3">
-    <span class="u-text-muted u-shrink-0" aria-hidden="true">${icon}</span>
-    <div>
-      <p class="u-text-xs u-text-muted u-font-semibold u-mb-1">${label}</p>
-      <p class="u-text-sm">${valueHtml}</p>
-    </div>
-  </div>`
-}
-
-export default {
-  route:   '/contact',
-
-  meta: {
-    title:       'Contact — Pulse',
-    description: 'A contact form built with Pulse. Demonstrates server data, validation, and async action lifecycle.',
-    styles:      ['/pulse-ui.css'],
-    theme:       'dark',
-  },
-
-  server: {
-    info: async () => ({
-      email:   'hello@example.com',
-      phone:   '+44 20 7946 0958',
-      address: '123 Shoreditch High St, London E1 6JE',
-      hours:   'Monday – Friday, 9 am – 5 pm GMT',
-    }),
-  },
-
-  state: {
-    status: 'idle',   // idle | loading | success | error
-    errors: [],
-    fields: { name: '', email: '', subject: '', message: '' },
-  },
-
-  validation: {
-    'fields.name':    { required: true, minLength: 2, maxLength: 80 },
-    'fields.email':   { required: true, format: 'email' },
-    'fields.subject': { required: true, minLength: 2, maxLength: 120 },
-    'fields.message': { required: true, minLength: 10, maxLength: 2000 },
-  },
-
-  mutations: {
-    reset: () => ({ status: 'idle', errors: [], fields: { name: '', email: '', subject: '', message: '' } }),
-  },
-
-  actions: {
-    submit: {
-      onStart: (_state, formData) => ({
-        status: 'loading',
-        errors: [],
-        fields: {
-          name:    formData.get('name')    || '',
-          email:   formData.get('email')   || '',
-          subject: formData.get('subject') || '',
-          message: formData.get('message') || '',
-        },
-      }),
-
-      validate: true,
-
-      run: async (_state, _server, formData) => {
-        // Simulate sending — replace with a real fetch() to your API
-        await new Promise(resolve => setTimeout(resolve, 900))
-        // Demo: email addresses containing "fail" trigger the error path
-        if ((formData.get('email') || '').includes('fail')) {
-          throw new Error('Unable to deliver message. Please try another address.')
-        }
-      },
-
-      onSuccess: () => ({ status: 'success', errors: [] }),
-
-      onError: (_state, err) => ({
-        status: 'error',
-        errors: err?.validation
-          ? err.validation.map(e => {
-              const field = e.path?.split('.').pop() || ''
-              const label = { name: 'Name', email: 'Email', subject: 'Subject', message: 'Message' }[field] || field
-              const msg = e.rule === 'required'  ? `${label} is required`
-                        : e.rule === 'minLength' ? `${label} is too short`
-                        : e.rule === 'maxLength' ? `${label} is too long`
-                        : e.rule === 'format'    ? `${label} must be a valid email address`
-                        : e.message
-              return { field, message: msg }
-            })
-          : [{ message: err?.message || 'Something went wrong. Please try again.' }],
-      }),
-    },
-  },
-
-  view: (state, server) => {
-    const { info } = server
-    const loading   = state.status === 'loading'
-    const isSuccess = state.status === 'success'
-
-    const fieldError = (field) => state.errors.find(e => e.field === field)?.message || ''
-
-    const infoCol = stack({ gap: 'lg', content: `
-      ${heading({ level: 2, text: 'Get in touch', size: 'xl' })}
-      <p class="u-text-sm u-text-muted">Fill in the form and we&rsquo;ll get back to you within one business day.</p>
-      ${stack({ gap: 'md', content: `
-        ${infoDetail(iconMail({ size: 18 }),   'Email',   info.email,   'mailto:' + info.email)}
-        ${infoDetail(iconPhone({ size: 18 }),  'Phone',   info.phone,   'tel:' + info.phone.replace(/\s/g, ''))}
-        ${infoDetail(iconMapPin({ size: 18 }), 'Address', info.address, null)}
-        ${infoDetail(iconClock({ size: 18 }),  'Hours',   info.hours,   null)}
-      ` })}
-    ` })
-
-    const cardContent = isSuccess
-      ? stack({ gap: 'md', align: 'center', content:
-          iconCheckCircle({ size: 48, bg: 'circle', bgColor: 'success' }) +
-          heading({ level: 2, text: 'Message sent!', size: 'xl' }) +
-          `<p class="u-text-sm u-text-muted u-text-center">Thanks for reaching out. We&rsquo;ll be in touch within one business day.</p>` +
-          button({ label: 'Send another message', variant: 'secondary', attrs: { 'data-event': 'reset' } })
-        })
-      : `<form data-action="submit" novalidate>
-          <fieldset style="border:none;padding:0;margin:0" ${loading ? 'disabled' : ''}>
-            <legend class="u-text-lg u-font-semibold u-mb-5">Send a message</legend>
-            ${stack({ gap: 'md', content: `
-              ${state.status === 'error' && state.errors.length > 0
-                ? alert({ variant: 'error', content: state.errors[0]?.message || 'Please check the fields below.' })
-                : ''}
-              ${grid({ cols: 2, gap: 'sm', content:
-                input({ name: 'name',  label: 'Name',          type: 'text',  placeholder: 'Jane Smith',       value: state.fields.name,    required: true, error: fieldError('name')    }) +
-                input({ name: 'email', label: 'Email address',  type: 'email', placeholder: 'jane@example.com', value: state.fields.email,   required: true, error: fieldError('email')   })
-              })}
-              ${input({ name: 'subject', label: 'Subject', placeholder: 'How can we help?', value: state.fields.subject, required: true, error: fieldError('subject') })}
-              ${textarea({ name: 'message', label: 'Message', placeholder: "Tell us what's on your mind…", value: state.fields.message, rows: 5, required: true, error: fieldError('message') })}
-              ${button({ label: loading ? 'Sending…' : 'Send message', type: 'submit', fullWidth: true, disabled: loading })}
-            ` })}
-          </fieldset>
-        </form>`
-
-    return `
-  ${examplesNav('<span>✉ Contact</span>', '/contact')}
-
-  <main id="main-content">
-    ${section({ eyebrow: 'Contact', title: 'We\u2019d love to hear from you', level: 1, content:
-      container({ size: 'lg', content:
-        grid({ cols: 2, gap: 'lg', content: `
-          <div>${infoCol}</div>
-          <div>${card({ content: cardContent })}</div>
-        ` })
-      })
-    })}
-  </main>`
-  },
-}

package/examples/counter.js

@@ -1,94 +0,0 @@
-/**
- * Pulse — Counter example
- *
- * Demonstrates:
- *   - State and mutations
- *   - Constraints (min/max enforced after every mutation)
- *   - data-event binding
- *   - Hydration for client interactivity
- *
- * Run: node examples/dev.server.js  →  http://localhost:3001/counter
- */
-
-import { button, badge, card, container, section, stack, cluster, progress, segmented } from '../src/ui/index.js'
-import { examplesNav } from './shared.js'
-
-export default {
-  route:   '/counter',
-
-  meta: {
-    title:       'Counter — Pulse',
-    description: 'An interactive counter built with Pulse. Demonstrates mutations, constraints, and data-event binding.',
-    styles:      ['/pulse-ui.css'],
-    theme:       'dark',
-  },
-
-  state: {
-    count: 0,
-    step:  1,
-  },
-
-  constraints: {
-    count: { min: 0, max: 20 },
-    step:  { min: 1, max: 5  },
-  },
-
-  mutations: {
-    increment: (state) => ({ count: state.count + state.step }),
-    decrement: (state) => ({ count: state.count - state.step }),
-    reset:     ()      => ({ count: 0 }),
-    setStep:   (_state, e) => ({ step: parseInt(e.target.value, 10) || 1 }),
-  },
-
-  view: (state) => {
-    const atMin = state.count <= 0
-    const atMax = state.count >= 20
-
-
-    return `
-  ${examplesNav('<span>⚡ Counter</span>', '/counter')}
-
-  <main id="main-content">
-    ${section({ eyebrow: 'Mutations & Constraints', title: 'Counter', level: 1, align: 'center',
-      subtitle: 'Constraints are enforced after every mutation — the count can never go below 0 or above 20.',
-      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-3" aria-live="polite" aria-atomic="true">
-            <span class="u-text-7xl u-font-bold u-text-accent">${state.count}</span>
-            <span class="u-text-3xl u-text-muted u-mb-2">/ 20</span>
-          </div>
-
-          ${progress({ value: state.count, max: 20, label: 'Counter progress' })}
-
-          ${cluster({ justify: 'center', gap: 'sm', content:
-            button({ label: '−', variant: 'secondary', disabled: atMin, attrs: { 'data-event': 'decrement', 'aria-label': 'Decrement' } }) +
-            button({ label: 'Reset', variant: 'ghost', attrs: { 'data-event': 'reset' } }) +
-            button({ label: '+', variant: 'primary', disabled: atMax, attrs: { 'data-event': 'increment', 'aria-label': 'Increment' } })
-          })}
-
-          ${stack({ gap: 'xs', align: 'center', content: `
-            <p class="u-text-xs u-text-muted" id="step-label">Step size</p>
-            ${segmented({
-              name:    'step',
-              value:   String(state.step),
-              event:   'change:setStep',
-              options: [1, 2, 5].map(n => ({ value: n, label: String(n) })),
-              size:    'md',
-            })}
-          ` })}
-
-          ${cluster({ justify: 'center', gap: 'xs', content:
-            badge({ label: atMin ? 'At minimum' : 'Min: 0', variant: atMin ? 'warning' : 'default' }) +
-            badge({ label: atMax ? 'At maximum' : 'Max: 20', variant: atMax ? 'warning' : 'default' })
-          })}
-
-        ` }) })}
-
-      `})
-    })}
-  </main>`
-  },
-}

package/examples/dev.server.js

@@ -1,110 +0,0 @@
-/**
- * Pulse — Examples dev server
- *
- * Serves all six standalone example apps.
- * Handles /src/, /examples/, and /public/ as static JS so dev hydration works.
- *
- * Run: node examples/dev.server.js
- *
- *   http://localhost:3001/counter   — mutations + constraints
- *   http://localhost:3001/todos     — CRUD + persist + filter
- *   http://localhost:3001/contact   — server data + validation + action
- *   http://localhost:3001/quiz      — multi-step state machine
- *   http://localhost:3001/products  — server data + search/filter/sort
- *   http://localhost:3001/pricing   — landing page components + billing toggle
- *   http://localhost:3001/swish     — editorial fashion branding + light theme
- *   http://localhost:3001/bookworms   — independent bookshop, Fraunces font, picsum covers
- *   http://localhost:3001/retrowheels  — vintage bicycle shop, slab-serif, booking form
- *   http://localhost:3001/suzukibento  — artist portfolio, dark brutalist, asymmetric grid
- *   http://localhost:3001/andypixel   — blog article, editorial light, newsletter action
- *   http://localhost:3001/journey     — app landing page, dark split-screen, sticky timeline
- */
-
-import fs   from 'fs'
-import path from 'path'
-import { createServer } from '../src/server/index.js'
-import { themeScript }  from './shared.js'
-
-const ROOT = path.resolve(import.meta.dirname, '..')
-
-const MIME = {
-  '.js':   'application/javascript',
-  '.css':  'text/css',
-  '.json': 'application/json',
-  '.html': 'text/html; charset=utf-8',
-}
-
-// /@pulse/runtime/* → src/runtime/*
-// /@pulse/ui/*      → src/ui/*
-// Maps bare-specifier aliases used by the dev-mode bootstrap.
-const PULSE_PREFIX_MAP = {
-  '/@pulse/runtime/': path.join(ROOT, 'src/runtime/'),
-  '/@pulse/ui/':      path.join(ROOT, 'src/ui/'),
-}
-
-// Serve /src/, /examples/, and /@pulse/ alias paths so the browser can import
-// spec and runtime files during dev hydration.
-function staticHandler(req, res) {
-  const url      = new URL(req.url, 'http://localhost')
-  const pathname = url.pathname
-
-  // /@pulse/* prefix aliases → src/
-  for (const [prefix, dir] of Object.entries(PULSE_PREFIX_MAP)) {
-    if (pathname.startsWith(prefix)) {
-      const filePath = path.join(dir, pathname.slice(prefix.length))
-      if (!filePath.startsWith(dir)) return
-      let stat
-      try { stat = fs.statSync(filePath) } catch { return }
-      if (!stat.isFile()) return
-      res.writeHead(200, { 'Content-Type': 'application/javascript' })
-      fs.createReadStream(filePath).pipe(res)
-      return false
-    }
-  }
-
-  if (!pathname.startsWith('/examples/') && !pathname.startsWith('/src/')) return
-
-  const filePath = path.join(ROOT, pathname)
-  if (!filePath.startsWith(ROOT + path.sep)) return
-
-  let stat
-  try { stat = fs.statSync(filePath) } catch { return }
-  if (!stat.isFile()) return
-
-  const ext  = path.extname(filePath)
-  const mime = MIME[ext] || 'text/plain'
-
-  res.writeHead(200, { 'Content-Type': mime })
-  fs.createReadStream(filePath).pipe(res)
-  return false
-}
-
-await createServer(
-  [
-    new URL('./counter.js',  import.meta.url),
-    new URL('./todos.js',    import.meta.url),
-    new URL('./contact.js',  import.meta.url),
-    new URL('./quiz.js',     import.meta.url),
-    new URL('./products.js', import.meta.url),
-    new URL('./pricing.js',  import.meta.url),
-    new URL('./swish.js',    import.meta.url),
-    new URL('./bookworms.js',    import.meta.url),
-    new URL('./retrowheels.js', import.meta.url),
-    new URL('./suzukibento.js', import.meta.url),
-    new URL('./andypixel.js',   import.meta.url),
-    new URL('./journey.js',     import.meta.url),
-  ],
-  {
-    port:       3001,
-    stream:     true,
-    staticDir:  path.join(ROOT, 'public'),
-    root:       new URL('..', import.meta.url),  // pulse2/ — specs served at /examples/*
-    onRequest:  staticHandler,
-    extraBody:  themeScript,
-    csp: {
-      'style-src': ['https://fonts.googleapis.com'],
-      'font-src':  ['https://fonts.gstatic.com'],
-      'img-src':   ['https://images.unsplash.com', 'https://picsum.photos', 'https://fastly.picsum.photos'],
-    },
-  }
-)