cli-menu-kit 0.1.26 → 0.2.1

package/dist/components/menus/radio-menu-split.js

@@ -0,0 +1,258 @@
+"use strict";
+/**
+ * RadioMenu - Split rendering and interaction
+ * Supports Page Layout V2 architecture with separate render/interact phases
+ * Uses ScreenManager for independent region updates
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderRadioMenuUI = renderRadioMenuUI;
+exports.waitForRadioMenuInput = waitForRadioMenuInput;
+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");
+/**
+ * Render radio menu UI (non-blocking)
+ * Returns state for later interaction
+ */
+function renderRadioMenuUI(config) {
+    const { options, title, prompt, defaultIndex = 0, separatorWidth = 30 } = config;
+    // Use i18n for default prompt if not provided
+    const displayPrompt = prompt || (0, registry_js_1.t)('menus.selectPrompt');
+    // Validate options
+    if (!options || options.length === 0) {
+        throw new Error('RadioMenu requires at least one option');
+    }
+    // Initialize state
+    let selectedIndex = Math.max(0, Math.min(defaultIndex, options.length - 1));
+    // Separate selectable options from separators
+    const selectableIndices = [];
+    const optionData = [];
+    options.forEach((opt, index) => {
+        if (typeof opt === 'object' && 'type' in opt && opt.type === 'separator') {
+            optionData.push({ display: '', value: '', isSeparator: true, label: opt.label });
+        }
+        else {
+            let display;
+            let value;
+            if (typeof opt === 'string') {
+                display = opt;
+                value = opt;
+            }
+            else if ('value' in opt) {
+                display = opt.label ?? String(opt.value ?? '');
+                value = opt.value ?? opt.label ?? '';
+            }
+            else {
+                display = opt.label ?? '';
+                value = opt.label ?? '';
+            }
+            optionData.push({ display, value, isSeparator: false });
+            selectableIndices.push(index);
+        }
+    });
+    // Ensure selectedIndex points to a selectable option
+    if (!selectableIndices.includes(selectedIndex)) {
+        selectedIndex = selectableIndices[0] || 0;
+    }
+    // Render menu UI NOW (in Phase 1, before terminal initialization)
+    let lineCount = 0;
+    // Render menu title if provided
+    if (title) {
+        (0, renderer_js_1.renderHeader)(`  ${title}`, colors_js_1.uiColors.primary);
+        lineCount++;
+        (0, renderer_js_1.renderBlankLines)(1);
+        lineCount++;
+    }
+    // Render options
+    optionData.forEach((item, index) => {
+        if (item.isSeparator) {
+            (0, renderer_js_1.renderSectionLabel)(item.label, separatorWidth);
+        }
+        else {
+            const numberMatch = item.display.match(/^(\d+)\.\s*/);
+            const letterMatch = item.display.match(/^([a-zA-Z])\.\s*/);
+            const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+            const isExitOption = /\b(exit|quit)\b/i.test(item.display);
+            const isCurrent = index === selectedIndex;
+            const displayValue = isExitOption && !isCurrent
+                ? `${colors_js_1.uiColors.error}${item.display}${colors_js_1.colors.reset}`
+                : item.display;
+            (0, renderer_js_1.renderOption)(displayValue, undefined, isCurrent, prefix);
+            const nextIndex = index + 1;
+            if (nextIndex < optionData.length && optionData[nextIndex].isSeparator) {
+                (0, terminal_js_1.writeLine)('');
+                lineCount++;
+            }
+        }
+        lineCount++;
+    });
+    // Don't render input prompt here - it should be in footer
+    // Just render the menu options
+    // Generate a unique region ID for this menu
+    const regionId = `menu-${Date.now()}`;
+    // Store the line count for later use in interact phase
+    return {
+        config,
+        selectedIndex,
+        selectableIndices,
+        optionData,
+        terminalState: null, // Will be initialized in interact phase
+        displayPrompt,
+        initialLineCount: lineCount,
+        regionId
+    };
+}
+/**
+ * Wait for user input and return result (blocking)
+ */
+async function waitForRadioMenuInput(menuState) {
+    const { config, selectableIndices, optionData, displayPrompt } = menuState;
+    let selectedIndex = menuState.selectedIndex;
+    // Initialize terminal NOW (in interact phase, after all rendering is done)
+    const state = (0, terminal_js_1.initTerminal)();
+    const { allowNumberKeys = true, allowLetterKeys = false, onExit, preserveOnSelect = false } = config;
+    // Helper function to get next/previous selectable index
+    const getNextSelectableIndex = (currentIndex, direction) => {
+        let nextIndex = currentIndex;
+        const maxAttempts = optionData.length;
+        let attempts = 0;
+        do {
+            if (direction === 'up') {
+                nextIndex = nextIndex > 0 ? nextIndex - 1 : optionData.length - 1;
+            }
+            else {
+                nextIndex = nextIndex < optionData.length - 1 ? nextIndex + 1 : 0;
+            }
+            attempts++;
+        } while (!selectableIndices.includes(nextIndex) && attempts < maxAttempts);
+        return selectableIndices.includes(nextIndex) ? nextIndex : currentIndex;
+    };
+    // Render function (updates display using ScreenManager)
+    const render = () => {
+        // Move to menu region and clear it
+        // screenManager.moveTo(menuState.regionId);
+        // screenManager.clearRegion(menuState.regionId);
+        let lineCount = 0;
+        // Render menu title if provided
+        if (config.title) {
+            (0, renderer_js_1.renderHeader)(`  ${config.title}`, colors_js_1.uiColors.primary);
+            lineCount++;
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+        }
+        // Render options
+        optionData.forEach((item, index) => {
+            if (item.isSeparator) {
+                (0, renderer_js_1.renderSectionLabel)(item.label, config.separatorWidth || 30);
+            }
+            else {
+                const numberMatch = item.display.match(/^(\d+)\.\s*/);
+                const letterMatch = item.display.match(/^([a-zA-Z])\.\s*/);
+                const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+                const isExitOption = /\b(exit|quit)\b/i.test(item.display);
+                const isCurrent = index === selectedIndex;
+                const displayValue = isExitOption && !isCurrent
+                    ? `${colors_js_1.uiColors.error}${item.display}${colors_js_1.colors.reset}`
+                    : item.display;
+                (0, renderer_js_1.renderOption)(displayValue, undefined, isCurrent, prefix);
+                const nextIndex = index + 1;
+                if (nextIndex < optionData.length && optionData[nextIndex].isSeparator) {
+                    (0, terminal_js_1.writeLine)('');
+                    lineCount++;
+                }
+            }
+            lineCount++;
+        });
+        // Update region size if it changed
+        // if (lineCount !== menuState.initialLineCount) {
+        //   screenManager.updateRegionSize(menuState.regionId, lineCount);
+        //   menuState.initialLineCount = lineCount;
+        // }
+        // Update global state with current selection
+        // const currentItem = optionData[selectedIndex];
+        // if (currentItem && !currentItem.isSeparator) {
+        //   const match = currentItem.value.match(/^([^.]+)\./);
+        //   const displayValue = match ? match[1] : String(selectableIndices.indexOf(selectedIndex) + 1);
+        //   globalState.setState('menu.selectedValue', displayValue);
+        //   globalState.setState('menu.selectedIndex', selectedIndex);
+        // }
+    };
+    // Register the menu region with ScreenManager
+    // if (menuState.initialLineCount) {
+    //   screenManager.registerRegion(menuState.regionId, menuState.initialLineCount);
+    // }
+    // Don't render initially - menu was already rendered in Phase 1
+    // Just initialize the state
+    state.renderedLines = menuState.initialLineCount || 0;
+    // Handle keyboard input
+    return new Promise((resolve) => {
+        const onData = (key) => {
+            // Handle Ctrl+C
+            if ((0, keyboard_js_1.isCtrlC)(key)) {
+                state.stdin.removeListener('data', onData);
+                // screenManager.clearRegion(menuState.regionId);
+                (0, terminal_js_1.restoreTerminal)(state);
+                if (onExit) {
+                    onExit();
+                }
+                else {
+                    console.log(`\n${(0, registry_js_1.t)('messages.goodbye')}`);
+                }
+                process.exit(0);
+            }
+            // Handle arrow keys
+            if (key === keyboard_js_1.KEY_CODES.UP) {
+                selectedIndex = getNextSelectableIndex(selectedIndex, 'up');
+                render();
+            }
+            else if (key === keyboard_js_1.KEY_CODES.DOWN) {
+                selectedIndex = getNextSelectableIndex(selectedIndex, 'down');
+                render();
+            }
+            // Handle Enter
+            if ((0, keyboard_js_1.isEnter)(key)) {
+                const selectedItem = optionData[selectedIndex];
+                if (selectedItem && !selectedItem.isSeparator) {
+                    state.stdin.removeListener('data', onData);
+                    if (!preserveOnSelect) {
+                        // screenManager.clearRegion(menuState.regionId);
+                    }
+                    (0, terminal_js_1.restoreTerminal)(state);
+                    resolve({
+                        value: selectedItem.value,
+                        index: selectableIndices.indexOf(selectedIndex)
+                    });
+                }
+            }
+            // Handle number keys
+            if (allowNumberKeys && (0, keyboard_js_1.isNumberKey)(key)) {
+                const num = parseInt(key, 10);
+                const targetIndex = num === 0 ? 9 : num - 1;
+                if (targetIndex < selectableIndices.length) {
+                    selectedIndex = selectableIndices[targetIndex];
+                    render();
+                }
+            }
+            // Handle letter keys
+            if (allowLetterKeys) {
+                const letter = (0, keyboard_js_1.normalizeLetter)(key);
+                if (letter) {
+                    const matchingIndex = selectableIndices.find(idx => {
+                        const item = optionData[idx];
+                        if (!item || item.isSeparator)
+                            return false;
+                        const normalized = (0, keyboard_js_1.normalizeLetter)(item.display.charAt(0));
+                        return normalized === letter;
+                    });
+                    if (matchingIndex !== undefined) {
+                        selectedIndex = matchingIndex;
+                        render();
+                    }
+                }
+            }
+        };
+        state.stdin.on('data', onData);
+    });
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Radio Menu Component - New Architecture Version
+ * Renders menu directly in new architecture without calling old showRadioMenu
+ */
+import { Component } from '../../layout.js';
+import type { RadioMenuConfig, RadioMenuResult } from '../../types/menu.types.js';
+export interface RadioMenuComponentConfig {
+    menuConfig: RadioMenuConfig;
+    onResult: (result: RadioMenuResult) => Promise<void>;
+}
+export declare function createRadioMenuComponentV2(config: RadioMenuComponentConfig): Component;

package/dist/components/menus/radio-menu-v2.js

@@ -0,0 +1,150 @@
+"use strict";
+/**
+ * Radio Menu Component - New Architecture Version
+ * Renders menu directly in new architecture without calling old showRadioMenu
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRadioMenuComponentV2 = createRadioMenuComponentV2;
+const readline_1 = __importDefault(require("readline"));
+const layout_js_1 = require("../../layout.js");
+const colors_js_1 = require("../../core/colors.js");
+function createRadioMenuComponentV2(config) {
+    let selectedIndex = 0;
+    const options = config.menuConfig.options;
+    // Parse options
+    const selectableIndices = [];
+    const optionData = [];
+    options.forEach((opt, index) => {
+        if (typeof opt === 'object' && 'type' in opt && opt.type === 'separator') {
+            optionData.push({ value: '', isSeparator: true, label: opt.label });
+        }
+        else {
+            const value = typeof opt === 'string' ? opt : opt.value || '';
+            optionData.push({ value, isSeparator: false });
+            selectableIndices.push(index);
+        }
+    });
+    // Render function
+    const renderMenu = (rect) => {
+        const lines = [];
+        optionData.forEach((item, index) => {
+            if (item.isSeparator) {
+                // Render separator
+                const label = item.label || '';
+                const line = `${colors_js_1.colors.dim}${'─'.repeat(5)} ${label} ${'─'.repeat(Math.max(0, 20 - label.length))}${colors_js_1.colors.reset}`;
+                lines.push(line);
+            }
+            else {
+                // Render option
+                const isSelected = index === selectedIndex;
+                const prefix = isSelected ? `${colors_js_1.colors.green}>${colors_js_1.colors.reset}` : ' ';
+                // Add number prefix
+                const numberMatch = item.value.match(/^(\d+)\.\s*/);
+                const letterMatch = item.value.match(/^([a-zA-Z])\.\s*/);
+                const hasPrefix = numberMatch || letterMatch;
+                const displayPrefix = hasPrefix ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+                // Check if exit option
+                const isExitOption = /\b(exit|quit)\b/i.test(item.value);
+                const displayValue = isExitOption ? `${colors_js_1.uiColors.error}${item.value}${colors_js_1.colors.reset}` : item.value;
+                const text = isSelected
+                    ? `${colors_js_1.colors.green}${colors_js_1.colors.bold}${displayPrefix}${displayValue}${colors_js_1.colors.reset}`
+                    : `${displayPrefix}${displayValue}`;
+                lines.push(`${prefix} ${text}`);
+            }
+        });
+        // Fill remaining lines
+        while (lines.length < rect.height) {
+            lines.push('');
+        }
+        return lines;
+    };
+    return {
+        type: 'radio-menu',
+        regionId: 'main',
+        render: renderMenu,
+        interact: async () => {
+            return new Promise((resolve) => {
+                readline_1.default.emitKeypressEvents(process.stdin);
+                if (process.stdin.isTTY)
+                    process.stdin.setRawMode(true);
+                const onKey = async (str, key) => {
+                    if (key.ctrl && key.name === 'c') {
+                        cleanup();
+                        process.exit(0);
+                    }
+                    let needsUpdate = false;
+                    // Arrow key navigation
+                    if (key.name === 'up') {
+                        // Move to previous selectable option
+                        const currentPos = selectableIndices.indexOf(selectedIndex);
+                        if (currentPos > 0) {
+                            selectedIndex = selectableIndices[currentPos - 1];
+                            needsUpdate = true;
+                        }
+                    }
+                    else if (key.name === 'down') {
+                        // Move to next selectable option
+                        const currentPos = selectableIndices.indexOf(selectedIndex);
+                        if (currentPos < selectableIndices.length - 1) {
+                            selectedIndex = selectableIndices[currentPos + 1];
+                            needsUpdate = true;
+                        }
+                    }
+                    // Number key selection
+                    else if (config.menuConfig.allowNumberKeys && str && /^[0-9]$/.test(str)) {
+                        const num = parseInt(str, 10);
+                        if (num > 0 && num <= selectableIndices.length) {
+                            selectedIndex = selectableIndices[num - 1];
+                            needsUpdate = true;
+                        }
+                    }
+                    // Letter key selection
+                    else if (config.menuConfig.allowLetterKeys && str && /^[a-zA-Z]$/.test(str)) {
+                        // Find option starting with this letter
+                        const letter = str.toLowerCase();
+                        const matchIndex = selectableIndices.find(idx => {
+                            const value = optionData[idx].value.toLowerCase();
+                            return value.startsWith(letter) || value.match(new RegExp(`^\\d+\\.\\s*${letter}`, 'i'));
+                        });
+                        if (matchIndex !== undefined) {
+                            selectedIndex = matchIndex;
+                            needsUpdate = true;
+                        }
+                    }
+                    // Enter to confirm
+                    else if (key.name === 'return') {
+                        cleanup();
+                        const result = {
+                            value: optionData[selectedIndex].value,
+                            index: selectableIndices.indexOf(selectedIndex)
+                        };
+                        await config.onResult(result);
+                        resolve();
+                        return;
+                    }
+                    // Update display if selection changed
+                    if (needsUpdate) {
+                        const layout = (0, layout_js_1.computeLayout)();
+                        const lines = renderMenu(layout.main);
+                        layout_js_1.screenManager.renderRegion('main', lines);
+                        // Update hint
+                        layout_js_1.hintManager.set('menu', `Selected: ${optionData[selectedIndex].value}`, 10);
+                    }
+                };
+                function cleanup() {
+                    process.stdin.off('keypress', onKey);
+                    if (process.stdin.isTTY)
+                        process.stdin.setRawMode(false);
+                    layout_js_1.hintManager.clear('menu');
+                }
+                process.stdin.on('keypress', onKey);
+                // Set initial hint
+                layout_js_1.hintManager.set('menu', `Selected: ${optionData[selectedIndex].value}`, 10);
+            });
+        },
+        config
+    };
+}

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

@@ -6,6 +6,7 @@ import { RadioMenuConfig, RadioMenuResult } from '../../types/menu.types.js';
 /**
  * Show a radio menu (single-select)
  * @param config - Menu configuration
+ * @param hints - Optional hints to display at the bottom (for Page Layout use)
  * @returns Promise resolving to selected option
  */
-export declare function showRadioMenu(config: RadioMenuConfig): Promise<RadioMenuResult>;
+export declare function showRadioMenu(config: RadioMenuConfig, hints?: string[]): Promise<RadioMenuResult>;