@mks2508/mks-ui 0.6.7 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"LogLinesViewer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/LogLinesViewer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAW7D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAE3B,+BAA+B;IAC/B,WAAW,EAAE,SAAS,GAAG,KAAK,CAAC;IAE/B,8BAA8B;IAC9B,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,4CAA4C;IAC5C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAkBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAuB,EACvB,qBAA4B,EAC5B,YAAoB,EACpB,gBAAgB,GACjB,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyG1C"}
+{"version":3,"file":"LogLinesViewer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/LogLinesViewer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAY7D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,OAAO,EAAE,eAAe,EAAE,CAAC;IAE3B,+BAA+B;IAC/B,WAAW,EAAE,SAAS,GAAG,KAAK,CAAC;IAE/B,8BAA8B;IAC9B,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhD,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,4CAA4C;IAC5C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,+DAA+D;IAC/D,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAkBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,WAAW,EACX,WAAW,EACX,SAAS,EACT,eAAuB,EACvB,qBAA4B,EAC5B,YAAoB,EACpB,gBAAgB,GACjB,EAAE,oBAAoB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyG1C"}

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

@@ -1,7 +1,8 @@
 'use client';
 
 import { cn } from "../../../lib/utils.js";
-import { ContentTypeBadge, LevelBadge, TagBadges, TimestampBadge } from "../components/LogLineBadges.js";
+import { LOG_LEVEL_STYLES } from "../Terminal.tokens.js";
+import { ContentTypeBadge, LevelBadge, TagBadges, TimestampBadge } from "../components/LogLineBadges/index.js";
 import { SyntaxHighlightedText } from "../components/SyntaxHighlight.js";
 import { SpecializedSyntaxHighlighter } from "../components/SpecializedSyntaxHighlighter.js";
 import { memo, useEffect, useMemo, useRef } from "react";
