@mks2508/mks-ui 0.6.7 → 0.7.0

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

@@ -1,59 +1,43 @@
 'use client';
 
-import { cn } from "../../../lib/utils.js";
-import { ArrowDownToLineIcon } from "../../../icons/lucide-animated/arrow-down-to-line.js";
-import { ArrowUpIcon } from "../../../icons/lucide-animated/arrow-up.js";
-import { DeleteIcon } from "../../../icons/lucide-animated/delete.js";
-import { DownloadIcon } from "../../../icons/lucide-animated/download.js";
-import { ListIcon } from "../../../icons/lucide-animated/list.js";
-import { SearchIcon } from "../../../icons/lucide-animated/search.js";
-import { TerminalIcon } from "../../../icons/lucide-animated/terminal.js";
-import "../../../icons/lucide-animated/index.js";
-import { IconWrapper } from "../../../lib/icon-wrapper.js";
-import { getTerminalTheme } from "../Terminal.theme.js";
-import { LogParserService } from "../parsing/LogParserService.js";
-import { useTerminalSettings } from "../hooks/useTerminalSettings.js";
-import { TerminalPanelChrome } from "./TerminalPanelChrome.js";
-import { TerminalFilterDropdown } from "./TerminalFilterDropdown.js";
-import { TerminalPanelFooter } from "./TerminalPanelFooter.js";
-import { LogLinesViewer } from "./LogLinesViewer.js";
+import { cn } from "../../../../lib/utils.js";
+import { ArrowDownToLineIcon } from "../../../../icons/lucide-animated/arrow-down-to-line.js";
+import { ArrowUpIcon } from "../../../../icons/lucide-animated/arrow-up.js";
+import { DeleteIcon } from "../../../../icons/lucide-animated/delete.js";
+import { DownloadIcon } from "../../../../icons/lucide-animated/download.js";
+import { ListIcon } from "../../../../icons/lucide-animated/list.js";
+import { SearchIcon } from "../../../../icons/lucide-animated/search.js";
+import { TerminalIcon } from "../../../../icons/lucide-animated/terminal.js";
+import "../../../../icons/lucide-animated/index.js";
+import { IconWrapper } from "../../../../lib/icon-wrapper.js";
+import { getTerminalTheme } from "../../Terminal.theme.js";
+import { LogParserService } from "../../parsing/LogParserService.js";
+import { ACTION_BUTTON_STYLES, PRIMARY_GLOW, TOGGLE_STYLES } from "../../Terminal.tokens.js";
+import { useTerminalSettings } from "../../hooks/useTerminalSettings.js";
+import { TerminalPanelChrome } from "../TerminalPanelChrome.js";
+import { TerminalFilterDropdown } from "../TerminalFilterDropdown/index.js";
+import { TerminalPanelFooter } from "../TerminalPanelFooter/index.js";
+import { LogLinesViewer } from "../LogLinesViewer.js";
+import { terminalLogsPanelStyles } from "./TerminalLogsPanel.styles.js";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { SearchAddon } from "@xterm/addon-search";
 import "@xterm/xterm/css/xterm.css";
 
-//#region src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.tsx
+//#region src/react-ui/blocks/Terminal/panel/TerminalLogsPanel/index.tsx
 /**
 * TerminalLogsPanel Component.
 *
 * 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
 */
 /**
-* Terminal display container styles.
-*/
-const terminalContainerStyles = "relative bg-[#241B2F] min-h-[400px] border-x border-border/10 terminal-scroll";
-/**
-* Toggle button styles.
-*/
-const toggleStyles = {
-	base: "h-9 w-9 p-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center flex-shrink-0",
-	inactive: "bg-muted/40 text-muted-foreground",
-	active: "bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsla(330,85%,43%,0.2)]"
-};
-/**
-* Action button styles.
-*/
-const actionButtonStyles = {
-	base: "h-9 w-9 p-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center flex-shrink-0",
-	default: "bg-muted/40 text-muted-foreground hover:text-foreground"
-};
-/**
 * Get the severity value for a log level for filtering comparison.
 * Higher value = more severe.
 */
