@mks2508/mks-ui 0.3.1 → 0.4.0

package/dist/react-ui/blocks/Terminal/Terminal.theme.restty.js

@@ -0,0 +1,109 @@
+import { SYNTHWAVE_TERMINAL_THEME } from "./Terminal.theme.js";
+
+//#region src/react-ui/blocks/Terminal/Terminal.theme.restty.ts
+/**
+* Convert a hex color string (#RRGGBB or #RGB) to restty's ThemeColor format.
+*
+* @param hex - Hex color string (e.g., '#D40C67', '#fff')
+* @returns RGB color object with channels 0-255
+*/
+function hexToResttyColor(hex) {
+	let clean = hex.replace("#", "");
+	if (clean.length === 3) clean = clean[0] + clean[0] + clean[1] + clean[1] + clean[2] + clean[2];
+	return {
+		r: parseInt(clean.slice(0, 2), 16),
+		g: parseInt(clean.slice(2, 4), 16),
+		b: parseInt(clean.slice(4, 6), 16)
+	};
+}
+/**
+* Convert an rgba() color string to restty's ThemeColor format.
+* Falls back to opaque white for unparseable values.
+*
+* @param rgba - CSS rgba() string (e.g., 'rgba(0, 217, 255, 0.3)')
+* @returns RGB color object
+*/
+function rgbaToResttyColor(rgba) {
+	const match = rgba.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);
+	if (!match) return {
+		r: 255,
+		g: 255,
+		b: 255
+	};
+	return {
+		r: parseInt(match[1], 10),
+		g: parseInt(match[2], 10),
+		b: parseInt(match[3], 10),
+		a: match[4] ? Math.round(parseFloat(match[4]) * 255) : void 0
+	};
+}
+/**
+* Parse any CSS color value (hex or rgba) to restty ThemeColor.
+*
+* @param color - CSS color string
+* @returns RGB color object
+*/
+function cssColorToResttyColor(color) {
+	if (color.startsWith("#")) return hexToResttyColor(color);
+	if (color.startsWith("rgb")) return rgbaToResttyColor(color);
+	return {
+		r: 255,
+		g: 255,
+		b: 255
+	};
+}
+/**
+* Convert ITerminalTheme (xterm.js format) to GhosttyTheme (restty format).
+*
+* Maps the 16-color ANSI palette plus background, foreground, cursor,
+* and selection colors to restty's Ghostty theme structure.
+*
+* @param theme - xterm.js theme with hex color values
+* @returns Ghostty theme compatible with restty's applyTheme()
+*/
+function xtermThemeToGhostty(theme) {
+	const palette = new Array(256).fill(void 0);
+	palette[0] = hexToResttyColor(theme.black);
+	palette[1] = hexToResttyColor(theme.red);
+	palette[2] = hexToResttyColor(theme.green);
+	palette[3] = hexToResttyColor(theme.yellow);
+	palette[4] = hexToResttyColor(theme.blue);
+	palette[5] = hexToResttyColor(theme.magenta);
+	palette[6] = hexToResttyColor(theme.cyan);
+	palette[7] = hexToResttyColor(theme.white);
+	palette[8] = hexToResttyColor(theme.brightBlack);
+	palette[9] = hexToResttyColor(theme.brightRed);
+	palette[10] = hexToResttyColor(theme.brightGreen);
+	palette[11] = hexToResttyColor(theme.brightYellow);
+	palette[12] = hexToResttyColor(theme.brightBlue);
+	palette[13] = hexToResttyColor(theme.brightMagenta);
+	palette[14] = hexToResttyColor(theme.brightCyan);
+	palette[15] = hexToResttyColor(theme.brightWhite);
+	return {
+		name: "Synthwave Industrial Dark",
+		colors: {
+			background: hexToResttyColor(theme.background),
+			foreground: hexToResttyColor(theme.foreground),
+			cursor: hexToResttyColor(theme.cursor),
+			cursorText: theme.cursorAccent ? hexToResttyColor(theme.cursorAccent) : void 0,
+			selectionBackground: theme.selectionBackground ? cssColorToResttyColor(theme.selectionBackground) : void 0,
+			selectionForeground: theme.selectionForeground ? cssColorToResttyColor(theme.selectionForeground) : void 0,
+			palette
+		},
+		raw: {}
+	};
+}
+/**
+* Get the Synthwave Industrial Dark theme in Ghostty format for restty.
+*
+* Pre-built conversion of the default terminal theme, ready to pass
+* directly to `restty.applyTheme()`.
+*
+* @returns GhosttyTheme with Synthwave colors
+*/
+function getSynthwaveGhosttyTheme() {
+	return xtermThemeToGhostty(SYNTHWAVE_TERMINAL_THEME);
+}
+
+//#endregion
+export { getSynthwaveGhosttyTheme, hexToResttyColor, xtermThemeToGhostty };

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

