@invisibleloop/pulse 0.20.10 → 0.20.19

package/examples/todos.js

@@ -1,162 +0,0 @@
-/**
- * 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',
-
-  meta: {
-    title:       'Todos — Pulse',
-    description: 'A todo list built with Pulse. Demonstrates client mutations, persist, constraints, and filter state.',
-    styles:      ['/pulse-ui.css'],
-    theme:       'dark',
-  },
-
-  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/src/ui/fieldset.js

@@ -1,37 +0,0 @@
-/**
- * Pulse UI — Fieldset
- *
- * Semantic grouping of related form fields. Renders a <fieldset> with an
- * accessible <legend>, styled to match the design system. Use inside a
- * card() or directly inside a <form>.
- *
- * @param {object} opts
- * @param {string} opts.legend   - Group label (renders as <legend>)
- * @param {string} opts.content  - Raw HTML slot — input(), select(), grid(), etc.
- * @param {'xs'|'sm'|'md'|'lg'} opts.gap - Gap between fields (default: 'md')
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const GAPS = new Set(['xs', 'sm', 'md', 'lg'])
-
-export function fieldset({
-  legend     = '',
-  content    = '',
-  gap        = 'md',
-  class: cls = '',
-} = {}) {
-  if (!GAPS.has(gap)) gap = 'md'
-
-  const classes = [
-    'ui-fieldset',
-    gap !== 'md' && `ui-fieldset--gap-${gap}`,
-    cls,
-  ].filter(Boolean).join(' ')
-
-  return `<fieldset class="${e(classes)}">
-  ${legend ? `<legend class="ui-fieldset-legend">${e(legend)}</legend>` : ''}
-  <div class="ui-fieldset-body">${content}</div>
-</fieldset>`
-}

package/src/ui/phone-frame.js

@@ -1,40 +0,0 @@
-/**
- * Pulse UI — Phone Frame
- *
- * A realistic CSS mobile phone frame. Pass screen content in the `content` slot.
- * Renders the phone body, dynamic island, side buttons, and home indicator.
- * No images — pure CSS/HTML.
- *
- * @param {object}  opts
- * @param {string}  opts.content  - HTML to render inside the screen area
- * @param {boolean} opts.animate  - enable gentle 3-D tilt on mouse hover (default: false)
- * @param {string}  opts.class
- */
-
-export function phoneFrame({ content = '', animate = false, class: cls = '' } = {}) {
-  const classes = ['ui-phone', animate && 'ui-phone--tilt', cls].filter(Boolean).join(' ')
-
-  return `<div class="${classes}" role="img" aria-label="Phone screen preview">
-  <!-- Left buttons: volume up, volume down, mute -->
-  <div class="ui-phone-btn ui-phone-btn--vol-up"   aria-hidden="true"></div>
-  <div class="ui-phone-btn ui-phone-btn--vol-down"  aria-hidden="true"></div>
-  <div class="ui-phone-btn ui-phone-btn--mute"      aria-hidden="true"></div>
-  <!-- Right button: power -->
-  <div class="ui-phone-btn ui-phone-btn--power"     aria-hidden="true"></div>
-
-  <div class="ui-phone-inner">
-    <!-- Dynamic island -->
-    <div class="ui-phone-island" aria-hidden="true">
-      <span class="ui-phone-camera"></span>
-    </div>
-
-    <!-- Screen -->
-    <div class="ui-phone-screen">
-      ${content}
-    </div>
-
-    <!-- Home indicator -->
-    <div class="ui-phone-home" aria-hidden="true"></div>
-  </div>
-</div>`
-}

package/src/ui/search.js

