@silvery/examples 0.17.3 → 0.17.4

package/dist/layout/live-resize.mjs

@@ -0,0 +1,303 @@
+import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
+import { t as ExampleBanner } from "../_banner-DLPxCqVy.mjs";
+import { useCallback } from "react";
+import { Box, H1, H3, Kbd, Muted, Small, Text, useBoxRect } from "silvery";
+import { run, useInput as useInput$1 } from "silvery/runtime";
+//#region layout/live-resize.tsx
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Live Resize",
+	description: "Responsive multi-column grid that reflows based on terminal width",
+	features: [
+		"useBoxRect()",
+		"responsive breakpoints",
+		"Box flexDirection"
+	]
+};
+const CARDS = [
+	{
+		title: "CPU Usage",
+		icon: "💻",
+		value: "42%",
+		detail: "4 cores, 2.4 GHz base",
+		color: "green",
+		sparkline: "▂▃▅▇▆▄▃▅▇█▆▄▃▂▃▅"
+	},
+	{
+		title: "Memory",
+		icon: "🧠",
+		value: "8.2 GB",
+		detail: "of 16 GB (51% used)",
+		color: "cyan",
+		sparkline: "▄▄▅▅▅▆▆▆▅▅▆▆▇▇▆▆"
+	},
+	{
+		title: "Disk I/O",
+		icon: "💾",
+		value: "234 MB/s",
+		detail: "Read: 180 MB/s Write: 54 MB/s",
+		color: "yellow",
+		sparkline: "▁▂▃▇█▇▄▂▁▂▅▇▆▃▂▁"
+	},
+	{
+		title: "Network",
+		icon: "🌐",
+		value: "1.2 Gb/s",
+		detail: "In: 800 Mb/s Out: 400 Mb/s",
+		color: "magenta",
+		sparkline: "▃▄▅▆▇▆▅▄▅▆▇█▇▆▅▄"
+	},
+	{
+		title: "Processes",
+		icon: "⚙️",
+		value: "247",
+		detail: "12 running, 235 sleeping",
+		color: "blue",
+		sparkline: "▅▅▅▆▅▅▅▅▆▅▅▅▆▅▅▅"
+	},
+	{
+		title: "Temperature",
+		icon: "🌡️",
+		value: "62 C",
+		detail: "Max: 85 C (safe range)",
+		color: "red",
+		sparkline: "▃▃▄▄▅▅▆▆▅▅▄▄▃▄▅▅"
+	}
+];
+function MetricCard({ card, compact }) {
+	if (compact) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		borderStyle: "round",
+		borderColor: card.color,
+		paddingX: 1,
+		flexDirection: "row",
+		justifyContent: "space-between",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+			color: card.color,
+			children: card.title
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: card.value })]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		borderStyle: "round",
+		borderColor: card.color,
+		paddingX: 1,
+		flexDirection: "column",
+		flexGrow: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+					color: card.color,
+					children: card.title
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+					color: card.color,
+					children: card.value
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: card.color,
+				children: card.sparkline
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: card.detail })
+		]
+	});
+}
+function BreakpointIndicator({ width, columns }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		gap: 2,
+		paddingX: 1,
+		children: [
+			{
+				threshold: 0,
+				cols: 1,
+				label: "< 60"
+			},
+			{
+				threshold: 60,
+				cols: 2,
+				label: "60-99"
+			},
+			{
+				threshold: 100,
+				cols: 3,
+				label: "100+"
+			}
+		].map((bp) => {
+			const isActive = bp.cols === columns;
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				gap: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					color: isActive ? "green" : "gray",
+					bold: isActive,
+					children: isActive ? "●" : "○"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					color: isActive ? "white" : "gray",
+					bold: isActive,
+					children: [
+						bp.cols,
+						" col",
+						bp.cols > 1 ? "s" : " ",
+						" (",
+						bp.label,
+						")"
+					]
+				})]
+			}, bp.cols);
+		})
+	});
+}
+function GridLayout({ cards, columns, compact }) {
+	if (columns === 1) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		flexDirection: "column",
+		gap: compact ? 0 : 1,
+		flexGrow: 1,
+		children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+			card,
+			compact
+		}, card.title))
+	});
+	const rows = [];
+	for (let i = 0; i < cards.length; i += columns) rows.push(cards.slice(i, i + columns));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		flexDirection: "column",
+		gap: 1,
+		flexGrow: 1,
+		children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			flexDirection: "row",
+			gap: 1,
+			children: [row.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexGrow: 1,
+				flexBasis: 0,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+					card,
+					compact: false
+				})
+			}, card.title)), row.length < columns && Array.from({ length: columns - row.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexGrow: 1,
+				flexBasis: 0
+			}, `spacer-${i}`))]
+		}, rowIndex))
+	});
+}
+function CodeSnippet({ width }) {
+	if (!(width >= 60)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		paddingX: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			dim: true,
+			italic: true,
+			children: "(Widen terminal to see the code that powers this)"
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		borderStyle: "single",
+		borderColor: "$border",
+		paddingX: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+				color: "yellow",
+				children: "How it works:"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: "gray",
+				children: [
+					"  ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "magenta",
+						children: "const"
+					}),
+					" ",
+					"{",
+					" width ",
+					"}",
+					" = ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "cyan",
+						children: "useBoxRect"
+					}),
+					"()"
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				color: "gray",
+				children: [
+					"  ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "magenta",
+						children: "const"
+					}),
+					" columns = width ",
+					">",
+					" 100 ? ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "green",
+						children: "3"
+					}),
+					" : width ",
+					">",
+					" 60 ?",
+					" ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "green",
+						children: "2"
+					}),
+					" : ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						color: "green",
+						children: "1"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				dim: true,
+				italic: true,
+				children: ["  ", "// No useEffect, no layout thrashing. Synchronous."]
+			})
+		]
+	});
+}
+function LiveResize() {
+	const { width, height } = useBoxRect();
+	const columns = width >= 100 ? 3 : width >= 60 ? 2 : 1;
+	const compact = height < 20 || width < 40;
+	useInput$1(useCallback((input, key) => {
+		if (input === "q" || key.escape || key.ctrl && input === "c") return "exit";
+	}, []));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		width: "100%",
+		height: "100%",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreakpointIndicator, {
+				width,
+				columns
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexGrow: 1,
+				flexDirection: "column",
+				marginTop: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLayout, {
+					cards: CARDS,
+					columns,
+					compact
+				})
+			}),
+			!compact && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeSnippet, { width }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				justifyContent: "space-between",
+				paddingX: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Resize your terminal to see the layout reflow" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }), " quit"] })]
+			})
+		]
+	});
+}
+async function main() {
+	await (await run(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+		meta,
+		controls: "Resize terminal to see reflow  Esc/q quit",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LiveResize, {})
+	}))).waitUntilExit();
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };

