### Install PromptInput

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/prompt-input.mdx

Install the PromptInput component using bunx.

```bash
bunx shadcn@latest add @gridland/prompt-input
```

--------------------------------

### Install SelectInput Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/select-input.mdx

Install the SelectInput component using bunx.

```bash
bunx shadcn@latest add @gridland/select-input
```

--------------------------------

### Basic Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/multi-select.mdx

Import the component and the keyboard utility to get started.

```tsx
import { MultiSelect } from "@/components/ui/multi-select"
import { useKeyboard } from "@gridland/utils"
```

```tsx
<MultiSelect
  items={[
    { label: "TypeScript", value: "ts" },
    { label: "JavaScript", value: "js" },
    { label: "Python", value: "py" },
  ]}
  title="Select languages"
  useKeyboard={useKeyboard}
  onSubmit={(values) => console.log("Selected:", values)}
/>
```

--------------------------------

### Install Chat Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chat.mdx

Install the chat component using bunx.

```bash
bunx shadcn@latest add @gridland/chat
```

--------------------------------

### Install Spinner Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/spinner.mdx

Install the Spinner component using bunx.

```bash
bunx shadcn@latest add @gridland/spinner
```

--------------------------------

### Install Link Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/link.mdx

Install the Link component using the shadcn-ui CLI.

```bash
bunx shadcn@latest add @gridland/link
```

--------------------------------

### Install @gridland/testing

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/testing.mdx

Install the testing package using your preferred package manager.

```bash
bun add -D @gridland/testing
```

```bash
npm install --save-dev @gridland/testing
```

```bash
yarn add -D @gridland/testing
```

```bash
pnpm add -D @gridland/testing
```

--------------------------------

### Install TerminalWindow Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/terminal-window.mdx

Install the TerminalWindow component using bunx.

```bash
bunx shadcn@latest add @gridland/terminal-window
```

--------------------------------

### Install Tabs Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/tabs.mdx

Install the Tabs component using bunx.

```bash
bunx shadcn@latest add @gridland/tab-bar
```

--------------------------------

### Install Gridland UI Components

Source: https://github.com/thoughtfulllc/gridland/blob/main/README.md

Install individual UI components from the shadcn registry to customize and own the component code.

```bash
bunx shadcn@latest add @gridland/chat
```

```bash
bunx shadcn@latest add @gridland/spinner
```

```bash
bunx shadcn@latest add @gridland/table
```

--------------------------------

### Install UI Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-ui.mdx

Use the shadcn CLI to add specific components to your project.

```bash
bunx shadcn@latest add @gridland/<component-name>
```

--------------------------------

### Install Dependencies with Bun

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/blocks/ai-chat-interface.mdx

Install the necessary UI and AI SDK packages using Bun. Ensure you have the correct versions for your project.

```bash
bun add @gridland/ui @ai-sdk/react @openrouter/ai-sdk-provider ai
```

--------------------------------

### Install Ascii component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/ascii.mdx

Use the shadcn CLI to add the component to your project.

```bash
bunx shadcn@latest add @gridland/ascii
```

--------------------------------

### Install Table Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/table.mdx

Install the Gridland Table component using bunx.

```bash
bunx shadcn@latest add @gridland/table
```

--------------------------------

### Install MultiSelect

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/multi-select.mdx

Use the shadcn CLI to add the component to your project.

```bash
bunx shadcn@latest add @gridland/multi-select
```

--------------------------------

### Install Dependencies with NPM

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/blocks/ai-chat-interface.mdx

Install the necessary UI and AI SDK packages using npm. Ensure you have the correct versions for your project.

```bash
npm install @gridland/ui @ai-sdk/react @openrouter/ai-sdk-provider ai
```

--------------------------------

### Install Dependencies with PNPM

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/blocks/ai-chat-interface.mdx

Install the necessary UI and AI SDK packages using pnpm. Ensure you have the correct versions for your project.

```bash
pnpm add @gridland/ui @ai-sdk/react @openrouter/ai-sdk-provider ai
```

--------------------------------

### Install @gridland/bun

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-bun.mdx

Install the @gridland/bun package using Bun. This command adds the package as a dependency to your project.

```bash
bun add @gridland/bun
```

--------------------------------

### Install Gridland Web

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/custom.mdx

Install the required web package via npm.

```bash
npm install @gridland/web
```

--------------------------------

### Install TextInput Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Install the TextInput component using bunx. This command adds the necessary package to your project.

```bash
bunx shadcn@latest add @gridland/text-input
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/blocks/ai-chat-interface.mdx

Install the necessary UI and AI SDK packages using Yarn. Ensure you have the correct versions for your project.

```bash
yarn add @gridland/ui @ai-sdk/react @openrouter/ai-sdk-provider ai
```

--------------------------------

### Install StatusBar component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/status-bar.mdx

Use the shadcn CLI to add the StatusBar component to your project.

```bash
bunx shadcn@latest add @gridland/status-bar
```

--------------------------------

### Install Chain of Thought Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chain-of-thought.mdx

Install the Chain of Thought component using bunx.

```bash
bunx shadcn@latest add @gridland/chain-of-thought
```

--------------------------------

### Install Docker on Linux

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/sandboxing.mdx

Installs Docker on a Linux system using a curl script. Ensure Docker is running before using @gridland/container.

```bash
curl -fsSL https://get.docker.com | sh
```

--------------------------------

### Install Testing Package

Source: https://context7.com/thoughtfulllc/gridland/llms.txt

Add the Gridland testing library as a development dependency.

```bash
bun add -D @gridland/testing
```

--------------------------------

### Install Gradient Component

Source: https://context7.com/thoughtfulllc/gridland/llms.txt

Use the shadcn CLI to add the gradient component to your project.

```bash
bunx shadcn@latest add @gridland/gradient
```

--------------------------------

### Install Message Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/message.mdx

Add the component to your project using the shadcn CLI.

```bash
bunx shadcn@latest add @gridland/message
```

--------------------------------

### Install Modal component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/modal.mdx

Use the shadcn CLI to add the modal component to your project.

```bash
bunx shadcn@latest add @gridland/modal
```

--------------------------------

### Select example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

A selection list.

```tsx
<select
  options={[
    { label: "Option A", value: "a" },
    { label: "Option B", value: "b" },
  ]}
  onChange={(index, option) => console.log(option)}
