@mks2508/mks-ui 0.3.1 → 0.4.0

package/dist/react-ui/blocks/Terminal/parsing/TableParser.js

@@ -0,0 +1,245 @@
+//#region src/react-ui/blocks/Terminal/parsing/TableParser.ts
+/**
+* Box-drawing characters used for table borders.
+* Unicode range: U+2500-U+257F
+*/
+const TABLE_CHARS = [
+	"─",
+	"│",
+	"┌",
+	"┐",
+	"└",
+	"┘",
+	"├",
+	"┤",
+	"┬",
+	"┴",
+	"┼",
+	"═",
+	"║",
+	"╔",
+	"╗",
+	"╚",
+	"╝",
+	"╠",
+	"╣",
+	"╦",
+	"╩",
+	"╬",
+	"╒",
+	"╓",
+	"╕",
+	"╖",
+	"╘",
+	"╙",
+	"╛",
+	"╜",
+	"╢",
+	"╡",
+	"╤",
+	"╧",
+	"╟",
+	"╞",
+	"╡",
+	"╢",
+	"╪",
+	"╫"
+];
+/**
+* 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);
+* ```
+*/
+var TableParser = class {
+	/** Minimum box-drawing characters to consider a line a table */
+	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) {
+		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) {
+		const trimmed = line.trim();
+		if (/^[┌╒]/.test(trimmed)) return "top";
+		if (/^[└╘]/.test(trimmed)) return "bottom";
+		if (/[├┼┬┴╪╤╧╠╦╩╬]/.test(trimmed)) return "separator";
+		if (/[═]/.test(trimmed) && /[│║]/.test(trimmed)) return "separator";
+		if (/[│║]/.test(trimmed) && /[a-zA-Z0-9]/.test(trimmed)) {
+			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) {
+		return line.replace(/^[│║]|[│║]$/g, "").split(/[│║]/).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, startLine) {
+		const rows = [];
+		const dataRows = [];
+		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) : void 0;
+			const row = {
+				raw: line,
+				type,
+				cells,
+				lineNumber: startLine + i
+			};
+			rows.push(row);
+			if (cells) dataRows.push(cells);
+		}
+		return {
+			rows,
+			columnCount: Math.max(...dataRows.map((r) => r.length), 1),
+			headers: rows.find((r) => r.type === "header")?.cells,
+			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, startLine) {
+		const entries = [];
+		let inTable = false;
+		let tableStartLine = 0;
+		const tableLines = [];
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			const isTable = this.isTableLine(line);
+			if (isTable && !inTable) {
+				inTable = true;
+				tableStartLine = startLine + i;
+				tableLines.push(line);
+			} else if (isTable && inTable) tableLines.push(line);
+			else if (!isTable && inTable) {
+				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
+				});
+				inTable = false;
+				tableLines.length = 0;
+			}
+		}
+		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) {
+		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
+*/
+function createTableParser() {
+	return new TableParser();
+}
+
+//#endregion
+export { TABLE_CHARS, TableParser, createTableParser };

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

@@ -0,0 +1,165 @@
+/**
+ * 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 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 declare 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    };
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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?: boolean): string;
+    /**
+     * 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;
+    /**
+     * 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;
+    };
+}
+//# sourceMappingURL=AnsiColorMapper.d.ts.map

package/dist/react-ui/blocks/Terminal/parsing/ansi/AnsiColorMapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnsiColorMapper.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/parsing/ansi/AnsiColorMapper.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;GAKG;AACH,qBAAa,eAAe;IAC1B;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAIhD;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAMhD;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAItC;;;;;OAKG;IACH,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAI1C;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE;IAclE;;;;;;;;OAQG;IACH,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAwB3C;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAc3C;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAS7C;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,UAAQ,GAAG,MAAM;IAKpE;;;;;;;OAOG;IACH,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM;IAQxD;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;CAUlE"}

package/dist/react-ui/blocks/Terminal/parsing/ansi/AnsiColorMapper.js

@@ -0,0 +1,225 @@
+import { SYNTHWAVE_ANSI_COLORS } from "./ansi.constants.js";
+
+//#region src/react-ui/blocks/Terminal/parsing/ansi/AnsiColorMapper.ts
+/**
+* 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
+*/
+/**
+* ANSI color mapper class.
+*
+* Provides static methods for mapping ANSI color codes to
+* Synthwave theme colors and converting between color formats.
+*/
+var AnsiColorMapper = class {
+	/**
+	* 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) {
+		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) {
+		return SYNTHWAVE_ANSI_COLORS[code >= 100 ? code - 10 : code - 10];
+	}
+	/**
+	* 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) {
+		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) {
+		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) {
+		const result = {};
+		if (style.fg_color !== void 0) result.fg = this.fgColor(style.fg_color);
+		if (style.bg_color !== void 0) 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) {
+		return {
+			"#1a1a2e": 0,
+			"#ff4466": 197,
+			"#44ffaa": 84,
+			"#ffcc00": 226,
+			"#00d9ff": 87,
+			"#D40C67": 198,
+			"#e8e8ec": 255,
+			"#2d2d44": 8,
+			"#ff6b6b": 203,
+			"#66ffcc": 86,
+			"#ffdd33": 227,
+			"#33e0ff": 117,
+			"#ff3399": 205,
+			"#ffffff": 15
+		}[hex.toLowerCase()] ?? 7;
+	}
+	/**
+	* 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) {
+		const levelColors = {
+			trace: "#8b9bb4",
+			debug: "#00d9ff",
+			info: "#4db8ff",
+			warn: "#ffcc00",
+			error: "#ff4466",
+			fatal: "#D40C67",
+			unknown: "#e8e8ec"
+		};
+		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) {
+		const hex = this.logLevelColor(level);
+		return `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, 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, isBackground = false) {
+		return `\x1b]${isBackground ? "4" : "10"};#${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, g, b) {
+		const toHex = (n) => {
+			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) {
+		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
+		};
+	}
+};
+
+//#endregion
+export { AnsiColorMapper };