cli-menu-kit 0.1.23 → 0.2.0

package/dist/page-layout.js

@@ -0,0 +1,156 @@
+"use strict";
+/**
+ * Page Layout System - Simple Configuration API
+ * Architecture: Header + Main Area + Footer
+ *
+ * This is the simple, configuration-based API that users want.
+ * Just pass config objects, no need to create components manually.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderPage = renderPage;
+const api_js_1 = require("./api.js");
+const header_js_1 = require("./components/display/header.js");
+const headers_js_1 = require("./components/display/headers.js");
+/**
+ * Render Header
+ */
+function renderHeaderSection(config) {
+    if (!config || config.type === 'none') {
+        return;
+    }
+    if (config.type === 'simple' && config.text) {
+        (0, headers_js_1.renderSimpleHeader)(config.text);
+    }
+    else if (config.type === 'section' && config.text) {
+        // Add extra blank line before section header for spacing between menus
+        console.log('');
+        (0, headers_js_1.renderSectionHeader)(config.text, config.width || 50);
+    }
+    else if (config.type === 'full') {
+        // Render full header WITHOUT menuTitle
+        (0, header_js_1.renderHeader)({
+            asciiArt: config.asciiArt || [],
+            title: config.title || '',
+            description: config.description,
+            version: config.version,
+            url: config.url,
+            menuTitle: undefined // Don't render menuTitle in header
+        });
+    }
+}
+/**
+ * Render Menu Title (separate from header)
+ */
+function renderMenuTitle(title) {
+    if (title) {
+        console.log('');
+        console.log(`  ${title}`);
+    }
+}
+/**
+ * Render Main Area
+ */
+async function renderMainArea(config, hints) {
+    if (config.type === 'menu' && config.menu) {
+        // Menu in main area - pass hints from footer
+        const result = await api_js_1.menuAPI.radio({
+            options: config.menu.options,
+            allowLetterKeys: config.menu.allowLetterKeys ?? true,
+            allowNumberKeys: config.menu.allowNumberKeys ?? true,
+            preserveOnSelect: config.menu.preserveOnSelect ?? true
+        }, hints); // Pass hints as second parameter
+        return result;
+    }
+    else if (config.render) {
+        // Custom render function
+        await config.render();
+        return null;
+    }
+    return null;
+}
+/**
+ * Render Footer
+ */
+async function renderFooterSection(config, hints) {
+    if (!config) {
+        return null;
+    }
+    let result = null;
+    // 1. Menu (if present)
+    if (config.menu) {
+        result = await api_js_1.menuAPI.radio({
+            options: config.menu.options,
+            allowLetterKeys: config.menu.allowLetterKeys ?? true,
+            allowNumberKeys: config.menu.allowNumberKeys ?? true,
+            preserveOnSelect: config.menu.preserveOnSelect ?? true
+        }, hints || config.hints);
+    }
+    // 2. Input (if present)
+    else if (config.input) {
+        result = await api_js_1.inputAPI.text({
+            prompt: config.input.prompt,
+            defaultValue: config.input.defaultValue,
+            allowEmpty: config.input.allowEmpty ?? false
+        });
+    }
+    // 3. Ask (if present)
+    else if (config.ask) {
+        const askResult = config.ask.horizontal
+            ? await api_js_1.menuAPI.booleanH(config.ask.question, config.ask.defaultValue ?? false)
+            : await api_js_1.menuAPI.booleanV(config.ask.question, config.ask.defaultValue ?? false);
+        result = askResult;
+    }
+    return result;
+}
+/**
+ * Render complete page with simple configuration API
+ *
+ * @example
+ * ```typescript
+ * const result = await renderPage({
+ *   header: {
+ *     type: 'full',
+ *     asciiArt: ['...'],
+ *     title: 'My App',
+ *     description: 'Description',
+ *     version: '1.0.0'
+ *   },
+ *   mainArea: {
+ *     type: 'menu',
+ *     menu: {
+ *       options: ['Option 1', 'Option 2'],
+ *       allowLetterKeys: true,
+ *       allowNumberKeys: true
+ *     }
+ *   },
+ *   footer: {
+ *     hints: ['↑↓ Navigate', 'Enter Confirm']
+ *   }
+ * });
+ * ```
+ */
+async function renderPage(config) {
+    // 1. Render Header (without menuTitle)
+    renderHeaderSection(config.header);
+    // 2. Render Menu Title (if provided)
+    renderMenuTitle(config.header?.menuTitle);
+    // 3. Determine where to render hints
+    let mainResult = null;
+    if (config.footer?.menu || config.footer?.ask || config.footer?.input) {
+        // Footer has interactive element - render main area first, then footer with hints
+        if (config.mainArea.type === 'menu' && config.mainArea.menu) {
+            mainResult = await renderMainArea(config.mainArea, undefined);
+        }
+        else if (config.mainArea.render) {
+            await config.mainArea.render();
+        }
+        // Render footer with hints
+        const footerResult = await renderFooterSection(config.footer, config.footer.hints);
+        return footerResult || mainResult;
+    }
+    else {
+        // Footer has no interactive element - render main area with hints from footer
+        mainResult = await renderMainArea(config.mainArea, config.footer?.hints);
+        return mainResult;
+    }
+}

package/dist/types/display.types.d.ts

@@ -55,4 +55,10 @@ export interface SummaryTableConfig {
         }>;
     }>;
     width?: number;
+    colors?: {
+        title?: string;
+        sectionHeader?: string;
+        key?: string;
+        value?: string;
+    };
 }

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

@@ -1,7 +1,6 @@
 /**
  * Menu component types for CLI Menu Kit
  */
