SYSTEM_SPEC_v0.1

COMPONENT
MANIFEST

92 components. 19 AI widgets. 82 hooks. Everything you need, built in.

CORE -- 5 COMPONENTS
CORE

Box

Flexbox container with border, padding, and background support.

┌─────┐
│     │
└─────┘
CORE

Text

Styled text with color, weight, decoration, and wrapping support.

Hello Storm
CORE

ScrollView

Scrollable container with imperative scroll and virtual rendering.

│content ▓
│content ░
CORE

Spacer

Flexible space that expands to fill available room in flex layouts.

←  flex  →
CORE

Overlay

Z-indexed layer for floating content above the main layout tree.

┌──┐
│▒▒│ overlay
└──┘
INPUT -- 10 COMPONENTS
INPUT

TextInput

Single-line text field with cursor, selection, and validation.

> type here_
INPUT

ChatInput

Multi-line chat input with history, mentions, and auto-resize.

> message...
> _
INPUT

SearchInput

Search field with fuzzy matching, debounce, and result highlighting.

[/] search...
INPUT

MaskedInput

Pattern-enforced input with mask characters and format validation.

###-##-####
INPUT

Select

Dropdown selector with search, groups, and keyboard navigation.

▸ Option 1
  Option 2
INPUT

MultiSelect

Multi-choice selector with toggle, select-all, and tag display.

[x] A
[ ] B
[x] C
INPUT

Checkbox

Toggle checkbox with indeterminate state and label support.

[x] Enabled
INPUT

Switch

Toggle switch with animated transition and on/off label.

━━●━━ ON
INPUT

RadioGroup

Radio button group with single selection and keyboard support.

● Option A
○ Option B
INPUT

Form

Form container with validation, field registration, and submit handling.

Name: ___
Email: ___
DATA -- 8 COMPONENTS
DATA

Table

Data table with sorting, filtering, column resize, and virtual rows.

┌───┬───┐
│ A │ B │
├───┼───┤
DATA

DataGrid

Rich data grid with cell editing, selection, and copy-paste.

│Name│Age│
│Jon │ 32│
DATA

Tree

Hierarchical tree view with expand/collapse and lazy loading.

▸ src/
  ├ index
  └ app
DATA

DirectoryTree

File-system tree with icons, file type detection, and selection.

[+] src/
  [=] app.ts
DATA

VirtualList

Virtualized list rendering only visible items for massive datasets.

▸ item 1
▸ item 2
  ...999
DATA

DiffView

Side-by-side or unified code diff with syntax-aware highlighting.

+ added
- removed
DATA

Calendar

Date picker with month navigation, range selection, and locale support.

Mo Tu We
 1  2  3
DATA

ListView

Simple scrollable list with selection, highlight, and keyboard nav.

▸ First
▸ Second
LAYOUT -- 8 COMPONENTS
LAYOUT

Modal

Dialog overlay with focus trap, backdrop, and escape handling.

┌─ Modal ─┐
│ content  │
└──────────┘
LAYOUT

Tabs

Tab switcher with keyboard navigation and lazy panel rendering.

[Tab 1] Tab 2
LAYOUT

TabbedContent

Tab panels with header and content synchronized switching.

[A]│B│C
─────────
content
LAYOUT

Accordion

Collapsible sections with single or multi-expand mode.

▾ Section
  content
▸ Closed
LAYOUT

Drawer

Slide-in side panel with overlay, push mode, and resize handle.

│▒▒▒▒│ main
LAYOUT

SplitPane

Resizable split layout with draggable divider and min/max constraints.

left │ right
LAYOUT

Collapsible

Toggle content visibility with animated expand and collapse.

▾ Show
  hidden
LAYOUT

FocusGroup

Focus trap with tab order, wrap-around, and roving tabindex.

[focus zone]
FEEDBACK -- 8 COMPONENTS
FEEDBACK

Spinner

Animated loading indicator with 12 built-in spinner types.

⠋ loading...
FEEDBACK

ProgressBar

Determinate progress bar with percentage, label, and color modes.

████░░░░ 52%
FEEDBACK

GradientProgress

Progress bar with multi-stop gradient and animated shimmer effect.

▓▓▓▓▒▒░░
FEEDBACK

Badge

Status badge with dot indicator, variants, and pulse animation.

● Active
FEEDBACK

Toast

Notification toast with auto-dismiss, stacking, and action buttons.

┌ Success ─┐
│ Saved!   │
FEEDBACK

Alert

Alert box with severity levels, icon, and dismissible option.

/!\ Warning msg
FEEDBACK

Gauge

