@silvery/examples 0.17.3 → 0.17.4

package/dist/apps/text-selection-demo.mjs

@@ -0,0 +1,254 @@
+import { W as CapabilityRegistryContext } from "../src-BTEVGpd9.mjs";
+import { t as _usingCtx } from "../usingCtx-CsEf0xO3.mjs";
+import { a as createApp, i as pipe, n as withTerminal, r as withReact, t as withDomEvents } from "../plugins-D1KtkT4a.mjs";
+import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
+import { t as ExampleBanner } from "../_banner-DLPxCqVy.mjs";
+import { useContext, useSyncExternalStore } from "react";
+import { Box, H1, H2, HR, Kbd, Muted, Small, Strong, Text } from "silvery";
+//#region ../packages/ag-react/src/hooks/useSelection.ts
+/**
+* useSelection — React hook for accessing the selection feature from the capability registry.
+*
+* Reads SELECTION_CAPABILITY from the app's CapabilityRegistry via context.
+* Returns `undefined` when the selection feature is not installed (e.g., simple
+* run() apps without pipe() composition, or when withDomEvents is not used).
+*
+* When installed, returns the current TerminalSelectionState and re-renders
+* reactively on selection changes via useSyncExternalStore.
+*
+* This is the recommended hook for reading selection state. It replaces the
+* older useTerminalSelection/TerminalSelectionProvider pattern with a simpler
+* capability-based lookup.
+*/
+const SELECTION_CAPABILITY = Symbol.for("silvery.selection");
+const noopSubscribe = (_listener) => () => {};
+const getUndefined = () => void 0;
+/**
+* Access the current selection state from the capability registry.
+*
+* Returns `undefined` when:
+* - No CapabilityRegistryContext is provided (simple run() apps)
+* - SELECTION_CAPABILITY is not registered (withDomEvents not used or selection disabled)
+*
+* Returns `TerminalSelectionState` when selection is installed:
+* - `state.range` — current SelectionRange or null (idle)
+* - `state.selecting` — true while mouse button is held
+* - `state.source` — "mouse" | "keyboard" | null
+*/
+function useSelection() {
+	const feature = useContext(CapabilityRegistryContext)?.get(SELECTION_CAPABILITY);
+	return useSyncExternalStore(feature ? (listener) => feature.subscribe(listener) : noopSubscribe, feature ? () => feature.state : getUndefined);
+}
+//#endregion
+//#region apps/text-selection-demo.tsx
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Text Selection",
+	description: "Real selection via useSelection hook, userSelect modes, live state readout",
+	demo: true,
+	features: [
+		"useSelection()",
+		"userSelect prop",
+		"CapabilityRegistry",
+		"mouse drag selection"
+	]
+};
+function SelectableTextPanel() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$border",
+		paddingX: 1,
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Selectable Text" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "userSelect=\"text\" (default)" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Drag your mouse over this text to select it." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Multi-line selections work across paragraphs." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$muted",
+				children: "The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs."
+			})
+		]
+	});
+}
+function NonSelectablePanel() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$border",
+		paddingX: 1,
+		flexGrow: 1,
+		userSelect: "none",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Non-Selectable" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "userSelect=\"none\"" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "This area cannot be selected by mouse drag." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Click events still work normally here." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Hold Alt and drag to override and select anyway." })
+		]
+	});
+}
+function ContainedPanel() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$warning",
+		paddingX: 1,
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
+				color: "$warning",
+				children: "Contained Selection"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "userSelect=\"contain\"" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				borderStyle: "round",
+				borderColor: "$primary",
+				paddingX: 1,
+				userSelect: "contain",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						bold: true,
+						color: "$primary",
+						children: "Selection Boundary"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Selection cannot escape this container." }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Try dragging past the border — it clips." }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "$success",
+						children: "Useful for modals, side panes, overlays."
+					})
+				]
+			})
+		]
+	});
+}
+function SelectionStatePanel() {
+	const selection = useSelection();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$info",
+		paddingX: 1,
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, {
+				color: "$info",
+				children: "Selection State"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "Live readout from useSelection()" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { height: 1 }),
+			!selection ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$muted",
+				children: "useSelection() returned undefined — feature not installed"
+			}) : selection.range ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					gap: 1,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Status:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "$success",
+						children: selection.selecting ? "Selecting..." : "Selected"
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					gap: 1,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Source:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: selection.source ?? "unknown" })]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					gap: 1,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Anchor:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
+						"(",
+						selection.range.anchor.col,
+						", ",
+						selection.range.anchor.row,
+						")"
+					] })]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					gap: 1,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Head:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
+						"(",
+						selection.range.head.col,
+						", ",
+						selection.range.head.row,
+						")"
+					] })]
+				})
+			] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$muted",
+				children: "No active selection — drag to select text"
+			})
+		]
+	});
+}
+function StatusBar() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		flexDirection: "row",
+		gap: 2,
+		paddingX: 1,
+		flexShrink: 0,
+		userSelect: "none",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Drag" }),
+			" select ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Alt+Drag" }),
+			" force select ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Ctrl+C" }),
+			" quit"
+		] })
+	});
+}
+function TextSelectionDemo() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		gap: 1,
+		height: "100%",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+				color: "$primary",
+				children: "Text Selection Demo"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: " — real selection via useSelection()" })] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 1,
+				flexGrow: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectableTextPanel, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NonSelectablePanel, {})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 1,
+				flexGrow: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContainedPanel, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionStatePanel, {})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBar, {})
+		]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const app = pipe(createApp(() => () => ({})), withReact(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+			meta,
+			controls: "Drag select  Alt+Drag force select  Ctrl+C quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextSelectionDemo, {})
+		})), withTerminal(process, { mouse: true }), withDomEvents());
+		await _usingCtx$1.u(await app.run()).waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };

package/dist/apps/textarea.mjs

@@ -0,0 +1,178 @@
+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 { useState } from "react";
+import { Box, H1, Muted, Strong, Text, TextArea, createTerm, render, useApp, useInput } from "silvery";
+//#region apps/textarea.tsx
+/**
+* TextArea Example — Split-Pane Note Editor
+*
+* A note-taking app demonstrating:
+* - Multi-line text input with word wrapping and pre-filled content
+* - Split-pane layout: editor (2/3) + saved notes sidebar (1/3)
+* - Tab focus cycling between panes
+* - Cursor movement (arrow keys, Home/End, Ctrl+A/E)
+* - Kill operations (Ctrl+K, Ctrl+U)
+* - Word/character stats in the header
+* - Submit with Ctrl+Enter to collect notes
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "TextArea",
+	description: "Split-pane note editor with word wrap, kill ring, and note collection",
+	features: [
+		"TextArea",
+		"Split pane layout",
+		"Ctrl+Enter submit",
+		"Tab focus cycling"
+	]
+};
+const INITIAL_CONTENT = `# Release Notes — Silvery v0.1
+
+## New Features
+
+- **Flexbox layout engine** — CSS-compatible sizing,
+  wrapping, and gap support via Flexily
+- **38 built-in color palettes** — from Dracula
+  to Solarized, Nord to Catppuccin
+- **Incremental rendering** — only changed cells
+  are repainted, no full-screen flicker
+
+## Breaking Changes
+
+- Dropped Node.js 18 support (now requires >=20)
+- Renamed \`useTerminal()\` to \`useTerm()\`
+
+## Performance
+
+Benchmark results on an M4 MacBook Pro:
+  Initial render:  2.1ms (80x24)
+  Incremental:     0.3ms (typical diff)
+  Layout:          0.8ms (1000 nodes)
+
+Thanks to all contributors!`;
+function NoteEditor() {
+	const { exit } = useApp();
+	const [notes, setNotes] = useState([]);
+	const [value, setValue] = useState(INITIAL_CONTENT);
+	const [focusIndex, setFocusIndex] = useState(0);
+	useInput((input, key) => {
+		if (key.escape) exit();
+		if (key.tab && !key.shift) setFocusIndex((prev) => (prev + 1) % 2);
+		if (key.tab && key.shift) setFocusIndex((prev) => (prev - 1 + 2) % 2);
+	});
+	function handleSubmit(text) {
+		if (text.trim()) {
+			setNotes((prev) => [...prev, text.trim()]);
+			setValue("");
+		}
+	}
+	const lines = value.split("\n").length;
+	const chars = value.length;
+	const words = value.split(/\s+/).filter(Boolean).length;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		padding: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "row",
+			gap: 1,
+			flexGrow: 1,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				borderStyle: "round",
+				borderColor: focusIndex === 0 ? "$primary" : "$border",
+				flexDirection: "column",
+				flexGrow: 3,
+				flexBasis: 0,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						paddingX: 1,
+						justifyContent: "space-between",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: "Editor" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+							lines,
+							" lines, ",
+							words,
+							" words, ",
+							chars,
+							" chars"
+						] })]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						paddingX: 1,
+						flexGrow: 1,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+							value,
+							onChange: setValue,
+							onSubmit: handleSubmit,
+							height: 16,
+							isActive: focusIndex === 0
+						})
+					})
+				]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				borderStyle: "round",
+				borderColor: focusIndex === 1 ? "$primary" : "$border",
+				flexDirection: "column",
+				flexGrow: 2,
+				flexBasis: 0,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						paddingX: 1,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: "Notes" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+							" (",
+							notes.length,
+							")"
+						] })]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						flexDirection: "column",
+						paddingX: 1,
+						overflow: "scroll",
+						flexGrow: 1,
+						children: notes.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "No notes yet." }) : notes.map((note, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "column",
+							marginBottom: 1,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								wrap: "truncate",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Strong, {
+										color: "$success",
+										children: ["#", i + 1]
+									}),
+									" ",
+									note.split("\n")[0]
+								]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+								note.split("\n").length,
+								" lines, ",
+								note.length,
+								" chars"
+							] })]
+						}, i))
+					})
+				]
+			})]
+		})
+	});
+}
+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: "Tab switch pane  Ctrl+Enter submit  Esc quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NoteEditor, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { NoteEditor, main, meta };