@mks2508/mks-ui 0.6.7 → 0.7.0

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { useRestty } from "./ResttyContext.js";
+import { useMemo } from "react";
+
+//#region src/react-ui/blocks/Terminal/restty/useResttyPane.ts
+/**
+* useResttyPane — per-pane operations hook.
+*
+* Operates on the active pane when no paneId is specified.
+*
+* @example
+* ```tsx
+* const { pane, split, close, sendInput } = useResttyPane();
+* split("vertical");
+* sendInput("ls -la\n");
+* ```
+*
+* @module Terminal/restty/useResttyPane
+*/
+/**
+* Hook for operating on an individual restty pane.
+*
+* @param paneId - Target pane ID. If omitted, operates on the active pane.
+*/
+function useResttyPane(paneId) {
+	const { restty } = useRestty();
+	return useMemo(() => {
+		const resolve = () => {
+			if (!restty) return null;
+			return paneId !== void 0 ? restty.pane(paneId) : restty.activePane();
+		};
+		return {
+			get pane() {
+				return resolve();
+			},
+			split: (dir) => {
+				const p = resolve();
+				if (!p || !restty) return null;
+				const created = restty.splitPane(p.id, dir);
+				return created ? restty.pane(created.id) : null;
+			},
+			close: () => {
+				const p = resolve();
+				return p ? restty.closePane(p.id) : false;
+			},
+			focus: () => resolve()?.focus(),
+			sendInput: (text, source) => resolve()?.sendInput(text, source),
+			sendKeyInput: (text, source) => resolve()?.sendKeyInput(text, source),
+			setPaused: (paused) => resolve()?.setPaused(paused),
+			setRenderer: (value) => resolve()?.setRenderer(value),
+			isPtyConnected: () => resolve()?.isPtyConnected() ?? false,
+			connectPty: (url) => resolve()?.connectPty(url ?? ""),
+			disconnectPty: () => resolve()?.disconnectPty(),
+			clear: () => resolve()?.clearScreen()
+		};
+	}, [restty, paneId]);
+}
+
+//#endregion
+export { useResttyPane };

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

@@ -0,0 +1,39 @@
+/**
+ * useResttyPanes — pane layout management hook.
+ *
+ * @example
+ * ```tsx
+ * const { panes, activePane, splitActivePane } = useResttyPanes();
+ * console.log(`${panes.length} panes open`);
+ * splitActivePane("horizontal");
+ * ```
+ *
+ * @module Terminal/restty/useResttyPanes
+ */
+import type { ResttyPaneHandle, ResttyPaneSplitDirection } from '@mks2508/restty';
+/**
+ * Return type of the useResttyPanes hook.
+ */
+export interface IUseResttyPanesReturn {
+    /** All current pane handles. */
+    panes: ResttyPaneHandle[];
+    /** The active pane handle, or null. */
+    activePane: ResttyPaneHandle | null;
+    /** The focused pane handle, or null. */
+    focusedPane: ResttyPaneHandle | null;
+    /** Split the active pane. */
+    splitActivePane: (direction: ResttyPaneSplitDirection) => ResttyPaneHandle | null;
+    /** Split a specific pane by ID. */
+    splitPane: (id: number, direction: ResttyPaneSplitDirection) => ResttyPaneHandle | null;
+    /** Close a pane by ID. */
+    closePane: (id: number) => boolean;
+    /** Set the active pane. */
+    setActivePane: (id: number, options?: {
+        focus?: boolean;
+    }) => void;
+}
+/**
+ * Hook for managing the restty pane layout.
+ */
+export declare function useResttyPanes(): IUseResttyPanesReturn;
+//# sourceMappingURL=useResttyPanes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResttyPanes.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/restty/useResttyPanes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAGlF;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,gCAAgC;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,uCAAuC;IACvC,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,wCAAwC;IACxC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACrC,6BAA6B;IAC7B,eAAe,EAAE,CAAC,SAAS,EAAE,wBAAwB,KAAK,gBAAgB,GAAG,IAAI,CAAC;IAClF,mCAAmC;IACnC,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,wBAAwB,KAAK,gBAAgB,GAAG,IAAI,CAAC;IACxF,0BAA0B;IAC1B,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,2BAA2B;IAC3B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,qBAAqB,CAkBtD"}

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

