@mks2508/mks-ui 0.3.2 → 0.4.0

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

@@ -0,0 +1,69 @@
+/**
+ * Global terminal settings hook with localStorage persistence.
+ *
+ * Manages renderer, PTY backend, theme, and font size preferences
+ * using `useSyncExternalStore` for SSR safety and cross-component sync.
+ *
+ * @module components/devenv/terminal/hooks/useTerminalSettings
+ */
+import type { ITerminalRendererType, ITerminalPtyBackendType } from '../Terminal.types';
+/**
+ * Persisted terminal settings.
+ */
+export interface ITerminalSettings {
+    /** Terminal renderer engine (default: 'xterm') */
+    renderer: ITerminalRendererType;
+    /** PTY backend type (default: 'nodepty') */
+    ptyBackend: ITerminalPtyBackendType;
+    /** Restty built-in theme name (default: 'Synthwave Alpha') */
+    resttyThemeName: string;
+    /** Font size in CSS pixels (default: 14) */
+    fontSize: number;
+    /** Enable CRT shader effects (scanlines, bloom, vignette) */
+    crtEffect: boolean;
+    /** Show debug panel below the terminal */
+    debugPanel: boolean;
+}
+/**
+ * Return type for the useTerminalSettings hook.
+ */
+export interface IUseTerminalSettingsReturn {
+    /** Current settings snapshot */
+    settings: ITerminalSettings;
+    /** Switch terminal renderer */
+    setRenderer: (renderer: ITerminalRendererType) => void;
+    /** Switch PTY backend */
+    setPtyBackend: (backend: ITerminalPtyBackendType) => void;
+    /** Set restty built-in theme by name */
+    setResttyThemeName: (name: string) => void;
+    /** Set font size (clamped to 10-24) */
+    setFontSize: (size: number) => void;
+    /** Toggle CRT shader effects (scanlines, bloom, vignette) */
+    setCrtEffect: (enabled: boolean) => void;
+    /** Toggle debug panel visibility */
+    setDebugPanel: (enabled: boolean) => void;
+    /** Reset all settings to defaults */
+    resetToDefaults: () => void;
+}
+/**
+ * Hook for reading and mutating global terminal settings.
+ *
+ * Settings persist to localStorage and sync across all components
+ * using `useSyncExternalStore`. SSR-safe via `getServerSnapshot`.
+ *
+ * @returns Settings state and mutation functions
+ *
+ * @example
+ * ```tsx
+ * const { settings, setRenderer, setResttyThemeName } = useTerminalSettings();
+ *
+ * // Read
+ * console.log(settings.renderer); // 'xterm' | 'restty'
+ *
+ * // Mutate — triggers re-render in all consumers
+ * setRenderer('restty');
+ * setResttyThemeName('Dracula');
+ * ```
+ */
+export declare function useTerminalSettings(): IUseTerminalSettingsReturn;
+//# sourceMappingURL=useTerminalSettings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTerminalSettings.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/useTerminalSettings.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAExF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kDAAkD;IAClD,QAAQ,EAAE,qBAAqB,CAAC;IAEhC,4CAA4C;IAC5C,UAAU,EAAE,uBAAuB,CAAC;IAEpC,8DAA8D;IAC9D,eAAe,EAAE,MAAM,CAAC;IAExB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IAEjB,6DAA6D;IAC7D,SAAS,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,gCAAgC;IAChC,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,+BAA+B;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAEvD,yBAAyB;IACzB,aAAa,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAE1D,wCAAwC;IACxC,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,uCAAuC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpC,6DAA6D;IAC7D,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC,oCAAoC;IACpC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAE1C,qCAAqC;IACrC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAwGD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,IAAI,0BAA0B,CA0ChE"}

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

@@ -0,0 +1,162 @@
+import { useCallback, useSyncExternalStore } from "react";
+
+//#region src/react-ui/blocks/Terminal/hooks/useTerminalSettings.ts
+/**
+* Global terminal settings hook with localStorage persistence.
+*
+* Manages renderer, PTY backend, theme, and font size preferences
+* using `useSyncExternalStore` for SSR safety and cross-component sync.
+*
+* @module components/devenv/terminal/hooks/useTerminalSettings
+*/
+/** localStorage key for terminal settings */
+const STORAGE_KEY = "mks-terminal-settings";
+/** Min/max font size bounds */
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+/**
+* Default terminal settings.
+*/
+const DEFAULT_SETTINGS = {
+	renderer: "xterm",
+	ptyBackend: "nodepty",
+	resttyThemeName: "Synthwave Alpha",
+	fontSize: 14,
+	crtEffect: false,
+	debugPanel: false
+};
+/** Set of subscribed listeners for useSyncExternalStore */
+const listeners = /* @__PURE__ */ new Set();
+/** Cached settings snapshot — avoids re-parsing on every subscribe call */
+let cachedSettings = null;
+/**
+* Notify all subscribers that settings have changed.
+*/
+function emitChange() {
+	cachedSettings = null;
+	for (const listener of listeners) listener();
+}
+/**
+* Read current settings from localStorage with fallback to defaults.
+*/
+function readSettings() {
+	if (cachedSettings) return cachedSettings;
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) {
+			cachedSettings = DEFAULT_SETTINGS;
+			return DEFAULT_SETTINGS;
+		}
+		const parsed = JSON.parse(raw);
+		cachedSettings = {
+			renderer: parsed.renderer === "restty" ? "restty" : "xterm",
+			ptyBackend: parsed.ptyBackend === "webcontainer" ? "webcontainer" : "nodepty",
+			resttyThemeName: typeof parsed.resttyThemeName === "string" ? parsed.resttyThemeName : DEFAULT_SETTINGS.resttyThemeName,
+			fontSize: typeof parsed.fontSize === "number" ? Math.min(MAX_FONT_SIZE, Math.max(MIN_FONT_SIZE, parsed.fontSize)) : DEFAULT_SETTINGS.fontSize,
+			crtEffect: typeof parsed.crtEffect === "boolean" ? parsed.crtEffect : DEFAULT_SETTINGS.crtEffect,
+			debugPanel: typeof parsed.debugPanel === "boolean" ? parsed.debugPanel : DEFAULT_SETTINGS.debugPanel
+		};
+		return cachedSettings;
+	} catch {
+		cachedSettings = DEFAULT_SETTINGS;
+		return DEFAULT_SETTINGS;
+	}
+}
+/**
+* Write settings to localStorage and notify subscribers.
+*
+* @param settings - Settings object to persist
+*/
+function writeSettings(settings) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+	} catch {}
+	emitChange();
+}
+/**
+* Subscribe function for useSyncExternalStore.
+*/
+function subscribe(listener) {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+/**
+* Snapshot function for useSyncExternalStore.
+*/
+function getSnapshot() {
+	return readSettings();
+}
+/**
+* Server snapshot — returns defaults (SSR-safe).
+*/
+function getServerSnapshot() {
+	return DEFAULT_SETTINGS;
+}
+/**
+* Hook for reading and mutating global terminal settings.
+*
+* Settings persist to localStorage and sync across all components
+* using `useSyncExternalStore`. SSR-safe via `getServerSnapshot`.
+*
+* @returns Settings state and mutation functions
+*
+* @example
+* ```tsx
+* const { settings, setRenderer, setResttyThemeName } = useTerminalSettings();
+*
+* // Read
+* console.log(settings.renderer); // 'xterm' | 'restty'
+*
+* // Mutate — triggers re-render in all consumers
+* setRenderer('restty');
+* setResttyThemeName('Dracula');
+* ```
+*/
+function useTerminalSettings() {
+	return {
+		settings: useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot),
+		setRenderer: useCallback((renderer) => {
+			writeSettings({
+				...readSettings(),
+				renderer
+			});
+		}, []),
+		setPtyBackend: useCallback((ptyBackend) => {
+			writeSettings({
+				...readSettings(),
+				ptyBackend
+			});
+		}, []),
+		setResttyThemeName: useCallback((resttyThemeName) => {
+			writeSettings({
+				...readSettings(),
+				resttyThemeName
+			});
+		}, []),
+		setFontSize: useCallback((fontSize) => {
+			const clamped = Math.min(MAX_FONT_SIZE, Math.max(MIN_FONT_SIZE, fontSize));
+			writeSettings({
+				...readSettings(),
+				fontSize: clamped
+			});
+		}, []),
+		setCrtEffect: useCallback((enabled) => {
+			writeSettings({
+				...readSettings(),
+				crtEffect: enabled
+			});
+		}, []),
+		setDebugPanel: useCallback((enabled) => {
+			writeSettings({
+				...readSettings(),
+				debugPanel: enabled
+			});
+		}, []),
+		resetToDefaults: useCallback(() => {
+			writeSettings({ ...DEFAULT_SETTINGS });
+		}, [])
+	};
+}
+
+//#endregion
+export { useTerminalSettings };

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

