@mks2508/mks-ui 0.6.8 → 0.8.0

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

@@ -0,0 +1,136 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { CONTENT_TYPE_STYLES, LOG_LEVEL_STYLES } from "../../Terminal.tokens.js";
+import { logLineBadgesStyles } from "./LogLineBadges.styles.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/components/LogLineBadges/index.tsx
+/**
+* LogLineBadges — React badge components for log lines.
+*
+* Styled badge components using centralized Terminal tokens for
+* consistent log-level coloring across the terminal UI.
+* All badge components are memoized for optimal performance.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/components/LogLineBadges
+*/
+/**
+* Level badge component (memoized).
+*
+* Displays a colored badge with the log level label.
+* Uses centralized LOG_LEVEL_STYLES from Terminal tokens.
+*
+* @example
+* ```tsx
+* <LevelBadge level="info" />
+* // Renders: [INFO] with blue background
+* ```
+*/
+const LevelBadge = memo(function LevelBadge({ level, className }) {
+	const levelStyle = LOG_LEVEL_STYLES[level];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(logLineBadgesStyles.levelBadge, levelStyle.badge, levelStyle.glow, className),
+		children: level.toUpperCase()
+	});
+});
+/**
+* Timestamp badge component (memoized).
+*
+* Displays a timestamp with muted styling and tabular numbers.
+*
+* @example
+* ```tsx
+* <TimestampBadge timestamp="22:41:03" />
+* ```
+*/
+const TimestampBadge = memo(function TimestampBadge({ timestamp, className }) {
+	const timeOnly = timestamp.includes(".") ? timestamp.split(".")[0] : timestamp;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(logLineBadgesStyles.timestampBadge, 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" />
+* ```
+*/
+const TagBadge = memo(function TagBadge({ tag, className }) {
+	const displayTag = tag.length > 12 ? tag.slice(0, 9) + "..." : tag;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(logLineBadgesStyles.tagBadge, className),
+		children: displayTag
+	});
+});
+/**
+* Tag badges container component (memoized).
+*
+* Displays multiple tag badges with consistent spacing.
+*
+* @example
+* ```tsx
+* <TagBadges tags={['API', 'ROUTES']} />
+* ```
+*/
+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 component (memoized).
+*
+* Displays a colored badge indicating the content type of a log entry.
+* HTTP entries show the actual method (GET, POST, etc.).
+* Returns null for 'plain' content type.
+*
+* @example
+* ```tsx
+* <ContentTypeBadge contentType="http" httpMethod="GET" />
+* <ContentTypeBadge contentType="json" />
+* ```
+*/
+const ContentTypeBadge = memo(function ContentTypeBadge({ contentType, httpMethod, className }) {
+	if (contentType === "plain" || !contentType) return null;
+	const style = CONTENT_TYPE_STYLES[contentType];
+	if (!style) return null;
+	const label = contentType === "http" && httpMethod ? httpMethod.toUpperCase() : style.label;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(logLineBadgesStyles.contentTypeBadge, style.className, className),
+		children: label
+	});
+});
+/**
+* Log line container component.
+*
+* Provides consistent styling and structure for log lines.
+*
+* @example
+* ```tsx
+* <LogLineContainer level="info" lineNumber={42}>
+*   <LevelBadge level="info" />
+*   <span>Log message here</span>
+* </LogLineContainer>
+* ```
+*/
+function LogLineContainer({ level, lineNumber, isContinuation = false, className, children }) {
+	const levelStyle = LOG_LEVEL_STYLES[level];
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(logLineBadgesStyles.lineContainer, isContinuation && "ml-6", `hover:${levelStyle.border}`, className),
+		title: `Line ${lineNumber}`,
+		children
+	});
+}
+
+//#endregion
+export { ContentTypeBadge, LevelBadge, LogLineContainer, TagBadge, TagBadges, TimestampBadge };

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

@@ -2,15 +2,18 @@
  * Syntax highlighting for log messages (React spans).
  *
  * Applies color highlighting to specific elements within log messages
- * using React span elements with Tailwind CSS classes.
+ * using React span elements with Tailwind CSS classes from a configurable
+ * syntax theme.
  *
  * 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
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/SyntaxHighlight
  */
+import { type SyntaxThemeOverrides } from './SyntaxHighlight.styles';
+export { DEFAULT_SYNTAX_THEME, type SyntaxThemeOverrides, type SyntaxTokenType } from './SyntaxHighlight.styles';
 /**
  * Clear the highlight cache (useful for memory management).
  */
@@ -21,28 +24,38 @@ export declare function clearHighlightCache(): void;
 export interface ISyntaxHighlightedTextProps {
     /** Text to highlight */
     text: string;
+    /** Optional syntax theme overrides */
+    syntaxTheme?: SyntaxThemeOverrides;
     /** 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.
+ * Applies syntax highlighting to plain text messages using a configurable
+ * theme. Strips ANSI codes before highlighting.
  *
  * @example
  * ```tsx
+ * // Default theme
  * <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
+ *
+ * // Custom theme overrides
+ * <SyntaxHighlightedText
+ *   text="GET /api/users"
+ *   syntaxTheme={{ httpMethod: 'text-primary font-bold', urlPath: 'text-accent' }}
+ * />
  * ```
  */
-export declare function SyntaxHighlightedText({ text, className }: ISyntaxHighlightedTextProps): React.JSX.Element;
+export declare function SyntaxHighlightedText({ text, syntaxTheme, className }: ISyntaxHighlightedTextProps): React.JSX.Element;
 /**
  * Props for HighlightedJson component.
  */
 export interface IHighlightedJsonProps {
     /** JSON object to highlight */
     json: Record<string, unknown>;
+    /** Optional syntax theme overrides */
+    syntaxTheme?: SyntaxThemeOverrides;
     /** Optional custom class name */
     className?: string;
 }
@@ -50,11 +63,12 @@ export interface IHighlightedJsonProps {
  * Highlighted JSON component.
  *
  * Displays JSON with syntax highlighting and proper indentation.
+ * Uses the configurable syntax theme for all token colors.
  *
  * @example
  * ```tsx
  * <HighlightedJson json={{ filter: {}, name: "test" }} />
  * ```
  */
-export declare function HighlightedJson({ json, className }: IHighlightedJsonProps): React.JSX.Element;
+export declare function HighlightedJson({ json, syntaxTheme, className }: IHighlightedJsonProps): React.JSX.Element;
 //# sourceMappingURL=SyntaxHighlight.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"SyntaxHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAKH,OAAO,EAAwB,KAAK,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAG3F,OAAO,EAAE,oBAAoB,EAAE,KAAK,oBAAoB,EAAE,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AA6CjH;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,IAAI,CAE1C;AASD;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,2BAA2B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CActH;AA8ED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,sCAAsC;IACtC,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoB1G"}

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { cn } from "../../../lib/utils.js";
+import { DEFAULT_SYNTAX_THEME } from "./SyntaxHighlight.styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx
@@ -8,14 +9,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Syntax highlighting for log messages (React spans).
 *
 * Applies color highlighting to specific elements within log messages
-* using React span elements with Tailwind CSS classes.
+* using React span elements with Tailwind CSS classes from a configurable
+* syntax theme.
 *
 * 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
+* @module @mks2508/mks-ui/react/blocks/Terminal/components/SyntaxHighlight
 */
 /**
 * LRU cache for syntax highlighting results.
@@ -35,14 +37,17 @@ function stripAnsiCodes(text) {
 /**
 * 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);
+function getCachedHighlight(text, theme) {
+	const useCache = theme === DEFAULT_SYNTAX_THEME;
+	if (useCache && highlightCache.has(text)) return highlightCache.get(text);
+	const result = highlightText(text, theme);
+	if (useCache) {
+		if (highlightCache.size >= MAX_CACHE_SIZE) {
+			const firstKey = highlightCache.keys().next().value;
+			if (firstKey) highlightCache.delete(firstKey);
+		}
+		highlightCache.set(text, result);
 	}
-	highlightCache.set(text, result);
 	return result;
 }
 /**
@@ -53,11 +58,6 @@ function clearHighlightCache() {
 }
 /**
 * 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);
@@ -65,115 +65,122 @@ function hasAnsiCodes(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.
+* Applies syntax highlighting to plain text messages using a configurable
+* theme. Strips ANSI codes before highlighting.
 *
 * @example
 * ```tsx
+* // Default theme
 * <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
+*
+* // Custom theme overrides
+* <SyntaxHighlightedText
+*   text="GET /api/users"
+*   syntaxTheme={{ httpMethod: 'text-primary font-bold', urlPath: 'text-accent' }}
+* />
 * ```
 */
-function SyntaxHighlightedText({ text, className }) {
+function SyntaxHighlightedText({ text, syntaxTheme, className }) {
 	if (!text || text.length === 0) return /* @__PURE__ */ jsx("span", {
 		className,
 		children: text
 	});
-	const highlighted = getCachedHighlight(hasAnsiCodes(text) ? stripAnsiCodes(text) : text);
+	const theme = syntaxTheme ? {
+		...DEFAULT_SYNTAX_THEME,
+		...syntaxTheme
+	} : DEFAULT_SYNTAX_THEME;
+	const highlighted = getCachedHighlight(hasAnsiCodes(text) ? stripAnsiCodes(text) : text, theme);
 	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).
+* Apply syntax highlighting to text using the provided theme.
 */
-function highlightText(text) {
+function highlightText(text, theme) {
 	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"
+			className: theme.timestamp
 		},
 		{
 			pattern: /\[([A-Z][A-Z0-9_]*)\]/g,
-			className: "text-purple-400 bg-purple-500/10 px-1 rounded font-semibold"
+			className: theme.badge
 		},
 		{
 			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"
+			className: theme.sourceLocation
 		},
 		{
 			pattern: /\(([a-zA-Z0-9_-]+\.[a-zA-Z]{2,4}:\d+:\d+)\)/g,
-			className: "text-orange-400/80"
+			className: theme.sourceLocationParen
 		},
 		{
 			pattern: /\{([^}]+)\}/g,
-			className: "text-yellow-400 bg-yellow-500/5 px-0.5 rounded"
+			className: theme.curlyBraces
 		},
 		{
 			pattern: /\(([^)]+)\)/g,
-			className: "text-purple-300/80"
+			className: theme.parentheses
 		},
 		{
 			pattern: /\b<([^>]+)>/g,
-			className: "text-cyan-300/80"
+			className: theme.angleBrackets
 		},
 		{
 			pattern: /\bv?\d+\.\d+\.\d+(-[a-z0-9.]+)?\b/gi,
-			className: "text-green-400 font-semibold"
+			className: theme.version
 		},
 		{
 			pattern: /\b([a-zA-Z_][a-zA-Z0-9_-]*)\s*:/g,
-			className: "text-green-500"
+			className: theme.propertyKey
 		},
 		{
 			pattern: /\b(success|error|failed|warning|warn|info|debug|trace|fatal):/gi,
-			className: "text-pink-400 font-semibold"
+			className: theme.keywordBadge
 		},
 		{
 			pattern: /(['"])(.*?)\1/g,
-			className: "text-green-400"
+			className: theme.string
 		},
 		{
 			pattern: /(?<!\w)(-?\d+(?:\.\d+)?)(?!\w)/g,
-			className: "text-yellow-400"
+			className: theme.number
 		},
 		{
 			pattern: /\b(true|false)\b/gi,
-			className: "text-blue-400"
+			className: theme.boolean
 		},
 		{
 			pattern: /\b(null|undefined)\b/gi,
-			className: "text-gray-500"
+			className: theme.nullish
 		},
 		{
 			pattern: /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g,
-			className: "text-pink-400 font-semibold"
+			className: theme.httpMethod
 		},
 		{
 			pattern: /(^|[\s(])\/[a-zA-Z0-9_/-]+/g,
-			className: "text-cyan-400"
+			className: theme.urlPath
 		},
 		{
 			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"
+			className: theme.fileExtension
 		},
 		{
 			pattern: /([{}[\]()])/g,
-			className: "text-yellow-500"
+			className: theme.structuralBrace
 		},
 		{
 			pattern: /\s*=\s*/g,
-			className: "text-gray-400"
+			className: theme.equals
 		},
 		{
 			pattern: /->|=>/g,
-			className: "text-purple-400 font-semibold"
+			className: theme.arrow
 		}
 	]);
 	return tokens.map((token, index) => /* @__PURE__ */ jsx("span", {
@@ -183,8 +190,6 @@ function highlightText(text) {
 }
 /**
 * Extract tokens from text using patterns.
-*
-* Iteratively applies patterns and extracts matched tokens.
 */
 function extractTokens(text, tokens, patterns) {
 	let result = text;
@@ -219,50 +224,55 @@ function extractTokens(text, tokens, patterns) {
 * Highlighted JSON component.
 *
 * Displays JSON with syntax highlighting and proper indentation.
+* Uses the configurable syntax theme for all token colors.
 *
 * @example
 * ```tsx
 * <HighlightedJson json={{ filter: {}, name: "test" }} />
 * ```
 */
-function HighlightedJson({ json, className }) {
+function HighlightedJson({ json, syntaxTheme, className }) {
+	const theme = syntaxTheme ? {
+		...DEFAULT_SYNTAX_THEME,
+		...syntaxTheme
+	} : DEFAULT_SYNTAX_THEME;
 	const formatted = JSON.stringify(json, null, 2);
 	try {
-		const highlighted = highlightJson(JSON.parse(formatted));
+		const highlighted = highlightJson(JSON.parse(formatted), theme);
 		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),
+			className: cn("font-mono text-xs", theme.jsonFallback, className),
 			children: formatted
 		});
 	}
 }
 /**
-* Recursively highlight JSON.
+* Recursively highlight JSON using the provided theme.
 */
-function highlightJson(value, indent = 0) {
+function highlightJson(value, theme, indent = 0) {
 	const indentStr = "  ".repeat(indent);
 	if (value === null) return /* @__PURE__ */ jsx("span", {
-		className: "text-gray-500",
+		className: theme.jsonNull,
 		children: "null"
 	});
 	if (value === void 0) return /* @__PURE__ */ jsx("span", {
-		className: "text-gray-500",
+		className: theme.jsonNull,
 		children: "undefined"
 	});
 	if (typeof value === "boolean") return /* @__PURE__ */ jsx("span", {
-		className: "text-blue-400",
+		className: theme.jsonBoolean,
 		children: String(value)
 	});
 	if (typeof value === "number") return /* @__PURE__ */ jsx("span", {
-		className: "text-yellow-400",
+		className: theme.jsonNumber,
 		children: String(value)
 	});
 	if (typeof value === "string") return /* @__PURE__ */ jsxs("span", {
-		className: "text-green-400",
+		className: theme.jsonString,
 		children: [
 			"\"",
 			value,
@@ -271,30 +281,30 @@ function highlightJson(value, indent = 0) {
 	});
 	if (Array.isArray(value)) {
 		if (value.length === 0) return /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
-			className: "text-yellow-500",
+			className: theme.jsonBrace,
 			children: "["
 		}), /* @__PURE__ */ jsx("span", {
-			className: "text-yellow-500",
+			className: theme.jsonBrace,
 			children: "]"
 		})] });
 		return /* @__PURE__ */ jsxs("span", { children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "text-yellow-500",
+				className: theme.jsonBrace,
 				children: "["
 			}),
 			"\n",
 			value.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
 				indentStr + "  ",
-				highlightJson(item, indent + 1),
+				highlightJson(item, theme, indent + 1),
 				index < value.length - 1 ? /* @__PURE__ */ jsx("span", {
-					className: "text-gray-500",
+					className: theme.jsonComma,
 					children: ","
 				}) : null,
 				"\n"
 			] }, index)),
 			indentStr,
 			/* @__PURE__ */ jsx("span", {
-				className: "text-yellow-500",
+				className: theme.jsonBrace,
 				children: "]"
 			})
 		] });
@@ -302,22 +312,22 @@ function highlightJson(value, indent = 0) {
 	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",
+			className: theme.jsonBrace,
 			children: "{"
 		}), /* @__PURE__ */ jsx("span", {
-			className: "text-yellow-500",
+			className: theme.jsonBrace,
 			children: "}"
 		})] });
 		return /* @__PURE__ */ jsxs("span", { children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "text-yellow-500",
+				className: theme.jsonBrace,
 				children: "{"
 			}),
 			"\n",
 			entries.map(([key, val], index) => /* @__PURE__ */ jsxs("span", { children: [
 				indentStr + "  ",
 				/* @__PURE__ */ jsxs("span", {
-					className: "text-green-500",
+					className: theme.jsonKey,
 					children: [
 						"\"",
 						key,
@@ -325,25 +335,25 @@ function highlightJson(value, indent = 0) {
 					]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-gray-500",
+					className: theme.jsonColon,
 					children: ": "
 				}),
-				highlightJson(val, indent + 1),
+				highlightJson(val, theme, indent + 1),
 				index < entries.length - 1 ? /* @__PURE__ */ jsx("span", {
-					className: "text-gray-500",
+					className: theme.jsonComma,
 					children: ","
 				}) : null,
 				"\n"
 			] }, key)),
 			indentStr,
 			/* @__PURE__ */ jsx("span", {
-				className: "text-yellow-500",
+				className: theme.jsonBrace,
 				children: "}"
 			})
 		] });
 	}
 	return /* @__PURE__ */ jsx("span", {
-		className: "text-gray-500",
+		className: theme.jsonFallback,
 		children: String(value)
 	});
 }

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

@@ -0,0 +1,33 @@
+/**
+ * SyntaxHighlight theme definitions.
+ *
+ * Configurable syntax theme for the terminal log viewer's React mode.
+ * Consumers can override individual token colors while keeping the rest
+ * as defaults.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/SyntaxHighlight
+ */
+/**
+ * Syntax token types used in log highlighting.
+ */
+export type SyntaxTokenType = 'timestamp' | 'badge' | 'sourceLocation' | 'sourceLocationParen' | 'curlyBraces' | 'parentheses' | 'angleBrackets' | 'version' | 'propertyKey' | 'keywordBadge' | 'string' | 'number' | 'boolean' | 'nullish' | 'httpMethod' | 'urlPath' | 'fileExtension' | 'structuralBrace' | 'equals' | 'arrow' | 'jsonNull' | 'jsonBoolean' | 'jsonNumber' | 'jsonString' | 'jsonKey' | 'jsonBrace' | 'jsonComma' | 'jsonColon' | 'jsonFallback';
+/**
+ * Default syntax highlighting theme.
+ *
+ * Maps each token type to Tailwind CSS classes. Consumers can override
+ * individual tokens while keeping the rest as defaults.
+ *
+ * @example
+ * ```tsx
+ * // Custom theme with modified string color
+ * const myTheme = {
+ *   ...DEFAULT_SYNTAX_THEME,
+ *   string: 'text-emerald-400',
+ *   number: 'text-orange-400',
+ * };
+ * ```
+ */
+export declare const DEFAULT_SYNTAX_THEME: Record<SyntaxTokenType, string>;
+/** Partial syntax theme for consumer overrides. */
+export type SyntaxThemeOverrides = Partial<Record<SyntaxTokenType, string>>;
+//# sourceMappingURL=SyntaxHighlight.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SyntaxHighlight.styles.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/SyntaxHighlight.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAEvB,WAAW,GACX,OAAO,GACP,gBAAgB,GAChB,qBAAqB,GACrB,aAAa,GACb,aAAa,GACb,eAAe,GACf,SAAS,GACT,aAAa,GACb,cAAc,GACd,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,YAAY,GACZ,SAAS,GACT,eAAe,GACf,iBAAiB,GACjB,QAAQ,GACR,OAAO,GAEP,UAAU,GACV,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,WAAW,GACX,WAAW,GACX,WAAW,GACX,cAAc,CAAC;AAEnB;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAiChE,CAAC;AAEF,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC"}