@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.js

@@ -0,0 +1,217 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../../ui/Popover/index.js";
+import { Separator } from "../../../../ui/Separator/index.js";
+import { SettingsIcon } from "../../../../icons/lucide-animated/settings.js";
+import "../../../../icons/lucide-animated/index.js";
+import { FONT_BUTTON_STYLES, SECTION_LABEL_STYLES, SEGMENTED_BUTTON_STYLES, TOGGLE_SWITCH_STYLES, TRIGGER_BUTTON_STYLES } from "../../Terminal.tokens.js";
+import { useTerminalSettings } from "../../hooks/useTerminalSettings.js";
+import { TerminalThemeSelector } from "../TerminalThemeSelector/index.js";
+import { terminalSettingsPopoverStyles } from "./TerminalSettingsPopover.styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.tsx
+/**
+* TerminalSettingsPopover Component.
+*
+* Gear icon popover for global terminal settings. Uses centralized
+* tokens for segmented controls, toggle switches, and trigger buttons.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSettingsPopover
+*/
+/** Min/max font size bounds. */
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+/**
+* TerminalSettingsPopover Component.
+*
+* Renders a settings gear icon that opens a popover with terminal
+* configuration options. Uses centralized tokens for all shared styles.
+*
+* @example
+* ```tsx
+* <TerminalSettingsPopover slots={{ trigger: 'h-10 w-10' }} />
+* ```
+*/
+function TerminalSettingsPopover({ slots } = {}) {
+	const { settings, setRenderer, setPtyBackend, setResttyThemeName, setFontSize, setCrtEffect, setDebugPanel, resetToDefaults } = useTerminalSettings();
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		type: "button",
+		className: cn(TRIGGER_BUTTON_STYLES, slots?.trigger),
+		title: "Terminal settings",
+		children: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 })
+	}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+		align: "end",
+		sideOffset: 6,
+		children: /* @__PURE__ */ jsxs(PopoverPopup, {
+			className: cn(terminalSettingsPopoverStyles.root, slots?.root),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.header, slots?.header),
+					children: [/* @__PURE__ */ jsx(SettingsIcon, {
+						size: 14,
+						className: "text-muted-foreground"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-foreground",
+						children: "Terminal Settings"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.section, slots?.section),
+					children: [/* @__PURE__ */ jsx("label", {
+						className: cn(SECTION_LABEL_STYLES, slots?.sectionLabel),
+						children: "Renderer"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn(terminalSettingsPopoverStyles.segmentedControl, slots?.segmentedControl),
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setRenderer("xterm"),
+								className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.renderer === "xterm" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+								children: "xterm"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setRenderer("restty"),
+								className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.renderer === "restty" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+								children: "restty"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setRenderer("wterm"),
+								className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.renderer === "wterm" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+								children: "wterm"
+							})
+						]
+					})]
+				}),
+				settings.renderer === "restty" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }), /* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.section, slots?.section),
+					children: [/* @__PURE__ */ jsx("label", {
+						className: cn(SECTION_LABEL_STYLES, slots?.sectionLabel),
+						children: "Theme"
+					}), /* @__PURE__ */ jsx(TerminalThemeSelector, {
+						currentTheme: settings.resttyThemeName,
+						onThemeChange: setResttyThemeName
+					})]
+				})] }),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.section, slots?.section),
+					children: [/* @__PURE__ */ jsx("label", {
+						className: cn(SECTION_LABEL_STYLES, slots?.sectionLabel),
+						children: "PTY Backend"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn(terminalSettingsPopoverStyles.segmentedControl, slots?.segmentedControl),
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setPtyBackend("nodepty"),
+							className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.ptyBackend === "nodepty" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+							children: "nodepty"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setPtyBackend("webcontainer"),
+							className: cn(SEGMENTED_BUTTON_STYLES.base, terminalSettingsPopoverStyles.segmentedButton, slots?.segmentedButton, settings.ptyBackend === "webcontainer" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+							children: "webcontainer"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.section, slots?.section),
+					children: [/* @__PURE__ */ jsx("label", {
+						className: cn(SECTION_LABEL_STYLES, slots?.sectionLabel),
+						children: "Font Size"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn(terminalSettingsPopoverStyles.fontControls, slots?.fontControls),
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setFontSize(settings.fontSize - 1),
+								className: FONT_BUTTON_STYLES,
+								disabled: settings.fontSize <= MIN_FONT_SIZE,
+								title: "Decrease font size",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "text-sm font-bold",
+									children: "−"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm font-mono text-foreground w-8 text-center",
+								children: settings.fontSize
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setFontSize(settings.fontSize + 1),
+								className: FONT_BUTTON_STYLES,
+								disabled: settings.fontSize >= MAX_FONT_SIZE,
+								title: "Increase font size",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "text-sm font-bold",
+									children: "+"
+								})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[10px] font-mono text-muted-foreground/50 ml-auto",
+								children: "px"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.section, slots?.section),
+					children: [/* @__PURE__ */ jsx("label", {
+						className: cn(SECTION_LABEL_STYLES, slots?.sectionLabel),
+						children: "CRT Effect"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn(terminalSettingsPopoverStyles.toggle, slots?.toggle),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: "Scanlines, bloom & vignette"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setCrtEffect(!settings.crtEffect),
+							className: cn(TOGGLE_SWITCH_STYLES.track.base, settings.crtEffect ? TOGGLE_SWITCH_STYLES.track.active : TOGGLE_SWITCH_STYLES.track.inactive),
+							children: /* @__PURE__ */ jsx("span", { className: cn(TOGGLE_SWITCH_STYLES.thumb.base, settings.crtEffect ? TOGGLE_SWITCH_STYLES.thumb.active : TOGGLE_SWITCH_STYLES.thumb.inactive) })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalSettingsPopoverStyles.section, slots?.section),
+					children: [/* @__PURE__ */ jsx("label", {
+						className: cn(SECTION_LABEL_STYLES, slots?.sectionLabel),
+						children: "Debug Panel"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn(terminalSettingsPopoverStyles.toggle, slots?.toggle),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground",
+							children: "GPU, FPS, grid & connection info"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setDebugPanel(!settings.debugPanel),
+							className: cn(TOGGLE_SWITCH_STYLES.track.base, settings.debugPanel ? TOGGLE_SWITCH_STYLES.track.active : TOGGLE_SWITCH_STYLES.track.inactive),
+							children: /* @__PURE__ */ jsx("span", { className: cn(TOGGLE_SWITCH_STYLES.thumb.base, settings.debugPanel ? TOGGLE_SWITCH_STYLES.thumb.active : TOGGLE_SWITCH_STYLES.thumb.inactive) })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-4 py-3",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: resetToDefaults,
+						className: cn(terminalSettingsPopoverStyles.resetButton, slots?.resetButton),
+						children: "Reset to Defaults"
+					})
+				})
+			]
+		})
+	}) })] });
+}
+
+//#endregion
+export { TerminalSettingsPopover };

