### Install neo-neo-blessed Package

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Install the neo-neo-blessed package using npm. For TypeScript projects, also install Node.js type definitions.

```bash
npm install neo-neo-blessed
```

```bash
npm install --save-dev @types/node
```

--------------------------------

### blessed.screen(options) — Create the root screen

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

The screen is the root container for all widgets and manages the render loop, keyboard focus, mouse routing, and terminal lifecycle. Every application starts by creating exactly one screen.

```APIDOC
## blessed.screen(options) — Create the root screen

### Description
The screen is the root container for all widgets and manages the render loop, keyboard focus, mouse routing, and terminal lifecycle. Every application starts by creating exactly one screen.

### Method
`blessed.screen(options)`

### Parameters
#### Options
- **smartCSR** (boolean) - Optional - Use "smart" CSR scrolling for efficiency
- **fullUnicode** (boolean) - Optional - Enable full Unicode / East-Asian width support
- **dockBorders** (boolean) - Optional - Merge adjacent widget borders visually
- **ignoreDockContrast** (boolean) - Optional - Ignore dock contrast
- **title** (string) - Optional - The title of the TUI application
- **resizeTimeout** (number) - Optional - Debounce terminal resize events (ms)
- **log** (string) - Optional - Path to an optional debug log file

### Request Example
```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,
  fullUnicode: true,
  dockBorders: true,
  ignoreDockContrast: true,
  title: 'My TUI App',
  resizeTimeout: 300,
  log: '/tmp/blessed.log',
});

// Global key bindings
screen.key(['escape', 'q', 'C-c'], () => process.exit(0));

// Focus cycling
screen.program.key('tab', () => {
  screen.focusNext();
  screen.render();
});

// Respond to terminal resize
screen.on('resize', () => {
  screen.render();
});

screen.render();
```

### Response
- **screen** (object) - The root screen object
```

--------------------------------

### Use Typed Configuration Objects for Widgets

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Leverage TypeScript's type checking for widget configuration options to catch typos and invalid values at compile time. This example shows typed options for a 'box' widget.

```typescript
// TypeScript will catch typos and invalid options
const boxOptions: blessed.BoxOptions = {
  parent: screen,
  top: 'center',
  left: 'center',
  width: '50%',
  height: '50%',
  content: 'Hello World!',
  border: {
    type: 'line', // TypeScript knows valid border types
  },
  style: {
    fg: 'white',
    bg: 'blue',
  },
};

const box = blessed.box(boxOptions);
```

--------------------------------

### Implement Generic Event Emitters

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Enhance event emission and handling with generic types for type-safe event data. This example defines an `AppEvents` interface and a custom `AppEventEmitter` class that leverages it.

```typescript
// Type-safe event emission
interface AppEvents {
  'user-login': { username: string; timestamp: Date };
  'user-logout': { username: string };
  'data-updated': { count: number };
}

class AppEventEmitter extends blessed.NodeInterface {
  emit<K extends keyof AppEvents>(event: K, data: AppEvents[K]): boolean {
    return super.emit(event, data);
  }

  on<K extends keyof AppEvents>(
    event: K,
    listener: (data: AppEvents[K]) => void
  ): this {
    return super.on(event, listener);
  }
}
```

--------------------------------

### Type-Safe Form Submission Handling

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Handle form submissions in TypeScript, benefiting from type checking for accessing submitted data properties. This example demonstrates type safety when accessing 'username' and 'password'.

```typescript
// Before (JavaScript)
form.on('submit', function (data) {
  console.log('Form data:', data);
});

// After (TypeScript)
form.on('submit', (data: { [key: string]: any }) => {
  console.log('Form data:', data);

  // TypeScript helps with property access
  if (data.username && data.password) {
    // Handle login
  }
});
```

--------------------------------

### Create Basic Screen and Box in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-examples.md

Demonstrates creating a screen and a centered box with content, tags, borders, and styles. Includes key bindings for exiting and rendering the screen.

```typescript
import blessed from 'neo-neo-blessed';

// Create a screen instance
const screen = blessed.screen({
  smartCSR: true,
  title: 'My Application',
});

// Create a centered box
const box = blessed.box({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '50%',
  height: '50%',
  content: 'Hello World!',
  tags: true,
  border: {
    type: 'line',
  },
  style: {
    fg: 'white',
    bg: 'magenta',
    border: {
      fg: '#f0f0f0',
    },
    hover: {
      bg: 'green',
    },
  },
});

// Quit on Escape, q, or Control-C
screen.key(['escape', 'q', 'C-c'], () => {
  process.exit(0);
});

// Focus our element
box.focus();

// Render the screen
screen.render();

```

