@vertz/tui 0.2.3

package/dist/jsx-runtime/index.d.ts

@@ -0,0 +1,111 @@
+/** Style attributes for a single terminal cell. */
+interface CellStyle {
+	color?: string;
+	bgColor?: string;
+	bold?: boolean;
+	dim?: boolean;
+	italic?: boolean;
+	underline?: boolean;
+	strikethrough?: boolean;
+}
+/** Computed layout box — the result of layout computation. */
+interface LayoutBox {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+/** Border style options. */
+type BorderStyle = "single" | "double" | "round" | "bold" | "none";
+/** Layout properties for a node. */
+interface LayoutProps {
+	direction: "row" | "column";
+	padding: number;
+	paddingX: number;
+	paddingY: number;
+	gap: number;
+	width: number | "full" | undefined;
+	height: number | undefined;
+	grow: number;
+	align: "start" | "center" | "end";
+	justify: "start" | "center" | "end" | "between";
+	border: BorderStyle;
+}
+/** A persistent TUI element (like <Box> or <Text>). Built once, mutated by effects. */
+interface TuiElement {
+	_tuiElement: true;
+	tag: string;
+	props: Record<string, unknown>;
+	style: CellStyle;
+	layoutProps: LayoutProps;
+	children: TuiChild[];
+	parent: TuiElement | null;
+	dirty: boolean;
+	/** Computed layout box. */
+	box: LayoutBox;
+}
+/** A persistent text node. Updated in-place by reactive effects. */
+interface TuiTextNode {
+	_tuiText: true;
+	text: string;
+	style: CellStyle;
+	dirty: boolean;
+	box: LayoutBox;
+}
+/** A conditional node that swaps between branches. */
+interface TuiConditionalNode {
+	_tuiConditional: true;
+	current: TuiElement | TuiTextNode | null;
+	dirty: boolean;
+}
+/** A list node that manages keyed items. */
+interface TuiListNode {
+	_tuiList: true;
+	items: TuiElement[];
+	dirty: boolean;
+}
+/** Any child in a persistent TUI tree. */
+type TuiChild = TuiElement | TuiTextNode | TuiConditionalNode | TuiListNode;
+/** Any renderable TUI content. */
+type TuiNode = TuiElement2 | TuiTextNode2 | TuiConditionalNode | TuiListNode | null | undefined | false | TuiNode[];
+/** A TUI element (like <Box> or <Text>). */
+interface TuiElement2 {
+	_tuiElement: true;
+	tag: string;
+	props: Record<string, unknown>;
+	style: CellStyle;
+	layoutProps: LayoutProps;
+	children: TuiNode[];
+	/** Computed layout box. */
+	box: LayoutBox;
+	/** Component function, if this is a component element. */
+	component?: (props: Record<string, unknown>) => TuiNode;
+}
+/** A text node (raw string or number). */
+interface TuiTextNode2 {
+	_tuiText: true;
+	text: string;
+	style: CellStyle;
+	box: LayoutBox;
+}
+/** Color type for Text components. */
+type Color = "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray" | "redBright" | "greenBright" | "yellowBright" | "blueBright" | "magentaBright" | "cyanBright" | "whiteBright" | `#${string}`;
+/** Tag type: string intrinsic or component function. */
+type Tag = string | ((props: Record<string, unknown>) => TuiNode);
+/** JSX factory function. */
+declare function jsx(tag: Tag, props: Record<string, unknown>): TuiNode;
+/** JSX factory for elements with multiple static children. */
+declare const jsxs: typeof jsx;
+/** JSX dev factory. */
+declare const jsxDEV: typeof jsx;
+/** Fragment: returns children as-is. */
+declare function Fragment(props: {
+	children?: TuiNode;
+}): TuiNode;
+declare namespace JSX {
+	type Element = TuiNode;
+	interface IntrinsicElements {
+		[tag: string]: Record<string, unknown>;
+	}
+}
+export { jsxs, jsxDEV, jsx, JSX, Fragment, Color };

package/dist/jsx-runtime/index.js

@@ -0,0 +1,134 @@
+import {
+  defaultLayoutProps
+} from "../shared/chunk-5x9fb9b2.js";
+
+// src/jsx-runtime/index.ts
+function jsx(tag, props) {
+  if (typeof tag === "function") {
+    return tag(props);
+  }
+  const { children, ...rest } = props;
+  const element = createElement(tag, rest);
+  element.children = normalizeChildren(children);
+  return element;
+}
+var jsxs = jsx;
+var jsxDEV = jsx;
+function Fragment(props) {
+  return props.children ?? null;
+}
+function createElement(tag, props) {
+  const layoutProps = defaultLayoutProps();
+  const style = {};
+  for (const [key, value] of Object.entries(props)) {
+    switch (key) {
+      case "direction":
+        if (value === "row" || value === "column")
+          layoutProps.direction = value;
+        break;
+      case "padding":
+        if (typeof value === "number")
+          layoutProps.padding = value;
+        break;
+      case "paddingX":
+        if (typeof value === "number")
+          layoutProps.paddingX = value;
+        break;
+      case "paddingY":
+        if (typeof value === "number")
+          layoutProps.paddingY = value;
+        break;
+      case "gap":
+        if (typeof value === "number")
+          layoutProps.gap = value;
+        break;
+      case "width":
+        if (typeof value === "number" || value === "full")
+          layoutProps.width = value;
+        break;
+      case "height":
+        if (typeof value === "number")
+          layoutProps.height = value;
+        break;
+      case "grow":
+        if (typeof value === "number")
+          layoutProps.grow = value;
+        break;
+      case "align":
+        if (value === "start" || value === "center" || value === "end")
+          layoutProps.align = value;
+        break;
+      case "justify":
+        if (value === "start" || value === "center" || value === "end" || value === "between") {
+          layoutProps.justify = value;
+        }
+        break;
+      case "border":
+        if (value === "single" || value === "double" || value === "round" || value === "bold" || value === "none") {
+          layoutProps.border = value;
+        }
+        break;
+      case "color":
+        if (typeof value === "string")
+          style.color = value;
+        break;
+      case "bgColor":
+      case "borderColor":
+        if (typeof value === "string")
+          style.bgColor = value;
+        break;
+      case "bold":
+        if (value === true)
+          style.bold = true;
+        break;
+      case "dim":
+        if (value === true)
+          style.dim = true;
+        break;
+      case "italic":
+        if (value === true)
+          style.italic = true;
+        break;
+      case "underline":
+        if (value === true)
+          style.underline = true;
+        break;
+      case "strikethrough":
+        if (value === true)
+          style.strikethrough = true;
+        break;
+    }
+  }
+  return {
+    _tuiElement: true,
+    tag,
+    props,
+    style,
+    layoutProps,
+    children: [],
+    box: { x: 0, y: 0, width: 0, height: 0 }
+  };
+}
+function normalizeChildren(children) {
+  if (children == null || children === false || children === true)
+    return [];
+  if (Array.isArray(children)) {
+    return children.flatMap((c) => normalizeChildren(c));
+  }
+  if (typeof children === "string" || typeof children === "number") {
+    const textNode = {
+      _tuiText: true,
+      text: String(children),
+      style: {},
+      box: { x: 0, y: 0, width: 0, height: 0 }
+    };
+    return [textNode];
+  }
+  return [children];
+}
+export {
+  jsxs,
+  jsxDEV,
+  jsx,
+  Fragment
+};

package/dist/shared/chunk-5x9fb9b2.js

@@ -0,0 +1,52 @@
+// src/layout/types.ts
+function defaultLayoutProps() {
+  return {
+    direction: "column",
+    padding: 0,
+    paddingX: 0,
+    paddingY: 0,
+    gap: 0,
+    width: undefined,
+    height: undefined,
+    grow: 0,
+    align: "start",
+    justify: "start",
+    border: "none"
+  };
+}
+var BORDER_CHARS = {
+  single: {
+    topLeft: "┌",
+    topRight: "┐",
+    bottomLeft: "└",
+    bottomRight: "┘",
+    horizontal: "─",
+    vertical: "│"
+  },
+  double: {
+    topLeft: "╔",
+    topRight: "╗",
+    bottomLeft: "╚",
+    bottomRight: "╝",
+    horizontal: "═",
+    vertical: "║"
+  },
+  round: {
+    topLeft: "╭",
+    topRight: "╮",
+    bottomLeft: "╰",
+    bottomRight: "╯",
+    horizontal: "─",
+    vertical: "│"
+  },
+  bold: {
+    topLeft: "┏",
+    topRight: "┓",
+    bottomLeft: "┗",
+    bottomRight: "┛",
+    horizontal: "━",
+    vertical: "┃"
+  }
+};
+
+export { defaultLayoutProps, BORDER_CHARS };

package/dist/shared/chunk-6y95cgnx.js

@@ -0,0 +1,137 @@
+// src/buffer/cell.ts
+function emptyCell() {
+  return { char: " ", width: 1, style: {} };
+}
+function stylesEqual(a, b) {
+  return a.color === b.color && a.bgColor === b.bgColor && a.bold === b.bold && a.dim === b.dim && a.italic === b.italic && a.underline === b.underline && a.strikethrough === b.strikethrough;
+}
+function cellsEqual(a, b) {
+  return a.char === b.char && a.width === b.width && stylesEqual(a.style, b.style);
+}
+
+// src/buffer/terminal-buffer.ts
+class TerminalBuffer {
+  width;
+  height;
+  _cells;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this._cells = TerminalBuffer._createGrid(width, height);
+  }
+  static _createGrid(width, height) {
+    const grid = [];
+    for (let r = 0;r < height; r++) {
+      const row = [];
+      for (let c = 0;c < width; c++) {
+        row.push(emptyCell());
+      }
+      grid.push(row);
+    }
+    return grid;
+  }
+  get(row, col) {
+    return this._cells[row]?.[col];
+  }
+  set(row, col, char, style) {
+    const cellRow = this._cells[row];
+    if (!cellRow || col < 0 || col >= this.width)
+      return;
+    cellRow[col] = { char, width: 1, style };
+  }
+  writeString(row, col, text, style) {
+    for (let i = 0;i < text.length; i++) {
+      const c = col + i;
+      if (c >= this.width)
+        break;
+      const ch = text[i];
+      if (ch !== undefined)
+        this.set(row, c, ch, style);
+    }
+  }
+  clear() {
+    this._cells = TerminalBuffer._createGrid(this.width, this.height);
+  }
+  diff(previous) {
+    const regions = [];
+    const maxRows = Math.min(this.height, previous.height);
+    const maxCols = Math.min(this.width, previous.width);
+    for (let r = 0;r < maxRows; r++) {
+      let regionStart = -1;
+      let regionCells = [];
+      for (let c = 0;c < maxCols; c++) {
+        const curr = this._cells[r]?.[c];
+        const prev = previous._cells[r]?.[c];
+        if (!curr || !prev)
+          continue;
+        if (!cellsEqual(curr, prev)) {
+          if (regionStart === -1) {
+            regionStart = c;
+            regionCells = [];
+          }
+          regionCells.push(curr);
+        } else if (regionStart !== -1) {
+          regions.push({ row: r, col: regionStart, cells: regionCells });
+          regionStart = -1;
+        }
+      }
+      if (regionStart !== -1) {
+        regions.push({ row: r, col: regionStart, cells: regionCells });
+      }
+    }
+    return regions;
+  }
+  clone() {
+    const copy = new TerminalBuffer(this.width, this.height);
+    for (let r = 0;r < this.height; r++) {
+      for (let c = 0;c < this.width; c++) {
+        const cell = this._cells[r]?.[c];
+        if (cell)
+          copy.set(r, c, cell.char, { ...cell.style });
+      }
+    }
+    return copy;
+  }
+  getRowText(row) {
+    const cellRow = this._cells[row];
+    if (!cellRow)
+      return "";
+    return cellRow.map((c) => c.char).join("");
+  }
+  getText() {
+    const lines = [];
+    for (let r = 0;r < this.height; r++) {
+      lines.push(this.getRowText(r));
+    }
+    return lines.join(`
+`);
+  }
+}
+
+// src/test/test-adapter.ts
+class TestAdapter {
+  columns;
+  rows;
+  buffer;
+  rawOutput = [];
+  constructor(columns = 80, rows = 24) {
+    this.columns = columns;
+    this.rows = rows;
+    this.buffer = new TerminalBuffer(columns, rows);
+  }
+  write(data) {
+    this.rawOutput.push(data);
+  }
+  textAt(row) {
+    return this.buffer.getRowText(row);
+  }
+  text() {
+    return this.buffer.getText();
+  }
+  reset() {
+    this.rawOutput = [];
+    this.buffer = new TerminalBuffer(this.columns, this.rows);
+  }
+}
+
+export { TerminalBuffer, TestAdapter };