/>
```

--------------------------------

### Basic Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chain-of-thought.mdx

Example of how to import and use the Chain of Thought component with basic steps.

```tsx
import {
  ChainOfThought,
  ChainOfThoughtHeader,
  ChainOfThoughtContent,
  ChainOfThoughtStep
} from "@/components/ui/chain-of-thought"

<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader duration="3.2s" />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Reading files" status="done" />
    <ChainOfThoughtStep label="Planning changes" status="running" isLast />
  </ChainOfThoughtContent>
</ChainOfThought>
```

--------------------------------

### Install Gridland Web Package

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/vite.mdx

Add the Gridland web package to your project using your preferred package manager.

```bash
bun add @gridland/web
```

```bash
npm install @gridland/web
```

```bash
yarn add @gridland/web
```

```bash
pnpm add @gridland/web
```

--------------------------------

### Integrate Update Script in Build Pipeline

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/core/src/lib/tree-sitter/assets/README.md

Example package.json configuration to automate parser updates during the build process.

```json
{
  "scripts": {
    "prebuild": "bun node_modules/@opentui/core/lib/tree-sitter/assets/update.ts --config ./parsers-config.json --assets ./src/parsers --output ./src/parsers.ts",
    "build": "bun build ./src/index.ts"
  }
}
```

--------------------------------

### Run a GitHub repository

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/sandboxing.mdx

Clones a GitHub repository (using shorthand or full URL), installs its dependencies, and executes its entry point within a Docker container.

```bash
bunx @gridland/container cjroth/my-tui-demo
```

--------------------------------

### Add @gridland/ui Components using shadcn CLI (npm)

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/components.mdx

Install components from the Gridland registry using the shadcn CLI with npm. This command copies the component into your project for customization.

```bash
npx shadcn@latest add @gridland/<component-name>
```

--------------------------------

### Basic TextInput Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

A basic example of how to render the TextInput component with a label, placeholder, and prompt.

```tsx
<TextInput
  label="Username"
  placeholder="enter your name"
  prompt="> "
/>

```

--------------------------------

### Add @gridland/ui Components using shadcn CLI (pnpm)

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/components.mdx

Install components from the Gridland registry using the shadcn CLI with pnpm. This command copies the component into your project for customization.

```bash
pnpm dlx shadcn@latest add @gridland/<component-name>
```

--------------------------------

### Code example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

Syntax-highlighted code block.

```tsx
<code content="const x = 42" filetype="typescript" />
```

--------------------------------

### Text example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

Renders styled text content.

```tsx
<text fg="#a3be8c" bold>
  Hello World
</text>
```

--------------------------------

### Input example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

A text input field.

```tsx
<input
  placeholder="Type here..."
  onInput={(value) => console.log(value)}
  onSubmit={(value) => console.log("Submitted:", value)}
/>
```

--------------------------------

### Basic TerminalWindow Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/terminal-window.mdx

A basic example of using the TerminalWindow component with custom content.

```tsx
<TerminalWindow title="my-terminal">
  <div>Window content here</div>
</TerminalWindow>

```

--------------------------------

### Box example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

A container element with flexbox layout support.

```tsx
<box
  flexDirection="column"
  padding={1}
  border
  borderStyle="rounded"
  borderColor="#5e81ac"
  backgroundColor="#2e3440"
>
  {children}
</box>
```

--------------------------------

### Add @gridland/ui Components using shadcn CLI (yarn)

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/components.mdx

Install components from the Gridland registry using the shadcn CLI with yarn. This command copies the component into your project for customization.

```bash
yarn dlx shadcn@latest add @gridland/<component-name>
```

--------------------------------

### App Setup with FocusProvider

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/focus-and-navigation.mdx

Wrap your application with GridlandProvider and FocusProvider to enable focus management. FocusProvider enables selectable focus, allowing components to be focused and then selected using Enter.

```tsx
import { FocusProvider, useFocus, useKeyboard, useShortcuts, useFocusedShortcuts, FocusScope } from "@gridland/utils"
import { GridlandProvider, StatusBar } from "@gridland/ui"

// 1. Wrap your app with FocusProvider
function App() {
  return (
    <GridlandProvider theme={darkTheme} useKeyboard={useKeyboard}>
      <FocusProvider selectable>
        <box flexDirection="row" gap={1}>
          <Cell id="inbox" label="Inbox" autoFocus />
          <Cell id="drafts" label="Drafts" />
          <Cell id="sent" label="Sent" />
        </box>
        <AppStatusBar />
      </FocusProvider>
    </GridlandProvider>
  )
}

