@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,58 @@
+/**
+ * xterm.js wrapper component.
+ *
+ * Encapsulates xterm.js initialization, addon loading,
+ * and cleanup following React best practices with proper
+ * ref management and effect hooks.
+ *
+ * @module components/devenv/terminal/xterm
+ */
+import { Terminal } from '@xterm/xterm';
+import type { ITerminalOptions, ITerminalTheme } from './Terminal.types';
+import '@xterm/xterm/css/xterm.css';
+/**
+ * Props for the XTermWrapper component.
+ */
+export interface IXTermWrapperProps {
+    /** Terminal initialization options */
+    options: ITerminalOptions;
+    /** Terminal theme (defaults to Synthwave if not provided) */
+    theme?: ITerminalTheme;
+    /** Callback when user types data in interactive mode */
+    onData?: (data: string) => void;
+    /** Callback when terminal is ready for interaction */
+    onReady?: (terminal: Terminal) => void;
+    /** Callback when terminal resizes */
+    onResize?: (cols: number, rows: number) => void;
+    /** Custom class name for the container */
+    className?: string;
+}
+/**
+ * xterm.js wrapper component.
+ *
+ * Manages xterm.js lifecycle including initialization, addon loading,
+ * WebSocket/SSE connections, and cleanup. Provides auto-resize via
+ * FitAddon and clickable URLs via WebLinksAddon.
+ *
+ * @example
+ * ```tsx
+ * <XTermWrapper
+ *   options={{ mode: 'interactive', wsUrl: 'ws://localhost:3100/terminal' }}
+ *   onData={(data) => console.log('User input:', data)}
+ *   onReady={(terminal) => console.log('Terminal ready')}
+ * />
+ * ```
+ */
+export declare function XTermWrapper({ options, theme, onData, onReady, onResize, className, }: IXTermWrapperProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Export search addon reference for external access.
+ *
+ * Allows parent components to trigger search in the terminal buffer.
+ */
+export declare function useTerminalSearch(terminalRef: React.RefObject<Terminal | null>): {
+    search: (_term: string, _options?: {
+        caseSensitive?: boolean;
+        regex?: boolean;
+    }) => false;
+};
+//# sourceMappingURL=TerminalXterm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalXterm.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/TerminalXterm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,4BAA4B,CAAC;AAEpC;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,OAAO,EAAE,gBAAgB,CAAC;IAE1B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhC,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEvC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,kBAAkB,2CAmJpB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;oBAC1C,MAAM,aAAa;QAAE,aAAa,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE;EAOnG"}

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

@@ -0,0 +1,143 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { SearchAddon } from "@xterm/addon-search";
+import { Unicode11Addon } from "@xterm/addon-unicode11";
+import "@xterm/xterm/css/xterm.css";
+
+//#region src/react-ui/blocks/Terminal/TerminalXterm.tsx
+/**
+* xterm.js wrapper component.
+*
+* Encapsulates xterm.js initialization, addon loading,
+* and cleanup following React best practices with proper
+* ref management and effect hooks.
+*
+* @module components/devenv/terminal/xterm
+*/
+/**
+* xterm.js wrapper component.
+*
+* Manages xterm.js lifecycle including initialization, addon loading,
+* WebSocket/SSE connections, and cleanup. Provides auto-resize via
+* FitAddon and clickable URLs via WebLinksAddon.
+*
+* @example
+* ```tsx
+* <XTermWrapper
+*   options={{ mode: 'interactive', wsUrl: 'ws://localhost:3100/terminal' }}
+*   onData={(data) => console.log('User input:', data)}
+*   onReady={(terminal) => console.log('Terminal ready')}
+* />
+* ```
+*/
+function XTermWrapper({ options, theme, onData, onReady, onResize, className }) {
+	const containerRef = useRef(null);
+	const terminalRef = useRef(null);
+	const fitAddonRef = useRef(null);
+	const searchAddonRef = useRef(null);
+	/**
+	* Handle terminal data input from user.
+	*/
+	const handleData = useCallback((data) => {
+		if (options.mode === "interactive" && onData) onData(data);
+	}, [options.mode, onData]);
+	/**
+	* Initialize xterm.js instance and load addons.
+	*
+	* Note: LigaturesAddon uses `fs` (Node.js module) internally,
+	* so it must be loaded via dynamic import to avoid SSR/bundler
+	* errors. All other addons are browser-safe static imports.
+	*/
+	useEffect(() => {
+		if (!containerRef.current) return;
+		let disposed = false;
+		const 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: theme ?? {},
+			convertEol: true,
+			allowProposedApi: true
+		});
+		const fitAddon = new FitAddon();
+		const webLinksAddon = new WebLinksAddon();
+		const searchAddon = new SearchAddon();
+		const unicode11Addon = new Unicode11Addon();
+		terminal.loadAddon(fitAddon);
+		terminal.loadAddon(webLinksAddon);
+		terminal.loadAddon(searchAddon);
+		terminal.loadAddon(unicode11Addon);
+		terminal.unicode.activeVersion = "11";
+		terminal.open(containerRef.current);
+		fitAddon.fit();
+		terminalRef.current = terminal;
+		fitAddonRef.current = fitAddon;
+		searchAddonRef.current = searchAddon;
+		import("@xterm/addon-ligatures").then(({ LigaturesAddon }) => {
+			if (disposed) return;
+			terminal.loadAddon(new LigaturesAddon());
+		}).catch(() => {});
+		if (options.mode === "interactive") terminal.onData(handleData);
+		onReady?.(terminal);
+		return () => {
+			disposed = true;
+			terminal.dispose();
+		};
+	}, []);
+	/**
+	* Handle window resize with auto-fit.
+	*/
+	useEffect(() => {
+		const handleResize = () => {
+			if (!fitAddonRef.current || !terminalRef.current) return;
+			const previousDims = {
+				cols: terminalRef.current.cols,
+				rows: terminalRef.current.rows
+			};
+			fitAddonRef.current.fit();
+			if (onResize && (terminalRef.current.cols !== previousDims.cols || terminalRef.current.rows !== previousDims.rows)) onResize(terminalRef.current.cols, terminalRef.current.rows);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, [onResize]);
+	/**
+	* Handle theme updates.
+	*/
+	useEffect(() => {
+		if (!terminalRef.current || !theme) return;
+		terminalRef.current.options.theme = theme;
+	}, [theme]);
+	/**
+	* Handle data callback updates.
+	*/
+	useEffect(() => {
+		if (!terminalRef.current) return;
+		terminalRef.current.onData(void 0);
+		if (options.mode === "interactive" && onData) terminalRef.current.onData(onData);
+	}, [options.mode, onData]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: className ?? "xterm-container w-full h-full",
+		style: { minHeight: "400px" },
+		"data-terminal-mode": options.mode ?? "interactive"
+	});
+}
+/**
+* Export search addon reference for external access.
+*
+* Allows parent components to trigger search in the terminal buffer.
+*/
+function useTerminalSearch(terminalRef) {
+	return { search: useCallback((_term, _options) => {
+		return false;
+	}, [terminalRef]) };
+}
+
+//#endregion
+export { XTermWrapper, useTerminalSearch };

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/chrome.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Terminal Chrome — lightweight barrel export.
+ *
+ * Exports only the glassmorphism shell components (no restty, no xterm).
+ * Use `@mks2508/mks-ui/react/blocks/Terminal/chrome` for zero terminal deps.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/chrome
+ */
+export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
+export { TerminalPanelHeader } from './panel/TerminalPanelHeader';
+export { TerminalPanelFooter } from './panel/TerminalPanelFooter';
+export { terminalChromeStyles, terminalChromeVariants, ACCENT_GRADIENTS, type TerminalChromeSlot, type TerminalChromeVariantProps, } from './panel/TerminalPanelChrome.styles';
+export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
+//# sourceMappingURL=chrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/chrome.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,gBAAgB,EAChB,KAAK,kBAAkB,EACvB,KAAK,0BAA0B,GAChC,MAAM,oCAAoC,CAAC;AAG5C,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}

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

