@silvery/examples 0.17.3 → 0.17.4

package/dist/apps/spatial-focus-demo.mjs

@@ -0,0 +1,388 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
+import { useMemo, useState } from "react";
+import { Box, Text } from "silvery";
+import { run, useInput as useInput$1 } from "silvery/runtime";
+//#region apps/spatial-focus-demo.tsx
+/**
+* Spatial Focus Navigation Demo — Kanban Board
+*
+* A kanban board where arrow keys spatially navigate between cards across columns.
+* Uses React state for focus tracking with spatial nearest-neighbor lookup.
+*
+* Cards have varied heights to prove spatial navigation handles non-uniform layouts.
+* Focus is shown via yellow border and bold title on the focused card.
+*
+* Run: bun vendor/silvery/examples/apps/spatial-focus-demo.tsx
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const columns = [
+	{
+		id: "backlog",
+		title: "Backlog",
+		cards: [
+			{
+				id: "b1",
+				title: "Design system audit",
+				tags: ["design"],
+				priority: "low"
+			},
+			{
+				id: "b2",
+				title: "Refactor auth module",
+				description: "Move from JWT to session-based auth.\nUpdate all middleware.\nAdd refresh token rotation.",
+				tags: ["backend", "security"],
+				priority: "high"
+			},
+			{
+				id: "b3",
+				title: "Add dark mode",
+				tags: ["frontend"]
+			},
+			{
+				id: "b4",
+				title: "Database migration tool",
+				description: "Schema versioning with rollback support.",
+				tags: ["backend", "devops"],
+				priority: "medium"
+			},
+			{
+				id: "b5",
+				title: "Update dependencies",
+				tags: ["maintenance"]
+			}
+		]
+	},
+	{
+		id: "todo",
+		title: "To Do",
+		cards: [
+			{
+				id: "t1",
+				title: "User dashboard",
+				description: "Activity feed, stats overview,\nrecent projects, and quick actions.",
+				tags: ["frontend", "ux"],
+				priority: "high"
+			},
+			{
+				id: "t2",
+				title: "API rate limiting",
+				tags: ["backend"],
+				priority: "medium"
+			},
+			{
+				id: "t3",
+				title: "E2E test suite",
+				description: "Cover critical user flows:\n- Login/signup\n- Project CRUD\n- Team management\n- Billing",
+				tags: ["testing"],
+				priority: "high"
+			},
+			{
+				id: "t4",
+				title: "Webhook support",
+				tags: ["backend", "api"]
+			}
+		]
+	},
+	{
+		id: "progress",
+		title: "In Progress",
+		cards: [
+			{
+				id: "p1",
+				title: "Search feature",
+				description: "Full-text search with filters.",
+				tags: ["frontend", "backend"],
+				priority: "high"
+			},
+			{
+				id: "p2",
+				title: "Fix memory leak",
+				tags: ["bug"],
+				priority: "high"
+			},
+			{
+				id: "p3",
+				title: "CI/CD pipeline",
+				description: "GitHub Actions workflow:\n- Lint + typecheck\n- Unit tests\n- E2E tests\n- Deploy to staging",
+				tags: ["devops"],
+				priority: "medium"
+			}
+		]
+	},
+	{
+		id: "done",
+		title: "Done",
+		cards: [
+			{
+				id: "d1",
+				title: "Project setup",
+				tags: ["devops"]
+			},
+			{
+				id: "d2",
+				title: "Auth system",
+				description: "Login, signup, password reset,\nOAuth providers.",
+				tags: ["backend", "security"]
+			},
+			{
+				id: "d3",
+				title: "Landing page",
+				tags: ["frontend", "design"]
+			}
+		]
+	}
+];
+function buildIndex() {
+	const index = /* @__PURE__ */ new Map();
+	for (let ci = 0; ci < columns.length; ci++) for (let ri = 0; ri < columns[ci].cards.length; ri++) {
+		const card = columns[ci].cards[ri];
+		index.set(card.id, {
+			id: card.id,
+			colIndex: ci,
+			cardIndex: ri
+		});
+	}
+	return index;
+}
+function navigate(currentId, direction, index) {
+	const pos = index.get(currentId);
+	if (!pos) return currentId;
+	switch (direction) {
+		case "up":
+			if (pos.cardIndex > 0) return columns[pos.colIndex].cards[pos.cardIndex - 1].id;
+			return currentId;
+		case "down": {
+			const col = columns[pos.colIndex];
+			if (pos.cardIndex < col.cards.length - 1) return col.cards[pos.cardIndex + 1].id;
+			return currentId;
+		}
+		case "left":
+			if (pos.colIndex > 0) {
+				const targetCol = columns[pos.colIndex - 1];
+				const targetIdx = Math.min(pos.cardIndex, targetCol.cards.length - 1);
+				return targetCol.cards[targetIdx].id;
+			}
+			return currentId;
+		case "right":
+			if (pos.colIndex < columns.length - 1) {
+				const targetCol = columns[pos.colIndex + 1];
+				const targetIdx = Math.min(pos.cardIndex, targetCol.cards.length - 1);
+				return targetCol.cards[targetIdx].id;
+			}
+			return currentId;
+	}
+}
+const tagColors = {
+	frontend: "$info",
+	backend: "$accent",
+	design: "$warning",
+	devops: "$success",
+	testing: "$primary",
+	ux: "$muted",
+	security: "$error",
+	bug: "$error",
+	api: "$primary",
+	maintenance: "$muted"
+};
+const prioritySymbols = {
+	high: {
+		symbol: "▲",
+		color: "$error"
+	},
+	medium: {
+		symbol: "◆",
+		color: "$warning"
+	},
+	low: {
+		symbol: "▽",
+		color: "$muted"
+	}
+};
+function Tag({ name }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+		color: tagColors[name] ?? "$muted",
+		dim: true,
+		children: ["#", name]
+	});
+}
+function CardView({ card, focused }) {
+	const priority = card.priority ? prioritySymbols[card.priority] : null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		testID: card.id,
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: focused ? "$warning" : "$border",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				paddingX: 1,
+				gap: 1,
+				children: [priority && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: priority.color,
+					children: priority.symbol
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					bold: focused,
+					color: focused ? "$warning" : void 0,
+					wrap: "truncate",
+					children: card.title
+				})]
+			}),
+			card.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				paddingX: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$muted",
+					dim: true,
+					wrap: "truncate",
+					children: card.description
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				gap: 1,
+				paddingX: 1,
+				children: card.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { name: tag }, tag))
+			})
+		]
+	});
+}
+function ColumnView({ column, focusedCardId }) {
+	const hasFocus = column.cards.some((c) => c.id === focusedCardId);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		flexBasis: 0,
+		borderStyle: "single",
+		borderColor: hasFocus ? "$warning" : "$border",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			backgroundColor: hasFocus ? "$warning" : void 0,
+			paddingX: 1,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				bold: true,
+				color: hasFocus ? "$warning-fg" : void 0,
+				children: column.title
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: hasFocus ? "$warning-fg" : "$muted",
+				children: [
+					" (",
+					column.cards.length,
+					")"
+				]
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			flexGrow: 1,
+			children: column.cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardView, {
+				card,
+				focused: card.id === focusedCardId
+			}, card.id))
+		})]
+	});
+}
+function StatusBar({ focusedId }) {
+	let focusedColumn = null;
+	let focusedCard = null;
+	for (const col of columns) {
+		const card = col.cards.find((c) => c.id === focusedId);
+		if (card) {
+			focusedColumn = col.title;
+			focusedCard = card;
+			break;
+		}
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		paddingX: 1,
+		gap: 2,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$muted",
+				dim: true,
+				children: "←↑↓→/hjkl navigate"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$muted",
+				dim: true,
+				children: "q quit"
+			}),
+			focusedCard && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$border",
+					children: "│"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$warning",
+					children: focusedColumn
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$muted",
+					children: "→"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: focusedCard.title })
+			] })
+		]
+	});
+}
+function SpatialFocusBoard() {
+	const [focusedId, setFocusedId] = useState("b1");
+	const index = useMemo(() => buildIndex(), []);
+	useInput$1((input, key) => {
+		if (input === "q") return "exit";
+		const hasArrow = key.upArrow || key.downArrow || key.leftArrow || key.rightArrow;
+		const dir = key.upArrow ? "up" : key.downArrow ? "down" : key.leftArrow ? "left" : key.rightArrow ? "right" : !hasArrow && input === "k" ? "up" : !hasArrow && input === "j" ? "down" : !hasArrow && input === "h" ? "left" : !hasArrow && input === "l" ? "right" : null;
+		if (dir) setFocusedId((id) => navigate(id, dir, index));
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		height: "100%",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				marginBottom: 1,
+				paddingX: 1,
+				gap: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					bold: true,
+					color: "$warning",
+					children: "Spatial Focus"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: "$muted",
+					children: "— arrow keys / hjkl navigate between cards across columns"
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexGrow: 1,
+				flexDirection: "row",
+				gap: 1,
+				overflow: "hidden",
+				children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnView, {
+					column,
+					focusedCardId: focusedId
+				}, column.id))
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBar, { focusedId })
+		]
+	});
+}
+const meta = {
+	name: "Spatial Focus",
+	description: "Kanban board with spatial navigation — arrow keys / hjkl move between cards across columns",
+	demo: true,
+	features: [
+		"spatial navigation",
+		"kanban layout",
+		"varied card heights",
+		"column focus tracking"
+	]
+};
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		await _usingCtx$1.u(await run(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpatialFocusBoard, {}), { mode: "fullscreen" })).waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };

package/dist/apps/task-list.mjs

@@ -0,0 +1,258 @@
+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 { useMemo, useState } from "react";
+import { Box, Kbd, Muted, Text, createTerm, render, useApp, useInput } from "silvery";
+//#region apps/task-list.tsx
+/**
+* Task List Example
+*
+* A scrollable task list demonstrating:
+* - 50+ items for scrolling demonstration
+* - overflow="hidden" with manual scroll state
+* - Toggle task completion with space
+* - Variable height items (some with subtasks)
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Task List",
+	description: "Scrollable list with priority badges, toggles, and expandable subtasks",
+	features: [
+		"ListView",
+		"variable estimateHeight",
+		"Box overflow"
+	]
+};
+function generateTasks(count) {
+	const priorities = [
+		"high",
+		"medium",
+		"low"
+	];
+	const taskTemplates = [
+		"Review pull request",
+		"Update documentation",
+		"Fix bug in authentication",
+		"Implement new feature",
+		"Write unit tests",
+		"Refactor legacy code",
+		"Update dependencies",
+		"Create API endpoint",
+		"Design database schema",
+		"Optimize performance",
+		"Add error handling",
+		"Setup CI/CD pipeline",
+		"Write integration tests",
+		"Code review feedback",
+		"Deploy to staging"
+	];
+	const subtaskTemplates = [
+		[
+			"Research solutions",
+			"Implement changes",
+			"Test thoroughly"
+		],
+		["Check requirements", "Update code"],
+		[
+			"Review with team",
+			"Make adjustments",
+			"Get approval",
+			"Merge"
+		]
+	];
+	return Array.from({ length: count }, (_, i) => ({
+		id: i + 1,
+		title: `${taskTemplates[i % taskTemplates.length]} #${Math.floor(i / taskTemplates.length) + 1}`,
+		completed: Math.random() > .7,
+		priority: priorities[i % 3],
+		subtasks: i % 5 === 0 ? subtaskTemplates[i % subtaskTemplates.length] : void 0
+	}));
+}
+function PriorityBadge({ priority }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+		color: {
+			high: "$error",
+			medium: "$warning",
+			low: "$success"
+		}[priority],
+		bold: true,
+		children: [
+			"[",
+			{
+				high: "!!!",
+				medium: "!!",
+				low: "!"
+			}[priority],
+			"]"
+		]
+	});
+}
+function TaskItem({ task, isSelected, isExpanded }) {
+	const checkbox = task.completed ? "[x]" : "[ ]";
+	const hasSubtasks = task.subtasks && task.subtasks.length > 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [
+			isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				backgroundColor: "$primary",
+				color: "$primary-fg",
+				children: [
+					" ",
+					checkbox,
+					" ",
+					task.title,
+					" "
+				]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				strikethrough: task.completed,
+				dim: task.completed,
+				children: [
+					checkbox,
+					" ",
+					task.title
+				]
+			}),
+			" ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriorityBadge, { priority: task.priority }),
+			hasSubtasks && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				dim: true,
+				children: [
+					" (",
+					task.subtasks.length,
+					" subtasks)"
+				]
+			})
+		] }), hasSubtasks && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			flexDirection: "column",
+			marginLeft: 4,
+			children: task.subtasks.map((subtask, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				dim: true,
+				children: ["- ", subtask]
+			}, idx))
+		})]
+	});
+}
+function StatusBar({ tasks, cursor, scrollOffset, visibleCount }) {
+	const completed = tasks.filter((t) => t.completed).length;
+	const total = tasks.length;
+	const percent = Math.round(completed / total * 100);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		justifyContent: "space-between",
+		children: [/* @__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: "space" }),
+			" toggle ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "enter" }),
+			" expand ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }),
+			" quit"
+		] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+			" ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				bold: true,
+				children: completed
+			}),
+			"/",
+			total,
+			" (",
+			percent,
+			"%) | ",
+			cursor + 1,
+			"/",
+			total,
+			" "
+		] })]
+	});
+}
+function TaskList() {
+	const { exit } = useApp();
+	const [tasks, setTasks] = useState(() => generateTasks(60));
+	const [cursor, setCursor] = useState(0);
+	const [expandedTasks, setExpandedTasks] = useState(/* @__PURE__ */ new Set());
+	const visibleCount = 15;
+	const scrollOffset = useMemo(() => {
+		const halfVisible = Math.floor(visibleCount / 2);
+		const maxOffset = Math.max(0, tasks.length - visibleCount);
+		let offset = cursor - halfVisible;
+		offset = Math.max(0, Math.min(offset, maxOffset));
+		return offset;
+	}, [
+		cursor,
+		visibleCount,
+		tasks.length
+	]);
+	const visibleTasks = useMemo(() => {
+		return tasks.slice(scrollOffset, scrollOffset + visibleCount);
+	}, [
+		tasks,
+		scrollOffset,
+		visibleCount
+	]);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+		if (key.upArrow || input === "k") setCursor((prev) => Math.max(0, prev - 1));
+		if (key.downArrow || input === "j") setCursor((prev) => Math.min(tasks.length - 1, prev + 1));
+		if (key.pageUp) setCursor((prev) => Math.max(0, prev - visibleCount));
+		if (key.pageDown) setCursor((prev) => Math.min(tasks.length - 1, prev + visibleCount));
+		if (key.home) setCursor(0);
+		if (key.end) setCursor(tasks.length - 1);
+		if (input === " ") setTasks((prev) => prev.map((task, idx) => idx === cursor ? {
+			...task,
+			completed: !task.completed
+		} : task));
+		if (key.return || input === "e") {
+			const taskId = tasks[cursor]?.id;
+			if (taskId !== void 0 && tasks[cursor]?.subtasks) setExpandedTasks((prev) => {
+				const next = new Set(prev);
+				if (next.has(taskId)) next.delete(taskId);
+				else next.add(taskId);
+				return next;
+			});
+		}
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			flexGrow: 1,
+			flexDirection: "column",
+			borderStyle: "round",
+			borderColor: "$border",
+			overflow: "hidden",
+			height: visibleCount + 2,
+			children: visibleTasks.map((task, visibleIndex) => {
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TaskItem, {
+					task,
+					isSelected: scrollOffset + visibleIndex === cursor,
+					isExpanded: expandedTasks.has(task.id)
+				}, task.id);
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBar, {
+			tasks,
+			cursor,
+			scrollOffset,
+			visibleCount
+		})]
+	});
+}
+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: "j/k navigate  space toggle  enter expand  Esc/q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TaskList, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { TaskList, main, meta };