--------------------------------

### Create Blessed Screen

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Initializes the root screen for a TUI application. Configure terminal behavior, title, and logging. Global key bindings and resize handlers are set up here.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,          // Use "smart" CSR scrolling for efficiency
  fullUnicode: true,       // Enable full Unicode / East-Asian width support
  dockBorders: true,       // Merge adjacent widget borders visually
  ignoreDockContrast: true,
  title: 'My TUI App',
  resizeTimeout: 300,      // Debounce terminal resize events (ms)
  log: '/tmp/blessed.log', // Optional debug log file
});

// Global key bindings
screen.key(['escape', 'q', 'C-c'], () => process.exit(0));

// Focus cycling
screen.program.key('tab', () => {
  screen.focusNext();
  screen.render();
});

// Respond to terminal resize
screen.on('resize', () => {
  screen.render();
});

screen.render();
// Expected: clears terminal, enters alternate buffer, renders widgets
```

--------------------------------

### Create Interactive List in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-examples.md

Shows how to create an interactive list with items, keys, mouse support, borders, and scrollbars. Handles item selection to display a message.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,
});

const list = blessed.list({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '50%',
  height: '50%',
  items: ['Red', 'Green', 'Blue', 'Yellow', 'Cyan', 'Magenta'],
  keys: true,
  vi: true,
  mouse: true,
  border: 'line',
  scrollbar: {
    ch: ' ',
    track: {
      bg: 'cyan',
    },
    style: {
      inverse: true,
    },
  },
  style: {
    item: {
      hover: {
        bg: 'blue',
      },
    },
    selected: {
      bg: 'blue',
      bold: true,
    },
  },
});

// Handle selection
list.on('select', item => {
  const msg = blessed.message({
    parent: screen,
    top: 'center',
    left: 'center',
    height: 'shrink',
    width: 'half',
    align: 'center',
    valign: 'middle',
    border: 'line',
  });

  msg.display(`You selected: ${item.content}`, 3, () => {
    list.focus();
    screen.render();
  });
});

screen.key(['escape', 'q', 'C-c'], () => {
  process.exit(0);
});

list.focus();
screen.render();

```

--------------------------------

### Create Terminal Widget in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-examples.md

Demonstrates the creation and usage of a terminal widget, allowing it to display output and respond to screen title changes.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,
});

const terminal = blessed.terminal({
  parent: screen,
  cursor: 'line',
  cursorBlink: true,
  screenKeys: false,
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  border: 'line',
});

terminal.on('title', (title: string) => {
  screen.title = title;
  screen.render();
});

screen.key(['C-c'], () => {
  process.exit(0);
});

terminal.focus();
screen.render();

```

--------------------------------

### Type-Safe Configuration Management in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Defines interfaces for application configuration and provides a default configuration object. Demonstrates creating an application with a merged configuration, applying theme styles, and initializing the blessed screen.

```typescript
// Type-safe configuration
interface AppTheme {
  primary: string;
  secondary: string;
  accent: string;
  background: string;
}

interface AppConfig {
  theme: AppTheme;
  screen: blessed.ScreenOptions;
  features: {
    enableMouse: boolean;
    enableKeyboard: boolean;
    enableLogging: boolean;
  };
}

const defaultConfig: AppConfig = {
  theme: {
    primary: 'blue',
    secondary: 'green',
    accent: 'yellow',
    background: 'black',
  },
  screen: {
    smartCSR: true,
    fullUnicode: true,
  },
  features: {
    enableMouse: true,
    enableKeyboard: true,
    enableLogging: false,
  },
};

