voonex 0.1.0

package/dist/components/Input.d.ts

@@ -0,0 +1,23 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+export interface InputOptions {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    x: number;
+    y: number;
+    width?: number;
+    type?: 'text' | 'password';
+}
+export declare class InputField implements Focusable {
+    id: string;
+    value: string;
+    private isFocused;
+    private options;
+    constructor(options: InputOptions);
+    focus(): void;
+    blur(): void;
+    setValue(val: string): void;
+    handleKey(key: readline.Key): boolean;
+    render(): void;
+}

package/dist/components/Input.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class InputField {
+    constructor(options) {
+        this.value = "";
+        this.isFocused = false;
+        this.id = options.id;
+        this.options = { width: 30, type: 'text', ...options };
+    }
+    focus() {
+        this.isFocused = true;
+    }
+    blur() {
+        this.isFocused = false;
+    }
+    setValue(val) {
+        this.value = val;
+    }
+    handleKey(key) {
+        if (!this.isFocused)
+            return false;
+        if (key.name === 'backspace') {
+            this.value = this.value.slice(0, -1);
+            this.render();
+            return true;
+        }
+        else if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+            // Basic text input filtering
+            // Only accept printable characters (rough check)
+            if (/^[\x20-\x7E]$/.test(key.sequence)) {
+                this.value += key.sequence;
+                this.render();
+                return true;
+            }
+        }
+        // Did not consume (e.g., arrow keys, tabs)
+        return false;
+    }
+    render() {
+        const { x, y, label, width, type } = this.options;
+        const labelText = label ? `${label}: ` : '';
+        const labelLen = labelText.length;
+        // Draw Label
+        if (label) {
+            const labelStyle = this.isFocused ? 'brightCyan' : 'dim';
+            Screen_1.Screen.write(x, y, Styler_1.Styler.style(labelText, labelStyle, 'bold'));
+        }
+        // Draw Input Box Background
+        const inputX = x + labelLen;
+        const maxWidth = (width || 30) - labelLen;
+        let displayValue = this.value;
+        if (type === 'password') {
+            displayValue = '*'.repeat(this.value.length);
+        }
+        // Cursor logic
+        const showCursor = this.isFocused;
+        const cursorChar = '█';
+        // Display content calculation
+        // Ensure we don't overflow width
+        if (displayValue.length >= maxWidth - 1) {
+            const start = displayValue.length - (maxWidth - 2);
+            displayValue = displayValue.substring(start);
+        }
+        const fieldContent = displayValue + (showCursor ? Styler_1.Styler.style(cursorChar, 'green') : ' ');
+        // Fill remaining space to clear old chars
+        const paddingLen = Math.max(0, maxWidth - Styler_1.Styler.len(fieldContent));
+        const padding = ' '.repeat(paddingLen);
+        const style = this.isFocused ? 'white' : 'gray';
+        Screen_1.Screen.write(inputX, y, Styler_1.Styler.style(fieldContent + padding, style));
+        // Underline
+        const underline = '─'.repeat(maxWidth);
+        const underlineColor = this.isFocused ? 'brightGreen' : 'dim';
+        Screen_1.Screen.write(inputX, y + 1, Styler_1.Styler.style(underline, underlineColor));
+    }
+}
+exports.InputField = InputField;

package/dist/components/Menu.d.ts

@@ -0,0 +1,27 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+interface MenuOptions {
+    id?: string;
+    title?: string;
+    items: string[];
+    onSelect: (index: number, item: string) => void;
+    x?: number;
+    y?: number;
+}
+export declare class Menu implements Focusable {
+    id: string;
+    private selectedIndex;
+    private options;
+    private active;
+    private isFocused;
+    constructor(options: MenuOptions);
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    render(): void;
+    /**
+     * Legacy Standalone Start
+     */
+    start(): void;
+}
+export {};