// 2. Make components focusable with useFocus
function Cell({ id, label, autoFocus }) {
  const { isFocused, isSelected, focusId, focusRef } = useFocus({ id, autoFocus })

  // 3. Handle keyboard input when focused
  useKeyboard((e) => {
    if (e.name === "return") console.log("submitted", label)
  }, { focusId, selectedOnly: true })

  // 4. Register shortcuts for the status bar
  useShortcuts(
    isSelected
      ? [{ key: "enter", label: "submit" }, { key: "esc", label: "back" }]
      : [{ key: "↑↓←→", label: "navigate" }, { key: "enter", label: "select" }],
    focusId,
  )

  return (
    <box ref={focusRef} border borderColor={isSelected ? "blue" : isFocused ? "green" : "gray"}>
      <text>{label}</text>
      <text>{isSelected ? "selected" : "not selected"}</text>
    </box>
  )
}

// 5. Display context-sensitive shortcuts
function AppStatusBar() {
  const shortcuts = useFocusedShortcuts()
  return <StatusBar items={shortcuts} />
}
```

--------------------------------

### Set memory limit

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/sandboxing.mdx

Runs an application inside a container with a specified memory limit. This example sets the limit to 1 gigabyte.

```bash
bunx @gridland/container heavy-app --memory 1g
```

--------------------------------

### Table Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-ui.mdx

Renders structured data in a table layout. Install via shadcn CLI: `bunx shadcn@latest add @gridland/table`.

```APIDOC
## Table Component API

### Description
Renders structured data in a table layout.

### Usage
```tsx
import { Table } from "@/components/ui/table"
```

### Props

#### Path Parameters
- **columns** (Column[]) - Required - Column definitions
- **data** (Record<string, any>[]) - Required - Row data
- **borderStyle** (string) - Optional - Table border style, defaults to "single"
- **headerColor** (string) - Optional - Header text color, defaults to "#ffffff"

### Column Definition

#### Properties
- **header** (string) - Required - Display header
- **key** (string) - Required - Data key
- **width** (number) - Optional - Column width, defaults to auto
- **align** ("left" | "center" | "right") - Optional - Alignment, defaults to "left"
- **color** (string) - Optional - Cell text color, defaults to inherited
```

--------------------------------

### Controlled TextInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Shows how to use the `value` and `onChange` props to control the TextInput component externally.

```APIDOC
## PUT /api/textinput/controlled

### Description

This endpoint demonstrates controlled text input behavior.

### Method

PUT

### Endpoint

/api/textinput/controlled

### Request Body

- **value** (string) - Required - The current controlled value of the input.
- **onChange** (function) - Required - Callback function to update the value.
- **onSubmit** (function) - Optional - Callback function when Enter is pressed.
- **label** (string) - Optional - The label for the text input.
- **placeholder** (string) - Optional - The placeholder text for the input.
- **prompt** (string) - Optional - The prompt string to display before the input.

### Request Example

```json
{
  "value": "user@example.com",
  "onChange": "(v) => console.log(v)",
  "label": "Email",
  "placeholder": "user@example.com",
  "prompt": "> "
}
```

### Response

#### Success Response (200)

- **status** (string) - The status of the operation.

#### Response Example

```json
{
  "status": "controlled input updated"
}
```
```

--------------------------------

### App with ThemeProvider

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/theming/colors.mdx

Wrap your application with ThemeProvider to apply a theme. This example applies the built-in dark theme and includes Spinner and Table components.

```tsx
import { ThemeProvider, darkTheme } from "@/components/ui/theme"
import { Spinner } from "@/components/ui/spinner"
import { Table } from "@/components/ui/table"

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <Spinner text="Loading..." />
      <Table data={[{ name: "Alice", role: "Admin" }]} />
    </ThemeProvider>
  )
}
```

--------------------------------

### CI Build Script for Cross-Platform Compilation

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

This GitHub Actions workflow uses a matrix strategy to build your Gridland CLI on macOS and Linux for different architectures. It checks out code, sets up Bun, installs dependencies, builds the project, and uploads the artifact.

```yaml
jobs:
  build:
    strategy:
      matrix:
        include:
          - os: macos-latest
            name: darwin-arm64
          - os: macos-13
            name: darwin-x64
          - os: ubuntu-latest
            name: linux-x64
    runs-on: ${{ matrix.os }}
    steps:
      - uses: actions/checkout@v4
      - uses: oven-sh/setup-bun@v2
      - run: bun install
      - run: bun build --compile --minify --sourcemap ./src/cli.tsx --outfile dist/mycli-${{ matrix.name }}
      - uses: actions/upload-artifact@v4
        with:
          name: mycli-${{ matrix.name }}
          path: dist/mycli-${{ matrix.name }}
```

--------------------------------

### Gradient Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-ui.mdx

Renders color gradients across text or backgrounds. Install via shadcn CLI: `bunx shadcn@latest add @gridland/gradient`.

```APIDOC
## Gradient Component API

### Description
Renders color gradients across text or backgrounds.

### Usage
```tsx
import { Gradient } from "@/components/ui/gradient"
```

### Props

