@mks2508/mks-ui 0.9.0 → 0.11.0

package/dist/react-ui/blocks/Terminal/renderers/ResttyRenderer.js

@@ -0,0 +1,160 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/renderers/ResttyRenderer.tsx
+/**
+* ResttyRenderer Component.
+*
+* Chrome-less restty renderer for maximum composability.
+* Wraps @mks2508/restty ResttyTerminal component without any chrome,
+* toolbar, or status bar. Use this when you want to build your own
+* terminal shell or embed in custom layouts.
+*
+* Lazy-loads @mks2508/restty on first render. Returns null if
+* the peer dependency is not installed.
+*
+* @module components/devenv/terminal/renderers/restty
+*/
+/**
+* Terminal container styles for restty renderer.
+*/
+const terminalContainerStyles = "relative bg-[hsl(var(--terminal-bg,var(--background)))] min-h-[400px] border-x border-border/10";
+/** Lazy-loaded ResttyTerminal component. */
+let ResttyTerminalComponent = null;
+/** Whether we've attempted to load restty. */
+let resttyLoadAttempted = false;
+/**
+* Lazy-load @mks2508/restty ResttyTerminal component.
+*
+* Returns null if @mks2508/restty is not installed.
+*/
+async function loadResttyTerminal() {
+	if (ResttyTerminalComponent !== null || resttyLoadAttempted) return ResttyTerminalComponent;
+	resttyLoadAttempted = true;
+	try {
+		ResttyTerminalComponent = (await import("@mks2508/restty")).ResttyTerminal;
+		return ResttyTerminalComponent;
+	} catch {
+		ResttyTerminalComponent = null;
+		return null;
+	}
+}
+/**
+* ResttyRenderer Component.
+*
+* Chrome-less restty renderer. Provides:
+* - @mks2508/restty ResttyTerminal with WebGPU/WebGL2 rendering
+* - Auto-resize on container resize
+* - Font size from useTerminalSettings context (override via props)
+* - Ref forwarding with focus, write, clear, resize methods
+* - Lazy-loading with graceful fallback if @mks2508/restty is missing
+*
+* restty features:
+* - GPU-accelerated rendering (WebGPU/WebGL2)
+* - libghostty-vt WASM core (full VT100/VT220/xterm parser)
+* - Built-in theme catalog (Dracula, Synthwave, etc.)
+* - Multi-pane splits
+* - Scrollback history
+*
+* @example
+* ```tsx
+* const termRef = useRef<ITerminalRendererRef>(null);
+*
+* <ResttyRenderer
+*   ref={termRef}
+*   sessionId="my-session"
+*   fontSize={16}
+*   resttyThemeName="Dracula"
+*   onReady={() => console.log('Terminal ready')}
+*   className="h-[600px]"
+* />
+* ```
+*/
+const ResttyRenderer = forwardRef(({ sessionId, fontSize: fontSizeProp, resttyThemeName: resttyThemeNameProp, gpuRenderer = "auto", onReady, className }, ref) => {
+	const containerRef = useRef(null);
+	const terminalReadyRef = useRef(false);
+	const { settings, setFontSize } = useTerminalSettings();
+	/**
+	* Font size reads from global terminal settings store, with prop
+	* override taking precedence. This matches the v0.11.0 pattern
+	* where all consumers sync to the single source of truth.
+	*/
+	const fontSize = fontSizeProp ?? settings.fontSize;
+	const resttyThemeName = resttyThemeNameProp ?? settings.resttyThemeName;
+	const [resttyAvailable, setResttyAvailable] = useState(null);
+	const [ResttyTerminal, setResttyTerminal] = useState(null);
+	/**
+	* Lazy-load restty on mount.
+	*/
+	useEffect(() => {
+		loadResttyTerminal().then((term) => {
+			if (term) {
+				setResttyTerminal(() => term);
+				setResttyAvailable(true);
+			} else setResttyAvailable(false);
+		});
+	}, []);
+	/**
+	* Handle terminal ready callback.
+	*/
+	const handleResttyReady = useCallback(() => {
+		terminalReadyRef.current = true;
+		onReady?.();
+	}, [onReady]);
+	/**
+	* Font size update propagates to global settings if not overridden.
+	*/
+	useEffect(() => {
+		if (!fontSizeProp) setFontSize(fontSize);
+	}, [
+		fontSize,
+		fontSizeProp,
+		setFontSize
+	]);
+	/**
+	* Expose imperative methods to parent.
+	*
+	* Note: write() is a no-op for restty since it manages its own PTY.
+	* The renderer focuses on display only.
+	*/
+	useImperativeHandle(ref, () => ({
+		focus: () => {},
+		write: (_data) => {},
+		clear: () => {},
+		resize: (_cols, _rows) => {}
+	}));
+	/**
+	* Render fallbacks for missing/unavailable restty.
+	*/
+	if (resttyAvailable === null) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full text-muted-foreground text-sm min-h-[400px]",
+		children: "Loading restty..."
+	});
+	if (resttyAvailable === false) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-2 min-h-[400px]",
+		children: [/* @__PURE__ */ jsx("span", { children: "restty is not installed" }), /* @__PURE__ */ jsx("code", {
+			className: "text-xs bg-muted px-2 py-1 rounded",
+			children: "bun add @mks2508/restty"
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn(terminalContainerStyles, className),
+		"data-session-id": sessionId,
+		children: ResttyTerminal && /* @__PURE__ */ jsx(ResttyTerminal, {
+			ref: void 0,
+			resttyThemeName,
+			gpuRenderer,
+			className: "w-full h-full min-h-[400px]",
+			onReady: handleResttyReady
+		})
+	});
+});
+ResttyRenderer.displayName = "ResttyRenderer";
+
+//#endregion
+export { ResttyRenderer };

