@silvery/examples 0.17.3 → 0.17.4

package/dist/apps/explorer.mjs

@@ -0,0 +1,698 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
+import { t as ExampleBanner } from "../_banner-DLPxCqVy.mjs";
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Divider, Kbd, ListView, Muted, Tab, TabList, Tabs, Text, TextInput, createTerm, render, useApp, useBoxRect, useInput } from "silvery";
+//#region apps/explorer.tsx
+/**
+* Explorer — Log Viewer & Process Explorer
+*
+* A tabbed data exploration demo combining:
+* - Streaming log viewer with ~2000 lines, severity-level coloring, and level toggles
+* - Sortable process table with ~50 processes, live CPU/MEM jitter, and responsive columns
+* - Shared TextInput search bar with useDeferredValue for non-blocking filtering
+* - ListView with interactive scrolling for both tabs
+*
+* Usage: bun vendor/silvery/examples/apps/explorer.tsx
+*
+* Controls:
+*   Tab/h/l       - Switch tabs (Logs / Processes)
+*   j/k or Up/Dn  - Navigate rows
+*   d/u            - Half-page down/up
+*   g/G            - Jump to first/last
+*   /              - Focus search bar
+*   1-4            - Toggle log levels (Logs tab)
+*   s              - Cycle sort column (Processes tab)
+*   Esc            - Exit search / quit
+*   q              - Quit (when not searching)
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Explorer",
+	description: "Log viewer and process explorer with ListView search",
+	demo: true,
+	features: [
+		"ListView",
+		"TextInput",
+		"useBoxRect()",
+		"useDeferredValue",
+		"2000+ rows"
+	]
+};
+function seededRandom(seed) {
+	let s = seed;
+	return () => {
+		s = s * 1664525 + 1013904223 & 2147483647;
+		return s / 2147483647;
+	};
+}
+const SERVICES = [
+	"api",
+	"auth",
+	"db",
+	"cache",
+	"worker",
+	"gateway",
+	"scheduler",
+	"metrics",
+	"queue",
+	"ws"
+];
+const LOG_TEMPLATES = {
+	DEBUG: [
+		"Cache miss for key user:session:{id}",
+		"Query plan: sequential scan on events ({n} rows)",
+		"WebSocket frame received: {n} bytes",
+		"GC pause: {n}ms (minor collection)",
+		"Connection pool stats: {n} active, {n} idle",
+		"Route matched: GET /api/v2/resources/{id}",
+		"DNS resolution took {n}ms for upstream.svc",
+		"Retry backoff: sleeping {n}ms before attempt"
+	],
+	INFO: [
+		"Request completed: 200 OK ({n}ms)",
+		"User {id} authenticated via OAuth",
+		"Background job processed: email_dispatch #{id}",
+		"Server listening on port {n}",
+		"Database migration applied: v{n}",
+		"Health check passed (latency: {n}ms)",
+		"Deployed version 2.{n}.0 to production",
+		"Cache warmed: {n} entries loaded in {n}ms"
+	],
+	WARN: [
+		"Slow query detected: {n}ms (threshold: 200ms)",
+		"Rate limit approaching: {n}/1000 requests",
+		"Memory usage: {n}% of allocated heap",
+		"Retry attempt {n}/3 for external API call",
+		"Certificate expires in {n} days",
+		"Connection pool near capacity: {n}/100",
+		"Request body exceeds {n}KB soft limit",
+		"Stale cache entry served for key products:{id}"
+	],
+	ERROR: [
+		"Unhandled exception in request handler: TypeError",
+		"Database connection refused: ECONNREFUSED",
+		"Authentication failed for user {id}: invalid token",
+		"Timeout after {n}ms waiting for upstream service",
+		"Disk usage critical: {n}% on /var/data",
+		"Failed to process message from queue: malformed payload",
+		"OOM kill triggered for worker process PID {id}",
+		"TLS handshake failed: certificate chain incomplete"
+	]
+};
+const LEVEL_COLORS = {
+	DEBUG: "$muted",
+	INFO: "$success",
+	WARN: "$warning",
+	ERROR: "$error"
+};
+const LEVEL_BADGES = {
+	DEBUG: "DBG",
+	INFO: "INF",
+	WARN: "WRN",
+	ERROR: "ERR"
+};
+function generateLogs(count) {
+	const rng = seededRandom(42);
+	const levels = [
+		"DEBUG",
+		"INFO",
+		"INFO",
+		"INFO",
+		"INFO",
+		"WARN",
+		"WARN",
+		"ERROR"
+	];
+	const entries = [];
+	const baseHour = 14;
+	const baseMinute = 30;
+	for (let i = 0; i < count; i++) {
+		const level = levels[Math.floor(rng() * levels.length)];
+		const templates = LOG_TEMPLATES[level];
+		const message = templates[Math.floor(rng() * templates.length)].replace(/\{id\}/g, () => String(Math.floor(rng() * 99999))).replace(/\{n\}/g, () => String(Math.floor(rng() * 999)));
+		const totalSeconds = i / count * 1800;
+		const h = baseHour + Math.floor((baseMinute * 60 + totalSeconds) / 3600);
+		const m = Math.floor((baseMinute * 60 + totalSeconds) % 3600 / 60);
+		const s = Math.floor(totalSeconds % 60);
+		const ms = Math.floor(rng() * 1e3);
+		entries.push({
+			id: i,
+			timestamp: `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}.${String(ms).padStart(3, "0")}`,
+			service: SERVICES[Math.floor(rng() * SERVICES.length)],
+			level,
+			message
+		});
+	}
+	return entries;
+}
+const ALL_LOGS = generateLogs(2e3);
+const PROCESS_NAMES = [
+	"node",
+	"bun",
+	"postgres",
+	"redis-server",
+	"nginx",
+	"docker",
+	"sshd",
+	"containerd",
+	"kubelet",
+	"etcd",
+	"coredns",
+	"prometheus",
+	"grafana",
+	"elasticsearch",
+	"rabbitmq",
+	"kafka",
+	"consul",
+	"vault",
+	"haproxy",
+	"traefik",
+	"envoy",
+	"mysql",
+	"mongo",
+	"clickhouse",
+	"influxdb",
+	"jenkins",
+	"cadvisor",
+	"telegraf",
+	"deno",
+	"esbuild",
+	"python3",
+	"ruby",
+	"java",
+	"go",
+	"rustc",
+	"webpack",
+	"vite",
+	"swc",
+	"chrome",
+	"code",
+	"tmux",
+	"zsh",
+	"cron",
+	"systemd",
+	"rsyslogd",
+	"logstash",
+	"kibana",
+	"alertmanager",
+	"buildkitd",
+	"registry"
+];
+const PROCESS_STATUSES = [
+	"running",
+	"sleeping",
+	"stopped",
+	"zombie"
+];
+function generateProcesses(count) {
+	const rng = seededRandom(123);
+	const procs = [];
+	for (let i = 0; i < count; i++) {
+		const nameBase = PROCESS_NAMES[Math.floor(rng() * PROCESS_NAMES.length)];
+		const hasInstance = rng() > .7;
+		const status = rng() < .65 ? "running" : PROCESS_STATUSES[Math.floor(rng() * PROCESS_STATUSES.length)];
+		procs.push({
+			pid: 1e3 + Math.floor(rng() * 6e4),
+			name: hasInstance ? `${nameBase}:${Math.floor(rng() * 16)}` : nameBase,
+			cpu: status === "running" ? Math.round(rng() * 1e3) / 10 : 0,
+			mem: Math.round(rng() * 800) / 10,
+			status
+		});
+	}
+	return procs;
+}
+const INITIAL_PROCESSES = generateProcesses(50);
+const STATUS_COLORS = {
+	running: "$success",
+	sleeping: "$muted",
+	stopped: "$warning",
+	zombie: "$error"
+};
+const STATUS_ICONS = {
+	running: "▶",
+	sleeping: "◌",
+	stopped: "■",
+	zombie: "☠"
+};
+const SORT_COLUMNS = [
+	"cpu",
+	"mem",
+	"pid",
+	"name",
+	"status"
+];
+function LogRow({ entry, isSelected }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		paddingX: 1,
+		backgroundColor: isSelected ? "$mutedbg" : void 0,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [entry.timestamp, " "] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: LEVEL_COLORS[entry.level],
+				bold: true,
+				children: LEVEL_BADGES[entry.level]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+				" [",
+				entry.service.padEnd(9),
+				"] "
+			] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: entry.message })
+		]
+	});
+}
+function LogListArea({ entries, cursor }) {
+	const { height } = useBoxRect();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListView, {
+		items: entries,
+		height,
+		estimateHeight: 1,
+		scrollTo: cursor,
+		overscan: 5,
+		renderItem: (entry, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogRow, {
+			entry,
+			isSelected: index === cursor
+		}, entry.id)
+	});
+}
+function LevelToggles({ levels, onToggle }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		gap: 1,
+		children: [
+			"DEBUG",
+			"INFO",
+			"WARN",
+			"ERROR"
+		].map((level, i) => {
+			const active = levels[level];
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				gap: 0,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					color: "$muted",
+					dim: true,
+					children: [i + 1, ":"]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: active ? LEVEL_COLORS[level] : "$muted",
+					bold: active,
+					dim: !active,
+					strikethrough: !active,
+					children: LEVEL_BADGES[level]
+				})]
+			}, level);
+		})
+	});
+}
+function useColumns(totalWidth) {
+	return useMemo(() => {
+		const pidW = 7;
+		const cpuW = 8;
+		const memW = 8;
+		const statusW = 11;
+		const fixed = pidW + cpuW + memW + statusW + 4;
+		return {
+			pidW,
+			nameW: Math.max(12, totalWidth - fixed),
+			cpuW,
+			memW,
+			statusW
+		};
+	}, [totalWidth]);
+}
+function ProcessHeader({ width }) {
+	const cols = useColumns(width);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			bold: true,
+			color: "$muted",
+			children: [
+				"PID".padEnd(cols.pidW),
+				"NAME".padEnd(cols.nameW),
+				"CPU%".padStart(cols.cpuW),
+				"MEM%".padStart(cols.memW),
+				"  ",
+				"STATUS".padEnd(cols.statusW)
+			]
+		})
+	});
+}
+function ProcessRow({ proc, isSelected, width }) {
+	const cols = useColumns(width);
+	const cpuColor = proc.cpu > 80 ? "$error" : proc.cpu > 40 ? "$warning" : "$success";
+	const displayName = proc.name.length > cols.nameW - 1 ? proc.name.slice(0, cols.nameW - 2) + "…" : proc.name;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		paddingX: 1,
+		backgroundColor: isSelected ? "$mutedbg" : void 0,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$muted",
+				children: String(proc.pid).padEnd(cols.pidW)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				bold: isSelected,
+				children: displayName.padEnd(cols.nameW)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: cpuColor,
+				children: [proc.cpu.toFixed(1).padStart(cols.cpuW - 1), "%"]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: proc.mem > 40 ? "$warning" : "$muted",
+				children: [proc.mem.toFixed(1).padStart(cols.memW - 1), "%"]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "  " }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: STATUS_COLORS[proc.status],
+				children: [
+					STATUS_ICONS[proc.status],
+					" ",
+					proc.status.padEnd(cols.statusW - 2)
+				]
+			})
+		]
+	});
+}
+function ProcessListArea({ processes, cursor, width }) {
+	const { height } = useBoxRect();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListView, {
+		items: processes,
+		height,
+		estimateHeight: 1,
+		scrollTo: cursor,
+		overscan: 5,
+		renderItem: (proc, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProcessRow, {
+			proc,
+			isSelected: index === cursor,
+			width
+		}, proc.pid)
+	});
+}
+function Explorer() {
+	const { exit } = useApp();
+	const { width } = useBoxRect();
+	const [activeTab, setActiveTab] = useState("logs");
+	const [searchMode, setSearchMode] = useState(false);
+	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
+	const [logCursor, setLogCursor] = useState(0);
+	const [logLevels, setLogLevels] = useState({
+		DEBUG: true,
+		INFO: true,
+		WARN: true,
+		ERROR: true
+	});
+	const [procCursor, setProcCursor] = useState(0);
+	const [sortCol, setSortCol] = useState("cpu");
+	const [processes, setProcesses] = useState(INITIAL_PROCESSES);
+	const jitterRef = useRef(null);
+	useEffect(() => {
+		const rng = seededRandom(Date.now());
+		jitterRef.current = setInterval(() => {
+			setProcesses((prev) => prev.map((p) => {
+				if (p.status !== "running") return p;
+				const cpuDelta = (rng() - .5) * 6;
+				const memDelta = (rng() - .5) * 2;
+				return {
+					...p,
+					cpu: Math.max(0, Math.min(100, Math.round((p.cpu + cpuDelta) * 10) / 10)),
+					mem: Math.max(0, Math.min(100, Math.round((p.mem + memDelta) * 10) / 10))
+				};
+			}));
+		}, 2e3);
+		return () => {
+			if (jitterRef.current) clearInterval(jitterRef.current);
+		};
+	}, []);
+	const filteredLogs = useMemo(() => {
+		let logs = ALL_LOGS.filter((e) => logLevels[e.level]);
+		if (deferredQuery) {
+			const q = deferredQuery.toLowerCase();
+			logs = logs.filter((e) => e.message.toLowerCase().includes(q) || e.service.toLowerCase().includes(q) || e.level.toLowerCase().includes(q));
+		}
+		return logs;
+	}, [deferredQuery, logLevels]);
+	const filteredProcesses = useMemo(() => {
+		let procs = processes;
+		if (deferredQuery) {
+			const q = deferredQuery.toLowerCase();
+			procs = procs.filter((p) => p.name.toLowerCase().includes(q) || p.status.includes(q) || String(p.pid).includes(q));
+		}
+		return [...procs].sort((a, b) => {
+			switch (sortCol) {
+				case "cpu": return b.cpu - a.cpu;
+				case "mem": return b.mem - a.mem;
+				case "pid": return a.pid - b.pid;
+				case "name": return a.name.localeCompare(b.name);
+				case "status": return a.status.localeCompare(b.status);
+			}
+		});
+	}, [
+		processes,
+		deferredQuery,
+		sortCol
+	]);
+	const currentItems = activeTab === "logs" ? filteredLogs : filteredProcesses;
+	const setCursor = activeTab === "logs" ? setLogCursor : setProcCursor;
+	const halfPage = Math.max(1, Math.floor(20 / 2));
+	const effectiveLogCursor = Math.min(logCursor, Math.max(0, filteredLogs.length - 1));
+	const effectiveProcCursor = Math.min(procCursor, Math.max(0, filteredProcesses.length - 1));
+	const handleSearchSubmit = useCallback(() => {
+		setSearchMode(false);
+	}, []);
+	const toggleLevel = useCallback((level) => {
+		setLogLevels((prev) => ({
+			...prev,
+			[level]: !prev[level]
+		}));
+		setLogCursor(0);
+	}, []);
+	useInput(useCallback((input, key) => {
+		if (searchMode) {
+			if (key.escape) {
+				setSearchMode(false);
+				return;
+			}
+			return;
+		}
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (input === "/") {
+			setSearchMode(true);
+			return;
+		}
+		if (activeTab === "logs") {
+			const levelMap = {
+				"1": "DEBUG",
+				"2": "INFO",
+				"3": "WARN",
+				"4": "ERROR"
+			};
+			if (levelMap[input]) {
+				toggleLevel(levelMap[input]);
+				return;
+			}
+		}
+		if (activeTab === "processes" && input === "s") {
+			setSortCol((prev) => {
+				return SORT_COLUMNS[(SORT_COLUMNS.indexOf(prev) + 1) % SORT_COLUMNS.length];
+			});
+			return;
+		}
+		if (input === "j" || key.downArrow) setCursor((c) => Math.min(currentItems.length - 1, c + 1));
+		if (input === "k" || key.upArrow) setCursor((c) => Math.max(0, c - 1));
+		if (input === "d" || key.pageDown) setCursor((c) => Math.min(currentItems.length - 1, c + halfPage));
+		if (input === "u" || key.pageUp) setCursor((c) => Math.max(0, c - halfPage));
+		if (input === "g" || key.home) setCursor(0);
+		if (input === "G" || key.end) setCursor(currentItems.length - 1);
+		if (key.backspace && query) {
+			setQuery("");
+			setCursor(0);
+		}
+	}, [
+		searchMode,
+		exit,
+		activeTab,
+		currentItems.length,
+		halfPage,
+		query,
+		toggleLevel,
+		setCursor
+	]));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				children: searchMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexGrow: 1,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+						color: "$primary",
+						bold: true,
+						children: ["/", " "]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
+						value: query,
+						onChange: (v) => {
+							setQuery(v);
+							setLogCursor(0);
+							setProcCursor(0);
+						},
+						onSubmit: handleSearchSubmit,
+						prompt: "",
+						isActive: searchMode
+					})]
+				}) : query ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+					"filter: ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						bold: true,
+						children: query
+					}),
+					" (",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "backspace" }),
+					" clear, ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "/" }),
+					" edit)"
+				] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "/" }), " search"] })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, {
+				value: activeTab,
+				onChange: setActiveTab,
+				isActive: !searchMode,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					paddingX: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabList, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tab, {
+						value: "logs",
+						children: [
+							"Logs (",
+							filteredLogs.length.toLocaleString(),
+							")"
+						]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tab, {
+						value: "processes",
+						children: [
+							"Processes (",
+							filteredProcesses.length,
+							")"
+						]
+					})] })
+				})
+			}),
+			activeTab === "logs" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				paddingX: 1,
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LevelToggles, {
+					levels: logLevels,
+					onToggle: toggleLevel
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+					effectiveLogCursor + 1,
+					"/",
+					filteredLogs.length.toLocaleString()
+				] })]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexGrow: 1,
+				flexDirection: "column",
+				children: filteredLogs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogListArea, {
+					entries: filteredLogs,
+					cursor: effectiveLogCursor
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					paddingX: 1,
+					justifyContent: "center",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "No logs match the current filter" })
+				})
+			})] }),
+			activeTab === "processes" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					paddingX: 1,
+					justifyContent: "space-between",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						gap: 1,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "sort:" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								bold: true,
+								color: "$primary",
+								children: sortCol.toUpperCase()
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+								"(",
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "s" }),
+								" cycle)"
+							] })
+						]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+						effectiveProcCursor + 1,
+						"/",
+						filteredProcesses.length
+					] })]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProcessHeader, { width }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					paddingX: 1,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					flexGrow: 1,
+					flexDirection: "column",
+					children: filteredProcesses.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProcessListArea, {
+						processes: filteredProcesses,
+						cursor: effectiveProcCursor,
+						width
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						paddingX: 1,
+						justifyContent: "center",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "No processes match the current filter" })
+					})
+				})
+			] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				justifyContent: "space-between",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "h/l" }),
+					" tab ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "j/k" }),
+					" navigate ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "d/u" }),
+					" page ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "/" }),
+					" search",
+					" ",
+					activeTab === "logs" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "1-4" }),
+						" levels",
+						" "
+					] }),
+					activeTab === "processes" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "s" }),
+						" sort",
+						" "
+					] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "q" }),
+					" quit"
+				] })
+			})
+		]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+			meta,
+			controls: "h/l tab  j/k navigate  d/u page  / search  1-4 levels  s sort  q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Explorer, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { Explorer, main, meta };