voonex 0.1.0

package/dist/components/Tab.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabManager = void 0;
+const Screen_1 = require("../core/Screen");
+const Styler_1 = require("../core/Styler");
+class TabManager {
+    constructor(options) {
+        this.activeIndex = 0;
+        this.isFocused = false;
+        this.id = options.id;
+        this.options = options;
+        this.activeIndex = options.initialTab || 0;
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.isFocused)
+            return false;
+        // Left/Right arrows to switch tabs
+        if (key.name === 'left') {
+            this.activeIndex = (this.activeIndex - 1 + this.options.titles.length) % this.options.titles.length;
+            this.triggerChange();
+            this.render();
+            return true;
+        }
+        else if (key.name === 'right') {
+            this.activeIndex = (this.activeIndex + 1) % this.options.titles.length;
+            this.triggerChange();
+            this.render();
+            return true;
+        }
+        return false;
+    }
+    triggerChange() {
+        if (this.options.onTabChange) {
+            this.options.onTabChange(this.activeIndex);
+        }
+    }
+    render() {
+        const { x, y, width, titles } = this.options;
+        // Draw Tabs Row
+        let currentX = x;
+        titles.forEach((title, index) => {
+            const isActive = index === this.activeIndex;
+            const style = isActive ? (this.isFocused ? 'brightCyan' : 'white') : 'dim';
+            const decoration = isActive ? 'bold' : 'dim';
+            const displayTitle = ` ${title} `;
+            // Draw top border for active tab or something distinct?
+            // Simple style: [ Active ]  Inactive 
+            let renderStr = displayTitle;
+            if (isActive) {
+                renderStr = Styler_1.Styler.style(displayTitle, 'bgBlue', 'white', 'bold');
+            }
+            else {
+                renderStr = Styler_1.Styler.style(displayTitle, 'dim', 'bgBlack');
+            }
+            Screen_1.Screen.write(currentX, y, renderStr);
+            currentX += Styler_1.Styler.len(displayTitle) + 1;
+        });
+        // Draw separator line below tabs
+        Screen_1.Screen.write(x, y + 1, Styler_1.Styler.style('─'.repeat(width), 'dim'));
+        // Ideally, we might want to clear the content area below if the user handles it manually?
+        // Or we assume the user's `onTabChange` will re-render the content area.
+    }
+}
+exports.TabManager = TabManager;

package/dist/components/Table.d.ts

@@ -0,0 +1,25 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+interface TableOptions {
+    id?: string;
+    x?: number;
+    y?: number;
+    height?: number;
+    width?: number;
+    scrollable?: boolean;
+}
+export declare class Table implements Focusable {
+    id: string;
+    private headers;
+    private rows;
+    private options;
+    private scrollTop;
+    private isFocused;
+    constructor(headers: string[], options?: TableOptions);
+    addRow(row: string[]): void;
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    render(): void;
+}
+export {};

package/dist/components/Table.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class Table {
+    constructor(headers, options = {}) {
+        this.rows = [];
+        this.scrollTop = 0;
+        this.isFocused = false;
+        this.headers = headers;
+        this.id = options.id || `table-${Math.random().toString(36).substr(2, 9)}`;
+        this.options = { x: 1, y: 1, scrollable: true, ...options };
+    }
+    addRow(row) {
+        this.rows.push(row);
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.options.scrollable)
+            return false;
+        const maxScroll = Math.max(0, this.rows.length - (this.options.height ? this.options.height - 4 : this.rows.length));
+        // Height - header (1) - separator (1) - border/margin? 
+        // Let's refine calculation in render, but basically:
+        // Visible rows = height - 2 (header + sep)
+        const visibleRows = (this.options.height || this.rows.length + 2) - 2;
+        if (key.name === 'up') {
+            if (this.scrollTop > 0) {
+                this.scrollTop--;
+                this.render();
+                return true;
+            }
+        }
+        else if (key.name === 'down') {
+            if (this.scrollTop < maxScroll) {
+                this.scrollTop++;
+                this.render();
+                return true;
+            }
+        }
+        else if (key.name === 'pageup') {
+            this.scrollTop = Math.max(0, this.scrollTop - visibleRows);
+            this.render();
+            return true;
+        }
+        else if (key.name === 'pagedown') {
+            this.scrollTop = Math.min(maxScroll, this.scrollTop + visibleRows);
+            this.render();
+            return true;
+        }
+        return false;
+    }
+    render() {
+        const startX = this.options.x || 1;
+        let currentY = this.options.y || 1;
+        const height = this.options.height;
+        // Calculate column widths
+        const colWidths = this.headers.map((h, i) => {
+            const maxRow = Math.max(...this.rows.map(r => Styler_1.Styler.len(r[i] || '')));
+            return Math.max(Styler_1.Styler.len(h), maxRow) + 2;
+        });
+        const buildRow = (items, isHeader = false) => {
+            return items.map((item, i) => {
+                const len = Styler_1.Styler.len(item);
+                const pad = ' '.repeat(colWidths[i] - len - 1);
+                const cell = ` ${item}${pad}`;
+                const style = isHeader ? 'blue' : (this.isFocused ? 'white' : 'gray');
+                return isHeader ? Styler_1.Styler.style(cell, 'bold', 'blue') : Styler_1.Styler.style(cell, style);
+            }).join('│');
+        };
+        const totalWidth = colWidths.reduce((a, b) => a + b, 0) + (colWidths.length - 1);
+        const separator = colWidths.map(w => '─'.repeat(w)).join('┼');
+        // Draw Header
+        Screen_1.Screen.write(startX, currentY++, buildRow(this.headers, true));
+        Screen_1.Screen.write(startX, currentY++, Styler_1.Styler.style(separator, 'dim'));
+        // Determine visible rows
+        let visibleRowsCount = this.rows.length;
+        if (height) {
+            visibleRowsCount = height - 2; // Subtract header and separator
+        }
+        for (let i = 0; i < visibleRowsCount; i++) {
+            const rowIndex = i + this.scrollTop;
+            if (rowIndex < this.rows.length) {
+                let rowStr = buildRow(this.rows[rowIndex]);
+                // Add Scrollbar indicator if needed
+                if (this.options.scrollable && height && this.rows.length > visibleRowsCount) {
+                    const scrollbarHeight = Math.max(1, Math.floor((visibleRowsCount / this.rows.length) * visibleRowsCount));
+                    const maxScroll = this.rows.length - visibleRowsCount;
+                    const scrollPercent = this.scrollTop / maxScroll;
+                    const scrollPos = Math.floor(scrollPercent * (visibleRowsCount - scrollbarHeight));
+                    if (i >= scrollPos && i < scrollPos + scrollbarHeight) {
+                        rowStr += Styler_1.Styler.style('│', 'brightWhite');
+                    }
+                    else {
+                        rowStr += Styler_1.Styler.style('│', 'dim');
+                    }
+                }
+                Screen_1.Screen.write(startX, currentY++, rowStr);
+            }
+            else {
+                // Clear empty lines if height is fixed
+                if (height) {
+                    Screen_1.Screen.write(startX, currentY++, ' '.repeat(totalWidth + 1));
+                }
+            }
+        }
+    }
+}
+exports.Table = Table;

package/dist/components/Textarea.d.ts

@@ -0,0 +1,26 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+export interface TextareaOptions {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    label?: string;
+    value?: string;
+}
+export declare class Textarea implements Focusable {
+    id: string;
+    value: string;
+    private options;
+    private isFocused;
+    private cursorIndex;
+    private scrollTop;
+    constructor(options: TextareaOptions);
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    private adjustScroll;
+    render(): void;
+    private getLineStart;
+}

