@mks2508/mks-ui 0.3.2 → 0.5.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/TerminalDisplay.d.ts

@@ -0,0 +1,46 @@
+/**
+ * TerminalDisplay — Readonly GPU-rendered terminal for ANSI content.
+ *
+ * Uses restty directly (not xterm) for GPU-accelerated rendering of
+ * ANSI-formatted text without PTY connection. Content is written via
+ * `restty.sendInput(data, "pty")` which feeds text to the WASM terminal
+ * engine for parsing and rendering.
+ *
+ * Optionally wrapped in TerminalPanelChrome glassmorphism shell.
+ *
+ * @module components/devenv/terminal/TerminalDisplay
+ */
+import type { ITerminalDisplayProps, ITerminalDisplayRef } from './TerminalDisplay.types';
+/**
+ * TerminalDisplay — Readonly restty terminal for displaying ANSI content.
+ *
+ * @example
+ * ```tsx
+ * <TerminalDisplay
+ *   content={"\x1b[31mError:\x1b[0m Something failed"}
+ *   title="Error Output"
+ *   variant="error"
+ *   fontSize={12}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Without chrome shell
+ * <TerminalDisplay
+ *   content={ansiOutput}
+ *   chrome={false}
+ *   minHeight={100}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With imperative handle
+ * const ref = useRef<ITerminalDisplayRef>(null);
+ * ref.current?.write("Additional output\r\n");
+ * ref.current?.clear();
+ * ```
+ */
+export declare const TerminalDisplay: import("react").ForwardRefExoticComponent<ITerminalDisplayProps & import("react").RefAttributes<ITerminalDisplayRef>>;
+//# sourceMappingURL=TerminalDisplay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalDisplay.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/TerminalDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAaH,OAAO,KAAK,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAM1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,eAAe,uHAmL3B,CAAC"}

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