function createApp(config: Partial<AppConfig> = {}) {
  const finalConfig = { ...defaultConfig, ...config };
  const screen = blessed.screen(finalConfig.screen);

  // Use theme throughout the app
  const mainBox = blessed.box({
    parent: screen,
    style: {
      bg: finalConfig.theme.background,
      fg: finalConfig.theme.primary,
    },
  });

  return { screen, mainBox, config: finalConfig };
}
```

--------------------------------

### Create Form with Input Fields in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-examples.md

Illustrates creating a form with textbox elements for name and email, and a submit button. Handles form submission to display entered data.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,
});

const form = blessed.form({
  parent: screen,
  top: 'center',
  left: 'center',
  width: 30,
  height: 12,
  bg: 'green',
  keys: true,
  vi: true,
});

const nameInput = blessed.textbox({
  parent: form,
  name: 'name',
  top: 1,
  height: 3,
  inputOnFocus: true,
  content: 'Name:',
  border: {
    type: 'line',
  },
  focus: {
    fg: 'blue',
  },
});

const emailInput = blessed.textbox({
  parent: form,
  name: 'email',
  top: 5,
  height: 3,
  inputOnFocus: true,
  content: 'Email:',
  border: {
    type: 'line',
  },
  focus: {
    fg: 'blue',
  },
});

const submit = blessed.button({
  parent: form,
  name: 'submit',
  content: 'Submit',
  top: 9,
  shrink: true,
  padding: {
    left: 1,
    right: 1,
  },
  style: {
    bg: 'blue',
    focus: {
      bg: 'red',
    },
  },
});

// Handle form submission
submit.on('press', () => {
  form.submit();
});

form.on('submit', (data: { [key: string]: any }) => {
  const msg = blessed.message({
    parent: screen,
    top: 'center',
    left: 'center',
    height: 'shrink',
    width: 'half',
    align: 'center',
    valign: 'middle',
    border: 'line',
  });

  msg.display(`Form Data:\nName: ${data.name}\nEmail: ${data.email}`, 0);
});

screen.key(['escape', 'q', 'C-c'], () => {
  process.exit(0);
});

nameInput.focus();
screen.render();

```

--------------------------------

### Create a Scrollable Selectable List with Blessed

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Use blessed.list to render a list of items with keyboard and mouse navigation. Configure keys, vi-style navigation, mouse support, and custom scrollbar and item styles. Event listeners for 'select' and 'action' are demonstrated.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const list = blessed.list({
  parent: screen,
  top: 2,
  left: 2,
  width: '40%',
  height: '80%',
  label: ' File List ',
  border: 'line',
  keys: true,
  vi: true,       // j/k navigation
  mouse: true,
  items: ['README.md', 'package.json', 'tsconfig.json', 'src/index.ts', 'test/app.test.ts'],
  scrollbar: {
    ch: ' ',
    track: { bg: 'cyan' },
    style: { inverse: true },
  },
  style: {
    item: { hover: { bg: 'blue' } },
    selected: { bg: 'blue', bold: true },
  },
});

// Programmatic item management
list.addItem('lib/helpers.ts');
list.setItem(0, 'README.md (modified)');

list.on('select', (item, index) => {
  infoBox.setContent(`Selected [${index}]: ${item.content}`);
  screen.render();
});

list.on('action', (item, index) => {
  // fired on Enter
});

// Select item by index
list.select(2);

const infoBox = blessed.box({
  parent: screen,
  right: 2,
  top: 2,
  width: '55%',
  height: 3,
  border: 'line',
  content: 'Select a file above',
});

screen.key(['q', 'C-c'], () => process.exit(0));
list.focus();
screen.render();
// Expected: navigable file list; selecting an item updates the info box
```

--------------------------------

### blessed.progressbar(options)

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Displays a horizontal or vertical fill indicator with programmatic update methods. Useful for showing download progress or task completion.

```APIDOC
## blessed.progressbar(options) — Progress bar widget

ProgressBar displays a horizontal or vertical fill indicator with programmatic update methods.

### Options
- `parent`: The parent element for this widget.
- `top`, `left`, `width`, `height`: Positioning and sizing options.
- `border`: Defines the border style (e.g., 'line').
- `label`: A label for the progress bar.
- `orientation`: 'horizontal' or 'vertical'.
- `pch`: The character used to fill the bar (e.g., '█').
- `filled`: Initial fill percentage (0–100).
- `style`: An object for styling the progress bar (fg, bg, border, bar).

### Methods
- `setProgress(percentage)`: Sets the progress bar's fill percentage.

