@invisibleloop/pulse 0.20.4 → 0.20.6

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

@@ -1,48 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { testimonial } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/testimonial')
-
-export default {
-  route: '/components/testimonial',
-  meta: {
-    title: 'Testimonial — Pulse Docs',
-    description: 'Testimonial component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/testimonial',
-    prev,
-    next,
-    name: 'testimonial',
-    description: 'Customer quote card with star rating, avatar, and attribution. When <code>src</code> is omitted the avatar shows initials derived from <code>name</code>.',
-    content: `
-      ${demo(
-        `<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem">` +
-          testimonial({ quote: 'This is the fastest app I have ever used. It replaced three tools I was paying for.', name: 'Alice Marsh', role: 'Head of Product, Stride', rating: 5 }) +
-          testimonial({ quote: 'Switched from the competition six months ago and have not looked back once.', name: 'Ben Carter', role: 'Founder, Loopback', rating: 5 }) +
-        `</div>`,
-        `testimonial({
-  quote:  'This is the fastest app I have ever used.',
-  name:   'Alice Marsh',
-  role:   'Head of Product, Stride',
-  rating: 5,
-  src:    user.avatarUrl,  // optional — falls back to initials
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>quote</code>',  'string', '—', ''],
-          ['<code>name</code>',   'string', '—', 'Author name — also used for avatar initials'],
-          ['<code>role</code>',   'string', '—', ''],
-          ['<code>src</code>',    'string', '—', 'Avatar image URL; omit to show initials'],
-          ['<code>rating</code>', 'number', '0', '1–5 stars; omit or set 0 to hide'],
-        ]
-      )}
-    `,
-  }),
-}

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