package/dist/components/Menu.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const Input_1 = require("../core/Input");
+const Screen_1 = require("../core/Screen");
+const Styler_1 = require("../core/Styler");
+const Cursor_1 = require("../core/Cursor");
+class Menu {
+    constructor(options) {
+        this.selectedIndex = 0;
+        this.active = false; // "Active" in standalone mode, or used for "Focused" logic?
+        this.isFocused = false;
+        this.id = options.id || `menu-${Math.random().toString(36).substr(2, 9)}`;
+        this.options = options;
+        this.options.x = options.x || 2;
+        this.options.y = options.y || 2;
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.isFocused && !this.active)
+            return false;
+        let consumed = false;
+        switch (key.name) {
+            case 'up':
+                this.selectedIndex = (this.selectedIndex - 1 + this.options.items.length) % this.options.items.length;
+                this.render();
+                consumed = true;
+                break;
+            case 'down':
+                this.selectedIndex = (this.selectedIndex + 1) % this.options.items.length;
+                this.render();
+                consumed = true;
+                break;
+            case 'return': // Enter key
+            case 'enter':
+                //this.active = false; // Don't deactivate if managed by FocusManager?
+                // Provide visual feedback
+                // We should probably just call select
+                this.options.onSelect(this.selectedIndex, this.options.items[this.selectedIndex]);
+                consumed = true;
+                break;
+            case 'escape':
+                // Maybe defocus or exit?
+                break;
+        }
+        return consumed;
+    }
+    render() {
+        const { x, y, items, title } = this.options;
+        if (title) {
+            Screen_1.Screen.write(x, y, Styler_1.Styler.style(title, 'bold', 'underline'));
+        }
+        items.forEach((item, index) => {
+            const isSelected = index === this.selectedIndex;
+            // Show different cursor if focused
+            const prefix = isSelected ? (this.isFocused || this.active ? '❯ ' : '> ') : '  ';
+            let style = ['dim'];
+            if (isSelected) {
+                style = this.isFocused || this.active ? ['cyan', 'bold'] : ['white'];
+            }
+            const label = Styler_1.Styler.style(item, ...style);
+            // +1 (or +2) for title offset
+            Screen_1.Screen.write(x, y + index + (title ? 2 : 0), `${prefix}${label}`);
+        });
+    }
+    /**
+     * Legacy Standalone Start
+     */
+    start() {
+        this.active = true;
+        Cursor_1.Cursor.hide(); // Hide cursor for cleaner UI
+        this.render();
+        // This effectively takes over input globally, effectively "Mocking" FocusManager for this single component
+        Input_1.Input.onKey((key) => {
+            if (!this.active)
+                return;
+            // Re-use logic
+            const consumed = this.handleKey(key);
+            if (key.name === 'q' || key.name === 'escape') {
+                this.active = false;
+                process.exit(0);
+            }
+        });
+    }
+}
+exports.Menu = Menu;

package/dist/components/Popup.d.ts

@@ -0,0 +1,7 @@
+import { ColorName } from '../core/Styler';
+export declare class Popup {
+    static alert(message: string, options?: {
+        title?: string;
+        color?: ColorName;
+    }): void;
+}

package/dist/components/Popup.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = void 0;
+const Box_1 = require("./Box");
+const Screen_1 = require("../core/Screen");
+const Styler_1 = require("../core/Styler");
+const Input_1 = require("../core/Input");
+class Popup {
+    static alert(message, options = {}) {
+        // Mount a high-priority render function
+        const renderPopup = () => {
+            const { width, height } = Screen_1.Screen.size;
+            const lines = message.split('\n');
+            const maxLen = Math.max(...lines.map(l => Styler_1.Styler.len(l)));
+            const boxWidth = Math.max(maxLen + 6, 40);
+            const boxHeight = lines.length + 4;
+            const x = Math.floor((width - boxWidth) / 2);
+            const y = Math.floor((height - boxHeight) / 2);
+            // Manually clear popup area for opacity
+            for (let i = 0; i < boxHeight; i++) {
+                Screen_1.Screen.write(x, y + i, " ".repeat(boxWidth));
+            }
+            Box_1.Box.render([
+                ...lines
+            ], {
+                x, y,
+                width: boxWidth,
+                height: boxHeight,
+                title: options.title || "ALERT",
+                borderColor: options.color || 'red',
+                style: 'double',
+                padding: 1
+            });
+            Screen_1.Screen.write(x + 2, y + boxHeight - 1, Styler_1.Styler.style("[Press Enter]", 'dim'));
+        };
+        const POPUP_Z_INDEX = 9999;
+        Screen_1.Screen.mount(renderPopup, POPUP_Z_INDEX);
+        const handler = (key) => {
+            if (key.name === 'return' || key.name === 'enter' || key.name === 'escape') {
+                Screen_1.Screen.unmount(renderPopup);
+                Input_1.Input.offKey(handler);
+                return true; // Stop propagation
+            }
+            return true; // Consume other keys while popup is open? 
+            // Usually alerts are modal, so yes, consume everything.
+        };
+        Input_1.Input.onKey(handler);
+    }
+}
+exports.Popup = Popup;

package/dist/components/ProgressBar.d.ts

@@ -0,0 +1,28 @@
+import { ColorName } from '../core/Styler';
+interface ProgressBarOptions {
+    width?: number;
+    total?: number;
+    completeChar?: string;
+    incompleteChar?: string;
+    format?: string;
+    color?: ColorName;
+    x?: number;
+    y?: number;
+}
+export declare class ProgressBar {
+    private current;
+    private total;
+    private width;
+    private chars;
+    private format;
+    private color;
+    private x;
+    private y;
+    constructor(options?: ProgressBarOptions);
+    update(current: number, tokens?: Record<string, string>, pos?: {
+        x: number;
+        y: number;
+    }): void;
+    finish(): void;
+}
+export {};

