@mks2508/mks-ui 0.3.2 → 0.4.0

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

@@ -0,0 +1,146 @@
+/**
+ * ResttyAdapter - ITerminalAdapter implementation for restty.
+ *
+ * Wraps restty's GPU-accelerated terminal renderer into the
+ * pluggable adapter interface, enabling renderer switching in the UI.
+ *
+ * Key differences from XTermAdapter:
+ * - Restty manages its own PTY WebSocket via custom PtyTransport
+ * - GPU rendering (WebGPU/WebGL2) instead of DOM/canvas
+ * - No write()/writeln() for injecting display text — restty renders PTY output
+ * - Built-in multi-pane, theme catalog, and text shaping with ligatures
+ *
+ * @module components/devenv/terminal/ResttyAdapter
+ */
+import type { ITerminalAdapter, ITerminalAdapterCapabilities, ITerminalBackendType, ITerminalMode, ITerminalOptions, IPtyTransportFactory } from './Terminal.types';
+import type { Restty, ResttyPaneHandle } from 'restty';
+/**
+ * ITerminalAdapter implementation backed by restty.
+ *
+ * Uses restty's Restty class with a custom DevenvPtyTransport
+ * that bridges the mks-devenv WebSocket JSON protocol. Status messages
+ * are not rendered in the terminal — they should be handled as React overlays.
+ *
+ * @example
+ * ```ts
+ * const adapter = new ResttyAdapter({ fontSize: 14 });
+ * await adapter.initialize(containerEl, options);
+ * adapter.connectPty?.('ws://localhost:3100/terminal/session-1');
+ * ```
+ */
+export declare class ResttyAdapter implements ITerminalAdapter {
+    /** Backend type identifier for factory pattern */
+    readonly type: ITerminalBackendType;
+    /** Adapter capabilities — restty manages its own connection and supports GPU */
+    readonly capabilities: ITerminalAdapterCapabilities;
+    private restty;
+    private transport;
+    private options;
+    private rootElement;
+    private createTransport?;
+    /**
+     * @param options - Terminal initialization options
+     * @param createTransport - Optional factory to create a custom PTY transport.
+     *   If not provided, restty manages its own PTY connection internally.
+     */
+    constructor(options: ITerminalOptions, createTransport?: IPtyTransportFactory);
+    /**
+     * Initialize restty in the given container element.
+     * Dynamically imports restty to enable code-splitting and SSR safety.
+     *
+     * @param container - DOM element to render the terminal into
+     * @param options - Terminal initialization options
+     */
+    initialize(container: HTMLElement, options: ITerminalOptions): Promise<void>;
+    /**
+     * Write data to the terminal display.
+     * No-op for restty — it renders PTY output via its own connection.
+     * Status messages should be displayed as React overlays.
+     */
+    write(_data: string): void;
+    /**
+     * Write data with newline to the terminal display.
+     * No-op for restty — see write().
+     */
+    writeln(_data: string): void;
+    /**
+     * Clear the terminal screen and scrollback.
+     */
+    clear(): void;
+    /**
+     * Resize the terminal to explicit dimensions.
+     * Uses Restty's native resize() (v0.1.21+) for precise control.
+     *
+     * @param cols - Number of columns
+     * @param rows - Number of rows
+     */
+    resize(cols: number, rows: number): void;
+    /**
+     * Dispose of restty and release all resources (GPU, WASM, WebSocket).
+     */
+    dispose(): void;
+    /**
+     * Switch between interactive and readonly modes.
+     * No-op for restty — mode is determined by PTY connection state.
+     */
+    setMode(_mode: ITerminalMode): void;
+    /**
+     * Focus the terminal for keyboard input.
+     * Uses Restty's native focus() (v0.1.21+) which handles pane focus correctly.
+     */
+    focus(): void;
+    /**
+     * Remove focus from the terminal.
+     * Uses Restty's native blur() (v0.1.21+).
+     */
+    blur(): void;
+    /**
+     * Connect to a PTY backend via WebSocket URL.
+     *
+     * @param url - WebSocket URL for PTY connection
+     */
+    connectPty(url: string): void;
+    /**
+     * Disconnect from the PTY backend.
+     */
+    disconnectPty(): void;
+    /**
+     * Check if PTY WebSocket is connected.
+     */
+    isPtyConnected(): boolean;
+    /**
+     * Update font size at runtime.
+     *
+     * @param size - Font size in CSS pixels
+     */
+    setFontSize(size: number): void;
+    /**
+     * Send raw input data to the terminal PTY.
+     *
+     * @param data - Input data string
+     */
+    sendInput(data: string): void;
+    /**
+     * Copy the current text selection to the clipboard.
+     */
+    copySelection(): Promise<boolean>;
+    /**
+     * Paste clipboard contents into the terminal.
+     */
+    pasteClipboard(): Promise<boolean>;
+    /**
+     * Get the underlying Restty instance for advanced usage.
+     * Use sparingly — prefer the adapter interface.
+     */
+    getResttyInstance(): Restty | null;
+    /**
+     * Get the active pane handle for direct restty pane operations.
+     */
+    getActivePane(): ResttyPaneHandle | null;
+    /**
+     * Build font source list following restty's priority pattern:
+     * local fonts first (fast), then CDN fallback.
+     */
+    private buildFontSources;
+}
+//# sourceMappingURL=ResttyAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResttyAdapter.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/ResttyAdapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EACV,gBAAgB,EAChB,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAEhB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAGvD;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,YAAW,gBAAgB;IACpD,kDAAkD;IAClD,SAAgB,IAAI,EAAE,oBAAoB,CAAW;IAErD,gFAAgF;IAChF,SAAgB,YAAY,EAAE,4BAA4B,CAKxD;IAEF,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAA8B;IAC/C,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,eAAe,CAAC,CAAuB;IAE/C;;;;OAIG;gBACS,OAAO,EAAE,gBAAgB,EAAE,eAAe,CAAC,EAAE,oBAAoB;IAK7E;;;;;;OAMG;IACG,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC;IA+BlF;;;;OAIG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI1B;;;OAGG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI5B;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;;;;OAMG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAIxC;;OAEG;IACH,OAAO,IAAI,IAAI;IAOf;;;OAGG;IACH,OAAO,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAInC;;;OAGG;IACH,KAAK,IAAI,IAAI;IAIb;;;OAGG;IACH,IAAI,IAAI,IAAI;IAIZ;;;;OAIG;IACH,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI7B;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;;;OAIG;IACH,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI/B;;;;OAIG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAI7B;;OAEG;IACG,aAAa,IAAI,OAAO,CAAC,OAAO,CAAC;IAIvC;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAIxC;;;OAGG;IACH,iBAAiB,IAAI,MAAM,GAAG,IAAI;IAIlC;;OAEG;IACH,aAAa,IAAI,gBAAgB,GAAG,IAAI;IAIxC;;;OAGG;IACH,OAAO,CAAC,gBAAgB;CA2BzB"}

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

