@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/clipboard.mjs

@@ -0,0 +1,197 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useState } from "react";
+import { Box, H1, Kbd, Lead, Muted, Small, Text, copyToClipboard, createTerm, parseClipboardResponse, render, requestClipboard, useApp, useInput, useStdout } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/clipboard.tsx
+/**
+* OSC 52 Clipboard Demo
+*
+* Shows copy/paste across terminal sessions using the OSC 52 protocol.
+* Select items from a list, copy them to the system clipboard, and
+* request clipboard contents back — all without native clipboard access.
+*
+* Features:
+* - Navigate a list of items with j/k
+* - Press c to copy selected item via OSC 52
+* - Press v to request clipboard contents
+* - Status bar shows last copied/pasted text
+*
+* Run: bun vendor/silvery/examples/apps/clipboard.tsx
+*/
+const meta = {
+	name: "Clipboard (OSC 52)",
+	description: "Copy/paste via OSC 52 terminal protocol",
+	features: [
+		"copyToClipboard()",
+		"requestClipboard()",
+		"parseClipboardResponse()",
+		"useStdout"
+	]
+};
+const allItems = [
+	{
+		category: "Colors",
+		values: [
+			"Crimson",
+			"Cerulean",
+			"Chartreuse",
+			"Coral",
+			"Cobalt",
+			"Cyan"
+		]
+	},
+	{
+		category: "Languages",
+		values: [
+			"TypeScript",
+			"Rust",
+			"Elixir",
+			"Haskell",
+			"Zig",
+			"OCaml"
+		]
+	},
+	{
+		category: "Fruits",
+		values: [
+			"Mango",
+			"Passionfruit",
+			"Dragon fruit",
+			"Starfruit",
+			"Lychee",
+			"Rambutan"
+		]
+	}
+].flatMap((group) => group.values.map((value) => ({
+	category: group.category,
+	value
+})));
+function ListItem({ item, isSelected }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		paddingX: 1,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			color: isSelected ? "$bg" : void 0,
+			backgroundColor: isSelected ? "$primary" : void 0,
+			bold: isSelected,
+			children: [isSelected ? " > " : "   ", item.value]
+		}), /* @__PURE__ */ jsxs(Small, { children: [
+			" (",
+			item.category,
+			")"
+		] })]
+	});
+}
+function StatusBar({ lastCopied, lastPasted }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$border",
+		paddingX: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			gap: 1,
+			children: [/* @__PURE__ */ jsx(Muted, { children: "Copied:" }), lastCopied ? /* @__PURE__ */ jsx(Text, {
+				color: "$success",
+				children: lastCopied
+			}) : /* @__PURE__ */ jsx(Lead, { children: "nothing yet" })]
+		}), /* @__PURE__ */ jsxs(Box, {
+			gap: 1,
+			children: [/* @__PURE__ */ jsx(Muted, { children: "Pasted:" }), lastPasted ? /* @__PURE__ */ jsx(Text, {
+				color: "$warning",
+				children: lastPasted
+			}) : /* @__PURE__ */ jsx(Lead, { children: "nothing yet" })]
+		})]
+	});
+}
+function ClipboardDemo() {
+	const { exit } = useApp();
+	const { stdout } = useStdout();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [lastCopied, setLastCopied] = useState(null);
+	const [lastPasted, setLastPasted] = useState(null);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (key.upArrow || input === "k") setSelectedIndex((prev) => Math.max(0, prev - 1));
+		if (key.downArrow || input === "j") setSelectedIndex((prev) => Math.min(allItems.length - 1, prev + 1));
+		if (input === "c") {
+			const text = allItems[selectedIndex].value;
+			copyToClipboard(stdout, text);
+			setLastCopied(text);
+		}
+		if (input === "v") {
+			requestClipboard(stdout);
+			setLastPasted("(request sent — check terminal)");
+		}
+		const parsed = parseClipboardResponse(input);
+		if (parsed) setLastPasted(parsed);
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				borderStyle: "round",
+				borderColor: "$primary",
+				paddingX: 1,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					marginBottom: 1,
+					children: [/* @__PURE__ */ jsx(H1, { children: "Items" }), /* @__PURE__ */ jsxs(Small, { children: [
+						" ",
+						"— ",
+						selectedIndex + 1,
+						"/",
+						allItems.length
+					] })]
+				}), /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					overflow: "scroll",
+					scrollTo: selectedIndex,
+					height: 10,
+					children: allItems.map((item, index) => /* @__PURE__ */ jsx(ListItem, {
+						item,
+						isSelected: index === selectedIndex
+					}, `${item.category}-${item.value}`))
+				})]
+			}),
+			/* @__PURE__ */ jsx(StatusBar, {
+				lastCopied,
+				lastPasted
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+				" navigate ",
+				/* @__PURE__ */ jsx(Kbd, { children: "c" }),
+				" copy ",
+				/* @__PURE__ */ jsx(Kbd, { children: "v" }),
+				" paste ",
+				/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+				" quit"
+			] })
+		]
+	});
+}
+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  c copy  v paste  Esc/q quit",
+			children: /* @__PURE__ */ jsx(ClipboardDemo, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { ClipboardDemo, main, meta };