@invisibleloop/pulse 0.1.21

package/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/public/pulse.css

@@ -0,0 +1,149 @@
+/* Pulse — base stylesheet */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:       #0f0f0f;
+  --surface:  #1a1a1a;
+  --border:   #2a2a2a;
+  --text:     #e8e8e8;
+  --muted:    #888;
+  --accent:     #9b8dff;   /* links — passes 7:1 on dark bg */
+  --accent-h:   #b8aeff;   /* link hover */
+  --accent-btn: #5c4de3;   /* button bg — white text passes 5.4:1 */
+  --success:  #3ecf8e;
+  --error:    #f03e3e;
+  --radius:   8px;
+  --font:     system-ui, -apple-system, sans-serif;
+}
+
+html { font-size: 16px; }
+
+body {
+  font-family:      var(--font);
+  background-color: var(--bg);
+  color:            var(--text);
+  line-height:      1.6;
+  min-height:       100vh;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-h); text-decoration: underline; }
+
+/* Layout */
+.page {
+  max-width:  640px;
+  margin:     0 auto;
+  padding:    3rem 1.5rem;
+}
+
+/* Typography */
+h1 { font-size: 2rem;   font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
+h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
+p  { color: var(--muted); margin-bottom: 1rem; }
+
+/* Buttons */
+button {
+  display:          inline-flex;
+  align-items:      center;
+  justify-content:  center;
+  gap:              0.4rem;
+  font-family:      var(--font);
+  font-size:        0.9rem;
+  font-weight:      500;
+  padding:          0.5rem 1.25rem;
+  border-radius:    var(--radius);
+  border:           1px solid var(--border);
+  background:       var(--surface);
+  color:            var(--text);
+  cursor:           pointer;
+  transition:       background 0.15s, border-color 0.15s;
+}
+button:hover:not([disabled]) {
+  background:    var(--accent);
+  border-color:  var(--accent);
+  color:         #fff;
+}
+button[disabled] { opacity: 0.35; cursor: default; }
+button.primary {
+  background:   var(--accent-btn);
+  border-color: var(--accent-btn);
+  color:        #fff;
+}
+button.primary:hover:not([disabled]) {
+  background:   color-mix(in srgb, var(--accent-btn) 85%, #000);
+  border-color: color-mix(in srgb, var(--accent-btn) 85%, #000);
+}
+
+/* Forms */
+label {
+  display:       block;
+  font-size:     0.85rem;
+  font-weight:   500;
+  color:         var(--muted);
+  margin-bottom: 1.25rem;
+}
+label span { display: block; margin-bottom: 0.35rem; }
+
+input, textarea, select {
+  display:        block;
+  width:          100%;
+  font-family:    var(--font);
+  font-size:      0.95rem;
+  padding:        0.6rem 0.85rem;
+  background:     var(--surface);
+  border:         1px solid var(--border);
+  border-radius:  var(--radius);
+  color:          var(--text);
+  outline:        none;
+  transition:     border-color 0.15s;
+}
+input:focus, textarea:focus { border-color: var(--accent-btn); }
+textarea { min-height: 120px; resize: vertical; }
+
+/* Feedback */
+.errors {
+  list-style:    none;
+  background:    color-mix(in srgb, var(--error) 12%, transparent);
+  border:        1px solid color-mix(in srgb, var(--error) 30%, transparent);
+  border-radius: var(--radius);
+  padding:       0.75rem 1rem;
+  margin-bottom: 1.25rem;
+  font-size:     0.875rem;
+  color:         var(--error);
+}
+.errors li + li { margin-top: 0.35rem; }
+
+.success {
+  background:    color-mix(in srgb, var(--success) 12%, transparent);
+  border:        1px solid color-mix(in srgb, var(--success) 30%, transparent);
+  border-radius: var(--radius);
+  padding:       1rem 1.25rem;
+  color:         var(--success);
+  font-weight:   500;
+}
+
+/* Counter */
+.counter { text-align: center; }
+.counter .value {
+  font-size:     5rem;
+  font-weight:   800;
+  line-height:   1;
+  margin:        1.5rem 0;
+  letter-spacing: -0.04em;
+  color:         var(--text);
+}
+.counter .controls { display: flex; gap: 0.75rem; justify-content: center; }
+.counter .controls button { font-size: 1.25rem; min-width: 48px; }
+.counter .hint { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; }
+
+/* Form loading state */
+.form.loading { opacity: 0.6; pointer-events: none; }
+
+/* Skip link — visually hidden until focused */
+.pulse-skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
+.pulse-skip-link:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;padding:.5rem 1rem;background:#000;color:#fff;font-size:1rem;font-weight:600;border-radius:4px;text-decoration:none;z-index:9999;outline:3px solid #fff;outline-offset:2px}
+
+/* Focus ring */
+:focus-visible{outline:3px solid #9b8dff;outline-offset:2px}
+:focus:not(:focus-visible){outline:none}