@@ -0,0 +1,168 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { TerminalPanelChrome } from "./panel/TerminalPanelChrome.js";
+import { getSynthwaveGhosttyTheme, xtermThemeToGhostty } from "./Terminal.theme.restty.js";
+import { terminalDisplayStyles, terminalDisplayVariants } from "./TerminalDisplay.styles.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/TerminalDisplay.tsx
+/**
+* TerminalDisplay — Readonly GPU-rendered terminal for ANSI content.
+*
+* Uses restty directly (not xterm) for GPU-accelerated rendering of
+* ANSI-formatted text without PTY connection. Content is written via
+* `restty.sendInput(data, "pty")` which feeds text to the WASM terminal
+* engine for parsing and rendering.
+*
+* Optionally wrapped in TerminalPanelChrome glassmorphism shell.
+*
+* @module components/devenv/terminal/TerminalDisplay
+*/
+/**
+* TerminalDisplay — Readonly restty terminal for displaying ANSI content.
+*
+* @example
+* ```tsx
+* <TerminalDisplay
+*   content={"\x1b[31mError:\x1b[0m Something failed"}
+*   title="Error Output"
+*   variant="error"
+*   fontSize={12}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // Without chrome shell
+* <TerminalDisplay
+*   content={ansiOutput}
+*   chrome={false}
+*   minHeight={100}
+* />
+* ```
+*
+* @example
+* ```tsx
+* // With imperative handle
+* const ref = useRef<ITerminalDisplayRef>(null);
+* ref.current?.write("Additional output\r\n");
+* ref.current?.clear();
+* ```
+*/
+const TerminalDisplay = forwardRef(({ content, title = "Output", variant = "default", chrome = true, fontSize = 13, minHeight = 200, theme, resttyThemeName, gpuRenderer = "auto", slots, className, emptyText, onReady }, ref) => {
+	const containerRef = useRef(null);
+	const resttyRef = useRef(null);
+	const [isReady, setIsReady] = useState(false);
+	const callbacksRef = useRef({ onReady });
+	callbacksRef.current = { onReady };
+	const contentRef = useRef(content);
+	contentRef.current = content;
+	/**
+	* Initialize restty on mount.
+	* Dynamic import for SSR safety and code-splitting.
+	*/
+	useEffect(() => {
+		if (!containerRef.current) return;
+		let destroyed = false;
+		const init = async () => {
+			const { Restty: ResttyClass, getBuiltinTheme } = await import("restty");
+			if (destroyed || !containerRef.current) return;
+			const restty = new ResttyClass({
+				root: containerRef.current,
+				appOptions: {
+					renderer: gpuRenderer,
+					fontSize,
+					autoResize: true
+				},
+				fontSources: [{
+					type: "local",
+					matchers: [
+						"jetbrains mono",
+						"fira code",
+						"sf mono",
+						"cascadia code",
+						"meslo"
+					]
+				}],
+				createInitialPane: true,
+				shortcuts: false,
+				defaultContextMenu: false
+			});
+			resttyRef.current = restty;
+			if (resttyThemeName) {
+				const builtinTheme = getBuiltinTheme(resttyThemeName);
+				if (builtinTheme) restty.applyTheme(builtinTheme);
+			} else if (theme) restty.applyTheme(xtermThemeToGhostty(theme));
+			else restty.applyTheme(getSynthwaveGhosttyTheme());
+			if (contentRef.current) restty.sendInput(contentRef.current, "pty");
+			setIsReady(true);
+			callbacksRef.current.onReady?.(restty);
+		};
+		init().catch(() => {});
+		return () => {
+			destroyed = true;
+			resttyRef.current?.destroy();
+			resttyRef.current = null;
+			setIsReady(false);
+		};
+	}, []);
+	/**
+	* Re-write content when it changes after initialization.
+	*/
+	useEffect(() => {
+		if (!isReady || !resttyRef.current) return;
+		resttyRef.current.clearScreen();
+		if (content) resttyRef.current.sendInput(content, "pty");
+	}, [content, isReady]);
+	/**
+	* Handle fontSize changes after initialization.
+	*/
+	useEffect(() => {
+		if (!isReady || !resttyRef.current) return;
+		resttyRef.current.setFontSize(fontSize);
+	}, [fontSize, isReady]);
+	/**
+	* Expose imperative handle.
+	*/
+	useImperativeHandle(ref, () => ({
+		getRestty: () => resttyRef.current,
+		clear: () => resttyRef.current?.clearScreen(),
+		write: (data) => resttyRef.current?.sendInput(data, "pty")
+	}));
+	/** Map variant to chrome variant */
+	const chromeVariant = variant === "error" ? "error" : "default";
+	const chromeSize = variant === "compact" ? "compact" : "default";
+	/** The terminal content area */
+	const terminalElement = /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalDisplayVariants({ variant }), slots?.root, className),
+		style: { minHeight: `${minHeight}px` },
+		children: [!content && emptyText && /* @__PURE__ */ jsx("div", {
+			className: cn(terminalDisplayStyles.emptyState, slots?.emptyState),
+			style: { minHeight: `${minHeight}px` },
+			children: emptyText
+		}), /* @__PURE__ */ jsx("div", {
+			ref: containerRef,
+			className: cn(terminalDisplayStyles.terminal, slots?.terminal),
+			style: {
+				minHeight: `${minHeight}px`,
+				display: !content && emptyText ? "none" : void 0
+			}
+		})]
+	});
+	if (!chrome) return terminalElement;
+	return /* @__PURE__ */ jsx(TerminalPanelChrome, {
+		containerName: title,
+		isConnected: isReady,
+		variant: chromeVariant,
+		size: chromeSize,
+		slots: { root: slots?.chrome },
+		className,
+		children: terminalElement
+	});
+});
+TerminalDisplay.displayName = "TerminalDisplay";
+
+//#endregion
+export { TerminalDisplay };