@@ -104,7 +105,7 @@ function LogLinesViewer({ entries, filterLevel, levelCounts, className, showLine
 		className: cn("flex flex-col h-full", className),
 		children: /* @__PURE__ */ jsx("div", {
 			ref: scrollContainerRef,
-			className: "flex-1 overflow-auto font-mono text-[13px] leading-relaxed bg-[#241B2F]",
+			className: "flex-1 overflow-auto font-mono text-[13px] leading-relaxed bg-[hsl(var(--terminal-bg,var(--background)))]",
 			style: { contain: "layout style" },
 			children: filteredEntries.length === 0 ? /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col items-center justify-center h-full gap-2 text-muted-foreground/50",
@@ -154,17 +155,11 @@ function LogLinesViewer({ entries, filterLevel, levelCounts, className, showLine
 	});
 }
 /**
-* Level-specific left border color for log lines.
+* Get level-specific left border color from centralized tokens.
 */
-const LEVEL_BORDER_COLORS = {
-	error: "border-l-red-500/60",
-	fatal: "border-l-pink-500/60",
-	warn: "border-l-yellow-500/50",
-	info: "border-l-blue-500/30",
-	debug: "border-l-cyan-500/20",
-	trace: "border-l-gray-500/15",
-	unknown: "border-l-transparent"
-};
+function getLevelBorder(level) {
+	return (LOG_LEVEL_STYLES[level] ?? LOG_LEVEL_STYLES.unknown).border;
+}
 /**
 * Individual log line component (memoized).
 *
@@ -173,7 +168,7 @@ const LEVEL_BORDER_COLORS = {
 */
 const LogLine = memo(function LogLine({ entry, index, showLineNumbers, enableSyntaxHighlight }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-start gap-2 px-3 py-1 border-l-2 transition-colors", LEVEL_BORDER_COLORS[entry.level] || "border-l-transparent", index % 2 === 0 ? "bg-white/[0.02]" : "", "hover:bg-white/[0.06]"),
+		className: cn("flex items-start gap-2 px-3 py-1 border-l-2 transition-colors", getLevelBorder(entry.level), index % 2 === 0 ? "bg-white/[0.02]" : "", "hover:bg-white/[0.06]"),
 		children: [
 			showLineNumbers && /* @__PURE__ */ jsx("span", {
 				className: "text-muted-foreground/50 text-xs w-12 flex-shrink-0 select-none",

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

@@ -0,0 +1,13 @@
+/**
+ * TerminalDebugPanel style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalDebugPanel
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalDebugPanel visual regions. */
+export type TerminalDebugPanelSlot = 'root' | 'toggleHeader' | 'toggleChevron' | 'toggleLabel' | 'fpsLabel' | 'content' | 'debugRow' | 'debugRowLabel' | 'debugRowValue';
+/**
+ * Default style slots for TerminalDebugPanel.
+ */
+export declare const terminalDebugPanelStyles: StyleSlots<TerminalDebugPanelSlot>;
+//# sourceMappingURL=TerminalDebugPanel.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalDebugPanel.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalDebugPanel/TerminalDebugPanel.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,wDAAwD;AACxD,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,cAAc,GACd,eAAe,GACf,aAAa,GACb,UAAU,GACV,SAAS,GACT,UAAU,GACV,eAAe,GACf,eAAe,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,UAAU,CAAC,sBAAsB,CAUvE,CAAC"}

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

@@ -0,0 +1,18 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalDebugPanel/TerminalDebugPanel.styles.ts
+/**
+* Default style slots for TerminalDebugPanel.
+*/
+const terminalDebugPanelStyles = {
+	root: "border-t border-border/20 bg-muted/10",
+	toggleHeader: "w-full flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider hover:text-muted-foreground transition-colors",
+	toggleChevron: "w-3 h-3 transition-transform",
+	toggleLabel: "",
+	fpsLabel: "ml-auto text-foreground/40",
+	content: "pb-2",
+	debugRow: "flex items-center gap-3 px-3 py-1 hover:bg-white/5 transition-colors",
+	debugRowLabel: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider w-24 flex-shrink-0",
+	debugRowValue: "text-xs font-mono"
+};
+
+//#endregion
+export { terminalDebugPanelStyles };

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

@@ -1,13 +1,24 @@
 /**
- * TerminalDebugPanel Component.
+ * TerminalDebugPanel types.
  *
- * Collapsible diagnostic panel below the terminal showing real-time
- * GPU/renderer info, FPS, grid dimensions, PTY status, and connection details.
- *
- * @module components/devenv/terminal/panel/TerminalDebugPanel
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalDebugPanel
  */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TerminalDebugPanelSlot } from './TerminalDebugPanel.styles';
 /**
  * Props for the TerminalDebugPanel component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalDebugPanel
+ *   visible={true}
+ *   renderer="WebGPU"
+ *   fps={60}
+ *   gridSize={{ cols: 120, rows: 30 }}
+ *   ptyStatus="connected"
+ *   slots={{ root: 'bg-card/20' }}
+ * />
+ * ```
  */
 export interface ITerminalDebugPanelProps {
     /** Whether the panel is visible */
@@ -47,28 +58,9 @@ export interface ITerminalDebugPanelProps {
     crtEffect?: boolean;
     /** Connection uptime in seconds */
     uptimeSeconds?: number;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalDebugPanelSlot>;
     /** Additional CSS classes */
     className?: string;
 }
-/**
- * TerminalDebugPanel Component.
- *
- * Renders a compact diagnostic panel with terminal runtime information.
- * Toggled via the debug panel setting in TerminalSettingsPopover.
- *
- * @param props - Debug panel props with runtime telemetry
- * @returns React element or null when hidden
- *
- * @example
- * ```tsx
- * <TerminalDebugPanel
- *   visible={settings.debugPanel}
- *   renderer="WebGPU"
- *   fps={60}
- *   gridSize={{ cols: 120, rows: 30 }}
- *   ptyStatus="connected"
- * />
- * ```
- */
-export declare function TerminalDebugPanel({ visible, renderer, fps, gpu, canvasSize, gridSize, cellSize, font, ptyStatus, ptyUrl, remoteName, themeName, crtEffect, uptimeSeconds, className, }: ITerminalDebugPanelProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=TerminalDebugPanel.d.ts.map
+//# sourceMappingURL=TerminalDebugPanel.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalDebugPanel.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalDebugPanel/TerminalDebugPanel.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAE1E;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,wBAAwB;IACvC,mCAAmC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,mCAAmC;IACnC,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,0BAA0B;IAC1B,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAE9C,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,32 @@
+/**
+ * TerminalDebugPanel Component.
+ *
+ * Collapsible diagnostic panel showing real-time GPU/renderer info,
+ * FPS, grid dimensions, PTY status, and connection details.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalDebugPanel
+ */
+import type { ITerminalDebugPanelProps } from './TerminalDebugPanel.types';
+export type { ITerminalDebugPanelProps } from './TerminalDebugPanel.types';
+export { terminalDebugPanelStyles } from './TerminalDebugPanel.styles';
+export type { TerminalDebugPanelSlot } from './TerminalDebugPanel.styles';
+/**
+ * TerminalDebugPanel Component.
+ *
+ * Renders a compact diagnostic panel with terminal runtime information.
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalDebugPanel
+ *   visible={settings.debugPanel}
+ *   renderer="WebGPU"
+ *   fps={60}
+ *   gridSize={{ cols: 120, rows: 30 }}
+ *   ptyStatus="connected"
+ * />
+ * ```
+ */
+export declare function TerminalDebugPanel({ visible, renderer, fps, gpu, canvasSize, gridSize, cellSize, font, ptyStatus, ptyUrl, remoteName, themeName, crtEffect, uptimeSeconds, slots, className, }: ITerminalDebugPanelProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalDebugPanel/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAG3E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAiD1E;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,GAAG,EACH,GAAG,EACH,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,EACN,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,KAAK,EACL,SAAS,GACV,EAAE,wBAAwB,kDA8D1B"}

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

@@ -1,23 +1,23 @@
 'use client';
 
-import { cn } from "../../../lib/utils.js";
+import { cn } from "../../../../lib/utils.js";
+import { STATUS_COLORS } from "../../Terminal.tokens.js";
+import { terminalDebugPanelStyles } from "./TerminalDebugPanel.styles.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/react-ui/blocks/Terminal/panel/TerminalDebugPanel.tsx
+//#region src/react-ui/blocks/Terminal/panel/TerminalDebugPanel/index.tsx
 /**
 * TerminalDebugPanel Component.
 *
-* Collapsible diagnostic panel below the terminal showing real-time
-* GPU/renderer info, FPS, grid dimensions, PTY status, and connection details.
+* Collapsible diagnostic panel showing real-time GPU/renderer info,
+* FPS, grid dimensions, PTY status, and connection details.
+* Fully composable via StyleSlots.
 *
-* @module components/devenv/terminal/panel/TerminalDebugPanel
+* @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalDebugPanel
 */
 /**
 * Format uptime from seconds to human-readable string.
-*
-* @param seconds - Total seconds of uptime
-* @returns Formatted string (e.g. "5m 32s", "1h 23m")
 */
 function formatUptime(seconds) {
 	if (seconds < 60) return `${Math.floor(seconds)}s`;
@@ -27,28 +27,34 @@ function formatUptime(seconds) {
 	return `${Math.floor(m / 60)}h ${m % 60}m`;
 }
 /**
-* Single row in the debug panel table.
+* Single debug row component.
 */
-function DebugRow({ label, value, valueColor }) {
+function DebugRow({ label, value, valueColor, slots }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-3 px-3 py-1 hover:bg-white/5 transition-colors",
+		className: cn(terminalDebugPanelStyles.debugRow, slots?.debugRow),
 		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider w-24 flex-shrink-0",
+			className: cn(terminalDebugPanelStyles.debugRowLabel, slots?.debugRowLabel),
 			children: label
 		}), /* @__PURE__ */ jsx("span", {
-			className: cn("text-xs font-mono", valueColor ?? "text-foreground/80"),
+			className: cn(terminalDebugPanelStyles.debugRowValue, slots?.debugRowValue, valueColor ?? "text-foreground/80"),
 			children: value
 		})]
 	});
 }
 /**
+* Get PTY status color from tokens.
+*/
+function getPtyStatusColor(status) {
+	if (status === "connected") return STATUS_COLORS.connected.label;
+	if (status === "connecting") return STATUS_COLORS.connecting.label;
+	if (status === "error") return STATUS_COLORS.error.label;
+	return "text-muted-foreground/50";
+}
+/**
 * TerminalDebugPanel Component.
 *
 * Renders a compact diagnostic panel with terminal runtime information.
-* Toggled via the debug panel setting in TerminalSettingsPopover.
-*
-* @param props - Debug panel props with runtime telemetry
-* @returns React element or null when hidden
+* All visual regions are overridable via the `slots` prop.
 *
 * @example
 * ```tsx
@@ -61,7 +67,7 @@ function DebugRow({ label, value, valueColor }) {
 * />
 * ```
 */
-function TerminalDebugPanel({ visible, renderer, fps, gpu, canvasSize, gridSize, cellSize, font, ptyStatus, ptyUrl, remoteName, themeName, crtEffect, uptimeSeconds, className }) {
+function TerminalDebugPanel({ visible, renderer, fps, gpu, canvasSize, gridSize, cellSize, font, ptyStatus, ptyUrl, remoteName, themeName, crtEffect, uptimeSeconds, slots, className }) {
 	const [isExpanded, setIsExpanded] = useState(true);
 	const [liveUptime, setLiveUptime] = useState(uptimeSeconds ?? 0);
 	const uptimeRef = useRef(uptimeSeconds ?? 0);
@@ -78,86 +84,101 @@ function TerminalDebugPanel({ visible, renderer, fps, gpu, canvasSize, gridSize,
 		return () => clearInterval(interval);
 	}, [visible, ptyStatus]);
 	if (!visible) return null;
-	const statusColor = ptyStatus === "connected" ? "text-green-400" : ptyStatus === "connecting" ? "text-yellow-400" : ptyStatus === "error" ? "text-red-400" : "text-muted-foreground/50";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("border-t border-white/10 bg-black/20", className),
+		className: cn(terminalDebugPanelStyles.root, slots?.root, className),
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => setIsExpanded(!isExpanded),
-			className: "w-full flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider hover:text-muted-foreground transition-colors",
+			className: cn(terminalDebugPanelStyles.toggleHeader, slots?.toggleHeader),
 			children: [
 				/* @__PURE__ */ jsx("svg", {
-					className: cn("w-3 h-3 transition-transform", isExpanded && "rotate-90"),
+					className: cn(terminalDebugPanelStyles.toggleChevron, slots?.toggleChevron, isExpanded && "rotate-90"),
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
 					strokeWidth: 2,
 					children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
 				}),
-				"Debug Panel",
+				/* @__PURE__ */ jsx("span", {
+					className: cn(terminalDebugPanelStyles.toggleLabel, slots?.toggleLabel),
+					children: "Debug Panel"
+				}),
 				fps != null && /* @__PURE__ */ jsxs("span", {
-					className: "ml-auto text-foreground/40",
+					className: cn(terminalDebugPanelStyles.fpsLabel, slots?.fpsLabel),
 					children: [fps.toFixed(0), " FPS"]
 				})
 			]
 		}), isExpanded && /* @__PURE__ */ jsxs("div", {
-			className: "pb-2",
+			className: cn(terminalDebugPanelStyles.content, slots?.content),
 			children: [
 				renderer && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Renderer",
 					value: renderer,
-					valueColor: "text-primary/80"
+					valueColor: "text-primary/80",
+					slots
 				}),
 				fps != null && /* @__PURE__ */ jsx(DebugRow, {
 					label: "FPS",
-					value: fps.toFixed(1)
+					value: fps.toFixed(1),
+					slots
 				}),
 				gpu && /* @__PURE__ */ jsx(DebugRow, {
 					label: "GPU",
-					value: gpu
+					value: gpu,
+					slots
 				}),
 				canvasSize && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Canvas",
-					value: `${canvasSize.width} \u00d7 ${canvasSize.height}`
+					value: `${canvasSize.width} \u00d7 ${canvasSize.height}`,
+					slots
 				}),
 				gridSize && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Grid",
-					value: `${gridSize.cols} cols \u00d7 ${gridSize.rows} rows`
+					value: `${gridSize.cols} cols \u00d7 ${gridSize.rows} rows`,
+					slots
 				}),
 				cellSize && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Cell",
-					value: `${cellSize.width.toFixed(1)} \u00d7 ${cellSize.height.toFixed(1)} px`
+					value: `${cellSize.width.toFixed(1)} \u00d7 ${cellSize.height.toFixed(1)} px`,
+					slots
 				}),
 				font && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Font",
-					value: font
+					value: font,
+					slots
 				}),
 				/* @__PURE__ */ jsx(DebugRow, {
 					label: "PTY Status",
 					value: ptyStatus ?? "unknown",
-					valueColor: statusColor
+					valueColor: getPtyStatusColor(ptyStatus),
+					slots
 				}),
 				ptyUrl && /* @__PURE__ */ jsx(DebugRow, {
 					label: "PTY URL",
 					value: ptyUrl,
-					valueColor: "text-foreground/40"
+					valueColor: "text-foreground/40",
+					slots
 				}),
 				remoteName && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Remote",
