cli-menu-kit 0.1.1 → 0.1.2

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

@@ -24,8 +24,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);
@@ -48,8 +88,14 @@ async function showCheckboxMenu(config) {
                     }
                     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;
@@ -100,42 +146,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 +201,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

@@ -24,8 +24,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 +86,18 @@ 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 {
+                            // Extract number prefix if exists
+                            const match = item.value.match(/^(\d+)\.\s*/);
+                            const prefix = match ? '' : `${selectableIndices.indexOf(index) + 1}. `;
+                            // For radio menus, don't show selection indicator (pass undefined instead of false)
+                            (0, renderer_js_1.renderOption)(item.value, undefined, index === selectedIndex, prefix);
+                        }
                         lineCount++;
                     });
                     break;
@@ -59,13 +105,15 @@ 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);
                         lineCount++;
@@ -111,9 +159,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 +180,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 +201,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;
@@ -108,6 +109,18 @@ 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) {
+        (0, terminal_js_1.writeLine)(`  ${colors_js_1.colors.dim}────── ${label} ──────${colors_js_1.colors.reset}`);
+    }
+    else {
+        (0, terminal_js_1.writeLine)('');
+    }
+}
 /**
  * Render a message with icon
  * @param type - Message type (success, error, warning, info, question)

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.2",
   "description": "A lightweight, customizable CLI menu system with keyboard shortcuts and real-time rendering",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",