@@ -0,0 +1,48 @@
+'use client';
+
+import { useRestty } from "./ResttyContext.js";
+import { useMemo } from "react";
+
+//#region src/react-ui/blocks/Terminal/restty/useResttyPanes.ts
+/**
+* useResttyPanes — pane layout management hook.
+*
+* @example
+* ```tsx
+* const { panes, activePane, splitActivePane } = useResttyPanes();
+* console.log(`${panes.length} panes open`);
+* splitActivePane("horizontal");
+* ```
+*
+* @module Terminal/restty/useResttyPanes
+*/
+/**
+* Hook for managing the restty pane layout.
+*/
+function useResttyPanes() {
+	const { restty } = useRestty();
+	return useMemo(() => ({
+		get panes() {
+			return restty?.panes() ?? [];
+		},
+		get activePane() {
+			return restty?.activePane() ?? null;
+		},
+		get focusedPane() {
+			return restty?.focusedPane() ?? null;
+		},
+		splitActivePane: (dir) => {
+			const pane = restty?.splitActivePane(dir) ?? null;
+			return pane ? restty.pane(pane.id) : null;
+		},
+		splitPane: (id, dir) => {
+			const pane = restty?.splitPane(id, dir) ?? null;
+			return pane ? restty.pane(pane.id) : null;
+		},
+		closePane: (id) => restty?.closePane(id) ?? false,
+		setActivePane: (id, opts) => restty?.setActivePane(id, opts)
+	}), [restty]);
+}
+
+//#endregion
+export { useResttyPanes };

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

@@ -0,0 +1,29 @@
+/**
+ * useResttyPlugins — declarative plugin lifecycle hook.
+ *
+ * @example
+ * ```tsx
+ * const { activePlugins, loadPlugin, unloadPlugin } = useResttyPlugins();
+ * ```
+ *
+ * @module Terminal/restty/useResttyPlugins
+ */
+import type { ResttyPlugin, ResttyPluginInfo } from '@mks2508/restty';
+/**
+ * Return type of the useResttyPlugins hook.
+ */
+export interface IUseResttyPluginsReturn {
+    /** Info for all active plugins. */
+    activePlugins: ResttyPluginInfo[];
+    /** Load a plugin at runtime. */
+    loadPlugin: (plugin: ResttyPlugin, options?: unknown) => void;
+    /** Unload a plugin by ID. */
+    unloadPlugin: (pluginId: string) => void;
+    /** Get info for a specific plugin. */
+    getPluginInfo: (pluginId: string) => ResttyPluginInfo | null;
+}
+/**
+ * Hook for managing restty plugins.
+ */
+export declare function useResttyPlugins(): IUseResttyPluginsReturn;
+//# sourceMappingURL=useResttyPlugins.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResttyPlugins.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/restty/useResttyPlugins.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGtE;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,mCAAmC;IACnC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,gCAAgC;IAChC,UAAU,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,6BAA6B;IAC7B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,sCAAsC;IACtC,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,gBAAgB,GAAG,IAAI,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,uBAAuB,CAS1D"}

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { useRestty } from "./ResttyContext.js";
+import { useMemo } from "react";
+
+//#region src/react-ui/blocks/Terminal/restty/useResttyPlugins.ts
+/**
+* useResttyPlugins — declarative plugin lifecycle hook.
+*
+* @example
+* ```tsx
+* const { activePlugins, loadPlugin, unloadPlugin } = useResttyPlugins();
+* ```
+*
+* @module Terminal/restty/useResttyPlugins
+*/
+/**
+* Hook for managing restty plugins.
+*/
+function useResttyPlugins() {
+	const { restty } = useRestty();
+	return useMemo(() => ({
+		get activePlugins() {
+			return restty?.pluginInfo() ?? [];
+		},
+		loadPlugin: (plugin, options) => restty?.use(plugin, options),
+		unloadPlugin: (pluginId) => restty?.unuse(pluginId),
+		getPluginInfo: (pluginId) => restty?.pluginInfo(pluginId) ?? null
+	}), [restty]);
+}
+
+//#endregion
+export { useResttyPlugins };

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