-					value: remoteName
+					value: remoteName,
+					slots
 				}),
 				themeName && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Theme",
-					value: themeName
+					value: themeName,
+					slots
 				}),
 				/* @__PURE__ */ jsx(DebugRow, {
 					label: "CRT Effect",
 					value: crtEffect ? "ON" : "OFF",
-					valueColor: crtEffect ? "text-primary/60" : "text-muted-foreground/40"
+					valueColor: crtEffect ? "text-primary/60" : "text-muted-foreground/40",
+					slots
 				}),
 				ptyStatus === "connected" && /* @__PURE__ */ jsx(DebugRow, {
 					label: "Uptime",
-					value: formatUptime(liveUptime)
+					value: formatUptime(liveUptime),
+					slots
 				})
 			]
 		})]

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

@@ -0,0 +1,13 @@
+/**
+ * TerminalFilterDropdown style definitions.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterDropdown
+ */
+import type { StyleSlots } from '../../../../../core/types';
+/** Slot names for TerminalFilterDropdown visual regions. */
+export type TerminalFilterDropdownSlot = 'root' | 'trigger' | 'triggerBadge' | 'dropdown' | 'option' | 'optionDot' | 'optionLabel' | 'optionBadge';
+/**
+ * Default style slots for TerminalFilterDropdown.
+ */
+export declare const terminalFilterDropdownStyles: StyleSlots<TerminalFilterDropdownSlot>;
+//# sourceMappingURL=TerminalFilterDropdown.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFilterDropdown.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/TerminalFilterDropdown.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,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,WAAW,GACX,aAAa,GACb,aAAa,CAAC;AAElB;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,UAAU,CAAC,0BAA0B,CAS/E,CAAC"}

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