#### Path Parameters
- **colors** (string[]) - Required - Hex color stops
- **direction** ("horizontal" | "vertical") - Optional - Gradient direction, defaults to "horizontal"
- **mode** ("foreground" | "background") - Optional - Where to apply colors, defaults to "foreground"
- **children** (ReactNode) - Required - Content to render

### Utility Functions

#### `interpolateColor(color1, color2, t)`

Interpolate between two hex colors.

- **color1** (string) - Start color (hex string)
- **color2** (string) - End color (hex string)
- **t** (number) - Interpolation factor (0 to 1)
- **Returns:** Hex color string

#### `generateGradient(colors, steps)`

Generate an array of interpolated colors.

- **colors** (string[]) - Array of hex color stops
- **steps** (number) - Number of output colors
- **Returns:** Array of hex color strings
```

--------------------------------

### Controlled Component Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chain-of-thought.mdx

Demonstrates how to control the open/closed state of the Chain of Thought component externally using `open` and `onOpenChange` props.

```tsx
import { useState } from "react"
import {
  ChainOfThought,
  ChainOfThoughtHeader,
  ChainOfThoughtContent,
  ChainOfThoughtStep
} from "@/components/ui/chain-of-thought"

const [open, setOpen] = useState(false)

<ChainOfThought open={open} onOpenChange={setOpen}>
  <ChainOfThoughtHeader duration="3.2s" />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Thinking" status="done" isLast />
  </ChainOfThoughtContent>
</ChainOfThought>
```

--------------------------------

### CI Configuration for Testing

Source: https://github.com/thoughtfulllc/gridland/blob/main/PLAN.md

Example of a GitHub Actions workflow file for Continuous Integration. It specifies running tests with randomized execution and rerunning failed tests multiple times to ensure stability.

```yaml
.github/workflows/test.yml    # CI: test with --randomize --rerun-each 3
```

--------------------------------

### Create CLI Entrypoint with Gridland

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

Set up the main application file for your CLI using Gridland components. Ensure startup code is wrapped in an async function for compatibility.

```tsx
// @ts-nocheck
import { createCliRenderer, createRoot } from "@gridland/bun"

function App() {
  return (
    <box border borderStyle="rounded" padding={1}>
      <text bold fg="#a3be8c">Hello from my CLI!</text>
    </box>
  )
}

async function main() {
  const renderer = await createCliRenderer({ exitOnCtrlC: true })
  createRoot(renderer).render(<App />)
}

main()
```

--------------------------------

### Gridland Monorepo Package Structure

Source: https://github.com/thoughtfulllc/gridland/blob/main/PLAN.md

Illustrates the proposed directory structure for the Gridland monorepo, detailing the organization of core packages, UI components, testing utilities, examples, and documentation.

```text
opentui-web/
├── packages/
│   ├── opentui-web/          # Core browser runtime (npm: opentui-web)
│   │   ├── src/
│   │   │   ├── index.ts          # Main exports (bundled mode)
│   │   │   ├── core.ts           # Core exports (external mode for Vite plugin users)
│   │   │   ├── OpenTuiCanvas.tsx  # Single React component — THE mounting layer
│   │   │   ├── mount.ts          # Imperative mount API: mountOpenTui(canvas, element)
│   │   │   ├── browser-buffer.ts
│   │   │   ├── browser-text-buffer.ts
│   │   │   ├── browser-text-buffer-view.ts
│   │   │   ├── browser-renderer.ts
│   │   │   ├── browser-render-context.ts
│   │   │   ├── canvas-painter.ts
│   │   │   ├── selection-manager.ts
│   │   │   ├── hooks.ts          # useFileDrop, usePaste, useRenderer
│   │   │   ├── vite-plugin.ts    # Vite plugin for shim resolution
│   │   │   ├── next.ts           # Next.js export (thin — just "use client" re-export)
│   │   │   ├── utils.ts          # SSR-safe utilities
│   │   │   ├── core-shims/       # @opentui/core browser replacements
│   │   │   └── shims/            # Node.js built-in stubs
│   │   ├── test/
│   │   │   └── preload.ts        # Test setup (happy-dom for canvas mocking)
│   │   └── tsup.config.ts        # Build config
│   │
│   ├── opentui-ui/               # UI component library
│   │   ├── components/           # Components with tests
│   │   │   ├── gradient/
│   │   │   ├── spinner/
│   │   │   ├── text-input/
│   │   │   ├── select-input/
│   │   │   ├── multi-select/
│   │   │   ├── table/
│   │   │   ├── link/
│   │   │   └── ascii/
│   │   ├── registry/             # shadcn-style registry
│   │   └── scripts/build-registry.ts
│   │
│   └── opentui-testing/          # Testing utilities
│       ├── src/
│       │   ├── index.ts
│       │   ├── render-tui.ts     # renderTui() — main test API
│       │   ├── screen.ts         # Screen queries (reads buffer, not ANSI)
│       │   ├── keys.ts           # Key sender for input simulation
│       │   └── wait-for.ts       # Async polling helper
│       └── tests/
│           └── framework.test.tsx
│
├── examples/
│   ├── vite/                     # Minimal Vite example
│   └── next/                     # Next.js example
│
├── docs/                         # Fumadocs documentation site
│   ├── content/docs/
│   │   ├── getting-started.mdx
│   │   ├── components.mdx
│   │   ├── testing.mdx
│   │   ├── vite.mdx
│   │   └── nextjs.mdx
│   └── ...
│
├── .github/workflows/test.yml    # CI: test with --randomize --rerun-each 3
├── AGENTS.md
└── package.json                  # Bun workspaces root
```

--------------------------------

### Interactive TabBar Demo Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/AGENTS.md

Example of an interactive demo component for TabBar, utilizing useState for state management and useKeyboard for handling user input to change the selected tab.

```tsx
function TabBarApp() {
  const [selectedIndex, setSelectedIndex] = useState(0)
  useKeyboard((event) => {
    if (event.name === "left") setSelectedIndex((i) => (i > 0 ? i - 1 : tabs.length - 1))
    if (event.name === "right") setSelectedIndex((i) => (i < tabs.length - 1 ? i + 1 : 0))
  })
  return <TabBar options={tabs} selectedIndex={selectedIndex} />
}
```

--------------------------------

### Create a Basic CLI Application

Source: https://context7.com/thoughtfulllc/gridland/llms.txt

Set up a simple CLI application using createCliRenderer and createRoot from @gridland/bun. The App component defines the UI, and the main function initializes the renderer and renders the app.

```tsx
// src/cli.tsx
import { createCliRenderer, createRoot } from "@gridland/bun"

