@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,185 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/LogLineBadges.tsx
+/**
+* React badge components for log lines.
+*
+* Styled badge components using Tailwind CSS for the React log viewer.
+* Provides level badges, timestamp badges, and tag badges with consistent
+* Synthwave Dark theme styling.
+*
+* All badge components are memoized for optimal performance.
+*
+* @module components/devenv/terminal/LogLineBadges
+*/
+/**
+* Level badge color mapping.
+*
+* Maps each log level to its corresponding Tailwind color classes.
+*/
+const LEVEL_COLORS = {
+	info: "bg-blue-500/15 text-blue-400 border-blue-500/25 shadow-[0_0_6px_rgba(59,130,246,0.15)]",
+	warn: "bg-yellow-500/15 text-yellow-400 border-yellow-500/25 shadow-[0_0_6px_rgba(234,179,8,0.15)]",
+	error: "bg-red-500/20 text-red-400 border-red-500/30 shadow-[0_0_8px_rgba(239,68,68,0.2)]",
+	fatal: "bg-pink-500/20 text-pink-400 border-pink-500/30 shadow-[0_0_8px_rgba(236,72,153,0.2)]",
+	debug: "bg-cyan-500/15 text-cyan-400 border-cyan-500/25 shadow-[0_0_6px_rgba(6,182,212,0.15)]",
+	trace: "bg-gray-500/10 text-gray-400 border-gray-500/20",
+	unknown: "bg-gray-500/8 text-gray-500 border-gray-500/15"
+};
+/**
+* Level badge component (memoized).
+*
+* Displays a colored badge with the log level label.
+* Uses Synthwave Dark theme colors with glassmorphic effect.
+*
+* @example
+* ```tsx
+* <LevelBadge level="info" />
+* // Renders: [INFO] with blue background
+* ```
+*/
+const LevelBadge = memo(function LevelBadge({ level, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("px-2 py-0.5 rounded border font-mono text-[10px] font-bold tracking-wider", LEVEL_COLORS[level], className),
+		children: level.toUpperCase()
+	});
+});
+/**
+* Timestamp badge component (memoized).
+*
+* Displays a timestamp with muted styling.
+* Uses tabular numbers for consistent alignment.
+*
+* @example
+* ```tsx
+* <TimestampBadge timestamp="22:41:03" />
+* // Renders: 22:41:03 in gray
+* ```
+*/
+const TimestampBadge = memo(function TimestampBadge({ timestamp, className }) {
+	const timeOnly = timestamp.includes(".") ? timestamp.split(".")[0] : timestamp;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("ml-auto text-muted-foreground font-mono text-xs tabular-nums", "opacity-70", className),
+		children: timeOnly
+	});
+});
+/**
+* Tag badge component (memoized).
+*
+* Displays a component tag (e.g., "API", "ROUTES").
+* Truncates long tags to 12 characters.
+*
+* @example
+* ```tsx
+* <TagBadge tag="WORKSPACEMANAGER" />
+* // Renders: [WORKSPACEMAN...] in cyan
+* ```
+*/
+const TagBadge = memo(function TagBadge({ tag, className }) {
+	const displayTag = tag.length > 12 ? tag.slice(0, 9) + "..." : tag;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("px-1.5 py-0.5 rounded border font-mono text-xs", "bg-purple-500/10 text-purple-400 border-purple-500/20", className),
+		children: displayTag
+	});
+});
+/**
+* Tag badges container component (memoized).
+*
+* Displays multiple tag badges with consistent spacing.
+*
+* @example
+* ```tsx
+* <TagBadges tags={['API', 'ROUTES']} />
+* // Renders: [API][ROUTES] with spacing
+* ```
+*/
+const TagBadges = memo(function TagBadges({ tags, className }) {
+	if (!tags || tags.length === 0) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-1", className),
+		children: tags.map((tag) => /* @__PURE__ */ jsx(TagBadge, { tag }, tag))
+	});
+});
+/**
+* Content type badge color and label mapping.
+*
+* Maps each content type to its display label and Tailwind color classes.
+* 'plain' entries are hidden (no badge rendered).
+*/
+const CONTENT_TYPE_STYLES = {
+	plain: {
+		label: "",
+		className: ""
+	},
+	http: {
+		label: "HTTP",
+		className: "bg-cyan-500/15 text-cyan-400 border-cyan-500/25 shadow-[0_0_6px_rgba(6,182,212,0.15)]"
+	},
+	json: {
+		label: "JSON",
+		className: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25 shadow-[0_0_6px_rgba(16,185,129,0.15)]"
+	},
+	table: {
+		label: "TABLE",
+		className: "bg-violet-500/15 text-violet-400 border-violet-500/25 shadow-[0_0_6px_rgba(139,92,246,0.15)]"
+	},
+	error: {
+		label: "ERR",
+		className: "bg-red-500/20 text-red-400 border-red-500/30 shadow-[0_0_8px_rgba(239,68,68,0.2)]"
+	}
+};
+/**
+* Content type badge component (memoized).
+*
+* Displays a colored badge indicating the content type of a log entry
+* (HTTP, JSON, TABLE, ERR). HTTP entries show the actual method
+* (GET, POST, etc.) instead of a generic "HTTP" label.
+*
+* Returns null for 'plain' content type — no badge rendered.
+*
+* @example
+* ```tsx
+* <ContentTypeBadge contentType="http" httpMethod="GET" />
+* // Renders: [GET] in cyan
+*
+* <ContentTypeBadge contentType="json" />
+* // Renders: [JSON] in emerald
+* ```
+*/
+const ContentTypeBadge = memo(function ContentTypeBadge({ contentType, httpMethod, className }) {
+	if (contentType === "plain" || !contentType) return null;
+	const style = CONTENT_TYPE_STYLES[contentType];
+	const label = contentType === "http" && httpMethod ? httpMethod.toUpperCase() : style.label;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("px-1.5 py-0.5 rounded border font-mono text-[10px] font-bold tracking-wider", style.className, className),
+		children: label
+	});
+});
+/**
+* Log line container component.
+*
+* Provides consistent styling and structure for log lines.
+* Adds subtle hover effect and line number on hover.
+*
+* @example
+* ```tsx
+* <LogLineContainer level="info" lineNumber={42}>
+*   <LevelBadge level="info" />
+*   <span>Log message here</span>
+* </LogLineContainer>
+* ```
+*/
+function LogLineContainer({ level, lineNumber, isContinuation = false, className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group flex items-start gap-2 py-0.5 px-2 rounded-sm", "hover:bg-white/5 transition-colors duration-150", "border-l-2", isContinuation ? "border-transparent ml-6" : "border-transparent", `hover:border-${level === "error" || level === "fatal" ? "red" : level === "warn" ? "yellow" : "blue"}-500/50`, className),
+		title: `Line ${lineNumber}`,
+		children
+	});
+}
+
+//#endregion
+export { ContentTypeBadge, LevelBadge, LogLineContainer, TagBadge, TagBadges, TimestampBadge };

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

