@invisibleloop/pulse 0.1.21

package/src/ui/container.js

@@ -0,0 +1,24 @@
+/**
+ * Pulse UI — Container
+ *
+ * Max-width wrapper with horizontal padding. Every page section needs one.
+ *
+ * @param {object} opts
+ * @param {string} opts.content        - Raw HTML slot
+ * @param {'sm'|'md'|'lg'|'xl'} opts.size - Max-width preset (default: 'lg')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const SIZES = new Set(['sm', 'md', 'lg', 'xl'])
+
+export function container({
+  content    = '',
+  size       = 'lg',
+  class: cls = '',
+} = {}) {
+  if (!SIZES.has(size)) size = 'lg'
+  const classes = ['ui-container', `ui-container--${size}`, cls].filter(Boolean).join(' ')
+  return `<div class="${e(classes)}">${content}</div>`
+}

package/src/ui/cta.js

@@ -0,0 +1,37 @@
+/**
+ * Pulse UI — CTA (Call to Action)
+ *
+ * Centred block with eyebrow, large heading, body text, and an actions slot.
+ * Sits inside a section() + container() — does not add its own padding.
+ *
+ * @param {object} opts
+ * @param {string} opts.eyebrow  - Small label above the heading
+ * @param {string} opts.title    - Main heading
+ * @param {number} opts.level    - Heading level 1–6 (default 2). Visual style is always ui-cta-title.
+ * @param {string} opts.subtitle - Supporting paragraph
+ * @param {string} opts.actions  - Raw HTML slot — typically button() calls
+ * @param {'center'|'left'} opts.align - Text alignment (default: 'center')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function cta({
+  eyebrow    = '',
+  title      = '',
+  level      = 2,
+  subtitle   = '',
+  actions    = '',
+  align      = 'center',
+  class: cls = '',
+} = {}) {
+  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>` : ''}
+</div>`
+}

package/src/ui/divider.js

@@ -0,0 +1,29 @@
+/**
+ * Pulse UI — Divider
+ *
+ * Horizontal rule with an optional centred label.
+ * With a label, the line splits either side of the text.
+ *
+ * @param {object} opts
+ * @param {string} opts.label  - Optional centred text (e.g. "or", "continue with")
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function divider({
+  label      = '',
+  class: cls = '',
+} = {}) {
+  const classes = ['ui-divider', label && 'ui-divider--label', cls].filter(Boolean).join(' ')
+
+  if (label) {
+    return `<div class="${e(classes)}" role="separator" aria-label="${e(label)}">
+  <span class="ui-divider-line" aria-hidden="true"></span>
+  <span class="ui-divider-text">${e(label)}</span>
+  <span class="ui-divider-line" aria-hidden="true"></span>
+</div>`
+  }
+
+  return `<hr class="${e(classes)}">`
+}

package/src/ui/empty.js

@@ -0,0 +1,33 @@
+/**
+ * Pulse UI — Empty state
+ *
+ * Shown when a list or section has no content yet.
+ *
+ * @param {object} opts
+ * @param {string} opts.title       - Primary message
+ * @param {string} opts.description - Supporting text (optional)
+ * @param {object} opts.action      - { label, href, variant } — renders a button (optional)
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { button }        from './button.js'
+
+export function empty({
+  title       = 'Nothing here yet',
+  description = '',
+  action      = null,
+  class: cls  = '',
+} = {}) {
+  const classes = ['ui-empty', cls].filter(Boolean).join(' ')
+
+  const actionHtml = action
+    ? button({ label: action.label, href: action.href, variant: action.variant || 'secondary' })
+    : ''
+
+  return `<div class="${e(classes)}">
+  <p class="ui-empty-title">${e(title)}</p>
+  ${description ? `<p class="ui-empty-desc">${e(description)}</p>` : ''}
+  ${actionHtml}
+</div>`
+}

package/src/ui/feature.js

@@ -0,0 +1,33 @@
+/**
+ * Pulse UI — Feature
+ *
+ * Icon + title + description block. The standard "why us" grid card.
+ *
+ * @param {object} opts
+ * @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.
+ * @param {string}  opts.description
+ * @param {boolean} opts.center      - Centre-align icon, title, and description
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function feature({
+  icon        = '',
+  title       = '',
+  level       = 3,
+  description = '',
+  center      = false,
+  class: cls  = '',
+} = {}) {
+  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>` : ''}
+</div>`
+}

package/src/ui/fieldset.js

@@ -0,0 +1,37 @@
+/**
+ * Pulse UI — Fieldset
+ *
+ * Semantic grouping of related form fields. Renders a <fieldset> with an
+ * accessible <legend>, styled to match the design system. Use inside a
+ * card() or directly inside a <form>.
+ *
+ * @param {object} opts
+ * @param {string} opts.legend   - Group label (renders as <legend>)
+ * @param {string} opts.content  - Raw HTML slot — input(), select(), grid(), etc.
+ * @param {'xs'|'sm'|'md'|'lg'} opts.gap - Gap between fields (default: 'md')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const GAPS = new Set(['xs', 'sm', 'md', 'lg'])
+
+export function fieldset({
+  legend     = '',
+  content    = '',
+  gap        = 'md',
+  class: cls = '',
+} = {}) {
+  if (!GAPS.has(gap)) gap = 'md'
+
+  const classes = [
+    'ui-fieldset',
+    gap !== 'md' && `ui-fieldset--gap-${gap}`,
+    cls,
+  ].filter(Boolean).join(' ')
+
+  return `<fieldset class="${e(classes)}">
+  ${legend ? `<legend class="ui-fieldset-legend">${e(legend)}</legend>` : ''}
+  <div class="ui-fieldset-body">${content}</div>
+</fieldset>`
+}

package/src/ui/fileupload.js

@@ -0,0 +1,89 @@
+/**
+ * Pulse UI — File Upload
+ *
+ * Drag-and-drop file upload zone with a hidden <input type="file">.
+ * Clicking the zone opens the file picker. Dragging files over the zone
+ * highlights it; dropping triggers the native change event so Pulse can
+ * bind a mutation or action via data-event / data-action.
+ *
+ * The component is fully CSS-driven — no pulse-ui.js required.
+ * The drag highlight is handled by a small inline script on the zone element.
+ *
+ * Submitted in FormData under `name` — works inside <form data-action="...">.
+ *
+ * @param {object}   opts
+ * @param {string}   opts.name        - Field name (submitted in FormData)
+ * @param {string}   opts.label       - Visible label text
+ * @param {string}   opts.hint        - Helper text (e.g. 'PNG, JPG up to 5 MB')
+ * @param {string}   opts.error       - Validation error message
+ * @param {string}   opts.accept      - Accepted MIME types or extensions, e.g. 'image/*'
+ * @param {boolean}  opts.multiple    - Allow multiple files
+ * @param {boolean}  opts.required
+ * @param {boolean}  opts.disabled
+ * @param {string}   opts.id          - Override generated id
+ * @param {string}   opts.event       - data-event binding on the <input>, e.g. 'change:fileSelected'
+ * @param {string}   opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+import { iconUpload } from './icons.js'
+
+export function fileUpload({
+  name       = '',
+  label      = '',
+  hint       = '',
+  error      = '',
+  accept     = '',
+  multiple   = false,
+  required   = false,
+  disabled   = false,
+  id         = '',
+  event      = '',
+  class: cls = '',
+} = {}) {
+  const fieldId   = e(id || `field-${name}`)
+  const errorId   = `${fieldId}-error`
+  const hintId    = `${fieldId}-hint`
+  const described = [error ? errorId : '', hint ? hintId : ''].filter(Boolean).join(' ')
+
+  const wrapClasses = ['ui-field', error ? 'ui-field--error' : '', cls].filter(Boolean).join(' ')
+  const zoneClasses = ['ui-upload', disabled ? 'ui-upload--disabled' : '', error ? 'ui-upload--error' : ''].filter(Boolean).join(' ')
+
+  const labelHtml = label
+    ? `<label for="${fieldId}" class="ui-label">${e(label)}${required ? ' <span class="ui-required" aria-hidden="true">*</span>' : ''}</label>`
+    : ''
+
+  const hintHtml  = hint  ? `<p id="${hintId}"  class="ui-hint">${e(hint)}</p>`                  : ''
+  const errorHtml = error ? `<p id="${errorId}" class="ui-error" role="alert">${e(error)}</p>`   : ''
+
+  const icon = iconUpload({ size: 24, class: 'ui-upload-icon' })
+
+  // All drag/click/keyboard behaviour is handled by pulse-ui.js via event delegation.
+  // No inline handlers needed (and they'd be blocked by CSP anyway).
+
+  return `<div class="${e(wrapClasses)}">
+  ${labelHtml}
+  <div class="${e(zoneClasses)}" role="button" tabindex="${disabled ? '-1' : '0'}" aria-label="Upload file"
+  >
+    <div class="ui-upload-body">
+      ${icon}
+      <span class="ui-upload-text">Drag &amp; drop or <span class="ui-upload-browse">browse</span></span>
+    </div>
+    <input
+      type="file"
+      id="${fieldId}"
+      name="${e(name)}"
+      class="ui-upload-input"
+      ${accept    ? `accept="${e(accept)}"`             : ''}
+      ${multiple  ? 'multiple'                          : ''}
+      ${required  ? 'required aria-required="true"'    : ''}
+      ${disabled  ? 'disabled'                         : ''}
+      ${event     ? `data-event="${e(event)}"`          : ''}
+      ${described ? `aria-describedby="${described}"`  : ''}
+      ${error     ? 'aria-invalid="true"'              : ''}
+    >
+  </div>
+  ${hintHtml}
+  ${errorHtml}
+</div>`
+}

package/src/ui/footer.js

@@ -0,0 +1,38 @@
+/**
+ * Pulse UI — Footer
+ *
+ * Site footer with logo slot, navigation links, and optional legal text.
+ * Handles accessibility (landmark role, aria-label on nav) and responsive
+ * stacking automatically.
+ *
+ * @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.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function footer({
+  logo       = '',
+  logoHref   = '/',
+  links      = [],
+  legal      = '',
+  class: cls = '',
+} = {}) {
+  const classes = ['ui-footer', cls].filter(Boolean).join(' ')
+
+  const linksHtml = links.map(({ label = '', href = '' }) =>
+    `<a href="${e(href)}" class="ui-footer-link">${e(label)}</a>`
+  ).join('')
+
+  return `<footer class="${e(classes)}">
+  <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>`
+}

package/src/ui/grid.js

@@ -0,0 +1,36 @@
+/**
+ * Pulse UI — Grid
+ *
+ * Responsive CSS grid. Direct children become grid items.
+ * Collapses to a single column on mobile by default.
+ *
+ * @param {object} opts
+ * @param {string} opts.content    - Raw HTML slot — direct children are grid items
+ * @param {1|2|3|4} opts.cols      - Number of columns (default: 3)
+ * @param {'sm'|'md'|'lg'} opts.gap - Gap between items (default: 'md')
+ * @param {string} opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+const VALID_COLS = new Set([1, 2, 3, 4])
+const GAPS       = new Set(['sm', 'md', 'lg'])
+
+export function grid({
+  content    = '',
+  cols       = 3,
+  gap        = 'md',
+  class: cls = '',
+} = {}) {
+  if (!VALID_COLS.has(cols)) cols = 3
+  if (!GAPS.has(gap))        gap  = 'md'
+
+  const classes = [
+    'ui-grid',
+    `ui-grid--cols-${cols}`,
+    gap !== 'md' && `ui-grid--gap-${gap}`,
+    cls,
+  ].filter(Boolean).join(' ')
+
+  return `<div class="${e(classes)}">${content}</div>`
+}

package/src/ui/heading.js

@@ -0,0 +1,45 @@
+/**
+ * Pulse UI — Heading
+ *
+ * Styled heading with the correct semantic tag. Use this instead of raw <h1>–<h6>
+ * to get consistent typography tokens without needing to remember utility classes.
+ *
+ * Does NOT add margin — use u-mt-* / u-mb-* utility classes for spacing.
+ *
+ * @param {object} opts
+ * @param {number}  opts.level    - 1–6, controls the HTML tag
+ * @param {string}  opts.text     - Heading text (escaped)
+ * @param {string}  [opts.size]   - Override visual size: 'xs'|'sm'|'base'|'lg'|'xl'|'2xl'|'3xl'|'4xl'
+ *                                  Defaults to the level's natural size.
+ * @param {string}  [opts.color]   - 'default'|'muted'|'accent' (default: 'default')
+ * @param {boolean} [opts.balance] - Add text-wrap: balance to prevent orphaned words on the last line
+ * @param {string}  [opts.class]   - Extra classes on the element
+ */
+
+import { escHtml as e } from '../html.js'
+
+const LEVEL_SIZE = { 1: '4xl', 2: '3xl', 3: '2xl', 4: 'xl', 5: 'base', 6: 'sm' }
+
+export function heading({
+  level      = 2,
+  text       = '',
+  size,
+  color      = 'default',
+  balance    = false,
+  class: cls = '',
+} = {}) {
+  const tag      = `h${Math.min(Math.max(Math.floor(level), 1), 6)}`
+  const sizeKey  = size || LEVEL_SIZE[level] || 'base'
+  const weight   = level <= 3 ? 'bold' : 'semibold'
+  const colorCls = color !== 'default' ? ` u-text-${color}` : ''
+  const classes  = [
+    `u-text-${sizeKey}`,
+    `u-font-${weight}`,
+    'u-leading-tight',
+    colorCls,
+    balance ? 'u-text-balance' : '',
+    cls,
+  ].filter(Boolean).join(' ')
+
+  return `<${tag} class="${classes}">${e(text)}</${tag}>`
+}