@@ -1,78 +0,0 @@
-/**
- * Pulse UI — Search
- *
- * Search input with icon, optional clear button, and label.
- * Handles the native browser cancel button, debounce binding,
- * and the clear event all in one component.
- *
- * @param {object}  opts
- * @param {string}  opts.name         - Field name (also used as id base)
- * @param {string}  opts.label        - Label text (visually shown or screen-reader only)
- * @param {boolean} opts.labelHidden  - Hide label visually but keep for screen readers
- * @param {string}  opts.placeholder
- * @param {string}  opts.value        - Current search value (for re-renders)
- * @param {string}  opts.event        - data-event binding, e.g. 'input:setSearch'
- * @param {number}  opts.debounce     - Debounce delay in ms (default: 200)
- * @param {string}  opts.clearEvent   - Click event fired by the clear button (shown when value is non-empty)
- * @param {boolean} opts.disabled
- * @param {string}  opts.id           - Override generated id
- * @param {string}  opts.class
- * @param {object}  opts.attrs        - Extra HTML attributes for the <input>
- */
-
-import { escHtml as e } from '../html.js'
-import { iconSearch, iconX } from './icons.js'
-
-export function search({
-  name        = '',
-  label       = '',
-  labelHidden = false,
-  placeholder = '',
-  value       = '',
-  event       = '',
-  debounce    = 200,
-  clearEvent  = '',
-  disabled    = false,
-  id          = '',
-  class: cls  = '',
-  attrs       = {},
-} = {}) {
-  const fieldId  = e(id || `field-${name}`)
-
-  const wrapClasses = ['ui-field', 'ui-search', cls].filter(Boolean).join(' ')
-
-  const labelClasses = ['ui-label', labelHidden ? 'ui-sr-only' : ''].filter(Boolean).join(' ')
-
-  const labelHtml = label
-    ? `<label for="${fieldId}" class="${labelClasses}">${e(label)}</label>`
-    : ''
-
-  const attrsStr = Object.entries(attrs)
-    .filter(([, v]) => v !== undefined)
-    .map(([k, v]) => ` ${e(k)}="${e(String(v))}"`)
-    .join('')
-
-  const clearBtn = clearEvent && value
-    ? `<button class="ui-search-clear" data-event="${e(clearEvent)}" type="button" aria-label="Clear search">${iconX({ size: 14 })}</button>`
-    : ''
-
-  return `<div class="${e(wrapClasses)}">
-  ${labelHtml}
-  <div class="ui-search-wrap">
-    <span class="ui-search-icon" aria-hidden="true">${iconSearch({ size: 16 })}</span>
-    <input
-      id="${fieldId}"
-      name="${e(name)}"
-      type="search"
-      class="ui-search-input"
-      ${placeholder ? `placeholder="${e(placeholder)}"` : ''}
-      ${value       ? `value="${e(value)}"`              : ''}
-      ${disabled    ? 'disabled'                         : ''}
-      ${event       ? `data-event="${e(event)}"`         : ''}
-      ${event && debounce > 0 ? `data-debounce="${debounce}"` : ''}
-      ${attrsStr}
-    >
-    ${clearBtn}
-  </div>
-</div>`
-}

package/src/ui/segmented.js

@@ -1,50 +0,0 @@
-/**
- * Pulse UI — Segmented Control
- *
- * iOS-style segmented control implemented with hidden radio inputs.
- * The selected option's label is highlighted via input:checked + label CSS.
- *
- * @param {object}        opts
- * @param {string}        opts.name     - Field name (submitted in FormData)
- * @param {Array}         opts.options  - Array of { value, label }
- * @param {string}        opts.value    - Currently selected value
- * @param {boolean}       opts.disabled
- * @param {'sm'|'md'|'lg'} opts.size   - Size variant (default: 'md')
- * @param {string}        opts.event   - data-event binding, e.g. 'change:setTab'
- * @param {string}        opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function segmented({
-  name       = '',
-  options    = [],
-  value      = '',
-  disabled   = false,
-  size       = 'md',
-  event      = '',
-  class: cls = '',
-} = {}) {
-  const sizeClass = size === 'sm' ? 'ui-segmented--sm'
-    : size === 'lg' ? 'ui-segmented--lg'
-    : ''
-
-  const wrapClasses = ['ui-segmented', sizeClass, cls].filter(Boolean).join(' ')
-
-  const items = options.map((opt, i) => {
-    const optId  = e(`seg-${name}-${i}`)
-    const checked = String(opt.value) === String(value)
-    return `<input
-    type="radio"
-    class="ui-segmented-input"
-    id="${optId}"
-    name="${e(name)}"
-    value="${e(String(opt.value))}"
-    ${checked  ? 'checked'  : ''}
-    ${disabled ? 'disabled' : ''}
-    ${event    ? `data-event="${e(event)}"` : ''}
-  ><label class="ui-segmented-label" for="${optId}">${e(String(opt.label))}</label>`
-  }).join('')
-
-  return `<div class="${e(wrapClasses)}" role="group">${items}</div>`
-}

package/src/ui/tooltip.js

@@ -1,28 +0,0 @@
-/**
- * Pulse UI — Tooltip
- *
- * CSS-powered tooltip. Wraps any trigger element — no JavaScript required.
- *
- * @param {object}                          opts
- * @param {string}                          opts.content   - Tooltip text (plain text; HTML not rendered)
- * @param {string}                          opts.trigger   - Raw HTML slot — the element the tooltip appears on
- * @param {'top'|'bottom'|'left'|'right'}   opts.position  - Placement (default: 'top')
- * @param {string}                          opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const POSITIONS = new Set(['top', 'bottom', 'left', 'right'])
-
-export function tooltip({
-  content    = '',
-  trigger    = '',
-  position   = 'top',
-  class: cls = '',
-} = {}) {
-  if (!POSITIONS.has(position)) position = 'top'
-
-  const classes = ['ui-tooltip', `ui-tooltip--${position}`, cls].filter(Boolean).join(' ')
-
-  return `<span class="${e(classes)}" data-tip="${e(content)}" aria-label="${e(content)}">${trigger}</span>`
-}