@mks2508/mks-ui 0.3.2 → 0.4.0

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

@@ -0,0 +1,222 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { ContentTypeBadge, LevelBadge, TagBadges, TimestampBadge } from "../components/LogLineBadges.js";
+import { SyntaxHighlightedText } from "../components/SyntaxHighlight.js";
+import { SpecializedSyntaxHighlighter } from "../components/SpecializedSyntaxHighlighter.js";
+import { memo, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+//#region src/react-ui/blocks/Terminal/panel/LogLinesViewer.tsx
+/**
+* Log lines viewer component (React mode).
+*
+* Displays parsed log entries with React components for:
+* - Level badges with CSS styling
+* - Syntax highlighted spans
+* - Timestamps right-aligned
+* - Virtual scrolling with @tanstack/react-virtual
+* - Auto-scroll to bottom when following logs
+*
+* @module components/devenv/terminal/panel/LogLinesViewer
+*/
+/**
+* Get the severity value for a log level for filtering comparison.
+*/
+function getSeverity(level) {
+	return level === "all" ? 0 : {
+		trace: 0,
+		debug: 1,
+		info: 2,
+		warn: 3,
+		error: 4,
+		fatal: 5,
+		unknown: 1
+	}[level] ?? 1;
+}
+/**
+* Log lines viewer component.
+*
+* Displays parsed log entries with React components:
+* - Level badges (colored based on log level)
+* - Syntax highlighted message content
+* - Timestamps right-aligned
+* - Tag badges for component identification
+* - Virtual scrolling for performance with large logs
+* - Auto-scroll to bottom when following logs
+*
+* @example
+* ```tsx
+* <LogLinesViewer
+*   entries={parsedEntries}
+*   filterLevel="all"
+*   levelCounts={{ info: 42, warn: 3 }}
+*   showLineNumbers={true}
+*   followCursor={true}
+* />
+* ```
+*/
+function LogLinesViewer({ entries, filterLevel, levelCounts, className, showLineNumbers = false, enableSyntaxHighlight = true, followCursor = false, onScrollToBottom }) {
+	const scrollContainerRef = useRef(null);
+	const prevEntriesLengthRef = useRef(entries.length);
+	/**
+	* Filter entries based on current filter level.
+	* Memoized to avoid re-filtering on every render.
+	*/
+	const filteredEntries = useMemo(() => {
+		if (filterLevel === "all") return entries;
+		const minSeverity = getSeverity(filterLevel);
+		return entries.filter((entry) => {
+			return getSeverity(entry.level) >= minSeverity;
+		});
+	}, [entries, filterLevel]);
+	/**
+	* Virtual scrolling with @tanstack/react-virtual.
+	* Only renders visible rows + overscan buffer for optimal performance.
+	* Uses dynamic size measurement for variable-height rows.
+	*/
+	const rowVirtualizer = useVirtualizer({
+		count: filteredEntries.length,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => 28,
+		overscan: 5
+	});
+	/**
+	* Auto-scroll to bottom when new entries arrive and followCursor is enabled.
+	* Uses requestAnimationFrame for non-blocking scroll.
+	*/
+	useEffect(() => {
+		if (followCursor && entries.length > prevEntriesLengthRef.current) {
+			requestAnimationFrame(() => {
+				if (scrollContainerRef.current) scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+			});
+			onScrollToBottom?.();
+		}
+		prevEntriesLengthRef.current = entries.length;
+	}, [
+		entries.length,
+		followCursor,
+		onScrollToBottom
+	]);
+	filteredEntries.length;
+	return /* @__PURE__ */ jsx("div", {
+		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]",
+			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",
+				children: [/* @__PURE__ */ jsx("svg", {
+					className: "w-8 h-8 opacity-30",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 1.5,
+						d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-mono",
+					children: "No log entries to display"
+				})]
+			}) : /* @__PURE__ */ jsx("div", {
+				style: {
+					height: `${rowVirtualizer.getTotalSize()}px`,
+					width: "100%",
+					position: "relative"
+				},
+				children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+					const entry = filteredEntries[virtualRow.index];
+					return /* @__PURE__ */ jsx("div", {
+						"data-index": virtualRow.index,
+						ref: rowVirtualizer.measureElement,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							width: "100%",
+							transform: `translateY(${virtualRow.start}px)`
+						},
+						children: /* @__PURE__ */ jsx(LogLine, {
+							entry,
+							index: virtualRow.index,
+							showLineNumbers,
+							enableSyntaxHighlight
+						})
+					}, entry.line_number);
+				})
+			})
+		})
+	});
+}
+/**
+* Level-specific left border color for log lines.
+*/
+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"
+};
+/**
+* Individual log line component (memoized).
+*
+* Renders a single log entry with badges and highlighted content.
+* Memoized to prevent re-renders when entry hasn't changed.
+*/
+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]"),
+		children: [
+			showLineNumbers && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground/50 text-xs w-12 flex-shrink-0 select-none",
+				children: entry.line_number
+			}),
+			!entry.is_continuation && /* @__PURE__ */ jsx(LevelBadge, { level: entry.level }),
+			!entry.is_continuation && entry.content_type && entry.content_type !== "plain" && /* @__PURE__ */ jsx(ContentTypeBadge, {
+				contentType: entry.content_type,
+				httpMethod: entry.http_method
+			}),
+			!entry.is_continuation && entry.tags && entry.tags.length > 0 && /* @__PURE__ */ jsx(TagBadges, { tags: entry.tags }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0",
+				children: [enableSyntaxHighlight ? entry.content_type === "http" || entry.content_type === "table" ? /* @__PURE__ */ jsx(SpecializedSyntaxHighlighter, {
+					contentType: entry.content_type,
+					httpMethod: entry.http_method,
+					httpPath: entry.http_path,
+					tableData: entry.table_data,
+					text: entry.message ?? entry.raw
+				}) : entry.content_type === "json" && entry.structured ? /* @__PURE__ */ jsx(SpecializedSyntaxHighlighter, {
+					contentType: "json",
+					jsonData: entry.structured,
+					text: entry.message ?? entry.raw
+				}) : /* @__PURE__ */ jsx(SyntaxHighlightedText, { text: entry.message ?? entry.raw }) : /* @__PURE__ */ jsx("span", {
+					className: "text-foreground/90",
+					children: entry.message ?? entry.raw
+				}), entry.structured && entry.content_type !== "json" && /* @__PURE__ */ jsxs("details", {
+					className: "mt-1 ml-4",
+					children: [/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer text-xs text-muted-foreground hover:text-foreground",
+						children: "JSON data"
+					}), /* @__PURE__ */ jsx("pre", {
+						className: "mt-1 text-xs bg-black/20 p-2 rounded overflow-x-auto",
+						children: JSON.stringify(entry.structured, null, 2)
+					})]
+				})]
+			}),
+			!entry.is_continuation && entry.timestamp_display && /* @__PURE__ */ jsx(TimestampBadge, { timestamp: entry.timestamp_display })
+		]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.entry.line_number === nextProps.entry.line_number && prevProps.entry.raw === nextProps.entry.raw && prevProps.index === nextProps.index && prevProps.showLineNumbers === nextProps.showLineNumbers && prevProps.enableSyntaxHighlight === nextProps.enableSyntaxHighlight;
+});
+
+//#endregion
+export { LogLinesViewer };

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

