@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/blocks/Terminal/parsing/TableParser.ts

@@ -1,348 +0,0 @@
-/**
- * Table parser for box-drawing character tables.
- *
- * Detects and parses tables created with box-drawing characters
- * (├─│└┌) commonly found in CLI output.
- *
- * @module components/devenv/terminal/parsing/TableParser
- */
-
-import type { IParsedLogEntry } from './LogParser.types';
-
-/**
- * Box-drawing characters used for table borders.
- * Unicode range: U+2500-U+257F
- */
-export const TABLE_CHARS = [
-  '─', '│', '┌', '┐', '└', '┘',
-  '├', '┤', '┬', '┴', '┼',
-  '═', '║', '╔', '╗', '╚', '╝',
-  '╠', '╣', '╦', '╩', '╬',
-  '╒', '╓', '╕', '╖', '╘', '╙',
-  '╛', '╜', '╢', '╡', '╤', '╧',
-  '╟', '╞', '╡', '╢', '╪', '╫',
-] as const;
-
-/**
- * Table row type.
- */
-export type TTableRowType = 'top' | 'header' | 'separator' | 'data' | 'bottom' | 'unknown';
-
-/**
- * Parsed table row.
- */
-export interface ITableRow {
-  /** Raw line */
-  raw: string;
-
-  /** Row type */
-  type: TTableRowType;
-
-  /** Cells extracted from the row (for data rows) */
-  cells?: string[];
-
-  /** Line number */
-  lineNumber: number;
-}
-
-/**
- * Parsed table data.
- */
-export interface ITableData {
-  /** All rows in the table */
-  rows: ITableRow[];
-
-  /** Number of columns */
-  columnCount: number;
-
-  /** Header row if present */
-  headers?: string[];
-
-  /** Data rows (excluding borders) */
-  dataRows: string[][];
-
-  /** Line number of first row */
-  startLine: number;
-
-  /** Line number of last row */
-  endLine: number;
-}
-
-/**
- * Table parser class.
- *
- * Detects and parses tables created with box-drawing characters.
- * Groups consecutive table lines and extracts cell data.
- *
- * @example
- * ```ts
- * const parser = new TableParser();
- * const isTable = parser.isTableLine('├──────────┼──────────┤');
- * const table = parser.parseTable(lines);
- * ```
- */
-export class TableParser {
-  /** Minimum box-drawing characters to consider a line a table */
-  private readonly MIN_TABLE_CHARS = 2;
-
-  /**
-   * Check if a line is a table line.
-   *
-   * A line is considered a table line if it contains multiple
-   * box-drawing characters.
-   *
-   * @param line - Line to check
-   * @returns true if line is part of a table
-   */
-  isTableLine(line: string): boolean {
-    let count = 0;
-
-    for (const char of TABLE_CHARS) {
-      if (line.includes(char)) {
-        count++;
-        if (count >= this.MIN_TABLE_CHARS) {
-          return true;
-        }
-      }
-    }
-
-    return count >= this.MIN_TABLE_CHARS;
-  }
-
-  /**
-   * Determine the type of a table row.
-   *
-   * @param line - Table row line
-   * @returns Row type
-   */
-  getRowType(line: string): TTableRowType {
-    const trimmed = line.trim();
-
-    // Top border: starts with ┌ or ╒
-    if (/^[┌╒]/.test(trimmed)) {
-      return 'top';
-    }
-
-    // Bottom border: starts with └ or ╘
-    if (/^[└╘]/.test(trimmed)) {
-      return 'bottom';
-    }
-
-    // Separator: contains ├, ┼, ┬, ┴, ╪, ╤, ╧, etc.
-    if (/[├┼┬┴╪╤╧╠╦╩╬]/.test(trimmed)) {
-      return 'separator';
-    }
-
-    // Header separator: usually has ═ or ─
-    if (/[═]/.test(trimmed) && /[│║]/.test(trimmed)) {
-      return 'separator';
-    }
-
-    // Data or header row: contains │ with text
-    if (/[│║]/.test(trimmed) && /[a-zA-Z0-9]/.test(trimmed)) {
-      // Check if it looks like a header (all caps or specific patterns)
-      const content = trimmed.replace(/[│║═─┼┬┴├╪╤╧]/g, ' ').trim();
-      if (content.length > 0 && content === content.toUpperCase() && content.length < 50) {
-        return 'header';
-      }
-      return 'data';
-    }
-
-    return 'unknown';
-  }
-
-  /**
-   * Extract cells from a table row.
-   *
-   * Splits the row by │ characters and trims each cell.
-   *
-   * @param line - Table row line
-   * @returns Array of cell contents
-   */
-  extractCells(line: string): string[] {
-    // Remove border characters and split by │
-    const cleaned = line.replace(/^[│║]|[│║]$/g, '');
-    const cells = cleaned.split(/[│║]/);
-
-    return cells.map((cell) => cell.trim()).filter((cell) => cell.length > 0);
-  }
-
-  /**
-   * Parse a complete table from an array of lines.
-   *
-   * Groups consecutive table lines and extracts structured data.
-   *
-   * @param lines - Array of table lines
-   * @param startLine - Starting line number
-   * @returns Parsed table data
-   */
-  parseTable(lines: string[], startLine: number): ITableData {
-    const rows: ITableRow[] = [];
-    const dataRows: string[][] = [];
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const type = this.getRowType(line);
-      const cells = type === 'data' || type === 'header' ? this.extractCells(line) : undefined;
-
-      const row: ITableRow = {
-        raw: line,
-        type,
-        cells,
-        lineNumber: startLine + i,
-      };
-
-      rows.push(row);
-
-      if (cells) {
-        dataRows.push(cells);
-      }
-    }
-
-    // Determine column count from the widest row
-    const columnCount = Math.max(...dataRows.map((r) => r.length), 1);
-
-    // Extract headers if present (first data row that looks like headers)
-    const headerRow = rows.find((r) => r.type === 'header');
-    const headers = headerRow?.cells;
-
-    return {
-      rows,
-      columnCount,
-      headers,
-      dataRows,
-      startLine,
-      endLine: startLine + lines.length - 1,
-    };
-  }
-
-  /**
-   * Parse table entries from a log stream.
-   *
-   * Scans through lines, grouping table lines into entries.
-   *
-   * @param lines - Array of log lines
-   * @param startLine - Starting line number
-   * @returns Array of parsed log entries
-   */
-  parseTableEntries(lines: string[], startLine: number): IParsedLogEntry[] {
-    const entries: IParsedLogEntry[] = [];
-    let inTable = false;
-    let tableStartLine = 0;
-    const tableLines: string[] = [];
-
-    for (let i = 0; i < lines.length; i++) {
-      const line = lines[i];
-      const isTable = this.isTableLine(line);
-
-      if (isTable && !inTable) {
-        // Start of a new table
-        inTable = true;
-        tableStartLine = startLine + i;
-        tableLines.push(line);
-      } else if (isTable && inTable) {
-        // Continuation of table
-        tableLines.push(line);
-      } else if (!isTable && inTable) {
-        // End of table - create entry
-        const tableData = this.parseTable(tableLines, tableStartLine);
-
-        entries.push({
-          raw: tableLines.join('\n'),
-          formatted: tableLines.join('\n'),
-          level: 'info',
-          line_number: tableStartLine,
-          is_stderr: false,
-          content_type: 'table',
-          table_data: tableData,
-          is_continuation: false,
-        });
-
-        // Mark continuation lines
-        for (let j = 1; j < tableLines.length; j++) {
-          entries.push({
-            raw: tableLines[j],
-            formatted: tableLines[j],
-            level: 'info',
-            line_number: tableStartLine + j,
-            is_stderr: false,
-            content_type: 'table',
-            is_continuation: true,
-            parent_line_number: tableStartLine,
-          });
-        }
-
-        // Reset state
-        inTable = false;
-        tableLines.length = 0;
-
-        // Process current line as normal entry (will be handled by caller)
-        // Don't add non-table line here - let other parsers handle it
-      } else {
-        // Not a table line, not in table - skip (handled by other parsers)
-      }
-    }
-
-    // Handle table that ends at the end of the batch
-    if (tableLines.length > 0) {
-      const tableData = this.parseTable(tableLines, tableStartLine);
-
-      entries.push({
-        raw: tableLines.join('\n'),
-        formatted: tableLines.join('\n'),
-        level: 'info',
-        line_number: tableStartLine,
-        is_stderr: false,
-        content_type: 'table',
-        table_data: tableData,
-        is_continuation: false,
-      });
-
-      for (let j = 1; j < tableLines.length; j++) {
-        entries.push({
-          raw: tableLines[j],
-          formatted: tableLines[j],
-          level: 'info',
-          line_number: tableStartLine + j,
-          is_stderr: false,
-          content_type: 'table',
-          is_continuation: true,
-          parent_line_number: tableStartLine,
-        });
-      }
-    }
-
-    return entries;
-  }
-
-  /**
-   * Get CSS class for a table row type.
-   *
-   * @param type - Row type
-   * @returns CSS class string
-   */
-  getRowClass(type: TTableRowType): string {
-    switch (type) {
-      case 'top':
-      case 'bottom':
-        return 'text-gray-500';
-      case 'separator':
-        return 'text-gray-600';
-      case 'header':
-        return 'font-semibold text-foreground';
-      case 'data':
-        return 'text-foreground';
-      default:
-        return 'text-foreground';
-    }
-  }
-}
-
-/**
- * Create a new table parser instance.
- *
- * @returns New TableParser instance
- */
-export function createTableParser(): TableParser {
-  return new TableParser();
-}

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