@@ -0,0 +1,104 @@
+/**
+ * useTerminalWebSocket Hook.
+ *
+ * Manages WebSocket lifecycle for interactive terminal connections.
+ * Handles connect, disconnect, auto-reconnect with exponential backoff,
+ * and message send/receive for terminal I/O.
+ *
+ * @module components/devenv/terminal/hooks/useTerminalWebSocket
+ */
+/**
+ * Connection status for terminal WebSocket.
+ */
+export type TTerminalWsStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+/**
+ * Options for useTerminalWebSocket hook.
+ */
+export interface IUseTerminalWebSocketOptions {
+    /** WebSocket URL (ws:// or wss://) */
+    wsUrl: string;
+    /** Enable auto-reconnect on disconnect (default: true) */
+    autoReconnect?: boolean;
+    /** Maximum reconnect attempts (default: 3) */
+    maxReconnectAttempts?: number;
+    /** Base delay for exponential backoff in ms (default: 500) */
+    baseReconnectDelay?: number;
+    /** Callback when connection opens */
+    onConnect?: () => void;
+    /** Callback when connection closes */
+    onDisconnect?: () => void;
+    /** Callback when output data is received */
+    onOutput?: (data: string) => void;
+    /** Callback when an error message is received */
+    onError?: (error: string) => void;
+    /** Callback when any server message is received */
+    onMessage?: (message: ITerminalWsServerMessage) => void;
+}
+/**
+ * Return value from useTerminalWebSocket hook.
+ */
+export interface IUseTerminalWebSocketReturn {
+    /** Current connection status */
+    status: TTerminalWsStatus;
+    /** Send raw input data to server */
+    sendInput: (data: string) => void;
+    /** Send resize event to server */
+    sendResize: (cols: number, rows: number) => void;
+    /** Send attach to session */
+    sendAttach: (sessionId: string) => void;
+    /** Send create session request */
+    sendCreate: (options?: {
+        name?: string;
+        workspaceId?: string;
+        cwd?: string;
+    }) => void;
+    /** Send kill session request */
+    sendKill: (sessionId: string) => void;
+    /** Send detach from current session */
+    sendDetach: () => void;
+    /** Manually reconnect */
+    reconnect: () => void;
+    /** Manually disconnect */
+    disconnect: () => void;
+}
+/**
+ * Server → Client message types.
+ */
+export interface ITerminalWsServerMessage {
+    type: 'welcome' | 'attached' | 'detached' | 'created' | 'output' | 'error' | 'sessions' | 'killed' | 'resized';
+    sessionId?: string;
+    session?: string;
+    data?: string;
+    error?: string;
+    sessions?: Array<{
+        id: string;
+        name: string;
+        isActive: boolean;
+    }>;
+}
+/**
+ * useTerminalWebSocket - WebSocket hook for interactive terminal connections.
+ *
+ * Manages the full WebSocket lifecycle including connection establishment,
+ * reconnection with exponential backoff, and typed message send/receive.
+ *
+ * @param options - Hook configuration options
+ * @returns Connection status and message send functions
+ *
+ * @example
+ * ```tsx
+ * const { status, sendInput, sendResize, sendAttach } = useTerminalWebSocket({
+ *   wsUrl: 'ws://localhost:3100/terminal/session-1',
+ *   onOutput: (data) => terminal.write(data),
+ *   onConnect: () => console.log('Connected'),
+ * });
+ *
+ * // Send user input
+ * terminal.onData((data) => sendInput(data));
+ *
+ * // Send resize
+ * terminal.onResize(({ cols, rows }) => sendResize(cols, rows));
+ * ```
+ */
+export declare function useTerminalWebSocket(options: IUseTerminalWebSocketOptions): IUseTerminalWebSocketReturn;
+//# sourceMappingURL=useTerminalWebSocket.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTerminalWebSocket.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/hooks/useTerminalWebSocket.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAAC;AAEtF;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,8CAA8C;IAC9C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,8DAA8D;IAC9D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,mDAAmD;IACnD,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACzD;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,gCAAgC;IAChC,MAAM,EAAE,iBAAiB,CAAC;IAE1B,oCAAoC;IACpC,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,kCAAkC;IAClC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,6BAA6B;IAC7B,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,kCAAkC;IAClC,UAAU,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAEtF,gCAAgC;IAChC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,uCAAuC;IACvC,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,yBAAyB;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;IAEtB,0BAA0B;IAC1B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC/G,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACnE;AAcD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,4BAA4B,GAAG,2BAA2B,CAgKvG"}

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