package/dist/layout/overflow.mjs

@@ -0,0 +1,70 @@
+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 "react";
+import { Box, Text, createTerm, render, useApp, useInput } from "silvery";
+//#region layout/overflow.tsx
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "Overflow",
+	description: "overflow=\"hidden\" content clipping demonstration",
+	features: ["overflow=\"hidden\"", "Box height"]
+};
+function OverflowApp() {
+	const { exit } = useApp();
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "yellow",
+				children: "Title"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				borderStyle: "single",
+				borderColor: "$primary",
+				height: 5,
+				overflow: "hidden",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 1" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 2" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 3" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 4" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 5" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 6 - should NOT appear" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Line 7 - should NOT appear" })
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				color: "$success",
+				children: "This should NOT be corrupted"
+			})
+		]
+	});
+}
+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: "Esc/q quit",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverflowApp, {})
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { OverflowApp, main, meta };

package/dist/layout/text-layout.mjs

@@ -0,0 +1,335 @@
+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 { Box, Divider, H2, Kbd, Muted, Small, Text } from "silvery";
+import { run, useInput as useInput$1 } from "silvery/runtime";
+//#region layout/text-layout.tsx
+/**
+* Pretext Demo — snug-content bubbles + even wrapping comparison
+*
+* Interactive demo showcasing Silvery's Pretext-inspired text layout:
+* - width="snug-content" — tightest box width for same line count (shrinkwrap)
+* - wrap="even" — minimum-raggedness line breaking (Knuth-Plass)
+*
+* Inspired by https://chenglou.me/pretext/
+*
+* Usage: bun examples/pretext-demo.tsx
+*
+* Controls:
+*   j/k - Cycle demo sections
+*   Esc/q - Quit
+*/
+var import_jsx_runtime = require_jsx_runtime();
+const meta = {
+	name: "text layout",
+	description: "Snug-content bubbles + even wrapping — inspired by chenglou/pretext",
+	demo: true,
+	features: [
+		"width=\"snug-content\"",
+		"wrap=\"even\"",
+		"chat bubbles",
+		"paragraph layout"
+	]
+};
+const CHAT_MESSAGES = [
+	{
+		sender: "Alice",
+		text: "Hey!"
+	},
+	{
+		sender: "Bob",
+		text: "What are you working on?"
+	},
+	{
+		sender: "Alice",
+		text: "Building a terminal UI framework with beautiful text layout."
+	},
+	{
+		sender: "Bob",
+		text: "That sounds interesting. Does it handle word wrapping well? Most terminal apps have really ugly ragged text."
+	},
+	{
+		sender: "Alice",
+		text: "Yes! It uses Pretext-inspired algorithms for snug bubbles and even line breaking."
+	}
+];
+const PARAGRAPH = "The quick brown fox jumps over the lazy dog. Typography in terminal applications has always been limited by the character grid, but modern algorithms can distribute text across lines for minimum raggedness, producing results that rival print-quality typesetting. Silvery brings these techniques to the terminal.";
+/** A single chat bubble with configurable width and wrap mode. */
+function Bubble({ sender, text, width, wrap, align }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		alignItems: align ?? "flex-start",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Small, { children: [" ", sender] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			width,
+			borderStyle: "round",
+			borderColor: "$border",
+			paddingX: 1,
+			maxWidth: 48,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				wrap: wrap ?? "wrap",
+				children: text
+			})
+		})]
+	});
+}
+/** Column of chat bubbles with a label. */
+function BubbleColumn({ label, sublabel, width, wrap }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		flexBasis: 0,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				bold: true,
+				color: "$accent",
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: sublabel }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				flexDirection: "column",
+				gap: 1,
+				children: CHAT_MESSAGES.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bubble, {
+					sender: msg.sender,
+					text: msg.text,
+					width,
+					wrap,
+					align: msg.sender === "Bob" ? "flex-end" : "flex-start"
+				}, i))
+			})
+		]
+	});
+}
+/** Side-by-side paragraph comparison. */
+function ParagraphComparison({ label, sublabel, wrap }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		flexGrow: 1,
+		flexBasis: 0,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				bold: true,
+				color: "$accent",
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: sublabel }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				width: 52,
+				borderStyle: "single",
+				borderColor: "$border",
+				paddingX: 1,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					wrap,
+					children: PARAGRAPH
+				})
+			})
+		]
+	});
+}
+function Demo1Bubbles() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Chat Bubbles: fit-content vs snug-content" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: ["  ", "fit-content sizes to the widest wrapped line (dead space on short lines)."] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: ["  ", "snug-content binary-searches for the tightest width with the same line count."] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 3,
+				paddingX: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleColumn, {
+					label: "width=\"fit-content\"",
+					sublabel: "CSS default — dead space",
+					width: "fit-content"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleColumn, {
+					label: "width=\"snug-content\"",
+					sublabel: "Pretext shrinkwrap — tight",
+					width: "snug-content"
+				})]
+			})
+		]
+	});
+}
+function Demo2EvenWrap() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Paragraph Layout: greedy vs even wrapping" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: ["  ", "Greedy fills each line left-to-right, leaving a ragged right edge."] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: ["  ", "Even uses minimum-raggedness DP to distribute words across all lines."] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 3,
+				paddingX: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParagraphComparison, {
+					label: "wrap=\"wrap\"",
+					sublabel: "Greedy — ragged right edge",
+					wrap: "wrap"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParagraphComparison, {
+					label: "wrap=\"even\"",
+					sublabel: "Min-raggedness — balanced lines",
+					wrap: "even"
+				})]
+			})
+		]
+	});
+}
+function Demo3Combined() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Combined: snug-content + even wrapping" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: ["  ", "The tightest, most beautiful text layout — both features together."] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				flexDirection: "row",
+				gap: 3,
+				paddingX: 1,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							bold: true,
+							color: "$accent",
+							children: "Default (fit-content + greedy)"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Widest line sets width, lines fill greedily" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "column",
+							gap: 1,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+								width: "fit-content",
+								borderStyle: "round",
+								borderColor: "$border",
+								paddingX: 1,
+								maxWidth: 48,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									wrap: "wrap",
+									children: "Typography in terminal applications has always been limited by the character grid, but modern algorithms change that."
+								})
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+								width: "fit-content",
+								borderStyle: "round",
+								borderColor: "$border",
+								paddingX: 1,
+								maxWidth: 48,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									wrap: "wrap",
+									children: "Silvery brings Pretext-inspired layout to the terminal with two simple props."
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					flexDirection: "column",
+					flexGrow: 1,
+					flexBasis: 0,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							bold: true,
+							color: "$accent",
+							children: "Pretext (snug-content + even)"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Tightest width, balanced line lengths" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+							flexDirection: "column",
+							gap: 1,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+								width: "snug-content",
+								borderStyle: "round",
+								borderColor: "$primary",
+								paddingX: 1,
+								maxWidth: 48,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									wrap: "even",
+									children: "Typography in terminal applications has always been limited by the character grid, but modern algorithms change that."
+								})
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+								width: "snug-content",
+								borderStyle: "round",
+								borderColor: "$primary",
+								paddingX: 1,
+								maxWidth: 48,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+									wrap: "even",
+									children: "Silvery brings Pretext-inspired layout to the terminal with two simple props."
+								})
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+const DEMOS = [
+	Demo1Bubbles,
+	Demo2EvenWrap,
+	Demo3Combined
+];
+const DEMO_LABELS = [
+	"Chat Bubbles",
+	"Even Wrapping",
+	"Combined"
+];
+function PretextDemo() {
+	const [demoIndex, setDemoIndex] = useState(0);
+	useInput$1(useCallback((input, key) => {
+		if (input === "q" || key.escape) return "exit";
+		if (input === "j" || key.downArrow || key.rightArrow) setDemoIndex((i) => Math.min(i + 1, DEMOS.length - 1));
+		if (input === "k" || key.upArrow || key.leftArrow) setDemoIndex((i) => Math.max(i - 1, 0));
+		if (input === "1") setDemoIndex(0);
+		if (input === "2") setDemoIndex(1);
+		if (input === "3") setDemoIndex(2);
+	}, []));
+	const Demo = DEMOS[demoIndex];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		flexDirection: "column",
+		padding: 1,
+		gap: 1,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				gap: 2,
+				children: DEMO_LABELS.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					bold: i === demoIndex,
+					color: i === demoIndex ? "$primary" : "$muted",
+					children: [
+						i === demoIndex ? "▸ " : "  ",
+						i + 1,
+						". ",
+						label
+					]
+				}, i))
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Demo, {}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+				"  ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "j/k" }),
+				" or ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "1-3" }),
+				" switch demo",
+				"  ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }),
+				" quit"
+			] }) })
+		]
+	});
+}
+async function main() {
+	await (await run(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+		meta,
+		controls: "j/k switch demo  1-3 jump  Esc/q quit",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PretextDemo, {})
+	}))).waitUntilExit();
+}
+if (import.meta.main) await main();
+//#endregion
+export { main, meta };