@@ -85,9 +69,8 @@ function getDisplayName(containerName, sessions, activeSessionId) {
 * - 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
@@ -106,17 +89,17 @@ function getDisplayName(containerName, sessions, activeSessionId) {
 *   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]' }}
 * />
 * ```
 */
-const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "", parsedEntries = [], filterLevel, followCursor, showLineNumbers, levelCounts, className, viewMode = "terminal", containers, sessions, activeSessionId, onSessionChange, onSessionClose, onNewSession, onContainerSelect, onSessionStop, onAddContainer, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onViewModeChange, onClear, onDownload, onSearch }, ref) => {
+const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "", parsedEntries = [], filterLevel, followCursor, showLineNumbers, levelCounts, className, viewMode = "terminal", containers, sessions, activeSessionId, onSessionChange, onSessionClose, onNewSession, onContainerSelect, onSessionStop, onAddContainer, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onViewModeChange, onClear, onDownload, onSearch, slots }, ref) => {
 	const terminalRef = useRef(null);
 	const fitAddonRef = useRef(null);
 	const searchAddonRef = useRef(null);
@@ -129,18 +112,12 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 	const filteredEntries = useMemo(() => {
 		if (filterLevel === "all") return parsedEntries;
 		const minSeverity = getSeverity(filterLevel);
-		return parsedEntries.filter((entry) => {
-			return getSeverity(entry.level) >= minSeverity;
-		});
+		return parsedEntries.filter((entry) => getSeverity(entry.level) >= minSeverity);
 	}, [parsedEntries, filterLevel]);
-	/**
-	* Calculate line and byte counts from logs.
-	*/
 	const lineCount = filteredEntries.length;
 	const byteCount = filteredEntries.reduce((sum, e) => sum + e.raw.length, 0);
 	/**
 	* Initialize xterm.js instance with addons.
-	* Only runs in terminal mode.
 	*/
 	useEffect(() => {
 		if (viewMode !== "terminal") return;
@@ -166,9 +143,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 			const rafId2 = requestAnimationFrame(() => {
 				try {
 					fitAddon.fit();
-				} catch (e) {
-					console.debug("[TerminalLogsPanel] Fit deferred:", e);
-				}
+				} catch {}
 			});
 			return () => cancelAnimationFrame(rafId2);
 		});
@@ -183,9 +158,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 		};
 	}, [viewMode]);
 	/**
-	* Write filtered and formatted entries to terminal.
-	* Only writes new entries since last update (incremental).
-	* Only runs in terminal mode.
+	* Write filtered and formatted entries to terminal (incremental).
 	*/
 	useEffect(() => {
 		if (viewMode !== "terminal") return;
@@ -205,8 +178,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 		viewMode
 	]);
 	/**
-	* Clear terminal when filter changes to full refresh.
-	* Only runs in terminal mode.
+	* Clear terminal when filter changes.
 	*/
 	useEffect(() => {
 		if (viewMode !== "terminal") return;
@@ -222,17 +194,12 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 			requestAnimationFrame(() => {
 				if (fitAddonRef.current && terminalRef.current) try {
 					fitAddonRef.current.fit();
-				} catch (e) {
-					console.debug("[TerminalLogsPanel] Resize fit error:", e);
-				}
+				} catch {}
 			});
 		};
 		window.addEventListener("resize", handleResize);
 		return () => window.removeEventListener("resize", handleResize);
 	}, []);
-	/**
-	* Expose imperative methods to parent.
-	*/
 	useImperativeHandle(ref, () => ({
 		search: (term) => {
 			searchAddonRef.current?.findNext(term);
@@ -267,27 +234,27 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 		onNewSession,
 		availableContainers: containers,
 		onAddContainer,
-		actionBar: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-3 h-12 bg-muted/10 border-b border-white/10",
+		actionBar: /* @__PURE__ */ jsxs("div", {
+			className: cn(terminalLogsPanelStyles.actionBar, slots?.actionBar),
 			children: [
 				/* @__PURE__ */ jsx(TerminalFilterDropdown, {
 					filterLevel,
 					levelCounts,
 					onFilterChange
 				}),
-				/* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-border/30 flex-shrink-0" }),
+				/* @__PURE__ */ jsx("div", { className: cn(terminalLogsPanelStyles.actionBarDivider, slots?.actionBarDivider) }),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1",
 					children: [viewMode === "terminal" && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => onFollowCursorChange(!followCursor),
-						className: cn(toggleStyles.base, followCursor ? toggleStyles.active : toggleStyles.inactive),
+						className: cn(TOGGLE_STYLES.base, followCursor ? TOGGLE_STYLES.active : TOGGLE_STYLES.inactive),
 						title: followCursor ? "Disable auto-scroll (Ctrl+F)" : "Enable auto-scroll (Ctrl+F)",
 						children: followCursor ? /* @__PURE__ */ jsx(ArrowDownToLineIcon, { className: "w-4 h-4 flex-shrink-0" }) : /* @__PURE__ */ jsx(ArrowUpIcon, { className: "w-4 h-4 flex-shrink-0" })
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => onShowLineNumbersChange(!showLineNumbers),
-						className: cn(toggleStyles.base, showLineNumbers ? toggleStyles.active : toggleStyles.inactive),
+						className: cn(TOGGLE_STYLES.base, showLineNumbers ? TOGGLE_STYLES.active : TOGGLE_STYLES.inactive),
 						title: showLineNumbers ? "Hide line numbers (Ctrl+L)" : "Show line numbers (Ctrl+L)",
 						children: /* @__PURE__ */ jsx(ListIcon, { className: "w-4 h-4 flex-shrink-0" })
 					})]
@@ -299,7 +266,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: onSearch,
-							className: cn(actionButtonStyles.base, actionButtonStyles.default),
+							className: cn(ACTION_BUTTON_STYLES.base, ACTION_BUTTON_STYLES.default),
 							title: "Search in logs (Ctrl+Shift+F)",
 							children: /* @__PURE__ */ jsx(IconWrapper, {
 								icon: SearchIcon,
@@ -309,7 +276,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: onClear,
-							className: cn(actionButtonStyles.base, actionButtonStyles.default),
+							className: cn(ACTION_BUTTON_STYLES.base, ACTION_BUTTON_STYLES.default),
 							title: "Clear logs (Ctrl+K)",
 							children: /* @__PURE__ */ jsx(IconWrapper, {
 								icon: DeleteIcon,
@@ -319,7 +286,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 						/* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: onDownload,
-							className: cn(actionButtonStyles.base, actionButtonStyles.default),
+							className: cn(ACTION_BUTTON_STYLES.base, ACTION_BUTTON_STYLES.default),
 							title: "Download logs",
 							children: /* @__PURE__ */ jsx(IconWrapper, {
 								icon: DownloadIcon,
@@ -329,7 +296,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 					]
 				})
 			]
-		}) }),
+		}),
 		footer: /* @__PURE__ */ jsx(TerminalPanelFooter, {
 			lineCount,
 			byteCount,
@@ -340,7 +307,7 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 			className: "relative min-h-[400px]",
 			children: [/* @__PURE__ */ jsx("div", {
 				ref: containerRef,
-				className: terminalContainerStyles
+				className: cn(terminalLogsPanelStyles.terminalContainer, slots?.terminalContainer)
 			}), parsedEntries.length === 0 && /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0 flex items-center justify-center pointer-events-none",
 				children: /* @__PURE__ */ jsxs("div", {
@@ -362,18 +329,18 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 			},
 			className: "min-h-[400px]"
 		}) : /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-center justify-center min-h-[400px] px-8 py-12 text-center",
+			className: cn(terminalLogsPanelStyles.emptyState, slots?.emptyState),
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "w-16 h-16 mb-4 rounded-full bg-muted/20 flex items-center justify-center",
+					className: cn(terminalLogsPanelStyles.emptyStateIcon, slots?.emptyStateIcon),
 					children: /* @__PURE__ */ jsx(TerminalIcon, { className: "w-8 h-8 text-muted-foreground/50" })
 				}),
 				/* @__PURE__ */ jsx("h3", {
-					className: "text-lg font-medium text-foreground mb-2",
+					className: cn(terminalLogsPanelStyles.emptyStateTitle, slots?.emptyStateTitle),
 					children: "No container selected"
 				}),
 				/* @__PURE__ */ jsxs("p", {
-					className: "text-sm text-muted-foreground mb-6 max-w-md",
+					className: cn(terminalLogsPanelStyles.emptyStateText, slots?.emptyStateText),
 					children: [
 						"Click the ",
 						/* @__PURE__ */ jsx("span", {
@@ -393,12 +360,12 @@ const TerminalLogsPanel = forwardRef(({ containerName, isConnected, _logs = "",
 						children: [containers.slice(0, 3).map((container) => /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => onAddContainer(container.name),
-							className: cn("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", "hover:shadow-[0_0_10px_hsla(330,85%,43%,0.2)]"),
+							className: cn(terminalLogsPanelStyles.containerButton, slots?.containerButton, `hover:${PRIMARY_GLOW.md}`),
 							children: container.name
 						}, container.id)), containers.length > 3 && /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							onClick: () => onNewSession?.(),
-							className: cn("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"),
+							className: cn(terminalLogsPanelStyles.containerButton, slots?.containerButton),
 							children: [
 								"+",
 								containers.length - 3,

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

@@ -3,7 +3,7 @@
  *
  * @module components/devenv/terminal/panel/types
  */
-import type { IParsedLogEntry, TLogLevel } from "../parsing";
+import type { TLogLevel } from "../parsing";
 export type { TLogLevel };
 /**
  * Terminal session information for multi-session support.
@@ -28,133 +28,10 @@ export type { ITerminalSessionTabsProps } from "./TerminalSessionTabs";
 export type { ITerminalFilterTabsProps } from "./TerminalFilterTabs";
 export type { ITerminalFilterDropdownProps } from "./TerminalFilterDropdown";
 export type { ITerminalSessionControlProps } from "./TerminalSessionControl";
-/**
- * Props for TerminalLogsPanel main component.
- */
-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>>;
-    /** Custom class name */
-    className?: string;
-    /** 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;
-}
-/**
- * Props for TerminalPanelHeader component.
- */
-export interface ITerminalPanelHeaderProps {
-    /** Container name to display */
-    containerName: string;
-    /** Whether container connection is active */
-    isConnected: boolean;
-    /** Current view mode */
-    viewMode?: "terminal" | "react";
-    /** Callback when view mode changes */
-    onViewModeChange?: (mode: "terminal" | "react") => void;
-    /** Callback when close button is clicked */
-    onClose?: () => void;
-    /** Callback when minimize button is clicked */
-    onMinimize?: () => void;
-    /** Callback when maximize button is clicked */
-    onMaximize?: () => void;
-}
-/**
- * Props for TerminalPanelToolbar component.
- */
-export interface ITerminalPanelToolbarProps {
-    /** Current log level filter */
-    filterLevel: TLogLevelFilter;
-    /** Follow cursor state */
-    followCursor: boolean;
-    /** Show line numbers state */
-    showLineNumbers: boolean;
-    /** Log level counts for badges */
-    levelCounts: Partial<Record<TLogLevel, number>>;
-    /** 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 clear button is clicked */
-    onClear: () => void;
-    /** Callback when download button is clicked */
-    onDownload: () => void;
-    /** Callback when search button is clicked */
-    onSearch: () => void;
-}
-/**
- * Props for TerminalPanelFooter component.
- */
-export interface ITerminalPanelFooterProps {
-    /** Number of log lines */
-    lineCount: number;
-    /** Number of bytes */
-    byteCount: number;
-    /** Current filter level display */
-    filterLevel: TLogLevelFilter;
-    /** Current filter count (filtered vs total) */
-    filteredCount?: number;
-    totalCount?: number;
-}
+export type { ITerminalLogsPanelProps } from './TerminalLogsPanel/TerminalLogsPanel.types';
+export type { ITerminalPanelHeaderProps } from './TerminalPanelHeader/TerminalPanelHeader.types';
+export type { ITerminalPanelToolbarProps } from './TerminalPanelToolbar/TerminalPanelToolbar.types';
+export type { ITerminalPanelFooterProps } from './TerminalPanelFooter/TerminalPanelFooter.types';
 /**
  * Log level filter options.
  * - 'all': Show all log levels
@@ -180,18 +57,5 @@ export interface ILevelFilterButton {
  * Terminal panel action button types.
  */
 export type TTerminalAction = "clear" | "download" | "search" | "copy";
-/**
- * Imperative handle for TerminalLogsPanel.
- * 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 { ITerminalLogsPanelRef } from './TerminalLogsPanel/TerminalLogsPanel.types';
 //# sourceMappingURL=TerminalLogsPanel.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalLogsPanel.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TerminalLogsPanel.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG5C,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,MAAM,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAAC;IAC9D,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,OAAO,EAAE,OAAO,GAAG,cAAc,CAAC;IAClC,6CAA6C;IAC7C,IAAI,EAAE,aAAa,GAAG,UAAU,CAAC;IACjC,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;CACnB;AAGD,YAAY,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,YAAY,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AACrE,YAAY,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC7E,YAAY,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAG7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAG3F,YAAY,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAGjG,YAAY,EAAE,0BAA0B,EAAE,MAAM,mDAAmD,CAAC;AAGpG,YAAY,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AAEjG;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,mBAAmB;IACnB,KAAK,EAAE,eAAe,CAAC;IAEvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IAEd,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAEnD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAGvE,YAAY,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC"}

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

@@ -26,7 +26,7 @@ export declare const NOISE_TEXTURE_SVG = "\"data:image/svg+xml,%3Csvg viewBox='0
  * Terminal scroll customization with neon magenta glow effect.
  * Applied to xterm.js viewport scrollbar.
  */
-export declare const terminalScrollStyles = "\n  @keyframes shimmer-line {\n    0%, 100% { background-position: 200% 0; }\n    50% { background-position: -200% 0; }\n  }\n  .terminal-scroll .xterm-viewport {\n    overflow-y: auto;\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar {\n    width: 8px;\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-track {\n    background: rgba(36, 27, 47, 0.5);\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb {\n    background: linear-gradient(\n      180deg,\n      rgba(212, 12, 103, 0.3) 0%,\n      rgba(212, 12, 103, 0.5) 50%,\n      rgba(212, 12, 103, 0.3) 100%\n    );\n    border-radius: 4px;\n    box-shadow: 0 0 10px rgba(212, 12, 103, 0.3);\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb:hover {\n    background: linear-gradient(\n      180deg,\n      rgba(212, 12, 103, 0.5) 0%,\n      rgba(212, 12, 103, 0.7) 50%,\n      rgba(212, 12, 103, 0.5) 100%\n    );\n    box-shadow: 0 0 15px rgba(212, 12, 103, 0.5);\n  }\n\n  /* === CRT Shader Effects (opt-in via settings) === */\n\n  /* Scanline overlay - replicates bettercrt.glsl scanline effect */\n  .terminal-crt {\n    position: relative;\n  }\n  .terminal-crt::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 20;\n    background: repeating-linear-gradient(\n      0deg,\n      rgba(0, 0, 0, 0.12) 0px,\n      rgba(0, 0, 0, 0.12) 1px,\n      transparent 1px,\n      transparent 2px\n    );\n    mix-blend-mode: multiply;\n  }\n\n  /* Vignette - CRT monitor light falloff */\n  .terminal-crt::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 19;\n    background: radial-gradient(\n      ellipse at center,\n      transparent 60%,\n      rgba(0, 0, 0, 0.15) 100%\n    );\n  }\n\n  /* Bloom/glow - replicates bloom.glsl text glow on bright text */\n  .terminal-bloom * {\n    text-shadow: 0 0 4px currentColor;\n  }\n\n  /* Bloom on xterm canvas - subtle drop-shadow filter on the canvas element */\n  .terminal-bloom canvas {\n    filter: drop-shadow(0 0 1px rgba(255, 200, 100, 0.15));\n  }\n\n  /* Reduced motion - disable all CRT effects */\n  @media (prefers-reduced-motion: reduce) {\n    .terminal-crt::after,\n    .terminal-crt::before { display: none; }\n    .terminal-bloom * { text-shadow: none !important; }\n    .terminal-bloom canvas { filter: none !important; }\n  }\n";
+export declare const terminalScrollStyles = "\n  @keyframes shimmer-line {\n    0%, 100% { background-position: 200% 0; }\n    50% { background-position: -200% 0; }\n  }\n  .terminal-scroll .xterm-viewport {\n    overflow-y: auto;\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar {\n    width: 8px;\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-track {\n    background: hsl(var(--terminal-bg, var(--background)) / 0.5);\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb {\n    background: linear-gradient(\n      180deg,\n      hsl(var(--primary) / 0.3) 0%,\n      hsl(var(--primary) / 0.5) 50%,\n      hsl(var(--primary) / 0.3) 100%\n    );\n    border-radius: 4px;\n    box-shadow: 0 0 10px hsl(var(--primary) / 0.3);\n  }\n  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb:hover {\n    background: linear-gradient(\n      180deg,\n      hsl(var(--primary) / 0.5) 0%,\n      hsl(var(--primary) / 0.7) 50%,\n      hsl(var(--primary) / 0.5) 100%\n    );\n    box-shadow: 0 0 15px hsl(var(--primary) / 0.5);\n  }\n\n  /* === CRT Shader Effects (opt-in via settings) === */\n\n  /* Scanline overlay - replicates bettercrt.glsl scanline effect */\n  .terminal-crt {\n    position: relative;\n  }\n  .terminal-crt::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 20;\n    background: repeating-linear-gradient(\n      0deg,\n      rgb(0 0 0 / 0.12) 0px,\n      rgb(0 0 0 / 0.12) 1px,\n      transparent 1px,\n      transparent 2px\n    );\n    mix-blend-mode: multiply;\n  }\n\n  /* Vignette - CRT monitor light falloff */\n  .terminal-crt::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 19;\n    background: radial-gradient(\n      ellipse at center,\n      transparent 60%,\n      rgb(0 0 0 / 0.15) 100%\n    );\n  }\n\n  /* Bloom/glow - replicates bloom.glsl text glow on bright text */\n  .terminal-bloom * {\n    text-shadow: 0 0 4px currentColor;\n  }\n\n  /* Bloom on xterm canvas - subtle drop-shadow on the canvas element */\n  .terminal-bloom canvas {\n    filter: drop-shadow(0 0 1px hsl(var(--primary) / 0.15));\n  }\n\n  /* Reduced motion - disable all CRT effects */\n  @media (prefers-reduced-motion: reduce) {\n    .terminal-crt::after,\n    .terminal-crt::before { display: none; }\n    .terminal-bloom * { text-shadow: none !important; }\n    .terminal-bloom canvas { filter: none !important; }\n  }\n";
 /**
  * TerminalPanelChrome Component.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"TerminalPanelChrome.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAU7E;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yTAAuT,CAAC;AAEtV;;;GAGG;AACH,eAAO,MAAM,oBAAoB,+2EAuFhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,OAAmB,EACnB,IAAgB,EAChB,QAAqB,EACrB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAwF3B"}
+{"version":3,"file":"TerminalPanelChrome.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAU7E;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yTAAuT,CAAC;AAEtV;;;GAGG;AACH,eAAO,MAAM,oBAAoB,84EAuFhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,OAAmB,EACnB,IAAgB,EAChB,QAAqB,EACrB,gBAAgB,EAChB,QAAQ,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAwF3B"}

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

@@ -2,8 +2,8 @@
 
 import { cn } from "../../../lib/utils.js";
 import { ACCENT_GRADIENTS, terminalChromeStyles, terminalChromeVariants } from "./TerminalPanelChrome.styles.js";
-import { TerminalPanelHeader } from "./TerminalPanelHeader.js";
-import { TerminalSessionTabs } from "./TerminalSessionTabs.js";
+import { TerminalPanelHeader } from "./TerminalPanelHeader/index.js";
+import { TerminalSessionTabs } from "./TerminalSessionTabs/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx
@@ -46,26 +46,26 @@ const terminalScrollStyles = `
     width: 8px;
   }
   .terminal-scroll .xterm-viewport::-webkit-scrollbar-track {
-    background: rgba(36, 27, 47, 0.5);
+    background: hsl(var(--terminal-bg, var(--background)) / 0.5);
   }
   .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb {
     background: linear-gradient(
       180deg,
-      rgba(212, 12, 103, 0.3) 0%,
-      rgba(212, 12, 103, 0.5) 50%,
-      rgba(212, 12, 103, 0.3) 100%
+      hsl(var(--primary) / 0.3) 0%,
+      hsl(var(--primary) / 0.5) 50%,
+      hsl(var(--primary) / 0.3) 100%
     );
     border-radius: 4px;
-    box-shadow: 0 0 10px rgba(212, 12, 103, 0.3);
+    box-shadow: 0 0 10px hsl(var(--primary) / 0.3);
   }
   .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb:hover {
     background: linear-gradient(
       180deg,
-      rgba(212, 12, 103, 0.5) 0%,
-      rgba(212, 12, 103, 0.7) 50%,
-      rgba(212, 12, 103, 0.5) 100%
+      hsl(var(--primary) / 0.5) 0%,
+      hsl(var(--primary) / 0.7) 50%,
+      hsl(var(--primary) / 0.5) 100%
     );
-    box-shadow: 0 0 15px rgba(212, 12, 103, 0.5);
+    box-shadow: 0 0 15px hsl(var(--primary) / 0.5);
   }
 
   /* === CRT Shader Effects (opt-in via settings) === */