package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.d.ts

@@ -0,0 +1,46 @@
+/**
+ * WtermRenderer Component.
+ *
+ * Chrome-less wterm renderer for maximum composability.
+ * Wraps @wterm/react Terminal component without any chrome,
+ * toolbar, or status bar. Use this when you want to build
+ * your own terminal shell or embed in custom layouts.
+ *
+ * Lazy-loads @wterm/react on first render. Returns null if
+ * the peer dependency is not installed.
+ *
+ * @module components/devenv/terminal/renderers/wterm
+ */
+import type { ITerminalRendererProps, ITerminalRendererRef } from './types';
+/**
+ * WtermRenderer Component.
+ *
+ * Chrome-less wterm renderer. Provides:
+ * - @wterm/react Terminal with Zig + WASM VT100/VT220/xterm parser
+ * - Auto-resize on container resize
+ * - Font size from useTerminalSettings context (override via props)
+ * - Ref forwarding with focus, write, clear, resize methods
+ * - Lazy-loading with graceful fallback if @wterm/react is missing
+ *
+ * wterm features:
+ * - ~12KB WASM binary (embedded base64 fallback)
+ * - DOM rendering with dirty-row tracking via requestAnimationFrame
+ * - Full 24-bit color (SGR) support
+ * - Alternate screen buffer (vim, less, htop work)
+ * - Scrollback history ring buffer
+ *
+ * @example
+ * ```tsx
+ * const termRef = useRef<ITerminalRendererRef>(null);
+ *
+ * <WtermRenderer
+ *   ref={termRef}
+ *   sessionId="my-session"
+ *   fontSize={16}
+ *   onReady={() => console.log('Terminal ready')}
+ *   className="h-[600px]"
+ * />
+ * ```
+ */
+export declare const WtermRenderer: import("react").ForwardRefExoticComponent<ITerminalRendererProps & import("react").RefAttributes<ITerminalRendererRef>>;
+//# sourceMappingURL=WtermRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WtermRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/renderers/WtermRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAaH,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAyD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa,yHAoJzB,CAAC"}

package/dist/react-ui/blocks/Terminal/renderers/WtermRenderer.js

