@invisibleloop/pulse 0.20.11 → 0.20.20

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

@@ -1,169 +0,0 @@
-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 } 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: {
-    theme:       'light',
-    title: 'Grid — Pulse Docs',
-    description: 'Grid component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  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>
-      <p>There is no dedicated <code>testimonial</code> component — build one with <code>card()</code>: the quote in <code>content</code>, the name and role in <code>footer</code>.</p>
-      ${demo(
-        grid({
-          cols: 3,
-          content: [
-            card({ content: `<p style="color:var(--muted);margin:0">&ldquo;Shipped our redesign in a weekend. No boilerplate, no config hell.&rdquo;</p>`, footer: `<strong>Alex Morgan</strong><br><span style="color:var(--muted)">CTO at Launchpad</span>` }),
-            card({ content: `<p style="color:var(--muted);margin:0">&ldquo;The streaming SSR makes our pages feel instant. Lighthouse is happy.&rdquo;</p>`, footer: `<strong>Sara Kim</strong><br><span style="color:var(--muted)">Lead Engineer, Orbit</span>` }),
-            card({ content: `<p style="color:var(--muted);margin:0">&ldquo;Finally a UI kit that doesn\'t fight the platform. Just HTML.&rdquo;</p>`, footer: `<strong>Dan Okafor</strong><br><span style="color:var(--muted)">Founder, Stackly</span>` }),
-          ].join(''),
-        }),
-        `grid({
-  cols: 3,
-  content: testimonials.map(t => card({
-    content: \`<p>\${t.quote}</p>\`,
-    footer:  \`<strong>\${t.name}</strong><br>\${t.role}\`,
-  })).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', 'Description'],
-        [
-          ['<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'"],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,107 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { heading, card } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/heading')
-
-export default {
-  route: '/components/heading',
-  meta: {
-    theme:       'light',
-    title: 'Heading — Pulse Docs',
-    description: 'Styled semantic heading component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/heading',
-    prev,
-    next,
-    name: 'heading',
-    description: 'Styled semantic heading. Renders the correct HTML tag (<code>h1</code>–<code>h6</code>) with consistent typography tokens. Use this instead of raw heading tags so you get the right visual style without remembering utility classes.',
-    content: `
-
-      <h2 class="doc-h2" id="levels">All levels</h2>
-      <p>Each level has a default visual size. The semantic tag and visual size are independent — see <a href="#size-override">size override</a> below.</p>
-      ${demo(
-        [1, 2, 3, 4, 5, 6].map(l => heading({ level: l, text: `Heading level ${l}` })).join(''),
-        `heading({ level: 1, text: 'Page title' })
-heading({ level: 2, text: 'Section title' })
-heading({ level: 3, text: 'Subsection' })
-heading({ level: 4, text: 'Card heading' })
-heading({ level: 5, text: 'Label' })
-heading({ level: 6, text: 'Caption' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="size-override">Size override</h2>
-      <p>The <code>size</code> prop lets you use a different visual scale than the default for that level. Useful when you need the correct semantic structure for SEO or accessibility but want a different visual weight.</p>
-      ${demo(
-        [
-          heading({ level: 2, text: 'Semantic h2, looks like h4', size: 'xl' }),
-          heading({ level: 3, text: 'Semantic h3, extra large', size: '4xl' }),
-        ].join(''),
-        `// h2 for structure, but visually smaller
-heading({ level: 2, text: 'Related articles', size: 'xl' })
-
-// h3 that needs to be visually prominent
-heading({ level: 3, text: 'Featured', size: '4xl' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="color">Color</h2>
-      ${demo(
-        [
-          heading({ level: 3, text: 'Default colour' }),
-          heading({ level: 3, text: 'Muted — for secondary labels', color: 'muted' }),
-          heading({ level: 3, text: 'Accent — for highlights', color: 'accent' }),
-        ].join(''),
-        `heading({ level: 3, text: 'Default colour' })
-heading({ level: 3, text: 'Muted — for secondary labels', color: 'muted' })
-heading({ level: 3, text: 'Accent — for highlights', color: 'accent' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="spacing">Spacing</h2>
-      <p><code>heading()</code> adds no margin. Use <code>u-mt-*</code> and <code>u-mb-*</code> utility classes to control spacing in context.</p>
-      ${demo(
-        card({ content: `
-          ${heading({ level: 2, text: 'Account settings', class: 'u-mb-2' })}
-          <p class="u-text-muted u-text-sm">Manage your profile and preferences.</p>
-        `}),
-        `card({ content: \`
-  \${heading({ level: 2, text: 'Account settings', class: 'u-mb-2' })}
-  <p class="u-text-muted u-text-sm">Manage your profile and preferences.</p>
-\`})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="balance">Preventing orphans</h2>
-      <p>When a heading wraps across lines, the last line can be left with a single short word — an orphan. The <code>balance</code> prop adds <code>text-wrap: balance</code>, which distributes text evenly across all lines so no word is stranded.</p>
-      ${demo(
-        [
-          heading({ level: 2, text: 'The quick brown fox jumps over the lazy dog tonight' }),
-          heading({ level: 2, text: 'The quick brown fox jumps over the lazy dog tonight', balance: true }),
-        ].join('<p class="u-text-muted u-text-sm u-mt-2 u-mb-4">↑ without balance — ↓ with balance: true</p>'),
-        `// Without — last line may have a single word
-heading({ level: 2, text: 'The quick brown fox jumps over the lazy dog tonight' })
-
-// With — text distributed evenly across lines
-heading({ level: 2, text: 'The quick brown fox jumps over the lazy dog tonight', balance: true })`,
-        { col: true }
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>level</code>',   'number (1–6)', '2',               'Controls both the HTML tag and the default visual size'],
-          ['<code>text</code>',    'string',       '—',               'Heading text — escaped automatically'],
-          ['<code>size</code>',    '<code>xs | sm | base | lg | xl | 2xl | 3xl | 4xl</code>', '—', 'Override the visual font size independently of the semantic level. Defaults: h1=4xl, h2=3xl, h3=2xl, h4=xl, h5=base, h6=sm'],
-          ['<code>color</code>',   '<code>default | muted | accent</code>', '<code>default</code>', 'Text colour token'],
-          ['<code>balance</code>', 'boolean', '<code>false</code>', 'Adds <code>text-wrap: balance</code> — prevents orphaned words on the last line when the heading wraps'],
-          ['<code>class</code>',   'string', '—', 'Extra classes — use for spacing utilities such as <code>u-mb-4</code>'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,123 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { hero, appBadge } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/hero')
-
-export default {
-  route: '/components/hero',
-  meta: {
-    theme:       'light',
-    title: 'Hero — Pulse Docs',
-    description: 'Hero component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  state: {},
-  view: () => {
-    const placeholderImg = `<img src="/img/heic1501a.jpg" alt="The Pillars of Creation in the Eagle Nebula, captured by the Hubble Space Telescope" style="width:100%;height:100%;object-fit:cover;border-radius:var(--ui-radius,8px);display:block">`
-    return renderComponentPage({
-    currentHref: '/components/hero',
-    prev,
-    next,
-    name: 'hero',
-    description: 'Full-width hero section. Pass <code>image</code> HTML to activate the split layout — text on one side, image on the other. Use <code>imageAlign</code> to swap sides. Set <code>align: \'left\'</code> for left-aligned text without an image. Use <code>size: \'sm\'</code> for inner-page headers.',
-    content: `
-      ${demo(
-        hero({
-          eyebrow:  'Now available',
-          title:    'The app your phone deserves',
-          subtitle: 'Beautifully simple. Ridiculously fast. Available on iOS and Android.',
-          actions:  appBadge({ store: 'apple', href: '#' }) + ' ' + appBadge({ store: 'google', href: '#' }),
-        }),
-        `hero({
-  eyebrow:  'Now available',
-  title:    'The app your phone deserves',
-  subtitle: 'Beautifully simple. Ridiculously fast.',
-  actions:  appBadge({ store: 'apple',  href: appStoreUrl }) +
-            appBadge({ store: 'google', href: playStoreUrl }),
-})`,
-        { bleed: true }
-      )}
-
-      ${demo(
-        hero({
-          eyebrow:  'Split layout',
-          title:    'Text left, image right',
-          subtitle: 'Pass an image slot to activate the split layout. The text sits on the left, image on the right.',
-          actions:  appBadge({ store: 'apple', href: '#' }) + ' ' + appBadge({ store: 'google', href: '#' }),
-          image:    placeholderImg,
-        }),
-        `hero({
-  eyebrow:  'Split layout',
-  title:    'Text left, image right',
-  subtitle: 'Pass an image slot to activate the split layout.',
-  actions:  appBadge({ store: 'apple',  href: appStoreUrl }) +
-            appBadge({ store: 'google', href: playStoreUrl }),
-  image:    \`<img src="\${screenshotUrl}" alt="Product screenshot">\`,
-})`,
-        { bleed: true }
-      )}
-
-      ${demo(
-        hero({
-          eyebrow:    'Split layout',
-          title:      'Image left, text right',
-          subtitle:   'Set imageAlign: \'left\' to put the image on the left and text on the right.',
-          image:      placeholderImg,
-          imageAlign: 'left',
-        }),
-        `hero({
-  eyebrow:    'Split layout',
-  title:      'Image left, text right',
-  subtitle:   'Set imageAlign to swap sides.',
-  image:      \`<img src="\${screenshotUrl}" alt="Product screenshot">\`,
-  imageAlign: 'left',
-})`,
-        { bleed: true }
-      )}
-
-      ${demo(
-        `<div style="display:flex;flex-direction:column;gap:0">` +
-          hero({ eyebrow: 'Solid colour', title: 'background: color', background: '#0f172a', size: 'sm' }) +
-          hero({ eyebrow: 'Custom gradient', title: 'background: CSS gradient', background: 'linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%)', size: 'sm' }) +
-        `</div>`,
-        `// Any valid CSS background value
-hero({ title: 'Headline', background: '#0f172a' })
-hero({ title: 'Headline', background: 'linear-gradient(135deg, #1e1b4b, #312e81)' })`,
-        { bleed: true }
-      )}
-
-      ${demo(
-        hero({
-          title:    'Blog',
-          subtitle: 'Thoughts on building for the web.',
-          size:     'sm',
-        }),
-        `hero({
-  title:    'Blog',
-  subtitle: 'Thoughts on building for the web.',
-  size:     'sm',
-})`,
-        { bleed: true }
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>eyebrow</code>',     'string',        '—',          'Small label above the title'],
-          ['<code>title</code>',       'string',        '—',          ''],
-          ['<code>subtitle</code>',    'string',        '—',          ''],
-          ['<code>actions</code>',     'string (HTML)', '—',          'Raw HTML slot — buttons, badges, etc.'],
-          ['<code>image</code>',       'string (HTML)', '—',          'Raw HTML slot — activates split layout when set'],
-          ['<code>layout</code>',      'string',        "'split'",    "When <code>image</code> is set: <code>'split'</code> (even columns) · <code>'asymmetric'</code> (wider text, narrower image) · <code>'overlap'</code> (image overlaps below text)"],
-          ['<code>imageAlign</code>',  'string',        "'right'",    "'right' (text left) or 'left' (text right) — only applies when image is set"],
-          ['<code>align</code>',       'string',        "'center'",   "'center' or 'left' — text alignment when no image"],
-          ['<code>size</code>',        'string',        "'md'",       "'md' (5rem padding) or 'sm' (2.5rem top, no bottom) — use sm for inner-page headers"],
-          ['<code>background</code>', 'string',        '—',          'Any CSS background value — solid colour or custom gradient.'],
-        ]
-      )}
-    `,
-  })
-  },
-}