cli-menu-kit 0.1.26 → 0.2.0

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

@@ -0,0 +1,248 @@
+"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({ value: '', isSeparator: true, label: opt.label });
+        }
+        else {
+            let value;
+            if (typeof opt === 'string') {
+                value = opt;
+            }
+            else if ('value' in opt) {
+                value = opt.value ?? opt.label ?? '';
+            }
+            else {
+                value = opt.label ?? '';
+            }
+            optionData.push({ 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.colors.cyan);
+        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.value.match(/^(\d+)\.\s*/);
+            const letterMatch = item.value.match(/^([a-zA-Z])\.\s*/);
+            const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+            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;
+            (0, renderer_js_1.renderOption)(displayValue, undefined, index === selectedIndex, 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.colors.cyan);
+            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.value.match(/^(\d+)\.\s*/);
+                const letterMatch = item.value.match(/^([a-zA-Z])\.\s*/);
+                const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+                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;
+                (0, renderer_js_1.renderOption)(displayValue, undefined, index === selectedIndex, 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👋 再见!');
+                }
+                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.value.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>;

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

@@ -5,61 +5,22 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showRadioMenu = showRadioMenu;
-const layout_types_js_1 = require("../../types/layout.types.js");
 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 renderer_js_2 = require("../../core/renderer.js");
 const colors_js_1 = require("../../core/colors.js");
 const registry_js_1 = require("../../i18n/registry.js");
-/**
- * Generate hints based on menu configuration and actual options
- */
-function generateHints(options, allowNumberKeys, allowLetterKeys) {
-    const hints = [];
-    // Count selectable options
-    const selectableCount = options.filter(opt => !(typeof opt === 'object' && 'type' in opt && opt.type === 'separator')).length;
-    // Only show arrow hints if there are multiple options
-    if (selectableCount > 1) {
-        hints.push((0, registry_js_1.t)('hints.arrows'));
-    }
-    // Check if there are actually number-prefixed options
-    if (allowNumberKeys) {
-        const hasNumberOptions = options.some(opt => {
-            if (typeof opt === 'string') {
-                return /^\d+\./.test(opt);
-            }
-            return false;
-        });
-        if (hasNumberOptions) {
-            hints.push((0, registry_js_1.t)('hints.numbers'));
-        }
-    }
-    // Check if there are actually letter-prefixed options
-    if (allowLetterKeys) {
-        const hasLetterOptions = options.some(opt => {
-            if (typeof opt === 'string') {
-                return /^[a-zA-Z]\./.test(opt);
-            }
-            return false;
-        });
-        if (hasLetterOptions) {
-            hints.push((0, registry_js_1.t)('hints.letters'));
-        }
-    }
-    hints.push((0, registry_js_1.t)('hints.enter'));
-    return hints;
-}
 /**
  * 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
  */
-async function showRadioMenu(config) {
-    const { options, title, prompt, hints, layout = layout_types_js_1.LAYOUT_PRESETS.MAIN_MENU, defaultIndex = 0, allowNumberKeys = true, allowLetterKeys = false, separatorWidth = 30, onExit, preserveOnSelect = false } = config;
+async function showRadioMenu(config, hints) {
+    const { options, title, prompt, defaultIndex = 0, allowNumberKeys = true, allowLetterKeys = false, separatorWidth = 30, onExit, preserveOnSelect = false } = config;
     // Use i18n for default prompt if not provided
     const displayPrompt = prompt || (0, registry_js_1.t)('menus.selectPrompt');
-    // Generate hints dynamically if not provided
-    const displayHints = hints || generateHints(options, allowNumberKeys, allowLetterKeys);
     // Validate options
     if (!options || options.length === 0) {
         throw new Error('RadioMenu requires at least one option');
@@ -89,8 +50,6 @@ async function showRadioMenu(config) {
             selectableIndices.push(index);
         }
     });
-    // Use MINIMAL layout for single-option menus
-    const effectiveLayout = selectableIndices.length === 1 ? layout_types_js_1.LAYOUT_PRESETS.MINIMAL : layout;
     // Ensure selectedIndex points to a selectable option
     if (!selectableIndices.includes(selectedIndex)) {
         selectedIndex = selectableIndices[0] || 0;
@@ -115,80 +74,63 @@ async function showRadioMenu(config) {
     const render = () => {
         (0, terminal_js_1.clearMenu)(state);
         let lineCount = 0;
-        // Render based on layout order
-        effectiveLayout.order.forEach(element => {
-            // Add spacing before element
-            const spacingKey = `before${element.charAt(0).toUpperCase() + element.slice(1)}`;
-            if (effectiveLayout.spacing?.[spacingKey]) {
-                (0, renderer_js_1.renderBlankLines)(effectiveLayout.spacing[spacingKey]);
-                lineCount += effectiveLayout.spacing[spacingKey];
-            }
-            switch (element) {
-                case 'header':
-                    if (effectiveLayout.visible.header && title) {
-                        (0, renderer_js_1.renderHeader)(`  ${title}`, colors_js_1.colors.cyan);
-                        lineCount++;
-                    }
-                    break;
-                case 'options':
-                    optionData.forEach((item, index) => {
-                        if (item.isSeparator) {
-                            // Render section label with configured width
-                            (0, renderer_js_1.renderSectionLabel)(item.label, separatorWidth);
-                        }
-                        else {
-                            // Check if option starts with a number or letter prefix
-                            const numberMatch = item.value.match(/^(\d+)\.\s*/);
-                            const letterMatch = item.value.match(/^([a-zA-Z])\.\s*/);
-                            // Don't add prefix if option already has number or letter prefix
-                            const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
-                            // Check if this is an Exit option (contains "Exit" or "Quit")
-                            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;
-                            // For radio menus, don't show selection indicator (pass undefined instead of false)
-                            (0, renderer_js_1.renderOption)(displayValue, undefined, index === selectedIndex, prefix);
-                            // Add blank line after last item before next separator
-                            const nextIndex = index + 1;
-                            if (nextIndex < optionData.length && optionData[nextIndex].isSeparator) {
-                                (0, terminal_js_1.writeLine)('');
-                                lineCount++; // Count the blank line
-                            }
-                        }
-                        lineCount++;
-                    });
-                    break;
-                case 'input':
-                    if (effectiveLayout.visible.input) {
-                        // Calculate display value (current selection number)
-                        let displayValue = '';
-                        const currentItem = optionData[selectedIndex];
-                        if (currentItem && !currentItem.isSeparator) {
-                            const match = currentItem.value.match(/^([^.]+)\./);
-                            if (match) {
-                                displayValue = match[1];
-                            }
-                            else {
-                                displayValue = String(selectableIndices.indexOf(selectedIndex) + 1);
-                            }
-                        }
-                        (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
-                        lineCount++;
-                    }
-                    break;
-                case 'hints':
-                    if (effectiveLayout.visible.hints && displayHints.length > 0) {
-                        (0, renderer_js_1.renderHints)(displayHints);
-                        lineCount++;
-                    }
-                    break;
+        // Render title if provided
+        if (title) {
+            (0, renderer_js_1.renderHeader)(`  ${title}`, colors_js_1.colors.cyan);
+            lineCount++;
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+        }
+        // Render options
+        optionData.forEach((item, index) => {
+            if (item.isSeparator) {
+                // Render section label with configured width
+                (0, renderer_js_1.renderSectionLabel)(item.label, separatorWidth);
             }
-            // Add spacing after element
-            const afterSpacingKey = `after${element.charAt(0).toUpperCase() + element.slice(1)}`;
-            if (effectiveLayout.spacing?.[afterSpacingKey]) {
-                (0, renderer_js_1.renderBlankLines)(effectiveLayout.spacing[afterSpacingKey]);
-                lineCount += effectiveLayout.spacing[afterSpacingKey];
+            else {
+                // Check if option starts with a number or letter prefix
+                const numberMatch = item.value.match(/^(\d+)\.\s*/);
+                const letterMatch = item.value.match(/^([a-zA-Z])\.\s*/);
+                // Don't add prefix if option already has number or letter prefix
+                const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+                // Check if this is an Exit option (contains "Exit" or "Quit")
+                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;
+                // For radio menus, don't show selection indicator (pass undefined instead of false)
+                (0, renderer_js_1.renderOption)(displayValue, undefined, index === selectedIndex, prefix);
+                // Add blank line after last item before next separator
+                const nextIndex = index + 1;
+                if (nextIndex < optionData.length && optionData[nextIndex].isSeparator) {
+                    (0, terminal_js_1.writeLine)('');
+                    lineCount++; // Count the blank line
+                }
             }
+            lineCount++;
         });
+        // Render input prompt
+        (0, renderer_js_1.renderBlankLines)(1);
+        lineCount++;
+        // Calculate display value (current selection number)
+        let displayValue = '';
+        const currentItem = optionData[selectedIndex];
+        if (currentItem && !currentItem.isSeparator) {
+            const match = currentItem.value.match(/^([^.]+)\./);
+            if (match) {
+                displayValue = match[1];
+            }
+            else {
+                displayValue = String(selectableIndices.indexOf(selectedIndex) + 1);
+            }
+        }
+        (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
+        lineCount++;
+        // Render hints if provided (for Page Layout footer)
+        if (hints && hints.length > 0) {
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+            (0, renderer_js_2.renderHints)(hints);
+            lineCount++;
+        }
         state.renderedLines = lineCount;
     };
     // Initial render
@@ -199,14 +141,9 @@ async function showRadioMenu(config) {
             // Handle Ctrl+C
             if ((0, keyboard_js_1.isCtrlC)(key)) {
                 state.stdin.removeListener('data', onData);
-                (0, terminal_js_1.clearMenu)(state);
                 (0, terminal_js_1.restoreTerminal)(state);
-                if (onExit) {
-                    onExit();
-                }
-                else {
-                    console.log('\n👋 再见!');
-                }
+                // Don't clear menu on Ctrl+C - just exit directly
+                console.log('\n');
                 process.exit(0);
             }
             // Handle Enter