@mks2508/mks-ui 0.3.1 → 0.4.0

package/dist/react-ui/blocks/Terminal/components/SpecializedSyntaxHighlighter.js

@@ -0,0 +1,139 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { HttpLogParser } from "../parsing/HttpLogParser.js";
+import { TABLE_CHARS, TableParser } from "../parsing/TableParser.js";
+import { HighlightedJson } from "./SyntaxHighlight.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/SpecializedSyntaxHighlighter.tsx
+/**
+* Specialized syntax highlighter for different log content types.
+*
+* Provides syntax highlighting for HTTP requests, tables, and JSON
+* with appropriate styling for each type.
+*
+* @module components/devenv/terminal/SpecializedSyntaxHighlighter
+*/
+const httpParser = new HttpLogParser();
+const tableParser = new TableParser();
+/**
+* Specialized syntax highlighter component.
+*
+* Applies appropriate highlighting based on content type:
+* - HTTP: pink method, cyan path
+* - JSON: structured syntax highlighting
+* - Table: borders in gray, content in colors
+* - Plain: default highlighting
+*
+* @example
+* ```tsx
+* <SpecializedSyntaxHighlighter
+*   contentType="http"
+*   httpMethod="GET"
+*   httpPath="/api/endpoint"
+*   text="GET /api/endpoint {"
+* />
+* ```
+*/
+function SpecializedSyntaxHighlighter({ contentType = "plain", httpMethod: _httpMethod, httpPath: _httpPath, tableData: _tableData, jsonData, text, className }) {
+	if (contentType === "http") return /* @__PURE__ */ jsx(HttpHighlighter, {
+		text,
+		className
+	});
+	if (contentType === "json" && jsonData) return /* @__PURE__ */ jsx("div", {
+		className: cn("font-mono text-xs", className),
+		children: /* @__PURE__ */ jsx(HighlightedJson, { json: jsonData })
+	});
+	if (contentType === "table") return /* @__PURE__ */ jsx(TableHighlighter, {
+		text,
+		className
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("font-mono text-sm", className),
+		children: text
+	});
+}
+/**
+* HTTP request syntax highlighter.
+*
+* Highlights HTTP method (pink) and path (cyan).
+*/
+function HttpHighlighter({ text, className }) {
+	const parts = httpParser.highlightLine(text);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("font-mono text-sm", className),
+		children: parts.map((part, i) => /* @__PURE__ */ jsx("span", {
+			className: part.className,
+			children: part.text
+		}, i))
+	});
+}
+/**
+* Table syntax highlighter.
+*
+* Renders detected tables as actual styled HTML tables
+* with header detection, alternating rows, and proper borders.
+* Falls back to box-drawing character highlighting.
+*/
+function TableHighlighter({ text, className }) {
+	const lines = text.split("\n").filter((l) => l.trim().length > 0);
+	const { headers, dataRows } = tableParser.parseTable(lines, 0);
+	if (dataRows.length > 0 && (headers || dataRows.length > 1)) {
+		const displayHeaders = headers || (dataRows.length > 1 ? dataRows[0] : void 0);
+		const displayRows = headers ? dataRows.filter((r) => r !== headers) : dataRows.slice(displayHeaders ? 1 : 0);
+		return /* @__PURE__ */ jsx("div", {
+			className: cn("my-1 overflow-x-auto rounded-md border border-border/20", className),
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full font-mono text-xs border-collapse",
+				children: [displayHeaders && /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+					className: "bg-muted/30 border-b border-border/30",
+					children: displayHeaders.map((header, i) => /* @__PURE__ */ jsx("th", {
+						className: "px-3 py-1.5 text-left text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80",
+						children: header
+					}, i))
+				}) }), /* @__PURE__ */ jsx("tbody", { children: displayRows.map((row, i) => /* @__PURE__ */ jsx("tr", {
+					className: cn("border-b border-border/10 transition-colors hover:bg-white/[0.04]", i % 2 === 0 ? "bg-transparent" : "bg-white/[0.02]"),
+					children: row.map((cell, j) => /* @__PURE__ */ jsx("td", {
+						className: "px-3 py-1 text-foreground/85 whitespace-nowrap",
+						children: cell
+					}, j))
+				}, i)) })]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("font-mono text-xs", className),
+		children: lines.map((line, i) => {
+			const rowType = tableParser.getRowType(line);
+			return /* @__PURE__ */ jsx("div", {
+				className: tableParser.getRowClass(rowType),
+				children: /* @__PURE__ */ jsx(TableRowLine, { line })
+			}, i);
+		})
+	});
+}
+/**
+* Individual table row with box-drawing character highlighting.
+*/
+function TableRowLine({ line }) {
+	const parts = [];
+	let lastIndex = 0;
+	for (let i = 0; i < line.length; i++) {
+		const char = line[i];
+		if (TABLE_CHARS.includes(char)) {
+			if (i > lastIndex) parts.push(/* @__PURE__ */ jsx("span", { children: line.slice(lastIndex, i) }, lastIndex));
+			parts.push(/* @__PURE__ */ jsx("span", {
+				className: "text-border/40",
+				children: char
+			}, i));
+			lastIndex = i + 1;
+		}
+	}
+	if (lastIndex < line.length) parts.push(/* @__PURE__ */ jsx("span", { children: line.slice(lastIndex) }, lastIndex));
+	if (parts.length === 0) return /* @__PURE__ */ jsx("span", { children: line });
+	return /* @__PURE__ */ jsx(Fragment, { children: parts });
+}
+
+//#endregion
+export { SpecializedSyntaxHighlighter };

