cli-menu-kit 0.1.23 → 0.2.0

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

@@ -0,0 +1,49 @@
+/**
+ * List Component
+ * Displays items in a list format with optional bullets/numbers
+ */
+/**
+ * List item configuration
+ */
+export interface ListItem {
+    /** Item text */
+    text: string;
+    /** Item indent level (0 = no indent) */
+    indent?: number;
+    /** Custom bullet/prefix */
+    bullet?: string;
+}
+/**
+ * List configuration
+ */
+export interface ListConfig {
+    /** List items */
+    items: (string | ListItem)[];
+    /** List style */
+    style?: 'bullet' | 'number' | 'none';
+    /** Custom bullet character (for bullet style) */
+    bulletChar?: string;
+    /** Indent size in spaces */
+    indentSize?: number;
+}
+/**
+ * Render list component
+ * @param config - List configuration
+ */
+export declare function renderList(config: ListConfig): void;
+/**
+ * Create list configuration (factory function)
+ */
+export declare function createList(items: (string | ListItem)[], options?: {
+    style?: 'bullet' | 'number' | 'none';
+    bulletChar?: string;
+    indentSize?: number;
+}): ListConfig;
+/**
+ * Create a simple bullet list
+ */
+export declare function createBulletList(items: string[]): ListConfig;
+/**
+ * Create a numbered list
+ */
+export declare function createNumberedList(items: string[]): ListConfig;

package/dist/components/display/list.js

@@ -0,0 +1,86 @@
+"use strict";
+/**
+ * List Component
+ * Displays items in a list format with optional bullets/numbers
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderList = renderList;
+exports.createList = createList;
+exports.createBulletList = createBulletList;
+exports.createNumberedList = createNumberedList;
+const terminal_js_1 = require("../../core/terminal.js");
+/**
+ * Render list component
+ * @param config - List configuration
+ */
+function renderList(config) {
+    const { items, style = 'bullet', bulletChar = '•', indentSize = 2 } = config;
+    if (items.length === 0) {
+        return;
+    }
+    items.forEach((item, index) => {
+        let text;
+        let indent;
+        let bullet;
+        // Parse item
+        if (typeof item === 'string') {
+            text = item;
+            indent = 0;
+            bullet = undefined;
+        }
+        else {
+            text = item.text;
+            indent = item.indent || 0;
+            bullet = item.bullet;
+        }
+        // Generate prefix based on style
+        let prefix;
+        if (bullet) {
+            // Custom bullet
+            prefix = bullet;
+        }
+        else {
+            switch (style) {
+                case 'number':
+                    prefix = `${index + 1}.`;
+                    break;
+                case 'bullet':
+                    prefix = bulletChar;
+                    break;
+                case 'none':
+                default:
+                    prefix = '';
+                    break;
+            }
+        }
+        // Build line with indent and prefix
+        const indentStr = ' '.repeat(indent * indentSize);
+        const line = prefix
+            ? `${indentStr}${prefix} ${text}`
+            : `${indentStr}${text}`;
+        (0, terminal_js_1.writeLine)(line);
+    });
+}
+/**
+ * Create list configuration (factory function)
+ */
+function createList(items, options) {
+    return {
+        items,
+        style: options?.style ?? 'bullet',
+        bulletChar: options?.bulletChar ?? '•',
+        indentSize: options?.indentSize ?? 2
+    };
+}
+/**
+ * Create a simple bullet list
+ */
+function createBulletList(items) {
+    return createList(items, { style: 'bullet' });
+}
+/**
+ * Create a numbered list
+ */
+function createNumberedList(items) {
+    return createList(items, { style: 'number' });
+}

package/dist/components/display/summary.js