@@ -0,0 +1,48 @@
+/**
+ * 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
+ */
+/**
+ * Props for specialized syntax highlighting.
+ */
+export interface ISpecializedSyntaxHighlighterProps {
+    /** Content type */
+    contentType?: 'plain' | 'http' | 'json' | 'table' | 'error';
+    /** HTTP method (for HTTP content) */
+    httpMethod?: string;
+    /** HTTP path (for HTTP content) */
+    httpPath?: string;
+    /** Table data (for table content) */
+    tableData?: unknown;
+    /** JSON data (for JSON content) */
+    jsonData?: Record<string, unknown> | unknown;
+    /** Raw text to highlight */
+    text: string;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * 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 {"
+ * />
+ * ```
+ */
+export declare function SpecializedSyntaxHighlighter({ contentType, httpMethod: _httpMethod, httpPath: _httpPath, tableData: _tableData, jsonData, text, className, }: ISpecializedSyntaxHighlighterProps): React.JSX.Element;
+//# sourceMappingURL=SpecializedSyntaxHighlighter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpecializedSyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/SpecializedSyntaxHighlighter.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH;;GAEG;AACH,MAAM,WAAW,kCAAkC;IACjD,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAE5D,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;IAE7C,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IAEb,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,WAAqB,EACrB,UAAU,EAAE,WAAW,EACvB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE,UAAU,EACrB,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,kCAAkC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsBxD"}

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"}