@invisibleloop/pulse 0.1.21

package/examples/shared.js

@@ -0,0 +1,78 @@
+/**
+ * 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'  },
+]
+
+// 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 })
+}

package/examples/todos.js

@@ -0,0 +1,162 @@
+/**
+ * Pulse — Todo list example
+ *
+ * Demonstrates:
+ *   - Client-side CRUD mutations
+ *   - persist (survives page reload)
+ *   - Constraints (max 20 items)
+ *   - Filter state (all / active / done)
+ *   - Empty state handling
+ *
+ * Run: node examples/dev.server.js  →  http://localhost:3001/todos
+ */
+
+import { button, card, checkbox, empty, input, section, container, stack, cluster } from '../src/ui/index.js'
+import { examplesNav } from './shared.js'
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+export function filterTodos(todos, filter) {
+  if (filter === 'active') return todos.filter(t => !t.done)
+  if (filter === 'done')   return todos.filter(t => t.done)
+  return todos
+}
+
+export function countByStatus(todos) {
+  const active = todos.filter(t => !t.done).length
+  return { active, done: todos.length - active, total: todos.length }
+}
+
+export default {
+  route:   '/todos',
+  hydrate: '/examples/todos.js',
+
+  meta: {
+    title:       'Todos — Pulse',
+    description: 'A todo list built with Pulse. Demonstrates client mutations, persist, constraints, and filter state.',
+    styles:      ['/pulse-ui.css'],
+  },
+
+  state: {
+    todos:  [],      // [{ id, text, done }]
+    filter: 'all',   // all | active | done
+    nextId: 1,
+  },
+
+  persist: ['todos', 'nextId'],
+
+  constraints: {
+    nextId: { min: 1 },
+  },
+
+  mutations: {
+    add: (state, formData) => {
+      const text = formData.get('text')?.trim()
+      if (!text || state.todos.length >= 20) return state
+      return {
+        todos:  [...state.todos, { id: state.nextId, text, done: false }],
+        nextId: state.nextId + 1,
+      }
+    },
+
+    toggle: (state, e) => {
+      const id = parseInt(e.target.closest('[data-id]')?.dataset.id, 10)
+      return {
+        todos: state.todos.map(t => t.id === id ? { ...t, done: !t.done } : t),
+      }
+    },
+
+    remove: (state, e) => {
+      const id = parseInt(e.target.closest('[data-id]')?.dataset.id, 10)
+      return { todos: state.todos.filter(t => t.id !== id) }
+    },
+
+    clearDone: (state) => ({
+      todos: state.todos.filter(t => !t.done),
+    }),
+
+    setFilter: (_state, e) => ({
+      filter: e.target.closest('[data-filter]')?.dataset.filter || 'all',
+    }),
+  },
+
+  view: (state) => {
+    const counts  = countByStatus(state.todos)
+    const visible = filterTodos(state.todos, state.filter)
+    const atLimit = state.todos.length >= 20
+
+    const filterBtn = (value, label, count) => button({
+      label:   `${label} (${count})`,
+      variant: state.filter === value ? 'primary' : 'ghost',
+      size:    'sm',
+      attrs:   { 'data-event': 'setFilter', 'data-filter': value, 'aria-pressed': String(state.filter === value) },
+    })
+
+    const todoItem = (todo, last = false) => `
+      <li class="u-flex u-items-center u-gap-3 u-p-3${last ? '' : ' u-border-b'}" data-id="${todo.id}">
+        ${checkbox({
+          id:        `todo-${todo.id}`,
+          event:     'change:toggle',
+          checked:   todo.done,
+          class:     'u-flex-1',
+          labelHtml: `<span class="${todo.done ? 'u-text-muted' : ''}">${esc(todo.text)}</span>`,
+        })}
+        ${button({
+          label:   '',
+          variant: 'ghost',
+          size:    'sm',
+          attrs:   { 'data-event': 'remove', 'aria-label': `Remove "${esc(todo.text)}"` },
+          icon:    `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+        })}
+      </li>`
+
+    const listContent = visible.length === 0
+      ? `<div class="u-p-6">${empty({
+          title:       state.filter === 'done'   ? 'No completed todos yet'
+                     : state.filter === 'active' ? 'Nothing left to do!'
+                     : 'No todos yet',
+          description: state.filter === 'all' ? 'Add something above to get started.' : '',
+        })}</div>`
+      : `<ul aria-label="Todo items">${visible.map((t, i) => todoItem(t, i === visible.length - 1)).join('')}</ul>`
+
+    return `
+  ${examplesNav('<span>✓ Todos</span>', '/todos')}
+
+  <main id="main-content">
+    ${section({ eyebrow: 'Client State & Persistence', title: 'My Todos', level: 1, align: 'center',
+      subtitle: 'Todos persist across reloads. Mutations are pure — add, toggle, remove, and filter without a server round-trip.',
+      content:
+      container({ size: 'md', content: stack({ gap: 'md', content: `
+
+        <form data-action="add" data-reset aria-label="Add a todo">
+          ${stack({ gap: 'xs', content: `
+            <div class="u-flex u-gap-2 u-items-end">
+              ${input({ name: 'text', placeholder: 'What needs doing?', disabled: atLimit, class: 'u-flex-1', attrs: { maxlength: '120', 'aria-label': 'New todo text' } })}
+              ${button({ label: 'Add', type: 'submit', disabled: atLimit })}
+            </div>
+            ${atLimit ? `<p class="u-text-sm u-text-yellow" role="alert">Maximum of 20 todos reached.</p>` : ''}
+          ` })}
+        </form>
+
+        ${cluster({ justify: 'between', content: `
+          <div role="group" aria-label="Filter todos" class="u-flex u-gap-1">
+            ${filterBtn('all',    'All',    counts.total)}
+            ${filterBtn('active', 'Active', counts.active)}
+            ${filterBtn('done',   'Done',   counts.done)}
+          </div>
+          ${counts.done > 0 && state.filter !== 'active'
+            ? button({ label: 'Clear done', variant: 'ghost', size: 'sm', attrs: { 'data-event': 'clearDone' } })
+            : ''}
+        ` })}
+
+        ${card({ flush: true, content: listContent })}
+
+      ` }) })
+    })}
+  </main>`
+  },
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@invisibleloop/pulse",
+  "version": "0.1.21",
+  "type": "module",
+  "description": "AI-first frontend framework. The spec is the source of truth.",
+  "license": "MIT",
+  "bin": {
+    "pulse": "./src/cli/index.js"
+  },
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./src/server/index.js"
+    },
+    "./server": {
+      "types": "./types/server.d.ts",
+      "default": "./src/server/index.js"
+    },
+    "./runtime": {
+      "types": "./types/runtime.d.ts",
+      "default": "./src/runtime/index.js"
+    },
+    "./ssr": {
+      "types": "./types/ssr.d.ts",
+      "default": "./src/runtime/ssr.js"
+    },
+    "./navigate": {
+      "types": "./types/navigate.d.ts",
+      "default": "./src/runtime/navigate.js"
+    },
+    "./schema": {
+      "types": "./types/schema.d.ts",
+      "default": "./src/spec/schema.js"
+    },
+    "./image": {
+      "types": "./types/image.d.ts",
+      "default": "./src/runtime/image.js"
+    },
+    "./html": {
+      "types": "./types/html.d.ts",
+      "default": "./src/html.js"
+    },
+    "./ui": {
+      "types": "./types/ui.d.ts",
+      "default": "./src/ui/index.js"
+    },
+    "./testing": {
+      "types": "./types/testing.d.ts",
+      "default": "./src/testing/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "node --watch src/cli/dev.js",
+    "build": "node scripts/build.js",
+    "test": "node src/spec/schema.test.js && node src/runtime/runtime.test.js && node src/runtime/ssr.test.js && node src/runtime/image.test.js && node src/server/server.test.js && node src/cli/cli.test.js && node src/ui/ui.test.js && node src/testing/testing.test.js && node src/store/store.test.js",
+    "typecheck": "tsc --noEmit",
+    "docs": "node --watch src/cli/dev.js --root docs --port 4000",
+    "docs:start": "node docs/server.js"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "esbuild": "^0.27.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "typescript": "^5.9.3"
+  }
+}

package/public/.pulse-ui-version

@@ -0,0 +1 @@
+0.1.17

package/public/chippy-bird.css

@@ -0,0 +1,246 @@
+/* Chippy Bird — Landing page theme
+ * Overrides --ui-* tokens and adds page-specific styles only.
+ * Layout is handled by pulse-ui.css layout components.
+ */
+
+:root {
+  --ui-accent:       #f7b731;
+  --ui-accent-hover: #f9c74f;
+  --ui-accent-dim:   rgba(247, 183, 49, .15);
+  --ui-bg:           #08111f;
+  --ui-surface:      #0d1c36;
+  --ui-surface-2:    #12233f;
+  --ui-border:       #1a3055;
+  --ui-text:         #eef3ff;
+  --ui-muted:        #6e88b0;
+  --ui-green:        #3dd68c;
+  --ui-red:          #ff6b6b;
+
+  /* Game palette — extracted from screenshots */
+  --cb-sky:          #87ceeb;
+  --cb-sky-mid:      #5aabe0;
+  --cb-wood:         #9e6b2e;
+}
+
+/* ─── Base ───────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; }
+body {
+  font-family:            system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background-color:       var(--ui-bg);
+  color:                  var(--ui-text);
+  line-height:            1.6;
+  min-height:             100vh;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--ui-accent); text-decoration: none; }
+a:hover { opacity: .85; }
+
+/* ─── Nav logo ───────────────────────────────────────────────────────────── */
+.cb-logo { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; }
+
+/* ─── Eyebrow + titles ───────────────────────────────────────────────────── */
+.cb-eyebrow {
+  font-size:      .78rem;
+  font-weight:    600;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  color:          var(--ui-accent);
+}
+
+.cb-section-title {
+  font-size:      clamp(1.75rem, 4vw, 2.5rem);
+  font-weight:    800;
+  line-height:    1.15;
+  letter-spacing: -.02em;
+  color:          var(--ui-text);
+  text-align:     center;
+}
+
+.cb-muted {
+  font-size:  1rem;
+  color:      var(--ui-muted);
+  line-height: 1.6;
+  text-align: center;
+  max-width:  480px;
+}
+
+/* ─── Stats divider ──────────────────────────────────────────────────────── */
+.cb-stat-divider {
+  width:      1px;
+  height:     3rem;
+  background: var(--ui-border);
+  flex-shrink: 0;
+}
+
+.ui-stat-value { color: var(--ui-accent); }
+
+/* ─── Free badge ─────────────────────────────────────────────────────────── */
+.cb-free-badge {
+  display:        inline-block;
+  background:     var(--ui-accent-dim);
+  color:          var(--ui-accent);
+  font-size:      .78rem;
+  font-weight:    700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  padding:        .3rem .9rem;
+  border-radius:  99px;
+}
+
+/* ─── CTA section ────────────────────────────────────────────────────────── */
+.cb-cta { background: linear-gradient(135deg, #0a1628 0%, #0f2a5a 100%); }
+
+.cb-cta-title {
+  font-size:      clamp(2rem, 5vw, 3rem);
+  font-weight:    800;
+  letter-spacing: -.02em;
+  color:          var(--ui-text);
+}
+
+/* ─── Notify form ────────────────────────────────────────────────────────── */
+.cb-notify-form { width: 100%; max-width: 420px; }
+.cb-notify-form--loading { opacity: .6; pointer-events: none; }
+
+.cb-notify-input {
+  flex:          1;
+  min-width:     0;
+  height:        44px;
+  padding:       0 .875rem;
+  background:    var(--ui-surface);
+  border:        1px solid var(--ui-border);
+  border-radius: var(--ui-radius, 8px);
+  color:         var(--ui-text);
+  font-size:     .9rem;
+  font-family:   inherit;
+  outline:       none;
+}
+.cb-notify-input:focus-visible {
+  border-color: var(--ui-accent);
+  box-shadow:   0 0 0 2px var(--ui-accent-dim);
+}
+.cb-notify-input::placeholder { color: var(--ui-muted); }
+
+/* ─── Footer ─────────────────────────────────────────────────────────────── */
+.cb-footer {
+  background:  var(--ui-surface);
+  border-top:  1px solid var(--ui-border);
+  padding:     1.5rem;
+  text-align:  center;
+}
+.cb-footer p   { font-size: .85rem; color: var(--ui-muted); margin: 0; }
+.cb-footer a   { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 2px; }
+
+/* ─── Split Hero ─────────────────────────────────────────────────────────── */
+.cb-hero-wrap {
+  background:
+    radial-gradient(ellipse 55% 80% at 78% 55%, rgba(87, 171, 224, .18) 0%, transparent 65%),
+    radial-gradient(ellipse 30% 40% at 78% 20%, rgba(135, 206, 235, .10) 0%, transparent 55%),
+    var(--ui-bg);
+}
+
+.cb-hero-split {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             4rem;
+  max-width:       1100px;
+  margin:          0 auto;
+  padding:         6rem 2rem 5rem;
+  min-height:      680px;
+}
+
+.cb-hero-content  { flex: 1; max-width: 500px; }
+
+.cb-hero-heading {
+  font-size:      clamp(2.75rem, 5.5vw, 4.25rem);
+  font-weight:    900;
+  line-height:    1.0;
+  letter-spacing: -.03em;
+  color:          var(--ui-text);
+  margin:         .6rem 0 1.25rem;
+}
+
+.cb-hero-sub {
+  font-size:    1.05rem;
+  color:        var(--ui-muted);
+  line-height:  1.65;
+  margin-bottom: 2rem;
+  max-width:    400px;
+}
+
+.cb-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
+
+/* ─── iPhone Frame ───────────────────────────────────────────────────────── */
+.cb-hero-visual {
+  flex-shrink: 0;
+  display:     flex;
+  align-items: center;
+}
+
+.cb-iphone {
+  position:      relative;
+  width:         230px;
+  background:    #0a0b14;
+  border-radius: 42px;
+  padding:       13px;
+  box-shadow:
+    0 0 0 2px rgba(255,255,255,.09),
+    0 0 0 7px #0a0b14,
+    0 0 0 9px rgba(255,255,255,.04),
+    0 50px 100px rgba(0,0,0,.75),
+    0 0 80px rgba(87, 171, 224, .22);
+  animation: cb-float 5s ease-in-out infinite;
+  transform: rotate(3deg);
+}
+
+/* Dynamic Island */
+.cb-iphone::before {
+  content:          '';
+  position:         absolute;
+  top:              17px;
+  left:             50%;
+  transform:        translateX(-50%);
+  width:            78px;
+  height:           24px;
+  background:       #0a0b14;
+  border-radius:    12px;
+  z-index:          3;
+}
+
+.cb-iphone-screen {
+  border-radius: 31px;
+  overflow:      hidden;
+  line-height:   0;
+}
+
+.cb-iphone-screen img {
+  display: block;
+  width:   100%;
+  height:  auto;
+}
+
+@keyframes cb-float {
+  0%, 100% { transform: rotate(3deg) translateY(0); }
+  50%       { transform: rotate(3deg) translateY(-14px); }
+}
+
+/* ─── Mobile ─────────────────────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .cb-stat-divider { display: none; }
+  .cb-notify-form .ui-cluster { flex-direction: column; }
+  .cb-notify-form .ui-btn { width: 100%; }
+}
+
+@media (max-width: 768px) {
+  .cb-hero-split {
+    flex-direction: column-reverse;
+    gap:            2.5rem;
+    padding:        3rem 1.5rem;
+    text-align:     center;
+  }
+  .cb-hero-content  { max-width: 100%; }
+  .cb-hero-sub      { max-width: 100%; margin-left: auto; margin-right: auto; }
+  .cb-hero-actions  { justify-content: center; }
+  .cb-iphone        { width: 200px; }
+}

package/public/examples/contact.css

@@ -0,0 +1,119 @@
+/* ─── Contact example ────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: var(--ui-font, system-ui, sans-serif);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  min-height: 100dvh;
+}
+
+.ct-root { display: flex; flex-direction: column; min-height: 100dvh; }
+
+/* Main */
+.ct-main {
+  flex: 1;
+  padding: 3rem 1rem;
+}
+
+/* Grid */
+.ct-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  gap: 4rem;
+  align-items: start;
+}
+
+@media (max-width: 720px) {
+  .ct-grid { grid-template-columns: 1fr; gap: 2rem; }
+}
+
+/* Info column */
+.ct-eyebrow {
+  font-size: .75rem;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--ui-accent);
+  font-weight: 600;
+  margin-bottom: .75rem;
+}
+
+.ct-subtitle {
+  color: var(--ui-muted);
+  line-height: 1.6;
+  margin-bottom: 2.5rem;
+}
+
+.ct-details { display: flex; flex-direction: column; gap: 1.5rem; }
+
+.ct-detail { display: flex; align-items: flex-start; gap: .875rem; }
+
+.ct-detail-icon {
+  margin-top: .1rem;
+  flex-shrink: 0;
+}
+
+.ct-detail-label {
+  font-size: .75rem;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color: var(--ui-muted);
+  margin-bottom: .2rem;
+}
+
+.ct-detail-value {
+  font-size: .95rem;
+  color: var(--ui-text);
+  text-decoration: none;
+}
+
+a.ct-detail-value:hover { color: var(--ui-accent); }
+
+/* Form */
+.ct-form-alerts:not(:empty) { margin-bottom: 1.25rem; }
+
+.ct-fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.ct-legend {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 1.25rem;
+}
+
+.ct-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media (max-width: 480px) {
+  .ct-row { grid-template-columns: 1fr; }
+}
+
+/* Success */
+.ct-success-icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background: #d1fae5;
+  color: #059669;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+.ct-success-msg {
+  color: var(--ui-muted);
+  text-align: center;
+  max-width: 30ch;
+}