# SvelTUI

**Build beautiful terminal applications with Svelte 5**

A terminal UI framework that brings Svelte's elegant reactive programming model to the command line. Instant reactivity, zero flickering, flexbox layouts.

```svelte
<script>
  import { Box, Text, keyboard } from 'sveltui'

  let count = $state(0)
  keyboard.onKey('Space', () => count++)
</script>

<Box border="rounded" borderColor={0x06} padding={1}>
  <Text text="Press Space!" color={0x0a} />
  <Text text={`Count: ${count}`} color={0x0b} />
</Box>
```

## Features

- **Svelte 5 Runes** - `$state`, `$effect`, `$derived` just work
- **Flexbox Layout** - Powered by Yoga layout engine
- **Reactive Rendering** - Only updates what changed, when it changes
- **Zero Flickering** - Differential rendering for rock-solid UI
- **Keyboard API** - Reactive state + imperative callbacks
- **Focus Management** - Tab navigation built-in
- **Theming** - Built-in themes (dracula, nord, monokai, solarized)
- **True Color** - Full 24-bit color support
- **TypeScript** - First-class support

## Quick Start

```bash
# Create a new project (recommended)
bunx @rlabs-inc/sveltui create my-app
cd my-app
bun install
bun run dev
```

## Components

### Box

```svelte
<Box border="rounded" borderColor={0x06} width={40} height={10} padding={1}>
  <Text text="Content" />
</Box>
```

### Text

```svelte
<Text text="Hello World" color={0x00ff00} bold />
```

## Keyboard API

```svelte
<script>
  import { keyboard } from 'sveltui'
  import { onDestroy } from 'svelte'

  // Imperative: callbacks for actions
  const unsub = keyboard.onKey('Enter', () => submit())
  onDestroy(unsub)
</script>

<!-- Reactive: state in templates -->
<Text text={`Last key: ${keyboard.lastKey}`} />
```

## Colors

```svelte
<Text color={0xff0000} text="Hex number" />
<Text color="#00ff00" text="Hex string" />
<Text color="blue" text="CSS name" />
```

## Themes & Variants

Use semantic `variant` props for automatic theme colors:

```svelte
<!-- Variants: primary, secondary, success, warning, danger, info -->
<Box variant="primary" border="rounded">
  <Text text="Primary styled" />
</Box>

<Text text="Success!" variant="success" />
<Text text="Warning" variant="warning" />
<Text text="Muted text" muted />
```

Change themes globally:

```svelte
<script>
  import { getTheme } from 'sveltui'
  const theme = getTheme()
  theme().setTheme('dracula')  // or: nord, monokai, solarized
</script>
```

## Requirements

- **Bun** >= 1.0.0
- Terminal with true color support

## Documentation

Full documentation available at [GitHub](https://github.com/RLabs-Inc/sveltui).

## License

MIT