@@ -1,251 +0,0 @@
-/**
- * ANSI color mapper for Synthwave theme integration.
- *
- * Maps ANSI color codes to Synthwave Industrial Dark theme colors
- * from Terminal.theme.ts. Provides utilities for converting between
- * different color representations and applying theme-aware coloring.
- *
- * @module components/devenv/terminal/parsing/ansi/mapper
- */
-
-import { SYNTHWAVE_ANSI_COLORS } from './ansi.constants';
-import type { IAnsiStyle } from '../LogParser.types';
-
-/**
- * ANSI color mapper class.
- *
- * Provides static methods for mapping ANSI color codes to
- * Synthwave theme colors and converting between color formats.
- */
-export class AnsiColorMapper {
-  /**
-   * Get hex color for ANSI foreground color code.
-   *
-   * Converts ANSI SGR foreground color codes (30-37, 90-97) to
-   * their corresponding hex colors in the Synthwave theme.
-   *
-   * @param code - ANSI color code (e.g., 31 for red, 32 for green)
-   * @returns Hex color string (e.g., '#ff4466') or undefined if unknown
-   *
-   * @example
-   * ```ts
-   * const red = AnsiColorMapper.fgColor(31); // '#ff4466'
-   * const green = AnsiColorMapper.fgColor(32); // '#44ffaa'
-   * ```
-   */
-  static fgColor(code: number): string | undefined {
-    return SYNTHWAVE_ANSI_COLORS[code];
-  }
-
-  /**
-   * Get hex color for ANSI background color code.
-   *
-   * Converts ANSI SGR background color codes (40-47, 100-107) to
-   * their corresponding hex colors by converting to foreground
-   * code and looking up in theme.
-   *
-   * @param code - ANSI background color code (e.g., 41 for red bg)
-   * @returns Hex color string or undefined if unknown
-   *
-   * @example
-   * ```ts
-   * const redBg = AnsiColorMapper.bgColor(41); // '#ff4466'
-   * ```
-   */
-  static bgColor(code: number): string | undefined {
-    // Convert background code (40-47, 100-107) to foreground (30-37, 90-97)
-    const fgCode = code >= 100 ? code - 10 : code - 10;
-    return SYNTHWAVE_ANSI_COLORS[fgCode];
-  }
-
-  /**
-   * Check if color code is bright variant.
-   *
-   * @param code - ANSI color code
-   * @returns true if code is bright (90-97 or 100-107)
-   */
-  static isBright(code: number): boolean {
-    return (code >= 90 && code <= 97) || (code >= 100 && code <= 107);
-  }
-
-  /**
-   * Check if color code is background color.
-   *
-   * @param code - ANSI color code
-   * @returns true if code is background (40-47 or 100-107)
-   */
-  static isBackground(code: number): boolean {
-    return (code >= 40 && code <= 47) || (code >= 100 && code <= 107);
-  }
-
-  /**
-   * Convert ANSI style to hex color pair.
-   *
-   * Takes a parsed ANSI style and returns foreground and background
-   * hex colors for use in xterm.js or CSS styling.
-   *
-   * @param style - Parsed ANSI style
-   * @returns Object with fg and bg hex colors (undefined if not set)
-   *
-   * @example
-   * ```ts
-   * const colors = AnsiColorMapper.styleToHex({
-   *   fg_color: 31,
-   *   bg_color: 44,
-   *   modifiers: ['bold']
-   * });
-   * // { fg: '#ff4466', bg: '#00d9ff' }
-   * ```
-   */
-  static styleToHex(style: IAnsiStyle): { fg?: string; bg?: string } {
-    const result: { fg?: string; bg?: string } = {};
-
-    if (style.fg_color !== undefined) {
-      result.fg = this.fgColor(style.fg_color);
-    }
-
-    if (style.bg_color !== undefined) {
-      result.bg = this.bgColor(style.bg_color);
-    }
-
-    return result;
-  }
-
-  /**
-   * Convert hex color to xterm.js color index.
-   *
-   * xterm.js uses a 256-color palette. This method maps Synthwave
-   * hex colors to the closest xterm.js color index.
-   *
-   * @param hex - Hex color string (e.g., '#ff4466')
-   * @returns xterm.js color index (0-255) or closest match
-   */
-  static hexToXtermColor(hex: string): number {
-    // Map Synthwave colors to xterm.js palette indices
-    const colorMap: Record<string, number> = {
-      '#1a1a2e': 0,    // Black
-      '#ff4466': 197,  // Red (closest)
-      '#44ffaa': 84,   // Green (closest)
-      '#ffcc00': 226,  // Yellow
-      '#00d9ff': 87,   // Cyan
-      '#D40C67': 198,  // Magenta (closest)
-      '#e8e8ec': 255,  // White
-      '#2d2d44': 8,    // Bright Black
-      '#ff6b6b': 203,  // Bright Red
-      '#66ffcc': 86,   // Bright Green
-      '#ffdd33': 227,  // Bright Yellow
-      '#33e0ff': 117,  // Bright Cyan
-      '#ff3399': 205,  // Bright Magenta
-      '#ffffff': 15,   // Bright White
-    };
-
-    // Normalize hex
-    const normalized = hex.toLowerCase();
-    return colorMap[normalized] ?? 7; // Default to white
-  }
-
-  /**
-   * Get log level color as hex.
-   *
-   * Returns the Synthwave theme color for a given log level.
-   *
-   * @param level - Log level
-   * @returns Hex color string for the log level
-   *
-   * @example
-   * ```ts
-   * const errorColor = AnsiColorMapper.logLevelColor('error'); // '#ff4466'
-   * const infoColor = AnsiColorMapper.logLevelColor('info'); // '#00d9ff'
-   * ```
-   */
-  static logLevelColor(level: string): string {
-    const levelColors: Record<string, string> = {
-      trace: '#8b9bb4',    // Gray (hsl(240, 10%, 50%))
-      debug: '#00d9ff',    // Cyan (hsl(190, 100%, 50%))
-      info: '#4db8ff',     // Blue (hsl(210, 100%, 60%))
-      warn: '#ffcc00',     // Yellow (hsl(45, 100%, 50%))
-      error: '#ff4466',    // Red (hsl(350, 100%, 63%))
-      fatal: '#D40C67',    // Magenta (hsl(330, 85%, 43%))
-      unknown: '#e8e8ec',  // White
-    };
-
-    return levelColors[level] ?? levelColors.unknown;
-  }
-
-  /**
-   * Get log level background color (semi-transparent).
-   *
-   * Returns the background color for log level badges with
-   * transparency for overlay effects.
-   *
-   * @param level - Log level
-   * @returns RGBA color string for background
-   *
-   * @example
-   * ```ts
-   * const errorBg = AnsiColorMapper.logLevelBgColor('error'); // 'rgba(255, 68, 102, 0.1)'
-   * ```
-   */
-  static logLevelBgColor(level: string): string {
-    const hex = this.logLevelColor(level);
-    // Convert hex to rgba with 10% opacity
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r}, ${g}, ${b}, 0.1)`;
-  }
-
-  /**
-   * Create xterm.js color sequence from hex.
-   *
-   * Generates xterm.js escape sequence for setting text color
-   * from a hex color value.
-   *
-   * @param hex - Hex color string
-   * @param isBackground - true for background color, false for foreground
-   * @returns xterm.js escape sequence
-   *
-   * @example
-   * ```ts
-   * const seq = AnsiColorMapper.xtermColorSequence('#ff4466', false);
-   * // '\x1b]4;196;#ff4466\x07' (OSC 4 sequence for true color)
-   * ```
-   */
-  static xtermColorSequence(hex: string, isBackground = false): string {
-    const prefix = isBackground ? '4' : '10';
-    return `\x1b]${prefix};#${hex.slice(1)}\x07`;
-  }
-
-  /**
-   * Convert RGB values to hex color.
-   *
-   * @param r - Red value (0-255)
-   * @param g - Green value (0-255)
-   * @param b - Blue value (0-255)
-   * @returns Hex color string (e.g., '#ff4466')
-   */
-  static rgbToHex(r: number, g: number, b: number): string {
-    const toHex = (n: number): string => {
-      const hex = Math.round(Math.min(255, Math.max(0, n))).toString(16);
-      return hex.length === 1 ? '0' + hex : hex;
-    };
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-  }
-
-  /**
-   * Convert hex color to RGB values.
-   *
-   * @param hex - Hex color string
-   * @returns Object with r, g, b values (0-255)
-   */
-  static hexToRgb(hex: string): { r: number; g: number; b: number } {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return result
-      ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16),
-        }
-      : { r: 255, g: 255, b: 255 };
-  }
-}