@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/terminal.mjs

@@ -0,0 +1,871 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Box, H2, Kbd, KittyFlags, Muted, Small, Tab, TabList, TabPanel, Tabs, Text, copyToClipboard, createTerm, detectKittyFromStdio, disableFocusReporting, disableKittyKeyboard, disableMouse, enableFocusReporting, enableKittyKeyboard, enableMouse, isMouseSequence, parseClipboardResponse, parseFocusEvent, parseKeypress, parseMouseSequence, render, requestClipboard, useApp, useInput, useStdout } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/terminal.tsx
+/**
+* Terminal Kitchensink
+*
+* A tabbed demo showcasing terminal interaction capabilities:
+* keyboard events, mouse tracking, clipboard (OSC 52), and
+* terminal focus detection.
+*
+* Features:
+* - Key event tester with color-coded modifier badges
+* - Mouse position tracking, button state, scroll events
+* - OSC 52 clipboard copy/paste
+* - Terminal focus/blur tracking with event log
+* - Kitty keyboard protocol auto-detection
+*
+* Run: bun vendor/silvery/examples/apps/terminal.tsx
+*/
+const meta = {
+	name: "Terminal",
+	description: "Keyboard, mouse, clipboard, focus, and terminal capabilities",
+	demo: true,
+	features: [
+		"useInput",
+		"useMouse",
+		"clipboard",
+		"focus",
+		"Kitty protocol"
+	]
+};
+const MODIFIER_DEFS = [
+	{
+		symbol: "⌃",
+		label: "Ctrl",
+		color: "$color1"
+	},
+	{
+		symbol: "⇧",
+		label: "Shift",
+		color: "$color3"
+	},
+	{
+		symbol: "⌥",
+		label: "Alt",
+		color: "$color4"
+	},
+	{
+		symbol: "⌘",
+		label: "Super",
+		color: "$color2"
+	},
+	{
+		symbol: "✦",
+		label: "Hyper",
+		color: "$color5"
+	}
+];
+function now() {
+	const d = /* @__PURE__ */ new Date();
+	return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}:${d.getSeconds().toString().padStart(2, "0")}`;
+}
+function KeysTab({ kittySupported }) {
+	const [events, setEvents] = useState([]);
+	const [latest, setLatest] = useState(null);
+	const counterRef = useRef(0);
+	const stdin = process.stdin;
+	useEffect(() => {
+		const onData = (data) => {
+			const raw = data.toString();
+			if (raw.startsWith("\x1B[<")) return;
+			if (raw.startsWith("\x1B[I") || raw.startsWith("\x1B[O")) return;
+			const parsed = parseKeypress(raw);
+			if (parsed.name === "escape") return;
+			if (raw === "q" && !parsed.ctrl && !parsed.meta) return;
+			if (parsed.name === "left" || parsed.name === "right") return;
+			if (raw === "h" || raw === "l") return;
+			counterRef.current++;
+			const key = {
+				upArrow: parsed.name === "up",
+				downArrow: parsed.name === "down",
+				leftArrow: parsed.name === "left",
+				rightArrow: parsed.name === "right",
+				pageDown: parsed.name === "pagedown",
+				pageUp: parsed.name === "pageup",
+				home: parsed.name === "home",
+				end: parsed.name === "end",
+				return: parsed.name === "return",
+				escape: parsed.name === "escape",
+				ctrl: parsed.ctrl,
+				shift: parsed.shift,
+				tab: parsed.name === "tab",
+				backspace: parsed.name === "backspace",
+				delete: parsed.name === "delete",
+				meta: parsed.meta || parsed.option,
+				super: parsed.super,
+				hyper: parsed.hyper,
+				capsLock: parsed.capsLock ?? false,
+				numLock: parsed.numLock ?? false,
+				eventType: parsed.eventType
+			};
+			const input = parsed.name.length === 1 ? parsed.name : "";
+			const event = {
+				index: counterRef.current,
+				input,
+				key,
+				parsed,
+				raw
+			};
+			setLatest(event);
+			setEvents((prev) => [...prev.slice(-11), event]);
+		};
+		stdin.on("data", onData);
+		return () => {
+			stdin.off("data", onData);
+		};
+	}, [stdin]);
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 3,
+		paddingX: 1,
+		paddingTop: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			width: 46,
+			children: [
+				/* @__PURE__ */ jsx(H2, { children: "Last Key Pressed" }),
+				/* @__PURE__ */ jsx(Box, { height: 1 }),
+				latest ? /* @__PURE__ */ jsx(KeyDetails, { event: latest }) : /* @__PURE__ */ jsx(KeyPlaceholder, { kittySupported })
+			]
+		}), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			flexGrow: 1,
+			children: [
+				/* @__PURE__ */ jsxs(H2, { children: [
+					"Event Log",
+					" ",
+					/* @__PURE__ */ jsxs(Small, { children: [
+						"(",
+						counterRef.current,
+						" ",
+						counterRef.current === 1 ? "event" : "events",
+						")"
+					] })
+				] }),
+				/* @__PURE__ */ jsx(Box, { height: 1 }),
+				events.length === 0 ? /* @__PURE__ */ jsx(Muted, { children: "Waiting for input..." }) : /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					overflow: "scroll",
+					scrollTo: events.length - 1,
+					children: events.map((e, i) => /* @__PURE__ */ jsxs(Text, {
+						dimColor: i < events.length - 1,
+						children: [
+							/* @__PURE__ */ jsxs(Text, {
+								color: "$muted",
+								children: ["#", String(e.index).padStart(3)]
+							}),
+							" ",
+							formatKeyEventSummary(e)
+						]
+					}, e.index))
+				})
+			]
+		})]
+	});
+}
+function KeyPlaceholder({ kittySupported }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, { children: "Try pressing some key combinations:" }),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(Text, { children: " Ctrl+A, Shift+Tab, Alt+Enter..." }),
+			kittySupported && /* @__PURE__ */ jsx(Text, { children: " Cmd+S, Hyper+X (Kitty-only)" }),
+			/* @__PURE__ */ jsx(Box, { height: 1 }),
+			/* @__PURE__ */ jsx(Muted, { children: "Each keypress shows its full breakdown here." })
+		]
+	});
+}
+function KeyDetails({ event }) {
+	const { parsed, raw } = event;
+	const modActive = [
+		parsed.ctrl,
+		parsed.shift,
+		parsed.meta || parsed.option,
+		parsed.super,
+		parsed.hyper
+	];
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsxs(Text, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					children: "Name:"
+				}),
+				" ",
+				/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					color: "$primary",
+					children: parsed.name || "(none)"
+				})
+			] }),
+			/* @__PURE__ */ jsxs(Text, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					children: "Input:"
+				}),
+				" ",
+				JSON.stringify(event.input)
+			] }),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				gap: 1,
+				children: MODIFIER_DEFS.map((mod, i) => /* @__PURE__ */ jsx(ModBadge, {
+					mod,
+					active: modActive[i]
+				}, mod.symbol))
+			}),
+			parsed.eventType && /* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsxs(Text, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "Event type:"
+					}),
+					" ",
+					/* @__PURE__ */ jsx(Text, {
+						color: "$accent",
+						children: parsed.eventType
+					})
+				] })
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				marginTop: 1,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						color: "$muted",
+						children: "Kitty Extensions"
+					}),
+					/* @__PURE__ */ jsx(KittyField, {
+						label: "shiftedKey",
+						value: parsed.shiftedKey
+					}),
+					/* @__PURE__ */ jsx(KittyField, {
+						label: "baseLayoutKey",
+						value: parsed.baseLayoutKey
+					}),
+					/* @__PURE__ */ jsx(KittyField, {
+						label: "associatedText",
+						value: parsed.associatedText
+					}),
+					/* @__PURE__ */ jsx(KittyField, {
+						label: "capsLock",
+						value: parsed.capsLock
+					}),
+					/* @__PURE__ */ jsx(KittyField, {
+						label: "numLock",
+						value: parsed.numLock
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsxs(Text, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "Raw:"
+					}),
+					" ",
+					/* @__PURE__ */ jsx(Muted, { children: [...raw].map((c) => c.charCodeAt(0) < 32 || c.charCodeAt(0) === 127 ? `\\x${c.charCodeAt(0).toString(16).padStart(2, "0")}` : c).join("") })
+				] })
+			})
+		]
+	});
+}
+function ModBadge({ mod, active }) {
+	if (active) return /* @__PURE__ */ jsx(Text, {
+		backgroundColor: mod.color,
+		color: "$inversebg",
+		bold: true,
+		children: ` ${mod.symbol} ${mod.label} `
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		color: "$muted",
+		children: `  ${mod.symbol}  `
+	});
+}
+function KittyField({ label, value }) {
+	if (value === void 0) return /* @__PURE__ */ jsxs(Muted, { children: [
+		label,
+		": ",
+		"--"
+	] });
+	return /* @__PURE__ */ jsxs(Text, { children: [
+		label,
+		": ",
+		/* @__PURE__ */ jsx(Text, {
+			color: "$warning",
+			children: String(value)
+		})
+	] });
+}
+function formatKeyEventSummary(event) {
+	const parts = [];
+	const { parsed } = event;
+	if (parsed.ctrl) parts.push("⌃");
+	if (parsed.shift) parts.push("⇧");
+	if (parsed.meta || parsed.option) parts.push("⌥");
+	if (parsed.super) parts.push("⌘");
+	if (parsed.hyper) parts.push("✦");
+	parts.push(parsed.name || JSON.stringify(event.input));
+	if (parsed.eventType) parts.push(` (${parsed.eventType})`);
+	return parts.join("");
+}
+function MouseTab() {
+	const [mousePos, setMousePos] = useState(null);
+	const [events, setEvents] = useState([]);
+	const [clicks, setClicks] = useState({
+		left: 0,
+		middle: 0,
+		right: 0
+	});
+	const [scrollTotal, setScrollTotal] = useState(0);
+	const counterRef = useRef(0);
+	const stdin = process.stdin;
+	useEffect(() => {
+		const onData = (data) => {
+			const raw = data.toString();
+			if (!isMouseSequence(raw)) return;
+			const parsed = parseMouseSequence(raw);
+			if (!parsed) return;
+			setMousePos({
+				x: parsed.x,
+				y: parsed.y
+			});
+			const mods = [];
+			if (parsed.ctrl) mods.push("Ctrl");
+			if (parsed.shift) mods.push("Shift");
+			if (parsed.meta) mods.push("Alt");
+			const modStr = mods.join("+");
+			if (parsed.action === "down") {
+				const btn = [
+					"Left",
+					"Middle",
+					"Right"
+				][parsed.button] ?? `Btn${parsed.button}`;
+				counterRef.current++;
+				setEvents((prev) => [...prev.slice(-11), {
+					index: counterRef.current,
+					action: "click",
+					button: btn,
+					x: parsed.x,
+					y: parsed.y,
+					mods: modStr,
+					timestamp: now()
+				}]);
+				if (parsed.button === 0) setClicks((c) => ({
+					...c,
+					left: c.left + 1
+				}));
+				else if (parsed.button === 1) setClicks((c) => ({
+					...c,
+					middle: c.middle + 1
+				}));
+				else if (parsed.button === 2) setClicks((c) => ({
+					...c,
+					right: c.right + 1
+				}));
+			} else if (parsed.action === "wheel") {
+				counterRef.current++;
+				const dir = parsed.delta < 0 ? "up" : "down";
+				setEvents((prev) => [...prev.slice(-11), {
+					index: counterRef.current,
+					action: `scroll ${dir}`,
+					button: "wheel",
+					x: parsed.x,
+					y: parsed.y,
+					mods: modStr,
+					timestamp: now()
+				}]);
+				setScrollTotal((s) => s + 1);
+			} else if (parsed.action === "move") {}
+		};
+		stdin.on("data", onData);
+		return () => {
+			stdin.off("data", onData);
+		};
+	}, [stdin]);
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 3,
+		paddingX: 1,
+		paddingTop: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			width: 36,
+			children: [
+				/* @__PURE__ */ jsx(H2, { children: "Position" }),
+				/* @__PURE__ */ jsx(Box, {
+					marginTop: 1,
+					children: mousePos ? /* @__PURE__ */ jsxs(Box, {
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsxs(Text, { children: [
+							/* @__PURE__ */ jsx(Text, {
+								bold: true,
+								children: "X:"
+							}),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: "$primary",
+								bold: true,
+								children: String(mousePos.x).padStart(4)
+							})
+						] }), /* @__PURE__ */ jsxs(Text, { children: [
+							/* @__PURE__ */ jsx(Text, {
+								bold: true,
+								children: "Y:"
+							}),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: "$primary",
+								bold: true,
+								children: String(mousePos.y).padStart(4)
+							})
+						] })]
+					}) : /* @__PURE__ */ jsx(Muted, { children: "Move mouse to track position" })
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					marginTop: 1,
+					flexDirection: "column",
+					children: [/* @__PURE__ */ jsx(H2, { children: "Click Counts" }), /* @__PURE__ */ jsxs(Box, {
+						marginTop: 1,
+						flexDirection: "column",
+						children: [
+							/* @__PURE__ */ jsxs(Text, { children: [
+								/* @__PURE__ */ jsx(Text, {
+									bold: true,
+									children: "Left:"
+								}),
+								" ",
+								/* @__PURE__ */ jsx(Text, {
+									color: "$info",
+									children: clicks.left
+								})
+							] }),
+							/* @__PURE__ */ jsxs(Text, { children: [
+								/* @__PURE__ */ jsx(Text, {
+									bold: true,
+									children: "Middle:"
+								}),
+								" ",
+								/* @__PURE__ */ jsx(Text, {
+									color: "$info",
+									children: clicks.middle
+								})
+							] }),
+							/* @__PURE__ */ jsxs(Text, { children: [
+								/* @__PURE__ */ jsx(Text, {
+									bold: true,
+									children: "Right:"
+								}),
+								" ",
+								/* @__PURE__ */ jsx(Text, {
+									color: "$info",
+									children: clicks.right
+								})
+							] }),
+							/* @__PURE__ */ jsxs(Text, { children: [
+								/* @__PURE__ */ jsx(Text, {
+									bold: true,
+									children: "Scroll:"
+								}),
+								" ",
+								/* @__PURE__ */ jsx(Text, {
+									color: "$info",
+									children: scrollTotal
+								})
+							] })
+						]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			flexGrow: 1,
+			children: [
+				/* @__PURE__ */ jsxs(H2, { children: ["Mouse Events ", /* @__PURE__ */ jsxs(Small, { children: [
+					"(",
+					counterRef.current,
+					")"
+				] })] }),
+				/* @__PURE__ */ jsx(Box, { height: 1 }),
+				events.length === 0 ? /* @__PURE__ */ jsx(Muted, { children: "Click or scroll to see events..." }) : /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					overflow: "scroll",
+					scrollTo: events.length - 1,
+					children: events.map((e, i) => /* @__PURE__ */ jsxs(Text, {
+						dimColor: i < events.length - 1,
+						children: [
+							/* @__PURE__ */ jsx(Small, { children: e.timestamp }),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: e.action.startsWith("scroll") ? "$accent" : "$primary",
+								bold: true,
+								children: e.action
+							}),
+							" ",
+							e.button !== "wheel" && /* @__PURE__ */ jsxs(Text, { children: [e.button, " "] }),
+							/* @__PURE__ */ jsxs(Muted, { children: [
+								"(",
+								e.x,
+								",",
+								e.y,
+								")"
+							] }),
+							e.mods ? /* @__PURE__ */ jsxs(Text, {
+								color: "$warning",
+								children: [" +", e.mods]
+							}) : null
+						]
+					}, e.index))
+				})
+			]
+		})]
+	});
+}
+function ClipboardTab() {
+	const { stdout } = useStdout();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [lastCopied, setLastCopied] = useState(null);
+	const [lastPasted, setLastPasted] = useState(null);
+	const [history, setHistory] = useState([]);
+	const snippets = [
+		"Hello, world!",
+		"The quick brown fox jumps over the lazy dog",
+		"OSC 52 clipboard protocol",
+		"npx silvery examples",
+		"console.log('silvery')",
+		"https://silvery.dev"
+	];
+	useInput((input, key) => {
+		if (key.upArrow || input === "k") setSelectedIndex((i) => Math.max(0, i - 1));
+		if (key.downArrow || input === "j") setSelectedIndex((i) => Math.min(snippets.length - 1, i + 1));
+		if (input === "c") {
+			const text = snippets[selectedIndex];
+			copyToClipboard(stdout, text);
+			setLastCopied(text);
+			setHistory((h) => [...h.slice(-7), {
+				action: "copy",
+				text,
+				time: now()
+			}]);
+		}
+		if (input === "v") {
+			requestClipboard(stdout);
+			setHistory((h) => [...h.slice(-7), {
+				action: "request",
+				text: "(paste requested)",
+				time: now()
+			}]);
+		}
+		const parsed = parseClipboardResponse(input);
+		if (parsed) {
+			setLastPasted(parsed);
+			setHistory((h) => [...h.slice(-7), {
+				action: "paste",
+				text: parsed,
+				time: now()
+			}]);
+		}
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		paddingTop: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsxs(H2, { children: [
+					"Snippets",
+					" ",
+					/* @__PURE__ */ jsxs(Small, { children: [
+						selectedIndex + 1,
+						"/",
+						snippets.length
+					] })
+				] }), /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					marginTop: 1,
+					overflow: "scroll",
+					scrollTo: selectedIndex,
+					children: snippets.map((text, i) => /* @__PURE__ */ jsx(Box, {
+						paddingX: 1,
+						children: /* @__PURE__ */ jsxs(Text, {
+							color: i === selectedIndex ? "$bg" : void 0,
+							backgroundColor: i === selectedIndex ? "$primary" : void 0,
+							bold: i === selectedIndex,
+							children: [i === selectedIndex ? " > " : "   ", text]
+						})
+					}, i))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				gap: 4,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					children: [/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "Last Copied:"
+					}), lastCopied ? /* @__PURE__ */ jsxs(Text, {
+						color: "$success",
+						children: ["✓ ", lastCopied]
+					}) : /* @__PURE__ */ jsx(Muted, { children: "nothing" })]
+				}), /* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					children: [/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "Last Pasted:"
+					}), lastPasted ? /* @__PURE__ */ jsx(Text, {
+						color: "$warning",
+						children: lastPasted
+					}) : /* @__PURE__ */ jsx(Muted, { children: "nothing" })]
+				})]
+			}),
+			history.length > 0 && /* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ jsx(H2, { children: "History" }), /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					overflow: "scroll",
+					scrollTo: history.length - 1,
+					children: history.map((h, i) => /* @__PURE__ */ jsxs(Text, {
+						dimColor: i < history.length - 1,
+						children: [
+							/* @__PURE__ */ jsx(Small, { children: h.time }),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: h.action === "copy" ? "$success" : h.action === "paste" ? "$warning" : "$muted",
+								bold: true,
+								children: h.action
+							}),
+							" ",
+							/* @__PURE__ */ jsx(Text, { children: h.text.length > 40 ? h.text.slice(0, 37) + "..." : h.text })
+						]
+					}, i))
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+				" navigate ",
+				/* @__PURE__ */ jsx(Kbd, { children: "c" }),
+				" copy ",
+				/* @__PURE__ */ jsx(Kbd, { children: "v" }),
+				" paste (OSC 52)"
+			] })
+		]
+	});
+}
+function FocusTab() {
+	const [focused, setFocused] = useState(true);
+	const [events, setEvents] = useState([]);
+	const counterRef = useRef(0);
+	const stdin = process.stdin;
+	useEffect(() => {
+		const onData = (data) => {
+			const focusEvt = parseFocusEvent(data.toString());
+			if (!focusEvt) return;
+			const isFocused = focusEvt.type === "focus-in";
+			setFocused(isFocused);
+			counterRef.current++;
+			setEvents((prev) => [...prev.slice(-14), {
+				index: counterRef.current,
+				focused: isFocused,
+				timestamp: now()
+			}]);
+		};
+		stdin.on("data", onData);
+		return () => {
+			stdin.off("data", onData);
+		};
+	}, [stdin]);
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 3,
+		paddingX: 1,
+		paddingTop: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			width: 36,
+			children: [
+				/* @__PURE__ */ jsx(H2, { children: "Terminal Focus" }),
+				/* @__PURE__ */ jsxs(Box, {
+					marginTop: 1,
+					flexDirection: "column",
+					alignItems: "center",
+					gap: 1,
+					children: [/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						color: focused ? "$success" : "$error",
+						children: focused ? "  FOCUSED  " : " UNFOCUSED "
+					}), /* @__PURE__ */ jsx(Text, {
+						color: focused ? "$success" : "$error",
+						children: focused ? "Terminal window is active" : "Terminal window lost focus"
+					})]
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					marginTop: 2,
+					flexDirection: "column",
+					children: /* @__PURE__ */ jsx(Muted, { children: "Switch to another window and back to see focus events. Uses CSI I/O terminal focus reporting protocol." })
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					marginTop: 1,
+					children: /* @__PURE__ */ jsxs(Text, { children: [
+						/* @__PURE__ */ jsx(Text, {
+							bold: true,
+							children: "Protocol:"
+						}),
+						" ",
+						/* @__PURE__ */ jsx(Text, {
+							color: "$info",
+							children: "CSI ?1004h (DECRPM focus events)"
+						})
+					] })
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			flexGrow: 1,
+			children: [
+				/* @__PURE__ */ jsxs(H2, { children: ["Focus Events ", /* @__PURE__ */ jsxs(Small, { children: [
+					"(",
+					counterRef.current,
+					")"
+				] })] }),
+				/* @__PURE__ */ jsx(Box, { height: 1 }),
+				events.length === 0 ? /* @__PURE__ */ jsx(Muted, { children: "Switch windows to generate focus events..." }) : /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					overflow: "scroll",
+					scrollTo: events.length - 1,
+					children: events.map((e, i) => /* @__PURE__ */ jsxs(Text, {
+						dimColor: i < events.length - 1,
+						children: [
+							/* @__PURE__ */ jsx(Small, { children: e.timestamp }),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: e.focused ? "$success" : "$error",
+								bold: true,
+								children: e.focused ? "focus-in " : "focus-out"
+							}),
+							" ",
+							/* @__PURE__ */ jsx(Text, {
+								color: e.focused ? "$success" : "$error",
+								children: e.focused ? "Terminal gained focus" : "Terminal lost focus"
+							})
+						]
+					}, e.index))
+				})
+			]
+		})]
+	});
+}
+function TerminalDemo({ kittySupported }) {
+	const { exit } = useApp();
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				gap: 2,
+				children: /* @__PURE__ */ jsxs(Text, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: "Kitty:"
+					}),
+					" ",
+					kittySupported ? /* @__PURE__ */ jsx(Text, {
+						color: "$success",
+						children: "enabled"
+					}) : /* @__PURE__ */ jsx(Text, {
+						color: "$warning",
+						children: "legacy mode"
+					})
+				] })
+			}),
+			/* @__PURE__ */ jsxs(Tabs, {
+				defaultValue: "keys",
+				children: [
+					/* @__PURE__ */ jsxs(TabList, { children: [
+						/* @__PURE__ */ jsx(Tab, {
+							value: "keys",
+							children: "Keys"
+						}),
+						/* @__PURE__ */ jsx(Tab, {
+							value: "mouse",
+							children: "Mouse"
+						}),
+						/* @__PURE__ */ jsx(Tab, {
+							value: "clipboard",
+							children: "Clipboard"
+						}),
+						/* @__PURE__ */ jsx(Tab, {
+							value: "focus",
+							children: "Focus"
+						})
+					] }),
+					/* @__PURE__ */ jsx(TabPanel, {
+						value: "keys",
+						children: /* @__PURE__ */ jsx(KeysTab, { kittySupported })
+					}),
+					/* @__PURE__ */ jsx(TabPanel, {
+						value: "mouse",
+						children: /* @__PURE__ */ jsx(MouseTab, {})
+					}),
+					/* @__PURE__ */ jsx(TabPanel, {
+						value: "clipboard",
+						children: /* @__PURE__ */ jsx(ClipboardTab, {})
+					}),
+					/* @__PURE__ */ jsx(TabPanel, {
+						value: "focus",
+						children: /* @__PURE__ */ jsx(FocusTab, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ jsxs(Muted, { children: [
+					/* @__PURE__ */ jsx(Kbd, { children: "h/l" }),
+					" switch tabs ",
+					/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+					" quit"
+				] })
+			})
+		]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const kittyResult = await detectKittyFromStdio(process.stdout, process.stdin);
+		if (kittyResult.supported) {
+			const flags = KittyFlags.DISAMBIGUATE | KittyFlags.REPORT_EVENTS | KittyFlags.REPORT_ALTERNATE | KittyFlags.REPORT_ALL_KEYS | KittyFlags.REPORT_TEXT;
+			process.stdout.write(enableKittyKeyboard(flags));
+		}
+		const term = _usingCtx$1.u(createTerm());
+		process.stdout.write(enableMouse());
+		enableFocusReporting((s) => process.stdout.write(s));
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "h/l tabs  Esc/q quit",
+			children: /* @__PURE__ */ jsx(TerminalDemo, { kittySupported: kittyResult.supported })
+		}), term);
+		await waitUntilExit();
+		process.stdout.write(disableMouse());
+		disableFocusReporting((s) => process.stdout.write(s));
+		if (kittyResult.supported) process.stdout.write(disableKittyKeyboard());
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { TerminalDemo, main, meta };