@@ -0,0 +1,32 @@
+/**
+ * useResttyVisibility — auto-pause rendering when offscreen.
+ *
+ * Uses IntersectionObserver + document.visibilitychange to pause GPU
+ * rendering when the terminal is not visible (saves GPU frames).
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * useResttyVisibility(containerRef);
+ * ```
+ *
+ * @module Terminal/restty/useResttyVisibility
+ */
+import { type RefObject } from 'react';
+/**
+ * Options for the visibility hook.
+ */
+export interface IUseResttyVisibilityOptions {
+    /** Pause when the browser tab is hidden (default: true). */
+    pauseOnTabHidden?: boolean;
+    /** Pause when the element leaves the viewport (default: true). */
+    pauseOnOffscreen?: boolean;
+}
+/**
+ * Auto-pause the restty renderer when the terminal is not visible.
+ *
+ * @param containerRef - Ref to the terminal container element.
+ * @param options - Visibility detection options.
+ */
+export declare function useResttyVisibility(containerRef: RefObject<HTMLElement | null>, options?: IUseResttyVisibilityOptions): void;
+//# sourceMappingURL=useResttyVisibility.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useResttyVisibility.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/restty/useResttyVisibility.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAIH,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC3C,OAAO,GAAE,2BAAgC,GACxC,IAAI,CA2CN"}

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

@@ -0,0 +1,67 @@
+'use client';
+
+import { useRestty } from "./ResttyContext.js";
+import { useEffect } from "react";
+
+//#region src/react-ui/blocks/Terminal/restty/useResttyVisibility.ts
+/**
+* useResttyVisibility — auto-pause rendering when offscreen.
+*
+* Uses IntersectionObserver + document.visibilitychange to pause GPU
+* rendering when the terminal is not visible (saves GPU frames).
+*
+* @example
+* ```tsx
+* const containerRef = useRef<HTMLDivElement>(null);
+* useResttyVisibility(containerRef);
+* ```
+*
+* @module Terminal/restty/useResttyVisibility
+*/
+/**
+* Auto-pause the restty renderer when the terminal is not visible.
+*
+* @param containerRef - Ref to the terminal container element.
+* @param options - Visibility detection options.
+*/
+function useResttyVisibility(containerRef, options = {}) {
+	const { pauseOnTabHidden = true, pauseOnOffscreen = true } = options;
+	const { restty, isReady } = useRestty();
+	useEffect(() => {
+		if (!isReady || !restty) return;
+		let isIntersecting = true;
+		let isTabVisible = !document.hidden;
+		const update = () => {
+			const visible = isIntersecting && isTabVisible;
+			restty.setPaused(!visible);
+		};
+		const onVisibilityChange = () => {
+			if (!pauseOnTabHidden) return;
+			isTabVisible = !document.hidden;
+			update();
+		};
+		document.addEventListener("visibilitychange", onVisibilityChange);
+		let observer = null;
+		if (pauseOnOffscreen && containerRef.current) {
+			observer = new IntersectionObserver(([entry]) => {
+				isIntersecting = entry.isIntersecting;
+				update();
+			}, { threshold: .01 });
+			observer.observe(containerRef.current);
+		}
+		return () => {
+			document.removeEventListener("visibilitychange", onVisibilityChange);
+			observer?.disconnect();
+			restty.setPaused(false);
+		};
+	}, [
+		restty,
+		isReady,
+		containerRef,
+		pauseOnTabHidden,
+		pauseOnOffscreen
+	]);
+}
+
+//#endregion
+export { useResttyVisibility };