@@ -0,0 +1,195 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/renderers/WtermRenderer.tsx
+/**
+* WtermRenderer Component.
+*
+* Chrome-less wterm renderer for maximum composability.
+* Wraps @wterm/react Terminal component without any chrome,
+* toolbar, or status bar. Use this when you want to build
+* your own terminal shell or embed in custom layouts.
+*
+* Lazy-loads @wterm/react on first render. Returns null if
+* the peer dependency is not installed.
+*
+* @module components/devenv/terminal/renderers/wterm
+*/
+/**
+* Terminal container styles for wterm renderer.
+*/
+const terminalContainerStyles = "relative bg-[hsl(var(--terminal-bg,var(--background)))] min-h-[400px] border-x border-border/10 terminal-scroll wterm-wrapper";
+/** Lazy-loaded wterm Terminal component. */
+let WtermTerminalComponent = null;
+/** Whether we've attempted to load wterm. */
+let wtermLoadAttempted = false;
+/**
+* Lazy-load @wterm/react Terminal component.
+*
+* Returns null if @wterm/react is not installed.
+*/
+async function loadWtermTerminal() {
+	if (WtermTerminalComponent !== null || wtermLoadAttempted) return WtermTerminalComponent;
+	wtermLoadAttempted = true;
+	try {
+		WtermTerminalComponent = (await import("@wterm/react")).Terminal;
+		await import("@wterm/react/css");
+		return WtermTerminalComponent;
+	} catch {
+		WtermTerminalComponent = null;
+		return null;
+	}
+}
+/**
+* WtermRenderer Component.
+*
+* Chrome-less wterm renderer. Provides:
+* - @wterm/react Terminal with Zig + WASM VT100/VT220/xterm parser
+* - Auto-resize on container resize
+* - Font size from useTerminalSettings context (override via props)
+* - Ref forwarding with focus, write, clear, resize methods
+* - Lazy-loading with graceful fallback if @wterm/react is missing
+*
+* wterm features:
+* - ~12KB WASM binary (embedded base64 fallback)
+* - DOM rendering with dirty-row tracking via requestAnimationFrame
+* - Full 24-bit color (SGR) support
+* - Alternate screen buffer (vim, less, htop work)
+* - Scrollback history ring buffer
+*
+* @example
+* ```tsx
+* const termRef = useRef<ITerminalRendererRef>(null);
+*
+* <WtermRenderer
+*   ref={termRef}
+*   sessionId="my-session"
+*   fontSize={16}
+*   onReady={() => console.log('Terminal ready')}
+*   className="h-[600px]"
+* />
+* ```
+*/
+const WtermRenderer = forwardRef(({ sessionId, fontSize: fontSizeProp, onReady, className }, ref) => {
+	/** wterm terminal instance handle */
+	const terminalRef = useRef(null);
+	const containerRef = useRef(null);
+	const terminalReadyRef = useRef(false);
+	const { settings, setFontSize } = useTerminalSettings();
+	/**
+	* Font size reads from global terminal settings store, with prop
+	* override taking precedence. This matches the v0.11.0 pattern
+	* where all consumers sync to the single source of truth.
+	*/
+	const fontSize = fontSizeProp ?? settings.fontSize;
+	const [dimensions, setDimensions] = useState({
+		cols: 80,
+		rows: 24
+	});
+	const [wtermAvailable, setWtermAvailable] = useState(null);
+	const [Terminal, setTerminal] = useState(null);
+	/**
+	* Lazy-load wterm on mount.
+	*/
+	useEffect(() => {
+		loadWtermTerminal().then((term) => {
+			if (term) {
+				setTerminal(() => term);
+				setWtermAvailable(true);
+			} else setWtermAvailable(false);
+		});
+	}, []);
+	/**
+	* Handle terminal data input (no-op for chrome-less renderer).
+	* Consumer should handle I/O via ref methods.
+	*/
+	const handleData = useCallback((_data) => {}, []);
+	/**
+	* Handle terminal resize.
+	*/
+	const handleResize = useCallback((cols, rows) => {
+		setDimensions({
+			cols,
+			rows
+		});
+	}, []);
+	/**
+	* Handle terminal ready callback.
+	*/
+	const handleWtermReady = useCallback((core) => {
+		terminalReadyRef.current = true;
+		onReady?.();
+	}, [onReady]);
+	/**
+	* Handle font size changes via CSS custom property.
+	*/
+	useEffect(() => {
+		if (containerRef.current) containerRef.current.style.setProperty("--wterm-font-size", `${fontSize}px`);
+	}, [fontSize]);
+	/**
+	* Font size update propagates to global settings if not overridden.
+	*/
+	useEffect(() => {
+		if (!fontSizeProp) setFontSize(fontSize);
+	}, [
+		fontSize,
+		fontSizeProp,
+		setFontSize
+	]);
+	/**
+	* Expose imperative methods to parent.
+	*/
+	useImperativeHandle(ref, () => ({
+		focus: () => {
+			terminalRef.current?.focus();
+		},
+		write: (data) => {
+			terminalRef.current?.write(data);
+		},
+		clear: () => {
+			terminalRef.current?.write("\x1B[2J\x1B[H");
+		},
+		resize: (cols, rows) => {
+			terminalRef.current?.resize(cols, rows);
+		}
+	}));
+	/**
+	* Render fallbacks for missing/unavailable wterm.
+	*/
+	if (wtermAvailable === null) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full text-muted-foreground text-sm min-h-[400px]",
+		children: "Loading wterm..."
+	});
+	if (wtermAvailable === false) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-2 min-h-[400px]",
+		children: [/* @__PURE__ */ jsx("span", { children: "wterm is not installed" }), /* @__PURE__ */ jsx("code", {
+			className: "text-xs bg-muted px-2 py-1 rounded",
+			children: "bun add @wterm/react"
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn(terminalContainerStyles, className),
+		style: { "--wterm-font-size": `${fontSize}px` },
+		"data-session-id": sessionId,
+		children: Terminal && /* @__PURE__ */ jsx(Terminal, {
+			ref: terminalRef,
+			cols: dimensions.cols,
+			rows: dimensions.rows,
+			autoResize: false,
+			cursorBlink: true,
+			onData: handleData,
+			onResize: handleResize,
+			onReady: handleWtermReady,
+			className: "w-full h-full"
+		})
+	});
+});
+WtermRenderer.displayName = "WtermRenderer";
+
+//#endregion
+export { WtermRenderer };