Gauge meter with arc display, thresholds, and label formatting.

[████████] 82%
FEEDBACK

Tooltip

Hover tooltip with positioning, delay, and rich content support.

hover → tip
VISUALIZATION -- 8 COMPONENTS
VISUALIZATION

LineChart

Line graph with multiple series, axes, legends, and live data.

    ╭─╮
╭─╮ │ │
│ ╰─╯ │
VISUALIZATION

BarChart

Vertical/horizontal bar chart with stacking, grouping, and labels.

█ █
█ █ █
█ █ █
VISUALIZATION

Sparkline

Inline mini chart for compact data visualization in tight spaces.

▁▃▅▇▅▃▁
VISUALIZATION

Gauge

Value gauge with configurable ranges, colors, and threshold markers.

[████░░] 67%
VISUALIZATION

Heatmap

2D heatmap grid with color ramp, value tooltips, and axis labels.

▓▒░▒▓
░▒▓▒░
VISUALIZATION

ScatterPlot

Scatter chart with point styling, clusters, and trend lines.

  · ·
 ·  ·
·   ·
VISUALIZATION

Histogram

Distribution histogram with bin count, density, and cumulative modes.

  █
 █ █
█ █ █
VISUALIZATION

Diagram

Node-edge graph diagram with auto-layout and edge routing.

[A]──[B]
     └[C]
NAVIGATION -- 5 COMPONENTS
NAVIGATION

Breadcrumb

Path trail with separator, truncation, and clickable segments.

Home > Docs > API
NAVIGATION

Menu

Menu list with submenus, dividers, shortcuts, and icons.

▸ File
  Edit
  View
NAVIGATION

Stepper

Step indicator with progress tracking, labels, and validation.

● ─ ○ ─ ○
NAVIGATION

Paginator

Pagination with page numbers, prev/next, and jump-to-page.

‹ 1 2 3 ›
NAVIGATION

CommandPalette

Cmd+K search overlay with fuzzy matching and action registry.

> search commands
CONTENT -- 12 COMPONENTS
CONTENT

Card

Content card with header, body, footer, and border variants.

┌──────────┐
│  Title   │
│  body    │
└──────────┘
CONTENT

Heading

Semantic heading with level control, weight, and anchor links.

# Heading
CONTENT

Image

Terminal image renderer with Sixel, Kitty, and iTerm2 protocol support.

┌──────┐
│ IMG  │
└──────┘
CONTENT

Gradient

Color gradient text and backgrounds with multi-stop support.

▓▓▒▒░░
CONTENT

GradientBorder

Container with gradient-colored border and rounded corners.

╭──────╮
CONTENT

GlowText

Text with animated glow effect using terminal color capabilities.

*  Glow  *
CONTENT

Shadow

Drop shadow effect using half-block characters for depth.

┌───┐
│   │░
└───┘░
CONTENT

Separator

Horizontal or vertical divider with label and style variants.

──────────
CONTENT

Tag

Inline label tag with color variants and dismissible option.

[beta]
CONTENT

Timer

Countdown timer with pause, reset, and completion callback.

02:34
CONTENT

RichLog

Scrolling log viewer with level filtering, timestamps, and search.

[INFO] msg
[WARN] msg
CONTENT

Stopwatch

Count-up timer with lap recording, split display, and precision.

00:12.4
AI WIDGETS -- 10 KEY COMPONENTS
AI WIDGET

OperationTree

Agent operation tree with status indicators and live progress.

✓ scan
⠋ analyze
○ patch
AI WIDGET

MessageBubble

Chat message bubble with avatar, timestamp, and markdown support.

◆ AI response
AI WIDGET

ApprovalPrompt

Action approval dialog with allow/deny and detail preview.

[Allow] [Deny]
AI WIDGET

StreamingText

Token-by-token streaming text with cursor and backpressure.

Hello wo▌
AI WIDGET

SyntaxHighlight

Code syntax highlighting with 50+ language grammars.

const x = 1
AI WIDGET

MarkdownText

Full markdown renderer with tables, code blocks, and lists.

**bold** text
AI WIDGET

TokenStream

Token visualization with boundaries, timing, and throughput.

tok1 tok2 tok3
AI WIDGET

CostTracker

Real-time token usage and cost tracking with budget alerts.

$0.003 · 1.2K
AI WIDGET

ContextWindow

Context window usage bar with system/user/assistant breakdown.

[████░░] 62%
AI WIDGET

ModelBadge

Model identifier badge with provider icon and capability tags.

◆ GPT-4
92 Components
·
19 AI Widgets
·
82 Hooks
·
15 Headless Behaviors
·
12 Themes