### Example
```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const bar = blessed.progressbar({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '60%',
  height: 3,
  border: 'line',
  label: ' Download Progress ',
  orientation: 'horizontal',
  pch: '█',              // Fill character
  filled: 0,             // Initial fill percentage 0–100
  style: {
    fg: 'white',
    bg: 'black',
    border: { fg: 'cyan' },
    bar: { bg: 'green', fg: 'white' },
  },
});

// Simulate a download progressing from 0 to 100%
let pct = 0;
const tick = setInterval(() => {
  pct += 5;
  bar.setProgress(pct);
  screen.render();
  if (pct >= 100) {
    clearInterval(tick);
  }
}, 200);

screen.render();
```
```

--------------------------------

### blessed.list(options)

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Renders a scrollable, selectable list with keyboard, mouse, and fuzzy search navigation. Supports programmatic item management and selection events.

```APIDOC
## blessed.list(options) — Scrollable selectable list

List renders a set of items with keyboard and mouse navigation, vim-style keys, and fuzzy search.

### Description
Creates a scrollable and selectable list widget.

### Options
- `parent`: The parent element.
- `top`, `left`, `width`, `height`: Layout properties.
- `label`: The label for the list.
- `border`: The border style.
- `keys`: Enable keyboard navigation.
- `vi`: Enable vim-style keys (j/k navigation).
- `mouse`: Enable mouse interaction.
- `items`: An array of strings for the list items.
- `scrollbar`: Configuration for the scrollbar.
- `style`: Styling options for items and selection.

### Events
- `select`: Fired when an item is selected.
- `action`: Fired on 'Enter' key press for a selected item.

### Methods
- `addItem(item)`: Adds an item to the list.
- `setItem(index, item)`: Sets an item at a specific index.
- `select(index)`: Selects an item by its index.

### Example
```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const list = blessed.list({
  parent: screen,
  top: 2,
  left: 2,
  width: '40%',
  height: '80%',
  label: ' File List ',
  border: 'line',
  keys: true,
  vi: true,       // j/k navigation
  mouse: true,
  items: ['README.md', 'package.json', 'tsconfig.json', 'src/index.ts', 'test/app.test.ts'],
  scrollbar: {
    ch: ' ',
    track: { bg: 'cyan' },
    style: { inverse: true },
  },
  style: {
    item: { hover: { bg: 'blue' } },
    selected: { bg: 'blue', bold: true },
  },
});

// Programmatic item management
list.addItem('lib/helpers.ts');
list.setItem(0, 'README.md (modified)');

list.on('select', (item, index) => {
  // ... handle selection
});

list.select(2);

screen.render();
```
```

--------------------------------

### Widget Creation with Typed Styles

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Create widgets like lists with TypeScript, taking advantage of typed style properties for better code completion and error prevention.

```typescript
// Before (JavaScript)
const list = blessed.list({
  items: ['item1', 'item2'],
  selected: 0,
});

// After (TypeScript)
const list = blessed.list({
  items: ['item1', 'item2'],
  selected: 0,
  style: {
    selected: {
      bg: 'blue', // TypeScript knows valid style properties
    },
  },
});
```

--------------------------------

### Initialize and Control Terminal Program

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Use `blessed.program` for direct, low-level terminal access. This includes enabling mouse events, hiding the cursor, clearing the screen, positioning text, and handling keypresses and mouse events. Remember to restore the terminal state upon exit.

```typescript
import { program as createProgram } from 'neo-neo-blessed';

const program = createProgram();

// Enter alternate screen buffer and set up environment
program.alternateBuffer();
program.enableMouse();
program.hideCursor();
program.clear();

// Position cursor and write styled text
program.move(1, 1);
program.write('Hello world', 'blue fg');
program.setx(Math.floor(program.cols / 2) - 4);
program.down(5);
program.bg('black');
program.write('Centered text');
program.bg('!black');

// Handle key events
program.on('keypress', (ch, key) => {
  if (key.name === 'q') {
    program.clear();
    program.disableMouse();
    program.showCursor();
    program.normalBuffer();
    process.exit(0);
  }
});

// Handle mouse events
program.on('mouse', (data) => {
  program.move(1, program.rows);
  program.eraseInLine('right');
  if (data.action === 'mousedown') {
    program.write(`Click at ${data.x},${data.y} (${data.button})`);
  }
});

// Query cursor position
program.getCursor((err, data) => {
  if (!err) {
    program.move(1, 3);
    program.write(`Cursor at: ${data.x}, ${data.y}`);
  }
});

// Set terminal title
program.setTitle('My Program');

// Window manipulation
program.getWindowSize((err, data) => {
  if (!err) {
    program.move(1, 4);
    program.write(`Terminal: ${data.width}×${data.height} chars`);
  }
});

