# terminal/TerminalSurface (zidane-ui/terminal)

Import: `import { … } from 'zidane-ui/terminal'`. Source: [ui/src/terminal/TerminalSurface.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/terminal/TerminalSurface.tsx).

## Components

### `TerminalSurface`

Component.

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

```ts
function TerminalSurface(props: TerminalSurfaceProps): Element
```

**Parameters**

- `props` (`TerminalSurfaceProps`): Component props.

**Returns** `Element`

**Props**

- `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).

Source: [ui/src/terminal/TerminalSurface.tsx:76](https://github.com/Tahul/zidane/blob/main/ui/src/terminal/TerminalSurface.tsx#L76)

## Interfaces

### `TerminalAdapter`

Interface.

The process a [`TerminalSurface`](https://zidane.si/docs/reference/ui-terminal-terminal-surface.md#TerminalSurface) shows.

```ts
interface TerminalAdapter
```

**Properties**

- `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.

Source: [ui/src/terminal/TerminalSurface.tsx:26](https://github.com/Tahul/zidane/blob/main/ui/src/terminal/TerminalSurface.tsx#L26)

### `TerminalSurfaceProps`

Interface.

Props of [`TerminalSurface`](https://zidane.si/docs/reference/ui-terminal-terminal-surface.md#TerminalSurface).

```ts
interface TerminalSurfaceProps
```

**Properties**

- `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).

Source: [ui/src/terminal/TerminalSurface.tsx:38](https://github.com/Tahul/zidane/blob/main/ui/src/terminal/TerminalSurface.tsx#L38)