tidepool 1.0.6 → 2.0.0

package/dist/objects/box.d.ts

@@ -1,17 +1,21 @@
-import { TideObject } from "../interfaces";
+import type { RenderContext, TideEffect, TideObject } from "../interfaces";
 export declare class Box implements TideObject {
     x: number;
     y: number;
     width: number;
     height: number;
     color: string;
+    borderColor: string;
+    backgroundColor: string;
     title: string;
     contents: TideObject[];
     zIndex: number;
-    constructor(x: number, y: number, width: number, height: number, color?: string, title?: string, zIndex?: number);
+    effects: TideEffect[];
+    constructor(x: number, y: number, width: number, height: number, color?: string, borderColor?: string, backgroundColor?: string, title?: string, zIndex?: number);
     addContent(content: TideObject): void;
-    clear(screen: string[][]): void;
-    draw(screen: string[][]): void;
-    move(dx: number, dy: number): void;
+    clear(ctx: RenderContext): void;
+    draw(ctx: RenderContext): void;
+    addEffect(effect: TideEffect): void;
+    move(x: number, y: number): void;
 }
 //# sourceMappingURL=box.d.ts.map

package/dist/objects/box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/objects/box.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,qBAAa,GAAI,YAAW,UAAU;IAClC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;gBAEH,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,SAAU,EAAE,KAAK,SAAK,EAAE,MAAM,SAAI;IAWxG,UAAU,CAAC,OAAO,EAAE,UAAU;IAI9B,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;IAWxB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;IAyCvB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM;CAI9B"}
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/objects/box.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAGhF,qBAAa,GAAI,YAAW,UAAU;IACpC,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,UAAU,EAAE,CAAA;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,UAAU,EAAE,CAAK;gBAGxB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,KAAK,SAAU,EACf,WAAW,SAAU,EACrB,eAAe,SAAU,EACzB,KAAK,SAAK,EACV,MAAM,SAAI;IAcZ,UAAU,CAAC,OAAO,EAAE,UAAU;IAI9B,KAAK,CAAC,GAAG,EAAE,aAAa;IAsBxB,IAAI,CAAC,GAAG,EAAE,aAAa;IAsJvB,SAAS,CAAC,MAAM,EAAE,UAAU;IAI1B,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;CAI5B"}

package/dist/objects/box.js

