diff --git a/.agents/skills/opentui/SKILL.md b/.agents/skills/opentui/SKILL.md
new file mode 100644
index 0000000..49dc315
--- /dev/null
+++ b/.agents/skills/opentui/SKILL.md
@@ -0,0 +1,198 @@
+---
+name: opentui
+description: Comprehensive OpenTUI skill for building terminal user interfaces. Covers the core imperative API, React reconciler, and Solid reconciler. Use for any TUI development task including components, layout, keyboard handling, animations, and testing.
+metadata:
+   references: core, react, solid
+---
+
+# OpenTUI Platform Skill
+
+Consolidated skill for building terminal user interfaces with OpenTUI. Use decision trees below to find the right framework and components, then load detailed references.
+
+## Critical Rules
+
+**Follow these rules in all OpenTUI code:**
+
+1. **Use `create-tui` for new projects.** See framework `REFERENCE.md` quick starts.
+2. **`create-tui` options must come before arguments.** `bunx create-tui -t react my-app` works, `bunx create-tui my-app -t react` does NOT.
+3. **Never call `process.exit()` directly.** Use `renderer.destroy()` (see `core/gotchas.md`).
+4. **Text styling requires nested tags in React/Solid.** Use modifier elements, not props (see `components/text-display.md`).
+
+## How to Use This Skill
+
+### Reference File Structure
+
+Framework references follow a 5-file pattern. Cross-cutting concepts are single-file guides.
+
+Each framework in `./references/<framework>/` contains:
+
+| File | Purpose | When to Read |
+|------|---------|--------------|
+| `REFERENCE.md` | Overview, when to use, quick start | **Always read first** |
+| `api.md` | Runtime API, components, hooks | Writing code |
+| `configuration.md` | Setup, tsconfig, bundling | Configuring a project |
+| `patterns.md` | Common patterns, best practices | Implementation guidance |
+| `gotchas.md` | Pitfalls, limitations, debugging | Troubleshooting |
+
+Cross-cutting concepts in `./references/<concept>/` have `REFERENCE.md` as the entry point.
+
+### Reading Order
+
+1. Start with `REFERENCE.md` for your chosen framework
+2. Then read additional files relevant to your task:
+   - Building components -> `api.md` + `components/<category>.md`
+   - Setting up project -> `configuration.md`
+   - Layout/positioning -> `layout/REFERENCE.md`
+   - Keyboard/input handling -> `keyboard/REFERENCE.md`
+   - Animations -> `animation/REFERENCE.md`
+   - Troubleshooting -> `gotchas.md` + `testing/REFERENCE.md`
+
+### Example Paths
+
+```
+./references/react/REFERENCE.md           # Start here for React
+./references/react/api.md              # React components and hooks
+./references/solid/configuration.md    # Solid project setup
+./references/components/inputs.md      # Input, Textarea, Select docs
+./references/core/gotchas.md           # Core debugging tips
+```
+
+### Runtime Notes
+
+OpenTUI runs on Bun and uses Zig for native builds. Read `./references/core/gotchas.md` for runtime requirements and build guidance.
+
+## Quick Decision Trees
+
+### "Which framework should I use?"
+
+```
+Which framework?
+├─ I want full control, maximum performance, no framework overhead
+│  └─ core/ (imperative API)
+├─ I know React, want familiar component patterns
+│  └─ react/ (React reconciler)
+├─ I want fine-grained reactivity, optimal re-renders
+│  └─ solid/ (Solid reconciler)
+└─ I'm building a library/framework on top of OpenTUI
+   └─ core/ (imperative API)
+```
+
+### "I need to display content"
+
+```
+Display content?
+├─ Plain or styled text -> components/text-display.md
+├─ Container with borders/background -> components/containers.md
+├─ Scrollable content area -> components/containers.md (scrollbox)
+├─ ASCII art banner/title -> components/text-display.md (ascii-font)
+├─ Code with syntax highlighting -> components/code-diff.md
+├─ Diff viewer (unified/split) -> components/code-diff.md
+├─ Line numbers with diagnostics -> components/code-diff.md
+└─ Markdown content (streaming) -> components/code-diff.md (markdown)
+```
+
+### "I need user input"
+
+```
+User input?
+├─ Single-line text field -> components/inputs.md (input)
+├─ Multi-line text editor -> components/inputs.md (textarea)
+├─ Select from a list (vertical) -> components/inputs.md (select)
+├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
+└─ Custom keyboard shortcuts -> keyboard/REFERENCE.md
+```
+
+### "I need layout/positioning"
+
+```
+Layout?
+├─ Flexbox-style layouts (row, column, wrap) -> layout/REFERENCE.md
+├─ Absolute positioning -> layout/patterns.md
+├─ Responsive to terminal size -> layout/patterns.md
+├─ Centering content -> layout/patterns.md
+└─ Complex nested layouts -> layout/patterns.md
+```
+
+### "I need animations"
+
+```
+Animations?
+├─ Timeline-based animations -> animation/REFERENCE.md
+├─ Easing functions -> animation/REFERENCE.md
+├─ Property transitions -> animation/REFERENCE.md
+└─ Looping animations -> animation/REFERENCE.md
+```
+
+### "I need to handle input"
+
+```
+Input handling?
+├─ Keyboard events (keypress, release) -> keyboard/REFERENCE.md
+├─ Focus management -> keyboard/REFERENCE.md
+├─ Paste events -> keyboard/REFERENCE.md
+├─ Mouse events -> components/containers.md
+└─ Text selection -> components/text-display.md
+```
+
+### "I need to test my TUI"
+
+```
+Testing?
+├─ Snapshot testing -> testing/REFERENCE.md
+├─ Interaction testing -> testing/REFERENCE.md
+├─ Test renderer setup -> testing/REFERENCE.md
+└─ Debugging tests -> testing/REFERENCE.md
+```
+
+### "I need to debug/troubleshoot"
+
+```
+Troubleshooting?
+├─ Runtime errors, crashes -> <framework>/gotchas.md
+├─ Layout issues -> layout/REFERENCE.md + layout/patterns.md
+├─ Input/focus issues -> keyboard/REFERENCE.md
+└─ Repro + regression tests -> testing/REFERENCE.md
+```
+
+### Troubleshooting Index
+
+- Terminal cleanup, crashes -> `core/gotchas.md`
+- Text styling not applying -> `components/text-display.md`
+- Input focus/shortcuts -> `keyboard/REFERENCE.md`
+- Layout misalignment -> `layout/REFERENCE.md`
+- Flaky snapshots -> `testing/REFERENCE.md`
+
+For component naming differences and text modifiers, see `components/REFERENCE.md`.
+
+## Product Index
+
+### Frameworks
+| Framework | Entry File | Description |
+|-----------|------------|-------------|
+| Core | `./references/core/REFERENCE.md` | Imperative API, all primitives |
+| React | `./references/react/REFERENCE.md` | React reconciler for declarative TUI |
+| Solid | `./references/solid/REFERENCE.md` | SolidJS reconciler for declarative TUI |
+
+### Cross-Cutting Concepts
+| Concept | Entry File | Description |
+|---------|------------|-------------|
+| Layout | `./references/layout/REFERENCE.md` | Yoga/Flexbox layout system |
+| Components | `./references/components/REFERENCE.md` | Component reference by category |
+| Keyboard | `./references/keyboard/REFERENCE.md` | Keyboard input handling |
+| Animation | `./references/animation/REFERENCE.md` | Timeline-based animations |
+| Testing | `./references/testing/REFERENCE.md` | Test renderer and snapshots |
+
+### Component Categories
+| Category | Entry File | Components |
+|----------|------------|------------|
+| Text & Display | `./references/components/text-display.md` | text, ascii-font, styled text |
+| Containers | `./references/components/containers.md` | box, scrollbox, borders |
+| Inputs | `./references/components/inputs.md` | input, textarea, select, tab-select |
+| Code & Diff | `./references/components/code-diff.md` | code, line-number, diff, markdown |
+
+## Resources
+
+**Repository**: https://github.com/anomalyco/opentui
+**Core Docs**: https://github.com/anomalyco/opentui/tree/main/packages/core/docs
+**Examples**: https://github.com/anomalyco/opentui/tree/main/packages/core/src/examples
+**Awesome List**: https://github.com/msmps/awesome-opentui
diff --git a/.agents/skills/opentui/references/animation/REFERENCE.md b/.agents/skills/opentui/references/animation/REFERENCE.md
new file mode 100644
index 0000000..26dd954
--- /dev/null
+++ b/.agents/skills/opentui/references/animation/REFERENCE.md
@@ -0,0 +1,431 @@
+# Animation System
+
+OpenTUI provides a timeline-based animation system for smooth property transitions.
+
+## Overview
+
+Animations in OpenTUI use:
+- **Timeline**: Orchestrates multiple animations
+- **Animation Engine**: Manages timelines and rendering
+- **Easing Functions**: Control animation curves
+
+## When to Use
+
+Use this reference when you need timeline-driven animations, easing curves, or progressive transitions.
+
+## Basic Usage
+
+### React
+
+```tsx
+import { useTimeline } from "@opentui/react"
+import { useEffect, useState } from "react"
+
+function AnimatedBox() {
+  const [width, setWidth] = useState(0)
+  
+  const timeline = useTimeline({
+    duration: 2000,
+  })
+  
+  useEffect(() => {
+    timeline.add(
+      { width: 0 },
+      {
+        width: 50,
+        duration: 2000,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setWidth(Math.round(anim.targets[0].width))
+        },
+      }
+    )
+  }, [])
+  
+  return (
+    <box
+      width={width}
+      height={3}
+      backgroundColor="#6a5acd"
+    />
+  )
+}
+```
+
+### Solid
+
+```tsx
+import { useTimeline } from "@opentui/solid"
+import { createSignal, onMount } from "solid-js"
+
+function AnimatedBox() {
+  const [width, setWidth] = createSignal(0)
+  
+  const timeline = useTimeline({
+    duration: 2000,
+  })
+  
+  onMount(() => {
+    timeline.add(
+      { width: 0 },
+      {
+        width: 50,
+        duration: 2000,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setWidth(Math.round(anim.targets[0].width))
+        },
+      }
+    )
+  })
+  
+  return (
+    <box
+      width={width()}
+      height={3}
+      backgroundColor="#6a5acd"
+    />
+  )
+}
+```
+
+### Core
+
+```typescript
+import { createCliRenderer, Timeline, engine } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+engine.attach(renderer)
+
+const timeline = new Timeline({
+  duration: 2000,
+  autoplay: true,
+})
+
+timeline.add(
+  { x: 0 },
+  {
+    x: 50,
+    duration: 2000,
+    ease: "easeOutQuad",
+    onUpdate: (anim) => {
+      box.setLeft(Math.round(anim.targets[0].x))
+    },
+  }
+)
+
+engine.addTimeline(timeline)
+```
+
+## Timeline Options
+
+```typescript
+const timeline = useTimeline({
+  duration: 2000,         // Total duration in ms
+  loop: false,            // Loop the timeline
+  autoplay: true,         // Start automatically
+  onComplete: () => {},   // Called when timeline completes
+  onPause: () => {},      // Called when timeline pauses
+})
+```
+
+## Timeline Methods
+
+```typescript
+// Add animation
+timeline.add(target, properties, startTime?)
+
+// Control playback
+timeline.play()           // Start/resume
+timeline.pause()          // Pause
+timeline.restart()        // Restart from beginning
+
+// State
+timeline.progress         // Current progress (0-1)
+timeline.duration         // Total duration
+```
+
+## Animation Properties
+
+```typescript
+timeline.add(
+  { value: 0 },           // Target object with initial values
+  {
+    value: 100,           // Final value
+    duration: 1000,       // Animation duration in ms
+    ease: "linear",       // Easing function
+    delay: 0,             // Delay before starting
+    onUpdate: (anim) => {
+      // Called each frame
+      const current = anim.targets[0].value
+    },
+    onComplete: () => {
+      // Called when this animation completes
+    },
+  },
+  0                       // Start time in timeline (optional)
+)
+```
+
+## Easing Functions
+
+Available easing functions:
+
+### Linear
+
+| Name | Description |
+|------|-------------|
+| `linear` | Constant speed |
+
+### Quad (Power of 2)
+
+| Name | Description |
+|------|-------------|
+| `easeInQuad` | Slow start |
+| `easeOutQuad` | Slow end |
+| `easeInOutQuad` | Slow start and end |
+
+### Cubic (Power of 3)
+
+| Name | Description |
+|------|-------------|
+| `easeInCubic` | Slower start |
+| `easeOutCubic` | Slower end |
+| `easeInOutCubic` | Slower start and end |
+
+### Quart (Power of 4)
+
+| Name | Description |
+|------|-------------|
+| `easeInQuart` | Even slower start |
+| `easeOutQuart` | Even slower end |
+| `easeInOutQuart` | Even slower start and end |
+
+### Expo (Exponential)
+
+| Name | Description |
+|------|-------------|
+| `easeInExpo` | Exponential start |
+| `easeOutExpo` | Exponential end |
+| `easeInOutExpo` | Exponential start and end |
+
+### Back (Overshoot)
+
+| Name | Description |
+|------|-------------|
+| `easeInBack` | Pull back, then forward |
+| `easeOutBack` | Overshoot, then settle |
+| `easeInOutBack` | Both |
+
+### Elastic
+
+| Name | Description |
+|------|-------------|
+| `easeInElastic` | Elastic start |
+| `easeOutElastic` | Elastic end (bouncy) |
+| `easeInOutElastic` | Both |
+
+### Bounce
+
+| Name | Description |
+|------|-------------|
+| `easeInBounce` | Bounce at start |
+| `easeOutBounce` | Bounce at end |
+| `easeInOutBounce` | Both |
+
+## Patterns
+
+### Progress Bar
+
+```tsx
+function ProgressBar({ progress }: { progress: number }) {
+  const [width, setWidth] = useState(0)
+  const maxWidth = 50
+  
+  const timeline = useTimeline()
+  
+  useEffect(() => {
+    timeline.add(
+      { value: width },
+      {
+        value: (progress / 100) * maxWidth,
+        duration: 300,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setWidth(Math.round(anim.targets[0].value))
+        },
+      }
+    )
+  }, [progress])
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>Progress: {progress}%</text>
+      <box width={maxWidth} height={1} backgroundColor="#333">
+        <box width={width} height={1} backgroundColor="#00FF00" />
+      </box>
+    </box>
+  )
+}
+```
+
+### Fade In
+
+```tsx
+function FadeIn({ children }) {
+  const [opacity, setOpacity] = useState(0)
+  
+  const timeline = useTimeline()
+  
+  useEffect(() => {
+    timeline.add(
+      { opacity: 0 },
+      {
+        opacity: 1,
+        duration: 500,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setOpacity(anim.targets[0].opacity)
+        },
+      }
+    )
+  }, [])
+  
+  return (
+    <box style={{ opacity }}>
+      {children}
+    </box>
+  )
+}
+```
+
+### Looping Animation
+
+```tsx
+function Spinner() {
+  const [frame, setFrame] = useState(0)
+  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+  
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame(f => (f + 1) % frames.length)
+    }, 80)
+    
+    return () => clearInterval(interval)
+  }, [])
+  
+  return <text>{frames[frame]} Loading...</text>
+}
+```
+
+### Staggered Animation
+
+```tsx
+function StaggeredList({ items }) {
+  const [visibleCount, setVisibleCount] = useState(0)
+  
+  useEffect(() => {
+    let count = 0
+    const interval = setInterval(() => {
+      count++
+      setVisibleCount(count)
+      if (count >= items.length) {
+        clearInterval(interval)
+      }
+    }, 100)
+    
+    return () => clearInterval(interval)
+  }, [items.length])
+  
+  return (
+    <box flexDirection="column">
+      {items.slice(0, visibleCount).map((item, i) => (
+        <text key={i}>{item}</text>
+      ))}
+    </box>
+  )
+}
+```
+
+### Slide In
+
+```tsx
+function SlideIn({ children, from = "left" }) {
+  const [offset, setOffset] = useState(from === "left" ? -20 : 20)
+  
+  const timeline = useTimeline()
+  
+  useEffect(() => {
+    timeline.add(
+      { offset: from === "left" ? -20 : 20 },
+      {
+        offset: 0,
+        duration: 300,
+        ease: "easeOutCubic",
+        onUpdate: (anim) => {
+          setOffset(Math.round(anim.targets[0].offset))
+        },
+      }
+    )
+  }, [])
+  
+  return (
+    <box position="relative" left={offset}>
+      {children}
+    </box>
+  )
+}
+```
+
+## Performance Tips
+
+### Batch Updates
+
+Timeline automatically batches updates within the render loop.
+
+### Use Integer Values
+
+Round animated values for character-based positioning:
+
+```typescript
+onUpdate: (anim) => {
+  setX(Math.round(anim.targets[0].x))
+}
+```
+
+### Clean Up Timelines
+
+Hooks automatically clean up, but for core:
+
+```typescript
+// When done with timeline
+engine.removeTimeline(timeline)
+```
+
+## Gotchas
+
+### Terminal Refresh Rate
+
+Terminal UIs typically refresh at 60 FPS max. Very fast animations may appear choppy.
+
+### Character Grid
+
+Animations are constrained to character cells. Sub-pixel positioning isn't possible.
+
+### Cleanup in Effects
+
+Always clean up intervals and timelines:
+
+```tsx
+useEffect(() => {
+  const interval = setInterval(...)
+  return () => clearInterval(interval)
+}, [])
+```
+
+## See Also
+
+- [React API](../react/api.md) - `useTimeline` hook reference
+- [Solid API](../solid/api.md) - `useTimeline` hook reference
+- [Core API](../core/api.md) - `AnimationEngine` and `Timeline` classes
+- [Layout Patterns](../layout/patterns.md) - Animated positioning and transitions
diff --git a/.agents/skills/opentui/references/components/REFERENCE.md b/.agents/skills/opentui/references/components/REFERENCE.md
new file mode 100644
index 0000000..0834960
--- /dev/null
+++ b/.agents/skills/opentui/references/components/REFERENCE.md
@@ -0,0 +1,143 @@
+# OpenTUI Components
+
+Reference for all OpenTUI components, organized by category. Components are available in all three frameworks (Core, React, Solid) with slight API differences.
+
+## When to Use
+
+Use this reference when you need to find the right component category or compare naming across Core, React, and Solid.
+
+## Component Categories
+
+| Category | Components | File |
+|----------|------------|------|
+| Text & Display | text, ascii-font, styled text | [text-display.md](./text-display.md) |
+| Containers | box, scrollbox, borders | [containers.md](./containers.md) |
+| Inputs | input, textarea, select, tab-select | [inputs.md](./inputs.md) |
+| Code & Diff | code, line-number, diff, markdown | [code-diff.md](./code-diff.md) |
+
+## Component Chooser
+
+```
+Need a component?
+├─ Styled text or ASCII art -> text-display.md
+├─ Containers, borders, scrolling -> containers.md
+├─ Forms or input controls -> inputs.md
+└─ Code blocks, diffs, line numbers, markdown -> code-diff.md
+```
+
+## Component Naming
+
+Components have different names across frameworks:
+
+| Concept | Core (Class) | React (JSX) | Solid (JSX) |
+|---------|--------------|-------------|-------------|
+| Text | `TextRenderable` | `<text>` | `<text>` |
+| Box | `BoxRenderable` | `<box>` | `<box>` |
+| ScrollBox | `ScrollBoxRenderable` | `<scrollbox>` | `<scrollbox>` |
+| Input | `InputRenderable` | `<input>` | `<input>` |
+| Textarea | `TextareaRenderable` | `<textarea>` | `<textarea>` |
+| Select | `SelectRenderable` | `<select>` | `<select>` |
+| Tab Select | `TabSelectRenderable` | `<tab-select>` | `<tab_select>` |
+| ASCII Font | `ASCIIFontRenderable` | `<ascii-font>` | `<ascii_font>` |
+| Code | `CodeRenderable` | `<code>` | `<code>` |
+| Line Number | `LineNumberRenderable` | `<line-number>` | `<line_number>` |
+| Diff | `DiffRenderable` | `<diff>` | `<diff>` |
+| Markdown | `MarkdownRenderable` | `<markdown>` | `<markdown>` |
+
+**Note**: Solid uses underscores (`tab_select`) while React uses hyphens (`tab-select`).
+
+## Common Properties
+
+All components share these layout properties (see [Layout](../layout/REFERENCE.md)):
+
+```tsx
+// Positioning
+position="relative" | "absolute"
+left, top, right, bottom
+
+// Dimensions
+width, height
+minWidth, maxWidth, minHeight, maxHeight
+
+// Flexbox
+flexDirection, flexGrow, flexShrink, flexBasis
+justifyContent, alignItems, alignSelf
+flexWrap, gap
+
+// Spacing
+padding, paddingTop, paddingRight, paddingBottom, paddingLeft
+paddingX, paddingY              // Axis shorthand (horizontal/vertical)
+margin, marginTop, marginRight, marginBottom, marginLeft
+marginX, marginY                // Axis shorthand (horizontal/vertical)
+
+// Display
+display="flex" | "none"
+overflow="visible" | "hidden" | "scroll"
+zIndex
+```
+
+## Quick Examples
+
+### Core (Imperative)
+
+```typescript
+import { createCliRenderer, TextRenderable, BoxRenderable } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+
+const box = new BoxRenderable(renderer, {
+  id: "container",
+  border: true,
+  padding: 2,
+})
+
+const text = new TextRenderable(renderer, {
+  id: "greeting",
+  content: "Hello!",
+  fg: "#00FF00",
+})
+
+box.add(text)
+renderer.root.add(box)
+```
+
+### React
+
+```tsx
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+
+function App() {
+  return (
+    <box border padding={2}>
+      <text fg="#00FF00">Hello!</text>
+    </box>
+  )
+}
+
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
+```
+
+### Solid
+
+```tsx
+import { render } from "@opentui/solid"
+
+function App() {
+  return (
+    <box border padding={2}>
+      <text fg="#00FF00">Hello!</text>
+    </box>
+  )
+}
+
+render(() => <App />)
+```
+
+## See Also
+
+- [Core API](../core/api.md) - Imperative component classes
+- [React API](../react/api.md) - React component props
+- [Solid API](../solid/api.md) - Solid component props
+- [Layout](../layout/REFERENCE.md) - Layout system details
diff --git a/.agents/skills/opentui/references/components/code-diff.md b/.agents/skills/opentui/references/components/code-diff.md
new file mode 100644
index 0000000..41a2b34
--- /dev/null
+++ b/.agents/skills/opentui/references/components/code-diff.md
@@ -0,0 +1,496 @@
+# Code & Diff Components
+
+Components for displaying code with syntax highlighting and diffs in OpenTUI.
+
+## Code Component
+
+Display syntax-highlighted code blocks.
+
+### Basic Usage
+
+```tsx
+// React
+<code
+  code={`function hello() {
+  console.log("Hello, World!");
+}`}
+  language="typescript"
+/>
+
+// Solid
+<code
+  code={sourceCode}
+  language="javascript"
+/>
+
+// Core
+const codeBlock = new CodeRenderable(renderer, {
+  id: "code",
+  code: sourceCode,
+  language: "typescript",
+})
+```
+
+### Supported Languages
+
+OpenTUI uses Tree-sitter for syntax highlighting. Common languages:
+- `typescript`, `javascript`
+- `python`
+- `rust`
+- `go`
+- `json`
+- `html`, `css`
+- `markdown`
+- `bash`, `shell`
+
+### Styling
+
+```tsx
+<code
+  code={sourceCode}
+  language="typescript"
+  backgroundColor="#1a1a2e"
+  showLineNumbers
+/>
+```
+
+### onHighlight Callback
+
+Intercept and modify syntax highlights before rendering:
+
+```tsx
+// Core
+const codeBlock = new CodeRenderable(renderer, {
+  id: "code",
+  code: sourceCode,
+  language: "typescript",
+  onHighlight: (highlights, context) => {
+    // Add custom highlights
+    highlights.push([10, 20, "custom.error", {}])
+    return highlights
+  },
+})
+
+// React/Solid
+<code
+  code={sourceCode}
+  language="typescript"
+  onHighlight={(highlights, context) => {
+    // context: { content, filetype, syntaxStyle }
+    // Modify and return highlights array
+    return highlights.filter(h => h[2] !== "comment")
+  }}
+/>
+```
+
+**Callback signature:**
+- `highlights: SimpleHighlight[]` - Array of `[start, end, scope, metadata]`
+- `context: { content, filetype, syntaxStyle }` - Highlighting context
+- Return modified highlights array or `undefined` to use original
+
+Supports async callbacks for fetching additional highlight data.
+
+## Line Number Component
+
+Code display with line numbers, highlighting, and diagnostics.
+
+### Basic Usage
+
+```tsx
+// React
+<line-number
+  code={sourceCode}
+  language="typescript"
+/>
+
+// Solid (note underscore)
+<line_number
+  code={sourceCode}
+  language="typescript"
+/>
+
+// Core
+const codeView = new LineNumberRenderable(renderer, {
+  id: "code-view",
+  code: sourceCode,
+  language: "typescript",
+})
+```
+
+### Line Number Options
+
+```tsx
+// React
+<line-number
+  code={sourceCode}
+  language="typescript"
+  startLine={1}              // Starting line number
+  showLineNumbers={true}     // Display line numbers
+/>
+
+// Solid
+<line_number
+  code={sourceCode}
+  language="typescript"
+  startLine={1}
+  showLineNumbers={true}
+/>
+```
+
+### Line Highlighting
+
+Highlight specific lines:
+
+```tsx
+// React
+<line-number
+  code={sourceCode}
+  language="typescript"
+  highlightedLines={[5, 10, 15]}  // Highlight these lines
+/>
+
+// Solid
+<line_number
+  code={sourceCode}
+  language="typescript"
+  highlightedLines={[5, 10, 15]}
+/>
+```
+
+### Diagnostics
+
+Show errors, warnings, and info on specific lines:
+
+```tsx
+// React
+<line-number
+  code={sourceCode}
+  language="typescript"
+  diagnostics={[
+    { line: 3, severity: "error", message: "Unexpected token" },
+    { line: 7, severity: "warning", message: "Unused variable" },
+    { line: 12, severity: "info", message: "Consider using const" },
+  ]}
+/>
+
+// Solid
+<line_number
+  code={sourceCode}
+  language="typescript"
+  diagnostics={[
+    { line: 3, severity: "error", message: "Unexpected token" },
+  ]}
+/>
+```
+
+**Diagnostic severity levels:**
+- `error` - Red indicator
+- `warning` - Yellow indicator
+- `info` - Blue indicator
+- `hint` - Gray indicator
+
+### Diff Highlighting
+
+Show added/removed lines:
+
+```tsx
+<line-number
+  code={sourceCode}
+  language="typescript"
+  addedLines={[5, 6, 7]}      // Green background
+  removedLines={[10, 11]}     // Red background
+/>
+```
+
+## Diff Component
+
+Unified or split diff viewer with syntax highlighting.
+
+### Basic Usage
+
+```tsx
+// React
+<diff
+  oldCode={originalCode}
+  newCode={modifiedCode}
+  language="typescript"
+/>
+
+// Solid
+<diff
+  oldCode={originalCode}
+  newCode={modifiedCode}
+  language="typescript"
+/>
+
+// Core
+const diffView = new DiffRenderable(renderer, {
+  id: "diff",
+  oldCode: originalCode,
+  newCode: modifiedCode,
+  language: "typescript",
+})
+```
+
+### Display Modes
+
+```tsx
+// Unified diff (default)
+<diff
+  oldCode={old}
+  newCode={new}
+  mode="unified"
+/>
+
+// Split/side-by-side diff
+<diff
+  oldCode={old}
+  newCode={new}
+  mode="split"
+/>
+```
+
+### Options
+
+```tsx
+<diff
+  oldCode={originalCode}
+  newCode={modifiedCode}
+  language="typescript"
+  mode="unified"
+  showLineNumbers
+  context={3}                // Lines of context around changes
+/>
+```
+
+### Styling
+
+```tsx
+<diff
+  oldCode={old}
+  newCode={new}
+  addedLineColor="#2d4f2d"   // Background for added lines
+  removedLineColor="#4f2d2d" // Background for removed lines
+  unchangedLineColor="transparent"
+/>
+```
+
+## Markdown Component
+
+Render markdown content with syntax highlighting for code blocks.
+
+### Basic Usage
+
+```tsx
+// React
+<markdown
+  content={markdownText}
+  syntaxStyle={mySyntaxStyle}
+/>
+
+// Solid
+<markdown
+  content={markdownText}
+  syntaxStyle={mySyntaxStyle}
+/>
+
+// Core
+import { MarkdownRenderable } from "@opentui/core"
+
+const md = new MarkdownRenderable(renderer, {
+  id: "markdown",
+  content: "# Hello\n\nThis is **markdown**.",
+  syntaxStyle: mySyntaxStyle,
+})
+```
+
+### Options
+
+```tsx
+<markdown
+  content={markdownText}
+  syntaxStyle={syntaxStyle}
+  treeSitterClient={client}  // Optional: custom tree-sitter client
+  conceal={true}             // Hide markdown syntax characters
+  streaming={true}           // Enable streaming mode for incremental updates
+/>
+```
+
+### Custom Node Rendering
+
+```tsx
+// Core
+const md = new MarkdownRenderable(renderer, {
+  id: "markdown",
+  content: "# Custom Heading",
+  syntaxStyle,
+  renderNode: (node, ctx, defaultRender) => {
+    if (node.type === "heading") {
+      // Return custom renderable for headings
+      return new TextRenderable(ctx, {
+        content: `>> ${node.content} <<`,
+      })
+    }
+    return null // Use default rendering
+  },
+})
+```
+
+### Streaming Mode
+
+For real-time content like LLM output:
+
+```tsx
+const [content, setContent] = useState("")
+
+// Append text as it arrives
+useEffect(() => {
+  llmStream.on("token", (token) => {
+    setContent(c => c + token)
+  })
+}, [])
+
+<markdown
+  content={content}
+  syntaxStyle={syntaxStyle}
+  streaming={true}  // Optimizes for incremental updates
+/>
+```
+
+## Use Cases
+
+### Code Editor
+
+```tsx
+function CodeEditor() {
+  const [code, setCode] = useState(`function hello() {
+  console.log("Hello!");
+}`)
+  
+  return (
+    <box flexDirection="column" height="100%">
+      <box height={1}>
+        <text>editor.ts</text>
+      </box>
+      <textarea
+        value={code}
+        onChange={setCode}
+        language="typescript"
+        showLineNumbers
+        flexGrow={1}
+        focused
+      />
+    </box>
+  )
+}
+```
+
+### Code Review
+
+```tsx
+function CodeReview({ oldCode, newCode }) {
+  return (
+    <box flexDirection="column" height="100%">
+      <box height={1} backgroundColor="#333">
+        <text>Changes in src/utils.ts</text>
+      </box>
+      <diff
+        oldCode={oldCode}
+        newCode={newCode}
+        language="typescript"
+        mode="split"
+        showLineNumbers
+      />
+    </box>
+  )
+}
+```
+
+### Syntax-Highlighted Preview
+
+```tsx
+function MarkdownPreview({ content }) {
+  // Extract code blocks from markdown
+  const codeBlocks = extractCodeBlocks(content)
+  
+  return (
+    <scrollbox height={20}>
+      {codeBlocks.map((block, i) => (
+        <box key={i} marginBottom={1}>
+          <code
+            code={block.code}
+            language={block.language}
+          />
+        </box>
+      ))}
+    </scrollbox>
+  )
+}
+```
+
+### Error Display
+
+```tsx
+function ErrorView({ errors, code }) {
+  const diagnostics = errors.map(err => ({
+    line: err.line,
+    severity: "error",
+    message: err.message,
+  }))
+  
+  return (
+    <line-number
+      code={code}
+      language="typescript"
+      diagnostics={diagnostics}
+      highlightedLines={errors.map(e => e.line)}
+    />
+  )
+}
+```
+
+## Gotchas
+
+### Solid Uses Underscores
+
+```tsx
+// React
+<line-number />
+
+// Solid
+<line_number />
+```
+
+### Language Required for Highlighting
+
+```tsx
+// No highlighting (plain text)
+<code code={text} />
+
+// With highlighting
+<code code={text} language="typescript" />
+```
+
+### Large Files
+
+For very large files, consider:
+- Pagination or virtual scrolling
+- Loading only visible portion
+- Using `scrollbox` wrapper
+
+```tsx
+<scrollbox height={30}>
+  <line-number
+    code={largeFile}
+    language="typescript"
+  />
+</scrollbox>
+```
+
+### Tree-sitter Loading
+
+Syntax highlighting requires Tree-sitter grammars. If highlighting isn't working:
+
+1. Check the language is supported
+2. Verify grammars are installed
+3. Check `OTUI_TREE_SITTER_WORKER_PATH` if using custom path
diff --git a/.agents/skills/opentui/references/components/containers.md b/.agents/skills/opentui/references/components/containers.md
new file mode 100644
index 0000000..75ed5e7
--- /dev/null
+++ b/.agents/skills/opentui/references/components/containers.md
@@ -0,0 +1,412 @@
+# Container Components
+
+Components for grouping and organizing content in OpenTUI.
+
+## Box Component
+
+The primary container component with borders, backgrounds, and layout capabilities.
+
+### Basic Usage
+
+```tsx
+// React/Solid
+<box>
+  <text>Content inside box</text>
+</box>
+
+// Core
+const box = new BoxRenderable(renderer, {
+  id: "container",
+})
+box.add(child)
+```
+
+### Borders
+
+```tsx
+<box border>
+  Simple border
+</box>
+
+<box
+  border
+  borderStyle="single"    // single | double | rounded | bold | none
+  borderColor="#FFFFFF"
+>
+  Styled border
+</box>
+
+// Individual borders
+<box
+  borderTop
+  borderBottom
+  borderLeft={false}
+  borderRight={false}
+>
+  Top and bottom only
+</box>
+```
+
+**Border Styles:**
+
+| Style | Appearance |
+|-------|------------|
+| `single` | `┌─┐│ │└─┘` |
+| `double` | `╔═╗║ ║╚═╝` |
+| `rounded` | `╭─╮│ │╰─╯` |
+| `bold` | `┏━┓┃ ┃┗━┛` |
+
+### Title
+
+```tsx
+<box
+  border
+  title="Settings"
+  titleAlignment="center"   // left | center | right
+>
+  Panel content
+</box>
+```
+
+### Background
+
+```tsx
+<box backgroundColor="#1a1a2e">
+  Dark background
+</box>
+
+<box backgroundColor="transparent">
+  No background
+</box>
+```
+
+### Layout
+
+Boxes are flex containers by default:
+
+```tsx
+<box
+  flexDirection="row"       // row | column | row-reverse | column-reverse
+  justifyContent="center"   // flex-start | flex-end | center | space-between | space-around
+  alignItems="center"       // flex-start | flex-end | center | stretch | baseline
+  gap={2}                   // Space between children
+>
+  <text>Item 1</text>
+  <text>Item 2</text>
+</box>
+```
+
+### Spacing
+
+```tsx
+<box
+  padding={2}               // All sides
+  paddingTop={1}
+  paddingRight={2}
+  paddingBottom={1}
+  paddingLeft={2}
+  paddingX={2}              // Horizontal (left + right)
+  paddingY={1}              // Vertical (top + bottom)
+  margin={1}
+  marginTop={1}
+  marginX={2}               // Horizontal (left + right)
+  marginY={1}               // Vertical (top + bottom)
+>
+  Spaced content
+</box>
+```
+
+### Dimensions
+
+```tsx
+<box
+  width={40}                // Fixed width
+  height={10}               // Fixed height
+  width="50%"               // Percentage of parent
+  minWidth={20}             // Minimum width
+  maxWidth={80}             // Maximum width
+  flexGrow={1}              // Grow to fill space
+>
+  Sized box
+</box>
+```
+
+### Mouse Events
+
+```tsx
+<box
+  onMouseDown={(event) => {
+    console.log("Clicked at:", event.x, event.y)
+  }}
+  onMouseUp={(event) => {}}
+  onMouseMove={(event) => {}}
+>
+  Clickable box
+</box>
+```
+
+### Focusable Boxes
+
+By default, Box elements are not focusable. Set the `focusable` prop to enable focus behavior:
+
+```tsx
+// Make a box focusable - it can receive focus via mouse click
+<box focusable border>
+  <text>Click to focus</text>
+</box>
+
+// Controlled focus state
+const [focused, setFocused] = useState(false)
+
+<box
+  focusable
+  focused={focused}
+  border
+  borderColor={focused ? "#00ff00" : "#888"}
+>
+  <text>{focused ? "Focused!" : "Not focused"}</text>
+</box>
+```
+
+When a focusable Box is clicked, focus bubbles up from the click target to the nearest focusable parent. Use `event.preventDefault()` in `onMouseDown` to prevent auto-focus.
+
+## ScrollBox Component
+
+A scrollable container for content that exceeds the viewport.
+
+### Basic Usage
+
+```tsx
+// React
+<scrollbox height={10}>
+  {items.map((item, i) => (
+    <text key={i}>{item}</text>
+  ))}
+</scrollbox>
+
+// Solid
+<scrollbox height={10}>
+  <For each={items()}>
+    {(item) => <text>{item}</text>}
+  </For>
+</scrollbox>
+
+// Core
+const scrollbox = new ScrollBoxRenderable(renderer, {
+  id: "list",
+  height: 10,
+})
+items.forEach(item => {
+  scrollbox.add(new TextRenderable(renderer, { content: item }))
+})
+```
+
+### Focus for Keyboard Scrolling
+
+```tsx
+<scrollbox focused height={20}>
+  {/* Use arrow keys to scroll */}
+</scrollbox>
+```
+
+### Scrollbar Styling
+
+```tsx
+// React
+<scrollbox
+  style={{
+    rootOptions: {
+      backgroundColor: "#24283b",
+    },
+    wrapperOptions: {
+      backgroundColor: "#1f2335",
+    },
+    viewportOptions: {
+      backgroundColor: "#1a1b26",
+    },
+    contentOptions: {
+      backgroundColor: "#16161e",
+    },
+    scrollbarOptions: {
+      showArrows: true,
+      trackOptions: {
+        foregroundColor: "#7aa2f7",
+        backgroundColor: "#414868",
+      },
+    },
+  }}
+>
+  {content}
+</scrollbox>
+```
+
+### Scroll Position (Core)
+
+```typescript
+const scrollbox = new ScrollBoxRenderable(renderer, {
+  id: "list",
+  height: 20,
+})
+
+// Scroll programmatically
+scrollbox.scrollTo(0)           // Scroll to top
+scrollbox.scrollTo(100)         // Scroll to position
+scrollbox.scrollBy(10)          // Scroll relative
+scrollbox.scrollToBottom()      // Scroll to end
+```
+
+## Composition Patterns
+
+### Card Component
+
+```tsx
+function Card({ title, children }) {
+  return (
+    <box
+      border
+      borderStyle="rounded"
+      padding={2}
+      marginBottom={1}
+    >
+      {title && (
+        <text fg="#00FFFF" bold>
+          {title}
+        </text>
+      )}
+      <box marginTop={title ? 1 : 0}>
+        {children}
+      </box>
+    </box>
+  )
+}
+```
+
+### Panel Component
+
+```tsx
+function Panel({ title, children, width = 40 }) {
+  return (
+    <box
+      border
+      borderStyle="double"
+      width={width}
+      backgroundColor="#1a1a2e"
+    >
+      {title && (
+        <box
+          borderBottom
+          padding={1}
+          backgroundColor="#2a2a4e"
+        >
+          <text bold>{title}</text>
+        </box>
+      )}
+      <box padding={2}>
+        {children}
+      </box>
+    </box>
+  )
+}
+```
+
+### List Container
+
+```tsx
+function List({ items, renderItem }) {
+  return (
+    <scrollbox height={15} focused>
+      {items.map((item, i) => (
+        <box
+          key={i}
+          padding={1}
+          backgroundColor={i % 2 === 0 ? "#222" : "#333"}
+        >
+          {renderItem(item, i)}
+        </box>
+      ))}
+    </scrollbox>
+  )
+}
+```
+
+## Nesting Containers
+
+```tsx
+<box flexDirection="column" height="100%">
+  {/* Header */}
+  <box height={3} border>
+    <text>Header</text>
+  </box>
+  
+  {/* Main area with sidebar */}
+  <box flexDirection="row" flexGrow={1}>
+    <box width={20} border>
+      <text>Sidebar</text>
+    </box>
+    <box flexGrow={1}>
+      <scrollbox height="100%">
+        {/* Scrollable content */}
+      </scrollbox>
+    </box>
+  </box>
+  
+  {/* Footer */}
+  <box height={1}>
+    <text>Footer</text>
+  </box>
+</box>
+```
+
+## Gotchas
+
+### Percentage Dimensions Need Parent Size
+
+```tsx
+// WRONG - parent has no explicit size
+<box>
+  <box width="50%">Won't work</box>
+</box>
+
+// CORRECT
+<box width="100%">
+  <box width="50%">Works</box>
+</box>
+```
+
+### FlexGrow Needs Sized Parent
+
+```tsx
+// WRONG
+<box>
+  <box flexGrow={1}>Won't grow</box>
+</box>
+
+// CORRECT
+<box height="100%">
+  <box flexGrow={1}>Will grow</box>
+</box>
+```
+
+### ScrollBox Needs Height
+
+```tsx
+// WRONG - no height constraint
+<scrollbox>
+  {items}
+</scrollbox>
+
+// CORRECT
+<scrollbox height={20}>
+  {items}
+</scrollbox>
+```
+
+### Borders Add to Size
+
+Borders take up space inside the box:
+
+```tsx
+<box width={10} border>
+  {/* Inner content area is 8 chars (10 - 2 for borders) */}
+</box>
+```
diff --git a/.agents/skills/opentui/references/components/inputs.md b/.agents/skills/opentui/references/components/inputs.md
new file mode 100644
index 0000000..2694b7e
--- /dev/null
+++ b/.agents/skills/opentui/references/components/inputs.md
@@ -0,0 +1,531 @@
+# Input Components
+
+Components for user input in OpenTUI.
+
+## Input Component
+
+Single-line text input field.
+
+### Basic Usage
+
+```tsx
+// React
+<input
+  value={value}
+  onChange={(newValue) => setValue(newValue)}
+  placeholder="Enter text..."
+  focused
+/>
+
+// Solid
+<input
+  value={value()}
+  onInput={(newValue) => setValue(newValue)}
+  placeholder="Enter text..."
+  focused
+/>
+
+// Core
+const input = new InputRenderable(renderer, {
+  id: "name",
+  placeholder: "Enter text...",
+})
+input.on(InputRenderableEvents.CHANGE, (value) => {
+  console.log("Value:", value)
+})
+input.focus()
+```
+
+### Styling
+
+```tsx
+<input
+  width={30}
+  backgroundColor="#1a1a1a"
+  textColor="#FFFFFF"
+  cursorColor="#00FF00"
+  focusedBackgroundColor="#2a2a2a"
+  placeholderColor="#666666"
+/>
+```
+
+### Events
+
+```tsx
+// React
+<input
+  onChange={(value) => console.log("Changed:", value)}
+  onFocus={() => console.log("Focused")}
+  onBlur={() => console.log("Blurred")}
+/>
+
+// Core
+input.on(InputRenderableEvents.CHANGE, (value) => {})
+input.on(InputRenderableEvents.FOCUS, () => {})
+input.on(InputRenderableEvents.BLUR, () => {})
+```
+
+### Controlled Input
+
+```tsx
+// React
+function ControlledInput() {
+  const [value, setValue] = useState("")
+  
+  return (
+    <input
+      value={value}
+      onChange={setValue}
+      focused
+    />
+  )
+}
+
+// Solid
+function ControlledInput() {
+  const [value, setValue] = createSignal("")
+  
+  return (
+    <input
+      value={value()}
+      onInput={setValue}
+      focused
+    />
+  )
+}
+```
+
+## Textarea Component
+
+Multi-line text input field.
+
+### Basic Usage
+
+```tsx
+// React
+<textarea
+  value={text}
+  onChange={(newText) => setText(newText)}
+  placeholder="Enter multiple lines..."
+  width={40}
+  height={10}
+  focused
+/>
+
+// Solid
+<textarea
+  value={text()}
+  onInput={(newText) => setText(newText)}
+  placeholder="Enter multiple lines..."
+  width={40}
+  height={10}
+  focused
+/>
+
+// Core
+const textarea = new TextareaRenderable(renderer, {
+  id: "editor",
+  width: 40,
+  height: 10,
+  placeholder: "Enter text...",
+})
+```
+
+### Features
+
+```tsx
+<textarea
+  showLineNumbers        // Display line numbers
+  wrapText              // Wrap long lines
+  readOnly              // Disable editing
+  tabSize={2}           // Tab character width
+/>
+```
+
+### Syntax Highlighting
+
+```tsx
+<textarea
+  language="typescript"
+  value={code}
+  onChange={setCode}
+/>
+```
+
+## Select Component
+
+List selection for choosing from options.
+
+### Basic Usage
+
+```tsx
+// React
+<select
+  options={[
+    { name: "Option 1", description: "First option", value: "1" },
+    { name: "Option 2", description: "Second option", value: "2" },
+    { name: "Option 3", description: "Third option", value: "3" },
+  ]}
+  onSelect={(index, option) => {
+    console.log("Selected:", option.name)  // Called when Enter is pressed
+  }}
+  focused
+/>
+
+// Solid
+<select
+  options={[
+    { name: "Option 1", description: "First option", value: "1" },
+    { name: "Option 2", description: "Second option", value: "2" },
+  ]}
+  onSelect={(index, option) => {
+    console.log("Selected:", option.name)  // Called when Enter is pressed
+  }}
+  focused
+/>
+
+// Core
+const select = new SelectRenderable(renderer, {
+  id: "menu",
+  options: [
+    { name: "Option 1", description: "First option", value: "1" },
+    { name: "Option 2", description: "Second option", value: "2" },
+  ],
+})
+select.on(SelectRenderableEvents.ITEM_SELECTED, (index, option) => {
+  console.log("Selected:", option.name)  // Called when Enter is pressed
+})
+select.focus()
+```
+
+### Option Format
+
+```typescript
+interface SelectOption {
+  name: string          // Display text
+  description?: string  // Optional description shown below
+  value?: any          // Associated value
+}
+```
+
+### Styling
+
+```tsx
+<select
+  height={8}                    // Visible height
+  selectedIndex={0}             // Initially selected
+  showScrollIndicator           // Show scroll arrows
+  selectedBackgroundColor="#333"
+  selectedTextColor="#fff"
+  highlightBackgroundColor="#444"
+/>
+```
+
+### Navigation
+
+Default keybindings:
+- `Up` / `k` - Move up
+- `Down` / `j` - Move down
+- `Enter` - Select item
+
+### Events
+
+**Important**: `onSelect` and `onChange` serve different purposes:
+
+| Event | Trigger | Use Case |
+|-------|---------|----------|
+| `onSelect` | **Enter key pressed** - user confirms selection | Perform action with selected item |
+| `onChange` | **Arrow keys** - user navigates list | Preview, update UI as user browses |
+
+```tsx
+// React/Solid
+<select
+  onSelect={(index, option) => {
+    // Called when Enter is pressed - selection confirmed
+    console.log("User selected:", option.name)
+    performAction(option)
+  }}
+  onChange={(index, option) => {
+    // Called when navigating with arrow keys
+    console.log("Browsing:", option.name)
+    showPreview(option)
+  }}
+/>
+
+// Core
+select.on(SelectRenderableEvents.ITEM_SELECTED, (index, option) => {
+  // Called when Enter is pressed
+})
+select.on(SelectRenderableEvents.SELECTION_CHANGED, (index, option) => {
+  // Called when navigating with arrow keys
+})
+```
+
+## Tab Select Component
+
+Horizontal tab-based selection.
+
+### Basic Usage
+
+```tsx
+// React
+<tab-select
+  options={[
+    { name: "Home", description: "Dashboard view" },
+    { name: "Settings", description: "Configuration" },
+    { name: "Help", description: "Documentation" },
+  ]}
+  onSelect={(index, option) => {
+    console.log("Tab selected:", option.name)  // Called when Enter is pressed
+  }}
+  focused
+/>
+
+// Solid (note underscore)
+<tab_select
+  options={[
+    { name: "Home", description: "Dashboard view" },
+    { name: "Settings", description: "Configuration" },
+  ]}
+  onSelect={(index, option) => {
+    console.log("Tab selected:", option.name)  // Called when Enter is pressed
+  }}
+  focused
+/>
+
+// Core
+const tabs = new TabSelectRenderable(renderer, {
+  id: "tabs",
+  options: [...],
+  tabWidth: 20,
+})
+tabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index, option) => {
+  console.log("Tab selected:", option.name)  // Called when Enter is pressed
+})
+tabs.focus()
+```
+
+### Events
+
+Same pattern as Select - `onSelect` for Enter key, `onChange` for navigation:
+
+```tsx
+<tab-select
+  onSelect={(index, option) => {
+    // Called when Enter is pressed - switch to tab
+    setActiveTab(index)
+  }}
+  onChange={(index, option) => {
+    // Called when navigating with arrow keys
+    showTabPreview(option)
+  }}
+/>
+```
+
+### Styling
+
+```tsx
+// React
+<tab-select
+  tabWidth={20}                // Width of each tab
+  selectedIndex={0}            // Initially selected tab
+/>
+
+// Solid
+<tab_select
+  tabWidth={20}
+  selectedIndex={0}
+/>
+```
+
+### Navigation
+
+Default keybindings:
+- `Left` / `[` - Previous tab
+- `Right` / `]` - Next tab
+- `Enter` - Select tab
+
+## Focus Management
+
+### Single Focused Input
+
+```tsx
+function SingleInput() {
+  return <input placeholder="I'm focused" focused />
+}
+```
+
+### Multiple Inputs with Focus State
+
+```tsx
+// React
+function Form() {
+  const [focusIndex, setFocusIndex] = useState(0)
+  const fields = ["name", "email", "message"]
+  
+  useKeyboard((key) => {
+    if (key.name === "tab") {
+      setFocusIndex(i => (i + 1) % fields.length)
+    }
+  })
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      {fields.map((field, i) => (
+        <input
+          key={field}
+          placeholder={`Enter ${field}`}
+          focused={i === focusIndex}
+        />
+      ))}
+    </box>
+  )
+}
+```
+
+### Focus Methods (Core)
+
+```typescript
+input.focus()      // Give focus
+input.blur()       // Remove focus
+input.isFocused()  // Check focus state
+```
+
+## Form Patterns
+
+### Login Form
+
+```tsx
+function LoginForm() {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [focusField, setFocusField] = useState<"username" | "password">("username")
+  
+  useKeyboard((key) => {
+    if (key.name === "tab") {
+      setFocusField(f => f === "username" ? "password" : "username")
+    }
+    if (key.name === "enter") {
+      handleLogin()
+    }
+  })
+  
+  return (
+    <box flexDirection="column" gap={1} border padding={2}>
+      <box flexDirection="row" gap={1}>
+        <text>Username:</text>
+        <input
+          value={username}
+          onChange={setUsername}
+          focused={focusField === "username"}
+          width={20}
+        />
+      </box>
+      <box flexDirection="row" gap={1}>
+        <text>Password:</text>
+        <input
+          value={password}
+          onChange={setPassword}
+          focused={focusField === "password"}
+          width={20}
+        />
+      </box>
+    </box>
+  )
+}
+```
+
+### Search with Results
+
+```tsx
+function SearchableList({ items, onItemSelected }) {
+  const [query, setQuery] = useState("")
+  const [focusSearch, setFocusSearch] = useState(true)
+  const [preview, setPreview] = useState(null)
+  
+  const filtered = items.filter(item =>
+    item.toLowerCase().includes(query.toLowerCase())
+  )
+  
+  useKeyboard((key) => {
+    if (key.name === "tab") {
+      setFocusSearch(f => !f)
+    }
+  })
+  
+  return (
+    <box flexDirection="column">
+      <input
+        value={query}
+        onChange={setQuery}
+        placeholder="Search..."
+        focused={focusSearch}
+      />
+      <select
+        options={filtered.map(item => ({ name: item }))}
+        focused={!focusSearch}
+        height={10}
+        onSelect={(index, option) => {
+          // Enter pressed - confirm selection
+          onItemSelected(option)
+        }}
+        onChange={(index, option) => {
+          // Navigating - show preview
+          setPreview(option)
+        }}
+      />
+    </box>
+  )
+}
+```
+
+## Gotchas
+
+### Focus Required
+
+Inputs must be focused to receive keyboard input:
+
+```tsx
+// WRONG - won't receive input
+<input placeholder="Type here" />
+
+// CORRECT
+<input placeholder="Type here" focused />
+```
+
+### Select Options Format
+
+Options must be objects with `name` property:
+
+```tsx
+// WRONG
+<select options={["a", "b", "c"]} />
+
+// CORRECT
+<select options={[
+  { name: "A", description: "Option A" },
+  { name: "B", description: "Option B" },
+]} />
+```
+
+### Solid Uses Underscores
+
+```tsx
+// React
+<tab-select />
+
+// Solid
+<tab_select />
+```
+
+### Value vs onInput (Solid)
+
+Solid uses `onInput` instead of `onChange`:
+
+```tsx
+// React
+<input value={value} onChange={setValue} />
+
+// Solid
+<input value={value()} onInput={setValue} />
+```
diff --git a/.agents/skills/opentui/references/components/text-display.md b/.agents/skills/opentui/references/components/text-display.md
new file mode 100644
index 0000000..7ac298e
--- /dev/null
+++ b/.agents/skills/opentui/references/components/text-display.md
@@ -0,0 +1,384 @@
+# Text & Display Components
+
+Components for displaying text content in OpenTUI.
+
+## Text Component
+
+The primary component for displaying styled text.
+
+### Basic Usage
+
+```tsx
+// React/Solid
+<text>Hello, World!</text>
+
+// With content prop
+<text content="Hello, World!" />
+
+// Core
+const text = new TextRenderable(renderer, {
+  id: "greeting",
+  content: "Hello, World!",
+})
+```
+
+### Styling (React/Solid)
+
+For React and Solid, use **nested modifier tags** for text styling:
+
+```tsx
+<text fg="#FFFFFF" bg="#000000">
+  <strong>Bold</strong>, <em>italic</em>, and <u>underlined</u>
+</text>
+```
+
+> **Important**: Do NOT use `bold`, `italic`, `underline`, `dim`, `strikethrough` as props on `<text>` — they don't work. Always use nested tags like `<strong>`, `<em>`, `<u>`, or `<span>` with styling.
+
+### Styling (Core) - Text Attributes
+
+```typescript
+import { TextRenderable, TextAttributes } from "@opentui/core"
+
+const text = new TextRenderable(renderer, {
+  content: "Styled",
+  attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
+})
+```
+
+**Available attributes:**
+- `TextAttributes.BOLD`
+- `TextAttributes.DIM`
+- `TextAttributes.ITALIC`
+- `TextAttributes.UNDERLINE`
+- `TextAttributes.BLINK`
+- `TextAttributes.INVERSE`
+- `TextAttributes.HIDDEN`
+- `TextAttributes.STRIKETHROUGH`
+
+### Text Selection
+
+```tsx
+<text selectable>
+  This text can be selected by the user
+</text>
+
+<text selectable={false}>
+  This text cannot be selected
+</text>
+```
+
+## Text Modifiers
+
+Inline styling elements that must be used inside `<text>`:
+
+### Span
+
+Inline styled text:
+
+```tsx
+<text>
+  Normal text with <span fg="red">red text</span> inline
+</text>
+```
+
+### Bold/Strong
+
+```tsx
+<text>
+  <strong>Bold text</strong>
+  <b>Also bold</b>
+</text>
+```
+
+### Italic/Emphasis
+
+```tsx
+<text>
+  <em>Italic text</em>
+  <i>Also italic</i>
+</text>
+```
+
+### Underline
+
+```tsx
+<text>
+  <u>Underlined text</u>
+</text>
+```
+
+### Line Break
+
+```tsx
+<text>
+  Line one
+  <br />
+  Line two
+</text>
+```
+
+### Link
+
+```tsx
+<text>
+  Visit <a href="https://example.com">our website</a>
+</text>
+```
+
+### Combined Modifiers
+
+```tsx
+<text>
+  <span fg="#00FF00">
+    <strong>Bold green</strong>
+  </span>
+  and
+  <span fg="#FF0000">
+    <em><u>italic underlined red</u></em>
+  </span>
+</text>
+```
+
+## Styled Text Template (Core)
+
+The `t` template literal for complex styling:
+
+```typescript
+import { t, bold, italic, underline, fg, bg, dim } from "@opentui/core"
+
+const styled = t`
+  ${bold("Bold")} and ${italic("italic")} text.
+  ${fg("#FF0000")("Red text")} with ${bg("#0000FF")("blue background")}.
+  ${dim("Dimmed")} and ${underline("underlined")}.
+`
+
+const text = new TextRenderable(renderer, {
+  content: styled,
+})
+```
+
+### Style Functions
+
+| Function | Description |
+|----------|-------------|
+| `bold(text)` | Bold text |
+| `italic(text)` | Italic text |
+| `underline(text)` | Underlined text |
+| `dim(text)` | Dimmed text |
+| `strikethrough(text)` | Strikethrough text |
+| `fg(color)(text)` | Set foreground color |
+| `bg(color)(text)` | Set background color |
+
+## ASCII Font Component
+
+Display large ASCII art text banners.
+
+### Basic Usage
+
+```tsx
+// React
+<ascii-font text="TITLE" font="tiny" />
+
+// Solid
+<ascii_font text="TITLE" font="tiny" />
+
+// Core
+const title = new ASCIIFontRenderable(renderer, {
+  id: "title",
+  text: "TITLE",
+  font: "tiny",
+})
+```
+
+### Available Fonts
+
+| Font | Description |
+|------|-------------|
+| `tiny` | Compact ASCII font |
+| `block` | Block-style letters |
+| `slick` | Sleek modern style |
+| `shade` | Shaded 3D effect |
+
+### Styling
+
+```tsx
+// React
+<ascii-font
+  text="HELLO"
+  font="block"
+  color="#00FF00"
+/>
+
+// Core
+import { RGBA } from "@opentui/core"
+
+const title = new ASCIIFontRenderable(renderer, {
+  text: "HELLO",
+  font: "block",
+  color: RGBA.fromHex("#00FF00"),
+})
+```
+
+### Example Output
+
+```
+Font: tiny
+╭─╮╭─╮╭─╮╭╮╭╮╭─╮╶╮╶ ╶╮
+│ ││─┘├┤ │╰╯││  │  │
+╰─╯╵  ╰─╯╵  ╵╰─╯╶╯╶╰─╯
+
+Font: block
+█▀▀█ █▀▀█ █▀▀ █▀▀▄
+█  █ █▀▀▀ █▀▀ █  █
+▀▀▀▀ ▀    ▀▀▀ ▀  ▀
+```
+
+## Colors
+
+### Color Formats
+
+```tsx
+// Hex colors
+<text fg="#FF0000">Red</text>
+<text fg="#F00">Short hex</text>
+
+// Named colors
+<text fg="red">Red</text>
+<text fg="blue">Blue</text>
+
+// Transparent
+<text bg="transparent">No background</text>
+```
+
+### RGBA Class
+
+The `RGBA` class from `@opentui/core` can be used in **all frameworks** (Core, React, Solid) for programmatic color manipulation:
+
+```typescript
+import { RGBA } from "@opentui/core"
+
+// From hex string (most common)
+const red = RGBA.fromHex("#FF0000")
+const shortHex = RGBA.fromHex("#F00")       // Short form supported
+
+// From integers (0-255 range for each channel)
+const green = RGBA.fromInts(0, 255, 0, 255)   // r, g, b, a
+const semiGreen = RGBA.fromInts(0, 255, 0, 128) // 50% transparent
+
+// From normalized floats (0.0-1.0 range)
+const blue = RGBA.fromValues(0.0, 0.0, 1.0, 1.0)  // r, g, b, a
+const overlay = RGBA.fromValues(0.1, 0.1, 0.1, 0.7) // Dark semi-transparent
+
+// Common use cases
+const backgroundColor = RGBA.fromHex("#1a1a2e")
+const textColor = RGBA.fromHex("#FFFFFF")
+const borderColor = RGBA.fromInts(122, 162, 247, 255) // Tokyo Night blue
+const shadowColor = RGBA.fromValues(0.0, 0.0, 0.0, 0.5) // 50% black
+```
+
+**When to use each method:**
+- `fromHex()` - When working with design specs or CSS colors
+- `fromInts()` - When you have 8-bit color values (0-255)
+- `fromValues()` - When doing color math or interpolation (normalized 0.0-1.0)
+
+### Using RGBA in React/Solid
+
+```tsx
+// React or Solid - RGBA works with color props
+import { RGBA } from "@opentui/core"
+
+const primaryColor = RGBA.fromHex("#7aa2f7")
+
+function MyComponent() {
+  return (
+    <box backgroundColor={primaryColor} borderColor={primaryColor}>
+      <text fg={RGBA.fromHex("#c0caf5")}>Styled with RGBA</text>
+    </box>
+  )
+}
+```
+
+Most props that accept color strings (`"#FF0000"`, `"red"`) also accept `RGBA` objects directly.
+
+## Text Wrapping
+
+Text wraps based on parent container:
+
+```tsx
+<box width={40}>
+  <text>
+    This long text will wrap when it reaches the edge of the 
+    40-character wide parent container.
+  </text>
+</box>
+```
+
+## Dynamic Content
+
+### React
+
+```tsx
+function Counter() {
+  const [count, setCount] = useState(0)
+  return <text>Count: {count}</text>
+}
+```
+
+### Solid
+
+```tsx
+function Counter() {
+  const [count, setCount] = createSignal(0)
+  return <text>Count: {count()}</text>
+}
+```
+
+### Core
+
+```typescript
+const text = new TextRenderable(renderer, {
+  id: "counter",
+  content: "Count: 0",
+})
+
+// Update later
+text.setContent("Count: 1")
+```
+
+## Gotchas
+
+### Text Modifiers Outside Text
+
+```tsx
+// WRONG - modifiers only work inside <text>
+<box>
+  <strong>Won't work</strong>
+</box>
+
+// CORRECT
+<box>
+  <text>
+    <strong>This works</strong>
+  </text>
+</box>
+```
+
+### Empty Text
+
+```tsx
+// May cause layout issues
+<text></text>
+
+// Better - use space or conditional
+<text>{content || " "}</text>
+```
+
+### Color Format
+
+```tsx
+// WRONG
+<text fg="FF0000">Missing #</text>
+
+// CORRECT
+<text fg="#FF0000">With #</text>
+```
diff --git a/.agents/skills/opentui/references/core/REFERENCE.md b/.agents/skills/opentui/references/core/REFERENCE.md
new file mode 100644
index 0000000..2b86481
--- /dev/null
+++ b/.agents/skills/opentui/references/core/REFERENCE.md
@@ -0,0 +1,145 @@
+# OpenTUI Core (@opentui/core)
+
+The foundational library for building terminal user interfaces. Provides an imperative API with all primitives, giving you maximum control over rendering, state, and behavior.
+
+## Overview
+
+OpenTUI Core runs on Bun with native Zig bindings for performance-critical operations:
+- **Renderer**: Manages terminal output, input events, and the rendering loop
+- **Renderables**: Hierarchical UI building blocks with Yoga layout
+- **Constructs**: Declarative wrappers for composing Renderables
+- **FrameBuffer**: Low-level 2D rendering surface for custom graphics
+
+## When to Use Core
+
+Use the core imperative API when:
+- Building a library or framework on top of OpenTUI
+- Need maximum control over rendering and state
+- Want smallest possible bundle size (no React/Solid runtime)
+- Building performance-critical applications
+- Integrating with existing imperative codebases
+
+## When NOT to Use Core
+
+| Scenario | Use Instead |
+|----------|-------------|
+| Familiar with React patterns | `@opentui/react` |
+| Want fine-grained reactivity | `@opentui/solid` |
+| Building typical applications | React or Solid reconciler |
+| Rapid prototyping | React or Solid reconciler |
+
+## Quick Start
+
+### Using create-tui (Recommended)
+
+```bash
+bunx create-tui@latest -t core my-app
+cd my-app
+bun run src/index.ts
+```
+
+The CLI creates the `my-app` directory for you - it must **not already exist**.
+
+**Agent guidance**: Always use autonomous mode with `-t <template>` flag. Never use interactive mode (`bunx create-tui@latest my-app` without `-t`) as it requires user prompts that agents cannot respond to.
+
+### Manual Setup
+
+```bash
+mkdir my-tui && cd my-tui
+bun init
+bun install @opentui/core
+```
+
+```typescript
+import { createCliRenderer, TextRenderable, BoxRenderable } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+
+// Create a box container
+const container = new BoxRenderable(renderer, {
+  id: "container",
+  width: 40,
+  height: 10,
+  border: true,
+  borderStyle: "rounded",
+  padding: 1,
+})
+
+// Create text inside the box
+const greeting = new TextRenderable(renderer, {
+  id: "greeting",
+  content: "Hello, OpenTUI!",
+  fg: "#00FF00",
+})
+
+// Compose the tree
+container.add(greeting)
+renderer.root.add(container)
+```
+
+## Core Concepts
+
+### Renderer
+
+The `CliRenderer` orchestrates everything:
+- Manages the terminal viewport and alternate screen
+- Handles input events (keyboard, mouse, paste)
+- Runs the rendering loop (configurable FPS)
+- Provides the root node for the renderable tree
+
+### Renderables vs Constructs
+
+| Renderables (Imperative) | Constructs (Declarative) |
+|--------------------------|--------------------------|
+| `new TextRenderable(renderer, {...})` | `Text({...})` |
+| Requires renderer at creation | Creates VNode, instantiated later |
+| Direct mutation via methods | Chained calls recorded, replayed on instantiation |
+| Full control | Cleaner composition |
+
+### Storage Options
+
+Renderables can be composed in two ways:
+1. **Imperative**: Create instances, call `.add()` to compose
+2. **Declarative (Constructs)**: Create VNodes, pass children as arguments
+
+## Essential Commands
+
+```bash
+bun install @opentui/core     # Install
+bun run src/index.ts          # Run directly (no build needed)
+bun test                      # Run tests
+```
+
+## Runtime Requirements
+
+OpenTUI runs on Bun and uses Zig for native builds.
+
+```bash
+# Package management
+bun install @opentui/core
+
+# Running
+bun run src/index.ts
+bun test
+
+# Building (only needed for native code changes)
+bun run build
+```
+
+**Zig** is required for building native components.
+
+## In This Reference
+
+- [Configuration](./configuration.md) - Renderer options, environment variables
+- [API](./api.md) - Renderer, Renderables, types, utilities
+- [Patterns](./patterns.md) - Composition, events, state management
+- [Gotchas](./gotchas.md) - Common issues, debugging, limitations
+
+## See Also
+
+- [React](../react/REFERENCE.md) - React reconciler for declarative TUI
+- [Solid](../solid/REFERENCE.md) - Solid reconciler for declarative TUI
+- [Layout](../layout/REFERENCE.md) - Yoga/Flexbox layout system
+- [Components](../components/REFERENCE.md) - Component reference by category
+- [Keyboard](../keyboard/REFERENCE.md) - Input handling and shortcuts
+- [Testing](../testing/REFERENCE.md) - Test renderer and snapshots
diff --git a/.agents/skills/opentui/references/core/api.md b/.agents/skills/opentui/references/core/api.md
new file mode 100644
index 0000000..db3de7e
--- /dev/null
+++ b/.agents/skills/opentui/references/core/api.md
@@ -0,0 +1,506 @@
+# Core API Reference
+
+## Renderer
+
+### createCliRenderer(config?)
+
+Creates and initializes the CLI renderer.
+
+```typescript
+import { createCliRenderer, type CliRendererConfig } from "@opentui/core"
+
+const renderer = await createCliRenderer({
+  targetFPS: 60,              // Target frames per second
+  exitOnCtrlC: true,          // Exit process on Ctrl+C
+  consoleOptions: {           // Debug console overlay
+    position: ConsolePosition.BOTTOM,
+    sizePercent: 30,
+    startInDebugMode: false,
+  },
+  onDestroy: () => {},        // Cleanup callback
+})
+```
+
+### CliRenderer Instance
+
+```typescript
+renderer.root              // Root renderable node
+renderer.width             // Terminal width in columns
+renderer.height            // Terminal height in rows
+renderer.keyInput          // Keyboard event emitter
+renderer.console           // Console overlay controller
+
+renderer.start()           // Start render loop
+renderer.stop()            // Stop render loop
+renderer.destroy()         // Cleanup and exit alternate screen
+renderer.requestRender()   // Request a re-render
+```
+
+### Console Overlay
+
+```typescript
+renderer.console.show()    // Show console overlay
+renderer.console.hide()    // Hide console overlay
+renderer.console.toggle()  // Toggle visibility/focus
+renderer.console.clear()   // Clear console contents
+```
+
+## Renderables
+
+All renderables extend the base `Renderable` class and share common properties.
+
+### Common Properties
+
+```typescript
+interface CommonProps {
+  id?: string                    // Unique identifier
+  
+  // Positioning
+  position?: "relative" | "absolute"
+  left?: number | string
+  top?: number | string
+  right?: number | string
+  bottom?: number | string
+  
+  // Dimensions
+  width?: number | string | "auto"
+  height?: number | string | "auto"
+  minWidth?: number
+  minHeight?: number
+  maxWidth?: number
+  maxHeight?: number
+  
+  // Flexbox
+  flexDirection?: "row" | "column" | "row-reverse" | "column-reverse"
+  flexGrow?: number
+  flexShrink?: number
+  flexBasis?: number | string
+  flexWrap?: "nowrap" | "wrap" | "wrap-reverse"
+  justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"
+  alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
+  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
+  alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around"
+  
+  // Spacing
+  padding?: number
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  margin?: number
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+  gap?: number
+  
+  // Display
+  display?: "flex" | "none"
+  overflow?: "visible" | "hidden" | "scroll"
+  zIndex?: number
+}
+```
+
+### Renderable Methods
+
+```typescript
+renderable.add(child)              // Add child renderable
+renderable.remove(child)           // Remove child renderable
+renderable.getRenderable(id)       // Find child by ID
+renderable.focus()                 // Focus this renderable
+renderable.blur()                  // Remove focus
+renderable.destroy()               // Destroy and cleanup
+
+renderable.on(event, handler)      // Add event listener
+renderable.off(event, handler)     // Remove event listener
+renderable.emit(event, ...args)    // Emit event
+```
+
+### TextRenderable
+
+Display styled text content.
+
+```typescript
+import { TextRenderable, TextAttributes, t, bold, fg, underline } from "@opentui/core"
+
+const text = new TextRenderable(renderer, {
+  id: "text",
+  content: "Hello World",
+  fg: "#FFFFFF",                   // Foreground color
+  bg: "#000000",                   // Background color
+  attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
+  selectable: true,                // Allow text selection
+})
+
+// Styled text with template literals
+const styled = new TextRenderable(renderer, {
+  content: t`${bold("Bold")} and ${fg("#FF0000")(underline("red underlined"))}`,
+})
+```
+
+**TextAttributes flags:**
+- `TextAttributes.BOLD`
+- `TextAttributes.DIM`
+- `TextAttributes.ITALIC`
+- `TextAttributes.UNDERLINE`
+- `TextAttributes.BLINK`
+- `TextAttributes.INVERSE`
+- `TextAttributes.HIDDEN`
+- `TextAttributes.STRIKETHROUGH`
+
+### BoxRenderable
+
+Container with borders and layout.
+
+```typescript
+import { BoxRenderable } from "@opentui/core"
+
+const box = new BoxRenderable(renderer, {
+  id: "box",
+  width: 40,
+  height: 10,
+  backgroundColor: "#1a1a2e",
+  border: true,
+  borderStyle: "single" | "double" | "rounded" | "bold" | "none",
+  borderColor: "#FFFFFF",
+  title: "Panel Title",
+  titleAlignment: "left" | "center" | "right",
+  onMouseDown: (event) => {},
+  onMouseUp: (event) => {},
+  onMouseMove: (event) => {},
+})
+```
+
+### InputRenderable
+
+Single-line text input.
+
+```typescript
+import { InputRenderable, InputRenderableEvents } from "@opentui/core"
+
+const input = new InputRenderable(renderer, {
+  id: "input",
+  width: 30,
+  placeholder: "Enter text...",
+  value: "",                       // Initial value
+  backgroundColor: "#1a1a1a",
+  textColor: "#FFFFFF",
+  cursorColor: "#00FF00",
+  focusedBackgroundColor: "#2a2a2a",
+})
+
+input.on(InputRenderableEvents.CHANGE, (value: string) => {
+  console.log("Value:", value)
+})
+
+input.focus()  // Must be focused to receive input
+```
+
+### SelectRenderable
+
+List selection component.
+
+```typescript
+import { SelectRenderable, SelectRenderableEvents } from "@opentui/core"
+
+const select = new SelectRenderable(renderer, {
+  id: "select",
+  width: 30,
+  height: 10,
+  options: [
+    { name: "Option 1", description: "First option", value: "1" },
+    { name: "Option 2", description: "Second option", value: "2" },
+  ],
+  selectedIndex: 0,
+})
+
+// Called when Enter is pressed - selection confirmed
+select.on(SelectRenderableEvents.ITEM_SELECTED, (index, option) => {
+  console.log("Selected:", option.name)
+  performAction(option)
+})
+
+// Called when navigating with arrow keys
+select.on(SelectRenderableEvents.SELECTION_CHANGED, (index, option) => {
+  console.log("Browsing:", option.name)
+  showPreview(option)
+})
+
+select.focus()  // Navigate with up/down/j/k, select with enter
+```
+
+**Event distinction:**
+- `ITEM_SELECTED` - Enter key pressed, user confirms selection
+- `SELECTION_CHANGED` - Arrow keys, user navigating/browsing options
+
+### TabSelectRenderable
+
+Horizontal tab selection.
+
+```typescript
+import { TabSelectRenderable, TabSelectRenderableEvents } from "@opentui/core"
+
+const tabs = new TabSelectRenderable(renderer, {
+  id: "tabs",
+  width: 60,
+  options: [
+    { name: "Home", description: "Dashboard" },
+    { name: "Settings", description: "Configuration" },
+  ],
+  tabWidth: 20,
+})
+
+// Called when Enter is pressed - tab selected
+tabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index, option) => {
+  console.log("Tab selected:", option.name)
+  switchToTab(index)
+})
+
+// Called when navigating with arrow keys
+tabs.on(TabSelectRenderableEvents.SELECTION_CHANGED, (index, option) => {
+  console.log("Browsing tab:", option.name)
+})
+
+tabs.focus()  // Navigate with left/right/[/], select with enter
+```
+
+**Event distinction** (same as SelectRenderable):
+- `ITEM_SELECTED` - Enter key pressed, user confirms tab
+- `SELECTION_CHANGED` - Arrow keys, user navigating tabs
+
+### ScrollBoxRenderable
+
+Scrollable container.
+
+```typescript
+import { ScrollBoxRenderable } from "@opentui/core"
+
+const scrollbox = new ScrollBoxRenderable(renderer, {
+  id: "scrollbox",
+  width: 40,
+  height: 20,
+  showScrollbar: true,
+  scrollbarOptions: {
+    showArrows: true,
+    trackOptions: {
+      foregroundColor: "#7aa2f7",
+      backgroundColor: "#414868",
+    },
+  },
+})
+
+// Add content that exceeds viewport
+for (let i = 0; i < 100; i++) {
+  scrollbox.add(new TextRenderable(renderer, {
+    id: `line-${i}`,
+    content: `Line ${i}`,
+  }))
+}
+
+scrollbox.focus()  // Scroll with arrow keys
+```
+
+### ASCIIFontRenderable
+
+ASCII art text.
+
+```typescript
+import { ASCIIFontRenderable, RGBA } from "@opentui/core"
+
+const title = new ASCIIFontRenderable(renderer, {
+  id: "title",
+  text: "OPENTUI",
+  font: "tiny" | "block" | "slick" | "shade",
+  color: RGBA.fromHex("#FFFFFF"),
+})
+```
+
+### FrameBufferRenderable
+
+Low-level 2D rendering surface.
+
+```typescript
+import { FrameBufferRenderable, RGBA } from "@opentui/core"
+
+const canvas = new FrameBufferRenderable(renderer, {
+  id: "canvas",
+  width: 50,
+  height: 20,
+})
+
+// Direct pixel manipulation
+canvas.frameBuffer.fillRect(10, 5, 20, 8, RGBA.fromHex("#FF0000"))
+canvas.frameBuffer.drawText("Custom", 12, 7, RGBA.fromHex("#FFFFFF"))
+canvas.frameBuffer.setCell(x, y, char, fg, bg)
+```
+
+## Constructs (VNode API)
+
+Declarative wrappers that create VNodes instead of direct instances.
+
+```typescript
+import { Text, Box, Input, Select, instantiate, delegate } from "@opentui/core"
+
+// Create VNode tree
+const ui = Box(
+  { border: true, padding: 1 },
+  Text({ content: "Hello" }),
+  Input({ placeholder: "Type here..." }),
+)
+
+// Instantiate onto renderer
+renderer.root.add(ui)
+
+// Delegate focus to nested element
+const form = delegate(
+  { focus: "email-input" },
+  Box(
+    {},
+    Text({ content: "Email:" }),
+    Input({ id: "email-input", placeholder: "you@example.com" }),
+  ),
+)
+form.focus()  // Focuses the input, not the box
+```
+
+## Colors (RGBA)
+
+The `RGBA` class is exported from `@opentui/core` but works across **all frameworks** (Core, React, Solid). Use it for programmatic color manipulation.
+
+### Creating Colors
+
+```typescript
+import { RGBA, parseColor } from "@opentui/core"
+
+// From hex string (most common)
+RGBA.fromHex("#FF0000")           // Full hex
+RGBA.fromHex("#F00")              // Short hex
+
+// From integers (0-255 range)
+RGBA.fromInts(255, 0, 0, 255)     // r, g, b, a - fully opaque red
+RGBA.fromInts(255, 0, 0, 128)     // 50% transparent red
+RGBA.fromInts(0, 0, 0, 0)         // Fully transparent
+
+// From normalized floats (0.0-1.0 range)
+RGBA.fromValues(1.0, 0.0, 0.0, 1.0)   // Fully opaque red
+RGBA.fromValues(0.1, 0.1, 0.1, 0.7)   // Dark gray, 70% opaque
+RGBA.fromValues(0.0, 0.5, 1.0, 1.0)   // Light blue
+```
+
+### Common Color Patterns
+
+```typescript
+// Theme colors
+const primary = RGBA.fromHex("#7aa2f7")      // Tokyo Night blue
+const background = RGBA.fromHex("#1a1a2e")
+const foreground = RGBA.fromHex("#c0caf5")
+const error = RGBA.fromHex("#f7768e")
+
+// Overlays and shadows
+const modalOverlay = RGBA.fromValues(0.0, 0.0, 0.0, 0.5)  // 50% black
+const shadow = RGBA.fromInts(0, 0, 0, 77)                  // 30% black
+
+// Borders
+const activeBorder = RGBA.fromHex("#7aa2f7")
+const inactiveBorder = RGBA.fromInts(65, 72, 104, 255)
+```
+
+### parseColor Utility
+
+```typescript
+// Accepts multiple formats
+parseColor("#FF0000")             // Hex string
+parseColor("red")                 // CSS color name
+parseColor("transparent")         // Special values
+parseColor(RGBA.fromHex("#F00"))  // Pass-through RGBA objects
+```
+
+### When to Use Each Method
+
+| Method | Use When |
+|--------|----------|
+| `fromHex()` | Working with design specs, CSS colors, config files |
+| `fromInts()` | You have 8-bit values (0-255), common in graphics |
+| `fromValues()` | Doing color interpolation, animations, math |
+| `parseColor()` | Accepting user input or config that could be any format |
+
+### Using RGBA in React/Solid
+
+```tsx
+// Import from @opentui/core, use in any framework
+import { RGBA } from "@opentui/core"
+
+// React or Solid component
+function ThemedBox() {
+  const bg = RGBA.fromHex("#1a1a2e")
+  const border = RGBA.fromInts(122, 162, 247, 255)
+  
+  return (
+    <box backgroundColor={bg} borderColor={border} border>
+      <text fg={RGBA.fromHex("#c0caf5")}>Works everywhere!</text>
+    </box>
+  )
+}
+```
+
+Color props in React/Solid accept both string formats (`"#FF0000"`, `"red"`) and `RGBA` objects.
+
+## Keyboard Input
+
+```typescript
+import { type KeyEvent } from "@opentui/core"
+
+renderer.keyInput.on("keypress", (key: KeyEvent) => {
+  console.log(key.name)           // "a", "escape", "f1", etc.
+  console.log(key.sequence)       // Raw escape sequence
+  console.log(key.ctrl)           // Ctrl held
+  console.log(key.shift)          // Shift held
+  console.log(key.meta)           // Alt held
+  console.log(key.option)         // Option held (macOS)
+  console.log(key.eventType)      // "press" | "release" | "repeat"
+})
+
+renderer.keyInput.on("paste", (text: string) => {
+  console.log("Pasted:", text)
+})
+```
+
+## Animation Timeline
+
+```typescript
+import { Timeline, engine } from "@opentui/core"
+
+const timeline = new Timeline({
+  duration: 2000,
+  loop: false,
+  autoplay: true,
+})
+
+timeline.add(
+  { width: 0 },
+  {
+    width: 50,
+    duration: 1000,
+    ease: "easeOutQuad",
+    onUpdate: (anim) => {
+      box.setWidth(anim.targets[0].width)
+    },
+  },
+)
+
+engine.attach(renderer)
+engine.addTimeline(timeline)
+```
+
+## Type Exports
+
+```typescript
+import type {
+  CliRenderer,
+  CliRendererConfig,
+  RenderContext,
+  KeyEvent,
+  Renderable,
+  // ... and more
+} from "@opentui/core"
+```
diff --git a/.agents/skills/opentui/references/core/configuration.md b/.agents/skills/opentui/references/core/configuration.md
new file mode 100644
index 0000000..f827a6c
--- /dev/null
+++ b/.agents/skills/opentui/references/core/configuration.md
@@ -0,0 +1,166 @@
+# Core Configuration
+
+## Renderer Configuration
+
+### createCliRenderer Options
+
+```typescript
+import { createCliRenderer, ConsolePosition } from "@opentui/core"
+
+const renderer = await createCliRenderer({
+  // Rendering
+  targetFPS: 60,                    // Target frames per second (default: 60)
+  
+  // Behavior
+  exitOnCtrlC: true,                // Exit on Ctrl+C (default: true)
+  
+  // Console overlay
+  consoleOptions: {
+    position: ConsolePosition.BOTTOM,  // BOTTOM | TOP | LEFT | RIGHT
+    sizePercent: 30,                   // Percentage of screen
+    colorInfo: "#00FFFF",
+    colorWarn: "#FFFF00",
+    colorError: "#FF0000",
+    colorDebug: "#888888",
+    startInDebugMode: false,
+  },
+  
+  // Lifecycle
+  onDestroy: () => {
+    // Cleanup callback
+  },
+})
+```
+
+## Environment Variables
+
+OpenTUI respects several environment variables for configuration and debugging.
+
+### Debug & Development
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `OTUI_DEBUG` | boolean | false | Enable debug mode, capture raw input |
+| `OTUI_DEBUG_FFI` | boolean | false | Debug logging for FFI bindings |
+| `OTUI_TRACE_FFI` | boolean | false | Tracing for FFI bindings |
+| `OTUI_SHOW_STATS` | boolean | false | Show debug overlay at startup |
+| `OTUI_DUMP_CAPTURES` | boolean | false | Dump captured output on exit |
+
+### Console
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `OTUI_USE_CONSOLE` | boolean | true | Enable console capture |
+| `SHOW_CONSOLE` | boolean | false | Show console at startup |
+
+### Rendering
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `OTUI_NO_NATIVE_RENDER` | boolean | false | Disable ANSI output (for debugging) |
+| `OTUI_USE_ALTERNATE_SCREEN` | boolean | true | Use alternate screen buffer |
+| `OTUI_OVERRIDE_STDOUT` | boolean | true | Override stdout stream |
+
+### Terminal Capabilities
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `OPENTUI_NO_GRAPHICS` | boolean | false | Disable Kitty graphics protocol |
+| `OPENTUI_FORCE_UNICODE` | boolean | false | Force Mode 2026 Unicode support |
+| `OPENTUI_FORCE_WCWIDTH` | boolean | false | Use wcwidth for character width |
+| `OPENTUI_FORCE_NOZWJ` | boolean | false | Disable ZWJ emoji joining |
+| `OPENTUI_FORCE_EXPLICIT_WIDTH` | string | - | Force explicit width ("true"/"false") |
+
+### Tree-sitter (Syntax Highlighting)
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `OTUI_TS_STYLE_WARN` | boolean | false | Warn on missing syntax styles |
+| `OTUI_TREE_SITTER_WORKER_PATH` | string | "" | Custom tree-sitter worker path |
+
+### XDG Paths
+
+| Variable | Type | Default | Description |
+|----------|------|---------|-------------|
+| `XDG_CONFIG_HOME` | string | "" | User config directory |
+| `XDG_DATA_HOME` | string | "" | User data directory |
+
+## Usage Examples
+
+### Development Mode
+
+```bash
+# Show debug overlay and console
+OTUI_SHOW_STATS=true SHOW_CONSOLE=true bun run src/index.ts
+
+# Debug FFI issues
+OTUI_DEBUG_FFI=true OTUI_TRACE_FFI=true bun run src/index.ts
+
+# Disable native rendering for testing
+OTUI_NO_NATIVE_RENDER=true bun run src/index.ts
+```
+
+### Terminal Compatibility
+
+```bash
+# Force wcwidth for problematic terminals
+OPENTUI_FORCE_WCWIDTH=true bun run src/index.ts
+
+# Disable graphics for SSH sessions
+OPENTUI_NO_GRAPHICS=true bun run src/index.ts
+```
+
+## Project Setup
+
+### package.json
+
+```json
+{
+  "name": "my-tui-app",
+  "type": "module",
+  "scripts": {
+    "start": "bun run src/index.ts",
+    "dev": "bun --watch run src/index.ts",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@opentui/core": "latest"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "latest"
+  }
+}
+```
+
+### tsconfig.json
+
+```json
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"]
+}
+```
+
+## Building Native Code
+
+Native code changes require rebuilding:
+
+```bash
+# From repo root (if developing OpenTUI itself)
+bun run build
+
+# Zig is required for native compilation
+# Install: https://ziglang.org/learn/getting-started/
+```
+
+**Note**: TypeScript changes do NOT require building. Bun runs TypeScript directly.
diff --git a/.agents/skills/opentui/references/core/gotchas.md b/.agents/skills/opentui/references/core/gotchas.md
new file mode 100644
index 0000000..e18598b
--- /dev/null
+++ b/.agents/skills/opentui/references/core/gotchas.md
@@ -0,0 +1,393 @@
+# Core Gotchas
+
+## Runtime Environment
+
+### Use Bun, Not Node.js
+
+OpenTUI is built for Bun. Always use Bun commands:
+
+```bash
+# CORRECT
+bun install @opentui/core
+bun run src/index.ts
+bun test
+
+# WRONG
+npm install @opentui/core
+node src/index.ts
+npx jest
+```
+
+### Bun APIs to Use
+
+Prefer Bun's built-in APIs:
+
+```typescript
+// CORRECT - Bun APIs
+Bun.file("path").text()           // Instead of fs.readFile
+Bun.serve({ ... })                // Instead of express
+Bun.$`ls -la`                     // Instead of execa
+import { Database } from "bun:sqlite"  // Instead of better-sqlite3
+
+// WRONG - Node.js patterns
+import fs from "node:fs"
+import express from "express"
+```
+
+### Avoid process.exit()
+
+**Never use `process.exit()` directly** - it prevents proper terminal cleanup and can leave the terminal in a broken state (alternate screen mode, raw input mode, etc.).
+
+```typescript
+// WRONG - Terminal may be left in broken state
+if (error) {
+  console.error("Fatal error")
+  process.exit(1)
+}
+
+// CORRECT - Use renderer.destroy() for cleanup
+if (error) {
+  console.error("Fatal error")
+  await renderer.destroy()
+  process.exit(1)  // Only after destroy
+}
+
+// BETTER - Let destroy handle exit
+const renderer = await createCliRenderer({
+  exitOnCtrlC: true,  // Handles Ctrl+C properly
+})
+
+// For programmatic exit
+renderer.destroy()  // Cleans up and exits
+```
+
+`renderer.destroy()` restores the terminal to its original state before exiting.
+
+### Environment Variables
+
+Bun auto-loads `.env` files. Don't use dotenv:
+
+```typescript
+// CORRECT
+const apiKey = process.env.API_KEY
+
+// WRONG
+import dotenv from "dotenv"
+dotenv.config()
+```
+
+## Debugging TUIs
+
+### Cannot See console.log Output
+
+OpenTUI captures console output for the debug overlay. You can't see logs in the terminal while the TUI is running.
+
+**Solutions:**
+
+1. **Use the console overlay:**
+   ```typescript
+   const renderer = await createCliRenderer()
+   renderer.console.show()
+   console.log("This appears in the overlay")
+   ```
+
+2. **Toggle with keyboard:**
+   ```typescript
+   renderer.keyInput.on("keypress", (key) => {
+     if (key.name === "f12") {
+       renderer.console.toggle()
+     }
+   })
+   ```
+
+3. **Write to a file:**
+   ```typescript
+   import { appendFileSync } from "node:fs"
+   function debugLog(msg: string) {
+     appendFileSync("debug.log", `${new Date().toISOString()} ${msg}\n`)
+   }
+   ```
+
+4. **Disable console capture:**
+   ```bash
+   OTUI_USE_CONSOLE=false bun run src/index.ts
+   ```
+
+### Reproduce Issues in Tests
+
+Don't guess at bugs. Create a reproducible test:
+
+```typescript
+import { test, expect } from "bun:test"
+import { createTestRenderer } from "@opentui/core/testing"
+
+test("reproduces the issue", async () => {
+  const { renderer, snapshot } = await createTestRenderer({
+    width: 40,
+    height: 10,
+  })
+  
+  // Setup that reproduces the bug
+  const box = new BoxRenderable(renderer, { ... })
+  renderer.root.add(box)
+  
+  // Verify with snapshot
+  expect(snapshot()).toMatchSnapshot()
+})
+```
+
+## Focus Management
+
+### Components Must Be Focused
+
+Input components only receive keyboard input when focused:
+
+```typescript
+const input = new InputRenderable(renderer, {
+  id: "input",
+  placeholder: "Type here...",
+})
+
+renderer.root.add(input)
+
+// WRONG - input won't receive keystrokes
+// (no focus call)
+
+// CORRECT
+input.focus()
+```
+
+### Focus in Nested Components
+
+When a component is inside a container, focus the component directly:
+
+```typescript
+const container = new BoxRenderable(renderer, { id: "container" })
+const input = new InputRenderable(renderer, { id: "input" })
+container.add(input)
+renderer.root.add(container)
+
+// WRONG
+container.focus()
+
+// CORRECT
+input.focus()
+
+// Or use getRenderable
+container.getRenderable("input")?.focus()
+
+// Or use delegate (constructs)
+const form = delegate(
+  { focus: "input" },
+  Box({}, Input({ id: "input" })),
+)
+form.focus()  // Routes to the input
+```
+
+## Build Requirements
+
+### Zig is Required
+
+Native code compilation requires Zig:
+
+```bash
+# Install Zig first
+# macOS
+brew install zig
+
+# Linux
+# Download from https://ziglang.org/download/
+
+# Then build
+bun run build
+```
+
+### When to Build
+
+- **TypeScript changes**: NO build needed (Bun runs TS directly)
+- **Native code changes**: Build required
+
+```bash
+# Only needed when changing native (Zig) code
+cd packages/core
+bun run build
+```
+
+## Common Errors
+
+### "Cannot read properties of undefined"
+
+Usually means a renderable wasn't added to the tree:
+
+```typescript
+// WRONG - not added to tree
+const text = new TextRenderable(renderer, { content: "Hello" })
+// text.someMethod() // May fail
+
+// CORRECT
+const text = new TextRenderable(renderer, { content: "Hello" })
+renderer.root.add(text)
+text.someMethod()
+```
+
+### Layout Not Updating
+
+Yoga layout is calculated lazily. Force a recalculation:
+
+```typescript
+// After changing layout properties
+box.setWidth(newWidth)
+renderer.requestRender()
+```
+
+### Text Overflow/Clipping
+
+Text doesn't wrap by default. Set explicit width:
+
+```typescript
+// May overflow
+const text = new TextRenderable(renderer, {
+  content: "Very long text that might overflow the terminal...",
+})
+
+// Contained within width
+const text = new TextRenderable(renderer, {
+  content: "Very long text that might overflow the terminal...",
+  width: 40,  // Will clip or wrap based on parent
+})
+```
+
+### Colors Not Showing
+
+Check terminal capability and color format:
+
+```typescript
+// CORRECT formats
+fg: "#FF0000"           // Hex
+fg: "red"               // CSS color name
+fg: RGBA.fromHex("#FF0000")
+
+// WRONG
+fg: "FF0000"            // Missing #
+fg: 0xFF0000            // Number (not supported)
+```
+
+## Performance
+
+### Avoid Frequent Re-renders
+
+Batch updates when possible:
+
+```typescript
+// WRONG - multiple render calls
+item1.setContent("...")
+item2.setContent("...")
+item3.setContent("...")
+
+// BETTER - single render after all updates
+// (OpenTUI batches automatically, but be mindful)
+items.forEach((item, i) => {
+  item.setContent(data[i])
+})
+```
+
+### Minimize Tree Depth
+
+Deep nesting impacts layout calculation:
+
+```typescript
+// Avoid unnecessary wrappers
+// WRONG
+Box({}, Box({}, Box({}, Text({ content: "Hello" }))))
+
+// CORRECT
+Box({}, Text({ content: "Hello" }))
+```
+
+### Use display: none
+
+Hide elements instead of removing/re-adding:
+
+```typescript
+// For toggling visibility
+element.setDisplay("none")   // Hidden
+element.setDisplay("flex")   // Visible
+
+// Instead of
+parent.remove(element)
+parent.add(element)
+```
+
+## Testing
+
+### Test Runner
+
+Use Bun's test runner:
+
+```typescript
+import { test, expect, beforeEach, afterEach } from "bun:test"
+
+test("my test", () => {
+  expect(1 + 1).toBe(2)
+})
+```
+
+### Test from Package Directories
+
+Run tests from the specific package directory:
+
+```bash
+# CORRECT
+cd packages/core
+bun test
+
+# For native tests
+cd packages/core
+bun run test:native
+```
+
+### Filter Tests
+
+```bash
+# Bun test filter
+bun test --filter "component name"
+
+# Native test filter
+bun run test:native -Dtest-filter="test name"
+```
+
+## Keyboard Handling
+
+### Key Names
+
+Common key names for `KeyEvent.name`:
+
+```typescript
+// Letters/numbers
+"a", "b", ..., "z"
+"1", "2", ..., "0"
+
+// Special keys
+"escape", "enter", "return", "tab", "backspace", "delete"
+"up", "down", "left", "right"
+"home", "end", "pageup", "pagedown"
+"f1", "f2", ..., "f12"
+"space"
+
+// Modifiers (check boolean properties)
+key.ctrl   // Ctrl held
+key.shift  // Shift held
+key.meta   // Alt held
+key.option // Option held (macOS)
+```
+
+### Key Event Types
+
+```typescript
+renderer.keyInput.on("keypress", (key) => {
+  // eventType: "press" | "release" | "repeat"
+  if (key.eventType === "repeat") {
+    // Key being held down
+  }
+})
+```
diff --git a/.agents/skills/opentui/references/core/patterns.md b/.agents/skills/opentui/references/core/patterns.md
new file mode 100644
index 0000000..5564102
--- /dev/null
+++ b/.agents/skills/opentui/references/core/patterns.md
@@ -0,0 +1,448 @@
+# Core Patterns
+
+## Composition Patterns
+
+### Imperative Composition
+
+Create renderables and compose with `.add()`:
+
+```typescript
+import { createCliRenderer, BoxRenderable, TextRenderable } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+
+// Create parent
+const container = new BoxRenderable(renderer, {
+  id: "container",
+  flexDirection: "column",
+  padding: 1,
+})
+
+// Create children
+const header = new TextRenderable(renderer, {
+  id: "header",
+  content: "Header",
+  fg: "#00FF00",
+})
+
+const body = new TextRenderable(renderer, {
+  id: "body",
+  content: "Body content",
+})
+
+// Compose tree
+container.add(header)
+container.add(body)
+renderer.root.add(container)
+```
+
+### Declarative Composition (Constructs)
+
+Use VNode functions for cleaner composition:
+
+```typescript
+import { createCliRenderer, Box, Text, Input, delegate } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+
+// Compose as function calls
+const ui = Box(
+  { flexDirection: "column", padding: 1 },
+  Text({ content: "Header", fg: "#00FF00" }),
+  Box(
+    { flexDirection: "row", gap: 2 },
+    Text({ content: "Name:" }),
+    Input({ id: "name", placeholder: "Enter name..." }),
+  ),
+)
+
+renderer.root.add(ui)
+```
+
+### Reusable Components
+
+Create factory functions for reusable UI pieces:
+
+```typescript
+// Imperative factory
+function createLabeledInput(
+  renderer: RenderContext,
+  props: { id: string; label: string; placeholder: string }
+) {
+  const container = new BoxRenderable(renderer, {
+    id: `${props.id}-container`,
+    flexDirection: "row",
+    gap: 1,
+  })
+  
+  container.add(new TextRenderable(renderer, {
+    id: `${props.id}-label`,
+    content: props.label,
+  }))
+  
+  container.add(new InputRenderable(renderer, {
+    id: `${props.id}-input`,
+    placeholder: props.placeholder,
+    width: 20,
+  }))
+  
+  return container
+}
+
+// Declarative factory
+function LabeledInput(props: { id: string; label: string; placeholder: string }) {
+  return delegate(
+    { focus: `${props.id}-input` },
+    Box(
+      { flexDirection: "row", gap: 1 },
+      Text({ content: props.label }),
+      Input({
+        id: `${props.id}-input`,
+        placeholder: props.placeholder,
+        width: 20,
+      }),
+    ),
+  )
+}
+```
+
+### Focus Delegation
+
+Route focus calls to nested elements:
+
+```typescript
+import { delegate, Box, Input, Text } from "@opentui/core"
+
+const form = delegate(
+  {
+    focus: "email-input",     // Route .focus() to this child
+    blur: "email-input",      // Route .blur() to this child
+  },
+  Box(
+    { border: true, padding: 1 },
+    Text({ content: "Email:" }),
+    Input({ id: "email-input", placeholder: "you@example.com" }),
+  ),
+)
+
+// This focuses the input inside, not the box
+form.focus()
+```
+
+## Event Handling
+
+### Keyboard Events
+
+```typescript
+const renderer = await createCliRenderer()
+
+// Global keyboard handler
+renderer.keyInput.on("keypress", (key) => {
+  if (key.name === "escape") {
+    renderer.destroy()
+    process.exit(0)
+  }
+  
+  if (key.ctrl && key.name === "c") {
+    // Ctrl+C handling (if exitOnCtrlC is false)
+  }
+  
+  if (key.name === "tab") {
+    // Tab navigation
+    focusNext()
+  }
+})
+
+// Paste events
+renderer.keyInput.on("paste", (text) => {
+  currentInput?.setValue(currentInput.value + text)
+})
+```
+
+### Component Events
+
+```typescript
+import { InputRenderable, InputRenderableEvents } from "@opentui/core"
+
+const input = new InputRenderable(renderer, {
+  id: "search",
+  placeholder: "Search...",
+})
+
+input.on(InputRenderableEvents.CHANGE, (value) => {
+  performSearch(value)
+})
+
+// Select events
+const select = new SelectRenderable(renderer, {
+  id: "menu",
+  options: [...],
+})
+
+select.on(SelectRenderableEvents.ITEM_SELECTED, (index, option) => {
+  handleSelection(option)
+})
+
+select.on(SelectRenderableEvents.SELECTION_CHANGED, (index, option) => {
+  showPreview(option)
+})
+```
+
+### Mouse Events
+
+```typescript
+const button = new BoxRenderable(renderer, {
+  id: "button",
+  border: true,
+  onMouseDown: (event) => {
+    button.setBackgroundColor("#444444")
+  },
+  onMouseUp: (event) => {
+    button.setBackgroundColor("#222222")
+    handleClick()
+  },
+  onMouseMove: (event) => {
+    // Hover effect
+  },
+})
+```
+
+## State Management
+
+### Local State
+
+Manage state in closures or objects:
+
+```typescript
+// Closure-based state
+function createCounter(renderer: RenderContext) {
+  let count = 0
+  
+  const display = new TextRenderable(renderer, {
+    id: "count",
+    content: `Count: ${count}`,
+  })
+  
+  const increment = () => {
+    count++
+    display.setContent(`Count: ${count}`)
+  }
+  
+  return { display, increment }
+}
+
+// Class-based state
+class CounterWidget {
+  private count = 0
+  private display: TextRenderable
+  
+  constructor(renderer: RenderContext) {
+    this.display = new TextRenderable(renderer, {
+      id: "count",
+      content: this.formatCount(),
+    })
+  }
+  
+  private formatCount() {
+    return `Count: ${this.count}`
+  }
+  
+  increment() {
+    this.count++
+    this.display.setContent(this.formatCount())
+  }
+  
+  getRenderable() {
+    return this.display
+  }
+}
+```
+
+### Focus Management
+
+Track and manage focus across components:
+
+```typescript
+class FocusManager {
+  private focusables: Renderable[] = []
+  private currentIndex = 0
+  
+  register(renderable: Renderable) {
+    this.focusables.push(renderable)
+  }
+  
+  focusNext() {
+    this.focusables[this.currentIndex]?.blur()
+    this.currentIndex = (this.currentIndex + 1) % this.focusables.length
+    this.focusables[this.currentIndex]?.focus()
+  }
+  
+  focusPrevious() {
+    this.focusables[this.currentIndex]?.blur()
+    this.currentIndex = (this.currentIndex - 1 + this.focusables.length) % this.focusables.length
+    this.focusables[this.currentIndex]?.focus()
+  }
+}
+
+// Usage
+const focusManager = new FocusManager()
+focusManager.register(input1)
+focusManager.register(input2)
+focusManager.register(select1)
+
+renderer.keyInput.on("keypress", (key) => {
+  if (key.name === "tab") {
+    key.shift ? focusManager.focusPrevious() : focusManager.focusNext()
+  }
+})
+```
+
+## Lifecycle Patterns
+
+### Cleanup
+
+Always clean up resources:
+
+```typescript
+const renderer = await createCliRenderer()
+
+// Track intervals/timeouts
+const intervals: Timer[] = []
+
+intervals.push(setInterval(() => {
+  updateClock()
+}, 1000))
+
+// Cleanup on exit
+process.on("SIGINT", () => {
+  intervals.forEach(clearInterval)
+  renderer.destroy()
+  process.exit(0)
+})
+
+// Or use onDestroy callback
+const renderer = await createCliRenderer({
+  onDestroy: () => {
+    intervals.forEach(clearInterval)
+  },
+})
+```
+
+### Dynamic Updates
+
+Update UI based on external data:
+
+```typescript
+async function createDashboard(renderer: RenderContext) {
+  const statsText = new TextRenderable(renderer, {
+    id: "stats",
+    content: "Loading...",
+  })
+  
+  // Poll for updates
+  const updateStats = async () => {
+    const data = await fetchStats()
+    statsText.setContent(`CPU: ${data.cpu}% | Memory: ${data.memory}%`)
+  }
+  
+  // Initial load
+  await updateStats()
+  
+  // Periodic updates
+  setInterval(updateStats, 5000)
+  
+  return statsText
+}
+```
+
+## Layout Patterns
+
+### Responsive Layout
+
+Adapt to terminal size:
+
+```typescript
+const renderer = await createCliRenderer()
+
+const mainPanel = new BoxRenderable(renderer, {
+  id: "main",
+  width: "100%",
+  height: "100%",
+  flexDirection: renderer.width > 80 ? "row" : "column",
+})
+
+// Listen for resize
+process.stdout.on("resize", () => {
+  mainPanel.setFlexDirection(renderer.width > 80 ? "row" : "column")
+})
+```
+
+### Split Panels
+
+```typescript
+function createSplitView(renderer: RenderContext, ratio = 0.3) {
+  const container = new BoxRenderable(renderer, {
+    id: "split",
+    flexDirection: "row",
+    width: "100%",
+    height: "100%",
+  })
+  
+  const left = new BoxRenderable(renderer, {
+    id: "left",
+    width: `${ratio * 100}%`,
+    border: true,
+  })
+  
+  const right = new BoxRenderable(renderer, {
+    id: "right",
+    flexGrow: 1,
+    border: true,
+  })
+  
+  container.add(left)
+  container.add(right)
+  
+  return { container, left, right }
+}
+```
+
+## Debugging Patterns
+
+### Console Overlay
+
+Use the built-in console for debugging:
+
+```typescript
+const renderer = await createCliRenderer({
+  consoleOptions: {
+    startInDebugMode: true,
+  },
+})
+
+// Show console
+renderer.console.show()
+
+// All console methods work
+console.log("Debug info")
+console.warn("Warning")
+console.error("Error")
+
+// Toggle with keyboard
+renderer.keyInput.on("keypress", (key) => {
+  if (key.name === "f12") {
+    renderer.console.toggle()
+  }
+})
+```
+
+### State Inspection
+
+```typescript
+function debugState(label: string, state: unknown) {
+  console.log(`[${label}]`, JSON.stringify(state, null, 2))
+}
+
+// In your update logic
+debugState("form", { name: nameInput.value, email: emailInput.value })
+```
diff --git a/.agents/skills/opentui/references/keyboard/REFERENCE.md b/.agents/skills/opentui/references/keyboard/REFERENCE.md
new file mode 100644
index 0000000..1cfb0eb
--- /dev/null
+++ b/.agents/skills/opentui/references/keyboard/REFERENCE.md
@@ -0,0 +1,511 @@
+# Keyboard Input Handling
+
+How to handle keyboard input in OpenTUI applications.
+
+## Overview
+
+OpenTUI provides keyboard input handling through:
+- **Core**: `renderer.keyInput` EventEmitter
+- **React**: `useKeyboard()` hook
+- **Solid**: `useKeyboard()` hook
+
+## When to Use
+
+Use this reference when you need keyboard shortcuts, focus-aware input handling, or custom keybindings.
+
+## KeyEvent Object
+
+All keyboard handlers receive a `KeyEvent` object:
+
+```typescript
+interface KeyEvent {
+  name: string          // Key name: "a", "escape", "f1", etc.
+  sequence: string      // Raw escape sequence
+  ctrl: boolean         // Ctrl modifier held
+  shift: boolean        // Shift modifier held
+  meta: boolean         // Alt modifier held
+  option: boolean       // Option modifier held (macOS)
+  eventType: "press" | "release" | "repeat"
+  repeated: boolean     // Key is being held (repeat event)
+}
+```
+
+## Basic Usage
+
+### Core
+
+```typescript
+import { createCliRenderer, type KeyEvent } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+
+renderer.keyInput.on("keypress", (key: KeyEvent) => {
+  if (key.name === "escape") {
+    renderer.destroy()
+    return
+  }
+  
+  if (key.ctrl && key.name === "s") {
+    saveDocument()
+  }
+})
+```
+
+### React
+
+```tsx
+import { useKeyboard, useRenderer } from "@opentui/react"
+
+function App() {
+  const renderer = useRenderer()
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      renderer.destroy()
+    }
+  })
+  
+  return <text>Press ESC to exit</text>
+}
+```
+
+
+### Solid
+
+```tsx
+import { useKeyboard, useRenderer } from "@opentui/solid"
+
+function App() {
+  const renderer = useRenderer()
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      renderer.destroy()
+    }
+  })
+  
+  return <text>Press ESC to exit</text>
+}
+```
+
+## Key Names
+
+### Alphabetic Keys
+
+Lowercase: `a`, `b`, `c`, ... `z`
+
+With Shift: Check `key.shift && key.name === "a"` for uppercase
+
+### Numeric Keys
+
+`0`, `1`, `2`, ... `9`
+
+### Function Keys
+
+`f1`, `f2`, `f3`, ... `f12`
+
+### Special Keys
+
+| Key Name | Description |
+|----------|-------------|
+| `escape` | Escape key |
+| `enter` | Enter/Return |
+| `return` | Enter/Return (alias) |
+| `tab` | Tab key |
+| `backspace` | Backspace |
+| `delete` | Delete key |
+| `space` | Spacebar |
+
+### Arrow Keys
+
+| Key Name | Description |
+|----------|-------------|
+| `up` | Up arrow |
+| `down` | Down arrow |
+| `left` | Left arrow |
+| `right` | Right arrow |
+
+### Navigation Keys
+
+| Key Name | Description |
+|----------|-------------|
+| `home` | Home key |
+| `end` | End key |
+| `pageup` | Page Up |
+| `pagedown` | Page Down |
+| `insert` | Insert key |
+
+## Modifier Keys
+
+Check modifier properties on `KeyEvent`:
+
+```typescript
+renderer.keyInput.on("keypress", (key) => {
+  if (key.ctrl && key.name === "c") {
+    // Ctrl+C
+  }
+  
+  if (key.shift && key.name === "tab") {
+    // Shift+Tab
+  }
+  
+  if (key.meta && key.name === "s") {
+    // Alt+S (meta = Alt on most systems)
+  }
+  
+  if (key.option && key.name === "a") {
+    // Option+A (macOS)
+  }
+})
+```
+
+### Modifier Combinations
+
+```typescript
+// Ctrl+Shift+S
+if (key.ctrl && key.shift && key.name === "s") {
+  saveAs()
+}
+
+// Ctrl+Alt+Delete (careful with system shortcuts!)
+if (key.ctrl && key.meta && key.name === "delete") {
+  // ...
+}
+```
+
+## Event Types
+
+### Press Events (Default)
+
+Normal key press:
+
+```typescript
+renderer.keyInput.on("keypress", (key) => {
+  if (key.eventType === "press") {
+    // Initial key press
+  }
+})
+```
+
+### Repeat Events
+
+Key held down:
+
+```typescript
+renderer.keyInput.on("keypress", (key) => {
+  if (key.eventType === "repeat" || key.repeated) {
+    // Key is being held
+  }
+})
+```
+
+### Release Events
+
+Key released (opt-in):
+
+```tsx
+// React
+useKeyboard(
+  (key) => {
+    if (key.eventType === "release") {
+      // Key released
+    }
+  },
+  { release: true }  // Enable release events
+)
+
+// Solid
+useKeyboard(
+  (key) => {
+    if (key.eventType === "release") {
+      // Key released
+    }
+  },
+  { release: true }
+)
+```
+
+## Patterns
+
+### Navigation Menu
+
+```tsx
+function Menu() {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const items = ["Home", "Settings", "Help", "Quit"]
+  
+  useKeyboard((key) => {
+    switch (key.name) {
+      case "up":
+      case "k":
+        setSelectedIndex(i => Math.max(0, i - 1))
+        break
+      case "down":
+      case "j":
+        setSelectedIndex(i => Math.min(items.length - 1, i + 1))
+        break
+      case "enter":
+        handleSelect(items[selectedIndex])
+        break
+    }
+  })
+  
+  return (
+    <box flexDirection="column">
+      {items.map((item, i) => (
+        <text
+          key={item}
+          fg={i === selectedIndex ? "#00FF00" : "#FFFFFF"}
+        >
+          {i === selectedIndex ? "> " : "  "}{item}
+        </text>
+      ))}
+    </box>
+  )
+}
+```
+
+### Modal Escape
+
+```tsx
+function Modal({ onClose, children }) {
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      onClose()
+    }
+  })
+  
+  return (
+    <box border padding={2}>
+      {children}
+    </box>
+  )
+}
+```
+
+### Vim-style Modes
+
+```tsx
+function Editor() {
+  const [mode, setMode] = useState<"normal" | "insert">("normal")
+  const [content, setContent] = useState("")
+  
+  useKeyboard((key) => {
+    if (mode === "normal") {
+      switch (key.name) {
+        case "i":
+          setMode("insert")
+          break
+        case "escape":
+          // Already in normal mode
+          break
+        case "j":
+          moveCursorDown()
+          break
+        case "k":
+          moveCursorUp()
+          break
+      }
+    } else if (mode === "insert") {
+      if (key.name === "escape") {
+        setMode("normal")
+      }
+      // Input component handles text in insert mode
+    }
+  })
+  
+  return (
+    <box flexDirection="column">
+      <text>Mode: {mode}</text>
+      <textarea
+        value={content}
+        onChange={setContent}
+        focused={mode === "insert"}
+      />
+    </box>
+  )
+}
+```
+
+### Game Controls
+
+```tsx
+function Game() {
+  const [pressed, setPressed] = useState(new Set<string>())
+  
+  useKeyboard(
+    (key) => {
+      setPressed(keys => {
+        const newKeys = new Set(keys)
+        if (key.eventType === "release") {
+          newKeys.delete(key.name)
+        } else {
+          newKeys.add(key.name)
+        }
+        return newKeys
+      })
+    },
+    { release: true }
+  )
+  
+  // Game logic uses pressed set
+  useEffect(() => {
+    if (pressed.has("up") || pressed.has("w")) {
+      moveUp()
+    }
+    if (pressed.has("down") || pressed.has("s")) {
+      moveDown()
+    }
+  }, [pressed])
+  
+  return <text>WASD or arrows to move</text>
+}
+```
+
+### Keyboard Shortcuts Help
+
+```tsx
+function ShortcutsHelp() {
+  const shortcuts = [
+    { keys: "Ctrl+S", action: "Save" },
+    { keys: "Ctrl+Q", action: "Quit" },
+    { keys: "Ctrl+F", action: "Find" },
+    { keys: "Tab", action: "Next field" },
+    { keys: "Shift+Tab", action: "Previous field" },
+  ]
+  
+  return (
+    <box border title="Keyboard Shortcuts" padding={1}>
+      {shortcuts.map(({ keys, action }) => (
+        <box key={keys} flexDirection="row">
+          <text width={15} fg="#00FFFF">{keys}</text>
+          <text>{action}</text>
+        </box>
+      ))}
+    </box>
+  )
+}
+```
+
+## Paste Events
+
+Handle pasted text:
+
+### Core
+
+```typescript
+renderer.keyInput.on("paste", (text: string) => {
+  console.log("Pasted:", text)
+})
+```
+
+### Solid
+
+Solid provides a dedicated `usePaste` hook:
+
+```tsx
+import { usePaste } from "@opentui/solid"
+
+function App() {
+  usePaste((event) => {
+    console.log("Pasted:", event.text)
+  })
+  
+  return <text>Paste something</text>
+}
+```
+
+> **Note**: `usePaste` is **Solid-only**. React does not have this hook - handle paste via the Core event emitter or input component's `onChange`.
+
+## Clipboard API (OSC 52)
+
+Copy text to the system clipboard using OSC 52 escape sequences. Works over SSH and in most modern terminal emulators.
+
+### Core
+
+```typescript
+// Copy to clipboard
+const success = renderer.copyToClipboardOSC52("text to copy")
+
+// Check if OSC 52 is supported
+if (renderer.isOsc52Supported()) {
+  renderer.copyToClipboardOSC52("Hello!")
+}
+
+// Clear clipboard
+renderer.clearClipboardOSC52()
+
+// Target specific clipboard (X11)
+import { ClipboardTarget } from "@opentui/core"
+renderer.copyToClipboardOSC52("text", ClipboardTarget.Primary)   // X11 primary
+renderer.copyToClipboardOSC52("text", ClipboardTarget.Clipboard) // System clipboard (default)
+```
+
+### From Selection
+
+The Selection object provides a convenience method:
+
+```tsx
+// Solid
+useSelectionHandler((selection) => {
+  selection.copyToClipboard()  // Uses OSC 52 internally
+})
+```
+
+## Focus and Input Components
+
+Input components (`<input>`, `<textarea>`, `<select>`) capture keyboard events when focused:
+
+```tsx
+<input focused />  // Receives keyboard input
+
+// Global useKeyboard still fires, but input consumes characters
+```
+
+To prevent conflicts, check if an input is focused before handling global shortcuts:
+
+```tsx
+function App() {
+  const renderer = useRenderer()
+  const [inputFocused, setInputFocused] = useState(false)
+  
+  useKeyboard((key) => {
+    if (inputFocused) return  // Let input handle it
+    
+    // Global shortcuts
+    if (key.name === "escape") {
+      renderer.destroy()
+    }
+  })
+  
+  return (
+    <input
+      focused={inputFocused}
+      onFocus={() => setInputFocused(true)}
+      onBlur={() => setInputFocused(false)}
+    />
+  )
+}
+```
+
+## Gotchas
+
+### Terminal Limitations
+
+Some key combinations are captured by the terminal or OS:
+- `Ctrl+C` often sends SIGINT (use `exitOnCtrlC: false` to handle)
+- `Ctrl+Z` suspends the process
+- Some function keys may be intercepted
+
+### SSH and Remote Sessions
+
+Key detection may vary over SSH. Test on target environments.
+
+### Multiple Handlers
+
+Multiple `useKeyboard` calls all receive events. Coordinate handlers to prevent conflicts.
+
+## See Also
+
+- [React API](../react/api.md) - `useKeyboard` hook reference
+- [Solid API](../solid/api.md) - `useKeyboard` hook reference
+- [Input Components](../components/inputs.md) - Focus management with input, textarea, select
+- [Testing](../testing/REFERENCE.md) - Simulating key presses in tests
diff --git a/.agents/skills/opentui/references/layout/REFERENCE.md b/.agents/skills/opentui/references/layout/REFERENCE.md
new file mode 100644
index 0000000..c84255f
--- /dev/null
+++ b/.agents/skills/opentui/references/layout/REFERENCE.md
@@ -0,0 +1,337 @@
+# OpenTUI Layout System
+
+OpenTUI uses the Yoga layout engine, providing CSS Flexbox-like capabilities for positioning and sizing components in the terminal.
+
+## Overview
+
+Key concepts:
+- **Flexbox model**: Familiar CSS Flexbox properties
+- **Yoga engine**: Facebook's cross-platform layout engine
+- **Terminal units**: Dimensions are in character cells (columns x rows)
+- **Percentage support**: Relative sizing based on parent
+
+## Flex Container Properties
+
+### flexDirection
+
+Controls the main axis direction:
+
+```tsx
+// Row (default) - children flow horizontally
+<box flexDirection="row">
+  <text>1</text>
+  <text>2</text>
+  <text>3</text>
+</box>
+// Output: 1 2 3
+
+// Column - children flow vertically
+<box flexDirection="column">
+  <text>1</text>
+  <text>2</text>
+  <text>3</text>
+</box>
+// Output:
+// 1
+// 2
+// 3
+
+// Reverse variants
+<box flexDirection="row-reverse">...</box>     // 3 2 1
+<box flexDirection="column-reverse">...</box>  // Bottom to top
+```
+
+### justifyContent
+
+Aligns children along the main axis:
+
+```tsx
+<box flexDirection="row" width={40} justifyContent="flex-start">
+  {/* Children at start (left for row) */}
+</box>
+
+<box flexDirection="row" width={40} justifyContent="flex-end">
+  {/* Children at end (right for row) */}
+</box>
+
+<box flexDirection="row" width={40} justifyContent="center">
+  {/* Children centered */}
+</box>
+
+<box flexDirection="row" width={40} justifyContent="space-between">
+  {/* First at start, last at end, rest evenly distributed */}
+</box>
+
+<box flexDirection="row" width={40} justifyContent="space-around">
+  {/* Equal space around each child */}
+</box>
+
+<box flexDirection="row" width={40} justifyContent="space-evenly">
+  {/* Equal space between all children and edges */}
+</box>
+```
+
+### alignItems
+
+Aligns children along the cross axis:
+
+```tsx
+<box flexDirection="row" height={10} alignItems="flex-start">
+  {/* Children at top */}
+</box>
+
+<box flexDirection="row" height={10} alignItems="flex-end">
+  {/* Children at bottom */}
+</box>
+
+<box flexDirection="row" height={10} alignItems="center">
+  {/* Children vertically centered */}
+</box>
+
+<box flexDirection="row" height={10} alignItems="stretch">
+  {/* Children stretch to fill height */}
+</box>
+
+<box flexDirection="row" height={10} alignItems="baseline">
+  {/* Children aligned by text baseline */}
+</box>
+```
+
+### flexWrap
+
+Controls whether children wrap to new lines:
+
+```tsx
+<box flexDirection="row" flexWrap="nowrap" width={20}>
+  {/* Children overflow (default) */}
+</box>
+
+<box flexDirection="row" flexWrap="wrap" width={20}>
+  {/* Children wrap to next row */}
+</box>
+
+<box flexDirection="row" flexWrap="wrap-reverse" width={20}>
+  {/* Children wrap upward */}
+</box>
+```
+
+### gap
+
+Space between children:
+
+```tsx
+<box flexDirection="row" gap={2}>
+  <text>A</text>
+  <text>B</text>
+  <text>C</text>
+</box>
+// Output: A  B  C (2 spaces between)
+```
+
+## Flex Item Properties
+
+### flexGrow
+
+How much a child should grow relative to siblings:
+
+```tsx
+<box flexDirection="row" width={30}>
+  <box flexGrow={1}><text>1</text></box>
+  <box flexGrow={2}><text>2</text></box>
+  <box flexGrow={1}><text>1</text></box>
+</box>
+// Widths: 7.5 | 15 | 7.5 (1:2:1 ratio)
+```
+
+### flexShrink
+
+How much a child should shrink when space is limited:
+
+```tsx
+<box flexDirection="row" width={20}>
+  <box width={15} flexShrink={1}><text>Shrinks</text></box>
+  <box width={15} flexShrink={0}><text>Fixed</text></box>
+</box>
+```
+
+### flexBasis
+
+Initial size before growing/shrinking:
+
+```tsx
+<box flexDirection="row">
+  <box flexBasis={20} flexGrow={1}>Starts at 20, can grow</box>
+  <box flexBasis="50%">Half of parent</box>
+</box>
+```
+
+### alignSelf
+
+Override parent's alignItems for this child:
+
+```tsx
+<box flexDirection="row" height={10} alignItems="center">
+  <text>Centered</text>
+  <text alignSelf="flex-start">Top</text>
+  <text alignSelf="flex-end">Bottom</text>
+</box>
+```
+
+## Dimensions
+
+### Fixed Dimensions
+
+```tsx
+<box width={40} height={10}>
+  {/* Exactly 40 columns by 10 rows */}
+</box>
+```
+
+### Percentage Dimensions
+
+Parent must have explicit size:
+
+```tsx
+<box width="100%" height="100%">
+  <box width="50%" height="50%">
+    {/* Half of parent */}
+  </box>
+</box>
+```
+
+### Min/Max Constraints
+
+```tsx
+<box
+  minWidth={20}
+  maxWidth={60}
+  minHeight={5}
+  maxHeight={20}
+>
+  {/* Constrained sizing */}
+</box>
+```
+
+## Spacing
+
+### Padding (inside)
+
+```tsx
+// All sides
+<box padding={2}>Content</box>
+
+// Individual sides
+<box
+  paddingTop={1}
+  paddingRight={2}
+  paddingBottom={1}
+  paddingLeft={2}
+>
+  Content
+</box>
+```
+
+### Margin (outside)
+
+```tsx
+// All sides
+<box margin={1}>Content</box>
+
+// Individual sides
+<box
+  marginTop={1}
+  marginRight={2}
+  marginBottom={1}
+  marginLeft={2}
+>
+  Content
+</box>
+```
+
+## Positioning
+
+### Relative (default)
+
+Element flows in normal document order:
+
+```tsx
+<box position="relative">
+  {/* Normal flow */}
+</box>
+```
+
+### Absolute
+
+Element positioned relative to nearest positioned ancestor:
+
+```tsx
+<box position="relative" width="100%" height="100%">
+  <box
+    position="absolute"
+    left={10}
+    top={5}
+    width={20}
+    height={5}
+  >
+    Positioned at (10, 5)
+  </box>
+</box>
+```
+
+### Position Properties
+
+```tsx
+<box
+  position="absolute"
+  left={10}      // From left edge
+  top={5}        // From top edge
+  right={10}     // From right edge
+  bottom={5}     // From bottom edge
+>
+  Content
+</box>
+```
+
+## Display
+
+### Visibility Control
+
+```tsx
+// Visible (default)
+<box display="flex">Visible</box>
+
+// Hidden (removed from layout)
+<box display="none">Hidden</box>
+```
+
+## Overflow
+
+```tsx
+<box overflow="visible">
+  {/* Content can extend beyond bounds (default) */}
+</box>
+
+<box overflow="hidden">
+  {/* Content clipped at bounds */}
+</box>
+
+<box overflow="scroll">
+  {/* Scrollable when content exceeds bounds */}
+</box>
+```
+
+## Z-Index
+
+Control stacking order for overlapping elements:
+
+```tsx
+<box position="relative">
+  <box position="absolute" zIndex={1}>Behind</box>
+  <box position="absolute" zIndex={2}>In front</box>
+</box>
+```
+
+## See Also
+
+- [Layout Patterns](./patterns.md) - Common layout recipes
+- [Components/Containers](../components/containers.md) - Box and ScrollBox details
diff --git a/.agents/skills/opentui/references/layout/patterns.md b/.agents/skills/opentui/references/layout/patterns.md
new file mode 100644
index 0000000..bea5ad7
--- /dev/null
+++ b/.agents/skills/opentui/references/layout/patterns.md
@@ -0,0 +1,444 @@
+# Layout Patterns
+
+Common layout recipes for terminal user interfaces.
+
+## Full-Screen App
+
+Fill the entire terminal:
+
+```tsx
+function App() {
+  return (
+    <box width="100%" height="100%">
+      {/* Content fills terminal */}
+    </box>
+  )
+}
+```
+
+## Header/Content/Footer
+
+Classic app layout:
+
+```tsx
+function AppLayout() {
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      {/* Header - fixed height */}
+      <box height={3} borderStyle="single" borderBottom>
+        <text>Header</text>
+      </box>
+      
+      {/* Content - fills remaining space */}
+      <box flexGrow={1}>
+        <text>Main Content</text>
+      </box>
+      
+      {/* Footer - fixed height */}
+      <box height={1}>
+        <text>Status: Ready</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Sidebar Layout
+
+```tsx
+function SidebarLayout() {
+  return (
+    <box flexDirection="row" width="100%" height="100%">
+      {/* Sidebar - fixed width */}
+      <box width={25} borderStyle="single" borderRight>
+        <text>Sidebar</text>
+      </box>
+      
+      {/* Main - fills remaining space */}
+      <box flexGrow={1}>
+        <text>Main Content</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Resizable Sidebar
+
+Responsive based on terminal width:
+
+```tsx
+function ResponsiveSidebar() {
+  const dims = useTerminalDimensions()  // React: useTerminalDimensions()
+  const showSidebar = dims.width > 60
+  const sidebarWidth = Math.min(30, Math.floor(dims.width * 0.3))
+  
+  return (
+    <box flexDirection="row" width="100%" height="100%">
+      {showSidebar && (
+        <box width={sidebarWidth} border>
+          <text>Sidebar</text>
+        </box>
+      )}
+      <box flexGrow={1}>
+        <text>Main</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Centered Content
+
+### Horizontally Centered
+
+```tsx
+<box width="100%" justifyContent="center">
+  <box width={40}>
+    <text>Centered horizontally</text>
+  </box>
+</box>
+```
+
+### Vertically Centered
+
+```tsx
+<box height="100%" alignItems="center">
+  <text>Centered vertically</text>
+</box>
+```
+
+### Both Axes
+
+```tsx
+<box
+  width="100%"
+  height="100%"
+  justifyContent="center"
+  alignItems="center"
+>
+  <box width={40} height={10} border>
+    <text>Centered both ways</text>
+  </box>
+</box>
+```
+
+## Modal/Dialog
+
+Centered overlay:
+
+```tsx
+function Modal({ children, visible }) {
+  if (!visible) return null
+  
+  return (
+    <box
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      backgroundColor="rgba(0,0,0,0.5)"
+    >
+      <box
+        width={50}
+        height={15}
+        border
+        borderStyle="double"
+        backgroundColor="#1a1a2e"
+        padding={2}
+      >
+        {children}
+      </box>
+    </box>
+  )
+}
+```
+
+## Grid Layout
+
+Using flexWrap:
+
+```tsx
+function Grid({ items, columns = 3 }) {
+  const itemWidth = `${Math.floor(100 / columns)}%`
+  
+  return (
+    <box flexDirection="row" flexWrap="wrap" width="100%">
+      {items.map((item, i) => (
+        <box key={i} width={itemWidth} padding={1}>
+          <text>{item}</text>
+        </box>
+      ))}
+    </box>
+  )
+}
+```
+
+## Split Panels
+
+### Horizontal Split
+
+```tsx
+function HorizontalSplit({ ratio = 0.5 }) {
+  return (
+    <box flexDirection="row" width="100%" height="100%">
+      <box width={`${ratio * 100}%`} border>
+        <text>Left Panel</text>
+      </box>
+      <box flexGrow={1} border>
+        <text>Right Panel</text>
+      </box>
+    </box>
+  )
+}
+```
+
+### Vertical Split
+
+```tsx
+function VerticalSplit({ ratio = 0.5 }) {
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <box height={`${ratio * 100}%`} border>
+        <text>Top Panel</text>
+      </box>
+      <box flexGrow={1} border>
+        <text>Bottom Panel</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Form Layout
+
+Label + Input pairs:
+
+```tsx
+function FormField({ label, children }) {
+  return (
+    <box flexDirection="row" marginBottom={1}>
+      <box width={15}>
+        <text>{label}:</text>
+      </box>
+      <box flexGrow={1}>
+        {children}
+      </box>
+    </box>
+  )
+}
+
+function LoginForm() {
+  return (
+    <box flexDirection="column" padding={2} border width={50}>
+      <FormField label="Username">
+        <input placeholder="Enter username" />
+      </FormField>
+      <FormField label="Password">
+        <input placeholder="Enter password" />
+      </FormField>
+      <box marginTop={2} justifyContent="flex-end">
+        <box border padding={1}>
+          <text>Login</text>
+        </box>
+      </box>
+    </box>
+  )
+}
+```
+
+## Navigation Tabs
+
+```tsx
+function TabBar({ tabs, activeIndex, onSelect }) {
+  return (
+    <box flexDirection="row" borderBottom>
+      {tabs.map((tab, i) => (
+        <box
+          key={i}
+          padding={1}
+          backgroundColor={i === activeIndex ? "#333" : "transparent"}
+          onMouseDown={() => onSelect(i)}
+        >
+          <text fg={i === activeIndex ? "#fff" : "#888"}>
+            {tab}
+          </text>
+        </box>
+      ))}
+    </box>
+  )
+}
+```
+
+## Sticky Footer
+
+Footer always at bottom:
+
+```tsx
+function StickyFooterLayout() {
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      {/* Content area */}
+      <box flexGrow={1} flexDirection="column">
+        {/* Your content here */}
+        <text>Content that might be short</text>
+      </box>
+      
+      {/* Footer pushed to bottom */}
+      <box height={1}>
+        <text fg="#888">Press ? for help | q to quit</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Absolute Positioning Overlay
+
+Tooltip or popup:
+
+```tsx
+function Tooltip({ x, y, children }) {
+  return (
+    <box
+      position="absolute"
+      left={x}
+      top={y}
+      border
+      backgroundColor="#333"
+      padding={1}
+      zIndex={100}
+    >
+      {children}
+    </box>
+  )
+}
+```
+
+## Responsive Breakpoints
+
+Different layouts based on terminal size:
+
+```tsx
+function ResponsiveApp() {
+  const { width, height } = useTerminalDimensions()
+  
+  // Define breakpoints
+  const isSmall = width < 60
+  const isMedium = width >= 60 && width < 100
+  const isLarge = width >= 100
+  
+  if (isSmall) {
+    // Mobile-like: stacked layout
+    return (
+      <box flexDirection="column">
+        <Navigation />
+        <Content />
+      </box>
+    )
+  }
+  
+  if (isMedium) {
+    // Tablet-like: sidebar + content
+    return (
+      <box flexDirection="row">
+        <box width={20}><Navigation /></box>
+        <box flexGrow={1}><Content /></box>
+      </box>
+    )
+  }
+  
+  // Large: full layout
+  return (
+    <box flexDirection="row">
+      <box width={25}><Navigation /></box>
+      <box flexGrow={1}><Content /></box>
+      <box width={30}><Sidebar /></box>
+    </box>
+  )
+}
+```
+
+## Equal Height Columns
+
+```tsx
+function EqualColumns() {
+  return (
+    <box flexDirection="row" alignItems="stretch" height={20}>
+      <box flexGrow={1} border>
+        <text>Short content</text>
+      </box>
+      <box flexGrow={1} border>
+        <text>
+          Longer content that
+          spans multiple lines
+          and takes up space
+        </text>
+      </box>
+      <box flexGrow={1} border>
+        <text>Medium content</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Spacing Utilities
+
+Consistent spacing patterns:
+
+```tsx
+// Spacer component
+function Spacer({ size = 1 }) {
+  return <box height={size} width={size} />
+}
+
+// Divider component
+function Divider() {
+  return <box height={1} width="100%" backgroundColor="#333" />
+}
+
+// Usage
+<box flexDirection="column">
+  <text>Section 1</text>
+  <Spacer size={2} />
+  <Divider />
+  <Spacer size={2} />
+  <text>Section 2</text>
+</box>
+```
+
+### Axis Shorthand Props
+
+Use `paddingX`/`paddingY` and `marginX`/`marginY` for horizontal/vertical spacing:
+
+```tsx
+// Horizontal padding (left + right)
+<box paddingX={4}>
+  <text>4 chars padding left and right</text>
+</box>
+
+// Vertical padding (top + bottom)
+<box paddingY={2}>
+  <text>2 lines padding top and bottom</text>
+</box>
+
+// Horizontal margin for centering-like effect
+<box marginX={10}>
+  <text>Indented content</text>
+</box>
+
+// Combined for card-like spacing
+<box paddingX={3} paddingY={1} marginY={1} border>
+  <text>Nicely spaced card</text>
+</box>
+```
+
+These are shorthand for:
+- `paddingX={n}` = `paddingLeft={n}` + `paddingRight={n}`
+- `paddingY={n}` = `paddingTop={n}` + `paddingBottom={n}`
+- `marginX={n}` = `marginLeft={n}` + `marginRight={n}`
+- `marginY={n}` = `marginTop={n}` + `marginBottom={n}`
diff --git a/.agents/skills/opentui/references/react/REFERENCE.md b/.agents/skills/opentui/references/react/REFERENCE.md
new file mode 100644
index 0000000..6449257
--- /dev/null
+++ b/.agents/skills/opentui/references/react/REFERENCE.md
@@ -0,0 +1,174 @@
+# OpenTUI React (@opentui/react)
+
+A React reconciler for building terminal user interfaces with familiar React patterns. Write TUIs using JSX, hooks, and component composition.
+
+## Overview
+
+OpenTUI React provides:
+- **Custom reconciler**: React components render to OpenTUI renderables
+- **JSX intrinsics**: `<text>`, `<box>`, `<input>`, etc.
+- **Hooks**: `useKeyboard`, `useRenderer`, `useTimeline`, etc.
+- **Full React compatibility**: useState, useEffect, context, and more
+
+## When to Use React
+
+Use the React reconciler when:
+- You're familiar with React patterns
+- You want declarative UI composition
+- You need React's ecosystem (context, state management libraries)
+- Building applications with complex state
+- Team knows React already
+
+## When NOT to Use React
+
+| Scenario | Use Instead |
+|----------|-------------|
+| Maximum performance critical | `@opentui/core` (imperative) |
+| Fine-grained reactivity | `@opentui/solid` |
+| Smallest bundle size | `@opentui/core` |
+| Building a framework/library | `@opentui/core` |
+
+## Quick Start
+
+```bash
+bunx create-tui@latest -t react my-app
+cd my-app
+bun run src/index.tsx
+```
+
+The CLI creates the `my-app` directory for you - it must **not already exist**.
+
+**Agent guidance**: Always use autonomous mode with `-t <template>` flag. Never use interactive mode (`bunx create-tui@latest my-app` without `-t`) as it requires user prompts that agents cannot respond to.
+
+Or manual setup:
+
+```bash
+mkdir my-tui && cd my-tui
+bun init
+bun install @opentui/react @opentui/core react
+```
+
+```tsx
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+import { useState } from "react"
+
+function App() {
+  const [count, setCount] = useState(0)
+  
+  return (
+    <box border padding={2}>
+      <text>Count: {count}</text>
+      <box
+        border
+        onMouseDown={() => setCount(c => c + 1)}
+      >
+        <text>Click me!</text>
+      </box>
+    </box>
+  )
+}
+
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
+```
+
+## Core Concepts
+
+### JSX Elements
+
+React maps JSX intrinsic elements to OpenTUI renderables:
+
+```tsx
+// These are not HTML elements!
+<text>Hello</text>           // TextRenderable
+<box border>Content</box>    // BoxRenderable
+<input placeholder="..." />  // InputRenderable
+<select options={[...]} />   // SelectRenderable
+```
+
+### Text Modifiers
+
+Inside `<text>`, use modifier elements:
+
+```tsx
+<text>
+  <strong>Bold</strong>, <em>italic</em>, and <u>underlined</u>
+  <span fg="red">Colored text</span>
+  <br />
+  New line with <a href="https://example.com">link</a>
+</text>
+```
+
+### Styling
+
+Two approaches to styling:
+
+```tsx
+// Direct props
+<box backgroundColor="blue" padding={2} border>
+  <text fg="#00FF00">Green text</text>
+</box>
+
+// Style prop
+<box style={{ backgroundColor: "blue", padding: 2, border: true }}>
+  <text style={{ fg: "#00FF00" }}>Green text</text>
+</box>
+```
+
+## Available Components
+
+### Layout & Display
+- `<text>` - Styled text content
+- `<box>` - Container with borders and layout
+- `<scrollbox>` - Scrollable container
+- `<ascii-font>` - ASCII art text
+
+### Input
+- `<input>` - Single-line text input
+- `<textarea>` - Multi-line text input
+- `<select>` - List selection
+- `<tab-select>` - Tab-based selection
+
+### Code & Diff
+- `<code>` - Syntax-highlighted code
+- `<line-number>` - Code with line numbers
+- `<diff>` - Unified or split diff viewer
+
+### Text Modifiers (inside `<text>`)
+- `<span>` - Inline styled text
+- `<strong>`, `<b>` - Bold
+- `<em>`, `<i>` - Italic
+- `<u>` - Underline
+- `<br>` - Line break
+- `<a>` - Link
+
+## Essential Hooks
+
+```tsx
+import {
+  useRenderer,
+  useKeyboard,
+  useOnResize,
+  useTerminalDimensions,
+  useTimeline,
+} from "@opentui/react"
+```
+
+See [API Reference](./api.md) for detailed hook documentation.
+
+## In This Reference
+
+- [Configuration](./configuration.md) - Project setup, tsconfig, bundling
+- [API](./api.md) - Components, hooks, createRoot
+- [Patterns](./patterns.md) - State management, keyboard handling, forms
+- [Gotchas](./gotchas.md) - Common issues, debugging, limitations
+
+## See Also
+
+- [Core](../core/REFERENCE.md) - Underlying imperative API
+- [Solid](../solid/REFERENCE.md) - Alternative declarative approach
+- [Components](../components/REFERENCE.md) - Component reference by category
+- [Layout](../layout/REFERENCE.md) - Flexbox layout system
+- [Keyboard](../keyboard/REFERENCE.md) - Input handling and shortcuts
+- [Testing](../testing/REFERENCE.md) - Test renderer and snapshots
diff --git a/.agents/skills/opentui/references/react/api.md b/.agents/skills/opentui/references/react/api.md
new file mode 100644
index 0000000..66deca9
--- /dev/null
+++ b/.agents/skills/opentui/references/react/api.md
@@ -0,0 +1,435 @@
+# React API Reference
+
+## Rendering
+
+### createRoot(renderer)
+
+Creates a React root for rendering.
+
+```tsx
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+
+const renderer = await createCliRenderer({
+  exitOnCtrlC: false,  // Handle Ctrl+C yourself
+})
+
+const root = createRoot(renderer)
+root.render(<App />)
+```
+
+## Hooks
+
+### useRenderer()
+
+Access the OpenTUI renderer instance.
+
+```tsx
+import { useRenderer } from "@opentui/react"
+import { useEffect } from "react"
+
+function App() {
+  const renderer = useRenderer()
+  
+  useEffect(() => {
+    // Access renderer properties
+    console.log(`Terminal: ${renderer.width}x${renderer.height}`)
+    
+    // Show debug console
+    renderer.console.show()
+    
+    // Access theme mode (dark/light based on terminal settings)
+    console.log(`Theme: ${renderer.themeMode}`)  // "dark" | "light" | null
+  }, [renderer])
+  
+  return <text>Hello</text>
+}
+
+// Listen for theme mode changes
+function ThemedApp() {
+  const renderer = useRenderer()
+  const [theme, setTheme] = useState(renderer.themeMode ?? "dark")
+  
+  useEffect(() => {
+    const handler = (mode: "dark" | "light") => setTheme(mode)
+    renderer.on("theme_mode", handler)
+    return () => renderer.off("theme_mode", handler)
+  }, [renderer])
+  
+  return (
+    <box backgroundColor={theme === "dark" ? "#1a1a2e" : "#ffffff"}>
+      <text fg={theme === "dark" ? "#fff" : "#000"}>
+        Current theme: {theme}
+      </text>
+    </box>
+  )
+}
+```
+
+### useKeyboard(handler, options?)
+
+Handle keyboard events.
+
+```tsx
+import { useKeyboard, useRenderer } from "@opentui/react"
+
+function App() {
+  const renderer = useRenderer()
+  
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      renderer.destroy()  // Never use process.exit() directly!
+    }
+    if (key.ctrl && key.name === "s") {
+      saveDocument()
+    }
+  })
+  
+  return <text>Press ESC to exit</text>
+}
+
+// With release events
+function GameControls() {
+  const [pressed, setPressed] = useState(new Set<string>())
+  
+  useKeyboard(
+    (event) => {
+      setPressed(keys => {
+        const newKeys = new Set(keys)
+        if (event.eventType === "release") {
+          newKeys.delete(event.name)
+        } else {
+          newKeys.add(event.name)
+        }
+        return newKeys
+      })
+    },
+    { release: true }  // Include release events
+  )
+  
+  return <text>Pressed: {Array.from(pressed).join(", ")}</text>
+}
+```
+
+**Options:**
+- `release?: boolean` - Include key release events (default: false)
+
+**KeyEvent properties:**
+- `name: string` - Key name ("a", "escape", "f1", etc.)
+- `sequence: string` - Raw escape sequence
+- `ctrl: boolean` - Ctrl modifier
+- `shift: boolean` - Shift modifier
+- `meta: boolean` - Alt modifier
+- `option: boolean` - Option modifier (macOS)
+- `eventType: "press" | "release" | "repeat"`
+- `repeated: boolean` - Key is being held
+
+### useOnResize(callback)
+
+Handle terminal resize events.
+
+```tsx
+import { useOnResize } from "@opentui/react"
+
+function App() {
+  useOnResize((width, height) => {
+    console.log(`Resized to ${width}x${height}`)
+  })
+  
+  return <text>Resize the terminal</text>
+}
+```
+
+### useTerminalDimensions()
+
+Get reactive terminal dimensions.
+
+```tsx
+import { useTerminalDimensions } from "@opentui/react"
+
+function ResponsiveLayout() {
+  const { width, height } = useTerminalDimensions()
+  
+  return (
+    <box flexDirection={width > 80 ? "row" : "column"}>
+      <box flexGrow={1}>
+        <text>Width: {width}</text>
+      </box>
+      <box flexGrow={1}>
+        <text>Height: {height}</text>
+      </box>
+    </box>
+  )
+}
+```
+
+### useTimeline(options?)
+
+Create animations with the timeline system.
+
+```tsx
+import { useTimeline } from "@opentui/react"
+import { useEffect, useState } from "react"
+
+function AnimatedBox() {
+  const [width, setWidth] = useState(0)
+  
+  const timeline = useTimeline({
+    duration: 2000,
+    loop: false,
+  })
+  
+  useEffect(() => {
+    timeline.add(
+      { width: 0 },
+      {
+        width: 50,
+        duration: 2000,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setWidth(Math.round(anim.targets[0].width))
+        },
+      }
+    )
+  }, [timeline])
+  
+  return <box style={{ width, height: 3, backgroundColor: "#6a5acd" }} />
+}
+```
+
+**Options:**
+- `duration?: number` - Default duration (ms)
+- `loop?: boolean` - Loop the timeline
+- `autoplay?: boolean` - Auto-start (default: true)
+- `onComplete?: () => void` - Completion callback
+- `onPause?: () => void` - Pause callback
+
+**Timeline methods:**
+- `add(target, properties, startTime?)` - Add animation
+- `play()` - Start playback
+- `pause()` - Pause playback
+- `restart()` - Restart from beginning
+
+## Components
+
+### Text Component
+
+```tsx
+<text
+  content="Hello"           // Or use children
+  fg="#FFFFFF"              // Foreground color
+  bg="#000000"              // Background color
+  selectable={true}         // Allow text selection
+>
+  {/* Use nested modifier tags for styling */}
+  <span fg="red">Red</span>
+  <strong>Bold</strong>
+  <em>Italic</em>
+  <u>Underline</u>
+  <br />
+  <a href="https://...">Link</a>
+</text>
+```
+
+> **Note**: Do NOT use `bold`, `italic`, `underline` as props on `<text>`. Use nested modifier tags like `<strong>`, `<em>`, `<u>` instead.
+
+### Box Component
+
+```tsx
+<box
+  // Borders
+  border                    // Enable border
+  borderStyle="single"      // single | double | rounded | bold
+  borderColor="#FFFFFF"
+  title="Title"
+  titleAlignment="center"   // left | center | right
+  
+  // Colors
+  backgroundColor="#1a1a2e"
+  
+  // Layout (see layout/REFERENCE.md)
+  flexDirection="row"
+  justifyContent="center"
+  alignItems="center"
+  gap={2}
+  
+  // Spacing
+  padding={2}
+  paddingTop={1}
+  paddingX={2}              // Horizontal (left + right)
+  paddingY={1}              // Vertical (top + bottom)
+  margin={1}
+  marginX={2}               // Horizontal (left + right)
+  marginY={1}               // Vertical (top + bottom)
+  
+  // Dimensions
+  width={40}
+  height={10}
+  flexGrow={1}
+  
+  // Focus
+  focusable                 // Allow box to receive focus
+  focused={isFocused}       // Controlled focus state
+  
+  // Events
+  onMouseDown={(e) => {}}
+  onMouseUp={(e) => {}}
+  onMouseMove={(e) => {}}
+>
+  {children}
+</box>
+```
+
+### Scrollbox Component
+
+```tsx
+<scrollbox
+  focused                   // Enable keyboard scrolling
+  style={{
+    rootOptions: { backgroundColor: "#24283b" },
+    wrapperOptions: { backgroundColor: "#1f2335" },
+    viewportOptions: { backgroundColor: "#1a1b26" },
+    contentOptions: { backgroundColor: "#16161e" },
+    scrollbarOptions: {
+      showArrows: true,
+      trackOptions: {
+        foregroundColor: "#7aa2f7",
+        backgroundColor: "#414868",
+      },
+    },
+  }}
+>
+  {/* Scrollable content */}
+  {items.map((item, i) => (
+    <box key={i}>
+      <text>{item}</text>
+    </box>
+  ))}
+</scrollbox>
+```
+
+### Input Component
+
+```tsx
+<input
+  value={value}
+  onChange={(newValue) => setValue(newValue)}
+  placeholder="Enter text..."
+  focused                   // Start focused
+  width={30}
+  backgroundColor="#1a1a1a"
+  textColor="#FFFFFF"
+  cursorColor="#00FF00"
+  focusedBackgroundColor="#2a2a2a"
+/>
+```
+
+### Textarea Component
+
+```tsx
+<textarea
+  value={text}
+  onChange={(newValue) => setText(newValue)}
+  placeholder="Enter multiple lines..."
+  focused
+  width={40}
+  height={10}
+  showLineNumbers
+  wrapText
+/>
+```
+
+### Select Component
+
+```tsx
+<select
+  options={[
+    { name: "Option 1", description: "First option", value: "1" },
+    { name: "Option 2", description: "Second option", value: "2" },
+  ]}
+  onChange={(index, option) => setSelected(option)}
+  selectedIndex={0}
+  focused
+  showScrollIndicator
+  height={8}
+/>
+```
+
+### Tab Select Component
+
+```tsx
+<tab-select
+  options={[
+    { name: "Home", description: "Dashboard" },
+    { name: "Settings", description: "Configuration" },
+  ]}
+  onChange={(index, option) => setTab(option)}
+  tabWidth={20}
+  focused
+/>
+```
+
+### ASCII Font Component
+
+```tsx
+<ascii-font
+  text="TITLE"
+  font="tiny"               // tiny | block | slick | shade
+  color="#FFFFFF"
+/>
+```
+
+### Code Component
+
+```tsx
+<code
+  code={sourceCode}
+  language="typescript"
+  showLineNumbers
+  highlightLines={[1, 5, 10]}
+/>
+```
+
+### Line Number Component
+
+```tsx
+<line-number
+  code={sourceCode}
+  language="typescript"
+  startLine={1}
+  highlightedLines={[5]}
+  diagnostics={[
+    { line: 3, severity: "error", message: "Syntax error" }
+  ]}
+/>
+```
+
+### Diff Component
+
+```tsx
+<diff
+  oldCode={originalCode}
+  newCode={modifiedCode}
+  language="typescript"
+  mode="unified"            // unified | split
+  showLineNumbers
+/>
+```
+
+## Type Exports
+
+```tsx
+import type {
+  // Component props
+  TextProps,
+  BoxProps,
+  InputProps,
+  SelectProps,
+  
+  // Hook types
+  KeyEvent,
+  
+  // From core
+  CliRenderer,
+} from "@opentui/react"
+```
diff --git a/.agents/skills/opentui/references/react/configuration.md b/.agents/skills/opentui/references/react/configuration.md
new file mode 100644
index 0000000..7c3b4e9
--- /dev/null
+++ b/.agents/skills/opentui/references/react/configuration.md
@@ -0,0 +1,301 @@
+# React Configuration
+
+## Project Setup
+
+### Quick Start
+
+```bash
+bunx create-tui@latest -t react my-app
+cd my-app && bun install
+```
+
+The CLI creates the `my-app` directory for you - it must **not already exist**.
+
+Options: `--no-git` (skip git init), `--no-install` (skip bun install)
+
+### Manual Setup
+
+```bash
+mkdir my-tui && cd my-tui
+bun init
+bun install @opentui/react @opentui/core react
+```
+
+## TypeScript Configuration
+
+### tsconfig.json
+
+```json
+{
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react",
+    
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"]
+}
+```
+
+**Critical settings:**
+- `jsx: "react-jsx"` - Use the new JSX transform
+- `jsxImportSource: "@opentui/react"` - Import JSX runtime from OpenTUI
+
+### Why DOM lib?
+
+The `DOM` lib is needed for React types. OpenTUI's JSX types extend React's.
+
+## Package Configuration
+
+### package.json
+
+```json
+{
+  "name": "my-tui-app",
+  "type": "module",
+  "scripts": {
+    "start": "bun run src/index.tsx",
+    "dev": "bun --watch run src/index.tsx",
+    "test": "bun test",
+    "build": "bun build src/index.tsx --outdir=dist --target=bun"
+  },
+  "dependencies": {
+    "@opentui/core": "latest",
+    "@opentui/react": "latest",
+    "react": ">=19.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": ">=19.0.0",
+    "typescript": "latest"
+  }
+}
+```
+
+## Project Structure
+
+Recommended structure:
+
+```
+my-tui-app/
+├── src/
+│   ├── components/
+│   │   ├── Header.tsx
+│   │   ├── Sidebar.tsx
+│   │   └── MainContent.tsx
+│   ├── hooks/
+│   │   └── useAppState.ts
+│   ├── App.tsx
+│   └── index.tsx
+├── package.json
+└── tsconfig.json
+```
+
+### Entry Point (src/index.tsx)
+
+```tsx
+import { createCliRenderer } from "@opentui/core"
+import { createRoot } from "@opentui/react"
+import { App } from "./App"
+
+const renderer = await createCliRenderer({
+  exitOnCtrlC: true,
+})
+
+createRoot(renderer).render(<App />)
+```
+
+### App Component (src/App.tsx)
+
+```tsx
+import { Header } from "./components/Header"
+import { Sidebar } from "./components/Sidebar"
+import { MainContent } from "./components/MainContent"
+
+export function App() {
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <Header />
+      <box flexDirection="row" flexGrow={1}>
+        <Sidebar />
+        <MainContent />
+      </box>
+    </box>
+  )
+}
+```
+
+## Renderer Configuration
+
+### createCliRenderer Options
+
+```tsx
+import { createCliRenderer, ConsolePosition } from "@opentui/core"
+
+const renderer = await createCliRenderer({
+  // Rendering
+  targetFPS: 60,
+  
+  // Behavior
+  exitOnCtrlC: true,        // Set false to handle Ctrl+C yourself
+  autoFocus: true,          // Auto-focus elements on click (default: true)
+  useMouse: true,           // Enable mouse support (default: true)
+  
+  // Debug console
+  consoleOptions: {
+    position: ConsolePosition.BOTTOM,
+    sizePercent: 30,
+    startInDebugMode: false,
+  },
+  
+  // Cleanup
+  onDestroy: () => {
+    // Cleanup code
+  },
+})
+```
+
+## Building for Distribution
+
+### Bundling with Bun
+
+```typescript
+// build.ts
+await Bun.build({
+  entrypoints: ["./src/index.tsx"],
+  outdir: "./dist",
+  target: "bun",
+  minify: true,
+})
+```
+
+Run: `bun run build.ts`
+
+### Creating Executables
+
+```typescript
+// build.ts
+await Bun.build({
+  entrypoints: ["./src/index.tsx"],
+  outdir: "./dist",
+  target: "bun",
+  compile: {
+    target: "bun-darwin-arm64",  // or bun-linux-x64, etc.
+    outfile: "my-app",
+  },
+})
+```
+
+## Environment Variables
+
+Create `.env` for development:
+
+```env
+# Debug settings
+OTUI_SHOW_STATS=false
+SHOW_CONSOLE=false
+
+# App settings
+API_URL=https://api.example.com
+```
+
+Bun auto-loads `.env` files. Access via `process.env`:
+
+```tsx
+const apiUrl = process.env.API_URL
+```
+
+## React DevTools
+
+OpenTUI React supports React DevTools for debugging.
+
+### Setup
+
+1. Install DevTools as a dev dependency (must use version 7):
+   ```bash
+   bun add react-devtools-core@7 -d
+   ```
+
+2. Run DevTools standalone app:
+   ```bash
+   npx react-devtools@7
+   ```
+
+3. Start your app with `DEV=true` environment variable:
+   ```bash
+   DEV=true bun run src/index.tsx
+   ```
+
+**Important**: Auto-connect to DevTools ONLY happens when `DEV=true` is set. Without this environment variable, the DevTools connection code is not loaded.
+
+### How It Works
+
+OpenTUI checks for `process.env["DEV"] === "true"` at startup. When true, it dynamically imports `react-devtools-core` and connects to the standalone DevTools app.
+
+## Testing Configuration
+
+### Test Setup
+
+```typescript
+// src/test-utils.tsx
+import { createTestRenderer } from "@opentui/core/testing"
+import { createRoot } from "@opentui/react"
+
+export async function renderForTest(
+  element: React.ReactElement,
+  options = { width: 80, height: 24 }
+) {
+  const testSetup = await createTestRenderer(options)
+  createRoot(testSetup.renderer).render(element)
+  return testSetup
+}
+```
+
+### Test Example
+
+```typescript
+// src/components/Counter.test.tsx
+import { test, expect } from "bun:test"
+import { renderForTest } from "../test-utils"
+import { Counter } from "./Counter"
+
+test("Counter renders initial value", async () => {
+  const { snapshot } = await renderForTest(<Counter initialValue={5} />)
+  expect(snapshot()).toContain("Count: 5")
+})
+```
+
+## Common Issues
+
+### JSX Types Not Working
+
+Ensure `jsxImportSource` is set:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react"
+  }
+}
+```
+
+### React Version Mismatch
+
+Ensure React 19+:
+
+```bash
+bun install react@19 @types/react@19
+```
+
+### Module Resolution Errors
+
+Use `moduleResolution: "bundler"` for Bun compatibility.
diff --git a/.agents/skills/opentui/references/react/gotchas.md b/.agents/skills/opentui/references/react/gotchas.md
new file mode 100644
index 0000000..f4241cb
--- /dev/null
+++ b/.agents/skills/opentui/references/react/gotchas.md
@@ -0,0 +1,443 @@
+# React Gotchas
+
+## Critical
+
+### Never use `process.exit()` directly
+
+**This is the most common mistake.** Using `process.exit()` leaves the terminal in a broken state (cursor hidden, raw mode, alternate screen).
+
+```tsx
+// WRONG - Terminal left in broken state
+process.exit(0)
+
+// CORRECT - Use renderer.destroy()
+import { useRenderer } from "@opentui/react"
+
+function App() {
+  const renderer = useRenderer()
+  
+  const handleExit = () => {
+    renderer.destroy()  // Cleans up and exits properly
+  }
+}
+```
+
+`renderer.destroy()` restores the terminal (exits alternate screen, restores cursor, etc.) before exiting.
+
+### Signal Handling
+
+OpenTUI automatically handles cleanup for these signals:
+- `SIGINT` (Ctrl+C), `SIGTERM`, `SIGQUIT` - Standard termination
+- `SIGHUP` - Terminal closed/hangup
+- `SIGBREAK` - Ctrl+Break (Windows)
+- `SIGPIPE` - Broken pipe (output closed)
+- `SIGBUS`, `SIGFPE` - Hardware errors
+
+This ensures terminal state is restored even on unexpected termination. If you need custom signal handling, use `exitOnCtrlC: false` and handle signals yourself while still calling `renderer.destroy()`.
+
+## JSX Configuration
+
+### Missing jsxImportSource
+
+**Symptom**: JSX elements have wrong types, components don't render
+
+```
+// Error: Property 'text' does not exist on type 'JSX.IntrinsicElements'
+```
+
+**Fix**: Configure tsconfig.json:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@opentui/react"
+  }
+}
+```
+
+### HTML Elements vs TUI Elements
+
+OpenTUI's JSX elements are **not** HTML elements:
+
+```tsx
+// WRONG - These are HTML concepts
+<div>Not supported</div>
+<button>Not supported</button>
+<span>Only works inside <text></span>
+
+// CORRECT - OpenTUI elements
+<box>Container</box>
+<text>Display text</text>
+<text><span>Inline styled</span></text>
+```
+
+## Component Issues
+
+### Text Modifiers Outside Text
+
+Text modifiers only work inside `<text>`:
+
+```tsx
+// WRONG
+<box>
+  <strong>This won't work</strong>
+</box>
+
+// CORRECT
+<box>
+  <text>
+    <strong>This works</strong>
+  </text>
+</box>
+```
+
+### Focus Not Working
+
+Components must be explicitly focused:
+
+```tsx
+// WRONG - Won't receive keyboard input
+<input placeholder="Type here..." />
+
+// CORRECT
+<input placeholder="Type here..." focused />
+
+// Or manage focus state
+const [isFocused, setIsFocused] = useState(true)
+<input placeholder="Type here..." focused={isFocused} />
+```
+
+### Select Not Responding
+
+Select requires focus and proper options format:
+
+```tsx
+// WRONG - Missing required properties
+<select options={["a", "b", "c"]} />
+
+// CORRECT
+<select
+  options={[
+    { name: "Option A", description: "First option", value: "a" },
+    { name: "Option B", description: "Second option", value: "b" },
+  ]}
+  onSelect={(index, option) => {
+    // Called when Enter is pressed
+    console.log("Selected:", option.name)
+  }}
+  focused
+/>
+```
+
+### Select Events Confusion
+
+Remember: `onSelect` fires on Enter (selection confirmed), `onChange` fires on navigation:
+
+```tsx
+// WRONG - expecting onChange to fire on Enter
+<select
+  options={options}
+  onChange={(i, opt) => submitForm(opt)}  // This fires on arrow keys!
+/>
+
+// CORRECT
+<select
+  options={options}
+  onSelect={(i, opt) => submitForm(opt)}   // Enter pressed - submit
+  onChange={(i, opt) => showPreview(opt)}  // Arrow keys - preview
+/>
+```
+
+## Hook Issues
+
+### useKeyboard Not Firing
+
+Multiple `useKeyboard` hooks can conflict:
+
+```tsx
+// Both handlers fire - may cause issues
+function App() {
+  useKeyboard((key) => { /* parent handler */ })
+  return <ChildWithKeyboard />
+}
+
+function ChildWithKeyboard() {
+  useKeyboard((key) => { /* child handler */ })
+  return <text>Child</text>
+}
+```
+
+**Solution**: Use a single keyboard handler or implement event stopping:
+
+```tsx
+function App() {
+  const [handled, setHandled] = useState(false)
+  
+  useKeyboard((key) => {
+    if (handled) {
+      setHandled(false)
+      return
+    }
+    // Handle at app level
+  })
+  
+  return <Child onKeyHandled={() => setHandled(true)} />
+}
+```
+
+### useEffect Cleanup
+
+Always clean up intervals and listeners:
+
+```tsx
+// WRONG - Memory leak
+useEffect(() => {
+  setInterval(() => updateData(), 1000)
+}, [])
+
+// CORRECT
+useEffect(() => {
+  const interval = setInterval(() => updateData(), 1000)
+  return () => clearInterval(interval)  // Cleanup!
+}, [])
+```
+
+## Styling Issues
+
+### Colors Not Applying
+
+Check color format:
+
+```tsx
+// CORRECT formats
+<text fg="#FF0000">Red</text>
+<text fg="red">Red</text>
+<box backgroundColor="#1a1a2e">Box</box>
+
+// WRONG
+<text fg="FF0000">Missing #</text>
+<text color="#FF0000">Wrong prop name (use fg)</text>
+```
+
+### Layout Not Working
+
+Ensure parent has dimensions:
+
+```tsx
+// WRONG - Parent has no height
+<box flexDirection="column">
+  <box flexGrow={1}>Won't grow</box>
+</box>
+
+// CORRECT
+<box flexDirection="column" height="100%">
+  <box flexGrow={1}>Will grow</box>
+</box>
+```
+
+### Percentage Widths Not Working
+
+Parent must have explicit dimensions:
+
+```tsx
+// WRONG
+<box>
+  <box width="50%">Won't work</box>
+</box>
+
+// CORRECT
+<box width="100%">
+  <box width="50%">Works</box>
+</box>
+```
+
+## Performance Issues
+
+### Too Many Re-renders
+
+Avoid inline objects/functions in props:
+
+```tsx
+// WRONG - New object every render
+<box style={{ padding: 2 }}>Content</box>
+
+// BETTER - Use direct props
+<box padding={2}>Content</box>
+
+// OR memoize style objects
+const style = useMemo(() => ({ padding: 2 }), [])
+<box style={style}>Content</box>
+```
+
+### Heavy Components
+
+Use React.memo for expensive components:
+
+```tsx
+const ExpensiveList = React.memo(function ExpensiveList({ 
+  items 
+}: { 
+  items: Item[] 
+}) {
+  return (
+    <box flexDirection="column">
+      {items.map(item => (
+        <text key={item.id}>{item.name}</text>
+      ))}
+    </box>
+  )
+})
+```
+
+### State Updates During Render
+
+Don't update state during render:
+
+```tsx
+// WRONG
+function Component({ value }: { value: number }) {
+  const [count, setCount] = useState(0)
+  
+  // This causes infinite loop!
+  if (value > 10) {
+    setCount(value)
+  }
+  
+  return <text>{count}</text>
+}
+
+// CORRECT
+function Component({ value }: { value: number }) {
+  const [count, setCount] = useState(0)
+  
+  useEffect(() => {
+    if (value > 10) {
+      setCount(value)
+    }
+  }, [value])
+  
+  return <text>{count}</text>
+}
+```
+
+## Debugging
+
+### Console Not Visible
+
+OpenTUI captures console output. Show the overlay:
+
+```tsx
+import { useRenderer } from "@opentui/react"
+import { useEffect } from "react"
+
+function App() {
+  const renderer = useRenderer()
+  
+  useEffect(() => {
+    renderer.console.show()
+    console.log("Now you can see this!")
+  }, [renderer])
+  
+  return <box>{/* ... */}</box>
+}
+```
+
+### Component Not Rendering
+
+Check if component is in the tree:
+
+```tsx
+// WRONG - Conditional returns nothing
+function MaybeComponent({ show }: { show: boolean }) {
+  if (!show) return  // Returns undefined!
+  return <text>Visible</text>
+}
+
+// CORRECT
+function MaybeComponent({ show }: { show: boolean }) {
+  if (!show) return null  // Explicit null
+  return <text>Visible</text>
+}
+```
+
+### Events Not Firing
+
+Check event handler names:
+
+```tsx
+// WRONG
+<box onClick={() => {}}>Click</box>  // No onClick in TUI
+
+// CORRECT
+<box onMouseDown={() => {}}>Click</box>
+<box onMouseUp={() => {}}>Click</box>
+```
+
+## Runtime Issues
+
+### Use Bun, Not Node
+
+```bash
+# WRONG
+node src/index.tsx
+npm run start
+
+# CORRECT
+bun run src/index.tsx
+bun run start
+```
+
+### Async Top-level
+
+Bun supports top-level await, but be careful:
+
+```tsx
+// index.tsx - This works in Bun
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
+
+// If you need to handle errors
+try {
+  const renderer = await createCliRenderer()
+  createRoot(renderer).render(<App />)
+} catch (error) {
+  console.error("Failed to initialize:", error)
+  process.exit(1)
+}
+```
+
+## Common Error Messages
+
+### "Cannot read properties of undefined (reading 'root')"
+
+Renderer not initialized:
+
+```tsx
+// WRONG
+const renderer = createCliRenderer()  // Missing await!
+createRoot(renderer).render(<App />)
+
+// CORRECT
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<App />)
+```
+
+### "Invalid hook call"
+
+Hooks called outside component:
+
+```tsx
+// WRONG
+const dimensions = useTerminalDimensions()  // Outside component!
+
+function App() {
+  return <text>{dimensions.width}</text>
+}
+
+// CORRECT
+function App() {
+  const dimensions = useTerminalDimensions()
+  return <text>{dimensions.width}</text>
+}
+```
diff --git a/.agents/skills/opentui/references/react/patterns.md b/.agents/skills/opentui/references/react/patterns.md
new file mode 100644
index 0000000..9636543
--- /dev/null
+++ b/.agents/skills/opentui/references/react/patterns.md
@@ -0,0 +1,501 @@
+# React Patterns
+
+## State Management
+
+### Local State with useState
+
+```tsx
+import { useState } from "react"
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  
+  return (
+    <box flexDirection="row" gap={2}>
+      <text>Count: {count}</text>
+      <box border onMouseDown={() => setCount(c => c - 1)}>
+        <text>-</text>
+      </box>
+      <box border onMouseDown={() => setCount(c => c + 1)}>
+        <text>+</text>
+      </box>
+    </box>
+  )
+}
+```
+
+### Complex State with useReducer
+
+```tsx
+import { useReducer } from "react"
+
+type State = {
+  items: string[]
+  selectedIndex: number
+}
+
+type Action =
+  | { type: "ADD_ITEM"; item: string }
+  | { type: "REMOVE_ITEM"; index: number }
+  | { type: "SELECT"; index: number }
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case "ADD_ITEM":
+      return { ...state, items: [...state.items, action.item] }
+    case "REMOVE_ITEM":
+      return {
+        ...state,
+        items: state.items.filter((_, i) => i !== action.index),
+      }
+    case "SELECT":
+      return { ...state, selectedIndex: action.index }
+  }
+}
+
+function ItemList() {
+  const [state, dispatch] = useReducer(reducer, {
+    items: [],
+    selectedIndex: 0,
+  })
+  
+  // Use state and dispatch...
+}
+```
+
+### Context for Global State
+
+```tsx
+import { createContext, useContext, useState, ReactNode } from "react"
+
+type Theme = "dark" | "light"
+
+const ThemeContext = createContext<{
+  theme: Theme
+  setTheme: (theme: Theme) => void
+} | null>(null)
+
+function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("dark")
+  
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+function useTheme() {
+  const context = useContext(ThemeContext)
+  if (!context) throw new Error("useTheme must be used within ThemeProvider")
+  return context
+}
+
+// Usage
+function App() {
+  return (
+    <ThemeProvider>
+      <ThemedBox />
+    </ThemeProvider>
+  )
+}
+
+function ThemedBox() {
+  const { theme } = useTheme()
+  return (
+    <box backgroundColor={theme === "dark" ? "#1a1a2e" : "#f0f0f0"}>
+      <text fg={theme === "dark" ? "#fff" : "#000"}>
+        Current theme: {theme}
+      </text>
+    </box>
+  )
+}
+```
+
+## Focus Management
+
+### Focus State
+
+```tsx
+import { useState } from "react"
+import { useKeyboard } from "@opentui/react"
+
+function FocusableForm() {
+  const [focusIndex, setFocusIndex] = useState(0)
+  const fields = ["name", "email", "message"]
+  
+  useKeyboard((key) => {
+    if (key.name === "tab") {
+      setFocusIndex(i => (i + 1) % fields.length)
+    }
+    if (key.shift && key.name === "tab") {
+      setFocusIndex(i => (i - 1 + fields.length) % fields.length)
+    }
+  })
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      {fields.map((field, i) => (
+        <input
+          key={field}
+          placeholder={`Enter ${field}...`}
+          focused={i === focusIndex}
+        />
+      ))}
+    </box>
+  )
+}
+```
+
+### Ref-based Focus
+
+```tsx
+import { useRef, useEffect } from "react"
+
+function AutoFocusInput() {
+  const inputRef = useRef<any>(null)
+  
+  useEffect(() => {
+    // Focus on mount
+    inputRef.current?.focus()
+  }, [])
+  
+  return <input ref={inputRef} placeholder="Auto-focused" />
+}
+```
+
+## Keyboard Navigation
+
+### Global Shortcuts
+
+```tsx
+import { useKeyboard, useRenderer } from "@opentui/react"
+
+function App() {
+  const renderer = useRenderer()
+  
+  useKeyboard((key) => {
+    // Quit on Escape or Ctrl+C - use renderer.destroy(), never process.exit()
+    if (key.name === "escape" || (key.ctrl && key.name === "c")) {
+      renderer.destroy()
+      return
+    }
+    
+    // Toggle help on ?
+    if (key.name === "?" || (key.shift && key.name === "/")) {
+      setShowHelp(h => !h)
+    }
+    
+    // Vim-style navigation
+    if (key.name === "j") moveDown()
+    if (key.name === "k") moveUp()
+  })
+  
+  return <box>{/* ... */}</box>
+}
+```
+
+### Component-level Shortcuts
+
+```tsx
+function Editor() {
+  const [mode, setMode] = useState<"normal" | "insert">("normal")
+  
+  useKeyboard((key) => {
+    if (mode === "normal") {
+      if (key.name === "i") setMode("insert")
+      if (key.name === "escape") setMode("normal")
+    } else {
+      if (key.name === "escape") setMode("normal")
+      // Handle text input in insert mode
+    }
+  })
+  
+  return (
+    <box>
+      <text>Mode: {mode}</text>
+      <textarea focused={mode === "insert"} />
+    </box>
+  )
+}
+```
+
+## Form Handling
+
+### Controlled Inputs
+
+```tsx
+import { useState } from "react"
+
+function LoginForm() {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  
+  const handleSubmit = () => {
+    console.log("Login:", { username, password })
+  }
+  
+  return (
+    <box flexDirection="column" gap={1} padding={2} border>
+      <text>Login</text>
+      
+      <box flexDirection="row" gap={1}>
+        <text>Username:</text>
+        <input
+          value={username}
+          onChange={setUsername}
+          width={20}
+        />
+      </box>
+      
+      <box flexDirection="row" gap={1}>
+        <text>Password:</text>
+        <input
+          value={password}
+          onChange={setPassword}
+          width={20}
+        />
+      </box>
+      
+      <box border onMouseDown={handleSubmit}>
+        <text>Submit</text>
+      </box>
+    </box>
+  )
+}
+```
+
+### Form Validation
+
+```tsx
+function ValidatedForm() {
+  const [email, setEmail] = useState("")
+  const [error, setError] = useState("")
+  
+  const validateEmail = (value: string) => {
+    if (!value.includes("@")) {
+      setError("Invalid email address")
+    } else {
+      setError("")
+    }
+    setEmail(value)
+  }
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      <input
+        value={email}
+        onChange={validateEmail}
+        placeholder="Email"
+      />
+      {error && <text fg="red">{error}</text>}
+    </box>
+  )
+}
+```
+
+## Responsive Design
+
+### Terminal-size Responsive
+
+```tsx
+import { useTerminalDimensions } from "@opentui/react"
+
+function ResponsiveLayout() {
+  const { width } = useTerminalDimensions()
+  
+  // Stack vertically on narrow terminals
+  const isNarrow = width < 80
+  
+  return (
+    <box flexDirection={isNarrow ? "column" : "row"}>
+      <box flexGrow={isNarrow ? 0 : 1} height={isNarrow ? 10 : "100%"}>
+        <text>Sidebar</text>
+      </box>
+      <box flexGrow={1}>
+        <text>Main Content</text>
+      </box>
+    </box>
+  )
+}
+```
+
+### Dynamic Layouts
+
+```tsx
+function DynamicGrid({ items }: { items: string[] }) {
+  const { width } = useTerminalDimensions()
+  const columns = Math.max(1, Math.floor(width / 20))
+  
+  return (
+    <box flexDirection="row" flexWrap="wrap">
+      {items.map((item, i) => (
+        <box key={i} width={`${100 / columns}%`} padding={1}>
+          <text>{item}</text>
+        </box>
+      ))}
+    </box>
+  )
+}
+```
+
+## Async Data Loading
+
+### Loading States
+
+```tsx
+import { useState, useEffect } from "react"
+
+function DataDisplay() {
+  const [data, setData] = useState<string[] | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  
+  useEffect(() => {
+    async function load() {
+      try {
+        const response = await fetch("https://api.example.com/data")
+        const json = await response.json()
+        setData(json.items)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Unknown error")
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+  
+  if (loading) {
+    return <text>Loading...</text>
+  }
+  
+  if (error) {
+    return <text fg="red">Error: {error}</text>
+  }
+  
+  return (
+    <box flexDirection="column">
+      {data?.map((item, i) => (
+        <text key={i}>{item}</text>
+      ))}
+    </box>
+  )
+}
+```
+
+## Animation Patterns
+
+### Simple Animations
+
+```tsx
+import { useState, useEffect } from "react"
+import { useTimeline } from "@opentui/react"
+
+function ProgressBar() {
+  const [progress, setProgress] = useState(0)
+  
+  const timeline = useTimeline({ duration: 3000 })
+  
+  useEffect(() => {
+    timeline.add(
+      { value: 0 },
+      {
+        value: 100,
+        duration: 3000,
+        ease: "linear",
+        onUpdate: (anim) => {
+          setProgress(Math.round(anim.targets[0].value))
+        },
+      }
+    )
+  }, [])
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>Progress: {progress}%</text>
+      <box width={50} height={1} backgroundColor="#333">
+        <box
+          width={`${progress}%`}
+          height={1}
+          backgroundColor="#00ff00"
+        />
+      </box>
+    </box>
+  )
+}
+```
+
+### Interval-based Updates
+
+```tsx
+function Clock() {
+  const [time, setTime] = useState(new Date())
+  
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(new Date())
+    }, 1000)
+    
+    return () => clearInterval(interval)
+  }, [])
+  
+  return <text>{time.toLocaleTimeString()}</text>
+}
+```
+
+## Component Composition
+
+### Render Props
+
+```tsx
+function Focusable({ 
+  children 
+}: { 
+  children: (focused: boolean) => React.ReactNode 
+}) {
+  const [focused, setFocused] = useState(false)
+  
+  return (
+    <box
+      onMouseDown={() => setFocused(true)}
+      onMouseUp={() => setFocused(false)}
+    >
+      {children(focused)}
+    </box>
+  )
+}
+
+// Usage
+<Focusable>
+  {(focused) => (
+    <text fg={focused ? "#00ff00" : "#ffffff"}>
+      {focused ? "Focused!" : "Click me"}
+    </text>
+  )}
+</Focusable>
+```
+
+### Higher-Order Components
+
+```tsx
+function withBorder<P extends object>(
+  Component: React.ComponentType<P>,
+  borderStyle: string = "single"
+) {
+  return function BorderedComponent(props: P) {
+    return (
+      <box border borderStyle={borderStyle} padding={1}>
+        <Component {...props} />
+      </box>
+    )
+  }
+}
+
+// Usage
+const BorderedText = withBorder(({ content }: { content: string }) => (
+  <text>{content}</text>
+))
+
+<BorderedText content="Hello!" />
+```
diff --git a/.agents/skills/opentui/references/solid/REFERENCE.md b/.agents/skills/opentui/references/solid/REFERENCE.md
new file mode 100644
index 0000000..b620591
--- /dev/null
+++ b/.agents/skills/opentui/references/solid/REFERENCE.md
@@ -0,0 +1,201 @@
+# OpenTUI Solid (@opentui/solid)
+
+A SolidJS reconciler for building terminal user interfaces with fine-grained reactivity. Get optimal performance with Solid's signal-based approach.
+
+## Overview
+
+OpenTUI Solid provides:
+- **Custom reconciler**: Solid components render to OpenTUI renderables
+- **JSX intrinsics**: `<text>`, `<box>`, `<input>`, etc.
+- **Hooks**: `useKeyboard`, `useRenderer`, `useTimeline`, etc.
+- **Fine-grained reactivity**: Only what changes re-renders
+- **Portal & Dynamic**: Advanced composition primitives
+
+## When to Use Solid
+
+Use the Solid reconciler when:
+- You want optimal re-rendering performance
+- You prefer signal-based reactivity
+- You need fine-grained control over updates
+- Building performance-critical applications
+- You already know SolidJS
+
+## When NOT to Use Solid
+
+| Scenario | Use Instead |
+|----------|-------------|
+| Team knows React, not Solid | `@opentui/react` |
+| Maximum control needed | `@opentui/core` |
+| Smallest bundle size | `@opentui/core` |
+| Building a framework/library | `@opentui/core` |
+
+## Quick Start
+
+```bash
+bunx create-tui@latest -t solid my-app
+cd my-app && bun install
+```
+
+The CLI creates the `my-app` directory for you - it must **not already exist**.
+
+Options: `--no-git` (skip git init), `--no-install` (skip bun install)
+
+**Agent guidance**: Always use autonomous mode with `-t <template>` flag. Never use interactive mode (`bunx create-tui@latest my-app` without `-t`) as it requires user prompts that agents cannot respond to.
+
+Or manually:
+
+```bash
+bun install @opentui/solid @opentui/core solid-js
+```
+
+```tsx
+import { render } from "@opentui/solid"
+import { createSignal } from "solid-js"
+
+function App() {
+  const [count, setCount] = createSignal(0)
+  
+  return (
+    <box border padding={2}>
+      <text>Count: {count()}</text>
+      <box
+        border
+        onMouseDown={() => setCount(c => c + 1)}
+      >
+        <text>Click me!</text>
+      </box>
+    </box>
+  )
+}
+
+render(() => <App />)
+```
+
+## Core Concepts
+
+### Signals
+
+Solid uses signals for reactive state:
+
+```tsx
+import { createSignal, createEffect } from "solid-js"
+
+function Counter() {
+  const [count, setCount] = createSignal(0)
+  
+  // Effect runs when count changes
+  createEffect(() => {
+    console.log("Count is now:", count())
+  })
+  
+  return <text>Count: {count()}</text>
+}
+```
+
+### JSX Elements
+
+Solid maps JSX intrinsic elements to OpenTUI renderables:
+
+```tsx
+// Note: Some use underscores (Solid convention)
+<text>Hello</text>           // TextRenderable
+<box border>Content</box>    // BoxRenderable
+<input placeholder="..." />  // InputRenderable
+<select options={[...]} />   // SelectRenderable
+<tab_select />               // TabSelectRenderable (underscore!)
+<ascii_font />               // ASCIIFontRenderable (underscore!)
+<line_number />              // LineNumberRenderable (underscore!)
+```
+
+### Text Modifiers
+
+Inside `<text>`, use modifier elements:
+
+```tsx
+<text>
+  <strong>Bold</strong>, <em>italic</em>, and <u>underlined</u>
+  <span fg="red">Colored text</span>
+  <br />
+  New line with <a href="https://example.com">link</a>
+</text>
+```
+
+## Available Components
+
+### Layout & Display
+- `<text>` - Styled text content
+- `<box>` - Container with borders and layout
+- `<scrollbox>` - Scrollable container
+- `<ascii_font>` - ASCII art text (note underscore)
+
+### Input
+- `<input>` - Single-line text input
+- `<textarea>` - Multi-line text input
+- `<select>` - List selection
+- `<tab_select>` - Tab-based selection (note underscore)
+
+### Code & Diff
+- `<code>` - Syntax-highlighted code
+- `<line_number>` - Code with line numbers (note underscore)
+- `<diff>` - Unified or split diff viewer
+
+### Text Modifiers (inside `<text>`)
+- `<span>` - Inline styled text
+- `<strong>`, `<b>` - Bold
+- `<em>`, `<i>` - Italic
+- `<u>` - Underline
+- `<br>` - Line break
+- `<a>` - Link
+
+## Special Components
+
+### Portal
+
+Render children to a different mount node:
+
+```tsx
+import { Portal } from "@opentui/solid"
+
+function Overlay() {
+  return (
+    <Portal mount={renderer.root}>
+      <box position="absolute" left={10} top={5} border>
+        <text>Overlay content</text>
+      </box>
+    </Portal>
+  )
+}
+```
+
+### Dynamic
+
+Render components dynamically:
+
+```tsx
+import { Dynamic } from "@opentui/solid"
+
+function DynamicInput(props: { multiline: boolean }) {
+  return (
+    <Dynamic
+      component={props.multiline ? "textarea" : "input"}
+      placeholder="Enter text..."
+    />
+  )
+}
+```
+
+## In This Reference
+
+- [Configuration](./configuration.md) - Project setup, tsconfig, bunfig, building
+- [API](./api.md) - Components, hooks, render function
+- [Patterns](./patterns.md) - Signals, stores, control flow, composition
+- [Gotchas](./gotchas.md) - Common issues, debugging, limitations
+
+## See Also
+
+- [Core](../core/REFERENCE.md) - Underlying imperative API
+- [React](../react/REFERENCE.md) - Alternative declarative approach
+- [Components](../components/REFERENCE.md) - Component reference by category
+- [Layout](../layout/REFERENCE.md) - Flexbox layout system
+- [Keyboard](../keyboard/REFERENCE.md) - Input handling and shortcuts
+- [Testing](../testing/REFERENCE.md) - Test renderer and snapshots
diff --git a/.agents/skills/opentui/references/solid/api.md b/.agents/skills/opentui/references/solid/api.md
new file mode 100644
index 0000000..267069c
--- /dev/null
+++ b/.agents/skills/opentui/references/solid/api.md
@@ -0,0 +1,543 @@
+# Solid API Reference
+
+## Rendering
+
+### render(node, rendererOrConfig?)
+
+Renders a Solid component tree into a CLI renderer.
+
+```tsx
+import { render } from "@opentui/solid"
+
+// Simple usage - creates renderer automatically
+render(() => <App />)
+
+// With config
+render(() => <App />, {
+  exitOnCtrlC: false,
+  targetFPS: 60,
+})
+
+// With existing renderer
+import { createCliRenderer } from "@opentui/core"
+
+const renderer = await createCliRenderer()
+render(() => <App />, renderer)
+```
+
+### testRender(node, options?)
+
+Create a test renderer for snapshots and tests.
+
+```tsx
+import { testRender } from "@opentui/solid"
+
+const testSetup = await testRender(() => <App />, {
+  width: 40,
+  height: 10,
+})
+
+// Access test utilities
+testSetup.snapshot()  // Get current render
+testSetup.renderer    // Access renderer
+```
+
+### extend(components)
+
+Register custom renderables as JSX intrinsic elements.
+
+```tsx
+import { extend } from "@opentui/solid"
+import { CustomRenderable } from "./custom"
+
+extend({
+  custom: CustomRenderable,
+})
+
+// Now usable in JSX
+<custom prop="value" />
+```
+
+### getComponentCatalogue()
+
+Returns the current component catalogue.
+
+```tsx
+import { getComponentCatalogue } from "@opentui/solid"
+
+const catalogue = getComponentCatalogue()
+console.log(Object.keys(catalogue))
+```
+
+## Hooks
+
+### useRenderer()
+
+Access the OpenTUI renderer instance.
+
+```tsx
+import { useRenderer } from "@opentui/solid"
+import { onMount } from "solid-js"
+
+function App() {
+  const renderer = useRenderer()
+  
+  onMount(() => {
+    console.log(`Terminal: ${renderer.width}x${renderer.height}`)
+    renderer.console.show()
+    
+    // Access theme mode (dark/light based on terminal settings)
+    console.log(`Theme: ${renderer.themeMode}`)  // "dark" | "light" | null
+  })
+  
+  return <text>Hello</text>
+}
+
+// Listen for theme mode changes
+function ThemedApp() {
+  const renderer = useRenderer()
+  const [theme, setTheme] = createSignal(renderer.themeMode ?? "dark")
+  
+  onMount(() => {
+    renderer.on("theme_mode", (mode: "dark" | "light") => setTheme(mode))
+  })
+  
+  return (
+    <box backgroundColor={theme() === "dark" ? "#1a1a2e" : "#ffffff"}>
+      <text fg={theme() === "dark" ? "#fff" : "#000"}>
+        Current theme: {theme()}
+      </text>
+    </box>
+  )
+}
+```
+
+### useKeyboard(handler, options?)
+
+Handle keyboard events.
+
+```tsx
+import { useKeyboard, useRenderer } from "@opentui/solid"
+
+function App() {
+  const renderer = useRenderer()
+  
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      renderer.destroy()  // Never use process.exit() directly!
+    }
+    if (key.ctrl && key.name === "s") {
+      saveDocument()
+    }
+  })
+  
+  return <text>Press ESC to exit</text>
+}
+
+// With release events
+function GameControls() {
+  const [pressed, setPressed] = createSignal(new Set<string>())
+  
+  useKeyboard(
+    (event) => {
+      setPressed(keys => {
+        const newKeys = new Set(keys)
+        if (event.eventType === "release") {
+          newKeys.delete(event.name)
+        } else {
+          newKeys.add(event.name)
+        }
+        return newKeys
+      })
+    },
+    { release: true }
+  )
+  
+  return <text>Pressed: {Array.from(pressed()).join(", ")}</text>
+}
+```
+
+### usePaste(handler)
+
+Handle paste events.
+
+```tsx
+import { usePaste } from "@opentui/solid"
+
+function PasteHandler() {
+  usePaste((text) => {
+    console.log("Pasted:", text)
+  })
+  
+  return <text>Paste something</text>
+}
+```
+
+### onResize(callback)
+
+Handle terminal resize events.
+
+```tsx
+import { onResize } from "@opentui/solid"
+
+function App() {
+  onResize((width, height) => {
+    console.log(`Resized to ${width}x${height}`)
+  })
+  
+  return <text>Resize the terminal</text>
+}
+```
+
+### useTerminalDimensions()
+
+Get reactive terminal dimensions.
+
+```tsx
+import { useTerminalDimensions } from "@opentui/solid"
+
+function ResponsiveLayout() {
+  const dimensions = useTerminalDimensions()
+  
+  return (
+    <box flexDirection={dimensions().width > 80 ? "row" : "column"}>
+      <text>Width: {dimensions().width}</text>
+      <text>Height: {dimensions().height}</text>
+    </box>
+  )
+}
+```
+
+### useSelectionHandler(handler)
+
+Handle text selection events. Solid-only hook - React does not have this.
+
+```tsx
+import { useSelectionHandler } from "@opentui/solid"
+import type { Selection } from "@opentui/core"
+
+function SelectableText() {
+  const [selected, setSelected] = createSignal("")
+  
+  useSelectionHandler((selection: Selection) => {
+    const text = selection.getSelectedText()
+    if (text) {
+      setSelected(text)
+      // Copy to clipboard if needed
+      selection.copyToClipboard()
+    }
+  })
+  
+  return (
+    <box flexDirection="column">
+      <text selectable>Select this text with your mouse</text>
+      <text fg="#888">Selected: {selected()}</text>
+    </box>
+  )
+}
+```
+
+**Selection properties/methods:**
+- `getSelectedText(): string` - Get the selected text content
+- `copyToClipboard(): void` - Copy selection to system clipboard (via OSC 52)
+- `start: ConsolePosition` - Selection start position
+- `end: ConsolePosition` - Selection end position
+
+### useTimeline(options?)
+
+Create animations with the timeline system.
+
+```tsx
+import { useTimeline } from "@opentui/solid"
+import { createSignal, onMount } from "solid-js"
+
+function AnimatedBox() {
+  const [width, setWidth] = createSignal(0)
+  
+  const timeline = useTimeline({
+    duration: 2000,
+    loop: false,
+  })
+  
+  onMount(() => {
+    timeline.add(
+      { width: 0 },
+      {
+        width: 50,
+        duration: 2000,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setWidth(Math.round(anim.targets[0].width))
+        },
+      }
+    )
+  })
+  
+  return <box style={{ width: width(), height: 3, backgroundColor: "#6a5acd" }} />
+}
+```
+
+## Components
+
+### Text Component
+
+```tsx
+<text
+  content="Hello"           // Or use children
+  fg="#FFFFFF"              // Foreground color
+  bg="#000000"              // Background color
+  selectable={true}         // Allow text selection
+>
+  {/* Use nested modifier tags for styling */}
+  <span fg="red">Red</span>
+  <strong>Bold</strong>
+  <em>Italic</em>
+  <u>Underline</u>
+  <br />
+  <a href="https://...">Link</a>
+</text>
+```
+
+> **Note**: Do NOT use `bold`, `italic`, `underline` as props on `<text>`. Use nested modifier tags like `<strong>`, `<em>`, `<u>` instead.
+
+### Box Component
+
+```tsx
+<box
+  // Borders
+  border                    // Enable border
+  borderStyle="single"      // single | double | rounded | bold
+  borderColor="#FFFFFF"
+  title="Title"
+  titleAlignment="center"   // left | center | right
+  
+  // Colors
+  backgroundColor="#1a1a2e"
+  
+  // Layout
+  flexDirection="row"
+  justifyContent="center"
+  alignItems="center"
+  gap={2}
+  
+  // Spacing
+  padding={2}
+  paddingX={2}              // Horizontal (left + right)
+  paddingY={1}              // Vertical (top + bottom)
+  margin={1}
+  marginX={2}               // Horizontal (left + right)
+  marginY={1}               // Vertical (top + bottom)
+  
+  // Dimensions
+  width={40}
+  height={10}
+  flexGrow={1}
+  
+  // Focus
+  focusable                 // Allow box to receive focus
+  focused={isFocused()}     // Controlled focus state
+  
+  // Events
+  onMouseDown={(e) => {}}
+  onMouseUp={(e) => {}}
+>
+  {children}
+</box>
+```
+
+### Scrollbox Component
+
+```tsx
+<scrollbox
+  focused                   // Enable keyboard scrolling
+  style={{
+    scrollbarOptions: {
+      showArrows: true,
+      trackOptions: {
+        foregroundColor: "#7aa2f7",
+        backgroundColor: "#414868",
+      },
+    },
+  }}
+>
+  <For each={items()}>
+    {(item) => <text>{item}</text>}
+  </For>
+</scrollbox>
+```
+
+### Input Component
+
+```tsx
+<input
+  value={value()}
+  onInput={(newValue) => setValue(newValue)}
+  placeholder="Enter text..."
+  focused
+  width={30}
+/>
+```
+
+### Textarea Component
+
+```tsx
+<textarea
+  value={text()}
+  onInput={(newValue) => setText(newValue)}
+  placeholder="Enter multiple lines..."
+  focused
+  width={40}
+  height={10}
+/>
+```
+
+### Select Component
+
+```tsx
+<select
+  options={[
+    { name: "Option 1", description: "First", value: "1" },
+    { name: "Option 2", description: "Second", value: "2" },
+  ]}
+  onChange={(index, option) => setSelected(option)}
+  selectedIndex={0}
+  focused
+/>
+```
+
+### Tab Select Component (Note: underscore)
+
+```tsx
+<tab_select
+  options={[
+    { name: "Home", description: "Dashboard" },
+    { name: "Settings", description: "Configuration" },
+  ]}
+  onChange={(index, option) => setTab(option)}
+  tabWidth={20}
+  focused
+/>
+```
+
+### ASCII Font Component (Note: underscore)
+
+```tsx
+<ascii_font
+  text="TITLE"
+  font="tiny"               // tiny | block | slick | shade
+  color="#FFFFFF"
+/>
+```
+
+### Code Component
+
+```tsx
+<code
+  code={sourceCode}
+  language="typescript"
+/>
+```
+
+### Line Number Component (Note: underscore)
+
+```tsx
+<line_number
+  code={sourceCode}
+  language="typescript"
+  startLine={1}
+  highlightedLines={[5]}
+/>
+```
+
+### Diff Component
+
+```tsx
+<diff
+  oldCode={originalCode}
+  newCode={modifiedCode}
+  language="typescript"
+  mode="unified"            // unified | split
+/>
+```
+
+## Control Flow
+
+Solid's control flow components work with OpenTUI:
+
+### For
+
+```tsx
+import { For } from "solid-js"
+
+<For each={items()}>
+  {(item, index) => (
+    <box key={index()}>
+      <text>{item.name}</text>
+    </box>
+  )}
+</For>
+```
+
+### Show
+
+```tsx
+import { Show } from "solid-js"
+
+<Show when={isVisible()} fallback={<text>Hidden</text>}>
+  <text>Visible content</text>
+</Show>
+```
+
+### Switch/Match
+
+```tsx
+import { Switch, Match } from "solid-js"
+
+<Switch>
+  <Match when={status() === "loading"}>
+    <text>Loading...</text>
+  </Match>
+  <Match when={status() === "error"}>
+    <text fg="red">Error!</text>
+  </Match>
+  <Match when={status() === "success"}>
+    <text fg="green">Success!</text>
+  </Match>
+</Switch>
+```
+
+### Index
+
+```tsx
+import { Index } from "solid-js"
+
+<Index each={items()}>
+  {(item, index) => (
+    <text>{index}: {item().name}</text>
+  )}
+</Index>
+```
+
+## Special Components
+
+### Portal
+
+```tsx
+import { Portal } from "@opentui/solid"
+
+<Portal mount={targetNode}>
+  <box>Portal content</box>
+</Portal>
+```
+
+### Dynamic
+
+```tsx
+import { Dynamic } from "@opentui/solid"
+
+<Dynamic
+  component={isMultiline() ? "textarea" : "input"}
+  placeholder="Enter text..."
+  focused
+/>
+```
diff --git a/.agents/skills/opentui/references/solid/configuration.md b/.agents/skills/opentui/references/solid/configuration.md
new file mode 100644
index 0000000..3c3dd89
--- /dev/null
+++ b/.agents/skills/opentui/references/solid/configuration.md
@@ -0,0 +1,315 @@
+# Solid Configuration
+
+## Project Setup
+
+### Quick Start
+
+```bash
+bunx create-tui@latest -t solid my-app
+cd my-app && bun install
+```
+
+The CLI creates the `my-app` directory for you - it must **not already exist**.
+
+Options: `--no-git` (skip git init), `--no-install` (skip bun install)
+
+### Manual Setup
+
+```bash
+mkdir my-tui && cd my-tui
+bun init
+bun install @opentui/solid @opentui/core solid-js
+```
+
+## TypeScript Configuration
+
+### tsconfig.json
+
+```json
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid",
+    
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"]
+}
+```
+
+**Critical settings:**
+- `jsx: "preserve"` - Let Solid's compiler handle JSX
+- `jsxImportSource: "@opentui/solid"` - Import JSX runtime from OpenTUI Solid
+
+## Bun Configuration
+
+### bunfig.toml
+
+**Required** for the Solid compiler:
+
+```toml
+preload = ["@opentui/solid/preload"]
+```
+
+This loads the Solid JSX transform before your code runs.
+
+## Package Configuration
+
+### package.json
+
+```json
+{
+  "name": "my-tui-app",
+  "type": "module",
+  "scripts": {
+    "start": "bun run src/index.tsx",
+    "dev": "bun --watch run src/index.tsx",
+    "test": "bun test",
+    "build": "bun run build.ts"
+  },
+  "dependencies": {
+    "@opentui/core": "latest",
+    "@opentui/solid": "latest",
+    "solid-js": "latest"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "latest"
+  }
+}
+```
+
+## Project Structure
+
+Recommended structure:
+
+```
+my-tui-app/
+├── src/
+│   ├── components/
+│   │   ├── Header.tsx
+│   │   ├── Sidebar.tsx
+│   │   └── MainContent.tsx
+│   ├── stores/
+│   │   └── appStore.ts
+│   ├── App.tsx
+│   └── index.tsx
+├── bunfig.toml           # Required!
+├── package.json
+└── tsconfig.json
+```
+
+### Entry Point (src/index.tsx)
+
+```tsx
+import { render } from "@opentui/solid"
+import { App } from "./App"
+
+render(() => <App />)
+```
+
+### App Component (src/App.tsx)
+
+```tsx
+import { Header } from "./components/Header"
+import { Sidebar } from "./components/Sidebar"
+import { MainContent } from "./components/MainContent"
+
+export function App() {
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <Header />
+      <box flexDirection="row" flexGrow={1}>
+        <Sidebar />
+        <MainContent />
+      </box>
+    </box>
+  )
+}
+```
+
+## Renderer Configuration
+
+### render() Options
+
+```tsx
+import { render } from "@opentui/solid"
+import { ConsolePosition } from "@opentui/core"
+
+render(() => <App />, {
+  // Rendering
+  targetFPS: 60,
+  
+  // Behavior
+  exitOnCtrlC: true,
+  autoFocus: true,          // Auto-focus elements on click (default: true)
+  useMouse: true,           // Enable mouse support (default: true)
+  
+  // Debug console
+  consoleOptions: {
+    position: ConsolePosition.BOTTOM,
+    sizePercent: 30,
+    startInDebugMode: false,
+  },
+  
+  // Cleanup
+  onDestroy: () => {
+    // Cleanup code
+  },
+})
+```
+
+### Using Existing Renderer
+
+```tsx
+import { render } from "@opentui/solid"
+import { createCliRenderer } from "@opentui/core"
+
+const renderer = await createCliRenderer({
+  exitOnCtrlC: false,
+})
+
+render(() => <App />, renderer)
+```
+
+## Building for Distribution
+
+### Build Script (build.ts)
+
+```typescript
+import solidPlugin from "@opentui/solid/bun-plugin"
+
+await Bun.build({
+  entrypoints: ["./src/index.tsx"],
+  outdir: "./dist",
+  target: "bun",
+  minify: true,
+  plugins: [solidPlugin],
+})
+
+console.log("Build complete!")
+```
+
+Run: `bun run build.ts`
+
+### Creating Executables
+
+```typescript
+import solidPlugin from "@opentui/solid/bun-plugin"
+
+await Bun.build({
+  entrypoints: ["./src/index.tsx"],
+  target: "bun",
+  plugins: [solidPlugin],
+  compile: {
+    target: "bun-darwin-arm64",  // or bun-linux-x64, etc.
+    outfile: "my-app",
+  },
+})
+```
+
+**Available targets:**
+- `bun-darwin-arm64` - macOS Apple Silicon
+- `bun-darwin-x64` - macOS Intel
+- `bun-linux-x64` - Linux x64
+- `bun-linux-arm64` - Linux ARM64
+- `bun-windows-x64` - Windows x64
+
+## Environment Variables
+
+Create `.env` for development:
+
+```env
+# Debug settings
+OTUI_SHOW_STATS=false
+SHOW_CONSOLE=false
+
+# App settings
+API_URL=https://api.example.com
+```
+
+Bun auto-loads `.env` files:
+
+```tsx
+const apiUrl = process.env.API_URL
+```
+
+## Testing Configuration
+
+### Test Setup
+
+```typescript
+// src/test-utils.tsx
+import { testRender } from "@opentui/solid"
+
+export async function renderForTest(
+  Component: () => JSX.Element,
+  options = { width: 80, height: 24 }
+) {
+  return await testRender(Component, options)
+}
+```
+
+### Test Example
+
+```typescript
+// src/components/Counter.test.tsx
+import { test, expect } from "bun:test"
+import { renderForTest } from "../test-utils"
+import { Counter } from "./Counter"
+
+test("Counter renders initial value", async () => {
+  const { snapshot } = await renderForTest(() => <Counter initialValue={5} />)
+  expect(snapshot()).toContain("Count: 5")
+})
+```
+
+## Common Configuration Issues
+
+### Missing bunfig.toml
+
+**Symptom**: JSX not transformed, syntax errors
+
+**Fix**: Create `bunfig.toml` with preload:
+
+```toml
+preload = ["@opentui/solid/preload"]
+```
+
+### Wrong JSX Settings
+
+**Symptom**: JSX compiles to React calls
+
+**Fix**: Ensure tsconfig has:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid"
+  }
+}
+```
+
+### Build Missing Plugin
+
+**Symptom**: Built output has untransformed JSX
+
+**Fix**: Add Solid plugin to build:
+
+```typescript
+import solidPlugin from "@opentui/solid/bun-plugin"
+
+await Bun.build({
+  // ...
+  plugins: [solidPlugin],
+})
+```
diff --git a/.agents/skills/opentui/references/solid/gotchas.md b/.agents/skills/opentui/references/solid/gotchas.md
new file mode 100644
index 0000000..1542fcc
--- /dev/null
+++ b/.agents/skills/opentui/references/solid/gotchas.md
@@ -0,0 +1,415 @@
+# Solid Gotchas
+
+## Critical
+
+### Never use `process.exit()` directly
+
+**This is the most common mistake.** Using `process.exit()` leaves the terminal in a broken state (cursor hidden, raw mode, alternate screen).
+
+```tsx
+// WRONG - Terminal left in broken state
+process.exit(0)
+
+// CORRECT - Use renderer.destroy()
+import { useRenderer } from "@opentui/solid"
+
+function App() {
+  const renderer = useRenderer()
+  
+  const handleExit = () => {
+    renderer.destroy()  // Cleans up and exits properly
+  }
+}
+```
+
+`renderer.destroy()` restores the terminal (exits alternate screen, restores cursor, etc.) before exiting.
+
+## Configuration Issues
+
+### Missing bunfig.toml
+
+**Symptom**: JSX syntax errors, components not rendering
+
+```
+SyntaxError: Unexpected token '<'
+```
+
+**Fix**: Create `bunfig.toml` in project root:
+
+```toml
+preload = ["@opentui/solid/preload"]
+```
+
+### Wrong JSX Settings
+
+**Symptom**: JSX compiles to React, errors about React not found
+
+**Fix**: Ensure tsconfig.json has:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid"
+  }
+}
+```
+
+### Build Without Plugin
+
+**Symptom**: Built bundle has raw JSX
+
+**Fix**: Add Solid plugin to build:
+
+```typescript
+import solidPlugin from "@opentui/solid/bun-plugin"
+
+await Bun.build({
+  // ...
+  plugins: [solidPlugin],
+})
+```
+
+## Reactivity Issues
+
+### Accessing Signals Without Calling
+
+**Symptom**: Value never updates, shows `[Function]`
+
+```tsx
+// WRONG - Missing ()
+const [count, setCount] = createSignal(0)
+<text>Count: {count}</text>  // Shows [Function]
+
+// CORRECT
+<text>Count: {count()}</text>
+```
+
+### Breaking Reactivity with Destructuring
+
+**Symptom**: Props stop being reactive
+
+```tsx
+// WRONG - Breaks reactivity
+function Component(props: { value: number }) {
+  const { value } = props  // Destructured once, never updates!
+  return <text>{value}</text>
+}
+
+// CORRECT - Keep props reactive
+function Component(props: { value: number }) {
+  return <text>{props.value}</text>
+}
+
+// OR use splitProps
+function Component(props: { value: number; other: string }) {
+  const [local, rest] = splitProps(props, ["value"])
+  return <text>{local.value}</text>
+}
+```
+
+### Effects Not Running
+
+**Symptom**: createEffect doesn't trigger
+
+```tsx
+// WRONG - Signal not accessed in effect
+const [count, setCount] = createSignal(0)
+
+createEffect(() => {
+  console.log("Count changed")  // Never runs after initial!
+})
+
+// CORRECT - Access the signal
+createEffect(() => {
+  console.log("Count:", count())  // Runs when count changes
+})
+```
+
+## Component Naming
+
+### Underscore vs Hyphen
+
+Solid uses underscores for multi-word component names:
+
+```tsx
+// WRONG - React-style naming
+<tab-select />    // Error!
+<ascii-font />    // Error!
+<line-number />   // Error!
+
+// CORRECT - Solid naming
+<tab_select />
+<ascii_font />
+<line_number />
+```
+
+**Component mapping:**
+| Concept | React | Solid |
+|---------|-------|-------|
+| Tab Select | `<tab-select>` | `<tab_select>` |
+| ASCII Font | `<ascii-font>` | `<ascii_font>` |
+| Line Number | `<line-number>` | `<line_number>` |
+
+## Focus Issues
+
+### Focus Not Working
+
+Components need explicit focus:
+
+```tsx
+// WRONG
+<input placeholder="Type here..." />
+
+// CORRECT
+<input placeholder="Type here..." focused />
+```
+
+### Select Not Responding
+
+```tsx
+// WRONG
+<select options={["a", "b"]} />
+
+// CORRECT
+<select
+  options={[
+    { name: "A", description: "Option A", value: "a" },
+    { name: "B", description: "Option B", value: "b" },
+  ]}
+  onSelect={(index, option) => {
+    // Called when Enter is pressed
+    console.log("Selected:", option.name)
+  }}
+  focused
+/>
+```
+
+### Select Events Confusion
+
+Remember: `onSelect` fires on Enter (selection confirmed), `onChange` fires on navigation:
+
+```tsx
+// WRONG - expecting onChange to fire on Enter
+<select
+  options={options()}
+  onChange={(i, opt) => submitForm(opt)}  // This fires on arrow keys!
+/>
+
+// CORRECT
+<select
+  options={options()}
+  onSelect={(i, opt) => submitForm(opt)}   // Enter pressed - submit
+  onChange={(i, opt) => showPreview(opt)}  // Arrow keys - preview
+/>
+```
+
+## Control Flow Issues
+
+### For vs Index
+
+Use `For` for arrays of objects, `Index` for primitives:
+
+```tsx
+// For objects - item is reactive
+<For each={objects()}>
+  {(obj) => <text>{obj.name}</text>}
+</For>
+
+// For primitives - use Index, item() is reactive
+<Index each={strings()}>
+  {(str, index) => <text>{index}: {str()}</text>}
+</Index>
+```
+
+### Missing Fallback
+
+Show requires fallback for proper rendering:
+
+```tsx
+// May cause issues
+<Show when={data()}>
+  <Component />
+</Show>
+
+// Better - explicit fallback
+<Show when={data()} fallback={<text>Loading...</text>}>
+  <Component />
+</Show>
+```
+
+## Cleanup Issues
+
+### Forgetting onCleanup
+
+**Symptom**: Memory leaks, multiple intervals running
+
+```tsx
+// WRONG - Interval never cleared
+function Timer() {
+  const [time, setTime] = createSignal(0)
+  
+  setInterval(() => setTime(t => t + 1), 1000)
+  
+  return <text>{time()}</text>
+}
+
+// CORRECT
+function Timer() {
+  const [time, setTime] = createSignal(0)
+  
+  const interval = setInterval(() => setTime(t => t + 1), 1000)
+  onCleanup(() => clearInterval(interval))
+  
+  return <text>{time()}</text>
+}
+```
+
+### Effect Cleanup
+
+```tsx
+createEffect(() => {
+  const subscription = subscribe(data())
+  
+  // WRONG - No cleanup
+  // subscription stays active
+  
+  // CORRECT
+  onCleanup(() => subscription.unsubscribe())
+})
+```
+
+## Store Issues
+
+### Mutating Store Directly
+
+**Symptom**: Changes don't trigger updates
+
+```tsx
+const [state, setState] = createStore({ items: [] })
+
+// WRONG - Direct mutation
+state.items.push(newItem)  // Won't trigger updates!
+
+// CORRECT - Use setState
+setState("items", items => [...items, newItem])
+```
+
+### Nested Updates
+
+```tsx
+const [state, setState] = createStore({
+  user: { profile: { name: "John" } }
+})
+
+// WRONG
+state.user.profile.name = "Jane"
+
+// CORRECT
+setState("user", "profile", "name", "Jane")
+```
+
+## Debugging
+
+### Console Not Visible
+
+OpenTUI captures console output:
+
+```tsx
+import { useRenderer } from "@opentui/solid"
+import { onMount } from "solid-js"
+
+function App() {
+  const renderer = useRenderer()
+  
+  onMount(() => {
+    renderer.console.show()
+    console.log("Now visible!")
+  })
+  
+  return <box>{/* ... */}</box>
+}
+```
+
+### Tracking Reactivity
+
+Use `createEffect` to debug:
+
+```tsx
+createEffect(() => {
+  console.log("State:", {
+    count: count(),
+    items: items(),
+  })
+})
+```
+
+## Runtime Issues
+
+### Use Bun
+
+```bash
+# WRONG
+node src/index.tsx
+npm run start
+
+# CORRECT
+bun run src/index.tsx
+bun run start
+```
+
+### Async render()
+
+The render function is async when creating a renderer:
+
+```tsx
+// This is fine - Bun supports top-level await
+render(() => <App />)
+
+// If you need the renderer
+import { createCliRenderer } from "@opentui/core"
+import { render } from "@opentui/solid"
+
+const renderer = await createCliRenderer()
+render(() => <App />, renderer)
+```
+
+## Common Error Messages
+
+### "Cannot read properties of undefined"
+
+Usually a missing reactive access:
+
+```tsx
+// Check if signal is being called
+<text>{count()}</text>  // Note the ()
+
+// Check if props are being accessed correctly
+<text>{props.value}</text>  // Not destructured
+```
+
+### "JSX element has no corresponding closing tag"
+
+Check component naming:
+
+```tsx
+// Wrong
+<tab-select></tab-select>
+
+// Correct
+<tab_select></tab_select>
+```
+
+### "store is not a function"
+
+Stores aren't called like signals:
+
+```tsx
+const [store, setStore] = createStore({ count: 0 })
+
+// WRONG
+<text>{store().count}</text>
+
+// CORRECT
+<text>{store.count}</text>
+```
diff --git a/.agents/skills/opentui/references/solid/patterns.md b/.agents/skills/opentui/references/solid/patterns.md
new file mode 100644
index 0000000..decf31a
--- /dev/null
+++ b/.agents/skills/opentui/references/solid/patterns.md
@@ -0,0 +1,558 @@
+# Solid Patterns
+
+## Reactive State
+
+### Signals
+
+Basic reactive state with signals:
+
+```tsx
+import { createSignal } from "solid-js"
+
+function Counter() {
+  const [count, setCount] = createSignal(0)
+  
+  return (
+    <box flexDirection="row" gap={2}>
+      <text>Count: {count()}</text>
+      <box border onMouseDown={() => setCount(c => c - 1)}>
+        <text>-</text>
+      </box>
+      <box border onMouseDown={() => setCount(c => c + 1)}>
+        <text>+</text>
+      </box>
+    </box>
+  )
+}
+```
+
+### Derived State
+
+Compute values from signals:
+
+```tsx
+import { createSignal, createMemo } from "solid-js"
+
+function PriceCalculator() {
+  const [quantity, setQuantity] = createSignal(1)
+  const [price, setPrice] = createSignal(9.99)
+  
+  // Derived value - only recalculates when dependencies change
+  const total = createMemo(() => quantity() * price())
+  const formatted = createMemo(() => `$${total().toFixed(2)}`)
+  
+  return (
+    <box flexDirection="column">
+      <text>Quantity: {quantity()}</text>
+      <text>Price: ${price()}</text>
+      <text>Total: {formatted()}</text>
+    </box>
+  )
+}
+```
+
+### Effects
+
+React to state changes:
+
+```tsx
+import { createSignal, createEffect, onCleanup } from "solid-js"
+
+function AutoSave() {
+  const [content, setContent] = createSignal("")
+  
+  createEffect(() => {
+    const text = content()
+    
+    // Debounced save
+    const timeout = setTimeout(() => {
+      saveToFile(text)
+    }, 1000)
+    
+    // Cleanup on next run or disposal
+    onCleanup(() => clearTimeout(timeout))
+  })
+  
+  return (
+    <textarea
+      value={content()}
+      onInput={setContent}
+      placeholder="Auto-saves after 1 second..."
+    />
+  )
+}
+```
+
+## Stores
+
+### createStore for Complex State
+
+```tsx
+import { createStore } from "solid-js/store"
+
+interface AppState {
+  user: { name: string; email: string } | null
+  items: Array<{ id: number; name: string; done: boolean }>
+  settings: { theme: "dark" | "light" }
+}
+
+function App() {
+  const [state, setState] = createStore<AppState>({
+    user: null,
+    items: [],
+    settings: { theme: "dark" },
+  })
+  
+  const addItem = (name: string) => {
+    setState("items", items => [
+      ...items,
+      { id: Date.now(), name, done: false }
+    ])
+  }
+  
+  const toggleItem = (id: number) => {
+    setState("items", item => item.id === id, "done", done => !done)
+  }
+  
+  const setTheme = (theme: "dark" | "light") => {
+    setState("settings", "theme", theme)
+  }
+  
+  return (
+    <box backgroundColor={state.settings.theme === "dark" ? "#1a1a2e" : "#f0f0f0"}>
+      <For each={state.items}>
+        {(item) => (
+          <text
+            fg={item.done ? "#888" : "#fff"}
+            onMouseDown={() => toggleItem(item.id)}
+          >
+            {item.done ? "[x]" : "[ ]"} {item.name}
+          </text>
+        )}
+      </For>
+    </box>
+  )
+}
+```
+
+### Store with Context
+
+Share state across components:
+
+```tsx
+import { createStore } from "solid-js/store"
+import { createContext, useContext, ParentComponent } from "solid-js"
+
+interface Store {
+  count: number
+  items: string[]
+}
+
+type StoreContextValue = [
+  Store,
+  {
+    increment: () => void
+    addItem: (item: string) => void
+  }
+]
+
+const StoreContext = createContext<StoreContextValue>()
+
+const StoreProvider: ParentComponent = (props) => {
+  const [state, setState] = createStore<Store>({
+    count: 0,
+    items: [],
+  })
+  
+  const actions = {
+    increment: () => setState("count", c => c + 1),
+    addItem: (item: string) => setState("items", i => [...i, item]),
+  }
+  
+  return (
+    <StoreContext.Provider value={[state, actions]}>
+      {props.children}
+    </StoreContext.Provider>
+  )
+}
+
+function useStore() {
+  const context = useContext(StoreContext)
+  if (!context) throw new Error("useStore must be used within StoreProvider")
+  return context
+}
+
+// Usage
+function Counter() {
+  const [state, { increment }] = useStore()
+  return (
+    <box onMouseDown={increment}>
+      <text>Count: {state.count}</text>
+    </box>
+  )
+}
+```
+
+## Control Flow
+
+### Conditional Rendering with Show
+
+```tsx
+import { Show, createSignal } from "solid-js"
+
+function ToggleableContent() {
+  const [visible, setVisible] = createSignal(false)
+  
+  return (
+    <box flexDirection="column">
+      <box border onMouseDown={() => setVisible(v => !v)}>
+        <text>Toggle</text>
+      </box>
+      
+      <Show
+        when={visible()}
+        fallback={<text fg="#888">Content is hidden</text>}
+      >
+        <text fg="#0f0">Content is visible!</text>
+      </Show>
+    </box>
+  )
+}
+```
+
+### Lists with For
+
+```tsx
+import { For, createSignal } from "solid-js"
+
+function TodoList() {
+  const [todos, setTodos] = createSignal([
+    { id: 1, text: "Learn Solid", done: false },
+    { id: 2, text: "Build TUI", done: false },
+  ])
+  
+  const toggle = (id: number) => {
+    setTodos(todos =>
+      todos.map(t =>
+        t.id === id ? { ...t, done: !t.done } : t
+      )
+    )
+  }
+  
+  return (
+    <box flexDirection="column">
+      <For each={todos()}>
+        {(todo) => (
+          <box onMouseDown={() => toggle(todo.id)}>
+            <text fg={todo.done ? "#888" : "#fff"}>
+              {todo.done ? "[x]" : "[ ]"} {todo.text}
+            </text>
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}
+```
+
+### Index for Primitive Arrays
+
+Use `Index` when array items are primitives:
+
+```tsx
+import { Index, createSignal } from "solid-js"
+
+function StringList() {
+  const [items, setItems] = createSignal(["apple", "banana", "cherry"])
+  
+  return (
+    <box flexDirection="column">
+      <Index each={items()}>
+        {(item, index) => (
+          <text>{index}: {item()}</text>
+        )}
+      </Index>
+    </box>
+  )
+}
+```
+
+### Switch/Match for Multiple Conditions
+
+```tsx
+import { Switch, Match, createSignal } from "solid-js"
+
+type Status = "idle" | "loading" | "success" | "error"
+
+function StatusDisplay() {
+  const [status, setStatus] = createSignal<Status>("idle")
+  
+  return (
+    <Switch>
+      <Match when={status() === "idle"}>
+        <text>Ready</text>
+      </Match>
+      <Match when={status() === "loading"}>
+        <text fg="#ff0">Loading...</text>
+      </Match>
+      <Match when={status() === "success"}>
+        <text fg="#0f0">Success!</text>
+      </Match>
+      <Match when={status() === "error"}>
+        <text fg="#f00">Error occurred</text>
+      </Match>
+    </Switch>
+  )
+}
+```
+
+## Focus Management
+
+### Focus State
+
+```tsx
+import { createSignal } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+
+function FocusableForm() {
+  const [focusIndex, setFocusIndex] = createSignal(0)
+  const fields = ["name", "email", "message"]
+  
+  useKeyboard((key) => {
+    if (key.name === "tab") {
+      setFocusIndex(i => (i + 1) % fields.length)
+    }
+    if (key.shift && key.name === "tab") {
+      setFocusIndex(i => (i - 1 + fields.length) % fields.length)
+    }
+  })
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      <Index each={fields}>
+        {(field, i) => (
+          <input
+            placeholder={`Enter ${field()}...`}
+            focused={i === focusIndex()}
+          />
+        )}
+      </Index>
+    </box>
+  )
+}
+```
+
+## Keyboard Navigation
+
+### Global Shortcuts
+
+```tsx
+import { useKeyboard } from "@opentui/solid"
+
+function App() {
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      process.exit(0)
+    }
+    
+    if (key.ctrl && key.name === "s") {
+      save()
+    }
+    
+    // Vim-style
+    if (key.name === "j") moveDown()
+    if (key.name === "k") moveUp()
+  })
+  
+  return <box>{/* ... */}</box>
+}
+```
+
+## Responsive Design
+
+### Terminal-size Responsive
+
+```tsx
+import { useTerminalDimensions } from "@opentui/solid"
+
+function ResponsiveLayout() {
+  const dims = useTerminalDimensions()
+  
+  return (
+    <box flexDirection={dims().width > 80 ? "row" : "column"}>
+      <box flexGrow={1}>
+        <text>Panel 1</text>
+      </box>
+      <box flexGrow={1}>
+        <text>Panel 2</text>
+      </box>
+    </box>
+  )
+}
+```
+
+## Async Data
+
+### Resources
+
+```tsx
+import { createResource, Suspense } from "solid-js"
+
+async function fetchData() {
+  const response = await fetch("https://api.example.com/data")
+  return response.json()
+}
+
+function DataDisplay() {
+  const [data] = createResource(fetchData)
+  
+  return (
+    <Suspense fallback={<text>Loading...</text>}>
+      <Show when={data()}>
+        {(items) => (
+          <For each={items()}>
+            {(item) => <text>{item.name}</text>}
+          </For>
+        )}
+      </Show>
+    </Suspense>
+  )
+}
+```
+
+### Error Handling
+
+```tsx
+import { createResource, Show, ErrorBoundary } from "solid-js"
+
+function SafeDataDisplay() {
+  const [data] = createResource(fetchData)
+  
+  return (
+    <ErrorBoundary fallback={(err) => <text fg="red">Error: {err.message}</text>}>
+      <Show
+        when={!data.loading}
+        fallback={<text>Loading...</text>}
+      >
+        <Show
+          when={!data.error}
+          fallback={<text fg="red">Failed to load</text>}
+        >
+          <For each={data()}>
+            {(item) => <text>{item.name}</text>}
+          </For>
+        </Show>
+      </Show>
+    </ErrorBoundary>
+  )
+}
+```
+
+## Component Composition
+
+### Props and Children
+
+```tsx
+import { ParentComponent, JSX } from "solid-js"
+
+interface PanelProps {
+  title: string
+  children: JSX.Element
+}
+
+const Panel: ParentComponent<{ title: string }> = (props) => {
+  return (
+    <box border padding={1} flexDirection="column">
+      <text fg="#0ff">{props.title}</text>
+      <box marginTop={1}>
+        {props.children}
+      </box>
+    </box>
+  )
+}
+
+// Usage
+<Panel title="Settings">
+  <text>Panel content here</text>
+</Panel>
+```
+
+### Spread Props
+
+```tsx
+import { splitProps } from "solid-js"
+
+interface ButtonProps {
+  label: string
+  onClick: () => void
+  // ...rest goes to box
+}
+
+function Button(props: ButtonProps) {
+  const [local, rest] = splitProps(props, ["label", "onClick"])
+  
+  return (
+    <box border onMouseDown={local.onClick} {...rest}>
+      <text>{local.label}</text>
+    </box>
+  )
+}
+```
+
+## Animation
+
+### With Timeline
+
+```tsx
+import { createSignal, onMount } from "solid-js"
+import { useTimeline } from "@opentui/solid"
+
+function AnimatedProgress() {
+  const [width, setWidth] = createSignal(0)
+  
+  const timeline = useTimeline({
+    duration: 2000,
+  })
+  
+  onMount(() => {
+    timeline.add(
+      { value: 0 },
+      {
+        value: 50,
+        duration: 2000,
+        ease: "easeOutQuad",
+        onUpdate: (anim) => {
+          setWidth(Math.round(anim.targets[0].value))
+        },
+      }
+    )
+  })
+  
+  return (
+    <box flexDirection="column" gap={1}>
+      <text>Progress: {width()}%</text>
+      <box width={50} height={1} backgroundColor="#333">
+        <box width={width()} height={1} backgroundColor="#0f0" />
+      </box>
+    </box>
+  )
+}
+```
+
+### Interval-based
+
+```tsx
+import { createSignal, onCleanup } from "solid-js"
+
+function Clock() {
+  const [time, setTime] = createSignal(new Date())
+  
+  const interval = setInterval(() => {
+    setTime(new Date())
+  }, 1000)
+  
+  onCleanup(() => clearInterval(interval))
+  
+  return <text>{time().toLocaleTimeString()}</text>
+}
+```
diff --git a/.agents/skills/opentui/references/testing/REFERENCE.md b/.agents/skills/opentui/references/testing/REFERENCE.md
new file mode 100644
index 0000000..ab278ec
--- /dev/null
+++ b/.agents/skills/opentui/references/testing/REFERENCE.md
@@ -0,0 +1,614 @@
+# Testing OpenTUI Applications
+
+How to test terminal user interfaces built with OpenTUI.
+
+## Overview
+
+OpenTUI provides:
+- **Test Renderer**: Headless renderer for testing
+- **Snapshot Testing**: Verify visual output
+- **Interaction Testing**: Simulate user input
+
+## When to Use
+
+Use this reference when you need snapshot tests, interaction testing, or renderer-based regression checks.
+
+## Test Setup
+
+### Bun Test Runner
+
+OpenTUI uses Bun's built-in test runner:
+
+```typescript
+import { test, expect, beforeEach, afterEach } from "bun:test"
+```
+
+### Test Renderer
+
+Create a test renderer for headless testing:
+
+```typescript
+import { createTestRenderer } from "@opentui/core/testing"
+
+const testSetup = await createTestRenderer({
+  width: 80,     // Terminal width
+  height: 24,    // Terminal height
+})
+```
+
+## Core Testing
+
+### Basic Test
+
+```typescript
+import { test, expect } from "bun:test"
+import { createTestRenderer } from "@opentui/core/testing"
+import { TextRenderable } from "@opentui/core"
+
+test("renders text", async () => {
+  const testSetup = await createTestRenderer({
+    width: 40,
+    height: 10,
+  })
+  
+  const text = new TextRenderable(testSetup.renderer, {
+    id: "greeting",
+    content: "Hello, World!",
+  })
+  
+  testSetup.renderer.root.add(text)
+  await testSetup.renderOnce()
+  
+  expect(testSetup.captureCharFrame()).toContain("Hello, World!")
+})
+```
+
+### Snapshot Testing
+
+```typescript
+import { test, expect, afterEach } from "bun:test"
+import { createTestRenderer } from "@opentui/core/testing"
+import { BoxRenderable, TextRenderable } from "@opentui/core"
+
+let testSetup: Awaited<ReturnType<typeof createTestRenderer>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("component matches snapshot", async () => {
+  testSetup = await createTestRenderer({
+    width: 40,
+    height: 10,
+  })
+  
+  const box = new BoxRenderable(testSetup.renderer, {
+    id: "box",
+    border: true,
+    width: 20,
+    height: 5,
+  })
+  box.add(new TextRenderable(testSetup.renderer, {
+    content: "Content",
+  }))
+  
+  testSetup.renderer.root.add(box)
+  await testSetup.renderOnce()
+  
+  expect(testSetup.captureCharFrame()).toMatchSnapshot()
+})
+```
+
+## React Testing
+
+### Test Utilities
+
+React provides a built-in `testRender` utility via the `@opentui/react/test-utils` subpath export:
+
+```tsx
+import { testRender } from "@opentui/react/test-utils"
+```
+
+This utility:
+- Creates a headless test renderer
+- Sets up the React Act environment automatically
+- Handles proper unmounting on destroy
+- Returns the standard test setup object
+
+### Basic Component Test
+
+```tsx
+import { test, expect } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+
+function Greeting({ name }: { name: string }) {
+  return <text>Hello, {name}!</text>
+}
+
+test("Greeting renders name", async () => {
+  const testSetup = await testRender(
+    <Greeting name="World" />,
+    { width: 80, height: 24 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  expect(frame).toContain("Hello, World!")
+})
+```
+
+### Snapshot Testing
+
+```tsx
+import { test, expect, afterEach } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("component matches snapshot", async () => {
+  testSetup = await testRender(
+    <box style={{ width: 20, height: 5, border: true }}>
+      <text>Content</text>
+    </box>,
+    { width: 25, height: 8 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  expect(frame).toMatchSnapshot()
+})
+```
+
+### State Testing
+
+```tsx
+import { test, expect, afterEach } from "bun:test"
+import { useState } from "react"
+import { testRender } from "@opentui/react/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <box>
+      <text>Count: {count}</text>
+    </box>
+  )
+}
+
+test("Counter shows initial value", async () => {
+  testSetup = await testRender(
+    <Counter />,
+    { width: 20, height: 5 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  expect(frame).toContain("Count: 0")
+})
+```
+
+### Test Setup/Teardown Pattern
+
+For multiple tests, use beforeEach/afterEach to manage the renderer lifecycle:
+
+```tsx
+import { describe, test, expect, beforeEach, afterEach } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+describe("MyComponent", () => {
+  beforeEach(async () => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  afterEach(() => {
+    if (testSetup) {
+      testSetup.renderer.destroy()
+    }
+  })
+
+  test("renders correctly", async () => {
+    testSetup = await testRender(<MyComponent />, {
+      width: 40,
+      height: 10,
+    })
+
+    await testSetup.renderOnce()
+    const frame = testSetup.captureCharFrame()
+    expect(frame).toMatchSnapshot()
+  })
+})
+```
+
+### Test Setup Return Object
+
+The `testRender` function returns a test setup object with these properties:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `renderer` | `Renderer` | The headless renderer instance |
+| `renderOnce` | `() => Promise<void>` | Triggers a single render cycle |
+| `captureCharFrame` | `() => string` | Captures current output as text |
+| `resize` | `(width, height) => void` | Resize the virtual terminal |
+
+## Solid Testing
+
+### Test Utilities
+
+Solid exports `testRender` directly from the main package:
+
+```tsx
+import { testRender } from "@opentui/solid"
+```
+
+Note: Unlike React, Solid's `testRender` takes a **function component** (not a JSX element).
+
+### Basic Component Test
+
+```tsx
+import { test, expect } from "bun:test"
+import { testRender } from "@opentui/solid"
+
+function Greeting(props: { name: string }) {
+  return <text>Hello, {props.name}!</text>
+}
+
+test("Greeting renders name", async () => {
+  const testSetup = await testRender(
+    () => <Greeting name="World" />,
+    { width: 80, height: 24 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  expect(frame).toContain("Hello, World!")
+})
+```
+
+### Snapshot Testing
+
+```tsx
+import { test, expect, afterEach } from "bun:test"
+import { testRender } from "@opentui/solid"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("component matches snapshot", async () => {
+  testSetup = await testRender(
+    () => (
+      <box style={{ width: 20, height: 5, border: true }}>
+        <text>Content</text>
+      </box>
+    ),
+    { width: 25, height: 8 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  expect(frame).toMatchSnapshot()
+})
+```
+
+## Snapshot Format
+
+Snapshots capture the rendered terminal output as text:
+
+```
+┌──────────────────┐
+│ Hello, World!    │
+│                  │
+└──────────────────┘
+```
+
+### Updating Snapshots
+
+```bash
+bun test --update-snapshots
+```
+
+## Interaction Testing
+
+### Simulating Key Presses
+
+```typescript
+import { test, expect, afterEach } from "bun:test"
+import { createTestRenderer } from "@opentui/core/testing"
+
+let testSetup: Awaited<ReturnType<typeof createTestRenderer>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("responds to keyboard", async () => {
+  testSetup = await createTestRenderer({
+    width: 40,
+    height: 10,
+  })
+  
+  // Create component that responds to keys
+  // ...
+  
+  // Simulate keypress
+  testSetup.renderer.keyInput.emit("keypress", {
+    name: "enter",
+    sequence: "\r",
+    ctrl: false,
+    shift: false,
+    meta: false,
+    option: false,
+    eventType: "press",
+    repeated: false,
+  })
+  
+  // Render after the keypress
+  await testSetup.renderOnce()
+  
+  expect(testSetup.captureCharFrame()).toContain("Selected")
+})
+```
+
+### Testing Focus
+
+```typescript
+import { test, expect, afterEach } from "bun:test"
+import { createTestRenderer } from "@opentui/core/testing"
+import { InputRenderable } from "@opentui/core"
+
+let testSetup: Awaited<ReturnType<typeof createTestRenderer>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("input receives focus", async () => {
+  testSetup = await createTestRenderer({
+    width: 40,
+    height: 10,
+  })
+  
+  const input = new InputRenderable(testSetup.renderer, {
+    id: "test-input",
+    placeholder: "Type here",
+  })
+  testSetup.renderer.root.add(input)
+  
+  input.focus()
+  
+  expect(input.isFocused()).toBe(true)
+})
+```
+
+## Test Organization
+
+### File Structure
+
+```
+src/
+├── components/
+│   ├── Button.tsx
+│   └── Button.test.tsx
+├── hooks/
+│   ├── useCounter.ts
+│   └── useCounter.test.ts
+└── test-utils.tsx
+```
+
+### Running Tests
+
+```bash
+# Run all tests
+bun test
+
+# Run specific test file
+bun test src/components/Button.test.tsx
+
+# Run with filter
+bun test --filter "Button"
+
+# Watch mode
+bun test --watch
+```
+
+## Patterns
+
+### Testing Conditional Rendering (React)
+
+```tsx
+import { test, expect, afterEach } from "bun:test"
+import { testRender } from "@opentui/react/test-utils"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("shows loading state", async () => {
+  testSetup = await testRender(
+    <DataLoader loading={true} />,
+    { width: 40, height: 10 }
+  )
+  
+  await testSetup.renderOnce()
+  expect(testSetup.captureCharFrame()).toContain("Loading...")
+})
+
+test("shows data when loaded", async () => {
+  testSetup = await testRender(
+    <DataLoader loading={false} data={["Item 1", "Item 2"]} />,
+    { width: 40, height: 10 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  expect(frame).toContain("Item 1")
+  expect(frame).toContain("Item 2")
+})
+```
+
+### Testing Lists
+
+```tsx
+test("renders all items", async () => {
+  const items = ["Apple", "Banana", "Cherry"]
+  
+  testSetup = await testRender(
+    <ItemList items={items} />,
+    { width: 40, height: 10 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  items.forEach(item => {
+    expect(frame).toContain(item)
+  })
+})
+```
+
+### Testing Layouts
+
+```tsx
+test("matches layout snapshot", async () => {
+  testSetup = await testRender(
+    <AppLayout />,
+    { width: 120, height: 40 }  // Larger viewport
+  )
+  
+  await testSetup.renderOnce()
+  expect(testSetup.captureCharFrame()).toMatchSnapshot()
+})
+```
+
+## Debugging Tests
+
+### Print Frame Output
+
+```tsx
+import { testRender } from "@opentui/react/test-utils"
+
+test("debug output", async () => {
+  const testSetup = await testRender(
+    <MyComponent />,
+    { width: 40, height: 10 }
+  )
+  
+  await testSetup.renderOnce()
+  const frame = testSetup.captureCharFrame()
+  
+  // Print to see what's rendered
+  console.log(frame)
+  
+  expect(frame).toContain("expected")
+})
+```
+
+### Verbose Mode
+
+```bash
+bun test --verbose
+```
+
+## Gotchas
+
+### Async Rendering
+
+Always call `renderOnce()` after setting up your component to ensure rendering is complete:
+
+```typescript
+const testSetup = await testRender(<MyComponent />, { width: 40, height: 10 })
+await testSetup.renderOnce()  // Required before capturing frame
+const frame = testSetup.captureCharFrame()
+```
+
+### Test Isolation and Cleanup
+
+Always destroy the renderer after each test to avoid resource leaks:
+
+```typescript
+import { afterEach } from "bun:test"
+
+let testSetup: Awaited<ReturnType<typeof testRender>>
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy()
+  }
+})
+
+test("test 1", async () => {
+  testSetup = await testRender(<Component1 />, { width: 40, height: 10 })
+  // ...
+})
+
+test("test 2", async () => {
+  testSetup = await testRender(<Component2 />, { width: 40, height: 10 })
+  // ...
+})
+```
+
+### Snapshot Dimensions
+
+Be consistent with test dimensions for stable snapshots:
+
+```typescript
+const testSetup = await createTestRenderer({
+  width: 80,   // Standard width
+  height: 24,  // Standard height
+})
+```
+
+### Running from Package Directory
+
+Run tests from the package directory:
+
+```bash
+cd packages/core
+bun test
+
+# Not from repo root for package-specific tests
+```
+
+## See Also
+
+- [Core API](../core/api.md) - `createTestRenderer` and renderable classes
+- [React Configuration](../react/configuration.md) - React test setup
+- [Solid Configuration](../solid/configuration.md) - Solid test setup
+- [Keyboard](../keyboard/REFERENCE.md) - Simulating key events in tests
diff --git a/.claude/skills/opentui b/.claude/skills/opentui
new file mode 120000
index 0000000..dc17f58
--- /dev/null
+++ b/.claude/skills/opentui
@@ -0,0 +1 @@
+../../.agents/skills/opentui
\ No newline at end of file
diff --git a/bun.lock b/bun.lock
index 8f60581..728e2f3 100644
--- a/bun.lock
+++ b/bun.lock
@@ -17,6 +17,7 @@
       "version": "1.0.8",
       "dependencies": {
         "@playfast/wmux": "workspace:*",
+        "@playfast/wmux-client-terminal": "workspace:*",
         "react": "^19.0.0",
       },
       "devDependencies": {
@@ -134,6 +135,7 @@
       "dependencies": {
         "@playfast/echoform": "workspace:*",
         "@playfast/echoform-render": "workspace:*",
+        "@playfast/wmux-client-terminal": "workspace:*",
         "zod": "^4.3.6",
       },
       "devDependencies": {
@@ -172,6 +174,23 @@
         "vite": "^6.0.3",
       },
     },
+    "packages/wmux-client-terminal": {
+      "name": "@playfast/wmux-client-terminal",
+      "version": "0.0.1",
+      "dependencies": {
+        "@opentui/core": "latest",
+        "@opentui/react": "latest",
+        "@playfast/echoform": "workspace:*",
+        "@playfast/wmux": "workspace:*",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "@types/react": "^19.0.0",
+      },
+      "peerDependencies": {
+        "react": ">=19.0.0",
+      },
+    },
     "plugins/bun-ws-client": {
       "name": "@playfast/echoform-bun-ws-client",
       "version": "1.0.4",
@@ -315,6 +334,8 @@
 
     "@demo/system-monitor": ["@demo/system-monitor@workspace:demo/system-monitor"],
 
+    "@dimforge/rapier2d-simd-compat": ["@dimforge/rapier2d-simd-compat@0.17.3", "", {}, "sha512-bijvwWz6NHsNj5e5i1vtd3dU2pDhthSaTUZSh14DUGGKJfw8eMnlWZsxwHBxB/a3AXVNDjL9abuHw1k9FGR+jg=="],
+
     "@dnd-kit/abstract": ["@dnd-kit/abstract@0.3.2", "", { "dependencies": { "@dnd-kit/geometry": "^0.3.2", "@dnd-kit/state": "^0.3.2", "tslib": "^2.6.2" } }, "sha512-uvPVK+SZYD6Viddn9M0K0JQdXknuVSxA/EbMlFRanve3P/XTc18oLa5zGftKSGjfQGmuzkZ34E26DSbly1zi3Q=="],
 
     "@dnd-kit/collision": ["@dnd-kit/collision@0.3.2", "", { "dependencies": { "@dnd-kit/abstract": "^0.3.2", "@dnd-kit/geometry": "^0.3.2", "tslib": "^2.6.2" } }, "sha512-pNmNSLCI8S9fNQ7QJ3fBCDjiT0sqBhUFcKgmyYaGvGCAU+kq0AP8OWlh0JSisc9k5mFyxmRpmFQcnJpILz/RPA=="],
@@ -409,6 +430,62 @@
 
     "@internationalized/string": ["@internationalized/string@3.2.7", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-D4OHBjrinH+PFZPvfCXvG28n2LSykWcJ7GIioQL+ok0LON15SdfoUssoHzzOUmVZLbRoREsQXVzA6r8JKsbP6A=="],
 
+    "@jimp/core": ["@jimp/core@1.6.0", "", { "dependencies": { "@jimp/file-ops": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "await-to-js": "^3.0.0", "exif-parser": "^0.1.12", "file-type": "^16.0.0", "mime": "3" } }, "sha512-EQQlKU3s9QfdJqiSrZWNTxBs3rKXgO2W+GxNXDtwchF3a4IqxDheFX1ti+Env9hdJXDiYLp2jTRjlxhPthsk8w=="],
+
+    "@jimp/diff": ["@jimp/diff@1.6.0", "", { "dependencies": { "@jimp/plugin-resize": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "pixelmatch": "^5.3.0" } }, "sha512-+yUAQ5gvRC5D1WHYxjBHZI7JBRusGGSLf8AmPRPCenTzh4PA+wZ1xv2+cYqQwTfQHU5tXYOhA0xDytfHUf1Zyw=="],
+
+    "@jimp/file-ops": ["@jimp/file-ops@1.6.0", "", {}, "sha512-Dx/bVDmgnRe1AlniRpCKrGRm5YvGmUwbDzt+MAkgmLGf+jvBT75hmMEZ003n9HQI/aPnm/YKnXjg/hOpzNCpHQ=="],
+
+    "@jimp/js-bmp": ["@jimp/js-bmp@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "bmp-ts": "^1.0.9" } }, "sha512-FU6Q5PC/e3yzLyBDXupR3SnL3htU7S3KEs4e6rjDP6gNEOXRFsWs6YD3hXuXd50jd8ummy+q2WSwuGkr8wi+Gw=="],
+
+    "@jimp/js-gif": ["@jimp/js-gif@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "gifwrap": "^0.10.1", "omggif": "^1.0.10" } }, "sha512-N9CZPHOrJTsAUoWkWZstLPpwT5AwJ0wge+47+ix3++SdSL/H2QzyMqxbcDYNFe4MoI5MIhATfb0/dl/wmX221g=="],
+
+    "@jimp/js-jpeg": ["@jimp/js-jpeg@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "jpeg-js": "^0.4.4" } }, "sha512-6vgFDqeusblf5Pok6B2DUiMXplH8RhIKAryj1yn+007SIAQ0khM1Uptxmpku/0MfbClx2r7pnJv9gWpAEJdMVA=="],
+
+    "@jimp/js-png": ["@jimp/js-png@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "pngjs": "^7.0.0" } }, "sha512-AbQHScy3hDDgMRNfG0tPjL88AV6qKAILGReIa3ATpW5QFjBKpisvUaOqhzJ7Reic1oawx3Riyv152gaPfqsBVg=="],
+
+    "@jimp/js-tiff": ["@jimp/js-tiff@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "utif2": "^4.1.0" } }, "sha512-zhReR8/7KO+adijj3h0ZQUOiun3mXUv79zYEAKvE0O+rP7EhgtKvWJOZfRzdZSNv0Pu1rKtgM72qgtwe2tFvyw=="],
+
+    "@jimp/plugin-blit": ["@jimp/plugin-blit@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-M+uRWl1csi7qilnSK8uxK4RJMSuVeBiO1AY0+7APnfUbQNZm6hCe0CCFv1Iyw1D/Dhb8ph8fQgm5mwM0eSxgVA=="],
+
+    "@jimp/plugin-blur": ["@jimp/plugin-blur@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/utils": "1.6.0" } }, "sha512-zrM7iic1OTwUCb0g/rN5y+UnmdEsT3IfuCXCJJNs8SZzP0MkZ1eTvuwK9ZidCuMo4+J3xkzCidRwYXB5CyGZTw=="],
+
+    "@jimp/plugin-circle": ["@jimp/plugin-circle@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "zod": "^3.23.8" } }, "sha512-xt1Gp+LtdMKAXfDp3HNaG30SPZW6AQ7dtAtTnoRKorRi+5yCJjKqXRgkewS5bvj8DEh87Ko1ydJfzqS3P2tdWw=="],
+
+    "@jimp/plugin-color": ["@jimp/plugin-color@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "tinycolor2": "^1.6.0", "zod": "^3.23.8" } }, "sha512-J5q8IVCpkBsxIXM+45XOXTrsyfblyMZg3a9eAo0P7VPH4+CrvyNQwaYatbAIamSIN1YzxmO3DkIZXzRjFSz1SA=="],
+
+    "@jimp/plugin-contain": ["@jimp/plugin-contain@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/plugin-blit": "1.6.0", "@jimp/plugin-resize": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-oN/n+Vdq/Qg9bB4yOBOxtY9IPAtEfES8J1n9Ddx+XhGBYT1/QTU/JYkGaAkIGoPnyYvmLEDqMz2SGihqlpqfzQ=="],
+
+    "@jimp/plugin-cover": ["@jimp/plugin-cover@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/plugin-crop": "1.6.0", "@jimp/plugin-resize": "1.6.0", "@jimp/types": "1.6.0", "zod": "^3.23.8" } }, "sha512-Iow0h6yqSC269YUJ8HC3Q/MpCi2V55sMlbkkTTx4zPvd8mWZlC0ykrNDeAy9IJegrQ7v5E99rJwmQu25lygKLA=="],
+
+    "@jimp/plugin-crop": ["@jimp/plugin-crop@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-KqZkEhvs+21USdySCUDI+GFa393eDIzbi1smBqkUPTE+pRwSWMAf01D5OC3ZWB+xZsNla93BDS9iCkLHA8wang=="],
+
+    "@jimp/plugin-displace": ["@jimp/plugin-displace@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-4Y10X9qwr5F+Bo5ME356XSACEF55485j5nGdiyJ9hYzjQP9nGgxNJaZ4SAOqpd+k5sFaIeD7SQ0Occ26uIng5Q=="],
+
+    "@jimp/plugin-dither": ["@jimp/plugin-dither@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0" } }, "sha512-600d1RxY0pKwgyU0tgMahLNKsqEcxGdbgXadCiVCoGd6V6glyCvkNrnnwC0n5aJ56Htkj88PToSdF88tNVZEEQ=="],
+
+    "@jimp/plugin-fisheye": ["@jimp/plugin-fisheye@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-E5QHKWSCBFtpgZarlmN3Q6+rTQxjirFqo44ohoTjzYVrDI6B6beXNnPIThJgPr0Y9GwfzgyarKvQuQuqCnnfbA=="],
+
+    "@jimp/plugin-flip": ["@jimp/plugin-flip@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "zod": "^3.23.8" } }, "sha512-/+rJVDuBIVOgwoyVkBjUFHtP+wmW0r+r5OQ2GpatQofToPVbJw1DdYWXlwviSx7hvixTWLKVgRWQ5Dw862emDg=="],
+
+    "@jimp/plugin-hash": ["@jimp/plugin-hash@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/js-bmp": "1.6.0", "@jimp/js-jpeg": "1.6.0", "@jimp/js-png": "1.6.0", "@jimp/js-tiff": "1.6.0", "@jimp/plugin-color": "1.6.0", "@jimp/plugin-resize": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "any-base": "^1.1.0" } }, "sha512-wWzl0kTpDJgYVbZdajTf+4NBSKvmI3bRI8q6EH9CVeIHps9VWVsUvEyb7rpbcwVLWYuzDtP2R0lTT6WeBNQH9Q=="],
+
+    "@jimp/plugin-mask": ["@jimp/plugin-mask@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "zod": "^3.23.8" } }, "sha512-Cwy7ExSJMZszvkad8NV8o/Z92X2kFUFM8mcDAhNVxU0Q6tA0op2UKRJY51eoK8r6eds/qak3FQkXakvNabdLnA=="],
+
+    "@jimp/plugin-print": ["@jimp/plugin-print@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/js-jpeg": "1.6.0", "@jimp/js-png": "1.6.0", "@jimp/plugin-blit": "1.6.0", "@jimp/types": "1.6.0", "parse-bmfont-ascii": "^1.0.6", "parse-bmfont-binary": "^1.0.6", "parse-bmfont-xml": "^1.1.6", "simple-xml-to-json": "^1.2.2", "zod": "^3.23.8" } }, "sha512-zarTIJi8fjoGMSI/M3Xh5yY9T65p03XJmPsuNet19K/Q7mwRU6EV2pfj+28++2PV2NJ+htDF5uecAlnGyxFN2A=="],
+
+    "@jimp/plugin-quantize": ["@jimp/plugin-quantize@1.6.0", "", { "dependencies": { "image-q": "^4.0.0", "zod": "^3.23.8" } }, "sha512-EmzZ/s9StYQwbpG6rUGBCisc3f64JIhSH+ncTJd+iFGtGo0YvSeMdAd+zqgiHpfZoOL54dNavZNjF4otK+mvlg=="],
+
+    "@jimp/plugin-resize": ["@jimp/plugin-resize@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/types": "1.6.0", "zod": "^3.23.8" } }, "sha512-uSUD1mqXN9i1SGSz5ov3keRZ7S9L32/mAQG08wUwZiEi5FpbV0K8A8l1zkazAIZi9IJzLlTauRNU41Mi8IF9fA=="],
+
+    "@jimp/plugin-rotate": ["@jimp/plugin-rotate@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/plugin-crop": "1.6.0", "@jimp/plugin-resize": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-JagdjBLnUZGSG4xjCLkIpQOZZ3Mjbg8aGCCi4G69qR+OjNpOeGI7N2EQlfK/WE8BEHOW5vdjSyglNqcYbQBWRw=="],
+
+    "@jimp/plugin-threshold": ["@jimp/plugin-threshold@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/plugin-color": "1.6.0", "@jimp/plugin-hash": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0", "zod": "^3.23.8" } }, "sha512-M59m5dzLoHOVWdM41O8z9SyySzcDn43xHseOH0HavjsfQsT56GGCC4QzU1banJidbUrePhzoEdS42uFE8Fei8w=="],
+
+    "@jimp/types": ["@jimp/types@1.6.0", "", { "dependencies": { "zod": "^3.23.8" } }, "sha512-7UfRsiKo5GZTAATxm2qQ7jqmUXP0DxTArztllTcYdyw6Xi5oT4RaoXynVtCD4UyLK5gJgkZJcwonoijrhYFKfg=="],
+
+    "@jimp/utils": ["@jimp/utils@1.6.0", "", { "dependencies": { "@jimp/types": "1.6.0", "tinycolor2": "^1.6.0" } }, "sha512-gqFTGEosKbOkYF/WFj26jMHOI5OH2jeP1MmC/zbK6BF6VJBf8rIC5898dPfSzZEbSA0wbbV5slbntWVc5PKLFA=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -435,6 +512,22 @@
 
     "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
 
+    "@opentui/core": ["@opentui/core@0.1.90", "", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "0.1.90", "@opentui/core-darwin-x64": "0.1.90", "@opentui/core-linux-arm64": "0.1.90", "@opentui/core-linux-x64": "0.1.90", "@opentui/core-win32-arm64": "0.1.90", "@opentui/core-win32-x64": "0.1.90", "bun-webgpu": "0.1.5", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }, "sha512-Os2dviqWVETU3kaK36lbSvdcI93GAWhw0xb9ng/d0DWYuM9scRmAhLHiOayp61saWv/BR8OJXeuQYHvrp5rd6A=="],
+
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@0.1.90", "", { "os": "darwin", "cpu": "arm64" }, "sha512-XFrm2zCg1SlHPQ5A2HX/I4dCrmTjYaCJIIpo3QuPIvZBGH3aBMdWDJh2tXw7AB5Mmh8X1K4hDkP5nlK9x0Ewow=="],
+
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@0.1.90", "", { "os": "darwin", "cpu": "x64" }, "sha512-vbDpUsnlZ+0CeVKyBBXE+l2+X1XoVncMxMOhXTiMtud2/Cwu+Vfs/g3LC/6Zv08yaytA+9g7Z8sdf0QCqFyQ4w=="],
+
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@0.1.90", "", { "os": "linux", "cpu": "arm64" }, "sha512-OTbvBTP5mVQ4uwKyuz6b59ElG+D0i1Ln+q6cVhNkLgeRLySIn1uXEzUFQGlnVgb8lFDANsn3yQmdv+R+Cpw0og=="],
+
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@0.1.90", "", { "os": "linux", "cpu": "x64" }, "sha512-2PJi/LLlO7tGk9Ful/n+6iBdg1RFrA9ibU7wVneE6Z1P0LCYeu7bpwMzea1TXL0eAQWPHsjTs9aPlqPxln0EJw=="],
+
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@0.1.90", "", { "os": "win32", "cpu": "arm64" }, "sha512-+sTRaOb7gCMZ6iLuuG4y9kzyweJzBDcIJN0Xh49ikFWTwVECDXEVtXahNGlw57avm2yYUoNzmpBjK/LV7zBj9A=="],
+
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@0.1.90", "", { "os": "win32", "cpu": "x64" }, "sha512-aVFyErckWp4oW9NJ/ZDKBUAlTlfVUiRXGP63JXFOoeqI7EYaM8uBt6rgZAJuUdFWCN2Q66WRS8Y2mk+0BJwVBg=="],
+
+    "@opentui/react": ["@opentui/react@0.1.90", "", { "dependencies": { "@opentui/core": "0.1.90", "react-reconciler": "^0.32.0" }, "peerDependencies": { "react": ">=19.0.0", "react-devtools-core": "^7.0.1", "ws": "^8.18.0" } }, "sha512-uYojzdqDanib5zj/fN2ikHZe+D6zZckZrTgz45ndunozeGPTSt64oRqi9GDCrt26tzTSJHqjJGGJSoIRhNvwyg=="],
+
     "@oxc-resolver/binding-android-arm-eabi": ["@oxc-resolver/binding-android-arm-eabi@11.16.0", "", { "os": "android", "cpu": "arm" }, "sha512-/kFX4o8KISHCZzHRs8fBp/wZOPdkhYGquhMP2PQjc8ePAVbtaXXDPAFkjUKhz2jXNPS4jGA1wNW+8grhnJgstw=="],
 
     "@oxc-resolver/binding-android-arm64": ["@oxc-resolver/binding-android-arm64@11.16.0", "", { "os": "android", "cpu": "arm64" }, "sha512-kPySx7j7mPxW4mRDrdbADyzJV2XrxVeMPDmNnFvTt0/LT1IA26Uk9hzWKQb4k4aeJY58bnRY1soYSawW5wAlKQ=="],
@@ -507,6 +600,8 @@
 
     "@playfast/wmux-client": ["@playfast/wmux-client@workspace:packages/wmux-client"],
 
+    "@playfast/wmux-client-terminal": ["@playfast/wmux-client-terminal@workspace:packages/wmux-client-terminal"],
+
     "@playwright/test": ["@playwright/test@1.58.2", "", { "dependencies": { "playwright": "1.58.2" }, "bin": { "playwright": "cli.js" } }, "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA=="],
 
     "@preact/signals-core": ["@preact/signals-core@1.14.0", "", {}, "sha512-AowtCcCU/33lFlh1zRFf/u+12rfrhtNakj7UpaGEsmMwUKpKWMVvcktOGcwBBNiB4lWrZWc01LhiyyzVklJyaQ=="],
@@ -845,6 +940,8 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.2.2", "", { "dependencies": { "@tailwindcss/node": "4.2.2", "@tailwindcss/oxide": "4.2.2", "tailwindcss": "4.2.2" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w=="],
 
+    "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
+
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
 
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
@@ -891,10 +988,14 @@
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
 
+    "@webgpu/types": ["@webgpu/types@0.1.69", "", {}, "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ=="],
+
     "@xterm/addon-fit": ["@xterm/addon-fit@0.10.0", "", { "peerDependencies": { "@xterm/xterm": "^5.0.0" } }, "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ=="],
 
     "@xterm/xterm": ["@xterm/xterm@5.5.0", "", {}, "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A=="],
 
+    "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
+
     "accepts": ["accepts@1.3.8", "", { "dependencies": { "mime-types": "~2.1.34", "negotiator": "0.6.3" } }, "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw=="],
 
     "ansi-colors": ["ansi-colors@4.1.3", "", {}, "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="],
@@ -903,26 +1004,48 @@
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
+    "any-base": ["any-base@1.1.0", "", {}, "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="],
+
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
     "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
 
     "array-union": ["array-union@2.1.0", "", {}, "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="],
 
+    "await-to-js": ["await-to-js@3.0.0", "", {}, "sha512-zJAaP9zxTcvTHRlejau3ZOY4V7SRpiByf3/dxx2uyKxxor19tpmpV2QRsTKikckwhaPmr2dVpxxMr7jOCYVp5g=="],
+
+    "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
+
     "base64id": ["base64id@2.0.0", "", {}, "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="],
 
     "baseline-browser-mapping": ["baseline-browser-mapping@2.9.11", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ=="],
 
     "better-path-resolve": ["better-path-resolve@1.0.0", "", { "dependencies": { "is-windows": "^1.0.0" } }, "sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g=="],
 
+    "bmp-ts": ["bmp-ts@1.0.9", "", {}, "sha512-cTEHk2jLrPyi+12M3dhpEbnnPOsaZuq7C45ylbbQIiWgDFZq4UVYPEY5mlqjvsj/6gJv9qX5sa+ebDzLXT28Vw=="],
+
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
     "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
 
+    "buffer": ["buffer@6.0.3", "", { "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.2.1" } }, "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA=="],
+
     "bufferutil": ["bufferutil@4.0.7", "", { "dependencies": { "node-gyp-build": "^4.3.0" } }, "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw=="],
 
+    "bun-ffi-structs": ["bun-ffi-structs@0.1.2", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-Lh1oQAYHDcnesJauieA4UNkWGXY9hYck7OA5IaRwE3Bp6K2F2pJSNYqq+hIy7P3uOvo3km3oxS8304g5gDMl/w=="],
+
     "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
 
+    "bun-webgpu": ["bun-webgpu@0.1.5", "", { "dependencies": { "@webgpu/types": "^0.1.60" }, "optionalDependencies": { "bun-webgpu-darwin-arm64": "^0.1.5", "bun-webgpu-darwin-x64": "^0.1.5", "bun-webgpu-linux-x64": "^0.1.5", "bun-webgpu-win32-x64": "^0.1.5" } }, "sha512-91/K6S5whZKX7CWAm9AylhyKrLGRz6BUiiPiM/kXadSnD4rffljCD/q9cNFftm5YXhx4MvLqw33yEilxogJvwA=="],
+
+    "bun-webgpu-darwin-arm64": ["bun-webgpu-darwin-arm64@0.1.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-lIsDkPzJzPl6yrB5CUOINJFPnTRv6fF/Q8J1mAr43ogSp86WZEg9XZKaT6f3EUJ+9ETogGoMnoj1q0AwHUTbAQ=="],
+
+    "bun-webgpu-darwin-x64": ["bun-webgpu-darwin-x64@0.1.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-uEddf5U7GvKIkM/BV18rUKtYHL6d0KeqBjNHwfqDH9QgEo9KVSKvJXS5I/sMefk5V5pIYE+8tQhtrREevhocng=="],
+
+    "bun-webgpu-linux-x64": ["bun-webgpu-linux-x64@0.1.6", "", { "os": "linux", "cpu": "x64" }, "sha512-Y/f15j9r8ba0xUz+3lATtS74OE+PPzQXO7Do/1eCluJcuOlfa77kMjvBK/ShWnem3Y9xqi59pebTPOGRB+CaJA=="],
+
+    "bun-webgpu-win32-x64": ["bun-webgpu-win32-x64@0.1.6", "", { "os": "win32", "cpu": "x64" }, "sha512-MHSFAKqizISb+C5NfDrFe3g0Al5Njnu0j/A+oO2Q+bIWX+fUYjBSowiYE1ZXJx65KuryuB+tiM7Qh6cQbVvkEg=="],
+
     "caniuse-lite": ["caniuse-lite@1.0.30001761", "", {}, "sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
@@ -967,6 +1090,8 @@
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
 
+    "diff": ["diff@8.0.2", "", {}, "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg=="],
+
     "dir-glob": ["dir-glob@3.0.1", "", { "dependencies": { "path-type": "^4.0.0" } }, "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA=="],
 
     "dompurify": ["dompurify@3.2.7", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw=="],
@@ -991,6 +1116,12 @@
 
     "esprima": ["esprima@4.0.1", "", { "bin": { "esparse": "./bin/esparse.js", "esvalidate": "./bin/esvalidate.js" } }, "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="],
 
+    "event-target-shim": ["event-target-shim@5.0.1", "", {}, "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="],
+
+    "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
+
+    "exif-parser": ["exif-parser@0.1.12", "", {}, "sha512-c2bQfLNbMzLPmzQuOr8fy0csy84WmwnER81W88DzTp9CYNPJ6yzOj2EZAh9pywYpqHnshVLHQJ8WzldAyfY+Iw=="],
+
     "extendable-error": ["extendable-error@0.1.7", "", {}, "sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg=="],
 
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
@@ -1003,6 +1134,8 @@
 
     "file-editor-demo": ["file-editor-demo@workspace:demo/file-editor"],
 
+    "file-type": ["file-type@16.5.4", "", { "dependencies": { "readable-web-to-node-stream": "^3.0.0", "strtok3": "^6.2.4", "token-types": "^4.1.1" } }, "sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw=="],
+
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
@@ -1021,6 +1154,8 @@
 
     "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
 
+    "gifwrap": ["gifwrap@0.10.1", "", { "dependencies": { "image-q": "^4.0.0", "omggif": "^1.0.10" } }, "sha512-2760b1vpJHNmLzZ/ubTtNnEx5WApN/PYWJvXvgS+tL1egTTthayFYIQQNi136FLEDcN/IyEY2EcGpIITD6eYUw=="],
+
     "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "globby": ["globby@11.1.0", "", { "dependencies": { "array-union": "^2.1.0", "dir-glob": "^3.0.1", "fast-glob": "^3.2.9", "ignore": "^5.2.0", "merge2": "^1.4.1", "slash": "^3.0.0" } }, "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g=="],
@@ -1033,8 +1168,12 @@
 
     "iconv-lite": ["iconv-lite@0.7.1", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw=="],
 
+    "ieee754": ["ieee754@1.2.1", "", {}, "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="],
+
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
+    "image-q": ["image-q@4.0.0", "", { "dependencies": { "@types/node": "16.9.1" } }, "sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw=="],
+
     "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
 
     "intl-messageformat": ["intl-messageformat@10.7.18", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.4", "tslib": "^2.8.0" } }, "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g=="],
@@ -1053,8 +1192,12 @@
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
+    "jimp": ["jimp@1.6.0", "", { "dependencies": { "@jimp/core": "1.6.0", "@jimp/diff": "1.6.0", "@jimp/js-bmp": "1.6.0", "@jimp/js-gif": "1.6.0", "@jimp/js-jpeg": "1.6.0", "@jimp/js-png": "1.6.0", "@jimp/js-tiff": "1.6.0", "@jimp/plugin-blit": "1.6.0", "@jimp/plugin-blur": "1.6.0", "@jimp/plugin-circle": "1.6.0", "@jimp/plugin-color": "1.6.0", "@jimp/plugin-contain": "1.6.0", "@jimp/plugin-cover": "1.6.0", "@jimp/plugin-crop": "1.6.0", "@jimp/plugin-displace": "1.6.0", "@jimp/plugin-dither": "1.6.0", "@jimp/plugin-fisheye": "1.6.0", "@jimp/plugin-flip": "1.6.0", "@jimp/plugin-hash": "1.6.0", "@jimp/plugin-mask": "1.6.0", "@jimp/plugin-print": "1.6.0", "@jimp/plugin-quantize": "1.6.0", "@jimp/plugin-resize": "1.6.0", "@jimp/plugin-rotate": "1.6.0", "@jimp/plugin-threshold": "1.6.0", "@jimp/types": "1.6.0", "@jimp/utils": "1.6.0" } }, "sha512-YcwCHw1kiqEeI5xRpDlPPBGL2EOpBKLwO4yIBJcXWHPj5PnA5urGq0jbyhM5KoNpypQ6VboSoxc9D8HyfvngSg=="],
+
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
+    "jpeg-js": ["jpeg-js@0.4.4", "", {}, "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg=="],
+
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
@@ -1101,12 +1244,14 @@
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
-    "marked": ["marked@14.0.0", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ=="],
+    "marked": ["marked@17.0.1", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg=="],
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
+    "mime": ["mime@3.0.0", "", { "bin": { "mime": "cli.js" } }, "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="],
+
     "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
 
     "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
@@ -1129,6 +1274,8 @@
 
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
+    "omggif": ["omggif@1.0.10", "", {}, "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw=="],
+
     "outdent": ["outdent@0.5.0", "", {}, "sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q=="],
 
     "oxc-resolver": ["oxc-resolver@11.16.0", "", { "optionalDependencies": { "@oxc-resolver/binding-android-arm-eabi": "11.16.0", "@oxc-resolver/binding-android-arm64": "11.16.0", "@oxc-resolver/binding-darwin-arm64": "11.16.0", "@oxc-resolver/binding-darwin-x64": "11.16.0", "@oxc-resolver/binding-freebsd-x64": "11.16.0", "@oxc-resolver/binding-linux-arm-gnueabihf": "11.16.0", "@oxc-resolver/binding-linux-arm-musleabihf": "11.16.0", "@oxc-resolver/binding-linux-arm64-gnu": "11.16.0", "@oxc-resolver/binding-linux-arm64-musl": "11.16.0", "@oxc-resolver/binding-linux-ppc64-gnu": "11.16.0", "@oxc-resolver/binding-linux-riscv64-gnu": "11.16.0", "@oxc-resolver/binding-linux-riscv64-musl": "11.16.0", "@oxc-resolver/binding-linux-s390x-gnu": "11.16.0", "@oxc-resolver/binding-linux-x64-gnu": "11.16.0", "@oxc-resolver/binding-linux-x64-musl": "11.16.0", "@oxc-resolver/binding-openharmony-arm64": "11.16.0", "@oxc-resolver/binding-wasm32-wasi": "11.16.0", "@oxc-resolver/binding-win32-arm64-msvc": "11.16.0", "@oxc-resolver/binding-win32-ia32-msvc": "11.16.0", "@oxc-resolver/binding-win32-x64-msvc": "11.16.0" } }, "sha512-I4sHGa1fZUpTQ9ftS0E0cBYbBjNnIKXRSX/trFMIJDIJ4n21dCrLAZhnJS0TSfRIRqZNFyceNZr2kablfgNyTA=="],
@@ -1147,26 +1294,44 @@
 
     "package-manager-detector": ["package-manager-detector@0.2.11", "", { "dependencies": { "quansync": "^0.2.7" } }, "sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ=="],
 
+    "pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
+
+    "parse-bmfont-ascii": ["parse-bmfont-ascii@1.0.6", "", {}, "sha512-U4RrVsUFCleIOBsIGYOMKjn9PavsGOXxbvYGtMOEfnId0SVNsgehXh1DxUdVPLoxd5mvcEtvmKs2Mmf0Mpa1ZA=="],
+
+    "parse-bmfont-binary": ["parse-bmfont-binary@1.0.6", "", {}, "sha512-GxmsRea0wdGdYthjuUeWTMWPqm2+FAd4GI8vCvhgJsFnoGhTrLhXDDupwTo7rXVAgaLIGoVHDZS9p/5XbSqeWA=="],
+
+    "parse-bmfont-xml": ["parse-bmfont-xml@1.1.6", "", { "dependencies": { "xml-parse-from-string": "^1.0.0", "xml2js": "^0.5.0" } }, "sha512-0cEliVMZEhrFDwMh4SxIyVJpqYoOWDJ9P895tFuS+XuNzI5UBmBk5U5O4KuJdTnZpSBI4LFA2+ZiJaiwfSwlMA=="],
+
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
     "path-type": ["path-type@4.0.0", "", {}, "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="],
 
+    "peek-readable": ["peek-readable@4.1.0", "", {}, "sha512-ZI3LnwUv5nOGbQzD9c2iDG6toheuXSZP5esSHBjopsXH4dg19soufvpUGA3uohi5anFtGb2lhAVdHzH6R/Evvg=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
 
     "pify": ["pify@4.0.1", "", {}, "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="],
 
+    "pixelmatch": ["pixelmatch@5.3.0", "", { "dependencies": { "pngjs": "^6.0.0" }, "bin": { "pixelmatch": "bin/pixelmatch" } }, "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q=="],
+
+    "planck": ["planck@1.4.3", "", { "peerDependencies": { "stage-js": "^1.0.0-alpha.12" } }, "sha512-B+lHKhRSeg7vZOfEyEzyQVu7nx8JHcX3QgnAcHXrPW0j04XYKX5eXSiUrxH2Z5QR8OoqvjD6zKIaPMdMYAd0uA=="],
+
     "playwright": ["playwright@1.58.2", "", { "dependencies": { "playwright-core": "1.58.2" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A=="],
 
     "playwright-core": ["playwright-core@1.58.2", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg=="],
 
+    "pngjs": ["pngjs@7.0.0", "", {}, "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow=="],
+
     "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
 
     "prettier": ["prettier@2.8.8", "", { "bin": { "prettier": "bin-prettier.js" } }, "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q=="],
 
+    "process": ["process@0.11.10", "", {}, "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="],
+
     "quansync": ["quansync@0.2.11", "", {}, "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA=="],
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -1177,6 +1342,8 @@
 
     "react-aria-components": ["react-aria-components@1.16.0", "", { "dependencies": { "@internationalized/date": "^3.12.0", "@internationalized/string": "^3.2.7", "@react-aria/autocomplete": "3.0.0-rc.6", "@react-aria/collections": "^3.0.3", "@react-aria/dnd": "^3.11.6", "@react-aria/focus": "^3.21.5", "@react-aria/interactions": "^3.27.1", "@react-aria/live-announcer": "^3.4.4", "@react-aria/overlays": "^3.31.2", "@react-aria/ssr": "^3.9.10", "@react-aria/textfield": "^3.18.5", "@react-aria/toolbar": "3.0.0-beta.24", "@react-aria/utils": "^3.33.1", "@react-aria/virtualizer": "^4.1.13", "@react-stately/autocomplete": "3.0.0-beta.4", "@react-stately/layout": "^4.6.0", "@react-stately/selection": "^3.20.9", "@react-stately/table": "^3.15.4", "@react-stately/utils": "^3.11.0", "@react-stately/virtualizer": "^4.4.6", "@react-types/form": "^3.7.18", "@react-types/grid": "^3.3.8", "@react-types/shared": "^3.33.1", "@react-types/table": "^3.13.6", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "^3.47.0", "react-stately": "^3.45.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-MjHbTLpMFzzD2Tv5KbeXoZwPczuUWZcRavVvQQlNHRtXHH38D+sToMEYpNeir7Wh3K/XWtzeX3EujfJW6QNkrw=="],
 
+    "react-devtools-core": ["react-devtools-core@7.0.1", "", { "dependencies": { "shell-quote": "^1.6.1", "ws": "^7" } }, "sha512-C3yNvRHaizlpiASzy7b9vbnBGLrhvdhl1CbdU6EnZgxPNbai60szdLtl+VL76UNOt5bOoVTOz5rNWZxgGt+Gsw=="],
+
     "react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
 
     "react-reconciler": ["react-reconciler@0.31.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-7Ob7Z+URmesIsIVRjnLoDGwBEG/tVitidU0nMsqX/eeJaLY89RISO/10ERe0MqmzuKUUB1rmY+h1itMbUHg9BQ=="],
@@ -1193,6 +1360,10 @@
 
     "read-yaml-file": ["read-yaml-file@1.1.0", "", { "dependencies": { "graceful-fs": "^4.1.5", "js-yaml": "^3.6.1", "pify": "^4.0.1", "strip-bom": "^3.0.0" } }, "sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA=="],
 
+    "readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="],
+
+    "readable-web-to-node-stream": ["readable-web-to-node-stream@3.0.4", "", { "dependencies": { "readable-stream": "^4.7.0" } }, "sha512-9nX56alTf5bwXQ3ZDipHJhusu9NTQJ/CVPtb/XHAJCXihZeitfJvIRS4GqQ/mfIoOE3IelHMrpayVrosdHBuLw=="],
+
     "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
 
     "resolve-from": ["resolve-from@5.0.0", "", {}, "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="],
@@ -1205,8 +1376,12 @@
 
     "rxjs": ["rxjs@7.8.2", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA=="],
 
+    "safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
+
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
 
+    "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="],
+
     "scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="],
 
     "semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
@@ -1219,6 +1394,8 @@
 
     "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
 
+    "simple-xml-to-json": ["simple-xml-to-json@1.2.4", "", {}, "sha512-3MY16e0ocMHL7N1ufpdObURGyX+lCo0T/A+y6VCwosLdH1HSda4QZl1Sdt/O+2qWp48WFi26XEp5rF0LoaL0Dg=="],
+
     "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
     "smol-toml": ["smol-toml@1.5.2", "", {}, "sha512-QlaZEqcAH3/RtNyet1IPIYPsEWAaYyXXv1Krsi+1L/QHppjX4Ifm8MQsBISz9vE8cHicIq3clogsheili5vhaQ=="],
@@ -1237,16 +1414,22 @@
 
     "sprintf-js": ["sprintf-js@1.0.3", "", {}, "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="],
 
+    "stage-js": ["stage-js@1.0.1", "", {}, "sha512-cz14aPp/wY0s3bkb/B93BPP5ZAEhgBbRmAT3CCDqert8eCAqIpQ0RB2zpK8Ksxf+Pisl5oTzvPHtL4CVzzeHcw=="],
+
     "state-local": ["state-local@1.0.7", "", {}, "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="],
 
     "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
+    "string_decoder": ["string_decoder@1.3.0", "", { "dependencies": { "safe-buffer": "~5.2.0" } }, "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA=="],
+
     "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
     "strip-bom": ["strip-bom@3.0.0", "", {}, "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA=="],
 
     "strip-json-comments": ["strip-json-comments@5.0.3", "", {}, "sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw=="],
 
+    "strtok3": ["strtok3@6.3.0", "", { "dependencies": { "@tokenizer/token": "^0.3.0", "peek-readable": "^4.1.0" } }, "sha512-fZtbhtvI9I48xDSywd/somNqgUHl2L2cstmXCCif0itOf96jeW18MBSyrLuNicYQVkvpOxkZtkzujiTJ9LW5Jw=="],
+
     "supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
 
     "systeminformation": ["systeminformation@5.31.5", "", { "os": "!aix", "bin": { "systeminformation": "lib/cli.js" } }, "sha512-5SyLdip4/3alxD4Kh+63bUQTJmu7YMfYQTC+koZy7X73HgNqZSD2P4wOZQWtUncvPvcEmnfIjCoygN4MRoEejQ=="],
@@ -1261,12 +1444,18 @@
 
     "term-size": ["term-size@2.2.1", "", {}, "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="],
 
+    "three": ["three@0.177.0", "", {}, "sha512-EiXv5/qWAaGI+Vz2A+JfavwYCMdGjxVsrn3oBwllUoqYeaBO75J63ZfyaQKoiLrqNHoTlUc6PFgMXnS0kI45zg=="],
+
+    "tinycolor2": ["tinycolor2@1.6.0", "", {}, "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="],
+
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
 
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
     "todo-app-demo": ["todo-app-demo@workspace:demo/todo-app"],
 
+    "token-types": ["token-types@4.2.1", "", { "dependencies": { "@tokenizer/token": "^0.3.0", "ieee754": "^1.2.1" } }, "sha512-6udB24Q737UD/SDsKAHI9FCRP7Bqc9D/MQUV02ORQg5iskjtLJlZJNdN4kKtcdtwCeWIwIHDGaUsTsCCAa8sFQ=="],
+
     "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
@@ -1291,18 +1480,28 @@
 
     "utf-8-validate": ["utf-8-validate@5.0.10", "", { "dependencies": { "node-gyp-build": "^4.3.0" } }, "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ=="],
 
+    "utif2": ["utif2@4.1.0", "", { "dependencies": { "pako": "^1.0.11" } }, "sha512-+oknB9FHrJ7oW7A2WZYajOcv4FcDR4CfoGB0dPNfxbi4GO05RRnFmt5oa23+9w32EanrYcSJWspUiJkLMs+37w=="],
+
     "vary": ["vary@1.1.2", "", {}, "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="],
 
     "vite": ["vite@6.4.1", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g=="],
 
     "walk-up-path": ["walk-up-path@4.0.0", "", {}, "sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A=="],
 
+    "web-tree-sitter": ["web-tree-sitter@0.25.10", "", { "peerDependencies": { "@types/emscripten": "^1.40.0" }, "optionalPeers": ["@types/emscripten"] }, "sha512-Y09sF44/13XvgVKgO2cNDw5rGk6s26MgoZPXLESvMXeefBf7i6/73eFurre0IsTW6E14Y0ArIzhUMmjoc7xyzA=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
     "ws": ["ws@8.18.3", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg=="],
 
+    "xml-parse-from-string": ["xml-parse-from-string@1.0.1", "", {}, "sha512-ErcKwJTF54uRzzNMXq2X5sMIy88zJvfN2DmdoQvy7PAFJ+tPRU6ydWuOKNMyfmOjdyBQTFREi60s0Y0SyI0G0g=="],
+
+    "xml2js": ["xml2js@0.5.0", "", { "dependencies": { "sax": ">=0.6.0", "xmlbuilder": "~11.0.0" } }, "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA=="],
+
+    "xmlbuilder": ["xmlbuilder@11.0.1", "", {}, "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="],
+
     "xmlhttprequest-ssl": ["xmlhttprequest-ssl@2.1.2", "", {}, "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ=="],
 
     "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
@@ -1313,6 +1512,8 @@
 
     "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
 
+    "yoga-layout": ["yoga-layout@3.2.1", "", {}, "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ=="],
+
     "zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
     "@babel/core/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
@@ -1331,6 +1532,8 @@
 
     "@manypkg/get-packages/fs-extra": ["fs-extra@8.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } }, "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g=="],
 
+    "@opentui/react/react-reconciler": ["react-reconciler@0.32.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-2NPMOzgTlG0ZWdIf3qG+dcbLSoAc/uLfOwckc3ofy5sSK0pLJqnQLpUFxvGcN2rlXSjnVtGeeFLNimCQEj5gOQ=="],
+
     "@playfast/wmux/zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
     "@playfast/wmux-client/typescript": ["typescript@5.7.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg=="],
@@ -1375,14 +1578,22 @@
 
     "file-editor-demo/zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
+    "image-q/@types/node": ["@types/node@16.9.1", "", {}, "sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g=="],
+
     "knip/@types/node": ["@types/node@18.11.9", "", {}, "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="],
 
     "knip/zod": ["zod@4.2.1", "", {}, "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw=="],
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "monaco-editor/marked": ["marked@14.0.0", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ=="],
+
+    "pixelmatch/pngjs": ["pngjs@6.0.0", "", {}, "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg=="],
+
     "playwright/fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],
 
+    "react-devtools-core/ws": ["ws@7.5.10", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": "^5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ=="],
+
     "read-yaml-file/js-yaml": ["js-yaml@3.14.2", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg=="],
 
     "socket.io-parser/debug": ["debug@4.3.7", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ=="],
@@ -1391,6 +1602,8 @@
 
     "todo-app-demo/zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
 
+    "@opentui/react/react-reconciler/scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg=="],
 
     "read-yaml-file/js-yaml/argparse": ["argparse@1.0.10", "", { "dependencies": { "sprintf-js": "~1.0.2" } }, "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg=="],
diff --git a/demo/dev-server/package.json b/demo/dev-server/package.json
index 7d74610..55ded81 100644
--- a/demo/dev-server/package.json
+++ b/demo/dev-server/package.json
@@ -8,10 +8,12 @@
     "dev:server": "bun server/index.tsx",
     "dev:client": "cd ../../packages/wmux-client && bun run dev",
     "dev": "concurrently \"bun run dev:server\" \"bun run dev:client\"",
+    "tui": "bun server/tui.tsx",
     "test": "playwright test"
   },
   "dependencies": {
     "@playfast/wmux": "workspace:*",
+    "@playfast/wmux-client-terminal": "workspace:*",
     "react": "^19.0.0"
   },
   "devDependencies": {
diff --git a/demo/dev-server/server/tui.tsx b/demo/dev-server/server/tui.tsx
new file mode 100644
index 0000000..bb008d8
--- /dev/null
+++ b/demo/dev-server/server/tui.tsx
@@ -0,0 +1,42 @@
+import { wmuxTUI } from "@playfast/wmux/preset/tui";
+
+const { done } = await wmuxTUI({
+  title: "echoform",
+  description: "local",
+  sidebarItems: [
+    {
+      category: "background",
+      icon: "Activity",
+      tabs: [
+        { name: "counter", icon: "Clock", process: { command: `bash -c 'i=0; while true; do echo "tick $((i++))"; sleep 1; done'` } },
+        { name: "logger", icon: "FileText", process: { command: `bash -c 'while true; do echo "[$(date +%T)] log entry"; sleep 2; done'` } },
+      ],
+    },
+    {
+      category: "interactive",
+      icon: "Terminal",
+      tabs: [
+        { name: "shell", icon: "SquareTerminal", process: { command: process.env.SHELL ?? "/bin/bash" } },
+      ],
+    },
+    {
+      category: "services",
+      icon: "Server",
+      tabs: [
+        { name: "failing", icon: "Bug", description: "auto-restarts", process: { command: `bash -c 'echo "starting..."; sleep 3; echo "crash!"; exit 1'`, autoRestart: true } },
+        { name: "manual", icon: "Wrench", description: "manual start", process: { command: `bash -c 'echo "manual process running"; sleep infinity'`, autoStart: false } },
+        { name: "example.com", icon: "Globe", description: "iframe preview", url: "https://example.com" },
+      ],
+    },
+    {
+      category: "project",
+      icon: "Folder",
+      files: ".",
+    },
+  ],
+  port: 4220,
+  token: "test-token",
+});
+
+await done;
+process.exit(0);
diff --git a/packages/wmux-client-terminal/package.json b/packages/wmux-client-terminal/package.json
new file mode 100644
index 0000000..238a579
--- /dev/null
+++ b/packages/wmux-client-terminal/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@playfast/wmux-client-terminal",
+  "version": "0.0.1",
+  "description": "Terminal UI client for wmux",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsgo -p .",
+    "build": "tsgo -p ."
+  },
+  "dependencies": {
+    "@playfast/echoform": "workspace:*",
+    "@playfast/wmux": "workspace:*",
+    "@opentui/core": "latest",
+    "@opentui/react": "latest"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.0.0"
+  },
+  "author": "shmuelhizmi",
+  "license": "MIT"
+}
diff --git a/packages/wmux-client-terminal/src/components/FocusContext.tsx b/packages/wmux-client-terminal/src/components/FocusContext.tsx
new file mode 100644
index 0000000..a5a442f
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/FocusContext.tsx
@@ -0,0 +1,55 @@
+/** @jsxImportSource @opentui/react */
+import { createContext, useContext, useRef, type ReactNode, type MutableRefObject } from "react";
+
+// ── Prefix key context ─────────────────────────────────────
+// Uses a ref so both WmuxApp and WmuxTerminal can read the
+// prefix state synchronously within the same useKeyboard tick.
+
+interface PrefixContextValue {
+  /** True when Ctrl+B was just pressed and the next key is a TUI command */
+  readonly prefixRef: MutableRefObject<boolean>;
+  readonly activeTabId: string;
+}
+
+const PrefixContext = createContext<PrefixContextValue>({
+  prefixRef: { current: false },
+  activeTabId: "",
+});
+
+export const PrefixProvider = ({
+  prefixRef,
+  activeTabId,
+  children,
+}: {
+  readonly prefixRef: MutableRefObject<boolean>;
+  readonly activeTabId: string;
+  readonly children: ReactNode;
+}): ReactNode => (
+  <PrefixContext.Provider value={{ prefixRef, activeTabId }}>
+    {children}
+  </PrefixContext.Provider>
+);
+
+export const usePrefixContext = (): PrefixContextValue => useContext(PrefixContext);
+
+// ── TUI-level config context (web URL, etc.) ───────────────
+
+interface TUIContextValue {
+  readonly webUrl?: string;
+}
+
+const TUIContext = createContext<TUIContextValue>({});
+
+export const TUIProvider = ({
+  webUrl,
+  children,
+}: {
+  readonly webUrl?: string;
+  readonly children: ReactNode;
+}): ReactNode => (
+  <TUIContext.Provider value={{ webUrl }}>
+    {children}
+  </TUIContext.Provider>
+);
+
+export const useTUIContext = (): TUIContextValue => useContext(TUIContext);
diff --git a/packages/wmux-client-terminal/src/components/Sidebar.tsx b/packages/wmux-client-terminal/src/components/Sidebar.tsx
new file mode 100644
index 0000000..8ce8a18
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/Sidebar.tsx
@@ -0,0 +1,118 @@
+/** @jsxImportSource @opentui/react */
+import type { ReactNode } from "react";
+import type { CategoryInfo, TabInfo, FileEntry } from "../types";
+
+const STATUS_DOTS: Record<string, { char: string; color: string }> = {
+  running: { char: "\u25cf", color: "#30d158" },
+  idle: { char: "\u25cb", color: "#636366" },
+  stopped: { char: "\u25cf", color: "#8e8e93" },
+  failed: { char: "\u25cf", color: "#ff453a" },
+};
+
+const MUTED = "#98989d";
+const ACTIVE_BG = "#38383a";
+const SIDEBAR_BG = "#232325";
+
+interface SidebarProps {
+  readonly categories: ReadonlyArray<CategoryInfo>;
+  readonly activeCategory: string;
+  readonly activeTabId: string;
+  readonly width: number;
+}
+
+const renderStatusDot = (status: string): ReactNode => {
+  const info = STATUS_DOTS[status] ?? STATUS_DOTS["idle"]!;
+  return <span fg={info.color}>{info.char}</span>;
+};
+
+const renderTab = (tab: TabInfo, isActive: boolean): ReactNode => (
+  <box
+    key={tab.id}
+    height={1}
+    paddingX={1}
+    backgroundColor={isActive ? ACTIVE_BG : undefined}
+  >
+    <text>
+      <span fg={MUTED}>{"  "}</span>
+      {renderStatusDot(tab.status)}
+      <span>{" "}</span>
+      <span fg={isActive ? "#f5f5f7" : MUTED}>{tab.name}</span>
+    </text>
+  </box>
+);
+
+const renderFileEntry = (entry: FileEntry): ReactNode => {
+  const indent = "  ".repeat(entry.depth + 1);
+  const icon = entry.isDir ? (entry.isExpanded ? "\u25be " : "\u25b8 ") : "  ";
+  const color = entry.isDir ? MUTED : "#8e8e93";
+  return (
+    <box key={entry.path} height={1} paddingX={1}>
+      <text fg={color}>
+        {indent}{icon}{entry.name}
+      </text>
+    </box>
+  );
+};
+
+const renderCategory = (
+  category: CategoryInfo,
+  isActive: boolean,
+  activeTabId: string,
+): ReactNode => {
+  const headerBg = isActive ? "#2c2c2e" : undefined;
+  return (
+    <box key={category.name} flexDirection="column">
+      <box height={1} paddingX={1} backgroundColor={headerBg}>
+        <text>
+          <span fg={category.color}>{isActive ? "\u25be" : "\u25b8"}</span>
+          <span>{" "}</span>
+          <span fg={isActive ? "#f5f5f7" : MUTED}>
+            {isActive ? <strong>{category.name}</strong> : category.name}
+          </span>
+        </text>
+      </box>
+      {isActive && category.type === "process" ? (
+        category.tabs.map((tab) => renderTab(tab, tab.id === activeTabId))
+      ) : null}
+      {isActive && category.type === "files" && category.fileEntries ? (
+        category.fileEntries.map((entry) => renderFileEntry(entry))
+      ) : null}
+      {isActive && category.type === "files" && category.openFiles && category.openFiles.length > 0 ? (
+        <box flexDirection="column">
+          <box height={1} paddingX={1}>
+            <text fg="#636366">  open files:</text>
+          </box>
+          {category.openFiles.map((file) => (
+            <box key={file.path} height={1} paddingX={1} backgroundColor={`file::${file.path}` === activeTabId ? ACTIVE_BG : undefined}>
+              <text fg={`file::${file.path}` === activeTabId ? "#f5f5f7" : MUTED}>
+                {"    "}{file.name}
+              </text>
+            </box>
+          ))}
+        </box>
+      ) : null}
+    </box>
+  );
+};
+
+export const Sidebar = ({
+  categories,
+  activeCategory,
+  activeTabId,
+  width,
+}: SidebarProps): ReactNode => (
+  <box
+    width={width}
+    flexDirection="column"
+    backgroundColor={SIDEBAR_BG}
+    border={["right"]}
+    borderStyle="single"
+    borderColor="#38383a"
+  >
+    <scrollbox flexGrow={1}>
+      {categories.map((category) =>
+        renderCategory(category, category.name === activeCategory, activeTabId),
+      )}
+    </scrollbox>
+  </box>
+);
diff --git a/packages/wmux-client-terminal/src/components/StatusBar.tsx b/packages/wmux-client-terminal/src/components/StatusBar.tsx
new file mode 100644
index 0000000..9e5aca1
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/StatusBar.tsx
@@ -0,0 +1,41 @@
+/** @jsxImportSource @opentui/react */
+import type { ReactNode } from "react";
+
+const MUTED = "#636366";
+const ACCENT = "#0a84ff";
+const WARN = "#ffd60a";
+
+interface StatusBarProps {
+  readonly prefixActive: boolean;
+}
+
+export const StatusBar = ({ prefixActive }: StatusBarProps): ReactNode => (
+  <box height={1} flexDirection="row" paddingX={1} gap={2}>
+    {prefixActive ? (
+      <>
+        <text fg={WARN}>
+          <strong>^B</strong> -
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>j/k</span> nav
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>1-9</span> cat
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>r</span> restart
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>s</span> stop
+        </text>
+        <text fg={MUTED}>
+          <span fg={ACCENT}>q</span> quit
+        </text>
+      </>
+    ) : (
+      <text fg={MUTED}>
+        <span fg={ACCENT}>^B</span> tmux prefix
+      </text>
+    )}
+  </box>
+);
diff --git a/packages/wmux-client-terminal/src/components/WmuxApp.tsx b/packages/wmux-client-terminal/src/components/WmuxApp.tsx
new file mode 100644
index 0000000..7f2919e
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/WmuxApp.tsx
@@ -0,0 +1,259 @@
+/** @jsxImportSource @opentui/react */
+import React, { useState, useCallback, useMemo, useRef, type ReactNode } from "react";
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import { Sidebar } from "./Sidebar";
+import { StatusBar } from "./StatusBar";
+import { PrefixProvider, useTUIContext } from "./FocusContext";
+import type { CategoryInfo } from "../types";
+
+const SIDEBAR_WIDTH = 30;
+const PREFIX_TIMEOUT_MS = 2000;
+const BG = "#1c1c1e";
+const HEADER_BG = "#232325";
+const BORDER_COLOR = "#38383a";
+const MUTED = "#98989d";
+
+interface SidebarNavigationItem {
+  readonly categoryName: string;
+  readonly tabId: string;
+}
+
+const buildAllNavigationItems = (
+  categories: ReadonlyArray<CategoryInfo>,
+): readonly SidebarNavigationItem[] =>
+  categories
+    .filter((c) => c.type !== "files")
+    .flatMap((c) => c.tabs.map((tab) => ({ categoryName: c.name, tabId: tab.id })));
+
+const navigateItem = (
+  items: readonly SidebarNavigationItem[],
+  activeTabId: string,
+  delta: number,
+): SidebarNavigationItem | undefined => {
+  if (items.length === 0) return undefined;
+  const currentIndex = items.findIndex((item) => item.tabId === activeTabId);
+  const nextIndex = currentIndex === -1 ? 0 : (currentIndex + delta + items.length) % items.length;
+  return items[nextIndex];
+};
+
+export const WmuxApp = (props: {
+  readonly title: string;
+  readonly description: string;
+  readonly categories: ReadonlyArray<CategoryInfo>;
+  readonly activeCategory: string;
+  readonly activeTabId: string;
+  readonly children?: ReactNode;
+  readonly onSelectCategory: { readonly mutate: (name: string) => void };
+  readonly onSelectTab: { readonly mutate: (id: string) => void };
+  readonly onStartProcess: { readonly mutate: (id: string) => void };
+  readonly onStopProcess: { readonly mutate: (id: string) => void };
+  readonly onRestartProcess: { readonly mutate: (id: string) => void };
+  readonly onToggleDir: { readonly mutate: (path: string) => void };
+  readonly onOpenFile: { readonly mutate: (path: string) => void };
+  readonly onCloseFile: { readonly mutate: (path: string) => void };
+}): ReactNode => {
+  const { title, description, categories, activeCategory, activeTabId, children } = props;
+  const selectCategory = props.onSelectCategory.mutate;
+  const selectTab = props.onSelectTab.mutate;
+  const startProcess = props.onStartProcess.mutate;
+  const stopProcess = props.onStopProcess.mutate;
+  const restartProcess = props.onRestartProcess.mutate;
+  const openFile = props.onOpenFile.mutate;
+
+  const renderer = useRenderer();
+  const { width, height } = useTerminalDimensions();
+  const { webUrl } = useTUIContext();
+
+  // Prefix key state — ref for synchronous reads across useKeyboard handlers
+  const prefixRef = useRef(false);
+  const prefixTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [prefixVisible, setPrefixVisible] = useState(false);
+
+  const activatePrefix = useCallback(() => {
+    prefixRef.current = true;
+    setPrefixVisible(true);
+    if (prefixTimerRef.current) clearTimeout(prefixTimerRef.current);
+    prefixTimerRef.current = setTimeout(() => {
+      prefixRef.current = false;
+      setPrefixVisible(false);
+      prefixTimerRef.current = null;
+    }, PREFIX_TIMEOUT_MS);
+  }, []);
+
+  const consumePrefix = useCallback(() => {
+    prefixRef.current = false;
+    setPrefixVisible(false);
+    if (prefixTimerRef.current) {
+      clearTimeout(prefixTimerRef.current);
+      prefixTimerRef.current = null;
+    }
+  }, []);
+
+  const allNavItems = useMemo(() => buildAllNavigationItems(categories), [categories]);
+
+  const registry = useMemo(() => {
+    const map = new Map<string, ReactNode>();
+    for (const child of React.Children.toArray(children) as React.ReactElement[]) {
+      const id = (child.props as { id?: string }).id;
+      if (id) map.set(id, child);
+    }
+    return map;
+  }, [children]);
+
+  const handleNavigate = useCallback((delta: number) => {
+    const target = navigateItem(allNavItems, activeTabId, delta);
+    if (!target) return;
+    if (target.categoryName !== activeCategory) selectCategory(target.categoryName);
+    selectTab(target.tabId);
+  }, [allNavItems, activeTabId, activeCategory, selectCategory, selectTab]);
+
+  useKeyboard((key) => {
+    // ── Ctrl+B: activate prefix ──────────────────────────
+    if (key.ctrl && key.name === "b") {
+      activatePrefix();
+      return;
+    }
+
+    // ── Not in prefix mode: all keys pass through to terminal
+    if (!prefixRef.current) return;
+
+    // ── Prefix mode: interpret next key as TUI command ───
+    consumePrefix();
+
+    // Navigation
+    if (key.name === "j" || key.name === "down" || key.name === "n") {
+      handleNavigate(1);
+      return;
+    }
+    if (key.name === "k" || key.name === "up" || key.name === "p") {
+      handleNavigate(-1);
+      return;
+    }
+
+    // Category by number
+    if (key.name >= "1" && key.name <= "9") {
+      const idx = parseInt(key.name, 10) - 1;
+      if (idx < categories.length) {
+        const cat = categories[idx]!;
+        selectCategory(cat.name);
+        if (cat.type !== "files" && cat.tabs.length > 0) {
+          selectTab(cat.tabs[0]!.id);
+        }
+      }
+      return;
+    }
+
+    // Next/prev category
+    if (key.name === "tab" || key.name === "]") {
+      const catIdx = categories.findIndex((c) => c.name === activeCategory);
+      const nextIdx = (catIdx + 1) % categories.length;
+      const nextCat = categories[nextIdx]!;
+      selectCategory(nextCat.name);
+      if (nextCat.type !== "files" && nextCat.tabs.length > 0) {
+        selectTab(nextCat.tabs[0]!.id);
+      }
+      return;
+    }
+    if (key.name === "[") {
+      const catIdx = categories.findIndex((c) => c.name === activeCategory);
+      const prevIdx = (catIdx - 1 + categories.length) % categories.length;
+      const prevCat = categories[prevIdx]!;
+      selectCategory(prevCat.name);
+      if (prevCat.type !== "files" && prevCat.tabs.length > 0) {
+        selectTab(prevCat.tabs[0]!.id);
+      }
+      return;
+    }
+
+    // Process controls
+    if (key.name === "enter") {
+      const activeCat = categories.find((c) => c.name === activeCategory);
+      if (!activeCat) return;
+      if (activeCat.type === "files") {
+        const firstFile = (activeCat.fileEntries ?? []).find((e) => !e.isDir);
+        if (firstFile) openFile(firstFile.path);
+        return;
+      }
+      const activeTab = activeCat.tabs.find((t) => t.id === activeTabId);
+      if (activeTab?.status === "idle") startProcess(activeTabId);
+      return;
+    }
+
+    if (key.name === "r") {
+      const activeCat = categories.find((c) => c.name === activeCategory);
+      const activeTab = activeCat?.tabs.find((t) => t.id === activeTabId);
+      if (activeTab?.status === "running") restartProcess(activeTabId);
+      return;
+    }
+
+    if (key.name === "s") {
+      const activeCat = categories.find((c) => c.name === activeCategory);
+      const activeTab = activeCat?.tabs.find((t) => t.id === activeTabId);
+      if (activeTab?.status === "running") stopProcess(activeTabId);
+      return;
+    }
+
+    // Quit
+    if (key.name === "q") {
+      renderer.destroy();
+      return;
+    }
+
+    // Ctrl+B Ctrl+B → send literal Ctrl+B to terminal
+    if (key.ctrl && key.name === "b") {
+      // Will be picked up by WmuxTerminal on next event since prefix is now false
+      return;
+    }
+  });
+
+  const activeChild = registry.get(activeTabId);
+
+  return (
+    <PrefixProvider prefixRef={prefixRef} activeTabId={activeTabId}>
+      <box
+        flexDirection="column"
+        width={width}
+        height={height}
+        backgroundColor={BG}
+      >
+        {/* Top bar */}
+        <box height={1} flexDirection="row" paddingX={1} backgroundColor={HEADER_BG} justifyContent="space-between">
+          <text fg="#f5f5f7">
+            <strong>{title}</strong>
+            {description ? <span fg={MUTED}>{" \u2014 "}{description}</span> : null}
+          </text>
+          {webUrl ? (
+            <text fg="#636366">
+              <a href={webUrl}>{"\u2197 web"}</a>
+            </text>
+          ) : null}
+        </box>
+
+        {/* Main area */}
+        <box flexDirection="row" flexGrow={1}>
+          <Sidebar
+            categories={categories}
+            activeCategory={activeCategory}
+            activeTabId={activeTabId}
+            width={SIDEBAR_WIDTH}
+          />
+
+          {/* Content area */}
+          <box flexGrow={1} flexDirection="column">
+            {activeChild ?? (
+              <box flexGrow={1} justifyContent="center" alignItems="center">
+                <text fg="#636366">No active tab</text>
+              </box>
+            )}
+          </box>
+        </box>
+
+        {/* Separator */}
+        <box height={1} backgroundColor={BORDER_COLOR} />
+
+        {/* Status bar */}
+        <StatusBar prefixActive={prefixVisible} />
+      </box>
+    </PrefixProvider>
+  );
+};
diff --git a/packages/wmux-client-terminal/src/components/WmuxFileContent.tsx b/packages/wmux-client-terminal/src/components/WmuxFileContent.tsx
new file mode 100644
index 0000000..1fff12f
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/WmuxFileContent.tsx
@@ -0,0 +1,31 @@
+/** @jsxImportSource @opentui/react */
+import type { ReactNode } from "react";
+
+interface WmuxFileContentProps {
+  readonly id: string;
+  readonly path: string;
+  readonly name: string;
+  readonly content: string;
+  readonly children?: ReactNode;
+}
+
+export const WmuxFileContent = ({ name, content }: WmuxFileContentProps): ReactNode => {
+  const lines = content.split("\n");
+  const gutterWidth = String(lines.length).length + 1;
+
+  return (
+    <box flexGrow={1} flexDirection="column">
+      <box height={1} paddingX={1} backgroundColor="#2c2c2e">
+        <text fg="#98989d">{name}</text>
+      </box>
+      <scrollbox flexGrow={1}>
+        {lines.map((line, i) => (
+          <text key={i}>
+            <span fg="#48484a">{String(i + 1).padStart(gutterWidth, " ")} </span>
+            <span fg="#e5e5ea">{line || " "}</span>
+          </text>
+        ))}
+      </scrollbox>
+    </box>
+  );
+};
diff --git a/packages/wmux-client-terminal/src/components/WmuxIframe.tsx b/packages/wmux-client-terminal/src/components/WmuxIframe.tsx
new file mode 100644
index 0000000..9534c00
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/WmuxIframe.tsx
@@ -0,0 +1,21 @@
+/** @jsxImportSource @opentui/react */
+import type { ReactNode } from "react";
+
+interface WmuxIframeProps {
+  readonly id: string;
+  readonly name: string;
+  readonly url: string;
+  readonly children?: ReactNode;
+}
+
+export const WmuxIframe = ({ name, url }: WmuxIframeProps): ReactNode => (
+  <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column" gap={1}>
+    <text fg="#98989d">
+      <strong>{name}</strong>
+    </text>
+    <text fg="#0a84ff">
+      <a href={url}>{url}</a>
+    </text>
+    <text fg="#636366">Open in browser to view</text>
+  </box>
+);
diff --git a/packages/wmux-client-terminal/src/components/WmuxTerminal.tsx b/packages/wmux-client-terminal/src/components/WmuxTerminal.tsx
new file mode 100644
index 0000000..c1ea2fd
--- /dev/null
+++ b/packages/wmux-client-terminal/src/components/WmuxTerminal.tsx
@@ -0,0 +1,123 @@
+/** @jsxImportSource @opentui/react */
+import { useState, useEffect, useRef, useCallback, type ReactNode } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { fromBase64, toBase64 } from "../utils/base64";
+import { TerminalBuffer, type StyledLine, type StyledSegment } from "../utils/ansi";
+import { usePrefixContext } from "./FocusContext";
+
+const SIDEBAR_WIDTH = 30;
+
+interface WmuxTerminalProps {
+  readonly id: string;
+  readonly name: string;
+  readonly status: string;
+  readonly output: { readonly subscribe: (listener: (chunk: string) => void) => () => void };
+  readonly onInput: { readonly mutate: (data: string) => void };
+  readonly onResize: { readonly mutate: (size: { cols: number; rows: number }) => void };
+  readonly children?: ReactNode;
+}
+
+const renderSegment = (seg: StyledSegment, key: number): ReactNode => {
+  const needsWrap = seg.fg !== undefined || seg.bg !== undefined || seg.bold || seg.italic || seg.underline;
+  if (!needsWrap) return <span key={key}>{seg.text}</span>;
+
+  const inner = seg.bold
+    ? <strong>{seg.text}</strong>
+    : seg.italic
+      ? <em>{seg.text}</em>
+      : seg.underline
+        ? <u>{seg.text}</u>
+        : seg.text;
+
+  return <span key={key} fg={seg.fg} bg={seg.bg}>{inner}</span>;
+};
+
+const renderLine = (line: StyledLine, key: number): ReactNode => (
+  <text key={key}>
+    {line.segments.length === 0
+      ? " "
+      : line.segments.map((seg, j) => renderSegment(seg, j))}
+  </text>
+);
+
+export const WmuxTerminal = (props: WmuxTerminalProps): ReactNode => {
+  const { id, output, status } = props;
+  const sendInput = props.onInput.mutate;
+  const sendResize = props.onResize.mutate;
+  const { prefixRef, activeTabId } = usePrefixContext();
+
+  const [lines, setLines] = useState<readonly StyledLine[]>([]);
+  const { width, height } = useTerminalDimensions();
+  const sentResizeRef = useRef<string>("");
+  const termBufRef = useRef<TerminalBuffer | null>(null);
+
+  const getTerminalBuffer = useCallback((): TerminalBuffer => {
+    if (!termBufRef.current) {
+      const cols = Math.max(10, width - SIDEBAR_WIDTH - 2);
+      termBufRef.current = new TerminalBuffer(cols);
+    }
+    return termBufRef.current;
+  }, [width]);
+
+  const isActiveTerminal = activeTabId === id && status === "running";
+
+  // All keys go to PTY unless prefix is active or Ctrl+B (consumed by WmuxApp)
+  useKeyboard((key) => {
+    if (!isActiveTerminal) return;
+    if (key.ctrl && key.name === "b") return; // prefix key, handled by WmuxApp
+    if (prefixRef.current) return;            // next key after prefix, handled by WmuxApp
+
+    const data = key.sequence;
+    if (data) {
+      sendInput(toBase64(new TextEncoder().encode(data)));
+    }
+  });
+
+  const handleOutput = useCallback((b64: string) => {
+    const bytes = fromBase64(b64);
+    const text = new TextDecoder().decode(bytes);
+    const buf = getTerminalBuffer();
+    buf.write(text);
+    setLines(buf.getLines());
+  }, [getTerminalBuffer]);
+
+  useEffect(() => {
+    return output.subscribe(handleOutput);
+  }, [output, handleOutput]);
+
+  useEffect(() => {
+    const contentWidth = Math.max(10, width - SIDEBAR_WIDTH - 2);
+    const contentHeight = Math.max(5, height - 4);
+    const key = `${contentWidth}x${contentHeight}`;
+    if (key === sentResizeRef.current) return;
+    sentResizeRef.current = key;
+
+    const buf = getTerminalBuffer();
+    buf.resize(contentWidth, contentHeight);
+    sendResize({ cols: contentWidth, rows: contentHeight });
+  }, [width, height, sendResize, getTerminalBuffer]);
+
+  if (status === "idle") {
+    return (
+      <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column" gap={1}>
+        <text fg="#636366">Process not started</text>
+        <text fg="#98989d">Press ^B then Enter to start</text>
+      </box>
+    );
+  }
+
+  return (
+    <box flexGrow={1} flexDirection="column">
+      {(status === "stopped" || status === "failed") ? (
+        <box height={1} paddingX={1} backgroundColor={status === "failed" ? "#3a1111" : "#2c2c2e"}>
+          <text fg={status === "failed" ? "#ff453a" : "#8e8e93"}>
+            {status === "stopped" ? "Process exited" : "Process failed"}
+          </text>
+        </box>
+      ) : null}
+      <scrollbox flexGrow={1} stickyScroll stickyStart="bottom">
+        {lines.map((line, i) => renderLine(line, i))}
+      </scrollbox>
+    </box>
+  );
+};
diff --git a/packages/wmux-client-terminal/src/index.ts b/packages/wmux-client-terminal/src/index.ts
new file mode 100644
index 0000000..a2086ef
--- /dev/null
+++ b/packages/wmux-client-terminal/src/index.ts
@@ -0,0 +1,2 @@
+export { renderWmuxTUI } from "./tui";
+export type { WmuxTUIOptions, WmuxTUIHandle } from "./tui";
diff --git a/packages/wmux-client-terminal/src/transport.ts b/packages/wmux-client-terminal/src/transport.ts
new file mode 100644
index 0000000..8556cbc
--- /dev/null
+++ b/packages/wmux-client-terminal/src/transport.ts
@@ -0,0 +1,38 @@
+import type { Transport } from "@playfast/echoform/shared";
+import { createWebSocketTransport, type WebSocketLike } from "@playfast/echoform/shared";
+
+export interface TransportConnection {
+  readonly transport: Transport<Record<string, unknown>>;
+  readonly waitForConnection: () => Promise<void>;
+  readonly destroy: () => void;
+}
+
+export const connectTransport = (wsUrl: string, token: string): TransportConnection => {
+  const authenticatedUrl = `${wsUrl}?token=${encodeURIComponent(token)}`;
+  const ws = new WebSocket(authenticatedUrl);
+  ws.binaryType = "arraybuffer";
+
+  const { transport, dispatch, disconnect } = createWebSocketTransport(
+    ws as unknown as WebSocketLike,
+    { checkOpen: true },
+  );
+
+  const connectionPromise = new Promise<void>((resolve, reject) => {
+    ws.onopen = () => resolve();
+    ws.onerror = () => reject(new Error("WebSocket connection failed"));
+  });
+
+  ws.onmessage = (event: MessageEvent) => {
+    dispatch(event.data as string | ArrayBuffer);
+  };
+
+  ws.onclose = () => {
+    disconnect();
+  };
+
+  const destroy = (): void => {
+    ws.close();
+  };
+
+  return { transport, waitForConnection: () => connectionPromise, destroy };
+};
diff --git a/packages/wmux-client-terminal/src/tui.tsx b/packages/wmux-client-terminal/src/tui.tsx
new file mode 100644
index 0000000..2ac465b
--- /dev/null
+++ b/packages/wmux-client-terminal/src/tui.tsx
@@ -0,0 +1,72 @@
+/** @jsxImportSource @opentui/react */
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+import { Client } from "@playfast/echoform/client";
+import type { Transport } from "@playfast/echoform/shared";
+import { connectTransport } from "./transport";
+import { TUIProvider } from "./components/FocusContext";
+import { WmuxApp } from "./components/WmuxApp";
+import { WmuxTerminal } from "./components/WmuxTerminal";
+import { WmuxFileContent } from "./components/WmuxFileContent";
+import { WmuxIframe } from "./components/WmuxIframe";
+
+const tuiViewComponents = {
+  WmuxApp,
+  WmuxTerminal,
+  WmuxFileContent,
+  WmuxIframe,
+};
+
+export interface WmuxTUIOptions {
+  readonly token: string;
+  readonly wsUrl: string;
+  readonly webUrl?: string;
+}
+
+export interface WmuxTUIHandle {
+  /** Programmatically destroy the TUI */
+  readonly destroy: () => void;
+  /** Resolves when the TUI is closed (user quit or destroy() called) */
+  readonly done: Promise<void>;
+}
+
+const TUIRoot = ({ transport, webUrl }: { readonly transport: Transport<Record<string, unknown>>; readonly webUrl?: string }) => (
+  <TUIProvider webUrl={webUrl}>
+    <Client transport={transport} views={tuiViewComponents} requestViewTreeOnMount />
+  </TUIProvider>
+);
+
+export const renderWmuxTUI = async (options: WmuxTUIOptions): Promise<WmuxTUIHandle> => {
+  let connection: ReturnType<typeof connectTransport> | null = null;
+  let resolveDone: (() => void) | null = null;
+  const done = new Promise<void>((resolve) => { resolveDone = resolve; });
+
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: false,
+    onDestroy: () => {
+      connection?.destroy();
+      resolveDone?.();
+    },
+  });
+
+  // Ensure cleanup on crashes
+  const onError = (error: unknown): void => {
+    console.error(error);
+    renderer.destroy();
+    process.exit(1);
+  };
+  process.on("uncaughtException", onError);
+  process.on("unhandledRejection", onError);
+
+  connection = connectTransport(options.wsUrl, options.token);
+  await connection.waitForConnection();
+
+  const root = createRoot(renderer);
+  root.render(<TUIRoot transport={connection.transport} webUrl={options.webUrl} />);
+
+  const destroy = (): void => {
+    renderer.destroy();
+  };
+
+  return { destroy, done };
+};
diff --git a/packages/wmux-client-terminal/src/types.ts b/packages/wmux-client-terminal/src/types.ts
new file mode 100644
index 0000000..3bc5140
--- /dev/null
+++ b/packages/wmux-client-terminal/src/types.ts
@@ -0,0 +1,25 @@
+export interface FileEntry {
+  readonly path: string;
+  readonly name: string;
+  readonly isDir: boolean;
+  readonly depth: number;
+  readonly isExpanded: boolean;
+}
+
+export interface TabInfo {
+  readonly id: string;
+  readonly name: string;
+  readonly description?: string;
+  readonly icon?: string;
+  readonly status: string;
+}
+
+export interface CategoryInfo {
+  readonly name: string;
+  readonly color: string;
+  readonly icon?: string;
+  readonly type: string;
+  readonly tabs: readonly TabInfo[];
+  readonly fileEntries?: readonly FileEntry[];
+  readonly openFiles?: readonly { readonly path: string; readonly name: string }[];
+}
diff --git a/packages/wmux-client-terminal/src/utils/ansi.ts b/packages/wmux-client-terminal/src/utils/ansi.ts
new file mode 100644
index 0000000..fb27bdc
--- /dev/null
+++ b/packages/wmux-client-terminal/src/utils/ansi.ts
@@ -0,0 +1,490 @@
+// ── Types ──────────────────────────────────────────────────
+
+export interface StyledSegment {
+  readonly text: string;
+  readonly fg?: string;
+  readonly bg?: string;
+  readonly bold?: boolean;
+  readonly italic?: boolean;
+  readonly underline?: boolean;
+}
+
+export interface StyledLine {
+  readonly segments: readonly StyledSegment[];
+}
+
+// ── Color palette ──────────────────────────────────────────
+
+const STANDARD_COLORS: readonly string[] = [
+  "#000000", "#cc0000", "#00cc00", "#cccc00",
+  "#0000cc", "#cc00cc", "#00cccc", "#cccccc",
+];
+
+const BRIGHT_COLORS: readonly string[] = [
+  "#555555", "#ff5555", "#55ff55", "#ffff55",
+  "#5555ff", "#ff55ff", "#55ffff", "#ffffff",
+];
+
+const color256Palette: readonly string[] = (() => {
+  const p: string[] = [...STANDARD_COLORS, ...BRIGHT_COLORS];
+  for (let r = 0; r < 6; r++)
+    for (let g = 0; g < 6; g++)
+      for (let b = 0; b < 6; b++) {
+        const h = (v: number): string => (v === 0 ? 0 : 55 + v * 40).toString(16).padStart(2, "0");
+        p.push(`#${h(r)}${h(g)}${h(b)}`);
+      }
+  for (let i = 0; i < 24; i++) {
+    const v = (8 + i * 10).toString(16).padStart(2, "0");
+    p.push(`#${v}${v}${v}`);
+  }
+  return p;
+})();
+
+// ── Cell & style types ─────────────────────────────────────
+
+interface CellStyle {
+  fg: string | undefined;
+  bg: string | undefined;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+}
+
+interface Cell {
+  char: string;
+  style: CellStyle;
+}
+
+const defaultStyle = (): CellStyle => ({ fg: undefined, bg: undefined, bold: false, italic: false, underline: false });
+const emptyCell = (): Cell => ({ char: " ", style: defaultStyle() });
+const cloneStyle = (s: CellStyle): CellStyle => ({ ...s });
+
+// ── Terminal buffer ────────────────────────────────────────
+
+const DEFAULT_COLS = 120;
+const DEFAULT_ROWS = 200; // scrollback lines
+
+export class TerminalBuffer {
+  private grid: Cell[][];
+  private cols: number;
+  private rows: number;
+  private cursorRow = 0;
+  private cursorCol = 0;
+  private style: CellStyle = defaultStyle();
+  private savedCursor: { row: number; col: number } | null = null;
+
+  // Parser state for incomplete escape sequences across chunks
+  private partial = "";
+
+  constructor(cols = DEFAULT_COLS, rows = DEFAULT_ROWS) {
+    this.cols = cols;
+    this.rows = rows;
+    this.grid = [this.newRow()];
+  }
+
+  resize(cols: number, rows: number): void {
+    this.cols = cols;
+    this.rows = rows;
+    // Clamp cursor
+    if (this.cursorCol >= cols) this.cursorCol = cols - 1;
+  }
+
+  private newRow(): Cell[] {
+    return Array.from({ length: this.cols }, emptyCell);
+  }
+
+  private ensureRow(row: number): void {
+    while (this.grid.length <= row) {
+      this.grid.push(this.newRow());
+    }
+  }
+
+  private writeChar(ch: string): void {
+    if (this.cursorCol >= this.cols) {
+      // Line wrap
+      this.cursorCol = 0;
+      this.cursorRow++;
+    }
+    this.ensureRow(this.cursorRow);
+    const row = this.grid[this.cursorRow]!;
+    // Extend row if needed
+    while (row.length <= this.cursorCol) row.push(emptyCell());
+    row[this.cursorCol] = { char: ch, style: cloneStyle(this.style) };
+    this.cursorCol++;
+  }
+
+  // ── Escape sequence processing ───────────────────────────
+
+  write(data: string): void {
+    const input = this.partial + data;
+    this.partial = "";
+    let i = 0;
+    const len = input.length;
+
+    while (i < len) {
+      const ch = input[i]!;
+
+      // ── Control characters ─────────
+      if (ch === "\x1b") {
+        // Check if we have enough data for the sequence
+        if (i + 1 >= len) { this.partial = input.slice(i); return; }
+
+        const next = input[i + 1]!;
+
+        // CSI: ESC [
+        if (next === "[") {
+          const end = this.findCsiEnd(input, i + 2);
+          if (end === -1) { this.partial = input.slice(i); return; }
+          this.processCsi(input.slice(i + 2, end), input[end]!);
+          i = end + 1;
+          continue;
+        }
+
+        // OSC: ESC ]
+        if (next === "]") {
+          const end = this.findOscEnd(input, i + 2);
+          if (end === -1) { this.partial = input.slice(i); return; }
+          i = end; // skip entire OSC
+          continue;
+        }
+
+        // ESC ( X — character set selection (ignore)
+        if (next === "(") {
+          i += 3; // skip ESC ( X
+          continue;
+        }
+
+        // ESC ) X — character set G1 (ignore)
+        if (next === ")") {
+          i += 3;
+          continue;
+        }
+
+        // ESC 7 — save cursor
+        if (next === "7") {
+          this.savedCursor = { row: this.cursorRow, col: this.cursorCol };
+          i += 2;
+          continue;
+        }
+
+        // ESC 8 — restore cursor
+        if (next === "8") {
+          if (this.savedCursor) {
+            this.cursorRow = this.savedCursor.row;
+            this.cursorCol = this.savedCursor.col;
+          }
+          i += 2;
+          continue;
+        }
+
+        // ESC = / ESC > — keypad modes (ignore)
+        if (next === "=" || next === ">") {
+          i += 2;
+          continue;
+        }
+
+        // ESC M — reverse index (scroll down)
+        if (next === "M") {
+          if (this.cursorRow > 0) this.cursorRow--;
+          i += 2;
+          continue;
+        }
+
+        // Unknown ESC sequence — skip 2 chars
+        i += 2;
+        continue;
+      }
+
+      if (ch === "\r") {
+        this.cursorCol = 0;
+        i++;
+        continue;
+      }
+
+      if (ch === "\n") {
+        this.cursorRow++;
+        this.ensureRow(this.cursorRow);
+        i++;
+        continue;
+      }
+
+      if (ch === "\b") {
+        if (this.cursorCol > 0) this.cursorCol--;
+        i++;
+        continue;
+      }
+
+      if (ch === "\t") {
+        const nextTab = (Math.floor(this.cursorCol / 8) + 1) * 8;
+        this.cursorCol = Math.min(nextTab, this.cols - 1);
+        i++;
+        continue;
+      }
+
+      // Skip other C0 control characters
+      const code = ch.charCodeAt(0);
+      if (code < 0x20 && ch !== "\x1b") {
+        i++;
+        continue;
+      }
+
+      // ── Printable character ────────
+      this.writeChar(ch);
+      i++;
+    }
+
+    // Trim scrollback
+    const maxLines = this.rows;
+    if (this.grid.length > maxLines * 2) {
+      const trim = this.grid.length - maxLines;
+      this.grid.splice(0, trim);
+      this.cursorRow -= trim;
+      if (this.cursorRow < 0) this.cursorRow = 0;
+    }
+  }
+
+  private findCsiEnd(input: string, start: number): number {
+    // CSI params can include digits, semicolons, ?, >, !, space, etc.
+    // Terminated by a letter (0x40-0x7E)
+    for (let j = start; j < input.length; j++) {
+      const c = input.charCodeAt(j);
+      if (c >= 0x40 && c <= 0x7e) return j;
+    }
+    return -1; // incomplete
+  }
+
+  private findOscEnd(input: string, start: number): number {
+    for (let j = start; j < input.length; j++) {
+      // BEL terminates
+      if (input[j] === "\x07") return j + 1;
+      // ST (ESC \) terminates
+      if (input[j] === "\x1b" && j + 1 < input.length && input[j + 1] === "\\") return j + 2;
+    }
+    return -1; // incomplete
+  }
+
+  private processCsi(paramStr: string, command: string): void {
+    // Strip leading ? > for DEC private modes
+    const isPrivate = paramStr.startsWith("?") || paramStr.startsWith(">");
+    const cleanParams = paramStr.replace(/^[?>!]/, "");
+    const params = cleanParams === "" ? [] : cleanParams.split(";").map((s) => parseInt(s, 10) || 0);
+
+    // DEC private modes — ignore (bracketed paste, cursor visibility, etc.)
+    if (isPrivate) return;
+
+    switch (command) {
+      case "m": this.processSgr(params); break;
+      case "A": this.cursorRow = Math.max(0, this.cursorRow - (params[0] || 1)); break;
+      case "B": this.cursorRow += (params[0] || 1); this.ensureRow(this.cursorRow); break;
+      case "C": this.cursorCol = Math.min(this.cols - 1, this.cursorCol + (params[0] || 1)); break;
+      case "D": this.cursorCol = Math.max(0, this.cursorCol - (params[0] || 1)); break;
+      case "E": this.cursorRow += (params[0] || 1); this.cursorCol = 0; this.ensureRow(this.cursorRow); break;
+      case "F": this.cursorRow = Math.max(0, this.cursorRow - (params[0] || 1)); this.cursorCol = 0; break;
+      case "G": this.cursorCol = Math.max(0, Math.min(this.cols - 1, (params[0] || 1) - 1)); break;
+      case "H": case "f": this.moveCursor(params); break;
+      case "J": this.eraseInDisplay(params[0] || 0); break;
+      case "K": this.eraseInLine(params[0] || 0); break;
+      case "L": this.insertLines(params[0] || 1); break;
+      case "M": this.deleteLines(params[0] || 1); break;
+      case "P": this.deleteChars(params[0] || 1); break;
+      case "@": this.insertChars(params[0] || 1); break;
+      case "X": this.eraseChars(params[0] || 1); break;
+      case "d": this.cursorRow = Math.max(0, (params[0] || 1) - 1); this.ensureRow(this.cursorRow); break;
+      case "s": this.savedCursor = { row: this.cursorRow, col: this.cursorCol }; break;
+      case "u": if (this.savedCursor) { this.cursorRow = this.savedCursor.row; this.cursorCol = this.savedCursor.col; } break;
+      // SGR substrings, scroll, etc. — ignore
+    }
+  }
+
+  private moveCursor(params: number[]): void {
+    const row = Math.max(0, (params[0] || 1) - 1);
+    const col = Math.max(0, Math.min(this.cols - 1, (params[1] || 1) - 1));
+    // For a scrollback buffer, H is relative to visible area.
+    // We approximate by making it relative to current cursor region.
+    this.cursorRow = row;
+    this.cursorCol = col;
+    this.ensureRow(this.cursorRow);
+  }
+
+  private eraseInDisplay(mode: number): void {
+    this.ensureRow(this.cursorRow);
+    if (mode === 0) {
+      // Erase from cursor to end
+      this.eraseInLine(0);
+      for (let r = this.cursorRow + 1; r < this.grid.length; r++) {
+        this.grid[r] = this.newRow();
+      }
+    } else if (mode === 1) {
+      // Erase from start to cursor
+      for (let r = 0; r < this.cursorRow; r++) {
+        this.grid[r] = this.newRow();
+      }
+      this.eraseInLine(1);
+    } else if (mode === 2 || mode === 3) {
+      // Erase entire display
+      this.grid = [this.newRow()];
+      this.cursorRow = 0;
+      this.cursorCol = 0;
+    }
+  }
+
+  private eraseInLine(mode: number): void {
+    this.ensureRow(this.cursorRow);
+    const row = this.grid[this.cursorRow]!;
+    if (mode === 0) {
+      // Erase from cursor to end of line
+      for (let c = this.cursorCol; c < row.length; c++) row[c] = emptyCell();
+    } else if (mode === 1) {
+      // Erase from start to cursor
+      for (let c = 0; c <= this.cursorCol && c < row.length; c++) row[c] = emptyCell();
+    } else if (mode === 2) {
+      // Erase entire line
+      this.grid[this.cursorRow] = this.newRow();
+    }
+  }
+
+  private insertLines(n: number): void {
+    for (let i = 0; i < n; i++) {
+      this.grid.splice(this.cursorRow, 0, this.newRow());
+    }
+  }
+
+  private deleteLines(n: number): void {
+    this.grid.splice(this.cursorRow, n);
+    this.ensureRow(this.cursorRow);
+  }
+
+  private deleteChars(n: number): void {
+    this.ensureRow(this.cursorRow);
+    const row = this.grid[this.cursorRow]!;
+    row.splice(this.cursorCol, n);
+    while (row.length < this.cols) row.push(emptyCell());
+  }
+
+  private insertChars(n: number): void {
+    this.ensureRow(this.cursorRow);
+    const row = this.grid[this.cursorRow]!;
+    const blanks = Array.from({ length: n }, emptyCell);
+    row.splice(this.cursorCol, 0, ...blanks);
+    row.length = this.cols; // truncate
+  }
+
+  private eraseChars(n: number): void {
+    this.ensureRow(this.cursorRow);
+    const row = this.grid[this.cursorRow]!;
+    for (let c = this.cursorCol; c < this.cursorCol + n && c < row.length; c++) {
+      row[c] = emptyCell();
+    }
+  }
+
+  private processSgr(params: number[]): void {
+    if (params.length === 0) params = [0];
+    let i = 0;
+    while (i < params.length) {
+      const code = params[i]!;
+      if (code === 0) { Object.assign(this.style, defaultStyle()); }
+      else if (code === 1) { this.style.bold = true; }
+      else if (code === 3) { this.style.italic = true; }
+      else if (code === 4) { this.style.underline = true; }
+      else if (code === 22) { this.style.bold = false; }
+      else if (code === 23) { this.style.italic = false; }
+      else if (code === 24) { this.style.underline = false; }
+      else if (code >= 30 && code <= 37) { this.style.fg = STANDARD_COLORS[code - 30]; }
+      else if (code >= 40 && code <= 47) { this.style.bg = STANDARD_COLORS[code - 40]; }
+      else if (code >= 90 && code <= 97) { this.style.fg = BRIGHT_COLORS[code - 90]; }
+      else if (code >= 100 && code <= 107) { this.style.bg = BRIGHT_COLORS[code - 100]; }
+      else if (code === 39) { this.style.fg = undefined; }
+      else if (code === 49) { this.style.bg = undefined; }
+      else if (code === 38 || code === 48) {
+        const mode = params[i + 1];
+        if (mode === 5 && i + 2 < params.length) {
+          const n = params[i + 2]!;
+          const color = n >= 0 && n < 256 ? color256Palette[n] : undefined;
+          if (code === 38) this.style.fg = color; else this.style.bg = color;
+          i += 2;
+        } else if (mode === 2 && i + 4 < params.length) {
+          const r = params[i + 2]!, g = params[i + 3]!, b = params[i + 4]!;
+          const color = `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+          if (code === 38) this.style.fg = color; else this.style.bg = color;
+          i += 4;
+        }
+      }
+      i++;
+    }
+  }
+
+  // ── Rendering to StyledLines ─────────────────────────────
+
+  getLines(): readonly StyledLine[] {
+    const result: StyledLine[] = [];
+    // Find last non-empty row
+    let lastRow = this.grid.length - 1;
+    while (lastRow > 0 && this.isRowEmpty(this.grid[lastRow]!)) lastRow--;
+
+    for (let r = 0; r <= lastRow; r++) {
+      const row = this.grid[r]!;
+      result.push({ segments: this.rowToSegments(row) });
+    }
+    return result;
+  }
+
+  private isRowEmpty(row: Cell[]): boolean {
+    return row.every((cell) => cell.char === " " && !cell.style.fg && !cell.style.bg && !cell.style.bold);
+  }
+
+  private rowToSegments(row: Cell[]): StyledSegment[] {
+    const segments: StyledSegment[] = [];
+    let current = "";
+    let currentStyle: CellStyle = defaultStyle();
+
+    // Find last non-space char to trim trailing whitespace
+    let lastNonSpace = -1;
+    for (let c = row.length - 1; c >= 0; c--) {
+      if (row[c]!.char !== " " || row[c]!.style.fg || row[c]!.style.bg || row[c]!.style.bold) {
+        lastNonSpace = c;
+        break;
+      }
+    }
+
+    for (let c = 0; c <= lastNonSpace; c++) {
+      const cell = row[c] ?? emptyCell();
+      const sameStyle = cell.style.fg === currentStyle.fg
+        && cell.style.bg === currentStyle.bg
+        && cell.style.bold === currentStyle.bold
+        && cell.style.italic === currentStyle.italic
+        && cell.style.underline === currentStyle.underline;
+
+      if (sameStyle) {
+        current += cell.char;
+      } else {
+        if (current.length > 0) segments.push(makeSegment(current, currentStyle));
+        current = cell.char;
+        currentStyle = cloneStyle(cell.style);
+      }
+    }
+
+    if (current.length > 0) segments.push(makeSegment(current, currentStyle));
+    return segments;
+  }
+}
+
+const makeSegment = (text: string, style: CellStyle): StyledSegment => ({
+  text,
+  ...(style.fg !== undefined && { fg: style.fg }),
+  ...(style.bg !== undefined && { bg: style.bg }),
+  ...(style.bold && { bold: true }),
+  ...(style.italic && { italic: true }),
+  ...(style.underline && { underline: true }),
+});
+
+// ── Convenience wrappers (backward compat) ─────────────────
+
+export const parseAnsiOutput = (raw: string): readonly StyledLine[] => {
+  const buf = new TerminalBuffer();
+  buf.write(raw);
+  return buf.getLines();
+};
+
+export const createDefaultState = (): { fg: undefined; bg: undefined; bold: false; italic: false; underline: false } => ({
+  fg: undefined, bg: undefined, bold: false, italic: false, underline: false,
+});
diff --git a/packages/wmux-client-terminal/src/utils/base64.ts b/packages/wmux-client-terminal/src/utils/base64.ts
new file mode 100644
index 0000000..9731997
--- /dev/null
+++ b/packages/wmux-client-terminal/src/utils/base64.ts
@@ -0,0 +1,5 @@
+export const toBase64 = (data: Uint8Array): string =>
+  Buffer.from(data).toString("base64");
+
+export const fromBase64 = (data: string): Uint8Array =>
+  new Uint8Array(Buffer.from(data, "base64"));
diff --git a/packages/wmux-client-terminal/tsconfig.json b/packages/wmux-client-terminal/tsconfig.json
new file mode 100644
index 0000000..12ec9a8
--- /dev/null
+++ b/packages/wmux-client-terminal/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["bun"]
+  },
+  "include": ["src"]
+}
diff --git a/packages/wmux/package.json b/packages/wmux/package.json
index c86dffd..7afa65a 100644
--- a/packages/wmux/package.json
+++ b/packages/wmux/package.json
@@ -13,6 +13,11 @@
       "types": "./src/views.ts",
       "import": "./src/views.ts",
       "default": "./src/views.ts"
+    },
+    "./preset/tui": {
+      "types": "./src/preset/tui.ts",
+      "import": "./src/preset/tui.ts",
+      "default": "./src/preset/tui.ts"
     }
   },
   "files": [
@@ -25,6 +30,7 @@
   "dependencies": {
     "@playfast/echoform": "workspace:*",
     "@playfast/echoform-render": "workspace:*",
+    "@playfast/wmux-client-terminal": "workspace:*",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
diff --git a/packages/wmux/src/preset/tui.ts b/packages/wmux/src/preset/tui.ts
new file mode 100644
index 0000000..b544775
--- /dev/null
+++ b/packages/wmux/src/preset/tui.ts
@@ -0,0 +1,39 @@
+import { wmux } from "../wmux";
+import type { WmuxConfig } from "../types";
+import type { WmuxTUIHandle } from "@playfast/wmux-client-terminal";
+
+export interface WmuxTUIPresetConfig extends Omit<WmuxConfig, "open"> {}
+
+export interface WmuxTUIPresetHandle {
+  /** Full web client URL (with token and ws params) */
+  readonly url: string;
+  /** Stop the wmux server and all processes */
+  readonly stop: () => void;
+  /** Resolves when the TUI is closed (user quit or programmatic stop) */
+  readonly done: Promise<void>;
+}
+
+export async function wmuxTUI(config: WmuxTUIPresetConfig): Promise<WmuxTUIPresetHandle> {
+  const handle = await wmux({ ...config, open: false });
+
+  // Print web URL before TUI takes over the screen
+  console.log(`\x1b[1m\x1b[34mweb\x1b[0m  → \x1b[4m${handle.url}\x1b[0m`);
+
+  const { renderWmuxTUI } = await import("@playfast/wmux-client-terminal");
+
+  const tui: WmuxTUIHandle = await renderWmuxTUI({
+    token: handle.token,
+    wsUrl: handle.wsUrl,
+    webUrl: handle.url,
+  });
+
+  const done = tui.done.then(() => {
+    handle.stop();
+  });
+
+  const stop = (): void => {
+    tui.destroy();
+  };
+
+  return { url: handle.url, stop, done };
+}
diff --git a/packages/wmux/src/types.ts b/packages/wmux/src/types.ts
index c590ed8..9a30678 100644
--- a/packages/wmux/src/types.ts
+++ b/packages/wmux/src/types.ts
@@ -57,5 +57,7 @@ export interface WmuxHandle {
   readonly url: string;
   readonly localUrl: string;
   readonly port: number;
+  readonly token: string;
+  readonly wsUrl: string;
   readonly stop: () => void;
 }
diff --git a/packages/wmux/src/wmux.tsx b/packages/wmux/src/wmux.tsx
index 780b3fc..e38870f 100644
--- a/packages/wmux/src/wmux.tsx
+++ b/packages/wmux/src/wmux.tsx
@@ -113,5 +113,5 @@ export async function wmux(config: WmuxConfig): Promise<WmuxHandle> {
   process.on("SIGINT", () => { stop(); process.exit(0); });
   process.on("SIGTERM", () => { stop(); process.exit(0); });
 
-  return { url: fullClientUrl, localUrl: wsUrl, port: actualPort, stop };
+  return { url: fullClientUrl, localUrl: wsUrl, port: actualPort, token, wsUrl, stop };
 }
diff --git a/skills-lock.json b/skills-lock.json
new file mode 100644
index 0000000..0df4cfd
--- /dev/null
+++ b/skills-lock.json
@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "opentui": {
+      "source": "msmps/opentui-skill",
+      "sourceType": "github",
+      "computedHash": "2255043508a64062e44f6de2243dbcb06de97ceefa30357da77affac355c3eee"
+    }
+  }
+}