@mks2508/mks-ui 0.6.8 → 0.7.0

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

@@ -1,15 +1,15 @@
 'use client';
 
-import { cn } from "../../../lib/utils.js";
-import { DeleteIcon } from "../../../icons/lucide-animated/delete.js";
-import { PlusIcon } from "../../../icons/lucide-animated/plus.js";
-import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
-import "../../../icons/lucide-animated/index.js";
 import { getTerminalTheme } from "../Terminal.theme.js";
 import { useTerminalWebSocket } from "../hooks/useTerminalWebSocket.js";
 import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
+import { TerminalClearButton, TerminalDimensionsBadge, TerminalDisconnectedOverlay, TerminalReconnectButton } from "../controls/TerminalAtoms.js";
+import { TerminalFontControls } from "../controls/TerminalFontControls/index.js";
+import { TerminalSettingsPopover } from "./TerminalSettingsPopover/index.js";
+import { TerminalActionBar } from "../controls/TerminalActionBar/index.js";
+import { TerminalConnectionStatus } from "../controls/TerminalConnectionStatus/index.js";
+import { TerminalStatusBar } from "../controls/TerminalStatusBar/index.js";
 import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
-import { TerminalSettingsPopover } from "./TerminalSettingsPopover.js";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Terminal } from "@xterm/xterm";
@@ -26,19 +26,16 @@ import "@xterm/xterm/css/xterm.css";
 * Ghostty-inspired chrome (via TerminalPanelChrome), xterm.js
 * rendering, and action bar controls. Includes settings popover.
 *
+* Uses composable control atoms for the action bar and status bar
+* while managing xterm.js lifecycle internally.
+*
 * @module components/devenv/terminal/panel/interactive-xterm
 */
 /**
 * Terminal display container styles for interactive mode.
 */
-const terminalContainerStyles = "relative bg-[#241B2F] min-h-[400px] border-x border-border/10 terminal-scroll";
-/**
-* Action button base styles.
-*/
-const actionBtnStyles = "h-8 px-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0";
-/**
-* Min/max font size bounds.
-*/
+const terminalContainerStyles = "relative bg-[hsl(var(--terminal-bg,var(--background)))] min-h-[400px] border-x border-border/10 terminal-scroll";
+/** Min/max font size bounds. */
 const MIN_FONT_SIZE = 10;
 const MAX_FONT_SIZE = 24;
 /**
@@ -48,8 +45,7 @@ const MAX_FONT_SIZE = 24;
 * - TerminalPanelChrome (Ghostty glassmorphism shell)
 * - xterm.js with interactive mode (cursorBlink, stdin enabled)
 * - WebSocket connection via useTerminalWebSocket
-* - Action bar (clear, settings, font size controls)
-* - Footer with connection status and terminal dimensions
+* - Composable action bar and status bar atoms
 *
 * @example
 * ```tsx
@@ -76,16 +72,19 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
 		cols: 80,
 		rows: 24
 	});
+	const [connectionStatus, setConnectionStatus] = useState("disconnected");
 	/**
 	* WebSocket connection for terminal I/O.
 	*/