function App() {
  return (
    <box border borderStyle="rounded" padding={1}>
      <text bold fg="#a3be8c">Hello from my CLI!</text>
      <text dim>Press Ctrl+C to exit</text>
    </box>
  )
}

async function main() {
  const renderer = await createCliRenderer({ exitOnCtrlC: true })
  createRoot(renderer).render(<App />)
}

main()

```

--------------------------------

### Scaffold a new Gridland project

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/index.mdx

Use these commands to initialize a new project with the required configuration.

```bash
bunx create-gridland my-app
```

```bash
npx create-gridland my-app
```

```bash
yarn create gridland my-app
```

```bash
pnpm create gridland my-app
```

--------------------------------

### Create a New Gridland Project

Source: https://github.com/thoughtfulllc/gridland/blob/main/README.md

Use this command to initialize a new Gridland project. Bun is required for development.

```bash
bunx create-gridland my-app
```

--------------------------------

### Production Build with Minify and Sourcemap

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

Optimize the binary size and preserve stack trace readability for production releases by adding `--minify` and `--sourcemap` flags.

```bash
bun build --compile --minify --sourcemap ./src/cli.tsx --outfile mycli
```

--------------------------------

### ChatPanel Component - Chat Interface Example

Source: https://context7.com/thoughtfulllc/gridland/llms.txt

An example of the ChatPanel component demonstrating message display, status updates, streaming text, and tool call integration. It uses `useState` for managing messages and status.

```tsx
import { ChatPanel } from "@/components/ui/chat"
import { useState } from "react"

function ChatApp() {
  const [messages, setMessages] = useState([
    { id: "1", role: "user" as const, content: "Hello!" },
    { id: "2", role: "assistant" as const, content: "Hi there! How can I help?" },
  ])
  const [status, setStatus] = useState<"ready" | "submitted" | "streaming">("ready")
  const [streamingText, setStreamingText] = useState("")

  const handleSend = (text: string) => {
    const newMessage = { id: Date.now().toString(), role: "user" as const, content: text }
    setMessages([...messages, newMessage])
    setStatus("submitted")
    // Simulate AI response
    setTimeout(() => {
      setStatus("streaming")
      setStreamingText("I'm thinking about that...")
    }, 500)
  }

  return (
    <ChatPanel
      messages={messages}
      status={status}
      streamingText={streamingText}
      activeToolCalls={[
        { id: "1", title: "Searching docs", status: "in_progress" },
      ]}
      onSendMessage={handleSend}
      onStop={() => setStatus("ready")}
      placeholder="Type a message..."
      promptChar="> "
      userColor="#88c0d0"
      assistantColor="#a3be8c"
    />
  )
}
```

--------------------------------

### Scrollbox example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

A scrollable container.

```tsx
<scrollbox height={10}>
  {/* Content taller than 10 rows will scroll */}
</scrollbox>
```

--------------------------------

### Markdown example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/primitives.mdx

Rendered markdown content.

```tsx
<markdown content="# Hello\n\nThis is **bold** text." />
```

--------------------------------

### Run other Gridland demos

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/sandboxing.mdx

Demonstrates running different demo applications provided by the @gridland/demo package by passing their respective names as arguments.

```bash
bunx @gridland/container @gridland/demo -- gradient
```

--------------------------------

### Disabled TextInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Shows how to disable the TextInput component, making it unresponsive to focus and input.

```APIDOC
## POST /api/textinput/disabled

### Description

This endpoint demonstrates disabling the text input.

### Method

POST

### Endpoint

/api/textinput/disabled

### Request Body

- **label** (string) - Required - The label for the text input.
- **disabled** (boolean) - Required - Disables the input.
- **placeholder** (string) - Optional - The placeholder text for the input.
- **prompt** (string) - Optional - The prompt string to display before the input.

### Request Example

```json
{
  "label": "API Key",
  "disabled": true,
  "placeholder": "sk-...",
  "prompt": "> "
}
```

### Response

#### Success Response (200)

- **status** (string) - The status of the operation.

#### Response Example