// Expected: direct cursor-positioned rendering with mouse and keyboard event handling

```

--------------------------------

### blessed.program(options) — Low-level terminal program

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Provides direct, low-level access to the terminal for cursor control, color attributes, mouse events, and raw ANSI/VT escape sequences. Use this when widgets are too heavyweight for the task.

```APIDOC
## blessed.program(options) — Low-level terminal program

### Description
Program provides direct, low-level access to the terminal: cursor control, colour attributes, mouse events, and raw ANSI/VT escape sequences. Use it when widgets are too heavyweight for the task.

### Usage
```typescript
import { program as createProgram } from 'neo-neo-blessed';

const program = createProgram();

// Enter alternate screen buffer and set up environment
program.alternateBuffer();
program.enableMouse();
program.hideCursor();
program.clear();

// Position cursor and write styled text
program.move(1, 1);
program.write('Hello world', 'blue fg');
program.setx(Math.floor(program.cols / 2) - 4);
program.down(5);
program.bg('black');
program.write('Centered text');
program.bg('!black');

// Handle key events
program.on('keypress', (ch, key) => {
  if (key.name === 'q') {
    program.clear();
    program.disableMouse();
    program.showCursor();
    program.normalBuffer();
    process.exit(0);
  }
});

// Handle mouse events
program.on('mouse', (data) => {
  program.move(1, program.rows);
  program.eraseInLine('right');
  if (data.action === 'mousedown') {
    program.write(`Click at ${data.x},${data.y} (${data.button})`);
  }
});

// Query cursor position
program.getCursor((err, data) => {
  if (!err) {
    program.move(1, 3);
    program.write(`Cursor at: ${data.x}, ${data.y}`);
  }
});

// Set terminal title
program.setTitle('My Program');

// Window manipulation
program.getWindowSize((err, data) => {
  if (!err) {
    program.move(1, 4);
    program.write(`Terminal: ${data.width}×${data.height} chars`);
  }
});
```
```

--------------------------------

### Create a Form with Textboxes and Buttons using Blessed

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Use blessed.form to group input elements and handle submission. Combine with blessed.textbox for input fields and blessed.button for actions. Forms manage Tab-key traversal and collect submission data.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const form = blessed.form({
  parent: screen,
  top: 'center',
  left: 'center',
  width: 40,
  height: 14,
  border: 'line',
  label: ' User Details ',
  keys: true,
  vi: true,
  style: { bg: 'black' },
});

const nameInput = blessed.textbox({
  parent: form,
  name: 'username',
  top: 1,
  left: 1,
  width: 36,
  height: 3,
  inputOnFocus: true,
  border: { type: 'line' },
  style: { fg: 'white', focus: { border: { fg: 'cyan' } } },
  placeholder: 'Enter username...',
});

const emailInput = blessed.textbox({
  parent: form,
  name: 'email',
  top: 5,
  left: 1,
  width: 36,
  height: 3,
  inputOnFocus: true,
  border: { type: 'line' },
  style: { fg: 'white', focus: { border: { fg: 'cyan' } } },
});

const submitBtn = blessed.button({
  parent: form,
  name: 'submit',
  content: ' Submit ',
  top: 9,
  left: 1,
  shrink: true,
  padding: { left: 1, right: 1 },
  mouse: true,
  keys: true,
  style: { bg: 'blue', focus: { bg: 'green' }, hover: { bg: 'green' } },
});

const cancelBtn = blessed.button({
  parent: form,
  name: 'cancel',
  content: ' Cancel ',
  top: 9,
  left: 14,
  shrink: true,
  padding: { left: 1, right: 1 },
  mouse: true,
  keys: true,
  style: { bg: 'red', focus: { bg: 'magenta' }, hover: { bg: 'magenta' } },
});

submitBtn.on('press', () => form.submit());
cancelBtn.on('press', () => form.reset());

form.on('submit', (data: Record<string, string>) => {
  // data = { username: '...', email: '...' }
  form.setContent(`Submitted:\n  user: ${data.username}\n  email: ${data.email}`);
  screen.render();
});

form.on('reset', () => {
  form.setContent('Form cancelled.');
  screen.render();
});

screen.key(['q', 'C-c'], () => process.exit(0));
nameInput.focus();
screen.render();
// Expected: form with two text fields and Submit/Cancel buttons; Tab moves focus between fields
```

--------------------------------