package/dist/test/index.d.ts

@@ -0,0 +1,109 @@
+/** Style attributes for a single terminal cell. */
+interface CellStyle {
+	color?: string;
+	bgColor?: string;
+	bold?: boolean;
+	dim?: boolean;
+	italic?: boolean;
+	underline?: boolean;
+	strikethrough?: boolean;
+}
+/** A single terminal cell: one character with style. */
+interface Cell {
+	char: string;
+	width: number;
+	style: CellStyle;
+}
+/** A region of cells that changed between two buffers. */
+interface DirtyRegion {
+	row: number;
+	col: number;
+	cells: Cell[];
+}
+/**
+* 2D grid of cells representing the terminal screen.
+* Double-buffered: write to current, diff against previous.
+*/
+declare class TerminalBuffer {
+	readonly width: number;
+	readonly height: number;
+	private _cells;
+	constructor(width: number, height: number);
+	private static _createGrid;
+	/** Get a cell at the given position. Returns undefined if out of bounds. */
+	get(row: number, col: number): Cell | undefined;
+	/** Set a cell at the given position. No-op if out of bounds. */
+	set(row: number, col: number, char: string, style: CellStyle): void;
+	/** Write a string starting at the given position. */
+	writeString(row: number, col: number, text: string, style: CellStyle): void;
+	/** Fill the entire buffer with empty cells. */
+	clear(): void;
+	/**
+	* Diff this buffer against another, returning regions that differ.
+	* Each dirty region is a contiguous run of changed cells on one row.
+	*/
+	diff(previous: TerminalBuffer): DirtyRegion[];
+	/** Create a deep copy of this buffer. */
+	clone(): TerminalBuffer;
+	/** Get the text content of a specific row (no styling). */
+	getRowText(row: number): string;
+	/** Get all text content (no styling), rows joined by newlines. */
+	getText(): string;
+}
+/**
+* Output adapter interface. Abstracts stdout for testing.
+*/
+interface OutputAdapter {
+	/** Write a string to the output. */
+	write(data: string): void;
+	/** Get terminal width in columns. */
+	readonly columns: number;
+	/** Get terminal height in rows. */
+	readonly rows: number;
+}
+/**
+* Test output adapter that captures rendered output for assertions.
+* Instead of writing to stdout, maintains a TerminalBuffer that can be inspected.
+*/
+declare class TestAdapter implements OutputAdapter {
+	readonly columns: number;
+	readonly rows: number;
+	/** The current terminal buffer (public for test inspection). */
+	buffer: TerminalBuffer;
+	/** Raw ANSI output captured from write calls. */
+	rawOutput: string[];
+	constructor(columns?: number, rows?: number);
+	write(data: string): void;
+	/** Get the text content of a specific row. */
+	textAt(row: number): string;
+	/** Get all text content, rows joined by newlines. */
+	text(): string;
+	/** Reset captured output. */
+	reset(): void;
+}
+/** Parsed key event from terminal stdin. */
+interface KeyEvent {
+	/** Key name: 'a', 'return', 'up', 'down', 'tab', 'escape', 'space', etc. */
+	name: string;
+	/** Printable character or empty string. */
+	char: string;
+	ctrl: boolean;
+	shift: boolean;
+	meta: boolean;
+}
+type KeyListener = (key: KeyEvent) => void;
+/**
+* Test stdin that allows programmatic key injection for testing.
+*/
+declare class TestStdin {
+	private _listeners;
+	/** Register a key listener. Returns a cleanup function. */
+	onKey(listener: KeyListener): () => void;
+	/** Simulate a key press. */
+	pressKey(name: string, options?: Partial<Omit<KeyEvent, "name">>): void;
+	/** Simulate typing a string character by character. */
+	type(text: string): void;
+	/** Remove all listeners. */
+	dispose(): void;
+}
+export { TestStdin, TestAdapter };