package/dist/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * TerminalThemeSelector style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalThemeSelector
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalThemeSelector visual regions. */
+export type TerminalThemeSelectorSlot = 'root' | 'trigger' | 'searchInput' | 'themeList' | 'sectionLabel' | 'themeOption';
+/**
+ * Default style slots for TerminalThemeSelector.
+ */
+export declare const terminalThemeSelectorStyles: StyleSlots<TerminalThemeSelectorSlot>;
+//# sourceMappingURL=TerminalThemeSelector.styles.d.ts.map

package/dist/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalThemeSelector.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,2DAA2D;AAC3D,MAAM,MAAM,yBAAyB,GACjC,MAAM,GACN,SAAS,GACT,aAAa,GACb,WAAW,GACX,cAAc,GACd,aAAa,CAAC;AAElB;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,UAAU,CAAC,yBAAyB,CAO7E,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.styles.js

@@ -0,0 +1,15 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.styles.ts
+/**
+* Default style slots for TerminalThemeSelector.
+*/
+const terminalThemeSelectorStyles = {
+	root: "w-64 p-0 glass-subtle rounded-lg",
+	trigger: "h-8 px-2.5 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1.5 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0 border border-border/30",
+	searchInput: "w-full h-8 px-2.5 rounded-md bg-muted/20 border border-border/30 text-xs font-mono text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 transition-colors",
+	themeList: "max-h-[300px] overflow-y-auto py-1",
+	sectionLabel: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+	themeOption: "w-full text-left px-3 py-1.5 text-xs font-mono transition-colors hover:bg-muted/20"
+};
+
+//#endregion
+export { terminalThemeSelectorStyles };

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