### blessed.terminal(options)

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Embeds a full PTY-backed terminal emulator as a Blessed widget, enabling terminal multiplexing within a TUI application.

```APIDOC
## blessed.terminal(options) — Embedded terminal emulator

Terminal embeds a full PTY-backed terminal emulator (xterm.js headless + node-pty) as a blessed widget, enabling terminal multiplexing within a TUI application.

### Options
- `parent`: The parent element for this widget.
- `shell`: The shell to run in the terminal (e.g., `process.env.SHELL`).
- `args`: Arguments to pass to the shell.
- `cursor`: The type of cursor ('line', 'block', etc.).
- `cursorBlink`: Whether the cursor should blink.
- `screenKeys`: If true, enables screen keys.
- `left`, `top`, `width`, `height`: Positioning and sizing options.
- `border`: Defines the border style (e.g., 'line').
- `style`: An object for styling the terminal (fg, bg, focus).

### Events
- `title`: Emitted when the terminal's title changes.
- `click`: Emitted on click.

### Example
```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,
  fullUnicode: true,
  dockBorders: true,
  ignoreDockContrast: true,
});

function makeTermPanel(left, top, width, height) {
  return blessed.terminal({
    parent: screen,
    shell: process.env.SHELL || 'bash',
    args: [],
    cursor: 'line',
    cursorBlink: true,
    screenKeys: false,
    left, top, width, height,
    border: 'line',
    style: {
      fg: 'default',
      bg: 'default',
      focus: { border: { fg: 'green' } },
    },
  });
}

const panes = [
  makeTermPanel(0,      0,       '50%',    '50%'),
  makeTermPanel('50%-1',0,       '50%+1',  '50%'),
  makeTermPanel(0,      '50%-1', '50%',    '50%+1'),
  makeTermPanel('50%-1','50%-1', '50%+1',  '50%+1'),
];

panes.forEach(pane => {
  pane.on('title', (title) => {
    screen.title = title;
    screen.render();
  });
  pane.on('click', pane.focus.bind(pane));
});

screen.program.key('S-tab', () => { screen.focusNext(); screen.render(); });

screen.key('C-q', () => {
  panes.forEach(p => p.kill());
  screen.destroy();
  process.exit(0);
});

panes[0].focus();
screen.render();
```
```

--------------------------------

### Create and Update a Blessed Table Widget

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Renders a 2D array of strings as a fixed-layout grid with borders and styled headers. Use this for displaying tabular data. The data can be updated dynamically after initial rendering.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const table = blessed.table({
  parent: screen,
  top: 1,
  left: 2,
  width: '95%',
  height: '90%',
  border: 'line',
  label: ' Server Status ',
  align: 'center',
  pad: 1,
  noCellBorders: false,
  fillCellBorders: true,
  style: {
    border: { fg: 'cyan' },
    header: { fg: 'white', bg: 'blue', bold: true },
    cell: { fg: 'white', selected: { bg: 'blue' } },
  },
  data: [
    // First row is treated as header
    ['Host', 'Port', 'Status', 'Latency', 'Uptime'],
    ['api.example.com',   '443', '{green-fg}UP{/green-fg}',   '12ms',  '99.9%'],
    ['db.internal',       '5432', '{green-fg}UP{/green-fg}',  '2ms',   '100%'],
    ['cache.internal',    '6379', '{yellow-fg}WARN{/yellow-fg}', '45ms', '98.1%'],
    ['worker.example.com','8080', '{red-fg}DOWN{/red-fg}',    'n/a',   '0%'],
  ],
});

// Update table data dynamically
setTimeout(() => {
  table.setData([
    ['Host', 'Port', 'Status', 'Latency', 'Uptime'],
    ['api.example.com', '443', '{green-fg}UP{/green-fg}', '9ms', '99.9%'],
    ['db.internal',     '5432', '{green-fg}UP{/green-fg}', '1ms', '100%'],
  ]);
  screen.render();
}, 3000);