package/src/ui/hero.js

@@ -0,0 +1,37 @@
+/**
+ * Pulse UI — Hero
+ *
+ * Full-width hero section with eyebrow, headline, subheadline, and action slot.
+ *
+ * @param {object}  opts
+ * @param {string}  opts.eyebrow   - Small label above the title (e.g. "Now available")
+ * @param {string}  opts.title     - Main headline
+ * @param {string}  opts.subtitle  - Supporting text beneath the headline
+ * @param {string}  opts.actions   - Raw HTML slot — typically button() or appBadge() calls
+ * @param {'center'|'left'} opts.align - Text alignment (default: 'center')
+ * @param {'md'|'sm'} opts.size   - Vertical padding size: 'md' (default, 5rem) or 'sm' (2.5rem)
+ * @param {string}  opts.class
+ */
+
+import { escHtml as e } from '../html.js'
+
+export function hero({
+  eyebrow    = '',
+  title      = '',
+  subtitle   = '',
+  actions    = '',
+  align      = 'center',
+  size       = 'md',
+  class: cls = '',
+} = {}) {
+  const classes = ['ui-hero', align === 'left' && 'ui-hero--left', size === 'sm' && 'ui-hero--sm', cls].filter(Boolean).join(' ')
+
+  return `<section class="${e(classes)}">
+  <div class="ui-hero-inner">
+    ${eyebrow  ? `<p class="ui-hero-eyebrow">${e(eyebrow)}</p>` : ''}
+    ${title    ? `<h1 class="ui-hero-title">${e(title)}</h1>` : ''}
+    ${subtitle ? `<p class="ui-hero-subtitle">${e(subtitle)}</p>` : ''}
+    ${actions  ? `<div class="ui-hero-actions">${actions}</div>` : ''}
+  </div>
+</section>`
+}

package/src/ui/icons.js

@@ -0,0 +1,161 @@
+/**
+ * Pulse UI — Icon set
+ *
+ * ~55 curated icons. All are pure functions returning an SVG string.
+ * Style: 24×24 viewBox, stroke="currentColor", 2px stroke-width (Lucide-compatible).
+ *
+ * Usage:
+ *   import { iconCheck, iconArrowRight } from '@invisibleloop/pulse/ui'
+ *   feature({ icon: iconZap() })
+ *   button({ icon: iconArrowRight({ size: 14 }) })
+ *   iconCheck({ size: 20, bg: 'circle', bgColor: 'success' })
+ *   iconZap({ size: 20, bg: 'square', bgColor: 'accent' })
+ *
+ * @param {object} opts
+ * @param {number} opts.size    - Width and height in px (default: 16)
+ * @param {string} opts.class   - Extra CSS classes (on wrapper when bg is set, else on SVG)
+ * @param {'circle'|'square'} opts.bg       - Wrap in a tinted background shape
+ * @param {'accent'|'success'|'warning'|'error'|'muted'} opts.bgColor - Background colour (default: 'accent')
+ */
+
+const BG_SHAPES = new Set(['circle', 'square'])
+const BG_COLORS = new Set(['accent', 'success', 'warning', 'error', 'muted'])
+
+// ─── Internal helpers ─────────────────────────────────────────────────────────
+
+function wrap(svg, { bg, bgColor, cls }) {
+  if (!bg || !BG_SHAPES.has(bg)) return cls ? svg.replace('<svg ', `<svg class="${cls}" `) : svg
+  const bgCol = BG_COLORS.has(bgColor) ? bgColor : 'accent'
+  const wrapCls = ['ui-icon-wrap', `ui-icon-wrap--${bg}`, `ui-icon-wrap--${bgCol}`, cls].filter(Boolean).join(' ')
+  return `<span class="${wrapCls}">${svg}</span>`
+}
+
+function s(paths, o) {
+  const svg = `<svg width="${o.size}" height="${o.size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`
+  return wrap(svg, o)
+}
+
+function f(paths, o) {
+  const svg = `<svg width="${o.size}" height="${o.size}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">${paths}</svg>`
+  return wrap(svg, o)
+}
+
+function p(paths, o) {
+  const svg = `<svg width="${o.size}" height="${o.size}" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">${paths}</svg>`
+  return wrap(svg, o)
+}
+
+function opts(o = {}) {
+  return { size: o.size ?? 16, cls: o.class ?? '', bg: o.bg ?? '', bgColor: o.bgColor ?? 'accent' }
+}
+
+// ─── Navigation & Direction ───────────────────────────────────────────────────
+
+export const iconArrowLeft      = (o) => s('<path d="M19 12H5M12 19l-7-7 7-7"/>', opts(o))
+export const iconArrowRight     = (o) => s('<path d="M5 12h14M12 5l7 7-7 7"/>', opts(o))
+export const iconArrowUp        = (o) => s('<path d="M12 19V5M5 12l7-7 7 7"/>', opts(o))
+export const iconArrowDown      = (o) => s('<path d="M12 5v14M19 12l-7 7-7-7"/>', opts(o))
+export const iconChevronLeft    = (o) => s('<polyline points="15 18 9 12 15 6"/>', opts(o))
+export const iconChevronRight   = (o) => s('<polyline points="9 18 15 12 9 6"/>', opts(o))
+export const iconChevronUp      = (o) => s('<polyline points="18 15 12 9 6 15"/>', opts(o))
+export const iconChevronDown    = (o) => s('<polyline points="6 9 12 15 18 9"/>', opts(o))
+export const iconExternalLink   = (o) => s('<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>', opts(o))
+export const iconMenu           = (o) => s('<line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>', opts(o))
+export const iconX              = (o) => s('<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>', opts(o))
+export const iconMoreHorizontal = (o) => s('<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>', opts(o))
+export const iconMoreVertical   = (o) => s('<circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/>', opts(o))
+
+// ─── Status ───────────────────────────────────────────────────────────────────
+
+export const iconCheck          = (o) => s('<polyline points="20 6 9 17 4 12"/>', opts(o))
+export const iconCheckCircle    = (o) => s('<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>', opts(o))
+export const iconXCircle        = (o) => s('<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>', opts(o))
+export const iconAlertCircle    = (o) => s('<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"/>', opts(o))
+export const iconAlertTriangle  = (o) => s('<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>', opts(o))
+export const iconInfo           = (o) => s('<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>', opts(o))
+
+// ─── Actions ─────────────────────────────────────────────────────────────────
+
+export const iconPlus           = (o) => s('<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>', opts(o))
+export const iconMinus          = (o) => s('<line x1="5" y1="12" x2="19" y2="12"/>', opts(o))
+export const iconEdit           = (o) => s('<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>', opts(o))
+export const iconTrash          = (o) => s('<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/>', opts(o))
+export const iconCopy           = (o) => s('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>', opts(o))
+export const iconSearch         = (o) => s('<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>', opts(o))
+export const iconFilter         = (o) => s('<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>', opts(o))
+export const iconDownload       = (o) => s('<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>', opts(o))
+export const iconUpload         = (o) => s('<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>', opts(o))
+export const iconRefresh        = (o) => s('<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>', opts(o))
+export const iconSend           = (o) => s('<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>', opts(o))
+
+// ─── UI Controls ─────────────────────────────────────────────────────────────
+
+export const iconEye            = (o) => s('<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>', opts(o))
+export const iconEyeOff         = (o) => s('<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>', opts(o))
+export const iconLock           = (o) => s('<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/>', opts(o))
+export const iconUnlock         = (o) => s('<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 019.9-1"/>', opts(o))
+export const iconSettings       = (o) => s('<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>', opts(o))
+export const iconBell           = (o) => s('<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/>', opts(o))
+
+// ─── People & Communication ───────────────────────────────────────────────────
+
+export const iconUser           = (o) => s('<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>', opts(o))
+export const iconUsers          = (o) => s('<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>', opts(o))
+export const iconMail           = (o) => s('<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22 6 12 13 2 6"/>', opts(o))
+export const iconMessageSquare  = (o) => s('<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>', opts(o))
+
+// ─── Navigation & Pages ───────────────────────────────────────────────────────
+
+export const iconHome           = (o) => s('<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>', opts(o))
+export const iconLogOut         = (o) => s('<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>', opts(o))
+export const iconLogIn          = (o) => s('<path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/>', opts(o))
+
+// ─── Content & Files ─────────────────────────────────────────────────────────
+
+export const iconFile           = (o) => s('<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/><polyline points="13 2 13 9 20 9"/>', opts(o))
+export const iconImage          = (o) => s('<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>', opts(o))
+export const iconLink           = (o) => s('<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>', opts(o))
+export const iconCode           = (o) => s('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>', opts(o))
+export const iconCalendar       = (o) => s('<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>', opts(o))
+export const iconClock          = (o) => s('<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>', opts(o))
+export const iconBookmark       = (o) => s('<path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/>', opts(o))
+export const iconTag            = (o) => s('<path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>', opts(o))
+
+// ─── Media & Rating ──────────────────────────────────────────────────────────
+
+export const iconPlay           = (o) => f('<polygon points="5 3 19 12 5 21 5 3"/>', opts(o))
+export const iconPause          = (o) => s('<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>', opts(o))
+export const iconVolume         = (o) => s('<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"/>', opts(o))
+export const iconStar           = (o) => f('<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"/>', opts(o))
+export const iconHeart          = (o) => s('<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>', opts(o))
+
+// ─── Devices ─────────────────────────────────────────────────────────────────
+
+export const iconPhone          = (o) => s('<rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>', opts(o))
+export const iconGamepad        = (o) => s('<line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 00-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 003 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 019.828 16h4.344a2 2 0 011.414.586L17 18c.5.5 1 1 2 1a3 3 0 003-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0017.32 5z"/>', opts(o))
+
+// ─── Hand Pointers ────────────────────────────────────────────────────────────
+
+// Phosphor hand-pointing (MIT) — rotated for each direction
+const _HP = 'M196,88a27.86,27.86,0,0,0-13.35,3.39A28,28,0,0,0,144,74.7V44a28,28,0,0,0-56,0v80l-3.82-6.13A28,28,0,0,0,35.73,146l4.67,8.23C74.81,214.89,89.05,240,136,240a88.1,88.1,0,0,0,88-88V116A28,28,0,0,0,196,88Zm12,64a72.08,72.08,0,0,1-72,72c-37.63,0-47.84-18-81.68-77.68l-4.69-8.27,0-.05A12,12,0,0,1,54,121.61a11.88,11.88,0,0,1,6-1.6,12,12,0,0,1,10.41,6,1.76,1.76,0,0,0,.14.23l18.67,30A8,8,0,0,0,104,152V44a12,12,0,0,1,24,0v68a8,8,0,0,0,16,0V100a12,12,0,0,1,24,0v20a8,8,0,0,0,16,0v-4a12,12,0,0,1,24,0Z'
+export const iconHandPointUp    = (o) => p(`<g transform="matrix(-1 0 0 1 256 0)"><path d="${_HP}"/></g>`, opts(o))
+export const iconHandPointDown  = (o) => p(`<g transform="rotate(180,128,128)"><path d="${_HP}"/></g>`, opts(o))
+export const iconHandPointLeft  = (o) => p(`<g transform="matrix(1 0 0 -1 0 256) rotate(270,128,128)"><path d="${_HP}"/></g>`, opts(o))
+export const iconHandPointRight = (o) => p(`<g transform="rotate(90,128,128)"><path d="${_HP}"/></g>`, opts(o))
+
+// ─── Theme ────────────────────────────────────────────────────────────────────
+
+export const iconSun            = (o) => s('<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>', opts(o))
+export const iconMoon           = (o) => s('<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>', opts(o))
+
+// ─── Misc ─────────────────────────────────────────────────────────────────────
+
+export const iconGlobe          = (o) => s('<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>', opts(o))
+export const iconShield         = (o) => s('<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>', opts(o))
+export const iconZap            = (o) => s('<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>', opts(o))
+export const iconTrendingUp     = (o) => s('<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>', opts(o))
+export const iconTrendingDown   = (o) => s('<polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/>', opts(o))
+export const iconLoader         = (o) => s('<line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>', opts(o))
+export const iconGrid           = (o) => s('<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>', opts(o))
+export const iconBug            = (o) => s('<rect x="8" y="6" width="8" height="14" rx="4"/><path d="m19 7-3 2"/><path d="m5 7 3 2"/><path d="m19 19-3-2"/><path d="m5 19 3-2"/><path d="M20 13h-4"/><path d="M4 13h4"/><path d="m10 4 1 2"/><path d="m14 4-1 2"/>', opts(o))
+export const iconMapPin         = (o) => s('<path d="M20 10c0 6-8 13-8 13s-8-7-8-13a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>', opts(o))