@@ -0,0 +1,213 @@
+import { getSynthwaveGhosttyTheme, xtermThemeToGhostty } from "./Terminal.theme.restty.js";
+
+//#region src/react-ui/blocks/Terminal/ResttyAdapter.ts
+/**
+* ITerminalAdapter implementation backed by restty.
+*
+* Uses restty's Restty class with a custom DevenvPtyTransport
+* that bridges the mks-devenv WebSocket JSON protocol. Status messages
+* are not rendered in the terminal — they should be handled as React overlays.
+*
+* @example
+* ```ts
+* const adapter = new ResttyAdapter({ fontSize: 14 });
+* await adapter.initialize(containerEl, options);
+* adapter.connectPty?.('ws://localhost:3100/terminal/session-1');
+* ```
+*/
+var ResttyAdapter = class {
+	/** Backend type identifier for factory pattern */
+	type = "xterm";
+	/** Adapter capabilities — restty manages its own connection and supports GPU */
+	capabilities = {
+		managesOwnConnection: true,
+		gpuRendering: true,
+		multiPane: true,
+		builtinThemes: true
+	};
+	restty = null;
+	transport = null;
+	options;
+	rootElement = null;
+	createTransport;
+	/**
+	* @param options - Terminal initialization options
+	* @param createTransport - Optional factory to create a custom PTY transport.
+	*   If not provided, restty manages its own PTY connection internally.
+	*/
+	constructor(options, createTransport) {
+		this.options = options;
+		this.createTransport = createTransport;
+	}
+	/**
+	* Initialize restty in the given container element.
+	* Dynamically imports restty to enable code-splitting and SSR safety.
+	*
+	* @param container - DOM element to render the terminal into
+	* @param options - Terminal initialization options
+	*/
+	async initialize(container, options) {
+		this.options = {
+			...this.options,
+			...options
+		};
+		this.rootElement = container;
+		const { Restty } = await import("restty");
+		this.transport = this.createTransport?.() ?? null;
+		this.restty = new Restty({
+			root: container,
+			appOptions: {
+				renderer: "auto",
+				fontSize: this.options.fontSize ?? 14,
+				autoResize: true,
+				...this.transport ? { ptyTransport: this.transport } : {}
+			},
+			fontSources: this.buildFontSources(),
+			createInitialPane: true,
+			shortcuts: false,
+			defaultContextMenu: true
+		});
+		if (this.options.theme) this.restty.applyTheme(xtermThemeToGhostty(this.options.theme));
+		else this.restty.applyTheme(getSynthwaveGhosttyTheme());
+	}
+	/**
+	* Write data to the terminal display.
+	* No-op for restty — it renders PTY output via its own connection.
+	* Status messages should be displayed as React overlays.
+	*/
+	write(_data) {}
+	/**
+	* Write data with newline to the terminal display.
+	* No-op for restty — see write().
+	*/
+	writeln(_data) {}
+	/**
+	* Clear the terminal screen and scrollback.
+	*/
+	clear() {
+		this.restty?.clearScreen();
+	}
+	/**
+	* Resize the terminal to explicit dimensions.
+	* Uses Restty's native resize() (v0.1.21+) for precise control.
+	*
+	* @param cols - Number of columns
+	* @param rows - Number of rows
+	*/
+	resize(cols, rows) {
+		this.restty?.resize(cols, rows);
+	}
+	/**
+	* Dispose of restty and release all resources (GPU, WASM, WebSocket).
+	*/
+	dispose() {
+		this.restty?.destroy();
+		this.restty = null;
+		this.transport = null;
+		this.rootElement = null;
+	}
+	/**
+	* Switch between interactive and readonly modes.
+	* No-op for restty — mode is determined by PTY connection state.
+	*/
+	setMode(_mode) {}
+	/**
+	* Focus the terminal for keyboard input.
+	* Uses Restty's native focus() (v0.1.21+) which handles pane focus correctly.
+	*/
+	focus() {
+		this.restty?.focus();
+	}
+	/**
+	* Remove focus from the terminal.
+	* Uses Restty's native blur() (v0.1.21+).
+	*/
+	blur() {
+		this.restty?.blur();
+	}
+	/**
+	* Connect to a PTY backend via WebSocket URL.
+	*
+	* @param url - WebSocket URL for PTY connection
+	*/
+	connectPty(url) {
+		this.restty?.connectPty(url);
+	}
+	/**
+	* Disconnect from the PTY backend.
+	*/
+	disconnectPty() {
+		this.restty?.disconnectPty();
+	}
+	/**
+	* Check if PTY WebSocket is connected.
+	*/
+	isPtyConnected() {
+		return this.restty?.isPtyConnected() ?? false;
+	}
+	/**
+	* Update font size at runtime.
+	*
+	* @param size - Font size in CSS pixels
+	*/
+	setFontSize(size) {
+		this.restty?.setFontSize(size);
+	}
+	/**
+	* Send raw input data to the terminal PTY.
+	*
+	* @param data - Input data string
+	*/
+	sendInput(data) {
+		this.restty?.sendInput(data);
+	}
+	/**
+	* Copy the current text selection to the clipboard.
+	*/
+	async copySelection() {
+		return this.restty?.copySelectionToClipboard() ?? false;
+	}
+	/**
+	* Paste clipboard contents into the terminal.
+	*/
+	async pasteClipboard() {
+		return this.restty?.pasteFromClipboard() ?? false;
+	}
+	/**
+	* Get the underlying Restty instance for advanced usage.
+	* Use sparingly — prefer the adapter interface.
+	*/
+	getResttyInstance() {
+		return this.restty;
+	}
+	/**
+	* Get the active pane handle for direct restty pane operations.
+	*/
+	getActivePane() {
+		return this.restty?.activePane() ?? null;
+	}
+	/**
+	* Build font source list following restty's priority pattern:
+	* local fonts first (fast), then CDN fallback.
+	*/
+	buildFontSources() {
+		const family = this.options.fontFamily;
+		if (family) return [{
+			type: "local",
+			matchers: family.split(",").map((f) => f.trim().replace(/['"]/g, "").toLowerCase()).filter(Boolean)
+		}];
+		return [{
+			type: "local",
+			matchers: [
+				"jetbrains mono",
+				"fira code",
+				"sf mono",
+				"cascadia code",
+				"meslo"
+			]
+		}];
+	}
+};
+
+//#endregion
+export { ResttyAdapter };

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

@@ -0,0 +1,55 @@
+/**
+ * Terminal adapter interface and factory.
+ *
+ * Allows switching between xterm.js, WebContainer, and Monaco backends
+ * through a unified interface. Backends are loaded dynamically to enable
+ * code-splitting and reduce initial bundle size.
+ *
+ * @module components/devenv/terminal/adapter
+ */
+import type { ITerminalAdapter, ITerminalBackendType, ITerminalRendererType, ITerminalOptions } from './Terminal.types';
+/**
+ * Create terminal adapter based on backend type.
+ *
+ * Factory function that instantiates the appropriate terminal backend
+ * adapter. Currently only xterm.js is implemented, with WebContainer
+ * and Monaco planned for future releases.
+ *
+ * @param backend - Backend type to instantiate
+ * @param options - Terminal options to pass to the adapter
+ * @returns Promise resolving to the configured adapter
+ *
+ * @throws {Error} If backend type is not supported yet
+ *
+ * @example
+ * ```ts
+ * const adapter = await createTerminalAdapter('xterm', {
+ *   mode: 'interactive',
+ *   wsUrl: 'ws://localhost:3100/terminal/session-123',
+ * });
+ * await adapter.initialize(container, options);
+ * ```
+ */
+export declare function createTerminalAdapter(backend: ITerminalBackendType, options: ITerminalOptions): Promise<ITerminalAdapter>;
+/**
+ * Create terminal adapter based on renderer type.
+ *
+ * Factory function that instantiates the appropriate terminal renderer
+ * adapter. Uses dynamic import for code-splitting — restty's WASM bundle
+ * is only loaded when the `'restty'` renderer is selected.
+ *
+ * @param renderer - Renderer type to instantiate
+ * @param options - Terminal options to pass to the adapter
+ * @returns Promise resolving to the configured adapter
+ *
+ * @example
+ * ```ts
+ * const adapter = await createTerminalAdapterForRenderer('restty', {
+ *   mode: 'interactive',
+ *   wsUrl: 'ws://localhost:3100/terminal/session-123',
+ * });
+ * await adapter.initialize(container, options);
+ * ```
+ */
+export declare function createTerminalAdapterForRenderer(renderer: ITerminalRendererType, options: ITerminalOptions): Promise<ITerminalAdapter>;
+//# sourceMappingURL=Terminal.adapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.adapter.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/Terminal.adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EACjB,MAAM,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,qBAAqB,CACzC,OAAO,EAAE,oBAAoB,EAC7B,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,gBAAgB,CAAC,CAgB3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAsB,gCAAgC,CACpD,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE,gBAAgB,GACxB,OAAO,CAAC,gBAAgB,CAAC,CAa3B"}

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

@@ -0,0 +1,68 @@
+//#region src/react-ui/blocks/Terminal/Terminal.adapter.ts
+/**
+* Create terminal adapter based on backend type.
+*
+* Factory function that instantiates the appropriate terminal backend
+* adapter. Currently only xterm.js is implemented, with WebContainer
+* and Monaco planned for future releases.
+*
+* @param backend - Backend type to instantiate
+* @param options - Terminal options to pass to the adapter
+* @returns Promise resolving to the configured adapter
+*
+* @throws {Error} If backend type is not supported yet
+*
+* @example
+* ```ts
+* const adapter = await createTerminalAdapter('xterm', {
+*   mode: 'interactive',
+*   wsUrl: 'ws://localhost:3100/terminal/session-123',
+* });
+* await adapter.initialize(container, options);
+* ```
+*/
+async function createTerminalAdapter(backend, options) {
+	switch (backend) {
+		case "xterm":
+			const { XTermAdapter } = await import("./XTermAdapter.js");
+			return new XTermAdapter(options);
+		case "webcontainer":
+		case "monaco": throw new Error(`Backend '${backend}' is not yet implemented. Use 'xterm' backend for now.`);
+		default: throw new Error(`Unknown terminal backend: ${backend}`);
+	}
+}
+/**
+* Create terminal adapter based on renderer type.
+*
+* Factory function that instantiates the appropriate terminal renderer
+* adapter. Uses dynamic import for code-splitting — restty's WASM bundle
+* is only loaded when the `'restty'` renderer is selected.
+*
+* @param renderer - Renderer type to instantiate
+* @param options - Terminal options to pass to the adapter
+* @returns Promise resolving to the configured adapter
+*
+* @example
+* ```ts
+* const adapter = await createTerminalAdapterForRenderer('restty', {
+*   mode: 'interactive',
+*   wsUrl: 'ws://localhost:3100/terminal/session-123',
+* });
+* await adapter.initialize(container, options);
+* ```
+*/
+async function createTerminalAdapterForRenderer(renderer, options) {
+	switch (renderer) {
+		case "restty": {
+			const { ResttyAdapter } = await import("./ResttyAdapter.js");
+			return new ResttyAdapter(options);
+		}
+		default: {
+			const { XTermAdapter } = await import("./XTermAdapter.js");
+			return new XTermAdapter(options);
+		}
+	}
+}
+
+//#endregion
+export { createTerminalAdapter, createTerminalAdapterForRenderer };

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

@@ -0,0 +1,43 @@
+/**
+ * Synthwave Industrial Dark theme for xterm.js.
+ *
+ * Matches mks-dev-environment design system from globals.css:
+ * - background: #241B2F (220 25% 15%)
+ * - primary: #D40C67 (330 85% 43%)
+ * - success: #44ffaa (142 100% 62%)
+ *
+ * Color palette optimized for dark terminal with high contrast
+ * and cyberpunk/synthwave aesthetic.
+ *
+ * @module components/devenv/terminal/theme
+ */
+import type { ITerminalTheme } from './Terminal.types';
+/**
+ * Synthwave Industrial Dark theme for xterm.js.
+ *
+ * Features:
+ * - Deep purple background (#241B2F) matching design system
+ * - Primary magenta cursor (#D40C67) with glow effect support
+ * - High-contrast ANSI colors for readability
+ * - Cyan selection with transparency for visual feedback
+ */
+export declare const SYNTHWAVE_TERMINAL_THEME: ITerminalTheme;
+/**
+ * Get terminal theme with optional overrides.
+ *
+ * Allows customizing the Synthwave theme while preserving
+ * the default color scheme. Useful for per-session theming.
+ *
+ * @param overrides - Partial theme properties to override
+ * @returns Complete terminal theme with applied overrides
+ *
+ * @example
+ * ```ts
+ * const customTheme = getTerminalTheme({
+ *   cursor: '#00ff00',
+ *   fontSize: 16,
+ * });
+ * ```
+ */
+export declare function getTerminalTheme(overrides?: Partial<ITerminalTheme>): ITerminalTheme;
+//# sourceMappingURL=Terminal.theme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.theme.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/Terminal.theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,EAAE,cA+BtC,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAClC,cAAc,CAEhB"}

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

@@ -0,0 +1,59 @@
+//#region src/react-ui/blocks/Terminal/Terminal.theme.ts
+/**
+* Synthwave Industrial Dark theme for xterm.js.
+*
+* Features:
+* - Deep purple background (#241B2F) matching design system
+* - Primary magenta cursor (#D40C67) with glow effect support
+* - High-contrast ANSI colors for readability
+* - Cyan selection with transparency for visual feedback
+*/
+const SYNTHWAVE_TERMINAL_THEME = {
+	background: "#241B2F",
+	foreground: "#e8e8ec",
+	cursor: "#D40C67",
+	cursorAccent: "#D40C67",
+	selectionBackground: "rgba(0, 217, 255, 0.3)",
+	black: "#1a1a2e",
+	red: "#ff4466",
+	green: "#44ffaa",
+	yellow: "#ffcc00",
+	blue: "#00d9ff",
+	magenta: "#D40C67",
+	cyan: "#00d9ff",
+	white: "#e8e8ec",
+	brightBlack: "#2d2d44",
+	brightRed: "#ff6b6b",
+	brightGreen: "#66ffcc",
+	brightYellow: "#ffdd33",
+	brightBlue: "#33e0ff",
+	brightMagenta: "#ff3399",
+	brightCyan: "#33e0ff",
+	brightWhite: "#ffffff"
+};
+/**
+* Get terminal theme with optional overrides.
+*
+* Allows customizing the Synthwave theme while preserving
+* the default color scheme. Useful for per-session theming.
+*
+* @param overrides - Partial theme properties to override
+* @returns Complete terminal theme with applied overrides
+*
+* @example
+* ```ts
+* const customTheme = getTerminalTheme({
+*   cursor: '#00ff00',
+*   fontSize: 16,
+* });
+* ```
+*/
+function getTerminalTheme(overrides) {
+	return {
+		...SYNTHWAVE_TERMINAL_THEME,
+		...overrides
+	};
+}
+
+//#endregion
+export { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme };

package/dist/react-ui/blocks/Terminal/Terminal.theme.restty.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Theme bridge between ITerminalTheme (xterm.js format) and GhosttyTheme (restty format).
+ *
+ * Converts the mks-dev-environment Synthwave theme colors into
+ * restty's Ghostty-compatible theme format for GPU-rendered terminals.
+ *
+ * @module components/devenv/terminal/theme-restty
+ */
+import type { ITerminalTheme } from './Terminal.types';
+/**
+ * RGB color as used by restty's Ghostty theme format.
+ * Each channel is 0-255.
+ */
+export interface IResttyThemeColor {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+/**
+ * Ghostty theme structure compatible with restty's applyTheme().
+ * Mirrors the GhosttyTheme type from restty/theme.
+ */
+export interface IResttyGhosttyTheme {
+    name?: string;
+    colors: {
+        background?: IResttyThemeColor;
+        foreground?: IResttyThemeColor;
+        cursor?: IResttyThemeColor;
+        cursorText?: IResttyThemeColor;
+        selectionBackground?: IResttyThemeColor;
+        selectionForeground?: IResttyThemeColor;
+        palette: Array<IResttyThemeColor | undefined>;
+    };
+    raw: Record<string, string>;
+}
+/**
+ * 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
+ */
+export declare function hexToResttyColor(hex: string): IResttyThemeColor;
+/**
+ * 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()
+ */
+export declare function xtermThemeToGhostty(theme: ITerminalTheme): IResttyGhosttyTheme;
+/**
+ * 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
+ */
+export declare function getSynthwaveGhosttyTheme(): IResttyGhosttyTheme;
+//# sourceMappingURL=Terminal.theme.restty.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.theme.restty.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/blocks/Terminal/Terminal.theme.restty.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGvD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QACN,UAAU,CAAC,EAAE,iBAAiB,CAAC;QAC/B,UAAU,CAAC,EAAE,iBAAiB,CAAC;QAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;QAC3B,UAAU,CAAC,EAAE,iBAAiB,CAAC;QAC/B,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;QACxC,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;QACxC,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;KAC/C,CAAC;IACF,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,iBAAiB,CAa/D;AAiCD;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,GAAG,mBAAmB,CAwC9E;AAED;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,IAAI,mBAAmB,CAE9D"}