package/dist/components/ProgressBar.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class ProgressBar {
+    constructor(options = {}) {
+        this.current = 0;
+        this.total = options.total || 100;
+        this.width = options.width || 40;
+        this.chars = {
+            complete: options.completeChar || '█',
+            incomplete: options.incompleteChar || '░'
+        };
+        this.format = options.format || "[:bar] :percent";
+        this.color = options.color || 'green';
+        this.x = options.x || 0;
+        this.y = options.y || 0;
+    }
+    // Allow overriding position in update
+    update(current, tokens = {}, pos) {
+        this.current = current;
+        // Use provided pos or stored pos
+        const drawX = pos?.x ?? this.x;
+        const drawY = pos?.y ?? this.y;
+        const ratio = Math.min(Math.max(current / this.total, 0), 1);
+        const percent = Math.floor(ratio * 100);
+        const completeLen = Math.round(this.width * ratio);
+        const incompleteLen = this.width - completeLen;
+        const bar = Styler_1.Styler.style(this.chars.complete.repeat(completeLen), this.color) +
+            Styler_1.Styler.style(this.chars.incomplete.repeat(incompleteLen), 'dim');
+        let str = this.format
+            .replace(':bar', bar)
+            .replace(':percent', Styler_1.Styler.style(`${percent}%`.padStart(4), 'bold'));
+        // Replace custom tokens (e.g., :msg)
+        for (const [key, val] of Object.entries(tokens)) {
+            str = str.replace(`:${key}`, val);
+        }
+        // Use Screen.write instead of direct stdout
+        Screen_1.Screen.write(drawX, drawY, str);
+    }
+    finish() {
+        // No-op in buffered mode, or maybe clear? 
+        // Or keep last state.
+    }
+}
+exports.ProgressBar = ProgressBar;

package/dist/components/Radio.d.ts

@@ -0,0 +1,22 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+export interface RadioGroupOptions {
+    id: string;
+    label?: string;
+    items: string[];
+    selectedIndex?: number;
+    x: number;
+    y: number;
+    direction?: 'horizontal' | 'vertical';
+}
+export declare class RadioGroup implements Focusable {
+    id: string;
+    selectedIndex: number;
+    private options;
+    private isFocused;
+    constructor(options: RadioGroupOptions);
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    render(): void;
+}

package/dist/components/Radio.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class RadioGroup {
+    constructor(options) {
+        this.isFocused = false;
+        this.id = options.id;
+        this.options = { direction: 'vertical', ...options };
+        this.selectedIndex = options.selectedIndex || 0;
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.isFocused)
+            return false;
+        const count = this.options.items.length;
+        if (key.name === 'up' || key.name === 'left') {
+            this.selectedIndex = (this.selectedIndex - 1 + count) % count;
+            this.render();
+            return true;
+        }
+        else if (key.name === 'down' || key.name === 'right') {
+            this.selectedIndex = (this.selectedIndex + 1) % count;
+            this.render();
+            return true;
+        }
+        return false;
+    }
+    render() {
+        const { x, y, label, items, direction } = this.options;
+        let currentX = x;
+        let currentY = y;
+        if (label) {
+            Screen_1.Screen.write(currentX, currentY, Styler_1.Styler.style(label + ':', 'bold'));
+            if (direction === 'vertical')
+                currentY++;
+            else
+                currentX += label.length + 2;
+        }
+        items.forEach((item, index) => {
+            const isSelected = index === this.selectedIndex;
+            const symbol = isSelected ? '(*)' : '( )';
+            const symbolColor = isSelected ? 'green' : 'dim';
+            const textColor = this.isFocused && isSelected ? 'brightCyan' : (this.isFocused ? 'white' : 'gray');
+            const content = Styler_1.Styler.style(symbol, symbolColor) + ' ' + Styler_1.Styler.style(item, textColor);
+            Screen_1.Screen.write(currentX, currentY, content);
+            if (direction === 'vertical') {
+                currentY++;
+            }
+            else {
+                currentX += item.length + 6; // spacing
+            }
+        });
+    }
+}
+exports.RadioGroup = RadioGroup;

package/dist/components/Select.d.ts

@@ -0,0 +1,24 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+export interface SelectOptions {
+    id: string;
+    label?: string;
+    items: string[];
+    x: number;
+    y: number;
+    width?: number;
+    onSelect?: (index: number, item: string) => void;
+}
+export declare class Select implements Focusable {
+    id: string;
+    private options;
+    private selectedIndex;
+    private isFocused;
+    private isOpen;
+    constructor(options: SelectOptions);
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    private clearDropdownArea;
+    render(): void;
+}