package/dist/react-ui/blocks/Terminal/components/SyntaxHighlight.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Syntax highlighting for log messages (React spans).
+ *
+ * Applies color highlighting to specific elements within log messages
+ * using React span elements with Tailwind CSS classes.
+ *
+ * IMPORTANT: Only highlights plain text - skips lines with existing ANSI codes
+ * to prevent mixing codes and creating visual artifacts.
+ *
+ * Features LRU cache to avoid re-parsing identical text.
+ *
+ * @module components/devenv/terminal/SyntaxHighlight
+ */
+/**
+ * Clear the highlight cache (useful for memory management).
+ */
+export declare function clearHighlightCache(): void;
+/**
+ * Props for SyntaxHighlightedText component.
+ */
+export interface ISyntaxHighlightedTextProps {
+    /** Text to highlight */
+    text: string;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * Syntax highlighted text component.
+ *
+ * Applies syntax highlighting to plain text messages.
+ * Strips ANSI codes before highlighting to prevent visual artifacts
+ * from mixed escape sequences.
+ *
+ * @example
+ * ```tsx
+ * <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
+ * ```
+ */
+export declare function SyntaxHighlightedText({ text, className }: ISyntaxHighlightedTextProps): React.JSX.Element;
+/**
+ * Props for HighlightedJson component.
+ */
+export interface IHighlightedJsonProps {
+    /** JSON object to highlight */
+    json: Record<string, unknown>;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * Highlighted JSON component.
+ *
+ * Displays JSON with syntax highlighting and proper indentation.
+ *
+ * @example
+ * ```tsx
+ * <HighlightedJson json={{ filter: {}, name: "test" }} />
+ * ```
+ */
+export declare function HighlightedJson({ json, className }: IHighlightedJsonProps): React.JSX.Element;
+//# sourceMappingURL=SyntaxHighlight.d.ts.map

package/dist/react-ui/blocks/Terminal/components/SyntaxHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAiDH;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAE1C;AAiBD;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAezG;AA0ID;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmB7F"}

package/dist/react-ui/blocks/Terminal/components/SyntaxHighlight.js

@@ -0,0 +1,352 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx
+/**
+* Syntax highlighting for log messages (React spans).
+*
+* Applies color highlighting to specific elements within log messages
+* using React span elements with Tailwind CSS classes.
+*
+* IMPORTANT: Only highlights plain text - skips lines with existing ANSI codes
+* to prevent mixing codes and creating visual artifacts.
+*
+* Features LRU cache to avoid re-parsing identical text.
+*
+* @module components/devenv/terminal/SyntaxHighlight
+*/
+/**
+* LRU cache for syntax highlighting results.
+* Avoids re-parsing identical text on every render.
+*/
+const highlightCache = /* @__PURE__ */ new Map();
+const MAX_CACHE_SIZE = 1e3;
+/**
+* Strip ANSI escape codes from text.
+*
+* @param text - Text with ANSI codes
+* @returns Text without ANSI codes
+*/
+function stripAnsiCodes(text) {
+	return text.replace(/\x1b\[[0-9;]*[mGKH]/g, "").replace(/\x1b\][^\x07\x1b\\]*[\x07\x1b\\]/g, "").replace(/\x1b\\/g, "");
+}
+/**
+* Get cached highlighted text or compute and cache it.
+*/
+function getCachedHighlight(text) {
+	if (highlightCache.has(text)) return highlightCache.get(text);
+	const result = highlightText(text);
+	if (highlightCache.size >= MAX_CACHE_SIZE) {
+		const firstKey = highlightCache.keys().next().value;
+		if (firstKey) highlightCache.delete(firstKey);
+	}
+	highlightCache.set(text, result);
+	return result;
+}
+/**
+* Clear the highlight cache (useful for memory management).
+*/
+function clearHighlightCache() {
+	highlightCache.clear();
+}
+/**
+* Check if text contains ANSI escape codes.
+*
+* Detects all types of ANSI escape sequences:
+* - CSI (Control Sequence Introducer): \x1b[... (parameters)
+* - OSC (Operating System Command): \x1b]...
+* - General escape sequences: \x1b...
+*/
+function hasAnsiCodes(text) {
+	return /\x1b\[/.test(text) || /\x1b\]/.test(text) || /\x1b/.test(text);
+}
+/**
+* Syntax highlighted text component.
+*
+* Applies syntax highlighting to plain text messages.
+* Strips ANSI codes before highlighting to prevent visual artifacts
+* from mixed escape sequences.
+*
+* @example
+* ```tsx
+* <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
+* ```
+*/
+function SyntaxHighlightedText({ text, className }) {
+	if (!text || text.length === 0) return /* @__PURE__ */ jsx("span", {
+		className,
+		children: text
+	});
+	const highlighted = getCachedHighlight(hasAnsiCodes(text) ? stripAnsiCodes(text) : text);
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("font-mono text-sm", className),
+		children: highlighted
+	});
+}
+/**
+* Apply syntax highlighting to text.
+*
+* Returns an array of React nodes with appropriate styling.
+* Patterns are applied in order (most specific first).
+*/
+function highlightText(text) {
+	let result = text;
+	const tokens = [];
+	result = extractTokens(result, tokens, [
+		{
+			pattern: /\b\d{1,2}:\d{2}:\d{2}(\.\d{1,3})?\b/g,
+			className: "text-cyan-400/70"
+		},
+		{
+			pattern: /\[([A-Z][A-Z0-9_]*)\]/g,
+			className: "text-purple-400 bg-purple-500/10 px-1 rounded font-semibold"
+		},
+		{
+			pattern: /\b([a-zA-Z0-9_-]+\.([a-zA-Z]{2,4}|[A-Z]{2})(?::\d+:\d+)?)\b/g,
+			className: "text-orange-400 bg-orange-500/10 px-1 rounded text-xs"
+		},
+		{
+			pattern: /\(([a-zA-Z0-9_-]+\.[a-zA-Z]{2,4}:\d+:\d+)\)/g,
+			className: "text-orange-400/80"
+		},
+		{
+			pattern: /\{([^}]+)\}/g,
+			className: "text-yellow-400 bg-yellow-500/5 px-0.5 rounded"
+		},
+		{
+			pattern: /\(([^)]+)\)/g,
+			className: "text-purple-300/80"
+		},
+		{
+			pattern: /\b<([^>]+)>/g,
+			className: "text-cyan-300/80"
+		},
+		{
+			pattern: /\bv?\d+\.\d+\.\d+(-[a-z0-9.]+)?\b/gi,
+			className: "text-green-400 font-semibold"
+		},
+		{
+			pattern: /\b([a-zA-Z_][a-zA-Z0-9_-]*)\s*:/g,
+			className: "text-green-500"
+		},
+		{
+			pattern: /\b(success|error|failed|warning|warn|info|debug|trace|fatal):/gi,
+			className: "text-pink-400 font-semibold"
+		},
+		{
+			pattern: /(['"])(.*?)\1/g,
+			className: "text-green-400"
+		},
+		{
+			pattern: /(?<!\w)(-?\d+(?:\.\d+)?)(?!\w)/g,
+			className: "text-yellow-400"
+		},
+		{
+			pattern: /\b(true|false)\b/gi,
+			className: "text-blue-400"
+		},
+		{
+			pattern: /\b(null|undefined)\b/gi,
+			className: "text-gray-500"
+		},
+		{
+			pattern: /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g,
+			className: "text-pink-400 font-semibold"
+		},
+		{
+			pattern: /(^|[\s(])\/[a-zA-Z0-9_/-]+/g,
+			className: "text-cyan-400"
+		},
+		{
+			pattern: /\b\w+\.(js|ts|jsx|tsx|json|py|rs|go|java|c|cpp|h|cs|sh|bash|yml|yaml|toml|md|txt|log)\b/g,
+			className: "text-orange-400"
+		},
+		{
+			pattern: /([{}[\]()])/g,
+			className: "text-yellow-500"
+		},
+		{
+			pattern: /\s*=\s*/g,
+			className: "text-gray-400"
+		},
+		{
+			pattern: /->|=>/g,
+			className: "text-purple-400 font-semibold"
+		}
+	]);
+	return tokens.map((token, index) => /* @__PURE__ */ jsx("span", {
+		className: token.className,
+		children: token.text
+	}, index));
+}
+/**
+* Extract tokens from text using patterns.
+*
+* Iteratively applies patterns and extracts matched tokens.
+*/
+function extractTokens(text, tokens, patterns) {
+	let result = text;
+	let hasMatches = true;
+	while (hasMatches) {
+		hasMatches = false;
+		for (const { pattern, className } of patterns) {
+			const match = pattern.exec(result);
+			if (match) {
+				hasMatches = true;
+				const matchedText = match[0];
+				const startIndex = match.index;
+				const endIndex = startIndex + matchedText.length;
+				if (startIndex > 0) {
+					const beforeText = result.slice(0, startIndex);
+					if (beforeText) tokens.push({ text: beforeText });
+				}
+				tokens.push({
+					text: matchedText,
+					className
+				});
+				result = result.slice(endIndex);
+				pattern.lastIndex = 0;
+				break;
+			}
+		}
+	}
+	if (result) tokens.push({ text: result });
+	return result;
+}
+/**
+* Highlighted JSON component.
+*
+* Displays JSON with syntax highlighting and proper indentation.
+*
+* @example
+* ```tsx
+* <HighlightedJson json={{ filter: {}, name: "test" }} />
+* ```
+*/
+function HighlightedJson({ json, className }) {
+	const formatted = JSON.stringify(json, null, 2);
+	try {
+		const highlighted = highlightJson(JSON.parse(formatted));
+		return /* @__PURE__ */ jsx("pre", {
+			className: cn("font-mono text-xs", className),
+			children: highlighted
+		});
+	} catch {
+		return /* @__PURE__ */ jsx("pre", {
+			className: cn("font-mono text-xs text-gray-400", className),
+			children: formatted
+		});
+	}
+}
+/**
+* Recursively highlight JSON.
+*/
+function highlightJson(value, indent = 0) {
+	const indentStr = "  ".repeat(indent);
+	if (value === null) return /* @__PURE__ */ jsx("span", {
+		className: "text-gray-500",
+		children: "null"
+	});
+	if (value === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "text-gray-500",
+		children: "undefined"
+	});
+	if (typeof value === "boolean") return /* @__PURE__ */ jsx("span", {
+		className: "text-blue-400",
+		children: String(value)
+	});
+	if (typeof value === "number") return /* @__PURE__ */ jsx("span", {
+		className: "text-yellow-400",
+		children: String(value)
+	});
+	if (typeof value === "string") return /* @__PURE__ */ jsxs("span", {
+		className: "text-green-400",
+		children: [
+			"\"",
+			value,
+			"\""
+		]
+	});
+	if (Array.isArray(value)) {
+		if (value.length === 0) return /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "["
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "]"
+		})] });
+		return /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "["
+			}),
+			"\n",
+			value.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
+				indentStr + "  ",
+				highlightJson(item, indent + 1),
+				index < value.length - 1 ? /* @__PURE__ */ jsx("span", {
+					className: "text-gray-500",
+					children: ","
+				}) : null,
+				"\n"
+			] }, index)),
+			indentStr,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "]"
+			})
+		] });
+	}
+	if (typeof value === "object") {
+		const entries = Object.entries(value);
+		if (entries.length === 0) return /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "{"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-yellow-500",
+			children: "}"
+		})] });
+		return /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "{"
+			}),
+			"\n",
+			entries.map(([key, val], index) => /* @__PURE__ */ jsxs("span", { children: [
+				indentStr + "  ",
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-green-500",
+					children: [
+						"\"",
+						key,
+						"\""
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-gray-500",
+					children: ": "
+				}),
+				highlightJson(val, indent + 1),
+				index < entries.length - 1 ? /* @__PURE__ */ jsx("span", {
+					className: "text-gray-500",
+					children: ","
+				}) : null,
+				"\n"
+			] }, key)),
+			indentStr,
+			/* @__PURE__ */ jsx("span", {
+				className: "text-yellow-500",
+				children: "}"
+			})
+		] });
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-gray-500",
+		children: String(value)
+	});
+}
+
+//#endregion
+export { HighlightedJson, SyntaxHighlightedText, clearHighlightCache };

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TerminalLogBadge Component.
+ *
+ * Wraps the base Badge component with terminal log level color styling.
+ * Maps log levels to appropriate Tailwind color classes matching the
+ * Synthwave Dark design system.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+ */
+import type { ReactNode } from 'react';
+import type { TLogLevelFilter } from '../parsing/LogParser.types';
+/**
+ * Props for the TerminalLogBadge component.
+ */
+export interface ITerminalLogBadgeProps {
+    /** Log level to display */
+    level: TLogLevelFilter | string;
+    /** Badge content (typically a count) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * TerminalLogBadge Component.
+ *
+ * Renders a Badge styled for terminal log levels with appropriate
+ * color coding for each severity level.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogBadge level="error">3</TerminalLogBadge>
+ * <TerminalLogBadge level="info">42</TerminalLogBadge>
+ * ```
+ */
+export declare function TerminalLogBadge({ level, children, className }: ITerminalLogBadgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalLogBadge.d.ts.map

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogBadge.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAgBlE;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,KAAK,EAAE,eAAe,GAAG,MAAM,CAAC;IAChC,wCAAwC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAUtF"}

package/dist/react-ui/blocks/Terminal/components/TerminalLogBadge.js

@@ -0,0 +1,52 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { Badge } from "../../../ui/Badge/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx
+/**
+* TerminalLogBadge Component.
+*
+* Wraps the base Badge component with terminal log level color styling.
+* Maps log levels to appropriate Tailwind color classes matching the
+* Synthwave Dark design system.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+*/
+/**
+* Color classes for each log level.
+*/
+const LEVEL_COLORS = {
+	all: "bg-muted/40 text-muted-foreground border-muted/60",
+	trace: "bg-slate-500/20 text-slate-400 border-slate-500/30",
+	debug: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+	info: "bg-green-500/20 text-green-400 border-green-500/30",
+	warn: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
+	error: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+	fatal: "bg-red-500/20 text-red-400 border-red-500/30",
+	unknown: "bg-muted/40 text-muted-foreground border-muted/60"
+};
+/**
+* TerminalLogBadge Component.
+*
+* Renders a Badge styled for terminal log levels with appropriate
+* color coding for each severity level.
+*
+* @example
+* ```tsx
+* <TerminalLogBadge level="error">3</TerminalLogBadge>
+* <TerminalLogBadge level="info">42</TerminalLogBadge>
+* ```
+*/
+function TerminalLogBadge({ level, children, className }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		size: "sm",
+		className: cn(LEVEL_COLORS[level] ?? LEVEL_COLORS.unknown, className),
+		children
+	});
+}
+
+//#endregion
+export { TerminalLogBadge };

