@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,149 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { ListIcon } from "../../../icons/lucide-animated/list.js";
+import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
+import "../../../icons/lucide-animated/index.js";
+import { IconWrapper } from "../../../lib/icon-wrapper.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelHeader.tsx
+/**
+* TerminalPanelHeader Component.
+*
+* Enhanced macOS-style header with glassmorphism, dynamic session name,
+* gradient mesh overlay, and premium glass effects.
+*
+* @module components/devenv/terminal/panel/header
+*/
+/**
+* Traffic light button styles with macOS group hover behavior.
+* Dots are desaturated until the group is hovered.
+*/
+const trafficLightStyles = {
+	close: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-red-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(239,68,68,0.4)] hover:!bg-red-500 hover:!shadow-[0_0_12px_rgba(239,68,68,0.6)] hover:!scale-110",
+	minimize: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-yellow-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(234,179,8,0.4)] hover:!bg-yellow-500 hover:!shadow-[0_0_12px_rgba(234,179,8,0.6)] hover:!scale-110",
+	maximize: "w-3 h-3 rounded-full transition-all duration-200 bg-muted-foreground/30 group-hover/traffic:bg-green-500/90 group-hover/traffic:shadow-[0_0_6px_rgba(34,197,94,0.4)] hover:!bg-green-500 hover:!shadow-[0_0_12px_rgba(34,197,94,0.6)] hover:!scale-110"
+};
+/**
+* Segmented control button styles (macOS-style).
+*/
+const segmentedButtonStyles = {
+	base: "flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all",
+	inactive: "text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]",
+	active: "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)]"
+};
+/**
+* Connection status color classes with glow effects.
+*/
+function getStatusColor(isConnected) {
+	if (isConnected) return "bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)] animate-pulse";
+	return "bg-muted-foreground/60";
+}
+/**
+* TerminalPanelHeader Component.
+*
+* Displays enhanced macOS-style header with:
+* - Traffic light buttons (close, minimize, maximize) with glow effects
+* - Dynamic session/container name display
+* - Connection status badge with pulse animation
+* - Gradient mesh overlay for depth
+* - Multi-layer glassmorphism effect
+* - Animated top accent line
+*
+* @example
+* ```tsx
+* <TerminalPanelHeader
+*   containerName="devenv-agent-backend"
+*   isConnected={true}
+*   onClose={() => console.log('close')}
+* />
+* ```
+*/
+function TerminalPanelHeader({ containerName, isConnected, viewMode = "terminal", onViewModeChange, onClose, onMinimize, onMaximize }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative overflow-hidden", "flex items-center justify-between px-4 h-12", "bg-background/60", "border-b border-border/30"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between w-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "group/traffic flex items-center gap-2 px-1 py-1 -mx-1 rounded-md",
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onClose,
+							className: trafficLightStyles.close,
+							"aria-label": "Close",
+							title: "Close"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onMinimize,
+							className: trafficLightStyles.minimize,
+							"aria-label": "Minimize",
+							title: "Minimize"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onMaximize,
+							className: trafficLightStyles.maximize,
+							"aria-label": "Maximize",
+							title: "Maximize"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 flex items-center justify-center gap-2",
+					children: [/* @__PURE__ */ jsx(IconWrapper, {
+						icon: TerminalIcon,
+						size: 14,
+						className: cn("transition-all duration-500 flex-shrink-0", isConnected ? "text-primary/80" : "text-muted-foreground/40")
+					}), /* @__PURE__ */ jsx("h3", {
+						className: cn("text-sm font-mono font-medium truncate transition-all duration-500", isConnected ? "text-foreground/95 drop-shadow-[0_0_8px_hsla(330,85%,43%,0.3)]" : "text-foreground/60"),
+						children: containerName
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center bg-background/80 rounded-lg p-0.5 border-t border-white/10 border-b border-border/50 border-x border-border/40 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15),0_0_0_1px_rgba(0,0,0,0.1)]",
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onViewModeChange?.("terminal"),
+							className: cn(segmentedButtonStyles.base, !onViewModeChange && "opacity-70 cursor-not-allowed", viewMode === "terminal" ? segmentedButtonStyles.active : segmentedButtonStyles.inactive),
+							title: "Terminal mode - Raw logs with original ANSI colors",
+							children: [/* @__PURE__ */ jsx(IconWrapper, {
+								icon: TerminalIcon,
+								size: 14
+							}), /* @__PURE__ */ jsx("span", {
+								className: "hidden xs:inline",
+								children: "Terminal"
+							})]
+						}), /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onViewModeChange?.("react"),
+							className: cn(segmentedButtonStyles.base, !onViewModeChange && "opacity-70 cursor-not-allowed", viewMode === "react" ? segmentedButtonStyles.active : segmentedButtonStyles.inactive),
+							title: "React mode - Logs with badges and syntax highlighting",
+							children: [/* @__PURE__ */ jsx(IconWrapper, {
+								icon: ListIcon,
+								size: 14
+							}), /* @__PURE__ */ jsx("span", {
+								className: "hidden xs:inline",
+								children: "List"
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("div", { className: cn("w-2 h-2 rounded-full transition-all duration-300", getStatusColor(isConnected)) }), /* @__PURE__ */ jsx("span", {
+							className: "text-xs text-muted-foreground font-medium hidden sm:inline",
+							children: isConnected ? "Connected" : "Disconnected"
+						})]
+					})]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TerminalPanelHeader };

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

@@ -0,0 +1,35 @@
+/**
+ * TerminalPanelToolbar Component.
+ *
+ * Filter toolbar with log level buttons, toggles, and action buttons.
+ *
+ * @module components/devenv/terminal/panel/toolbar
+ */
+import type { ITerminalPanelToolbarProps } from './TerminalLogsPanel.types';
+/**
+ * TerminalPanelToolbar Component.
+ *
+ * Displays filter toolbar with:
+ * - Log level filter buttons with badges
+ * - Follow cursor toggle
+ * - Line numbers toggle
+ * - Action buttons (Search, Clear, Download)
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelToolbar
+ *   filterLevel="all"
+ *   followCursor={true}
+ *   showLineNumbers={false}
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   onFollowCursorChange={(enabled) => setFollowCursor(enabled)}
+ *   onShowLineNumbersChange={(enabled) => setShowLineNumbers(enabled)}
+ *   onClear={() => clearLogs()}
+ *   onDownload={() => downloadLogs()}
+ *   onSearch={() => openSearch()}
+ * />
+ * ```
+ */
+export declare function TerminalPanelToolbar({ filterLevel, followCursor, showLineNumbers, levelCounts, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onClear, onDownload, onSearch, }: ITerminalPanelToolbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalPanelToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelToolbar.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,EACV,0BAA0B,EAI3B,MAAM,2BAA2B,CAAC;AA4CnC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,UAAU,EACV,QAAQ,GACT,EAAE,0BAA0B,2CA0G5B"}

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"}