@@ -0,0 +1,17 @@
+//#region src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/TerminalFilterDropdown.styles.ts
+/**
+* Default style slots for TerminalFilterDropdown.
+*/
+const terminalFilterDropdownStyles = {
+	root: "relative",
+	trigger: "flex items-center gap-2 px-3 py-2 h-9 rounded-md transition-all duration-200 bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground border border-border/30 hover:border-border/50 shadow-[inset_0_0.5px_0_rgba(255,255,255,0.1)] text-xs font-mono font-medium uppercase tracking-wider",
+	triggerBadge: "inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 bg-primary/20 text-primary rounded font-mono text-[10px] font-bold",
+	dropdown: "",
+	option: "w-full px-3 py-2 flex items-center justify-between gap-3 transition-all duration-150 hover:bg-primary/10",
+	optionDot: "w-2 h-2 rounded-full flex-shrink-0",
+	optionLabel: "text-sm font-mono",
+	optionBadge: "inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 rounded font-mono text-[10px] font-bold"
+};
+
+//#endregion
+export { terminalFilterDropdownStyles };

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

@@ -0,0 +1,34 @@
+/**
+ * TerminalFilterDropdown types.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterDropdown
+ */
+import type { SlotOverrides } from '../../../../../core/types';
+import type { TLogLevelFilter, TLogLevel } from '../TerminalLogsPanel.types';
+import type { TerminalFilterDropdownSlot } from './TerminalFilterDropdown.styles';
+/**
+ * Props for the TerminalFilterDropdown component.
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterDropdown
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ *   slots={{ trigger: 'h-10' }}
+ * />
+ * ```
+ */
+export interface ITerminalFilterDropdownProps {
+    /** Current log level filter */
+    filterLevel: TLogLevelFilter;
+    /** Log level counts for badges */
+    levelCounts: Partial<Record<TLogLevel, number>>;
+    /** Callback when filter level changes */
+    onFilterChange: (level: TLogLevelFilter) => void;
+    /** Override classes for visual regions */
+    slots?: SlotOverrides<TerminalFilterDropdownSlot>;
+    /** Custom class name on root element */
+    className?: string;
+}
+//# sourceMappingURL=TerminalFilterDropdown.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFilterDropdown.types.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/TerminalFilterDropdown.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAElF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,4BAA4B;IAC3C,+BAA+B;IAC/B,WAAW,EAAE,eAAe,CAAC;IAE7B,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,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/TerminalFilterDropdown/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * TerminalFilterDropdown Component.
+ *
+ * Dropdown menu for log level filtering with color indicators.
+ * Fully composable via StyleSlots.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalFilterDropdown
+ */
+import type { ITerminalFilterDropdownProps } from './TerminalFilterDropdown.types';
+export type { ITerminalFilterDropdownProps } from './TerminalFilterDropdown.types';
+export { terminalFilterDropdownStyles } from './TerminalFilterDropdown.styles';
+export type { TerminalFilterDropdownSlot } from './TerminalFilterDropdown.styles';
+/**
+ * TerminalFilterDropdown Component.
+ *
+ * Displays a dropdown menu with:
+ * - Current filter level as button label
+ * - Filter options with log-level-colored dots
+ * - Badge counts per level
+ * - CSS Anchor positioned dropdown
+ *
+ * All visual regions are overridable via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterDropdown
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ * />
+ * ```
+ */
+export declare function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, slots, className, }: ITerminalFilterDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAKnF,YAAY,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAC/E,YAAY,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAyBlF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,WAAW,EACX,cAAc,EACd,KAAK,EACL,SAAS,GACV,EAAE,4BAA4B,2CAoG9B"}