@mks2508/mks-ui 0.6.7 → 0.7.0

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

@@ -0,0 +1,21 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelFooter/TerminalPanelFooter.styles.ts
+/**
+* Default style slots for TerminalPanelFooter.
+*
+* @example
+* ```tsx
+* <TerminalPanelFooter slots={{ root: 'h-10 bg-card/60' }} />
+* ```
+*/
+const terminalPanelFooterStyles = {
+	root: "relative",
+	separator: "absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-border/40 to-transparent",
+	stats: "flex items-center justify-between px-4 h-9 bg-background/40",
+	statItem: "flex items-center gap-1 text-xs text-muted-foreground",
+	statLabel: "text-muted-foreground/50",
+	statValue: "font-mono font-medium text-foreground",
+	filterInfo: "flex items-center gap-3"
+};
+
+//#endregion
+export { terminalPanelFooterStyles };

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

@@ -0,0 +1,40 @@
+/**
+ * TerminalPanelFooter types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelFooter
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TLogLevelFilter } from '../../parsing/LogParser.types';
+import type { TerminalPanelFooterSlot } from './TerminalPanelFooter.styles';
+/**
+ * Props for the TerminalPanelFooter component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelFooter
+ *   lineCount={1234}
+ *   byteCount={45678}
+ *   filterLevel="all"
+ *   filteredCount={1200}
+ *   totalCount={1234}
+ *   slots={{ root: 'h-10' }}
+ * />
+ * ```
+ */
+export interface ITerminalPanelFooterProps {
+    /** Number of log lines */
+    lineCount: number;
+    /** Total byte size of logs */
+    byteCount: number;
+    /** Current filter level display */
+    filterLevel: TLogLevelFilter;
+    /** Number of visible lines after filtering */
+    filteredCount?: number;
+    /** Total number of lines before filtering */
+    totalCount?: number;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalPanelFooterSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+//# sourceMappingURL=TerminalPanelFooter.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelFooter.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelFooter/TerminalPanelFooter.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE5E;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,yBAAyB;IACxC,0BAA0B;IAC1B,SAAS,EAAE,MAAM,CAAC;IAElB,8BAA8B;IAC9B,SAAS,EAAE,MAAM,CAAC;IAElB,mCAAmC;IACnC,WAAW,EAAE,eAAe,CAAC;IAE7B,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,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/TerminalPanelFooter/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * TerminalPanelFooter Component.
+ *
+ * Footer bar displaying line count, byte count, and current filter.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelFooter
+ */
+import type { ITerminalPanelFooterProps } from './TerminalPanelFooter.types';
+export type { ITerminalPanelFooterProps } from './TerminalPanelFooter.types';
+export { terminalPanelFooterStyles } from './TerminalPanelFooter.styles';
+export type { TerminalPanelFooterSlot } from './TerminalPanelFooter.styles';
+/**
+ * TerminalPanelFooter Component.
+ *
+ * Displays footer with:
+ * - Line count
+ * - Byte count
+ * - Current filter level
+ * - Filtered count (if applicable)
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelFooter
+ *   lineCount={1234}
+ *   byteCount={45678}
+ *   filterLevel="all"
+ *   filteredCount={1200}
+ *   totalCount={1234}
+ *   slots={{ statValue: 'text-primary font-bold' }}
+ * />
+ * ```
+ */
+export declare function TerminalPanelFooter({ lineCount, byteCount, filterLevel, filteredCount, totalCount, slots, className, }: ITerminalPanelFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelFooter/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAG7E,YAAY,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AA0B5E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,EACT,WAAW,EACX,aAAa,EACb,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAkD3B"}

package/dist/react-ui/blocks/Terminal/panel/TerminalPanelFooter/index.js

@@ -0,0 +1,127 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { terminalPanelFooterStyles } from "./TerminalPanelFooter.styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelFooter/index.tsx
+/**
+* TerminalPanelFooter Component.
+*
+* Footer bar displaying line count, byte count, and current filter.
+* Fully composable via StyleSlots.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelFooter
+*/
+/**
+* Format byte count for human-readable display.
+*
+* @param bytes - Byte count to format
+* @returns Formatted string (e.g. "1.2 KB")
+*/
+function formatBytes(bytes) {
+	if (bytes === 0) return "0 B";
+	const k = 1024;
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+/**
+* Format line count with thousands separator.
+*
+* @param lines - Line count to format
+* @returns Locale-formatted string
+*/
+function formatLines(lines) {
+	return lines.toLocaleString();
+}
+/**
+* TerminalPanelFooter Component.
+*
+* Displays footer with:
+* - Line count
+* - Byte count
+* - Current filter level
+* - Filtered count (if applicable)
+*
+* All visual regions are overridable via the `slots` prop.
+*
+* @example
+* ```tsx
+* <TerminalPanelFooter
+*   lineCount={1234}
+*   byteCount={45678}
+*   filterLevel="all"
+*   filteredCount={1200}
+*   totalCount={1234}
+*   slots={{ statValue: 'text-primary font-bold' }}
+* />
+* ```
+*/
+function TerminalPanelFooter({ lineCount, byteCount, filterLevel, filteredCount, totalCount, slots, className }) {
+	const filterLabel = filterLevel === "all" ? "All Levels" : filterLevel.toUpperCase();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(terminalPanelFooterStyles.root, slots?.root, className),
+		children: [/* @__PURE__ */ jsx("div", { className: cn(terminalPanelFooterStyles.separator, slots?.separator) }), /* @__PURE__ */ jsxs("div", {
+			className: cn(terminalPanelFooterStyles.stats, slots?.stats),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cn(terminalPanelFooterStyles.statItem, slots?.statItem),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn(terminalPanelFooterStyles.statLabel, slots?.statLabel),
+							children: "Lines"
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn(terminalPanelFooterStyles.statValue, slots?.statValue),
+							children: formatLines(lineCount)
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-border/20" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn(terminalPanelFooterStyles.statItem, slots?.statItem),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn(terminalPanelFooterStyles.statLabel, slots?.statLabel),
+							children: "Size"
+						}), /* @__PURE__ */ jsx("span", {
+							className: cn(terminalPanelFooterStyles.statValue, slots?.statValue),
+							children: formatBytes(byteCount)
+						})]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cn(terminalPanelFooterStyles.filterInfo, slots?.filterInfo),
+				children: [filteredCount !== void 0 && totalCount !== void 0 && filteredCount < totalCount && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalPanelFooterStyles.statItem, slots?.statItem),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(terminalPanelFooterStyles.statLabel, slots?.statLabel),
+						children: "Showing"
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cn(terminalPanelFooterStyles.statValue, slots?.statValue),
+						children: [formatLines(filteredCount), /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground/40",
+							children: ["/", formatLines(totalCount)]
+						})]
+					})]
+				}), /* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-border/20" })] }), /* @__PURE__ */ jsxs("div", {
+					className: cn(terminalPanelFooterStyles.statItem, slots?.statItem),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cn(terminalPanelFooterStyles.statLabel, slots?.statLabel),
+						children: "Filter"
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn(terminalPanelFooterStyles.statValue, slots?.statValue, "text-primary/80"),
+						children: filterLabel
+					})]
+				})]
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { TerminalPanelFooter };

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

