Architecture#

@sigx/terminal is an umbrella. Installing it gives you a complete TUI stack, but that stack is built from a few focused packages, each usable on its own. Knowing the split helps you import from the right place and understand how theming and rendering fit together.

The packages#

PackageRole
@sigx/terminalUmbrella entry. Re-exports the renderer, the headless foundation and the themed components so you can import everything from one place. Set jsxImportSource: "@sigx/terminal" to write TSX.
@sigx/runtime-terminalThe renderer. Walks your component tree into ANSI lines and paints them: render modes, layered key dispatch, color-depth detection, output targets, reactive terminal size. The host platform for @sigx/runtime-core.
@sigx/terminal-zeroHeadless foundation. The design-system-neutral half: the token contract, the theme engine (resolveColor, setTheme), shared glyphs, layout primitives (Box, Row, Col, Text, …) and the prompts engine. No fixed look — skins build on it.
@sigx/terminal-uiThemed component library. The SigX-tui skin: forms, feedback, navigation, layout, data, fx and tasks components, plus five built-in themes (default obsidian). Built entirely on terminal-zero tokens.
@sigx/terminal-devHMR dev runner. sigx-terminal-dev <entry> runs your app under Vite — edit a component, the running TUI patches in place. See Dev mode.
@sigx/argsCommand & argument parser. A fluent, type-aware CLI parser. Independent of the renderer — it's the engine behind @sigx/cli. See Command-line args.

How they layer#

@sigx/terminal  (umbrella: re-exports the three below)
├── @sigx/terminal-ui      themed components (obsidian + 4 themes)
│     └── @sigx/terminal-zero    tokens · theme engine · layout · prompts engine
│             └── @sigx/runtime-terminal   the cell renderer + key dispatch
└── @sigx/runtime-core / @sigx/reactivity  (peers — your reactive model)

The renderer sits at the bottom; terminal-zero adds a semantic token layer over it; terminal-ui paints concrete components against those tokens. Because the colours your components ask for are tokens (accent, fg, line, …) resolved at render time, switching the active theme repaints the whole app — see Theming.

What you import#

For application code, import from @sigx/terminal — it carries the reactive primitives (re-exported from core), the box/text/br intrinsics, every component, and the render entry:

TSX 
/** @jsxImportSource @sigx/terminal */
import { component, signal, defineApp, Input, Button } from '@sigx/terminal';

The split only matters when you want a piece in isolation — for example building a custom design system on @sigx/terminal-zero, or using @sigx/args in a CLI with no terminal UI.

Peer dependencies#

The SignalX core packages — @sigx/reactivity and @sigx/runtime-core (0.6.x) — are peer dependencies of every terminal package. Your app installs them once and all @sigx/* packages share that single copy, so signals and effects always run on one reactivity engine. npm 7+ and pnpm with auto-install-peers resolve them automatically; listing them explicitly works everywhere.

Terminal 
pnpm add @sigx/terminal @sigx/reactivity @sigx/runtime-core

See Installation for the full setup.

Next steps#