@@ -0,0 +1,6 @@
+import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "./panel/TerminalPanelChrome.styles.js";
+import { TerminalPanelHeader } from "./panel/TerminalPanelHeader.js";
+import { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles } from "./panel/TerminalPanelChrome.js";
+import { TerminalPanelFooter } from "./panel/TerminalPanelFooter.js";
+
+export { ACCENT_GRADIENTS, NOISE_TEXTURE_SVG, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, terminalChromeStyles, terminalChromeVariants, terminalScrollStyles };

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").MemoExoticComponent<({ level, className }: ILevelBadgeProps) => React.JSX.Element>;
+/**
+ * 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").MemoExoticComponent<({ timestamp, className }: ITimestampBadgeProps) => React.JSX.Element>;
+/**
+ * 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").MemoExoticComponent<({ tag, className }: ITagBadgeProps) => React.JSX.Element>;
+/**
+ * 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").MemoExoticComponent<({ tags, className }: ITagBadgesProps) => React.JSX.Element | null>;
+/**
+ * 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").MemoExoticComponent<({ contentType, httpMethod, className, }: IContentTypeBadgeProps) => React.JSX.Element | null>;
+/**
+ * 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,6DAAkD,gBAAgB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAY3G,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,iEAA0D,oBAAoB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiB3H,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,2DAA8C,cAAc,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAenG,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,4DAAgD,eAAe,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAU9G,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,gFAI1B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAkBlD,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"}