```json
{
  "status": "input disabled"
}
```
```

--------------------------------

### Initialize FocusProvider

Source: https://context7.com/thoughtfulllc/gridland/llms.txt

Set up the FocusProvider to manage focus and input within your application. The 'selectable' prop enables selection behavior.

```tsx
import { FocusProvider, useFocus, useKeyboard, useShortcuts, useFocusedShortcuts, FocusScope } from "@gridland/utils"

function FocusableApp() {
  return (
    <FocusProvider selectable>
      <box flexDirection="row" gap={1}>
        <FocusableCard id="inbox" label="Inbox" autoFocus />
        <FocusableCard id="drafts" label="Drafts" />
        <FocusableCard id="sent" label="Sent" />
      </box>
      <FocusedStatusBar />
    </FocusProvider>
  )
}
```

--------------------------------

### Required TextInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Illustrates how to mark a TextInput as required, displaying an asterisk next to the label.

```APIDOC
## POST /api/textinput/required

### Description

This endpoint handles required text input validation.

### Method

POST

### Endpoint

/api/textinput/required

### Request Body

- **label** (string) - Required - The label for the text input.
- **required** (boolean) - Required - Indicates if the field is mandatory.
- **placeholder** (string) - Optional - The placeholder text for the input.
- **prompt** (string) - Optional - The prompt string to display before the input.

### Request Example

```json
{
  "label": "Name",
  "required": true,
  "placeholder": "enter your name",
  "prompt": "> "
}
```

### Response

#### Success Response (200)

- **validation** (string) - The validation status.

#### Response Example

```json
{
  "validation": "required field submitted"
}
```
```

--------------------------------

### Compile CLI to Standalone Binary

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

Bundle your CLI code and dependencies into a single executable file using Bun's build command.

```bash
bun build --compile ./src/cli.tsx --outfile mycli
```

--------------------------------

### Run Interactive Gridland Demos

Source: https://github.com/thoughtfulllc/gridland/blob/main/README.md

Execute interactive demos directly in your terminal to explore Gridland's capabilities. Bun is required.

```bash
bunx @gridland/demo landing
```

```bash
bunx @gridland/demo gradient
```

```bash
bunx @gridland/demo chat
```

--------------------------------

### Map Anthropic SDK Content

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/message.mdx

Example of mapping Anthropic SDK content blocks to Message sub-components.

```tsx
// Map Anthropic content blocks to sub-components
msg.content.map((block, j) => {
  switch (block.type) {
    case "text":
      return <Message.Text key={j}>{block.text}</Message.Text>
    case "thinking":
      return <Message.Reasoning key={j} collapsed={false}>{block.thinking}</Message.Reasoning>
    case "tool_use":
      return <Message.ToolCall key={j} name={block.name} state="running" />
  }
})
```

--------------------------------

### Basic Chain of Thought Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chain-of-thought.mdx

A basic example of the Chain of Thought component with default collapsed state.

```tsx
<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader duration="3.2s" />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Reading files" status="done" />
    <ChainOfThoughtStep label="Planning changes" status="running" isLast />
  </ChainOfThoughtContent>
</ChainOfThought>
```

--------------------------------

### Run a local project

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/sandboxing.mdx

Mounts a local directory into a Docker container as read-only. The directory content is copied to a temporary filesystem within the container.

```bash
bunx @gridland/container ./my-app
```

--------------------------------

### Disabled TextInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Renders a disabled TextInput that ignores focus and keystrokes. This is typically used for non-editable fields.

```tsx
<TextInput
  label="API Key"
  placeholder="sk-..."
  prompt="> "
  disabled
/>

```

--------------------------------

### Run CLI Demo Runner

Source: https://github.com/thoughtfulllc/gridland/blob/main/AGENTS.md

Execute the CLI demo runner to render components in the terminal. Specify a component name to render a specific one.

```bash
bun run demo              # all components
bun run demo table        # specific component
bun run demo select-input # by name
```

--------------------------------

### Required TextInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Shows how to mark a TextInput as required, which adds an asterisk (*) to the label. This is useful for form validation.

```tsx
<TextInput
  label="Name"
  placeholder="enter your name"
  prompt="> "
  required
/>

```

--------------------------------

### TextInput with Description

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Demonstrates adding helper text to the TextInput using the `description` prop.

```APIDOC
## POST /api/textinput/description

### Description

This endpoint allows adding a description to the text input.

### Method

POST

### Endpoint

/api/textinput/description

### Request Body

- **label** (string) - Required - The label for the text input.
- **description** (string) - Required - Helper text shown inline next to the label.
- **placeholder** (string) - Optional - The placeholder text for the input.
- **prompt** (string) - Optional - The prompt string to display before the input.

### Request Example

```json
{
  "label": "Email",
  "description": "We'll never share your email",
  "placeholder": "user@example.com",
  "prompt": "> "
}
```

### Response

#### Success Response (200)

- **status** (string) - The status of the operation.

#### Response Example

```json
{
  "status": "description added"
}
```
```

--------------------------------

### Collapsed Chain of Thought Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chain-of-thought.mdx

Demonstrates the default collapsed state of the Chain of Thought component, showing only the header.

```tsx
<ChainOfThought>
  <ChainOfThoughtHeader duration="3.2s" />
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Reading files" isLast />
  </ChainOfThoughtContent>
