UI kit reference

terminal/TerminalSurface

import { … } from 'zidane-ui/terminal'ui/src/terminal/TerminalSurface.tsx

Components#

Renders the terminal (see the module comment), with a notice when ghostty-web fails to load or the process exits.

TypeScript

function TerminalSurface(props: TerminalSurfaceProps): Element

Parameters
Name	Type	Description
props	`TerminalSurfaceProps`	Component props.

Element

TerminalSurface props
Name	Type	Description
adapter	`TerminalAdapter`	The process to show; a new adapter re-creates the terminal.
autoFocus?	`boolean`	Take keyboard focus on mount and whenever the view becomes visible.
className?	`string`	Extra classes on the host (it already flexes to fill its parent).
fontFamily	`string`	CSS font family of the grid; applies live.
fontSize	`number`	Font size in px; applies live.
label?	`string`	Accessible name. Default: the `terminal` label.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
symbolsFontUrl?	`string`	Where the app serves the Nerd Font symbols face (see `loadGhostty`).
theme	`TerminalTheme`	Colors (`terminalTheme(palette)`).
visible?	`boolean`	Shown and laid out; off pauses rendering (a background tab).

The process a TerminalSurface shows.

TypeScript

interface TerminalAdapter

TerminalAdapter properties
Name	Type	Description
onData	`(listener: (data: string) => void) => () => void`	The process's output; returns the unsubscribe.
onExit?	`(listener: (code: number) => void) => () => void`	The process ended; returns the unsubscribe.
resize	`(cols: number, rows: number) => void`	The grid the view fits, on mount and on every change.
write	`(data: string) => void`	Typed keys and pasted text, as the bytes the process reads.

TypeScript

interface TerminalSurfaceProps

TerminalSurfaceProps properties
Name	Type	Description
adapter	`TerminalAdapter`	The process to show; a new adapter re-creates the terminal.
autoFocus?	`boolean`	Take keyboard focus on mount and whenever the view becomes visible.
className?	`string`	Extra classes on the host (it already flexes to fill its parent).
fontFamily	`string`	CSS font family of the grid; applies live.
fontSize	`number`	Font size in px; applies live.
label?	`string`	Accessible name. Default: the `terminal` label.
style?	`CSSProperties`	Inline styles on the root element, merged after the component's own.
symbolsFontUrl?	`string`	Where the app serves the Nerd Font symbols face (see `loadGhostty`).
theme	`TerminalTheme`	Colors (`terminalTheme(palette)`).
visible?	`boolean`	Shown and laid out; off pauses rendering (a background tab).