package/dist/test/index.js

@@ -0,0 +1,40 @@
+import {
+  TestAdapter
+} from "../shared/chunk-6y95cgnx.js";
+// src/test/test-stdin.ts
+class TestStdin {
+  _listeners = [];
+  onKey(listener) {
+    this._listeners.push(listener);
+    return () => {
+      const idx = this._listeners.indexOf(listener);
+      if (idx !== -1)
+        this._listeners.splice(idx, 1);
+    };
+  }
+  pressKey(name, options) {
+    const event = {
+      name,
+      char: options?.char ?? (name.length === 1 ? name : ""),
+      ctrl: options?.ctrl ?? false,
+      shift: options?.shift ?? false,
+      meta: options?.meta ?? false
+    };
+    const snapshot = [...this._listeners];
+    for (const listener of snapshot) {
+      listener(event);
+    }
+  }
+  type(text) {
+    for (const char of text) {
+      this.pressKey(char, { char });
+    }
+  }
+  dispose() {
+    this._listeners = [];
+  }
+}
+export {
+  TestStdin,
+  TestAdapter
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@vertz/tui",
+  "version": "0.2.3",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vertz-dev/vertz.git",
+    "directory": "packages/tui"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime/index.d.ts",
+      "import": "./dist/jsx-runtime/index.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime/index.d.ts",
+      "import": "./dist/jsx-runtime/index.js"
+    },
+    "./internals": {
+      "types": "./dist/internals.d.ts",
+      "import": "./dist/internals.js"
+    },
+    "./test": {
+      "types": "./dist/test/index.d.ts",
+      "import": "./dist/test/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bunup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "biome check src/"
+  },
+  "dependencies": {
+    "@vertz/ui": "0.2.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.1",
+    "@vitest/coverage-v8": "^4.0.18",
+    "bunup": "^0.16.23",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}