-	const { status: connectionStatus, sendInput, sendResize, reconnect } = useTerminalWebSocket({
+	const { status: wsStatus, sendInput, sendResize, reconnect } = useTerminalWebSocket({
 		wsUrl,
 		onConnect: () => {
+			setConnectionStatus("connected");
 			onConnect?.();
 			terminalRef.current?.write("\r\n\x1B[32m✓ Connected to terminal\x1B[0m\r\n");
 		},
 		onDisconnect: () => {
+			setConnectionStatus("disconnected");
 			onDisconnect?.();
 			terminalRef.current?.write("\r\n\x1B[31m✗ Disconnected from terminal\x1B[0m\r\n");
 		},
@@ -93,6 +92,7 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
 			terminalRef.current?.write(data);
 		},
 		onError: (error) => {
+			setConnectionStatus("error");
 			onError?.(error);
 			terminalRef.current?.write(`\r\n\x1b[31mError: ${error}\x1b[0m\r\n`);
 		}
@@ -189,27 +189,15 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
 		window.addEventListener("resize", handleResize);
 		return () => window.removeEventListener("resize", handleResize);
 	}, []);
-	/**
-	* Clear terminal display.
-	*/
 	const handleClear = useCallback(() => {
 		terminalRef.current?.clear();
 	}, []);
-	/**
-	* Increase font size.
-	*/
 	const handleFontIncrease = useCallback(() => {
 		setFontSize((prev) => Math.min(prev + 1, MAX_FONT_SIZE));
 	}, []);
-	/**
-	* Decrease font size.
-	*/
 	const handleFontDecrease = useCallback(() => {
 		setFontSize((prev) => Math.max(prev - 1, MIN_FONT_SIZE));
 	}, []);
-	/**
-	* Expose imperative methods to parent.
-	*/
 	useImperativeHandle(ref, () => ({
 		write: (text) => {
 			terminalRef.current?.write(text);
@@ -225,30 +213,6 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
 		},
 		isConnected: () => connectionStatus === "connected"
 	}));
-	/**
-	* Get connection status label with color.
-	*/
-	const getStatusLabel = () => {
-		switch (connectionStatus) {
-			case "connected": return {
-				text: "Connected",
-				color: "text-success"
-			};
-			case "connecting": return {
-				text: "Connecting...",
-				color: "text-yellow-500"
-			};
-			case "error": return {
-				text: "Error",
-				color: "text-destructive"
-			};
-			default: return {
-				text: "Disconnected",
-				color: "text-muted-foreground"
-			};
-		}
-	};
-	const statusLabel = getStatusLabel();
 	return /* @__PURE__ */ jsx(TerminalPanelChrome, {
 		containerName,
 		isConnected,
@@ -258,109 +222,35 @@ const TerminalInteractivePanelXterm = forwardRef(({ containerName, wsUrl, sessio
 		onSessionTabClick: onSessionChange,
 		onSessionClose,
 		onNewSession,
-		actionBar: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-3 h-10 bg-muted/10 border-b border-white/10",
-			children: [
-				/* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onClick: handleClear,
-					className: actionBtnStyles,
-					title: "Clear terminal (Ctrl+L)",
-					children: [/* @__PURE__ */ jsx(DeleteIcon, { className: "w-3.5 h-3.5 flex-shrink-0" }), /* @__PURE__ */ jsx("span", { children: "Clear" })]
-				}),
-				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-				/* @__PURE__ */ jsx(TerminalSettingsPopover, {}),
-				connectionStatus === "disconnected" && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: reconnect,
-					className: cn(actionBtnStyles, "text-primary hover:text-primary"),
-					title: "Reconnect",
-					children: "Reconnect"
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "text-[10px] text-muted-foreground font-mono uppercase tracking-wider mr-1",
-							children: "Font"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: handleFontDecrease,
-							className: cn(actionBtnStyles, "w-7 h-7 px-0"),
-							title: "Decrease font size",
-							disabled: fontSize <= MIN_FONT_SIZE,
-							children: /* @__PURE__ */ jsx("span", {
-								className: "text-sm font-bold",
-								children: "−"
-							})
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "text-xs font-mono text-foreground w-7 text-center",
-							children: fontSize
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: handleFontIncrease,
-							className: cn(actionBtnStyles, "w-7 h-7 px-0"),
-							title: "Increase font size",
-							disabled: fontSize >= MAX_FONT_SIZE,
-							children: /* @__PURE__ */ jsx(PlusIcon, { className: "w-3 h-3 flex-shrink-0" })
-						})
-					]
-				})
-			]
-		}),
-		footer: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between px-4 h-10 bg-muted/20 border-t border-white/10",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "flex items-center gap-3",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsx("div", { className: cn("w-2 h-2 rounded-full transition-all duration-300", isConnected ? "bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)]" : connectionStatus === "connecting" ? "bg-yellow-500/80 animate-pulse" : connectionStatus === "error" ? "bg-destructive/80" : "bg-muted-foreground/60") }), /* @__PURE__ */ jsx("span", {
-						className: cn("text-xs font-mono", statusLabel.color),
-						children: statusLabel.text
-					})]
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "text-xs font-mono text-muted-foreground",
-					children: [
-						dimensions.cols,
-						"×",
-						dimensions.rows
-					]
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "text-xs font-mono text-muted-foreground",
-					children: [fontSize, "px"]
-				})]
-			})]
-		}),
+		actionBar: /* @__PURE__ */ jsxs(TerminalActionBar, { children: [
+			/* @__PURE__ */ jsx(TerminalClearButton, { onClear: handleClear }),
+			/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+			/* @__PURE__ */ jsx(TerminalSettingsPopover, {}),
+			/* @__PURE__ */ jsx(TerminalReconnectButton, {
+				onReconnect: reconnect,
+				status: connectionStatus
+			}),
+			/* @__PURE__ */ jsx(TerminalFontControls, {
+				fontSize,
+				onIncrease: handleFontIncrease,
+				onDecrease: handleFontDecrease,
+				isMin: fontSize <= MIN_FONT_SIZE,
+				isMax: fontSize >= MAX_FONT_SIZE
+			})
+		] }),
+		footer: /* @__PURE__ */ jsxs(TerminalStatusBar, { children: [/* @__PURE__ */ jsx(TerminalStatusBar.Group, { children: /* @__PURE__ */ jsx(TerminalConnectionStatus, { status: connectionStatus }) }), /* @__PURE__ */ jsxs(TerminalStatusBar.Group, { children: [/* @__PURE__ */ jsx(TerminalDimensionsBadge, { dimensions }), /* @__PURE__ */ jsxs("span", {
+			className: "text-xs font-mono text-muted-foreground",
+			children: [fontSize, "px"]
+		})] })] }),
 		className,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "relative min-h-[400px]",
 			children: [/* @__PURE__ */ jsx("div", {
 				ref: containerRef,
 				className: terminalContainerStyles
-			}), connectionStatus === "disconnected" && /* @__PURE__ */ jsx("div", {
-				className: "absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-none",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "text-center pointer-events-auto",
-					children: [
-						/* @__PURE__ */ jsx(TerminalIcon, { className: "w-12 h-12 mx-auto mb-3 text-muted-foreground/50" }),
-						/* @__PURE__ */ jsx("p", {
-							className: "text-sm text-muted-foreground/70 font-mono mb-3",
-							children: "Terminal disconnected"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: reconnect,
-							className: cn("px-4 py-2 rounded-lg text-sm font-mono transition-colors", "bg-primary/20 text-primary hover:bg-primary/30", "border border-primary/40", "shadow-[0_0_10px_hsla(330,85%,43%,0.2)]"),
-							children: "Reconnect"
-						})
-					]
-				})
+			}), /* @__PURE__ */ jsx(TerminalDisconnectedOverlay, {
+				onReconnect: reconnect,
+				visible: connectionStatus === "disconnected"
 			})]
 		})
 	});

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

