cli-menu-kit 0.1.26 → 0.2.1

package/dist/components/menus/checkbox-table-menu.js

@@ -0,0 +1,398 @@
+"use strict";
+/**
+ * CheckboxTableMenu - Multi-select menu with table display
+ * Combines checkbox selection with formatted table layout
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showCheckboxTableMenu = showCheckboxTableMenu;
+const terminal_js_1 = require("../../core/terminal.js");
+const keyboard_js_1 = require("../../core/keyboard.js");
+const renderer_js_1 = require("../../core/renderer.js");
+const colors_js_1 = require("../../core/colors.js");
+const registry_js_1 = require("../../i18n/registry.js");
+const virtual_scroll_js_1 = require("../../core/virtual-scroll.js");
+/**
+ * Calculate column widths based on content
+ */
+function calculateColumnWidths(columns, data, mode) {
+    return columns.map((col) => {
+        // Use specified width if provided
+        if (col.width)
+            return col.width;
+        if (mode === 'fixed') {
+            // Use default width for fixed mode
+            return 20;
+        }
+        // Auto-calculate based on header and data
+        const headerWidth = col.header.length;
+        const dataWidth = Math.max(...data.map(row => String(row[col.key] || '').length), 0);
+        // Add padding and set reasonable limits
+        return Math.min(Math.max(headerWidth, dataWidth) + 2, 50);
+    });
+}
+/**
+ * Build options array with separators inserted
+ */
+function buildOptionsWithSeparators(data, separators) {
+    const result = [];
+    const sortedSeparators = (separators || []).sort((a, b) => a.beforeIndex - b.beforeIndex);
+    let sepIndex = 0;
+    for (let i = 0; i < data.length; i++) {
+        // Insert separator if needed
+        while (sepIndex < sortedSeparators.length && sortedSeparators[sepIndex].beforeIndex === i) {
+            result.push({
+                type: 'separator',
+                label: sortedSeparators[sepIndex].label,
+                description: sortedSeparators[sepIndex].description
+            });
+            sepIndex++;
+        }
+        // Add data row
+        result.push({
+            type: 'data',
+            data: data[i],
+            originalIndex: i
+        });
+    }
+    return result;
+}
+/**
+ * Render table header
+ */
+function renderTableHeader(columns, columnWidths, checkboxWidth, showHeaderSeparator) {
+    let lineCount = 0;
+    // Header row
+    let headerLine = ''.padEnd(checkboxWidth); // Space for checkbox column
+    columns.forEach((col, index) => {
+        const width = columnWidths[index];
+        const align = col.align || 'left';
+        const paddedHeader = (0, renderer_js_1.padText)(col.header, width, align);
+        headerLine += `${colors_js_1.uiColors.primary}${colors_js_1.colors.bold}${paddedHeader}${colors_js_1.colors.reset}`;
+    });
+    process.stdout.write(`  ${headerLine}\n`);
+    lineCount++;
+    // Separator line
+    if (showHeaderSeparator) {
+        const totalWidth = checkboxWidth + columnWidths.reduce((sum, w) => sum + w, 0);
+        process.stdout.write(`  ${colors_js_1.uiColors.separator}${'─'.repeat(totalWidth)}${colors_js_1.colors.reset}\n`);
+        lineCount++;
+    }
+    // Blank line after header
+    (0, renderer_js_1.renderBlankLines)(1);
+    lineCount++;
+    return lineCount;
+}
+/**
+ * Render a table row with checkbox
+ */
+function renderTableRow(rowData, columns, columnWidths, isSelected, isHighlighted, checkboxWidth) {
+    let line = '';
+    // Cursor indicator with background for highlighted row
+    if (isHighlighted) {
+        line += `${colors_js_1.uiColors.cursor}${colors_js_1.colors.bold}❯ ${colors_js_1.colors.reset}`;
+    }
+    else {
+        line += '  ';
+    }
+    // Checkbox
+    line += isSelected
+        ? `${colors_js_1.uiColors.selected}◉${colors_js_1.colors.reset} `
+        : `${colors_js_1.uiColors.disabled}○${colors_js_1.colors.reset} `;
+    // Table cells with background for highlighted row
+    columns.forEach((col, colIndex) => {
+        const value = String(rowData[col.key] || '');
+        const width = columnWidths[colIndex];
+        const align = col.align || 'left';
+        // Truncate if too long
+        const truncated = value.length > width ? value.substring(0, width - 3) + '...' : value;
+        const paddedValue = (0, renderer_js_1.padText)(truncated, width, align);
+        // Apply color and background based on state
+        if (isHighlighted) {
+            // Highlighted row: cyan text with reverse video (background)
+            line += `${colors_js_1.uiColors.primary}${colors_js_1.colors.bold}\x1b[7m${paddedValue}\x1b[27m${colors_js_1.colors.reset}`;
+        }
+        else if (isSelected) {
+            // Selected but not highlighted: normal text
+            line += `${colors_js_1.uiColors.textPrimary}${paddedValue}${colors_js_1.colors.reset}`;
+        }
+        else {
+            // Not selected: dim text
+            line += `${colors_js_1.uiColors.textSecondary}${paddedValue}${colors_js_1.colors.reset}`;
+        }
+    });
+    process.stdout.write(line + '\n');
+}
+/**
+ * Show a checkbox table menu (multi-select with table display)
+ * @param config - Menu configuration
+ * @param hints - Optional hints to display at the bottom (for Page Layout use)
+ * @returns Promise resolving to selected rows
+ */
+async function showCheckboxTableMenu(config, hints) {
+    const { columns, data, idKey, defaultSelected = [], minSelections = 0, maxSelections, allowSelectAll = true, allowInvert = true, showBorders = false, showHeaderSeparator = true, separators, separatorAlign = 'center', widthMode = 'fixed', checkboxWidth = 4, title, prompt, separatorWidth = 30, onExit, preserveOnSelect = false } = config;
+    const preserveOnExit = config.preserveOnExit ?? preserveOnSelect;
+    // Validate data
+    if (!data || data.length === 0) {
+        throw new Error('CheckboxTableMenu requires at least one data row');
+    }
+    if (!columns || columns.length === 0) {
+        throw new Error('CheckboxTableMenu requires at least one column');
+    }
+    // Calculate column widths
+    const columnWidths = calculateColumnWidths(columns, data, widthMode);
+    // Calculate total table width for separators
+    const totalTableWidth = checkboxWidth + columnWidths.reduce((sum, w) => sum + w, 0);
+    // Build options with separators
+    const optionsWithSeparators = buildOptionsWithSeparators(data, separators);
+    // Initialize state
+    let cursorIndex = 0;
+    const selected = new Set();
+    // Map default selected (can be indices or IDs)
+    defaultSelected.forEach(item => {
+        if (typeof item === 'number') {
+            selected.add(item);
+        }
+        else if (idKey) {
+            const index = data.findIndex(row => row[idKey] === item);
+            if (index >= 0)
+                selected.add(index);
+        }
+    });
+    const state = (0, terminal_js_1.initTerminal)(); // Use normal mode (inline rendering)
+    // Get selectable indices (skip separators)
+    const selectableIndices = [];
+    optionsWithSeparators.forEach((item, index) => {
+        if (item.type === 'data') {
+            selectableIndices.push(index);
+        }
+    });
+    // Ensure cursorIndex points to a selectable option
+    if (!selectableIndices.includes(cursorIndex)) {
+        cursorIndex = selectableIndices[0] || 0;
+    }
+    // Helper function to get next/previous selectable index
+    const getNextSelectableIndex = (currentIndex, direction) => {
+        let nextIndex = currentIndex;
+        const maxAttempts = optionsWithSeparators.length;
+        let attempts = 0;
+        do {
+            if (direction === 'up') {
+                nextIndex = nextIndex > 0 ? nextIndex - 1 : optionsWithSeparators.length - 1;
+            }
+            else {
+                nextIndex = nextIndex < optionsWithSeparators.length - 1 ? nextIndex + 1 : 0;
+            }
+            attempts++;
+        } while (!selectableIndices.includes(nextIndex) && attempts < maxAttempts);
+        return selectableIndices.includes(nextIndex) ? nextIndex : currentIndex;
+    };
+    // Render function with virtual scrolling
+    const render = () => {
+        // Clear previous render
+        if (state.renderedLines > 0) {
+            (0, terminal_js_1.clearMenu)(state);
+        }
+        let lineCount = 0;
+        // Render title if provided
+        if (title) {
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+        }
+        // Render prompt if provided
+        if (prompt) {
+            process.stdout.write(`  ${colors_js_1.colors.dim}${prompt}${colors_js_1.colors.reset}\n`);
+            lineCount++;
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+        }
+        // Render table header
+        lineCount += renderTableHeader(columns, columnWidths, checkboxWidth, showHeaderSeparator);
+        // Virtual scrolling: calculate visible range using utility
+        const scrollResult = (0, virtual_scroll_js_1.calculateVirtualScroll)({
+            items: optionsWithSeparators,
+            cursorIndex,
+            targetLines: 30,
+            getItemLineCount: (item, index) => {
+                if (item.type === 'separator') {
+                    let lines = 1; // title line
+                    if (index > 0)
+                        lines++; // blank line before (except very first item)
+                    if (item.description)
+                        lines++; // description line
+                    return lines;
+                }
+                return 1; // data row
+            }
+        });
+        const { visibleStart, visibleEnd, isScrolled } = scrollResult;
+        // Render visible options
+        for (let index = visibleStart; index < visibleEnd; index++) {
+            const item = optionsWithSeparators[index];
+            if (item.type === 'separator') {
+                // Add blank line before separator (except for the first visible one)
+                if (index > visibleStart) {
+                    (0, renderer_js_1.renderBlankLines)(1);
+                    lineCount++;
+                }
+                // Render separator with configured alignment
+                (0, renderer_js_1.renderSectionLabel)(item.label || '', totalTableWidth, separatorAlign);
+                lineCount++;
+                // Render description if provided (with same alignment)
+                if (item.description) {
+                    const descLength = item.description.length;
+                    let padding = 0;
+                    switch (separatorAlign) {
+                        case 'left':
+                            padding = 2; // Just left margin
+                            break;
+                        case 'right':
+                            padding = Math.max(0, totalTableWidth - descLength);
+                            break;
+                        case 'center':
+                        default:
+                            padding = Math.max(0, Math.floor((totalTableWidth - descLength) / 2)) + 2;
+                            break;
+                    }
+                    const alignedDesc = ' '.repeat(padding) + item.description;
+                    process.stdout.write(`${colors_js_1.colors.dim}${alignedDesc}${colors_js_1.colors.reset}\n`);
+                    lineCount++;
+                }
+            }
+            else {
+                // Render data row
+                const originalIndex = item.originalIndex;
+                const isSelected = selected.has(originalIndex);
+                const isHighlighted = index === cursorIndex;
+                renderTableRow(item.data, columns, columnWidths, isSelected, isHighlighted, checkboxWidth);
+                lineCount++;
+            }
+        }
+        // Show scroll indicator if content is scrolled
+        if (isScrolled) {
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+            // Calculate current position among selectable items
+            const selectableBeforeCursor = selectableIndices.filter(i => i <= cursorIndex).length;
+            const totalSelectable = selectableIndices.length;
+            const scrollText = (0, registry_js_1.t)('menus.scrollIndicator', {
+                current: String(selectableBeforeCursor),
+                total: String(totalSelectable)
+            });
+            const scrollInfo = `  ${colors_js_1.colors.dim}[${scrollText}]${colors_js_1.colors.reset}`;
+            process.stdout.write(scrollInfo + '\n');
+            lineCount++;
+        }
+        // Render hints if provided
+        if (hints && hints.length > 0) {
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+            (0, renderer_js_1.renderHints)(hints);
+            lineCount += 1;
+        }
+        state.renderedLines = lineCount;
+    };
+    // Initial render
+    render();
+    // Keyboard input handling
+    return new Promise((resolve) => {
+        const onData = (key) => {
+            if ((0, keyboard_js_1.isCtrlC)(key)) {
+                state.stdin.removeListener('data', onData);
+                if (!preserveOnExit) {
+                    (0, terminal_js_1.clearMenu)(state);
+                }
+                (0, terminal_js_1.restoreTerminal)(state);
+                if (onExit)
+                    onExit();
+                process.exit(0);
+            }
+            if ((0, keyboard_js_1.isEnter)(key)) {
+                // Validate minimum selections
+                if (selected.size < minSelections) {
+                    // TODO: Show error message
+                    return;
+                }
+                // Clean up
+                state.stdin.removeListener('data', onData);
+                if (!preserveOnSelect) {
+                    (0, terminal_js_1.clearMenu)(state);
+                }
+                (0, terminal_js_1.restoreTerminal)(state);
+                // Build result
+                const selectedIndices = Array.from(selected).sort((a, b) => a - b);
+                const selectedRows = selectedIndices.map(i => data[i]);
+                const result = {
+                    indices: selectedIndices,
+                    rows: selectedRows
+                };
+                if (idKey) {
+                    result.ids = selectedRows.map(row => row[idKey]);
+                }
+                resolve(result);
+                return;
+            }
+            if ((0, keyboard_js_1.isSpace)(key)) {
+                // Toggle selection for current row
+                const currentItem = optionsWithSeparators[cursorIndex];
+                if (currentItem.type === 'data') {
+                    const originalIndex = currentItem.originalIndex;
+                    if (selected.has(originalIndex)) {
+                        selected.delete(originalIndex);
+                    }
+                    else {
+                        // Check max selections
+                        if (!maxSelections || selected.size < maxSelections) {
+                            selected.add(originalIndex);
+                        }
+                    }
+                    render();
+                }
+                return;
+            }
+            // Arrow keys
+            if (key === keyboard_js_1.KEY_CODES.UP) {
+                cursorIndex = getNextSelectableIndex(cursorIndex, 'up');
+                render();
+                return;
+            }
+            if (key === keyboard_js_1.KEY_CODES.DOWN) {
+                cursorIndex = getNextSelectableIndex(cursorIndex, 'down');
+                render();
+                return;
+            }
+            // Select all (A key)
+            if (allowSelectAll && (key === 'a' || key === 'A')) {
+                if (selected.size === data.length) {
+                    // Deselect all
+                    selected.clear();
+                }
+                else {
+                    // Select all
+                    data.forEach((_, index) => {
+                        if (!maxSelections || selected.size < maxSelections) {
+                            selected.add(index);
+                        }
+                    });
+                }
+                render();
+                return;
+            }
+            // Invert selection (I key)
+            if (allowInvert && (key === 'i' || key === 'I')) {
+                const newSelected = new Set();
+                data.forEach((_, index) => {
+                    if (!selected.has(index)) {
+                        if (!maxSelections || newSelected.size < maxSelections) {
+                            newSelected.add(index);
+                        }
+                    }
+                });
+                selected.clear();
+                newSelected.forEach(i => selected.add(i));
+                render();
+                return;
+            }
+        };
+        state.stdin.on('data', onData);
+    });
+}

