cli-menu-kit 0.1.22 → 0.1.26

package/dist/components/display/summary.js

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

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

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

package/package.json

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