package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * XTermRenderer Component.
+ *
+ * Chrome-less xterm.js renderer for maximum composability.
+ * Wraps xterm.js Terminal + FitAddon without any chrome,
+ * toolbar, or status bar. Use this when you want to build
+ * your own terminal shell or embed in custom layouts.
+ *
+ * Lazy-loads @xterm/xterm and addon family on first render.
+ * Returns null if the peer dependency is not installed.
+ *
+ * @module components/devenv/terminal/renderers/xterm
+ */
+import type { ITerminalRendererProps, ITerminalRendererRef } from './types';
+/**
+ * XTermRenderer Component.
+ *
+ * Chrome-less xterm.js renderer. Provides:
+ * - xterm.js Terminal with FitAddon, WebLinksAddon, SearchAddon
+ * - Auto-resize on container resize
+ * - Font size from useTerminalSettings context (override via props)
+ * - Ref forwarding with focus, write, clear, resize methods
+ * - Lazy-loading with graceful fallback if @xterm/xterm is missing
+ *
+ * @example
+ * ```tsx
+ * const termRef = useRef<ITerminalRendererRef>(null);
+ *
+ * <XTermRenderer
+ *   ref={termRef}
+ *   sessionId="my-session"
+ *   fontSize={16}
+ *   onReady={() => console.log('Terminal ready')}
+ *   className="h-[600px]"
+ * />
+ * ```
+ */
+export declare const XTermRenderer: import("react").ForwardRefExoticComponent<ITerminalRendererProps & import("react").RefAttributes<ITerminalRendererRef>>;
+//# sourceMappingURL=XTermRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"XTermRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/renderers/XTermRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAcH,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAwF5E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,yHA6LzB,CAAC"}

package/dist/react-ui/blocks/Terminal/renderers/XTermRenderer.js