screen.key(['q', 'C-c'], () => process.exit(0));
screen.render();
// Expected: bordered table with bold header row and colored status cells
```

--------------------------------

### Create an Auto-Scrolling Log Panel with Blessed

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Use blessed.log for a scrollable text widget optimized for appending lines. It auto-scrolls to the bottom on new content unless manually scrolled. Configure scrollback limit and scroll behavior.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const logBox = blessed.log({
  parent: screen,
  top: 0,
  left: 0,
  width: '100%',
  height: '100%-3',
  label: ' Application Log ',
  border: 'line',
  scrollback: 500,       // Maximum lines to retain
  scrollOnInput: true,   // Scroll to bottom when new content arrives
  keys: true,
  mouse: true,
  style: {
    fg: 'white',
    bg: 'black',
    border: { fg: 'green' },
  },
});

const statusBar = blessed.box({
  parent: screen,
  bottom: 0,
  left: 0,
  width: '100%',
  height: 3,
  border: 'line',
  content: ' Press q to quit',
  style: { fg: 'yellow' },
});

// Append log entries
let count = 0;
const interval = setInterval(() => {
  logBox.log(`[${new Date().toISOString()}] Event #${++count} occurred`);
  screen.render();
  if (count >= 10) clearInterval(interval);
}, 500);

// Log also accepts formatted output
logBox.log('Server started on port %d', 3000);
logBox.add('{green-fg}[OK]{/green-fg} Connection accepted');

screen.key(['q', 'C-c'], () => { clearInterval(interval); process.exit(0); });
screen.render();
// Expected: scrolling log that auto-advances as new lines are appended
```

--------------------------------

### Type-Safe Configuration for Blessed App

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-examples.md

Define application configuration using TypeScript interfaces for improved type safety. This ensures that screen and theme options are correctly structured.

```typescript
import blessed from 'neo-neo-blessed';

// Define your configuration with types
interface AppConfig {
  screen: blessed.ScreenOptions;
  theme: {
    primary: string;
    secondary: string;
    accent: string;
  };
}

const config: AppConfig = {
  screen: {
    smartCSR: true,
    title: 'TypeScript Blessed App',
    fullUnicode: true,
    dockBorders: true,
  },
  theme: {
    primary: 'blue',
    secondary: 'green',
    accent: 'yellow',
  },
};

const screen = blessed.screen(config.screen);

const mainBox = blessed.box({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '80%',
  height: '80%',
  border: 'line',
  style: {
    fg: 'white',
    bg: config.theme.primary,
    border: {
      fg: config.theme.accent,
    },
  },
});

screen.render();
```

--------------------------------

### blessed.box(options) — General-purpose container widget

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Box is the foundational widget. It renders bordered, padded, scrollable content and supports rich markup tags (`{bold}`, `{red-fg}`, `{center}`, etc.) when `tags: true`.

```APIDOC
## blessed.box(options) — General-purpose container widget

### Description
Box is the foundational widget. It renders bordered, padded, scrollable content and supports rich markup tags (`{bold}`, `{red-fg}`, `{center}`, etc.) when `tags: true`.

### Method
`blessed.box(options)`

### Parameters
#### Options
- **parent** (object) - Optional - The parent widget
- **top** (string|number) - Optional - The top position (absolute or percentage)
- **left** (string|number) - Optional - The left position (absolute or percentage)
- **width** (string|number) - Optional - The width (absolute or percentage)
- **height** (string|number) - Optional - The height (absolute or percentage)
- **content** (string) - Optional - The content of the box
- **tags** (boolean) - Optional - Enable rich markup tags
- **border** (object) - Optional - Border configuration (e.g., `{ type: 'line' }`)
- **scrollable** (boolean) - Optional - Enable scrolling
- **alwaysScroll** (boolean) - Optional - Always show scrollbar
- **scrollbar** (object) - Optional - Scrollbar configuration (e.g., `{ ch: '│', style: { fg: 'blue' } }`)
- **style** (object) - Optional - Styling options (e.g., `fg`, `bg`, `border`, `hover`, `focus`)
- **mouse** (boolean) - Optional - Enable mouse interaction
- **keys** (boolean) - Optional - Enable keyboard interaction

### Request Example
```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const box = blessed.box({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '60%',
  height: '50%',
  content: 'Hello {bold}world{/bold}! Press {yellow-fg}Enter{/yellow-fg} to update.',
  tags: true,
  border: { type: 'line' },
  scrollable: true,
  alwaysScroll: true,
  scrollbar: { ch: '│', style: { fg: 'blue' } },
  style: {
    fg: 'white',
    bg: 'navy',
    border: { fg: '#888888' },
    hover: { bg: 'blue' },
    focus: { border: { fg: 'cyan' } },
  },
  mouse: true,
  keys: true,
});

box.key('enter', () => {
  box.setContent('{center}{green-fg}Content updated!{/green-fg}{/center}');
  screen.render();
});

box.on('click', (data) => {
  box.setLabel(` clicked at ${data.x},${data.y} `);
  screen.render();
});

screen.key(['q', 'C-c'], () => process.exit(0));
box.focus();
screen.render();
```