</ChainOfThought>
```

--------------------------------

### Run Compiled CLI

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

Execute the compiled binary. No additional runtime or dependencies are needed on the target machine.

```bash
./mycli
```

--------------------------------

### Import useTerminalDimensions Hook

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-utils.mdx

Import the useTerminalDimensions hook from @gridland/utils. This hook is used to get the current terminal dimensions.

```tsx
import { useTerminalDimensions } from "@gridland/utils"
```

--------------------------------

### Import Utilities

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-utils.mdx

Import utility functions like isBrowser, isCanvasSupported, and calculateGridSize from @gridland/utils. These utilities provide environment checks and calculations.

```tsx
import { isBrowser, isCanvasSupported, calculateGridSize } from "@gridland/utils"
```

--------------------------------

### Map Vercel AI SDK Parts

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/message.mdx

Example of mapping Vercel AI SDK message parts to Message sub-components.

```tsx
import { useChat } from "@ai-sdk/react"

const { messages, status } = useChat({ api: "/api/chat" })

{messages.map((msg, i) => {
  const isLast = i === messages.length - 1
  const msgStreaming = isLast && msg.role === "assistant" && status === "streaming"

  return (
    <Message key={msg.id} role={msg.role} isStreaming={msgStreaming}>
      <Message.Content>
        {msg.parts?.map((part, j) => {
          const isLastPart = j === msg.parts.length - 1
          switch (part.type) {
            case "text":
              return <Message.Text key={j} isLast={isLastPart && msgStreaming}>{part.text}</Message.Text>
            case "tool-invocation":
              return (
                <Message.ToolCall
                  key={j}
                  name={part.toolInvocation.toolName}
                  state={part.toolInvocation.state === "result" ? "completed" : "running"}
                  result={part.toolInvocation.result}
                />
              )
            case "source-url":
              return <Message.Source key={j} title={part.title} url={part.url} index={j} />
            default:
              return null
          }
        })}
      </Message.Content>
    </Message>
  )
})}
```

--------------------------------

### Basic TextInput Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Demonstrates the basic usage of the TextInput component with a label, placeholder, and prompt.

```APIDOC
## POST /api/textinput

### Description

This endpoint is for basic text input.

### Method

POST

### Endpoint

/api/textinput

### Request Body

- **label** (string) - Required - The label for the text input.
- **placeholder** (string) - Optional - The placeholder text for the input.
- **prompt** (string) - Optional - The prompt string to display before the input.

### Request Example

```json
{
  "label": "Username",
  "placeholder": "enter your name",
  "prompt": "> "
}
```

### Response

#### Success Response (200)

- **message** (string) - A success message.

#### Response Example

```json
{
  "message": "Text input processed successfully"
}
```
```

--------------------------------

### Chain of Thought with Custom Header

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/chain-of-thought.mdx

Example of customizing the header text of the Chain of Thought component by passing children to ChainOfThoughtHeader.

```tsx
<ChainOfThought defaultOpen>
  <ChainOfThoughtHeader duration="1.8s">Analyzing code</ChainOfThoughtHeader>
  <ChainOfThoughtContent>
    <ChainOfThoughtStep label="Parsing AST" status="done" isLast />
  </ChainOfThoughtContent>
</ChainOfThought>
```

--------------------------------

### Entitlements File for JIT Support

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

Create this entitlements file to enable full JIT support for your macOS application. This is recommended for enhanced functionality.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
</dict>
</plist>
```

--------------------------------

### Extend a Built-in Theme

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/theming/colors.mdx

Extend a built-in theme by spreading its properties and overriding specific color tokens. This example extends the dark theme.

```ts
import { darkTheme } from "@/components/ui/theme"

export const customTheme = {
  ...darkTheme,
  primary: "#61afef",
}
```

--------------------------------

### Basic StatusBar usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/status-bar.mdx

Render the StatusBar with a list of keybinding items.

```tsx
<StatusBar
  items={[
    { key: "Tab", label: "switch focus" },
    { key: "q", label: "quit" },
  ]}
/>
```

--------------------------------

### Compile CLI App to Binary

Source: https://context7.com/thoughtfulllc/gridland/llms.txt

Compile your Gridland CLI application into a standalone executable using the 'bun build --compile' command. The --outfile flag specifies the output file name.

```bash
# Compile to standalone binary
bun build --compile ./src/cli.tsx --outfile mycli
```

```bash
# Production build with minification
bun build --compile --minify --sourcemap ./src/cli.tsx --outfile mycli
```

--------------------------------

### Create a virtual screen

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-testing.mdx

Initializes a virtual screen instance for testing TUI elements with configurable dimensions.

```ts
import { createScreen } from "@gridland/testing"

const screen = await createScreen(element, options?)
```

--------------------------------

### Embed Directories into Binary

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/compile-binary.mdx

Bundle entire directories into the executable by providing glob patterns to the Bun build command.

```bash
bun build --compile ./src/cli.tsx ./assets/**/*.json --outfile mycli
```

--------------------------------

### Define a Custom Theme

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/theming/colors.mdx

Create a custom theme object by defining hex values for each semantic color token. This example defines a new primary color.

```ts
import type { Theme } from "@/components/ui/theme"

export const myTheme: Theme = {
  primary: "#61afef",
  accent: "#c678dd",
  secondary: "#98c379",
  muted: "#5c6370",
  placeholder: "#4b5263",
  border: "#5c6370",
  foreground: "#abb2bf",
  background: "#282c34",
  success: "#98c379",
  error: "#e06c75",
  warning: "#e5c07b",
}
```

--------------------------------

### Controlled TextInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/text-input.mdx

