@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/search-filter.mjs

@@ -0,0 +1,286 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
+import { useDeferredValue, useState, useTransition } from "react";
+import { Box, Kbd, Lead, Muted, Strong, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region apps/search-filter.tsx
+/**
+* Search Filter Example
+*
+* Demonstrates React concurrent features for responsive typing:
+* - useTransition for low-priority state updates
+* - useDeferredValue for deferred filtering
+* - Typing remains responsive even with heavy filtering
+*/
+const meta = {
+	name: "Search Filter",
+	description: "useTransition + useDeferredValue for responsive concurrent search",
+	features: [
+		"useDeferredValue",
+		"useTransition",
+		"useInput"
+	]
+};
+const items = [
+	{
+		id: 1,
+		name: "React Hooks Guide",
+		category: "docs",
+		tags: [
+			"react",
+			"hooks",
+			"tutorial"
+		]
+	},
+	{
+		id: 2,
+		name: "TypeScript Patterns",
+		category: "docs",
+		tags: ["typescript", "patterns"]
+	},
+	{
+		id: 3,
+		name: "Build Configuration",
+		category: "config",
+		tags: [
+			"webpack",
+			"vite",
+			"build"
+		]
+	},
+	{
+		id: 4,
+		name: "Testing Best Practices",
+		category: "docs",
+		tags: [
+			"testing",
+			"jest",
+			"vitest"
+		]
+	},
+	{
+		id: 5,
+		name: "API Documentation",
+		category: "docs",
+		tags: [
+			"api",
+			"rest",
+			"graphql"
+		]
+	},
+	{
+		id: 6,
+		name: "Database Schema",
+		category: "config",
+		tags: [
+			"database",
+			"sql",
+			"migration"
+		]
+	},
+	{
+		id: 7,
+		name: "Authentication Flow",
+		category: "docs",
+		tags: [
+			"auth",
+			"security",
+			"jwt"
+		]
+	},
+	{
+		id: 8,
+		name: "CI/CD Pipeline",
+		category: "config",
+		tags: [
+			"ci",
+			"deployment",
+			"github"
+		]
+	},
+	{
+		id: 9,
+		name: "Performance Tuning",
+		category: "docs",
+		tags: ["performance", "optimization"]
+	},
+	{
+		id: 10,
+		name: "Error Handling",
+		category: "docs",
+		tags: [
+			"errors",
+			"debugging",
+			"logging"
+		]
+	},
+	{
+		id: 11,
+		name: "State Management",
+		category: "docs",
+		tags: [
+			"state",
+			"redux",
+			"zustand"
+		]
+	},
+	{
+		id: 12,
+		name: "CSS Architecture",
+		category: "docs",
+		tags: [
+			"css",
+			"tailwind",
+			"styled"
+		]
+	},
+	{
+		id: 13,
+		name: "Security Guidelines",
+		category: "docs",
+		tags: [
+			"security",
+			"owasp",
+			"audit"
+		]
+	},
+	{
+		id: 14,
+		name: "Deployment Scripts",
+		category: "config",
+		tags: [
+			"deploy",
+			"docker",
+			"k8s"
+		]
+	},
+	{
+		id: 15,
+		name: "Monitoring Setup",
+		category: "config",
+		tags: [
+			"monitoring",
+			"metrics",
+			"logs"
+		]
+	}
+];
+function SearchInput({ value, onChange }) {
+	return /* @__PURE__ */ jsxs(Box, { children: [
+		/* @__PURE__ */ jsx(Strong, {
+			color: "$primary",
+			children: "Search: "
+		}),
+		/* @__PURE__ */ jsx(Text, { children: value }),
+		/* @__PURE__ */ jsx(Text, {
+			dim: true,
+			children: "|"
+		})
+	] });
+}
+function FilteredList({ query, isPending }) {
+	const filtered = items.filter((item) => {
+		const searchLower = query.toLowerCase();
+		return item.name.toLowerCase().includes(searchLower) || item.category.toLowerCase().includes(searchLower) || item.tags.some((tag) => tag.toLowerCase().includes(searchLower));
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginTop: 1,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				marginBottom: 1,
+				children: /* @__PURE__ */ jsxs(Muted, { children: [
+					filtered.length,
+					" results",
+					isPending && " (filtering...)"
+				] })
+			}),
+			filtered.map((item) => /* @__PURE__ */ jsxs(Box, {
+				marginBottom: 1,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: item.name
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						dim: true,
+						children: [
+							" [",
+							item.category,
+							"]"
+						]
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						color: "$muted",
+						children: [" ", item.tags.join(", ")]
+					})
+				]
+			}, item.id)),
+			filtered.length === 0 && /* @__PURE__ */ jsx(Lead, { children: "No matches found" })
+		]
+	});
+}
+function SearchApp() {
+	const { exit } = useApp();
+	const [query, setQuery] = useState("");
+	const deferredQuery = useDeferredValue(query);
+	const [isPending, startTransition] = useTransition();
+	useInput((input, key) => {
+		if (key.escape) {
+			exit();
+			return;
+		}
+		if (key.backspace || key.delete) {
+			startTransition(() => {
+				setQuery((prev) => prev.slice(0, -1));
+			});
+			return;
+		}
+		if (input && !key.ctrl && !key.meta) startTransition(() => {
+			setQuery((prev) => prev + input);
+		});
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ jsx(SearchInput, {
+				value: query,
+				onChange: setQuery
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexGrow: 1,
+				children: /* @__PURE__ */ jsx(FilteredList, {
+					query: deferredQuery,
+					isPending
+				})
+			}),
+			/* @__PURE__ */ jsxs(Muted, { children: [
+				" ",
+				/* @__PURE__ */ jsx(Kbd, { children: "type" }),
+				" to search ",
+				/* @__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: "type to search  Esc quit",
+			children: /* @__PURE__ */ jsx(SearchApp, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { SearchApp, main, meta };

package/dist/apps/selection.mjs

@@ -0,0 +1,354 @@
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { useCallback, useState } from "react";
+import { Box, Text } from "silvery";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { run, useInput as useInput$1 } from "silvery/runtime";
+//#region apps/selection.tsx
+/**
+* Selection Model Demo
+*
+* Demonstrates the silvery selection model from docs/design/selection-model.md:
+* - Node selection (click, j/k)
+* - Multi-select (Cmd+click toggle, Shift+j/k extend)
+* - Text editing (Enter → edit, Escape → node mode)
+* - Mode ladder: text ──Esc──► node ──Esc──► board
+* - Live status bar showing Selection state
+*
+* Run: bun examples/apps/selection.tsx
+*/
+const S = {
+	cursor: (sel) => sel.nodes[0],
+	anchor: (sel) => sel.nodes.at(-1),
+	ids: (sel) => new Set(sel.nodes),
+	includes: (sel, id) => sel.nodes.includes(id),
+	isEditing: (sel) => !!sel.text,
+	inputMode: (sel) => !sel ? "board" : sel.text ? "text" : "node",
+	select: (id) => ({ nodes: [id] }),
+	toggle(sel, id) {
+		if (sel.nodes.includes(id)) {
+			const rest = sel.nodes.filter((n) => n !== id);
+			return rest.length > 0 ? { nodes: rest } : void 0;
+		}
+		return { nodes: [id, ...sel.nodes] };
+	},
+	extend(sel, id, allIds) {
+		const anchorIdx = allIds.indexOf(S.anchor(sel));
+		const targetIdx = allIds.indexOf(id);
+		if (anchorIdx < 0 || targetIdx < 0) return sel;
+		const lo = Math.min(anchorIdx, targetIdx);
+		const hi = Math.max(anchorIdx, targetIdx);
+		const range = allIds.slice(lo, hi + 1);
+		return { nodes: targetIdx <= anchorIdx ? range : [...range].reverse() };
+	},
+	areaSelect(_sel, hitIds, mode) {
+		if (mode === "replace") return hitIds.length > 0 ? { nodes: hitIds } : void 0;
+		let result = _sel;
+		for (const id of hitIds) result = result ? S.toggle(result, id) : S.select(id);
+		return result;
+	},
+	clear: () => void 0,
+	collapseToCursor(sel) {
+		return { nodes: [sel.nodes[0]] };
+	},
+	edit(sel, offset) {
+		return {
+			...sel,
+			text: [{
+				nodeId: sel.nodes[0],
+				offset
+			}]
+		};
+	},
+	stopEditing(sel) {
+		const { text: _, ...rest } = sel;
+		return rest;
+	}
+};
+const ITEMS = [
+	{
+		id: "inbox",
+		label: "Inbox"
+	},
+	{
+		id: "today",
+		label: "Today"
+	},
+	{
+		id: "next",
+		label: "Next Actions"
+	},
+	{
+		id: "projects",
+		label: "Projects"
+	},
+	{
+		id: "waiting",
+		label: "Waiting For"
+	},
+	{
+		id: "someday",
+		label: "Someday / Maybe"
+	},
+	{
+		id: "reference",
+		label: "Reference"
+	},
+	{
+		id: "calendar",
+		label: "Calendar"
+	},
+	{
+		id: "review",
+		label: "Weekly Review"
+	},
+	{
+		id: "done",
+		label: "Done"
+	}
+];
+const ALL_IDS = ITEMS.map((i) => i.id);
+function ItemRow({ item, sel, onSelect }) {
+	const isCursor = sel ? S.cursor(sel) === item.id : false;
+	const isAnchor = sel ? S.anchor(sel) === item.id : false;
+	const isSelected = sel ? S.includes(sel, item.id) : false;
+	const isEditing = isCursor && sel ? S.isEditing(sel) : false;
+	const marker = isCursor ? "►" : isSelected ? "●" : " ";
+	const anchorMark = isAnchor && !isCursor ? " ⚓" : "";
+	return /* @__PURE__ */ jsxs(Box, {
+		onClick: (e) => onSelect(item.id, e.metaKey, e.shiftKey),
+		onDoubleClick: () => onSelect(item.id, false, false),
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				color: isSelected ? "$primary" : "$muted",
+				children: [marker, " "]
+			}),
+			isEditing ? /* @__PURE__ */ jsxs(Text, {
+				backgroundColor: "$surface",
+				color: "$text",
+				bold: true,
+				children: [
+					" ",
+					item.label,
+					/* @__PURE__ */ jsx(Text, {
+						color: "$primary",
+						children: "│"
+					}),
+					" "
+				]
+			}) : /* @__PURE__ */ jsx(Text, {
+				bold: isCursor,
+				color: isCursor ? "$primary" : isSelected ? "$primary" : "$text",
+				dim: !isSelected && !isCursor,
+				children: item.label
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$muted",
+				dim: true,
+				children: anchorMark
+			})
+		]
+	});
+}
+function StatusBar({ sel }) {
+	const mode = S.inputMode(sel);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "single",
+		borderColor: "$border",
+		paddingX: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			gap: 2,
+			children: [/* @__PURE__ */ jsx(Text, {
+				color: mode === "text" ? "$success" : mode === "node" ? "$primary" : "$muted",
+				bold: true,
+				children: mode.toUpperCase()
+			}), sel && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs(Text, {
+					color: "$muted",
+					children: ["cursor=", /* @__PURE__ */ jsx(Text, {
+						color: "$primary",
+						children: S.cursor(sel)
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					color: "$muted",
+					children: ["anchor=", /* @__PURE__ */ jsx(Text, {
+						color: "$text",
+						children: S.anchor(sel)
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Text, {
+					color: "$muted",
+					children: ["selected=", /* @__PURE__ */ jsx(Text, {
+						color: "$text",
+						children: sel.nodes.length
+					})]
+				}),
+				sel.text && /* @__PURE__ */ jsxs(Text, {
+					color: "$muted",
+					children: ["text=", /* @__PURE__ */ jsxs(Text, {
+						color: "$success",
+						children: ["offset ", sel.text[0].offset]
+					})]
+				})
+			] })]
+		}), /* @__PURE__ */ jsx(Text, {
+			color: "$muted",
+			dim: true,
+			children: "j/k nav · Enter edit · Esc back · Shift+j/k extend · Cmd+click toggle · q quit"
+		})]
+	});
+}
+function SelectionDemo() {
+	const [sel, setSel] = useState(void 0);
+	const [editTexts, setEditTexts] = useState(() => Object.fromEntries(ITEMS.map((i) => [i.id, i.label])));
+	const cursorIndex = sel ? ALL_IDS.indexOf(S.cursor(sel)) : -1;
+	const handleSelect = useCallback((id, meta, shift) => {
+		setSel((prev) => {
+			if (meta && prev) return S.toggle(prev, id);
+			if (shift && prev) return S.extend(prev, id, ALL_IDS);
+			return S.select(id);
+		});
+	}, []);
+	useInput$1((input, key) => {
+		if (input === "q" || key.escape && !sel) return "exit";
+		const mode = S.inputMode(sel);
+		if (mode === "text" && sel) {
+			if (key.escape) {
+				setSel(S.stopEditing(sel));
+				return;
+			}
+			if (key.backspace && sel.text) {
+				const nodeId = S.cursor(sel);
+				const offset = sel.text[0].offset;
+				if (offset > 0) {
+					setEditTexts((prev) => ({
+						...prev,
+						[nodeId]: prev[nodeId].slice(0, offset - 1) + prev[nodeId].slice(offset)
+					}));
+					setSel(S.edit(sel, offset - 1));
+				}
+				return;
+			}
+			if (key.leftArrow && sel.text) {
+				setSel(S.edit(sel, Math.max(0, sel.text[0].offset - 1)));
+				return;
+			}
+			if (key.rightArrow && sel.text) {
+				const maxLen = editTexts[S.cursor(sel)]?.length ?? 0;
+				setSel(S.edit(sel, Math.min(maxLen, sel.text[0].offset + 1)));
+				return;
+			}
+			if (input && !key.ctrl && !key.meta && sel.text) {
+				const nodeId = S.cursor(sel);
+				const offset = sel.text[0].offset;
+				setEditTexts((prev) => ({
+					...prev,
+					[nodeId]: prev[nodeId].slice(0, offset) + input + prev[nodeId].slice(offset)
+				}));
+				setSel(S.edit(sel, offset + input.length));
+				return;
+			}
+			return;
+		}
+		if (mode === "node" && sel) {
+			if (key.escape) {
+				if (sel.nodes.length > 1) setSel(S.collapseToCursor(sel));
+				else setSel(S.clear());
+				return;
+			}
+			if (key.return) {
+				const text = editTexts[S.cursor(sel)] ?? "";
+				setSel(S.edit(sel, text.length));
+				return;
+			}
+			if (input === "j" || key.downArrow) {
+				const next = Math.min(ALL_IDS.length - 1, cursorIndex + 1);
+				if (key.shift) setSel(S.extend(sel, ALL_IDS[next], ALL_IDS));
+				else setSel(S.select(ALL_IDS[next]));
+				return;
+			}
+			if (input === "k" || key.upArrow) {
+				const next = Math.max(0, cursorIndex - 1);
+				if (key.shift) setSel(S.extend(sel, ALL_IDS[next], ALL_IDS));
+				else setSel(S.select(ALL_IDS[next]));
+				return;
+			}
+			return;
+		}
+		if (input === "j" || key.downArrow) setSel(S.select(ALL_IDS[0]));
+		if (input === "k" || key.upArrow) setSel(S.select(ALL_IDS.at(-1)));
+	});
+	const displayItems = ITEMS.map((item) => ({
+		...item,
+		label: editTexts[item.id] ?? item.label
+	}));
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		padding: 1,
+		height: "100%",
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				marginBottom: 1,
+				children: [/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					color: "$primary",
+					children: "Selection Model Demo"
+				}), /* @__PURE__ */ jsx(Text, {
+					color: "$muted",
+					children: " — silvery reactive selection"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				flexGrow: 1,
+				borderStyle: "round",
+				borderColor: "$border",
+				overflow: "hidden",
+				children: displayItems.map((item) => /* @__PURE__ */ jsx(ItemRow, {
+					item,
+					sel,
+					onSelect: handleSelect
+				}, item.id))
+			}),
+			/* @__PURE__ */ jsx(StatusBar, { sel }),
+			/* @__PURE__ */ jsx(Box, {
+				marginTop: 1,
+				flexDirection: "column",
+				children: /* @__PURE__ */ jsxs(Text, {
+					color: "$muted",
+					dim: true,
+					children: [
+						"nodes=[",
+						sel?.nodes.join(", ") ?? "",
+						"]"
+					]
+				})
+			})
+		]
+	});
+}
+const meta = {
+	name: "Selection",
+	description: "Reactive selection model — node/text modes, multi-select, mode ladder",
+	demo: true,
+	features: [
+		"Selection model",
+		"mode ladder",
+		"multi-select",
+		"text editing"
+	]
+};
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		await _usingCtx$1.u(await run(/* @__PURE__ */ jsx(SelectionDemo, {}), { mode: "fullscreen" })).waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };