@vobs/ui 0.3.0 → 1.1.0

package/src/file-tree.ts

@@ -0,0 +1,214 @@
+import { state } from '@vobs/reactivity'
+import {
+  addEventListener,
+  createElement,
+  createFragment,
+  createText,
+  insertBefore,
+  insertDynamic,
+  setAttribute,
+  setProperty,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindUserStyle,
+  hasProp,
+  mountSlot,
+  readProp,
+  setOptionalAttribute
+} from './utils'
+import type { VuiChildren, VuiCommonProps } from './types'
+
+export type FileTreeItemKind = 'file' | 'folder'
+
+export interface FileTreeItem {
+  readonly id: string
+  readonly label: string
+  readonly kind?: FileTreeItemKind
+  readonly icon?: VuiChildren
+  readonly chevron?: VuiChildren
+  readonly children?: readonly FileTreeItem[]
+  readonly expanded?: boolean
+  readonly active?: boolean
+  readonly disabled?: boolean
+}
+
+export interface FileTreeProps extends VuiCommonProps {
+  readonly items?: readonly FileTreeItem[]
+  readonly value?: string
+  readonly defaultValue?: string
+  readonly expanded?: readonly string[]
+  readonly defaultExpanded?: readonly string[]
+  readonly onSelect?: (id: string, event: MouseEvent) => void
+  readonly onToggle?: (id: string, expanded: boolean, event: MouseEvent) => void
+}
+
+interface VisibleFileTreeItem {
+  readonly item: FileTreeItem
+  readonly depth: number
+  readonly expanded: boolean
+}
+
+export function FileTree(props: FileTreeProps = {}): VobsNode {
+  const items = readProp<readonly FileTreeItem[]>(props, 'items', [])
+  const internalExpanded = state<readonly string[]>(initialExpanded(props, items))
+  const root = createElement('div')
+  bindClassList(root, props, () => ['vui-filetree'])
+  bindCommonAttributes(root, props, [
+    'items',
+    'value',
+    'defaultValue',
+    'expanded',
+    'defaultExpanded',
+    'onSelect',
+    'onToggle'
+  ])
+  bindUserStyle(root, props)
+  if (!hasProp(props, 'role')) setAttribute(root, 'role', 'tree')
+  if (!hasProp(props, 'aria-label')) setAttribute(root, 'aria-label', 'Files')
+  insertDynamic(root, null, () => createTreeRows(props, internalExpanded))
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function createTreeRows(
+  props: FileTreeProps,
+  internalExpanded: { value: readonly string[] }
+): VobsNode {
+  const items = readProp<readonly FileTreeItem[]>(props, 'items', [])
+  const expanded = new Set(readProp<readonly string[] | undefined>(props, 'expanded', undefined) ?? internalExpanded.value)
+  const visible = flattenVisible(items, expanded)
+  const selected = activeId(props, items)
+  return createFragment((parent, anchor) => {
+    for (const entry of visible) {
+      insertBefore(parent, createTreeRow(entry, props, internalExpanded, selected, expanded), anchor)
+    }
+  })
+}
+
+function createTreeRow(
+  entry: VisibleFileTreeItem,
+  props: FileTreeProps,
+  internalExpanded: { value: readonly string[] },
+  selected: string | undefined,
+  expanded: ReadonlySet<string>
+): VobsNode {
+  const { item } = entry
+  const isFolder = item.kind === 'folder'
+  const hasChildren = isFolder && Boolean(item.children?.length)
+  const active = item.id === selected
+  const row = createElement('div')
+  setAttribute(row, 'class', `vui-filetree__row${active ? ' is-active' : ''}`)
+  setAttribute(row, 'role', 'treeitem')
+  setAttribute(row, 'data-depth', String(entry.depth))
+  setAttribute(row, 'data-file-id', item.id)
+  setProperty(row, 'tabIndex', item.disabled === true ? -1 : 0)
+  if (active) setAttribute(row, 'aria-selected', 'true')
+  if (isFolder) setAttribute(row, 'aria-expanded', entry.expanded ? 'true' : 'false')
+  if (item.disabled === true) setAttribute(row, 'aria-disabled', 'true')
+
+  const chevron = createElement('span')
+  setAttribute(chevron, 'class', `vui-filetree__chevron${hasChildren ? '' : ' vui-filetree__chevron--leaf'}`)
+  if (hasChildren) {
+    if (item.chevron !== undefined) mountSlot(chevron, item, 'chevron')
+    else insertBefore(chevron, createText(entry.expanded ? 'v' : '>'), null)
+  }
+  insertBefore(row, chevron, null)
+
+  if (item.icon !== undefined) {
+    const icon = createElement('span')
+    setAttribute(icon, `class`, `vui-filetree__icon ${fileIconClass(item)}`.trim())
+    mountSlot(icon, item, 'icon')
+    insertBefore(row, icon, null)
+  }
+
+  const label = createElement('span')
+  setAttribute(label, 'class', 'vui-filetree__label')
+  setOptionalAttribute(label, 'title', item.label)
+  insertBefore(label, createText(item.label), null)
+  insertBefore(row, label, null)
+
+  addEventListener(row, 'click', event => {
+    if (item.disabled === true) return
+    if (isFolder && hasChildren) {
+      const nextExpanded = !expanded.has(item.id)
+      if (readProp<readonly string[] | undefined>(props, 'expanded', undefined) === undefined) {
+        const next = new Set(internalExpanded.value)
+        if (nextExpanded) next.add(item.id)
+        else next.delete(item.id)
+        internalExpanded.value = [...next]
+      }
+      const onToggle = readProp<unknown>(props, 'onToggle', undefined)
+      if (typeof onToggle === 'function') {
+        (onToggle as FileTreeProps['onToggle'])!(item.id, nextExpanded, event as MouseEvent)
+      }
+    }
+    const onSelect = readProp<unknown>(props, 'onSelect', undefined)
+    if (typeof onSelect === 'function') (onSelect as FileTreeProps['onSelect'])!(item.id, event as MouseEvent)
+  })
+  addEventListener(row, 'keydown', event => {
+    const keyboardEvent = event as KeyboardEvent
+    if (keyboardEvent.key !== 'Enter' && keyboardEvent.key !== ' ') return
+    keyboardEvent.preventDefault?.()
+    row.dispatchEvent?.(new MouseEvent('click', { bubbles: true }))
+  })
+  return row
+}
+
+function flattenVisible(
+  items: readonly FileTreeItem[],
+  expanded: ReadonlySet<string>,
+  depth = 0
+): VisibleFileTreeItem[] {
+  const visible: VisibleFileTreeItem[] = []
+  for (const item of items) {
+    const folder = item.kind === 'folder'
+    const open = folder && expanded.has(item.id)
+    visible.push({ item, depth, expanded: open })
+    if (open && item.children) visible.push(...flattenVisible(item.children, expanded, depth + 1))
+  }
+  return visible
+}
+
+function initialExpanded(props: FileTreeProps, items: readonly FileTreeItem[]): readonly string[] {
+  const ids = new Set(readProp<readonly string[]>(props, 'defaultExpanded', []))
+  collectExpanded(items, ids)
+  return [...ids]
+}
+
+function collectExpanded(items: readonly FileTreeItem[], ids: Set<string>): void {
+  for (const item of items) {
+    if (item.expanded === true) ids.add(item.id)
+    if (item.children) collectExpanded(item.children, ids)
+  }
+}
+
+function activeId(props: FileTreeProps, items: readonly FileTreeItem[]): string | undefined {
+  const controlled = readProp<string | undefined>(props, 'value', undefined)
+  if (controlled !== undefined) return controlled
+  const defaultValue = readProp<string | undefined>(props, 'defaultValue', undefined)
+  if (defaultValue !== undefined) return defaultValue
+  return findActive(items)
+}
+
+function findActive(items: readonly FileTreeItem[]): string | undefined {
+  for (const item of items) {
+    if (item.active === true) return item.id
+    if (item.children) {
+      const nested = findActive(item.children)
+      if (nested !== undefined) return nested
+    }
+  }
+  return undefined
+}
+
+function fileIconClass(item: FileTreeItem): string {
+  if (item.kind === 'folder') return 'vui-filetree__icon--folder'
+  const extension = item.label.slice(item.label.lastIndexOf('.') + 1).toLowerCase()
+  if (extension === 'ts' || extension === 'tsx') return 'vui-filetree__icon--ts'
+  if (extension === 'css' || extension === 'scss') return 'vui-filetree__icon--css'
+  if (extension === 'json') return 'vui-filetree__icon--json'
+  return ''
+}

package/src/forms.ts

@@ -0,0 +1,270 @@
+import { effect } from '@vobs/reactivity'
+import {
+  createElement,
+  insertBefore,
+  setAttribute,
+  type VobsNode
+} from '@vobs/vobs'
+import {
+  bindClassList,
+  bindCommonAttributes,
+  bindPropertyValue,
+  bindUserStyle,
+  hasProp,
+  listen,
+  mountSlot,
+  readProp,
+  setOptionalAttribute,
+  setOptionalProperty
+} from './utils'
+import type { VuiCommonProps, VuiEventHandler } from './types'
+
+export type InputType = 'date' | 'email' | 'number' | 'password' | 'search' | 'text' | 'url'
+
+export interface InputProps extends VuiCommonProps {
+  readonly type?: InputType
+  readonly name?: string
+  readonly value?: string | number
+  readonly placeholder?: string
+  readonly disabled?: boolean
+  readonly readOnly?: boolean
+  readonly required?: boolean
+  readonly icon?: VobsNode | (() => VobsNode | null | undefined)
+  readonly onInput?: VuiEventHandler<InputEvent>
+  readonly onChange?: VuiEventHandler<Event>
+  readonly onBlur?: VuiEventHandler<FocusEvent>
+}
+
+export function Input(props: InputProps = {}): VobsNode {
+  const root = createElement('div')
+  const control = createElement('input')
+
+  bindClassList(root, props, () => [
+    'vui-input',
+    readProp<InputType>(props, 'type', 'text') === 'search' ? 'vui-search' : undefined
+  ])
+  bindUserStyle(root, props)
+  bindCommonAttributes(control, props, [
+    'type',
+    'name',
+    'value',
+    'placeholder',
+    'disabled',
+    'readOnly',
+    'required',
+    'icon',
+    'onInput',
+    'onChange',
+    'onBlur'
+  ])
+
+  effect(() => {
+    setOptionalAttribute(control, 'type', readProp<InputType>(props, 'type', 'text'))
+    setOptionalAttribute(control, 'name', readProp<string | undefined>(props, 'name', undefined))
+    setOptionalAttribute(control, 'placeholder', readProp<string | undefined>(props, 'placeholder', undefined))
+    setOptionalProperty(control, 'disabled', readProp(props, 'disabled', false))
+    setOptionalProperty(control, 'readOnly', readProp(props, 'readOnly', false))
+    setOptionalProperty(control, 'required', readProp(props, 'required', false))
+  })
+  if (hasProp(props, 'value')) {
+    bindPropertyValue(control, 'value', () => readProp<string | number | undefined>(props, 'value', undefined) ?? '')
+  }
+
+  if (hasProp(props, 'icon')) {
+    const icon = createElement('span')
+    setAttribute(icon, 'class', 'vui-input__icon')
+    mountSlot(icon, props, 'icon')
+    insertBefore(root, icon, null)
+  }
+  insertBefore(root, control, null)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+
+  listen(control, 'input', props, 'onInput', () => readProp(props, 'disabled', false))
+  listen(control, 'change', props, 'onChange', () => readProp(props, 'disabled', false))
+  listen(control, 'blur', props, 'onBlur', () => false)
+  return root
+}
+
+export interface TextareaProps extends VuiCommonProps {
+  readonly value?: string | number
+  readonly placeholder?: string
+  readonly disabled?: boolean
+  readonly readOnly?: boolean
+  readonly required?: boolean
+  readonly rows?: number
+  readonly name?: string
+  readonly onInput?: VuiEventHandler<InputEvent>
+  readonly onChange?: VuiEventHandler<Event>
+  readonly onBlur?: VuiEventHandler<FocusEvent>
+}
+
+export function Textarea(props: TextareaProps = {}): VobsNode {
+  const root = createElement('textarea')
+  bindClassList(root, props, () => ['vui-textarea'])
+  bindCommonAttributes(root, props, [
+    'value',
+    'placeholder',
+    'disabled',
+    'readOnly',
+    'required',
+    'rows',
+    'name',
+    'onInput',
+    'onChange',
+    'onBlur'
+  ])
+  effect(() => {
+    setOptionalAttribute(root, 'name', readProp<string | undefined>(props, 'name', undefined))
+    setOptionalAttribute(root, 'placeholder', readProp<string | undefined>(props, 'placeholder', undefined))
+    setOptionalProperty(root, 'disabled', readProp(props, 'disabled', false))
+    setOptionalProperty(root, 'readOnly', readProp(props, 'readOnly', false))
+    setOptionalProperty(root, 'required', readProp(props, 'required', false))
+    setOptionalAttribute(root, 'rows', readProp<number | undefined>(props, 'rows', undefined))
+  })
+  if (hasProp(props, 'value')) {
+    bindPropertyValue(root, 'value', () => readProp<string | number | undefined>(props, 'value', undefined) ?? '')
+  }
+  listen(root, 'input', props, 'onInput', () => readProp(props, 'disabled', false))
+  listen(root, 'change', props, 'onChange', () => readProp(props, 'disabled', false))
+  listen(root, 'blur', props, 'onBlur', () => false)
+  return root
+}
+
+export interface SelectProps extends VuiCommonProps {
+  readonly name?: string
+  readonly value?: string | number
+  readonly disabled?: boolean
+  readonly required?: boolean
+  readonly multiple?: boolean
+  readonly size?: number
+  readonly onChange?: VuiEventHandler<Event>
+}
+
+export function Select(props: SelectProps = {}): VobsNode {
+  const root = createElement('select')
+  bindClassList(root, props, () => ['vui-select'])
+  bindCommonAttributes(root, props, [
+    'name',
+    'value',
+    'disabled',
+    'required',
+    'multiple',
+    'size',
+    'onChange'
+  ])
+  effect(() => {
+    setOptionalAttribute(root, 'name', readProp<string | undefined>(props, 'name', undefined))
+    setOptionalProperty(root, 'disabled', readProp(props, 'disabled', false))
+    setOptionalProperty(root, 'required', readProp(props, 'required', false))
+    setOptionalProperty(root, 'multiple', readProp(props, 'multiple', false))
+    setOptionalAttribute(root, 'size', readProp<number | undefined>(props, 'size', undefined))
+  })
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  if (hasProp(props, 'value')) {
+    bindPropertyValue(root, 'value', () => readProp<string | number | undefined>(props, 'value', undefined) ?? '')
+  }
+  listen(root, 'change', props, 'onChange', () => readProp(props, 'disabled', false))
+  return root
+}
+
+export interface ChoiceProps extends VuiCommonProps {
+  readonly name?: string
+  readonly value?: string
+  readonly checked?: boolean
+  readonly disabled?: boolean
+  readonly required?: boolean
+  readonly onChange?: VuiEventHandler<Event>
+}
+
+export function Checkbox(props: ChoiceProps = {}): VobsNode {
+  return createChoice('checkbox', props)
+}
+
+export function Radio(props: ChoiceProps = {}): VobsNode {
+  return createChoice('radio', props)
+}
+
+function createChoice(type: 'checkbox' | 'radio', props: ChoiceProps): VobsNode {
+  const root = createElement('label')
+  const control = createElement('input')
+  const visual = createElement('span')
+
+  bindClassList(root, props, () => [`vui-${type}`])
+  bindUserStyle(root, props)
+  bindCommonAttributes(control, props, [
+    'name',
+    'value',
+    'checked',
+    'disabled',
+    'required',
+    'onChange'
+  ])
+  setAttribute(visual, 'class', type === 'checkbox' ? 'vui-check__box' : 'vui-radio__dot')
+
+  effect(() => {
+    setOptionalAttribute(control, 'type', type)
+    setOptionalAttribute(control, 'name', readProp<string | undefined>(props, 'name', undefined))
+    setOptionalAttribute(control, 'value', readProp<string | undefined>(props, 'value', undefined))
+    setOptionalProperty(control, 'disabled', readProp(props, 'disabled', false))
+    setOptionalProperty(control, 'required', readProp(props, 'required', false))
+  })
+  if (hasProp(props, 'checked')) {
+    bindPropertyValue(control, 'checked', () => readProp(props, 'checked', false))
+  }
+  insertBefore(root, control, null)
+  insertBefore(root, visual, null)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  listen(control, 'change', props, 'onChange', () => readProp(props, 'disabled', false))
+  return root
+}
+
+export interface SwitchProps extends VuiCommonProps {
+  readonly checked?: boolean
+  readonly disabled?: boolean
+  readonly readOnly?: boolean
+  readonly size?: 'sm' | 'md'
+  readonly name?: string
+  readonly value?: string
+  readonly onChange?: VuiEventHandler<Event>
+}
+
+export function Switch(props: SwitchProps = {}): VobsNode {
+  const root = createElement('label')
+  const control = createElement('input')
+  const thumb = createElement('span')
+
+  bindClassList(root, props, () => [
+    'vui-switch',
+    readProp<'sm' | 'md'>(props, 'size', 'md') === 'sm' ? 'vui-switch--sm' : undefined
+  ])
+  bindUserStyle(root, props)
+  bindCommonAttributes(root, props, ['role'])
+  bindCommonAttributes(control, props, [
+    'checked',
+    'disabled',
+    'readOnly',
+    'name',
+    'value',
+    'onChange'
+  ])
+  setAttribute(thumb, 'class', 'vui-switch__thumb')
+  setAttribute(root, 'role', 'switch')
+
+  effect(() => {
+    setOptionalAttribute(control, 'type', 'checkbox')
+    setOptionalAttribute(control, 'name', readProp<string | undefined>(props, 'name', undefined))
+    setOptionalAttribute(control, 'value', readProp<string | undefined>(props, 'value', undefined))
+    setOptionalProperty(control, 'disabled', readProp(props, 'disabled', false))
+    setOptionalProperty(control, 'readOnly', readProp(props, 'readOnly', false))
+    setOptionalAttribute(root, 'aria-checked', readProp(props, 'checked', false) ? 'true' : 'false')
+    setOptionalAttribute(root, 'aria-disabled', readProp(props, 'disabled', false) ? 'true' : undefined)
+  })
+  if (hasProp(props, 'checked')) {
+    bindPropertyValue(control, 'checked', () => readProp(props, 'checked', false))
+  }
+  insertBefore(root, control, null)
+  insertBefore(root, thumb, null)
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  listen(control, 'change', props, 'onChange', () => readProp(props, 'disabled', false))
+  return root
+}

package/src/icon.ts

@@ -0,0 +1,118 @@
+import {
+  createIcon,
+  createSvgIconNode,
+  type IconDefinition,
+  type SvgIconDefinition,
+  type VobsIconProps
+} from '@vobs/icon-core'
+import { hasProp, mountSlot, readProp } from './utils'
+import type { VobsNode } from '@vobs/vobs'
+import type { VuiCommonProps } from './types'
+
+export type { IconDefinition } from '@vobs/icon-core'
+
+export interface IconProps extends VuiCommonProps, VobsIconProps {
+  readonly name?: string
+  readonly icon?: IconDefinition
+}
+
+export function Icon(props: IconProps = {}): VobsNode {
+  const root = createSvgIconNode(() => {
+    const definition = resolveIcon(
+      readProp<IconDefinition | string | undefined>(props, 'icon', undefined)
+        ?? readProp<string | undefined>(props, 'name', undefined)
+    )
+    if (!definition) {
+      if (hasProp(props, 'children')) return undefined
+      throw new Error('Vobs UI: Icon requires a registered `name` or an `icon` definition')
+    }
+    return iconDefinitionToSvg(definition)
+  }, props, {
+    class: 'vui-icon icon',
+    defaultSvgAttributes: {
+      fill: 'none',
+      stroke: 'currentColor',
+      'stroke-width': 2,
+      'stroke-linecap': 'butt',
+      'stroke-linejoin': 'miter'
+    }
+  }) as Element
+
+  if (hasProp(props, 'children')) mountSlot(root, props, 'children')
+  return root
+}
+
+function iconDefinitionToSvg(definition: IconDefinition): SvgIconDefinition {
+  return {
+    name: definition.name,
+    body: definition.path,
+    viewBox: definition.viewBox
+  }
+}
+
+const VUI_ICON_PATHS = {
+  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>',
+  check: '<polyline points="4 12 10 18 20 6"/>',
+  x: '<line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>',
+  plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
+  minus: '<line x1="5" y1="12" x2="19" y2="12"/>',
+  'chevron-right': '<polyline points="9 6 15 12 9 18"/>',
+  'chevron-down': '<polyline points="6 9 12 15 18 9"/>',
+  'chevron-up': '<polyline points="6 15 12 9 18 15"/>',
+  'chevron-left': '<polyline points="15 6 9 12 15 18"/>',
+  'arrow-left': '<line x1="20" y1="12" x2="4" y2="12"/><polyline points="10 6 4 12 10 18"/>',
+  'arrow-right': '<line x1="4" y1="12" x2="20" y2="12"/><polyline points="14 6 20 12 14 18"/>',
+  'arrow-up': '<line x1="12" y1="20" x2="12" y2="4"/><polyline points="6 10 12 4 18 10"/>',
+  'arrow-down': '<line x1="12" y1="4" x2="12" y2="20"/><polyline points="6 14 12 20 18 14"/>',
+  atom: '<circle cx="12" cy="12" r="2"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/>',
+  globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>',
+  'arrow-expand': '<polyline points="14 4 20 4 20 10"/><line x1="14" y1="10" x2="20" y2="4"/><polyline points="10 20 4 20 4 14"/><line x1="10" y1="14" x2="4" y2="20"/>',
+  'arrow-minimize': '<polyline points="20 4 14 10 20 10"/><line x1="14" y1="10" x2="14" y2="4"/><polyline points="4 20 10 14 4 14"/><line x1="10" y1="14" x2="10" y2="20"/>',
+  'check-circle': '<circle cx="12" cy="12" r="9"/><polyline points="8 12 11 15 16 9"/>',
+  'alert-circle': '<circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16" x2="12" y2="16.01"/>',
+  'alert-triangle': '<path d="M12 3 22 20 2 20 Z"/><line x1="12" y1="10" x2="12" y2="15"/><line x1="12" y1="18" x2="12" y2="18.01"/>',
+  info: '<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><line x1="12" y1="8" x2="12" y2="8.01"/>',
+  home: '<polygon points="3 11 12 3 21 11 21 21 14 21 14 14 10 14 10 21 3 21 3 11"/>',
+  user: '<path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/><circle cx="12" cy="8" r="4"/>',
+  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>',
+  menu: '<line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/>',
+  'more-h': '<circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/>',
+  calendar: '<rect x="3" y="5" width="18" height="16"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="3" x2="8" y2="7"/><line x1="16" y1="3" x2="16" y2="7"/>',
+  filter: '<polygon points="3 4 21 4 14 12 14 20 10 18 10 12 3 4"/>',
+  sort: '<path d="M8 20V4"/><polyline points="4 8 8 4 12 8"/><path d="M16 4v16"/><polyline points="12 16 16 20 20 16"/>',
+  edit: '<path d="M4 20h4l10-10-4-4L4 16v4z"/><path d="M14 6l4 4"/>',
+  trash: '<polyline points="4 6 20 6"/><path d="M6 6v14h12V6"/><path d="M9 6V4h6v2"/><line x1="10" y1="10" x2="10" y2="17"/><line x1="14" y1="10" x2="14" y2="17"/>',
+  download: '<path d="M12 3v12"/><polyline points="7 10 12 15 17 10"/><line x1="3" y1="21" x2="21" y2="21"/>',
+  upload: '<path d="M12 21V6"/><polyline points="7 11 12 6 17 11"/><line x1="3" y1="21" x2="21" y2="21"/>',
+  pause: '<line x1="9" y1="5" x2="9" y2="19"/><line x1="15" y1="5" x2="15" y2="19"/>',
+  play: '<polygon points="8 5 19 12 8 19 8 5"/>',
+  refresh: '<polyline points="21 4 21 10 15 10"/><polyline points="3 20 3 14 9 14"/><path d="M20.5 9A9 9 0 0 0 5 5.5L3 7M3.5 15A9 9 0 0 0 19 18.5L21 17"/>',
+  bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8z"/><path d="M10 21a2 2 0 0 0 4 0"/>',
+  folder: '<path d="M3 6h6l2 3h10v10H3z"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  sparkles: '<path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z"/><path d="M19 14l1 2.2 2.2 1-2.2 1L19 20.4l-1-2.2-2.2-1 2.2-1L19 14z"/>',
+  zap: '<polygon points="13 2 4 14 12 14 11 22 20 10 12 10 13 2"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="4.6" y1="4.6" x2="6.7" y2="6.7"/><line x1="17.3" y1="17.3" x2="19.4" y2="19.4"/><line x1="4.6" y1="19.4" x2="6.7" y2="17.3"/><line x1="17.3" y1="6.7" x2="19.4" y2="4.6"/>',
+  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
+  terminal: '<polyline points="4 7 9 12 4 17"/><line x1="12" y1="17" x2="20" y2="17"/>'
+} as const
+
+const iconRegistry = new Map<string, IconDefinition>(
+  Object.entries(VUI_ICON_PATHS).map(([name, path]) => [name, { name, path }])
+)
+
+export { VUI_ICON_PATHS }
+export { createIcon, registerIcon, resolveIcon }
+
+function registerIcon(icon: IconDefinition): () => void {
+  const previous = iconRegistry.get(icon.name)
+  iconRegistry.set(icon.name, icon)
+  return () => {
+    if (previous) iconRegistry.set(icon.name, previous)
+    else iconRegistry.delete(icon.name)
+  }
+}
+
+function resolveIcon(icon: string | IconDefinition | undefined): IconDefinition | undefined {
+  return typeof icon === 'string' ? iconRegistry.get(icon) : icon
+}