Demonstrates how to control the TextInput's value externally using React's useState hook. The `onSubmit` prop is also shown.

```tsx
const [value, setValue] = useState("")

<TextInput
  label="Email"
  value={value}
  onChange={setValue}
  onSubmit={(v) => console.log("Submitted:", v)}
  placeholder="user@example.com"
  prompt="> "
/>

```

--------------------------------

### Ascii Component Usage

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/ascii.mdx

Demonstrates the basic usage of the Ascii component with text, font, and color props.

```APIDOC
## Ascii Component

### Description

Renders text as large ASCII art using the `<ascii-font>` OpenTUI intrinsic. Supports multiple font styles and custom colors.

### Method

N/A (Component Usage)

### Endpoint

N/A (Component Usage)

### Parameters

#### Props

- **text** (string) - Required - Text to render as ASCII art
- **font** (string) - Optional - ASCII font style. Supported values: "tiny", "block", "slick", "shade".
- **color** (string) - Optional - Foreground color. Defaults to `theme.primary`.

### Request Example

```tsx
<Ascii text="Hello" font="slick" color="#88c0d0" />
```

### Response

N/A (Component Usage)

### Examples

#### Font Styles

Use the `font` prop to change the ASCII art style.

```tsx
<Ascii text="Hello" font="tiny" />
<Ascii text="Hello" font="block" />
<Ascii text="Hello" font="slick" />
<Ascii text="Hello" font="shade" />
```

#### Custom Color

Override the default theme color.

```tsx
<Ascii text="Hello" font="slick" color="#05FFA1" />
<Ascii text="Hello" font="block" color="cyan" />
```
```

--------------------------------

### Create Gridland TUI Component

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/guides/vite.mdx

Wrap your TUI content with the TUI component from @gridland/web. This example demonstrates a simple text display within a bordered box.

```tsx
import { TUI } from "@gridland/web"

function GridlandDemo() {
  return (
    <box flexDirection="column" padding={1}>
      <box border borderStyle="rounded" borderColor="#88c0d0" padding={1}>
        <text fg="#a3be8c">Hello from Vite!</text>
      </box>
    </box>
  )
}

export default function App() {
  return (
    <TUI style={{ width: "100vw", height: "100vh" }}>
      <GridlandDemo />
    </TUI>
  )
}
```

--------------------------------

### Controlled SelectInput Example

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/select-input.mdx

Control the selected value of SelectInput externally using the `value` and `onChange` props. Requires `useState` hook for managing the selected value.

```tsx
const [value, setValue] = useState<string>("ts")

<SelectInput
  items={[
    { label: "TypeScript", value: "ts" },
    { label: "JavaScript", value: "js" },
    { label: "Python", value: "py" },
  ]}
  value={value}
  onChange={setValue}
  title="Select a language"
  useKeyboard={useKeyboard}
  onSubmit={(value) => console.log("Selected:", value)}
/>
```

--------------------------------

### Add Gridland Web to Vite Project

Source: https://github.com/thoughtfulllc/gridland/blob/main/README.md

Install the core Gridland renderer and React integration for Vite projects. You must also add the Vite plugin to your configuration.

```bash
bun add @gridland/web
```

```typescript
// vite.config.ts
import { gridlandWebPlugin } from "@gridland/web/vite-plugin";

export default defineConfig({
  plugins: [gridlandWebPlugin()],
});
```

--------------------------------

### createScreen

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/api/gridland-testing.mdx

Creates a virtual screen for testing TUI components.

```APIDOC
## createScreen

### Description
Creates a virtual screen for testing TUI components.

### Parameters
#### Request Body
- **element** (any) - Required - The element to render.
- **options** (object) - Optional - Configuration options.
  - **cols** (number) - Optional - Number of columns (default: 80).
  - **rows** (number) - Optional - Number of rows (default: 24).

### Response
#### Success Response (200)
- **Screen** (object) - The screen instance.
```

--------------------------------

### Access Theme Tokens with useTheme

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/theming/colors.mdx

Use the `useTheme` hook to access theme color tokens within your components. This example applies the primary theme color to text.

```tsx
import { useTheme } from "@/components/ui/theme"

function MyComponent() {
  const theme = useTheme()
  return <text style={{ fg: theme.primary }}>Themed text</text>
}
```

--------------------------------

### Compile Gridland App to Standalone Binary

Source: https://github.com/thoughtfulllc/gridland/blob/main/README.md

Build a self-contained executable for your Gridland application. This binary requires no external runtime like Bun or Node.

```bash
bun build --compile src/cli.tsx --outfile my-app
```

--------------------------------

### Controlled Tabs

Source: https://github.com/thoughtfulllc/gridland/blob/main/packages/docs/content/docs/components/tabs.mdx

Control the active tab externally using the `value` and `onValueChange` props. This example uses React's `useState` hook to manage the tab state.

```tsx
import { useState } from "react"
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tab-bar"

const [tab, setTab] = useState("files")

<Tabs value={tab} onValueChange={setTab}>
  <TabsList>
    <TabsTrigger value="files">Files</TabsTrigger>
    <TabsTrigger value="search">Search</TabsTrigger>
  </TabsList>
  <TabsContent value="files">
    <text>Files panel</text>
  </TabsContent>
  <TabsContent value="search">
    <text>Search panel</text>
  </TabsContent>
</Tabs>
```