### Response
- **box** (object) - The created box widget
```

--------------------------------

### Type-Safe Event Handling in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-examples.md

Shows how to implement type-safe event handlers for 'click' and 'keypress' events on a clickable box element, updating its content based on user interaction.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({
  smartCSR: true,
});

const box = blessed.box({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '50%',
  height: '50%',
  content: 'Click me!',
  clickable: true,
  mouse: true,
  border: 'line',
});

// Type-safe event handlers
box.on('click', data => {
  box.setContent(`Clicked at ${data.x}, ${data.y}`);
  screen.render();
});

box.on('keypress', (ch: string, key: any) => {
  if (key.name === 'enter') {
    box.setContent('Enter pressed!');
    screen.render();
  }
});

screen.key(['escape', 'q', 'C-c'], () => {
  process.exit(0);
});

box.focus();
screen.render();

```

--------------------------------

### Temporary Workaround for Missing Type Definitions in TypeScript

Source: https://github.com/mrlesk/neo-neo-blessed/blob/main/docs/typescript-migration.md

Shows a temporary workaround using 'any' to access undocumented methods when type definitions are missing. Includes a TODO comment to remind developers to add proper type definitions later.

```typescript
// Temporary workaround for missing types
const customMethod = (widget as any).someUndocumentedMethod;
// TODO: Add proper type definition for someUndocumentedMethod
```

--------------------------------

### Create and Update a Blessed ProgressBar Widget

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Displays a horizontal or vertical fill indicator with programmatic update methods. Use this to show the progress of a task, such as a download. The progress can be updated in real-time.

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const bar = blessed.progressbar({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '60%',
  height: 3,
  border: 'line',
  label: ' Download Progress ',
  orientation: 'horizontal',
  pch: '█',              // Fill character
  filled: 0,             // Initial fill percentage 0–100
  style: {
    fg: 'white',
    bg: 'black',
    border: { fg: 'cyan' },
    bar: { bg: 'green', fg: 'white' },
  },
});

const statusText = blessed.text({
  parent: screen,
  top: '50%+3',
  left: 'center',
  content: '0%',
  style: { fg: 'yellow' },
});

// Simulate a download progressing from 0 to 100%
let pct = 0;
const tick = setInterval(() => {
  pct += 5;
  bar.setProgress(pct);
  statusText.setContent(`${pct}% complete`);
  screen.render();
  if (pct >= 100) {
    clearInterval(tick);
    statusText.setContent('Download complete!');
    screen.render();
  }
}, 200);

screen.key(['q', 'C-c'], () => { clearInterval(tick); process.exit(0); });
screen.render();
// Expected: progress bar advances from 0% to 100% with percentage label
```

--------------------------------

### Create Blessed Box Widget

Source: https://context7.com/mrlesk/neo-neo-blessed/llms.txt

Creates a general-purpose container widget with borders, padding, and scrollable content. Supports rich markup tags and custom styling for different states (hover, focus).

```typescript
import blessed from 'neo-neo-blessed';

const screen = blessed.screen({ smartCSR: true });

const box = blessed.box({
  parent: screen,
  top: 'center',
  left: 'center',
  width: '60%',
  height: '50%',
  content: 'Hello {bold}world{/bold}! Press {yellow-fg}Enter{/yellow-fg} to update.',
  tags: true,
  border: { type: 'line' },
  scrollable: true,
  alwaysScroll: true,
  scrollbar: { ch: '│', style: { fg: 'blue' } },
  style: {
    fg: 'white',
    bg: 'navy',
    border: { fg: '#888888' },
    hover: { bg: 'blue' },
    focus: { border: { fg: 'cyan' } },
  },
  mouse: true,
  keys: true,
});

box.key('enter', () => {
  box.setContent('{center}{green-fg}Content updated!{/green-fg}{/center}');
  screen.render();
});

box.on('click', (data) => {
  box.setLabel(` clicked at ${data.x},${data.y} `);
  screen.render();
});

screen.key(['q', 'C-c'], () => process.exit(0));
box.focus();
screen.render();
// Expected: centered bordered box with scrollbar; Enter updates text; click updates label
```