@@ -0,0 +1,180 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/react-ui/blocks/Terminal/hooks/useTerminalWebSocket.ts
+/**
+* useTerminalWebSocket Hook.
+*
+* Manages WebSocket lifecycle for interactive terminal connections.
+* Handles connect, disconnect, auto-reconnect with exponential backoff,
+* and message send/receive for terminal I/O.
+*
+* @module components/devenv/terminal/hooks/useTerminalWebSocket
+*/
+/**
+* useTerminalWebSocket - WebSocket hook for interactive terminal connections.
+*
+* Manages the full WebSocket lifecycle including connection establishment,
+* reconnection with exponential backoff, and typed message send/receive.
+*
+* @param options - Hook configuration options
+* @returns Connection status and message send functions
+*
+* @example
+* ```tsx
+* const { status, sendInput, sendResize, sendAttach } = useTerminalWebSocket({
+*   wsUrl: 'ws://localhost:3100/terminal/session-1',
+*   onOutput: (data) => terminal.write(data),
+*   onConnect: () => console.log('Connected'),
+* });
+*
+* // Send user input
+* terminal.onData((data) => sendInput(data));
+*
+* // Send resize
+* terminal.onResize(({ cols, rows }) => sendResize(cols, rows));
+* ```
+*/
+function useTerminalWebSocket(options) {
+	const { wsUrl, autoReconnect = true, maxReconnectAttempts = 3, baseReconnectDelay = 500, onConnect, onDisconnect, onOutput, onError, onMessage } = options;
+	const [status, setStatus] = useState("disconnected");
+	const wsRef = useRef(null);
+	const reconnectAttemptsRef = useRef(0);
+	const reconnectTimerRef = useRef(null);
+	const intentionalCloseRef = useRef(false);
+	/**
+	* Send a typed message over the WebSocket.
+	*/
+	const sendMessage = useCallback((message) => {
+		if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(JSON.stringify(message));
+	}, []);
+	/**
+	* Connect to the WebSocket server.
+	*/
+	const connect = useCallback(() => {
+		if (wsRef.current) {
+			intentionalCloseRef.current = true;
+			wsRef.current.close();
+			wsRef.current = null;
+		}
+		intentionalCloseRef.current = false;
+		setStatus("connecting");
+		const ws = new WebSocket(wsUrl);
+		wsRef.current = ws;
+		ws.onopen = () => {
+			setStatus("connected");
+			reconnectAttemptsRef.current = 0;
+			onConnect?.();
+		};
+		ws.onmessage = (event) => {
+			try {
+				const message = JSON.parse(typeof event.data === "string" ? event.data : event.data.toString());
+				onMessage?.(message);
+				switch (message.type) {
+					case "output":
+						if (message.data) onOutput?.(message.data);
+						break;
+					case "error":
+						if (message.error) onError?.(message.error);
+						break;
+					default: break;
+				}
+			} catch {
+				onOutput?.(typeof event.data === "string" ? event.data : event.data.toString());
+			}
+		};
+		ws.onerror = () => {
+			setStatus("error");
+		};
+		ws.onclose = () => {
+			wsRef.current = null;
+			if (intentionalCloseRef.current) {
+				setStatus("disconnected");
+				onDisconnect?.();
+				return;
+			}
+			setStatus("disconnected");
+			onDisconnect?.();
+			if (autoReconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
+				const delay = baseReconnectDelay * Math.pow(2, reconnectAttemptsRef.current);
+				reconnectAttemptsRef.current += 1;
+				reconnectTimerRef.current = setTimeout(() => {
+					connect();
+				}, delay);
+			}
+		};
+	}, [
+		wsUrl,
+		autoReconnect,
+		maxReconnectAttempts,
+		baseReconnectDelay,
+		onConnect,
+		onDisconnect,
+		onOutput,
+		onError,
+		onMessage
+	]);
+	/**
+	* Disconnect from the WebSocket server.
+	*/
+	const disconnect = useCallback(() => {
+		if (reconnectTimerRef.current) {
+			clearTimeout(reconnectTimerRef.current);
+			reconnectTimerRef.current = null;
+		}
+		intentionalCloseRef.current = true;
+		reconnectAttemptsRef.current = maxReconnectAttempts;
+		if (wsRef.current) {
+			wsRef.current.close();
+			wsRef.current = null;
+		}
+		setStatus("disconnected");
+	}, [maxReconnectAttempts]);
+	/**
+	* Manually trigger reconnection.
+	*/
+	const reconnect = useCallback(() => {
+		reconnectAttemptsRef.current = 0;
+		connect();
+	}, [connect]);
+	useEffect(() => {
+		connect();
+		return () => {
+			if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
+			intentionalCloseRef.current = true;
+			wsRef.current?.close();
+			wsRef.current = null;
+		};
+	}, [connect]);
+	return {
+		status,
+		sendInput: useCallback((data) => sendMessage({
+			type: "input",
+			data
+		}), [sendMessage]),
+		sendResize: useCallback((cols, rows) => sendMessage({
+			type: "resize",
+			cols,
+			rows
+		}), [sendMessage]),
+		sendAttach: useCallback((sessionId) => sendMessage({
+			type: "attach",
+			session: sessionId
+		}), [sendMessage]),
+		sendCreate: useCallback((opts) => sendMessage({
+			type: "create",
+			...opts
+		}), [sendMessage]),
+		sendKill: useCallback((sessionId) => sendMessage({
+			type: "kill",
+			session: sessionId
+		}), [sendMessage]),
+		sendDetach: useCallback(() => sendMessage({ type: "detach" }), [sendMessage]),
+		reconnect,
+		disconnect
+	};
+}
+
+//#endregion
+export { useTerminalWebSocket };

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

