@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,58 @@
+/**
+ * TerminalSessionControl Component.
+ *
+ * Ghostty-inspired session control with current session display,
+ * dropdown selector for containers, and close button.
+ *
+ * @module components/devenv/terminal/panel/session-control
+ */
+/**
+ * Container information for dropdown display.
+ */
+export interface IContainerOption {
+    id: string;
+    name: string;
+    state: string;
+}
+/**
+ * Props for TerminalSessionControl component.
+ */
+export interface ITerminalSessionControlProps {
+    /** Current container name */
+    currentContainer?: string | null;
+    /** Available containers to select from */
+    containers: IContainerOption[];
+    /** Whether currently connected/streaming */
+    isConnected: boolean;
+    /** Callback when container is selected */
+    onContainerSelect: (containerName: string) => void;
+    /** Callback when close button is clicked (stop streaming) */
+    onClose: () => void;
+    /** Callback when refresh is clicked */
+    onRefresh?: () => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * TerminalSessionControl Component.
+ *
+ * Displays compact session control with:
+ * - Current container name with status indicator
+ * - Dropdown button (+) to select from available containers
+ * - Close button (X) to stop streaming and deselect
+ * - Refresh button (optional)
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionControl
+ *   currentContainer="devenv-agent-backend"
+ *   containers={containers}
+ *   isConnected={true}
+ *   onContainerSelect={(name) => selectContainer(name)}
+ *   onClose={() => stopStreaming()}
+ *   onRefresh={() => loadContainers()}
+ * />
+ * ```
+ */
+export declare function TerminalSessionControl({ currentContainer, containers, isConnected, onContainerSelect, onClose, onRefresh, className, }: ITerminalSessionControlProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalSessionControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSessionControl.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionControl.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEjC,0CAA0C;IAC1C,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAE/B,4CAA4C;IAC5C,WAAW,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD,6DAA6D;IAC7D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,4BAA4B,2CA4K9B"}

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

@@ -0,0 +1,63 @@
+/**
+ * TerminalSessionTabs Component.
+ *
+ * Ghostty-inspired session tab bar with status indicators,
+ * glassmorphic active state, and smooth animations.
+ *
+ * @module components/devenv/terminal/panel/session-tabs
+ */
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+/**
+ * Container option for dropdown.
+ */
+export interface IContainerOption {
+    id: string;
+    name: string;
+    state: string;
+}
+/**
+ * Props for TerminalSessionTabs component.
+ */
+export interface ITerminalSessionTabsProps {
+    /** Available sessions to display */
+    sessions: ITerminalSession[];
+    /** Currently active session ID */
+    activeSessionId: string | null;
+    /** Callback when tab is clicked */
+    onTabClick: (sessionId: string) => void;
+    /** Callback when close button is clicked */
+    onClose: (sessionId: string) => void;
+    /** Callback when new session button is clicked (optional, for refresh) */
+    onNewSession?: () => void;
+    /** Available containers that can be added as new tabs */
+    availableContainers?: IContainerOption[];
+    /** Callback when a container is selected from dropdown */
+    onAddContainer?: (containerName: string) => void;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * TerminalSessionTabs Component.
+ *
+ * Displays horizontal tab bar with:
+ * - Session name tabs with glassmorphic active state
+ * - Status indicator dots (connected/connecting/error)
+ * - Close button with hover reveal
+ * - New session "+" button with dropdown to select containers
+ * - Smooth slide animation on tab switch
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionTabs
+ *   sessions={sessions}
+ *   activeSessionId="session-1"
+ *   onTabClick={(id) => setActiveSession(id)}
+ *   onClose={(id) => closeSession(id)}
+ *   availableContainers={containers}
+ *   onAddContainer={(name) => addContainerTab(name)}
+ *   onNewSession={() => refreshContainers()}
+ * />
+ * ```
+ */
+export declare function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, onNewSession, availableContainers, onAddContainer, className, }: ITerminalSessionTabsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TerminalSessionTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSessionTabs.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionTabs.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAGlE;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,oCAAoC;IACpC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAE7B,kCAAkC;IAClC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B,mCAAmC;IACnC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,4CAA4C;IAC5C,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEzC,0DAA0D;IAC1D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,eAAe,EACf,UAAU,EACV,OAAO,EACP,YAAY,EACZ,mBAAwB,EACxB,cAAc,EACd,SAAS,GACV,EAAE,yBAAyB,kDAsO3B"}

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionTabs.js