-import { MenuLayout } from './layout.types.js';
 /**
  * Menu option (can be string, object with label, or section header)
  */
@@ -20,10 +19,6 @@ export interface BaseMenuConfig {
     title?: string;
     /** Input prompt text */
     prompt?: string;
-    /** Hint texts to display */
-    hints?: string[];
-    /** Layout configuration */
-    layout?: MenuLayout;
     /** Color for highlighted items */
     highlightColor?: string;
     /** Goodbye message function */
@@ -90,3 +85,60 @@ export interface CheckboxMenuResult {
     values: string[];
 }
 export type BooleanMenuResult = boolean;
+/**
+ * Checkbox table menu configuration
+ * Combines checkbox selection with table display
+ */
+export interface CheckboxTableMenuConfig extends BaseMenuConfig {
+    /** Table columns definition */
+    columns: Array<{
+        header: string;
+        key: string;
+        width?: number;
+        align?: 'left' | 'center' | 'right';
+    }>;
+    /** Data rows (each row is an object with column keys) */
+    data: Record<string, any>[];
+    /** Optional: Key to use as unique identifier (default: index) */
+    idKey?: string;
+    /** Default selected row indices or IDs */
+    defaultSelected?: (number | string)[];
+    /** Minimum selections required */
+    minSelections?: number;
+    /** Maximum selections allowed */
+    maxSelections?: number;
+    /** Allow select all */
+    allowSelectAll?: boolean;
+    /** Allow invert selection */
+    allowInvert?: boolean;
+    /** Show table borders (default: false for checkbox menu style) */
+    showBorders?: boolean;
+    /** Show header separator (default: true) */
+    showHeaderSeparator?: boolean;
+    /** Phase/group separators (for grouping rows) */
+    separators?: Array<{
+        /** Insert before this row index */
+        beforeIndex: number;
+        /** Separator label */
+        label: string;
+        /** Optional description shown below the separator */
+        description?: string;
+    }>;
+    /** Separator label and description alignment (default: 'center') */
+    separatorAlign?: 'left' | 'center' | 'right';
+    /** Column width calculation mode */
+    widthMode?: 'auto' | 'fixed';
+    /** Checkbox column width (default: 4) */
+    checkboxWidth?: number;
+}
+/**
+ * Checkbox table menu result
+ */
+export interface CheckboxTableMenuResult {
+    /** Selected row indices */
+    indices: number[];
+    /** Selected row data objects */
+    rows: Record<string, any>[];
+    /** Selected IDs (if idKey is provided) */
+    ids?: (string | number)[];
+}

package/package.json

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

package/dist/types/layout.types.d.ts

@@ -1,56 +0,0 @@
-/**
- * Layout system types for CLI Menu Kit
- * Defines how components are composed and rendered
- */
-/**
- * Layout element types that can be arranged
- */
-export type LayoutElement = 'header' | 'options' | 'input' | 'hints' | 'progress';
-/**
- * Visibility configuration for layout elements
- */
-export interface LayoutVisibility {
-    header?: boolean;
-    input?: boolean;
-    hints?: boolean;
-    progress?: boolean;
-}
-/**
- * Spacing configuration for layout elements
- * Values represent number of blank lines
- */
-export interface LayoutSpacing {
-    beforeHeader?: number;
-    afterHeader?: number;
-    beforeOptions?: number;
-    afterOptions?: number;
-    beforeInput?: number;
-    afterInput?: number;
-    beforeHints?: number;
-    beforeProgress?: number;
-    afterProgress?: number;
-}
-/**
- * Complete menu layout configuration
- */
-export interface MenuLayout {
-    /** Order in which elements are rendered */
-    order: LayoutElement[];
-    /** Which elements are visible */
-    visible: LayoutVisibility;
-    /** Spacing between elements */
-    spacing?: LayoutSpacing;
-}
-/**
- * Preset layout configurations
- */
-export declare const LAYOUT_PRESETS: {
-    /** Main menu with header */
-    MAIN_MENU: MenuLayout;
-    /** Sub menu without header */
-    SUB_MENU: MenuLayout;
-    /** Wizard step with progress indicator */
-    WIZARD_STEP: MenuLayout;
-    /** Minimal layout (options only) */
-    MINIMAL: MenuLayout;
-};

package/dist/types/layout.types.js

@@ -1,36 +0,0 @@
-"use strict";
-/**
- * Layout system types for CLI Menu Kit
- * Defines how components are composed and rendered
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LAYOUT_PRESETS = void 0;
-/**
- * Preset layout configurations
- */
-exports.LAYOUT_PRESETS = {
-    /** Main menu with header */
-    MAIN_MENU: {
-        order: ['header', 'options', 'input', 'hints'],
-        visible: { header: true, input: true, hints: true },
-        spacing: { afterHeader: 1, afterOptions: 1, beforeHints: 1 }
-    },
-    /** Sub menu without header */
-    SUB_MENU: {
-        order: ['options', 'input', 'hints'],
-        visible: { header: false, input: true, hints: true },
-        spacing: { afterOptions: 1, beforeHints: 1 }
-    },
-    /** Wizard step with progress indicator */
-    WIZARD_STEP: {
-        order: ['header', 'progress', 'options', 'input', 'hints'],
-        visible: { header: true, progress: true, input: true, hints: true },
-        spacing: { afterHeader: 1, afterProgress: 1, afterOptions: 1, beforeHints: 1 }
-    },
-    /** Minimal layout (options only) */
-    MINIMAL: {
-        order: ['options'],
-        visible: { header: false, input: false, hints: false },
-        spacing: {}
-    }
-};