@@ -0,0 +1,39 @@
+/**
+ * Terminal Block barrel export.
+ *
+ * Full-featured terminal UI with xterm.js and restty GPU renderers,
+ * log parsing, ANSI handling, multi-session panels, and glassmorphism chrome.
+ *
+ * NOTE: This module uses xterm.js/restty which are browser-only.
+ * Consumers must load this module client-side only (e.g. next/dynamic with { ssr: false }).
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal
+ */
+export { TerminalPanel, type ITerminalPanelProps } from './TerminalPanel';
+export * from './parsing';
+export * from './components';
+export { useTerminalWebSocket, type IUseTerminalWebSocketOptions, type IUseTerminalWebSocketReturn, type ITerminalWsServerMessage, type TTerminalWsStatus, useTerminalSettings, type ITerminalSettings, type IUseTerminalSettingsReturn, } from './hooks';
+export { TerminalLogsPanel } from './panel/TerminalLogsPanel';
+export { TerminalInteractivePanel } from './panel/TerminalInteractivePanel';
+export { TerminalInteractivePanelRestty } from './panel/TerminalInteractivePanelRestty';
+export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
+export { TerminalPanelHeader } from './panel/TerminalPanelHeader';
+export { TerminalPanelFooter } from './panel/TerminalPanelFooter';
+export { LogLinesViewer } from './panel/LogLinesViewer';
+export { TerminalSettingsPopover } from './panel/TerminalSettingsPopover';
+export { TerminalThemeSelector } from './panel/TerminalThemeSelector';
+export { ResttyAdapter } from './ResttyAdapter';
+export { TerminalRestty, type ITerminalResttyProps, type ITerminalResttyRef } from './TerminalRestty';
+export { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from './Terminal.theme';
+export { hexToResttyColor, xtermThemeToGhostty, getSynthwaveGhosttyTheme, type IResttyThemeColor, type IResttyGhosttyTheme, } from './Terminal.theme.restty';
+export { createTerminalAdapter, createTerminalAdapterForRenderer } from './Terminal.adapter';
+export { XTermAdapter } from './XTermAdapter';
+export { XTermWrapper, type IXTermWrapperProps, useTerminalSearch } from './TerminalXterm';
+export type { ITerminalRendererType, ITerminalPtyBackendType, ITerminalBackendType, ITerminalMode, ITerminalConnectionStatus, ITerminalSession, ITerminalOptions, ITerminalTheme, ITerminalAdapter, ITerminalAdapterCapabilities, IPtyTransport, IPtyTransportFactory, IPtyTransportCallbacks, IPtyTransportConnectOptions, } from './Terminal.types';
+export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
+export type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './panel/TerminalInteractivePanel.types';
+export type { ITerminalThemeSelectorProps } from './panel/TerminalThemeSelector';
+export type { ITerminalLogsPanelProps, ITerminalLogsPanelRef, ITerminalPanelHeaderProps, ITerminalPanelToolbarProps, ITerminalPanelFooterProps, ILevelFilterButton, TTerminalAction, } from './panel/TerminalLogsPanel.types';
+export type { ILogLinesViewerProps } from './panel/LogLinesViewer';
+export type { TLogLevelFilter } from './parsing/LogParser.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAE,aAAa,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAG1E,cAAc,WAAW,CAAC;AAG1B,cAAc,cAAc,CAAC;AAG7B,OAAO,EACL,oBAAoB,EACpB,KAAK,4BAA4B,EACjC,KAAK,2BAA2B,EAChC,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,EACtB,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,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;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,cAAc,EAAE,KAAK,oBAAoB,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtG,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAG9E,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,EACxB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,qBAAqB,EAAE,gCAAgC,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAG3F,YAAY,EACV,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,aAAa,EACb,yBAAyB,EACzB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,4BAA4B,EAC5B,aAAa,EACb,oBAAoB,EACpB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AACnF,YAAY,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAC3H,YAAY,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACjF,YAAY,EACV,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,eAAe,GAChB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC"}

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

@@ -0,0 +1,38 @@
+import { XTermWrapper, useTerminalSearch } from "./TerminalXterm.js";
+import { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from "./Terminal.theme.js";
+import { TerminalPanel } from "./TerminalPanel.js";
+import { ANSI_COLOR_MAP, ANSI_INTRODUCERS, ANSI_MODIFIERS, ANSI_PATTERNS, LOG_LEVEL_ANSI_COLORS, SGR_CODES, SYNTHWAVE_ANSI_COLORS } from "./parsing/ansi/ansi.constants.js";
+import { AnsiColorMapper } from "./parsing/ansi/AnsiColorMapper.js";
+import { AnsiParser } from "./parsing/ansi/AnsiParser.js";
+import { LogLevelDetector } from "./parsing/levels/LogLevelDetector.js";
+import { BadgeFormatter } from "./parsing/BadgeFormatter.js";
+import { MultilineAggregator } from "./parsing/MultilineAggregator.js";
+import { LogParserService } from "./parsing/LogParserService.js";
+import { SyntaxHighlighter } from "./parsing/SyntaxHighlighter.js";
+import { PersistentLogBuffer, createPersistentLogBuffer } from "./parsing/PersistentLogBuffer.js";
+import { HttpLogParser } from "./parsing/HttpLogParser.js";
+import { TABLE_CHARS, TableParser, createTableParser } from "./parsing/TableParser.js";
+import { ContentTypeBadge, LevelBadge, LogLineContainer, TagBadge, TagBadges, TimestampBadge } from "./components/LogLineBadges.js";
+import { HighlightedJson, SyntaxHighlightedText, clearHighlightCache } from "./components/SyntaxHighlight.js";
+import { SpecializedSyntaxHighlighter } from "./components/SpecializedSyntaxHighlighter.js";
+import { TerminalLogBadge } from "./components/TerminalLogBadge.js";
+import "./components/index.js";
+import { useTerminalWebSocket } from "./hooks/useTerminalWebSocket.js";
+import { useTerminalSettings } from "./hooks/useTerminalSettings.js";
+import "./hooks/index.js";
+import { TerminalPanelHeader } from "./panel/TerminalPanelHeader.js";
+import { NOISE_TEXTURE_SVG, TerminalPanelChrome, terminalScrollStyles } from "./panel/TerminalPanelChrome.js";
+import { TerminalPanelFooter } from "./panel/TerminalPanelFooter.js";
+import { LogLinesViewer } from "./panel/LogLinesViewer.js";
+import { TerminalLogsPanel } from "./panel/TerminalLogsPanel.js";
+import { TerminalInteractivePanel } from "./panel/TerminalInteractivePanel.js";
+import { getSynthwaveGhosttyTheme, hexToResttyColor, xtermThemeToGhostty } from "./Terminal.theme.restty.js";
+import { TerminalRestty } from "./TerminalRestty.js";
+import { TerminalThemeSelector } from "./panel/TerminalThemeSelector.js";
+import { TerminalSettingsPopover } from "./panel/TerminalSettingsPopover.js";
+import { TerminalInteractivePanelRestty } from "./panel/TerminalInteractivePanelRestty.js";
+import { ResttyAdapter } from "./ResttyAdapter.js";
+import { createTerminalAdapter, createTerminalAdapterForRenderer } from "./Terminal.adapter.js";
+import { XTermAdapter } from "./XTermAdapter.js";
+
+export { ANSI_COLOR_MAP, ANSI_INTRODUCERS, ANSI_MODIFIERS, ANSI_PATTERNS, AnsiColorMapper, AnsiParser, BadgeFormatter, ContentTypeBadge, HighlightedJson, HttpLogParser, LOG_LEVEL_ANSI_COLORS, LevelBadge, LogLevelDetector, LogLineContainer, LogLinesViewer, LogParserService, MultilineAggregator, NOISE_TEXTURE_SVG, PersistentLogBuffer, ResttyAdapter, SGR_CODES, SYNTHWAVE_ANSI_COLORS, SYNTHWAVE_TERMINAL_THEME, SpecializedSyntaxHighlighter, SyntaxHighlightedText, SyntaxHighlighter, TABLE_CHARS, TableParser, TagBadge, TagBadges, TerminalInteractivePanel, TerminalInteractivePanelRestty, TerminalLogBadge, TerminalLogsPanel, TerminalPanel, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalRestty, TerminalSettingsPopover, TerminalThemeSelector, TimestampBadge, XTermAdapter, XTermWrapper, clearHighlightCache, createPersistentLogBuffer, createTableParser, createTerminalAdapter, createTerminalAdapterForRenderer, getSynthwaveGhosttyTheme, getTerminalTheme, hexToResttyColor, terminalScrollStyles, useTerminalSearch, useTerminalSettings, useTerminalWebSocket, xtermThemeToGhostty };

package/dist/react-ui/blocks/Terminal/panel/LogLinesViewer.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Log lines viewer component (React mode).
+ *
+ * Displays parsed log entries with React components for:
+ * - Level badges with CSS styling
+ * - Syntax highlighted spans
+ * - Timestamps right-aligned
+ * - Virtual scrolling with @tanstack/react-virtual
+ * - Auto-scroll to bottom when following logs
+ *
+ * @module components/devenv/terminal/panel/LogLinesViewer
+ */
+import type { IParsedLogEntry, TLogLevel } from '../parsing';
+/**
+ * Props for LogLinesViewer component.
+ */
+export interface ILogLinesViewerProps {
+    /** Parsed log entries to display */
+    entries: IParsedLogEntry[];
+    /** Current log level filter */
+    filterLevel: TLogLevel | 'all';
+    /** Level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** Optional custom class name */
+    className?: string;
+    /** Whether to show line numbers */
+    showLineNumbers?: boolean;
+    /** Whether to enable syntax highlighting */
+    enableSyntaxHighlight?: boolean;
+    /** Whether to auto-scroll to bottom when new entries arrive */
+    followCursor?: boolean;
+    /** Callback when scroll position changes (optional) */
+    onScrollToBottom?: () => void;
+}
+/**
+ * Log lines viewer component.
+ *
+ * Displays parsed log entries with React components:
+ * - Level badges (colored based on log level)
+ * - Syntax highlighted message content
+ * - Timestamps right-aligned
+ * - Tag badges for component identification
+ * - Virtual scrolling for performance with large logs
+ * - Auto-scroll to bottom when following logs
+ *
+ * @example
+ * ```tsx
+ * <LogLinesViewer
+ *   entries={parsedEntries}
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3 }}
+ *   showLineNumbers={true}
+ *   followCursor={true}
+ * />
+ * ```
+ */
+export declare function LogLinesViewer({ entries, filterLevel, levelCounts, className, showLineNumbers, enableSyntaxHighlight, followCursor, onScrollToBottom, }: ILogLinesViewerProps): React.JSX.Element;
+//# sourceMappingURL=LogLinesViewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogLinesViewer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/LogLinesViewer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAW7D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAE3B,+BAA+B;IAC/B,WAAW,EAAE,SAAS,GAAG,KAAK,CAAC;IAE/B,8BAA8B;IAC9B,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,4CAA4C;IAC5C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAkBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAuB,EACvB,qBAA4B,EAC5B,YAAoB,EACpB,gBAAgB,GACjB,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyG1C"}