@@ -0,0 +1,28 @@
+/**
+ * TerminalThemeSelector types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalThemeSelector
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TerminalThemeSelectorSlot } from './TerminalThemeSelector.styles';
+/**
+ * Props for the TerminalThemeSelector component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalThemeSelector
+ *   currentTheme="Synthwave Alpha"
+ *   onThemeChange={(name) => setResttyThemeName(name)}
+ *   slots={{ trigger: 'border-primary/40' }}
+ * />
+ * ```
+ */
+export interface ITerminalThemeSelectorProps {
+    /** Currently active theme name */
+    currentTheme: string;
+    /** Callback when user selects a new theme */
+    onThemeChange: (themeName: string) => void;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalThemeSelectorSlot>;
+}
+//# sourceMappingURL=TerminalThemeSelector.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalThemeSelector.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAEhF;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,2BAA2B;IAC1C,kCAAkC;IAClC,YAAY,EAAE,MAAM,CAAC;IAErB,6CAA6C;IAC7C,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,yBAAyB,CAAC,CAAC;CAClD"}

package/dist/react-ui/blocks/Terminal/panel/TerminalThemeSelector/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * TerminalThemeSelector Component.
+ *
+ * Searchable dropdown for restty's 458 built-in terminal themes.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalThemeSelector
+ */
+import type { ITerminalThemeSelectorProps } from './TerminalThemeSelector.types';
+export type { ITerminalThemeSelectorProps } from './TerminalThemeSelector.types';
+export { terminalThemeSelectorStyles } from './TerminalThemeSelector.styles';
+export type { TerminalThemeSelectorSlot } from './TerminalThemeSelector.styles';
+/**
+ * TerminalThemeSelector Component.
+ *
+ * Searchable dropdown for restty's built-in theme catalog.
+ * Favorites are pinned to the top, followed by alphabetically sorted themes.
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalThemeSelector
+ *   currentTheme="Synthwave Alpha"
+ *   onThemeChange={(name) => setResttyThemeName(name)}
+ * />
+ * ```
+ */
+export declare function TerminalThemeSelector({ currentTheme, onThemeChange, slots }: ITerminalThemeSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalThemeSelector/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAGjF,YAAY,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,YAAY,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AA2ChF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,2BAA2B,2CAyHxG"}

package/dist/react-ui/blocks/Terminal/panel/{TerminalThemeSelector.js → TerminalThemeSelector/index.js}

@@ -1,23 +1,21 @@
 'use client';
 
-import { cn } from "../../../lib/utils.js";
-import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../ui/Popover/index.js";
+import { cn } from "../../../../lib/utils.js";
+import { Popover, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTrigger } from "../../../../ui/Popover/index.js";
+import { terminalThemeSelectorStyles } from "./TerminalThemeSelector.styles.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/react-ui/blocks/Terminal/panel/TerminalThemeSelector.tsx
+//#region src/react-ui/blocks/Terminal/panel/TerminalThemeSelector/index.tsx
 /**
 * TerminalThemeSelector Component.
 *
 * Searchable dropdown for restty's 458 built-in terminal themes.
-* Uses Popover for the dropdown UI with glassmorphism styling
-* matching the existing TerminalFilterDropdown pattern.
+* Fully composable via StyleSlots.
 *
-* @module components/devenv/terminal/panel/TerminalThemeSelector
-*/
-/**
-* Favorite themes displayed at the top of the list.
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalThemeSelector
 */
+/** Favorite themes displayed at the top of the list. */
 const FAVORITE_THEMES = [
 	"Synthwave Alpha",
 	"Synthwave",
@@ -29,15 +27,23 @@ const FAVORITE_THEMES = [
 	"Gruvbox Dark"
 ];
 /**
-* Action button base styles (matches TerminalInteractivePanel pattern).
+* Individual theme option in the dropdown list.
 */
-const triggerStyles = "h-8 px-2.5 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1.5 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0 border border-border/30";
+function ThemeOption({ name, isActive, onSelect, className }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelect(name),
+		className: cn(className, isActive ? "text-primary bg-primary/10" : "text-foreground/80"),
+		children: [isActive && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-primary mr-2 align-middle" }), name]
+	});
+}
 /**
 * TerminalThemeSelector Component.
 *
 * Searchable dropdown for restty's built-in theme catalog.
-* Favorites are pinned to the top, followed by alphabetically
-* sorted themes. Search filters by case-insensitive substring.
+* Favorites are pinned to the top, followed by alphabetically sorted themes.
+*
+* All visual regions are overridable via the `slots` prop.
 *
 * @example
 * ```tsx
@@ -47,31 +53,22 @@ const triggerStyles = "h-8 px-2.5 rounded-md transition-all hover:bg-muted/20 ac
 * />
 * ```
 */
-function TerminalThemeSelector({ currentTheme, onThemeChange }) {
+function TerminalThemeSelector({ currentTheme, onThemeChange, slots }) {
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const [themeNames, setThemeNames] = useState([]);
 	const searchInputRef = useRef(null);
-	/**
-	* Load the theme catalog from restty on first open.
-	*/
 	useEffect(() => {
 		if (!open || themeNames.length > 0) return;
-		import("restty").then(({ listBuiltinThemeNames }) => {
+		import("@mks2508/restty").then(({ listBuiltinThemeNames }) => {
 			const names = listBuiltinThemeNames();
 			if (Array.isArray(names)) setThemeNames(names.sort((a, b) => a.localeCompare(b)));
 		}).catch(() => {});
 	}, [open, themeNames.length]);
-	/**
-	* Focus search input on open.
-	*/
 	useEffect(() => {
 		if (open) requestAnimationFrame(() => searchInputRef.current?.focus());
 		else setSearch("");
 	}, [open]);
-	/**
-	* Filter and group themes based on search query.
-	*/
 	const { favorites, others } = useMemo(() => {
 		const query = search.toLowerCase().trim();
 		const allNames = themeNames.length > 0 ? themeNames : FAVORITE_THEMES;
@@ -81,9 +78,6 @@ function TerminalThemeSelector({ currentTheme, onThemeChange }) {
 			others: allNames.filter((name) => !favSet.has(name) && (!query || name.toLowerCase().includes(query)))
 		};
 	}, [search, themeNames]);
-	/**
-	* Handle theme selection.
-	*/
 	const handleSelect = useCallback((themeName) => {
 		onThemeChange(themeName);
 		setOpen(false);
@@ -93,7 +87,7 @@ function TerminalThemeSelector({ currentTheme, onThemeChange }) {
 		onOpenChange: setOpen,
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: triggerStyles,
+			className: cn(terminalThemeSelectorStyles.trigger, slots?.trigger),
 			title: "Select terminal theme",
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "truncate max-w-[140px]",
@@ -110,7 +104,7 @@ function TerminalThemeSelector({ currentTheme, onThemeChange }) {
 			align: "start",
 			sideOffset: 6,
 			children: /* @__PURE__ */ jsxs(PopoverPopup, {
-				className: "w-64 p-0 glass-subtle rounded-lg",
+				className: cn(terminalThemeSelectorStyles.root, slots?.root),
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "p-2 border-b border-border/30",
 					children: /* @__PURE__ */ jsx("input", {
@@ -119,28 +113,29 @@ function TerminalThemeSelector({ currentTheme, onThemeChange }) {
 						value: search,
 						onChange: (e) => setSearch(e.target.value),
 						placeholder: "Search themes...",
-						className: "w-full h-8 px-2.5 rounded-md bg-muted/20 border border-border/30 text-xs font-mono text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-primary/40 focus:ring-1 focus:ring-primary/20 transition-colors"
+						className: cn(terminalThemeSelectorStyles.searchInput, slots?.searchInput)
 					})
 				}), /* @__PURE__ */ jsxs("div", {
-					className: "max-h-[300px] overflow-y-auto py-1",
+					className: cn(terminalThemeSelectorStyles.themeList, slots?.themeList),
 					children: [
 						favorites.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 							className: "px-3 py-1.5",
 							children: /* @__PURE__ */ jsx("span", {
-								className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+								className: cn(terminalThemeSelectorStyles.sectionLabel, slots?.sectionLabel),
 								children: "Favorites"
 							})
 						}), favorites.map((name) => /* @__PURE__ */ jsx(ThemeOption, {
 							name,
 							isActive: name === currentTheme,
-							onSelect: handleSelect
+							onSelect: handleSelect,
+							className: cn(terminalThemeSelectorStyles.themeOption, slots?.themeOption)
 						}, `fav-${name}`))] }),
 						others.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
 							favorites.length > 0 && /* @__PURE__ */ jsx("div", { className: "mx-2 my-1 h-px bg-border/20" }),
 							/* @__PURE__ */ jsx("div", {
 								className: "px-3 py-1.5",
 								children: /* @__PURE__ */ jsxs("span", {
-									className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider",
+									className: cn(terminalThemeSelectorStyles.sectionLabel, slots?.sectionLabel),
 									children: [
 										"All Themes (",
 										others.length,
@@ -151,7 +146,8 @@ function TerminalThemeSelector({ currentTheme, onThemeChange }) {
 							others.map((name) => /* @__PURE__ */ jsx(ThemeOption, {
 								name,
 								isActive: name === currentTheme,
-								onSelect: handleSelect
+								onSelect: handleSelect,
+								className: cn(terminalThemeSelectorStyles.themeOption, slots?.themeOption)
 							}, name))
 						] }),
 						favorites.length === 0 && others.length === 0 && /* @__PURE__ */ jsx("div", {
@@ -171,17 +167,6 @@ function TerminalThemeSelector({ currentTheme, onThemeChange }) {
 		}) })]
 	});
 }
-/**
-* Individual theme option in the dropdown list.
-*/
-function ThemeOption({ name, isActive, onSelect }) {
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		onClick: () => onSelect(name),
-		className: cn("w-full text-left px-3 py-1.5 text-xs font-mono transition-colors", "hover:bg-muted/20", isActive ? "text-primary bg-primary/10" : "text-foreground/80"),
-		children: [isActive && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 rounded-full bg-primary mr-2 align-middle" }), name]
-	});
-}
 
 //#endregion
 export { TerminalThemeSelector };

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

@@ -0,0 +1,38 @@
+/**
+ * ResttyContext — provides the Restty instance to descendant hooks.
+ *
+ * Set by ResttyTerminal after initialization. Consumed by useRestty,
+ * useResttyPane, useResttyPanes, and useResttyPlugins.
+ *
+ * @module Terminal/restty/ResttyContext
+ */
+import { type ReactNode } from 'react';
+import type { Restty } from '@mks2508/restty';
+/**
+ * Context value exposing the Restty instance and readiness flag.
+ */
+export interface IResttyContextValue {
+    /** The underlying Restty instance, or null before initialization. */
+    restty: Restty | null;
+    /** Whether the Restty instance has been initialized and is ready. */
+    isReady: boolean;
+}
+/**
+ * Provides a Restty instance to descendant components.
+ */
+export declare function ResttyProvider({ restty, isReady, children, }: IResttyContextValue & {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the Restty instance from context.
+ *
+ * Must be called within a ResttyTerminal or ResttyProvider tree.
+ *
+ * @example
+ * ```tsx
+ * const { restty, isReady } = useRestty();
+ * if (isReady) restty.splitActivePane("vertical");
+ * ```
+ */
+export declare function useRestty(): IResttyContextValue;
+//# sourceMappingURL=ResttyContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResttyContext.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/restty/ResttyContext.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,qEAAqE;IACrE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qEAAqE;IACrE,OAAO,EAAE,OAAO,CAAC;CAClB;AAID;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,mBAAmB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAM/C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,IAAI,mBAAmB,CAE/C"}

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

@@ -0,0 +1,47 @@
+'use client';
+
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/restty/ResttyContext.tsx
+/**
+* ResttyContext — provides the Restty instance to descendant hooks.
+*
+* Set by ResttyTerminal after initialization. Consumed by useRestty,
+* useResttyPane, useResttyPanes, and useResttyPlugins.
+*
+* @module Terminal/restty/ResttyContext
+*/
+const ResttyContext = createContext({
+	restty: null,
+	isReady: false
+});
+/**
+* Provides a Restty instance to descendant components.
+*/
+function ResttyProvider({ restty, isReady, children }) {
+	return /* @__PURE__ */ jsx(ResttyContext.Provider, {
+		value: {
+			restty,
+			isReady
+		},
+		children
+	});
+}
+/**
+* Access the Restty instance from context.
+*
+* Must be called within a ResttyTerminal or ResttyProvider tree.
+*
+* @example
+* ```tsx
+* const { restty, isReady } = useRestty();
+* if (isReady) restty.splitActivePane("vertical");
+* ```
+*/
+function useRestty() {
+	return useContext(ResttyContext);
+}
+
+//#endregion
+export { ResttyProvider, useRestty };

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

@@ -0,0 +1,50 @@
+/**
+ * ResttySessionProvider — React Context for sharing WASM + WebGPU resources.
+ *
+ * Wrapping N `ResttyTerminal` instances in a single `ResttySessionProvider`
+ * ensures they share one WASM module (~2 MB) and one WebGPU core instead of
+ * loading duplicates.
+ *
+ * @example
+ * ```tsx
+ * <ResttySessionProvider>
+ *   <ResttyTerminal wsUrl="ws://localhost:14421/terminal" />
+ *   <ResttyTerminal wsUrl="ws://localhost:14421/terminal" />
+ * </ResttySessionProvider>
+ * ```
+ *
+ * @module Terminal/restty/ResttySessionProvider
+ */
+import { type ReactNode } from 'react';
+import type { ResttyAppSession } from '@mks2508/restty';
+/**
+ * Value exposed by the ResttySession context.
+ */
+export interface IResttySessionContextValue {
+    /** Shared session for WASM/WebGPU resource reuse across panes. */
+    getSession: () => Promise<ResttyAppSession>;
+}
+/**
+ * Props for ResttySessionProvider.
+ */
+export interface IResttySessionProviderProps {
+    /** Optional pre-created session. If omitted, one is lazily created. */
+    session?: ResttyAppSession;
+    children: ReactNode;
+}
+/**
+ * Provides a shared ResttyAppSession to all descendant ResttyTerminal instances.
+ *
+ * The session is lazily created on first access via dynamic import to keep
+ * the WASM + WebGPU initialization out of the critical render path and
+ * to remain SSR-safe.
+ */
+export declare function ResttySessionProvider({ session: externalSession, children }: IResttySessionProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Access the shared ResttyAppSession from context.
+ *
+ * Returns `null` when called outside a `ResttySessionProvider` — in that
+ * case `ResttyTerminal` will create its own session automatically.
+ */
+export declare function useResttySession(): IResttySessionContextValue | null;
+//# sourceMappingURL=ResttySessionProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResttySessionProvider.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/restty/ResttySessionProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,kEAAkE;IAClE,UAAU,EAAE,MAAM,OAAO,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AAID;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,uEAAuE;IACvE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,EAAE,2BAA2B,2CAuBxG;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,0BAA0B,GAAG,IAAI,CAEpE"}