@@ -0,0 +1,245 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { PlusIcon } from "../../../icons/lucide-animated/plus.js";
+import { XIcon } from "../../../icons/lucide-animated/x.js";
+import "../../../icons/lucide-animated/index.js";
+import terminal_session_tabs_module_default from "./terminal-session-tabs.module.js";
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalSessionTabs.tsx
+/**
+* TerminalSessionTabs Component.
+*
+* Ghostty-inspired session tab bar with status indicators,
+* glassmorphic active state, and smooth animations.
+*
+* @module components/devenv/terminal/panel/session-tabs
+*/
+/**
+* Get status color classes based on connection state.
+*/
+function getStatusColor(status) {
+	return {
+		connected: "bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)]",
+		connecting: "bg-yellow-500/80 animate-pulse",
+		disconnected: "bg-muted-foreground/60",
+		error: "bg-destructive/80 shadow-[0_0_8px_hsla(0,84%,60%,0.5)]"
+	}[status];
+}
+/**
+* TerminalSessionTabs Component.
+*
+* Displays horizontal tab bar with:
+* - Session name tabs with glassmorphic active state
+* - Status indicator dots (connected/connecting/error)
+* - Close button with hover reveal
+* - New session "+" button with dropdown to select containers
+* - Smooth slide animation on tab switch
+*
+* @example
+* ```tsx
+* <TerminalSessionTabs
+*   sessions={sessions}
+*   activeSessionId="session-1"
+*   onTabClick={(id) => setActiveSession(id)}
+*   onClose={(id) => closeSession(id)}
+*   availableContainers={containers}
+*   onAddContainer={(name) => addContainerTab(name)}
+*   onNewSession={() => refreshContainers()}
+* />
+* ```
+*/
+function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, onNewSession, availableContainers = [], onAddContainer, className }) {
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const addButtonContainerRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (addButtonContainerRef.current && !addButtonContainerRef.current.contains(event.target)) setIsDropdownOpen(false);
+		};
+		if (isDropdownOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => document.removeEventListener("mousedown", handleClickOutside);
+		}
+	}, [isDropdownOpen]);
+	/** Toggle dropdown or trigger new session callback. */
+	const openDropdown = () => {
+		if (availableToAdd.length > 0 && onAddContainer) setIsDropdownOpen(!isDropdownOpen);
+		else if (onNewSession) onNewSession();
+	};
+	const availableToAdd = (availableContainers || []).filter((container) => !sessions.some((session) => session.id === container.name));
+	if ((availableContainers || []).length === 0 && sessions.length === 0) return null;
+	const activeSession = sessions.find((s) => s.id === activeSessionId);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-1 px-3 h-12", "bg-background/60", "border-b border-border/30", "overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/30 hover:scrollbar-thumb-border/50", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ jsx(AnimatePresence, {
+					initial: false,
+					children: sessions.map((session) => {
+						const isActive = session.id === activeSessionId;
+						return /* @__PURE__ */ jsxs(motion.div, {
+							layout: true,
+							initial: {
+								opacity: 0,
+								scale: .85,
+								width: 0
+							},
+							animate: {
+								opacity: 1,
+								scale: 1,
+								width: "auto"
+							},
+							exit: {
+								opacity: 0,
+								scale: .85,
+								width: 0
+							},
+							transition: {
+								type: "spring",
+								stiffness: 500,
+								damping: 30,
+								mass: .8
+							},
+							role: "button",
+							tabIndex: 0,
+							onClick: () => onTabClick(session.id),
+							onKeyDown: (e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									onTabClick(session.id);
+								}
+							},
+							className: cn("group relative flex items-center gap-2 px-3 py-1.5 h-9 rounded-t-lg font-mono text-xs font-medium cursor-pointer overflow-hidden", "min-w-0 max-w-[200px] flex-shrink-0", isActive ? "bg-background text-foreground" : "bg-muted/40 text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground"),
+							title: `${session.name} - ${session.status}${session.containerName ? ` (${session.containerName})` : ""}`,
+							children: [
+								isActive && /* @__PURE__ */ jsx(motion.div, {
+									layoutId: "active-session-tab",
+									className: "absolute inset-0 rounded-t-lg bg-gradient-to-t from-primary/12 via-primary/5 to-transparent pointer-events-none",
+									transition: {
+										type: "spring",
+										stiffness: 400,
+										damping: 28
+									}
+								}),
+								isActive && /* @__PURE__ */ jsx(motion.div, {
+									layoutId: "active-tab-glow",
+									className: "absolute bottom-0 left-1 right-1 h-0.5 rounded-full bg-primary shadow-[0_0_12px_hsla(330,85%,43%,0.6),0_0_4px_hsla(330,85%,43%,0.8)] pointer-events-none",
+									transition: {
+										type: "spring",
+										stiffness: 400,
+										damping: 28
+									}
+								}),
+								/* @__PURE__ */ jsx("div", { className: cn("w-1.5 h-1.5 rounded-full flex-shrink-0 relative z-10", getStatusColor(session.status)) }),
+								/* @__PURE__ */ jsx("span", {
+									className: "truncate relative z-10",
+									children: session.name
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: (e) => {
+										e.stopPropagation();
+										onClose(session.id);
+									},
+									className: cn("flex-shrink-0 p-0.5 rounded-sm transition-all duration-200 relative z-10", "opacity-0 group-hover:opacity-100", "hover:bg-destructive/20 hover:text-destructive hover:scale-110", isActive && "opacity-70 hover:opacity-100"),
+									"aria-label": `Close ${session.name}`,
+									title: `Close ${session.name}`,
+									children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
+								})
+							]
+						}, session.id);
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex-shrink-0",
+				ref: addButtonContainerRef,
+				children: [/* @__PURE__ */ jsx(motion.button, {
+					type: "button",
+					onClick: openDropdown,
+					whileHover: { scale: 1.08 },
+					whileTap: { scale: .95 },
+					className: cn(terminal_session_tabs_module_default.addButton, "flex items-center justify-center h-9 w-9 p-1.5 rounded-md transition-colors duration-200 flex-shrink-0", "bg-muted/50 text-muted-foreground hover:bg-primary/30 hover:text-primary", "border border-border/40 hover:border-primary/50", "shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15)] hover:shadow-[0_0_8px_hsla(330,85%,43%,0.4)]"),
+					"aria-label": "New session",
+					"aria-expanded": isDropdownOpen,
+					title: availableToAdd.length > 0 ? "Add container tab" : "New session (Ctrl+Shift+T)",
+					children: /* @__PURE__ */ jsx(motion.div, {
+						animate: isDropdownOpen ? { rotate: 45 } : { rotate: 0 },
+						transition: {
+							type: "spring",
+							stiffness: 300,
+							damping: 20
+						},
+						children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: terminal_session_tabs_module_default.containerDropdown,
+					"data-open": isDropdownOpen && availableToAdd.length > 0,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "glass-subtle rounded-lg py-1",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "px-3 py-2 text-xs font-mono text-muted-foreground border-b border-white/10",
+							children: "Add Container"
+						}), availableToAdd.map((container) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => {
+								onAddContainer?.(container.name);
+								setIsDropdownOpen(false);
+							},
+							className: cn("w-full px-3 py-2 text-left flex items-center gap-2", "transition-all duration-150", "hover:bg-primary/10 hover:text-primary hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15)]", container.state === "running" && "text-success"),
+							children: [/* @__PURE__ */ jsx("div", { className: cn("w-1.5 h-1.5 rounded-full flex-shrink-0", container.state === "running" ? "bg-success shadow-[0_0_4px_hsla(142,100%,62%,0.4)]" : "bg-muted-foreground") }), /* @__PURE__ */ jsxs("div", {
+								className: "flex-1 min-w-0",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-sm font-mono truncate",
+									children: container.name
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-[10px] text-muted-foreground truncate",
+									children: container.state
+								})]
+							})]
+						}, container.id))]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			/* @__PURE__ */ jsx(AnimatePresence, { children: activeSession && /* @__PURE__ */ jsxs(motion.div, {
+				initial: {
+					opacity: 0,
+					x: 12
+				},
+				animate: {
+					opacity: 1,
+					x: 0
+				},
+				exit: {
+					opacity: 0,
+					x: 12
+				},
+				transition: {
+					type: "spring",
+					stiffness: 400,
+					damping: 25
+				},
+				className: "flex items-center gap-2 px-2.5 py-1 rounded-md bg-muted/15 border border-border/20",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[10px] font-mono text-muted-foreground/80 uppercase tracking-widest",
+						children: activeSession.backend
+					}),
+					/* @__PURE__ */ jsx("span", { className: "w-1 h-1 rounded-full bg-primary/40" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-[10px] font-mono text-muted-foreground/80 uppercase tracking-widest",
+						children: activeSession.mode
+					})
+				]
+			}) })
+		]
+	});
+}
+
+//#endregion
+export { TerminalSessionTabs };

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

