import { createTestBackendState, createTestBackend, testBackendToString, createTerminal, terminalDraw, frameRenderWidget, createRect, createLayout, lengthConstraint, fillConstraint, splitLayout, blockBordered, createTitle, createParagraph, renderParagraph, } from 'terminui'; // Set up a test backend (swap for a real terminal backend in production) const state = createTestBackendState(60, 10); const backend = createTestBackend(state); const terminal = createTerminal(backend); terminalDraw(terminal, (frame) => { const paragraph = createParagraph('Hello, terminui!', { block: blockBordered({ titles: [createTitle('Greeting')] }), }); frameRenderWidget(frame, renderParagraph(paragraph), frame.area); }); console.log(testBackendToString(state));

import { createLayout, lengthConstraint, fillConstraint, percentageConstraint, splitLayout, createRect } from 'terminui'; const layout = createLayout([ lengthConstraint(3), // exactly 3 rows percentageConstraint(50), // 50% of remaining fillConstraint(1), // fill the rest ]); const area = createRect(0, 0, 80, 24); const [header, body, footer] = splitLayout(layout, area);

// Vertical (default) — splits into rows const vLayout = createLayout([...constraints]); // Horizontal — splits into columns const hLayout = createLayout([...constraints], { direction: 'horizontal' });

import { createStyle, styleFg, styleBg, styleAddModifier, Color, Modifier, patchStyle } from 'terminui'; const bold = styleAddModifier(createStyle(), Modifier.BOLD); const warning = styleFg(styleBg(createStyle(), Color.Yellow), Color.Black); const merged = patchStyle(bold, warning); // combines both

Color.Reset, Color.Black, Color.Red, Color.Green, Color.Yellow, Color.Blue, Color.Magenta, Color.Cyan, Color.Gray, Color.White, Color.DarkGray, Color.LightRed, Color.LightGreen, ... indexedColor(42) // 256-color palette rgbColor(255, 128, 0) // 24-bit true color

Modifier.BOLD, Modifier.DIM, Modifier.ITALIC, Modifier.UNDERLINED, Modifier.SLOW_BLINK, Modifier.RAPID_BLINK, Modifier.REVERSED, Modifier.HIDDEN, Modifier.CROSSED_OUT, Modifier.DOUBLE_UNDERLINED, Modifier.OVERLINED

import { blockBordered, createTitle, renderBlock, Borders } from 'terminui'; const block = blockBordered({ titles: [ createTitle('Header'), createTitle('Footer', { position: 'bottom', alignment: 'center' }), ], borderType: 'rounded', // 'plain' | 'rounded' | 'double' | 'thick' padding: uniformPadding(1), }); frameRenderWidget(frame, renderBlock(block), area);

import { createParagraph, renderParagraph } from 'terminui'; const p = createParagraph('Long text that wraps...', { block: blockBordered({ titles: [createTitle('Paragraph')] }), wrap: { trim: true }, alignment: 'center', scroll: [2, 0], // skip first 2 lines }); frameRenderWidget(frame, renderParagraph(p), area);

import { createList, createListState, renderStatefulList } from 'terminui'; const list = createList(['Item 1', 'Item 2', 'Item 3'], { block: blockBordered({ titles: [createTitle('Menu')] }), highlightStyle: styleFg(createStyle(), Color.Yellow), highlightSymbol: '▶ ', }); const state = createListState(0); // selected index frameRenderStatefulWidget(frame, renderStatefulList(list), area, state); // Navigate: state.selected = 1;

import { createTable, createRow, renderTable, lengthConstraint, fillConstraint } from 'terminui'; const table = createTable( [ createRow(['Alice', '42', 'admin']), createRow(['Bob', '37', 'user']), ], [lengthConstraint(10), lengthConstraint(5), fillConstraint(1)], { header: createRow(['Name', 'Age', 'Role']), block: blockBordered({ titles: [createTitle('Users')] }), }, ); frameRenderWidget(frame, renderTable(table), area);

import { gaugePercent, renderGauge } from 'terminui'; const gauge = gaugePercent(67, { block: blockBordered({ titles: [createTitle('Progress')] }), useUnicode: true, gaugeStyle: styleFg(createStyle(), Color.Green), }); frameRenderWidget(frame, renderGauge(gauge), area);

import { createTabs, renderTabs } from 'terminui'; const tabs = createTabs(['Dashboard', 'Logs', 'Settings'], { selected: 0, highlightStyle: styleFg(createStyle(), Color.Yellow), }); frameRenderWidget(frame, renderTabs(tabs), area);

import { createSparkline, renderSparkline } from 'terminui'; const spark = createSparkline([1, 4, 2, 8, 5, 3, 7, 6], { block: blockBordered({ titles: [createTitle('CPU')] }), style: styleFg(createStyle(), Color.Cyan), }); frameRenderWidget(frame, renderSparkline(spark), area);

import { createBar, createBarGroup, createBarChart, renderBarChart } from 'terminui'; const chart = createBarChart( [createBarGroup([createBar(5), createBar(8), createBar(3)], 'Group A')], { barWidth: 3, direction: 'vertical' }, ); frameRenderWidget(frame, renderBarChart(chart), area);

import { createScrollbar, createScrollbarState, renderStatefulScrollbar } from 'terminui'; const sb = createScrollbar('verticalRight'); const sbState = createScrollbarState(100, 25); sbState.viewportContentLength = 20; frameRenderStatefulWidget(frame, renderStatefulScrollbar(sb), area, sbState);

const state = createTestBackendState(80, 24); const backend = createTestBackend(state); const terminal = createTerminal(backend); terminalDraw(terminal, (frame) => { // render widgets to frame }); console.log(testBackendToString(state));

// Pseudo-code for a real alternate screen app: const backend = createNodeBackend(); // your Node.js backend const terminal = createTerminal(backend); // Enter alternate screen process.stdout.write('\x1b[?1049h'); // Main loop while (running) { terminalDraw(terminal, (frame) => { // render your UI }); await waitForInput(); } // Exit alternate screen process.stdout.write('\x1b[?1049l');