package/dist/react-ui/blocks/Terminal/components/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Terminal components barrel export.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components
+ */
+export * from './LogLineBadges';
+export * from './SyntaxHighlight';
+export * from './SpecializedSyntaxHighlighter';
+export * from './TerminalLogBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/Terminal/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC"}

package/dist/react-ui/blocks/Terminal/components/index.js

@@ -0,0 +1,4 @@
+import { ContentTypeBadge, LevelBadge, LogLineContainer, TagBadge, TagBadges, TimestampBadge } from "./LogLineBadges.js";
+import { HighlightedJson, SyntaxHighlightedText, clearHighlightCache } from "./SyntaxHighlight.js";
+import { SpecializedSyntaxHighlighter } from "./SpecializedSyntaxHighlighter.js";
+import { TerminalLogBadge } from "./TerminalLogBadge.js";

package/dist/react-ui/blocks/Terminal/hooks/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Terminal Hooks Module.
+ *
+ * Reusable hooks for terminal WebSocket connections
+ * and global settings management.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/hooks
+ */
+export { useTerminalWebSocket, type IUseTerminalWebSocketOptions, type IUseTerminalWebSocketReturn, type ITerminalWsServerMessage, type TTerminalWsStatus, } from './useTerminalWebSocket';
+export { useTerminalSettings, type ITerminalSettings, type IUseTerminalSettingsReturn, } from './useTerminalSettings';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/blocks/Terminal/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,oBAAoB,EACpB,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,GACvB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,uBAAuB,CAAC"}

package/dist/react-ui/blocks/Terminal/hooks/index.js

@@ -0,0 +1,2 @@
+import { useTerminalWebSocket } from "./useTerminalWebSocket.js";
+import { useTerminalSettings } from "./useTerminalSettings.js";