@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/blocks/Terminal/parsing/ansi/AnsiParser.ts

@@ -1,390 +0,0 @@
-/**
- * ANSI escape code parser for terminal colorization.
- *
- * Handles standard ANSI/VT100 escape sequences including:
- * - CSI (Control Sequence Introducer): \x1b[...
- * - SGR (Select Graphic Rendition): colors, styles
- * - OSC (Operating System Command): window title, etc.
- *
- * Converts ANSI codes to xterm.js compatible format with proper
- * Synthwave theme color mapping.
- *
- * @module components/devenv/terminal/parsing/ansi/parser
- */
-
-import { ANSI_PATTERNS, SGR_CODES } from './ansi.constants';
-import { AnsiColorMapper } from './AnsiColorMapper';
-import type { IAnsiParseResult, IAnsiStyle } from '../LogParser.types';
-
-/**
- * ANSI escape code parser state.
- *
- * Maintains current styling state during incremental parsing.
- */
-interface IAnsiParserState {
-  /** Current foreground color code */
-  fg_color?: number;
-
-  /** Current background color code */
-  bg_color?: number;
-
-  /** Active text modifiers */
-  modifiers: Set<string>;
-}
-
-/**
- * ANSI escape code parser class.
- *
- * Parses ANSI escape sequences from text and converts them to
- * xterm.js compatible format with proper Synthwave theme colors.
- *
- * @example
- * ```ts
- * const parser = new AnsiParser();
- * const result = parser.parse('\x1b[31mError\x1b[0m message');
- * // result.text: '\\x1b]4;197;#ff4466\\x07Error\\x1b[0m message'
- * // result.styles: [{ fg_color: 31, modifiers: [] }]
- * ```
- */
-export class AnsiParser {
-  /** Current parser state */
-  private state: IAnsiParserState;
-
-  /**
-   * Create a new ANSI parser.
-   *
-   * Initializes with default state (no colors, no modifiers).
-   */
-  constructor() {
-    this.state = {
-      modifiers: new Set<string>(),
-    };
-  }
-
-  /**
-   * Check if a string contains ANSI escape codes.
-   *
-   * @param text - Text to check
-   * @returns true if text contains ANSI escape sequences
-   *
-   * @example
-   * ```ts
-   * AnsiParser.hasAnsi('\x1b[31mError'); // true
-   * AnsiParser.hasAnsi('Plain text'); // false
-   * ```
-   */
-  static hasAnsi(text: string): boolean {
-    return ANSI_PATTERNS.CSI_SEQUENCE.test(text);
-  }
-
-  /**
-   * Strip all ANSI escape codes from text.
-   *
-   * Removes ANSI sequences while preserving the actual text content.
-   * Useful for plain text display or searching.
-   *
-   * @param text - Text with ANSI codes
-   * @returns Plain text without ANSI codes
-   *
-   * @example
-   * ```ts
-   * const plain = AnsiParser.stripAnsi('\x1b[31mError\x1b[0m');
-   * // 'Error'
-   * ```
-   */
-  static stripAnsi(text: string): string {
-    return text.replace(ANSI_PATTERNS.CSI_SEQUENCE, '').replace(ANSI_PATTERNS.OSC_SEQUENCE, '');
-  }
-
-  /**
-   * Parse ANSI codes and convert to xterm.js format.
-   *
-   * Converts ANSI CSI sequences to xterm.js OSC sequences for
-   * true-color support and applies Synthwave theme colors.
-   *
-   * @param text - Text with ANSI escape codes
-   * @returns Parse result with converted text and extracted styles
-   *
-   * @example
-   * ```ts
-   * const result = parser.parse('\x1b[31;1mError\x1b[0m');
-   * // result.text: xterm.js formatted string
-   * // result.styles: [{ fg_color: 31, modifiers: ['bold'] }]
-   * ```
-   */
-  parse(text: string): IAnsiParseResult {
-    const styles: IAnsiStyle[] = [];
-    let converted = text;
-    let styleIndex = 0;
-
-    // Reset state
-    this.reset();
-
-    // Find all CSI sequences
-    const matches = text.matchAll(ANSI_PATTERNS.CSI_SEQUENCE);
-
-    for (const match of matches) {
-      const sequence = match[0];
-
-      // Parse the SGR parameters
-      const params = this.parseSgrParams(sequence);
-
-      // Update state and create style
-      const style = this.applySgrParams(params);
-
-      if (style) {
-        styles.push({ ...style, index: styleIndex++ });
-      }
-
-      // Convert to xterm.js format
-      const xtermSequence = this.convertToXterm(sequence, params);
-      converted = converted.replace(sequence, xtermSequence);
-    }
-
-    return {
-      text: converted,
-      styles,
-    };
-  }
-
-  /**
-   * Get ANSI color code as hex from theme.
-   *
-   * Converts an ANSI color code to its hex color value in the
-   * Synthwave theme.
-   *
-   * @param code - ANSI color code (e.g., 31 for red)
-   * @returns Hex color string (e.g., '#ff4466') or undefined
-   */
-  colorFromAnsi(code: number): string | undefined {
-    if (code >= 40 && code <= 47) {
-      return AnsiColorMapper.bgColor(code);
-    } else if (code >= 100 && code <= 107) {
-      return AnsiColorMapper.bgColor(code);
-    } else {
-      return AnsiColorMapper.fgColor(code);
-    }
-  }
-
-  /**
-   * Reset parser state to defaults.
-   */
-  reset(): void {
-    this.state = {
-      modifiers: new Set<string>(),
-    };
-  }
-
-  /**
-   * Parse SGR (Select Graphic Rendition) parameters from CSI sequence.
-   *
-   * @param sequence - CSI sequence (e.g., '\x1b[31;1m')
-   * @returns Array of parameter numbers
-   * @private
-   */
-  private parseSgrParams(sequence: string): number[] {
-    // Extract parameters between '[' and final character
-    const paramMatch = sequence.match(/\[([0-9;]*)[mM]/);
-    if (!paramMatch) return [];
-
-    const paramString = paramMatch[1];
-    if (!paramString) return [0]; // Default to reset
-
-    return paramString.split(';').map((p) => parseInt(p, 10));
-  }
-
-  /**
-   * Apply SGR parameters to parser state.
-   *
-   * Updates internal state based on SGR parameters and returns
-   * the current style after applying changes.
-   *
-   * @param params - Array of SGR parameter numbers
-   * @returns Current style after applying parameters
-   * @private
-   */
-  private applySgrParams(params: number[]): IAnsiStyle | null {
-    if (params.length === 0 || (params.length === 1 && params[0] === 0)) {
-      // Reset
-      this.reset();
-      return null;
-    }
-
-    for (const param of params) {
-      switch (param) {
-        // Reset
-        case SGR_CODES.RESET:
-        case SGR_CODES.BOLD_OFF:
-        case SGR_CODES.DIM_OFF:
-        case SGR_CODES.ITALIC_OFF:
-        case SGR_CODES.UNDERLINE_OFF:
-        case SGR_CODES.BLINK_OFF:
-        case SGR_CODES.INVERSE_OFF:
-        case SGR_CODES.STRIKETHROUGH_OFF:
-          this.reset();
-          break;
-
-        // Modifiers
-        case SGR_CODES.BOLD:
-          this.state.modifiers.add('bold');
-          break;
-        case SGR_CODES.DIM:
-          this.state.modifiers.add('dim');
-          break;
-        case SGR_CODES.ITALIC:
-          this.state.modifiers.add('italic');
-          break;
-        case SGR_CODES.UNDERLINE:
-          this.state.modifiers.add('underline');
-          break;
-        case SGR_CODES.BLINK_SLOW:
-        case SGR_CODES.BLINK_FAST:
-          this.state.modifiers.add('blink');
-          break;
-        case SGR_CODES.INVERSE:
-          this.state.modifiers.add('inverse');
-          break;
-        case SGR_CODES.HIDDEN:
-          this.state.modifiers.add('hidden');
-          break;
-        case SGR_CODES.STRIKETHROUGH:
-          this.state.modifiers.add('strikethrough');
-          break;
-
-        // Default colors
-        case SGR_CODES.FG_DEFAULT:
-          this.state.fg_color = undefined;
-          break;
-        case SGR_CODES.BG_DEFAULT:
-          this.state.bg_color = undefined;
-          break;
-
-        default:
-          // Color codes (30-37, 40-47, 90-97, 100-107)
-          if (
-            (param >= 30 && param <= 37) ||
-            (param >= 40 && param <= 47) ||
-            (param >= 90 && param <= 97) ||
-            (param >= 100 && param <= 107)
-          ) {
-            if (param >= 40) {
-              // Background color
-              this.state.bg_color = param;
-            } else {
-              // Foreground color
-              this.state.fg_color = param;
-            }
-          }
-          break;
-      }
-    }
-
-    return {
-      fg_color: this.state.fg_color,
-      bg_color: this.state.bg_color,
-      modifiers: Array.from(this.state.modifiers),
-    };
-  }
-
-  /**
-   * Convert ANSI CSI sequence to xterm.js OSC format.
-   *
-   * xterm.js supports OSC sequences for true-color (24-bit) colors.
-   * This converts ANSI 4-bit/8-bit colors to OSC 4/10/11 sequences.
-   *
-   * @param sequence - Original ANSI CSI sequence
-   * @param params - Parsed SGR parameters
-   * @returns xterm.js compatible escape sequence
-   * @private
-   */
-  private convertToXterm(sequence: string, params: number[]): string {
-    // For simple resets and modifiers, keep original
-    if (!params.some((p) => p >= 30 && p <= 47) && !params.some((p) => p >= 90 && p <= 107)) {
-      return sequence;
-    }
-
-    // For color codes, use OSC 4 or 10/11 sequences
-    let result = '';
-
-    for (const param of params) {
-      if ((param >= 30 && param <= 37) || (param >= 90 && param <= 97)) {
-        // Foreground color - use OSC 10
-        const hex = AnsiColorMapper.fgColor(param);
-        if (hex) {
-          result += `\x1b]10;#${hex.slice(1)}\x07`;
-        }
-      } else if ((param >= 40 && param <= 47) || (param >= 100 && param <= 107)) {
-        // Background color - use OSC 11
-        const fgCode = param >= 100 ? param - 10 : param - 10;
-        const hex = AnsiColorMapper.fgColor(fgCode);
-        if (hex) {
-          result += `\x1b]11;#${hex.slice(1)}\x07`;
-        }
-      }
-    }
-
-    // Keep modifiers (bold, underline, etc.)
-    const modifiers = params.filter(
-      (p) =>
-        p === SGR_CODES.BOLD ||
-        p === SGR_CODES.DIM ||
-        p === SGR_CODES.ITALIC ||
-        p === SGR_CODES.UNDERLINE ||
-        p === SGR_CODES.BLINK_SLOW ||
-        p === SGR_CODES.BLINK_FAST ||
-        p === SGR_CODES.INVERSE ||
-        p === SGR_CODES.HIDDEN ||
-        p === SGR_CODES.STRIKETHROUGH
-    );
-
-    if (modifiers.length > 0) {
-      result += `\x1b[${modifiers.join(';')}m`;
-    }
-
-    return result || sequence;
-  }
-
-  /**
-   * Extract all ANSI escape codes from text.
-   *
-   * Returns an array of all ANSI sequences found in the text.
-   *
-   * @param text - Text to extract from
-   * @returns Array of ANSI escape sequences
-   *
-   * @example
-   * ```ts
-   * const codes = AnsiParser.extractCodes('\x1b[31mError\x1b[0m');
-   * // ['\x1b[31m', '\x1b[0m']
-   * ```
-   */
-  static extractCodes(text: string): string[] {
-    const found = text.match(ANSI_PATTERNS.CSI_SEQUENCE);
-    return found ?? [];
-  }
-
-  /**
-   * Count ANSI escape codes in text.
-   *
-   * @param text - Text to count codes in
-   * @returns Number of ANSI escape sequences
-   */
-  static countCodes(text: string): number {
-    return (text.match(ANSI_PATTERNS.CSI_SEQUENCE) ?? []).length;
-  }
-
-  /**
-   * Get visible text length (excluding ANSI codes).
-   *
-   * @param text - Text with potential ANSI codes
-   * @returns Length of visible text only
-   *
-   * @example
-   * ```ts
-   * AnsiParser.visibleLength('\x1b[31mError\x1b[0m'); // 5
-   * ```
-   */
-  static visibleLength(text: string): number {
-    return this.stripAnsi(text).length;
-  }
-}

package/src/react-ui/blocks/Terminal/parsing/ansi/ansi.constants.ts

@@ -1,320 +0,0 @@
-/**
- * ANSI escape code constants for terminal parsing.
- *
- * Contains standard ANSI/VT100 escape sequences for color, styling,
- * and cursor control. Used by AnsiParser to detect and convert
- * ANSI codes to xterm.js compatible format.
- *
- * References:
- * - ANSI/VT100 Control Sequences: https://vt100.net/docs/vt100-ug/chapter3.html
- * - SGR (Select Graphic Rendition): https://en.wikipedia.org/wiki/ANSI_escape_code#SGR_(Select_Graphic_Rendition)_parameters
- *
- * @module components/devenv/terminal/parsing/ansi/constants
- */
-
-/**
- * ANSI escape sequence introducers.
- *
- * Control sequences that introduce ANSI escape codes.
- */
-export const ANSI_INTRODUCERS = {
-  /** CSI (Control Sequence Introducer) - \x1b[ */
-  CSI: '\x1b[',
-
-  /** OSC (Operating System Command) - \x1b] */
-  OSC: '\x1b]',
-
-  /** DCS (Device Control String) - \x1bP */
-  DCS: '\x1bP',
-
-  /** ST (String Terminator) - \x1b\\ */
-  ST: '\x1b\\',
-
-  /** ESC prefix */
-  ESC: '\x1b',
-} as const;
-
-/**
- * ANSI SGR (Select Graphic Rendition) parameter codes.
- *
- * Text styling and color codes following CSI.
- */
-export const SGR_CODES = {
-  /** Reset all attributes */
-  RESET: 0,
-
-  /** Bold/intense */
-  BOLD: 1,
-
-  /** Faint/dim */
-  DIM: 2,
-
-  /** Italic */
-  ITALIC: 3,
-
-  /** Underline */
-  UNDERLINE: 4,
-
-  /** Blink slowly */
-  BLINK_SLOW: 5,
-
-  /** Blink rapidly */
-  BLINK_FAST: 6,
-
-  /** Inverse/reverse video */
-  INVERSE: 7,
-
-  /** Hide/conceal */
-  HIDDEN: 8,
-
-  /** Strikethrough */
-  STRIKETHROUGH: 9,
-
-  /** Default font */
-  FONT_DEFAULT: 10,
-
-  /** Bold off (not widely supported) */
-  BOLD_OFF: 21,
-
-  /** Dim off (not widely supported) */
-  DIM_OFF: 22,
-
-  /** Italic off */
-  ITALIC_OFF: 23,
-
-  /** Underline off */
-  UNDERLINE_OFF: 24,
-
-  /** Blink off */
-  BLINK_OFF: 25,
-
-  /** Inverse off */
-  INVERSE_OFF: 27,
-
-  /** Reveal */
-  REVEAL: 28,
-
-  /** Strikethrough off */
-  STRIKETHROUGH_OFF: 29,
-
-  // Foreground colors (30-37)
-
-  /** Black foreground */
-  FG_BLACK: 30,
-
-  /** Red foreground */
-  FG_RED: 31,
-
-  /** Green foreground */
-  FG_GREEN: 32,
-
-  /** Yellow foreground */
-  FG_YELLOW: 33,
-
-  /** Blue foreground */
-  FG_BLUE: 34,
-
-  /** Magenta foreground */
-  FG_MAGENTA: 35,
-
-  /** Cyan foreground */
-  FG_CYAN: 36,
-
-  /** White foreground */
-  FG_WHITE: 37,
-
-  /** Default foreground color */
-  FG_DEFAULT: 39,
-
-  // Background colors (40-47)
-
-  /** Black background */
-  BG_BLACK: 40,
-
-  /** Red background */
-  BG_RED: 41,
-
-  /** Green background */
-  BG_GREEN: 42,
-
-  /** Yellow background */
-  BG_YELLOW: 43,
-
-  /** Blue background */
-  BG_BLUE: 44,
-
-  /** Magenta background */
-  BG_MAGENTA: 45,
-
-  /** Cyan background */
-  BG_CYAN: 46,
-
-  /** White background */
-  BG_WHITE: 47,
-
-  /** Default background color */
-  BG_DEFAULT: 49,
-
-  // Bright foreground colors (90-97)
-
-  /** Bright black (gray) foreground */
-  FG_BRIGHT_BLACK: 90,
-
-  /** Bright red foreground */
-  FG_BRIGHT_RED: 91,
-
-  /** Bright green foreground */
-  FG_BRIGHT_GREEN: 92,
-
-  /** Bright yellow foreground */
-  FG_BRIGHT_YELLOW: 93,
-
-  /** Bright blue foreground */
-  FG_BRIGHT_BLUE: 94,
-
-  /** Bright magenta foreground */
-  FG_BRIGHT_MAGENTA: 95,
-
-  /** Bright cyan foreground */
-  FG_BRIGHT_CYAN: 96,
-
-  /** Bright white foreground */
-  FG_BRIGHT_WHITE: 97,
-
-  // Bright background colors (100-107)
-
-  /** Bright black (gray) background */
-  BG_BRIGHT_BLACK: 100,
-
-  /** Bright red background */
-  BG_BRIGHT_RED: 101,
-
-  /** Bright green background */
-  BG_BRIGHT_GREEN: 102,
-
-  /** Bright yellow background */
-  BG_BRIGHT_YELLOW: 103,
-
-  /** Bright blue background */
-  BG_BRIGHT_BLUE: 104,
-
-  /** Bright magenta background */
-  BG_BRIGHT_MAGENTA: 105,
-
-  /** Bright cyan background */
-  BG_BRIGHT_CYAN: 106,
-
-  /** Bright white background */
-  BG_BRIGHT_WHITE: 107,
-} as const;
-
-/**
- * ANSI regex patterns for detection and parsing.
- */
-export const ANSI_PATTERNS = {
-  /** CSI sequence: \x1b[ followed by parameters and final character */
-  CSI_SEQUENCE: /\x1b\[[0-9;]*[a-zA-Z]/g,
-
-  /** OSC sequence: \x1b] followed by content and ST */
-  OSC_SEQUENCE: /\x1b\][^\x07\x1b\\]*(?:\x07|\x1b\\)/g,
-
-  /** SGR parameters (numeric codes within CSI) */
-  SGR_PARAMS: /[0-9]+/g,
-
-  /** Complete ANSI escape sequence */
-  ANSI_ESCAPE: /\x1b\[[0-9;]*[mGaKHF]/g,
-
-  /** Text attributes (bold, dim, italic, underline) */
-  TEXT_ATTRIBUTES: /[0-9]/,
-
-  /** Color codes (30-37, 40-47, 90-97, 100-107) */
-  COLOR_CODES: /[34][0-7]|10[0-7]|[34][0-7]/g,
-} as const;
-
-/**
- * ANSI to xterm.js color mapping.
- *
- * Maps standard ANSI color codes (0-15) to xterm.js color indices.
- */
-export const ANSI_COLOR_MAP: Record<number, number> = {
-  // Standard colors (0-7)
-  0: 0,   // Black
-  1: 1,   // Red
-  2: 2,   // Green
-  3: 3,   // Yellow
-  4: 4,   // Blue
-  5: 5,   // Magenta
-  6: 6,   // Cyan
-  7: 7,   // White
-
-  // Bright colors (8-15)
-  8: 8,   // Bright Black
-  9: 9,   // Bright Red
-  10: 10, // Bright Green
-  11: 11, // Bright Yellow
-  12: 12, // Bright Blue
-  13: 13, // Bright Magenta
-  14: 14, // Bright Cyan
-  15: 15, // Bright White
-} as const;
-
-/**
- * ANSI text modifier names.
- *
- * Maps SGR modifier codes to human-readable names.
- */
-export const ANSI_MODIFIERS: Record<number, string> = {
-  1: 'bold',
-  2: 'dim',
-  3: 'italic',
-  4: 'underline',
-  5: 'blink',
-  7: 'inverse',
-  8: 'hidden',
-  9: 'strikethrough',
-} as const;
-
-/**
- * Synthwave theme ANSI to hex color mapping.
- *
- * Maps ANSI color codes to Synthwave Industrial Dark theme colors
- * from Terminal.theme.ts. Used for colorizing logs with proper
- * design system colors.
- */
-export const SYNTHWAVE_ANSI_COLORS: Record<number, string> = {
-  // Standard colors
-  30: '#1a1a2e',  // Black (FG_BLACK)
-  31: '#ff4466',  // Red (FG_RED)
-  32: '#44ffaa',  // Green (FG_GREEN)
-  33: '#ffcc00',  // Yellow (FG_YELLOW)
-  34: '#00d9ff',  // Blue (FG_BLUE)
-  35: '#D40C67',  // Magenta (FG_MAGENTA)
-  36: '#00d9ff',  // Cyan (FG_CYAN)
-  37: '#e8e8ec',  // White (FG_WHITE)
-
-  // Bright colors
-  90: '#2d2d44',  // Bright Black
-  91: '#ff6b6b',  // Bright Red
-  92: '#66ffcc',  // Bright Green
-  93: '#ffdd33',  // Bright Yellow
-  94: '#33e0ff',  // Bright Blue
-  95: '#ff3399',  // Bright Magenta
-  96: '#33e0ff',  // Bright Cyan
-  97: '#ffffff',  // Bright White
-} as const;
-
-/**
- * Log level to ANSI color mapping.
- *
- * Maps log levels to their corresponding ANSI color codes for
- * terminal display with proper colorization.
- */
-export const LOG_LEVEL_ANSI_COLORS: Record<string, number> = {
-  trace: 90,    // Gray (bright black)
-  debug: 36,    // Cyan
-  info: 34,     // Blue
-  warn: 33,     // Yellow
-  error: 31,    // Red
-  fatal: 35,    // Magenta
-  unknown: 37,  // White
-} as const;