@invisibleloop/pulse 0.20.5 → 0.20.7

package/docs/src/pages/components/carousel.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 { carousel } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/carousel')
-
-function slide(bg, label) {
-  return `<div style="height:220px;display:flex;align-items:center;justify-content:center;background:${bg};border-radius:10px;font-size:1.1rem;font-weight:700;color:var(--ui-text)">${label}</div>`
-}
-
-export default {
-  route: '/components/carousel',
-  meta: {
-    title: 'Carousel — Pulse Docs',
-    description: 'Carousel / slider component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/carousel',
-    prev,
-    next,
-    name: 'carousel',
-    description: 'CSS scroll-snap carousel with optional prev/next arrows and dot navigation. Touch / swipe friendly out of the box. Requires <code>pulse-ui.js</code> for button and dot interactivity.',
-    content: `
-      ${demo(
-        carousel({
-          slides: [
-            slide('var(--ui-surface-2)', 'Slide 1'),
-            slide('var(--ui-surface)',   'Slide 2'),
-            slide('var(--ui-surface-2)', 'Slide 3'),
-          ],
-        }),
-        `carousel({
-  slides: [
-    \`<div class="slide">Slide 1</div>\`,
-    \`<div class="slide">Slide 2</div>\`,
-    \`<div class="slide">Slide 3</div>\`,
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="arrows-dots"><a href="#arrows-dots" class="heading-anchor">Arrows and dots</a></h2>
-      ${demo(
-        carousel({
-          arrows: true,
-          dots:   false,
-          slides: [
-            slide('var(--ui-surface-2)', 'Arrows only — Slide 1'),
-            slide('var(--ui-surface)',   'Arrows only — Slide 2'),
-          ],
-        }),
-        `carousel({
-  slides: [ /* ... */ ],
-  arrows: true,
-  dots:   false,   // hide dot navigation
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>slides</code>', 'string[] (HTML)',  '[]',             'Array of raw HTML strings — one per slide'],
-          ['<code>arrows</code>', 'boolean',           '<code>true</code>',  'Show prev/next arrow buttons'],
-          ['<code>dots</code>',   'boolean',           '<code>true</code>',  'Show dot navigation (hidden when only one slide)'],
-          ['<code>class</code>',  'string',            '—',              ''],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/code-window.js

@@ -1,56 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { codeWindow } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/code-window')
-
-export default {
-  route: '/components/code-window',
-  meta: {
-    title: 'Code Window — Pulse Docs',
-    description: 'macOS-style window chrome around a code block. Accepts pre-highlighted HTML as the content slot.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/code-window',
-    prev,
-    next,
-    name: 'codeWindow',
-    description: 'macOS-style window chrome around a code block. Accepts pre-highlighted HTML as the content slot — the component handles all the chrome, layout, scrolling, and monospace typography.',
-    content: `
-      ${demo(
-        codeWindow({
-          filename: 'home.js',
-          lang:     'JavaScript',
-          content:  `<span style="color:var(--ui-accent)">export default</span> {
-  <span style="color:var(--ui-text)">state</span>: { count: <span style="color:var(--ui-green)">0</span> },
-
-  <span style="color:var(--ui-text)">view</span>: (state) =&gt; \`
-    &lt;h1&gt;\${state.count}&lt;/h1&gt;
-    &lt;button data-event=<span style="color:var(--ui-yellow)">"inc"</span>&gt;+&lt;/button&gt;
-  \`,
-
-  <span style="color:var(--ui-text)">mutations</span>: {
-    inc: (state) =&gt; ({ count: state.count + <span style="color:var(--ui-green)">1</span> }),
-  },
-}`,
-        }),
-        `codeWindow({
-  filename: 'home.js',
-  lang:     'JavaScript',
-  content:  highlightedHtml, // pre-rendered HTML with syntax token spans
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>content</code>',  'string (HTML)', '—', 'Raw HTML slot — pre-highlighted code HTML or plain text'],
-          ['<code>filename</code>', 'string',        '—', "Filename shown in the chrome bar (e.g. 'home.js')"],
-          ['<code>lang</code>',     'string',        '—', "Language label shown on the right of the chrome (e.g. 'JavaScript')"],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,74 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table, callout } from '../../lib/layout.js'
-import { decorate } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/decorate')
-
-const swatch = (pattern, label) => `
-  <div style="position:relative;width:200px;height:120px;border-radius:var(--ui-radius);border:1px solid var(--ui-border);overflow:hidden;display:flex;align-items:center;justify-content:center">
-    ${decorate({ pattern })}
-    <span style="position:relative;z-index:1;font-weight:600;font-size:.875rem">${label}</span>
-  </div>`
-
-export default {
-  route: '/components/decorate',
-  meta: {
-    title: 'Decorate — Pulse Docs',
-    description: 'Inline SVG background pattern overlay for adding subtle texture to sections in Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/decorate',
-    prev,
-    next,
-    name: 'decorate',
-    description: 'Inline SVG background pattern. Drop it inside any container with <code>position: relative</code> to add subtle texture without external assets. Five patterns: dots, grid, lines, zigzag, cross. Zero JavaScript — pure inline SVG.',
-    content: `
-      <h2 class="doc-h2" id="patterns">Patterns</h2>
-      <p>Five built-in patterns. The SVG fills the parent completely with <code>position: absolute; inset: 0</code>.</p>
-      ${demo(
-        `<div style="display:flex;flex-wrap:wrap;gap:1rem">` +
-          swatch('dots',   'dots') +
-          swatch('grid',   'grid') +
-          swatch('lines',  'lines') +
-          swatch('zigzag', 'zigzag') +
-          swatch('cross',  'cross') +
-        `</div>`,
-        `// Parent must have position: relative
-<div style="position:relative">
-  ${`${decorate({ pattern: 'dots' })}`}
-  <p>Your content sits on top</p>
-</div>`
-      )}
-
-      <h2 class="doc-h2" id="color">Color and opacity</h2>
-      <p>The default color is <code>var(--ui-border)</code> — it fits both light and dark themes. Override with any CSS value. Control density with <code>opacity</code>.</p>
-      ${demo(
-        `<div style="display:flex;flex-wrap:wrap;gap:1rem">` +
-          `<div style="position:relative;width:200px;height:120px;border-radius:var(--ui-radius);overflow:hidden;background:var(--ui-accent);display:flex;align-items:center;justify-content:center">` +
-            decorate({ pattern: 'dots', color: '#fff', opacity: 0.3 }) +
-            `<span style="position:relative;z-index:1;color:#fff;font-weight:600">opacity: 0.3</span>` +
-          `</div>` +
-          `<div style="position:relative;width:200px;height:120px;border-radius:var(--ui-radius);overflow:hidden;background:var(--ui-surface-raised);display:flex;align-items:center;justify-content:center">` +
-            decorate({ pattern: 'grid', opacity: 0.6 }) +
-            `<span style="position:relative;z-index:1;font-weight:600">opacity: 0.6</span>` +
-          `</div>` +
-        `</div>`,
-        `decorate({ pattern: 'dots', color: '#fff', opacity: 0.3 })`
-      )}
-
-      ${callout('note', 'The <code>decorate</code> element is <code>aria-hidden="true"</code> — it is purely decorative. Make sure surrounding content has sufficient contrast without relying on the pattern.')}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>pattern</code>', 'string', "'dots'",              "'dots' · 'grid' · 'lines' · 'zigzag' · 'cross'"],
-          ['<code>color</code>',   'string', "'var(--ui-border)'",  'Any CSS color value — <code>var()</code> tokens and hex are both accepted'],
-          ['<code>opacity</code>', 'number', '0.4',                 'SVG opacity — 0 (invisible) to 1 (solid)'],
-          ['<code>size</code>',    'number', '20',                  'Pattern tile size in pixels — smaller values = denser pattern'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/gallery.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 { gallery } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/gallery')
-
-const PHOTOS = [
-  { src: '/img/placeholder-landscape.svg', alt: 'Mountain landscape' },
-  { src: '/img/placeholder-square.svg',    alt: 'Portrait photo' },
-  { src: '/img/placeholder-tall.svg',      alt: 'Urban street' },
-  { src: '/img/placeholder-landscape.svg', alt: 'Coastal path' },
-  { src: '/img/placeholder-square.svg',    alt: 'Dog in the park' },
-  { src: '/img/placeholder-tall.svg',      alt: 'City skyline' },
-]
-
-const CAPTIONED = [
-  { src: '/img/placeholder-landscape.svg', alt: 'Mountain landscape', caption: 'Glen Coe, Scotland' },
-  { src: '/img/placeholder-square.svg',    alt: 'Portrait',           caption: 'Lisbon, Portugal' },
-  { src: '/img/placeholder-tall.svg',      alt: 'Urban',              caption: 'Tokyo, Japan' },
-]
-
-export default {
-  route: '/components/gallery',
-  meta: {
-    title: 'Gallery — Pulse Docs',
-    description: 'Responsive image gallery with grid, strip, and masonry layouts for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/gallery',
-    prev,
-    next,
-    name: 'gallery',
-    description: 'Responsive image gallery. Three layout modes: <code>grid</code> (equal aspect-ratio cells), <code>strip</code> (single horizontally scrollable row), and <code>masonry</code> (Pinterest-style varying heights). All images are lazy-loaded.',
-    content: `
-      <h2 class="doc-h2" id="grid">Grid layout</h2>
-      <p>Equal-sized cells with a consistent aspect ratio. Good for portfolios and photo libraries.</p>
-      ${demo(
-        gallery({ images: PHOTOS, layout: 'grid', cols: 3, ratio: '4/3' }),
-        `gallery({
-  images: photos.map(p => ({ src: p.url, alt: p.alt })),
-  layout: 'grid',
-  cols:   3,
-  ratio:  '4/3',
-})`
-      )}
-
-      <h2 class="doc-h2" id="strip">Strip layout</h2>
-      <p>A single horizontally scrollable row — ideal for a quick photo preview or a scrolling carousel of product shots.</p>
-      ${demo(
-        gallery({ images: PHOTOS, layout: 'strip', ratio: '4/3' }),
-        `gallery({
-  images: photos.map(p => ({ src: p.url, alt: p.alt })),
-  layout: 'strip',
-  ratio:  '4/3',
-})`
-      )}
-
-      <h2 class="doc-h2" id="masonry">Masonry layout</h2>
-      <p>Varying heights — images render at their natural ratio. Best for editorial photography where portrait and landscape images are mixed.</p>
-      ${demo(
-        gallery({ images: PHOTOS, layout: 'masonry', cols: 3 }),
-        `gallery({
-  images: photos.map(p => ({ src: p.url, alt: p.alt })),
-  layout: 'masonry',
-  cols:   3,
-})`
-      )}
-
-      <h2 class="doc-h2" id="captions">Captions</h2>
-      <p>Add a <code>caption</code> to any image in the array — rendered as a <code>&lt;figcaption&gt;</code>.</p>
-      ${demo(
-        gallery({ images: CAPTIONED, layout: 'grid', cols: 3, ratio: '4/3' }),
-        `gallery({
-  images: [
-    { src: '/img/landscape.jpg', alt: 'Mountain', caption: 'Glen Coe, Scotland' },
-    { src: '/img/portrait.jpg',  alt: 'Street',   caption: 'Lisbon, Portugal' },
-  ],
-  layout: 'grid',
-  cols:   3,
-  ratio:  '4/3',
-})`
-      )}
-
-      <h2 class="doc-h2" id="linked">Linked images</h2>
-      <p>Add an <code>href</code> to any image to wrap it in a link.</p>
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>images</code>',  'object[]',      '[]',       'Array of image objects: <code>{ src, alt, caption?, href? }</code>'],
-          ['<code>layout</code>',  'string',        "'grid'",   "'grid' · 'strip' · 'masonry'"],
-          ['<code>cols</code>',    'number',        '3',        'Columns in grid/masonry (1–4)'],
-          ['<code>ratio</code>',   'string',        "'4/3'",    "CSS aspect-ratio for grid/strip cells — e.g. <code>'16/9'</code>, <code>'1/1'</code>. Ignored in masonry."],
-          ['<code>gap</code>',     'string',        "'md'",     "'sm' · 'md' · 'lg'"],
-          ['<code>rounded</code>', 'boolean',       'false',    'Adds border-radius to each image'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,111 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { list } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/list')
-
-export default {
-  route: '/components/list',
-  meta: {
-    title: 'List — Pulse Docs',
-    description: 'Styled ordered and unordered list component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/list',
-    prev,
-    next,
-    name: 'list',
-    description: 'Styled unordered or ordered list with consistent spacing and colour tokens. Use this instead of raw <code>&lt;ul&gt;</code> / <code>&lt;ol&gt;</code>. Items are HTML strings — other components can be passed as items.',
-    content: `
-
-      <h2 class="doc-h2" id="unordered">Unordered</h2>
-      ${demo(
-        list({ items: ['Streaming SSR on every page', 'Security headers by default', 'Zero client-side dependencies', 'Lighthouse 100 out of the box'] }),
-        `list({
-  items: [
-    'Streaming SSR on every page',
-    'Security headers by default',
-    'Zero client-side dependencies',
-    'Lighthouse 100 out of the box',
-  ],
-})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="ordered">Ordered</h2>
-      ${demo(
-        list({
-          ordered: true,
-          items: ['Create a new Pulse project', 'Add your pages to <code>src/pages/</code>', 'Run <code>pulse dev</code> to start the server', 'Deploy when ready'],
-        }),
-        `list({
-  ordered: true,
-  items: [
-    'Create a new Pulse project',
-    'Add your pages to src/pages/',
-    'Run pulse dev to start the server',
-    'Deploy when ready',
-  ],
-})`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="gap">Gap</h2>
-      <p>Control vertical spacing between items with the <code>gap</code> prop.</p>
-      ${demo(
-        `<div class="u-flex u-gap-8">
-          <div>
-            <p class="u-text-muted u-text-sm u-mb-2">xs</p>
-            ${list({ gap: 'xs', items: ['Design', 'Build', 'Ship'] })}
-          </div>
-          <div>
-            <p class="u-text-muted u-text-sm u-mb-2">sm (default)</p>
-            ${list({ gap: 'sm', items: ['Design', 'Build', 'Ship'] })}
-          </div>
-          <div>
-            <p class="u-text-muted u-text-sm u-mb-2">md</p>
-            ${list({ gap: 'md', items: ['Design', 'Build', 'Ship'] })}
-          </div>
-        </div>`,
-        `list({ gap: 'xs', items: [...] })
-list({ gap: 'sm', items: [...] })  // default
-list({ gap: 'md', items: [...] })`,
-        { col: true }
-      )}
-
-      <h2 class="doc-h2" id="rich-items">Items with markup</h2>
-      <p>Items are HTML strings — pass any markup including other components. Always escape user data before including it in item strings.</p>
-      ${demo(
-        list({
-          items: [
-            `<strong>spec.state</strong> — initial client state, deep-cloned on mount`,
-            `<strong>spec.mutations</strong> — synchronous state updates`,
-            `<strong>spec.actions</strong> — async operations with lifecycle hooks`,
-            `<strong>spec.server</strong> — server-side data fetchers`,
-          ],
-        }),
-        `list({
-  items: [
-    '<strong>spec.state</strong> — initial client state',
-    '<strong>spec.mutations</strong> — synchronous state updates',
-    '<strong>spec.actions</strong> — async operations with lifecycle hooks',
-    '<strong>spec.server</strong> — server-side data fetchers',
-  ],
-})`,
-        { col: true }
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>items</code>',   'string[]',                         '—',             'Array of HTML strings for each list item — escape user data before passing'],
-          ['<code>ordered</code>', 'boolean',                          '<code>false</code>', '<code>false</code> renders <code>&lt;ul&gt;</code>, <code>true</code> renders <code>&lt;ol&gt;</code>'],
-          ['<code>gap</code>',     '<code>xs | sm | md</code>',        '<code>sm</code>',    'Vertical spacing between items'],
-          ['<code>class</code>',   'string',                           '—',             'Extra classes on the list element'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,76 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { marquee } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/marquee')
-
-const LOGOS = [
-  `<span style="font-weight:600;font-size:.875rem;opacity:.6;white-space:nowrap;letter-spacing:.5px">ACME&nbsp;CORP</span>`,
-  `<span style="font-weight:600;font-size:.875rem;opacity:.6;white-space:nowrap;letter-spacing:.5px">NOVA&nbsp;INC</span>`,
-  `<span style="font-weight:600;font-size:.875rem;opacity:.6;white-space:nowrap;letter-spacing:.5px">STELLAR</span>`,
-  `<span style="font-weight:600;font-size:.875rem;opacity:.6;white-space:nowrap;letter-spacing:.5px">ORBIT&nbsp;CO</span>`,
-  `<span style="font-weight:600;font-size:.875rem;opacity:.6;white-space:nowrap;letter-spacing:.5px">HELIX</span>`,
-  `<span style="font-weight:600;font-size:.875rem;opacity:.6;white-space:nowrap;letter-spacing:.5px">PRISM&nbsp;AI</span>`,
-]
-
-export default {
-  route: '/components/marquee',
-  meta: {
-    title: 'Marquee — Pulse Docs',
-    description: 'CSS-only infinite scrolling strip for logo clouds, trust badges, and tag lists in Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/marquee',
-    prev,
-    next,
-    name: 'marquee',
-    description: 'CSS-only infinite scrolling strip. No JavaScript — pure CSS animation. Use for logo clouds, press mentions, trust badges, or feature tags. <strong>The strip is hidden from screen readers</strong> (<code>aria-hidden="true"</code>) — it is decorative, not content.',
-    content: `
-      <h2 class="doc-h2" id="logos">Logo cloud</h2>
-      <p>A common use-case: a strip of client or partner logos scrolling slowly from right to left.</p>
-      ${demo(
-        marquee({ items: LOGOS }),
-        `marquee({
-  items: ['<img src="/logos/acme.svg" alt="">',
-          '<img src="/logos/nova.svg" alt="">',
-          '<img src="/logos/helix.svg" alt="">'],
-})`
-      )}
-
-      <h2 class="doc-h2" id="slow">Custom speed</h2>
-      <p>The default <code>speed</code> is 30 seconds per loop. Slow it down for fewer items, or speed it up for a more energetic feel.</p>
-      ${demo(
-        marquee({ items: LOGOS, speed: 60 }),
-        `marquee({ items, speed: 60 })  // slow`
-      )}
-
-      <h2 class="doc-h2" id="direction">Direction</h2>
-      <p>Set <code>direction: 'right'</code> to scroll right-to-left instead.</p>
-      ${demo(
-        marquee({ items: LOGOS, direction: 'right' }),
-        `marquee({ items, direction: 'right' })`
-      )}
-
-      <h2 class="doc-h2" id="no-fade">Without fade</h2>
-      <p>Edge fading is on by default. Disable it with <code>fade: false</code>.</p>
-      ${demo(
-        marquee({ items: LOGOS, fade: false }),
-        `marquee({ items, fade: false })`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>items</code>',     'string[]',  '[]',         'Array of raw HTML strings — images, badges, or text'],
-          ['<code>speed</code>',     'number',    '30',         'Duration (seconds) for one full loop. Lower = faster.'],
-          ['<code>gap</code>',       'string',    "'lg'",       "'sm' · 'md' · 'lg'"],
-          ['<code>direction</code>', 'string',    "'left'",     "'left' (right-to-left scroll) or 'right'"],
-          ['<code>pause</code>',     'boolean',   'true',       'Pause animation on hover'],
-          ['<code>fade</code>',      'boolean',   'true',       'Apply gradient mask to fade the left and right edges'],
-        ]
-      )}
-    `,
-  }),
-}

package/docs/src/pages/components/photo-card.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 { photoCard } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/photo-card')
-
-export default {
-  route: '/components/photo-card',
-  meta: {
-    title: 'Photo Card — Pulse Docs',
-    description: 'Polaroid-style photo card with optional tilt and caption for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/photo-card',
-    prev,
-    next,
-    name: 'photoCard',
-    description: 'Polaroid-style photo card with a border, white padding, optional caption, and CSS tilt. Ideal for "meet the team" sections, testimonial portraits, and lifestyle photography.',
-    content: `
-      <h2 class="doc-h2" id="basic">Basic photo card</h2>
-      <p>A framed image with a white polaroid border.</p>
-      ${demo(
-        `<div style="display:flex;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:2rem">` +
-        photoCard({ src: '/img/placeholder-square.svg', alt: 'Team member portrait', caption: 'Sarah, Designer' }) +
-        `</div>`,
-        `photoCard({
-  src:     '/img/team/sarah.jpg',
-  alt:     'Sarah, Designer',
-  caption: 'Sarah, Designer',
-})`
-      )}
-
-      <h2 class="doc-h2" id="tilt">With tilt</h2>
-      <p>Pass a <code>tilt</code> value (degrees) to rotate the card. Negative values lean left, positive values lean right. Useful for giving sections a hand-placed, organic feeling.</p>
-      ${demo(
-        `<div style="display:flex;gap:2rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:2rem">` +
-        photoCard({ src: '/img/placeholder-square.svg', alt: 'Team photo',  caption: 'Andy, founder',    tilt: -2 }) +
-        photoCard({ src: '/img/placeholder-tall.svg',   alt: 'Office dog',  caption: 'Biscuit, mascot',  tilt: 1.5 }) +
-        photoCard({ src: '/img/placeholder-square.svg', alt: 'Team photo',  caption: 'Jen, engineering', tilt: -1 }) +
-        `</div>`,
-        `photoCard({ src, alt: 'Andy, founder',    caption: 'Andy, founder',    tilt: -2  })
-photoCard({ src, alt: 'Office dog',   caption: 'Biscuit, mascot', tilt: 1.5 })
-photoCard({ src, alt: 'Jen, engineering', caption: 'Jen, engineering', tilt: -1 })`
-      )}
-
-      <h2 class="doc-h2" id="ratios">Aspect ratios</h2>
-      <p>Set <code>ratio</code> to control the crop. <code>'1/1'</code> for square portraits, <code>'4/3'</code> for landscape shots.</p>
-      ${demo(
-        `<div style="display:flex;gap:2rem;align-items:flex-start;justify-content:center;flex-wrap:wrap;padding:2rem">` +
-        photoCard({ src: '/img/placeholder-square.svg',    alt: 'Square crop',    caption: "ratio: '1/1'",   ratio: '1/1',  tilt: 1 }) +
-        photoCard({ src: '/img/placeholder-landscape.svg', alt: 'Landscape crop', caption: "ratio: '4/3'",   ratio: '4/3',  tilt: -1.5 }) +
-        photoCard({ src: '/img/placeholder-tall.svg',      alt: 'Tall crop',      caption: "ratio: '3/4'",   ratio: '3/4',  tilt: 2 }) +
-        `</div>`,
-        `photoCard({ src, alt: 'Square portrait',    ratio: '1/1', tilt: 1 })
-photoCard({ src, alt: 'Landscape photo',    ratio: '4/3', tilt: -1.5 })
-photoCard({ src, alt: 'Tall portrait',      ratio: '3/4', tilt: 2 })`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>src</code>',     'string',  '—',       'Image source URL'],
-          ['<code>alt</code>',     'string',  '—',       'Alt text — required for accessibility'],
-          ['<code>caption</code>', 'string',  '—',       'Caption text below the photo'],
-          ['<code>tilt</code>',    'number',  '0',       'CSS rotate degrees — negative leans left, positive leans right. 0 = no tilt'],
-          ['<code>ratio</code>',   'string',  "'4/3'",   'CSS aspect-ratio for the image crop'],
-          ['<code>rounded</code>', 'boolean', 'false',   'Rounds the image corners inside the card frame'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,67 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table, section } from '../../lib/layout.js'
-import { button, pricing } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/pricing')
-
-export default {
-  route: '/components/pricing',
-  meta: {
-    title: 'Pricing — Pulse Docs',
-    description: 'Pricing component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/pricing',
-    prev,
-    next,
-    name: 'pricing',
-    description: 'Single plan card with a feature list and CTA. Set <code>highlighted: true</code> on the recommended plan — it gets an accent border and a floating <code>badge</code> label.',
-    content: `
-      ${demo(
-        pricing({ name: 'Pro', price: '$9', period: '/month', description: 'For growing teams', features: ['Unlimited pages', 'Priority support', 'Custom domain'], highlighted: true, badge: 'Most popular', action: button({ label: 'Get started', fullWidth: true }) }),
-        `pricing({
-  name:        'Pro',
-  price:       '$9',
-  period:      '/month',
-  description: 'For growing teams',
-  features:    ['Unlimited pages', 'Priority support', 'Custom domain'],
-  highlighted: true,
-  badge:       'Most popular',
-  action:      button({ label: 'Get started', fullWidth: true }),
-})`,
-        { col: true }
-      )}
-
-      ${section('multi-plan', 'Multi-plan layout')}
-      ${demo(
-        `<div class="ui-pricing-grid ui-pricing-grid--cols-3">` +
-          pricing({ name: 'Free', price: '$0', period: '/month', description: 'For personal projects', features: ['3 pages', 'Community support'], action: button({ label: 'Get started', variant: 'secondary', fullWidth: true }) }) +
-          pricing({ name: 'Pro', price: '$9', period: '/month', description: 'For growing teams', features: ['Unlimited pages', 'Priority support', 'Custom domain'], highlighted: true, badge: 'Most popular', action: button({ label: 'Get started', fullWidth: true }) }) +
-          pricing({ name: 'Team', price: '$29', period: '/month', description: 'For large organisations', features: ['Everything in Pro', 'SSO', 'SLA'], action: button({ label: 'Get started', variant: 'secondary', fullWidth: true }) }) +
-        `</div>`,
-        `<div class="ui-pricing-grid ui-pricing-grid--cols-3">
-  \${pricing({ name: 'Free',  price: '$0',  ... })}
-  \${pricing({ name: 'Pro',   price: '$9',  highlighted: true, badge: 'Most popular', ... })}
-  \${pricing({ name: 'Team',  price: '$29', ... })}
-</div>`,
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>name</code>',        'string',        '—',     ''],
-          ['<code>level</code>',       'number',        '3',     'Heading tag for the plan name (1–6). Visual style is unchanged.'],
-          ['<code>price</code>',       'string',        '—',     'Formatted string — e.g. "$9", "Free"'],
-          ['<code>period</code>',      'string',        '—',     'e.g. "/month", "/year"'],
-          ['<code>description</code>', 'string',        '—',     ''],
-          ['<code>features</code>',    'string[]',      '[]',    'List of feature strings'],
-          ['<code>action</code>',      'string (HTML)', '—',     'Raw HTML slot — typically a button()'],
-          ['<code>highlighted</code>', 'boolean',       'false', 'Accent border + elevated appearance'],
-          ['<code>badge</code>',       'string',        '—',     'Floating label above the card'],
-        ]
-      )}
-    `,
-  }),
-}