@invisibleloop/pulse 0.20.4 → 0.20.6

package/src/ui/drop-cap.js

@@ -1,29 +0,0 @@
-/**
- * Pulse UI — Drop Cap
- *
- * First-letter drop cap for editorial openings. Wraps the first
- * letter or word of a paragraph.
- *
- * @param {object} opts
- * @param {string} opts.letter - The drop cap letter or word
- * @param {string} opts.content - The rest of the paragraph text
- * @param {number} opts.lines - How many lines tall (default 3)
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function dropCap({
-  letter     = '',
-  content    = '',
-  lines      = 3,
-  class: cls = '',
-} = {}) {
-  if (!letter) return content ? `<p>${e(content)}</p>` : ''
-
-  const classes = ['ui-drop-cap', cls].filter(Boolean).join(' ')
-  
-  return `<p class="${e(classes)}">
-  <span class="ui-drop-cap-letter" style="font-size:${+(lines * 1.2).toFixed(2)}em" aria-hidden="true">${e(letter)}</span>${e(content)}
-</p>`
-}

package/src/ui/editorial-hero.js

@@ -1,63 +0,0 @@
-/**
- * Pulse UI — Editorial Hero
- *
- * Full-bleed hero with two side-by-side images and display text that
- * overlaps both columns simultaneously. The text uses mix-blend-mode: multiply
- * so it visually "lives inside" the photography — a signature technique in
- * fashion and luxury editorial design.
- *
- * The overlay text is decorative (aria-hidden) with a separate accessible
- * heading provided via the `heading` param.
- *
- * @param {object}         opts
- * @param {string}         opts.leftImage   - Raw HTML slot for the left image (<img>, uiImage, etc.)
- * @param {string}         opts.rightImage  - Raw HTML slot for the right image
- * @param {string|string[]} opts.lines      - Headline text — string or array of lines
- * @param {string}         opts.heading     - Accessible heading text (sr-only, replaces lines for AT)
- * @param {string}         opts.cta         - Raw HTML slot — optional CTA link at the bottom
- * @param {string}         opts.color       - Overlay text colour (default: var(--ui-color-accent))
- * @param {'multiply'|'screen'|'overlay'|'none'} opts.blend - blend-mode for overlay text (default: 'multiply')
- * @param {string}         opts.ratio       - Image aspect-ratio CSS string (default: '3/4')
- * @param {string}         opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const BLENDS = new Set(['multiply', 'screen', 'overlay', 'none'])
-
-export function editorialHero({
-  leftImage  = '',
-  rightImage = '',
-  lines      = [],
-  heading    = '',
-  cta        = '',
-  color      = '',
-  blend      = 'multiply',
-  ratio      = '3/4',
-  class: cls = '',
-} = {}) {
-  if (!BLENDS.has(blend)) blend = 'multiply'
-
-  const classes   = ['ui-editorial-hero', cls].filter(Boolean).join(' ')
-  const lineArray = Array.isArray(lines) ? lines : [lines]
-
-  const overlayStyle = [
-    color ? `color:${color.replace(/"/g, "'")}` : '',
-    blend !== 'none' ? `mix-blend-mode:${blend}` : '',
-  ].filter(Boolean).join(';')
-
-  const overlayAttr = overlayStyle ? ` style="${overlayStyle}"` : ''
-  const imageStyle  = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
-
-  const linesHtml = lineArray.map(l => `<span>${e(l)}</span>`).join('')
-
-  return `<section class="${e(classes)}">
-  ${heading ? `<h1 class="ui-editorial-hero-heading">${e(heading)}</h1>` : ''}
-  <div class="ui-editorial-hero-images"${imageStyle}>
-    <div class="ui-editorial-hero-img">${leftImage}</div>
-    <div class="ui-editorial-hero-img">${rightImage}</div>
-  </div>
-  ${linesHtml ? `<div class="ui-editorial-hero-overlay" aria-hidden="true"${overlayAttr}>${linesHtml}</div>` : ''}
-  ${cta ? `<div class="ui-editorial-hero-cta">${cta}</div>` : ''}
-</section>`
-}

package/src/ui/entry-list.js

@@ -1,36 +0,0 @@
-/**
- * Pulse UI — Entry List
- *
- * Tabular list of items with leading metadata (year, number, date),
- * title, and trailing description. For: backlists, release notes,
- * project archives, talk logs, changelogs.
- *
- * @param {object} opts
- * @param {Array<{meta: string, title: string, description: string}>} opts.items
- * @param {string} opts.metaLabel - Accessible label for metadata column (e.g. "Year", "Date")
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function entryList({
-  items      = [],
-  metaLabel  = 'Date',
-  class: cls = '',
-} = {}) {
-  if (!Array.isArray(items) || items.length === 0) return ''
-
-  const classes = ['ui-entry-list', cls].filter(Boolean).join(' ')
-
-  const rows = items.map(item => `
-    <div class="ui-entry-list-item">
-      <div class="ui-entry-list-meta" aria-label="${e(metaLabel)}">${e(item.meta || '')}</div>
-      <div class="ui-entry-list-content">
-        <h3 class="ui-entry-list-title">${e(item.title || '')}</h3>
-        ${item.description ? `<p class="ui-entry-list-description">${e(item.description)}</p>` : ''}
-      </div>
-    </div>
-  `).join('')
-
-  return `<div class="${e(classes)}">${rows}</div>`
-}

package/src/ui/gallery.js

@@ -1,60 +0,0 @@
-/**
- * Pulse UI — Gallery
- *
- * Responsive image grid for photos, illustrations, or any visual content.
- * Three layout modes: grid (equal cells), strip (single scrollable row), masonry (Pinterest-style).
- *
- * @param {object}  opts
- * @param {Array<{src:string,alt:string,caption?:string,href?:string}>} opts.images
- * @param {'grid'|'strip'|'masonry'} opts.layout - Grid layout (default: 'grid')
- * @param {1|2|3|4} opts.cols     - Columns in grid/masonry layout (default: 3)
- * @param {'sm'|'md'|'lg'} opts.gap - Gap between images (default: 'md')
- * @param {boolean} opts.rounded  - Rounded corners on images
- * @param {string}  opts.ratio    - CSS aspect-ratio for grid/strip cells e.g. '4/3', '1/1', '16/9'
- * @param {boolean} opts.lazy     - loading="lazy" on images (default: true). Set false for
- *                                  above-the-fold galleries or when full-page screenshots
- *                                  during development need every image rendered eagerly.
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const LAYOUTS = new Set(['grid', 'strip', 'masonry'])
-const GAPS    = new Set(['sm', 'md', 'lg'])
-
-export function gallery({
-  images  = [],
-  layout  = 'grid',
-  cols    = 3,
-  gap     = 'md',
-  rounded = false,
-  ratio   = '4/3',
-  lazy    = true,
-  class: cls = '',
-} = {}) {
-  if (!LAYOUTS.has(layout)) layout = 'grid'
-  if (!GAPS.has(gap))       gap    = 'md'
-  const safeC = Math.min(Math.max(Math.floor(cols), 1), 4)
-
-  const classes = [
-    'ui-gallery',
-    `ui-gallery--${layout}`,
-    `ui-gallery--cols-${safeC}`,
-    gap !== 'md' && `ui-gallery--gap-${gap}`,
-    rounded     && 'ui-gallery--rounded',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const items = images.map(img => {
-    const imgTag = `<img src="${e(img.src)}" alt="${e(img.alt || '')}" class="ui-gallery-img"${lazy ? ' loading="lazy"' : ''} decoding="async">`
-    const cap    = img.caption ? `<figcaption class="ui-gallery-caption">${e(img.caption)}</figcaption>` : ''
-    const inner  = img.href
-      ? `<a href="${e(img.href)}" class="ui-gallery-link">${imgTag}</a>`
-      : imgTag
-    const cropStyle = (layout !== 'masonry' && ratio) ? ` style="aspect-ratio:${e(ratio)}"` : ''
-    const crop = `<div class="ui-gallery-crop"${cropStyle}>${inner}</div>`
-    return `<figure class="ui-gallery-item">${crop}${cap}</figure>`
-  }).join('\n')
-
-  return `<div class="${e(classes)}">\n${items}\n</div>`
-}

package/src/ui/image-pair.js

@@ -1,72 +0,0 @@
-/**
- * Pulse UI — Image Pair
- *
- * Two images side by side — no text. A pure editorial layout used in fashion,
- * portfolio, and magazine contexts to present photography at full scale.
- * Both images share the same aspect ratio and fill equal columns.
- *
- * For image + text layouts, use the media() component instead.
- *
- * @param {object}  opts
- * @param {string}  opts.leftSrc       - Left image URL
- * @param {string}  opts.leftAlt       - Left image alt text
- * @param {string}  opts.rightSrc      - Right image URL
- * @param {string}  opts.rightAlt      - Right image alt text
- * @param {string}  opts.ratio         - CSS aspect-ratio for both images (default: '3/4')
- * @param {'none'|'sm'|'md'} opts.gap  - Gap between images (default: 'none')
- * @param {string}  opts.label         - Optional aria-label for the section
- * @param {string}  opts.leftLabel     - Link label below left image (e.g. 'Craftmanship')
- * @param {string}  opts.leftHref      - href for left link
- * @param {string}  opts.rightLabel    - Link label below right image (e.g. 'Store')
- * @param {string}  opts.rightHref     - href for right link
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const GAPS = new Set(['none', 'sm', 'md'])
-
-export function imagePair({
-  leftSrc    = '',
-  leftAlt    = '',
-  rightSrc   = '',
-  rightAlt   = '',
-  ratio      = '3/4',
-  gap        = 'none',
-  label      = '',
-  leftLabel  = '',
-  leftHref   = '#',
-  rightLabel = '',
-  rightHref  = '#',
-  class: cls = '',
-} = {}) {
-  if (!GAPS.has(gap)) gap = 'none'
-
-  const classes = [
-    'ui-image-pair',
-    gap !== 'none' && `ui-image-pair--gap-${gap}`,
-    (leftLabel || rightLabel) && 'ui-image-pair--captioned',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const labelAttr = label ? ` aria-label="${e(label)}"` : ''
-  const cropStyle = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
-
-  const leftCaption  = leftLabel  ? `<a href="${e(leftHref)}"  class="ui-image-pair-link">${e(leftLabel)} →</a>`  : ''
-  const rightCaption = rightLabel ? `<a href="${e(rightHref)}" class="ui-image-pair-link">${e(rightLabel)} →</a>` : ''
-
-  return `<div class="${e(classes)}"${labelAttr}>
-  <div class="ui-image-pair-col">
-    <div class="ui-image-pair-crop"${cropStyle}>
-      <img src="${e(leftSrc)}" alt="${e(leftAlt)}" loading="lazy" decoding="async">
-    </div>
-    ${leftCaption}
-  </div>
-  <div class="ui-image-pair-col">
-    <div class="ui-image-pair-crop"${cropStyle}>
-      <img src="${e(rightSrc)}" alt="${e(rightAlt)}" loading="lazy" decoding="async">
-    </div>
-    ${rightCaption}
-  </div>
-</div>`
-}

package/src/ui/list.js

@@ -1,36 +0,0 @@
-/**
- * Pulse UI — List
- *
- * Styled ordered or unordered list. Use this instead of raw <ul>/<ol> to get
- * consistent spacing, bullets, and colour tokens.
- *
- * Items are HTML strings — escape user data before passing them in.
- *
- * @param {object}   opts
- * @param {string[]} opts.items   - Array of HTML strings for each list item
- * @param {boolean}  [opts.ordered] - true for <ol>, false for <ul> (default: false)
- * @param {string}   [opts.gap]     - Item spacing: 'xs'|'sm'|'md' (default: 'sm')
- * @param {string}   [opts.class]   - Extra classes on the list element
- */
-
-export function list({
-  items      = [],
-  ordered    = false,
-  gap        = 'sm',
-  class: cls = '',
-} = {}) {
-  if (!items.length) return ''
-
-  const tag     = ordered ? 'ol' : 'ul'
-  const gapMap  = { xs: 'u-gap-1', sm: 'u-gap-2', md: 'u-gap-3' }
-  const classes = [
-    'ui-list',
-    ordered ? 'ui-list--ordered' : 'ui-list--unordered',
-    gapMap[gap] || 'u-gap-2',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const itemsHtml = items.map(item => `<li class="ui-list-item">${item}</li>`).join('')
-
-  return `<${tag} class="${classes}">${itemsHtml}</${tag}>`
-}

package/src/ui/marquee.js

@@ -1,48 +0,0 @@
-/**
- * Pulse UI — Marquee
- *
- * CSS-only infinite scrolling strip. Ideal for logo clouds, trust badges,
- * press mentions, or tag lists. No JavaScript — pure CSS animation.
- *
- * @param {object}  opts
- * @param {string[]} opts.items    - Array of raw HTML strings (logos, badges, text)
- * @param {number}  opts.speed     - Duration in seconds for one full loop (default: 30)
- * @param {'sm'|'md'|'lg'} opts.gap - Gap between items (default: 'lg')
- * @param {'left'|'right'} opts.direction - Scroll direction (default: 'left')
- * @param {boolean} opts.pause     - Pause animation on hover (default: true)
- * @param {boolean} opts.fade      - Fade edges with gradient mask (default: true)
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-const GAPS = new Set(['sm', 'md', 'lg'])
-
-export function marquee({
-  items     = [],
-  speed     = 30,
-  gap       = 'lg',
-  direction = 'left',
-  pause     = true,
-  fade      = true,
-  class: cls = '',
-} = {}) {
-  if (!GAPS.has(gap)) gap = 'lg'
-  const safeSpeed = Math.max(5, parseFloat(speed) || 30)
-  const dir       = direction === 'right' ? 'reverse' : 'normal'
-
-  const classes = [
-    'ui-marquee',
-    gap !== 'lg' && `ui-marquee--gap-${gap}`,
-    pause       && 'ui-marquee--pause',
-    fade        && 'ui-marquee--fade',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  // Items are duplicated so the loop is seamless
-  const itemsHtml = items.map(item => `<li class="ui-marquee-item">${item}</li>`).join('')
-
-  return `<div class="${e(classes)}" style="--marquee-speed:${safeSpeed}s;--marquee-dir:${dir}" aria-hidden="true">
-  <ul class="ui-marquee-track">${itemsHtml}${itemsHtml}</ul>
-</div>`
-}

package/src/ui/photo-card.js

@@ -1,44 +0,0 @@
-/**
- * Pulse UI — PhotoCard
- *
- * Polaroid-style photo card with optional caption and CSS tilt.
- * Ideal for "meet the team", testimonial portraits, or lifestyle photography.
- *
- * @param {object}  opts
- * @param {string}  opts.src      - Image source URL
- * @param {string}  opts.alt      - Alt text
- * @param {string}  opts.caption  - Caption text below the photo
- * @param {number}  opts.tilt     - CSS rotate degrees, e.g. 2 or -1.5. 0 = no tilt (default)
- * @param {boolean} opts.rounded  - Adds corner radius to the image (default: false = square crop)
- * @param {string}  opts.ratio    - CSS aspect-ratio for the image crop (default: '4/3')
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function photoCard({
-  src     = '',
-  alt     = '',
-  caption = '',
-  tilt    = 0,
-  rounded = false,
-  ratio   = '4/3',
-  class: cls = '',
-} = {}) {
-  const safeTilt = parseFloat(tilt) || 0
-  const classes  = [
-    'ui-photo-card',
-    rounded && 'ui-photo-card--rounded',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const tiltStyle = safeTilt ? ` style="--photo-tilt:${safeTilt}deg"` : ''
-  const cropStyle = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
-
-  return `<figure class="${e(classes)}"${tiltStyle}>
-  <div class="ui-photo-card-crop"${cropStyle}>
-    <img src="${e(src)}" alt="${e(alt)}" class="ui-photo-card-img" loading="lazy" decoding="async">
-  </div>
-  ${caption ? `<figcaption class="ui-photo-card-caption">${e(caption)}</figcaption>` : ''}
-</figure>`
-}

package/src/ui/pricing.js

@@ -1,56 +0,0 @@
-/**
- * Pulse UI — Pricing
- *
- * A single pricing plan card with feature list and CTA.
- * Compose multiple in a flex/grid container for a full pricing section.
- *
- * @param {object}   opts
- * @param {string}   opts.name        - Plan name (e.g. "Pro")
- * @param {number}   opts.level       - Heading level 1–6 for the plan name (default 3). Visual style is always ui-pricing-name.
- * @param {string}   opts.price       - Price string (e.g. "$9", "Free")
- * @param {string}   opts.period      - Billing period (e.g. "/month")
- * @param {string}   opts.description - One-line plan description
- * @param {string[]} opts.features    - Array of feature strings
- * @param {string}   opts.action      - Raw HTML slot — typically a button()
- * @param {boolean}  opts.highlighted - Accent border + elevated appearance
- * @param {string}   opts.badge       - Floating label above the card (e.g. "Most popular")
- * @param {string}   opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function pricing({
-  name        = '',
-  level       = 3,
-  price       = '',
-  period      = '',
-  description = '',
-  features    = [],
-  action      = '',
-  highlighted = false,
-  badge       = '',
-  class: cls  = '',
-} = {}) {
-  const classes = ['ui-pricing', highlighted && 'ui-pricing--highlighted', cls].filter(Boolean).join(' ')
-  const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
-
-  const featureList = features.length
-    ? `<ul class="ui-pricing-features">
-  ${features.map(f => `<li class="ui-pricing-feature"><span class="ui-pricing-check" aria-hidden="true">✓</span>${e(f)}</li>`).join('\n  ')}
-</ul>`
-    : ''
-
-  return `<div class="${e(classes)}">
-  ${badge ? `<p class="ui-pricing-badge">${e(badge)}</p>` : ''}
-  <div class="ui-pricing-header">
-    ${name        ? `<${tag} class="ui-pricing-name">${e(name)}</${tag}>` : ''}
-    ${description ? `<p class="ui-pricing-desc">${e(description)}</p>` : ''}
-  </div>
-  <div class="ui-pricing-price">
-    <span class="ui-pricing-amount">${e(price)}</span>
-    ${period ? `<span class="ui-pricing-period">${e(period)}</span>` : ''}
-  </div>
-  ${featureList}
-  ${action ? `<div class="ui-pricing-action">${action}</div>` : ''}
-</div>`
-}

package/src/ui/product-card.js

@@ -1,65 +0,0 @@
-/**
- * Pulse UI — Product Card
- *
- * Full-bleed editorial product card — the image IS the card. The product
- * name (and optional price) overlays at the bottom on hover. Designed for
- * fashion/e-commerce grids where photography is the primary communication.
- *
- * Unlike photoCard (polaroid frame + caption always visible), this card is
- * frameless: the image fills 100% of the card, and metadata is revealed on
- * hover via a gradient overlay.
- *
- * @param {object}  opts
- * @param {string}  opts.src          - Image source URL
- * @param {string}  opts.alt          - Alt text
- * @param {string}  opts.name         - Product name
- * @param {string}  opts.price        - Optional price string
- * @param {string}  opts.href         - Link destination (default: '#')
- * @param {string}  opts.badge        - Short badge text ("NEW", "SALE", "−20%")
- * @param {'left'|'right'} opts.badgeAlign - Badge corner (default: 'left')
- * @param {string}  opts.ratio        - CSS aspect-ratio (default: '4/5')
- * @param {'overlay'|'below'} opts.layout - 'overlay' (hover reveal) or 'below' (caption under image)
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function productCard({
-  src        = '',
-  alt        = '',
-  name       = '',
-  price      = '',
-  href       = '#',
-  badge      = '',
-  badgeAlign = 'left',
-  ratio      = '4/5',
-  layout     = 'overlay',
-  class: cls = '',
-} = {}) {
-  const classes = [
-    'ui-product-card',
-    badgeAlign === 'right' && 'ui-product-card--badge-right',
-    layout === 'below' && 'ui-product-card--below',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const cropStyle = ratio ? ` style="aspect-ratio:${e(ratio)}"` : ''
-
-  const namePrice = name ? (layout === 'below'
-    ? `<div class="ui-product-card-caption">
-    <p class="ui-product-card-name">${e(name)}</p>
-    ${price ? `<p class="ui-product-card-price">${e(price)}</p>` : ''}
-  </div>`
-    : `<div class="ui-product-card-overlay" aria-hidden="true">
-    <p class="ui-product-card-name">${e(name)}</p>
-    ${price ? `<p class="ui-product-card-price">${e(price)}</p>` : ''}
-  </div>`) : ''
-
-  return `<a href="${e(href)}" class="${e(classes)}">
-  <div class="ui-product-card-crop"${cropStyle}>
-    <img src="${e(src)}" alt="${e(alt)}" class="ui-product-card-img" loading="lazy" decoding="async">
-  </div>
-  ${badge ? `<span class="ui-product-card-badge">${e(badge)}</span>` : ''}
-  ${namePrice}
-</a>`
-}

package/src/ui/section-label.js

@@ -1,38 +0,0 @@
-/**
- * Pulse UI — Section Label
- *
- * Eyebrow + heading + horizontal rule. The editorial equivalent of feature().
- * For: chapter openings, section dividers, content blocks.
- *
- * @param {object} opts
- * @param {string} opts.eyebrow - Small label above heading
- * @param {string} opts.heading - Main heading text
- * @param {number} opts.level - Heading level 1–6 (default 2)
- * @param {boolean} opts.rule - Show horizontal rule after heading (default true)
- * @param {'left'|'center'} opts.align - Text alignment (default 'left')
- * @param {string} opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function sectionLabel({
-  eyebrow    = '',
-  heading    = '',
-  level      = 2,
-  rule       = true,
-  align      = 'left',
-  class: cls = '',
-} = {}) {
-  const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
-  const classes = [
-    'ui-section-label',
-    align === 'center' && 'ui-section-label--center',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  return `<div class="${e(classes)}">
-  ${eyebrow ? `<p class="ui-section-label-eyebrow">${e(eyebrow)}</p>` : ''}
-  ${heading ? `<${tag} class="ui-section-label-heading">${e(heading)}</${tag}>` : ''}
-  ${rule ? '<hr class="ui-section-label-rule" aria-hidden="true">' : ''}
-</div>`
-}

package/src/ui/service-card.js

@@ -1,47 +0,0 @@
-/**
- * Pulse UI — ServiceCard
- *
- * A bordered, left-aligned tile with icon, title, and description.
- * The most common pattern for trades/services grids — an unboxed, centred
- * feature() is the wrong tool for these; serviceCard() is built for it.
- *
- * Use inside a grid() or css grid for multi-column layouts.
- *
- * @param {object}  opts
- * @param {string}  opts.icon        - Raw HTML slot — SVG icon displayed in an accent-tinted box
- * @param {string}  opts.title
- * @param {number}  opts.level       - Heading level 1–6 (default 3)
- * @param {string}  opts.description
- * @param {string}  opts.href        - When set, wraps the card in an <a> making it fully clickable
- * @param {string}  opts.class
- */
-
-import { escHtml as e } from '../html.js'
-
-export function serviceCard({
-  icon        = '',
-  title       = '',
-  level       = 3,
-  description = '',
-  href        = '',
-  class: cls  = '',
-} = {}) {
-  const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
-  const linked = Boolean(href)
-  const classes = [
-    'ui-service-card',
-    linked && 'ui-service-card--linked',
-    cls,
-  ].filter(Boolean).join(' ')
-
-  const inner = `
-  ${icon        ? `<div class="ui-service-card-icon" aria-hidden="true">${icon}</div>` : ''}
-  ${title       ? `<${tag} class="ui-service-card-title">${e(title)}</${tag}>` : ''}
-  ${description ? `<p class="ui-service-card-desc">${e(description)}</p>` : ''}
-`
-
-  if (linked) {
-    return `<a href="${e(href)}" class="${e(classes)}">${inner}</a>`
-  }
-  return `<div class="${e(classes)}">${inner}</div>`
-}

package/src/ui/stat-grid.js

@@ -1,40 +0,0 @@
-/**
- * Pulse UI — StatGrid
- *
- * A grid of stat tiles with optional coloured panel background.
- * Use when you need multiple stat() tiles arranged together — e.g. a 2×2
- * "at a glance" panel inside a hero or section.
- *
- * Each item is passed directly to stat(). The grid handles layout.
- *
- * @param {object}   opts
- * @param {Array}    opts.stats      - Array of stat() option objects (label, value, change, trend, size, suffix)
- * @param {number}   opts.columns    - Number of grid columns (default: 2)
- * @param {string}   opts.background - CSS background value (e.g. 'var(--ui-surface-raised)')
- * @param {string}   opts.color      - Foreground/text colour override
- * @param {string}   opts.class
- */
-
-import { stat }       from './stat.js'
-import { escHtml as e } from '../html.js'
-
-export function statGrid({
-  stats      = [],
-  columns    = 2,
-  background = '',
-  color      = '',
-  class: cls = '',
-} = {}) {
-  const classes = ['ui-stat-grid', cls].filter(Boolean).join(' ')
-
-  const styles = [
-    `--stat-cols:${Number(columns) || 2}`,
-    background && `background:${background.replace(/"/g, "'")}`,
-    color      && `color:${color.replace(/"/g, "'")}`,
-  ].filter(Boolean).join(';')
-  const styleAttr = styles ? ` style="${styles}"` : ''
-
-  const tilesHtml = stats.map(s => stat(s)).join('')
-
-  return `<div class="${e(classes)}"${styleAttr}>${tilesHtml}</div>`
-}