package/dist/components/menus/index.d.ts

@@ -4,4 +4,5 @@
  */
 export { showRadioMenu } from './radio-menu.js';
 export { showCheckboxMenu } from './checkbox-menu.js';
+export { showCheckboxTableMenu } from './checkbox-table-menu.js';
 export { showBooleanMenu } from './boolean-menu.js';

package/dist/components/menus/index.js

@@ -4,10 +4,12 @@
  * Exports all menu component functions
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showBooleanMenu = exports.showCheckboxMenu = exports.showRadioMenu = void 0;
+exports.showBooleanMenu = exports.showCheckboxTableMenu = exports.showCheckboxMenu = exports.showRadioMenu = void 0;
 var radio_menu_js_1 = require("./radio-menu.js");
 Object.defineProperty(exports, "showRadioMenu", { enumerable: true, get: function () { return radio_menu_js_1.showRadioMenu; } });
 var checkbox_menu_js_1 = require("./checkbox-menu.js");
 Object.defineProperty(exports, "showCheckboxMenu", { enumerable: true, get: function () { return checkbox_menu_js_1.showCheckboxMenu; } });
+var checkbox_table_menu_js_1 = require("./checkbox-table-menu.js");
+Object.defineProperty(exports, "showCheckboxTableMenu", { enumerable: true, get: function () { return checkbox_table_menu_js_1.showCheckboxTableMenu; } });
 var boolean_menu_js_1 = require("./boolean-menu.js");
 Object.defineProperty(exports, "showBooleanMenu", { enumerable: true, get: function () { return boolean_menu_js_1.showBooleanMenu; } });

package/dist/components/menus/radio-menu-split.d.ts

@@ -0,0 +1,34 @@
+/**
+ * RadioMenu - Split rendering and interaction
+ * Supports Page Layout V2 architecture with separate render/interact phases
+ * Uses ScreenManager for independent region updates
+ */
+import { RadioMenuConfig, RadioMenuResult } from '../../types/menu.types.js';
+import { TerminalState } from '../../core/terminal.js';
+/**
+ * Menu state for split rendering
+ */
+export interface RadioMenuState {
+    config: RadioMenuConfig;
+    selectedIndex: number;
+    selectableIndices: number[];
+    optionData: Array<{
+        display: string;
+        value: string;
+        isSeparator: boolean;
+        label?: string;
+    }>;
+    terminalState: TerminalState;
+    displayPrompt: string;
+    initialLineCount?: number;
+    regionId: string;
+}
+/**
+ * Render radio menu UI (non-blocking)
+ * Returns state for later interaction
+ */
+export declare function renderRadioMenuUI(config: RadioMenuConfig): RadioMenuState;
+/**
+ * Wait for user input and return result (blocking)
+ */
+export declare function waitForRadioMenuInput(menuState: RadioMenuState): Promise<RadioMenuResult>;