@@ -0,0 +1,251 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/renderers/XTermRenderer.tsx
+/**
+* XTermRenderer Component.
+*
+* Chrome-less xterm.js renderer for maximum composability.
+* Wraps xterm.js Terminal + FitAddon without any chrome,
+* toolbar, or status bar. Use this when you want to build
+* your own terminal shell or embed in custom layouts.
+*
+* Lazy-loads @xterm/xterm and addon family on first render.
+* Returns null if the peer dependency is not installed.
+*
+* @module components/devenv/terminal/renderers/xterm
+*/
+/**
+* Terminal container styles for xterm.js renderer.
+*/
+const terminalContainerStyles = "relative bg-[hsl(var(--terminal-bg,var(--background)))] min-h-[400px] border-x border-border/10 terminal-scroll";
+/** Cached lazy-loaded xterm.js modules. */
+let xtermModules = null;
+/** Whether we've attempted to load xterm.js modules. */
+let xtermLoadAttempted = false;
+/**
+* Lazy-load xterm.js and addon family.
+*
+* Returns null if @xterm/xterm is not installed.
+*/
+async function loadXtermModules() {
+	if (xtermModules !== null || xtermLoadAttempted) return xtermModules;
+	xtermLoadAttempted = true;
+	try {
+		const [xterm, fitAddon, webLinksAddon, searchAddon] = await Promise.all([
+			import("@xterm/xterm"),
+			import("@xterm/addon-fit"),
+			import("@xterm/addon-web-links"),
+			import("@xterm/addon-search")
+		]);
+		await import("@xterm/xterm/css/xterm.css");
+		xtermModules = {
+			Terminal: xterm.Terminal,
+			FitAddon: fitAddon.FitAddon,
+			WebLinksAddon: webLinksAddon.WebLinksAddon,
+			SearchAddon: searchAddon.SearchAddon
+		};
+		return xtermModules;
+	} catch {
+		xtermModules = null;
+		return null;
+	}
+}
+/**
+* Get xterm.js theme from current theme context.
+*/
+function getXtermTheme() {
+	return {
+		background: "#241B2F",
+		foreground: "#e8e8ec",
+		cursor: "#D40C67",
+		black: "#000000",
+		red: "#cd3131",
+		green: "#0dbc79",
+		yellow: "#e5e510",
+		blue: "#2472c8",
+		magenta: "#bc3fbc",
+		cyan: "#11a8cd",
+		white: "#e5e5e5",
+		brightBlack: "#666666",
+		brightRed: "#f14c4c",
+		brightGreen: "#23d18b",
+		brightYellow: "#f5f543",
+		brightBlue: "#3b8eea",
+		brightMagenta: "#d670d6",
+		brightCyan: "#29b8db",
+		brightWhite: "#ffffff"
+	};
+}
+/**
+* XTermRenderer Component.
+*
+* Chrome-less xterm.js renderer. Provides:
+* - xterm.js Terminal with FitAddon, WebLinksAddon, SearchAddon
+* - Auto-resize on container resize
+* - Font size from useTerminalSettings context (override via props)
+* - Ref forwarding with focus, write, clear, resize methods
+* - Lazy-loading with graceful fallback if @xterm/xterm is missing
+*
+* @example
+* ```tsx
+* const termRef = useRef<ITerminalRendererRef>(null);
+*
+* <XTermRenderer
+*   ref={termRef}
+*   sessionId="my-session"
+*   fontSize={16}
+*   onReady={() => console.log('Terminal ready')}
+*   className="h-[600px]"
+* />
+* ```
+*/
+const XTermRenderer = forwardRef(({ sessionId, fontSize: fontSizeProp, fontFamily: fontFamilyProp, onReady, className }, ref) => {
+	const terminalRef = useRef(null);
+	const fitAddonRef = useRef(null);
+	const containerRef = useRef(null);
+	const terminalReadyRef = useRef(false);
+	const { settings, setFontSize } = useTerminalSettings();
+	/**
+	* Font size reads from global terminal settings store, with prop
+	* override taking precedence. This matches the v0.11.0 pattern
+	* where all consumers sync to the single source of truth.
+	*/
+	const fontSize = fontSizeProp ?? settings.fontSize;
+	const fontFamily = fontFamilyProp ?? "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace";
+	const [xtermAvailable, setXtermAvailable] = useState(null);
+	const [XTerm, setXTerm] = useState(null);
+	/**
+	* Lazy-load xterm.js on mount.
+	*/
+	useEffect(() => {
+		loadXtermModules().then((mods) => {
+			if (mods) {
+				setXTerm(() => mods.Terminal);
+				setXtermAvailable(true);
+			} else setXtermAvailable(false);
+		});
+	}, []);
+	/**
+	* Initialize xterm.js instance.
+	*/
+	useEffect(() => {
+		if (!XTerm || !containerRef.current || !xtermAvailable) return;
+		if (!xtermModules) return;
+		const terminal = new XTerm({
+			cursorBlink: true,
+			cursorStyle: "bar",
+			scrollback: 1e4,
+			fontSize,
+			fontFamily,
+			theme: getXtermTheme(),
+			allowProposedApi: true,
+			disableStdin: false
+		});
+		const fitAddon = new xtermModules.FitAddon();
+		const webLinksAddon = new xtermModules.WebLinksAddon();
+		const searchAddon = new xtermModules.SearchAddon();
+		terminal.loadAddon(fitAddon);
+		terminal.loadAddon(webLinksAddon);
+		terminal.loadAddon(searchAddon);
+		terminal.open(containerRef.current);
+		const rafId = requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				try {
+					fitAddon.fit();
+				} catch {}
+			});
+		});
+		terminalRef.current = terminal;
+		fitAddonRef.current = fitAddon;
+		terminalReadyRef.current = true;
+		onReady?.();
+		return () => {
+			cancelAnimationFrame(rafId);
+			terminalReadyRef.current = false;
+			terminal.dispose();
+			terminalRef.current = null;
+			fitAddonRef.current = null;
+		};
+	}, [XTerm, xtermAvailable]);
+	/**
+	* Update font size on existing terminal.
+	*/
+	useEffect(() => {
+		if (!terminalRef.current || !terminalReadyRef.current) return;
+		terminalRef.current.options.fontSize = fontSize;
+		requestAnimationFrame(() => {
+			try {
+				fitAddonRef.current?.fit();
+			} catch {}
+		});
+	}, [fontSize]);
+	/**
+	* Handle container resize.
+	*/
+	useEffect(() => {
+		const handleResize = () => {
+			requestAnimationFrame(() => {
+				if (fitAddonRef.current && terminalRef.current) try {
+					fitAddonRef.current.fit();
+				} catch {}
+			});
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	/**
+	* Font size update propagates to global settings if not overridden.
+	*/
+	useEffect(() => {
+		if (!fontSizeProp) setFontSize(fontSize);
+	}, [
+		fontSize,
+		fontSizeProp,
+		setFontSize
+	]);
+	/**
+	* Expose imperative methods to parent.
+	*/
+	useImperativeHandle(ref, () => ({
+		focus: () => {
+			terminalRef.current?.focus();
+		},
+		write: (data) => {
+			terminalRef.current?.write(data);
+		},
+		clear: () => {
+			terminalRef.current?.clear();
+		},
+		resize: (cols, rows) => {
+			terminalRef.current?.resize(cols, rows);
+		}
+	}));
+	/**
+	* Render fallbacks for missing/unavailable xterm.js.
+	*/
+	if (xtermAvailable === null) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full text-muted-foreground text-sm min-h-[400px]",
+		children: "Loading xterm.js..."
+	});
+	if (xtermAvailable === false) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center h-full text-muted-foreground text-sm gap-2 min-h-[400px]",
+		children: [/* @__PURE__ */ jsx("span", { children: "xterm.js is not installed" }), /* @__PURE__ */ jsx("code", {
+			className: "text-xs bg-muted px-2 py-1 rounded",
+			children: "bun add @xterm/xterm"
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn(terminalContainerStyles, className),
+		"data-session-id": sessionId
+	});
+});
+XTermRenderer.displayName = "XTermRenderer";
+
+//#endregion
+export { XTermRenderer };