package/dist/components/Textarea.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class Textarea {
+    constructor(options) {
+        this.isFocused = false;
+        this.cursorIndex = 0; // Absolute index in value
+        this.scrollTop = 0; // Line offset
+        this.id = options.id;
+        this.options = options;
+        this.value = options.value || "";
+        this.cursorIndex = this.value.length;
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.isFocused)
+            return false;
+        let consumed = false;
+        if (key.name === 'backspace') {
+            if (this.cursorIndex > 0) {
+                this.value = this.value.slice(0, this.cursorIndex - 1) + this.value.slice(this.cursorIndex);
+                this.cursorIndex--;
+                consumed = true;
+            }
+        }
+        else if (key.name === 'return' || key.name === 'enter') {
+            this.value = this.value.slice(0, this.cursorIndex) + '\n' + this.value.slice(this.cursorIndex);
+            this.cursorIndex++;
+            consumed = true;
+        }
+        else if (key.name === 'left') {
+            if (this.cursorIndex > 0) {
+                this.cursorIndex--;
+                consumed = true;
+            }
+        }
+        else if (key.name === 'right') {
+            if (this.cursorIndex < this.value.length) {
+                this.cursorIndex++;
+                consumed = true;
+            }
+        }
+        else if (key.name === 'up') {
+            // Move cursor up a line
+            const currentLineStart = this.value.lastIndexOf('\n', this.cursorIndex - 1) + 1;
+            const col = this.cursorIndex - currentLineStart;
+            if (currentLineStart > 0) {
+                const prevLineEnd = currentLineStart - 1;
+                const prevLineStart = this.value.lastIndexOf('\n', prevLineEnd - 1) + 1;
+                const prevLineLength = prevLineEnd - prevLineStart;
+                this.cursorIndex = prevLineStart + Math.min(col, prevLineLength);
+                consumed = true;
+            }
+        }
+        else if (key.name === 'down') {
+            // Move cursor down a line
+            const nextLineStart = this.value.indexOf('\n', this.cursorIndex);
+            if (nextLineStart !== -1) {
+                const currentLineStart = this.value.lastIndexOf('\n', this.cursorIndex - 1) + 1;
+                const col = this.cursorIndex - currentLineStart;
+                const nextLineEnd = this.value.indexOf('\n', nextLineStart + 1);
+                const actualNextLineEnd = nextLineEnd === -1 ? this.value.length : nextLineEnd;
+                const nextLineLength = actualNextLineEnd - (nextLineStart + 1);
+                this.cursorIndex = (nextLineStart + 1) + Math.min(col, nextLineLength);
+                consumed = true;
+            }
+        }
+        else if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+            if (/^[\x20-\x7E]$/.test(key.sequence)) {
+                this.value = this.value.slice(0, this.cursorIndex) + key.sequence + this.value.slice(this.cursorIndex);
+                this.cursorIndex++;
+                consumed = true;
+            }
+        }
+        if (consumed) {
+            this.adjustScroll();
+            this.render();
+            return true;
+        }
+        return false;
+    }
+    adjustScroll() {
+        // Calculate which line the cursor is on
+        const lines = this.value.split('\n');
+        let charCount = 0;
+        let cursorLine = 0;
+        for (let i = 0; i < lines.length; i++) {
+            const lineLen = lines[i].length + 1; // +1 for newline
+            if (this.cursorIndex < charCount + lineLen) {
+                cursorLine = i;
+                break;
+            }
+            charCount += lineLen;
+        }
+        // Special case: cursor at end of string which is a newline
+        if (this.cursorIndex === this.value.length && this.value.endsWith('\n')) {
+            cursorLine = lines.length; // Actually lines array might have empty string at end
+            // If split('\n') on "a\n" gives ["a", ""]. Cursor at end is on line 1 (index 1).
+            // Correct.
+        }
+        const visibleLines = this.options.height - 2; // Border
+        if (cursorLine < this.scrollTop) {
+            this.scrollTop = cursorLine;
+        }
+        else if (cursorLine >= this.scrollTop + visibleLines) {
+            this.scrollTop = cursorLine - visibleLines + 1;
+        }
+    }
+    render() {
+        const { x, y, width, height, label } = this.options;
+        const borderColor = this.isFocused ? 'brightCyan' : 'white';
+        const innerWidth = width - 2;
+        const innerHeight = height - 2;
+        // Draw Label if provided
+        if (label) {
+            Screen_1.Screen.write(x, y - 1, Styler_1.Styler.style(label, 'bold'));
+        }
+        // Draw Box Border
+        const top = '┌' + '─'.repeat(innerWidth) + '┐';
+        const bottom = '└' + '─'.repeat(innerWidth) + '┘';
+        Screen_1.Screen.write(x, y, Styler_1.Styler.style(top, borderColor));
+        for (let i = 0; i < innerHeight; i++) {
+            Screen_1.Screen.write(x, y + 1 + i, Styler_1.Styler.style('│' + ' '.repeat(innerWidth) + '│', borderColor));
+        }
+        Screen_1.Screen.write(x, y + height - 1, Styler_1.Styler.style(bottom, borderColor));
+        // Draw Content
+        const lines = this.value.split('\n');
+        // We need to map cursorIndex to screen coordinates to draw the cursor character
+        let charCounter = 0;
+        for (let i = 0; i < innerHeight; i++) {
+            const lineIndex = i + this.scrollTop;
+            if (lineIndex < lines.length) {
+                let lineStr = lines[lineIndex];
+                // Truncate if too long (TODO: Horizontal scroll?)
+                if (lineStr.length > innerWidth) {
+                    lineStr = lineStr.substring(0, innerWidth);
+                }
+                // Check if cursor is on this line
+                const lineStart = this.getLineStart(lines, lineIndex);
+                const lineEnd = lineStart + lines[lineIndex].length;
+                let displayStr = lineStr;
+                if (this.isFocused && this.cursorIndex >= lineStart && this.cursorIndex <= lineEnd) {
+                    // Cursor is on this line
+                    const col = this.cursorIndex - lineStart;
+                    if (col < innerWidth) {
+                        const charAtCursor = lineStr[col] || ' ';
+                        const before = lineStr.substring(0, col);
+                        const after = lineStr.substring(col + 1);
+                        displayStr = before + Styler_1.Styler.style(charAtCursor, 'bgGreen', 'black') + after;
+                    }
+                }
+                // Pad to clear
+                const remaining = innerWidth - Styler_1.Styler.len(displayStr);
+                const finalStr = displayStr + ' '.repeat(Math.max(0, remaining));
+                Screen_1.Screen.write(x + 1, y + 1 + i, finalStr);
+            }
+        }
+    }
+    getLineStart(lines, lineIndex) {
+        let start = 0;
+        for (let i = 0; i < lineIndex; i++) {
+            start += lines[i].length + 1;
+        }
+        return start;
+    }
+}
+exports.Textarea = Textarea;