@@ -1,226 +0,0 @@
-import { renderComponentPage, demo } from '../../lib/component-page.js'
-import { prevNext } from '../../lib/nav.js'
-import { table } from '../../lib/layout.js'
-import { timeline, timelineItem, badge, card, stat, button } from '../../../../src/ui/index.js'
-
-const { prev, next } = prevNext('/components/timeline')
-
-// Shared check SVG for reuse
-const checkIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
-const starIcon  = `<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>`
-const alertIcon = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`
-
-export default {
-  route: '/components/timeline',
-  meta: {
-    title: 'Timeline — Pulse Docs',
-    description: 'Timeline component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
-  },
-  view: () => renderComponentPage({
-    currentHref: '/components/timeline',
-    prev,
-    next,
-    name: 'timeline',
-    description: 'Ordered sequence of events or steps connected by a line. Supports vertical (default) and horizontal orientations. Each item accepts a raw HTML content slot — pass any text, component, or markup.',
-    content: `
-
-      <h2 class="doc-h2" id="vertical">Vertical (default)</h2>
-      <p>Steps flow downward. The connector line links each dot to the next.</p>
-      ${demo(
-        timeline({
-          items: [
-            { label: 'Jan 2023', content: '<strong style="color:var(--ui-text)">Project kicked off</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Initial scope agreed with stakeholders. Repository created.</p>' },
-            { label: 'Mar 2023', content: '<strong style="color:var(--ui-text)">Alpha release</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Internal testing with 12 pilot users. Core features stable.</p>' },
-            { label: 'Jun 2023', content: '<strong style="color:var(--ui-text)">Public beta</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Open sign-up enabled. 400 users in first week.</p>' },
-            { label: 'Sep 2023', content: '<strong style="color:var(--ui-text)">v1.0 launched</strong><p style="color:var(--ui-muted);margin:.25rem 0 0">Billing live, docs published, ProductHunt launch.</p>' },
-          ],
-        }),
-        `timeline({
-  items: [
-    { label: 'Jan 2023', content: '<strong>Project kicked off</strong><p>Initial scope agreed.</p>' },
-    { label: 'Mar 2023', content: '<strong>Alpha release</strong><p>Internal testing with 12 pilot users.</p>' },
-    { label: 'Jun 2023', content: '<strong>Public beta</strong><p>Open sign-up enabled. 400 users in first week.</p>' },
-    { label: 'Sep 2023', content: '<strong>v1.0 launched</strong><p>Billing live, docs published.</p>' },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="horizontal">Horizontal</h2>
-      <p>Steps flow left to right — good for process flows or numbered stages.</p>
-      ${demo(
-        timeline({
-          direction: 'horizontal',
-          items: [
-            { label: 'Step 1', content: '<p style="color:var(--ui-muted);margin:0;font-size:.85rem">Sign up</p>' },
-            { label: 'Step 2', content: '<p style="color:var(--ui-muted);margin:0;font-size:.85rem">Connect data</p>' },
-            { label: 'Step 3', content: '<p style="color:var(--ui-muted);margin:0;font-size:.85rem">Invite team</p>' },
-            { label: 'Step 4', content: '<p style="color:var(--ui-muted);margin:0;font-size:.85rem">Go live</p>' },
-          ],
-        }),
-        `timeline({
-  direction: 'horizontal',
-  items: [
-    { label: 'Step 1', content: '<p>Sign up</p>'      },
-    { label: 'Step 2', content: '<p>Connect data</p>' },
-    { label: 'Step 3', content: '<p>Invite team</p>'  },
-    { label: 'Step 4', content: '<p>Go live</p>'      },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="dot-colors">Dot colours</h2>
-      <p>Use <code>dotColor</code> to convey status: <code>'accent'</code> · <code>'success'</code> · <code>'warning'</code> · <code>'error'</code> · <code>'muted'</code>.</p>
-      ${demo(
-        timeline({
-          items: [
-            { dotColor: 'success', label: 'Deployed',  content: '<p style="color:var(--ui-muted);margin:0">Production deploy completed successfully.</p>' },
-            { dotColor: 'success', label: 'Tested',    content: '<p style="color:var(--ui-muted);margin:0">All 92 tests passed. Coverage 98%.</p>' },
-            { dotColor: 'warning', label: 'Review',    content: '<p style="color:var(--ui-muted);margin:0">Awaiting sign-off from design lead.</p>' },
-            { dotColor: 'error',   label: 'Blocked',   content: '<p style="color:var(--ui-muted);margin:0">Dependency on payment API not yet ready.</p>' },
-            { dotColor: 'muted',   label: 'Planned',   content: '<p style="color:var(--ui-muted);margin:0">Mobile app release — Q1 2025.</p>' },
-          ],
-        }),
-        `timeline({
-  items: [
-    { dotColor: 'success', label: 'Deployed', content: '...' },
-    { dotColor: 'success', label: 'Tested',   content: '...' },
-    { dotColor: 'warning', label: 'Review',   content: '...' },
-    { dotColor: 'error',   label: 'Blocked',  content: '...' },
-    { dotColor: 'muted',   label: 'Planned',  content: '...' },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="icon-dots">Icon dots</h2>
-      <p>Pass any SVG or emoji as <code>dot</code>. The dot grows to accommodate the content and uses a tinted background matching its colour variant.</p>
-      ${demo(
-        timeline({
-          items: [
-            { dot: checkIcon, dotColor: 'success', label: 'Completed', content: '<strong style="color:var(--ui-text)">Onboarding</strong><p style="color:var(--ui-muted);margin:.2rem 0 0">Profile set up, preferences saved.</p>' },
-            { dot: starIcon,  dotColor: 'accent',  label: 'Milestone', content: '<strong style="color:var(--ui-text)">First 1,000 users</strong><p style="color:var(--ui-muted);margin:.2rem 0 0">Reached organically in 18 days.</p>' },
-            { dot: alertIcon, dotColor: 'warning', label: 'Incident',  content: '<strong style="color:var(--ui-text)">Partial outage</strong><p style="color:var(--ui-muted);margin:.2rem 0 0">CDN edge node failed — resolved in 4 minutes.</p>' },
-          ],
-        }),
-        `timeline({
-  items: [
-    {
-      dot:      checkSvg,
-      dotColor: 'success',
-      label:    'Completed',
-      content:  '<strong>Onboarding</strong><p>Profile set up, preferences saved.</p>',
-    },
-    {
-      dot:      starSvg,
-      dotColor: 'accent',
-      label:    'Milestone',
-      content:  '<strong>First 1,000 users</strong>',
-    },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="rich-content">Rich content slot</h2>
-      <p>The <code>content</code> slot accepts any HTML — including other Pulse components like <code>card()</code>, <code>badge()</code>, or <code>stat()</code>.</p>
-      ${demo(
-        timeline({
-          items: [
-            {
-              dotColor: 'success',
-              label: 'Q1 2024',
-              content: card({
-                title: 'Series A closed',
-                content: `<div style="display:flex;gap:1.5rem;flex-wrap:wrap">` +
-                  stat({ label: 'Raised',    value: '$4.2M' }) +
-                  stat({ label: 'Valuation', value: '$18M'  }) +
-                  stat({ label: 'Investors', value: '6'     }) +
-                `</div>`,
-              }),
-            },
-            {
-              dotColor: 'accent',
-              label: 'Q3 2024',
-              content: card({
-                title: 'Product launch',
-                content: `<p style="color:var(--ui-muted);margin:0 0 .75rem">Shipped v1.0 to general availability. Three tiers, 14-day trial.</p>` +
-                  `<div style="display:flex;gap:.5rem;flex-wrap:wrap">` +
-                  badge({ label: 'Launch', variant: 'info'    }) +
-                  badge({ label: 'Billing live', variant: 'success' }) +
-                  `</div>`,
-              }),
-            },
-            {
-              dotColor: 'muted',
-              label: 'Q1 2025 (planned)',
-              content: card({
-                title: 'Mobile apps',
-                content: `<p style="color:var(--ui-muted);margin:0 0 .75rem">iOS and Android apps in development. Public beta planned.</p>` +
-                  button({ label: 'Join waitlist', size: 'sm', variant: 'secondary' }),
-              }),
-            },
-          ],
-        }),
-        `timeline({
-  items: [
-    {
-      dotColor: 'success',
-      label:    'Q1 2024',
-      content:  card({
-        title:   'Series A closed',
-        content: stat({ label: 'Raised', value: '$4.2M' }) + ...,
-      }),
-    },
-    {
-      dotColor: 'accent',
-      label:    'Q3 2024',
-      content:  card({
-        title:   'Product launch',
-        content: '<p>Shipped v1.0 to general availability.</p>' +
-                 badge({ label: 'Billing live', variant: 'success' }),
-      }),
-    },
-  ],
-})`
-      )}
-
-      <h2 class="doc-h2" id="item-fn">Using timelineItem()</h2>
-      <p>Build items individually with <code>timelineItem()</code> and pass the joined HTML as <code>content</code>. Useful for dynamic or conditional lists.</p>
-      ${demo(
-        timeline({
-          content:
-            timelineItem({ dotColor: 'success', label: 'Done',    content: '<p style="color:var(--ui-muted);margin:0">Design system tokens agreed</p>' }) +
-            timelineItem({ dotColor: 'success', label: 'Done',    content: '<p style="color:var(--ui-muted);margin:0">Component library built</p>' }) +
-            timelineItem({ dotColor: 'accent',  label: 'Current', content: '<p style="color:var(--ui-muted);margin:0">Documentation in progress</p>' }) +
-            timelineItem({ dotColor: 'muted',   label: 'Next',    content: '<p style="color:var(--ui-muted);margin:0">Public launch</p>' }),
-        }),
-        `timeline({
-  content:
-    timelineItem({ dotColor: 'success', label: 'Done',    content: '...' }) +
-    timelineItem({ dotColor: 'success', label: 'Done',    content: '...' }) +
-    timelineItem({ dotColor: 'accent',  label: 'Current', content: '...' }) +
-    timelineItem({ dotColor: 'muted',   label: 'Next',    content: '...' }),
-})`
-      )}
-
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>direction</code>', 'string', "'vertical'", "'vertical' · 'horizontal'"],
-          ['<code>items</code>',     'array',  '[]',         'Array of <code>timelineItem</code> option objects'],
-          ['<code>content</code>',   'string (HTML)', '—',   'Raw HTML alternative to <code>items</code> — use with <code>timelineItem()</code>'],
-        ]
-      )}
-
-      <h3 class="doc-h3" style="margin-top:2rem">timelineItem() props</h3>
-      ${table(
-        ['Prop', 'Type', 'Default', 'Description'],
-        [
-          ['<code>content</code>',  'string (HTML)', '—',        'Raw HTML body — accepts any component output'],
-          ['<code>label</code>',    'string',        '—',        'Timestamp or step label (escaped)'],
-          ['<code>dot</code>',      'string (HTML)', '—',        'Raw HTML inside the dot — SVG or emoji; grows the dot to 2rem'],
-          ['<code>dotColor</code>', 'string',        "'accent'", "'accent' · 'success' · 'warning' · 'error' · 'muted'"],
-        ]
-      )}
-    `,
-  }),
-}

package/src/ui/banner.js

@@ -1,41 +0,0 @@
-/**
- * Pulse UI — Banner
- *
- * Full-width announcement bar — sits above the nav for promotions,
- * notices, or launch announcements.
- *
- * @param {object}  opts
- * @param {string}  opts.content                     - Raw HTML slot
- * @param {'info'|'promo'|'warning'} opts.variant    - Visual style (default: 'info')
- * @param {'top'|'bottom'} opts.position             - 'bottom' fixes the bar to the bottom of the viewport
- * @param {boolean} opts.dismissible                 - Show a close (×) button
- * @param {string}  opts.dismissEvent                - Mutation name fired on close (default: 'dismissBanner')
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const VARIANTS = new Set(['info', 'promo', 'warning'])
-
-export function banner({
-  content       = '',
-  variant       = 'info',
-  position      = 'top',
-  dismissible   = false,
-  dismissEvent  = 'dismissBanner',
-  class: cls    = '',
-} = {}) {
-  if (!VARIANTS.has(variant)) variant = 'info'
-  const classes = [
-    'ui-banner',
-    `ui-banner--${variant}`,
-    position === 'bottom' && 'ui-banner--bottom',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const closeBtn = dismissible
-    ? `<button class="ui-banner-close" data-event="${e(dismissEvent)}" aria-label="Close announcement">×</button>`
-    : ''
-
-  return `<div class="${e(classes)}" role="banner">${content}${closeBtn}</div>`
-}

package/src/ui/brand-statement.js

@@ -1,58 +0,0 @@
-/**
- * Pulse UI — Brand Statement
- *
- * Full-width centred editorial statement — large serif or display type used
- * for brand voice paragraphs between visual sections. This is not a pull-quote
- * (no attribution border) — it is a first-person brand declaration.
- *
- * Typical use: "pieces that are both eclectic and everyday. Subtly precious,
- * expressive, and refined…"
- *
- * @param {object}  opts
- * @param {string}  opts.text         - Statement text (can include basic HTML like <em>, <br>)
- * @param {string}  opts.attribution  - Optional small attribution or tagline below
- * @param {'serif'|'display'|'sans'} opts.font  - Font style (default: 'serif')
- * @param {'sm'|'md'|'lg'} opts.size  - Text size (default: 'md')
- * @param {'left'|'center'|'right'} opts.align - Text alignment (default: 'center')
- * @param {string}  opts.maxWidth     - CSS max-width value (default: '860px')
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const FONTS  = new Set(['serif', 'display', 'sans'])
-const SIZES  = new Set(['sm', 'md', 'lg'])
-const ALIGNS = new Set(['left', 'center', 'right'])
-
-export function brandStatement({
-  text         = '',
-  attribution  = '',
-  font         = 'serif',
-  size         = 'md',
-  align        = 'center',
-  maxWidth     = '',
-  class: cls   = '',
-} = {}) {
-  if (!FONTS.has(font))   font  = 'serif'
-  if (!SIZES.has(size))   size  = 'md'
-  if (!ALIGNS.has(align)) align = 'center'
-
-  const classes = [
-    'ui-brand-statement',
-    font  !== 'serif'   && `ui-brand-statement--${font}`,
-    size  !== 'md'      && `ui-brand-statement--${size}`,
-    align !== 'center'  && `ui-brand-statement--${align}`,
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const innerStyle = maxWidth
-    ? ` style="max-width:${e(typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth)}"`
-    : ''
-
-  return `<div class="${e(classes)}">
-  <div class="ui-brand-statement-inner"${innerStyle}>
-    <p class="ui-brand-statement-text">${text}</p>
-    ${attribution ? `<p class="ui-brand-statement-attr">${e(attribution)}</p>` : ''}
-  </div>
-</div>`
-}

package/src/ui/carousel.js

@@ -1,59 +0,0 @@
-/**
- * Pulse UI — Carousel / Slider
- *
- * CSS scroll-snap carousel with optional prev/next arrows and dot navigation.
- * Requires pulse-ui.js for button and dot interactivity.
- *
- * @param {object}   opts
- * @param {string[]} opts.slides  - Array of raw HTML strings — one per slide
- * @param {boolean}  opts.arrows  - Show prev/next arrow buttons (default: true)
- * @param {boolean}  opts.dots    - Show dot navigation (default: true)
- * @param {string}   opts.class
- */
-
-import { escHtml as e } from '../html.js'
-import { iconChevronLeft, iconChevronRight } from './icons.js'
-
-let _carouselId = 0
-
-export function carousel({
-  slides     = [],
-  arrows     = true,
-  dots       = true,
-  class: cls = '',
-} = {}) {
-  const id = `carousel-${++_carouselId}`
-  const classes = ['ui-carousel', cls].filter(Boolean).join(' ')
-
-  const slidesHtml = slides
-    .map((s, i) => {
-      const panelId = `${id}-panel-${i + 1}`
-      const tabId   = `${id}-tab-${i + 1}`
-      return `<div class="ui-carousel-slide" id="${panelId}" role="tabpanel" aria-labelledby="${tabId}" tabindex="0">${s}</div>`
-    })
-    .join('\n    ')
-
-  const arrowsHtml = arrows ? `
-  <button class="ui-carousel-btn ui-carousel-prev" type="button" aria-label="Previous slide" hidden>
-    ${iconChevronLeft({ size: 16 })}
-  </button>
-  <button class="ui-carousel-btn ui-carousel-next" type="button" aria-label="Next slide"${slides.length <= 1 ? ' hidden' : ''}>
-    ${iconChevronRight({ size: 16 })}
-  </button>` : ''
-
-  const dotsHtml = dots && slides.length > 1 ? `
-  <div class="ui-carousel-dots" role="tablist" aria-label="Slides">
-    ${slides.map((_, i) => {
-      const tabId   = `${id}-tab-${i + 1}`
-      const panelId = `${id}-panel-${i + 1}`
-      const active  = i === 0
-      return `<button class="ui-carousel-dot${active ? ' active' : ''}" id="${tabId}" type="button" role="tab" aria-selected="${active}" aria-controls="${panelId}" tabindex="${active ? '0' : '-1'}" aria-label="Slide ${i + 1}"></button>`
-    }).join('\n    ')}
-  </div>` : ''
-
-  return `<div class="${e(classes)}">
-  <div class="ui-carousel-track">
-    ${slidesHtml}
-  </div>${arrowsHtml}${dotsHtml}
-</div>`
-}

package/src/ui/code-window.js

@@ -1,39 +0,0 @@
-/**
- * Pulse UI — Code Window
- *
- * A code block with macOS-style window chrome — three coloured dots and an
- * optional filename label. The content slot accepts pre-highlighted HTML
- * (spans with syntax-token classes) or plain text.
- *
- * Interactive syntax highlighting is out of scope — pass pre-rendered HTML
- * or plain text. The component handles all the chrome, layout, scroll, and
- * monospace typography.
- *
- * @param {object} opts
- * @param {string} opts.content   - Raw HTML slot — highlighted code HTML or plain text
- * @param {string} opts.filename  - Filename shown in the chrome bar (e.g. 'home.js')
- * @param {string} opts.lang      - Language label shown on the right of the chrome (e.g. 'JavaScript')
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function codeWindow({
-  content    = '',
-  filename   = '',
-  lang       = '',
-  class: cls = '',
-} = {}) {
-  const classes = ['ui-code-window', cls].filter(Boolean).join(' ')
-
-  return `<div class="${e(classes)}" role="region"${filename ? ` aria-label="${e(filename)}"` : ''}>
-  <div class="ui-code-window-chrome" aria-hidden="true">
-    <span class="ui-code-window-dot"></span>
-    <span class="ui-code-window-dot"></span>
-    <span class="ui-code-window-dot"></span>
-    ${filename ? `<span class="ui-code-window-filename">${e(filename)}</span>` : ''}
-    ${lang     ? `<span class="ui-code-window-lang">${e(lang)}</span>` : ''}
-  </div>
-  <pre class="ui-code-window-pre"><code class="ui-code-window-code">${content}</code></pre>
-</div>`
-}

package/src/ui/colophon.js

@@ -1,29 +0,0 @@
-/**
- * Pulse UI — Colophon
- *
- * Paperback-style end-of-page metadata block. A minimal footer
- * variant with tight type, no columns, centered layout.
- *
- * @param {object} opts
- * @param {string} opts.content - Raw HTML content slot
- * @param {'left'|'center'} opts.align - Text alignment (default 'center')
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function colophon({
-  content    = '',
-  align      = 'center',
-  class: cls = '',
-} = {}) {
-  const classes = [
-    'ui-colophon',
-    align === 'left' && 'ui-colophon--left',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  return `<footer class="${e(classes)}">
-  <div class="ui-colophon-inner">${content}</div>
-</footer>`
-}

package/src/ui/contact-row.js

@@ -1,41 +0,0 @@
-/**
- * Pulse UI — ContactRow
- *
- * A horizontal strip of contact items — phone, email, address, hours.
- * Universal on local-business and trades sites. Renders as a <ul> of
- * icon + label pairs, each optionally linked.
- *
- * @param {object}   opts
- * @param {Array<{icon?: string, label: string, href?: string}>} opts.items
- * @param {'sm'|'md'} opts.size   - Text size (default: 'md')
- * @param {string}   opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const SIZES = new Set(['sm', 'md'])
-
-export function contactRow({
-  items      = [],
-  size       = 'md',
-  class: cls = '',
-} = {}) {
-  if (!SIZES.has(size)) size = 'md'
-
-  const classes = [
-    'ui-contact-row',
-    size !== 'md' && `ui-contact-row--${size}`,
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const itemsHtml = items.map(({ icon = '', label = '', href = '' }) => {
-    const iconHtml = icon ? `<span class="ui-contact-row-icon" aria-hidden="true">${icon}</span>` : ''
-    const inner = `${iconHtml}<span>${e(label)}</span>`
-    const content = href
-      ? `<a href="${e(href)}">${inner}</a>`
-      : inner
-    return `<li class="ui-contact-row-item">${content}</li>`
-  }).join('')
-
-  return `<ul class="${e(classes)}">${itemsHtml}</ul>`
-}

package/src/ui/decorate.js

@@ -1,55 +0,0 @@
-/**
- * Pulse UI — Decorate
- *
- * Inline SVG background pattern element. Drop it inside any container as an
- * absolute overlay to add texture — dots, grid, diagonal lines, or zigzag.
- * The SVG is positioned absolute so it doesn't affect layout; the parent must
- * have position: relative (or use a `u-relative` class).
- *
- * @param {object}  opts
- * @param {'dots'|'grid'|'lines'|'zigzag'|'cross'} opts.pattern - Pattern type (default: 'dots')
- * @param {string}  opts.color   - Stroke/fill color, any CSS value (default: var(--ui-border))
- * @param {number}  opts.opacity - Opacity 0–1 (default: 0.4)
- * @param {number}  opts.size    - Pattern tile size in px (default: 20)
- * @param {string}  opts.class
- */
-
-const PATTERNS = new Set(['dots', 'grid', 'lines', 'zigzag', 'cross'])
-
-let _uid = 0
-
-export function decorate({
-  pattern = 'dots',
-  color   = 'var(--ui-border)',
-  opacity = 0.4,
-  size    = 20,
-  class: cls = '',
-} = {}) {
-  if (!PATTERNS.has(pattern)) pattern = 'dots'
-  const s         = Math.max(4, parseInt(size) || 20)
-  const safeOpac  = Math.min(1, Math.max(0, parseFloat(opacity) || 0.4))
-  // Use a color we can reference in the SVG — replace var() with currentColor trick
-  const useColor  = color.startsWith('var(') ? 'currentColor' : color
-  const style     = color.startsWith('var(') ? ` style="color:${color}"` : ''
-
-  const classes = ['ui-decorate', cls].filter(Boolean).join(' ')
-
-  const pid = `dp${++_uid}`
-  let patternSvg
-  const half = s / 2
-
-  if (pattern === 'dots') {
-    patternSvg = `<pattern id="${pid}" patternUnits="userSpaceOnUse" width="${s}" height="${s}"><circle cx="${half}" cy="${half}" r="1" fill="${useColor}"/></pattern>`
-  } else if (pattern === 'grid') {
-    patternSvg = `<pattern id="${pid}" patternUnits="userSpaceOnUse" width="${s}" height="${s}"><path d="M ${s} 0 L 0 0 0 ${s}" fill="none" stroke="${useColor}" stroke-width="0.5"/></pattern>`
-  } else if (pattern === 'lines') {
-    patternSvg = `<pattern id="${pid}" patternUnits="userSpaceOnUse" width="${s}" height="${s}" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="${s}" stroke="${useColor}" stroke-width="0.75"/></pattern>`
-  } else if (pattern === 'zigzag') {
-    const q = s / 4
-    patternSvg = `<pattern id="${pid}" patternUnits="userSpaceOnUse" width="${s}" height="${half}"><polyline points="0,${half} ${q},0 ${half},${half} ${s - q},0 ${s},${half}" fill="none" stroke="${useColor}" stroke-width="0.75"/></pattern>`
-  } else { // cross
-    patternSvg = `<pattern id="${pid}" patternUnits="userSpaceOnUse" width="${s}" height="${s}"><line x1="${half}" y1="0" x2="${half}" y2="${s}" stroke="${useColor}" stroke-width="0.5"/><line x1="0" y1="${half}" x2="${s}" y2="${half}" stroke="${useColor}" stroke-width="0.5"/><circle cx="${half}" cy="${half}" r="1.5" fill="${useColor}"/></pattern>`
-  }
-
-  return `<svg class="${classes}"${style} xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none;opacity:${safeOpac}" aria-hidden="true"><defs>${patternSvg}</defs><rect width="100%" height="100%" fill="url(#${pid})"/></svg>`
-}

package/src/ui/display-heading.js

@@ -1,44 +0,0 @@
-/**
- * Pulse UI — Display Heading
- *
- * Large typographic heading for editorial moments. Controls line-break,
- * tracking, max-width in ch. Use for hero titles, chapter openings,
- * section leads.
- *
- * @param {object} opts
- * @param {string} opts.text - Heading text (HTML entities supported)
- * @param {number} opts.level - Heading level 1–6 (default 1)
- * @param {number} opts.maxWidth - Max width in ch units (default 20)
- * @param {boolean} opts.balance - Use text-wrap: balance (default true)
- * @param {string} opts.tracking - Letter-spacing: 'tight' | 'normal' | 'wide' (default 'tight')
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const TRACKING = {
-  tight:  '-0.02em',
-  normal: '0',
-  wide:   '0.05em',
-}
-
-export function displayHeading({
-  text       = '',
-  level      = 1,
-  maxWidth   = 20,
-  balance    = true,
-  tracking   = 'tight',
-  class: cls = '',
-} = {}) {
-  const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
-  const classes = ['ui-display-heading', cls].filter(Boolean).join(' ')
-  
-  const letterSpacing = TRACKING[tracking] || TRACKING.tight
-  const styles = [
-    `max-width:${maxWidth}ch`,
-    `letter-spacing:${letterSpacing}`,
-    balance && 'text-wrap:balance',
-  ].filter(Boolean).join(';')
-
-  return `<${tag} class="${e(classes)}" style="${styles}">${e(text)}</${tag}>`
-}