@invisibleloop/pulse 0.1.21

package/docs/public/pulse-ui.js

@@ -0,0 +1,236 @@
+/**
+ * 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) {
+  const burger = el.querySelector('.ui-nav-burger')
+  const mobile = el.querySelector('.ui-nav-mobile')
+  if (!burger || !mobile) return
+
+  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() })
+
+  // Close when a mobile link is clicked (navigating away)
+  mobile.querySelectorAll('.ui-nav-link').forEach(a => a.addEventListener('click', close))
+}
+
+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) {
+  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/docs/server.js

@@ -0,0 +1,192 @@
+import { createServer }   from '../src/server/index.js'
+import { metrics }        from './src/lib/stats.js'
+import { metricsStore }   from './src/lib/metrics-store.js'
+metricsStore.current = metrics
+import home               from './src/pages/home.js'
+import howItWorks        from './src/pages/how-it-works.js'
+import faq               from './src/pages/faq.js'
+import config             from './src/pages/config.js'
+import gettingStarted     from './src/pages/getting-started.js'
+import slashCommands      from './src/pages/slash-commands.js'
+import promptExamples     from './src/pages/prompt-examples.js'
+import components         from './src/pages/components.js'
+import projectStructure   from './src/pages/project-structure.js'
+import spec               from './src/pages/spec.js'
+import state              from './src/pages/state.js'
+import mutations          from './src/pages/mutations.js'
+import actions            from './src/pages/actions.js'
+import validation         from './src/pages/validation.js'
+import constraints        from './src/pages/constraints.js'
+import persist            from './src/pages/persist.js'
+import serverData         from './src/pages/server-data.js'
+import routing            from './src/pages/routing.js'
+import streaming          from './src/pages/streaming.js'
+import caching            from './src/pages/caching.js'
+import guard              from './src/pages/guard.js'
+import rawResponses       from './src/pages/raw-responses.js'
+import serverApi          from './src/pages/server-api.js'
+import hydration          from './src/pages/hydration.js'
+import navigation         from './src/pages/navigation.js'
+import images             from './src/pages/images.js'
+import extending          from './src/pages/extending.js'
+import deploy             from './src/pages/deploy.js'
+import supabase           from './src/pages/supabase.js'
+import auth               from './src/pages/auth.js'
+import stripe             from './src/pages/stripe.js'
+import meta               from './src/pages/meta.js'
+import performance        from './src/pages/performance.js'
+import accessibility      from './src/pages/accessibility.js'
+import testing           from './src/pages/testing.js'
+
+// Component pages
+import compButton      from './src/pages/components/button.js'
+import compBadge       from './src/pages/components/badge.js'
+import compCard        from './src/pages/components/card.js'
+import compInput       from './src/pages/components/input.js'
+import compSelect      from './src/pages/components/select.js'
+import compTextarea    from './src/pages/components/textarea.js'
+import compAlert       from './src/pages/components/alert.js'
+import compStat        from './src/pages/components/stat.js'
+import compAvatar      from './src/pages/components/avatar.js'
+import compEmpty       from './src/pages/components/empty.js'
+import compTable       from './src/pages/components/table.js'
+import compNav         from './src/pages/components/nav.js'
+import compHero        from './src/pages/components/hero.js'
+import compAppBadge    from './src/pages/components/app-badge.js'
+import compFeature     from './src/pages/components/feature.js'
+import compTestimonial from './src/pages/components/testimonial.js'
+import compPricing     from './src/pages/components/pricing.js'
+import compAccordion   from './src/pages/components/accordion.js'
+import compContainer   from './src/pages/components/container.js'
+import compSection     from './src/pages/components/section.js'
+import compGrid        from './src/pages/components/grid.js'
+import compStack       from './src/pages/components/stack.js'
+import compCluster     from './src/pages/components/cluster.js'
+import compDivider     from './src/pages/components/divider.js'
+import compBanner      from './src/pages/components/banner.js'
+import compMedia       from './src/pages/components/media.js'
+import compTooltip     from './src/pages/components/tooltip.js'
+import compModal       from './src/pages/components/modal.js'
+import compCarousel    from './src/pages/components/carousel.js'
+import compCta         from './src/pages/components/cta.js'
+import compFooter      from './src/pages/components/footer.js'
+import compCodeWindow  from './src/pages/components/code-window.js'
+import compFieldset    from './src/pages/components/fieldset.js'
+import compToggle      from './src/pages/components/toggle.js'
+import compCheckbox    from './src/pages/components/checkbox.js'
+import compFileUpload  from './src/pages/components/fileupload.js'
+import compSlider      from './src/pages/components/slider.js'
+import compSegmented   from './src/pages/components/segmented.js'
+import compRadio       from './src/pages/components/radio.js'
+import compRating      from './src/pages/components/rating.js'
+import compSearch      from './src/pages/components/search.js'
+import compSpinner     from './src/pages/components/spinner.js'
+import compProgress    from './src/pages/components/progress.js'
+import compBreadcrumbs from './src/pages/components/breadcrumbs.js'
+import compStepper     from './src/pages/components/stepper.js'
+import compImage       from './src/pages/components/image.js'
+import compPullquote   from './src/pages/components/pullquote.js'
+import compProse       from './src/pages/components/prose.js'
+import compHeading     from './src/pages/components/heading.js'
+import compList        from './src/pages/components/list.js'
+import compTimeline    from './src/pages/components/timeline.js'
+import compCharts      from './src/pages/components/charts.js'
+import compIcons       from './src/pages/components/icons.js'
+
+createServer(
+  [
+    home,
+    howItWorks,
+    faq,
+    config,
+    gettingStarted,
+    slashCommands,
+    promptExamples,
+    components,
+    projectStructure,
+    spec,
+    state,
+    mutations,
+    actions,
+    validation,
+    constraints,
+    persist,
+    serverData,
+    routing,
+    streaming,
+    caching,
+    guard,
+    rawResponses,
+    serverApi,
+    hydration,
+    navigation,
+    images,
+    extending,
+    deploy,
+    supabase,
+    auth,
+    stripe,
+    meta,
+    performance,
+    accessibility,
+    testing,
+    // Component pages
+    compButton,
+    compBadge,
+    compCard,
+    compInput,
+    compSelect,
+    compTextarea,
+    compAlert,
+    compStat,
+    compAvatar,
+    compEmpty,
+    compTable,
+    compNav,
+    compHero,
+    compAppBadge,
+    compFeature,
+    compTestimonial,
+    compPricing,
+    compAccordion,
+    compContainer,
+    compSection,
+    compGrid,
+    compStack,
+    compCluster,
+    compDivider,
+    compBanner,
+    compMedia,
+    compTooltip,
+    compModal,
+    compCarousel,
+    compCta,
+    compFooter,
+    compCodeWindow,
+    compFieldset,
+    compToggle,
+    compCheckbox,
+    compFileUpload,
+    compSlider,
+    compSegmented,
+    compRadio,
+    compRating,
+    compSearch,
+    compSpinner,
+    compProgress,
+    compBreadcrumbs,
+    compStepper,
+    compImage,
+    compPullquote,
+    compProse,
+    compHeading,
+    compList,
+    compTimeline,
+    compCharts,
+    compIcons,
+  ],
+  {
+    port:      process.env.PORT ? Number(process.env.PORT) : 4000,
+    staticDir: new URL('./public', import.meta.url).pathname,
+  }
+)

package/docs/src/lib/component-page.js

@@ -0,0 +1,47 @@
+/**
+ * Pulse Docs — Component page factory
+ *
+ * renderComponentPage({ name, description, demos, props, prev, next, currentHref })
+ * Returns the HTML content string for a standard component doc page.
+ */
+
+import { renderLayout, h1, lead, codeBlock } from './layout.js'
+import { highlight } from './highlight.js'
+
+export function demo(previewHtml, codeStr, { col = false, scroll = false } = {}) {
+  const previewClass = [
+    'demo-preview',
+    col    ? 'demo-preview--col'    : '',
+    scroll ? 'demo-preview--scroll' : '',
+  ].filter(Boolean).join(' ')
+  const toggle = `<button class="demo-theme-toggle" aria-label="Toggle light/dark theme" title="Toggle theme">
+    <svg class="demo-theme-toggle__dark" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"/></svg>
+    <svg class="demo-theme-toggle__light" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+  </button>`
+  return `<div class="component-demo">
+  <div class="${previewClass}">${toggle}<div class="demo-preview-inner">${previewHtml}</div></div>
+  <div class="demo-code">${codeBlock(highlight(codeStr, 'js'))}</div>
+</div>`
+}
+
+/**
+ * @param {object} opts
+ * @param {string}   opts.currentHref  - The route of this page
+ * @param {string}   opts.name         - Component name displayed in h1
+ * @param {string}   opts.description  - Lead paragraph HTML
+ * @param {string}   opts.content      - Full HTML body (demos + props table)
+ * @param {object|null} opts.prev      - { label, href } or null
+ * @param {object|null} opts.next      - { label, href } or null
+ */
+export function renderComponentPage({ currentHref, name, description, content, prev = null, next = null }) {
+  return renderLayout({
+    currentHref,
+    prev,
+    next,
+    content: `
+      ${h1(name)}
+      ${lead(description)}
+      ${content}
+    `,
+  })
+}