@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/app-todo.mjs

@@ -0,0 +1,138 @@
+import { a as createApp, i as pipe, n as withTerminal, o as useApp$1, r as withReact } from "../plugins-CT0DdV_E.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import "react";
+import { Box, Kbd, Muted, Text } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/app-todo.tsx
+const meta = {
+	name: "Todo App",
+	description: "Layer 3: pipe() + createApp() + withReact() + withTerminal()",
+	features: [
+		"pipe()",
+		"createApp()",
+		"withReact()",
+		"withTerminal()"
+	]
+};
+function TodoItem({ todo, isCursor }) {
+	return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+		color: isCursor ? "$primary" : void 0,
+		children: isCursor ? "› " : "  "
+	}), /* @__PURE__ */ jsxs(Text, {
+		color: todo.completed ? "$success" : void 0,
+		strikethrough: todo.completed,
+		children: [
+			todo.completed ? "✓" : "○",
+			" ",
+			todo.text
+		]
+	})] });
+}
+function TodoList() {
+	const todos = useApp$1((s) => s.todos);
+	const cursor = useApp$1((s) => s.cursor);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [todos.map((todo, i) => /* @__PURE__ */ jsx(TodoItem, {
+			todo,
+			isCursor: i === cursor
+		}, todo.id)), todos.length === 0 && /* @__PURE__ */ jsx(Muted, { children: "No todos. Press 'a' to add one." })]
+	});
+}
+function TodoApp() {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsx(TodoList, {}),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+				" move ",
+				/* @__PURE__ */ jsx(Kbd, { children: "x" }),
+				" toggle ",
+				/* @__PURE__ */ jsx(Kbd, { children: "a" }),
+				" add ",
+				/* @__PURE__ */ jsx(Kbd, { children: "d" }),
+				" delete ",
+				/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+				" quit"
+			] })
+		]
+	});
+}
+const app = pipe(createApp(() => (set, get) => ({
+	todos: [
+		{
+			id: 1,
+			text: "Learn silvery plugin composition",
+			completed: true
+		},
+		{
+			id: 2,
+			text: "Build an app with pipe()",
+			completed: false
+		},
+		{
+			id: 3,
+			text: "Ship to production",
+			completed: false
+		}
+	],
+	cursor: 0,
+	nextId: 4,
+	addTodo: (text) => set((s) => ({
+		todos: [...s.todos, {
+			id: s.nextId,
+			text,
+			completed: false
+		}],
+		nextId: s.nextId + 1
+	})),
+	toggleTodo: () => set((s) => ({ todos: s.todos.map((t, i) => i === s.cursor ? {
+		...t,
+		completed: !t.completed
+	} : t) })),
+	deleteTodo: () => set((s) => {
+		const newTodos = s.todos.filter((_, i) => i !== s.cursor);
+		return {
+			todos: newTodos,
+			cursor: Math.min(s.cursor, newTodos.length - 1)
+		};
+	}),
+	moveCursor: (delta) => set((s) => ({ cursor: Math.max(0, Math.min(s.cursor + delta, s.todos.length - 1)) }))
+}), { "term:key": (data, ctx) => {
+	const { input: k, key } = data;
+	const state = ctx.get();
+	if (key.escape) return "exit";
+	switch (k) {
+		case "j":
+			state.moveCursor(1);
+			break;
+		case "k":
+			state.moveCursor(-1);
+			break;
+		case "x":
+			state.toggleTodo();
+			break;
+		case "d":
+			if (state.todos.length > 0) state.deleteTodo();
+			break;
+		case "a":
+			state.addTodo(`New todo ${state.nextId}`);
+			break;
+		case "q": return "exit";
+	}
+} }), withReact(/* @__PURE__ */ jsx(ExampleBanner, {
+	meta,
+	controls: "j/k move  x toggle  a add  d delete  Esc/q quit",
+	children: /* @__PURE__ */ jsx(TodoApp, {})
+})), withTerminal(process));
+async function main() {
+	const handle = await app.run();
+	await handle.waitUntilExit();
+	console.log("\nFinal state:", handle.store.getState().todos.length, "todos");
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };

package/dist/apps/async-data.mjs

