cli-menu-kit 0.1.26 → 0.2.1

package/dist/components/display/header.js

@@ -3,45 +3,358 @@
  * Header component for CLI applications
  * Displays ASCII art, title, description, version and URL
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderHeader = renderHeader;
 const colors_js_1 = require("../../core/colors.js");
 const terminal_js_1 = require("../../core/terminal.js");
+const figlet_1 = __importDefault(require("figlet"));
+function visibleLength(value) {
+    return value.replace(/\x1b\[[0-9;]*m/g, '').length;
+}
+function padToVisibleWidth(value, width) {
+    const current = visibleLength(value);
+    if (current >= width) {
+        return value;
+    }
+    return value + ' '.repeat(width - current);
+}
+function parseBackgroundAnsiToRgb(value) {
+    const trueColor = /^\x1b\[48;2;(\d{1,3});(\d{1,3});(\d{1,3})m$/.exec(value);
+    if (trueColor) {
+        return {
+            r: Math.max(0, Math.min(255, Number.parseInt(trueColor[1], 10))),
+            g: Math.max(0, Math.min(255, Number.parseInt(trueColor[2], 10))),
+            b: Math.max(0, Math.min(255, Number.parseInt(trueColor[3], 10)))
+        };
+    }
+    const ansi256 = /^\x1b\[48;5;(\d{1,3})m$/.exec(value);
+    if (ansi256) {
+        const code = Math.max(0, Math.min(255, Number.parseInt(ansi256[1], 10)));
+        if (code >= 16 && code <= 231) {
+            const n = code - 16;
+            const r = Math.floor(n / 36);
+            const g = Math.floor((n % 36) / 6);
+            const b = n % 6;
+            const steps = [0, 95, 135, 175, 215, 255];
+            return { r: steps[r], g: steps[g], b: steps[b] };
+        }
+        if (code >= 232) {
+            const gray = 8 + (code - 232) * 10;
+            return { r: gray, g: gray, b: gray };
+        }
+        const basicMap = [
+            { r: 0, g: 0, b: 0 },
+            { r: 170, g: 0, b: 0 },
+            { r: 0, g: 170, b: 0 },
+            { r: 170, g: 85, b: 0 },
+            { r: 0, g: 0, b: 170 },
+            { r: 170, g: 0, b: 170 },
+            { r: 0, g: 170, b: 170 },
+            { r: 170, g: 170, b: 170 },
+            { r: 85, g: 85, b: 85 },
+            { r: 255, g: 85, b: 85 },
+            { r: 85, g: 255, b: 85 },
+            { r: 255, g: 255, b: 85 },
+            { r: 85, g: 85, b: 255 },
+            { r: 255, g: 85, b: 255 },
+            { r: 85, g: 255, b: 255 },
+            { r: 255, g: 255, b: 255 }
+        ];
+        return basicMap[code] ?? null;
+    }
+    return null;
+}
+function isTrueColorBackground(value) {
+    return /^\x1b\[48;2;\d{1,3};\d{1,3};\d{1,3}m$/.test(value);
+}
+function supportsTrueColorTerminal() {
+    const colorterm = (process.env.COLORTERM ?? '').toLowerCase();
+    if (colorterm.includes('truecolor') || colorterm.includes('24bit')) {
+        return true;
+    }
+    const term = (process.env.TERM ?? '').toLowerCase();
+    if (term.includes('direct')) {
+        return true;
+    }
+    const program = (process.env.TERM_PROGRAM ?? '').toLowerCase();
+    if (program.includes('ghostty') || program.includes('wezterm') || program.includes('iterm') || program.includes('vscode')) {
+        return true;
+    }
+    return false;
+}
+function applyBackgroundGradient(content, startColor, endColor) {
+    // Compatibility fallback:
+    // only use per-character background gradients on truecolor terminals.
+    if (!isTrueColorBackground(startColor) || !isTrueColorBackground(endColor) || !supportsTrueColorTerminal()) {
+        return `${startColor}${content}${colors_js_1.colors.reset}`;
+    }
+    const start = parseBackgroundAnsiToRgb(startColor);
+    const end = parseBackgroundAnsiToRgb(endColor);
+    if (!start || !end) {
+        return `${startColor}${content}${colors_js_1.colors.reset}`;
+    }
+    const total = Math.max(1, visibleLength(content));
+    let out = '';
+    let visibleIndex = 0;
+    for (let i = 0; i < content.length; i += 1) {
+        const ch = content[i] ?? '';
+        if (ch === '\x1b') {
+            const endIdx = content.indexOf('m', i);
+            if (endIdx >= 0) {
+                out += content.slice(i, endIdx + 1);
+                i = endIdx;
+                continue;
+            }
+        }
+        const t = total <= 1 ? 0 : visibleIndex / (total - 1);
+        const r = Math.round(start.r + (end.r - start.r) * t);
+        const g = Math.round(start.g + (end.g - start.g) * t);
+        const b = Math.round(start.b + (end.b - start.b) * t);
+        out += `\x1b[48;2;${String(r)};${String(g)};${String(b)}m${ch}`;
+        visibleIndex += 1;
+    }
+    return `${out}${colors_js_1.colors.reset}`;
+}
+const figletCache = new Map();
+function inkCount(line) {
+    let count = 0;
+    for (const ch of line) {
+        if (ch !== ' ' && ch !== '\t') {
+            count += 1;
+        }
+    }
+    return count;
+}
+function trimFigletTailNoise(lines) {
+    const out = [...lines];
+    while (out.length > 1) {
+        const last = out[out.length - 1] ?? '';
+        const prev = out[out.length - 2] ?? '';
+        const lastInk = inkCount(last);
+        const prevInk = inkCount(prev);
+        // Remove very small dangling tail rows (common in Bloody-like fonts).
+        if (lastInk <= 1 && prevInk >= 4) {
+            out.pop();
+            continue;
+        }
+        break;
+    }
+    return out;
+}
+function resolveFigletFont(font, size = 'medium') {
+    if (font && font.trim().length > 0) {
+        return font;
+    }
+    if (size === 'small') {
+        return 'Small';
+    }
+    if (size === 'large') {
+        return 'Big';
+    }
+    return 'Standard';
+}
+function resolveFigletLines(text, font) {
+    const cacheKey = `${font}\u0000${text}`;
+    const cached = figletCache.get(cacheKey);
+    if (cached) {
+        return cached;
+    }
+    try {
+        const rendered = figlet_1.default.textSync(text, { font });
+        const lines = rendered.split('\n');
+        while (lines.length > 0 && lines[lines.length - 1].trim().length === 0) {
+            lines.pop();
+        }
+        const cleaned = trimFigletTailNoise(lines);
+        figletCache.set(cacheKey, cleaned);
+        return cleaned;
+    }
+    catch {
+        const fallback = figlet_1.default.textSync(text, { font: 'Standard' }).split('\n');
+        while (fallback.length > 0 && fallback[fallback.length - 1].trim().length === 0) {
+            fallback.pop();
+        }
+        const cleanedFallback = trimFigletTailNoise(fallback);
+        figletCache.set(cacheKey, cleanedFallback);
+        return cleanedFallback;
+    }
+}
+function scaleLineX(line, outCols) {
+    const srcCols = line.length;
+    if (srcCols === 0 || outCols <= 0) {
+        return '';
+    }
+    if (outCols === srcCols) {
+        return line;
+    }
+    let scaled = '';
+    for (let c = 0; c < outCols; c += 1) {
+        if (outCols === 1 || srcCols === 1) {
+            scaled += line[0] ?? ' ';
+            continue;
+        }
+        const pos = (c * (srcCols - 1)) / (outCols - 1);
+        const srcCol = Math.max(0, Math.min(srcCols - 1, Math.round(pos)));
+        scaled += line[srcCol] ?? ' ';
+    }
+    return scaled;
+}
+function scaleAsciiLines(lines, scaleX, scaleY) {
+    const sx = Number.isFinite(scaleX) ? Math.max(0.4, Math.min(4, scaleX)) : 1;
+    const sy = Number.isFinite(scaleY) ? Math.max(0.4, Math.min(4, scaleY)) : sx;
+    if (Math.abs(sx - 1) < 0.001 && Math.abs(sy - 1) < 0.001) {
+        return lines;
+    }
+    const srcRows = lines.length;
+    if (srcRows === 0) {
+        return lines;
+    }
+    const outRows = Math.max(1, Math.round(srcRows * sy));
+    const out = [];
+    const sampleIndex = (outIndex, outCount, srcCount) => {
+        if (srcCount <= 1 || outCount <= 1) {
+            return 0;
+        }
+        const ratio = outIndex / (outCount - 1);
+        return Math.max(0, Math.min(srcCount - 1, Math.round(ratio * (srcCount - 1))));
+    };
+    for (let r = 0; r < outRows; r += 1) {
+        const srcRow = sampleIndex(r, outRows, srcRows);
+        const srcLine = lines[srcRow] ?? '';
+        const outCols = Math.max(1, Math.round(srcLine.length * sx));
+        out.push(scaleLineX(srcLine, outCols).replace(/\s+$/g, ''));
+    }
+    return out;
+}
+function resolveFigletScale(scale, _explicitFont, _size) {
+    if (typeof scale === 'number' && Number.isFinite(scale)) {
+        return Math.max(0.4, Math.min(4, scale));
+    }
+    return 1;
+}
+function resolveFigletScaleY(scaleY, scaleX, explicitFont) {
+    if (typeof scaleY === 'number' && Number.isFinite(scaleY)) {
+        return Math.max(0.4, Math.min(4, scaleY));
+    }
+    const normalizedFont = (explicitFont || '').trim().toLowerCase();
+    // Keep Pagga crisp: no default Y stretch (its native height is 3 rows).
+    if (normalizedFont === 'pagga' && scaleX > 1) {
+        return 1;
+    }
+    return scaleX;
+}
 /**
  * Render a boxed header with ASCII art, title, and description
  * @param config - Header configuration
  */
 function renderHeader(config) {
-    const { asciiArt = [], title = '', description = '', version, url, menuTitle, boxWidth = 60, color = colors_js_1.uiColors.border } = config;
+    const { asciiArt = [], figletText, figletFont, figletSize = 'medium', figletScale, figletScaleY, title = '', titleColor, titleGradientStart, titleGradientEnd, description = '', descriptionColor, descriptionGradientStart, descriptionGradientEnd, version, url, menuTitle, boxWidth = 60, showBoxBorder = true, fillBox = false, fillBoxColor = colors_js_1.colors.bgBlack, fillBoxGradientStart, fillBoxGradientEnd, color = colors_js_1.uiColors.border, asciiArtColor, asciiArtGradientStart, asciiArtGradientEnd } = config;
+    const resolvedFigletFont = resolveFigletFont(figletFont, figletSize);
+    const effectiveFigletScale = resolveFigletScale(figletScale, figletFont, figletSize);
+    const effectiveScaleY = resolveFigletScaleY(figletScaleY, effectiveFigletScale, resolvedFigletFont);
+    const resolvedAsciiArt = figletText
+        ? scaleAsciiLines(resolveFigletLines(figletText, resolvedFigletFont), effectiveFigletScale, effectiveScaleY)
+        : asciiArt;
+    const requestedInnerWidth = Math.max(10, boxWidth - 2);
+    const contentLengths = [];
+    for (const line of resolvedAsciiArt) {
+        contentLengths.push(visibleLength(`  ${line}`));
+    }
+    if (title) {
+        contentLengths.push(visibleLength(`  ${title}`));
+    }
+    if (description) {
+        contentLengths.push(visibleLength(`  ${description}`));
+    }
+    const innerWidth = Math.max(requestedInnerWidth, ...contentLengths, 10);
     const boldColor = `${color}${colors_js_1.colors.bold}`;
+    const applyBoxFill = (content) => {
+        if (!fillBox) {
+            return content;
+        }
+        if (fillBoxGradientStart && fillBoxGradientEnd) {
+            return applyBackgroundGradient(content, fillBoxGradientStart, fillBoxGradientEnd);
+        }
+        const replayed = content.replace(/\x1b\[0m/g, `${colors_js_1.colors.reset}${fillBoxColor}`);
+        return `${fillBoxColor}${replayed}${colors_js_1.colors.reset}`;
+    };
+    const writeSpacer = () => {
+        if (showBoxBorder) {
+            const spacerContent = fillBox ? applyBoxFill(' '.repeat(innerWidth)) : ' '.repeat(innerWidth);
+            (0, terminal_js_1.writeLine)(`${boldColor}║${spacerContent}${boldColor}║${colors_js_1.colors.reset}`);
+        }
+        else if (fillBox) {
+            (0, terminal_js_1.writeLine)(` ${applyBoxFill(' '.repeat(innerWidth))}`);
+        }
+        else {
+            (0, terminal_js_1.writeLine)('');
+        }
+    };
+    const writeContentLine = (content, tint) => {
+        const normalized = showBoxBorder || fillBox ? padToVisibleWidth(content, innerWidth) : content;
+        if (showBoxBorder) {
+            const inner = tint ? `${tint}${normalized}${colors_js_1.colors.reset}` : `${colors_js_1.colors.reset}${normalized}`;
+            const body = fillBox ? applyBoxFill(inner) : inner;
+            if (tint) {
+                (0, terminal_js_1.writeLine)(`${boldColor}║${body}${boldColor}║${colors_js_1.colors.reset}`);
+            }
+            else {
+                (0, terminal_js_1.writeLine)(`${boldColor}║${body}${boldColor}║${colors_js_1.colors.reset}`);
+            }
+            return;
+        }
+        const plainLine = tint ? `${tint}${normalized}${colors_js_1.colors.reset}` : normalized;
+        if (fillBox) {
+            (0, terminal_js_1.writeLine)(` ${applyBoxFill(plainLine)}`);
+            return;
+        }
+        (0, terminal_js_1.writeLine)(plainLine);
+    };
     // Top border
     (0, terminal_js_1.writeLine)('');
-    (0, terminal_js_1.writeLine)(`${boldColor}╔${'═'.repeat(boxWidth - 2)}╗${colors_js_1.colors.reset}`);
-    // Empty line
-    (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+    if (showBoxBorder) {
+        (0, terminal_js_1.writeLine)(`${boldColor}╔${'═'.repeat(innerWidth)}╗${colors_js_1.colors.reset}`);
+    }
+    writeSpacer();
     // ASCII art (left-aligned with 2 spaces padding)
-    if (asciiArt.length > 0) {
-        asciiArt.forEach(line => {
-            const paddedLine = `  ${line}`.padEnd(boxWidth - 2, ' ');
-            (0, terminal_js_1.writeLine)(`${boldColor}║${paddedLine}║${colors_js_1.colors.reset}`);
+    if (resolvedAsciiArt.length > 0) {
+        resolvedAsciiArt.forEach(line => {
+            const paddedLine = showBoxBorder ? `  ${line}`.padEnd(innerWidth, ' ') : `  ${line}`;
+            const artLine = asciiArtGradientStart && asciiArtGradientEnd
+                ? `${(0, colors_js_1.applyGradient)(paddedLine, asciiArtGradientStart, asciiArtGradientEnd)}`
+                : `${(asciiArtColor || color)}${paddedLine}${colors_js_1.colors.reset}`;
+            writeContentLine(artLine);
         });
-        (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+        writeSpacer();
     }
-    // Title (left-aligned with 2 spaces padding, black text)
+    // Title (left-aligned with 2 spaces padding)
     if (title) {
-        const paddedTitle = `  ${title}`.padEnd(boxWidth - 2, ' ');
-        (0, terminal_js_1.writeLine)(`${boldColor}║${colors_js_1.colors.reset}${paddedTitle}${boldColor}║${colors_js_1.colors.reset}`);
-        (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+        const paddedTitle = showBoxBorder ? `  ${title}`.padEnd(innerWidth, ' ') : `  ${title}`;
+        const titleLine = titleGradientStart && titleGradientEnd
+            ? (0, colors_js_1.applyGradient)(paddedTitle, titleGradientStart, titleGradientEnd)
+            : paddedTitle;
+        writeContentLine(titleLine, titleGradientStart && titleGradientEnd ? undefined : titleColor);
+        writeSpacer();
     }
-    // Description (left-aligned with 2 spaces padding, gray text)
+    // Description (left-aligned with 2 spaces padding)
     if (description) {
         const textContent = `  ${description}`;
-        const paddedText = textContent.padEnd(boxWidth - 2, ' ');
-        (0, terminal_js_1.writeLine)(`${boldColor}║${colors_js_1.uiColors.textSecondary}${paddedText}${colors_js_1.colors.reset}${boldColor}║${colors_js_1.colors.reset}`);
-        (0, terminal_js_1.writeLine)(`${boldColor}║${' '.repeat(boxWidth - 2)}║${colors_js_1.colors.reset}`);
+        const paddedText = showBoxBorder ? textContent.padEnd(innerWidth, ' ') : textContent;
+        const descLine = descriptionGradientStart && descriptionGradientEnd
+            ? (0, colors_js_1.applyGradient)(paddedText, descriptionGradientStart, descriptionGradientEnd)
+            : paddedText;
+        writeContentLine(descLine, descriptionGradientStart && descriptionGradientEnd
+            ? undefined
+            : (descriptionColor || colors_js_1.uiColors.textSecondary));
+        writeSpacer();
     }
     // Bottom border
-    (0, terminal_js_1.writeLine)(`${boldColor}╚${'═'.repeat(boxWidth - 2)}╝${colors_js_1.colors.reset}`);
+    if (showBoxBorder) {
+        (0, terminal_js_1.writeLine)(`${boldColor}╚${'═'.repeat(innerWidth)}╝${colors_js_1.colors.reset}`);
+    }
     // Blank line after box
     (0, terminal_js_1.writeLine)('');
     // Version and URL (outside the box, with colors)

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

@@ -10,6 +10,7 @@ import { AsciiHeaderConfig } from '../../types/display.types.js';
  * @param color - Optional color (default: cyan)
  */
 export declare function renderSimpleHeader(text: string, color?: string): void;
+export declare function renderSimpleHeaderWithSpacing(text: string, color?: string, spacingAfter?: number): void;
 /**
  * Render a section header with double-line borders
  * Format:

package/dist/components/display/headers.js

@@ -5,6 +5,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderSimpleHeader = renderSimpleHeader;
+exports.renderSimpleHeaderWithSpacing = renderSimpleHeaderWithSpacing;
 exports.renderSectionHeader = renderSectionHeader;
 exports.renderAsciiHeader = renderAsciiHeader;
 exports.createSimpleHeader = createSimpleHeader;
@@ -21,10 +22,19 @@ const terminal_js_2 = require("../../core/terminal.js");
  */
 function renderSimpleHeader(text, color) {
     const headerColor = color || colors_js_1.uiColors.primary;
-    const line = `=== ${text} ===`;
+    const line = `  === ${text} ===`;
     (0, terminal_js_1.writeLine)(`${headerColor}${line}${colors_js_1.colors.reset}`);
     (0, terminal_js_1.writeLine)('');
 }
+function renderSimpleHeaderWithSpacing(text, color, spacingAfter = 1) {
+    const headerColor = color || colors_js_1.uiColors.primary;
+    const line = `  === ${text} ===`;
+    (0, terminal_js_1.writeLine)(`${headerColor}${line}${colors_js_1.colors.reset}`);
+    const spacerLines = Math.max(0, Math.floor(spacingAfter));
+    for (let i = 0; i < spacerLines; i += 1) {
+        (0, terminal_js_1.writeLine)('');
+    }
+}
 /**
  * Render a section header with double-line borders
  * Format:
@@ -53,22 +63,22 @@ function renderAsciiHeader(config) {
     const termWidth = (0, terminal_js_2.getTerminalWidth)();
     const border = borderChar.repeat(termWidth);
     // Top border
-    (0, terminal_js_1.writeLine)(colors_js_1.colors.cyan + border + colors_js_1.colors.reset);
+    (0, terminal_js_1.writeLine)(colors_js_1.uiColors.border + border + colors_js_1.colors.reset);
     (0, terminal_js_1.writeLine)('');
     // ASCII art (centered)
     const artLines = asciiArt.split('\n');
     artLines.forEach(line => {
-        (0, terminal_js_1.writeLine)(colors_js_1.colors.cyan + line + colors_js_1.colors.reset);
+        (0, terminal_js_1.writeLine)(colors_js_1.uiColors.primary + line + colors_js_1.colors.reset);
     });
     // Subtitle if provided
     if (subtitle) {
         (0, terminal_js_1.writeLine)('');
         const padding = Math.floor((termWidth - subtitle.length) / 2);
-        (0, terminal_js_1.writeLine)(' '.repeat(padding) + colors_js_1.colors.brightCyan + subtitle + colors_js_1.colors.reset);
+        (0, terminal_js_1.writeLine)(' '.repeat(padding) + colors_js_1.uiColors.accent + subtitle + colors_js_1.colors.reset);
     }
     (0, terminal_js_1.writeLine)('');
     // Bottom border
-    (0, terminal_js_1.writeLine)(colors_js_1.colors.cyan + border + colors_js_1.colors.reset);
+    (0, terminal_js_1.writeLine)(colors_js_1.uiColors.border + border + colors_js_1.colors.reset);
     // Footer info (version and URL)
     if (version || url) {
         const footerParts = [];

package/dist/components/display/hints-v2.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hints Component - New Architecture Version
+ * Returns string arrays and listens to HintManager
+ */
+import { Component } from '../../layout.js';
+export declare function createHintsComponentV2(hints: string[]): Component;
+/**
+ * Create a dynamic hints component that listens to HintManager
+ */
+export declare function createDynamicHintsComponent(): Component;

package/dist/components/display/hints-v2.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Hints Component - New Architecture Version
+ * Returns string arrays and listens to HintManager
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHintsComponentV2 = createHintsComponentV2;
+exports.createDynamicHintsComponent = createDynamicHintsComponent;
+const layout_js_1 = require("../../layout.js");
+const colors_js_1 = require("../../core/colors.js");
+function createHintsComponentV2(hints) {
+    return {
+        type: 'hints',
+        regionId: 'footerHints',
+        render: (rect) => {
+            // Join hints with separator
+            const hintsText = hints.join(' • ');
+            return [`${colors_js_1.colors.dim}${hintsText}${colors_js_1.colors.reset}`];
+        }
+    };
+}
+/**
+ * Create a dynamic hints component that listens to HintManager
+ */
+function createDynamicHintsComponent() {
+    return {
+        type: 'hints',
+        regionId: 'footerHints',
+        render: (rect) => {
+            const currentHint = layout_js_1.hintManager.current();
+            return [currentHint ? `${colors_js_1.colors.dim}${currentHint}${colors_js_1.colors.reset}` : ''];
+        }
+    };
+}

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

@@ -0,0 +1,56 @@
+/**
+ * Hints Component
+ * Displays operation hints at the bottom of the page
+ */
+/**
+ * Hints configuration
+ */
+export interface HintsConfig {
+    hints: string[];
+}
+/**
+ * Standard hint types
+ */
+export declare const HintTypes: {
+    /** Arrow keys navigation */
+    readonly ARROWS: () => string;
+    /** Number keys selection */
+    readonly NUMBERS: () => string;
+    /** Letter keys selection */
+    readonly LETTERS: () => string;
+    /** Space key toggle */
+    readonly SPACE: () => string;
+    /** Enter key confirm */
+    readonly ENTER: () => string;
+    /** Escape key cancel */
+    readonly ESC: () => string;
+    /** Select all */
+    readonly SELECT_ALL: () => string;
+    /** Invert selection */
+    readonly INVERT: () => string;
+};
+/**
+ * Generate hints for menu interactions
+ */
+export declare function generateMenuHints(options: {
+    hasMultipleOptions?: boolean;
+    allowNumberKeys?: boolean;
+    allowLetterKeys?: boolean;
+    allowSelectAll?: boolean;
+    allowInvert?: boolean;
+}): string[];
+/**
+ * Generate hints for input interactions
+ */
+export declare function generateInputHints(): string[];
+/**
+ * Render hints component
+ * @param config - Hints configuration
+ */
+export declare function renderHintsComponent(config: HintsConfig): void;
+/**
+ * Create hints component (factory function)
+ * @param hints - Array of hint strings
+ * @returns Hints configuration
+ */
+export declare function createHints(hints: string[]): HintsConfig;

package/dist/components/display/hints.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * Hints Component
+ * Displays operation hints at the bottom of the page
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HintTypes = void 0;
+exports.generateMenuHints = generateMenuHints;
+exports.generateInputHints = generateInputHints;
+exports.renderHintsComponent = renderHintsComponent;
+exports.createHints = createHints;
+const renderer_js_1 = require("../../core/renderer.js");
+const registry_js_1 = require("../../i18n/registry.js");
+/**
+ * Standard hint types
+ */
+exports.HintTypes = {
+    /** Arrow keys navigation */
+    ARROWS: () => (0, registry_js_1.t)('hints.arrows'),
+    /** Number keys selection */
+    NUMBERS: () => (0, registry_js_1.t)('hints.numbers'),
+    /** Letter keys selection */
+    LETTERS: () => (0, registry_js_1.t)('hints.letters'),
+    /** Space key toggle */
+    SPACE: () => (0, registry_js_1.t)('hints.space'),
+    /** Enter key confirm */
+    ENTER: () => (0, registry_js_1.t)('hints.enter'),
+    /** Escape key cancel */
+    ESC: () => 'Esc Cancel',
+    /** Select all */
+    SELECT_ALL: () => (0, registry_js_1.t)('hints.selectAll'),
+    /** Invert selection */
+    INVERT: () => (0, registry_js_1.t)('hints.invert')
+};
+/**
+ * Generate hints for menu interactions
+ */
+function generateMenuHints(options) {
+    const hints = [];
+    if (options.hasMultipleOptions) {
+        hints.push(exports.HintTypes.ARROWS());
+    }
+    if (options.allowNumberKeys) {
+        hints.push(exports.HintTypes.NUMBERS());
+    }
+    if (options.allowLetterKeys) {
+        hints.push(exports.HintTypes.LETTERS());
+    }
+    if (options.allowSelectAll) {
+        hints.push(exports.HintTypes.SELECT_ALL());
+    }
+    if (options.allowInvert) {
+        hints.push(exports.HintTypes.INVERT());
+    }
+    hints.push(exports.HintTypes.ENTER());
+    return hints;
+}
+/**
+ * Generate hints for input interactions
+ */
+function generateInputHints() {
+    return [exports.HintTypes.ENTER(), exports.HintTypes.ESC()];
+}
+/**
+ * Render hints component
+ * @param config - Hints configuration
+ */
+function renderHintsComponent(config) {
+    if (!config.hints || config.hints.length === 0) {
+        return;
+    }
+    (0, renderer_js_1.renderHints)(config.hints);
+}
+/**
+ * Create hints component (factory function)
+ * @param hints - Array of hint strings
+ * @returns Hints configuration
+ */
+function createHints(hints) {
+    return { hints };
+}

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

@@ -3,7 +3,10 @@
  * Exports all display component functions
  */
 export { renderSimpleHeader, renderSectionHeader, renderAsciiHeader, createSimpleHeader, createSectionHeader, createAsciiHeader } from './headers.js';
-export { renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator } from './progress.js';
+export { renderProgressIndicator, renderStageHeader, renderStageSeparator, createProgressIndicator, createStageHeader, createStageSeparator, renderProgressCheckmark, createProgressCheckmark } from './progress.js';
 export { renderMessage, showSuccess, showError, showWarning, showInfo, showQuestion, createMessage } from './messages.js';
 export { renderSummaryTable, createSummaryTable, createSimpleSummary } from './summary.js';
 export { renderHeader, type HeaderConfig } from './header.js';
+export { renderHintsComponent, createHints, generateMenuHints, generateInputHints, HintTypes, type HintsConfig } from './hints.js';
+export { renderTable, createTable, type TableConfig, type TableColumn } from './table.js';
+export { renderList, createList, createBulletList, createNumberedList, type ListConfig, type ListItem } from './list.js';