@mks2508/mks-ui 0.6.8 → 0.8.0

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

@@ -0,0 +1,13 @@
+/**
+ * TerminalSessionControl style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionControl
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalSessionControl visual regions. */
+export type TerminalSessionControlSlot = 'root' | 'statusDot' | 'containerName' | 'liveLabel' | 'addButton' | 'refreshButton' | 'closeButton' | 'dropdown' | 'dropdownItem';
+/**
+ * Default style slots for TerminalSessionControl.
+ */
+export declare const terminalSessionControlStyles: StyleSlots<TerminalSessionControlSlot>;
+//# sourceMappingURL=TerminalSessionControl.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSessionControl.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionControl/TerminalSessionControl.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,4DAA4D;AAC5D,MAAM,MAAM,0BAA0B,GAClC,MAAM,GACN,WAAW,GACX,eAAe,GACf,WAAW,GACX,WAAW,GACX,eAAe,GACf,aAAa,GACb,UAAU,GACV,cAAc,CAAC;AAEnB;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,UAAU,CAAC,0BAA0B,CAU/E,CAAC"}

package/dist/react-ui/blocks/Terminal/panel/{TerminalSessionControl.d.ts → TerminalSessionControl/TerminalSessionControl.types.d.ts}

@@ -1,21 +1,35 @@
 /**
- * TerminalSessionControl Component.
+ * TerminalSessionControl types.
  *
- * Ghostty-inspired session control with current session display,
- * dropdown selector for containers, and close button.
- *
- * @module components/devenv/terminal/panel/session-control
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionControl
  */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TerminalSessionControlSlot } from './TerminalSessionControl.styles';
 /**
  * Container information for dropdown display.
  */
 export interface IContainerOption {
+    /** Unique container identifier */
     id: string;
+    /** Container display name */
     name: string;
+    /** Container state (e.g. 'running', 'stopped') */
     state: string;
 }
 /**
- * Props for TerminalSessionControl component.
+ * Props for the TerminalSessionControl component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionControl
+ *   currentContainer="devenv-agent-backend"
+ *   containers={containers}
+ *   isConnected={true}
+ *   onContainerSelect={(name) => selectContainer(name)}
+ *   onClose={() => stopStreaming()}
+ *   slots={{ root: 'h-14' }}
+ * />
+ * ```
  */
 export interface ITerminalSessionControlProps {
     /** Current container name */
@@ -30,29 +44,9 @@ export interface ITerminalSessionControlProps {
     onClose: () => void;
     /** Callback when refresh is clicked */
     onRefresh?: () => void;
-    /** Custom class name */
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalSessionControlSlot>;
+    /** Custom class name on root element */
     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
+//# sourceMappingURL=TerminalSessionControl.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSessionControl.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionControl/TerminalSessionControl.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;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,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,CAAC;IAElD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,38 @@
+/**
+ * TerminalSessionControl Component.
+ *
+ * Ghostty-inspired session control with current session display,
+ * dropdown selector for containers, and close button.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionControl
+ */
+import type { ITerminalSessionControlProps } from './TerminalSessionControl.types';
+export type { ITerminalSessionControlProps, IContainerOption } from './TerminalSessionControl.types';
+export { terminalSessionControlStyles } from './TerminalSessionControl.styles';
+export type { TerminalSessionControlSlot } from './TerminalSessionControl.styles';
+/**
+ * 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)
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionControl
+ *   currentContainer="devenv-agent-backend"
+ *   containers={containers}
+ *   isConnected={true}
+ *   onContainerSelect={(name) => selectContainer(name)}
+ *   onClose={() => stopStreaming()}
+ *   slots={{ root: 'h-14' }}
+ * />
+ * ```
+ */
+export declare function TerminalSessionControl({ currentContainer, containers, isConnected, onContainerSelect, onClose, onRefresh, slots, className, }: ITerminalSessionControlProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionControl/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AASH,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAGnF,YAAY,EAAE,4BAA4B,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACrG,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAC/E,YAAY,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,SAAS,GACV,EAAE,4BAA4B,2CA4H9B"}

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

@@ -0,0 +1,23 @@
+/**
+ * TerminalSessionTabs style definitions.
+ *
+ * StyleSlots for the Ghostty-inspired session tab bar with
+ * status indicators, glassmorphic active state, and smooth animations.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionTabs
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalSessionTabs visual regions. */
+export type TerminalSessionTabsSlot = 'root' | 'tab' | 'tabIndicator' | 'tabGlowBar' | 'statusDot' | 'tabName' | 'closeButton' | 'addButton' | 'dropdown' | 'dropdownItem' | 'infoBadge';
+/**
+ * Default style slots for TerminalSessionTabs.
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionTabs
+ *   slots={{ root: 'h-14', tab: 'max-w-[300px]' }}
+ * />
+ * ```
+ */
+export declare const terminalSessionTabsStyles: StyleSlots<TerminalSessionTabsSlot>;
+//# sourceMappingURL=TerminalSessionTabs.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSessionTabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionTabs/TerminalSessionTabs.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,yDAAyD;AACzD,MAAM,MAAM,uBAAuB,GAC/B,MAAM,GACN,KAAK,GACL,cAAc,GACd,YAAY,GACZ,WAAW,GACX,SAAS,GACT,aAAa,GACb,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,CAAC;AAEhB;;;;;;;;;GASG;AACH,eAAO,MAAM,yBAAyB,EAAE,UAAU,CAAC,uBAAuB,CAYzE,CAAC"}

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

@@ -0,0 +1,27 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalSessionTabs/TerminalSessionTabs.styles.ts
+/**
+* Default style slots for TerminalSessionTabs.
+*
+* @example
+* ```tsx
+* <TerminalSessionTabs
+*   slots={{ root: 'h-14', tab: 'max-w-[300px]' }}
+* />
+* ```
+*/
+const terminalSessionTabsStyles = {
+	root: "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",
+	tab: "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",
+	tabIndicator: "absolute inset-0 rounded-t-lg bg-gradient-to-t from-primary/12 via-primary/5 to-transparent pointer-events-none",
+	tabGlowBar: "absolute bottom-0 left-1 right-1 h-0.5 rounded-full bg-primary pointer-events-none",
+	statusDot: "w-1.5 h-1.5 rounded-full flex-shrink-0 relative z-10",
+	tabName: "truncate relative z-10",
+	closeButton: "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",
+	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",
+	dropdown: "",
+	dropdownItem: "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)]",
+	infoBadge: "flex items-center gap-2 px-2.5 py-1 rounded-md bg-muted/15 border border-border/20"
+};
+
+//#endregion
+export { terminalSessionTabsStyles };

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

@@ -0,0 +1,56 @@
+/**
+ * TerminalSessionTabs types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionTabs
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { ITerminalSession } from '../TerminalLogsPanel.types';
+import type { TerminalSessionTabsSlot } from './TerminalSessionTabs.styles';
+/**
+ * Container option for the add-tab dropdown.
+ */
+export interface IContainerOption {
+    /** Unique container identifier */
+    id: string;
+    /** Container display name */
+    name: string;
+    /** Container state (e.g. 'running', 'stopped') */
+    state: string;
+}
+/**
+ * Props for the TerminalSessionTabs component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionTabs
+ *   sessions={sessions}
+ *   activeSessionId="session-1"
+ *   onTabClick={(id) => setActiveSession(id)}
+ *   onClose={(id) => closeSession(id)}
+ *   availableContainers={containers}
+ *   onAddContainer={(name) => addContainerTab(name)}
+ *   slots={{ root: 'h-14', tab: 'rounded-lg' }}
+ * />
+ * ```
+ */
+export interface ITerminalSessionTabsProps {
+    /** Available sessions to display as tabs */
+    sessions: ITerminalSession[];
+    /** Currently active session ID */
+    activeSessionId: string | null;
+    /** Callback when a tab is clicked */
+    onTabClick: (sessionId: string) => void;
+    /** Callback when a tab's 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 the dropdown */
+    onAddContainer?: (containerName: string) => void;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalSessionTabsSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+//# sourceMappingURL=TerminalSessionTabs.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSessionTabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionTabs/TerminalSessionTabs.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,yBAAyB;IACxC,4CAA4C;IAC5C,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAE7B,kCAAkC;IAClC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B,qCAAqC;IACrC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,oDAAoD;IACpD,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,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAE/C,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,40 @@
+/**
+ * TerminalSessionTabs Component.
+ *
+ * Ghostty-inspired session tab bar with status indicators,
+ * glassmorphic active state, and smooth animations.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionTabs
+ */
+import type { ITerminalSessionTabsProps } from './TerminalSessionTabs.types';
+export type { ITerminalSessionTabsProps, IContainerOption } from './TerminalSessionTabs.types';
+export { terminalSessionTabsStyles } from './TerminalSessionTabs.styles';
+export type { TerminalSessionTabsSlot } from './TerminalSessionTabs.styles';
+/**
+ * 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
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @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, slots, className, }: ITerminalSessionTabsProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSessionTabs/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAUH,OAAO,KAAK,EAAE,yBAAyB,EAAoB,MAAM,6BAA6B,CAAC;AAI/F,YAAY,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/F,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,eAAe,EACf,UAAU,EACV,OAAO,EACP,YAAY,EACZ,mBAAwB,EACxB,cAAc,EACd,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,kDAqN3B"}

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

@@ -1,35 +1,27 @@
 '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 { 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 { PRIMARY_GLOW, PRIMARY_GLOW_COMPOUND, STATUS_COLORS } from "../../Terminal.tokens.js";
+import { terminalSessionTabsStyles } from "./TerminalSessionTabs.styles.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
+//#region src/react-ui/blocks/Terminal/panel/TerminalSessionTabs/index.tsx
 /**
 * TerminalSessionTabs Component.
 *
 * Ghostty-inspired session tab bar with status indicators,
 * glassmorphic active state, and smooth animations.
+* Fully composable via StyleSlots.
 *
-* @module components/devenv/terminal/panel/session-tabs
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionTabs
 */
 /**
-* 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:
@@ -39,6 +31,8 @@ function getStatusColor(status) {
 * - New session "+" button with dropdown to select containers
 * - Smooth slide animation on tab switch
 *
+* All visual regions are overridable via the `slots` prop.
+*
 * @example
 * ```tsx
 * <TerminalSessionTabs
@@ -52,7 +46,7 @@ function getStatusColor(status) {
 * />
 * ```
 */
-function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, onNewSession, availableContainers = [], onAddContainer, className }) {
+function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, onNewSession, availableContainers = [], onAddContainer, slots, className }) {
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 	const addButtonContainerRef = useRef(null);
 	useEffect(() => {
@@ -64,16 +58,16 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 			return () => document.removeEventListener("mousedown", handleClickOutside);
 		}
 	}, [isDropdownOpen]);
+	const availableToAdd = (availableContainers || []).filter((container) => !sessions.some((session) => session.id === container.name));
 	/** 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),
+		className: cn(terminalSessionTabsStyles.root, slots?.root, className),
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "flex items-center gap-1",
@@ -81,6 +75,7 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 					initial: false,
 					children: sessions.map((session) => {
 						const isActive = session.id === activeSessionId;
+						const statusStyle = STATUS_COLORS[session.status];
 						return /* @__PURE__ */ jsxs(motion.div, {
 							layout: true,
 							initial: {
@@ -113,12 +108,12 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 									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"),
+							className: cn(terminalSessionTabsStyles.tab, slots?.tab, 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",
+									className: cn(terminalSessionTabsStyles.tabIndicator, slots?.tabIndicator),
 									transition: {
 										type: "spring",
 										stiffness: 400,
@@ -127,16 +122,16 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 								}),
 								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",
+									className: cn(terminalSessionTabsStyles.tabGlowBar, slots?.tabGlowBar, PRIMARY_GLOW_COMPOUND.tabBar),
 									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("div", { className: cn(terminalSessionTabsStyles.statusDot, slots?.statusDot, statusStyle.dot) }),
 								/* @__PURE__ */ jsx("span", {
-									className: "truncate relative z-10",
+									className: cn(terminalSessionTabsStyles.tabName, slots?.tabName),
 									children: session.name
 								}),
 								/* @__PURE__ */ jsx("button", {
@@ -145,7 +140,7 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 										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"),
+									className: cn(terminalSessionTabsStyles.closeButton, slots?.closeButton, isActive && "opacity-70 hover:opacity-100"),
 									"aria-label": `Close ${session.name}`,
 									title: `Close ${session.name}`,
 									children: /* @__PURE__ */ jsx(XIcon, { size: 12 })
@@ -163,7 +158,7 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 					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)]"),
+					className: cn(terminal_session_tabs_module_default.addButton, terminalSessionTabsStyles.addButton, slots?.addButton, `shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15)] hover:${PRIMARY_GLOW.md}`),
 					"aria-label": "New session",
 					"aria-expanded": isDropdownOpen,
 					title: availableToAdd.length > 0 ? "Add container tab" : "New session (Ctrl+Shift+T)",
@@ -177,7 +172,7 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 						children: /* @__PURE__ */ jsx(PlusIcon, { size: 16 })
 					})
 				}), /* @__PURE__ */ jsx("div", {
-					className: terminal_session_tabs_module_default.containerDropdown,
+					className: cn(terminal_session_tabs_module_default.containerDropdown, slots?.dropdown),
 					"data-open": isDropdownOpen && availableToAdd.length > 0,
 					children: /* @__PURE__ */ jsxs("div", {
 						className: "glass-subtle rounded-lg py-1",
@@ -190,8 +185,8 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 								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: cn(terminalSessionTabsStyles.dropdownItem, slots?.dropdownItem, 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" ? STATUS_COLORS.connected.dot : STATUS_COLORS.disconnected.dot) }), /* @__PURE__ */ jsxs("div", {
 								className: "flex-1 min-w-0",
 								children: [/* @__PURE__ */ jsx("div", {
 									className: "text-sm font-mono truncate",
@@ -224,7 +219,7 @@ function TerminalSessionTabs({ sessions, activeSessionId, onTabClick, onClose, o
 					stiffness: 400,
 					damping: 25
 				},
-				className: "flex items-center gap-2 px-2.5 py-1 rounded-md bg-muted/15 border border-border/20",
+				className: cn(terminalSessionTabsStyles.infoBadge, slots?.infoBadge),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "text-[10px] font-mono text-muted-foreground/80 uppercase tracking-widest",

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionTabs/terminal-session-tabs.module.css

@@ -0,0 +1,60 @@
+/**
+ * TerminalSessionTabs Dropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for the "add container" dropdown.
+ * The + button acts as anchor, dropdown is positioned below it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-session-tabs/styles
+ */
+
+/* + button - acts as CSS anchor */
+.addButton {
+  anchor-name: --session-tabs-add-anchor;
+}
+
+/* Container dropdown - anchored to + button */
+.containerDropdown {
+  position-anchor: --session-tabs-add-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 200px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.containerDropdown[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .containerDropdown {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .containerDropdown[data-open="true"] {
+    display: block;
+  }
+}
+

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionTabs/terminal-session-tabs.module.js

@@ -0,0 +1,5 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalSessionTabs/terminal-session-tabs.module.css
+var terminal_session_tabs_module_default = {};
+
+//#endregion
+export { terminal_session_tabs_module_default as default };

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

@@ -0,0 +1,13 @@
+/**
+ * TerminalSettingsPopover style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSettingsPopover
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalSettingsPopover visual regions. */
+export type TerminalSettingsPopoverSlot = 'root' | 'trigger' | 'header' | 'section' | 'sectionLabel' | 'segmentedControl' | 'segmentedButton' | 'fontControls' | 'toggle' | 'resetButton';
+/**
+ * Default style slots for TerminalSettingsPopover.
+ */
+export declare const terminalSettingsPopoverStyles: StyleSlots<TerminalSettingsPopoverSlot>;
+//# sourceMappingURL=TerminalSettingsPopover.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSettingsPopover.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/TerminalSettingsPopover.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,6DAA6D;AAC7D,MAAM,MAAM,2BAA2B,GACnC,MAAM,GACN,SAAS,GACT,QAAQ,GACR,SAAS,GACT,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,cAAc,GACd,QAAQ,GACR,aAAa,CAAC;AAElB;;GAEG;AACH,eAAO,MAAM,6BAA6B,EAAE,UAAU,CAAC,2BAA2B,CAWjF,CAAC"}

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

@@ -0,0 +1,19 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/TerminalSettingsPopover.styles.ts
+/**
+* Default style slots for TerminalSettingsPopover.
+*/
+const terminalSettingsPopoverStyles = {
+	root: "w-72 p-0 glass-subtle",
+	trigger: "",
+	header: "flex items-center gap-2 px-4 py-3",
+	section: "px-4 py-3 space-y-2",
+	sectionLabel: "text-[10px] font-mono text-muted-foreground uppercase tracking-wider",
+	segmentedControl: "flex items-center gap-1 bg-muted/10 rounded-lg p-0.5",
+	segmentedButton: "flex-1 justify-center",
+	fontControls: "flex items-center gap-2",
+	toggle: "flex items-center justify-between",
+	resetButton: "w-full h-8 rounded-md text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors"
+};
+
+//#endregion
+export { terminalSettingsPopoverStyles };

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

@@ -0,0 +1,20 @@
+/**
+ * TerminalSettingsPopover types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSettingsPopover
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TerminalSettingsPopoverSlot } from './TerminalSettingsPopover.styles';
+/**
+ * Props for the TerminalSettingsPopover component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalSettingsPopover slots={{ trigger: 'h-10 w-10' }} />
+ * ```
+ */
+export interface ITerminalSettingsPopoverProps {
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalSettingsPopoverSlot>;
+}
+//# sourceMappingURL=TerminalSettingsPopover.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalSettingsPopover.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/TerminalSettingsPopover.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAEpF;;;;;;;GAOG;AACH,MAAM,WAAW,6BAA6B;IAC5C,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,2BAA2B,CAAC,CAAC;CACpD"}

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

@@ -0,0 +1,25 @@
+/**
+ * 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
+ */
+import type { ITerminalSettingsPopoverProps } from './TerminalSettingsPopover.types';
+export type { ITerminalSettingsPopoverProps } from './TerminalSettingsPopover.types';
+export { terminalSettingsPopoverStyles } from './TerminalSettingsPopover.styles';
+export type { TerminalSettingsPopoverSlot } from './TerminalSettingsPopover.styles';
+/**
+ * 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' }} />
+ * ```
+ */
+export declare function TerminalSettingsPopover({ slots }?: ITerminalSettingsPopoverProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGrF,YAAY,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kCAAkC,CAAC;AACjF,YAAY,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAMpF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EAAE,KAAK,EAAE,GAAE,6BAAkC,2CA2MpF"}