@@ -0,0 +1,74 @@
+/**
+ * TerminalDebugPanel Component.
+ *
+ * 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
+ */
+/**
+ * Props for the TerminalDebugPanel component.
+ */
+export interface ITerminalDebugPanelProps {
+    /** Whether the panel is visible */
+    visible: boolean;
+    /** Renderer name (e.g. "WebGPU", "WebGL2", "xterm") */
+    renderer?: string;
+    /** Current FPS */
+    fps?: number;
+    /** GPU adapter name (e.g. "Apple M3 Pro") */
+    gpu?: string;
+    /** Canvas pixel dimensions */
+    canvasSize?: {
+        width: number;
+        height: number;
+    };
+    /** Grid dimensions in cols/rows */
+    gridSize?: {
+        cols: number;
+        rows: number;
+    };
+    /** Cell size in pixels */
+    cellSize?: {
+        width: number;
+        height: number;
+    };
+    /** Font description (e.g. "JetBrains Mono 14px") */
+    font?: string;
+    /** PTY connection status */
+    ptyStatus?: string;
+    /** PTY WebSocket URL */
+    ptyUrl?: string;
+    /** Active remote label */
+    remoteName?: string;
+    /** Theme name */
+    themeName?: string;
+    /** CRT effect enabled */
+    crtEffect?: boolean;
+    /** Connection uptime in seconds */
+    uptimeSeconds?: number;
+    /** 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalDebugPanel.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalDebugPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAOH;;GAEG;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;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;;;;;;;;;;;;;GAmBG;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,SAAS,GACV,EAAE,wBAAwB,kDA2H1B"}

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

@@ -0,0 +1,168 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalDebugPanel.tsx
+/**
+* TerminalDebugPanel Component.
+*
+* 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
+*/
+/**
+* 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`;
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	if (m < 60) return `${m}m ${s}s`;
+	return `${Math.floor(m / 60)}h ${m % 60}m`;
+}
+/**
+* Single row in the debug panel table.
+*/
+function DebugRow({ label, value, valueColor }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3 px-3 py-1 hover:bg-white/5 transition-colors",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider w-24 flex-shrink-0",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn("text-xs font-mono", valueColor ?? "text-foreground/80"),
+			children: value
+		})]
+	});
+}
+/**
+* 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"
+* />
+* ```
+*/
+function TerminalDebugPanel({ visible, renderer, fps, gpu, canvasSize, gridSize, cellSize, font, ptyStatus, ptyUrl, remoteName, themeName, crtEffect, uptimeSeconds, className }) {
+	const [isExpanded, setIsExpanded] = useState(true);
+	const [liveUptime, setLiveUptime] = useState(uptimeSeconds ?? 0);
+	const uptimeRef = useRef(uptimeSeconds ?? 0);
+	useEffect(() => {
+		uptimeRef.current = uptimeSeconds ?? 0;
+		setLiveUptime(uptimeRef.current);
+	}, [uptimeSeconds]);
+	useEffect(() => {
+		if (!visible || ptyStatus !== "connected") return;
+		const interval = setInterval(() => {
+			uptimeRef.current += 1;
+			setLiveUptime(uptimeRef.current);
+		}, 1e3);
+		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),
+		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",
+			children: [
+				/* @__PURE__ */ jsx("svg", {
+					className: cn("w-3 h-3 transition-transform", 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",
+				fps != null && /* @__PURE__ */ jsxs("span", {
+					className: "ml-auto text-foreground/40",
+					children: [fps.toFixed(0), " FPS"]
+				})
+			]
+		}), isExpanded && /* @__PURE__ */ jsxs("div", {
+			className: "pb-2",
+			children: [
+				renderer && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Renderer",
+					value: renderer,
+					valueColor: "text-primary/80"
+				}),
+				fps != null && /* @__PURE__ */ jsx(DebugRow, {
+					label: "FPS",
+					value: fps.toFixed(1)
+				}),
+				gpu && /* @__PURE__ */ jsx(DebugRow, {
+					label: "GPU",
+					value: gpu
+				}),
+				canvasSize && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Canvas",
+					value: `${canvasSize.width} \u00d7 ${canvasSize.height}`
+				}),
+				gridSize && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Grid",
+					value: `${gridSize.cols} cols \u00d7 ${gridSize.rows} rows`
+				}),
+				cellSize && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Cell",
+					value: `${cellSize.width.toFixed(1)} \u00d7 ${cellSize.height.toFixed(1)} px`
+				}),
+				font && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Font",
+					value: font
+				}),
+				/* @__PURE__ */ jsx(DebugRow, {
+					label: "PTY Status",
+					value: ptyStatus ?? "unknown",
+					valueColor: statusColor
+				}),
+				ptyUrl && /* @__PURE__ */ jsx(DebugRow, {
+					label: "PTY URL",
+					value: ptyUrl,
+					valueColor: "text-foreground/40"
+				}),
+				remoteName && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Remote",
+					value: remoteName
+				}),
+				themeName && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Theme",
+					value: themeName
+				}),
+				/* @__PURE__ */ jsx(DebugRow, {
+					label: "CRT Effect",
+					value: crtEffect ? "ON" : "OFF",
+					valueColor: crtEffect ? "text-primary/60" : "text-muted-foreground/40"
+				}),
+				ptyStatus === "connected" && /* @__PURE__ */ jsx(DebugRow, {
+					label: "Uptime",
+					value: formatUptime(liveUptime)
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { TerminalDebugPanel };

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

@@ -0,0 +1,42 @@
+/**
+ * TerminalFilterDropdown Component.
+ *
+ * Dropdown menu for log level filtering.
+ * Replaces tab-style filters with a compact dropdown menu.
+ *
+ * @module components/devenv/terminal/panel/filter-dropdown
+ */
+import type { TLogLevelFilter, TLogLevel } from './TerminalLogsPanel.types';
+/**
+ * Props for TerminalFilterDropdown component.
+ */
+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;
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * TerminalFilterDropdown Component.
+ *
+ * Displays a dropdown menu with:
+ * - Current filter level as button label
+ * - Filter options with badges
+ * - Keyboard shortcuts
+ * - Glassmorphic dropdown menu
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterDropdown
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ * />
+ * ```
+ */
+export declare function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, className, }: ITerminalFilterDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TerminalFilterDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TerminalFilterDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAG5E;;GAEG;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,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,WAAW,EACX,cAAc,EACd,SAAS,GACV,EAAE,4BAA4B,2CA0H9B"}

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

@@ -0,0 +1,175 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import terminal_filter_dropdown_module_default from "./terminal-filter-dropdown.module.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown.tsx
+/**
+* TerminalFilterDropdown Component.
+*
+* Dropdown menu for log level filtering.
+* Replaces tab-style filters with a compact dropdown menu.
+*
+* @module components/devenv/terminal/panel/filter-dropdown
+*/
+/**
+* Log level filter configurations.
+*/
+const FILTER_OPTIONS = [
+	{
+		value: "all",
+		label: "All Levels",
+		color: "text-foreground"
+	},
+	{
+		value: "trace",
+		label: "Trace",
+		color: "text-slate-400"
+	},
+	{
+		value: "debug",
+		label: "Debug",
+		color: "text-blue-400"
+	},
+	{
+		value: "info",
+		label: "Info",
+		color: "text-green-400"
+	},
+	{
+		value: "warn",
+		label: "Warn",
+		color: "text-yellow-400"
+	},
+	{
+		value: "error",
+		label: "Error",
+		color: "text-orange-400"
+	},
+	{
+		value: "fatal",
+		label: "Fatal",
+		color: "text-red-400"
+	}
+];
+/**
+* Get count for a specific log level.
+*/
+function getCount(level, levelCounts) {
+	if (level === "all") return Object.values(levelCounts).reduce((sum, count) => sum + (count ?? 0), 0);
+	return levelCounts[level] ?? 0;
+}
+/**
+* TerminalFilterDropdown Component.
+*
+* Displays a dropdown menu with:
+* - Current filter level as button label
+* - Filter options with badges
+* - Keyboard shortcuts
+* - Glassmorphic dropdown menu
+*
+* @example
+* ```tsx
+* <TerminalFilterDropdown
+*   filterLevel="all"
+*   levelCounts={{ info: 42, warn: 3, error: 1 }}
+*   onFilterChange={(level) => setFilterLevel(level)}
+* />
+* ```
+*/
+function TerminalFilterDropdown({ filterLevel, levelCounts, onFilterChange, className }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setIsOpen(false);
+		};
+		if (isOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => document.removeEventListener("mousedown", handleClickOutside);
+		}
+	}, [isOpen]);
+	const currentOption = FILTER_OPTIONS.find((opt) => opt.value === filterLevel);
+	const currentCount = getCount(filterLevel, levelCounts);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		ref: containerRef,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setIsOpen(!isOpen),
+			className: cn(terminal_filter_dropdown_module_default.triggerButton, "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)] hover:shadow-[0_0_8px_rgba(0,0,0,0.1)]", "text-xs font-mono font-medium uppercase tracking-wider"),
+			"aria-label": "Filter logs by level",
+			"aria-expanded": isOpen,
+			children: [
+				/* @__PURE__ */ jsx("svg", {
+					className: "w-3.5 h-3.5 flex-shrink-0",
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					})
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-shrink-0",
+					children: currentOption?.label
+				}),
+				currentCount > 0 && /* @__PURE__ */ jsx("span", {
+					className: "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",
+					children: currentCount
+				}),
+				/* @__PURE__ */ jsx("svg", {
+					className: cn("w-3 h-3 transition-transform duration-200 flex-shrink-0", isOpen && "rotate-180"),
+					fill: "none",
+					stroke: "currentColor",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M19 9l-7 7-7-7"
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: terminal_filter_dropdown_module_default.dropdownMenu,
+			"data-open": isOpen,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "glass-subtle rounded-lg py-1",
+				children: FILTER_OPTIONS.map((option) => {
+					const count = getCount(option.value, levelCounts);
+					const isActive = filterLevel === option.value;
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => {
+							onFilterChange(option.value);
+							setIsOpen(false);
+						},
+						className: cn("w-full px-3 py-2 flex items-center justify-between gap-3", "transition-all duration-150", "hover:bg-primary/10", isActive && "bg-primary/15"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: cn("w-2 h-2 rounded-full flex-shrink-0", option.value === "all" ? "bg-foreground" : `bg-${option.label.toLowerCase()}-400`),
+								style: { backgroundColor: option.value === "all" ? "hsl(var(--foreground))" : void 0 }
+							}), /* @__PURE__ */ jsx("span", {
+								className: cn("text-sm font-mono", isActive ? option.color : "text-muted-foreground"),
+								children: option.label
+							})]
+						}), count > 0 && /* @__PURE__ */ jsx("span", {
+							className: cn("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", isActive ? "bg-primary/30 text-primary" : "bg-muted/40 text-muted-foreground"),
+							children: count
+						})]
+					}, option.value);
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+export { TerminalFilterDropdown };