mepcli 0.4.0 → 0.5.0

package/README.md

@@ -5,7 +5,7 @@
 ## Features
 
 - **Zero Dependency:** Keeps your project clean and fast.
-- **Comprehensive Prompts:** Includes `text`, `password`, `select`, `checkbox`, `confirm`, `number`, `toggle`, `list`, `slider`, `date`, `file`, `multiSelect`, and `rating`.
+- **Comprehensive Prompts:** Includes `text`, `password`, `select`, `checkbox`, `confirm`, `number`, `toggle`, `list`, `slider`, `date`, `file`, `multiSelect`, `autocomplete`, `sort`, `table`, and `rating`.
 - **Mouse Support:** Built-in support for mouse interaction (SGR 1006 protocol). Scroll to navigate lists or change values; click to select.
 - **Responsive Input:** Supports cursor movement (Left/Right) and character insertion/deletion in text-based prompts.
 - **Validation:** Built-in support for input validation (sync and async) with custom error messages.
@@ -75,7 +75,36 @@ async function main() {
         initial: 5
     });
 
-    console.log({ name, age, newsletter, lang, tools, stars });
+    // Autocomplete (Search)
+    const city = await MepCLI.autocomplete({
+        message: "Search for a city:",
+        suggest: async (query) => {
+            const cities = [
+                { title: "New York", value: "NY" },
+                { title: "London", value: "LDN" },
+                { title: "Paris", value: "PAR" }
+            ];
+            return cities.filter(c => c.title.toLowerCase().includes(query.toLowerCase()));
+        }
+    });
+
+    // Sort (Drag & Drop)
+    const priorities = await MepCLI.sort({
+        message: "Rank priorities:",
+        items: ["Speed", "Quality", "Cost"]
+    });
+
+    // Table (Data selection)
+    const user = await MepCLI.table({
+        message: "Select a user:",
+        columns: ["ID", "Name"],
+        data: [
+            { value: 1, row: ["001", "Alice"] },
+            { value: 2, row: ["002", "Bob"] }
+        ]
+    });
+
+    console.log({ name, age, newsletter, lang, tools, stars, city, priorities, user });
 }
 
 main();
@@ -98,15 +127,19 @@ main();
 *   `rating(options)` - Star rating input.
 *   `date(options)` - Date and time picker.
 *   `file(options)` - File system navigator and selector.
-*   `spin(message, promise)` - Display a spinner while waiting for a promise.
+*   `autocomplete(options)` - Searchable selection with async suggestions.
+*   `sort(options)` - Reorder a list of items.
+*   `table(options)` - Display data in columns and select rows.
+*   `spinner(message)` - Returns a `Spinner` instance for manual control (`start`, `stop`, `update`, `success`, `error`).
 
 ## Mouse Support
 
 MepCLI automatically detects modern terminals and enables **Mouse Tracking** (using SGR 1006 protocol).
 
 *   **Scrolling:**
-    *   `select`, `multiSelect`, `checkbox`: Scroll to navigate the list.
+    *   `select`, `multiSelect`, `checkbox`, `autocomplete`, `table`: Scroll to navigate the list.
     *   `number`, `slider`, `rating`, `date`: Scroll to increment/decrement values or fields.
+    *   `sort`: Scroll to navigate or reorder items (when grabbed).
     *   `toggle`, `confirm`: Scroll to toggle the state.
 *   **Configuration:**
     *   Mouse support is enabled by default if the terminal supports it.

package/dist/core.d.ts

@@ -1,13 +1,14 @@
-import { TextOptions, SelectOptions, ConfirmOptions, CheckboxOptions, ThemeConfig, NumberOptions, ToggleOptions, ListOptions, SliderOptions, DateOptions, FileOptions, MultiSelectOptions, RatingOptions } from './types';
+import { TextOptions, SelectOptions, ConfirmOptions, CheckboxOptions, ThemeConfig, NumberOptions, ToggleOptions, ListOptions, SliderOptions, DateOptions, FileOptions, MultiSelectOptions, RatingOptions, AutocompleteOptions, SortOptions, TableOptions } from './types';
+import { Spinner } from './spinner';
 /**
  * Public Facade for MepCLI
  */
 export declare class MepCLI {
     static theme: ThemeConfig;
     /**
-     * Shows a spinner while a promise is pending.
+     * Creates a new Spinner instance.
      */
-    static spin<T>(message: string, taskPromise: Promise<T>): Promise<T>;
+    static spinner(message: string): Spinner;
     static text(options: TextOptions): Promise<string>;
     static select<const V>(options: SelectOptions<V>): Promise<V>;
     static checkbox<const V>(options: CheckboxOptions<V>): Promise<V[]>;
@@ -21,4 +22,7 @@ export declare class MepCLI {
     static file(options: FileOptions): Promise<string>;
     static multiSelect<const V>(options: MultiSelectOptions<V>): Promise<V[]>;
     static rating(options: RatingOptions): Promise<number>;
+    static autocomplete<const V>(options: AutocompleteOptions<V>): Promise<V>;
+    static sort(options: SortOptions): Promise<string[]>;
+    static table<const V>(options: TableOptions<V>): Promise<V>;
 }

package/dist/core.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MepCLI = void 0;
-const ansi_1 = require("./ansi");
 const theme_1 = require("./theme");
-const symbols_1 = require("./symbols");
+const spinner_1 = require("./spinner");
 const text_1 = require("./prompts/text");
 const select_1 = require("./prompts/select");
 const checkbox_1 = require("./prompts/checkbox");
@@ -16,34 +15,18 @@ const date_1 = require("./prompts/date");
 const file_1 = require("./prompts/file");
 const multi_select_1 = require("./prompts/multi-select");
 const rating_1 = require("./prompts/rating");
+const autocomplete_1 = require("./prompts/autocomplete");
+const sort_1 = require("./prompts/sort");
+const table_1 = require("./prompts/table");
 /**
  * Public Facade for MepCLI
  */
 class MepCLI {
     /**
-     * Shows a spinner while a promise is pending.
+     * Creates a new Spinner instance.
      */
-    static async spin(message, taskPromise) {
-        const frames = symbols_1.symbols.spinner;
-        let i = 0;
-        process.stdout.write(ansi_1.ANSI.HIDE_CURSOR);
-        const interval = setInterval(() => {
-            process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}${MepCLI.theme.main}${frames[i]}${ansi_1.ANSI.RESET} ${message}`);
-            i = (i + 1) % frames.length;
-        }, 80);
-        try {
-            const result = await taskPromise;
-            clearInterval(interval);
-            process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}${MepCLI.theme.success}${symbols_1.symbols.tick}${ansi_1.ANSI.RESET} ${message}\n`);
-            process.stdout.write(ansi_1.ANSI.SHOW_CURSOR);
-            return result;
-        }
-        catch (error) {
-            clearInterval(interval);
-            process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}${MepCLI.theme.error}${symbols_1.symbols.cross}${ansi_1.ANSI.RESET} ${message}\n`);
-            process.stdout.write(ansi_1.ANSI.SHOW_CURSOR);
-            throw error;
-        }
+    static spinner(message) {
+        return new spinner_1.Spinner(message);
     }
     static text(options) {
         return new text_1.TextPrompt(options).run();
@@ -84,6 +67,15 @@ class MepCLI {
     static rating(options) {
         return new rating_1.RatingPrompt(options).run();
     }
+    static autocomplete(options) {
+        return new autocomplete_1.AutocompletePrompt(options).run();
+    }
+    static sort(options) {
+        return new sort_1.SortPrompt(options).run();
+    }
+    static table(options) {
+        return new table_1.TablePrompt(options).run();
+    }
 }
 exports.MepCLI = MepCLI;
 MepCLI.theme = theme_1.theme;

package/dist/prompts/autocomplete.d.ts

@@ -0,0 +1,22 @@
+import { Prompt } from '../base';
+import { AutocompleteOptions, MouseEvent } from '../types';
+export declare class AutocompletePrompt<V> extends Prompt<V, AutocompleteOptions<V>> {
+    private input;
+    private choices;
+    private selectedIndex;
+    private loading;
+    private debounceTimer?;
+    private spinnerFrame;
+    private spinnerTimer?;
+    private scrollTop;
+    private readonly pageSize;
+    private hasSearched;
+    constructor(options: AutocompleteOptions<V>);
+    private search;
+    private startSpinner;
+    private stopSpinner;
+    protected cleanup(): void;
+    protected render(firstRender: boolean): void;
+    protected handleInput(char: string): void;
+    protected handleMouse(event: MouseEvent): void;
+}

package/dist/prompts/autocomplete.js

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutocompletePrompt = void 0;
+const ansi_1 = require("../ansi");
+const base_1 = require("../base");
+const theme_1 = require("../theme");
+const symbols_1 = require("../symbols");
+const utils_1 = require("../utils");
+class AutocompletePrompt extends base_1.Prompt {
+    constructor(options) {
+        super(options);
+        this.input = '';
+        this.choices = [];
+        this.selectedIndex = 0;
+        this.loading = false;
+        this.spinnerFrame = 0;
+        this.scrollTop = 0;
+        this.pageSize = 7;
+        this.hasSearched = false;
+        this.input = options.initial || '';
+        this.search(this.input);
+    }
+    search(query) {
+        if (this.debounceTimer)
+            clearTimeout(this.debounceTimer);
+        this.loading = true;
+        this.startSpinner();
+        this.render(false);
+        this.debounceTimer = setTimeout(async () => {
+            try {
+                const results = await this.options.suggest(query);
+                if (query !== this.input)
+                    return;
+                this.choices = results.slice(0, this.options.limit || 10);
+                this.selectedIndex = 0;
+                this.scrollTop = 0;
+                this.hasSearched = true;
+            }
+            catch (err) {
+                this.choices = [];
+            }
+            finally {
+                this.loading = false;
+                this.stopSpinner();
+                this.render(false);
+            }
+        }, 300); // 300ms debounce
+    }
+    startSpinner() {
+        if (this.spinnerTimer)
+            return;
+        this.spinnerTimer = setInterval(() => {
+            this.spinnerFrame = (this.spinnerFrame + 1) % symbols_1.symbols.spinner.length;
+            this.render(false);
+        }, 80);
+    }
+    stopSpinner() {
+        if (this.spinnerTimer) {
+            clearInterval(this.spinnerTimer);
+            this.spinnerTimer = undefined;
+        }
+    }
+    cleanup() {
+        this.stopSpinner();
+        super.cleanup();
+    }
+    render(firstRender) {
+        // --- FIX START: Restore cursor position ---
+        // renderFrame() in Base assumes the cursor is at the bottom of the output.
+        // Since Autocomplete moves the cursor to the top (for input) after rendering,
+        // we must manually move it back down before the next render cycle.
+        if (this.lastRenderHeight > 1) {
+            this.print(`\x1b[${this.lastRenderHeight - 1}B`); // Move down
+        }
+        // --- FIX END ---
+        let output = '';
+        // Header
+        const icon = this.loading ? `${theme_1.theme.main}${symbols_1.symbols.spinner[this.spinnerFrame]}${ansi_1.ANSI.RESET}` : `${theme_1.theme.success}?${ansi_1.ANSI.RESET}`;
+        output += `${icon} ${ansi_1.ANSI.BOLD}${theme_1.theme.title}${this.options.message}${ansi_1.ANSI.RESET} ${this.input}`;
+        output += '\n';
+        if (this.loading) {
+            output += `  ${theme_1.theme.muted}Searching...${ansi_1.ANSI.RESET}`;
+        }
+        else if (this.choices.length === 0 && this.hasSearched) {
+            output += `  ${theme_1.theme.muted}${this.options.fallback || 'No results found.'}${ansi_1.ANSI.RESET}`;
+        }
+        else if (this.choices.length > 0) {
+            // Render list similar to SelectPrompt
+            if (this.selectedIndex < this.scrollTop) {
+                this.scrollTop = this.selectedIndex;
+            }
+            else if (this.selectedIndex >= this.scrollTop + this.pageSize) {
+                this.scrollTop = this.selectedIndex - this.pageSize + 1;
+            }
+            const visibleChoices = this.choices.slice(this.scrollTop, this.scrollTop + this.pageSize);
+            visibleChoices.forEach((choice, index) => {
+                const actualIndex = this.scrollTop + index;
+                if (index > 0)
+                    output += '\n';
+                if (actualIndex === this.selectedIndex) {
+                    output += `${theme_1.theme.main}${symbols_1.symbols.pointer} ${choice.title}${ansi_1.ANSI.RESET}`;
+                }
+                else {
+                    output += `  ${choice.title}`;
+                }
+            });
+        }
+        this.renderFrame(output);
+        // Position cursor at the end of the input string on the first line
+        const lines = output.split('\n');
+        const height = lines.length;
+        // Move up (height - 1)
+        if (height > 1) {
+            this.print(`\x1b[${height - 1}A`);
+        }
+        this.print(`\r`);
+        const firstLine = lines[0];
+        const visualLen = (0, utils_1.stringWidth)(this.stripAnsi(firstLine));
+        this.print(`\x1b[${visualLen}C`);
+        this.print(ansi_1.ANSI.SHOW_CURSOR);
+    }
+    handleInput(char) {
+        // Enter
+        if (char === '\r' || char === '\n') {
+            if (this.choices.length > 0) {
+                this.submit(this.choices[this.selectedIndex].value);
+            }
+            return;
+        }
+        // Backspace
+        if (char === '\u0008' || char === '\x7f') {
+            if (this.input.length > 0) {
+                this.input = this.input.slice(0, -1);
+                this.search(this.input);
+            }
+            return;
+        }
+        // Up
+        if (this.isUp(char)) {
+            if (this.choices.length > 0) {
+                this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : this.choices.length - 1;
+                this.render(false);
+            }
+            return;
+        }
+        // Down
+        if (this.isDown(char)) {
+            if (this.choices.length > 0) {
+                this.selectedIndex = this.selectedIndex < this.choices.length - 1 ? this.selectedIndex + 1 : 0;
+                this.render(false);
+            }
+            return;
+        }
+        // Typing
+        if (char.length === 1 && !/^[\x00-\x1F]/.test(char)) {
+            this.input += char;
+            this.search(this.input);
+        }
+    }
+    handleMouse(event) {
+        if (this.choices.length === 0)
+            return;
+        if (event.action === 'scroll') {
+            if (event.scroll === 'up') {
+                this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : this.choices.length - 1;
+                this.render(false);
+            }
+            else if (event.scroll === 'down') {
+                this.selectedIndex = this.selectedIndex < this.choices.length - 1 ? this.selectedIndex + 1 : 0;
+                this.render(false);
+            }
+        }
+    }
+}
+exports.AutocompletePrompt = AutocompletePrompt;

package/dist/prompts/checkbox.js

@@ -51,10 +51,6 @@ class CheckboxPrompt extends base_1.Prompt {
         // Indication of more items
         if (choices.length > this.pageSize) {
             const progress = ` ${this.scrollTop + 1}-${Math.min(this.scrollTop + this.pageSize, choices.length)} of ${choices.length}`;
-            // Maybe add this to the header or footer?
-            // Let's add it to footer or header. Adding to header is cleaner.
-            // But I already wrote header.
-            // Let's just append it at the bottom if I want, or ignore for now to keep UI minimal.
         }
         if (this.errorMsg) {
             output += `\n${theme_1.theme.error}>> ${this.errorMsg}${ansi_1.ANSI.RESET}`;

package/dist/prompts/file.js

@@ -131,12 +131,6 @@ class FilePrompt extends base_1.Prompt {
         // Move right
         const prefix = `${icon} ${theme_1.theme.title}${this.options.message} `;
         const prefixLen = this.stripAnsi(prefix).length;
-        // Cursor is usually at the end of input unless we add backspace support etc.
-        // The cursor property tracks it, but my handleInput simplified it.
-        // Let's rely on this.input.length for now since handleInput appends.
-        // Ah, handleInput logic below supports cursor pos theoretically but I only see appending?
-        // Actually handleInput doesn't support left/right in the original code, it supports down/up for suggestions.
-        // So cursor is always at end.
         const targetCol = prefixLen + this.input.length;
         this.print(ansi_1.ANSI.CURSOR_LEFT);
         if (targetCol > 0)

package/dist/prompts/sort.d.ts

@@ -0,0 +1,14 @@
+import { Prompt } from '../base';
+import { SortOptions, MouseEvent } from '../types';
+export declare class SortPrompt extends Prompt<string[], SortOptions> {
+    private items;
+    private selectedIndex;
+    private grabbedIndex;
+    private scrollTop;
+    private readonly pageSize;
+    constructor(options: SortOptions);
+    protected render(firstRender: boolean): void;
+    protected handleInput(char: string): void;
+    private swap;
+    protected handleMouse(event: MouseEvent): void;
+}

package/dist/prompts/sort.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortPrompt = void 0;
+const ansi_1 = require("../ansi");
+const base_1 = require("../base");
+const theme_1 = require("../theme");
+const symbols_1 = require("../symbols");
+class SortPrompt extends base_1.Prompt {
+    constructor(options) {
+        super(options);
+        this.selectedIndex = 0;
+        this.grabbedIndex = null;
+        this.scrollTop = 0;
+        this.pageSize = 10;
+        this.items = [...options.items];
+    }
+    render(firstRender) {
+        // Adjust Scroll Top
+        if (this.selectedIndex < this.scrollTop) {
+            this.scrollTop = this.selectedIndex;
+        }
+        else if (this.selectedIndex >= this.scrollTop + this.pageSize) {
+            this.scrollTop = this.selectedIndex - this.pageSize + 1;
+        }
+        // Ensure valid scroll (handle list shrinking?) - list doesn't shrink here but good practice
+        this.scrollTop = Math.max(0, Math.min(this.scrollTop, this.items.length - this.pageSize));
+        if (this.scrollTop < 0)
+            this.scrollTop = 0;
+        let output = '';
+        // Header
+        output += `${theme_1.theme.success}?${ansi_1.ANSI.RESET} ${ansi_1.ANSI.BOLD}${theme_1.theme.title}${this.options.message}${ansi_1.ANSI.RESET} ${theme_1.theme.muted}(Press <space> to grab, arrows to move, <enter> to confirm)${ansi_1.ANSI.RESET}\n`;
+        const visibleItems = this.items.slice(this.scrollTop, this.scrollTop + this.pageSize);
+        visibleItems.forEach((item, index) => {
+            const actualIndex = this.scrollTop + index;
+            if (index > 0)
+                output += '\n';
+            const isSelected = actualIndex === this.selectedIndex;
+            const isGrabbed = actualIndex === this.grabbedIndex;
+            // Pointer
+            let prefix = '  ';
+            if (isSelected) {
+                if (isGrabbed) {
+                    prefix = `${theme_1.theme.main}${symbols_1.symbols.pointer}${symbols_1.symbols.pointer} `; // Double pointer for grabbed?
+                }
+                else {
+                    prefix = `${theme_1.theme.main}${symbols_1.symbols.pointer} `;
+                }
+            }
+            else if (isGrabbed) {
+                // Should not happen if we move grabbed item with cursor
+                // But if logic differs, maybe.
+            }
+            // Item Content
+            let content = item;
+            if (isGrabbed) {
+                content = `${ansi_1.ANSI.BOLD}${theme_1.theme.main}${content}${ansi_1.ANSI.RESET}`;
+            }
+            else if (isSelected) {
+                content = `${theme_1.theme.main}${content}${ansi_1.ANSI.RESET}`;
+            }
+            // Index indicator? Maybe not needed, minimalist.
+            output += `${prefix}${content}`;
+        });
+        this.renderFrame(output);
+    }
+    handleInput(char) {
+        // Enter
+        if (char === '\r' || char === '\n') {
+            this.submit(this.items);
+            return;
+        }
+        // Space (Grab/Drop)
+        if (char === ' ') {
+            if (this.grabbedIndex === null) {
+                this.grabbedIndex = this.selectedIndex;
+            }
+            else {
+                this.grabbedIndex = null;
+            }
+            this.render(false);
+            return;
+        }
+        // Up
+        if (this.isUp(char)) {
+            if (this.grabbedIndex !== null) {
+                // Move item up
+                if (this.selectedIndex > 0) {
+                    const newIndex = this.selectedIndex - 1;
+                    this.swap(this.selectedIndex, newIndex);
+                    this.selectedIndex = newIndex;
+                    this.grabbedIndex = newIndex;
+                }
+            }
+            else {
+                // Move cursor up
+                this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : this.items.length - 1;
+            }
+            this.render(false);
+            return;
+        }
+        // Down
+        if (this.isDown(char)) {
+            if (this.grabbedIndex !== null) {
+                // Move item down
+                if (this.selectedIndex < this.items.length - 1) {
+                    const newIndex = this.selectedIndex + 1;
+                    this.swap(this.selectedIndex, newIndex);
+                    this.selectedIndex = newIndex;
+                    this.grabbedIndex = newIndex;
+                }
+            }
+            else {
+                // Move cursor down
+                this.selectedIndex = this.selectedIndex < this.items.length - 1 ? this.selectedIndex + 1 : 0;
+            }
+            this.render(false);
+            return;
+        }
+    }
+    swap(i, j) {
+        [this.items[i], this.items[j]] = [this.items[j], this.items[i]];
+    }
+    // Mouse support? 
+    // Drag and drop is hard with just clicks/scroll. 
+    // Maybe click to grab, scroll to move?
+    handleMouse(event) {
+        // Simple scroll support for navigation
+        if (event.action === 'scroll') {
+            if (event.scroll === 'up') {
+                if (this.grabbedIndex !== null) {
+                    if (this.selectedIndex > 0) {
+                        const newIndex = this.selectedIndex - 1;
+                        this.swap(this.selectedIndex, newIndex);
+                        this.selectedIndex = newIndex;
+                        this.grabbedIndex = newIndex;
+                    }
+                }
+                else {
+                    this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : this.items.length - 1;
+                }
+                this.render(false);
+            }
+            else if (event.scroll === 'down') {
+                if (this.grabbedIndex !== null) {
+                    if (this.selectedIndex < this.items.length - 1) {
+                        const newIndex = this.selectedIndex + 1;
+                        this.swap(this.selectedIndex, newIndex);
+                        this.selectedIndex = newIndex;
+                        this.grabbedIndex = newIndex;
+                    }
+                }
+                else {
+                    this.selectedIndex = this.selectedIndex < this.items.length - 1 ? this.selectedIndex + 1 : 0;
+                }
+                this.render(false);
+            }
+        }
+    }
+}
+exports.SortPrompt = SortPrompt;

package/dist/prompts/table.d.ts

@@ -0,0 +1,14 @@
+import { Prompt } from '../base';
+import { TableOptions, MouseEvent } from '../types';
+export declare class TablePrompt<V> extends Prompt<V, TableOptions<V>> {
+    private selectedIndex;
+    private scrollTop;
+    private readonly pageSize;
+    private colWidths;
+    constructor(options: TableOptions<V>);
+    private calculateColWidths;
+    protected render(firstRender: boolean): void;
+    private pad;
+    protected handleInput(char: string): void;
+    protected handleMouse(event: MouseEvent): void;
+}

package/dist/prompts/table.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TablePrompt = void 0;
+const ansi_1 = require("../ansi");
+const base_1 = require("../base");
+const theme_1 = require("../theme");
+const symbols_1 = require("../symbols");
+const utils_1 = require("../utils");
+class TablePrompt extends base_1.Prompt {
+    constructor(options) {
+        super(options);
+        this.selectedIndex = 0;
+        this.scrollTop = 0;
+        this.colWidths = [];
+        this.pageSize = options.rows || 7;
+        this.calculateColWidths();
+    }
+    calculateColWidths() {
+        const { columns, data } = this.options;
+        this.colWidths = columns.map(c => (0, utils_1.stringWidth)(c));
+        data.forEach(row => {
+            row.row.forEach((cell, idx) => {
+                if (idx < this.colWidths.length) {
+                    this.colWidths[idx] = Math.max(this.colWidths[idx], (0, utils_1.stringWidth)(cell));
+                }
+            });
+        });
+        // Add padding
+        this.colWidths = this.colWidths.map(w => w + 2);
+    }
+    render(firstRender) {
+        // Scroll Logic
+        if (this.selectedIndex < this.scrollTop) {
+            this.scrollTop = this.selectedIndex;
+        }
+        else if (this.selectedIndex >= this.scrollTop + this.pageSize) {
+            this.scrollTop = this.selectedIndex - this.pageSize + 1;
+        }
+        const maxScroll = Math.max(0, this.options.data.length - this.pageSize);
+        this.scrollTop = Math.min(this.scrollTop, maxScroll);
+        let output = '';
+        // Title
+        output += `${theme_1.theme.success}?${ansi_1.ANSI.RESET} ${ansi_1.ANSI.BOLD}${theme_1.theme.title}${this.options.message}${ansi_1.ANSI.RESET}\n`;
+        // Table Header
+        let headerStr = '  '; // Indent for pointer space
+        this.options.columns.forEach((col, i) => {
+            headerStr += this.pad(col, this.colWidths[i]);
+        });
+        output += `${ansi_1.ANSI.BOLD}${headerStr}${ansi_1.ANSI.RESET}\n`;
+        // Table Body
+        const visibleRows = this.options.data.slice(this.scrollTop, this.scrollTop + this.pageSize);
+        visibleRows.forEach((item, index) => {
+            const actualIndex = this.scrollTop + index;
+            if (index > 0)
+                output += '\n';
+            const isSelected = actualIndex === this.selectedIndex;
+            const pointer = isSelected ? `${theme_1.theme.main}${symbols_1.symbols.pointer}${ansi_1.ANSI.RESET} ` : '  ';
+            let rowStr = '';
+            item.row.forEach((cell, colIdx) => {
+                const width = this.colWidths[colIdx];
+                let cellStr = this.pad(cell, width);
+                if (isSelected) {
+                    cellStr = `${theme_1.theme.main}${cellStr}${ansi_1.ANSI.RESET}`;
+                }
+                rowStr += cellStr;
+            });
+            output += `${pointer}${rowStr}`;
+        });
+        this.renderFrame(output);
+    }
+    pad(str, width) {
+        const len = (0, utils_1.stringWidth)(str);
+        if (len >= width)
+            return str;
+        return str + ' '.repeat(width - len);
+    }
+    handleInput(char) {
+        if (char === '\r' || char === '\n') {
+            this.submit(this.options.data[this.selectedIndex].value);
+            return;
+        }
+        if (this.isUp(char)) {
+            this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : this.options.data.length - 1;
+            this.render(false);
+            return;
+        }
+        if (this.isDown(char)) {
+            this.selectedIndex = this.selectedIndex < this.options.data.length - 1 ? this.selectedIndex + 1 : 0;
+            this.render(false);
+            return;
+        }
+    }
+    handleMouse(event) {
+        if (event.action === 'scroll') {
+            if (event.scroll === 'up') {
+                this.selectedIndex = this.selectedIndex > 0 ? this.selectedIndex - 1 : this.options.data.length - 1;
+                this.render(false);
+            }
+            else if (event.scroll === 'down') {
+                this.selectedIndex = this.selectedIndex < this.options.data.length - 1 ? this.selectedIndex + 1 : 0;
+                this.render(false);
+            }
+        }
+    }
+}
+exports.TablePrompt = TablePrompt;

package/dist/prompts/text.js

@@ -118,25 +118,6 @@ class TextPrompt extends base_1.Prompt {
                 // But cursorRelativeCol is global? No, we reset it on newline.
                 // So cursorRelativeCol above was correct for the current line.
                 if (isCursorLine) {
-                    // Check if we need to scroll
-                    // We need visual width of the line up to cursor.
-                    // cursorRelativeCol holds that.
-                    // If visual position > maxContentLen, we scroll.
-                    // This logic is similar to before but needs to use widths.
-                    // For simplicity, let's stick to the previous slice logic but apply it to SEGMENTS if possible.
-                    // But slicing segments for display is safer.
-                    // Let's implement simple tail truncation for now to keep it robust.
-                    // Ideally we scroll, but scrolling with variable width chars is complex.
-                    // "Good Enough": if it fits, show it. If not, truncate end.
-                    // If cursor is beyond end, scroll (slice from left).
-                    // Simplified: just show visibleLine truncated by base class renderFrame?
-                    // But renderFrame truncates blindly. We want the cursor visible.
-                    // Let's leave scrolling out for this specific "Backspace" fix task unless it's critical.
-                    // The user asked for "Backspace Emoji fix".
-                    // The scrolling logic is secondary but important.
-                    // I will preserve the existing simple scrolling logic but using segments?
-                    // No, let's just use the string for display and let renderFrame truncate.
-                    // Fix: Ensure we don't crash or show garbage.
                 }
                 displayValueLines.push(theme_1.theme.main + visibleLine + ansi_1.ANSI.RESET);
             });

package/dist/spinner.d.ts

@@ -0,0 +1,33 @@
+export declare class Spinner {
+    private text;
+    private timer?;
+    private frameIndex;
+    private isSpinning;
+    constructor(text: string);
+    /**
+     * Starts the spinner animation.
+     */
+    start(): this;
+    /**
+     * Stops the spinner animation.
+     */
+    stop(): this;
+    /**
+     * Updates the spinner text.
+     */
+    update(text: string): this;
+    /**
+     * Stops the spinner and shows a success message.
+     */
+    success(message?: string): this;
+    /**
+     * Stops the spinner and shows an error message.
+     */
+    error(message?: string): this;
+    /**
+     * Stops the spinner and clears the line.
+     */
+    clear(): this;
+    private render;
+    private handleSignal;
+}

package/dist/spinner.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const ansi_1 = require("./ansi");
+const symbols_1 = require("./symbols");
+const theme_1 = require("./theme");
+class Spinner {
+    constructor(text) {
+        this.frameIndex = 0;
+        this.isSpinning = false;
+        this.handleSignal = () => {
+            this.stop();
+            process.exit(0);
+        };
+        this.text = text;
+    }
+    /**
+     * Starts the spinner animation.
+     */
+    start() {
+        if (this.isSpinning)
+            return this;
+        this.isSpinning = true;
+        process.stdout.write(ansi_1.ANSI.HIDE_CURSOR);
+        // Render immediately
+        this.render();
+        // Start loop
+        this.timer = setInterval(() => {
+            this.render();
+        }, 80);
+        // Register signal handler to restore cursor on Ctrl+C
+        process.on('SIGINT', this.handleSignal);
+        return this;
+    }
+    /**
+     * Stops the spinner animation.
+     */
+    stop() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+        if (this.isSpinning) {
+            this.isSpinning = false;
+            process.stdout.write(ansi_1.ANSI.SHOW_CURSOR);
+            process.removeListener('SIGINT', this.handleSignal);
+        }
+        return this;
+    }
+    /**
+     * Updates the spinner text.
+     */
+    update(text) {
+        this.text = text;
+        return this;
+    }
+    /**
+     * Stops the spinner and shows a success message.
+     */
+    success(message) {
+        this.stop();
+        const text = message ?? this.text;
+        process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}${theme_1.theme.success}${symbols_1.symbols.tick}${ansi_1.ANSI.RESET} ${text}\n`);
+        return this;
+    }
+    /**
+     * Stops the spinner and shows an error message.
+     */
+    error(message) {
+        this.stop();
+        const text = message ?? this.text;
+        process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}${theme_1.theme.error}${symbols_1.symbols.cross}${ansi_1.ANSI.RESET} ${text}\n`);
+        return this;
+    }
+    /**
+     * Stops the spinner and clears the line.
+     */
+    clear() {
+        this.stop();
+        process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}`);
+        return this;
+    }
+    render() {
+        const frame = symbols_1.symbols.spinner[this.frameIndex];
+        process.stdout.write(`${ansi_1.ANSI.ERASE_LINE}${ansi_1.ANSI.CURSOR_LEFT}${theme_1.theme.main}${frame}${ansi_1.ANSI.RESET} ${this.text}`);
+        this.frameIndex = (this.frameIndex + 1) % symbols_1.symbols.spinner.length;
+    }
+}
+exports.Spinner = Spinner;