@@ -0,0 +1,203 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { Suspense, use, useState } from "react";
+import { Box, ErrorBoundary, H1, Kbd, Muted, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/async-data.tsx
+/**
+* Async Data Example
+*
+* Demonstrates React Suspense for async data loading:
+* - Suspense boundaries with fallback UI
+* - Multiple independent suspending components
+* - Error handling with ErrorBoundary
+*/
+const meta = {
+	name: "Async Data",
+	description: "React Suspense with independent data sources and error boundaries",
+	features: [
+		"React Suspense",
+		"use() hook",
+		"ErrorBoundary"
+	]
+};
+const cache = /* @__PURE__ */ new Map();
+function fetchData(key, ms, data) {
+	if (!cache.has(key)) cache.set(key, new Promise((resolve) => setTimeout(() => resolve(data), ms)));
+	return cache.get(key);
+}
+function clearCache() {
+	cache.clear();
+}
+function UserProfile() {
+	const user = use(fetchData("user", 1500, {
+		name: "Alice Chen",
+		email: "alice@example.com",
+		role: "Developer"
+	}));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$success",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsx(H1, {
+				color: "$success",
+				children: "User Profile"
+			}),
+			/* @__PURE__ */ jsxs(Text, { children: ["Name: ", user.name] }),
+			/* @__PURE__ */ jsxs(Text, { children: ["Email: ", user.email] }),
+			/* @__PURE__ */ jsxs(Text, { children: ["Role: ", user.role] })
+		]
+	});
+}
+function Statistics() {
+	const stats = use(fetchData("stats", 2500, {
+		projects: 12,
+		commits: 847,
+		reviews: 156
+	}));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$primary",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsx(H1, { children: "Statistics" }),
+			/* @__PURE__ */ jsxs(Text, { children: ["Projects: ", stats.projects] }),
+			/* @__PURE__ */ jsxs(Text, { children: ["Commits: ", stats.commits] }),
+			/* @__PURE__ */ jsxs(Text, { children: ["Reviews: ", stats.reviews] })
+		]
+	});
+}
+function RecentActivity() {
+	const activities = use(fetchData("activity", 3500, [
+		{
+			id: 1,
+			action: "Merged PR #423",
+			time: "2h ago"
+		},
+		{
+			id: 2,
+			action: "Reviewed PR #421",
+			time: "4h ago"
+		},
+		{
+			id: 3,
+			action: "Created issue #89",
+			time: "1d ago"
+		}
+	]));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$warning",
+		padding: 1,
+		children: [/* @__PURE__ */ jsx(H1, {
+			color: "$warning",
+			children: "Recent Activity"
+		}), activities.map((a) => /* @__PURE__ */ jsxs(Text, { children: [
+			/* @__PURE__ */ jsx(Text, {
+				dim: true,
+				children: a.time
+			}),
+			" ",
+			a.action
+		] }, a.id))]
+	});
+}
+function LoadingBox({ label }) {
+	return /* @__PURE__ */ jsx(Box, {
+		borderStyle: "round",
+		borderColor: "$border",
+		padding: 1,
+		children: /* @__PURE__ */ jsxs(Text, {
+			color: "$muted",
+			children: [
+				"Loading ",
+				label,
+				"..."
+			]
+		})
+	});
+}
+function AsyncDataApp() {
+	const { exit } = useApp();
+	const [refreshKey, setRefreshKey] = useState(0);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) {
+			exit();
+			return;
+		}
+		if (input === "r") {
+			clearCache();
+			setRefreshKey((k) => k + 1);
+		}
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexGrow: 1,
+			flexDirection: "row",
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsx(ErrorBoundary, {
+					fallback: /* @__PURE__ */ jsx(Text, {
+						color: "$error",
+						children: "User error"
+					}),
+					children: /* @__PURE__ */ jsx(Suspense, {
+						fallback: /* @__PURE__ */ jsx(LoadingBox, { label: "user" }),
+						children: /* @__PURE__ */ jsx(UserProfile, {})
+					})
+				}),
+				/* @__PURE__ */ jsx(ErrorBoundary, {
+					fallback: /* @__PURE__ */ jsx(Text, {
+						color: "$error",
+						children: "Stats error"
+					}),
+					children: /* @__PURE__ */ jsx(Suspense, {
+						fallback: /* @__PURE__ */ jsx(LoadingBox, { label: "stats" }),
+						children: /* @__PURE__ */ jsx(Statistics, {})
+					})
+				}),
+				/* @__PURE__ */ jsx(ErrorBoundary, {
+					fallback: /* @__PURE__ */ jsx(Text, {
+						color: "$error",
+						children: "Activity error"
+					}),
+					children: /* @__PURE__ */ jsx(Suspense, {
+						fallback: /* @__PURE__ */ jsx(LoadingBox, { label: "activity" }),
+						children: /* @__PURE__ */ jsx(RecentActivity, {})
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Muted, { children: [
+			" ",
+			/* @__PURE__ */ jsx(Kbd, { children: "r" }),
+			" refresh ",
+			/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+			" quit"
+		] })]
+	}, refreshKey);
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "r refresh  Esc/q quit",
+			children: /* @__PURE__ */ jsx(AsyncDataApp, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { AsyncDataApp, main, meta };

package/dist/apps/cli-wizard.mjs

@@ -0,0 +1,338 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useCallback, useEffect, useState } from "react";
+import { Box, Code, H1, Kbd, Lead, Muted, ProgressBar, SelectList, Spinner, Text, TextInput, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/cli-wizard.tsx
+/**
+* CLI Wizard Example
+*
+* A multi-step project scaffolding wizard demonstrating:
+* - SelectList for option selection with keyboard navigation
+* - TextInput for free-form text entry
+* - ProgressBar for visual progress feedback
+* - Step-by-step flow with state transitions
+*
+* Usage: bun run examples/apps/cli-wizard.tsx
+*
+* Controls:
+*   j/k or Up/Down - Navigate options (step 1)
+*   Enter          - Confirm selection / submit input
+*   Type           - Enter project name (step 2)
+*   q or Esc       - Quit (when not typing)
+*/
+const meta = {
+	name: "CLI Wizard",
+	description: "Multi-step project scaffolding wizard with selection, input, and progress",
+	demo: true,
+	features: [
+		"SelectList",
+		"TextInput",
+		"ProgressBar",
+		"Spinner",
+		"useInput()"
+	]
+};
+const FRAMEWORKS = [
+	{
+		label: "React      — A JavaScript library for building user interfaces",
+		value: "react"
+	},
+	{
+		label: "Vue        — The progressive JavaScript framework",
+		value: "vue"
+	},
+	{
+		label: "Svelte     — Cybernetically enhanced web apps",
+		value: "svelte"
+	},
+	{
+		label: "Solid      — Simple and performant reactivity",
+		value: "solid"
+	},
+	{
+		label: "Angular    — Platform for building web applications",
+		value: "angular",
+		disabled: true
+	}
+];
+const INSTALL_STEPS = [
+	"Resolving dependencies...",
+	"Downloading packages...",
+	"Linking dependencies...",
+	"Building project...",
+	"Generating types...",
+	"Setting up config...",
+	"Done!"
+];
+/** Step indicator showing current position in the wizard */
+function StepIndicator({ current, total }) {
+	return /* @__PURE__ */ jsx(Box, {
+		paddingX: 1,
+		marginBottom: 1,
+		children: Array.from({ length: total }, (_, i) => {
+			const isDone = i < current;
+			const isCurrent = i === current;
+			return /* @__PURE__ */ jsxs(Text, {
+				color: isDone ? "$success" : isCurrent ? "$primary" : "$muted",
+				bold: isCurrent,
+				children: [isDone ? "●" : isCurrent ? "○" : "○", i < total - 1 ? " ─ " : ""]
+			}, i);
+		})
+	});
+}
+/** Step 1: Framework selection */
+function FrameworkStep({ onSelect }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsx(H1, { children: "? Select a framework:" })
+			}),
+			/* @__PURE__ */ jsx(SelectList, {
+				items: FRAMEWORKS,
+				onSelect
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Lead, { children: "(Angular is coming soon)" })
+			})
+		]
+	});
+}
+/** Step 2: Project name input */
+function NameStep({ value, onChange, onSubmit, framework }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				marginBottom: 1,
+				children: [
+					/* @__PURE__ */ jsx(H1, { children: "? Project name" }),
+					/* @__PURE__ */ jsxs(Muted, { children: [
+						" (",
+						framework,
+						")"
+					] }),
+					/* @__PURE__ */ jsx(H1, { children: ":" })
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
+				color: "$muted",
+				children: "❯ "
+			}), /* @__PURE__ */ jsx(TextInput, {
+				value,
+				onChange,
+				onSubmit,
+				prompt: ""
+			})] }),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsx(Muted, { children: "Press Enter to confirm" })
+			})
+		]
+	});
+}
+/** Step 3: Installation progress */
+function InstallStep({ progress, stepIndex }) {
+	const currentStep = INSTALL_STEPS[Math.min(stepIndex, INSTALL_STEPS.length - 1)];
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				marginBottom: 1,
+				children: [/* @__PURE__ */ jsx(Spinner, { type: "dots" }), /* @__PURE__ */ jsxs(Text, {
+					bold: true,
+					color: "$warning",
+					children: [" ", "Installing dependencies..."]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsx(ProgressBar, {
+					value: progress,
+					color: "$primary",
+					label: ""
+				})
+			}),
+			/* @__PURE__ */ jsx(Muted, { children: currentStep })
+		]
+	});
+}
+/** Step 4: Completion summary */
+function DoneStep({ framework, projectName }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsxs(H1, {
+					color: "$success",
+					children: ["✔", " Project created successfully!"]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				borderStyle: "round",
+				borderColor: "$success",
+				paddingX: 2,
+				paddingY: 1,
+				children: [
+					/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "Framework: " }), /* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: framework
+					})] }),
+					/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "Project: " }), /* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: projectName
+					})] }),
+					/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "Location: " }), /* @__PURE__ */ jsxs(Text, {
+						bold: true,
+						children: [
+							"./",
+							projectName,
+							"/"
+						]
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "column",
+				marginTop: 1,
+				children: [
+					/* @__PURE__ */ jsx(Muted, { children: "Get started:" }),
+					/* @__PURE__ */ jsxs(Code, { children: [
+						"  ",
+						"cd ",
+						projectName
+					] }),
+					/* @__PURE__ */ jsxs(Code, { children: ["  ", "bun install"] }),
+					/* @__PURE__ */ jsxs(Code, { children: ["  ", "bun dev"] })
+				]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				children: /* @__PURE__ */ jsxs(Muted, { children: [
+					"Press ",
+					/* @__PURE__ */ jsx(Kbd, { children: "q" }),
+					" or ",
+					/* @__PURE__ */ jsx(Kbd, { children: "Esc" }),
+					" to exit"
+				] })
+			})
+		]
+	});
+}
+function CliWizard() {
+	const { exit } = useApp();
+	const [state, setState] = useState({
+		step: "framework",
+		framework: null,
+		projectName: "",
+		progress: 0
+	});
+	const handleFrameworkSelect = useCallback((option) => {
+		setState((prev) => ({
+			...prev,
+			step: "name",
+			framework: option.value,
+			projectName: `my-${option.value}-app`
+		}));
+	}, []);
+	const handleNameChange = useCallback((value) => {
+		setState((prev) => ({
+			...prev,
+			projectName: value
+		}));
+	}, []);
+	const handleNameSubmit = useCallback((value) => {
+		if (value.trim()) setState((prev) => ({
+			...prev,
+			step: "installing",
+			progress: 0
+		}));
+	}, []);
+	useEffect(() => {
+		if (state.step !== "installing") return;
+		const timer = setInterval(() => {
+			setState((prev) => {
+				const next = prev.progress + .08 + Math.random() * .04;
+				if (next >= 1) {
+					clearInterval(timer);
+					return {
+						...prev,
+						step: "done",
+						progress: 1
+					};
+				}
+				return {
+					...prev,
+					progress: next
+				};
+			});
+		}, 200);
+		return () => clearInterval(timer);
+	}, [state.step]);
+	useInput((input, key) => {
+		if (state.step === "name") return;
+		if (input === "q" || key.escape) exit();
+	});
+	const installStepIndex = Math.floor(state.progress * (INSTALL_STEPS.length - 1));
+	const stepNumber = state.step === "framework" ? 0 : state.step === "name" ? 1 : state.step === "installing" ? 2 : 3;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				borderStyle: "single",
+				borderColor: "$primary",
+				paddingX: 2,
+				marginBottom: 1,
+				children: [/* @__PURE__ */ jsx(H1, { children: "create-app" }), /* @__PURE__ */ jsx(Muted, { children: " v1.0.0" })]
+			}),
+			/* @__PURE__ */ jsx(StepIndicator, {
+				current: stepNumber,
+				total: 4
+			}),
+			state.step === "framework" && /* @__PURE__ */ jsx(FrameworkStep, { onSelect: handleFrameworkSelect }),
+			state.step === "name" && state.framework && /* @__PURE__ */ jsx(NameStep, {
+				value: state.projectName,
+				onChange: handleNameChange,
+				onSubmit: handleNameSubmit,
+				framework: state.framework
+			}),
+			state.step === "installing" && /* @__PURE__ */ jsx(InstallStep, {
+				progress: state.progress,
+				stepIndex: installStepIndex
+			}),
+			state.step === "done" && state.framework && /* @__PURE__ */ jsx(DoneStep, {
+				framework: state.framework,
+				projectName: state.projectName
+			})
+		]
+	});
+}
+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  Enter select  q/Esc quit",
+			children: /* @__PURE__ */ jsx(CliWizard, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { CliWizard, main, meta };