@invisibleloop/pulse 0.20.11 → 0.20.20

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

@@ -1,111 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table, callout } from '../../lib/layout.js'
-import { modal, modalTrigger, button, cluster } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/modal')
-
-export default {
-  route: '/components/modal',
-  meta: {
-    theme:       'light',
-    title: 'Modal — Pulse Docs',
-    description: 'Modal dialog component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/modal',
-    prev,
-    next,
-    name: 'modal / modalTrigger',
-    description: 'A <code>&lt;dialog&gt;</code>-based modal with backdrop, animated open/close, and keyboard dismiss. The Pulse runtime handles open and close natively — no extra script needed.',
-    content: `
-      ${demo(
-        cluster({ justify: 'center', content:
-          modalTrigger({ target: 'demo-modal', label: 'Open modal' }) +
-          modal({
-            id:      'demo-modal',
-            title:   'Confirm action',
-            content: '<p style="color:var(--ui-muted);margin:0">Are you sure you want to delete this item? This action cannot be undone.</p>',
-            footer:
-              button({ label: 'Cancel', variant: 'secondary', type: 'submit' }) +
-              button({ label: 'Delete', variant: 'danger' }),
-          }),
-        }),
-        `// Render the dialog somewhere on the page
-modal({
-  id:      'confirm-delete',
-  title:   'Confirm action',
-  content: '<p>Are you sure? This cannot be undone.</p>',
-  footer:
-    button({ label: 'Cancel', variant: 'secondary' }) +
-    button({ label: 'Delete', variant: 'danger' }),
-})
-
-// Open it with a trigger button (or any element with data-dialog-open)
-modalTrigger({ target: 'confirm-delete', label: 'Delete item', variant: 'danger' })`
-      )}
-
-      <h2 class="doc-h2" id="sizes"><a href="#sizes" class="heading-anchor">Sizes</a></h2>
-      ${demo(
-        cluster({ gap: 'sm', justify: 'center', content:
-          modalTrigger({ target: 'demo-sm', label: 'Small',  variant: 'secondary', size: 'sm' }) +
-          modalTrigger({ target: 'demo-lg', label: 'Large',  variant: 'secondary', size: 'sm' }) +
-          modal({ id: 'demo-sm', title: 'Small modal',  size: 'sm',  content: '<p style="color:var(--ui-muted);margin:0">A compact dialog for quick confirmations.</p>' }) +
-          modal({ id: 'demo-lg', title: 'Large modal',  size: 'lg',  content: '<p style="color:var(--ui-muted);margin:0">Use large modals for forms, rich content, or detail views that need more space.</p>' }),
-        }),
-        `modal({ id: 'my-modal', title: 'Large modal', size: 'lg', content: '...' })`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>id</code>',      'string',                        '—',              'Unique ID — required for triggers to target this dialog'],
-          ['<code>title</code>',   'string',                        '—',              ''],
-          ['<code>level</code>',   'number',                        '2',              'Heading tag for the title (1–6). Visual style is unchanged.'],
-          ['<code>content</code>', 'string (HTML)',                  '—',              'Body HTML'],
-          ['<code>footer</code>',  'string (HTML)',                  '—',              'Footer HTML — typically button() calls'],
-          ['<code>size</code>',    '<code>sm | md | lg | xl</code>', '<code>md</code>', ''],
-          ['<code>class</code>',   'string',                        '—',              ''],
-        ]
-      )}
-
-      <h2 class="doc-h2" id="trigger-props"><a href="#trigger-props" class="heading-anchor">modalTrigger props</a></h2>
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>target</code>',  'string',                                          '—',                 "The modal's <code>id</code>"],
-          ['<code>label</code>',   'string',                                          '<code>Open</code>', ''],
-          ['<code>variant</code>', '<code>primary | secondary | ghost | danger</code>', '<code>primary</code>', ''],
-          ['<code>size</code>',    '<code>sm | md | lg</code>',                        '<code>md</code>',   ''],
-          ['<code>class</code>',   'string',                                          '—',                 ''],
-        ]
-      )}
-
-      <h2 class="doc-h2" id="custom-trigger"><a href="#custom-trigger" class="heading-anchor">Custom triggers</a></h2>
-      <p class="doc-body">Any element with <code>data-dialog-open="&lt;id&gt;"</code> opens the dialog when clicked. Use <code>data-dialog-close</code> on any element inside or outside the dialog to close it programmatically:</p>
-      <pre class="code-block"><code>&lt;button data-dialog-open="my-modal"&gt;Open&lt;/button&gt;
-&lt;button data-dialog-close&gt;Cancel&lt;/button&gt;</code></pre>
-      ${callout('tip', 'The dialog also closes on ESC, backdrop click, and <code>&lt;form method="dialog"&gt;</code> submit — all native browser behaviour, no JavaScript needed.')}
-
-      <h2 class="doc-h2" id="forms-inside"><a href="#forms-inside" class="heading-anchor">Forms inside a modal</a></h2>
-      <p class="doc-body"><code>modal()</code> wraps all content in <code>&lt;form method="dialog"&gt;</code> for native close behaviour. You <strong>cannot nest a <code>&lt;form data-action="..."&gt;</code> inside it</strong> — browsers silently discard nested forms, so the action will never fire.</p>
-      <p class="doc-body">When a modal button needs to trigger a Pulse action, place the form <em>outside</em> the modal and use the HTML <code>form</code> attribute to associate the button with it:</p>
-      <pre class="code-block"><code>// The action form lives outside the modal — hidden, no visible fields needed
-&lt;form id="delete-form" data-action="deleteAccount" style="display:none"&gt;&lt;/form&gt;
-
-\${modal({
-  id:      'confirm-delete',
-  title:   'Delete account?',
-  content: '&lt;p&gt;This cannot be undone.&lt;/p&gt;',
-  footer:
-    // type="submit" with no form= closes the modal natively (submits &lt;form method="dialog"&gt;)
-    button({ label: 'Cancel',         variant: 'secondary', type: 'submit' }) +
-    // form="delete-form" associates this button with the external form → fires the action
-    button({ label: 'Confirm delete', variant: 'danger', attrs: { form: 'delete-form', type: 'submit' } }),
-})}</code></pre>
-      ${callout('note', 'The hidden form needs no visible fields. <code>onStart</code> receives <code>state</code> and <code>formData</code> — read anything you need from state directly.')}
-    `,
-  }),
-}

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