package/dist/components/Select.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class Select {
+    constructor(options) {
+        this.selectedIndex = 0;
+        this.isFocused = false;
+        this.isOpen = false;
+        this.id = options.id;
+        this.options = { width: 20, ...options };
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        if (this.isOpen) {
+            this.isOpen = false;
+            this.clearDropdownArea(); // Clear artifacts
+        }
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.isFocused)
+            return false;
+        if (this.isOpen) {
+            // Dropdown navigation
+            if (key.name === 'up') {
+                this.selectedIndex = (this.selectedIndex - 1 + this.options.items.length) % this.options.items.length;
+                this.render();
+                return true;
+            }
+            else if (key.name === 'down') {
+                this.selectedIndex = (this.selectedIndex + 1) % this.options.items.length;
+                this.render();
+                return true;
+            }
+            else if (key.name === 'return' || key.name === 'enter' || key.name === 'escape') {
+                this.isOpen = false;
+                this.clearDropdownArea(); // Clear artifacts
+                if (key.name !== 'escape' && this.options.onSelect) {
+                    this.options.onSelect(this.selectedIndex, this.options.items[this.selectedIndex]);
+                }
+                this.render();
+                return true;
+            }
+        }
+        else {
+            // Closed state navigation
+            if (key.name === 'return' || key.name === 'enter' || key.name === 'space') {
+                this.isOpen = true;
+                this.render();
+                return true;
+            }
+            // Optional: Allow arrows to cycle through items without opening?
+            // Usually selects allow this.
+            if (key.name === 'down') {
+                this.selectedIndex = (this.selectedIndex + 1) % this.options.items.length;
+                if (this.options.onSelect)
+                    this.options.onSelect(this.selectedIndex, this.options.items[this.selectedIndex]);
+                this.render();
+                return true;
+            }
+            if (key.name === 'up') {
+                this.selectedIndex = (this.selectedIndex - 1 + this.options.items.length) % this.options.items.length;
+                if (this.options.onSelect)
+                    this.options.onSelect(this.selectedIndex, this.options.items[this.selectedIndex]);
+                this.render();
+                return true;
+            }
+        }
+        return false;
+    }
+    clearDropdownArea() {
+        const { x, y, width, items, label } = this.options;
+        const w = width || 20;
+        const labelText = label ? `${label}: ` : '';
+        const inputX = x + labelText.length;
+        // Clear the exact area where dropdown items were drawn
+        for (let i = 0; i < items.length; i++) {
+            const itemY = y + 1 + i;
+            // Write spaces to clear. We use ' ' * w.
+            // This might wipe underlying content, but it removes the ghost text.
+            Screen_1.Screen.write(inputX, itemY, ' '.repeat(w));
+        }
+    }
+    render() {
+        const { x, y, width, label, items } = this.options;
+        const w = width || 20;
+        const labelText = label ? `${label}: ` : '';
+        const labelLen = labelText.length;
+        if (label) {
+            const labelStyle = this.isFocused ? 'brightCyan' : 'white';
+            // If not focused, make it dim using modifier
+            if (this.isFocused) {
+                Screen_1.Screen.write(x, y, Styler_1.Styler.style(labelText, 'brightCyan', 'bold'));
+            }
+            else {
+                Screen_1.Screen.write(x, y, Styler_1.Styler.style(labelText, 'white', 'dim'));
+            }
+        }
+        const inputX = x + labelLen;
+        const selectedItem = items[this.selectedIndex] || "";
+        const arrow = this.isOpen ? '▲' : '▼';
+        // Draw the main box
+        const content = ` ${selectedItem} `.padEnd(w - 2) + arrow + ' ';
+        const style = this.isFocused ? 'bgBlue' : 'bgWhite';
+        const fg = this.isFocused ? 'white' : 'black';
+        Screen_1.Screen.write(inputX, y, Styler_1.Styler.style(content, style, fg));
+        // Draw Dropdown if open
+        if (this.isOpen) {
+            for (let i = 0; i < items.length; i++) {
+                const itemY = y + 1 + i;
+                const isSelected = i === this.selectedIndex;
+                const itemContent = ` ${items[i]} `.padEnd(w);
+                const itemStyle = isSelected ? 'bgCyan' : 'bgWhite';
+                const itemFg = isSelected ? 'black' : 'black';
+                Screen_1.Screen.write(inputX, itemY, Styler_1.Styler.style(itemContent, itemStyle, itemFg));
+            }
+        }
+    }
+}
+exports.Select = Select;

package/dist/components/Tab.d.ts

@@ -0,0 +1,24 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+export interface TabOptions {
+    id: string;
+    titles: string[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    initialTab?: number;
+    onTabChange?: (index: number) => void;
+}
+export declare class TabManager implements Focusable {
+    id: string;
+    private options;
+    private activeIndex;
+    private isFocused;
+    constructor(options: TabOptions);
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    private triggerChange;
+    render(): void;
+}