@invisibleloop/pulse 0.1.21

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

@@ -0,0 +1,53 @@
+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: {
+    title: 'CTA — Pulse Docs',
+    description: 'Call-to-action block with eyebrow, heading, body text, and an actions slot.',
+    styles: ['/pulse-ui.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', ''],
+        [
+          ['<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

@@ -0,0 +1,37 @@
+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: {
+    title: 'Divider — Pulse Docs',
+    description: 'Divider component for Pulse UI.',
+    styles: ['/pulse-ui.css', '/docs.css'],
+  },
+  state: {},
+  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', ''],
+        [
+          ['<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

@@ -0,0 +1,36 @@
+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: {
+    title: 'Empty — Pulse Docs',
+    description: 'Empty state component for Pulse UI.',
+    styles: ['/pulse-ui.css', '/docs.css'],
+  },
+  state: {},
+  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

@@ -0,0 +1,60 @@
+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: {
+    title: 'Feature — Pulse Docs',
+    description: 'Feature component for Pulse UI.',
+    styles: ['/pulse-ui.css', '/docs.css'],
+  },
+  state: {},
+  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', ''],
+        [
+          ['<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

@@ -0,0 +1,65 @@
+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: {
+    title: 'Fieldset — Pulse Docs',
+    description: 'Semantic grouping of related form fields with an accessible legend.',
+    styles: ['/pulse-ui.css', '/docs.css'],
+  },
+  state: {},
+  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', ''],
+        [
+          ['<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

@@ -0,0 +1,127 @@
+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: {
+    title: 'File Upload — Pulse Docs',
+    description: 'Drag-and-drop file upload zone component for Pulse UI.',
+    styles: ['/pulse-ui.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', ''],
+        [
+          ['<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

@@ -0,0 +1,58 @@
+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: {
+    title: 'Footer — Pulse Docs',
+    description: 'Accessible site footer with logo slot, navigation links, and legal text.',
+    styles: ['/pulse-ui.css', '/docs.css'],
+  },
+  state: {},
+  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', ''],
+        [
+          ['<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'],
+        ]
+      )}
+    `,
+  }),
+}

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

@@ -0,0 +1,165 @@
+import { renderComponentPage, demo } from '../../lib/component-page.js'
+import { prevNext } from '../../lib/nav.js'
+import { table } from '../../lib/layout.js'
+import { grid, card, stat, feature, testimonial } from '../../../../src/ui/index.js'
+
+const { prev, next } = prevNext('/components/grid')
+
+// Reusable placeholder item
+const item = (label) =>
+  `<div style="background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1.25rem;text-align:center;color:var(--muted)">${label}</div>`
+
+export default {
+  route: '/components/grid',
+  meta: {
+    title: 'Grid — Pulse Docs',
+    description: 'Grid component for Pulse UI.',
+    styles: ['/pulse-ui.css', '/docs.css'],
+  },
+  state: {},
+  view: () => renderComponentPage({
+    currentHref: '/components/grid',
+    prev,
+    next,
+    name: 'grid',
+    description: 'Responsive CSS grid. Collapses to a single column on mobile. Direct children of the content slot become grid items — no wrapper needed.',
+    content: `
+      <h2 class="doc-h2" id="cols">Column counts</h2>
+      <p>Use <code>cols</code> to set the number of columns. All layouts collapse to one column on mobile.</p>
+
+      <h3 class="doc-h3">2 columns</h3>
+      ${demo(
+        grid({ cols: 2, content: item('Left') + item('Right') }),
+        `grid({ cols: 2, content: left + right })`
+      )}
+
+      <h3 class="doc-h3">3 columns (default)</h3>
+      ${demo(
+        grid({ cols: 3, content: item('One') + item('Two') + item('Three') }),
+        `grid({ cols: 3, content: items.join('') })`
+      )}
+
+      <h3 class="doc-h3">4 columns</h3>
+      ${demo(
+        grid({ cols: 4, content: item('A') + item('B') + item('C') + item('D') }),
+        `grid({ cols: 4, content: items.join('') })`
+      )}
+
+      <h2 class="doc-h2" id="gap">Gap sizes</h2>
+      <p>Control spacing between items with <code>gap: 'sm' | 'md' | 'lg'</code>. Default is <code>'md'</code>.</p>
+
+      <h3 class="doc-h3">Small gap</h3>
+      ${demo(
+        grid({ cols: 3, gap: 'sm', content: item('One') + item('Two') + item('Three') }),
+        `grid({ cols: 3, gap: 'sm', content: items.join('') })`
+      )}
+
+      <h3 class="doc-h3">Large gap</h3>
+      ${demo(
+        grid({ cols: 3, gap: 'lg', content: item('One') + item('Two') + item('Three') }),
+        `grid({ cols: 3, gap: 'lg', content: items.join('') })`
+      )}
+
+      <h2 class="doc-h2" id="with-components">With components</h2>
+      <p>Grid accepts any HTML string as content — pass other component outputs directly.</p>
+
+      <h3 class="doc-h3">Feature grid</h3>
+      ${demo(
+        grid({
+          cols: 3,
+          content: [
+            feature({ icon: '⚡', title: 'Fast',    description: 'Sub-100ms server responses with streaming SSR.' }),
+            feature({ icon: '🔒', title: 'Secure',  description: 'Security headers on every response, including errors.' }),
+            feature({ icon: '🎯', title: 'Simple',  description: 'No build step, no virtual DOM, no dependencies.' }),
+          ].join(''),
+        }),
+        `grid({
+  cols: 3,
+  content: features.map(f => feature(f)).join(''),
+})`
+      )}
+
+      <h3 class="doc-h3">Stat grid</h3>
+      ${demo(
+        grid({
+          cols: 4,
+          content: [
+            stat({ label: 'Monthly users',  value: '24.8k', change: '+12%',  trend: 'up'      }),
+            stat({ label: 'Revenue',        value: '$18.2k', change: '+8.4%', trend: 'up'     }),
+            stat({ label: 'Churn rate',     value: '2.1%',  change: '−0.3%', trend: 'down'   }),
+            stat({ label: 'Uptime',         value: '99.98%', change: '0.0%', trend: 'neutral' }),
+          ].join(''),
+        }),
+        `grid({
+  cols: 4,
+  content: stats.map(s => stat(s)).join(''),
+})`
+      )}
+
+      <h3 class="doc-h3">Testimonial grid</h3>
+      ${demo(
+        grid({
+          cols: 3,
+          content: [
+            testimonial({ quote: 'Shipped our redesign in a weekend. No boilerplate, no config hell.', name: 'Alex Morgan',   role: 'CTO at Launchpad', rating: 5 }),
+            testimonial({ quote: 'The streaming SSR makes our pages feel instant. Lighthouse is happy.', name: 'Sara Kim',    role: 'Lead Engineer, Orbit', rating: 5 }),
+            testimonial({ quote: 'Finally a UI kit that doesn\'t fight the platform. Just HTML.', name: 'Dan Okafor', role: 'Founder, Stackly', rating: 5 }),
+          ].join(''),
+        }),
+        `grid({
+  cols: 3,
+  content: testimonials.map(t => testimonial(t)).join(''),
+})`
+      )}
+
+      <h3 class="doc-h3">Card grid</h3>
+      ${demo(
+        grid({
+          cols: 3,
+          gap: 'md',
+          content: [
+            card({
+              title: 'Getting started',
+              content: `<p style="color:var(--muted);margin:0">Install and run your first Pulse app in under five minutes.</p>`,
+              footer: `<span class="ui-badge">Guide</span>`,
+            }),
+            card({
+              title: 'Components',
+              content: `<p style="color:var(--muted);margin:0">30+ accessible, composable UI primitives ready to drop in.</p>`,
+              footer: `<span class="ui-badge">Reference</span>`,
+            }),
+            card({
+              title: 'Deployment',
+              content: `<p style="color:var(--muted);margin:0">Static hosting, Node servers, or edge runtimes — one build.</p>`,
+              footer: `<span class="ui-badge">Deploy</span>`,
+            }),
+          ].join(''),
+        }),
+        `grid({
+  cols: 3,
+  content: docs.map(d => card({
+    title:   d.title,
+    content: \`<p>\${d.summary}</p>\`,
+    footer:  badge({ label: d.tag }),
+  })).join(''),
+})`
+      )}
+
+      <h2 class="doc-h2" id="1col">Single column</h2>
+      <p>Use <code>cols: 1</code> for a stacked list with consistent spacing — useful for form sections or timelines.</p>
+      ${demo(
+        grid({ cols: 1, gap: 'sm', content: item('Step one') + item('Step two') + item('Step three') }),
+        `grid({ cols: 1, gap: 'sm', content: steps.join('') })`
+      )}
+
+      ${table(
+        ['Prop', 'Type', 'Default', ''],
+        [
+          ['<code>content</code>', 'string (HTML)', '—',     'Raw HTML slot — direct children are grid items'],
+          ['<code>cols</code>',    'number',        '3',     '1 · 2 · 3 · 4'],
+          ['<code>gap</code>',     'string',        "'md'",  "'sm' · 'md' · 'lg'"],
+        ]
+      )}
+    `,
+  }),
+}