@@ -0,0 +1,22 @@
+/**
+ * TerminalPanelHeader style definitions.
+ *
+ * StyleSlots for the macOS-style terminal header with traffic lights,
+ * session title, view mode toggle, and connection status indicator.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelHeader
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalPanelHeader visual regions. */
+export type TerminalPanelHeaderSlot = 'root' | 'trafficLights' | 'titleArea' | 'titleIcon' | 'titleText' | 'viewModeControl' | 'viewModeButton' | 'statusDot' | 'statusLabel';
+/**
+ * Default style slots for TerminalPanelHeader.
+ *
+ * @example
+ * ```tsx
+ * // Override a specific slot
+ * <TerminalPanelHeader slots={{ root: 'h-14 bg-card' }} />
+ * ```
+ */
+export declare const terminalPanelHeaderStyles: StyleSlots<TerminalPanelHeaderSlot>;
+//# sourceMappingURL=TerminalPanelHeader.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelHeader.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelHeader/TerminalPanelHeader.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,eAAe,GACf,WAAW,GACX,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,gBAAgB,GAChB,WAAW,GACX,aAAa,CAAC;AAElB;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,EAAE,UAAU,CAAC,uBAAuB,CAUzE,CAAC"}

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

@@ -0,0 +1,24 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelHeader/TerminalPanelHeader.styles.ts
+/**
+* Default style slots for TerminalPanelHeader.
+*
+* @example
+* ```tsx
+* // Override a specific slot
+* <TerminalPanelHeader slots={{ root: 'h-14 bg-card' }} />
+* ```
+*/
+const terminalPanelHeaderStyles = {
+	root: "relative overflow-hidden flex items-center justify-between px-4 h-12 bg-background/60 border-b border-border/30",
+	trafficLights: "group/traffic flex items-center gap-2 px-1 py-1 -mx-1 rounded-md",
+	titleArea: "flex-1 flex items-center justify-center gap-2",
+	titleIcon: "transition-all duration-500 flex-shrink-0",
+	titleText: "text-sm font-mono font-medium truncate transition-all duration-500",
+	viewModeControl: "flex items-center bg-background/80 rounded-lg p-0.5 border-t border-white/10 border-b border-border/50 border-x border-border/40 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15),0_0_0_1px_rgba(0,0,0,0.1)]",
+	viewModeButton: "",
+	statusDot: "w-2 h-2 rounded-full transition-all duration-300",
+	statusLabel: "text-xs text-muted-foreground font-medium hidden sm:inline"
+};
+
+//#endregion
+export { terminalPanelHeaderStyles };

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