package/dist/react-ui/blocks/Terminal/wterm/WtermJsonTransport.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Wterm JSON Transport.
+ *
+ * IPtyTransport implementation that bridges the MKS JSON WebSocket terminal
+ * protocol to wterm's raw byte WebSocket expectations.
+ *
+ * The MKS server speaks JSON:
+ *   Client → Server: { type: "create"|"input"|"resize"|"detach"|"kill", ... }
+ *   Server → Client: { type: "output"|"created"|"attached"|... , data: "raw bytes" }
+ *
+ * wterm's WebSocketTransport expects raw bytes on the wire and sends raw bytes.
+ * This transport unwraps the JSON envelope so wterm only sees raw I/O.
+ *
+ * @example
+ * ```tsx
+ * const transport = new WtermJsonTransport('bash');
+ * transport.connect({
+ *   url: 'ws://localhost:3100/terminal',
+ *   cols: 120,
+ *   rows: 40,
+ *   callbacks: {
+ *     onConnect: () => setConnected(true),
+ *     onData: (data) => terminalRef.current?.write(data),
+ *     onDisconnect: () => setConnected(false),
+ *   }
+ * });
+ *
+ * // User input → wterm → transport.sendInput(raw) → MKS server
+ * // MKS output → transport.onData(raw) → wterm.write(raw)
+ *
+ * transport.resize(80, 24);
+ * transport.disconnect();
+ * ```
+ *
+ * @module components/devenv/terminal/wterm/WtermJsonTransport
+ */
+import type { IPtyTransport, IPtyTransportConnectOptions } from '../Terminal.types';
+/**
+ * IPtyTransport that speaks the MKS JSON WebSocket protocol.
+ *
+ * Translates between:
+ * - MKS JSON messages (create, input, resize, etc.)
+ * - wterm's expectation of raw byte I/O
+ *
+ * wterm sends raw input → we JSON-wrap it → MKS server
+ * MKS server sends JSON { output } → we extract data → wterm.write(data)
+ */
+export declare class WtermJsonTransport implements IPtyTransport {
+    private ws;
+    private callbacks;
+    private sessionId;
+    private sessionName;
+    private connected;
+    /** Buffered resize sent before session creation. */
+    private pendingResize;
+    constructor(sessionName?: string);
+    /**
+     * Connect to MKS terminal server and create a session.
+     */
+    connect(options: IPtyTransportConnectOptions): void;
+    /**
+     * Send raw input to the PTY.
+     * wterm calls this with raw bytes — we JSON-wrap them.
+     */
+    sendInput(data: string): boolean;
+    /**
+     * Resize the PTY.
+     * We send \x1b[RESIZE:cols;rows] escape sequence so wterm can parse it.
+     */
+    resize(cols: number, rows: number): boolean;
+    /**
+     * Detach from session (session stays alive on server for reattach).
+     */
+    disconnect(): void;
+    /**
+     * Kill the session on the server.
+     */
+    destroy(): void;
+    isConnected(): boolean;
+    private send;
+    private handleMessage;
+}
+//# sourceMappingURL=WtermJsonTransport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WtermJsonTransport.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/wterm/WtermJsonTransport.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,KAAK,EACV,aAAa,EACb,2BAA2B,EAE5B,MAAM,mBAAmB,CAAC;AA6D3B;;;;;;;;;GASG;AACH,qBAAa,kBAAmB,YAAW,aAAa;IACtD,OAAO,CAAC,EAAE,CAA0B;IACpC,OAAO,CAAC,SAAS,CAAuC;IACxD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,oDAAoD;IACpD,OAAO,CAAC,aAAa,CAA+C;gBAExD,WAAW,SAAS;IAIhC;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,2BAA2B,GAAG,IAAI;IAoCnD;;;OAGG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAKhC;;;OAGG;IACH,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO;IAS3C;;OAEG;IACH,UAAU,IAAI,IAAI;IAYlB;;OAEG;IACH,OAAO,IAAI,IAAI;IAcf,WAAW,IAAI,OAAO;IAMtB,OAAO,CAAC,IAAI;IAMZ,OAAO,CAAC,aAAa;CAgEtB"}

package/dist/react-ui/blocks/Terminal/wterm/WtermJsonTransport.js

@@ -0,0 +1,191 @@
+//#region src/react-ui/blocks/Terminal/wterm/WtermJsonTransport.ts
+/**
+* IPtyTransport that speaks the MKS JSON WebSocket protocol.
+*
+* Translates between:
+* - MKS JSON messages (create, input, resize, etc.)
+* - wterm's expectation of raw byte I/O
+*
+* wterm sends raw input → we JSON-wrap it → MKS server
+* MKS server sends JSON { output } → we extract data → wterm.write(data)
+*/
+var WtermJsonTransport = class {
+	ws = null;
+	callbacks = null;
+	sessionId = null;
+	sessionName;
+	connected = false;
+	/** Buffered resize sent before session creation. */
+	pendingResize = null;
+	constructor(sessionName = "bash") {
+		this.sessionName = sessionName;
+	}
+	/**
+	* Connect to MKS terminal server and create a session.
+	*/
+	connect(options) {
+		if (this.ws) this.disconnect();
+		this.callbacks = options.callbacks;
+		const cols = Math.max(options.cols ?? 120, 20);
+		const rows = Math.max(options.rows ?? 40, 5);
+		const ws = new WebSocket(options.url);
+		ws.onopen = () => {
+			this.send({
+				type: "create",
+				name: this.sessionName,
+				cols,
+				rows
+			});
+		};
+		ws.onmessage = (event) => {
+			try {
+				const msg = JSON.parse(event.data);
+				this.handleMessage(msg);
+			} catch {
+				this.callbacks?.onData?.(event.data);
+			}
+		};
+		ws.onclose = () => {
+			this.connected = false;
+			this.callbacks?.onDisconnect?.();
+		};
+		ws.onerror = () => {
+			this.connected = false;
+			this.callbacks?.onError?.("WebSocket connection failed");
+		};
+		this.ws = ws;
+	}
+	/**
+	* Send raw input to the PTY.
+	* wterm calls this with raw bytes — we JSON-wrap them.
+	*/
+	sendInput(data) {
+		if (!this.connected || !this.sessionId) return false;
+		return this.send({
+			type: "input",
+			session: this.sessionId,
+			data
+		});
+	}
+	/**
+	* Resize the PTY.
+	* We send \x1b[RESIZE:cols;rows] escape sequence so wterm can parse it.
+	*/
+	resize(cols, rows) {
+		if (cols < 2 || rows < 2) return false;
+		if (!this.connected || !this.sessionId) {
+			this.pendingResize = {
+				cols,
+				rows
+			};
+			return true;
+		}
+		return this.send({
+			type: "resize",
+			session: this.sessionId,
+			cols,
+			rows
+		});
+	}
+	/**
+	* Detach from session (session stays alive on server for reattach).
+	*/
+	disconnect() {
+		if (this.ws) {
+			if (this.sessionId && this.ws.readyState === WebSocket.OPEN) this.send({
+				type: "detach",
+				session: this.sessionId
+			});
+			this.ws.close();
+			this.ws = null;
+		}
+		this.connected = false;
+		this.pendingResize = null;
+	}
+	/**
+	* Kill the session on the server.
+	*/
+	destroy() {
+		if (this.ws) {
+			if (this.sessionId && this.ws.readyState === WebSocket.OPEN) this.send({
+				type: "kill",
+				session: this.sessionId
+			});
+			this.ws.close();
+			this.ws = null;
+		}
+		this.connected = false;
+		this.sessionId = null;
+		this.callbacks = null;
+		this.pendingResize = null;
+	}
+	isConnected() {
+		return this.connected;
+	}
+	send(msg) {
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return false;
+		this.ws.send(JSON.stringify(msg));
+		return true;
+	}
+	handleMessage(msg) {
+		switch (msg.type) {
+			case "welcome": break;
+			case "created":
+				this.sessionId = msg.session;
+				this.connected = true;
+				if (this.pendingResize) {
+					const { cols, rows } = this.pendingResize;
+					this.pendingResize = null;
+					this.send({
+						type: "resize",
+						session: this.sessionId,
+						cols,
+						rows
+					});
+				}
+				this.callbacks?.onConnect?.();
+				break;
+			case "attached":
+				this.sessionId = msg.session;
+				this.connected = true;
+				if (this.pendingResize) {
+					const { cols, rows } = this.pendingResize;
+					this.pendingResize = null;
+					this.send({
+						type: "resize",
+						session: this.sessionId,
+						cols,
+						rows
+					});
+				}
+				this.callbacks?.onConnect?.();
+				break;
+			case "detached":
+				this.connected = false;
+				this.sessionId = null;
+				break;
+			case "output":
+				if (msg.data) this.callbacks?.onData?.(msg.data);
+				break;
+			case "killed":
+			case "exit":
+				this.connected = false;
+				this.sessionId = null;
+				this.callbacks?.onExit?.(msg.type === "exit" ? msg.code : 0);
+				break;
+			case "error":
+				this.callbacks?.onError?.(msg.error ?? "Unknown error");
+				break;
+			case "backend-info": break;
+			case "foreground-process":
+				this.callbacks?.onStatus?.(msg.name);
+				break;
+			case "resized":
+			case "sessions":
+			case "available-sessions": break;
+		}
+	}
+};
+
+//#endregion
+export { WtermJsonTransport };

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

@@ -8,4 +8,6 @@
  * @module @mks2508/mks-ui/react/blocks
  */
 export * from './Terminal';
+export * from './Sidebar';
+export * from './BottomNavBar';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC"}