# Aero-UI Full Architecture & Machine-Readable API Specification

Aero-UI is a zero-dependency design system and enterprise cockpit tailored for high-density administrative interfaces.

## 1. Multi-Select Tagging Combobox (AeroCombobox)
- Role: combobox with aria-haspopup="listbox"
- Multi-selectable listbox with aria-multiselectable="true"
- Keyboard Interactions:
  - ArrowDown / ArrowUp: navigate options
  - Enter: toggle selection
  - Backspace: delete preceding tag
  - Escape: collapse listbox
- API:
  - new AeroCombobox(container, { label, options, selected, placeholder, onChange })

## 2. Accessible Modal Dialog (AeroDialog)
- Role: dialog with aria-modal="true" and aria-labelledby
- Focus Management: Circular trapping via Tab/Shift+Tab, inert applied to background DOM
- Keyboard Interactions: Escape dismisses dialog and restores focus to trigger element
- API:
  - new AeroDialog({ title, description, confirmText, cancelText, onConfirm, onCancel })
  - dialog.open(), dialog.close()

## 3. Expandable Accordion Tree (AeroTree)
- Role: tree with role="treeitem" and role="group"
- Keyboard Interactions:
  - ArrowDown / ArrowUp: navigate visible items
  - ArrowRight: expand collapsed node or focus first child
  - ArrowLeft: collapse expanded node or focus parent
  - Asterisk (*): expand all sibling nodes at current depth
  - Type-ahead: character keys jump to matching nodes

## 4. Dual-Month Date-Range Picker (AeroDateRange)
- Role: grid with role="row" and role="gridcell"
- Keyboard Interactions:
  - ArrowLeft / ArrowRight: step 1 day
  - ArrowUp / ArrowDown: step 1 week
  - PageUp / PageDown: step 1 month
  - Shift + PageUp / PageDown: step 1 year

## 5. Segmented Command Tabs (AeroTabs)
- Role: tablist with role="tab" and role="tabpanel"
- Keyboard Interactions:
  - ArrowLeft / ArrowRight: traverse tabs with circular wrap
  - Home / End: jump to first / last tab
- Lazy Rendering: Supports lazy generator functions for panel content to minimize DOM size.

## 6. High-Density Data Grid (AeroDataGrid)
- Role: grid with role="columnheader" and role="gridcell"
- Sorting: aria-sort="ascending|descending|none"
- Keyboard Interactions: 2D directional arrow keys, Home/End, Ctrl+Home/Ctrl+End, Space to select row.

## 7. Context & Dropdown Menu (AeroMenu)
- Role: menu with role="menuitem" and role="separator"
- Keyboard Interactions: ArrowDown/ArrowUp with circular wrap, Escape to close, type-ahead search.

## 8. Toast Notifications (aeroToast)
- Role: status / alert with aria-live="polite|assertive"
- Keyboard Interactions: Alt+T jumps focus to active toasts, Escape dismisses.
- Web Speech API: Screen reader simulator voice announcements.

## 9. WebMCP Tools Exposed
- filter_nodes(query: string, status: string)
- export_telemetry()
- toggle_accessibility_audit()