@@ -0,0 +1,43 @@
+/**
+ * TerminalPanelHeader types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelHeader
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TerminalPanelHeaderSlot } from './TerminalPanelHeader.styles';
+/**
+ * Props for the TerminalPanelHeader component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelHeader
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   viewMode="terminal"
+ *   onViewModeChange={(mode) => setViewMode(mode)}
+ *   onClose={() => console.log('close')}
+ *   slots={{ root: 'bg-card/80', titleText: 'text-lg' }}
+ * />
+ * ```
+ */
+export interface ITerminalPanelHeaderProps {
+    /** Container/session 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;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalPanelHeaderSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+//# sourceMappingURL=TerminalPanelHeader.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelHeader.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelHeader/TerminalPanelHeader.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE5E;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,yBAAyB;IACxC,wCAAwC;IACxC,aAAa,EAAE,MAAM,CAAC;IAEtB,6CAA6C;IAC7C,WAAW,EAAE,OAAO,CAAC;IAErB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAEhC,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,KAAK,IAAI,CAAC;IAExD,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB,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/TerminalPanelHeader/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TerminalPanelHeader Component.
+ *
+ * macOS-style header with traffic lights, session name, view mode toggle,
+ * and connection status indicator. Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelHeader
+ */
+import type { ITerminalPanelHeaderProps } from './TerminalPanelHeader.types';
+export type { ITerminalPanelHeaderProps } from './TerminalPanelHeader.types';
+export { terminalPanelHeaderStyles } from './TerminalPanelHeader.styles';
+export type { TerminalPanelHeaderSlot } from './TerminalPanelHeader.styles';
+/**
+ * TerminalPanelHeader Component.
+ *
+ * Displays macOS-style header with:
+ * - Traffic light buttons (close, minimize, maximize) with glow effects
+ * - Dynamic session/container name display
+ * - Connection status badge with pulse animation
+ * - View mode segmented control (terminal/list)
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelHeader
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   onClose={() => console.log('close')}
+ *   slots={{ root: 'h-14', titleText: 'text-lg font-bold' }}
+ * />
+ * ```
+ */
+export declare function TerminalPanelHeader({ containerName, isConnected, viewMode, onViewModeChange, onClose, onMinimize, onMaximize, slots, className, }: ITerminalPanelHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelHeader/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAeH,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAG7E,YAAY,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AACzE,YAAY,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,aAAa,EACb,WAAW,EACX,QAAqB,EACrB,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,UAAU,EACV,KAAK,EACL,SAAS,GACV,EAAE,yBAAyB,2CAsG3B"}

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { cn } from "../../../../lib/utils.js";
+import { ListIcon } from "../../../../icons/lucide-animated/list.js";
+import { TerminalIcon } from "../../../../icons/lucide-animated/terminal.js";
+import "../../../../icons/lucide-animated/index.js";
+import { IconWrapper } from "../../../../lib/icon-wrapper.js";
+import { SEGMENTED_BUTTON_STYLES, STATUS_COLORS, TRAFFIC_LIGHT_STYLES } from "../../Terminal.tokens.js";
+import { terminalPanelHeaderStyles } from "./TerminalPanelHeader.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalPanelHeader/index.tsx
+/**
+* TerminalPanelHeader Component.
+*
+* macOS-style header with traffic lights, session name, view mode toggle,
+* and connection status indicator. Fully composable via StyleSlots.
+*
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelHeader
+*/
+/**
+* TerminalPanelHeader Component.
+*
+* Displays macOS-style header with:
+* - Traffic light buttons (close, minimize, maximize) with glow effects
+* - Dynamic session/container name display
+* - Connection status badge with pulse animation
+* - View mode segmented control (terminal/list)
+*
+* All visual regions are overridable via the `slots` prop.
+*
+* @example
+* ```tsx
+* <TerminalPanelHeader
+*   containerName="devenv-agent-backend"
+*   isConnected={true}
+*   onClose={() => console.log('close')}
+*   slots={{ root: 'h-14', titleText: 'text-lg font-bold' }}
+* />
+* ```
+*/
+function TerminalPanelHeader({ containerName, isConnected, viewMode = "terminal", onViewModeChange, onClose, onMinimize, onMaximize, slots, className }) {
+	const statusStyle = STATUS_COLORS[isConnected ? "connected" : "disconnected"];
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(terminalPanelHeaderStyles.root, slots?.root, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between w-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalPanelHeaderStyles.trafficLights, slots?.trafficLights),
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onClose,
+							className: TRAFFIC_LIGHT_STYLES.close,
+							"aria-label": "Close",
+							title: "Close"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onMinimize,
+							className: TRAFFIC_LIGHT_STYLES.minimize,
+							"aria-label": "Minimize",
+							title: "Minimize"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onMaximize,
+							className: TRAFFIC_LIGHT_STYLES.maximize,
+							"aria-label": "Maximize",
+							title: "Maximize"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(terminalPanelHeaderStyles.titleArea, slots?.titleArea),
+					children: [/* @__PURE__ */ jsx(IconWrapper, {
+						icon: TerminalIcon,
+						size: 14,
+						className: cn(terminalPanelHeaderStyles.titleIcon, slots?.titleIcon, isConnected ? "text-primary/80" : "text-muted-foreground/40")
+					}), /* @__PURE__ */ jsx("h3", {
+						className: cn(terminalPanelHeaderStyles.titleText, slots?.titleText, isConnected ? `text-foreground/95 drop-shadow-[0_0_8px_hsl(var(--primary)/0.3)]` : "text-foreground/60"),
+						children: containerName
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cn(terminalPanelHeaderStyles.viewModeControl, slots?.viewModeControl),
+						children: [/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onViewModeChange?.("terminal"),
+							className: cn(SEGMENTED_BUTTON_STYLES.base, slots?.viewModeButton, !onViewModeChange && "opacity-70 cursor-not-allowed", viewMode === "terminal" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+							title: "Terminal mode - Raw logs with original ANSI colors",
+							children: [/* @__PURE__ */ jsx(IconWrapper, {
+								icon: TerminalIcon,
+								size: 14
+							}), /* @__PURE__ */ jsx("span", {
+								className: "hidden xs:inline",
+								children: "Terminal"
+							})]
+						}), /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => onViewModeChange?.("react"),
+							className: cn(SEGMENTED_BUTTON_STYLES.base, slots?.viewModeButton, !onViewModeChange && "opacity-70 cursor-not-allowed", viewMode === "react" ? SEGMENTED_BUTTON_STYLES.active : SEGMENTED_BUTTON_STYLES.inactive),
+							title: "React mode - Logs with badges and syntax highlighting",
+							children: [/* @__PURE__ */ jsx(IconWrapper, {
+								icon: ListIcon,
+								size: 14
+							}), /* @__PURE__ */ jsx("span", {
+								className: "hidden xs:inline",
+								children: "List"
+							})]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("div", { className: cn(terminalPanelHeaderStyles.statusDot, slots?.statusDot, statusStyle.dot) }), /* @__PURE__ */ jsx("span", {
+							className: cn(terminalPanelHeaderStyles.statusLabel, slots?.statusLabel),
+							children: statusStyle.text
+						})]
+					})]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TerminalPanelHeader };

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

@@ -0,0 +1,20 @@
+/**
+ * TerminalPanelToolbar style definitions.
+ *
+ * StyleSlots for the filter/action toolbar.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelToolbar
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalPanelToolbar visual regions. */
+export type TerminalPanelToolbarSlot = 'root' | 'filterGroup' | 'filterButton' | 'separator' | 'toggleGroup' | 'toggleButton' | 'actionGroup' | 'actionButton';
+/**
+ * Default style slots for TerminalPanelToolbar.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelToolbar slots={{ root: 'py-3', filterButton: 'text-sm' }} />
+ * ```
+ */
+export declare const terminalPanelToolbarStyles: StyleSlots<TerminalPanelToolbarSlot>;
+//# sourceMappingURL=TerminalPanelToolbar.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelToolbar.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelToolbar/TerminalPanelToolbar.styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,0DAA0D;AAC1D,MAAM,MAAM,wBAAwB,GAChC,MAAM,GACN,aAAa,GACb,cAAc,GACd,WAAW,GACX,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,EAAE,UAAU,CAAC,wBAAwB,CAS3E,CAAC"}

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

@@ -0,0 +1,72 @@
+/**
+ * TerminalPanelToolbar types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelToolbar
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TLogLevel } from '../../parsing';
+import type { TerminalPanelToolbarSlot } from './TerminalPanelToolbar.styles';
+/** Log level filter type — 'all' or a specific level. */
+export type TLogLevelFilter = 'all' | TLogLevel;
+/**
+ * Level filter button configuration.
+ */
+export interface ILevelFilterButton {
+    /** Filter value */
+    value: TLogLevelFilter;
+    /** Display label */
+    label: string;
+    /** Icon component (optional) */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Badge count */
+    count?: number;
+}
+/**
+ * Props for the TerminalPanelToolbar component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelToolbar
+ *   filterLevel="all"
+ *   followCursor={true}
+ *   showLineNumbers={false}
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   onFollowCursorChange={(v) => setFollowCursor(v)}
+ *   onShowLineNumbersChange={(v) => setShowLineNumbers(v)}
+ *   onClear={() => clearLogs()}
+ *   onDownload={() => downloadLogs()}
+ *   onSearch={() => openSearch()}
+ *   slots={{ root: 'bg-card/40' }}
+ * />
+ * ```
+ */
+export interface ITerminalPanelToolbarProps {
+    /** Current log level filter */
+    filterLevel: TLogLevelFilter;
+    /** Follow cursor (auto-scroll) 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;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalPanelToolbarSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+//# sourceMappingURL=TerminalPanelToolbar.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalPanelToolbar.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelToolbar/TerminalPanelToolbar.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,yDAAyD;AACzD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,SAAS,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,mBAAmB;IACnB,KAAK,EAAE,eAAe,CAAC;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,0BAA0B;IACzC,+BAA+B;IAC/B,WAAW,EAAE,eAAe,CAAC;IAE7B,wCAAwC;IACxC,YAAY,EAAE,OAAO,CAAC;IAEtB,8BAA8B;IAC9B,eAAe,EAAE,OAAO,CAAC;IAEzB,kCAAkC;IAClC,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,yCAAyC;IACzC,cAAc,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEjD,iDAAiD;IACjD,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD,gDAAgD;IAChD,uBAAuB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAEpD,4CAA4C;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAEhD,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -2,10 +2,14 @@
  * TerminalPanelToolbar Component.
  *
  * Filter toolbar with log level buttons, toggles, and action buttons.
+ * Fully composable via StyleSlots.
  *
- * @module components/devenv/terminal/panel/toolbar
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelToolbar
  */
-import type { ITerminalPanelToolbarProps } from './TerminalLogsPanel.types';
+import type { ITerminalPanelToolbarProps } from './TerminalPanelToolbar.types';
+export type { ITerminalPanelToolbarProps, ILevelFilterButton, TLogLevelFilter } from './TerminalPanelToolbar.types';
+export { terminalPanelToolbarStyles } from './TerminalPanelToolbar.styles';
+export type { TerminalPanelToolbarSlot } from './TerminalPanelToolbar.styles';
 /**
  * TerminalPanelToolbar Component.
  *
@@ -15,6 +19,8 @@ import type { ITerminalPanelToolbarProps } from './TerminalLogsPanel.types';
  * - Line numbers toggle
  * - Action buttons (Search, Clear, Download)
  *
+ * All visual regions are overridable via the `slots` prop.
+ *
  * @example
  * ```tsx
  * <TerminalPanelToolbar
@@ -31,5 +37,5 @@ import type { ITerminalPanelToolbarProps } from './TerminalLogsPanel.types';
  * />
  * ```
  */
-export declare function TerminalPanelToolbar({ filterLevel, followCursor, showLineNumbers, levelCounts, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onClear, onDownload, onSearch, }: ITerminalPanelToolbarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TerminalPanelToolbar.d.ts.map
+export declare function TerminalPanelToolbar({ filterLevel, followCursor, showLineNumbers, levelCounts, onFilterChange, onFollowCursorChange, onShowLineNumbersChange, onClear, onDownload, onSearch, slots, className, }: ITerminalPanelToolbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalPanelToolbar/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAiBH,OAAO,KAAK,EAAE,0BAA0B,EAAuC,MAAM,8BAA8B,CAAC;AAGpH,YAAY,EAAE,0BAA0B,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpH,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,YAAY,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAe9E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,YAAY,EACZ,eAAe,EACf,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,uBAAuB,EACvB,OAAO,EACP,UAAU,EACV,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE,0BAA0B,2CAiH5B"}