package/dist/types.d.ts

@@ -91,3 +91,21 @@ export interface FileOptions extends BaseOptions {
 }
 export interface MultiSelectOptions<V> extends CheckboxOptions<V> {
 }
+export interface AutocompleteOptions<V> extends BaseOptions {
+    suggest: (input: string) => Promise<SelectChoice<V>[]>;
+    limit?: number;
+    fallback?: string;
+    initial?: string;
+}
+export interface SortOptions extends BaseOptions {
+    items: string[];
+}
+export interface TableRow<V> {
+    value: V;
+    row: string[];
+}
+export interface TableOptions<V> extends BaseOptions {
+    columns: string[];
+    data: TableRow<V>[];
+    rows?: number;
+}

package/example.ts

@@ -4,11 +4,11 @@ import { MepCLI } from './src'; // Or 'mepcli' if installed via NPM
  * Runs a comprehensive demo showcasing all MepCLI prompt types and utilities.
  * This demonstrates all core functionalities including Text, Password, Select,
  * Checkbox, Number, Toggle, Confirm, List, Slider, Date, File, MultiSelect,
- * and the Spin utility.
+ * Autocomplete, Sort, Table, and the Spin utility.
  */
 async function runComprehensiveDemo() {
     console.clear();
-    console.log("--- MepCLI Comprehensive Demo (All 12 Prompts + Spin Utility) ---\n");
+    console.log("--- MepCLI Comprehensive Demo (All 15 Prompts + Spin Utility) ---\n");
 
     try {
         // --- 1. Text Prompt (Input with Validation and initial value) ---
@@ -137,18 +137,58 @@ async function runComprehensiveDemo() {
         });
         console.log(`\n✅ MultiSelect Result: Linters: [${linters.join(', ')}]`);
 
-        // --- 13. Confirm Prompt (Simple Yes/No) ---
+        // --- 13. Autocomplete Prompt (New) ---
+        const city = await MepCLI.autocomplete({
+            message: "Search for a city (simulated async):",
+            suggest: async (query) => {
+                const cities = [
+                    { title: "New York", value: "NY" },
+                    { title: "London", value: "LDN" },
+                    { title: "Paris", value: "PAR" },
+                    { title: "Tokyo", value: "TKY" },
+                    { title: "Berlin", value: "BER" },
+                    { title: "San Francisco", value: "SF" },
+                    { title: "Toronto", value: "TOR" }
+                ];
+                // Simulate delay
+                await new Promise(r => setTimeout(r, 400));
+                return cities.filter(c => c.title.toLowerCase().includes(query.toLowerCase()));
+            }
+        });
+        console.log(`\n✅ Autocomplete Result: City code: ${city}`);
+
+        // --- 14. Sort Prompt (New) ---
+        const priorities = await MepCLI.sort({
+            message: "Rank your top priorities (Space to grab/drop, Arrows to move):",
+            items: ["Performance", "Security", "Features", "Usability", "Cost"]
+        });
+        console.log(`\n✅ Sort Result: Priorities: [${priorities.join(', ')}]`);
+
+        // --- 15. Table Prompt (New) ---
+        const userId = await MepCLI.table({
+            message: "Select a user from the database:",
+            columns: ["ID", "Name", "Role", "Status"],
+            data: [
+                { value: 1, row: ["001", "Alice", "Admin", "Active"] },
+                { value: 2, row: ["002", "Bob", "Dev", "Offline"] },
+                { value: 3, row: ["003", "Charlie", "User", "Active"] },
+                { value: 4, row: ["004", "David", "Manager", "Active"] },
+            ]
+        });
+        console.log(`\n✅ Table Result: Selected User ID: ${userId}`);
+
+        // --- 16. Confirm Prompt (Simple Yes/No) ---
         const proceed = await MepCLI.confirm({
             message: "Ready to deploy the project now?",
             initial: true
         });
         console.log(`\n✅ Confirm Result: Deployment decision: ${proceed ? 'Proceed' : 'Cancel'}`);
 
-        // --- 14. Spin Utility (Loading/Async Task Indicator) ---
-        await MepCLI.spin(
-            "Finalizing configuration and deploying...",
-            new Promise(resolve => setTimeout(resolve, 1500)) // Simulates a 1.5 second async task
-        );
+        // --- 17. Spin Utility (Loading/Async Task Indicator) ---
+        const s = MepCLI.spinner("Finalizing configuration and deploying...").start();
+        await new Promise(resolve => setTimeout(resolve, 1500)); // Simulates a 1.5 second async task
+        s.success();
+        
         console.log("\n--- Deployment successful! All MepCLI features demonstrated! ---");
 
     } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mepcli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Zero-dependency, minimalist interactive CLI prompt for Node.js",
   "repository": {
     "type": "git",