@adecore/terminal

A terminal pane on xterm.js that looks like the rest of an @adecore/ui interface in both themes. It fits the box it is given, opens links in the output and either takes typing or only shows output. The app feeds it output and reads back what is on screen through a handle, without touching xterm's addons.

Documentation

Install

bun add @adecore/terminal @xterm/xterm @xterm/addon-fit @xterm/addon-web-links @xterm/addon-webgl

xterm and its addons are peer dependencies, so the app picks the version. Import xterm's stylesheet and this package's after the theme of @adecore/ui:

@import "tailwindcss";
@import "@adecore/ui/theme.css";
@import "@xterm/xterm/css/xterm.css";
@import "@adecore/terminal/terminal.css";

Use

import { TerminalView, type TerminalViewHandle } from '@adecore/terminal';

const view = useRef<TerminalViewHandle>(null);

useEffect(() => session.onOutput((data) => view.current?.write(data)), [session]);

<TerminalView ref={view} label="Shell" onData={(data) => session.write(data)} onResize={(cols, rows) => session.resize(cols, rows)} className="h-full" />

License

FSL-1.1-MIT, see LICENSE.