cli-menu-kit 0.1.1 → 0.1.9

package/dist/components/display/header.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Header component for CLI applications
+ * Displays ASCII art, title, description, version and URL
+ */
+/**
+ * Header configuration
+ */
+export interface HeaderConfig {
+    /** ASCII art lines (array of strings) */
+    asciiArt?: string[];
+    /** Application title */
+    title?: string;
+    /** Application description */
+    description?: string;
+    /** Version number */
+    version?: string;
+    /** Project URL */
+    url?: string;
+    /** Optional menu title (e.g., "请选择功能:") */
+    menuTitle?: string;
+    /** Box width (default: 60) */
+    boxWidth?: number;
+    /** Header color (default: cyan) */
+    color?: string;
+}
+/**
+ * Render a boxed header with ASCII art, title, and description
+ * @param config - Header configuration
+ */
+export declare function renderHeader(config: HeaderConfig): void;

package/dist/components/display/header.js

@@ -0,0 +1,56 @@
+"use strict";
+/**
+ * Header component for CLI applications
+ * Displays ASCII art, title, description, version and URL
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderHeader = renderHeader;
+const colors_js_1 = require("../../core/colors.js");
+const terminal_js_1 = require("../../core/terminal.js");
+/**
+ * Render a boxed header with ASCII art, title, and description
+ * @param config - Header configuration
+ */
+function renderHeader(config) {
+    const { asciiArt = [], title = '', description = '', version, url, menuTitle, boxWidth = 60, color = colors_js_1.colors.cyan } = config;
+    const boldColor = `${color}${colors_js_1.colors.bold}`;
+    // Top border
+    (0, terminal_js_1.writeLine)('');
+    (0, terminal_js_1.writeLine)(`${boldColor}╔${'═'.repeat(boxWidth - 2)}╗${colors_js_1.colors.reset}`);
+    // Empty line
+    (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+    // ASCII art (left-aligned with 2 spaces padding)
+    if (asciiArt.length > 0) {
+        asciiArt.forEach(line => {
+            const paddedLine = `  ${line}`.padEnd(boxWidth - 2, ' ');
+            (0, terminal_js_1.writeLine)(`${boldColor}║${paddedLine}║${colors_js_1.colors.reset}`);
+        });
+        (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+    }
+    // Title (left-aligned with 2 spaces padding)
+    if (title) {
+        const paddedTitle = `  ${title}`.padEnd(boxWidth - 2, ' ');
+        (0, terminal_js_1.writeLine)(`${boldColor}║${paddedTitle}║${colors_js_1.colors.reset}`);
+        (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+    }
+    // Description (left-aligned with 2 spaces padding)
+    if (description) {
+        const paddedDesc = `  ${description}`.padEnd(boxWidth - 2, ' ');
+        (0, terminal_js_1.writeLine)(`${boldColor}║${paddedDesc}║${colors_js_1.colors.reset}`);
+        (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+    }
+    // Bottom border
+    (0, terminal_js_1.writeLine)(`${boldColor}╚${'═'.repeat(boxWidth - 2)}╝${colors_js_1.colors.reset}`);
+    // Version and URL (outside the box, dimmed)
+    if (version || url) {
+        const versionText = version ? `Version: ${version}` : '';
+        const urlText = url || '';
+        const separator = version && url ? '  |  ' : '';
+        (0, terminal_js_1.writeLine)(`${colors_js_1.colors.dim}  ${versionText}${separator}${urlText}${colors_js_1.colors.reset}`);
+    }
+    (0, terminal_js_1.writeLine)('');
+    // Menu title (optional)
+    if (menuTitle) {
+        (0, terminal_js_1.writeLine)(`${color}  ${menuTitle}${colors_js_1.colors.reset}`);
+    }
+}

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

@@ -6,3 +6,4 @@ export { renderSimpleHeader, renderAsciiHeader, createSimpleHeader, createAsciiH
 export { renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator } from './progress.js';
 export { renderMessage, showSuccess, showError, showWarning, showInfo, showQuestion, createMessage } from './messages.js';
 export { renderSummaryTable, createSummaryTable, createSimpleSummary } from './summary.js';
+export { renderHeader, type HeaderConfig } from './header.js';

package/dist/components/display/index.js

@@ -4,7 +4,7 @@
  * Exports all display component functions
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createSimpleSummary = exports.createSummaryTable = exports.renderSummaryTable = exports.createMessage = exports.showQuestion = exports.showInfo = exports.showWarning = exports.showError = exports.showSuccess = exports.renderMessage = exports.createStageSeparator = exports.createStageHeader = exports.createProgressIndicator = exports.renderStageSeparator = exports.renderStageHeader = exports.renderProgressIndicator = exports.createAsciiHeader = exports.createSimpleHeader = exports.renderAsciiHeader = exports.renderSimpleHeader = void 0;
+exports.renderHeader = exports.createSimpleSummary = exports.createSummaryTable = exports.renderSummaryTable = exports.createMessage = exports.showQuestion = exports.showInfo = exports.showWarning = exports.showError = exports.showSuccess = exports.renderMessage = exports.createStageSeparator = exports.createStageHeader = exports.createProgressIndicator = exports.renderStageSeparator = exports.renderStageHeader = exports.renderProgressIndicator = exports.createAsciiHeader = exports.createSimpleHeader = exports.renderAsciiHeader = exports.renderSimpleHeader = void 0;
 var headers_js_1 = require("./headers.js");
 Object.defineProperty(exports, "renderSimpleHeader", { enumerable: true, get: function () { return headers_js_1.renderSimpleHeader; } });
 Object.defineProperty(exports, "renderAsciiHeader", { enumerable: true, get: function () { return headers_js_1.renderAsciiHeader; } });
@@ -29,3 +29,5 @@ var summary_js_1 = require("./summary.js");
 Object.defineProperty(exports, "renderSummaryTable", { enumerable: true, get: function () { return summary_js_1.renderSummaryTable; } });
 Object.defineProperty(exports, "createSummaryTable", { enumerable: true, get: function () { return summary_js_1.createSummaryTable; } });
 Object.defineProperty(exports, "createSimpleSummary", { enumerable: true, get: function () { return summary_js_1.createSimpleSummary; } });
+var header_js_1 = require("./header.js");
+Object.defineProperty(exports, "renderHeader", { enumerable: true, get: function () { return header_js_1.renderHeader; } });

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

@@ -9,13 +9,32 @@ 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 registry_js_1 = require("../../i18n/registry.js");
+/**
+ * Generate hints based on menu configuration
+ */
+function generateHints(allowSelectAll, allowInvert) {
+    const hints = [(0, registry_js_1.t)('hints.arrows'), (0, registry_js_1.t)('hints.space')];
+    if (allowSelectAll) {
+        hints.push((0, registry_js_1.t)('hints.selectAll'));
+    }
+    if (allowInvert) {
+        hints.push((0, registry_js_1.t)('hints.invert'));
+    }
+    hints.push((0, registry_js_1.t)('hints.enter'));
+    return hints;
+}
 /**
  * Show a checkbox menu (multi-select)
  * @param config - Menu configuration
  * @returns Promise resolving to selected options
  */
 async function showCheckboxMenu(config) {
-    const { options, title, prompt = '空格选中/取消,回车确认', hints = ['↑↓ 方向键', '空格 选中/取消', 'A 全选', 'I 反选', '⏎ 确认'], layout = { ...layout_types_js_1.LAYOUT_PRESETS.SUB_MENU, order: ['input', 'options', 'hints'] }, defaultSelected = [], minSelections = 0, maxSelections, allowSelectAll = true, allowInvert = true, onExit } = config;
+    const { options, title, prompt, hints, layout = { ...layout_types_js_1.LAYOUT_PRESETS.SUB_MENU, order: ['input', 'options', 'hints'] }, defaultSelected = [], minSelections = 0, maxSelections, allowSelectAll = true, allowInvert = true, onExit } = config;
+    // Use i18n for default prompt if not provided
+    const displayPrompt = prompt || (0, registry_js_1.t)('menus.multiSelectPrompt');
+    // Generate hints dynamically if not provided
+    const displayHints = hints || generateHints(allowSelectAll, allowInvert);
     // Validate options
     if (!options || options.length === 0) {
         throw new Error('CheckboxMenu requires at least one option');
@@ -24,8 +43,48 @@ async function showCheckboxMenu(config) {
     let cursorIndex = 0;
     const selected = new Set(defaultSelected);
     const state = (0, terminal_js_1.initTerminal)();
-    // Extract option values
-    const optionValues = options.map(opt => typeof opt === 'string' ? opt : opt.label);
+    // 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 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 = options.length;
+        let attempts = 0;
+        do {
+            if (direction === 'up') {
+                nextIndex = nextIndex > 0 ? nextIndex - 1 : options.length - 1;
+            }
+            else {
+                nextIndex = nextIndex < options.length - 1 ? nextIndex + 1 : 0;
+            }
+            attempts++;
+        } while (!selectableIndices.includes(nextIndex) && attempts < maxAttempts);
+        return selectableIndices.includes(nextIndex) ? nextIndex : currentIndex;
+    };
     // Render function
     const render = () => {
         (0, terminal_js_1.clearMenu)(state);
@@ -42,20 +101,26 @@ async function showCheckboxMenu(config) {
                 case 'input':
                     if (layout.visible.input) {
                         const selectedCount = selected.size;
-                        const displayValue = `${selectedCount} 项已选`;
-                        (0, renderer_js_1.renderInputPrompt)(prompt, displayValue);
+                        const displayValue = `${selectedCount} ${(0, registry_js_1.t)('menus.selectedCount')}`;
+                        (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
                         lineCount++;
                     }
                     break;
                 case 'options':
-                    optionValues.forEach((option, index) => {
-                        (0, renderer_js_1.renderOption)(option, selected.has(index), index === cursorIndex);
+                    optionData.forEach((item, index) => {
+                        if (item.isSeparator) {
+                            // Render section label
+                            (0, renderer_js_1.renderSectionLabel)(item.label);
+                        }
+                        else {
+                            (0, renderer_js_1.renderOption)(item.value, selected.has(index), index === cursorIndex);
+                        }
                         lineCount++;
                     });
                     break;
                 case 'hints':
-                    if (layout.visible.hints && hints.length > 0) {
-                        (0, renderer_js_1.renderHints)(hints);
+                    if (layout.visible.hints && displayHints.length > 0) {
+                        (0, renderer_js_1.renderHints)(displayHints);
                         lineCount++;
                     }
                     break;
@@ -100,42 +165,54 @@ async function showCheckboxMenu(config) {
                 const indices = Array.from(selected).sort((a, b) => a - b);
                 const values = indices.map(i => {
                     const option = options[i];
-                    return typeof option === 'string' ? option : option.value || option.label;
+                    if (typeof option === 'string') {
+                        return option;
+                    }
+                    else if ('type' in option && option.type === 'separator') {
+                        return '';
+                    }
+                    else if ('value' in option) {
+                        return option.value ?? option.label ?? '';
+                    }
+                    else {
+                        return option.label ?? '';
+                    }
                 });
                 resolve({ indices, values });
                 return;
             }
             // Handle Space (toggle selection)
             if ((0, keyboard_js_1.isSpace)(key)) {
-                if (selected.has(cursorIndex)) {
-                    selected.delete(cursorIndex);
-                }
-                else {
-                    // Check max selections
-                    if (!maxSelections || selected.size < maxSelections) {
-                        selected.add(cursorIndex);
+                // Only toggle if cursor is on a selectable item
+                if (selectableIndices.includes(cursorIndex)) {
+                    if (selected.has(cursorIndex)) {
+                        selected.delete(cursorIndex);
                     }
+                    else {
+                        // Check max selections
+                        if (!maxSelections || selected.size < maxSelections) {
+                            selected.add(cursorIndex);
+                        }
+                    }
+                    render();
                 }
-                render();
                 return;
             }
             // Handle arrow keys
             if (key === keyboard_js_1.KEY_CODES.UP) {
-                cursorIndex = cursorIndex > 0 ? cursorIndex - 1 : options.length - 1;
+                cursorIndex = getNextSelectableIndex(cursorIndex, 'up');
                 render();
                 return;
             }
             if (key === keyboard_js_1.KEY_CODES.DOWN) {
-                cursorIndex = cursorIndex < options.length - 1 ? cursorIndex + 1 : 0;
+                cursorIndex = getNextSelectableIndex(cursorIndex, 'down');
                 render();
                 return;
             }
             // Handle 'A' (select all)
             if (allowSelectAll && (0, keyboard_js_1.normalizeLetter)(key) === 'a') {
-                if (!maxSelections || maxSelections >= options.length) {
-                    for (let i = 0; i < options.length; i++) {
-                        selected.add(i);
-                    }
+                if (!maxSelections || maxSelections >= selectableIndices.length) {
+                    selectableIndices.forEach(i => selected.add(i));
                     render();
                 }
                 return;
@@ -143,13 +220,13 @@ async function showCheckboxMenu(config) {
             // Handle 'I' (invert selection)
             if (allowInvert && (0, keyboard_js_1.normalizeLetter)(key) === 'i') {
                 const newSelected = new Set();
-                for (let i = 0; i < options.length; i++) {
+                selectableIndices.forEach(i => {
                     if (!selected.has(i)) {
                         if (!maxSelections || newSelected.size < maxSelections) {
                             newSelected.add(i);
                         }
                     }
-                }
+                });
                 selected.clear();
                 newSelected.forEach(i => selected.add(i));
                 render();

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

@@ -10,13 +10,32 @@ 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");
+/**
+ * Generate hints based on menu configuration
+ */
+function generateHints(allowNumberKeys, allowLetterKeys) {
+    const hints = [(0, registry_js_1.t)('hints.arrows')];
+    if (allowNumberKeys) {
+        hints.push((0, registry_js_1.t)('hints.numbers'));
+    }
+    if (allowLetterKeys) {
+        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
  * @returns Promise resolving to selected option
  */
 async function showRadioMenu(config) {
-    const { options, title, prompt = '输入选项或用↑↓选择,回车确认', hints = ['↑↓ 方向键', '0-9 输入序号', '⏎ 确认'], layout = layout_types_js_1.LAYOUT_PRESETS.MAIN_MENU, defaultIndex = 0, allowNumberKeys = true, allowLetterKeys = false, onExit } = config;
+    const { options, title, prompt, hints, layout = layout_types_js_1.LAYOUT_PRESETS.MAIN_MENU, defaultIndex = 0, allowNumberKeys = true, allowLetterKeys = false, onExit } = 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(allowNumberKeys, allowLetterKeys);
     // Validate options
     if (!options || options.length === 0) {
         throw new Error('RadioMenu requires at least one option');
@@ -24,8 +43,48 @@ async function showRadioMenu(config) {
     // Initialize state
     let selectedIndex = Math.max(0, Math.min(defaultIndex, options.length - 1));
     const state = (0, terminal_js_1.initTerminal)();
-    // Extract option values
-    const optionValues = options.map(opt => typeof opt === 'string' ? opt : opt.label);
+    // 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;
+    }
+    // Helper function to get next/previous selectable index
+    const getNextSelectableIndex = (currentIndex, direction) => {
+        let nextIndex = currentIndex;
+        const maxAttempts = options.length;
+        let attempts = 0;
+        do {
+            if (direction === 'up') {
+                nextIndex = nextIndex > 0 ? nextIndex - 1 : options.length - 1;
+            }
+            else {
+                nextIndex = nextIndex < options.length - 1 ? nextIndex + 1 : 0;
+            }
+            attempts++;
+        } while (!selectableIndices.includes(nextIndex) && attempts < maxAttempts);
+        return selectableIndices.includes(nextIndex) ? nextIndex : currentIndex;
+    };
     // Render function
     const render = () => {
         (0, terminal_js_1.clearMenu)(state);
@@ -46,12 +105,28 @@ async function showRadioMenu(config) {
                     }
                     break;
                 case 'options':
-                    optionValues.forEach((option, index) => {
-                        // Extract number prefix if exists
-                        const match = option.match(/^(\d+)\.\s*/);
-                        const prefix = match ? '' : `${index + 1}. `;
-                        // For radio menus, don't show selection indicator (pass undefined instead of false)
-                        (0, renderer_js_1.renderOption)(option, undefined, index === selectedIndex, prefix);
+                    optionData.forEach((item, index) => {
+                        if (item.isSeparator) {
+                            // Render section label
+                            (0, renderer_js_1.renderSectionLabel)(item.label);
+                        }
+                        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.colors.red}${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++;
                     });
                     break;
@@ -59,21 +134,23 @@ async function showRadioMenu(config) {
                     if (layout.visible.input) {
                         // Calculate display value (current selection number)
                         let displayValue = '';
-                        const currentOption = optionValues[selectedIndex];
-                        const match = currentOption?.match(/^([^.]+)\./);
-                        if (match) {
-                            displayValue = match[1];
-                        }
-                        else {
-                            displayValue = String(selectedIndex + 1);
+                        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)(prompt, displayValue);
+                        (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
                         lineCount++;
                     }
                     break;
                 case 'hints':
-                    if (layout.visible.hints && hints.length > 0) {
-                        (0, renderer_js_1.renderHints)(hints);
+                    if (layout.visible.hints && displayHints.length > 0) {
+                        (0, renderer_js_1.renderHints)(displayHints);
                         lineCount++;
                     }
                     break;
@@ -111,9 +188,19 @@ async function showRadioMenu(config) {
                 (0, terminal_js_1.clearMenu)(state);
                 (0, terminal_js_1.restoreTerminal)(state);
                 const selectedOption = options[selectedIndex];
-                const value = typeof selectedOption === 'string'
-                    ? selectedOption
-                    : selectedOption.value || selectedOption.label;
+                let value;
+                if (typeof selectedOption === 'string') {
+                    value = selectedOption;
+                }
+                else if ('type' in selectedOption && selectedOption.type === 'separator') {
+                    value = '';
+                }
+                else if ('value' in selectedOption) {
+                    value = selectedOption.value ?? selectedOption.label ?? '';
+                }
+                else {
+                    value = selectedOption.label ?? '';
+                }
                 resolve({
                     index: selectedIndex,
                     value
@@ -122,20 +209,20 @@ async function showRadioMenu(config) {
             }
             // Handle arrow keys
             if (key === keyboard_js_1.KEY_CODES.UP) {
-                selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : options.length - 1;
+                selectedIndex = getNextSelectableIndex(selectedIndex, 'up');
                 render();
                 return;
             }
             if (key === keyboard_js_1.KEY_CODES.DOWN) {
-                selectedIndex = selectedIndex < options.length - 1 ? selectedIndex + 1 : 0;
+                selectedIndex = getNextSelectableIndex(selectedIndex, 'down');
                 render();
                 return;
             }
             // Handle number keys
             if (allowNumberKeys && (0, keyboard_js_1.isNumberKey)(key)) {
                 const num = parseInt(key, 10);
-                if (num > 0 && num <= options.length) {
-                    selectedIndex = num - 1;
+                if (num > 0 && num <= selectableIndices.length) {
+                    selectedIndex = selectableIndices[num - 1];
                     render();
                 }
                 return;
@@ -143,11 +230,14 @@ async function showRadioMenu(config) {
             // Handle letter keys
             if (allowLetterKeys && (0, keyboard_js_1.isLetterKey)(key)) {
                 const letter = (0, keyboard_js_1.normalizeLetter)(key);
-                const index = optionValues.findIndex(opt => {
-                    const match = opt.match(/^([a-zA-Z])\./i);
+                const index = selectableIndices.find(idx => {
+                    const item = optionData[idx];
+                    if (item.isSeparator)
+                        return false;
+                    const match = item.value.match(/^([a-zA-Z])\./i);
                     return match && match[1].toLowerCase() === letter;
                 });
-                if (index !== -1) {
+                if (index !== undefined) {
                     selectedIndex = index;
                     render();
                 }

package/dist/core/renderer.d.ts

@@ -39,6 +39,11 @@ export declare function renderHints(hints: string[]): void;
  * @param width - Width of separator (default: terminal width)
  */
 export declare function renderSeparator(char?: string, width?: number): void;
+/**
+ * Render a section label (menu grouping)
+ * @param label - Label text (optional)
+ */
+export declare function renderSectionLabel(label?: string): void;
 /**
  * Render a message with icon
  * @param type - Message type (success, error, warning, info, question)

package/dist/core/renderer.js

@@ -10,6 +10,7 @@ exports.renderOption = renderOption;
 exports.renderInputPrompt = renderInputPrompt;
 exports.renderHints = renderHints;
 exports.renderSeparator = renderSeparator;
+exports.renderSectionLabel = renderSectionLabel;
 exports.renderMessage = renderMessage;
 exports.renderProgress = renderProgress;
 exports.renderBox = renderBox;
@@ -79,7 +80,7 @@ function renderOption(text, isSelected, isHighlighted, prefix) {
  * @param showCursor - Whether to show cursor
  */
 function renderInputPrompt(prompt, value, showCursor = false) {
-    let line = `  ${colors_js_1.colors.dim}${prompt}${colors_js_1.colors.reset} `;
+    let line = `  ${prompt} `;
     if (value) {
         line += `${colors_js_1.colors.cyan}${value}${colors_js_1.colors.reset}`;
     }
@@ -95,7 +96,19 @@ function renderInputPrompt(prompt, value, showCursor = false) {
 function renderHints(hints) {
     if (hints.length === 0)
         return;
-    const hintLine = `  ${colors_js_1.colors.dim}${hints.join(' • ')}${colors_js_1.colors.reset}`;
+    // Format each hint: symbols/numbers in black, text in gray
+    const formattedHints = hints.map(hint => {
+        const parts = hint.split(' ');
+        if (parts.length >= 2) {
+            // First part (symbols/numbers) in normal color, rest in dim
+            const symbols = parts[0];
+            const text = parts.slice(1).join(' ');
+            return `${symbols} ${colors_js_1.colors.dim}${text}${colors_js_1.colors.reset}`;
+        }
+        // If no space, keep entire hint in dim
+        return `${colors_js_1.colors.dim}${hint}${colors_js_1.colors.reset}`;
+    });
+    const hintLine = `  ${formattedHints.join(' • ')}`;
     (0, terminal_js_1.writeLine)(hintLine);
 }
 /**
@@ -108,6 +121,26 @@ function renderSeparator(char = '─', width) {
     const sepWidth = width || termWidth;
     (0, terminal_js_1.writeLine)(char.repeat(sepWidth));
 }
+/**
+ * Render a section label (menu grouping)
+ * @param label - Label text (optional)
+ */
+function renderSectionLabel(label) {
+    if (label) {
+        const totalWidth = 50; // Fixed total width for consistency
+        const padding = 2; // Spaces around label
+        const labelWithPadding = ` ${label} `;
+        const labelLength = labelWithPadding.length;
+        const dashesTotal = totalWidth - labelLength;
+        const dashesLeft = Math.floor(dashesTotal / 2);
+        const dashesRight = dashesTotal - dashesLeft;
+        const line = `  ${colors_js_1.colors.dim}${'─'.repeat(dashesLeft)}${labelWithPadding}${'─'.repeat(dashesRight)}${colors_js_1.colors.reset}`;
+        (0, terminal_js_1.writeLine)(line);
+    }
+    else {
+        (0, terminal_js_1.writeLine)('');
+    }
+}
 /**
  * Render a message with icon
  * @param type - Message type (success, error, warning, info, question)

package/dist/i18n/languages/en.js

@@ -16,10 +16,11 @@ exports.en = {
         space: 'Space Toggle',
         enter: '⏎ Confirm',
         numbers: '0-9 Number keys',
-        letters: 'A-Z Letter keys',
+        letters: 'Letter Shortcuts',
         selectAll: 'A Select all',
         invert: 'I Invert',
-        yesNo: 'Y/N Quick keys'
+        yesNo: 'Y/N Quick keys',
+        exit: 'Ctrl+C Exit'
     },
     messages: {
         success: 'Success',

package/dist/i18n/languages/zh.js

@@ -16,10 +16,11 @@ exports.zh = {
         space: '空格 选中/取消',
         enter: '⏎ 确认',
         numbers: '0-9 输入序号',
-        letters: 'A-Z 字母选择',
+        letters: '字母 快捷键',
         selectAll: 'A 全选',
         invert: 'I 反选',
-        yesNo: 'Y/N 快捷键'
+        yesNo: 'Y/N 快捷键',
+        exit: 'Ctrl+C 退出'
     },
     messages: {
         success: '成功',

package/dist/i18n/types.d.ts

@@ -24,6 +24,7 @@ export interface LanguageMap {
         selectAll: string;
         invert: string;
         yesNo: string;
+        exit: string;
     };
     messages: {
         success: string;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { menuAPI as menu, inputAPI as input, wizardAPI as wizard } from './api.j
 export { default } from './api.js';
 export { showRadioMenu, showCheckboxMenu, showBooleanMenu } from './components/menus/index.js';
 export { showTextInput, showNumberInput, showLanguageSelector, showModifyField } from './components/inputs/index.js';
-export { renderSimpleHeader, renderAsciiHeader, createSimpleHeader, createAsciiHeader, renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator, renderMessage, showSuccess, showError, showWarning, showInfo, showQuestion, createMessage, renderSummaryTable, createSummaryTable, createSimpleSummary } from './components/display/index.js';
+export { renderSimpleHeader, renderAsciiHeader, createSimpleHeader, createAsciiHeader, renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator, renderMessage, showSuccess, showError, showWarning, showInfo, showQuestion, createMessage, renderSummaryTable, createSummaryTable, createSimpleSummary, renderHeader, type HeaderConfig } from './components/display/index.js';
 export { runWizard, createWizard, WizardConfig, WizardStep, WizardResult } from './features/wizard.js';
 export { registerCommand, unregisterCommand, clearCustomCommands, isCommand, parseCommand, handleCommand, getAvailableCommands, showCommandHelp } from './features/commands.js';
 export { getCurrentLanguage, setLanguage, t, registerLanguage, getAvailableLanguages, getCurrentLanguageMap } from './i18n/registry.js';

package/dist/index.js

@@ -21,8 +21,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyGradient = exports.createGradient = exports.colors = exports.getCurrentLanguageMap = exports.getAvailableLanguages = exports.registerLanguage = exports.t = exports.setLanguage = exports.getCurrentLanguage = exports.showCommandHelp = exports.getAvailableCommands = exports.handleCommand = exports.parseCommand = exports.isCommand = exports.clearCustomCommands = exports.unregisterCommand = exports.registerCommand = exports.createWizard = exports.runWizard = exports.createSimpleSummary = exports.createSummaryTable = exports.renderSummaryTable = exports.createMessage = exports.showQuestion = exports.showInfo = exports.showWarning = exports.showError = exports.showSuccess = exports.renderMessage = exports.createStageSeparator = exports.createStageHeader = exports.createProgressIndicator = exports.renderStageSeparator = exports.renderStageHeader = exports.renderProgressIndicator = exports.createAsciiHeader = exports.createSimpleHeader = exports.renderAsciiHeader = exports.renderSimpleHeader = exports.showModifyField = exports.showLanguageSelector = exports.showNumberInput = exports.showTextInput = exports.showBooleanMenu = exports.showCheckboxMenu = exports.showRadioMenu = exports.default = exports.wizard = exports.input = exports.menu = void 0;
-exports.LAYOUT_PRESETS = exports.KEY_CODES = exports.colorize = void 0;
+exports.createGradient = exports.colors = exports.getCurrentLanguageMap = exports.getAvailableLanguages = exports.registerLanguage = exports.t = exports.setLanguage = exports.getCurrentLanguage = exports.showCommandHelp = exports.getAvailableCommands = exports.handleCommand = exports.parseCommand = exports.isCommand = exports.clearCustomCommands = exports.unregisterCommand = exports.registerCommand = exports.createWizard = exports.runWizard = exports.renderHeader = exports.createSimpleSummary = exports.createSummaryTable = exports.renderSummaryTable = exports.createMessage = exports.showQuestion = exports.showInfo = exports.showWarning = exports.showError = exports.showSuccess = exports.renderMessage = exports.createStageSeparator = exports.createStageHeader = exports.createProgressIndicator = exports.renderStageSeparator = exports.renderStageHeader = exports.renderProgressIndicator = exports.createAsciiHeader = exports.createSimpleHeader = exports.renderAsciiHeader = exports.renderSimpleHeader = exports.showModifyField = exports.showLanguageSelector = exports.showNumberInput = exports.showTextInput = exports.showBooleanMenu = exports.showCheckboxMenu = exports.showRadioMenu = exports.default = exports.wizard = exports.input = exports.menu = void 0;
+exports.LAYOUT_PRESETS = exports.KEY_CODES = exports.colorize = exports.applyGradient = void 0;
 // Export unified API
 var api_js_1 = require("./api.js");
 Object.defineProperty(exports, "menu", { enumerable: true, get: function () { return api_js_1.menuAPI; } });
@@ -63,6 +63,7 @@ Object.defineProperty(exports, "createMessage", { enumerable: true, get: functio
 Object.defineProperty(exports, "renderSummaryTable", { enumerable: true, get: function () { return index_js_3.renderSummaryTable; } });
 Object.defineProperty(exports, "createSummaryTable", { enumerable: true, get: function () { return index_js_3.createSummaryTable; } });
 Object.defineProperty(exports, "createSimpleSummary", { enumerable: true, get: function () { return index_js_3.createSimpleSummary; } });
+Object.defineProperty(exports, "renderHeader", { enumerable: true, get: function () { return index_js_3.renderHeader; } });
 // Export features
 var wizard_js_1 = require("./features/wizard.js");
 Object.defineProperty(exports, "runWizard", { enumerable: true, get: function () { return wizard_js_1.runWizard; } });

package/dist/types/menu.types.d.ts

@@ -3,11 +3,14 @@
  */
 import { MenuLayout } from './layout.types.js';
 /**
- * Menu option (can be string or object with label)
+ * Menu option (can be string, object with label, or section header)
  */
 export type MenuOption = string | {
     label: string;
     value?: string;
+} | {
+    type: 'separator';
+    label?: string;
 };
 /**
  * Base menu configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cli-menu-kit",
-  "version": "0.1.1",
+  "version": "0.1.9",
   "description": "A lightweight, customizable CLI menu system with keyboard shortcuts and real-time rendering",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",