package/dist/components/Tree.d.ts

@@ -0,0 +1,33 @@
+import { Focusable } from '../core/Focus';
+import * as readline from 'readline';
+export interface TreeNode {
+    name: string;
+    children?: TreeNode[];
+    info?: string;
+    expanded?: boolean;
+}
+export interface TreeOptions {
+    id: string;
+    root: TreeNode;
+    x: number;
+    y: number;
+    height?: number;
+    width?: number;
+}
+export declare class Tree implements Focusable {
+    id: string;
+    private root;
+    private options;
+    private isFocused;
+    private flatList;
+    private selectedIndex;
+    private scrollTop;
+    constructor(options: TreeOptions);
+    private recalculateFlatList;
+    focus(): void;
+    blur(): void;
+    handleKey(key: readline.Key): boolean;
+    private ensureVisible;
+    render(): void;
+    static render(node: TreeNode, prefix?: string, isLast?: boolean): void;
+}

package/dist/components/Tree.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+const Styler_1 = require("../core/Styler");
+const Screen_1 = require("../core/Screen");
+class Tree {
+    constructor(options) {
+        this.isFocused = false;
+        this.flatList = [];
+        this.selectedIndex = 0;
+        this.scrollTop = 0;
+        this.id = options.id;
+        this.options = { width: 50, ...options }; // Default width to 50
+        this.root = options.root;
+        // Ensure root is expanded by default?
+        this.root.expanded = true;
+        this.recalculateFlatList();
+    }
+    recalculateFlatList() {
+        this.flatList = [];
+        const traverse = (node, depth, parent) => {
+            this.flatList.push({ node, depth, parent });
+            if (node.children && node.expanded) {
+                node.children.forEach(child => traverse(child, depth + 1, node));
+            }
+        };
+        traverse(this.root, 0);
+    }
+    focus() {
+        this.isFocused = true;
+        this.render();
+    }
+    blur() {
+        this.isFocused = false;
+        this.render();
+    }
+    handleKey(key) {
+        if (!this.isFocused)
+            return false;
+        let consumed = false;
+        if (key.name === 'up') {
+            if (this.selectedIndex > 0) {
+                this.selectedIndex--;
+                this.ensureVisible();
+                consumed = true;
+            }
+        }
+        else if (key.name === 'down') {
+            if (this.selectedIndex < this.flatList.length - 1) {
+                this.selectedIndex++;
+                this.ensureVisible();
+                consumed = true;
+            }
+        }
+        else if (key.name === 'right') {
+            const current = this.flatList[this.selectedIndex];
+            if (current.node.children) {
+                if (!current.node.expanded) {
+                    current.node.expanded = true;
+                    this.recalculateFlatList();
+                    consumed = true;
+                }
+            }
+        }
+        else if (key.name === 'left') {
+            const current = this.flatList[this.selectedIndex];
+            if (current.node.children && current.node.expanded) {
+                current.node.expanded = false;
+                this.recalculateFlatList();
+                consumed = true;
+            }
+            else if (current.parent) {
+                // Move selection to parent
+                const parentIdx = this.flatList.findIndex(x => x.node === current.parent);
+                if (parentIdx !== -1) {
+                    this.selectedIndex = parentIdx;
+                    this.ensureVisible();
+                    consumed = true;
+                }
+            }
+        }
+        else if (key.name === 'enter') {
+            // Toggle expansion
+            const current = this.flatList[this.selectedIndex];
+            if (current.node.children) {
+                current.node.expanded = !current.node.expanded;
+                this.recalculateFlatList();
+                consumed = true;
+            }
+        }
+        if (consumed)
+            this.render();
+        return consumed;
+    }
+    ensureVisible() {
+        if (!this.options.height)
+            return;
+        const visibleHeight = this.options.height;
+        if (this.selectedIndex < this.scrollTop) {
+            this.scrollTop = this.selectedIndex;
+        }
+        else if (this.selectedIndex >= this.scrollTop + visibleHeight) {
+            this.scrollTop = this.selectedIndex - visibleHeight + 1;
+        }
+    }
+    render() {
+        const { x, y, height, width } = this.options;
+        const visibleHeight = height || this.flatList.length;
+        const renderWidth = width || 50;
+        // Clear area if possible? Or rely on overwrite.
+        // Assuming box drawing or clearing happens before or we write spaces.
+        for (let i = 0; i < visibleHeight; i++) {
+            const idx = i + this.scrollTop;
+            if (idx < this.flatList.length) {
+                const { node, depth } = this.flatList[idx];
+                const isSelected = idx === this.selectedIndex;
+                const indent = '  '.repeat(depth);
+                const icon = node.children ? (node.expanded ? '📂' : '📁') : '📄';
+                const prefix = isSelected ? (this.isFocused ? '❯ ' : '> ') : '  ';
+                let name = node.name;
+                if (isSelected && this.isFocused) {
+                    name = Styler_1.Styler.style(name, 'cyan', 'bold');
+                }
+                else if (isSelected) {
+                    name = Styler_1.Styler.style(name, 'white', 'bold');
+                }
+                else {
+                    name = Styler_1.Styler.style(name, 'dim');
+                }
+                // Note: Styler.style adds ansi codes. padEnd counts string length. 
+                // We should pad AFTER stripping, or be careful. 
+                // However, padEnd works on the full string including codes, so visual length will be shorter if we pad the colored string.
+                // We need to calculate how much padding to add based on visual length.
+                const content = `${prefix}${indent}${icon} ${name}`;
+                // This is still tricky because 'name' has codes.
+                // Simple hack: Write content, then clear rest of line manually.
+                // Or construct string without colors to measure length, then add padding.
+                const cleanName = node.name;
+                const cleanContent = `${prefix}${indent}${icon} ${cleanName}`; // Approximation
+                const visualLen = cleanContent.length; // Approximate
+                const padding = ' '.repeat(Math.max(0, renderWidth - visualLen));
+                Screen_1.Screen.write(x, y + i, content + padding);
+            }
+            else {
+                Screen_1.Screen.write(x, y + i, ' '.repeat(renderWidth));
+            }
+        }
+    }
+    // Compatibility Static Render (prints to console directly, not Screen.write at xy)
+    static render(node, prefix = '', isLast = true) {
+        // This is for CLI usage (console.log)
+        const connector = isLast ? '└── ' : '├── ';
+        const childPrefix = prefix + (isLast ? '    ' : '│   ');
+        const icon = node.children ? '📁' : '📄';
+        const info = node.info ? Styler_1.Styler.style(` (${node.info})`, 'dim') : '';
+        const name = node.children ? Styler_1.Styler.style(node.name, 'brightCyan', 'bold') : node.name;
+        console.log(`${Styler_1.Styler.style(prefix + connector, 'dim')}${icon} ${name}${info}`);
+        if (node.children) {
+            const children = node.children;
+            children.forEach((child, index) => {
+                Tree.render(child, childPrefix, index === children.length - 1);
+            });
+        }
+    }
+}
+exports.Tree = Tree;

package/dist/core/Component.d.ts

@@ -0,0 +1,6 @@
+export interface ComponentLifecycle {
+    init?(): void;
+    destroy?(): void;
+    onMount?(): void;
+    onUnmount?(): void;
+}

package/dist/core/Component.js

@@ -0,0 +1,5 @@
+"use strict";
+// ==========================================
+// CORE: COMPONENT LIFECYCLE
+// ==========================================
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/core/Cursor.d.ts

@@ -0,0 +1,7 @@
+export declare class Cursor {
+    static hide(): void;
+    static show(): void;
+    static moveTo(x: number, y: number): void;
+    static clearLine(): void;
+    static clearScreen(): void;
+}