@@ -0,0 +1,26 @@
+/**
+ * TerminalLogsPanel style definitions.
+ *
+ * StyleSlots for the main terminal log viewer panel including
+ * terminal container, action bar, and empty state regions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalLogsPanel
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalLogsPanel visual regions. */
+export type TerminalLogsPanelSlot = 'root' | 'terminalContainer' | 'actionBar' | 'actionBarDivider' | 'emptyState' | 'emptyStateIcon' | 'emptyStateTitle' | 'emptyStateText' | 'containerButton';
+/**
+ * Default style slots for TerminalLogsPanel.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogsPanel
+ *   slots={{
+ *     terminalContainer: 'min-h-[600px]',
+ *     emptyStateIcon: 'text-primary/30',
+ *   }}
+ * />
+ * ```
+ */
+export declare const terminalLogsPanelStyles: StyleSlots<TerminalLogsPanelSlot>;
+//# sourceMappingURL=TerminalLogsPanel.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogsPanel.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/TerminalLogsPanel.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,uDAAuD;AACvD,MAAM,MAAM,qBAAqB,GAC7B,MAAM,GACN,mBAAmB,GACnB,WAAW,GACX,kBAAkB,GAClB,YAAY,GACZ,gBAAgB,GAChB,iBAAiB,GACjB,gBAAgB,GAChB,iBAAiB,CAAC;AAEtB;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,uBAAuB,EAAE,UAAU,CAAC,qBAAqB,CAUrE,CAAC"}

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

