cli-menu-kit 0.1.2 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/components/display/header.d.ts +30 -0
  2. package/dist/components/display/header.js +58 -0
  3. package/dist/components/display/headers.d.ts +30 -8
  4. package/dist/components/display/headers.js +45 -15
  5. package/dist/components/display/index.d.ts +2 -1
  6. package/dist/components/display/index.js +5 -1
  7. package/dist/components/menus/checkbox-menu.js +24 -5
  8. package/dist/components/menus/radio-menu.js +38 -8
  9. package/dist/core/colors.d.ts +21 -0
  10. package/dist/core/colors.js +27 -1
  11. package/dist/core/renderer.js +38 -8
  12. package/dist/i18n/languages/en.js +3 -2
  13. package/dist/i18n/languages/zh.js +3 -2
  14. package/dist/i18n/types.d.ts +1 -0
  15. package/dist/index.d.ts +1 -1
  16. package/dist/index.js +5 -2
  17. package/package.json +1 -1
package/dist/components/display/header.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Header component for CLI applications
3
+ * Displays ASCII art, title, description, version and URL
4
+ */
5
+ /**
6
+ * Header configuration
7
+ */
8
+ export interface HeaderConfig {
9
+ /** ASCII art lines (array of strings) */
10
+ asciiArt?: string[];
11
+ /** Application title */
12
+ title?: string;
13
+ /** Application description */
14
+ description?: string;
15
+ /** Version number */
16
+ version?: string;
17
+ /** Project URL */
18
+ url?: string;
19
+ /** Optional menu title (e.g., "请选择功能:") */
20
+ menuTitle?: string;
21
+ /** Box width (default: 60) */
22
+ boxWidth?: number;
23
+ /** Header color (default: cyan) */
24
+ color?: string;
25
+ }
26
+ /**
27
+ * Render a boxed header with ASCII art, title, and description
28
+ * @param config - Header configuration
29
+ */
30
+ export declare function renderHeader(config: HeaderConfig): void;
package/dist/components/display/header.js ADDED
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+ /**
3
+ * Header component for CLI applications
4
+ * Displays ASCII art, title, description, version and URL
5
+ */
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.renderHeader = renderHeader;
8
+ const colors_js_1 = require("../../core/colors.js");
9
+ const terminal_js_1 = require("../../core/terminal.js");
10
+ /**
11
+ * Render a boxed header with ASCII art, title, and description
12
+ * @param config - Header configuration
13
+ */
14
+ function renderHeader(config) {
15
+ const { asciiArt = [], title = '', description = '', version, url, menuTitle, boxWidth = 60, color = colors_js_1.uiColors.border } = config;
16
+ const boldColor = `${color}${colors_js_1.colors.bold}`;
17
+ // Top border
18
+ (0, terminal_js_1.writeLine)('');
19
+ (0, terminal_js_1.writeLine)(`${boldColor}╔${'═'.repeat(boxWidth - 2)}╗${colors_js_1.colors.reset}`);
20
+ // Empty line
21
+ (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
22
+ // ASCII art (left-aligned with 2 spaces padding)
23
+ if (asciiArt.length > 0) {
24
+ asciiArt.forEach(line => {
25
+ const paddedLine = ` ${line}`.padEnd(boxWidth - 2, ' ');
26
+ (0, terminal_js_1.writeLine)(`${boldColor}║${paddedLine}║${colors_js_1.colors.reset}`);
27
+ });
28
+ (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
29
+ }
30
+ // Title (left-aligned with 2 spaces padding, black text)
31
+ if (title) {
32
+ const paddedTitle = ` ${title}`.padEnd(boxWidth - 2, ' ');
33
+ (0, terminal_js_1.writeLine)(`${boldColor}║${colors_js_1.colors.reset}${paddedTitle}${boldColor}║${colors_js_1.colors.reset}`);
34
+ (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
35
+ }
36
+ // Description (left-aligned with 2 spaces padding, gray text)
37
+ if (description) {
38
+ const paddedDesc = ` ${colors_js_1.uiColors.textSecondary}${description}${colors_js_1.colors.reset}`.padEnd(boxWidth - 2 + colors_js_1.uiColors.textSecondary.length + colors_js_1.colors.reset.length, ' ');
39
+ (0, terminal_js_1.writeLine)(`${boldColor}║${paddedDesc}║${colors_js_1.colors.reset}`);
40
+ (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
41
+ }
42
+ // Bottom border
43
+ (0, terminal_js_1.writeLine)(`${boldColor}╚${'═'.repeat(boxWidth - 2)}╝${colors_js_1.colors.reset}`);
44
+ // Blank line after box
45
+ (0, terminal_js_1.writeLine)('');
46
+ // Version and URL (outside the box, with colors)
47
+ if (version || url) {
48
+ const versionText = version ? `${colors_js_1.uiColors.info}Version: ${version}${colors_js_1.colors.reset}` : '';
49
+ const urlText = url ? `${colors_js_1.uiColors.accent}${url}${colors_js_1.colors.reset}` : '';
50
+ const separator = version && url ? `${colors_js_1.uiColors.textSecondary} | ${colors_js_1.colors.reset}` : '';
51
+ (0, terminal_js_1.writeLine)(` ${versionText}${separator}${urlText}`);
52
+ }
53
+ // Menu title (optional)
54
+ if (menuTitle) {
55
+ (0, terminal_js_1.writeLine)('');
56
+ (0, terminal_js_1.writeLine)(`${color} ${menuTitle}${colors_js_1.colors.reset}`);
57
+ }
58
+ }
package/dist/components/display/headers.d.ts CHANGED
@@ -1,28 +1,50 @@
1
1
  /**
2
2
  * Headers - Display header components
3
- * Provides simple and ASCII art headers
3
+ * Provides three header modes: full, section, and simple
4
4
  */
5
- import { SimpleHeaderConfig, AsciiHeaderConfig } from '../../types/display.types.js';
5
+ import { AsciiHeaderConfig } from '../../types/display.types.js';
6
6
  /**
7
- * Render a simple header
8
- * @param config - Header configuration
7
+ * Render a simple header with equals signs
8
+ * Format: === Title ===
9
+ * @param text - Header text
10
+ * @param color - Optional color (default: cyan)
11
+ */
12
+ export declare function renderSimpleHeader(text: string, color?: string): void;
13
+ /**
14
+ * Render a section header with double-line borders
15
+ * Format:
16
+ * ══════════════════════════════════════════════════
17
+ * Title
18
+ * ══════════════════════════════════════════════════
19
+ * @param text - Header text
20
+ * @param width - Border width (default: 50)
21
+ * @param color - Optional color (default: cyan)
9
22
  */
10
- export declare function renderSimpleHeader(config: SimpleHeaderConfig): void;
23
+ export declare function renderSectionHeader(text: string, width?: number, color?: string): void;
11
24
  /**
12
- * Render an ASCII art header with decorations
25
+ * Render an ASCII art header with decorations (legacy)
13
26
  * @param config - Header configuration
27
+ * @deprecated Use renderHeader from header.ts for full headers
14
28
  */
15
29
  export declare function renderAsciiHeader(config: AsciiHeaderConfig): void;
16
30
  /**
17
- * Create a simple header
31
+ * Create a simple header (convenience function)
18
32
  * @param text - Header text
19
33
  * @param color - Optional color
20
34
  */
21
35
  export declare function createSimpleHeader(text: string, color?: string): void;
22
36
  /**
23
- * Create an ASCII header
37
+ * Create a section header (convenience function)
38
+ * @param text - Header text
39
+ * @param width - Border width
40
+ * @param color - Optional color
41
+ */
42
+ export declare function createSectionHeader(text: string, width?: number, color?: string): void;
43
+ /**
44
+ * Create an ASCII header (convenience function)
24
45
  * @param asciiArt - ASCII art string
25
46
  * @param options - Optional configuration
47
+ * @deprecated Use renderHeader from header.ts for full headers
26
48
  */
27
49
  export declare function createAsciiHeader(asciiArt: string, options?: {
28
50
  subtitle?: string;
package/dist/components/display/headers.js CHANGED
@@ -1,32 +1,52 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Headers - Display header components
4
- * Provides simple and ASCII art headers
4
+ * Provides three header modes: full, section, and simple
5
5
  */
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
7
  exports.renderSimpleHeader = renderSimpleHeader;
8
+ exports.renderSectionHeader = renderSectionHeader;
8
9
  exports.renderAsciiHeader = renderAsciiHeader;
9
10
  exports.createSimpleHeader = createSimpleHeader;
11
+ exports.createSectionHeader = createSectionHeader;
10
12
  exports.createAsciiHeader = createAsciiHeader;
11
13
  const terminal_js_1 = require("../../core/terminal.js");
12
14
  const colors_js_1 = require("../../core/colors.js");
13
15
  const terminal_js_2 = require("../../core/terminal.js");
14
16
  /**
15
- * Render a simple header
16
- * @param config - Header configuration
17
+ * Render a simple header with equals signs
18
+ * Format: === Title ===
19
+ * @param text - Header text
20
+ * @param color - Optional color (default: cyan)
17
21
  */
18
- function renderSimpleHeader(config) {
19
- const { text, color } = config;
20
- if (color) {
21
- (0, terminal_js_1.writeLine)((0, colors_js_1.colorize)(text, color));
22
- }
23
- else {
24
- (0, terminal_js_1.writeLine)(text);
25
- }
22
+ function renderSimpleHeader(text, color) {
23
+ const headerColor = color || colors_js_1.uiColors.primary;
24
+ const line = `=== ${text} ===`;
25
+ (0, terminal_js_1.writeLine)(`${headerColor}${line}${colors_js_1.colors.reset}`);
26
+ (0, terminal_js_1.writeLine)('');
26
27
  }
27
28
  /**
28
- * Render an ASCII art header with decorations
29
+ * Render a section header with double-line borders
30
+ * Format:
31
+ * ══════════════════════════════════════════════════
32
+ * Title
33
+ * ══════════════════════════════════════════════════
34
+ * @param text - Header text
35
+ * @param width - Border width (default: 50)
36
+ * @param color - Optional color (default: cyan)
37
+ */
38
+ function renderSectionHeader(text, width = 50, color) {
39
+ const headerColor = color || colors_js_1.uiColors.border;
40
+ const border = '═'.repeat(width);
41
+ (0, terminal_js_1.writeLine)(`${headerColor}${border}${colors_js_1.colors.reset}`);
42
+ (0, terminal_js_1.writeLine)(` ${text}`);
43
+ (0, terminal_js_1.writeLine)(`${headerColor}${border}${colors_js_1.colors.reset}`);
44
+ (0, terminal_js_1.writeLine)('');
45
+ }
46
+ /**
47
+ * Render an ASCII art header with decorations (legacy)
29
48
  * @param config - Header configuration
49
+ * @deprecated Use renderHeader from header.ts for full headers
30
50
  */
31
51
  function renderAsciiHeader(config) {
32
52
  const { asciiArt, subtitle, version, url, borderChar = '═' } = config;
@@ -64,17 +84,27 @@ function renderAsciiHeader(config) {
64
84
  (0, terminal_js_1.writeLine)('');
65
85
  }
66
86
  /**
67
- * Create a simple header
87
+ * Create a simple header (convenience function)
68
88
  * @param text - Header text
69
89
  * @param color - Optional color
70
90
  */
71
91
  function createSimpleHeader(text, color) {
72
- renderSimpleHeader({ text, color });
92
+ renderSimpleHeader(text, color);
93
+ }
94
+ /**
95
+ * Create a section header (convenience function)
96
+ * @param text - Header text
97
+ * @param width - Border width
98
+ * @param color - Optional color
99
+ */
100
+ function createSectionHeader(text, width, color) {
101
+ renderSectionHeader(text, width, color);
73
102
  }
74
103
  /**
75
- * Create an ASCII header
104
+ * Create an ASCII header (convenience function)
76
105
  * @param asciiArt - ASCII art string
77
106
  * @param options - Optional configuration
107
+ * @deprecated Use renderHeader from header.ts for full headers
78
108
  */
79
109
  function createAsciiHeader(asciiArt, options) {
80
110
  renderAsciiHeader({
package/dist/components/display/index.d.ts CHANGED
@@ -2,7 +2,8 @@
2
2
  * Display components index
3
3
  * Exports all display component functions
4
4
  */
5
- export { renderSimpleHeader, renderAsciiHeader, createSimpleHeader, createAsciiHeader } from './headers.js';
5
+ export { renderSimpleHeader, renderSectionHeader, renderAsciiHeader, createSimpleHeader, createSectionHeader, createAsciiHeader } from './headers.js';
6
6
  export { renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator } from './progress.js';
7
7
  export { renderMessage, showSuccess, showError, showWarning, showInfo, showQuestion, createMessage } from './messages.js';
8
8
  export { renderSummaryTable, createSummaryTable, createSimpleSummary } from './summary.js';
9
+ export { renderHeader, type HeaderConfig } from './header.js';
package/dist/components/display/index.js CHANGED
@@ -4,11 +4,13 @@
4
4
  * Exports all display component functions
5
5
  */
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- 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;
7
+ 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.createSectionHeader = exports.createSimpleHeader = exports.renderAsciiHeader = exports.renderSectionHeader = exports.renderSimpleHeader = void 0;
8
8
  var headers_js_1 = require("./headers.js");
9
9
  Object.defineProperty(exports, "renderSimpleHeader", { enumerable: true, get: function () { return headers_js_1.renderSimpleHeader; } });
10
+ Object.defineProperty(exports, "renderSectionHeader", { enumerable: true, get: function () { return headers_js_1.renderSectionHeader; } });
10
11
  Object.defineProperty(exports, "renderAsciiHeader", { enumerable: true, get: function () { return headers_js_1.renderAsciiHeader; } });
11
12
  Object.defineProperty(exports, "createSimpleHeader", { enumerable: true, get: function () { return headers_js_1.createSimpleHeader; } });
13
+ Object.defineProperty(exports, "createSectionHeader", { enumerable: true, get: function () { return headers_js_1.createSectionHeader; } });
12
14
  Object.defineProperty(exports, "createAsciiHeader", { enumerable: true, get: function () { return headers_js_1.createAsciiHeader; } });
13
15
  var progress_js_1 = require("./progress.js");
14
16
  Object.defineProperty(exports, "renderProgressIndicator", { enumerable: true, get: function () { return progress_js_1.renderProgressIndicator; } });
@@ -29,3 +31,5 @@ var summary_js_1 = require("./summary.js");
29
31
  Object.defineProperty(exports, "renderSummaryTable", { enumerable: true, get: function () { return summary_js_1.renderSummaryTable; } });
30
32
  Object.defineProperty(exports, "createSummaryTable", { enumerable: true, get: function () { return summary_js_1.createSummaryTable; } });
31
33
  Object.defineProperty(exports, "createSimpleSummary", { enumerable: true, get: function () { return summary_js_1.createSimpleSummary; } });
34
+ var header_js_1 = require("./header.js");
35
+ Object.defineProperty(exports, "renderHeader", { enumerable: true, get: function () { return header_js_1.renderHeader; } });
package/dist/components/menus/checkbox-menu.js CHANGED
@@ -9,13 +9,32 @@ const layout_types_js_1 = require("../../types/layout.types.js");
9
9
  const terminal_js_1 = require("../../core/terminal.js");
10
10
  const keyboard_js_1 = require("../../core/keyboard.js");
11
11
  const renderer_js_1 = require("../../core/renderer.js");
12
+ const registry_js_1 = require("../../i18n/registry.js");
13
+ /**
14
+ * Generate hints based on menu configuration
15
+ */
16
+ function generateHints(allowSelectAll, allowInvert) {
17
+ const hints = [(0, registry_js_1.t)('hints.arrows'), (0, registry_js_1.t)('hints.space')];
18
+ if (allowSelectAll) {
19
+ hints.push((0, registry_js_1.t)('hints.selectAll'));
20
+ }
21
+ if (allowInvert) {
22
+ hints.push((0, registry_js_1.t)('hints.invert'));
23
+ }
24
+ hints.push((0, registry_js_1.t)('hints.enter'));
25
+ return hints;
26
+ }
12
27
  /**
13
28
  * Show a checkbox menu (multi-select)
14
29
  * @param config - Menu configuration
15
30
  * @returns Promise resolving to selected options
16
31
  */
17
32
  async function showCheckboxMenu(config) {
18
- 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;
33
+ 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;
34
+ // Use i18n for default prompt if not provided
35
+ const displayPrompt = prompt || (0, registry_js_1.t)('menus.multiSelectPrompt');
36
+ // Generate hints dynamically if not provided
37
+ const displayHints = hints || generateHints(allowSelectAll, allowInvert);
19
38
  // Validate options
20
39
  if (!options || options.length === 0) {
21
40
  throw new Error('CheckboxMenu requires at least one option');
@@ -82,8 +101,8 @@ async function showCheckboxMenu(config) {
82
101
  case 'input':
83
102
  if (layout.visible.input) {
84
103
  const selectedCount = selected.size;
85
- const displayValue = `${selectedCount} 项已选`;
86
- (0, renderer_js_1.renderInputPrompt)(prompt, displayValue);
104
+ const displayValue = `${selectedCount} ${(0, registry_js_1.t)('menus.selectedCount')}`;
105
+ (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
87
106
  lineCount++;
88
107
  }
89
108
  break;
@@ -100,8 +119,8 @@ async function showCheckboxMenu(config) {
100
119
  });
101
120
  break;
102
121
  case 'hints':
103
- if (layout.visible.hints && hints.length > 0) {
104
- (0, renderer_js_1.renderHints)(hints);
122
+ if (layout.visible.hints && displayHints.length > 0) {
123
+ (0, renderer_js_1.renderHints)(displayHints);
105
124
  lineCount++;
106
125
  }
107
126
  break;
package/dist/components/menus/radio-menu.js CHANGED
@@ -10,13 +10,32 @@ const terminal_js_1 = require("../../core/terminal.js");
10
10
  const keyboard_js_1 = require("../../core/keyboard.js");
11
11
  const renderer_js_1 = require("../../core/renderer.js");
12
12
  const colors_js_1 = require("../../core/colors.js");
13
+ const registry_js_1 = require("../../i18n/registry.js");
14
+ /**
15
+ * Generate hints based on menu configuration
16
+ */
17
+ function generateHints(allowNumberKeys, allowLetterKeys) {
18
+ const hints = [(0, registry_js_1.t)('hints.arrows')];
19
+ if (allowNumberKeys) {
20
+ hints.push((0, registry_js_1.t)('hints.numbers'));
21
+ }
22
+ if (allowLetterKeys) {
23
+ hints.push((0, registry_js_1.t)('hints.letters'));
24
+ }
25
+ hints.push((0, registry_js_1.t)('hints.enter'));
26
+ return hints;
27
+ }
13
28
  /**
14
29
  * Show a radio menu (single-select)
15
30
  * @param config - Menu configuration
16
31
  * @returns Promise resolving to selected option
17
32
  */
18
33
  async function showRadioMenu(config) {
19
- const { options, title, prompt = '输入选项或用↑↓选择,回车确认', hints = ['↑↓ 方向键', '0-9 输入序号', '⏎ 确认'], layout = layout_types_js_1.LAYOUT_PRESETS.MAIN_MENU, defaultIndex = 0, allowNumberKeys = true, allowLetterKeys = false, onExit } = config;
34
+ const { options, title, prompt, hints, layout = layout_types_js_1.LAYOUT_PRESETS.MAIN_MENU, defaultIndex = 0, allowNumberKeys = true, allowLetterKeys = false, onExit } = config;
35
+ // Use i18n for default prompt if not provided
36
+ const displayPrompt = prompt || (0, registry_js_1.t)('menus.selectPrompt');
37
+ // Generate hints dynamically if not provided
38
+ const displayHints = hints || generateHints(allowNumberKeys, allowLetterKeys);
20
39
  // Validate options
21
40
  if (!options || options.length === 0) {
22
41
  throw new Error('RadioMenu requires at least one option');
@@ -92,11 +111,22 @@ async function showRadioMenu(config) {
92
111
  (0, renderer_js_1.renderSectionLabel)(item.label);
93
112
  }
94
113
  else {
95
- // Extract number prefix if exists
96
- const match = item.value.match(/^(\d+)\.\s*/);
97
- const prefix = match ? '' : `${selectableIndices.indexOf(index) + 1}. `;
114
+ // Check if option starts with a number or letter prefix
115
+ const numberMatch = item.value.match(/^(\d+)\.\s*/);
116
+ const letterMatch = item.value.match(/^([a-zA-Z])\.\s*/);
117
+ // Don't add prefix if option already has number or letter prefix
118
+ const prefix = (numberMatch || letterMatch) ? '' : `${selectableIndices.indexOf(index) + 1}. `;
119
+ // Check if this is an Exit option (contains "Exit" or "Quit")
120
+ const isExitOption = /\b(exit|quit)\b/i.test(item.value);
121
+ const displayValue = isExitOption ? `${colors_js_1.uiColors.error}${item.value}${colors_js_1.colors.reset}` : item.value;
98
122
  // For radio menus, don't show selection indicator (pass undefined instead of false)
99
- (0, renderer_js_1.renderOption)(item.value, undefined, index === selectedIndex, prefix);
123
+ (0, renderer_js_1.renderOption)(displayValue, undefined, index === selectedIndex, prefix);
124
+ // Add blank line after last item before next separator
125
+ const nextIndex = index + 1;
126
+ if (nextIndex < optionData.length && optionData[nextIndex].isSeparator) {
127
+ (0, terminal_js_1.writeLine)('');
128
+ lineCount++; // Count the blank line
129
+ }
100
130
  }
101
131
  lineCount++;
102
132
  });
@@ -115,13 +145,13 @@ async function showRadioMenu(config) {
115
145
  displayValue = String(selectableIndices.indexOf(selectedIndex) + 1);
116
146
  }
117
147
  }
118
- (0, renderer_js_1.renderInputPrompt)(prompt, displayValue);
148
+ (0, renderer_js_1.renderInputPrompt)(displayPrompt, displayValue);
119
149
  lineCount++;
120
150
  }
121
151
  break;
122
152
  case 'hints':
123
- if (layout.visible.hints && hints.length > 0) {
124
- (0, renderer_js_1.renderHints)(hints);
153
+ if (layout.visible.hints && displayHints.length > 0) {
154
+ (0, renderer_js_1.renderHints)(displayHints);
125
155
  lineCount++;
126
156
  }
127
157
  break;
package/dist/core/colors.d.ts CHANGED
@@ -39,6 +39,27 @@ export declare const colors: {
39
39
  readonly hidden: "\u001B[8m";
40
40
  readonly strikethrough: "\u001B[9m";
41
41
  };
42
+ /**
43
+ * Semantic color hierarchy for UI elements
44
+ * Defines consistent colors for different levels of information
45
+ */
46
+ export declare const uiColors: {
47
+ readonly primary: "\u001B[36m";
48
+ readonly accent: "\u001B[34m";
49
+ readonly textPrimary: "\u001B[0m";
50
+ readonly textSecondary: "\u001B[2m";
51
+ readonly textMuted: "\u001B[90m";
52
+ readonly success: "\u001B[32m";
53
+ readonly error: "\u001B[31m";
54
+ readonly warning: "\u001B[33m";
55
+ readonly info: "\u001B[34m";
56
+ readonly cursor: "\u001B[36m";
57
+ readonly selected: "\u001B[32m";
58
+ readonly disabled: "\u001B[2m";
59
+ readonly border: "\u001B[36m";
60
+ readonly separator: "\u001B[2m";
61
+ readonly prefix: "\u001B[2m";
62
+ };
42
63
  /**
43
64
  * Create a gradient between two colors
44
65
  * @param startColor - Starting ANSI color code
package/dist/core/colors.js CHANGED
@@ -4,7 +4,7 @@
4
4
  * Supports single colors and two-color gradients
5
5
  */
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.colors = void 0;
7
+ exports.uiColors = exports.colors = void 0;
8
8
  exports.createGradient = createGradient;
9
9
  exports.applyGradient = applyGradient;
10
10
  exports.colorize = colorize;
@@ -50,6 +50,32 @@ exports.colors = {
50
50
  hidden: '\x1b[8m',
51
51
  strikethrough: '\x1b[9m'
52
52
  };
53
+ /**
54
+ * Semantic color hierarchy for UI elements
55
+ * Defines consistent colors for different levels of information
56
+ */
57
+ exports.uiColors = {
58
+ // Primary elements
59
+ primary: exports.colors.cyan, // Main interactive elements, highlights
60
+ accent: exports.colors.blue, // Secondary highlights, links
61
+ // Text hierarchy
62
+ textPrimary: exports.colors.reset, // Main text (black/default)
63
+ textSecondary: exports.colors.dim, // Descriptions, hints, less important text
64
+ textMuted: exports.colors.brightBlack, // Very subtle text
65
+ // Status colors
66
+ success: exports.colors.green, // Success states, confirmations
67
+ error: exports.colors.red, // Errors, warnings, exit
68
+ warning: exports.colors.yellow, // Warnings, cautions
69
+ info: exports.colors.blue, // Informational messages
70
+ // Interactive elements
71
+ cursor: exports.colors.cyan, // Cursor indicator
72
+ selected: exports.colors.green, // Selected items
73
+ disabled: exports.colors.dim, // Disabled/inactive items
74
+ // Structural elements
75
+ border: exports.colors.cyan, // Borders, frames
76
+ separator: exports.colors.dim, // Separators, dividers
77
+ prefix: exports.colors.dim // Number/letter prefixes
78
+ };
53
79
  /**
54
80
  * Parse ANSI color code to RGB values
55
81
  * Supports basic 8 colors and bright variants
package/dist/core/renderer.js CHANGED
@@ -51,25 +51,35 @@ function renderOption(text, isSelected, isHighlighted, prefix) {
51
51
  let line = '';
52
52
  // Add cursor indicator if highlighted
53
53
  if (isHighlighted) {
54
- line += `${colors_js_1.colors.cyan}❯ ${colors_js_1.colors.reset}`;
54
+ line += `${colors_js_1.uiColors.cursor}❯ ${colors_js_1.colors.reset}`;
55
55
  }
56
56
  else {
57
57
  line += ' ';
58
58
  }
59
59
  // Add checkbox for multi-select
60
60
  if (isSelected !== undefined && typeof isSelected === 'boolean') {
61
- line += isSelected ? `${colors_js_1.colors.green}◉${colors_js_1.colors.reset} ` : `${colors_js_1.colors.dim}○${colors_js_1.colors.reset} `;
61
+ line += isSelected ? `${colors_js_1.uiColors.selected}◉${colors_js_1.colors.reset} ` : `${colors_js_1.uiColors.disabled}○${colors_js_1.colors.reset} `;
62
62
  }
63
63
  // Add prefix if provided
64
64
  if (prefix) {
65
- line += `${colors_js_1.colors.dim}${prefix}${colors_js_1.colors.reset}`;
65
+ line += `${colors_js_1.uiColors.prefix}${prefix}${colors_js_1.colors.reset}`;
66
66
  }
67
67
  // Add option text
68
+ // Split text by " - " to separate main text from description
69
+ const parts = text.split(' - ');
70
+ const mainText = parts[0];
71
+ const description = parts.length > 1 ? parts.slice(1).join(' - ') : '';
68
72
  if (isHighlighted) {
69
- line += `${colors_js_1.colors.cyan}${text}${colors_js_1.colors.reset}`;
73
+ line += `${colors_js_1.uiColors.primary}${mainText}${colors_js_1.colors.reset}`;
74
+ if (description) {
75
+ line += ` ${colors_js_1.uiColors.textSecondary}- ${description}${colors_js_1.colors.reset}`;
76
+ }
70
77
  }
71
78
  else {
72
- line += text;
79
+ line += mainText;
80
+ if (description) {
81
+ line += ` ${colors_js_1.uiColors.textSecondary}- ${description}${colors_js_1.colors.reset}`;
82
+ }
73
83
  }
74
84
  (0, terminal_js_1.writeLine)(line);
75
85
  }
@@ -80,7 +90,7 @@ function renderOption(text, isSelected, isHighlighted, prefix) {
80
90
  * @param showCursor - Whether to show cursor
81
91
  */
82
92
  function renderInputPrompt(prompt, value, showCursor = false) {
83
- let line = ` ${colors_js_1.colors.dim}${prompt}${colors_js_1.colors.reset} `;
93
+ let line = ` ${prompt} `;
84
94
  if (value) {
85
95
  line += `${colors_js_1.colors.cyan}${value}${colors_js_1.colors.reset}`;
86
96
  }
@@ -96,7 +106,19 @@ function renderInputPrompt(prompt, value, showCursor = false) {
96
106
  function renderHints(hints) {
97
107
  if (hints.length === 0)
98
108
  return;
99
- const hintLine = ` ${colors_js_1.colors.dim}${hints.join(' • ')}${colors_js_1.colors.reset}`;
109
+ // Format each hint: symbols/numbers in black, text in gray
110
+ const formattedHints = hints.map(hint => {
111
+ const parts = hint.split(' ');
112
+ if (parts.length >= 2) {
113
+ // First part (symbols/numbers) in normal color, rest in dim
114
+ const symbols = parts[0];
115
+ const text = parts.slice(1).join(' ');
116
+ return `${symbols} ${colors_js_1.colors.dim}${text}${colors_js_1.colors.reset}`;
117
+ }
118
+ // If no space, keep entire hint in dim
119
+ return `${colors_js_1.colors.dim}${hint}${colors_js_1.colors.reset}`;
120
+ });
121
+ const hintLine = ` ${formattedHints.join(' • ')}`;
100
122
  (0, terminal_js_1.writeLine)(hintLine);
101
123
  }
102
124
  /**
@@ -115,7 +137,15 @@ function renderSeparator(char = '─', width) {
115
137
  */
116
138
  function renderSectionLabel(label) {
117
139
  if (label) {
118
- (0, terminal_js_1.writeLine)(` ${colors_js_1.colors.dim}────── ${label} ──────${colors_js_1.colors.reset}`);
140
+ const totalWidth = 30; // Fixed total width for consistency
141
+ const padding = 2; // Spaces around label
142
+ const labelWithPadding = ` ${label} `;
143
+ const labelLength = labelWithPadding.length;
144
+ const dashesTotal = totalWidth - labelLength;
145
+ const dashesLeft = Math.floor(dashesTotal / 2);
146
+ const dashesRight = dashesTotal - dashesLeft;
147
+ const line = ` ${colors_js_1.uiColors.separator}${'─'.repeat(dashesLeft)}${labelWithPadding}${'─'.repeat(dashesRight)}${colors_js_1.colors.reset}`;
148
+ (0, terminal_js_1.writeLine)(line);
119
149
  }
120
150
  else {
121
151
  (0, terminal_js_1.writeLine)('');
package/dist/i18n/languages/en.js CHANGED
@@ -16,10 +16,11 @@ exports.en = {
16
16
  space: 'Space Toggle',
17
17
  enter: '⏎ Confirm',
18
18
  numbers: '0-9 Number keys',
19
- letters: 'A-Z Letter keys',
19
+ letters: 'Letter Shortcuts',
20
20
  selectAll: 'A Select all',
21
21
  invert: 'I Invert',
22
- yesNo: 'Y/N Quick keys'
22
+ yesNo: 'Y/N Quick keys',
23
+ exit: 'Ctrl+C Exit'
23
24
  },
24
25
  messages: {
25
26
  success: 'Success',
package/dist/i18n/languages/zh.js CHANGED
@@ -16,10 +16,11 @@ exports.zh = {
16
16
  space: '空格 选中/取消',
17
17
  enter: '⏎ 确认',
18
18
  numbers: '0-9 输入序号',
19
- letters: 'A-Z 字母选择',
19
+ letters: '字母 快捷键',
20
20
  selectAll: 'A 全选',
21
21
  invert: 'I 反选',
22
- yesNo: 'Y/N 快捷键'
22
+ yesNo: 'Y/N 快捷键',
23
+ exit: 'Ctrl+C 退出'
23
24
  },
24
25
  messages: {
25
26
  success: '成功',
package/dist/i18n/types.d.ts CHANGED
@@ -24,6 +24,7 @@ export interface LanguageMap {
24
24
  selectAll: string;
25
25
  invert: string;
26
26
  yesNo: string;
27
+ exit: string;
27
28
  };
28
29
  messages: {
29
30
  success: string;
package/dist/index.d.ts CHANGED
@@ -6,7 +6,7 @@ export { menuAPI as menu, inputAPI as input, wizardAPI as wizard } from './api.j
6
6
  export { default } from './api.js';
7
7
  export { showRadioMenu, showCheckboxMenu, showBooleanMenu } from './components/menus/index.js';
8
8
  export { showTextInput, showNumberInput, showLanguageSelector, showModifyField } from './components/inputs/index.js';
9
- 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';
9
+ export { renderSimpleHeader, renderSectionHeader, renderAsciiHeader, createSimpleHeader, createSectionHeader, 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';
10
10
  export { runWizard, createWizard, WizardConfig, WizardStep, WizardResult } from './features/wizard.js';
11
11
  export { registerCommand, unregisterCommand, clearCustomCommands, isCommand, parseCommand, handleCommand, getAvailableCommands, showCommandHelp } from './features/commands.js';
12
12
  export { getCurrentLanguage, setLanguage, t, registerLanguage, getAvailableLanguages, getCurrentLanguageMap } from './i18n/registry.js';
package/dist/index.js CHANGED
@@ -21,8 +21,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
21
21
  return (mod && mod.__esModule) ? mod : { "default": mod };
22
22
  };
23
23
  Object.defineProperty(exports, "__esModule", { value: true });
24
- 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;
25
- exports.LAYOUT_PRESETS = exports.KEY_CODES = exports.colorize = void 0;
24
+ 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.createSectionHeader = exports.createSimpleHeader = exports.renderAsciiHeader = exports.renderSectionHeader = 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;
25
+ exports.LAYOUT_PRESETS = exports.KEY_CODES = exports.colorize = exports.applyGradient = exports.createGradient = exports.colors = void 0;
26
26
  // Export unified API
27
27
  var api_js_1 = require("./api.js");
28
28
  Object.defineProperty(exports, "menu", { enumerable: true, get: function () { return api_js_1.menuAPI; } });
@@ -44,8 +44,10 @@ Object.defineProperty(exports, "showModifyField", { enumerable: true, get: funct
44
44
  // Export display components
45
45
  var index_js_3 = require("./components/display/index.js");
46
46
  Object.defineProperty(exports, "renderSimpleHeader", { enumerable: true, get: function () { return index_js_3.renderSimpleHeader; } });
47
+ Object.defineProperty(exports, "renderSectionHeader", { enumerable: true, get: function () { return index_js_3.renderSectionHeader; } });
47
48
  Object.defineProperty(exports, "renderAsciiHeader", { enumerable: true, get: function () { return index_js_3.renderAsciiHeader; } });
48
49
  Object.defineProperty(exports, "createSimpleHeader", { enumerable: true, get: function () { return index_js_3.createSimpleHeader; } });
50
+ Object.defineProperty(exports, "createSectionHeader", { enumerable: true, get: function () { return index_js_3.createSectionHeader; } });
49
51
  Object.defineProperty(exports, "createAsciiHeader", { enumerable: true, get: function () { return index_js_3.createAsciiHeader; } });
50
52
  Object.defineProperty(exports, "renderProgressIndicator", { enumerable: true, get: function () { return index_js_3.renderProgressIndicator; } });
51
53
  Object.defineProperty(exports, "renderStageHeader", { enumerable: true, get: function () { return index_js_3.renderStageHeader; } });
@@ -63,6 +65,7 @@ Object.defineProperty(exports, "createMessage", { enumerable: true, get: functio
63
65
  Object.defineProperty(exports, "renderSummaryTable", { enumerable: true, get: function () { return index_js_3.renderSummaryTable; } });
64
66
  Object.defineProperty(exports, "createSummaryTable", { enumerable: true, get: function () { return index_js_3.createSummaryTable; } });
65
67
  Object.defineProperty(exports, "createSimpleSummary", { enumerable: true, get: function () { return index_js_3.createSimpleSummary; } });
68
+ Object.defineProperty(exports, "renderHeader", { enumerable: true, get: function () { return index_js_3.renderHeader; } });
66
69
  // Export features
67
70
  var wizard_js_1 = require("./features/wizard.js");
68
71
  Object.defineProperty(exports, "runWizard", { enumerable: true, get: function () { return wizard_js_1.runWizard; } });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cli-menu-kit",
3
- "version": "0.1.2",
3
+ "version": "0.1.13",
4
4
  "description": "A lightweight, customizable CLI menu system with keyboard shortcuts and real-time rendering",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",