@@ -11,7 +11,83 @@ const terminal_js_1 = require("../../core/terminal.js");
 const colors_js_1 = require("../../core/colors.js");
 const terminal_js_2 = require("../../core/terminal.js");
 /**
- * Wrap text to fit within a specific width
+ * Wrap text to fit within a specific width, preserving ANSI color codes
+ */
+function wrapTextWithColors(text, maxWidth) {
+    // Extract ANSI codes and plain text
+    const ansiRegex = /\x1b\[[0-9;]*m/g;
+    const plainText = text.replace(ansiRegex, '');
+    // If plain text fits, return as-is
+    if (plainText.length <= maxWidth) {
+        return [text];
+    }
+    // Find all ANSI codes and their positions in the original text
+    const codes = [];
+    let match;
+    let offset = 0;
+    const textCopy = text;
+    while ((match = ansiRegex.exec(textCopy)) !== null) {
+        // Calculate position in plain text
+        const plainPos = match.index - offset;
+        codes.push({ pos: plainPos, code: match[0] });
+        offset += match[0].length;
+    }
+    // Wrap plain text by words
+    const words = plainText.split(' ');
+    const lines = [];
+    let currentLine = '';
+    let currentPos = 0;
+    for (const word of words) {
+        const testLine = currentLine ? `${currentLine} ${word}` : word;
+        if (testLine.length <= maxWidth) {
+            currentLine = testLine;
+        }
+        else {
+            if (currentLine) {
+                lines.push(currentLine);
+                currentPos += currentLine.length + 1; // +1 for space
+            }
+            currentLine = word;
+        }
+    }
+    if (currentLine) {
+        lines.push(currentLine);
+    }
+    // Re-insert ANSI codes into wrapped lines
+    const result = [];
+    let lineStart = 0;
+    let activeColor = '';
+    for (const line of lines) {
+        const lineEnd = lineStart + line.length;
+        let coloredLine = activeColor; // Start with active color from previous line
+        // Find codes that apply to this line
+        let lastPos = 0;
+        for (const { pos, code } of codes) {
+            if (pos >= lineStart && pos < lineEnd) {
+                const relPos = pos - lineStart;
+                coloredLine += line.substring(lastPos, relPos) + code;
+                lastPos = relPos;
+                // Track active color (reset or new color)
+                if (code === '\x1b[0m') {
+                    activeColor = '';
+                }
+                else {
+                    activeColor = code;
+                }
+            }
+        }
+        coloredLine += line.substring(lastPos);
+        // Add reset at end if there's an active color
+        if (activeColor && activeColor !== '\x1b[0m') {
+            coloredLine += '\x1b[0m';
+        }
+        result.push(coloredLine);
+        lineStart = lineEnd + 1; // +1 for space between words
+    }
+    return result;
+}
+/**
+ * Wrap text to fit within a specific width (plain text only)
  */
 function wrapText(text, maxWidth) {
     const words = text.split(' ');
@@ -39,7 +115,16 @@ function wrapText(text, maxWidth) {
  * @param config - Summary table configuration
  */
 function renderSummaryTable(config) {
-    const { title, titleAlign = 'center', sections, width } = config;
+    const { title, titleAlign = 'center', sections, width, colors: colorConfig } = config;
+    // Default colors
+    const defaultColors = {
+        title: 'cyan+bold',
+        sectionHeader: '', // No color (default/black)
+        key: 'cyan',
+        value: '' // No color (default/black)
+    };
+    // Merge with provided colors
+    const finalColors = { ...defaultColors, ...colorConfig };
     const termWidth = (0, terminal_js_2.getTerminalWidth)();
     // Use full terminal width minus padding, or specified width
     const boxWidth = width || Math.max(60, termWidth - 4);
@@ -51,55 +136,68 @@ function renderSummaryTable(config) {
     (0, terminal_js_1.writeLine)(`│${' '.repeat(boxWidth - 2)}│`);
     // Title if provided
     if (title) {
+        // Parse color configuration (supports "color" or "color+style" format)
+        let titleColor = '';
+        if (finalColors.title) {
+            const parts = finalColors.title.split('+');
+            titleColor = parts.map(part => colors_js_1.colors[part.trim()] || '').join('');
+        }
+        const resetColor = titleColor ? colors_js_1.colors.reset : '';
         let titleLine;
         let remainingSpace;
         if (titleAlign === 'left') {
-            titleLine = `  ${colors_js_1.colors.cyan}${title}${colors_js_1.colors.reset}`;
+            titleLine = `  ${titleColor}${title}${resetColor}`;
             const plainTitle = title;
             remainingSpace = boxWidth - plainTitle.length - 4;
         }
         else if (titleAlign === 'right') {
             const plainTitle = title;
             const rightPadding = contentWidth - plainTitle.length;
-            titleLine = ' '.repeat(rightPadding + 2) + colors_js_1.colors.cyan + title + colors_js_1.colors.reset;
+            titleLine = ' '.repeat(rightPadding + 2) + titleColor + title + resetColor;
             remainingSpace = 2;
         }
         else {
             // center (default)
             const titlePadding = Math.floor((contentWidth - title.length) / 2);
-            titleLine = ' '.repeat(titlePadding + 2) + colors_js_1.colors.cyan + title + colors_js_1.colors.reset;
+            titleLine = ' '.repeat(titlePadding + 2) + titleColor + title + resetColor;
             remainingSpace = boxWidth - titlePadding - title.length - 4;
         }
         (0, terminal_js_1.writeLine)(`│${titleLine}${' '.repeat(remainingSpace)}│`);
         (0, terminal_js_1.writeLine)(`│${' '.repeat(boxWidth - 2)}│`);
     }
+    // Calculate global keyPadding based on longest key across ALL sections
+    const allKeys = sections.flatMap(section => section.items.map(item => item.key));
+    const maxKeyLength = Math.max(...allKeys.map(key => key.length));
+    const keyPadding = maxKeyLength + 3; // +3 for colon and spacing
     // Sections
     sections.forEach((section, sectionIndex) => {
         // Section header if provided
         if (section.header) {
-            const headerLine = `  ${section.header}`;
+            const headerColor = finalColors.sectionHeader ? colors_js_1.colors[finalColors.sectionHeader] || '' : '';
+            const resetColor = headerColor ? colors_js_1.colors.reset : '';
+            const headerLine = `  ${headerColor}${section.header}${resetColor}`;
             const remainingSpace = boxWidth - section.header.length - 4;
             (0, terminal_js_1.writeLine)(`│${headerLine}${' '.repeat(remainingSpace)}│`);
         }
-        // Calculate keyPadding based on longest key in this section
-        const maxKeyLength = Math.max(...section.items.map(item => item.key.length));
-        const keyPadding = maxKeyLength + 3; // +3 for colon and spacing
-        // Section items
+        // Section items (using global keyPadding)
         section.items.forEach(item => {
             const valueMaxWidth = contentWidth - keyPadding - 2; // 2 for leading spaces
             // Check if value needs wrapping
             const plainValue = item.value.replace(/\x1b\[[0-9;]*m/g, '');
             if (plainValue.length > valueMaxWidth) {
-                // Wrap the value
-                const wrappedLines = wrapText(plainValue, valueMaxWidth);
+                // Wrap the value (preserving colors if present)
+                const wrappedLines = wrapTextWithColors(item.value, valueMaxWidth);
                 // First line with key
-                const firstLine = `  ${colors_js_1.colors.cyan}${item.key}:${colors_js_1.colors.reset}${' '.repeat(Math.max(1, keyPadding - item.key.length))}${wrappedLines[0]}`;
+                const keyColor = finalColors.key ? colors_js_1.colors[finalColors.key] || '' : '';
+                const keyResetColor = keyColor ? colors_js_1.colors.reset : '';
+                // wrappedLines already contain colors, don't add valueColor
+                const firstLine = `  ${keyColor}${item.key}:${keyResetColor}${' '.repeat(Math.max(1, keyPadding - item.key.length))}${wrappedLines[0]}`;
                 const plainFirstLine = firstLine.replace(/\x1b\[[0-9;]*m/g, '');
                 const remainingSpace = boxWidth - plainFirstLine.length - 2;
                 (0, terminal_js_1.writeLine)(`│${firstLine}${' '.repeat(Math.max(0, remainingSpace))}│`);
                 // Subsequent lines with indentation
                 for (let i = 1; i < wrappedLines.length; i++) {
-                    const continuationLine = `  ${' '.repeat(keyPadding)}${wrappedLines[i]}`;
+                    const continuationLine = `  ${' '.repeat(keyPadding + 1)}${wrappedLines[i]}`;
                     const plainContinuationLine = continuationLine.replace(/\x1b\[[0-9;]*m/g, '');
                     const contRemainingSpace = boxWidth - plainContinuationLine.length - 2;
                     (0, terminal_js_1.writeLine)(`│${continuationLine}${' '.repeat(Math.max(0, contRemainingSpace))}│`);
@@ -107,7 +205,13 @@ function renderSummaryTable(config) {
             }
             else {
                 // No wrapping needed
-                const itemLine = `  ${item.key}:${' '.repeat(Math.max(1, keyPadding - item.key.length))}${item.value}`;
+                const keyColor = finalColors.key ? colors_js_1.colors[finalColors.key] || '' : '';
+                const keyResetColor = keyColor ? colors_js_1.colors.reset : '';
+                const valueColor = finalColors.value ? colors_js_1.colors[finalColors.value] || '' : '';
+                const valueResetColor = valueColor ? colors_js_1.colors.reset : '';
+                // Only wrap value with color if valueColor is set, otherwise preserve original colors in item.value
+                const coloredValue = valueColor ? `${valueColor}${item.value}${valueResetColor}` : item.value;
+                const itemLine = `  ${keyColor}${item.key}:${keyResetColor}${' '.repeat(Math.max(1, keyPadding - item.key.length))}${coloredValue}`;
                 const plainItemLine = itemLine.replace(/\x1b\[[0-9;]*m/g, '');
                 const remainingSpace = boxWidth - plainItemLine.length - 2;
                 (0, terminal_js_1.writeLine)(`│${itemLine}${' '.repeat(Math.max(0, remainingSpace))}│`);

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

@@ -0,0 +1,42 @@
+/**
+ * Table Component
+ * Displays data in a table format with headers and rows
+ */
+/**
+ * Table column configuration
+ */
+export interface TableColumn {
+    /** Column header */
+    header: string;
+    /** Column key in data object */
+    key: string;
+    /** Column width (optional, auto-calculated if not provided) */
+    width?: number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * Table configuration
+ */
+export interface TableConfig {
+    /** Table columns */
+    columns: TableColumn[];
+    /** Table data rows */
+    data: Record<string, any>[];
+    /** Show table borders */
+    showBorders?: boolean;
+    /** Show header separator */
+    showHeaderSeparator?: boolean;
+}
+/**
+ * Render table component
+ * @param config - Table configuration
+ */
+export declare function renderTable(config: TableConfig): void;
+/**
+ * Create table configuration (factory function)
+ */
+export declare function createTable(columns: TableColumn[], data: Record<string, any>[], options?: {
+    showBorders?: boolean;
+    showHeaderSeparator?: boolean;
+}): TableConfig;

package/dist/components/display/table.js

@@ -0,0 +1,107 @@
+"use strict";
+/**
+ * Table Component
+ * Displays data in a table format with headers and rows
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderTable = renderTable;
+exports.createTable = createTable;
+const terminal_js_1 = require("../../core/terminal.js");
+/**
+ * Render table component
+ * @param config - Table configuration
+ */
+function renderTable(config) {
+    const { columns, data, showBorders = true, showHeaderSeparator = true } = config;
+    if (columns.length === 0 || data.length === 0) {
+        return;
+    }
+    // Calculate column widths
+    const columnWidths = columns.map((col, index) => {
+        if (col.width)
+            return col.width;
+        // Auto-calculate width based on header and data
+        const headerWidth = col.header.length;
+        const dataWidth = Math.max(...data.map(row => String(row[col.key] || '').length));
+        return Math.max(headerWidth, dataWidth) + 2; // +2 for padding
+    });
+    // Render top border
+    if (showBorders) {
+        const border = columnWidths.map(w => '─'.repeat(w)).join('┬');
+        (0, terminal_js_1.writeLine)(`┌${border}┐`);
+    }
+    // Render header
+    const headerCells = columns.map((col, index) => {
+        const width = columnWidths[index];
+        const align = col.align || 'left';
+        return alignText(col.header, width, align);
+    });
+    if (showBorders) {
+        (0, terminal_js_1.writeLine)(`│${headerCells.join('│')}│`);
+    }
+    else {
+        (0, terminal_js_1.writeLine)(headerCells.join(' '));
+    }
+    // Render header separator
+    if (showHeaderSeparator) {
+        if (showBorders) {
+            const separator = columnWidths.map(w => '─'.repeat(w)).join('┼');
+            (0, terminal_js_1.writeLine)(`├${separator}┤`);
+        }
+        else {
+            const separator = columnWidths.map(w => '─'.repeat(w)).join(' ');
+            (0, terminal_js_1.writeLine)(separator);
+        }
+    }
+    // Render data rows
+    data.forEach((row, rowIndex) => {
+        const cells = columns.map((col, colIndex) => {
+            const width = columnWidths[colIndex];
+            const align = col.align || 'left';
+            const value = String(row[col.key] || '');
+            return alignText(value, width, align);
+        });
+        if (showBorders) {
+            (0, terminal_js_1.writeLine)(`│${cells.join('│')}│`);
+        }
+        else {
+            (0, terminal_js_1.writeLine)(cells.join(' '));
+        }
+    });
+    // Render bottom border
+    if (showBorders) {
+        const border = columnWidths.map(w => '─'.repeat(w)).join('┴');
+        (0, terminal_js_1.writeLine)(`└${border}┘`);
+    }
+}
+/**
+ * Align text within a given width
+ */
+function alignText(text, width, align) {
+    const padding = width - text.length;
+    if (padding <= 0) {
+        return text.substring(0, width);
+    }
+    switch (align) {
+        case 'center':
+            const leftPad = Math.floor(padding / 2);
+            const rightPad = padding - leftPad;
+            return ' '.repeat(leftPad) + text + ' '.repeat(rightPad);
+        case 'right':
+            return ' '.repeat(padding) + text;
+        case 'left':
+        default:
+            return text + ' '.repeat(padding);
+    }
+}
+/**
+ * Create table configuration (factory function)
+ */
+function createTable(columns, data, options) {
+    return {
+        columns,
+        data,
+        showBorders: options?.showBorders ?? true,
+        showHeaderSeparator: options?.showHeaderSeparator ?? true
+    };
+}

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

@@ -8,13 +8,14 @@ exports.showBooleanMenu = showBooleanMenu;
 const terminal_js_1 = require("../../core/terminal.js");
 const keyboard_js_1 = require("../../core/keyboard.js");
 const colors_js_1 = require("../../core/colors.js");
+const registry_js_1 = require("../../i18n/registry.js");
 /**
  * Show a boolean menu (yes/no selection)
  * @param config - Menu configuration
  * @returns Promise resolving to boolean result
  */
 async function showBooleanMenu(config) {
-    const { question, defaultValue = true, yesText = '是', noText = '否', orientation = 'horizontal', onExit, preserveOnSelect = false } = config;
+    const { question, defaultValue = true, yesText = (0, registry_js_1.t)('menus.yes'), noText = (0, registry_js_1.t)('menus.no'), orientation = 'horizontal', onExit, preserveOnSelect = false } = config;
     if (orientation === 'horizontal') {
         return showBooleanMenuHorizontal(question, defaultValue, yesText, noText, onExit, preserveOnSelect);
     }

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

@@ -6,6 +6,7 @@ import { CheckboxMenuConfig, CheckboxMenuResult } from '../../types/menu.types.j
 /**
  * Show a checkbox menu (multi-select)
  * @param config - Menu configuration
+ * @param hints - Optional hints to display at the bottom (for Page Layout use)
  * @returns Promise resolving to selected options
  */
-export declare function showCheckboxMenu(config: CheckboxMenuConfig): Promise<CheckboxMenuResult>;
+export declare function showCheckboxMenu(config: CheckboxMenuConfig, hints?: string[]): Promise<CheckboxMenuResult>;

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

@@ -5,36 +5,20 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.showCheckboxMenu = showCheckboxMenu;
-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
+ * @param hints - Optional hints to display at the bottom (for Page Layout use)
  * @returns Promise resolving to selected options
  */
-async function showCheckboxMenu(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, separatorWidth = 30, onExit, preserveOnSelect = false } = config;
+async function showCheckboxMenu(config, hints) {
+    const { options, title, prompt, defaultSelected = [], minSelections = 0, maxSelections, allowSelectAll = true, allowInvert = true, separatorWidth = 30, onExit, preserveOnSelect = false } = 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');
@@ -89,49 +73,36 @@ async function showCheckboxMenu(config) {
     const render = () => {
         (0, terminal_js_1.clearMenu)(state);
         let lineCount = 0;
-        // Render based on layout order
-        layout.order.forEach(element => {
-            // Add spacing before element
-            const spacingKey = `before${element.charAt(0).toUpperCase() + element.slice(1)}`;
-            if (layout.spacing?.[spacingKey]) {
-                (0, renderer_js_1.renderBlankLines)(layout.spacing[spacingKey]);
-                lineCount += layout.spacing[spacingKey];
-            }
-            switch (element) {
-                case 'input':
-                    if (layout.visible.input) {
-                        const selectedCount = selected.size;
-                        const displayValue = `${selectedCount} ${(0, registry_js_1.t)('menus.selectedCount')}`;
-                        (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
-                        lineCount++;
-                    }
-                    break;
-                case 'options':
-                    optionData.forEach((item, index) => {
-                        if (item.isSeparator) {
-                            // Render section label
-                            (0, renderer_js_1.renderSectionLabel)(item.label, separatorWidth);
-                        }
-                        else {
-                            (0, renderer_js_1.renderOption)(item.value, selected.has(index), index === cursorIndex);
-                        }
-                        lineCount++;
-                    });
-                    break;
-                case 'hints':
-                    if (layout.visible.hints && displayHints.length > 0) {
-                        (0, renderer_js_1.renderHints)(displayHints);
-                        lineCount++;
-                    }
-                    break;
+        // Render title if provided
+        if (title) {
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+        }
+        // Render input prompt (show selected count)
+        const selectedCount = selected.size;
+        const displayValue = `${selectedCount} ${(0, registry_js_1.t)('menus.selectedCount')}`;
+        (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
+        lineCount++;
+        (0, renderer_js_1.renderBlankLines)(1);
+        lineCount++;
+        // Render options
+        optionData.forEach((item, index) => {
+            if (item.isSeparator) {
+                // Render section label
+                (0, renderer_js_1.renderSectionLabel)(item.label, separatorWidth);
             }
-            // Add spacing after element
-            const afterSpacingKey = `after${element.charAt(0).toUpperCase() + element.slice(1)}`;
-            if (layout.spacing?.[afterSpacingKey]) {
-                (0, renderer_js_1.renderBlankLines)(layout.spacing[afterSpacingKey]);
-                lineCount += layout.spacing[afterSpacingKey];
+            else {
+                (0, renderer_js_1.renderOption)(item.value, selected.has(index), index === cursorIndex);
             }
+            lineCount++;
         });
+        // Render hints if provided
+        if (hints && hints.length > 0) {
+            (0, renderer_js_1.renderBlankLines)(1);
+            lineCount++;
+            (0, renderer_js_1.renderHints)(hints);
+            lineCount += 1;
+        }
         state.renderedLines = lineCount;
     };
     // Initial render

package/dist/components/menus/checkbox-table-menu.d.ts

@@ -0,0 +1,12 @@
+/**
+ * CheckboxTableMenu - Multi-select menu with table display
+ * Combines checkbox selection with formatted table layout
+ */
+import { CheckboxTableMenuConfig, CheckboxTableMenuResult } from '../../types/menu.types.js';
+/**
+ * Show a checkbox table menu (multi-select with table display)
+ * @param config - Menu configuration
+ * @param hints - Optional hints to display at the bottom (for Page Layout use)
+ * @returns Promise resolving to selected rows
+ */
+export declare function showCheckboxTableMenu(config: CheckboxTableMenuConfig, hints?: string[]): Promise<CheckboxTableMenuResult>;