@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/transform.mjs

@@ -0,0 +1,214 @@
+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, Muted, Small, Text, Transform, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/transform.tsx
+/**
+* Transform Component Demo
+*
+* Shows the Transform component for text post-processing. Each transform
+* applies a string transformation to every line of rendered text output.
+*
+* Features:
+* - Multiple transforms: uppercase, leetspeak, reverse, ROT13, etc.
+* - Cycle through transforms with j/k
+* - Shows original and transformed text side by side
+* - Uses Transform from silvery components
+*
+* Run: bun vendor/silvery/examples/apps/transform.tsx
+*/
+const meta = {
+	name: "Transform",
+	description: "Text post-processing with the Transform component",
+	features: [
+		"Transform",
+		"transform function",
+		"side-by-side comparison"
+	]
+};
+const leetMap = {
+	a: "4",
+	e: "3",
+	i: "1",
+	o: "0",
+	s: "5",
+	t: "7",
+	A: "4",
+	E: "3",
+	I: "1",
+	O: "0",
+	S: "5",
+	T: "7"
+};
+const rot13Char = (c) => {
+	const code = c.charCodeAt(0);
+	if (code >= 65 && code <= 90) return String.fromCharCode((code - 65 + 13) % 26 + 65);
+	if (code >= 97 && code <= 122) return String.fromCharCode((code - 97 + 13) % 26 + 97);
+	return c;
+};
+const transforms = [
+	{
+		name: "Uppercase",
+		description: "Convert all characters to upper case",
+		fn: (s) => s.toUpperCase()
+	},
+	{
+		name: "Lowercase",
+		description: "Convert all characters to lower case",
+		fn: (s) => s.toLowerCase()
+	},
+	{
+		name: "Leetspeak",
+		description: "Replace letters with numbers (a=4, e=3, i=1, ...)",
+		fn: (s) => s.split("").map((c) => leetMap[c] ?? c).join("")
+	},
+	{
+		name: "Reverse",
+		description: "Reverse each line of text",
+		fn: (s) => s.split("").reverse().join("")
+	},
+	{
+		name: "ROT13",
+		description: "Caesar cipher — shift each letter by 13 positions",
+		fn: (s) => s.split("").map(rot13Char).join("")
+	},
+	{
+		name: "Alternating Case",
+		description: "Alternate between upper and lower case characters",
+		fn: (s) => s.split("").map((c, i) => i % 2 === 0 ? c.toUpperCase() : c.toLowerCase()).join("")
+	},
+	{
+		name: "Spaces to Dots",
+		description: "Replace spaces with middle dots for visibility",
+		fn: (s) => s.replace(/ /g, "·")
+	}
+];
+const sampleLines = [
+	"The quick brown fox jumps",
+	"over the lazy dog on a",
+	"beautiful sunny afternoon.",
+	"",
+	"Pack my box with five dozen",
+	"liquor jugs and enjoy them."
+];
+function TransformSelector({ current, transforms: items }) {
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		overflow: "scroll",
+		scrollTo: current,
+		height: 7,
+		children: items.map((t, index) => {
+			const isSelected = index === current;
+			return /* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ jsxs(Text, {
+					color: isSelected ? "$bg" : void 0,
+					backgroundColor: isSelected ? "$primary" : void 0,
+					bold: isSelected,
+					children: [isSelected ? " > " : "   ", t.name]
+				})
+			}, t.name);
+		})
+	});
+}
+function TextPanel({ title, titleColor, children }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		borderStyle: "round",
+		borderColor: "$border",
+		paddingX: 1,
+		children: [/* @__PURE__ */ jsx(Box, {
+			marginBottom: 1,
+			children: /* @__PURE__ */ jsx(H1, {
+				color: titleColor,
+				children: title
+			})
+		}), children]
+	});
+}
+function TransformDemo() {
+	const { exit } = useApp();
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const current = transforms[currentIndex];
+	useInput((input, key) => {
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (key.upArrow || input === "k") setCurrentIndex((prev) => Math.max(0, prev - 1));
+		if (key.downArrow || input === "j") setCurrentIndex((prev) => Math.min(transforms.length - 1, prev + 1));
+	});
+	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,
+					gap: 1,
+					children: [/* @__PURE__ */ jsx(H1, { children: "Transform" }), /* @__PURE__ */ jsxs(Small, { children: [
+						"— ",
+						current.name,
+						": ",
+						current.description
+					] })]
+				}), /* @__PURE__ */ jsx(TransformSelector, {
+					current: currentIndex,
+					transforms
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "row",
+				gap: 1,
+				children: [/* @__PURE__ */ jsx(TextPanel, {
+					title: "Original",
+					titleColor: "$muted",
+					children: /* @__PURE__ */ jsx(Box, {
+						flexDirection: "column",
+						children: sampleLines.map((line, i) => /* @__PURE__ */ jsx(Text, { children: line || " " }, i))
+					})
+				}), /* @__PURE__ */ jsx(TextPanel, {
+					title: `${current.name}`,
+					titleColor: "$warning",
+					children: /* @__PURE__ */ jsx(Transform, {
+						transform: current.fn,
+						children: /* @__PURE__ */ jsx(Text, { children: sampleLines.join("\n") })
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+				" select transform ",
+				/* @__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 select transform  Esc/q quit",
+			children: /* @__PURE__ */ jsx(TransformDemo, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { TransformDemo, main, meta };

package/dist/apps/virtual-10k.mjs

@@ -0,0 +1,421 @@
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useCallback, useMemo, useState } from "react";
+import { Box, Divider, Kbd, ListView, Muted, Strong, Text, useBoxRect } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { run, useInput as useInput$1 } from "silvery/runtime";
+//#region apps/virtual-10k.tsx
+/**
+* Virtual Scroll Benchmark — 10,000 Items
+*
+* Demonstrates that ListView handles massive datasets with instant scrolling.
+* Only visible items + overscan are rendered, regardless of total count.
+*
+* Demonstrates:
+* - ListView with 10,000 items and variable heights
+* - Smooth j/k navigation with position indicator
+* - useBoxRect() for adaptive column count
+* - Page up/down with large jumps
+* - Visual item variety (priorities, tags, progress bars)
+*
+* Usage: bun run examples/apps/virtual-10k.tsx
+*
+* Controls:
+*   j/k or Up/Down   - Navigate one item
+*   d/u              - Half-page down/up
+*   g/G              - Jump to first/last
+*   /                - Search by number
+*   Esc/q or Ctrl+C   - Quit
+*/
+const meta = {
+	name: "Virtual 10K",
+	description: "ListView scrolling through 10,000 items with instant navigation",
+	features: [
+		"ListView",
+		"10K items",
+		"useBoxRect()",
+		"variable estimateHeight"
+	]
+};
+const PRIORITIES = [
+	"P0",
+	"P1",
+	"P2",
+	"P3"
+];
+const STATUSES = [
+	"todo",
+	"in-progress",
+	"done",
+	"blocked"
+];
+const TAG_POOL = [
+	"frontend",
+	"backend",
+	"api",
+	"database",
+	"security",
+	"performance",
+	"ux",
+	"docs",
+	"testing",
+	"devops",
+	"mobile",
+	"infra"
+];
+const ADJECTIVES = [
+	"Implement",
+	"Fix",
+	"Refactor",
+	"Optimize",
+	"Design",
+	"Review",
+	"Update",
+	"Add",
+	"Remove",
+	"Migrate",
+	"Configure",
+	"Deploy"
+];
+const NOUNS = [
+	"authentication flow",
+	"database schema",
+	"API endpoint",
+	"caching layer",
+	"error handling",
+	"test suite",
+	"CI pipeline",
+	"monitoring",
+	"rate limiter",
+	"search index",
+	"notification system",
+	"user dashboard",
+	"payment processing",
+	"file upload",
+	"websocket handler",
+	"session manager"
+];
+function seededRandom(seed) {
+	let s = seed;
+	return () => {
+		s = s * 1664525 + 1013904223 & 2147483647;
+		return s / 2147483647;
+	};
+}
+function generateItems(count) {
+	const rng = seededRandom(42);
+	const items = [];
+	for (let i = 0; i < count; i++) {
+		const adj = ADJECTIVES[Math.floor(rng() * ADJECTIVES.length)];
+		const noun = NOUNS[Math.floor(rng() * NOUNS.length)];
+		const priority = PRIORITIES[Math.floor(rng() * PRIORITIES.length)];
+		const status = STATUSES[Math.floor(rng() * STATUSES.length)];
+		const tagCount = 1 + Math.floor(rng() * 3);
+		const tags = [];
+		for (let t = 0; t < tagCount; t++) {
+			const tag = TAG_POOL[Math.floor(rng() * TAG_POOL.length)];
+			if (!tags.includes(tag)) tags.push(tag);
+		}
+		const progress = status === "done" ? 100 : status === "todo" ? 0 : Math.floor(rng() * 90) + 5;
+		items.push({
+			id: i + 1,
+			title: `${adj} ${noun}`,
+			priority,
+			status,
+			tags,
+			progress,
+			description: `Task #${i + 1}: ${adj.toLowerCase()} the ${noun} for improved reliability.`
+		});
+	}
+	return items;
+}
+const TOTAL_ITEMS = 1e4;
+const ALL_ITEMS = generateItems(TOTAL_ITEMS);
+const PRIORITY_COLORS = {
+	P0: "$error",
+	P1: "$warning",
+	P2: "$info",
+	P3: "$muted"
+};
+const STATUS_ICONS = {
+	todo: "○",
+	"in-progress": "◔",
+	done: "●",
+	blocked: "■"
+};
+const STATUS_COLORS = {
+	todo: "$muted",
+	"in-progress": "$warning",
+	done: "$success",
+	blocked: "$error"
+};
+function ProgressBar$1({ percent, width: barWidth }) {
+	const effectiveWidth = Math.max(5, barWidth);
+	const filled = Math.round(percent / 100 * effectiveWidth);
+	const empty = effectiveWidth - filled;
+	return /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+		color: "$success",
+		children: "█".repeat(filled)
+	}), /* @__PURE__ */ jsx(Text, {
+		dim: true,
+		children: "░".repeat(empty)
+	})] });
+}
+function ItemRow({ item, isSelected, showDetail }) {
+	const idStr = String(item.id).padStart(5, " ");
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		backgroundColor: isSelected ? "$primary" : void 0,
+		children: [/* @__PURE__ */ jsxs(Box, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				color: STATUS_COLORS[item.status],
+				children: STATUS_ICONS[item.status]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				dim: true,
+				children: [
+					" ",
+					idStr,
+					" "
+				]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: PRIORITY_COLORS[item.priority],
+				children: item.priority
+			}),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsx(Text, {
+				bold: isSelected,
+				children: item.title
+			}),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			item.tags.map((tag) => /* @__PURE__ */ jsxs(Text, {
+				dim: true,
+				color: "$info",
+				children: [
+					" ",
+					"#",
+					tag
+				]
+			}, tag))
+		] }), showDetail && /* @__PURE__ */ jsxs(Box, {
+			paddingLeft: 8,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					dim: true,
+					children: item.description
+				}),
+				/* @__PURE__ */ jsx(Text, { children: " " }),
+				/* @__PURE__ */ jsx(ProgressBar$1, {
+					percent: item.progress,
+					width: 10
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					dim: true,
+					children: [
+						" ",
+						item.progress,
+						"%"
+					]
+				})
+			]
+		})]
+	});
+}
+function ScrollIndicator({ current, total, width }) {
+	const percent = total > 0 ? Math.round((current + 1) / total * 100) : 0;
+	const barWidth = Math.max(10, Math.min(30, width - 40));
+	const filled = Math.round(percent / 100 * barWidth);
+	const empty = barWidth - filled;
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsx(Strong, {
+				color: "$primary",
+				children: (current + 1).toLocaleString()
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dim: true,
+				children: "of"
+			}),
+			/* @__PURE__ */ jsx(Strong, { children: total.toLocaleString() }),
+			/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+				color: "$primary",
+				children: "█".repeat(filled)
+			}), /* @__PURE__ */ jsx(Text, {
+				dim: true,
+				children: "░".repeat(empty)
+			})] }),
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$primary",
+				children: [percent, "%"]
+			})
+		]
+	});
+}
+function StatsBar({ items }) {
+	const stats = useMemo(() => {
+		let p0 = 0, p1 = 0, p2 = 0, p3 = 0;
+		let todo = 0, inProg = 0, done = 0, blocked = 0;
+		for (const item of items) {
+			if (item.priority === "P0") p0++;
+			else if (item.priority === "P1") p1++;
+			else if (item.priority === "P2") p2++;
+			else p3++;
+			if (item.status === "todo") todo++;
+			else if (item.status === "in-progress") inProg++;
+			else if (item.status === "done") done++;
+			else blocked++;
+		}
+		return {
+			p0,
+			p1,
+			p2,
+			p3,
+			todo,
+			inProg,
+			done,
+			blocked
+		};
+	}, [items]);
+	return /* @__PURE__ */ jsxs(Box, {
+		gap: 2,
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$error",
+				children: ["P0:", stats.p0]
+			}),
+			/* @__PURE__ */ jsxs(Strong, {
+				color: "$warning",
+				children: ["P1:", stats.p1]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$info",
+				children: ["P2:", stats.p2]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				dim: true,
+				children: ["P3:", stats.p3]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				dim: true,
+				children: "|"
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$muted",
+				children: [
+					STATUS_ICONS.todo,
+					" ",
+					stats.todo
+				]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$warning",
+				children: [
+					STATUS_ICONS["in-progress"],
+					" ",
+					stats.inProg
+				]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$success",
+				children: [
+					STATUS_ICONS.done,
+					" ",
+					stats.done
+				]
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$error",
+				children: [
+					STATUS_ICONS.blocked,
+					" ",
+					stats.blocked
+				]
+			})
+		]
+	});
+}
+function VirtualBenchmark() {
+	const { width, height } = useBoxRect();
+	const [cursor, setCursor] = useState(0);
+	const [showDetail, setShowDetail] = useState(false);
+	const listHeight = Math.max(5, height - 5);
+	const halfPage = Math.max(1, Math.floor(listHeight / 2));
+	const estimateHeight = useCallback((index) => {
+		if (showDetail && index === cursor) return 2;
+		return 1;
+	}, [showDetail, cursor]);
+	useInput$1(useCallback((input, key) => {
+		if (input === "q" || key.escape || key.ctrl && input === "c") return "exit";
+		if (input === "j" || key.downArrow) setCursor((c) => Math.min(TOTAL_ITEMS - 1, c + 1));
+		if (input === "k" || key.upArrow) setCursor((c) => Math.max(0, c - 1));
+		if (input === "d" || key.pageDown) setCursor((c) => Math.min(TOTAL_ITEMS - 1, c + halfPage));
+		if (input === "u" || key.pageUp) setCursor((c) => Math.max(0, c - halfPage));
+		if (input === "g" || key.home) setCursor(0);
+		if (input === "G" || key.end) setCursor(TOTAL_ITEMS - 1);
+		if (key.return || input === " ") setShowDetail((d) => !d);
+	}, [halfPage]));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		width: "100%",
+		height: "100%",
+		children: [
+			/* @__PURE__ */ jsx(StatsBar, { items: ALL_ITEMS }),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ jsx(Divider, {})
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexGrow: 1,
+				children: /* @__PURE__ */ jsx(ListView, {
+					items: ALL_ITEMS,
+					height: listHeight,
+					estimateHeight,
+					scrollTo: cursor,
+					overscan: 5,
+					renderItem: (item, index) => /* @__PURE__ */ jsx(ItemRow, {
+						item,
+						isSelected: index === cursor,
+						showDetail: showDetail && index === cursor
+					}, item.id)
+				})
+			}),
+			/* @__PURE__ */ jsx(ScrollIndicator, {
+				current: cursor,
+				total: TOTAL_ITEMS,
+				width
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				justifyContent: "center",
+				children: /* @__PURE__ */ jsxs(Muted, { children: [
+					/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+					" navigate ",
+					/* @__PURE__ */ jsx(Kbd, { children: "d/u" }),
+					" half-page ",
+					/* @__PURE__ */ jsx(Kbd, { children: "g/G" }),
+					" start/end ",
+					/* @__PURE__ */ jsx(Kbd, { children: "Enter" }),
+					" detail",
+					" ",
+					/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+					" quit"
+				] })
+			})
+		]
+	});
+}
+async function main() {
+	await (await run(/* @__PURE__ */ jsx(ExampleBanner, {
+		meta,
+		controls: "j/k navigate  d/u half-page  g/G start/end  Enter detail  Esc/q quit",
+		children: /* @__PURE__ */ jsx(VirtualBenchmark, {})
+	}))).waitUntilExit();
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };