@mks2508/mks-ui 0.3.2 → 0.4.0

package/dist/react-ui/blocks/Terminal/XTermAdapter.d.ts

@@ -0,0 +1,87 @@
+/**
+ * XTerm Adapter - ITerminalAdapter implementation for xterm.js.
+ *
+ * Wrapper class that adapts xterm.js Terminal to the ITerminalAdapter
+ * interface, enabling consistent API across different backends.
+ *
+ * @module components/devenv/terminal/XTermAdapter
+ */
+import type { ITerminalAdapter, ITerminalAdapterCapabilities, ITerminalOptions, ITerminalMode } from './Terminal.types';
+/**
+ * XTermAdapter implements ITerminalAdapter for xterm.js.
+ *
+ * Provides xterm.js functionality through the standardized adapter interface.
+ * Manages terminal lifecycle including initialization, data writing,
+ * resizing, and cleanup.
+ */
+export declare class XTermAdapter implements ITerminalAdapter {
+    /** Backend type identifier */
+    readonly type: "xterm";
+    /** Adapter capabilities for runtime feature detection */
+    readonly capabilities: ITerminalAdapterCapabilities;
+    /** xterm.js Terminal instance */
+    private terminal;
+    /** FitAddon for auto-resize */
+    private fitAddon;
+    /** Current options */
+    private options;
+    /**
+     * Create XTermAdapter instance.
+     *
+     * @param options - Terminal initialization options
+     */
+    constructor(options: ITerminalOptions);
+    /**
+     * Initialize the terminal in the given container element.
+     *
+     * Creates xterm.js Terminal instance, loads addons, and opens
+     * in the provided container.
+     *
+     * @param container - DOM element to render terminal into
+     * @param options - Terminal initialization options
+     * @returns Promise that resolves when terminal is ready
+     */
+    initialize(container: HTMLElement, options: ITerminalOptions): Promise<void>;
+    /**
+     * Write data to the terminal without newline.
+     *
+     * @param data - String data to write
+     */
+    write(data: string): void;
+    /**
+     * Write data to the terminal with newline.
+     *
+     * @param data - String data to write
+     */
+    writeln(data: string): void;
+    /**
+     * Clear the terminal buffer.
+     */
+    clear(): void;
+    /**
+     * Resize the terminal to the given dimensions.
+     *
+     * @param cols - Number of columns
+     * @param rows - Number of rows
+     */
+    resize(cols: number, rows: number): void;
+    /**
+     * Dispose of the terminal and release resources.
+     */
+    dispose(): void;
+    /**
+     * Switch between interactive and readonly modes.
+     *
+     * @param mode - Target mode
+     */
+    setMode(mode: ITerminalMode): void;
+    /**
+     * Focus the terminal for input.
+     */
+    focus(): void;
+    /**
+     * Remove focus from the terminal.
+     */
+    blur(): void;
+}
+//# sourceMappingURL=XTermAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XTermAdapter.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/XTermAdapter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,KAAK,EACV,gBAAgB,EAChB,4BAA4B,EAC5B,gBAAgB,EAChB,aAAa,EACd,MAAM,kBAAkB,CAAC;AAE1B;;;;;;GAMG;AACH,qBAAa,YAAa,YAAW,gBAAgB;IACnD,8BAA8B;IAC9B,SAAgB,IAAI,EAAG,OAAO,CAAU;IAExC,yDAAyD;IACzD,SAAgB,YAAY,EAAE,4BAA4B,CAKxD;IAEF,iCAAiC;IACjC,OAAO,CAAC,QAAQ,CAAyB;IAEzC,+BAA+B;IAC/B,OAAO,CAAC,QAAQ,CAAyB;IAEzC,sBAAsB;IACtB,OAAO,CAAC,OAAO,CAAmB;IAElC;;;;OAIG;gBACS,OAAO,EAAE,gBAAgB;IAIrC;;;;;;;;;OASG;IACG,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC;IA6BlF;;;;OAIG;IACH,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIzB;;;;OAIG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI3B;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;;;OAKG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAIxC;;OAEG;IACH,OAAO,IAAI,IAAI;IAMf;;;;OAIG;IACH,OAAO,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAMlC;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,IAAI,IAAI,IAAI;CAGb"}

package/dist/react-ui/blocks/Terminal/XTermAdapter.js

