cli-menu-kit 0.2.0 → 0.2.1

package/dist/core/terminal.js

@@ -4,6 +4,9 @@
  * Handles cursor movement, screen clearing, and terminal state
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripAnsi = stripAnsi;
+exports.getDisplayWidth = getDisplayWidth;
+exports.countVisualLines = countVisualLines;
 exports.initTerminal = initTerminal;
 exports.restoreTerminal = restoreTerminal;
 exports.clearMenu = clearMenu;
@@ -20,6 +23,90 @@ exports.getTerminalWidth = getTerminalWidth;
 exports.getTerminalHeight = getTerminalHeight;
 exports.clearScreen = clearScreen;
 exports.exitWithGoodbye = exitWithGoodbye;
+const ANSI_ESCAPE_PATTERN = /[\u001B\u009B][[\]()#;?]*(?:(?:[a-zA-Z\d]*(?:;[a-zA-Z\d]*)*)?\u0007|(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~])/g;
+const TAB_WIDTH = 4;
+/**
+ * Remove ANSI escape sequences from a string.
+ * This is required when calculating the visible width in terminal cells.
+ */
+function stripAnsi(text) {
+    return text.replace(ANSI_ESCAPE_PATTERN, '');
+}
+function isCombiningCodePoint(codePoint) {
+    return ((codePoint >= 0x0300 && codePoint <= 0x036F) || // Combining Diacritical Marks
+        (codePoint >= 0x1AB0 && codePoint <= 0x1AFF) || // Combining Diacritical Marks Extended
+        (codePoint >= 0x1DC0 && codePoint <= 0x1DFF) || // Combining Diacritical Marks Supplement
+        (codePoint >= 0x20D0 && codePoint <= 0x20FF) || // Combining Diacritical Marks for Symbols
+        (codePoint >= 0xFE20 && codePoint <= 0xFE2F) // Combining Half Marks
+    );
+}
+function isFullWidthCodePoint(codePoint) {
+    if (codePoint < 0x1100) {
+        return false;
+    }
+    return (codePoint <= 0x115F ||
+        codePoint === 0x2329 ||
+        codePoint === 0x232A ||
+        ((codePoint >= 0x2E80 && codePoint <= 0x3247) && codePoint !== 0x303F) ||
+        (codePoint >= 0x3250 && codePoint <= 0x4DBF) ||
+        (codePoint >= 0x4E00 && codePoint <= 0xA4C6) ||
+        (codePoint >= 0xA960 && codePoint <= 0xA97C) ||
+        (codePoint >= 0xAC00 && codePoint <= 0xD7A3) ||
+        (codePoint >= 0xF900 && codePoint <= 0xFAFF) ||
+        (codePoint >= 0xFE10 && codePoint <= 0xFE19) ||
+        (codePoint >= 0xFE30 && codePoint <= 0xFE6B) ||
+        (codePoint >= 0xFF01 && codePoint <= 0xFF60) ||
+        (codePoint >= 0xFFE0 && codePoint <= 0xFFE6) ||
+        (codePoint >= 0x1B000 && codePoint <= 0x1B001) ||
+        (codePoint >= 0x1F200 && codePoint <= 0x1F251) ||
+        (codePoint >= 0x20000 && codePoint <= 0x3FFFD));
+}
+function getCharacterWidth(char, currentLineWidth) {
+    if (char === '\t') {
+        const remainder = currentLineWidth % TAB_WIDTH;
+        return remainder === 0 ? TAB_WIDTH : TAB_WIDTH - remainder;
+    }
+    const codePoint = char.codePointAt(0);
+    if (codePoint === undefined) {
+        return 0;
+    }
+    // Control characters and zero-width joiners/modifiers.
+    if (codePoint <= 0x001F ||
+        (codePoint >= 0x007F && codePoint <= 0x009F) ||
+        codePoint === 0x200D ||
+        (codePoint >= 0xFE00 && codePoint <= 0xFE0F) ||
+        isCombiningCodePoint(codePoint)) {
+        return 0;
+    }
+    if (isFullWidthCodePoint(codePoint) || (codePoint >= 0x1F300 && codePoint <= 0x1FAFF)) {
+        return 2;
+    }
+    return 1;
+}
+/**
+ * Calculate the visible width of a string in terminal cells.
+ */
+function getDisplayWidth(text) {
+    const plain = stripAnsi(text);
+    let width = 0;
+    for (const char of plain) {
+        width += getCharacterWidth(char, width);
+    }
+    return width;
+}
+/**
+ * Count how many visual rows the text occupies after terminal wrapping.
+ */
+function countVisualLines(text, terminalWidth = getTerminalWidth()) {
+    const width = Math.max(1, terminalWidth);
+    const lines = text.split(/\r\n|\r|\n/);
+    let lineCount = 0;
+    for (const line of lines) {
+        const visualWidth = getDisplayWidth(line);
+        lineCount += Math.max(1, Math.ceil(visualWidth / width));
+    }
+    return lineCount;
+}
 /**
  * Initialize terminal for interactive mode
  * @param useAltScreen - Whether to use alternate screen buffer (prevents scroll issues)

package/dist/features/commands.js

@@ -14,40 +14,41 @@ exports.getAvailableCommands = getAvailableCommands;
 exports.showCommandHelp = showCommandHelp;
 const terminal_js_1 = require("../core/terminal.js");
 const colors_js_1 = require("../core/colors.js");
+const registry_js_1 = require("../i18n/registry.js");
 /**
  * Default command registry
  */
 const defaultCommands = {
     quit: {
         handler: () => {
-            (0, terminal_js_1.writeLine)('\n👋 再见!');
+            (0, terminal_js_1.writeLine)(`\n${(0, registry_js_1.t)('messages.goodbye')}`);
             process.exit(0);
         },
-        description: '退出应用程序'
+        descriptionKey: 'commands.quit'
     },
     help: {
         handler: () => {
-            (0, terminal_js_1.writeLine)('\n可用命令:');
-            Object.entries(defaultCommands).forEach(([cmd, { description }]) => {
-                (0, terminal_js_1.writeLine)(`  ${colors_js_1.colors.cyan}/${cmd}${colors_js_1.colors.reset} - ${description}`);
+            (0, terminal_js_1.writeLine)(`\n${(0, registry_js_1.t)('commands.availableCommands')}:`);
+            Object.entries(defaultCommands).forEach(([cmd, { descriptionKey }]) => {
+                (0, terminal_js_1.writeLine)(`  ${colors_js_1.uiColors.primary}/${cmd}${colors_js_1.colors.reset} - ${(0, registry_js_1.t)(descriptionKey)}`);
             });
             (0, terminal_js_1.writeLine)('');
             return false; // Don't exit, continue
         },
-        description: '显示帮助信息'
+        descriptionKey: 'commands.help'
     },
     clear: {
         handler: () => {
             (0, terminal_js_1.clearScreen)();
             return false; // Don't exit, continue
         },
-        description: '清除屏幕'
+        descriptionKey: 'commands.clear'
     },
     back: {
         handler: () => {
             return true; // Signal to go back
         },
-        description: '返回上一级菜单'
+        descriptionKey: 'commands.back'
     }
 };
 /**
@@ -61,7 +62,7 @@ let customCommands = {};
  * @param description - Command description
  */
 function registerCommand(command, handler, description) {
-    customCommands[command.toLowerCase()] = { handler, description };
+    customCommands[command.toLowerCase()] = { handler, descriptionKey: description };
 }
 /**
  * Unregister a custom command
@@ -120,8 +121,8 @@ function handleCommand(input) {
         return result === undefined ? false : result;
     }
     // Unknown command
-    (0, terminal_js_1.writeLine)(`${colors_js_1.colors.red}✗ 未知命令: /${command}${colors_js_1.colors.reset}`);
-    (0, terminal_js_1.writeLine)(`${colors_js_1.colors.dim}输入 /help 查看可用命令${colors_js_1.colors.reset}\n`);
+    (0, terminal_js_1.writeLine)(`${colors_js_1.uiColors.error}✗ ${(0, registry_js_1.t)('messages.unknownCommand')}: /${command}${colors_js_1.colors.reset}`);
+    (0, terminal_js_1.writeLine)(`${colors_js_1.uiColors.textSecondary}${(0, registry_js_1.t)('messages.helpPrompt')}${colors_js_1.colors.reset}\n`);
     return false;
 }
 /**
@@ -131,12 +132,12 @@ function handleCommand(input) {
 function getAvailableCommands() {
     const commands = [];
     // Add default commands
-    Object.entries(defaultCommands).forEach(([cmd, { description }]) => {
-        commands.push({ command: cmd, description });
+    Object.entries(defaultCommands).forEach(([cmd, { descriptionKey }]) => {
+        commands.push({ command: cmd, description: (0, registry_js_1.t)(descriptionKey) });
     });
     // Add custom commands
-    Object.entries(customCommands).forEach(([cmd, { description }]) => {
-        commands.push({ command: cmd, description });
+    Object.entries(customCommands).forEach(([cmd, { descriptionKey }]) => {
+        commands.push({ command: cmd, description: descriptionKey });
     });
     return commands;
 }
@@ -144,17 +145,17 @@ function getAvailableCommands() {
  * Show help for all commands
  */
 function showCommandHelp() {
-    (0, terminal_js_1.writeLine)('\n可用命令:');
+    (0, terminal_js_1.writeLine)(`\n${(0, registry_js_1.t)('commands.availableCommands')}:`);
     // Show default commands
-    (0, terminal_js_1.writeLine)(`\n${colors_js_1.colors.cyan}默认命令:${colors_js_1.colors.reset}`);
-    Object.entries(defaultCommands).forEach(([cmd, { description }]) => {
-        (0, terminal_js_1.writeLine)(`  ${colors_js_1.colors.cyan}/${cmd}${colors_js_1.colors.reset} - ${description}`);
+    (0, terminal_js_1.writeLine)(`\n${colors_js_1.uiColors.primary}${(0, registry_js_1.t)('commands.defaultCommands')}:${colors_js_1.colors.reset}`);
+    Object.entries(defaultCommands).forEach(([cmd, { descriptionKey }]) => {
+        (0, terminal_js_1.writeLine)(`  ${colors_js_1.uiColors.primary}/${cmd}${colors_js_1.colors.reset} - ${(0, registry_js_1.t)(descriptionKey)}`);
     });
     // Show custom commands if any
     if (Object.keys(customCommands).length > 0) {
-        (0, terminal_js_1.writeLine)(`\n${colors_js_1.colors.cyan}自定义命令:${colors_js_1.colors.reset}`);
-        Object.entries(customCommands).forEach(([cmd, { description }]) => {
-            (0, terminal_js_1.writeLine)(`  ${colors_js_1.colors.cyan}/${cmd}${colors_js_1.colors.reset} - ${description}`);
+        (0, terminal_js_1.writeLine)(`\n${colors_js_1.uiColors.primary}${(0, registry_js_1.t)('commands.customCommands')}:${colors_js_1.colors.reset}`);
+        Object.entries(customCommands).forEach(([cmd, { descriptionKey }]) => {
+            (0, terminal_js_1.writeLine)(`  ${colors_js_1.uiColors.primary}/${cmd}${colors_js_1.colors.reset} - ${descriptionKey}`);
         });
     }
     (0, terminal_js_1.writeLine)('');

package/dist/index.d.ts

@@ -8,10 +8,12 @@ export { renderPage, type PageLayoutConfig, type HeaderConfig as PageHeaderConfi
 export { createFullHeaderComponent, createSimpleHeaderComponent, createSectionHeaderComponent, createHintsComponent, createTableComponent, createListComponent, createSummaryTableComponent, createRadioMenuComponent, createInputPromptComponent } from './component-factories.js';
 export { showRadioMenu, showCheckboxMenu, showCheckboxTableMenu, showBooleanMenu } from './components/menus/index.js';
 export { showTextInput, showNumberInput, showLanguageSelector, showModifyField } from './components/inputs/index.js';
-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, renderHintsComponent, createHints, generateMenuHints, generateInputHints, HintTypes, type HintsConfig, renderTable, createTable, type TableConfig, type TableColumn, renderList, createList, createBulletList, createNumberedList, type ListConfig, type ListItem } from './components/display/index.js';
+export { renderSimpleHeader, renderSectionHeader, renderAsciiHeader, createSimpleHeader, createSectionHeader, createAsciiHeader, renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator, renderProgressCheckmark, createProgressCheckmark, renderMessage, showSuccess, showError, showWarning, showInfo, showQuestion, createMessage, renderSummaryTable, createSummaryTable, createSimpleSummary, renderHeader, type HeaderConfig, renderHintsComponent, createHints, generateMenuHints, generateInputHints, HintTypes, type HintsConfig, renderTable, createTable, type TableConfig, type TableColumn, renderList, createList, createBulletList, createNumberedList, type ListConfig, type ListItem } from './components/display/index.js';
 export { runWizard, createWizard, WizardConfig, WizardStep, WizardResult } from './features/wizard.js';
 export { registerCommand, unregisterCommand, clearCustomCommands, isCommand, parseCommand, handleCommand, getAvailableCommands, showCommandHelp } from './features/commands.js';
 export { getCurrentLanguage, setLanguage, t, registerLanguage, getAvailableLanguages, getCurrentLanguageMap } from './i18n/registry.js';
+export { initConfig, getConfigManager, loadConfig, saveConfig, getConfig, setConfig, resetConfig, type UserConfig, type ConfigOptions } from './config/user-config.js';
+export { initLanguages, loadLanguagesFromFile, getLanguageManager, getSupportedLanguages, getLanguageConfig, getDefaultLanguage, getCLILanguageCode, type LanguageConfig, type LanguagesConfig } from './config/language-config.js';
 export { colors, uiColors, defaultUIColors, getUIColors, setUIColors, resetUIColors, createGradient, applyGradient, colorize } from './core/colors.js';
 export type { MenuOption, BaseMenuConfig, RadioMenuConfig, CheckboxMenuConfig, BooleanMenuConfig, RadioMenuResult, CheckboxMenuResult, BooleanMenuResult } from './types/menu.types.js';
 export type { BaseInputConfig, TextInputConfig, NumberInputConfig, LanguageSelectorConfig, ModifyFieldConfig, TextInputResult, NumberInputResult, LanguageSelectorResult, ModifyFieldResult } from './types/input.types.js';

package/dist/index.js

@@ -21,8 +21,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintTypes = exports.generateInputHints = exports.generateMenuHints = exports.createHints = exports.renderHintsComponent = 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.showCheckboxTableMenu = exports.showCheckboxMenu = exports.showRadioMenu = exports.createInputPromptComponent = exports.createRadioMenuComponent = exports.createSummaryTableComponent = exports.createListComponent = exports.createTableComponent = exports.createHintsComponent = exports.createSectionHeaderComponent = exports.createSimpleHeaderComponent = exports.createFullHeaderComponent = exports.renderPage = exports.default = exports.wizard = exports.input = exports.menu = void 0;
-exports.calculateVirtualScroll = exports.KEY_CODES = exports.colorize = exports.applyGradient = exports.createGradient = exports.resetUIColors = exports.setUIColors = exports.getUIColors = exports.defaultUIColors = exports.uiColors = 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.createNumberedList = exports.createBulletList = exports.createList = exports.renderList = exports.createTable = exports.renderTable = void 0;
+exports.generateMenuHints = exports.createHints = exports.renderHintsComponent = exports.renderHeader = exports.createSimpleSummary = exports.createSummaryTable = exports.renderSummaryTable = exports.createMessage = exports.showQuestion = exports.showInfo = exports.showWarning = exports.showError = exports.showSuccess = exports.renderMessage = exports.createProgressCheckmark = exports.renderProgressCheckmark = 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.showCheckboxTableMenu = exports.showCheckboxMenu = exports.showRadioMenu = exports.createInputPromptComponent = exports.createRadioMenuComponent = exports.createSummaryTableComponent = exports.createListComponent = exports.createTableComponent = exports.createHintsComponent = exports.createSectionHeaderComponent = exports.createSimpleHeaderComponent = exports.createFullHeaderComponent = exports.renderPage = exports.default = exports.wizard = exports.input = exports.menu = void 0;
+exports.calculateVirtualScroll = exports.KEY_CODES = exports.colorize = exports.applyGradient = exports.createGradient = exports.resetUIColors = exports.setUIColors = exports.getUIColors = exports.defaultUIColors = exports.uiColors = exports.colors = exports.getCLILanguageCode = exports.getDefaultLanguage = exports.getLanguageConfig = exports.getSupportedLanguages = exports.getLanguageManager = exports.loadLanguagesFromFile = exports.initLanguages = exports.resetConfig = exports.setConfig = exports.getConfig = exports.saveConfig = exports.loadConfig = exports.getConfigManager = exports.initConfig = 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.createNumberedList = exports.createBulletList = exports.createList = exports.renderList = exports.createTable = exports.renderTable = exports.HintTypes = exports.generateInputHints = void 0;
 // Export unified API
 var api_js_1 = require("./api.js");
 Object.defineProperty(exports, "menu", { enumerable: true, get: function () { return api_js_1.menuAPI; } });
@@ -70,6 +70,8 @@ Object.defineProperty(exports, "renderStageSeparator", { enumerable: true, get:
 Object.defineProperty(exports, "createProgressIndicator", { enumerable: true, get: function () { return index_js_3.createProgressIndicator; } });
 Object.defineProperty(exports, "createStageHeader", { enumerable: true, get: function () { return index_js_3.createStageHeader; } });
 Object.defineProperty(exports, "createStageSeparator", { enumerable: true, get: function () { return index_js_3.createStageSeparator; } });
+Object.defineProperty(exports, "renderProgressCheckmark", { enumerable: true, get: function () { return index_js_3.renderProgressCheckmark; } });
+Object.defineProperty(exports, "createProgressCheckmark", { enumerable: true, get: function () { return index_js_3.createProgressCheckmark; } });
 Object.defineProperty(exports, "renderMessage", { enumerable: true, get: function () { return index_js_3.renderMessage; } });
 Object.defineProperty(exports, "showSuccess", { enumerable: true, get: function () { return index_js_3.showSuccess; } });
 Object.defineProperty(exports, "showError", { enumerable: true, get: function () { return index_js_3.showError; } });
@@ -113,6 +115,23 @@ Object.defineProperty(exports, "t", { enumerable: true, get: function () { retur
 Object.defineProperty(exports, "registerLanguage", { enumerable: true, get: function () { return registry_js_1.registerLanguage; } });
 Object.defineProperty(exports, "getAvailableLanguages", { enumerable: true, get: function () { return registry_js_1.getAvailableLanguages; } });
 Object.defineProperty(exports, "getCurrentLanguageMap", { enumerable: true, get: function () { return registry_js_1.getCurrentLanguageMap; } });
+// Export configuration system
+var user_config_js_1 = require("./config/user-config.js");
+Object.defineProperty(exports, "initConfig", { enumerable: true, get: function () { return user_config_js_1.initConfig; } });
+Object.defineProperty(exports, "getConfigManager", { enumerable: true, get: function () { return user_config_js_1.getConfigManager; } });
+Object.defineProperty(exports, "loadConfig", { enumerable: true, get: function () { return user_config_js_1.loadConfig; } });
+Object.defineProperty(exports, "saveConfig", { enumerable: true, get: function () { return user_config_js_1.saveConfig; } });
+Object.defineProperty(exports, "getConfig", { enumerable: true, get: function () { return user_config_js_1.getConfig; } });
+Object.defineProperty(exports, "setConfig", { enumerable: true, get: function () { return user_config_js_1.setConfig; } });
+Object.defineProperty(exports, "resetConfig", { enumerable: true, get: function () { return user_config_js_1.resetConfig; } });
+var language_config_js_1 = require("./config/language-config.js");
+Object.defineProperty(exports, "initLanguages", { enumerable: true, get: function () { return language_config_js_1.initLanguages; } });
+Object.defineProperty(exports, "loadLanguagesFromFile", { enumerable: true, get: function () { return language_config_js_1.loadLanguagesFromFile; } });
+Object.defineProperty(exports, "getLanguageManager", { enumerable: true, get: function () { return language_config_js_1.getLanguageManager; } });
+Object.defineProperty(exports, "getSupportedLanguages", { enumerable: true, get: function () { return language_config_js_1.getSupportedLanguages; } });
+Object.defineProperty(exports, "getLanguageConfig", { enumerable: true, get: function () { return language_config_js_1.getLanguageConfig; } });
+Object.defineProperty(exports, "getDefaultLanguage", { enumerable: true, get: function () { return language_config_js_1.getDefaultLanguage; } });
+Object.defineProperty(exports, "getCLILanguageCode", { enumerable: true, get: function () { return language_config_js_1.getCLILanguageCode; } });
 // Export color configuration
 var colors_js_1 = require("./core/colors.js");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return colors_js_1.colors; } });

package/dist/layout.d.ts

@@ -1,68 +1,67 @@
 /**
- * Page Layout V2 - Component-Based Architecture with Fixed Regions
- *
- * Core Principles:
- * 1. Complete component decoupling
- * 2. Fixed-height regions (Header/Footer fixed, Main fills rest)
- * 3. Components return string arrays (lines)
- * 4. Diff-based rendering - only update changed regions
- * 5. Two-phase execution: render (non-blocking) + interact (blocking)
+ * Page Layout System
+ * 通用页面布局：Header + Main Area + Footer
  */
-import { ScreenManager, Rect } from './core/screen-manager.js';
-import { HintManager } from './core/hint-manager.js';
-export declare const screenManager: ScreenManager;
-export declare const hintManager: HintManager;
-export { ScreenManager, HintManager, Rect };
 /**
- * Component interface - components return lines instead of writing to stdout
+ * Header 配置
  */
-export interface Component {
-    /** Component type identifier */
-    type: string;
-    /** Region ID for this component */
-    regionId: string;
-    /** Render function - returns lines to display */
-    render: (rect: Rect) => string[] | Promise<string[]>;
-    /** Optional interact function - handles user input (blocking) */
-    interact?: () => void | Promise<void>;
-    /** Optional component-specific configuration */
-    config?: any;
+export interface HeaderConfig {
+    type: 'simple' | 'section' | 'none';
+    text?: string;
+    width?: number;
 }
 /**
- * Layout configuration with fixed heights
+ * Main Area 配置
  */
-export interface Layout {
-    header: Rect;
-    main: Rect;
-    footerHints: Rect;
-    footerPrompt: Rect;
+export interface MainAreaConfig {
+    type: 'menu' | 'display' | 'interactive';
+    render: () => void | Promise<void>;
 }
 /**
- * Compute layout based on terminal size
- */
-export declare function computeLayout(rows?: number, cols?: number): Layout;
-/**
- * Area configuration
+ * Footer 配置
  */
-export interface AreaConfig {
-    components: Component[];
+export interface FooterConfig {
+    menu?: {
+        options: string[];
+        allowLetterKeys?: boolean;
+        allowNumberKeys?: boolean;
+    };
+    input?: {
+        prompt: string;
+        defaultValue?: string;
+        allowEmpty?: boolean;
+    };
+    ask?: {
+        question: string;
+        defaultValue?: boolean;
+        horizontal?: boolean;
+    };
+    hints?: string[];
 }
 /**
- * Page layout configuration
+ * 完整页面布局配置
  */
-export interface PageLayoutConfigV2 {
-    header?: AreaConfig;
-    mainArea?: AreaConfig;
-    footer?: AreaConfig;
+export interface PageLayoutConfig {
+    header?: HeaderConfig;
+    mainArea: MainAreaConfig;
+    footer?: FooterConfig;
 }
 /**
- * Render complete page with fixed-region architecture
+ * 渲染完整页面
  *
- * Phase 1: Render all components (non-blocking)
- * Phase 2: Handle interactions (blocking)
- */
-export declare function renderPageV2(config: PageLayoutConfigV2): Promise<void>;
-/**
- * Helper to create a custom component
+ * @example
+ * ```typescript
+ * const result = await renderPage({
+ *   header: { type: 'simple', text: 'My Page' },
+ *   mainArea: {
+ *     type: 'display',
+ *     render: () => console.log('Content')
+ *   },
+ *   footer: {
+ *     menu: { options: ['1. Save', 'b. Back'] },
+ *     hints: ['↑↓ Navigate  Enter Confirm']
+ *   }
+ * });
+ * ```
  */
-export declare function createCustomComponent(type: string, regionId: string, render: (rect: Rect) => string[] | Promise<string[]>, interact?: () => void | Promise<void>): Component;
+export declare function renderPage(config: PageLayoutConfig): Promise<any>;

package/dist/layout.js

@@ -1,134 +1,86 @@
 "use strict";
 /**
- * Page Layout V2 - Component-Based Architecture with Fixed Regions
- *
- * Core Principles:
- * 1. Complete component decoupling
- * 2. Fixed-height regions (Header/Footer fixed, Main fills rest)
- * 3. Components return string arrays (lines)
- * 4. Diff-based rendering - only update changed regions
- * 5. Two-phase execution: render (non-blocking) + interact (blocking)
+ * Page Layout System
+ * 通用页面布局：Header + Main Area + Footer
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintManager = exports.ScreenManager = exports.hintManager = exports.screenManager = void 0;
-exports.computeLayout = computeLayout;
-exports.renderPageV2 = renderPageV2;
-exports.createCustomComponent = createCustomComponent;
-const screen_manager_js_1 = require("./core/screen-manager.js");
-Object.defineProperty(exports, "ScreenManager", { enumerable: true, get: function () { return screen_manager_js_1.ScreenManager; } });
-const hint_manager_js_1 = require("./core/hint-manager.js");
-Object.defineProperty(exports, "HintManager", { enumerable: true, get: function () { return hint_manager_js_1.HintManager; } });
-// Global instances
-exports.screenManager = new screen_manager_js_1.ScreenManager();
-exports.hintManager = new hint_manager_js_1.HintManager();
-/**
- * Compute layout based on terminal size
- */
-function computeLayout(rows, cols) {
-    const termRows = rows || process.stdout.rows || 24;
-    const termCols = cols || process.stdout.columns || 80;
-    const headerHeight = 13; // Fixed header height (6 ASCII art + title + desc + separator)
-    const footerHintsHeight = 1; // Fixed hints height
-    const footerPromptHeight = 1; // Fixed prompt height
-    const mainHeight = Math.max(1, termRows - headerHeight - footerHintsHeight - footerPromptHeight);
-    return {
-        header: { top: 1, left: 1, width: termCols, height: headerHeight },
-        main: { top: 1 + headerHeight, left: 1, width: termCols, height: mainHeight },
-        footerHints: { top: 1 + headerHeight + mainHeight, left: 1, width: termCols, height: footerHintsHeight },
-        footerPrompt: { top: 1 + headerHeight + mainHeight + footerHintsHeight, left: 1, width: termCols, height: footerPromptHeight }
-    };
-}
+exports.renderPage = renderPage;
+const api_js_1 = require("./api.js");
+const headers_js_1 = require("./components/display/headers.js");
 /**
- * Render complete page with fixed-region architecture
- *
- * Phase 1: Render all components (non-blocking)
- * Phase 2: Handle interactions (blocking)
+ * 渲染 Header
  */
-async function renderPageV2(config) {
-    // Enter alt screen
-    exports.screenManager.enter();
-    // Compute layout
-    const layout = computeLayout();
-    // Register regions
-    if (config.header?.components) {
-        for (const component of config.header.components) {
-            exports.screenManager.registerRegion(component.regionId, layout.header);
-        }
-    }
-    if (config.mainArea?.components) {
-        for (const component of config.mainArea.components) {
-            exports.screenManager.registerRegion(component.regionId, layout.main);
-        }
+function renderHeader(config) {
+    if (!config || config.type === 'none') {
+        return;
     }
-    if (config.footer?.components) {
-        for (const component of config.footer.components) {
-            // Map components to their specific footer regions
-            if (component.type === 'hints') {
-                exports.screenManager.registerRegion(component.regionId, layout.footerHints);
-            }
-            else if (component.type === 'prompt') {
-                exports.screenManager.registerRegion(component.regionId, layout.footerPrompt);
-            }
-        }
+    if (config.type === 'simple' && config.text) {
+        (0, headers_js_1.renderSimpleHeader)(config.text);
     }
-    // Phase 1: Initial render
-    const renderComponent = async (component, rect) => {
-        const lines = await component.render(rect);
-        exports.screenManager.renderRegion(component.regionId, lines);
-    };
-    if (config.header?.components) {
-        for (const component of config.header.components) {
-            await renderComponent(component, layout.header);
-        }
+    else if (config.type === 'section' && config.text) {
+        (0, headers_js_1.renderSectionHeader)(config.text, config.width || 50);
     }
-    if (config.mainArea?.components) {
-        for (const component of config.mainArea.components) {
-            await renderComponent(component, layout.main);
-        }
-    }
-    if (config.footer?.components) {
-        for (const component of config.footer.components) {
-            const rect = component.type === 'hints' ? layout.footerHints : layout.footerPrompt;
-            await renderComponent(component, rect);
-        }
-    }
-    // Setup hint manager listener
-    exports.hintManager.on('change', (text) => {
-        const hintsComponent = config.footer?.components.find(c => c.type === 'hints');
-        if (hintsComponent) {
-            exports.screenManager.renderRegion(hintsComponent.regionId, [text]);
-        }
-    });
-    // Handle terminal resize
-    process.stdout.on('resize', () => {
-        const newLayout = computeLayout();
-        exports.screenManager.invalidateAll();
-        // Re-register and re-render all regions
-        // (Implementation can be enhanced to avoid code duplication)
-    });
-    // Phase 2: Handle interactions
-    const interactiveComponents = [];
-    if (config.header?.components) {
-        interactiveComponents.push(...config.header.components.filter(c => c.interact));
+}
+/**
+ * 渲染 Footer
+ * 返回用户的选择/输入结果
+ */
+async function renderFooter(config) {
+    if (!config) {
+        return null;
     }
-    if (config.mainArea?.components) {
-        interactiveComponents.push(...config.mainArea.components.filter(c => c.interact));
+    let result = null;
+    // 1. Menu (如果有)
+    if (config.menu) {
+        result = await api_js_1.menuAPI.radio({
+            options: config.menu.options,
+            allowLetterKeys: config.menu.allowLetterKeys ?? true,
+            allowNumberKeys: config.menu.allowNumberKeys ?? true,
+            hints: config.hints,
+            preserveOnSelect: true
+        });
     }
-    if (config.footer?.components) {
-        interactiveComponents.push(...config.footer.components.filter(c => c.interact));
+    // 2. Input (如果有)
+    else if (config.input) {
+        result = await api_js_1.inputAPI.text({
+            prompt: config.input.prompt,
+            defaultValue: config.input.defaultValue,
+            allowEmpty: config.input.allowEmpty ?? false
+        });
     }
-    // Execute interact phase
-    for (const component of interactiveComponents) {
-        if (component.interact) {
-            await component.interact();
-        }
+    // 3. Ask (如果有 - 通常在 Menu 或 Input 之后)
+    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);
+        return { ...result, confirmed: askResult };
     }
-    // Exit alt screen
-    exports.screenManager.exit();
+    return result;
 }
 /**
- * Helper to create a custom component
+ * 渲染完整页面
+ *
+ * @example
+ * ```typescript
+ * const result = await renderPage({
+ *   header: { type: 'simple', text: 'My Page' },
+ *   mainArea: {
+ *     type: 'display',
+ *     render: () => console.log('Content')
+ *   },
+ *   footer: {
+ *     menu: { options: ['1. Save', 'b. Back'] },
+ *     hints: ['↑↓ Navigate  Enter Confirm']
+ *   }
+ * });
+ * ```
  */
-function createCustomComponent(type, regionId, render, interact) {
-    return { type, regionId, render, interact };
+async function renderPage(config) {
+    // 1. Render Header
+    renderHeader(config.header);
+    // 2. Render Main Area
+    await config.mainArea.render();
+    // 3. Render Footer
+    const footerResult = await renderFooter(config.footer);
+    return footerResult;
 }