@@ -0,0 +1,30 @@
+import { TERMINAL_BG } from "../../Terminal.tokens.js";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/TerminalLogsPanel.styles.ts
+/**
+* Default style slots for TerminalLogsPanel.
+*
+* @example
+* ```tsx
+* <TerminalLogsPanel
+*   slots={{
+*     terminalContainer: 'min-h-[600px]',
+*     emptyStateIcon: 'text-primary/30',
+*   }}
+* />
+* ```
+*/
+const terminalLogsPanelStyles = {
+	root: "",
+	terminalContainer: `relative ${TERMINAL_BG} min-h-[400px] border-x border-border/10 terminal-scroll`,
+	actionBar: "flex items-center gap-2 px-3 h-12 bg-muted/10 border-b border-white/10",
+	actionBarDivider: "w-px h-6 bg-border/30 flex-shrink-0",
+	emptyState: "flex flex-col items-center justify-center min-h-[400px] px-8 py-12 text-center",
+	emptyStateIcon: "w-16 h-16 mb-4 rounded-full bg-muted/20 flex items-center justify-center",
+	emptyStateTitle: "text-lg font-medium text-foreground mb-2",
+	emptyStateText: "text-sm text-muted-foreground mb-6 max-w-md",
+	containerButton: "px-3 py-1.5 rounded-lg text-sm font-mono transition-colors bg-muted/30 text-muted-foreground hover:bg-primary/20 hover:text-primary"
+};
+
+//#endregion
+export { terminalLogsPanelStyles };

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