@@ -0,0 +1,135 @@
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+
+//#region src/react-ui/blocks/Terminal/XTermAdapter.ts
+/**
+* XTerm Adapter - ITerminalAdapter implementation for xterm.js.
+*
+* Wrapper class that adapts xterm.js Terminal to the ITerminalAdapter
+* interface, enabling consistent API across different backends.
+*
+* @module components/devenv/terminal/XTermAdapter
+*/
+/**
+* XTermAdapter implements ITerminalAdapter for xterm.js.
+*
+* Provides xterm.js functionality through the standardized adapter interface.
+* Manages terminal lifecycle including initialization, data writing,
+* resizing, and cleanup.
+*/
+var XTermAdapter = class {
+	/** Backend type identifier */
+	type = "xterm";
+	/** Adapter capabilities for runtime feature detection */
+	capabilities = {
+		managesOwnConnection: false,
+		gpuRendering: false,
+		multiPane: false,
+		builtinThemes: false
+	};
+	/** xterm.js Terminal instance */
+	terminal = null;
+	/** FitAddon for auto-resize */
+	fitAddon = null;
+	/** Current options */
+	options;
+	/**
+	* Create XTermAdapter instance.
+	*
+	* @param options - Terminal initialization options
+	*/
+	constructor(options) {
+		this.options = options;
+	}
+	/**
+	* Initialize the terminal in the given container element.
+	*
+	* Creates xterm.js Terminal instance, loads addons, and opens
+	* in the provided container.
+	*
+	* @param container - DOM element to render terminal into
+	* @param options - Terminal initialization options
+	* @returns Promise that resolves when terminal is ready
+	*/
+	async initialize(container, options) {
+		this.options = options;
+		this.terminal = new Terminal({
+			cursorBlink: options.cursorBlink ?? true,
+			scrollback: options.scrollback ?? 1e3,
+			fontSize: options.fontSize ?? 14,
+			fontFamily: options.fontFamily ?? "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', monospace",
+			theme: options.theme ?? {},
+			convertEol: true
+		});
+		this.fitAddon = new FitAddon();
+		this.terminal.loadAddon(this.fitAddon);
+		this.terminal.open(container);
+		this.fitAddon.fit();
+		if (options.mode === "interactive" && options.onData) this.terminal.onData(options.onData);
+	}
+	/**
+	* Write data to the terminal without newline.
+	*
+	* @param data - String data to write
+	*/
+	write(data) {
+		this.terminal?.write(data);
+	}
+	/**
+	* Write data to the terminal with newline.
+	*
+	* @param data - String data to write
+	*/
+	writeln(data) {
+		this.terminal?.writeln(data);
+	}
+	/**
+	* Clear the terminal buffer.
+	*/
+	clear() {
+		this.terminal?.clear();
+	}
+	/**
+	* Resize the terminal to the given dimensions.
+	*
+	* @param cols - Number of columns
+	* @param rows - Number of rows
+	*/
+	resize(cols, rows) {
+		this.terminal?.resize(cols, rows);
+	}
+	/**
+	* Dispose of the terminal and release resources.
+	*/
+	dispose() {
+		this.terminal?.dispose();
+		this.terminal = null;
+		this.fitAddon = null;
+	}
+	/**
+	* Switch between interactive and readonly modes.
+	*
+	* @param mode - Target mode
+	*/
+	setMode(mode) {
+		this.options = {
+			...this.options,
+			mode
+		};
+	}
+	/**
+	* Focus the terminal for input.
+	*/
+	focus() {
+		this.terminal?.focus();
+	}
+	/**
+	* Remove focus from the terminal.
+	*/
+	blur() {
+		this.terminal?.blur();
+	}
+};
+
+//#endregion
+export { XTermAdapter };

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

@@ -0,0 +1,160 @@
+/**
+ * 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
+ */
+import type { TLogLevel, TContentType } from '../parsing';
+/**
+ * Props for LevelBadge component.
+ */
+export interface ILevelBadgeProps {
+    /** Log level to display */
+    level: TLogLevel;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * 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
+ * ```
+ */
+export declare const LevelBadge: import("react").NamedExoticComponent<ILevelBadgeProps>;
+/**
+ * Props for TimestampBadge component.
+ */
+export interface ITimestampBadgeProps {
+    /** Timestamp string to display */
+    timestamp: string;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * 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
+ * ```
+ */
+export declare const TimestampBadge: import("react").NamedExoticComponent<ITimestampBadgeProps>;
+/**
+ * Props for TagBadge component.
+ */
+export interface ITagBadgeProps {
+    /** Tag string to display */
+    tag: string;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * 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
+ * ```
+ */
+export declare const TagBadge: import("react").NamedExoticComponent<ITagBadgeProps>;
+/**
+ * Props for TagBadges component.
+ */
+export interface ITagBadgesProps {
+    /** Array of tag strings */
+    tags: string[];
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * Tag badges container component (memoized).
+ *
+ * Displays multiple tag badges with consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <TagBadges tags={['API', 'ROUTES']} />
+ * // Renders: [API][ROUTES] with spacing
+ * ```
+ */
+export declare const TagBadges: import("react").NamedExoticComponent<ITagBadgesProps>;
+/**
+ * Props for ContentTypeBadge component.
+ */
+export interface IContentTypeBadgeProps {
+    /** Content type of the log entry */
+    contentType: TContentType;
+    /** HTTP method (GET, POST, etc.) — shown instead of generic "HTTP" label */
+    httpMethod?: string;
+    /** Optional custom class name */
+    className?: string;
+}
+/**
+ * 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
+ * ```
+ */
+export declare const ContentTypeBadge: import("react").NamedExoticComponent<IContentTypeBadgeProps>;
+/**
+ * Props for LogLineContainer component.
+ */
+export interface ILogLineContainerProps {
+    /** Log level for styling */
+    level: TLogLevel;
+    /** Line number */
+    lineNumber: number;
+    /** Whether this is a continuation line */
+    isContinuation?: boolean;
+    /** Optional custom class name */
+    className?: string;
+    /** Child elements */
+    children: React.ReactNode;
+}
+/**
+ * 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>
+ * ```
+ */
+export declare function LogLineContainer({ level, lineNumber, isContinuation, className, children, }: ILogLineContainerProps): React.JSX.Element;
+//# sourceMappingURL=LogLineBadges.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogLineBadges.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/components/LogLineBadges.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAkB1D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU,wDAYrB,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,4DAiBzB,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,sDAenB,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,uDAUpB,CAAC;AA4BH;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,WAAW,EAAE,YAAY,CAAC;IAC1B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,gBAAgB,8DAsB3B,CAAC;AAEH;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,cAAsB,EACtB,SAAS,EACT,QAAQ,GACT,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiB5C"}

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