@@ -3,64 +3,102 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 const util_1 = require("../util");
 class Box {
-    constructor(x, y, width, height, color = 'reset', title = '', zIndex = 0) {
+    constructor(x, y, width, height, color = "reset", borderColor = "reset", backgroundColor = "reset", title = "", zIndex = 0) {
+        this.effects = [];
         this.x = x;
         this.y = y;
         this.width = width;
         this.height = height;
         this.color = color;
+        this.borderColor = borderColor;
+        this.backgroundColor = backgroundColor;
         this.title = title;
         this.contents = [];
-        this.zIndex = zIndex;
+        this.zIndex = zIndex * 10;
     }
     addContent(content) {
         this.contents.push(content);
     }
-    clear(screen) {
-        const maxY = Math.min(this.y + this.height, screen.length);
-        const maxX = Math.min(this.x + this.width, screen[0].length);
-        for (let i = this.y; i < maxY; i++) {
-            for (let j = this.x; j < maxX; j++) {
-                screen[i][j] = ' ';
+    clear(ctx) {
+        const screen = ctx.buffer;
+        const originX = ctx.origin.x + this.x;
+        const originY = ctx.origin.y + this.y;
+        const maxY = Math.min(originY + this.height, screen.length);
+        const maxX = Math.min(originX + this.width, screen[0].length);
+        const bgColorCode = (0, util_1.getColorCode)(this.backgroundColor);
+        for (let i = originY; i < maxY; i++) {
+            for (let j = originX; j < maxX; j++) {
+                (0, util_1.setCell)(screen, j, i, `${bgColorCode} \x1b[0m`, ctx.clip, ctx.dirtyRows);
             }
         }
     }
-    draw(screen) {
-        const maxY = Math.min(this.y + this.height, screen.length);
-        const maxX = Math.min(this.x + this.width, screen[0].length);
-        if (this.x >= screen[0].length || this.y >= screen.length || maxY <= this.y || maxX <= this.x) {
+    draw(ctx) {
+        const screen = ctx.buffer;
+        const originX = ctx.origin.x + this.x;
+        const originY = ctx.origin.y + this.y;
+        const maxY = Math.min(originY + this.height, screen.length);
+        const maxX = Math.min(originX + this.width, screen[0].length);
+        if (originX >= screen[0].length ||
+            originY >= screen.length ||
+            maxY <= originY ||
+            maxX <= originX) {
             return;
         }
-        this.clear(screen);
-        const colorCode = (0, util_1.getColorCode)(this.color);
-        const titleColorCode = (0, util_1.getColorCode)('magenta');
-        for (let i = this.x + 1; i < maxX - 1; i++) {
-            screen[this.y][i] = `${colorCode}─\x1b[0m`;
+        const borderColorCode = (0, util_1.getColorCode)(this.borderColor);
+        const titleColorCode = (0, util_1.getColorCode)("magenta");
+        const bgColorCode = (0, util_1.getColorCode)(this.backgroundColor);
+        const resetCode = "\x1b[0m";
+        for (let i = originX + 1; i < maxX - 1; i++) {
+            (0, util_1.setCell)(screen, i, originY, `${bgColorCode}${borderColorCode}─${resetCode}`, ctx.clip, ctx.dirtyRows);
+            (0, util_1.setCell)(screen, i, maxY - 1, `${bgColorCode}${borderColorCode}─${resetCode}`, ctx.clip, ctx.dirtyRows);
         }
-        for (let i = this.x + 1; i < maxX - 1; i++) {
-            screen[maxY - 1][i] = `${colorCode}─\x1b[0m`;
+        for (let i = originY + 1; i < maxY - 1; i++) {
+            (0, util_1.setCell)(screen, originX, i, `${bgColorCode}${borderColorCode}│${resetCode}`, ctx.clip, ctx.dirtyRows);
+            (0, util_1.setCell)(screen, maxX - 1, i, `${bgColorCode}${borderColorCode}│${resetCode}`, ctx.clip, ctx.dirtyRows);
         }
-        for (let i = this.y + 1; i < maxY - 1; i++) {
-            screen[i][this.x] = `${colorCode}│\x1b[0m`;
-            screen[i][maxX - 1] = `${colorCode}│\x1b[0m`;
+        (0, util_1.setCell)(screen, originX, originY, `${bgColorCode}${borderColorCode}┌${resetCode}`, ctx.clip, ctx.dirtyRows);
+        (0, util_1.setCell)(screen, maxX - 1, originY, `${bgColorCode}${borderColorCode}┐${resetCode}`, ctx.clip, ctx.dirtyRows);
+        (0, util_1.setCell)(screen, originX, maxY - 1, `${bgColorCode}${borderColorCode}└${resetCode}`, ctx.clip, ctx.dirtyRows);
+        (0, util_1.setCell)(screen, maxX - 1, maxY - 1, `${bgColorCode}${borderColorCode}┘${resetCode}`, ctx.clip, ctx.dirtyRows);
+        for (let i = originY + 1; i < maxY - 1; i++) {
+            for (let j = originX + 1; j < maxX - 1; j++) {
+                (0, util_1.setCell)(screen, j, i, `${bgColorCode} ${resetCode}`, ctx.clip, ctx.dirtyRows);
+            }
         }
-        screen[this.y][this.x] = `${colorCode}┌\x1b[0m`;
-        screen[this.y][maxX - 1] = `${colorCode}┐\x1b[0m`;
-        screen[maxY - 1][this.x] = `${colorCode}└\x1b[0m`;
-        screen[maxY - 1][maxX - 1] = `${colorCode}┘\x1b[0m`;
         if (this.title) {
-            const titlePosition = Math.max(this.x + 2, Math.min(maxX - 2 - this.title.length, this.x + 2));
+            const titlePosition = Math.max(originX + 2, Math.min(maxX - 2 - this.title.length, originX + 2));
             for (let i = 0; i < this.title.length && titlePosition + i < maxX; i++) {
-                screen[this.y][titlePosition + i] = `${titleColorCode}${this.title[i]}\x1b[0m`;
+                (0, util_1.setCell)(screen, titlePosition + i, originY, `${bgColorCode}${titleColorCode}${this.title[i]}${resetCode}`, ctx.clip, ctx.dirtyRows);
             }
         }
+        for (const effect of this.effects) {
+            effect.apply(this, ctx);
+        }
+        const innerRect = {
+            x: originX + 1,
+            y: originY + 1,
+            width: Math.max(0, maxX - originX - 2),
+            height: Math.max(0, maxY - originY - 2),
+        };
+        const innerClip = (0, util_1.intersectRect)(ctx.clip, innerRect);
+        if (!innerClip) {
+            return;
+        }
         for (const content of this.contents) {
-            content.draw(screen, this.x + 1, this.y + 1, maxX - this.x - 2);
+            content.draw({
+                buffer: screen,
+                origin: { x: innerRect.x, y: innerRect.y },
+                clip: innerClip,
+                screenSize: ctx.screenSize,
+            });
         }
     }
-    move(dx, dy) {
-        this.x += dx;
-        this.y += dy;
+    addEffect(effect) {
+        this.effects.push(effect);
+    }
+    move(x, y) {
+        this.x += x;
+        this.y += y;
     }
 }
 exports.Box = Box;

package/dist/objects/button.d.ts

@@ -0,0 +1,29 @@
+import type { Focusable, KeyInfo, RenderContext, TideEffect, TideObject } from "../interfaces";
+export interface ButtonOptions {
+    onPress?: () => void;
+    focusedBackgroundColor?: string;
+    focusedTextColor?: string;
+}
+export declare class Button implements TideObject, Focusable {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    text: string;
+    textColor: string;
+    backgroundColor: string;
+    zIndex: number;
+    effects: TideEffect[];
+    isFocused: boolean;
+    onPress?: () => void;
+    focusedBackgroundColor: string;
+    focusedTextColor: string;
+    constructor(zIndex: number, x: number, y: number, width: number, height: number, text: string, textColor?: string, backgroundColor?: string, options?: ButtonOptions);
+    focus(): void;
+    blur(): void;
+    contains(x: number, y: number): boolean;
+    handleClick(_x: number, _y: number): boolean;
+    handleKey(_input: string, key: KeyInfo): boolean;
+    draw(ctx: RenderContext): void;
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/objects/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/objects/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG/F,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,qBAAa,MAAO,YAAW,UAAU,EAAE,SAAS;IAClD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAM;IAC3B,SAAS,UAAS;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gBAAgB,EAAE,MAAM,CAAC;gBAGvB,MAAM,EAAE,MAAM,EACd,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,MAAM,EACZ,SAAS,SAAU,EACnB,eAAe,SAAS,EACxB,OAAO,GAAE,aAAkB;IAe7B,KAAK;IAIL,IAAI;IAIJ,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAS7B,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM;IAOlC,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO;IAUtC,IAAI,CAAC,GAAG,EAAE,aAAa;CAoDxB"}

package/dist/objects/button.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const util_1 = require("../util");
+class Button {
+    constructor(zIndex, x, y, width, height, text, textColor = "white", backgroundColor = "blue", options = {}) {
+        var _a, _b;
+        this.effects = [];
+        this.isFocused = false;
+        this.zIndex = zIndex * 10;
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.text = text;
+        this.textColor = textColor;
+        this.backgroundColor = backgroundColor;
+        this.onPress = options.onPress;
+        this.focusedBackgroundColor = (_a = options.focusedBackgroundColor) !== null && _a !== void 0 ? _a : "white";
+        this.focusedTextColor = (_b = options.focusedTextColor) !== null && _b !== void 0 ? _b : "black";
+    }
+    focus() {
+        this.isFocused = true;
+    }
+    blur() {
+        this.isFocused = false;
+    }
+    contains(x, y) {
+        return (x >= this.x &&
+            y >= this.y &&
+            x < this.x + this.width &&
+            y < this.y + this.height);
+    }
+    handleClick(_x, _y) {
+        if (this.onPress) {
+            this.onPress();
+        }
+        return true;
+    }
+    handleKey(_input, key) {
+        if (key.name === "return" || key.name === "enter" || key.name === "space") {
+            if (this.onPress) {
+                this.onPress();
+            }
+            return true;
+        }
+        return false;
+    }
+    draw(ctx) {
+        const screen = ctx.buffer;
+        const originX = ctx.origin.x + this.x;
+        const originY = ctx.origin.y + this.y;
+        const activeTextColor = this.isFocused
+            ? this.focusedTextColor
+            : this.textColor;
+        const activeBackground = this.isFocused
+            ? this.focusedBackgroundColor
+            : this.backgroundColor;
+        const textColorCode = (0, util_1.getColorCode)(activeTextColor);
+        const bgColorCode = (0, util_1.getColorCode)(activeBackground);
+        const resetCode = "\x1b[0m";
+        // Fill the button area with background-colored spaces
+        for (let i = originY; i < originY + this.height; i++) {
+            for (let j = originX; j < originX + this.width; j++) {
+                (0, util_1.setCell)(screen, j, i, `${bgColorCode} ${resetCode}`, ctx.clip, ctx.dirtyRows);
+            }
+        }
+        // Pad the text with one space on each side.
+        const paddedText = " " + this.text + " ";
+        // Calculate the starting x position for centered text.
+        // Make sure we center the padded text, not the original text.
+        const textStart = originX + Math.floor((this.width - paddedText.length) / 2);
+        const textRow = originY + Math.floor(this.height / 2);
+        // Draw the padded text onto the screen.
+        for (let i = 0; i < paddedText.length && textStart + i < this.x + this.width; i++) {
+            (0, util_1.setCell)(screen, textStart + i, textRow, `${bgColorCode}${textColorCode}${paddedText[i]}${resetCode}`, ctx.clip, ctx.dirtyRows);
+        }
+    }
+}
+exports.Button = Button;

package/dist/objects/input.d.ts

@@ -0,0 +1,38 @@
+import type { Focusable, KeyInfo, RenderContext, TideObject } from "../interfaces";
+export interface InputFieldOptions {
+    zIndex?: number;
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    placeholder?: string;
+    placeholderColor?: string;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+}
+export declare class InputField implements TideObject, Focusable {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    value: string;
+    zIndex: number;
+    isFocused: boolean;
+    cursor: number;
+    textColor: string;
+    backgroundColor: string;
+    borderColor: string;
+    placeholder: string;
+    placeholderColor: string;
+    maxLength: number;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    constructor(x: number, y: number, width: number, height?: number, initialValue?: string, options?: InputFieldOptions);
+    focus(): void;
+    blur(): void;
+    contains(x: number, y: number): boolean;
+    handleClick(_x: number, _y: number): boolean;
+    handleKey(input: string, key: KeyInfo): boolean;
+    draw(ctx: RenderContext): void;
+}
+//# sourceMappingURL=input.d.ts.map

package/dist/objects/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/objects/input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGnF,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,qBAAa,UAAW,YAAW,UAAU,EAAE,SAAS;IACtD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,UAAS;IAClB,MAAM,SAAK;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;gBAGjC,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,MAAM,SAAI,EACV,YAAY,SAAK,EACjB,OAAO,GAAE,iBAAsB;IAmBjC,KAAK;IAIL,IAAI;IAIJ,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAS7B,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM;IAIlC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO;IA+DrC,IAAI,CAAC,GAAG,EAAE,aAAa;CAwHxB"}

package/dist/objects/input.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const util_1 = require("../util");
+class InputField {
+    constructor(x, y, width, height = 3, initialValue = "", options = {}) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.isFocused = false;
+        this.cursor = 0;
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.value = initialValue;
+        this.cursor = initialValue.length;
+        this.zIndex = ((_a = options.zIndex) !== null && _a !== void 0 ? _a : 0) * 10;
+        this.textColor = (_b = options.textColor) !== null && _b !== void 0 ? _b : "white";
+        this.backgroundColor = (_c = options.backgroundColor) !== null && _c !== void 0 ? _c : "reset";
+        this.borderColor = (_d = options.borderColor) !== null && _d !== void 0 ? _d : "cyan";
+        this.placeholder = (_e = options.placeholder) !== null && _e !== void 0 ? _e : "";
+        this.placeholderColor = (_f = options.placeholderColor) !== null && _f !== void 0 ? _f : "gray";
+        this.maxLength = (_g = options.maxLength) !== null && _g !== void 0 ? _g : 256;
+        this.onChange = options.onChange;
+        this.onSubmit = options.onSubmit;
+    }
+    focus() {
+        this.isFocused = true;
+    }
+    blur() {
+        this.isFocused = false;
+    }
+    contains(x, y) {
+        return (x >= this.x &&
+            y >= this.y &&
+            x < this.x + this.width &&
+            y < this.y + this.height);
+    }
+    handleClick(_x, _y) {
+        return true;
+    }
+    handleKey(input, key) {
+        if (key.name === "left") {
+            this.cursor = Math.max(0, this.cursor - 1);
+            return true;
+        }
+        if (key.name === "right") {
+            this.cursor = Math.min(this.value.length, this.cursor + 1);
+            return true;
+        }
+        if (key.name === "home") {
+            this.cursor = 0;
+            return true;
+        }
+        if (key.name === "end") {
+            this.cursor = this.value.length;
+            return true;
+        }
+        if (key.name === "backspace") {
+            if (this.cursor > 0) {
+                this.value =
+                    this.value.slice(0, this.cursor - 1) +
+                        this.value.slice(this.cursor);
+                this.cursor -= 1;
+                if (this.onChange) {
+                    this.onChange(this.value);
+                }
+            }
+            return true;
+        }
+        if (key.name === "delete") {
+            if (this.cursor < this.value.length) {
+                this.value =
+                    this.value.slice(0, this.cursor) + this.value.slice(this.cursor + 1);
+                if (this.onChange) {
+                    this.onChange(this.value);
+                }
+            }
+            return true;
+        }
+        if (key.name === "return" || key.name === "enter") {
+            if (this.onSubmit) {
+                this.onSubmit(this.value);
+            }
+            return true;
+        }
+        if (input && input.length === 1 && !key.ctrl && !key.meta) {
+            if (this.value.length < this.maxLength) {
+                this.value =
+                    this.value.slice(0, this.cursor) +
+                        input +
+                        this.value.slice(this.cursor);
+                this.cursor += 1;
+                if (this.onChange) {
+                    this.onChange(this.value);
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    draw(ctx) {
+        var _a, _b;
+        const originX = ctx.origin.x + this.x;
+        const originY = ctx.origin.y + this.y;
+        const maxX = originX + this.width;
+        const maxY = originY + this.height;
+        const borderColor = (0, util_1.getColorCode)(this.borderColor);
+        const resetCode = "\x1b[0m";
+        for (let x = originX + 1; x < maxX - 1; x++) {
+            (0, util_1.setCell)(ctx.buffer, x, originY, `${borderColor}─${resetCode}`, ctx.clip, ctx.dirtyRows);
+            (0, util_1.setCell)(ctx.buffer, x, maxY - 1, `${borderColor}─${resetCode}`, ctx.clip, ctx.dirtyRows);
+        }
+        for (let y = originY + 1; y < maxY - 1; y++) {
+            (0, util_1.setCell)(ctx.buffer, originX, y, `${borderColor}│${resetCode}`, ctx.clip, ctx.dirtyRows);
+            (0, util_1.setCell)(ctx.buffer, maxX - 1, y, `${borderColor}│${resetCode}`, ctx.clip, ctx.dirtyRows);
+        }
+        (0, util_1.setCell)(ctx.buffer, originX, originY, `${borderColor}┌${resetCode}`, ctx.clip, ctx.dirtyRows);
+        (0, util_1.setCell)(ctx.buffer, maxX - 1, originY, `${borderColor}┐${resetCode}`, ctx.clip, ctx.dirtyRows);
+        (0, util_1.setCell)(ctx.buffer, originX, maxY - 1, `${borderColor}└${resetCode}`, ctx.clip, ctx.dirtyRows);
+        (0, util_1.setCell)(ctx.buffer, maxX - 1, maxY - 1, `${borderColor}┘${resetCode}`, ctx.clip, ctx.dirtyRows);
+        const contentWidth = Math.max(0, this.width - 2);
+        const contentY = originY + Math.floor(this.height / 2);
+        const display = this.value.length > 0 ? this.value : this.placeholder;
+        const displayColor = this.value.length > 0 ? this.textColor : this.placeholderColor;
+        const colorCode = (0, util_1.getColorCode)(displayColor);
+        const bgCode = (0, util_1.getColorCode)(this.backgroundColor);
+        const cursorOffset = Math.max(0, this.cursor - (contentWidth - 1));
+        const slice = display.slice(cursorOffset, cursorOffset + contentWidth);
+        for (let i = 0; i < contentWidth; i++) {
+            const ch = (_a = slice[i]) !== null && _a !== void 0 ? _a : " ";
+            (0, util_1.setCell)(ctx.buffer, originX + 1 + i, contentY, `${bgCode}${colorCode}${ch}${resetCode}`, ctx.clip, ctx.dirtyRows);
+        }
+        if (this.isFocused && contentWidth > 0) {
+            const cursorIndex = Math.min(this.cursor - cursorOffset, contentWidth - 1);
+            const cursorChar = (_b = slice[cursorIndex]) !== null && _b !== void 0 ? _b : " ";
+            const cursorX = originX + 1 + cursorIndex;
+            (0, util_1.setCell)(ctx.buffer, cursorX, contentY, `${bgCode}\x1b[7m${cursorChar}${resetCode}`, ctx.clip, ctx.dirtyRows);
+        }
+    }
+}
+exports.InputField = InputField;

package/dist/objects/line.d.ts

@@ -1,4 +1,4 @@
-import { TideObject } from "../interfaces";
+import type { RenderContext, TideObject } from "../interfaces";
 export declare class Line implements TideObject {
     relativeX: number;
     relativeY: number;
@@ -6,6 +6,6 @@ export declare class Line implements TideObject {
     color: string;
     zIndex: number;
     constructor(x: number, y: number, length: number, color?: string, zIndex?: number);
-    draw(screen: string[][], boxX: number, boxY: number): void;
+    draw(ctx: RenderContext): void;
 }
 //# sourceMappingURL=line.d.ts.map

package/dist/objects/line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../src/objects/line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,qBAAa,IAAK,YAAW,UAAU;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;gBAEH,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,SAAU,EAAE,MAAM,SAAI;IAQ7E,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;CAUtD"}
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../src/objects/line.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG/D,qBAAa,IAAK,YAAW,UAAU;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;gBAEH,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,SAAU,EAAE,MAAM,SAAI;IAQ7E,IAAI,CAAC,GAAG,EAAE,aAAa;CAe1B"}

package/dist/objects/line.js

@@ -8,16 +8,14 @@ class Line {
         this.relativeY = y;
         this.length = length;
         this.color = color;
-        this.zIndex = zIndex;
+        this.zIndex = zIndex * 10;
     }
-    draw(screen, boxX, boxY) {
+    draw(ctx) {
         const colorCode = (0, util_1.getColorCode)(this.color);
         for (let i = 0; i < this.length; i++) {
-            const screenX = boxX + this.relativeX + i;
-            const screenY = boxY + this.relativeY;
-            if (screenX < screen[0].length && screenY < screen.length) {
-                screen[screenY][screenX] = `${colorCode}─\x1b[0m`;
-            }
+            const screenX = ctx.origin.x + this.relativeX + i;
+            const screenY = ctx.origin.y + this.relativeY;
+            (0, util_1.setCell)(ctx.buffer, screenX, screenY, `${colorCode}─\x1b[0m`, ctx.clip, ctx.dirtyRows);
         }
     }
 }

package/dist/objects/progress.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=progress.d.ts.map

package/dist/objects/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/objects/progress.ts"],"names":[],"mappings":""}

package/dist/objects/progress.js

@@ -0,0 +1 @@
+"use strict";

package/dist/objects/text.d.ts

@@ -1,11 +1,13 @@
-import { TideObject } from "../interfaces";
+import type { RenderContext, TideEffect, TideObject } from "../interfaces";
 export declare class Text implements TideObject {
     relativeX: number;
     relativeY: number;
     text: string;
     color: string;
     zIndex: number;
+    effects: TideEffect[];
     constructor(x: number, y: number, text: string, color?: string, zIndex?: number);
-    draw(screen: string[][], boxX: number, boxY: number, boxWidth: number): void;
+    applyEffect(effect: TideEffect): void;
+    draw(ctx: RenderContext): void;
 }
 //# sourceMappingURL=text.d.ts.map

package/dist/objects/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/objects/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,qBAAa,IAAK,YAAW,UAAU;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;gBAEH,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,SAAU,EAAE,MAAM,SAAI;IAQ3E,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAetE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/objects/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3E,qBAAa,IAAK,YAAW,UAAU;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAM;gBAEf,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,SAAU,EAAE,MAAM,SAAI;IAQ3E,WAAW,CAAC,MAAM,EAAE,UAAU;IAI9B,IAAI,CAAC,GAAG,EAAE,aAAa;CA0BxB"}

package/dist/objects/text.js

@@ -3,24 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const util_1 = require("../util");
 class Text {
-    constructor(x, y, text, color = 'reset', zIndex = 0) {
+    constructor(x, y, text, color = "reset", zIndex = 0) {
+        this.effects = [];
         this.relativeX = x;
         this.relativeY = y;
         this.text = text;
         this.color = color;
-        this.zIndex = zIndex;
+        this.zIndex = zIndex * 10;
     }
-    draw(screen, boxX, boxY, boxWidth) {
+    applyEffect(effect) {
+        this.effects.push(effect);
+    }
+    draw(ctx) {
+        const screen = ctx.buffer;
         const colorCode = (0, util_1.getColorCode)(this.color);
-        const lines = (0, util_1.wrapText)(this.text, boxWidth);
+        const maxWidth = Math.max(0, ctx.clip.width);
+        const lines = (0, util_1.wrapText)(this.text, maxWidth);
+        for (const effect of this.effects) {
+            effect.apply(this, ctx);
+        }
         for (let i = 0; i < lines.length; i++) {
             const line = lines[i];
             for (let j = 0; j < line.length; j++) {
-                const screenX = boxX + this.relativeX + j;
-                const screenY = boxY + this.relativeY + i;
-                if (screenX < screen[0].length && screenY < screen.length) {
-                    screen[screenY][screenX] = `${colorCode}${line[j]}\x1b[0m`;
-                }
+                const screenX = ctx.origin.x + this.relativeX + j;
+                const screenY = ctx.origin.y + this.relativeY + i;
+                (0, util_1.setCell)(screen, screenX, screenY, `${colorCode}${line[j]}\x1b[0m`, ctx.clip, ctx.dirtyRows);
             }
         }
     }

package/dist/screen.d.ts

@@ -1,24 +1,34 @@
-import { TideObject } from "./interfaces";
+import type { TideObject } from "./interfaces";
 export declare class TideScreen {
     width: number;
     height: number;
-    screen: string[][];
-    buffer: string[][];
+    frontBuffer: string[][];
+    backBuffer: string[][];
     components: TideObject[];
     fps: number | null;
     updateFunction: (() => void) | null;
     backgroundColor: string;
+    private needsSort;
+    private resizeListener;
+    private didInitialClear;
     constructor(width: number, height: number, backgroundColor?: string);
-    clearScreen(): void;
-    clearBuffer(): void;
+    private createBuffer;
+    clearBuffer(buffer: string[][], dirtyRows?: Set<number>): void;
     addComponent(component: TideObject): void;
+    invalidateSort(): void;
     private getBackgroundColorCode;
     private renderBuffer;
-    applyBackgroundColor(): void;
+    applyBackgroundColor(dirtyRows?: Set<number>): void;
+    resize(width: number, height: number): void;
+    enableAutoResize(getSize?: () => {
+        width: number;
+        height: number;
+    }): void;
+    disableAutoResize(): void;
     private render;
     setUpdateFunction(fn: () => void): void;
     setFPS(fps: number): void;
     nextFrame(): void;
-    renderCycle(): void;
+    renderCycle(beforeRender?: () => void, afterRender?: () => void): void;
 }
 //# sourceMappingURL=screen.d.ts.map

package/dist/screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../src/screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,qBAAa,UAAU;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;IACnB,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC1B,cAAc,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAQ;IAC3C,eAAe,EAAE,MAAM,CAAC;gBAEZ,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,GAAE,MAAsB;IASlF,WAAW;IAIX,WAAW;IAIX,YAAY,CAAC,SAAS,EAAE,UAAU;IAIlC,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,YAAY;IAMpB,oBAAoB;IAUpB,OAAO,CAAC,MAAM;IAOd,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI;IAIhC,MAAM,CAAC,GAAG,EAAE,MAAM;IAIlB,SAAS;IAQT,WAAW;CAkBd"}
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../src/screen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE9D,qBAAa,UAAU;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,EAAE,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,EAAE,EAAE,CAAC;IACvB,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC1B,cAAc,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAQ;IAC3C,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,eAAe,CAAS;gBAEpB,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,SAAgB;IAS1E,OAAO,CAAC,YAAY;IAIpB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAWvD,YAAY,CAAC,SAAS,EAAE,UAAU;IAKlC,cAAc;IAId,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,YAAY;IAkBpB,oBAAoB,CAAC,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC;IAkB5C,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAOpC,gBAAgB,CACd,OAAO,GAAE,MAAM;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAG5C;IAYJ,iBAAiB;IAQjB,OAAO,CAAC,MAAM;IA2Bd,iBAAiB,CAAC,EAAE,EAAE,MAAM,IAAI;IAIhC,MAAM,CAAC,GAAG,EAAE,MAAM;IAIlB,SAAS;IAQT,WAAW,CAAC,YAAY,CAAC,EAAE,MAAM,IAAI,EAAE,WAAW,CAAC,EAAE,MAAM,IAAI;CA6BhE"}