@@ -0,0 +1,24 @@
+/**
+ * TerminalSettingsPopover Component.
+ *
+ * Gear icon popover for global terminal settings:
+ * renderer (xterm/restty), theme (458 built-in), PTY backend,
+ * and font size. Reads and writes via useTerminalSettings hook.
+ *
+ * @module components/devenv/terminal/panel/TerminalSettingsPopover
+ */
+/**
+ * TerminalSettingsPopover Component.
+ *
+ * Renders a settings gear icon that opens a popover with
+ * terminal configuration options. Reads settings from
+ * `useTerminalSettings` — no prop drilling needed.
+ *
+ * @example
+ * ```tsx
+ * // In action bar:
+ * <TerminalSettingsPopover />
+ * ```
+ */
+export declare function TerminalSettingsPopover(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalSettingsPopover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSettingsPopover.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAoCH;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,4CA2MtC"}

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

@@ -0,0 +1,225 @@
+'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 { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { TerminalThemeSelector } from "./TerminalThemeSelector.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover.tsx
+/**
+* TerminalSettingsPopover Component.
+*
+* Gear icon popover for global terminal settings:
+* renderer (xterm/restty), theme (458 built-in), PTY backend,
+* and font size. Reads and writes via useTerminalSettings hook.
+*
+* @module components/devenv/terminal/panel/TerminalSettingsPopover
+*/
+/**
+* Action button base styles for the trigger icon.
+*/
+const triggerBtnStyles = "h-8 w-8 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0";
+/**
+* Segmented control button styles.
+*/
+const segmentedBase = "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all";
+const segmentedInactive = "text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]";
+const segmentedActive = "bg-primary/20 text-primary border border-primary/30 shadow-[0_0_8px_hsla(330,85%,43%,0.15)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.25)]";
+/**
+* Min/max font size bounds.
+*/
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+/**
+* Small control button for font size +/-.
+*/
+const fontBtnStyles = "h-7 w-7 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:pointer-events-none";
+/**
+* TerminalSettingsPopover Component.
+*
+* Renders a settings gear icon that opens a popover with
+* terminal configuration options. Reads settings from
+* `useTerminalSettings` — no prop drilling needed.
+*
+* @example
+* ```tsx
+* // In action bar:
+* <TerminalSettingsPopover />
+* ```
+*/
+function TerminalSettingsPopover() {
+	const { settings, setRenderer, setPtyBackend, setResttyThemeName, setFontSize, setCrtEffect, setDebugPanel, resetToDefaults } = useTerminalSettings();
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: triggerBtnStyles,
+		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: "w-72 p-0 glass-subtle",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-4 py-3",
+					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: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Renderer"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 bg-muted/10 rounded-lg p-0.5",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setRenderer("xterm"),
+							className: cn(segmentedBase, settings.renderer === "xterm" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "xterm"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setRenderer("restty"),
+							className: cn(segmentedBase, settings.renderer === "restty" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "restty"
+						})]
+					})]
+				}),
+				settings.renderer === "restty" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }), /* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Theme"
+					}), /* @__PURE__ */ jsx(TerminalThemeSelector, {
+						currentTheme: settings.resttyThemeName,
+						onThemeChange: setResttyThemeName
+					})]
+				})] }),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "PTY Backend"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1 bg-muted/10 rounded-lg p-0.5",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setPtyBackend("nodepty"),
+							className: cn(segmentedBase, settings.ptyBackend === "nodepty" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "nodepty"
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => setPtyBackend("webcontainer"),
+							className: cn(segmentedBase, settings.ptyBackend === "webcontainer" ? segmentedActive : segmentedInactive, "flex-1 justify-center"),
+							children: "webcontainer"
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Font Size"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => setFontSize(settings.fontSize - 1),
+								className: fontBtnStyles,
+								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: fontBtnStyles,
+								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: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "CRT Effect"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between",
+						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("relative w-9 h-5 rounded-full transition-colors", settings.crtEffect ? "bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]" : "bg-muted/30"),
+							children: /* @__PURE__ */ jsx("span", { className: cn("absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all", settings.crtEffect ? "left-[18px]" : "left-0.5") })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "px-4 py-3 space-y-2",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+						children: "Debug Panel"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between",
+						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("relative w-9 h-5 rounded-full transition-colors", settings.debugPanel ? "bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]" : "bg-muted/30"),
+							children: /* @__PURE__ */ jsx("span", { className: cn("absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all", settings.debugPanel ? "left-[18px]" : "left-0.5") })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Separator, { className: "bg-border/30" }),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-4 py-3",
+					children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: resetToDefaults,
+						className: "w-full h-8 rounded-md text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors",
+						children: "Reset to Defaults"
+					})
+				})
+			]
+		})
+	}) })] });
+}
+
+//#endregion
+export { TerminalSettingsPopover };

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

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ *
+ * @module components/devenv/terminal/panel/TerminalThemeSelector
+ */
+/**
+ * Props for the TerminalThemeSelector component.
+ */
+export interface ITerminalThemeSelectorProps {
+    /** Currently active theme name */
+    currentTheme: string;
+    /** Callback when user selects a new theme */
+    onThemeChange: (themeName: string) => void;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <TerminalThemeSelector
+ *   currentTheme="Synthwave Alpha"
+ *   onThemeChange={(name) => setResttyThemeName(name)}
+ * />
+ * ```
+ */
+export declare function TerminalThemeSelector({ currentTheme, onThemeChange }: ITerminalThemeSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalThemeSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalThemeSelector.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalThemeSelector.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,kCAAkC;IAClC,YAAY,EAAE,MAAM,CAAC;IAErB,6CAA6C;IAC7C,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAsBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,EAAE,2BAA2B,2CAyJjG"}