tidepool 1.0.6 → 2.1.0

package/README.md

@@ -1,71 +1,231 @@
-# 🌊 Tidepool
-A TUI library written in TypeScript.
-
-### What tidepool offers 🔥
-- Modular API 🔧
-- Lightweight 🪶
-- Type-safe ⌨️
-- Easy to integrate with other technologies 💡
-
-API Example using readline for movement:
-```ts
-import { TideScreen, Box, Text, Line } from "tidepool";
-import readline from 'readline';
-
-// Create new tidepool screen instance
-const tui = new TideScreen(process.stdout.columns-1, process.stdout.rows-1);
-
-// Create text to be displayed inside of boxes
-const text = new Text(0, 0, "Welcome to tidepool!", 'cyan', 1);
-const text2 = new Text(0, 1, "This is a tidepool example with readline.", 'green', 1);
-
-// search for the middle of the screen and define first box
-const x = Math.floor(process.stdout.columns / 2)
-const y = Math.floor(process.stdout.rows / 2)
-const box = new Box(x, y, 25, 3, 'magenta', 'Tidepool Box', 1);
-
-// Define the box that will be under the other box
-const underBox = new Box(x-5, y-5, 25, 10, 'red', 'Under the other one', 2);
-
-// Define a cosmetic line
-const line = new Line(0, 0, underBox.width-2, 'yellow', 1);
-
-// Add content and components to the screen
-box.addContent(text);
-underBox.addContent(text2);
-underBox.addContent(line);
-
-tui.addComponent(box);
-tui.addComponent(underBox);
-
-// Render first frame
-tui.nextFrame();
-
-readline.emitKeypressEvents(process.stdin);
-process.stdin.setRawMode(true);
-
-// Listen for keypresses
-process.stdin.on('keypress', (str, key) => {
-  if (key.name === 'q' || (key.ctrl && key.name === 'c')) {
-    process.exit();
-  } else {
-    if (key.name === 'up' && box.y > 0) {
-      box.move(0, -1);
-    } else if (key.name === 'down' && box.y + box.height < tui.height) {
-      box.move(0, 1);
-    } else if (key.name === 'left' && box.x > 0) {
-      box.move(-1, 0);
-    } else if (key.name === 'right' && box.x + box.width < tui.width) {
-      box.move(1, 0);
-    }
-
-    // Render new frame after box moved.
-    tui.nextFrame();
-  }
-});
-
-```
-
-## Repository
-[GitHub Repository](https://github.com/stuncs69/tidepool)</br>
-[NPM](https://www.npmjs.com/package/tidepool)
+# 🌊 Tidepool
+A TUI library written in TypeScript.
+
+Tidepool renders to a terminal using a buffered, diffed frame loop and a small set
+of composable primitives (boxes, text, lines, buttons, input fields). It is
+intended to be lightweight, hackable, and friendly to custom components.
+
+## Contents
+- Installation
+- Quick start
+- Core concepts
+- Screen lifecycle
+- Input handling
+- Components
+- Effects
+- Custom components
+- Demos
+- Performance notes
+- Troubleshooting
+- Migration notes
+
+## Installation
+```bash
+npm install tidepool
+```
+
+## Quick start
+```ts
+import {
+  Box,
+  Line,
+  Text,
+  TideScreen,
+  setupInput,
+} from "tidepool";
+
+const screen = new TideScreen(
+  process.stdout.columns - 1,
+  process.stdout.rows - 1
+);
+
+screen.enableAutoResize();
+
+const box = new Box(2, 2, 28, 6, "reset", "magenta", "reset", "Tidepool", 1);
+const line = new Line(0, 1, 24, "yellow", 1);
+const text = new Text(0, 2, "Use arrow keys to move, q to quit.", "green", 1);
+
+box.addContent(line);
+box.addContent(text);
+screen.addComponent(box);
+screen.nextFrame();
+
+const cleanup = setupInput((_, key) => {
+  if (key.name === "q" || (key.ctrl && key.name === "c")) {
+    cleanup();
+    process.stdout.write("\x1b[?25h");
+    process.exit(0);
+  }
+  if (key.name === "up") box.move(0, -1);
+  if (key.name === "down") box.move(0, 1);
+  if (key.name === "left") box.move(-1, 0);
+  if (key.name === "right") box.move(1, 0);
+  screen.nextFrame();
+});
+```
+
+## Core concepts
+- Coordinates are 0-based. All draws are clipped to the screen bounds.
+- Components added to a `Box` are positioned relative to the box interior.
+- Higher `zIndex` renders on top. Use `TideScreen.invalidateSort()` if you change
+  zIndex after adding.
+- Rendering is double-buffered: the back buffer is composed and diffs are written
+  to stdout.
+
+## Screen lifecycle
+### `TideScreen`
+```ts
+const screen = new TideScreen(width, height, backgroundColor?);
+```
+- `nextFrame()`: render one frame.
+- `renderCycle(beforeRender?, afterRender?)`: fixed-rate loop (requires `setFPS`).
+- `setFPS(fps: number)`: set loop speed.
+- `setUpdateFunction(fn)`: inject per-frame updates.
+- `resize(width, height)`: rebuild buffers to new size.
+- `enableAutoResize(getSize?)`: remeasure on `SIGWINCH`.
+- `disableAutoResize()`: stop listening for resize.
+- `invalidateSort()`: re-sort components if zIndex changed.
+
+### Backgrounds
+`backgroundColor` supports standard color names plus `transparent` and `random`.
+If set to `transparent`, Tidepool will skip background fill for faster rendering.
+
+## Input handling
+### `setupInput`
+```ts
+const cleanup = setupInput({
+  onKey: (str, key) => {},
+  onMouse: (event) => {},
+  enableMouse: true,
+});
+```
+- Returns a cleanup function that restores terminal state.
+- Mouse handling uses xterm SGR mouse mode; not all terminals support it.
+
+### `InputManager`
+```ts
+const manager = new InputManager();
+manager.register(inputField);
+manager.register(button);
+
+const cleanup = setupInputManager(manager, process.stdin, process.stdout, () => {
+  screen.nextFrame();
+});
+```
+- `Tab` / `Shift+Tab` cycles focus.
+- Clicking a focusable also focuses it.
+
+## Components
+### `Box`
+```ts
+new Box(x, y, width, height, color?, borderColor?, backgroundColor?, title?, zIndex?);
+```
+- Renders a bordered container and manages child content.
+- Use `addContent()` to render `Text`, `Line`, or custom components inside.
+
+### `Text`
+```ts
+new Text(x, y, text, color?, zIndex?);
+```
+- Word-wraps to the container width by default.
+
+### `Line`
+```ts
+new Line(x, y, length, color?, zIndex?);
+```
+
+### `Button`
+```ts
+new Button(zIndex, x, y, width, height, text, textColor?, backgroundColor?, options?);
+```
+Options:
+- `onPress?: () => void`
+- `focusedBackgroundColor?: string`
+- `focusedTextColor?: string`
+
+### `InputField`
+```ts
+new InputField(x, y, width, height?, initialValue?, options?);
+```
+Options:
+- `zIndex?: number`
+- `textColor?: string`
+- `backgroundColor?: string`
+- `borderColor?: string`
+- `placeholder?: string`
+- `placeholderColor?: string`
+- `maxLength?: number`
+- `onChange?: (value: string) => void`
+- `onSubmit?: (value: string) => void`
+
+## Effects
+### `Shadow`
+```ts
+new Shadow(offsetX?, offsetY?, color?);
+```
+Apply to a `Box` or other `TideEffect` target:
+```ts
+box.addEffect(new Shadow(1, 1, "gray"));
+```
+
+## Custom components
+Implement `TideObject` and draw via `RenderContext`:
+```ts
+import type { RenderContext, TideObject } from "tidepool";
+import { setCell, getColorCode } from "tidepool/dist/util";
+
+class Badge implements TideObject {
+  zIndex = 10;
+  constructor(private x: number, private y: number, private text: string) {}
+  draw(ctx: RenderContext) {
+    const color = getColorCode("cyan");
+    const reset = "\x1b[0m";
+    for (let i = 0; i < this.text.length; i++) {
+      setCell(
+        ctx.buffer,
+        ctx.origin.x + this.x + i,
+        ctx.origin.y + this.y,
+        `${color}${this.text[i]}${reset}`,
+        ctx.clip,
+        ctx.dirtyRows
+      );
+    }
+  }
+}
+```
+
+## Demos
+```bash
+npm run demo
+npm run demo:stack
+npm run demo:form
+npm run demo:chat
+```
+
+Run with Bun:
+```bash
+bun demo/demo.ts
+bun demo/stacking.ts
+bun demo/form.ts
+bun demo/chat.ts
+```
+
+## Performance notes
+- Use `transparent` background for faster renders.
+- Avoid per-frame resorting by setting `zIndex` before adding components.
+- For heavy scenes, render only on state changes rather than a fixed FPS loop.
+
+## Troubleshooting
+- If input feels unresponsive, ensure `setupInput` is called and you are calling
+  `nextFrame()` after handling keys.
+- If mouse clicks do not work, your terminal may not support SGR mouse mode.
+- If the cursor disappears, make sure you clean up on exit and restore it with
+  `\x1b[?25h`.
+
+## Migration notes (v1.0.6 -> current)
+- `draw(...)` now receives a `RenderContext` instead of buffer + offsets.
+- Component draws are clipped by a render context; negative coordinates are safe.
+
+## Repository
+[GitHub Repository](https://github.com/stuncs69/tidepool)  
+[NPM](https://www.npmjs.com/package/tidepool)

package/dist/effects/shadow.d.ts

@@ -0,0 +1,9 @@
+import type { RenderContext, TideEffect, TideObject } from "../interfaces";
+export declare class Shadow implements TideEffect {
+    private offset;
+    private color;
+    constructor(offsetX?: number, offsetY?: number, color?: string);
+    apply(obj: TideObject, ctx: RenderContext): void;
+    private isBoxLike;
+}
+//# sourceMappingURL=shadow.d.ts.map

package/dist/effects/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../src/effects/shadow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1E,qBAAa,MAAO,YAAW,UAAU;IACvC,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,KAAK,CAAQ;gBAET,OAAO,SAAI,EAAE,OAAO,SAAI,EAAE,KAAK,SAAS;IAKpD,KAAK,CAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa;IA+BzC,OAAO,CAAC,SAAS;CAUlB"}

package/dist/effects/shadow.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Shadow = void 0;
+const util_1 = require("../util");
+class Shadow {
+    constructor(offsetX = 1, offsetY = 1, color = "gray") {
+        this.offset = { x: offsetX, y: offsetY };
+        this.color = color;
+    }
+    apply(obj, ctx) {
+        if (this.isBoxLike(obj)) {
+            const colorCode = (0, util_1.getColorCode)(this.color);
+            const originX = ctx.origin.x + obj.x;
+            const originY = ctx.origin.y + obj.y;
+            const maxY = Math.min(originY + obj.height + this.offset.y, ctx.buffer.length);
+            const maxX = Math.min(originX + obj.width + this.offset.x, ctx.buffer[0].length);
+            for (let i = originY + this.offset.y; i < maxY; i++) {
+                for (let j = originX + this.offset.x; j < maxX; j++) {
+                    if (ctx.buffer[i][j] === " ") {
+                        (0, util_1.setCell)(ctx.buffer, j, i, `${colorCode}█\x1b[0m`, ctx.clip, ctx.dirtyRows);
+                    }
+                }
+            }
+        }
+    }
+    isBoxLike(obj) {
+        return (typeof obj.x === "number" &&
+            typeof obj.y === "number" &&
+            typeof obj.width === "number" &&
+            typeof obj.height === "number");
+    }
+}
+exports.Shadow = Shadow;

package/dist/index.d.ts

@@ -2,5 +2,9 @@ import { Box } from "./objects/box";
 import { Line } from "./objects/line";
 import { Text } from "./objects/text";
 import { TideScreen } from "./screen";
-export { Box, Text, Line, TideScreen };
+import { Shadow } from "./effects/shadow";
+import { Button } from "./objects/button";
+import { InputField } from "./objects/input";
+import { InputManager, setupInput, setupInputManager } from "./input";
+export { Box, Text, Line, TideScreen, Shadow, Button, InputField, InputManager, setupInput, setupInputManager, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEtE,OAAO,EACL,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,MAAM,EACN,MAAM,EACN,UAAU,EACV,YAAY,EACZ,UAAU,EACV,iBAAiB,GAClB,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TideScreen = exports.Line = exports.Text = exports.Box = void 0;
+exports.setupInputManager = exports.setupInput = exports.InputManager = exports.InputField = exports.Button = exports.Shadow = exports.TideScreen = exports.Line = exports.Text = exports.Box = void 0;
 const box_1 = require("./objects/box");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return box_1.Box; } });
 const line_1 = require("./objects/line");
@@ -9,3 +9,13 @@ const text_1 = require("./objects/text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.Text; } });
 const screen_1 = require("./screen");
 Object.defineProperty(exports, "TideScreen", { enumerable: true, get: function () { return screen_1.TideScreen; } });
+const shadow_1 = require("./effects/shadow");
+Object.defineProperty(exports, "Shadow", { enumerable: true, get: function () { return shadow_1.Shadow; } });
+const button_1 = require("./objects/button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+const input_1 = require("./objects/input");
+Object.defineProperty(exports, "InputField", { enumerable: true, get: function () { return input_1.InputField; } });
+const input_2 = require("./input");
+Object.defineProperty(exports, "InputManager", { enumerable: true, get: function () { return input_2.InputManager; } });
+Object.defineProperty(exports, "setupInput", { enumerable: true, get: function () { return input_2.setupInput; } });
+Object.defineProperty(exports, "setupInputManager", { enumerable: true, get: function () { return input_2.setupInputManager; } });

package/dist/input.d.ts

@@ -0,0 +1,33 @@
+import type { Focusable, KeyInfo } from "./interfaces";
+export type KeypressHandler = (str: string, key: KeyInfo) => void;
+export type MouseHandler = (event: MouseEvent) => void;
+export interface MouseEvent {
+    x: number;
+    y: number;
+    button: number;
+    type: "down" | "up";
+    ctrl: boolean;
+    meta: boolean;
+    shift: boolean;
+}
+export interface InputHandlers {
+    onKey?: KeypressHandler;
+    onMouse?: MouseHandler;
+    enableMouse?: boolean;
+}
+export declare function setupInput(handlerOrOptions: KeypressHandler | InputHandlers, input?: NodeJS.ReadStream, output?: NodeJS.WriteStream): () => void;
+export declare class InputManager {
+    private focusables;
+    private focusedIndex;
+    register(focusable: Focusable): void;
+    unregister(focusable: Focusable): void;
+    focusNext(): void;
+    focusPrevious(): void;
+    handleKey(input: string, key: KeyInfo): boolean;
+    handleMouse(event: MouseEvent): boolean;
+    private focus;
+    private sortFocusables;
+    private findTopmostAt;
+}
+export declare function setupInputManager(manager: InputManager, input?: NodeJS.ReadStream, output?: NodeJS.WriteStream, afterInput?: () => void): () => void;
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAEvD,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAoCD,wBAAgB,UAAU,CACxB,gBAAgB,EAAE,eAAe,GAAG,aAAa,EACjD,KAAK,GAAE,MAAM,CAAC,UAA0B,EACxC,MAAM,GAAE,MAAM,CAAC,WAA4B,cA+C5C;AAED,qBAAa,YAAY;IACvB,OAAO,CAAC,UAAU,CAAmB;IACrC,OAAO,CAAC,YAAY,CAAM;IAE1B,QAAQ,CAAC,SAAS,EAAE,SAAS;IAQ7B,UAAU,CAAC,SAAS,EAAE,SAAS;IAe/B,SAAS;IAQT,aAAa;IAUb,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO;IAerC,WAAW,CAAC,KAAK,EAAE,UAAU;IAe7B,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;CAQtB;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,YAAY,EACrB,KAAK,GAAE,MAAM,CAAC,UAA0B,EACxC,MAAM,GAAE,MAAM,CAAC,WAA4B,EAC3C,UAAU,CAAC,EAAE,MAAM,IAAI,cAoBxB"}

package/dist/input.js

@@ -0,0 +1,191 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputManager = void 0;
+exports.setupInput = setupInput;
+exports.setupInputManager = setupInputManager;
+const readline_1 = __importDefault(require("readline"));
+function enableMouseReporting(output) {
+    output.write("\x1b[?1000h");
+    output.write("\x1b[?1006h");
+}
+function disableMouseReporting(output) {
+    output.write("\x1b[?1000l");
+    output.write("\x1b[?1006l");
+}
+function parseMouseEvent(data) {
+    if (!data.startsWith("\x1b[<")) {
+        return null;
+    }
+    const match = data.match(/^\x1b\[<(\d+);(\d+);(\d+)([mM])$/);
+    if (!match) {
+        return null;
+    }
+    const code = Number(match[1]);
+    const x = Number(match[2]);
+    const y = Number(match[3]);
+    const isDown = match[4] === "M";
+    const button = code & 3;
+    return {
+        x: x - 1,
+        y: y - 1,
+        button,
+        type: isDown ? "down" : "up",
+        shift: Boolean(code & 4),
+        meta: Boolean(code & 8),
+        ctrl: Boolean(code & 16),
+    };
+}
+function setupInput(handlerOrOptions, input = process.stdin, output = process.stdout) {
+    var _a;
+    const options = typeof handlerOrOptions === "function"
+        ? { onKey: handlerOrOptions }
+        : handlerOrOptions;
+    const onKey = options.onKey;
+    const onMouse = options.onMouse;
+    const enableMouse = (_a = options.enableMouse) !== null && _a !== void 0 ? _a : Boolean(onMouse);
+    readline_1.default.emitKeypressEvents(input);
+    if (input.isTTY) {
+        input.setRawMode(true);
+    }
+    input.resume();
+    const keyHandler = (str, key) => {
+        if (onKey) {
+            onKey(str !== null && str !== void 0 ? str : "", key);
+        }
+    };
+    input.on("keypress", keyHandler);
+    let dataHandler = null;
+    if (enableMouse && onMouse) {
+        enableMouseReporting(output);
+        dataHandler = (data) => {
+            const ev = parseMouseEvent(data.toString("utf8"));
+            if (ev) {
+                onMouse(ev);
+            }
+        };
+        input.on("data", dataHandler);
+    }
+    return () => {
+        input.off("keypress", keyHandler);
+        if (dataHandler) {
+            input.off("data", dataHandler);
+            disableMouseReporting(output);
+        }
+        if (input.isTTY) {
+            input.setRawMode(false);
+        }
+        input.pause();
+    };
+}
+class InputManager {
+    constructor() {
+        this.focusables = [];
+        this.focusedIndex = -1;
+    }
+    register(focusable) {
+        this.focusables.push(focusable);
+        this.sortFocusables();
+        if (this.focusedIndex === -1) {
+            this.focus(0);
+        }
+    }
+    unregister(focusable) {
+        const index = this.focusables.indexOf(focusable);
+        if (index === -1) {
+            return;
+        }
+        if (this.focusedIndex === index) {
+            this.focusables[index].blur();
+            this.focusedIndex = -1;
+        }
+        this.focusables.splice(index, 1);
+        if (this.focusables.length > 0 && this.focusedIndex === -1) {
+            this.focus(0);
+        }
+    }
+    focusNext() {
+        if (this.focusables.length === 0) {
+            return;
+        }
+        const next = (this.focusedIndex + 1) % this.focusables.length;
+        this.focus(next);
+    }
+    focusPrevious() {
+        if (this.focusables.length === 0) {
+            return;
+        }
+        const prev = (this.focusedIndex - 1 + this.focusables.length) %
+            this.focusables.length;
+        this.focus(prev);
+    }
+    handleKey(input, key) {
+        if (key.name === "tab") {
+            if (key.shift) {
+                this.focusPrevious();
+            }
+            else {
+                this.focusNext();
+            }
+            return true;
+        }
+        if (this.focusedIndex === -1) {
+            return false;
+        }
+        return this.focusables[this.focusedIndex].handleKey(input, key);
+    }
+    handleMouse(event) {
+        if (event.type !== "down" || event.button !== 0) {
+            return false;
+        }
+        const target = this.findTopmostAt(event.x, event.y);
+        if (!target) {
+            return false;
+        }
+        const index = this.focusables.indexOf(target);
+        if (index !== -1) {
+            this.focus(index);
+        }
+        return target.handleClick(event.x, event.y);
+    }
+    focus(index) {
+        if (index < 0 || index >= this.focusables.length) {
+            return;
+        }
+        if (this.focusedIndex !== -1) {
+            this.focusables[this.focusedIndex].blur();
+        }
+        this.focusedIndex = index;
+        this.focusables[this.focusedIndex].focus();
+    }
+    sortFocusables() {
+        this.focusables.sort((a, b) => b.zIndex - a.zIndex);
+    }
+    findTopmostAt(x, y) {
+        for (const focusable of this.focusables) {
+            if (focusable.contains(x, y)) {
+                return focusable;
+            }
+        }
+        return null;
+    }
+}
+exports.InputManager = InputManager;
+function setupInputManager(manager, input = process.stdin, output = process.stdout, afterInput) {
+    return setupInput({
+        onKey: (str, key) => {
+            manager.handleKey(str, key);
+            if (afterInput) {
+                afterInput();
+            }
+        },
+        onMouse: (event) => {
+            manager.handleMouse(event);
+            if (afterInput) {
+                afterInput();
+            }
+        },
+    }, input, output);
+}

package/dist/interfaces.d.ts

@@ -1,5 +1,44 @@
+export type ColorName = "reset" | "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray" | "transparent" | "random";
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface RenderContext {
+    buffer: string[][];
+    origin: Point;
+    clip: Rect;
+    screenSize: {
+        width: number;
+        height: number;
+    };
+    dirtyRows?: Set<number>;
+}
+export interface KeyInfo {
+    name?: string;
+    sequence?: string;
+    ctrl?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+}
+export interface Focusable {
+    zIndex: number;
+    contains(x: number, y: number): boolean;
+    focus(): void;
+    blur(): void;
+    handleKey(input: string, key: KeyInfo): boolean;
+    handleClick(x: number, y: number): boolean;
+}
 export interface TideObject {
     zIndex: number;
-    draw: Function;
+    draw(ctx: RenderContext): void;
+}
+export interface TideEffect {
+    apply(target: TideObject, ctx: RenderContext): void;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/dist/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../src/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;CAClB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../src/interfaces.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,OAAO,GACP,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,GACP,MAAM,GACN,aAAa,GACb,QAAQ,CAAC;AAEb,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxC,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,IAAI,IAAI,CAAC;IACb,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAAC;IAChD,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5C;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,MAAM,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,GAAG,IAAI,CAAC;CACrD"}