@invisibleloop/pulse 0.20.11 → 0.20.20

package/docs/src/pages/components/cluster.js

@@ -1,47 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { badge, cluster } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/cluster')
-
-export default {
-  route: '/components/cluster',
-  meta: {
-    theme:       'light',
-    title: 'Cluster — Pulse Docs',
-    description: 'Cluster component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/cluster',
-    prev,
-    next,
-    name: 'cluster',
-    description: 'Flex row with wrapping. Groups inline elements horizontally — action buttons, badges, app store badges, stat rows.',
-    content: `
-      ${demo(
-        cluster({
-          gap: 'sm',
-          content: badge({ label: 'Performance' }) + badge({ label: 'Accessibility' }) + badge({ label: 'Zero JS', variant: 'success' }) + badge({ label: 'SSR', variant: 'info' }),
-        }),
-        `cluster({ gap: 'sm', justify: 'center', content:
-  badge({ label: 'Performance' }) +
-  badge({ label: 'Zero JS', variant: 'success' }) +
-  appBadge({ store: 'apple', href: url })
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>content</code>', 'string (HTML)', '—',       'Raw HTML slot'],
-          ['<code>gap</code>',     'string',        "'md'",    "'xs' · 'sm' · 'md' · 'lg'"],
-          ['<code>justify</code>', 'string',        "'start'", "'start' · 'center' · 'end' · 'between'"],
-          ['<code>align</code>',   'string',        "'center'","'start' · 'center' · 'end'"],
-          ['<code>wrap</code>',    'boolean',       'true',    'Set false to prevent wrapping'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/container.js

@@ -1,40 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { container } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/container')
-
-export default {
-  route: '/components/container',
-  meta: {
-    theme:       'light',
-    title: 'Container — Pulse Docs',
-    description: 'Container component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/container',
-    prev,
-    next,
-    name: 'container',
-    description: 'Max-width wrapper with horizontal padding. The four size presets cover the most common layout widths.',
-    content: `
-      ${demo(
-        container({ content: '<p style="background:var(--surface-2);border:1px dashed var(--border);padding:1rem;border-radius:6px;text-align:center;color:var(--muted)">Content constrained to 768px</p>', size: 'md' }),
-        `container({ size: 'md', content: \`
-  \${hero({ title: 'Hello' })}
-  \${grid({ cols: 3, content: features })}
-\` })`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>content</code>', 'string (HTML)', '—',    'Raw HTML slot'],
-          ['<code>size</code>',    'string',        "'lg'", "'sm' (640px) · 'md' (768px) · 'lg' (1100px) · 'xl' (1280px)"],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/cta.js

@@ -1,54 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { cta, button } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/cta')
-
-export default {
-  route: '/components/cta',
-  meta: {
-    theme:       'light',
-    title: 'CTA — Pulse Docs',
-    description: 'Call-to-action block with eyebrow, heading, body text, and an actions slot.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  state: {},
-  view: () => renderComponentPage({
-    currentHref: '/components/cta',
-    prev,
-    next,
-    name: 'cta',
-    description: 'Call-to-action block with eyebrow, heading, body text, and an actions slot. Sits inside <code>section()</code> + <code>container()</code> — adds no padding of its own.',
-    content: `
-      ${demo(
-        cta({
-          eyebrow:  'Get started today',
-          title:    'Ready to build?',
-          subtitle: 'One spec file per page. SSR always on. Lighthouse 100 out of the box.',
-          actions:  button({ label: 'Start building →', href: '#', variant: 'primary', size: 'lg' }) +
-                    button({ label: 'View on GitHub',    href: '#', variant: 'ghost',   size: 'lg' }),
-        }),
-        `cta({
-  eyebrow:  'Get started today',
-  title:    'Ready to build?',
-  subtitle: 'One spec file per page. SSR always on. Lighthouse 100 out of the box.',
-  actions:  button({ label: 'Start building →', href: '/docs', variant: 'primary', size: 'lg' }) +
-            button({ label: 'View on GitHub',    href: 'https://github.com/...', variant: 'ghost', size: 'lg' }),
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>eyebrow</code>',  'string',        '—',          'Small label above the heading'],
-          ['<code>title</code>',    'string',        '—',          'Main heading'],
-          ['<code>level</code>',    'number',        '2',          'Heading tag for the title (1–6). Visual style is unchanged.'],
-          ['<code>subtitle</code>', 'string',        '—',          'Supporting paragraph'],
-          ['<code>actions</code>',  'string (HTML)', '—',          'Raw HTML slot — typically button() calls'],
-          ['<code>align</code>',    'string',        "'center'",   "'center' · 'left'"],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/divider.js

@@ -1,37 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { divider, stack } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/divider')
-
-export default {
-  route: '/components/divider',
-  meta: {
-    theme:       'light',
-    title: 'Divider — Pulse Docs',
-    description: 'Divider component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/divider',
-    prev,
-    next,
-    name: 'divider',
-    description: 'Horizontal rule for visual separation. With a <code>label</code>, the line splits either side of the text — the classic "or" pattern between login options.',
-    content: `
-      ${demo(
-        stack({ gap: 'lg', content: divider() + divider({ label: 'or continue with' }) }),
-        `divider()
-divider({ label: 'or continue with' })`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>label</code>', 'string', '—', 'Optional centred text — renders as <code>&lt;div&gt;</code> with role="separator" when provided, <code>&lt;hr&gt;</code> otherwise'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/empty.js

@@ -1,36 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { empty } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/empty')
-
-export default {
-  route: '/components/empty',
-  meta: {
-    theme:       'light',
-    title: 'Empty — Pulse Docs',
-    description: 'Empty state component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/empty',
-    prev,
-    next,
-    name: 'empty',
-    description: 'Empty state placeholder. Shows a centred title, optional description, and an optional call-to-action when there is nothing to display.',
-    content: `
-      ${demo(
-        empty({
-          title:       'No results found',
-          description: 'Try adjusting your search or clearing the filters.',
-          action:      { label: 'Clear filters', href: '#', variant: 'secondary' },
-        }),
-        `empty({
-  title:       'No results found',
-  description: 'Try adjusting your search or clearing the filters.',
-  action:      { label: 'Clear filters', href: '/products', variant: 'secondary' },
-})`
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/feature.js

@@ -1,60 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { feature } from '../../../../src/ui/index.js'
-import { iconZap, iconLock, iconPhone } from '../../../../src/ui/icons.js'
-
-const { prev, next } = prevNext('/components/feature')
-
-export default {
-  route: '/components/feature',
-  meta: {
-    theme:       'light',
-    title: 'Feature — Pulse Docs',
-    description: 'Feature component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/feature',
-    prev,
-    next,
-    name: 'feature',
-    description: 'Icon + title + description block. Compose three or four in a CSS grid for the standard "why us" section.',
-    content: `
-      ${demo(
-        `<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2rem">` +
-          feature({ icon: iconZap({ size: 20 }), title: 'Instant load', description: 'Streaming SSR ships HTML before data resolves. Fast by default.' }) +
-          feature({ icon: iconLock({ size: 20 }), title: 'Private by default', description: 'No trackers. No third-party scripts. Ever.' }) +
-          feature({ icon: iconPhone({ size: 20 }), title: 'Works offline', description: 'Full functionality without a connection.' }) +
-        `</div>`,
-        `import { iconZap, iconLock, iconPhone } from '@invisibleloop/pulse/ui'
-
-feature({ icon: iconZap({ size: 20 }),   title: 'Instant load',       description: 'Streaming SSR ships HTML before data resolves.' })
-feature({ icon: iconLock({ size: 20 }),  title: 'Private by default', description: 'No trackers, ever.' })
-feature({ icon: iconPhone({ size: 20 }), title: 'Works offline',      description: 'Full functionality without a connection.' })`
-      )}
-
-      ${demo(
-        `<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2rem">` +
-          feature({ icon: iconZap({ size: 20 }), title: 'Instant load', description: 'Streaming SSR ships HTML before data resolves. Fast by default.', center: true }) +
-          feature({ icon: iconLock({ size: 20 }), title: 'Private by default', description: 'No trackers. No third-party scripts. Ever.', center: true }) +
-          feature({ icon: iconPhone({ size: 20 }), title: 'Works offline', description: 'Full functionality without a connection.', center: true }) +
-        `</div>`,
-        `feature({ icon: iconZap({ size: 20 }),   title: 'Instant load',       description: '...', center: true })
-feature({ icon: iconLock({ size: 20 }),  title: 'Private by default', description: '...', center: true })
-feature({ icon: iconPhone({ size: 20 }), title: 'Works offline',      description: '...', center: true })`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>icon</code>',        'string (HTML)', '—', 'Raw HTML slot — SVG or emoji; displayed in an accent-tinted box'],
-          ['<code>title</code>',       'string',        '—', ''],
-          ['<code>level</code>',       'number',        '3', 'Heading tag for the title (1–6). Visual style is unchanged.'],
-          ['<code>description</code>', 'string',        '—', ''],
-          ['<code>center</code>',      'boolean',       'false', 'Centre-align the icon, title, and description'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/fieldset.js

@@ -1,65 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { fieldset, input, textarea, grid, button } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/fieldset')
-
-export default {
-  route: '/components/fieldset',
-  meta: {
-    theme:       'light',
-    title: 'Fieldset — Pulse Docs',
-    description: 'Semantic grouping of related form fields with an accessible legend.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/fieldset',
-    prev,
-    next,
-    name: 'fieldset',
-    description: 'Wraps related fields in a semantic <code>&lt;fieldset&gt;</code> with a styled <code>&lt;legend&gt;</code>. Screen readers announce the legend when focus enters the group — use it whenever fields belong together (address, card details, contact info). Works naturally inside a <code>&lt;form data-action="..."&gt;</code>.',
-    content: `
-      ${demo(
-        `<form class="u-flex u-flex-col u-gap-4">` +
-        fieldset({ legend: 'Your details', content:
-          grid({ cols: 2, gap: 'md', content:
-            input({ name: 'first', label: 'First name', required: true }) +
-            input({ name: 'last',  label: 'Last name',  required: true })
-          }) +
-          input({ name: 'email', label: 'Email address', type: 'email', required: true })
-        }) +
-        fieldset({ legend: 'Message', content:
-          textarea({ name: 'message', label: 'Tell us about your project', rows: 4, required: true })
-        }) +
-        button({ label: 'Send message', type: 'submit', variant: 'primary', fullWidth: true }) +
-        `</form>`,
-        `import { fieldset, grid, input, textarea, button } from '@invisibleloop/pulse/ui'
-
-\`<form data-action="submit" class="u-flex u-flex-col u-gap-4">
-  \${fieldset({ legend: 'Your details', content: \`
-    \${grid({ cols: 2, gap: 'md', content: \`
-      \${input({ name: 'first', label: 'First name', required: true })}
-      \${input({ name: 'last',  label: 'Last name',  required: true })}
-    \` })}
-    \${input({ name: 'email', label: 'Email address', type: 'email', required: true })}
-  \` })}
-  \${fieldset({ legend: 'Message', content: \`
-    \${textarea({ name: 'message', label: 'Tell us about your project', rows: 4, required: true })}
-  \` })}
-  \${button({ label: 'Send message', type: 'submit', variant: 'primary', fullWidth: true })}
-</form>\``
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>legend</code>',  'string', '—',   'Group label — rendered as <code>&lt;legend&gt;</code>, announced by screen readers on focus'],
-          ['<code>content</code>', 'string', '—',   'Raw HTML slot — input(), select(), textarea(), grid(), etc.'],
-          ['<code>gap</code>',     'string', 'md',  'Vertical gap between fields: xs / sm / md / lg'],
-          ['<code>class</code>',   'string', '—',   'Extra classes on the <code>&lt;fieldset&gt;</code> element'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/fileupload.js

@@ -1,128 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table, callout } from '../../lib/layout.js'
-import { fileUpload } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/file-upload')
-
-export default {
-  route: '/components/file-upload',
-  meta: {
-    theme:       'light',
-    title: 'File Upload — Pulse Docs',
-    description: 'Drag-and-drop file upload zone component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  state: { fileName: '', fileSize: '' },
-  mutations: {
-    setFile: (state, e) => {
-      const file = e.target.files[0]
-      return file
-        ? { fileName: file.name, fileSize: (file.size / 1024).toFixed(1) + ' KB' }
-        : { fileName: '', fileSize: '' }
-    },
-  },
-  view: (state) => renderComponentPage({
-    currentHref: '/components/file-upload',
-    prev,
-    next,
-    name: 'fileUpload',
-    description: 'Drag-and-drop upload zone with a hidden <code>&lt;input type="file"&gt;</code>. Clicking or dropping files opens the picker. Requires <code>pulse-ui.js</code> for drag highlighting and click-to-open behaviour.',
-    content: `
-
-      <h2 class="doc-h2" id="basic">Basic</h2>
-      ${demo(
-        fileUpload({ name: 'file', label: 'Upload file', hint: 'PNG, JPG, PDF up to 10 MB', event: 'change:setFile' }) +
-        (state.fileName ? `<p class="u-mt-3 u-text-sm">Selected: <strong>${state.fileName}</strong> (${state.fileSize})</p>` : ''),
-        `fileUpload({ name: 'file', label: 'Upload file', hint: 'PNG, JPG, PDF up to 10 MB', event: 'change:setFile' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="accept">Accepted file types</h2>
-      ${demo(
-        fileUpload({ name: 'avatar', label: 'Profile photo', accept: 'image/*', hint: 'PNG or JPG' }),
-        `fileUpload({ name: 'avatar', label: 'Profile photo', accept: 'image/*', hint: 'PNG or JPG' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="multiple">Multiple files</h2>
-      ${demo(
-        fileUpload({ name: 'docs', label: 'Attachments', multiple: true, hint: 'Select one or more files' }),
-        `fileUpload({ name: 'docs', label: 'Attachments', multiple: true, hint: 'Select one or more files' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="error">Error state</h2>
-      ${demo(
-        fileUpload({ name: 'file', label: 'Upload file', error: 'File must be under 10 MB' }),
-        `fileUpload({ name: 'file', label: 'Upload file', error: 'File must be under 10 MB' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="disabled">Disabled</h2>
-      ${demo(
-        fileUpload({ name: 'file', label: 'Upload file', disabled: true, hint: 'Uploads are currently unavailable' }),
-        `fileUpload({ name: 'file', label: 'Upload file', disabled: true, hint: 'Uploads are currently unavailable' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="with-action">Reading the file in an action</h2>
-      <p class="u-mb-4 u-text-sm u-color-muted">Use the component inside a <code>&lt;form data-action="..."&gt;</code>. The file is available in FormData under <code>name</code>.</p>
-      ${demo(
-        fileUpload({ name: 'attachment', label: 'Attachment', accept: '.pdf,.doc,.docx', required: true }),
-        `// view
-\`<form data-action="upload" class="u-flex u-flex-col u-gap-4">
-  \${fileUpload({ name: 'attachment', label: 'Attachment', accept: '.pdf,.doc,.docx', required: true })}
-  \${button({ label: 'Upload', type: 'submit', variant: 'primary' })}
-</form>\`
-
-// action
-upload: {
-  onStart: (state) => ({ status: 'loading' }),
-  run: async (state, serverState, formData) => {
-    const file = formData.get('attachment') // File object
-    // process file...
-  },
-  onSuccess: (state) => ({ status: 'success' }),
-  onError:   (state, err) => ({ status: 'error', message: err.message }),
-}`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="with-mutation">Live file name via mutation</h2>
-      <p class="u-mb-4 u-text-sm u-color-muted">Use <code>event: 'change:mutationName'</code> to capture the selected filename in state immediately — without a form submission.</p>
-      ${demo(
-        fileUpload({ name: 'photo', label: 'Photo', event: 'change:setFile', accept: 'image/*' }),
-        `// state
-{ fileName: '' }
-
-// mutation — e.target.files[0] gives the File object
-setFile: (state, e) => ({ fileName: e.target.files[0]?.name ?? '' })
-
-// view
-fileUpload({ name: 'photo', label: 'Photo', accept: 'image/*', event: 'change:setFile' })
-\${state.fileName ? \`<p class="u-mt-2 u-text-sm">\${state.fileName}</p>\` : ''}`,
-        { col: true }
-      )}
-
-      ${callout('note', 'The file object itself cannot be stored in Pulse state — state must be serialisable. Store the filename or a preview URL (via <code>URL.createObjectURL</code>) instead, and upload the file in an action via FormData.')}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>name</code>',     'string',  '—',     'Field name — file available in FormData under this key'],
-          ['<code>label</code>',    'string',  '—',     'Visible label text'],
-          ['<code>hint</code>',     'string',  '—',     'Helper text, e.g. accepted types and max size'],
-          ['<code>error</code>',    'string',  '—',     'Validation error message'],
-          ['<code>accept</code>',   'string',  '—',     'Accepted MIME types or extensions, e.g. <code>image/*</code> or <code>.pdf,.docx</code>'],
-          ['<code>multiple</code>', 'boolean', 'false', 'Allow selecting multiple files'],
-          ['<code>required</code>', 'boolean', 'false', ''],
-          ['<code>disabled</code>', 'boolean', 'false', ''],
-          ['<code>event</code>',    'string',  '—',     'data-event on the input — use <code>change:mutationName</code> to capture file selection in state'],
-          ['<code>id</code>',       'string',  '—',     'Override the generated <code>id</code>'],
-          ['<code>class</code>',    'string',  '—',     ''],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/footer.js

@@ -1,58 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { footer } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/footer')
-
-export default {
-  route: '/components/footer',
-  meta: {
-    theme:       'light',
-    title: 'Footer — Pulse Docs',
-    description: 'Accessible site footer with logo slot, navigation links, and legal text.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/footer',
-    prev,
-    next,
-    name: 'footer',
-    description: 'Accessible site footer with logo slot, navigation links, and legal text. Handles responsive stacking, hover states, and focus styles automatically.',
-    content: `
-      ${demo(
-        footer({
-          logo:     'MyApp',
-          logoHref: '/',
-          links: [
-            { label: 'Docs',    href: '/docs'    },
-            { label: 'Pricing', href: '/pricing' },
-            { label: 'Blog',    href: '/blog'    },
-            { label: 'GitHub',  href: 'https://github.com' },
-          ],
-          legal: '© 2026 MyApp Ltd.',
-        }),
-        `footer({
-  logo:     'MyApp',
-  logoHref: '/',
-  links: [
-    { label: 'Docs',    href: '/docs'    },
-    { label: 'Pricing', href: '/pricing' },
-    { label: 'GitHub',  href: 'https://github.com' },
-  ],
-  legal: '© 2026 MyApp Ltd.',
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>logo</code>',     'string (HTML)', '—',   'Raw HTML slot — SVG, img, or text'],
-          ['<code>logoHref</code>', 'string',        "'/'", 'Logo link destination'],
-          ['<code>links</code>',    'array',         '[]',  '[{label, href}] — footer navigation links'],
-          ['<code>legal</code>',    'string',        '—',   'Copyright / legal text'],
-        ]
-      )}
-    `,
-  }),
-}