@silvery/examples 0.17.3 → 0.17.5

package/dist/layout/dashboard.mjs

@@ -0,0 +1,1203 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useState } from "react";
+import { Box, Muted, Tab, TabList, TabPanel, Tabs, Text, createTerm, render, useApp, useBoxRect, useInput, useInterval } from "silvery";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region layout/dashboard.tsx
+/**
+* Dashboard Example
+*
+* A btop-style responsive dashboard demonstrating:
+* - Multi-pane flexbox layout with round borders
+* - Live-updating metrics with sparklines and progress bars
+* - Responsive 2-column / tabbed layout via useBoxRect()
+* - Semantic theme colors with severity-based color coding
+* - Process table with sorting
+*/
+const meta = {
+	name: "Dashboard",
+	description: "Responsive multi-pane dashboard with live metrics and charts",
+	demo: true,
+	features: [
+		"Box flexGrow",
+		"useBoxRect()",
+		"responsive",
+		"live data",
+		"sparklines"
+	]
+};
+const SPARK_CHARS = "▁▂▃▄▅▆▇█";
+function sparkline(values) {
+	return values.map((v) => SPARK_CHARS[Math.max(0, Math.min(7, v))] ?? SPARK_CHARS[0]).join("");
+}
+/** Fixed-width inline progress bar string: ████████░░░░ */
+function miniBar(pct, width) {
+	const filled = Math.round(pct / 100 * width);
+	return "█".repeat(filled) + "░".repeat(width - filled);
+}
+function jitter(base, range) {
+	return Math.max(0, Math.min(100, base + (Math.random() - .5) * range));
+}
+function pushHistory(history, value, max = 20) {
+	const next = [...history];
+	if (next.length >= max) next.shift();
+	next.push(value);
+	return next;
+}
+function severityColor(pct) {
+	if (pct >= 80) return "$error";
+	if (pct >= 60) return "$warning";
+	return "$success";
+}
+function heatColor(temp) {
+	if (temp >= 75) return "$error";
+	if (temp >= 60) return "$warning";
+	return "$success";
+}
+function createInitialState() {
+	return {
+		cores: [
+			{
+				label: "cpu00",
+				pct: 12,
+				freq: "3.62",
+				temp: 39,
+				mode: "idle"
+			},
+			{
+				label: "cpu01",
+				pct: 28,
+				freq: "3.79",
+				temp: 42,
+				mode: "balanced"
+			},
+			{
+				label: "cpu02",
+				pct: 44,
+				freq: "4.02",
+				temp: 47,
+				mode: "steady"
+			},
+			{
+				label: "cpu03",
+				pct: 57,
+				freq: "4.18",
+				temp: 53,
+				mode: "steady"
+			},
+			{
+				label: "cpu04",
+				pct: 63,
+				freq: "4.31",
+				temp: 61,
+				mode: "warm"
+			},
+			{
+				label: "cpu05",
+				pct: 71,
+				freq: "4.47",
+				temp: 68,
+				mode: "boost"
+			},
+			{
+				label: "cpu06",
+				pct: 79,
+				freq: "4.62",
+				temp: 72,
+				mode: "boost"
+			},
+			{
+				label: "cpu07",
+				pct: 83,
+				freq: "4.84",
+				temp: 75,
+				mode: "boost"
+			},
+			{
+				label: "cpu08",
+				pct: 88,
+				freq: "5.02",
+				temp: 77,
+				mode: "turbo"
+			},
+			{
+				label: "cpu09",
+				pct: 94,
+				freq: "5.21",
+				temp: 81,
+				mode: "turbo"
+			}
+		],
+		totalCpu: 67,
+		userCpu: 38,
+		sysCpu: 12,
+		waitCpu: 14,
+		load: [
+			4.21,
+			3.88,
+			3.11
+		],
+		avgTemp: 71,
+		tasks: 287,
+		avgFreq: "4.31",
+		ctxPerSec: "128k",
+		uptime: "12d 06h",
+		pkgPct: 67,
+		power: 84,
+		fan: 1460,
+		boostOn: true,
+		cpuHistory: [
+			1,
+			2,
+			2,
+			3,
+			2,
+			4,
+			5,
+			4,
+			6,
+			5,
+			4,
+			6,
+			7,
+			6,
+			5,
+			6,
+			7,
+			6,
+			5,
+			4,
+			5,
+			6,
+			5,
+			7,
+			6,
+			5,
+			6,
+			7,
+			7,
+			6,
+			5,
+			4,
+			5,
+			6,
+			5,
+			4
+		],
+		memory: {
+			ramUsed: 23.7,
+			ramTotal: 32,
+			cached: 5.9,
+			free: 2.4,
+			slab: 1.1,
+			apps: 17.4,
+			wired: 1.8,
+			buffers: .612,
+			dirty: .212,
+			shared: 1.3,
+			reclaim: .8,
+			swapUsed: 2.1,
+			swapTotal: 8,
+			history: [
+				4,
+				4,
+				5,
+				5,
+				4,
+				5,
+				6,
+				5,
+				5,
+				6,
+				6,
+				5,
+				6,
+				6,
+				7,
+				6,
+				6,
+				5,
+				6,
+				6,
+				5,
+				5,
+				6,
+				5
+			]
+		},
+		network: {
+			dlRate: 428,
+			dlPeak: 612,
+			ulRate: 86,
+			ulPeak: 143,
+			connEst: 184,
+			listen: 23,
+			syn: 2,
+			drops: 0,
+			rxPps: "61.2kpps",
+			txPps: "19.4kpps",
+			retrans: "0.08%",
+			rtt: "18ms",
+			dlHistory: [
+				1,
+				2,
+				3,
+				5,
+				4,
+				6,
+				5,
+				7,
+				6,
+				4,
+				3,
+				5,
+				6,
+				7,
+				5,
+				4,
+				6,
+				7,
+				6,
+				5,
+				4,
+				6,
+				5,
+				4
+			],
+			ulHistory: [
+				0,
+				1,
+				1,
+				2,
+				2,
+				3,
+				2,
+				4,
+				3,
+				2,
+				1,
+				2,
+				3,
+				4,
+				3,
+				2,
+				1,
+				2,
+				3,
+				2,
+				2,
+				3,
+				2,
+				1
+			]
+		},
+		processes: [
+			{
+				pid: 31842,
+				name: "bun dev --hot src/server.ts",
+				cpu: 94.2,
+				memp: 3.8,
+				mem: "1.22G",
+				status: "Running",
+				time: "01:42:17",
+				io: "24M/s",
+				thr: 18
+			},
+			{
+				pid: 27114,
+				name: "node /usr/bin/vite --host",
+				cpu: 71.4,
+				memp: 2.2,
+				mem: "716M",
+				status: "Running",
+				time: "00:18:09",
+				io: "12M/s",
+				thr: 26
+			},
+			{
+				pid: 918,
+				name: "postgres: checkpointer",
+				cpu: 12.8,
+				memp: 1.4,
+				mem: "448M",
+				status: "Sleep",
+				time: "19:22:41",
+				io: "3.1M/s",
+				thr: 27
+			},
+			{
+				pid: 1023,
+				name: "Code Helper (Renderer)",
+				cpu: 9.6,
+				memp: 4.8,
+				mem: "1.53G",
+				status: "Sleep",
+				time: "07:13:51",
+				io: "1.2M/s",
+				thr: 44
+			},
+			{
+				pid: 2241,
+				name: "docker-desktop",
+				cpu: 8.9,
+				memp: 6.3,
+				mem: "2.01G",
+				status: "Running",
+				time: "11:08:04",
+				io: "9.4M/s",
+				thr: 61
+			},
+			{
+				pid: 1542,
+				name: "redis-server *:6379",
+				cpu: 6.7,
+				memp: .9,
+				mem: "289M",
+				status: "Sleep",
+				time: "02:51:17",
+				io: "642K/s",
+				thr: 8
+			},
+			{
+				pid: 612,
+				name: "tailscaled --tun=userspace-networking",
+				cpu: 5.4,
+				memp: .4,
+				mem: "132M",
+				status: "Sleep",
+				time: "05:44:22",
+				io: "218K/s",
+				thr: 19
+			},
+			{
+				pid: 33210,
+				name: "bun test --watch",
+				cpu: 4.2,
+				memp: 1.1,
+				mem: "356M",
+				status: "Running",
+				time: "00:06:38",
+				io: "4.6M/s",
+				thr: 12
+			},
+			{
+				pid: 1804,
+				name: "nginx: worker process",
+				cpu: 3.7,
+				memp: .2,
+				mem: "72M",
+				status: "Sleep",
+				time: "03:17:09",
+				io: "118K/s",
+				thr: 5
+			},
+			{
+				pid: 2877,
+				name: "Chrome Helper (GPU)",
+				cpu: 3.2,
+				memp: 2.7,
+				mem: "864M",
+				status: "Sleep",
+				time: "06:29:33",
+				io: "2.3M/s",
+				thr: 23
+			},
+			{
+				pid: 451,
+				name: "kernel_task",
+				cpu: 2.8,
+				memp: .1,
+				mem: "42M",
+				status: "Running",
+				time: "22:54:48",
+				io: "0",
+				thr: 179
+			},
+			{
+				pid: 1942,
+				name: "syncthing serve --no-browser",
+				cpu: 2.1,
+				memp: .8,
+				mem: "258M",
+				status: "Sleep",
+				time: "14:05:14",
+				io: "884K/s",
+				thr: 16
+			},
+			{
+				pid: 7621,
+				name: "python scripts/indexer.py --incremental",
+				cpu: 1.9,
+				memp: 1.9,
+				mem: "604M",
+				status: "I/O wait",
+				time: "00:43:58",
+				io: "14M/s",
+				thr: 9
+			},
+			{
+				pid: 266,
+				name: "systemd-journald",
+				cpu: 1.2,
+				memp: .1,
+				mem: "38M",
+				status: "Sleep",
+				time: "09:12:44",
+				io: "96K/s",
+				thr: 3
+			},
+			{
+				pid: 74,
+				name: "zsh - bun gen-mockup.ts",
+				cpu: .2,
+				memp: 0,
+				mem: "6M",
+				status: "Running",
+				time: "00:00:03",
+				io: "0",
+				thr: 1
+			}
+		]
+	};
+}
+function tickState(prev) {
+	const cores = prev.cores.map((core) => {
+		const pct = Math.max(0, Math.min(100, Math.round(jitter(core.pct, 10))));
+		return {
+			...core,
+			pct
+		};
+	});
+	const totalCpu = Math.round(jitter(prev.totalCpu, 8));
+	const cpuHistory = pushHistory(prev.cpuHistory, Math.max(0, Math.min(7, Math.round(totalCpu / 14))), 36);
+	const ramPct = Math.round(prev.memory.ramUsed / prev.memory.ramTotal * 100);
+	const memHistory = pushHistory(prev.memory.history, Math.max(0, Math.min(7, Math.round(ramPct / 14))), 24);
+	const memory = {
+		...prev.memory,
+		history: memHistory
+	};
+	const dlVal = Math.max(0, Math.min(7, Math.round(jitter(5, 4))));
+	const ulVal = Math.max(0, Math.min(7, Math.round(jitter(2, 3))));
+	const dlHistory = pushHistory(prev.network.dlHistory, dlVal, 24);
+	const ulHistory = pushHistory(prev.network.ulHistory, ulVal, 24);
+	const network = {
+		...prev.network,
+		dlHistory,
+		ulHistory
+	};
+	const processes = prev.processes.map((p) => ({
+		...p,
+		cpu: Math.max(0, Number(jitter(p.cpu, 4).toFixed(1)))
+	}));
+	return {
+		...prev,
+		cores,
+		totalCpu,
+		cpuHistory,
+		memory,
+		network,
+		processes
+	};
+}
+function Sep() {
+	return /* @__PURE__ */ jsx(Muted, { children: "┄".repeat(50) });
+}
+function LR({ children }) {
+	return /* @__PURE__ */ jsx(Box, {
+		justifyContent: "space-between",
+		wrap: "truncate",
+		children
+	});
+}
+/** Label-value pair: `Label value` with muted label */
+function LV({ label, value, color }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 1,
+		children: [/* @__PURE__ */ jsx(Muted, { children: label }), /* @__PURE__ */ jsx(Text, {
+			color,
+			children: `${value}`
+		})]
+	});
+}
+function CpuSummary({ state }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+		gap: 1,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(Muted, { children: "Total" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(state.totalCpu),
+				children: `${state.totalCpu}%`
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(state.totalCpu),
+				children: miniBar(state.totalCpu, 24)
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(LV, {
+				label: "Load",
+				value: `${state.load[0].toFixed(2)} ${state.load[1].toFixed(2)} ${state.load[2].toFixed(2)}`
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Temp",
+				value: `${state.avgTemp}\u00B0C`,
+				color: heatColor(state.avgTemp)
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Tasks",
+				value: state.tasks
+			})
+		]
+	})] }), /* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(LV, {
+				label: "User",
+				value: `${state.userCpu}%`,
+				color: severityColor(state.userCpu)
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Sys",
+				value: `${state.sysCpu}%`,
+				color: severityColor(state.sysCpu)
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Wait",
+				value: `${state.waitCpu}%`,
+				color: severityColor(state.waitCpu)
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(LV, {
+				label: "Avg",
+				value: `${state.avgFreq}GHz`
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Ctx/s",
+				value: state.ctxPerSec
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Uptime",
+				value: state.uptime
+			})
+		]
+	})] })] });
+}
+function CpuCore({ core }) {
+	return /* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+		gap: 1,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(Muted, { children: core.label }),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(core.pct),
+				children: `${core.pct}%`.padStart(4)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(core.pct),
+				children: miniBar(core.pct, 24)
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: `${core.freq}GHz` })
+		]
+	}), /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			gap: 1,
+			children: [/* @__PURE__ */ jsx(Muted, { children: "temp" }), /* @__PURE__ */ jsx(Text, {
+				color: heatColor(core.temp),
+				children: `${core.temp}\u00B0C`
+			})]
+		}), /* @__PURE__ */ jsx(Text, {
+			color: severityColor(core.pct),
+			children: core.mode
+		})]
+	})] });
+}
+function CpuFooter({ state }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+		gap: 1,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(Muted, { children: "Pkg" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(state.pkgPct),
+				children: `${state.pkgPct}%`
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(state.pkgPct),
+				children: miniBar(state.pkgPct, 24)
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(LV, {
+				label: "Power",
+				value: `${state.power}W`
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Fan",
+				value: `${state.fan}RPM`
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "Boost",
+				value: "on",
+				color: "$success"
+			})
+		]
+	})] }), /* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+		gap: 1,
+		wrap: "truncate",
+		children: [/* @__PURE__ */ jsx(Muted, { children: "History" }), /* @__PURE__ */ jsx(Text, {
+			color: "$primary",
+			children: sparkline(state.cpuHistory)
+		})]
+	}), /* @__PURE__ */ jsx(Muted, { children: "60s" })] })] });
+}
+function CpuPanel({ state }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(CpuSummary, { state }),
+			/* @__PURE__ */ jsx(Sep, {}),
+			state.cores.map((core) => /* @__PURE__ */ jsx(CpuCore, { core }, core.label)),
+			/* @__PURE__ */ jsx(Sep, {}),
+			/* @__PURE__ */ jsx(CpuFooter, { state })
+		]
+	});
+}
+function MemoryPanel({ memory }) {
+	const ramPct = Math.round(memory.ramUsed / memory.ramTotal * 100);
+	const swapPct = Math.round(memory.swapUsed / memory.swapTotal * 100);
+	const avail = (memory.ramTotal - memory.ramUsed).toFixed(1);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				wrap: "truncate",
+				children: [
+					/* @__PURE__ */ jsx(Muted, { children: "RAM " }),
+					/* @__PURE__ */ jsx(Text, { children: `${memory.ramUsed.toFixed(1)} / ${memory.ramTotal.toFixed(1)} GiB ` }),
+					/* @__PURE__ */ jsx(Text, {
+						color: severityColor(ramPct),
+						children: `${ramPct}% `
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: severityColor(ramPct),
+						children: miniBar(ramPct, 12)
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "avail" }), /* @__PURE__ */ jsx(Text, { children: `${avail}G` })]
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Used",
+					value: `${memory.ramUsed.toFixed(1)}G`
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Cache",
+					value: `${memory.cached.toFixed(1)}G`
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Free",
+					value: `${memory.free.toFixed(1)}G`
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Slab",
+					value: `${memory.slab.toFixed(1)}G`
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				wrap: "truncate",
+				children: [
+					/* @__PURE__ */ jsx(Muted, { children: "Swap " }),
+					/* @__PURE__ */ jsx(Text, { children: `${memory.swapUsed.toFixed(1)} / ${memory.swapTotal.toFixed(1)} GiB ` }),
+					/* @__PURE__ */ jsx(Text, {
+						color: severityColor(swapPct),
+						children: `${swapPct}% `
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: severityColor(swapPct),
+						children: miniBar(swapPct, 12)
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "zram" }), /* @__PURE__ */ jsx(Text, { children: "off" })]
+			})] }),
+			/* @__PURE__ */ jsx(Sep, {}),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Apps",
+					value: `${memory.apps.toFixed(1)}G`
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Wired",
+					value: `${memory.wired.toFixed(1)}G`
+				})]
+			}), /* @__PURE__ */ jsx(LV, {
+				label: "Buffers",
+				value: "612M"
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Dirty",
+					value: "212M"
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Shared",
+					value: `${memory.shared.toFixed(1)}G`
+				})]
+			}), /* @__PURE__ */ jsx(LV, {
+				label: "Reclaim",
+				value: `${memory.reclaim.toFixed(1)}G`
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "Trend" }), /* @__PURE__ */ jsx(Text, {
+					color: "$primary",
+					children: sparkline(memory.history)
+				})]
+			}), /* @__PURE__ */ jsx(Muted, { children: "30m" })] })
+		]
+	});
+}
+function NetworkPanel({ network }) {
+	const dlPct = Math.round(network.dlRate / 630 * 100);
+	const ulPct = Math.round(network.ulRate / 400 * 100);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				wrap: "truncate",
+				children: [
+					/* @__PURE__ */ jsx(Muted, { children: "DL " }),
+					/* @__PURE__ */ jsx(Text, { children: `${network.dlRate} Mb/s ` }),
+					/* @__PURE__ */ jsx(Text, {
+						color: severityColor(dlPct),
+						children: `${dlPct}% `
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: severityColor(dlPct),
+						children: miniBar(dlPct, 12)
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "peak" }), /* @__PURE__ */ jsx(Text, { children: `${network.dlPeak}` })]
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				wrap: "truncate",
+				children: [
+					/* @__PURE__ */ jsx(Muted, { children: "UL " }),
+					/* @__PURE__ */ jsx(Text, {
+						color: "$info",
+						children: `${network.ulRate} Mb/s `
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: "$info",
+						children: `${ulPct}% `
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: "$info",
+						children: miniBar(ulPct, 12)
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "peak" }), /* @__PURE__ */ jsx(Text, { children: `${network.ulPeak}` })]
+			})] }),
+			/* @__PURE__ */ jsx(Sep, {}),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Conn",
+					value: `${network.connEst} est`
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Listen",
+					value: network.listen
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "SYN",
+					value: network.syn
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Drops",
+					value: network.drops
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Rx",
+					value: network.rxPps
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "Tx",
+					value: network.txPps
+				})]
+			}), /* @__PURE__ */ jsxs(Box, {
+				gap: 2,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(LV, {
+					label: "Retrans",
+					value: network.retrans
+				}), /* @__PURE__ */ jsx(LV, {
+					label: "RTT",
+					value: network.rtt
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "DL" }), /* @__PURE__ */ jsx(Text, {
+					color: "$primary",
+					children: sparkline(network.dlHistory)
+				})]
+			}), /* @__PURE__ */ jsx(Muted, { children: "60s" })] }),
+			/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				wrap: "truncate",
+				children: [/* @__PURE__ */ jsx(Muted, { children: "UL" }), /* @__PURE__ */ jsx(Text, {
+					color: "$info",
+					children: sparkline(network.ulHistory)
+				})]
+			}), /* @__PURE__ */ jsx(Muted, { children: "60s" })] })
+		]
+	});
+}
+const COL = {
+	pid: 6,
+	name: 62,
+	cpu: 6,
+	memp: 6,
+	mem: 9,
+	status: 10,
+	time: 10,
+	io: 11,
+	thr: 5
+};
+function statusColor(status) {
+	switch (status) {
+		case "Running": return "$success";
+		case "I/O wait": return "$warning";
+		default: return "$muted";
+	}
+}
+function ProcessHeader() {
+	return /* @__PURE__ */ jsxs(Box, {
+		wrap: "clip",
+		children: [
+			/* @__PURE__ */ jsx(Muted, { children: `${"PID".padStart(COL.pid)} ` }),
+			/* @__PURE__ */ jsx(Muted, { children: `${"NAME".padEnd(COL.name)} ` }),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: "$primary",
+				children: `${"CPU%↓".padStart(COL.cpu)} `
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: `${"MEM%".padStart(COL.memp)} ` }),
+			/* @__PURE__ */ jsx(Muted, { children: `${"MEM".padStart(COL.mem)} ` }),
+			/* @__PURE__ */ jsx(Muted, { children: `${"STATUS".padEnd(COL.status)} ` }),
+			/* @__PURE__ */ jsx(Muted, { children: `${"TIME".padStart(COL.time)} ` }),
+			/* @__PURE__ */ jsx(Muted, { children: `${"IO".padStart(COL.io)} ` }),
+			/* @__PURE__ */ jsx(Muted, { children: `${"THR".padStart(COL.thr)}` })
+		]
+	});
+}
+function ProcessRow({ proc, isTop }) {
+	const cpuColor = severityColor(proc.cpu);
+	const ioColor = proc.io === "0" ? "$muted" : "$primary";
+	return /* @__PURE__ */ jsxs(Box, {
+		wrap: "clip",
+		children: [
+			/* @__PURE__ */ jsx(Text, { children: `${String(proc.pid).padStart(COL.pid)} ` }),
+			/* @__PURE__ */ jsx(Text, {
+				bold: isTop,
+				children: `${proc.name.padEnd(COL.name).slice(0, COL.name)} `
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: isTop,
+				color: cpuColor,
+				children: `${proc.cpu.toFixed(1).padStart(5)}% `
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: severityColor(proc.memp * 10),
+				children: `${proc.memp.toFixed(1).padStart(5)}% `
+			}),
+			/* @__PURE__ */ jsx(Text, { children: `${proc.mem.padStart(COL.mem)} ` }),
+			/* @__PURE__ */ jsx(Text, {
+				color: statusColor(proc.status),
+				children: `${proc.status.padEnd(COL.status)} `
+			}),
+			/* @__PURE__ */ jsx(Text, { children: `${proc.time.padStart(COL.time)} ` }),
+			/* @__PURE__ */ jsx(Text, {
+				color: ioColor,
+				children: `${proc.io.padStart(COL.io)} `
+			}),
+			/* @__PURE__ */ jsx(Text, { children: `${String(proc.thr).padStart(COL.thr)}` })
+		]
+	});
+}
+function ProcessFooter({ processes, state }) {
+	const running = processes.filter((p) => p.status === "Running").length;
+	const iowait = processes.filter((p) => p.status === "I/O wait").length;
+	const sleeping = 184 - running - iowait;
+	const ramPct = Math.round(state.memory.ramUsed / state.memory.ramTotal * 100);
+	return /* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(Muted, { children: "184 processes" }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$success",
+				children: `${running} running`
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: `${sleeping} sleeping` }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$warning",
+				children: `${iowait} iowait`
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		wrap: "truncate",
+		children: [
+			/* @__PURE__ */ jsx(LV, {
+				label: "Threads",
+				value: "1,942"
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "CPU",
+				value: `${state.totalCpu}%`,
+				color: severityColor(state.totalCpu)
+			}),
+			/* @__PURE__ */ jsx(LV, {
+				label: "MEM",
+				value: `${ramPct}%`,
+				color: severityColor(ramPct)
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$primary",
+				children: `428\u2193`
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$info",
+				children: `86\u2191`
+			})
+		]
+	})] });
+}
+function ProcessPanel({ state }) {
+	const sorted = [...state.processes].sort((a, b) => b.cpu - a.cpu);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(ProcessHeader, {}),
+			/* @__PURE__ */ jsx(Sep, {}),
+			sorted.map((proc, i) => /* @__PURE__ */ jsx(ProcessRow, {
+				proc,
+				isTop: i === 0
+			}, proc.pid)),
+			/* @__PURE__ */ jsx(Sep, {}),
+			/* @__PURE__ */ jsx(ProcessFooter, {
+				processes: state.processes,
+				state
+			})
+		]
+	});
+}
+/** Panel with titled first row inside standard border */
+function Panel({ title, subtitle, children, flexGrow, flexBasis }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		borderStyle: "round",
+		borderColor: "$primary",
+		paddingX: 1,
+		flexDirection: "column",
+		flexGrow,
+		flexBasis,
+		children: [/* @__PURE__ */ jsxs(LR, { children: [/* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: "$primary",
+			children: ` ${title} `
+		}), subtitle && /* @__PURE__ */ jsx(Muted, { children: ` ${subtitle} ` })] }), children]
+	});
+}
+function WideLayout({ state }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexDirection: "row",
+			gap: 1,
+			children: [/* @__PURE__ */ jsx(Panel, {
+				title: "CPU / Compute",
+				subtitle: "10 logical",
+				flexGrow: 3,
+				flexBasis: 0,
+				children: /* @__PURE__ */ jsx(CpuPanel, { state })
+			}), /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				flexGrow: 2,
+				flexBasis: 0,
+				children: [/* @__PURE__ */ jsx(Panel, {
+					title: "Memory",
+					subtitle: `${state.memory.ramTotal.toFixed(0)} GiB`,
+					children: /* @__PURE__ */ jsx(MemoryPanel, { memory: state.memory })
+				}), /* @__PURE__ */ jsx(Panel, {
+					title: "Network",
+					subtitle: "en0 • wifi6",
+					children: /* @__PURE__ */ jsx(NetworkPanel, { network: state.network })
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Panel, {
+			title: "Processes",
+			subtitle: "sorted by CPU%",
+			children: /* @__PURE__ */ jsx(ProcessPanel, { state })
+		})]
+	});
+}
+function NarrowLayout({ state }) {
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: "cpu",
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					justifyContent: "space-between",
+					paddingX: 1,
+					children: /* @__PURE__ */ jsxs(TabList, { children: [
+						/* @__PURE__ */ jsx(Tab, {
+							value: "cpu",
+							children: "CPU"
+						}),
+						/* @__PURE__ */ jsx(Tab, {
+							value: "memory",
+							children: "Memory"
+						}),
+						/* @__PURE__ */ jsx(Tab, {
+							value: "network",
+							children: "Network"
+						}),
+						/* @__PURE__ */ jsx(Tab, {
+							value: "processes",
+							children: "Processes"
+						})
+					] })
+				}),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "cpu",
+					children: /* @__PURE__ */ jsx(Panel, {
+						title: "CPU / Compute",
+						subtitle: "10 logical",
+						children: /* @__PURE__ */ jsx(CpuPanel, { state })
+					})
+				}),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "memory",
+					children: /* @__PURE__ */ jsx(Panel, {
+						title: "Memory",
+						subtitle: `${state.memory.ramTotal.toFixed(0)} GiB`,
+						children: /* @__PURE__ */ jsx(MemoryPanel, { memory: state.memory })
+					})
+				}),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "network",
+					children: /* @__PURE__ */ jsx(Panel, {
+						title: "Network",
+						subtitle: "en0 • wifi6",
+						children: /* @__PURE__ */ jsx(NetworkPanel, { network: state.network })
+					})
+				}),
+				/* @__PURE__ */ jsx(TabPanel, {
+					value: "processes",
+					children: /* @__PURE__ */ jsx(Panel, {
+						title: "Processes",
+						subtitle: "sorted by CPU%",
+						children: /* @__PURE__ */ jsx(ProcessPanel, { state })
+					})
+				})
+			]
+		})
+	});
+}
+function Dashboard({ static: isStatic } = {}) {
+	const { exit } = useApp();
+	const { width } = useBoxRect();
+	const [state, setState] = useState(createInitialState);
+	const isNarrow = width > 0 && width < 130;
+	useInterval(() => setState((prev) => tickState(prev)), 500, !isStatic);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+	});
+	if (isNarrow) return /* @__PURE__ */ jsx(NarrowLayout, { state });
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			wrap: "truncate",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					color: "$primary",
+					children: "Silvery TUI"
+				}),
+				/* @__PURE__ */ jsx(Muted, { children: " system monitor showcase " }),
+				/* @__PURE__ */ jsx(Text, {
+					color: "$primary",
+					children: "devbox-01"
+				}),
+				/* @__PURE__ */ jsx(Muted, { children: "┄".repeat(19) }),
+				/* @__PURE__ */ jsx(Muted, { children: "14:27 UTC [h]help [1]cpu [2]mem [3]net [p]proc [/]filter [q]quit" })
+			]
+		}), /* @__PURE__ */ jsx(WideLayout, { state })]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "h/l tabs  Esc/q quit",
+			children: /* @__PURE__ */ jsx(Dashboard, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { Dashboard, main, meta };