@@ -0,0 +1,123 @@
+/**
+ * TerminalLogsPanel types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalLogsPanel
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { IParsedLogEntry, TLogLevel } from '../../parsing';
+import type { ITerminalSession, TLogLevelFilter } from '../TerminalLogsPanel.types';
+import type { TerminalLogsPanelSlot } from './TerminalLogsPanel.styles';
+/**
+ * Props for the TerminalLogsPanel component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogsPanel
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   parsedEntries={entries}
+ *   filterLevel="all"
+ *   followCursor={true}
+ *   showLineNumbers={false}
+ *   levelCounts={{ info: 42 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   onFollowCursorChange={(v) => setFollowCursor(v)}
+ *   onShowLineNumbersChange={(v) => setShowLineNumbers(v)}
+ *   onClear={() => clearLogs()}
+ *   onDownload={() => downloadLogs()}
+ *   onSearch={() => openSearch()}
+ *   slots={{ terminalContainer: 'min-h-[600px]' }}
+ * />
+ * ```
+ */
+export interface ITerminalLogsPanelProps {
+    /** Container name to display in header */
+    containerName: string;
+    /** Whether container connection is active */
+    isConnected: boolean;
+    /** Raw logs content (kept for compatibility, will be removed) */
+    logs?: string;
+    /** Internal raw logs content (kept for API compatibility, unused in favor of parsedEntries) */
+    _logs?: string;
+    /** Parsed log entries with level detection and metadata */
+    parsedEntries: IParsedLogEntry[];
+    /** Log level filter state */
+    filterLevel: TLogLevelFilter;
+    /** Follow cursor state (auto-scroll) */
+    followCursor: boolean;
+    /** Show line numbers state */
+    showLineNumbers: boolean;
+    /** Level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** View mode: 'terminal' for xterm.js, 'react' for React viewer */
+    viewMode?: 'terminal' | 'react';
+    /** Container management: Available containers (for session control) */
+    containers?: Array<{
+        id: string;
+        name: string;
+        state: string;
+    }>;
+    /** Session management: Available sessions (optional for single-session mode) */
+    sessions?: ITerminalSession[];
+    /** Session management: Currently active session ID (optional) */
+    activeSessionId?: string | null;
+    /** Session management: Callback when session changes */
+    onSessionChange?: (sessionId: string) => void;
+    /** Session management: Callback when session is closed */
+    onSessionClose?: (sessionId: string) => void;
+    /** Session management: Callback when new session button is clicked */
+    onNewSession?: () => void;
+    /** Available containers for adding new tabs */
+    availableContainers?: Array<{
+        id: string;
+        name: string;
+        state: string;
+    }>;
+    /** Callback when a container is selected to add as a new tab */
+    onAddContainer?: (containerName: string) => void;
+    /** Callback when container is selected from session control */
+    onContainerSelect?: (containerName: string) => void;
+    /** Callback when session close button is clicked */
+    onSessionStop?: () => void;
+    /** Callback when filter level changes */
+    onFilterChange: (level: TLogLevelFilter) => void;
+    /** Callback when follow cursor toggle changes */
+    onFollowCursorChange: (enabled: boolean) => void;
+    /** Callback when line numbers toggle changes */
+    onShowLineNumbersChange: (enabled: boolean) => void;
+    /** Callback when view mode changes */
+    onViewModeChange?: (mode: 'terminal' | 'react') => void;
+    /** Callback when clear button is clicked */
+    onClear: () => void;
+    /** Callback when download button is clicked */
+    onDownload: () => void;
+    /** Callback when search button is clicked */
+    onSearch: () => void;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalLogsPanelSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+/**
+ * Imperative handle for TerminalLogsPanel.
+ *
+ * Exposes terminal control methods to parent components.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<ITerminalLogsPanelRef>(null);
+ * ref.current?.search('ERROR');
+ * ref.current?.scrollToBottom();
+ * ```
+ */
+export interface ITerminalLogsPanelRef {
+    /** Search for term in terminal buffer */
+    search: (term: string) => void;
+    /** Clear terminal and reset position */
+    clear: () => void;
+    /** Write text to terminal */
+    write: (text: string) => void;
+    /** Scroll to bottom of terminal */
+    scrollToBottom: () => void;
+}
+//# sourceMappingURL=TerminalLogsPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalLogsPanel.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/TerminalLogsPanel.types.ts"],"names":[],"mappings":"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"}

package/dist/react-ui/blocks/Terminal/panel/{TerminalLogsPanel.d.ts → TerminalLogsPanel/index.d.ts}

@@ -3,25 +3,15 @@
  *
  * Ghostty-inspired terminal panel with session tabs, glassmorphic header,
  * tab-style filters, compact actions, and premium visual effects.
+ * Fully composable via StyleSlots.
  *
- * @module components/devenv/terminal/panel
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalLogsPanel
  */
-import type { ITerminalLogsPanelProps } from './TerminalLogsPanel.types';
+import type { ITerminalLogsPanelProps, ITerminalLogsPanelRef } from './TerminalLogsPanel.types';
 import '@xterm/xterm/css/xterm.css';
-/**
- * Imperative handle for TerminalLogsPanel component.
- * Exposes terminal control methods to parent components.
- */
-export interface ITerminalLogsPanelRef {
-    /** Search for term in terminal buffer */
-    search: (term: string) => void;
-    /** Clear terminal and reset position */
-    clear: () => void;
-    /** Write text to terminal */
-    write: (text: string) => void;
-    /** Scroll to bottom of terminal */
-    scrollToBottom: () => void;
-}
+export type { ITerminalLogsPanelProps, ITerminalLogsPanelRef } from './TerminalLogsPanel.types';
+export { terminalLogsPanelStyles } from './TerminalLogsPanel.styles';
+export type { TerminalLogsPanelSlot } from './TerminalLogsPanel.styles';
 /**
  * TerminalLogsPanel Component.
  *
@@ -32,9 +22,8 @@ export interface ITerminalLogsPanelRef {
  * - Compact action bar
  * - xterm.js terminal display
  * - Status footer with counts
- * - Multi-layer glassmorphism
- * - Noise texture for depth
- * - Animated accent lines
+ *
+ * All visual regions are overridable via the `slots` prop.
  *
  * @example
  * ```tsx
@@ -53,15 +42,15 @@ export interface ITerminalLogsPanelRef {
  *   activeSessionId="session-1"
  *   onSessionChange={(id) => setActiveSession(id)}
  *   onSessionClose={(id) => closeSession(id)}
- *   onNewSession={() => createSession()}
  *   onFilterChange={(level) => setFilterLevel(level)}
  *   onFollowCursorChange={(enabled) => setFollowCursor(enabled)}
  *   onShowLineNumbersChange={(enabled) => setShowLineNumbers(enabled)}
  *   onClear={() => clearLogs()}
  *   onDownload={() => downloadLogs()}
  *   onSearch={() => openSearch()}
+ *   slots={{ terminalContainer: 'min-h-[600px]' }}
  * />
  * ```
  */
 export declare const TerminalLogsPanel: import("react").ForwardRefExoticComponent<ITerminalLogsPanelProps & import("react").RefAttributes<ITerminalLogsPanelRef>>;
-//# sourceMappingURL=TerminalLogsPanel.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAqBH,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAEhG,OAAO,4BAA4B,CAAC;AAGpC,YAAY,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAChG,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AA8BxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,iBAAiB,2HA+U7B,CAAC"}