@@ -1,136 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { button, nav as uiNav } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/nav')
-
-export default {
-  route: '/components/nav',
-  meta: {
-    theme:       'light',
-    title: 'Nav — Pulse Docs',
-    description: 'Nav component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/nav',
-    prev,
-    next,
-    name: 'nav',
-    description: 'Sticky-capable site header with logo, navigation links, and an optional CTA button. On mobile (&lt; 640px) links collapse behind a burger button — clicking it reveals an overlay panel that sits on top of page content without pushing it down. Wired automatically by <code>pulse-ui.js</code>.',
-    content: `
-      ${demo(
-        uiNav({
-          logo:     '<strong>MyApp</strong>',
-          logoHref: '/',
-          links:    [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'FAQ', href: '#faq' }],
-          action:   button({ label: 'Download', size: 'sm' }),
-          sticky:   false,
-        }),
-        `nav({
-  logo:     '<strong>MyApp</strong>',
-  logoHref: '/',
-  links: [
-    { label: 'Features', href: '#features' },
-    { label: 'Pricing',  href: '#pricing'  },
-    { label: 'FAQ',      href: '#faq'      },
-  ],
-  action: button({ label: 'Download', size: 'sm' }),
-  sticky: true,
-})`
-      )}
-
-      <h2 class="doc-h2" id="mega">Mega nav</h2>
-      <p>Replace a link's <code>href</code> with a <code>mega</code> array to render a dropdown panel. Each entry is a column with an optional heading and a list of items. Items support an optional <code>description</code> line.</p>
-      ${demo(
-        uiNav({
-          logo:     '<strong>MyApp</strong>',
-          logoHref: '/',
-          links: [
-            { label: 'Products', mega: [
-              { heading: 'Platform', items: [
-                { label: 'Analytics',   href: '#',   description: 'Dashboards and usage metrics' },
-                { label: 'Automation',  href: '#',   description: 'Scheduled jobs and webhooks' },
-                { label: 'Storage',     href: '#',   description: 'Files, blobs, and databases' },
-              ]},
-              { heading: 'Integrations', items: [
-                { label: 'Supabase',  href: '#' },
-                { label: 'Stripe',    href: '#' },
-                { label: 'Auth0',     href: '#' },
-              ]},
-            ]},
-            { label: 'Pricing', href: '#pricing' },
-            { label: 'Docs',    href: '#docs'    },
-          ],
-          action: button({ label: 'Get started', size: 'sm' }),
-        }),
-        `nav({
-  links: [
-    { label: 'Products', mega: [
-      { heading: 'Platform', items: [
-        { label: 'Analytics',  href: '/analytics',  description: 'Dashboards and usage metrics' },
-        { label: 'Automation', href: '/automation', description: 'Scheduled jobs and webhooks' },
-      ]},
-      { heading: 'Integrations', items: [
-        { label: 'Supabase', href: '/supabase' },
-        { label: 'Stripe',   href: '/stripe'   },
-      ]},
-    ]},
-    { label: 'Pricing', href: '/pricing' },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="mobile">Mobile view</h2>
-      <p>At &lt; 640px the links and action are hidden and replaced with a burger button. The panel opens as an overlay — no layout shift.</p>
-
-      <div class="demo-phone demo-mobile-nav">
-        <div class="demo-phone-statusbar"><div class="demo-phone-pill"></div></div>
-        ${uiNav({
-          logo:     '<strong>MyApp</strong>',
-          logoHref: '/',
-          links:    [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'FAQ', href: '#faq' }],
-          action:   button({ label: 'Download', size: 'sm' }),
-        })}
-        <div class="demo-phone-content"><p>Tap the burger to open the overlay</p></div>
-      </div>
-
-      <h2 class="doc-h2" id="burger-left">Burger on the left</h2>
-      <p>Set <code>burgerAlign: 'left'</code> to place the burger before the logo — common in app-style layouts.</p>
-
-      <div class="demo-phone demo-mobile-nav">
-        <div class="demo-phone-statusbar"><div class="demo-phone-pill"></div></div>
-        ${uiNav({
-          logo:        '<strong>MyApp</strong>',
-          logoHref:    '/',
-          links:       [{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'FAQ', href: '#faq' }],
-          action:      button({ label: 'Download', size: 'sm' }),
-          burgerAlign: 'left',
-        })}
-        <div class="demo-phone-content"><p>Burger on the left — logo stays right</p></div>
-      </div>
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>logo</code>',        'string (HTML)', '—',       'Raw HTML slot — SVG, img, or text'],
-          ['<code>logoHref</code>',    'string',        "'/'",     ''],
-          ['<code>links</code>',       'array',         '[]',      '<code>{ label, href }[]</code> or <code>{ label, mega: Column[] }</code>'],
-          ['<code>action</code>',      'string (HTML)', '—',       'Raw HTML slot — shown in desktop bar and mobile menu'],
-          ['<code>sticky</code>',      'boolean',       'false',   'position: sticky with backdrop blur'],
-          ['<code>burgerAlign</code>', 'string',        "'right'", "'right' or 'left' — mobile burger position"],
-        ]
-      )}
-
-      <h3 class="doc-h3" style="margin-top:2rem">Mega nav column</h3>
-      ${table(
-        ['Prop', 'Type', 'Description'],
-        [
-          ['<code>heading</code>', 'string', 'Optional column heading (uppercase label)'],
-          ['<code>items</code>',   'array',  '<code>{ label, href, description? }[]</code>'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/phone-frame.js

@@ -1,74 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { phoneFrame } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/phone-frame')
-
-const sampleScreen = `
-  <div style="background:#1a2c24;min-height:520px;padding:0.75rem;display:flex;flex-direction:column;gap:0.75rem;font-family:system-ui,sans-serif;">
-    <div style="display:flex;justify-content:space-between;align-items:center;padding:0 0.25rem;font-size:0.6rem;color:rgba(255,255,255,0.5)">
-      <span>9:41</span>
-      <svg width="20" height="8" viewBox="0 0 20 8" fill="none" aria-hidden="true"><rect x="0.5" y="0.5" width="16" height="7" rx="2" stroke="rgba(255,255,255,0.35)" stroke-width="1"/><rect x="1.5" y="1.5" width="12" height="5" rx="1" fill="rgba(255,255,255,0.7)"/><path d="M18 3v2c.8-.3.8-1.7 0-2z" fill="rgba(255,255,255,0.6)"/></svg>
-    </div>
-    <div style="font-size:0.85rem;font-weight:700;color:#fff">Good morning, Sarah</div>
-    <div style="background:rgba(255,255,255,0.06);border-radius:0.75rem;padding:0.75rem;flex:1;display:flex;flex-direction:column;gap:0.5rem">
-      <div style="font-size:0.6rem;color:rgba(255,255,255,0.5);letter-spacing:0.04em">TODAY'S ENTRY</div>
-      <div style="font-size:0.72rem;color:rgba(255,255,255,0.85);line-height:1.6">Feeling grateful today. The early morning light was something else — golden and soft through the curtains.</div>
-    </div>
-    <div style="background:rgba(255,255,255,0.04);border-radius:0.75rem;padding:0.75rem">
-      <div style="font-size:0.6rem;color:rgba(255,255,255,0.5);letter-spacing:0.04em;margin-bottom:0.4rem">STREAK</div>
-      <div style="display:flex;gap:0.3rem">
-        ${[1,2,3,4,5,6,7].map(d => `<div style="flex:1;height:28px;background:${d < 6 ? 'rgba(74,222,128,0.7)' : 'rgba(255,255,255,0.08)'};border-radius:4px"></div>`).join('')}
-      </div>
-      <div style="font-size:0.6rem;color:rgba(255,255,255,0.4);margin-top:0.4rem;text-align:right">5 day streak 🔥</div>
-    </div>
-  </div>`
-
-export default {
-  route: '/components/phone-frame',
-  meta: {
-    theme:       'light',
-    title: 'Phone Frame — Pulse Docs',
-    description: 'Phone Frame component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  state: {},
-  view: () => renderComponentPage({
-    currentHref: '/components/phone-frame',
-    prev,
-    next,
-    name: 'phoneFrame',
-    description: 'A realistic CSS mobile phone frame — device chrome, dynamic island, side buttons, and home indicator. Pass arbitrary HTML into the <code>content</code> slot to fill the screen area. No images, pure CSS/HTML.',
-    content: `
-      ${demo(
-        phoneFrame({ content: sampleScreen }),
-        `phoneFrame({
-  content: \`<div style="background:#1a2c24;min-height:520px;padding:0.75rem;">
-    <!-- your app screen UI -->
-  </div>\`,
-})`,
-      )}
-
-      <h2>Hover animation</h2>
-      <p>Pass <code>animate: true</code> to enable a gentle 3-D tilt when the user hovers over the frame. Ideal for hero sections — hover the phone below to see it.</p>
-
-      ${demo(
-        phoneFrame({ content: sampleScreen, animate: true }),
-        `phoneFrame({
-  content: \`...\`,
-  animate: true,
-})`,
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>content</code>', 'string (HTML)', "''",    'HTML rendered inside the screen area'],
-          ['<code>animate</code>', 'boolean',       'false', 'Enables a gentle 3-D tilt on mouse hover — recommended for hero usage'],
-          ['<code>class</code>',   'string',        "''",    'Extra CSS classes on the root element'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,102 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { progress, stack } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/progress')
-
-export default {
-  route: '/components/progress',
-  meta: {
-    theme:       'light',
-    title: 'Progress — Pulse Docs',
-    description: 'Progress bar component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/progress',
-    prev,
-    next,
-    name: 'progress',
-    description: 'Horizontal progress bar with determinate and indeterminate states. Correct <code>role="progressbar"</code> and ARIA attributes are set automatically.',
-    content: `
-
-      <h2 class="doc-h2" id="default">Default</h2>
-      ${demo(
-        stack({ gap: 'md', content:
-          progress({ value: 25  }) +
-          progress({ value: 50  }) +
-          progress({ value: 75  }) +
-          progress({ value: 100 }),
-        }),
-        `progress({ value: 25  })
-progress({ value: 50  })
-progress({ value: 75  })
-progress({ value: 100 })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="label">With label and value</h2>
-      <p>Set <code>showLabel</code> and <code>showValue</code> to render text above the bar.</p>
-      ${demo(
-        stack({ gap: 'lg', content:
-          progress({ value: 68, label: 'Storage used', showLabel: true, showValue: true }) +
-          progress({ value: 32, label: 'Upload complete', showLabel: true, showValue: true }),
-        }),
-        `progress({ value: 68, label: 'Storage used',    showLabel: true, showValue: true })
-progress({ value: 32, label: 'Upload complete', showLabel: true, showValue: true })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="variants">Variants</h2>
-      ${demo(
-        stack({ gap: 'md', content:
-          progress({ value: 80, variant: 'accent'  }) +
-          progress({ value: 80, variant: 'success' }) +
-          progress({ value: 80, variant: 'warning' }) +
-          progress({ value: 80, variant: 'error'   }),
-        }),
-        `progress({ value: 80, variant: 'accent'  })
-progress({ value: 80, variant: 'success' })
-progress({ value: 80, variant: 'warning' })
-progress({ value: 80, variant: 'error'   })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="sizes">Sizes</h2>
-      ${demo(
-        stack({ gap: 'md', content:
-          progress({ value: 60, size: 'sm' }) +
-          progress({ value: 60, size: 'md' }) +
-          progress({ value: 60, size: 'lg' }),
-        }),
-        `progress({ value: 60, size: 'sm' })
-progress({ value: 60, size: 'md' })
-progress({ value: 60, size: 'lg' })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="indeterminate">Indeterminate</h2>
-      <p>Omit <code>value</code> when the total duration is unknown — the bar animates continuously.</p>
-      ${demo(
-        progress({ label: 'Loading…' }),
-        `progress({ label: 'Loading…' })   // no value = indeterminate`,
-        { col: true }
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>value</code>',      'number',  '—',          'Current value. Omit for indeterminate.'],
-          ['<code>max</code>',        'number',  '100',        ''],
-          ['<code>label</code>',      'string',  '—',          'Sets <code>aria-label</code> and the visible label when <code>showLabel</code> is true'],
-          ['<code>showLabel</code>',  'boolean', 'false',      'Render label text above the bar'],
-          ['<code>showValue</code>',  'boolean', 'false',      'Render percentage above the bar (right-aligned)'],
-          ['<code>variant</code>',    '<code>accent | success | warning | error</code>', '<code>accent</code>', ''],
-          ['<code>size</code>',       '<code>sm | md | lg</code>', '<code>md</code>', '.25rem / .5rem / 1rem'],
-          ['<code>class</code>',      'string',  '—',          ''],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,111 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table, callout } from '../../lib/layout.js'
-import { prose } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/prose')
-
-const SAMPLE_HTML = `<h2>Why great coffee starts with water</h2>
-<p>Most home baristas obsess over beans and grinders, but water quality is the single biggest variable in your cup. Tap water that is too hard leaves bitter, chalky espresso. Too soft and your shots taste flat and lifeless.</p>
-<h3>The ideal mineral balance</h3>
-<p>Speciality roasters recommend water with a total dissolved solids (TDS) between <strong>75–150 mg/L</strong> and a magnesium content of at least 10 mg/L. Magnesium is the mineral most responsible for extracting the fruity, floral notes from light roasts.</p>
-<h3>What to do if your tap water is off</h3>
-<ul>
-  <li>Use a filter jug — Brita Maxtra+ reduces hardness and chlorine</li>
-  <li>Try third-wave water sachets — add to distilled water for precise control</li>
-  <li>Blend tap with still mineral water to hit the right TDS range</li>
-</ul>
-<blockquote>Water is the ingredient you can control most precisely, yet almost nobody does.</blockquote>
-<p>Once your water is dialled in, even a modest grinder will produce noticeably better results. <a href="#">Read our water guide</a> for a full breakdown by region.</p>`
-
-export default {
-  route: '/components/prose',
-  meta: {
-    theme:       'light',
-    title: 'Prose — Pulse Docs',
-    description: 'Typography wrapper for CMS output and rich text content in Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/prose',
-    prev,
-    next,
-    name: 'prose',
-    description: 'Typography wrapper for rich text you don\'t control: CMS output, markdown-rendered HTML, database content, blog posts. Styles all descendant elements — headings, paragraphs, lists, blockquotes, code, tables — using <code>--ui-*</code> tokens. No classes needed on individual elements.',
-    content: `
-
-      <h2 class="doc-h2" id="basic">Basic</h2>
-      <p>Pass any HTML string to <code>content</code>. All elements inside are styled automatically.</p>
-      ${demo(
-        prose({ content: SAMPLE_HTML }),
-        `import { prose } from '@invisibleloop/pulse/ui'
-
-// CMS rich text field — output directly, fully styled
-prose({ content: server.article.bodyHtml })
-
-// Markdown file via md() helper
-prose({ content: server.post.html })  // see /markdown`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="size">Size</h2>
-      <p>Scale the base font size for different contexts.</p>
-      ${demo(
-        `<div class="u-flex u-flex-col u-gap-8">
-          <div>
-            <p class="u-text-muted u-text-sm u-mb-3">sm — footnotes, sidebars</p>
-            ${prose({ content: '<p>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</p><ul><li>Smaller text</li><li>Tighter line height</li></ul>', size: 'sm' })}
-          </div>
-          <div>
-            <p class="u-text-muted u-text-sm u-mb-3">base (default)</p>
-            ${prose({ content: '<p>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</p><ul><li>Default size</li><li>Standard line height</li></ul>' })}
-          </div>
-          <div>
-            <p class="u-text-muted u-text-sm u-mb-3">lg — hero intro, feature descriptions</p>
-            ${prose({ content: '<p>The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</p><ul><li>Larger text</li><li>More generous spacing</li></ul>', size: 'lg' })}
-          </div>
-        </div>`,
-        `prose({ content: cms.body, size: 'sm' })   // footnotes, sidebars
-prose({ content: cms.body })               // default
-prose({ content: cms.intro, size: 'lg' }) // hero intro`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="elements">Styled elements</h2>
-      <p>Every common HTML element rendered inside <code>prose()</code> is styled using <code>--ui-*</code> tokens:</p>
-      ${demo(
-        prose({ content: `
-          <h2>h2 heading</h2>
-          <h3>h3 heading</h3>
-          <p>A paragraph with <strong>bold</strong>, <em>italic</em>, and <a href="#">a link</a>. Also <code>inline code</code>.</p>
-          <ul><li>Unordered item one</li><li>Unordered item two</li></ul>
-          <ol><li>Ordered item one</li><li>Ordered item two</li></ol>
-          <blockquote>A blockquote with an accent left border.</blockquote>
-          <pre><code>// A code block
-const x = 1 + 2</code></pre>
-          <hr>
-          <p class="u-text-sm u-text-muted">End of content.</p>
-        ` }),
-        `prose({ content: \`
-  <h2>Section heading</h2>
-  <p>Paragraph with <strong>bold</strong> and <a href="#">a link</a>.</p>
-  <ul><li>List item</li></ul>
-  <blockquote>A quote.</blockquote>
-  <pre><code>const x = 1</code></pre>
-\` })`,
-        { col: true }
-      )}
-
-      ${callout('warning', '<strong>Do not escape the content prop.</strong> <code>prose()</code> renders raw HTML — it is designed for trusted server-side content only. Never pass unescaped user input directly. Sanitise CMS output before rendering if your CMS allows arbitrary HTML.')}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>content</code>', 'string', '—',                        'Raw HTML string — rendered as-is, not escaped. Use for server-side content only.'],
-          ['<code>size</code>',    '<code>sm | base | lg</code>', '<code>base</code>', 'Base font size scale. <code>sm</code>=0.875rem, <code>base</code>=1rem, <code>lg</code>=1.125rem'],
-          ['<code>class</code>',   'string', '—',                        'Extra classes on the wrapper <code>&lt;div&gt;</code>'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,71 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { pullquote } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/pullquote')
-
-export default {
-  route: '/components/pullquote',
-  meta: {
-    theme:       'light',
-    title: 'Pullquote — Pulse Docs',
-    description: 'Styled blockquote component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/pullquote',
-    prev,
-    next,
-    name: 'pullquote',
-    description: 'Styled blockquote with an accent left border and optional attribution. Use it to highlight key quotes or testimonials within body content.',
-    content: `
-
-      <h2 class="doc-h2" id="basic">Basic</h2>
-      ${demo(
-        pullquote({
-          quote: 'Design is not just what it looks like and feels like. Design is how it works.',
-          cite:  'Steve Jobs, co-founder of Apple',
-        }),
-        `pullquote({
-  quote: 'Design is not just what it looks like and feels like. Design is how it works.',
-  cite:  'Steve Jobs, co-founder of Apple',
-})`
-      )}
-
-      <h2 class="doc-h2" id="large">Large</h2>
-      ${demo(
-        pullquote({
-          quote: 'Simplicity is the ultimate sophistication.',
-          cite:  'Leonardo da Vinci',
-          size:  'lg',
-        }),
-        `pullquote({
-  quote: 'Simplicity is the ultimate sophistication.',
-  cite:  'Leonardo da Vinci',
-  size:  'lg',
-})`
-      )}
-
-      <h2 class="doc-h2" id="no-cite">Without attribution</h2>
-      ${demo(
-        pullquote({
-          quote: 'Good design makes a product understandable.',
-        }),
-        `pullquote({
-  quote: 'Good design makes a product understandable.',
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>quote</code>', 'string',            '—',           'The quote text — escaped automatically'],
-          ['<code>cite</code>',  'string',            '—',           'Attribution text — rendered in a <code>&lt;figcaption&gt;</code>'],
-          ['<code>size</code>',  '<code>md | lg</code>', '<code>md</code>', 'Controls the font size of the quote text'],
-          ['<code>class</code>', 'string',            '—',           ''],
-        ]
-      )}
-    `,
-  }),
-}