@silvery/examples 0.17.3 → 0.17.4

package/dist/apps/outline.mjs

@@ -0,0 +1,203 @@
+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 { useState } from "react";
+import { Box, Kbd, Muted, Text, createTerm, render, useApp, useBoxRect, useInput } from "silvery";
+//#region apps/outline.tsx
+/**
+* Outline vs Border Comparison
+*
+* Side-by-side demonstration of outlineStyle vs borderStyle.
+* Borders push content inward (adding to layout dimensions), while
+* outlines overlap the content edge without affecting layout.
+*
+* Features:
+* - Left panel: Box with borderStyle — content area is smaller
+* - Right panel: Box with outlineStyle — content starts at edge
+* - Toggle between styles with Tab
+* - Live content dimensions via useBoxRect()
+*
+* Run: bun vendor/silvery/examples/apps/outline.tsx
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Outline vs Border",
+	description: "Side-by-side comparison showing outline (no layout impact) vs border",
+	features: [
+		"outlineStyle",
+		"borderStyle",
+		"useBoxRect()",
+		"layout dimensions"
+	]
+};
+const STYLES = [
+	"single",
+	"double",
+	"round",
+	"bold"
+];
+function ContentWithSize({ label }) {
+	const { width, height } = useBoxRect();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				bold: true,
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
+				"Content area:",
+				" ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$success",
+					bold: true,
+					children: width
+				}),
+				"x",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$success",
+					bold: true,
+					children: height
+				})
+			] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				dim: true,
+				children: "The quick brown fox"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				dim: true,
+				children: "jumps over the lazy"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				dim: true,
+				children: "dog on a sunny day."
+			})
+		]
+	});
+}
+function BorderPanel({ style, highlight }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				bold: true,
+				color: highlight ? "$primary" : void 0,
+				children: [
+					"borderStyle=\"",
+					style,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderStyle: style,
+				borderColor: highlight ? "$primary" : "$border",
+				width: 30,
+				height: 9,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentWithSize, { label: "Border Box" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Border adds to layout." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Content is pushed inward." })
+		]
+	});
+}
+function OutlinePanel({ style, highlight }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				bold: true,
+				color: highlight ? "$warning" : void 0,
+				children: [
+					"outlineStyle=\"",
+					style,
+					"\""
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				outlineStyle: style,
+				outlineColor: highlight ? "$warning" : "$border",
+				width: 30,
+				height: 9,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentWithSize, { label: "Outline Box" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Outline overlaps content." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "No layout impact at all." })
+		]
+	});
+}
+function OutlineDemo() {
+	const { exit } = useApp();
+	const [styleIndex, setStyleIndex] = useState(0);
+	const [focusedSide, setFocusedSide] = useState("border");
+	const currentStyle = STYLES[styleIndex];
+	useInput((input, key) => {
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (key.tab || input === "	") setFocusedSide((prev) => prev === "border" ? "outline" : "border");
+		if (key.rightArrow || input === "l") setStyleIndex((prev) => (prev + 1) % STYLES.length);
+		if (key.leftArrow || input === "h") setStyleIndex((prev) => (prev - 1 + STYLES.length) % STYLES.length);
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				gap: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					bold: true,
+					children: "Style:"
+				}), STYLES.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: i === styleIndex ? "$primary" : "$muted",
+					bold: i === styleIndex,
+					children: i === styleIndex ? `[${s}]` : s
+				}, s))]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 2,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BorderPanel, {
+					style: currentStyle,
+					highlight: focusedSide === "border"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutlinePanel, {
+					style: currentStyle,
+					highlight: focusedSide === "outline"
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+				" ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Tab" }),
+				" toggle focus ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "h/l" }),
+				" change style ",
+				/* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+			meta,
+			controls: "Tab toggle  h/l style  Esc/q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutlineDemo, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { OutlineDemo, main, meta };

package/dist/apps/paste-demo.mjs

@@ -0,0 +1,189 @@
+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 { useState } from "react";
+import { Box, H1, Kbd, Lead, Muted, Small, Text, createTerm, render, useApp, useInput } from "silvery";
+//#region apps/paste-demo.tsx
+/**
+* Bracketed Paste Demo
+*
+* Demonstrates bracketed paste mode — when text is pasted into the terminal,
+* it arrives as a single event rather than individual keystrokes. This prevents
+* pasted text from being interpreted as commands.
+*
+* Features:
+* - Shows paste mode status (always enabled with render())
+* - Displays pasted text as a single block event
+* - Shows character count and line count of pasted text
+* - Maintains a history of paste events
+*
+* Run: bun vendor/silvery/examples/apps/paste-demo.tsx
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Bracketed Paste",
+	description: "Receive pasted text as a single event via bracketed paste mode",
+	features: [
+		"onPaste",
+		"useInput",
+		"bracketed paste mode"
+	]
+};
+function PasteIndicator() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		gap: 1,
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$success",
+				bold: true,
+				children: "●"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Paste mode:" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$success",
+				bold: true,
+				children: "ENABLED"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "(bracketed paste is automatic with render())" })
+		]
+	});
+}
+function PasteEventCard({ event, isLatest }) {
+	const displayText = (event.text.length > 60 ? event.text.slice(0, 57) + "..." : event.text).replace(/\n/g, "\\n").replace(/\t/g, "\\t");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: isLatest ? "$primary" : "$border",
+		paddingX: 1,
+		marginBottom: 0,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(H1, {
+					color: isLatest ? "$primary" : void 0,
+					children: ["Paste #", event.id]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: event.timestamp })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				gap: 2,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Small, { children: [
+					event.charCount,
+					" char",
+					event.charCount !== 1 ? "s" : ""
+				] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Small, { children: [
+					event.lineCount,
+					" line",
+					event.lineCount !== 1 ? "s" : ""
+				] })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$warning",
+					children: displayText
+				})
+			})
+		]
+	});
+}
+function EmptyState() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 2,
+		alignItems: "center",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "No paste events yet." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "Try pasting some text from your clipboard!" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "(Cmd+V on macOS, Ctrl+Shift+V on Linux)" })
+		]
+	});
+}
+function PasteDemo() {
+	const { exit } = useApp();
+	const [pasteHistory, setPasteHistory] = useState([]);
+	const [nextId, setNextId] = useState(1);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (input === "x") {
+			setPasteHistory([]);
+			setNextId(1);
+		}
+	}, { onPaste: (text) => {
+		const now = /* @__PURE__ */ new Date();
+		const timestamp = `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`;
+		const event = {
+			id: nextId,
+			text,
+			charCount: text.length,
+			lineCount: text.split("\n").length,
+			timestamp
+		};
+		setPasteHistory((prev) => [event, ...prev].slice(0, 10));
+		setNextId((prev) => prev + 1);
+	} });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasteIndicator, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				borderStyle: "round",
+				borderColor: "$primary",
+				paddingX: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					marginBottom: 1,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: "Paste History" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Small, { children: [
+						" ",
+						"— ",
+						pasteHistory.length,
+						" event",
+						pasteHistory.length !== 1 ? "s" : ""
+					] })]
+				}), pasteHistory.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					flexDirection: "column",
+					overflow: "scroll",
+					height: 12,
+					gap: 1,
+					children: pasteHistory.map((event, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasteEventCard, {
+						event,
+						isLatest: index === 0
+					}, event.id))
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+				" ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Paste text" }),
+				" to see events ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "x" }),
+				" clear ",
+				/* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+			meta,
+			controls: "Paste text to see events  x clear  Esc/q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasteDemo, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { PasteDemo, main, meta };

package/dist/apps/scroll.mjs

@@ -0,0 +1,86 @@
+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 { useState } from "react";
+import { Box, Kbd, Muted, Text, createTerm, render, useApp, useInput } from "silvery";
+//#region apps/scroll.tsx
+/**
+* Scroll Example
+*
+* Demonstrates overflow="scroll" with keyboard navigation.
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Scroll",
+	description: "Native overflow=\"scroll\" with automatic scroll-to-selected",
+	features: [
+		"overflow=\"scroll\"",
+		"scrollTo",
+		"useInput"
+	]
+};
+const items = Array.from({ length: 50 }, (_, i) => ({
+	id: i,
+	title: `Item ${i + 1}`,
+	description: `This is the description for item number ${i + 1}`
+}));
+function ScrollExample() {
+	const { exit } = useApp();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+		if (key.upArrow || input === "k") setSelectedIndex((prev) => Math.max(0, prev - 1));
+		if (key.downArrow || input === "j") setSelectedIndex((prev) => Math.min(items.length - 1, prev + 1));
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		width: 60,
+		height: 20,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			flexGrow: 1,
+			flexDirection: "column",
+			borderStyle: "round",
+			borderColor: "$primary",
+			overflow: "scroll",
+			scrollTo: selectedIndex,
+			height: 10,
+			children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				backgroundColor: index === selectedIndex ? "$primary" : void 0,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: index === selectedIndex ? "$primary-fg" : void 0,
+					bold: index === selectedIndex,
+					children: item.title
+				})
+			}, item.id))
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+			" ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "j/k" }),
+			" navigate ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }),
+			" quit | Selected: ",
+			selectedIndex + 1,
+			"/",
+			items.length
+		] })]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		await render(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+			meta,
+			controls: "j/k navigate  Esc/q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollExample, {})
+		}), term);
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { ScrollExample, main, meta };