@@ -0,0 +1,351 @@
+/**
+ * Terminal component types.
+ *
+ * Provides interfaces for the terminal component system supporting
+ * multiple renderers (xterm.js, restty) and PTY backends (node-pty,
+ * WebContainer) with configurable modes (interactive, read-only)
+ * and connection statuses.
+ *
+ * @module components/devenv/terminal/types
+ */
+/**
+ * Terminal renderer type - determines the rendering engine.
+ *
+ * - `xterm`: xterm.js DOM/canvas renderer (default, recommended for compatibility)
+ * - `restty`: GPU-accelerated WebGPU/WebGL2 renderer via restty with libghostty-vt WASM core
+ */
+export type ITerminalRendererType = 'xterm' | 'restty';
+/**
+ * Terminal PTY backend type - determines what drives the terminal server-side.
+ *
+ * - `nodepty`: node-pty via WebSocket (default, used by mks-devenv agent-backend)
+ * - `webcontainer`: @webcontainer/api for in-browser Node.js runtime
+ */
+export type ITerminalPtyBackendType = 'nodepty' | 'webcontainer';
+/**
+ * Terminal backend type - determines the rendering engine.
+ *
+ * @deprecated Use {@link ITerminalRendererType} for renderer selection
+ * and {@link ITerminalPtyBackendType} for backend selection instead.
+ *
+ * - `xterm`: xterm.js with WebSocket/SSE support (recommended)
+ * - `webcontainer`: @webcontainer/api for full Node.js in browser
+ * - `monaco`: Monaco Editor for Code-Server/Claude Code integration
+ */
+export type ITerminalBackendType = 'xterm' | 'webcontainer' | 'monaco';
+/**
+ * Terminal mode - determines user interaction capabilities.
+ *
+ * - `interactive`: Full terminal with input/output via WebSocket
+ * - `readonly`: Output-only mode via SSE for logs viewing
+ */
+export type ITerminalMode = 'interactive' | 'readonly';
+/**
+ * Connection status for WebSocket/SSE connections.
+ *
+ * Connection lifecycle states for terminal session management.
+ */
+export type ITerminalConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+/**
+ * Terminal session information.
+ *
+ * Represents an active terminal session with metadata for
+ * multi-session management in the UI.
+ */
+export interface ITerminalSession {
+    /** Unique session identifier */
+    id: string;
+    /** Display name for the session (e.g., container name, workspace path) */
+    name: string;
+    /** Backend type rendering this session */
+    backend: ITerminalBackendType;
+    /** Renderer type for this session (default: 'xterm') */
+    renderer?: ITerminalRendererType;
+    /** Interaction mode for this session */
+    mode: ITerminalMode;
+    /** Current connection status */
+    status: ITerminalConnectionStatus;
+    /** Session creation timestamp */
+    createdAt: Date;
+    /** WebSocket URL for interactive mode (optional) */
+    wsUrl?: string;
+    /** SSE URL for readonly mode (optional) */
+    sseUrl?: string;
+}
+/**
+ * Terminal options for initialization.
+ *
+ * Configuration options passed to terminal backends during
+ * initialization. Includes xterm.js-specific options,
+ * WebSocket/SSE URLs, and lifecycle callbacks.
+ */
+export interface ITerminalOptions {
+    /** Renderer type to use (default: 'xterm') */
+    renderer?: ITerminalRendererType;
+    /** PTY backend type (default: 'nodepty') */
+    ptyBackend?: ITerminalPtyBackendType;
+    /**
+     * Backend type to use (default: 'xterm').
+     * @deprecated Use {@link renderer} instead.
+     */
+    backend?: ITerminalBackendType;
+    /** Terminal mode (default: 'interactive') */
+    mode?: ITerminalMode;
+    /** Enable cursor blink animation (default: true) */
+    cursorBlink?: boolean;
+    /** Scrollback buffer size in lines (default: 1000) */
+    scrollback?: number;
+    /** Font size in pixels (default: 14) */
+    fontSize?: number;
+    /** Font family string (default: 'JetBrains Mono') */
+    fontFamily?: string;
+    /** Terminal theme colors */
+    theme?: ITerminalTheme;
+    /** WebSocket URL for interactive mode (ws:// or wss://) */
+    wsUrl?: string;
+    /** SSE URL for readonly mode (http:// or https://) */
+    sseUrl?: string;
+    /** Called when user types input in interactive mode */
+    onData?: (data: string) => void;
+    /** Called on connection errors */
+    onError?: (error: Error) => void;
+    /** Called when connection closes */
+    onClose?: () => void;
+}
+/**
+ * Terminal theme matching Synthwave design system.
+ *
+ * Color palette for xterm.js rendering. Matches the mks-dev-environment
+ * design system from globals.css with background #241B2F, primary #D40C67,
+ * and success #44ffaa.
+ */
+export interface ITerminalTheme {
+    /** Background color (default: #241B2F - synthwave dark) */
+    background: string;
+    /** Default text color (default: #e8e8ec) */
+    foreground: string;
+    /** Cursor color (default: #D40C67 - primary magenta) */
+    cursor: string;
+    /** Cursor accent color for block cursor (optional) */
+    cursorAccent?: string;
+    /** Selection background color (optional) */
+    selectionBackground?: string;
+    /** Selection foreground color (optional, restty v0.1.24+) */
+    selectionForeground?: string;
+    /** ANSI color: black */
+    black: string;
+    /** ANSI color: red */
+    red: string;
+    /** ANSI color: green */
+    green: string;
+    /** ANSI color: yellow */
+    yellow: string;
+    /** ANSI color: blue */
+    blue: string;
+    /** ANSI color: magenta */
+    magenta: string;
+    /** ANSI color: cyan */
+    cyan: string;
+    /** ANSI color: white */
+    white: string;
+    /** ANSI bright color: bright black */
+    brightBlack: string;
+    /** ANSI bright color: bright red */
+    brightRed: string;
+    /** ANSI bright color: bright green */
+    brightGreen: string;
+    /** ANSI bright color: bright yellow */
+    brightYellow: string;
+    /** ANSI bright color: bright blue */
+    brightBlue: string;
+    /** ANSI bright color: bright magenta */
+    brightMagenta: string;
+    /** ANSI bright color: bright cyan */
+    brightCyan: string;
+    /** ANSI bright color: bright white */
+    brightWhite: string;
+}
+/**
+ * Capabilities that a terminal adapter supports.
+ *
+ * Used for runtime feature detection to adapt UI behavior
+ * based on the underlying renderer's capabilities.
+ */
+export interface ITerminalAdapterCapabilities {
+    /** Whether the adapter manages its own PTY WebSocket connection */
+    managesOwnConnection: boolean;
+    /** Whether the adapter supports GPU-accelerated rendering */
+    gpuRendering: boolean;
+    /** Whether the adapter supports built-in multi-pane splits */
+    multiPane: boolean;
+    /** Whether the adapter has a built-in theme catalog */
+    builtinThemes: boolean;
+}
+/**
+ * Terminal adapter interface - allows pluggable renderers.
+ *
+ * Abstraction layer for different terminal renderers (xterm.js, restty).
+ * All renderers must implement the core methods. Optional methods provide
+ * access to renderer-specific features when available (check `capabilities`).
+ */
+export interface ITerminalAdapter {
+    /** Backend type identifier */
+    type: ITerminalBackendType;
+    /** Adapter capabilities for runtime feature detection */
+    readonly capabilities: ITerminalAdapterCapabilities;
+    /**
+     * Initialize the terminal in the given container element.
+     *
+     * @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.
+     * No-op for adapters that manage their own PTY connection (e.g. restty).
+     *
+     * @param data - String data to write
+     */
+    write(data: string): void;
+    /**
+     * Write data to the terminal with newline.
+     * No-op for adapters that manage their own PTY connection (e.g. restty).
+     *
+     * @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;
+    /**
+     * Connect to a PTY backend via WebSocket URL.
+     * Only applicable when capabilities.managesOwnConnection is true.
+     *
+     * @param url - WebSocket URL for PTY connection
+     */
+    connectPty?(url: string): void;
+    /**
+     * Disconnect from the PTY backend.
+     * Only applicable when capabilities.managesOwnConnection is true.
+     */
+    disconnectPty?(): void;
+    /**
+     * Check if PTY WebSocket is connected.
+     * Only applicable when capabilities.managesOwnConnection is true.
+     */
+    isPtyConnected?(): boolean;
+    /**
+     * Update font size at runtime.
+     *
+     * @param size - Font size in pixels
+     */
+    setFontSize?(size: number): void;
+    /**
+     * Send raw input data to the terminal PTY.
+     * For adapters that manage their own connection.
+     *
+     * @param data - Input data string
+     */
+    sendInput?(data: string): void;
+    /**
+     * Copy the current text selection to the clipboard.
+     *
+     * @returns Whether the copy succeeded
+     */
+    copySelection?(): Promise<boolean>;
+    /**
+     * Paste clipboard contents into the terminal.
+     *
+     * @returns Whether the paste succeeded
+     */
+    pasteClipboard?(): Promise<boolean>;
+}
+/**
+ * PTY transport callbacks matching restty's PtyCallbacks contract.
+ * Consumers implement these to receive terminal events.
+ */
+export interface IPtyTransportCallbacks {
+    /** Called when WebSocket connection opens */
+    onConnect?: () => void;
+    /** Called when WebSocket connection closes */
+    onDisconnect?: () => void;
+    /** Called with terminal output data */
+    onData?: (data: string) => void;
+    /** Called when the server reports PTY status (shell name) */
+    onStatus?: (shell: string) => void;
+    /** Called when the server reports an error */
+    onError?: (message: string, errors?: string[]) => void;
+    /** Called when the PTY process exits */
+    onExit?: (code: number) => void;
+}
+/**
+ * PTY transport connect options matching restty's PtyConnectOptions.
+ */
+export interface IPtyTransportConnectOptions {
+    /** WebSocket URL (ws:// or wss://) */
+    url: string;
+    /** Initial terminal width in columns */
+    cols?: number;
+    /** Initial terminal height in rows */
+    rows?: number;
+    /** Event callbacks for connection lifecycle and data */
+    callbacks: IPtyTransportCallbacks;
+}
+/**
+ * PTY transport interface matching restty's expected contract.
+ * Consumers provide a custom implementation to bridge their WebSocket protocol.
+ */
+export interface IPtyTransport {
+    /** Open a connection to the PTY server */
+    connect: (options: IPtyTransportConnectOptions) => void;
+    /** Close the current connection */
+    disconnect: () => void;
+    /** Send terminal input data to the server */
+    sendInput: (data: string) => boolean;
+    /** Send terminal resize notification to the server */
+    resize: (cols: number, rows: number) => boolean;
+    /** Check if the transport is currently connected */
+    isConnected: () => boolean;
+    /** Release all resources held by the transport */
+    destroy: () => void;
+}
+/**
+ * Factory function that creates a PTY transport instance.
+ * Consumers inject this to provide custom WebSocket protocol bridging.
+ *
+ * @example
+ * ```ts
+ * // In mks-devenv consumer:
+ * const factory: IPtyTransportFactory = () => createDevenvPtyTransport();
+ * <TerminalRestty createPtyTransport={factory} wsUrl={wsUrl} />
+ * ```
+ */
+export type IPtyTransportFactory = () => IPtyTransport;
+//# sourceMappingURL=Terminal.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/Terminal.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,60 @@
+/**
+ * Terminal Panel Component.
+ *
+ * Main UI component with toolbar, terminal display, and status indicator.
+ * Configurable backend adapter (xterm.js, WebContainer, Monaco) with
+ * Synthwave Industrial Dark theme matching the design system.
+ *
+ * @module components/devenv/terminal
+ */
+import type { ITerminalBackendType, ITerminalMode } from './Terminal.types';
+/**
+ * Props for the TerminalPanel component.
+ */
+export interface ITerminalPanelProps {
+    /** Backend type to use (default: 'xterm') */
+    backend?: ITerminalBackendType;
+    /** Terminal mode (default: 'interactive') */
+    mode?: ITerminalMode;
+    /** WebSocket URL for interactive mode */
+    wsUrl?: string;
+    /** SSE URL for readonly mode */
+    sseUrl?: string;
+    /** Custom class name for styling */
+    className?: string;
+    /** Display title (default: 'Terminal') */
+    title?: string;
+    /** Show/hide toolbar (default: true) */
+    showToolbar?: boolean;
+    /** Enable search functionality (default: true) */
+    enableSearch?: boolean;
+    /** Callback when connection status changes */
+    onStatusChange?: (status: 'connected' | 'disconnected' | 'error' | 'connecting') => void;
+    /** Callback when user types data */
+    onData?: (data: string) => void;
+}
+/**
+ * Terminal Panel Component.
+ *
+ * Full-featured terminal UI with toolbar, status indicator, search,
+ * and xterm.js integration. Supports both interactive (WebSocket)
+ * and readonly (SSE) modes with proper cleanup and error handling.
+ *
+ * @example
+ * ```tsx
+ * // Interactive mode with WebSocket
+ * <TerminalPanel
+ *   mode="interactive"
+ *   wsUrl="ws://localhost:3100/api/terminal/session-123"
+ *   onData={(data) => sendMessage({ type: 'input', data })}
+ * />
+ *
+ * // Readonly mode with SSE
+ * <TerminalPanel
+ *   mode="readonly"
+ *   sseUrl="http://localhost:3100/api/logs/containers/devenv/stream"
+ * />
+ * ```
+ */
+export declare function TerminalPanel({ backend, mode, wsUrl, sseUrl, className, title, showToolbar, onStatusChange, onData, }: ITerminalPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanel.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/TerminalPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,cAAc,GAAG,OAAO,GAAG,YAAY,KAAK,IAAI,CAAC;IAEzF,oCAAoC;IACpC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAOD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAiB,EACjB,IAAoB,EACpB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAkB,EAClB,WAAkB,EAClB,cAAc,EACd,MAAM,GACP,EAAE,mBAAmB,2CAgLrB"}