@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/inline-bench.mjs

@@ -0,0 +1,115 @@
+import { D as TerminalBuffer, N as init_buffer, i as outputPhase, r as createOutputPhase } from "../ansi-0VXlUmNn.mjs";
+//#region apps/inline-bench.tsx
+init_buffer();
+const RUNS = 500;
+function fillBuffer(buf, rows, prefix = "") {
+	for (let y = 0; y < rows; y++) {
+		const text = `${prefix}Item ${y}: Content line with some styling and longer text here`;
+		for (let x = 0; x < Math.min(text.length, buf.width); x++) buf.setCell(x, y, { char: text[x] });
+	}
+}
+function benchmarkOutputPhase(name, width, height, contentRows, changedCells, forceFullRender) {
+	const timings = [];
+	const bytes = [];
+	for (let i = 0; i < RUNS; i++) {
+		const prev = new TerminalBuffer(width, height);
+		fillBuffer(prev, contentRows);
+		const next = new TerminalBuffer(width, height);
+		fillBuffer(next, contentRows);
+		for (let c = 0; c < changedCells; c++) {
+			const row = Math.floor(c / Math.max(changedCells, 1) * contentRows);
+			const col = c % Math.min(10, width);
+			next.setCell(col, row, { char: "X" });
+		}
+		if (forceFullRender) {
+			outputPhase(null, prev, "inline", 0, height);
+			const t0 = performance.now();
+			const output = outputPhase(prev, next, "inline", 0, height);
+			const t1 = performance.now();
+			timings.push(t1 - t0);
+			bytes.push(output.length);
+		} else {
+			const render = createOutputPhase({});
+			render(null, prev, "inline", 0, height);
+			const t0 = performance.now();
+			const output = render(prev, next, "inline", 0, height);
+			const t1 = performance.now();
+			timings.push(t1 - t0);
+			bytes.push(output.length);
+		}
+	}
+	timings.sort((a, b) => a - b);
+	bytes.sort((a, b) => a - b);
+	return {
+		name,
+		timings,
+		bytes
+	};
+}
+function printResult(r) {
+	const p50t = r.timings[Math.floor(r.timings.length * .5)];
+	const p95t = r.timings[Math.floor(r.timings.length * .95)];
+	const p50b = r.bytes[Math.floor(r.bytes.length * .5)];
+	const avgB = r.bytes.reduce((a, b) => a + b, 0) / r.bytes.length;
+	console.log(`  ${r.name.padEnd(40)} p50=${p50t.toFixed(3).padStart(7)}ms  p95=${p95t.toFixed(3).padStart(7)}ms  bytes=${Math.round(p50b).toString().padStart(6)} (avg ${Math.round(avgB)})`);
+}
+function printComparison(full, incr) {
+	const fullP50b = full.bytes[Math.floor(full.bytes.length * .5)];
+	const incrP50b = incr.bytes[Math.floor(incr.bytes.length * .5)];
+	const fullP50t = full.timings[Math.floor(full.timings.length * .5)];
+	const incrP50t = incr.timings[Math.floor(incr.timings.length * .5)];
+	const byteRatio = fullP50b / Math.max(incrP50b, 1);
+	const timeRatio = fullP50t / Math.max(incrP50t, .001);
+	console.log(`  ${"→ savings".padEnd(40)} time=${timeRatio.toFixed(1)}x faster  bytes=${byteRatio.toFixed(0)}x fewer (${fullP50b} → ${incrP50b})`);
+}
+async function main() {
+	console.log(`\n═══ Inline Output Phase: Full vs Incremental (${RUNS} runs) ═══\n`);
+	for (const cfg of [
+		{
+			label: "10 rows, 1 change",
+			w: 80,
+			h: 20,
+			rows: 10,
+			changes: 1
+		},
+		{
+			label: "30 rows, 1 change",
+			w: 120,
+			h: 40,
+			rows: 30,
+			changes: 1
+		},
+		{
+			label: "50 rows, 1 change",
+			w: 120,
+			h: 60,
+			rows: 50,
+			changes: 1
+		},
+		{
+			label: "50 rows, 3 changes",
+			w: 120,
+			h: 60,
+			rows: 50,
+			changes: 3
+		},
+		{
+			label: "50 rows, 10 changes",
+			w: 120,
+			h: 60,
+			rows: 50,
+			changes: 10
+		}
+	]) {
+		console.log(`--- ${cfg.label} ---`);
+		const full = benchmarkOutputPhase(`full render`, cfg.w, cfg.h, cfg.rows, cfg.changes, true);
+		const incr = benchmarkOutputPhase(`incremental`, cfg.w, cfg.h, cfg.rows, cfg.changes, false);
+		printResult(full);
+		printResult(incr);
+		printComparison(full, incr);
+		console.log();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { main };

package/dist/apps/kanban.mjs

@@ -0,0 +1,279 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useState } from "react";
+import { Box, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/kanban.tsx
+/**
+* Kanban Board Example
+*
+* A 3-column kanban board demonstrating:
+* - Todo, In Progress, Done columns
+* - Move items between columns with arrow keys
+* - Each column uses native overflow="scroll" for scrolling
+* - Flexbox layout for proportional sizing
+*/
+const meta = {
+	name: "Kanban Board",
+	description: "3-column kanban with card movement and independent scroll",
+	demo: true,
+	features: [
+		"Box flexDirection",
+		"useInput",
+		"backgroundColor",
+		"multi-column layout"
+	]
+};
+const initialColumns = [
+	{
+		id: "todo",
+		title: "To Do",
+		cards: [
+			{
+				id: 1,
+				title: "Design new landing page",
+				tags: ["design"]
+			},
+			{
+				id: 2,
+				title: "Write API documentation",
+				tags: ["docs"]
+			},
+			{
+				id: 3,
+				title: "Set up monitoring",
+				tags: ["devops"]
+			},
+			{
+				id: 4,
+				title: "Create onboarding flow",
+				tags: ["ux"]
+			},
+			{
+				id: 5,
+				title: "Database optimization",
+				tags: ["backend"]
+			},
+			{
+				id: 6,
+				title: "Mobile responsive fixes",
+				tags: ["frontend"]
+			},
+			{
+				id: 7,
+				title: "Add dark mode",
+				tags: ["frontend", "ux"]
+			},
+			{
+				id: 8,
+				title: "Implement caching",
+				tags: ["backend"]
+			}
+		]
+	},
+	{
+		id: "inProgress",
+		title: "In Progress",
+		cards: [
+			{
+				id: 9,
+				title: "User authentication",
+				tags: ["backend", "security"]
+			},
+			{
+				id: 10,
+				title: "Dashboard redesign",
+				tags: ["frontend", "design"]
+			},
+			{
+				id: 11,
+				title: "API rate limiting",
+				tags: ["backend"]
+			}
+		]
+	},
+	{
+		id: "done",
+		title: "Done",
+		cards: [
+			{
+				id: 12,
+				title: "Project setup",
+				tags: ["devops"]
+			},
+			{
+				id: 13,
+				title: "CI/CD pipeline",
+				tags: ["devops"]
+			},
+			{
+				id: 14,
+				title: "Initial wireframes",
+				tags: ["design"]
+			},
+			{
+				id: 15,
+				title: "Database schema",
+				tags: ["backend"]
+			}
+		]
+	}
+];
+const tagColors = {
+	frontend: "$info",
+	backend: "$accent",
+	design: "$warning",
+	devops: "$success",
+	docs: "$primary",
+	ux: "$muted",
+	security: "$error"
+};
+function Tag({ name }) {
+	return /* @__PURE__ */ jsxs(Text, {
+		color: tagColors[name] ?? "$muted",
+		dim: true,
+		children: ["#", name]
+	});
+}
+function CardComponent({ card, isSelected }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: isSelected ? "$primary" : "$border",
+		children: [isSelected ? /* @__PURE__ */ jsx(Box, {
+			backgroundColor: "$primary",
+			paddingX: 1,
+			children: /* @__PURE__ */ jsx(Text, {
+				color: "$primary-fg",
+				bold: true,
+				wrap: "truncate",
+				children: card.title
+			})
+		}) : /* @__PURE__ */ jsx(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ jsx(Text, {
+				wrap: "truncate",
+				children: card.title
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			gap: 1,
+			paddingX: 1,
+			children: card.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { name: tag }, tag))
+		})]
+	});
+}
+function ColumnComponent({ column, isSelected, selectedCardIndex }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		flexBasis: 0,
+		borderStyle: "single",
+		borderColor: isSelected ? "$primary" : "$border",
+		children: [/* @__PURE__ */ jsxs(Box, {
+			backgroundColor: isSelected ? "$primary" : void 0,
+			paddingX: 1,
+			children: [/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				color: isSelected ? "$primary-fg" : "$text",
+				children: column.title
+			}), /* @__PURE__ */ jsxs(Text, {
+				color: isSelected ? "$primary-fg" : "$muted",
+				children: [
+					" (",
+					column.cards.length,
+					")"
+				]
+			})]
+		}), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			overflow: "scroll",
+			scrollTo: isSelected ? selectedCardIndex : void 0,
+			flexGrow: 1,
+			children: [column.cards.map((card, cardIndex) => /* @__PURE__ */ jsx(CardComponent, {
+				card,
+				isSelected: isSelected && cardIndex === selectedCardIndex
+			}, card.id)), column.cards.length === 0 && /* @__PURE__ */ jsx(Text, {
+				dim: true,
+				italic: true,
+				children: "No cards"
+			})]
+		})]
+	});
+}
+function KanbanBoard() {
+	const { exit } = useApp();
+	const [columns, setColumns] = useState(initialColumns);
+	const [selectedColumn, setSelectedColumn] = useState(0);
+	const [selectedCard, setSelectedCard] = useState(0);
+	const currentColumnCards = columns[selectedColumn]?.cards ?? [];
+	const boundedSelectedCard = Math.min(selectedCard, Math.max(0, currentColumnCards.length - 1));
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+		if (key.leftArrow || input === "h") {
+			setSelectedColumn((prev) => Math.max(0, prev - 1));
+			setSelectedCard(0);
+		}
+		if (key.rightArrow || input === "l") {
+			setSelectedColumn((prev) => Math.min(columns.length - 1, prev + 1));
+			setSelectedCard(0);
+		}
+		if (key.upArrow || input === "k") setSelectedCard((prev) => Math.max(0, prev - 1));
+		if (key.downArrow || input === "j") setSelectedCard((prev) => Math.min(currentColumnCards.length - 1, prev + 1));
+		if (input === "<" || input === ",") moveCard(-1);
+		if (input === ">" || input === ".") moveCard(1);
+	});
+	function moveCard(direction) {
+		const targetColumnIndex = selectedColumn + direction;
+		if (targetColumnIndex < 0 || targetColumnIndex >= columns.length) return;
+		if (currentColumnCards.length === 0) return;
+		const cardToMove = currentColumnCards[boundedSelectedCard];
+		if (!cardToMove) return;
+		setColumns((prev) => {
+			const next = prev.map((col) => ({
+				...col,
+				cards: [...col.cards]
+			}));
+			next[selectedColumn].cards.splice(boundedSelectedCard, 1);
+			next[targetColumnIndex].cards.push(cardToMove);
+			return next;
+		});
+		setSelectedColumn(targetColumnIndex);
+		setSelectedCard(columns[targetColumnIndex].cards.length);
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		padding: 1,
+		height: "100%",
+		children: /* @__PURE__ */ jsx(Box, {
+			flexGrow: 1,
+			flexDirection: "row",
+			gap: 1,
+			overflow: "hidden",
+			children: columns.map((column, colIndex) => /* @__PURE__ */ jsx(ColumnComponent, {
+				column,
+				isSelected: colIndex === selectedColumn,
+				selectedCardIndex: colIndex === selectedColumn ? boundedSelectedCard : -1
+			}, column.id))
+		})
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "h/l column  j/k card  </> move  Esc/q quit",
+			children: /* @__PURE__ */ jsx(KanbanBoard, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { KanbanBoard, main, meta };

package/dist/apps/layout-ref.mjs

@@ -0,0 +1,186 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useRef, useState } from "react";
+import { Box, H1, Kbd, Muted, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/layout-ref.tsx
+/**
+* Layout Ref Example
+*
+* Demonstrates imperative access to layout information:
+* - forwardRef on Box and Text components
+* - BoxHandle for accessing layout info imperatively
+* - onLayout callback for responding to size changes
+*/
+const meta = {
+	name: "Layout Ref",
+	description: "useBoxRect + useScrollRect for imperative layout measurement",
+	features: [
+		"forwardRef",
+		"BoxHandle",
+		"onLayout",
+		"getBoxRect()"
+	]
+};
+function ResizablePane({ title, color, onLayoutChange }) {
+	return /* @__PURE__ */ jsx(Box, {
+		ref: useRef(null),
+		flexGrow: 1,
+		borderStyle: "round",
+		borderColor: color,
+		padding: 1,
+		onLayout: (layout) => onLayoutChange(layout),
+		children: /* @__PURE__ */ jsx(H1, {
+			color,
+			children: title
+		})
+	});
+}
+function ImperativeAccessDemo() {
+	const boxRef = useRef(null);
+	const [info, setInfo] = useState("Click 'i' to inspect");
+	const inspect = () => {
+		if (!boxRef.current) {
+			setInfo("No ref attached");
+			return;
+		}
+		const content = boxRef.current.getBoxRect();
+		const screen = boxRef.current.getScrollRect();
+		const node = boxRef.current.getNode();
+		setInfo(`Content: ${content?.width}x${content?.height} at (${content?.x},${content?.y})\nScreen: ${screen?.width}x${screen?.height} at (${screen?.x},${screen?.y})\nNode: ${node ? "available" : "null"}`);
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: boxRef,
+		flexDirection: "column",
+		borderStyle: "double",
+		borderColor: "$accent",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsx(H1, {
+				color: "$accent",
+				children: "Imperative Access (BoxHandle)"
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: "Press 'i' to inspect this box" }),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Text, { children: info })
+			}),
+			/* @__PURE__ */ jsx(InspectTrigger, { onInspect: inspect })
+		]
+	});
+}
+function InspectTrigger({ onInspect }) {
+	useInput((input) => {
+		if (input === "i") onInspect();
+	});
+	return null;
+}
+function LayoutRefApp() {
+	const { exit } = useApp();
+	const [layouts, setLayouts] = useState({});
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+	});
+	const handleLayoutChange = (pane) => (info) => {
+		setLayouts((prev) => ({
+			...prev,
+			[pane]: info
+		}));
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "row",
+				gap: 1,
+				height: 8,
+				children: [
+					/* @__PURE__ */ jsx(ResizablePane, {
+						title: "Pane A",
+						color: "$success",
+						onLayoutChange: handleLayoutChange("a")
+					}),
+					/* @__PURE__ */ jsx(ResizablePane, {
+						title: "Pane B",
+						color: "$info",
+						onLayoutChange: handleLayoutChange("b")
+					}),
+					/* @__PURE__ */ jsx(ResizablePane, {
+						title: "Pane C",
+						color: "$primary",
+						onLayoutChange: handleLayoutChange("c")
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				borderStyle: "single",
+				borderColor: "$border",
+				padding: 1,
+				children: /* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							bold: true,
+							dim: true,
+							children: "onLayout Results:"
+						}),
+						Object.entries(layouts).map(([pane, info]) => /* @__PURE__ */ jsxs(Text, {
+							dim: true,
+							children: [
+								"Pane ",
+								pane.toUpperCase(),
+								": ",
+								info.width,
+								"x",
+								info.height,
+								" at (",
+								info.x,
+								",",
+								info.y,
+								")"
+							]
+						}, pane)),
+						Object.keys(layouts).length === 0 && /* @__PURE__ */ jsx(Text, {
+							dim: true,
+							italic: true,
+							children: "Waiting for layout..."
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexGrow: 1,
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(ImperativeAccessDemo, {})
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: "i" }),
+				" inspect ",
+				/* @__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: "i inspect  Esc/q quit",
+			children: /* @__PURE__ */ jsx(LayoutRefApp, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { LayoutRefApp, main, meta };