@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/dev-tools.mjs

@@ -0,0 +1,396 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { Box, Divider, ListView, Muted, Strong, Text, createTerm, render, useApp, useBoxRect, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/dev-tools.tsx
+/**
+* Dev Tools — Log Viewer Example
+*
+* A live log viewer demonstrating:
+* - ListView for efficient rendering of thousands of log entries
+* - Keyboard shortcuts to add log entries at different severity levels
+* - Color-coded severity levels (DEBUG, INFO, WARN, ERROR)
+* - j/k navigation through log history
+* - Auto-scroll to latest entry
+*
+* Usage: bun run examples/apps/dev-tools.tsx
+*
+* Controls:
+*   j/k or Up/Down  - Navigate through log entries
+*   g/G             - Jump to first/last entry
+*   d               - Add DEBUG entry
+*   i               - Add INFO entry
+*   w               - Add WARN entry
+*   e               - Add ERROR entry
+*   c               - Clear all logs
+*   q or Esc        - Quit
+*/
+const meta = {
+	name: "Dev Tools",
+	description: "Log viewer with severity levels, ListView, and keyboard-driven log injection",
+	features: [
+		"ListView",
+		"useInput()",
+		"useBoxRect()",
+		"keyboard navigation"
+	]
+};
+const SOURCES = [
+	"http",
+	"db",
+	"auth",
+	"cache",
+	"worker",
+	"api",
+	"scheduler",
+	"queue",
+	"metrics",
+	"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}}"
+	],
+	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)"
+	],
+	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"
+	],
+	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"
+	]
+};
+let nextLogId = 1;
+function seededRandom(seed) {
+	let s = seed;
+	return () => {
+		s = s * 1664525 + 1013904223 & 2147483647;
+		return s / 2147483647;
+	};
+}
+function generateMessage(level, rng) {
+	const templates = LOG_TEMPLATES[level];
+	return templates[Math.floor(rng() * templates.length)].replace(/\{\{id\}\}/g, () => String(Math.floor(rng() * 99999))).replace(/\{\{n\}\}/g, () => String(Math.floor(rng() * 999)));
+}
+function createLogEntry(level, rng) {
+	return {
+		id: nextLogId++,
+		timestamp: /* @__PURE__ */ new Date(),
+		level,
+		source: SOURCES[Math.floor(rng() * SOURCES.length)],
+		message: generateMessage(level, rng)
+	};
+}
+function generateInitialLogs(count) {
+	const rng = seededRandom(42);
+	const levels = [
+		"DEBUG",
+		"INFO",
+		"INFO",
+		"INFO",
+		"WARN",
+		"ERROR"
+	];
+	const entries = [];
+	const now = Date.now();
+	for (let i = 0; i < count; i++) {
+		const level = levels[Math.floor(rng() * levels.length)];
+		const entry = createLogEntry(level, rng);
+		entry.timestamp = /* @__PURE__ */ new Date(now - (count - i) * 1200);
+		entries.push(entry);
+	}
+	return entries;
+}
+const LEVEL_COLORS = {
+	DEBUG: "$muted",
+	INFO: "$primary",
+	WARN: "$warning",
+	ERROR: "$error"
+};
+const LEVEL_BADGES = {
+	DEBUG: "DBG",
+	INFO: "INF",
+	WARN: "WRN",
+	ERROR: "ERR"
+};
+function formatTime(date) {
+	return date.toLocaleTimeString("en-US", {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hour12: false
+	});
+}
+function LogRow({ entry, isSelected }) {
+	const badge = LEVEL_BADGES[entry.level];
+	const color = LEVEL_COLORS[entry.level];
+	if (isSelected) return /* @__PURE__ */ jsxs(Box, {
+		paddingX: 1,
+		backgroundColor: "$primary",
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$primary-fg",
+				children: [formatTime(entry.timestamp), " "]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$primary-fg",
+				bold: true,
+				children: badge
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$primary-fg",
+				children: [
+					" [",
+					entry.source.padEnd(9),
+					"] "
+				]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$primary-fg",
+				bold: true,
+				children: entry.message
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Muted, { children: [formatTime(entry.timestamp), " "] }),
+			/* @__PURE__ */ jsx(Strong, {
+				color,
+				children: badge
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" [",
+				entry.source.padEnd(9),
+				"] "
+			] }),
+			/* @__PURE__ */ jsx(Text, { children: entry.message })
+		]
+	});
+}
+function LevelCounts({ entries }) {
+	const counts = useMemo(() => {
+		const c = {
+			DEBUG: 0,
+			INFO: 0,
+			WARN: 0,
+			ERROR: 0
+		};
+		for (const e of entries) c[e.level]++;
+		return c;
+	}, [entries]);
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		children: [
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$muted",
+				children: [
+					LEVEL_BADGES.DEBUG,
+					":",
+					counts.DEBUG
+				]
+			}),
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$primary",
+				children: [
+					LEVEL_BADGES.INFO,
+					":",
+					counts.INFO
+				]
+			}),
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$warning",
+				children: [
+					LEVEL_BADGES.WARN,
+					":",
+					counts.WARN
+				]
+			}),
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$error",
+				children: [
+					LEVEL_BADGES.ERROR,
+					":",
+					counts.ERROR
+				]
+			})
+		]
+	});
+}
+/** Inner component that reads the flex container's height via useBoxRect */
+function LogListArea({ entries, cursor }) {
+	const { height } = useBoxRect();
+	return /* @__PURE__ */ jsx(ListView, {
+		items: entries,
+		height,
+		estimateHeight: 1,
+		scrollTo: cursor,
+		overscan: 5,
+		renderItem: (entry, index) => /* @__PURE__ */ jsx(LogRow, {
+			entry,
+			isSelected: index === cursor
+		}, entry.id)
+	});
+}
+const INITIAL_COUNT = 200;
+const rng = seededRandom(12345);
+function DevTools() {
+	const { exit } = useApp();
+	const [entries, setEntries] = useState(() => generateInitialLogs(INITIAL_COUNT));
+	const [cursor, setCursor] = useState(INITIAL_COUNT - 1);
+	const [autoScroll, setAutoScroll] = useState(true);
+	const addEntry = useCallback((level) => {
+		const entry = createLogEntry(level, rng);
+		setEntries((prev) => [...prev, entry]);
+		if (autoScroll) setCursor((prev) => prev + 1);
+	}, [autoScroll]);
+	useInput(useCallback((input, key) => {
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (input === "j" || key.downArrow) {
+			setCursor((c) => Math.min(entries.length - 1, c + 1));
+			setAutoScroll(false);
+			return;
+		}
+		if (input === "k" || key.upArrow) {
+			setCursor((c) => Math.max(0, c - 1));
+			setAutoScroll(false);
+			return;
+		}
+		if (input === "g" || key.home) {
+			setCursor(0);
+			setAutoScroll(false);
+			return;
+		}
+		if (input === "G" || key.end) {
+			setCursor(entries.length - 1);
+			setAutoScroll(true);
+			return;
+		}
+		if (input === "d") {
+			addEntry("DEBUG");
+			return;
+		}
+		if (input === "i") {
+			addEntry("INFO");
+			return;
+		}
+		if (input === "w") {
+			addEntry("WARN");
+			return;
+		}
+		if (input === "e") {
+			addEntry("ERROR");
+			return;
+		}
+		if (input === "c") {
+			setEntries([]);
+			setCursor(0);
+			setAutoScroll(true);
+			return;
+		}
+	}, [
+		entries.length,
+		exit,
+		addEntry
+	]));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				justifyContent: "space-between",
+				backgroundColor: "$surfacebg",
+				children: [/* @__PURE__ */ jsxs(Box, {
+					gap: 2,
+					children: [/* @__PURE__ */ jsxs(Text, {
+						bold: true,
+						color: "$primary",
+						children: ["▸", " Log Viewer"]
+					}), /* @__PURE__ */ jsx(LevelCounts, { entries })]
+				}), /* @__PURE__ */ jsxs(Box, {
+					gap: 1,
+					children: [
+						autoScroll && /* @__PURE__ */ jsx(Text, {
+							backgroundColor: "$success",
+							color: "$success-fg",
+							bold: true,
+							children: " LIVE "
+						}),
+						/* @__PURE__ */ jsx(Strong, {
+							color: "$primary",
+							children: cursor + 1
+						}),
+						/* @__PURE__ */ jsxs(Muted, { children: ["/ ", entries.length] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				paddingX: 1,
+				children: [
+					/* @__PURE__ */ jsxs(Muted, { children: ["Time     ", " "] }),
+					/* @__PURE__ */ jsxs(Muted, { children: ["Lvl", " "] }),
+					/* @__PURE__ */ jsxs(Muted, { children: ["[Source   ]", " "] }),
+					/* @__PURE__ */ jsx(Muted, { children: "Message" })
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ jsx(Divider, {})
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexGrow: 1,
+				flexDirection: "column",
+				children: /* @__PURE__ */ jsx(LogListArea, {
+					entries,
+					cursor
+				})
+			})
+		]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "j/k navigate  g/G start/end  d/i/w/e add log  c clear  Esc/q quit",
+			children: /* @__PURE__ */ jsx(DevTools, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { DevTools, main, meta };