@@ -82,8 +82,8 @@ const terminalScrollStyles = `
     z-index: 20;
     background: repeating-linear-gradient(
       0deg,
-      rgba(0, 0, 0, 0.12) 0px,
-      rgba(0, 0, 0, 0.12) 1px,
+      rgb(0 0 0 / 0.12) 0px,
+      rgb(0 0 0 / 0.12) 1px,
       transparent 1px,
       transparent 2px
     );
@@ -100,7 +100,7 @@ const terminalScrollStyles = `
     background: radial-gradient(
       ellipse at center,
       transparent 60%,
-      rgba(0, 0, 0, 0.15) 100%
+      rgb(0 0 0 / 0.15) 100%
     );
   }
 
@@ -109,9 +109,9 @@ const terminalScrollStyles = `
     text-shadow: 0 0 4px currentColor;
   }
 
-  /* Bloom on xterm canvas - subtle drop-shadow filter on the canvas element */
+  /* Bloom on xterm canvas - subtle drop-shadow on the canvas element */
   .terminal-bloom canvas {
-    filter: drop-shadow(0 0 1px rgba(255, 200, 100, 0.15));
+    filter: drop-shadow(0 0 1px hsl(var(--primary) / 0.15));
   }
 
   /* Reduced motion - disable all CRT effects */

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

@@ -19,7 +19,7 @@ export declare const terminalChromeStyles: StyleSlots<TerminalChromeSlot>;
  * Accent line gradient classes per variant.
  */
 export declare const ACCENT_GRADIENTS: {
-    readonly default: "bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]";
+    readonly default: "bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsl(var(--primary)/0.5)]";
     readonly error: "bg-gradient-to-r from-transparent via-destructive/70 to-transparent shadow-[0_0_12px_hsla(0,72%,51%,0.5)]";
     readonly minimal: "";
 };

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

@@ -28,7 +28,7 @@ const terminalChromeStyles = {
 * Accent line gradient classes per variant.
 */
 const ACCENT_GRADIENTS = {
-	default: "bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]",
+	default: "bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsl(var(--primary)/0.5)]",
 	error: "bg-gradient-to-r from-transparent via-destructive/70 to-transparent shadow-[0_0_12px_hsla(0,72%,51%,0.5)]",
 	minimal: ""
 };

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

@@ -0,0 +1,21 @@
+/**
+ * TerminalPanelFooter style definitions.
+ *
+ * StyleSlots for the terminal footer bar showing line count,
+ * byte size, and current filter status.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelFooter
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalPanelFooter visual regions. */
+export type TerminalPanelFooterSlot = 'root' | 'separator' | 'stats' | 'statItem' | 'statLabel' | 'statValue' | 'filterInfo';
+/**
+ * Default style slots for TerminalPanelFooter.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelFooter slots={{ root: 'h-10 bg-card/60' }} />
+ * ```
+ */
+export declare const terminalPanelFooterStyles: StyleSlots<TerminalPanelFooterSlot>;
+//# sourceMappingURL=TerminalPanelFooter.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelFooter.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelFooter/TerminalPanelFooter.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,WAAW,GACX,OAAO,GACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,YAAY,CAAC;AAEjB;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAAE,UAAU,CAAC,uBAAuB,CAQzE,CAAC"}