@invisibleloop/pulse 0.20.10 → 0.20.19

package/examples/public/pulse-ui.js

@@ -1,257 +0,0 @@
-/**
- * pulse-ui.js — Vanilla JS for interactive Pulse UI components
- *
- * Handles:
- *   - Slider     (.ui-slider — live fill + value output)
- *   - File Upload (.ui-upload — drag-and-drop, click-to-open)
- *   - Modal      (data-modal-open, <dialog>, backdrop close)
- *   - Nav        (.ui-nav — mobile burger menu)
- *   - Carousel   (.ui-carousel — prev/next/dots)
- *
- * No dependencies. No build step required.
- * CSP-safe: no inline handlers — all behaviour via event delegation.
- * Include once per page: <script src="/pulse-ui.js"></script>
- */
-
-// ─── Slider ──────────────────────────────────────────────────────────────────
-// Update --slider-fill on .ui-field wrapper + optional live value output.
-
-document.addEventListener('input', (e) => {
-  const el = e.target
-  if (!el.classList.contains('ui-slider')) return
-  const field = el.closest('.ui-field')
-  if (!field) return
-  const pct = ((el.value - el.min) / (el.max - el.min) * 100).toFixed(2) + '%'
-  field.style.setProperty('--slider-fill', pct)
-  const out = field.querySelector('.ui-slider-output')
-  if (out) out.textContent = el.value
-})
-
-// ─── File Upload ─────────────────────────────────────────────────────────────
-// Prevent browser navigating to dropped file anywhere on the page.
-// Handle drag visual feedback + file assignment on drop.
-// Handle click-to-open and keyboard activation.
-
-document.addEventListener('dragover', (e) => {
-  e.preventDefault()
-  if (!(e.target instanceof Element)) return
-  const zone = e.target.closest('.ui-upload:not(.ui-upload--disabled)')
-  if (zone) zone.classList.add('ui-upload--active')
-})
-
-document.addEventListener('dragleave', (e) => {
-  if (!(e.target instanceof Element)) return
-  const zone = e.target.closest('.ui-upload')
-  if (zone && !zone.contains(e.relatedTarget)) {
-    zone.classList.remove('ui-upload--active')
-  }
-})
-
-document.addEventListener('drop', (e) => {
-  e.preventDefault()
-  if (!(e.target instanceof Element)) return
-  const zone = e.target.closest('.ui-upload:not(.ui-upload--disabled)')
-  if (!zone) return
-  zone.classList.remove('ui-upload--active')
-  const input = zone.querySelector('.ui-upload-input')
-  if (!input || !e.dataTransfer.files.length) return
-  const dt = new DataTransfer()
-  Array.from(e.dataTransfer.files).forEach(f => dt.items.add(f))
-  input.files = dt.files
-  input.dispatchEvent(new Event('change', { bubbles: true }))
-})
-
-// File Upload: show selected filename in zone after file chosen
-document.addEventListener('change', (e) => {
-  const input = e.target
-  if (!input.classList.contains('ui-upload-input')) return
-  const zone = input.closest('.ui-upload')
-  if (!zone) return
-  const textEl = zone.querySelector('.ui-upload-text')
-  if (!textEl) return
-  if (input.files && input.files.length > 0) {
-    const names = Array.from(input.files).map(f => f.name).join(', ')
-    textEl.textContent = names
-    zone.classList.add('ui-upload--selected')
-  } else {
-    textEl.innerHTML = 'Drag &amp; drop or <span class="ui-upload-browse">browse</span>'
-    zone.classList.remove('ui-upload--selected')
-  }
-})
-
-// ─── Modal ──────────────────────────────────────────────────────────────────
-
-document.addEventListener('click', (e) => {
-  // File upload: click zone → open file picker
-  // Skip synthetic clicks emitted by input.click() itself to avoid loops
-  if (!e.target.classList.contains('ui-upload-input')) {
-    const zone = e.target.closest('.ui-upload')
-    if (zone) {
-      const input = zone.querySelector('.ui-upload-input')
-      if (input && !input.disabled) { input.click(); return }
-    }
-  }
-
-  // Dialog open: data-dialog-open="dialogId" (first-class) or data-modal-open="dialogId" (compat)
-  const trigger = e.target.closest('[data-dialog-open],[data-modal-open]')
-  if (trigger) {
-    const id     = trigger.dataset.dialogOpen ?? trigger.dataset.modalOpen
-    const dialog = document.getElementById(id)
-    if (dialog && typeof dialog.showModal === 'function') {
-      dialog.showModal()
-    }
-    return
-  }
-
-  // Dialog close: data-dialog-close (closes nearest ancestor <dialog>)
-  const closeTarget = e.target.closest('[data-dialog-close]')
-  if (closeTarget) {
-    const dialog = closeTarget.closest('dialog')
-    if (dialog) dialog.close()
-    return
-  }
-
-  // Backdrop close — click lands on <dialog> element itself
-  if (e.target.tagName === 'DIALOG') {
-    e.target.close()
-  }
-})
-
-// File upload: Enter / Space on focused zone → open picker
-document.addEventListener('keydown', (e) => {
-  if (e.key !== 'Enter' && e.key !== ' ') return
-  const zone = e.target.closest('.ui-upload')
-  if (!zone) return
-  const input = zone.querySelector('.ui-upload-input')
-  if (input && !input.disabled) { e.preventDefault(); input.click() }
-})
-
-// ─── Nav (mobile burger) ────────────────────────────────────────────────────
-
-function initNav(el) {
-  if (el.dataset.pulseNavInit) return
-  el.dataset.pulseNavInit = '1'
-
-  const burger = el.querySelector('.ui-nav-burger')
-  const mobile = el.querySelector('.ui-nav-mobile')
-
-  // Mobile burger
-  if (burger && mobile) {
-    const open   = () => { el.classList.add('ui-nav--open');    burger.setAttribute('aria-expanded', 'true') }
-    const close  = () => { el.classList.remove('ui-nav--open'); burger.setAttribute('aria-expanded', 'false') }
-    const toggle = () => el.classList.contains('ui-nav--open') ? close() : open()
-
-    burger.addEventListener('click', toggle)
-    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
-    document.addEventListener('click',   (e) => { if (!el.contains(e.target)) close() })
-    mobile.querySelectorAll('.ui-nav-link').forEach(a => a.addEventListener('click', close))
-  }
-
-  // Mega nav dropdowns
-  el.querySelectorAll('.ui-nav-mega-wrap').forEach(wrap => {
-    const trigger = wrap.querySelector('.ui-nav-mega-trigger')
-    const panel   = wrap.querySelector('.ui-nav-mega-panel')
-    if (!trigger || !panel) return
-
-    const openMega  = () => { panel.hidden = false; wrap.classList.add('ui-nav-mega-wrap--open');    trigger.setAttribute('aria-expanded', 'true') }
-    const closeMega = () => { panel.hidden = true;  wrap.classList.remove('ui-nav-mega-wrap--open'); trigger.setAttribute('aria-expanded', 'false') }
-    const toggleMega = () => panel.hidden ? openMega() : closeMega()
-
-    trigger.addEventListener('click', (e) => { e.stopPropagation(); toggleMega() })
-    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeMega() })
-    document.addEventListener('click',   (e) => { if (!wrap.contains(e.target)) closeMega() })
-    panel.querySelectorAll('.ui-nav-mega-item').forEach(a => a.addEventListener('click', closeMega))
-  })
-}
-
-function runNavs() { document.querySelectorAll('.ui-nav').forEach(initNav) }
-document.readyState === 'loading'
-  ? document.addEventListener('DOMContentLoaded', runNavs)
-  : runNavs()
-document.addEventListener('pulse:navigate', runNavs)
-
-// ─── Carousel ───────────────────────────────────────────────────────────────
-
-function initCarousel(el) {
-  if (el.dataset.pulseCarouselInit) return
-  el.dataset.pulseCarouselInit = '1'
-
-  const track  = el.querySelector('.ui-carousel-track')
-  const prev   = el.querySelector('.ui-carousel-prev')
-  const next   = el.querySelector('.ui-carousel-next')
-  const dots   = Array.from(el.querySelectorAll('.ui-carousel-dot'))
-  const slides = Array.from(el.querySelectorAll('.ui-carousel-slide'))
-
-  if (!track || slides.length === 0) return
-
-  let current = 0
-
-  const updateArrows = () => {
-    if (prev) prev.hidden = current === 0
-    if (next) next.hidden = current === slides.length - 1
-  }
-
-  const goTo = (i) => {
-    current = Math.max(0, Math.min(i, slides.length - 1))
-    track.scrollTo({ left: slides[current].offsetLeft, behavior: 'smooth' })
-    dots.forEach((d, j) => {
-      const active = j === current
-      d.classList.toggle('active', active)
-      d.setAttribute('aria-selected', String(active))
-      d.setAttribute('tabindex', active ? '0' : '-1')
-    })
-    updateArrows()
-  }
-
-  prev?.addEventListener('click', () => goTo(current - 1))
-  next?.addEventListener('click', () => goTo(current + 1))
-  dots.forEach((d, i) => d.addEventListener('click', () => goTo(i)))
-
-  // Keyboard navigation — roving tabindex for tablist
-  el.addEventListener('keydown', (e) => {
-    if (!e.target.classList.contains('ui-carousel-dot')) return
-    let next = null
-    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
-      e.preventDefault()
-      next = current > 0 ? current - 1 : slides.length - 1
-    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
-      e.preventDefault()
-      next = current < slides.length - 1 ? current + 1 : 0
-    } else if (e.key === 'Home') {
-      e.preventDefault()
-      next = 0
-    } else if (e.key === 'End') {
-      e.preventDefault()
-      next = slides.length - 1
-    }
-    if (next !== null) {
-      goTo(next)
-      dots[next]?.focus()
-    }
-  })
-
-  // Sync dot state and arrows when user swipes / scrolls
-  track.addEventListener('scroll', () => {
-    const trackLeft = track.getBoundingClientRect().left
-    const idx = slides.findIndex((s) => Math.abs(s.getBoundingClientRect().left - trackLeft) < 10)
-    if (idx !== -1 && idx !== current) {
-      current = idx
-      dots.forEach((d, j) => {
-        const active = j === current
-        d.classList.toggle('active', active)
-        d.setAttribute('aria-selected', String(active))
-        d.setAttribute('tabindex', active ? '0' : '-1')
-      })
-      updateArrows()
-    }
-  }, { passive: true })
-}
-
-// Initialise all carousels on the page
-const run = () => document.querySelectorAll('.ui-carousel').forEach(initCarousel)
-document.readyState === 'loading'
-  ? document.addEventListener('DOMContentLoaded', run)
-  : run()
-
-// Re-initialise after Pulse client-side navigation swaps the DOM
-document.addEventListener('pulse:navigate', run)

package/examples/quiz.js

@@ -1,208 +0,0 @@
-/**
- * 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',
-
-  meta: {
-    title:       'Quiz — Pulse',
-    description: 'A multiple-choice quiz built with Pulse. Demonstrates multi-step state machine and computed views.',
-    styles:      ['/pulse-ui.css'],
-    theme:       'dark',
-  },
-
-  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>`
-  },
-}