@silvery/examples 0.5.6 → 0.17.4

package/dist/apps/components.mjs

@@ -0,0 +1,864 @@
+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 { useCallback, useState } from "react";
+import { Blockquote, Box, Button, Code, CodeBlock, Em, H1, H2, H3, HR, Kbd, LI, Lead, ModalDialog, Muted, OL, P, ProgressBar, SelectList, Small, Spinner, Strong, Text, TextArea, TextInput, Toggle, UL, createTerm, render, useApp, useInput } from "silvery";
+//#region apps/components.tsx
+/**
+* Components Showcase
+*
+* A UI component gallery demonstrating silvery's built-in components:
+* - Typography: H1-H3, Strong, Muted, Small, Lead, Code, Blockquote, lists
+* - Inputs: TextInput, TextArea, SelectList, Toggle with focus cycling
+* - Display: ProgressBar, Spinner, Badge, border styles, ModalDialog
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Components",
+	description: "UI component gallery with typography, inputs, and dialogs",
+	demo: true,
+	features: [
+		"Typography",
+		"TextInput",
+		"SelectList",
+		"ModalDialog",
+		"ProgressBar",
+		"focus ring"
+	]
+};
+function TypographyTab({ scrollOffset }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		gap: 1,
+		paddingX: 1,
+		overflow: "scroll",
+		scrollOffset,
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: "Getting Started with Silvery" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "Build modern terminal UIs with React — layout feedback, semantic theming, and 30+ components." })]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 2,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Typography" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						flexDirection: "column",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								bold: true,
+								color: "$primary",
+								children: "H1 — Page Title (bold, $primary)"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								bold: true,
+								color: "$accent",
+								children: "H2 — Section Heading (bold, $accent)"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								color: "$primary",
+								children: "H3 — Group Heading ($primary)"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(P, { children: "P — Body paragraph text" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "Lead — Introductory italic text" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Muted — Secondary information" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "Small — Fine print and captions" })
+						]
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Inline Styles" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						flexDirection: "column",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Strong" }), " — bold emphasis"] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Em, { children: "Em" }), " — italic emphasis"] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Em, { children: "Strong + Em" }) }),
+								" ",
+								"— bold italic"
+							] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								underline: true,
+								children: "Underline"
+							}), " — underlined text"] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								strikethrough: true,
+								children: "Strikethrough"
+							}), " — deleted text"] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "Code" }), " — inline code span"] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Kbd" }), " — keyboard shortcut"] })
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Semantic Colors" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					gap: 1,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							backgroundColor: "$primary",
+							color: "$primary-fg",
+							bold: true,
+							children: " $primary "
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							backgroundColor: "$accent",
+							color: "$accent-fg",
+							bold: true,
+							children: " $accent  "
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							backgroundColor: "$success",
+							color: "$success-fg",
+							bold: true,
+							children: " $success "
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							backgroundColor: "$warning",
+							color: "$warning-fg",
+							bold: true,
+							children: " $warning "
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							backgroundColor: "$error",
+							color: "$error-fg",
+							bold: true,
+							children: " $error   "
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					gap: 1,
+					marginTop: 1,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: "$primary",
+							children: ["████", " primary"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: "$accent",
+							children: ["████", " accent"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: "$success",
+							children: ["████", " success"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: "$warning",
+							children: ["████", " warning"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: "$error",
+							children: ["████", " error"]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+							color: "$muted",
+							children: ["████", " muted"]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Block Elements" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Blockquote, { children: "The best color code is no color code — most components already use the right semantic tokens." }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeBlock, { children: "bun add silvery      # install\nbun run dev          # start dev server" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Lists" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 4,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: "Unordered" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(UL, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "SelectList" }), " — j/k navigation, scroll"] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "TextInput" }), " — full readline support"] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "ModalDialog" }), " — overlay with input blocking"] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "ProgressBar" }), " — determinate + indeterminate"] })
+					] })]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: "Ordered" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(OL, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: ["Install with ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "bun add silvery" })] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [
+							"Use ",
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "$tokens" }),
+							" for semantic colors"
+						] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: [
+							"Layout with ",
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "flexbox" }),
+							" via Flexily"
+						] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LI, { children: ["Test with ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "createTermless()" })] })
+					] })]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "silvery v0.0.1 — 38 palettes, 30+ components — silvery.dev" })
+		]
+	});
+}
+const frameworkItems = [
+	{
+		label: "Silvery",
+		value: "silvery"
+	},
+	{
+		label: "Ink",
+		value: "ink"
+	},
+	{
+		label: "Blessed",
+		value: "blessed",
+		disabled: true
+	},
+	{
+		label: "Terminal Kit",
+		value: "terminal-kit"
+	},
+	{
+		label: "React Curse",
+		value: "react-curse"
+	}
+];
+function InputsTab() {
+	const [textValue, setTextValue] = useState("");
+	const [areaValue, setAreaValue] = useState("");
+	const [selectedFramework, setSelectedFramework] = useState(0);
+	const [darkMode, setDarkMode] = useState(true);
+	const [notifications, setNotifications] = useState(false);
+	const [autoSave, setAutoSave] = useState(true);
+	const [focusIndex, setFocusIndex] = useState(0);
+	const focusableCount = 5;
+	useInput((_input, key) => {
+		if (key.tab && !key.shift) setFocusIndex((prev) => (prev + 1) % focusableCount);
+		if (key.tab && key.shift) setFocusIndex((prev) => (prev - 1 + focusableCount) % focusableCount);
+	});
+	const resetAll = useCallback(() => {
+		setTextValue("");
+		setAreaValue("");
+		setSelectedFramework(0);
+		setDarkMode(true);
+		setNotifications(false);
+		setAutoSave(true);
+	}, []);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		flexDirection: "column",
+		gap: 1,
+		paddingX: 1,
+		overflow: "scroll",
+		flexGrow: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "row",
+			gap: 2,
+			flexGrow: 1,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				gap: 1,
+				flexGrow: 1,
+				flexBasis: 0,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Text Input" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
+						value: textValue,
+						onChange: setTextValue,
+						onSubmit: () => setTextValue(""),
+						placeholder: "Type something...",
+						prompt: "search: ",
+						borderStyle: "round",
+						isActive: focusIndex === 0
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Text Area" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+						value: areaValue,
+						onChange: setAreaValue,
+						placeholder: "Write your thoughts...",
+						height: 4,
+						borderStyle: "round",
+						isActive: focusIndex === 1
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Select List" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						borderStyle: "round",
+						borderColor: focusIndex === 2 ? "$focusborder" : "$border",
+						paddingX: 1,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectList, {
+							items: frameworkItems,
+							highlightedIndex: selectedFramework,
+							onHighlight: setSelectedFramework,
+							isActive: focusIndex === 2
+						})
+					})
+				]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "column",
+				gap: 1,
+				flexGrow: 1,
+				flexBasis: 0,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Toggles" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						flexDirection: "column",
+						borderStyle: "round",
+						borderColor: focusIndex === 3 ? "$focusborder" : "$border",
+						paddingX: 1,
+						paddingY: 1,
+						gap: 1,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+								value: darkMode,
+								onChange: setDarkMode,
+								label: "Dark mode",
+								isActive: focusIndex === 3
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+								value: notifications,
+								onChange: setNotifications,
+								label: "Notifications",
+								isActive: false
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+								value: autoSave,
+								onChange: setAutoSave,
+								label: "Auto-save",
+								isActive: false
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Button" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						label: "Reset All",
+						onPress: resetAll,
+						isActive: focusIndex === 4
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Current Values" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						flexDirection: "column",
+						backgroundColor: "$surfacebg",
+						paddingX: 1,
+						paddingY: 1,
+						borderStyle: "round",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: "$surface",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Text:" }),
+									" ",
+									textValue || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "(empty)" })
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: "$surface",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Area:" }),
+									" ",
+									areaValue ? areaValue.split("\n")[0] + (areaValue.includes("\n") ? "..." : "") : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "(empty)" })
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: "$surface",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Framework:" }),
+									" ",
+									frameworkItems[selectedFramework]?.label
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: "$surface",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Dark mode:" }),
+									" ",
+									darkMode ? "on" : "off"
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: "$surface",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Notifications:" }),
+									" ",
+									notifications ? "on" : "off"
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+								color: "$surface",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Auto-save:" }),
+									" ",
+									autoSave ? "on" : "off"
+								]
+							})
+						]
+					})
+				]
+			})]
+		})
+	});
+}
+function DisplayTab({ scrollOffset }) {
+	const [showModal, setShowModal] = useState(false);
+	const [selectedBorder, setSelectedBorder] = useState(0);
+	const borderStyles = [
+		"round",
+		"bold",
+		"single",
+		"double",
+		"classic"
+	];
+	useInput((input, key) => {
+		if (key.return && !showModal) setShowModal(true);
+		if ((key.escape || input === "q") && showModal) setShowModal(false);
+		if (input === "j" && !showModal) setSelectedBorder((prev) => Math.min(prev + 1, borderStyles.length - 1));
+		if (input === "k" && !showModal) setSelectedBorder((prev) => Math.max(prev - 1, 0));
+	});
+	const cell = {
+		flexGrow: 1,
+		flexBasis: 0,
+		borderStyle: "round",
+		borderColor: "$border",
+		paddingX: 1,
+		paddingY: 1,
+		flexDirection: "column",
+		gap: 1
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		gap: 1,
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					...cell,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: "$primary",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Progress Bars" })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "column",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									color: "$muted",
+									children: "Build   "
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+									flexGrow: 1,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, {
+										value: 1,
+										label: "✓"
+									})
+								})] }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									color: "$muted",
+									children: "Test    "
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+									flexGrow: 1,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, { value: .73 })
+								})] }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									color: "$muted",
+									children: "Deploy  "
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+									flexGrow: 1,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, { value: .35 })
+								})] }),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									color: "$muted",
+									children: "Install "
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+									flexGrow: 1,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, {})
+								})] })
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "column",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
+									type: "dots",
+									label: "Loading packages..."
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
+									type: "line",
+									label: "Compiling..."
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {
+									type: "arc",
+									label: "Optimizing bundle..."
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					...cell,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: "$primary",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Input Controls" })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "column",
+							gap: 1,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								gap: 1,
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Search:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+									flexGrow: 1,
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
+										value: "flutter widgets",
+										onChange: () => {},
+										showUnderline: true,
+										underlineWidth: 25
+									})
+								})]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								gap: 2,
+								wrap: "truncate",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+									label: "Dark mode",
+									value: true,
+									onChange: () => {}
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+									label: "Notifications",
+									value: false,
+									onChange: () => {}
+								})]
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectList, {
+							items: [
+								{
+									label: "React",
+									value: "react"
+								},
+								{
+									label: "Vue",
+									value: "vue"
+								},
+								{
+									label: "Svelte",
+									value: "svelte"
+								},
+								{
+									label: "Angular",
+									value: "angular"
+								}
+							],
+							highlightedIndex: 0,
+							onHighlight: () => {},
+							isActive: false
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					gap: 1,
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						...cell,
+						flexGrow: 1,
+						flexBasis: 0,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: "$primary",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Border Styles" })
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+							flexDirection: "column",
+							gap: 0,
+							children: borderStyles.map((style, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+								borderStyle: style,
+								borderColor: i === selectedBorder ? "$primary" : "$border",
+								borderLeft: true,
+								borderRight: true,
+								borderTop: i === 0,
+								borderBottom: true,
+								paddingX: 1,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+									bold: i === selectedBorder,
+									children: [i === selectedBorder ? "▸ " : "  ", style]
+								})
+							}, style))
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						...cell,
+						flexGrow: 1,
+						flexBasis: 0,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: "$primary",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Design Tokens" })
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "row",
+							gap: 2,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								flexDirection: "column",
+								width: 14,
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+										color: "$success",
+										children: [
+											"●",
+											" ",
+											"$success".padEnd(10)
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+										color: "$warning",
+										children: [
+											"●",
+											" ",
+											"$warning".padEnd(10)
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+										color: "$error",
+										children: [
+											"●",
+											" ",
+											"$error".padEnd(10)
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+										color: "$info",
+										children: [
+											"●",
+											" ",
+											"$info".padEnd(10)
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+										color: "$primary",
+										children: [
+											"●",
+											" ",
+											"$primary".padEnd(10)
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+										"●",
+										" ",
+										"$muted".padEnd(10)
+									] })
+								]
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								flexDirection: "column",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										backgroundColor: "$primary",
+										color: "$primary-fg",
+										children: " $primary   "
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										backgroundColor: "$fg",
+										color: "$bg",
+										children: " $inverse   "
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										backgroundColor: "$muted-bg",
+										color: "$fg",
+										children: " $surface   "
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										backgroundColor: "$surfacebg",
+										color: "$surface",
+										children: " $surfacebg "
+									})
+								]
+							})]
+						})]
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					...cell,
+					backgroundColor: "$surfacebg",
+					paddingRight: 2,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						justifyContent: "space-between",
+						paddingBottom: 1,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							color: "$primary",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Modal Dialog" })
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, {
+							color: "$muted",
+							children: "Esc to close"
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						flexDirection: "column",
+						gap: 1,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								gap: 1,
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Branch:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextInput, {
+									value: "main",
+									onChange: () => {},
+									showUnderline: true,
+									underlineWidth: 25,
+									isActive: true
+								})]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								flexDirection: "column",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓"
+									}), " All checks passed"] }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓"
+									}), " Tests: 247 passed"] }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$warning",
+										children: "⚠"
+									}), " 2 deprecation warnings"] }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$muted",
+										children: "ℹ"
+									}), " Deploy target: us-east-1"] })
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								gap: 2,
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									backgroundColor: "$primary",
+									color: "$primary-fg",
+									children: "  Deploy  "
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									backgroundColor: "$muted-bg",
+									color: "$fg",
+									children: "  Cancel  "
+								})]
+							})
+						]
+					})]
+				})]
+			}),
+			showModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				position: "absolute",
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalDialog, {
+					title: "Component Gallery",
+					width: 50,
+					footer: "ESC or q to close",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+						flexDirection: "column",
+						gap: 1,
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(P, { children: [
+								"This gallery demonstrates ",
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "silvery" }),
+								"'s built-in UI components. Every component uses semantic theme tokens — they adapt to any of the 38 built-in palettes automatically."
+							] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HR, {}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+								flexDirection: "column",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓ Typography presets (H1-H3, Lead, Muted, Code)"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓ Input components (TextInput, TextArea, SelectList)"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓ Display widgets (ProgressBar, Spinner, Badge)"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓ Layout primitives (Box, Divider, border styles)"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+										color: "$success",
+										children: "✓ Dialog system (ModalDialog with input blocking)"
+									})
+								]
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+}
+function ComponentsApp() {
+	const { exit } = useApp();
+	const [activeTab, setActiveTab] = useState("display");
+	const [scrollOffset, setScrollOffset] = useState(0);
+	const handleTabChange = useCallback((tab) => {
+		setActiveTab(tab);
+		setScrollOffset(0);
+	}, []);
+	const tabs = [
+		"display",
+		"inputs",
+		"typography"
+	];
+	useInput((input, key) => {
+		if (input === "q" && activeTab !== "inputs") exit();
+		if (key.escape && activeTab !== "display") exit();
+		if (input === "l" && activeTab !== "inputs") {
+			handleTabChange(tabs[(tabs.indexOf(activeTab) + 1) % tabs.length]);
+			return;
+		}
+		if (input === "h" && activeTab !== "inputs") {
+			handleTabChange(tabs[(tabs.indexOf(activeTab) - 1 + tabs.length) % tabs.length]);
+			return;
+		}
+		if (activeTab !== "inputs") {
+			if (key.downArrow || activeTab === "typography" && input === "j") setScrollOffset((prev) => prev + 1);
+			if (key.upArrow || activeTab === "typography" && input === "k") setScrollOffset((prev) => Math.max(0, prev - 1));
+			if (key.pageDown) setScrollOffset((prev) => prev + 10);
+			if (key.pageUp) setScrollOffset((prev) => Math.max(0, prev - 10));
+			if (key.home || activeTab === "typography" && input === "g") setScrollOffset(0);
+			if (key.end || activeTab === "typography" && input === "G") setScrollOffset(999);
+		}
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		padding: 1,
+		children: [
+			activeTab === "display" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisplayTab, { scrollOffset }),
+			activeTab === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputsTab, {}),
+			activeTab === "typography" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypographyTab, { scrollOffset })
+		]
+	});
+}
+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: "h/l tab  Tab cycle inputs  j/k navigate  Enter modal  Esc/q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentsApp, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { ComponentsApp, main, meta };