@invisibleloop/pulse 0.12.3 → 0.14.2

package/src/ui/card.js

@@ -11,20 +11,39 @@
  * @param {string}  opts.content - HTML string for the card body
  * @param {string}  opts.footer  - HTML string for the card footer (optional)
  * @param {boolean} opts.flush   - Remove internal padding (for full-bleed content)
+ * @param {'default'|'elevated'|'bordered'|'flat'|'glass'|'tinted'} opts.variant
+ *   Visual style:
+ *   - 'default'  — standard surface with subtle shadow (same as no variant)
+ *   - 'elevated' — stronger shadow, lifts above the page
+ *   - 'bordered' — no shadow, prominent border
+ *   - 'flat'     — no shadow, no border, background only
+ *   - 'glass'    — frosted-glass effect with backdrop blur
+ *   - 'tinted'   — accent-tinted background, no shadow
  * @param {string}  opts.class
  */
 
 import { escHtml as e } from '../html.js'
 
+const VARIANTS = new Set(['default', 'elevated', 'bordered', 'flat', 'glass', 'tinted'])
+
 export function card({
   title      = '',
   level      = 3,
   content    = '',
   footer     = '',
   flush      = false,
+  variant    = 'default',
   class: cls = '',
 } = {}) {
-  const classes = ['ui-card', flush ? 'ui-card--flush' : '', cls].filter(Boolean).join(' ')
+  if (!VARIANTS.has(variant)) variant = 'default'
+
+  const classes = [
+    'ui-card',
+    variant !== 'default' ? `ui-card--${variant}` : '',
+    flush ? 'ui-card--flush' : '',
+    cls,
+  ].filter(Boolean).join(' ')
+
   const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
 
   const titleHtml  = title  ? `<div class="ui-card-header"><${tag} class="ui-card-title">${e(title)}</${tag}></div>` : ''

package/src/ui/colophon.js

@@ -0,0 +1,29 @@
+/**
+ * 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

@@ -0,0 +1,41 @@
+/**
+ * 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/cta.js

@@ -21,17 +21,31 @@ export function cta({
   title      = '',
   level      = 2,
   subtitle   = '',
+  body,  // alias for subtitle
   actions    = '',
   align      = 'center',
   class: cls = '',
+  ...rest
 } = {}) {
+  // Accept 'body' as alias for 'subtitle'
+  const sub = subtitle || body || ''
+  
+  // Warn about unknown props on the server
+  if (typeof window === 'undefined') {
+    const knownProps = new Set(['eyebrow', 'title', 'level', 'subtitle', 'body', 'actions', 'align', 'class'])
+    const unknownProps = Object.keys(rest).filter(k => !knownProps.has(k))
+    if (unknownProps.length > 0) {
+      console.warn(`[Pulse cta] Unknown prop${unknownProps.length > 1 ? 's' : ''}: ${unknownProps.join(', ')}. Did you mean 'subtitle' instead of '${unknownProps[0]}'?`)
+    }
+  }
+
   const classes = ['ui-cta', align === 'left' && 'ui-cta--left', cls].filter(Boolean).join(' ')
   const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
 
   return `<div class="${e(classes)}">
-  ${eyebrow  ? `<p class="ui-cta-eyebrow">${e(eyebrow)}</p>` : ''}
-  ${title    ? `<${tag} class="ui-cta-title">${e(title)}</${tag}>` : ''}
-  ${subtitle ? `<p class="ui-cta-subtitle">${e(subtitle)}</p>` : ''}
-  ${actions  ? `<div class="ui-cta-actions">${actions}</div>` : ''}
+  ${eyebrow ? `<p class="ui-cta-eyebrow">${e(eyebrow)}</p>` : ''}
+  ${title   ? `<${tag} class="ui-cta-title">${e(title)}</${tag}>` : ''}
+  ${sub     ? `<p class="ui-cta-subtitle">${e(sub)}</p>` : ''}
+  ${actions ? `<div class="ui-cta-actions">${actions}</div>` : ''}
 </div>`
 }

package/src/ui/decorate.js

@@ -0,0 +1,55 @@
+/**
+ * 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

@@ -0,0 +1,44 @@
+/**
+ * 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}>`
+}

package/src/ui/drop-cap.js

@@ -0,0 +1,29 @@
+/**
+ * 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="float:left;font-size:${lines * 1.2}em;line-height:${lines * 0.8};margin-right:0.1em" aria-hidden="true">${e(letter)}</span>${e(content)}
+</p>`
+}

package/src/ui/editorial-hero.js

@@ -0,0 +1,63 @@
+/**
+ * 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

@@ -0,0 +1,36 @@
+/**
+ * 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/feature.js

@@ -4,6 +4,7 @@
  * Icon + title + description block. The standard "why us" grid card.
  *
  * @param {object} opts
+ * @param {string}  opts.image       - Raw HTML slot — rendered above the icon (e.g. `<img src="...">`)
  * @param {string}  opts.icon        - Raw HTML slot — SVG or emoji; displayed in an accent-tinted box
  * @param {string}  opts.title
  * @param {number}  opts.level       - Heading level 1–6 (default 3). Visual style is always ui-feature-title.
@@ -15,19 +16,35 @@
 import { escHtml as e } from '../html.js'
 
 export function feature({
+  image       = '',
   icon        = '',
   title       = '',
   level       = 3,
   description = '',
+  body,  // alias for description
   center      = false,
   class: cls  = '',
+  ...rest
 } = {}) {
+  // Accept 'body' as alias for 'description'
+  const desc = description || body || ''
+  
+  // Warn about unknown props on the server
+  if (typeof window === 'undefined') {
+    const knownProps = new Set(['image', 'icon', 'title', 'level', 'description', 'body', 'center', 'class'])
+    const unknownProps = Object.keys(rest).filter(k => !knownProps.has(k))
+    if (unknownProps.length > 0) {
+      console.warn(`[Pulse feature] Unknown prop${unknownProps.length > 1 ? 's' : ''}: ${unknownProps.join(', ')}. Did you mean 'description' instead of '${unknownProps[0]}'?`)
+    }
+  }
+
   const classes = ['ui-feature', center && 'ui-feature--center', cls].filter(Boolean).join(' ')
   const tag = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
 
   return `<div class="${e(classes)}">
-  ${icon        ? `<div class="ui-feature-icon" aria-hidden="true">${icon}</div>` : ''}
-  ${title       ? `<${tag} class="ui-feature-title">${e(title)}</${tag}>` : ''}
-  ${description ? `<p class="ui-feature-desc">${e(description)}</p>` : ''}
+  ${image ? `<div class="ui-feature-image">${image}</div>` : ''}
+  ${icon  ? `<div class="ui-feature-icon" aria-hidden="true">${icon}</div>` : ''}
+  ${title ? `<${tag} class="ui-feature-title">${e(title)}</${tag}>` : ''}
+  ${desc  ? `<p class="ui-feature-desc">${e(desc)}</p>` : ''}
 </div>`
 }

package/src/ui/footer.js

@@ -5,11 +5,27 @@
  * Handles accessibility (landmark role, aria-label on nav) and responsive
  * stacking automatically.
  *
+ * Two layouts:
+ *
+ * Simple (default):
+ *   logo + flat link list + legal — one-liner or small site footer.
+ *
+ * Rich (when `columns` is provided):
+ *   Optional subscribe form row, multi-column link grid, optional wordmark,
+ *   and legal row. Use for brand-heavy or e-commerce sites.
+ *
  * @param {object} opts
- * @param {string} opts.logo      - Raw HTML slot — SVG, img, or text
- * @param {string} opts.logoHref  - Logo link destination (default: '/')
- * @param {Array<{label: string, href: string}>} opts.links - Footer nav links
- * @param {string} opts.legal     - Copyright / legal text (e.g. '© 2026 Acme Ltd.')
+ * @param {string} opts.logo       - Raw HTML slot — SVG, img, or text
+ * @param {string} opts.logoHref   - Logo link destination (default: '/')
+ * @param {Array<{label: string, href: string}>} opts.links - Flat footer nav links (simple layout)
+ * @param {string} opts.legal      - Copyright / legal text
+ *
+ * Rich layout params:
+ * @param {Array<{title: string, links: Array<{label, href}>}>} opts.columns - Multi-column link sections
+ * @param {string} opts.subscribe  - Raw HTML slot — newsletter subscribe form
+ * @param {string} opts.wordmark   - Giant display text shown at the very bottom of the footer
+ * @param {string} opts.background - CSS background value — sets the footer background colour
+ * @param {string} opts.color      - Foreground/text colour — use when background needs contrast override
  * @param {string} opts.class
  */
 
@@ -20,19 +36,72 @@ export function footer({
   logoHref   = '/',
   links      = [],
   legal      = '',
+  columns    = [],
+  subscribe  = '',
+  wordmark   = '',
+  background = '',
+  color      = '',
   class: cls = '',
 } = {}) {
-  const classes = ['ui-footer', cls].filter(Boolean).join(' ')
+  const isRich = columns.length > 0 || subscribe || wordmark
 
-  const linksHtml = links.map(({ label = '', href = '' }) =>
-    `<a href="${e(href)}" class="ui-footer-link">${e(label)}</a>`
-  ).join('')
+  const styles = [
+    background && `background:${background.replace(/"/g, "'")}`,
+    color      && `color:${color.replace(/"/g, "'")}`,
+  ].filter(Boolean).join(';')
+  const styleAttr = styles ? ` style="${styles}"` : ''
+
+  const classes = ['ui-footer', isRich && 'ui-footer--rich', cls].filter(Boolean).join(' ')
+
+  // Defensive shape checks — common mistakes that produce silent empty output
+  if (typeof window === 'undefined') { // server only
+    if (columns.length && columns.some(c => c.items && !c.links)) {
+      console.warn('[Pulse footer] Column shape should be { title, links: [...] } — found { items } instead. Did you mean links?')
+    }
+    if (!columns.length && links.some(l => l.title || l.items || l.heading)) {
+      console.warn('[Pulse footer] Simple footer expects links: [{ label, href }] — found grouped shape ({ title/heading/items } keys). For multi-column layout, use columns: [{ title, links: [...] }] instead of links.')
+    }
+  }
 
-  return `<footer class="${e(classes)}">
+  // Simple layout
+  if (!isRich) {
+    const linksHtml = links.map(({ label = '', href = '' }) =>
+      `<a href="${e(href)}" class="ui-footer-link">${e(label)}</a>`
+    ).join('')
+
+    return `<footer class="${e(classes)}"${styleAttr}>
   <div class="ui-footer-inner">
     ${logo  ? `<a href="${e(logoHref)}" class="ui-footer-logo">${logo}</a>` : ''}
     ${links.length ? `<nav class="ui-footer-links" aria-label="Footer navigation">${linksHtml}</nav>` : ''}
     ${legal ? `<p class="ui-footer-legal">${e(legal)}</p>` : ''}
   </div>
+</footer>`
+  }
+
+  // Rich layout
+  const columnsHtml = columns.map(({ title = '', links: cols = [] }) => `
+    <div class="ui-footer-col">
+      ${title ? `<p class="ui-footer-col-title">${e(title)}</p>` : ''}
+      <ul class="ui-footer-col-links" role="list">
+        ${cols.map(({ label = '', href = '' }) => `<li><a href="${e(href)}">${e(label)}</a></li>`).join('')}
+      </ul>
+    </div>`).join('')
+
+  const legalLinks = links.map(({ label = '', href = '' }) =>
+    `<a href="${e(href)}">${e(label)}</a>`
+  ).join('')
+
+  return `<footer class="${e(classes)}"${styleAttr}>
+  ${logo || subscribe ? `<div class="ui-footer-top">
+    ${logo ? `<a href="${e(logoHref)}" class="ui-footer-logo">${logo}</a>` : ''}
+    ${subscribe ? `<div class="ui-footer-subscribe">${subscribe}</div>` : ''}
+  </div>` : ''}
+  ${columns.length ? `<div class="ui-footer-columns">${columnsHtml}
+  </div>` : ''}
+  ${wordmark ? `<div class="ui-footer-wordmark" data-wordmark="${e(wordmark)}" aria-hidden="true"></div>` : ''}
+  ${legal || links.length ? `<div class="ui-footer-legal-row">
+    ${legalLinks}
+    ${legal ? `<span>${e(legal)}</span>` : ''}
+  </div>` : ''}
 </footer>`
 }

package/src/ui/gallery.js

@@ -0,0 +1,56 @@
+/**
+ * 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 {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',
+  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" 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>`
+}