@silvery/examples 0.17.4 → 0.17.5

package/dist/layout/live-resize.mjs

@@ -1,10 +1,9 @@
-import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
-import { t as ExampleBanner } from "../_banner-DLPxCqVy.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
 import { useCallback } from "react";
 import { Box, H1, H3, Kbd, Muted, Small, Text, useBoxRect } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 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",
@@ -65,44 +64,44 @@ const CARDS = [
 	}
 ];
 function MetricCard({ card, compact }) {
-	if (compact) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	if (compact) return /* @__PURE__ */ jsxs(Box, {
 		borderStyle: "round",
 		borderColor: card.color,
 		paddingX: 1,
 		flexDirection: "row",
 		justifyContent: "space-between",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+		children: [/* @__PURE__ */ jsx(H1, {
 			color: card.color,
 			children: card.title
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: card.value })]
+		}), /* @__PURE__ */ jsx(H3, { children: card.value })]
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		borderStyle: "round",
 		borderColor: card.color,
 		paddingX: 1,
 		flexDirection: "column",
 		flexGrow: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				justifyContent: "space-between",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+				children: [/* @__PURE__ */ jsx(H1, {
 					color: card.color,
 					children: card.title
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+				}), /* @__PURE__ */ jsx(H1, {
 					color: card.color,
 					children: card.value
 				})]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			/* @__PURE__ */ jsx(Text, {
 				color: card.color,
 				children: card.sparkline
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: card.detail })
+			/* @__PURE__ */ jsx(Small, { children: card.detail })
 		]
 	});
 }
 function BreakpointIndicator({ width, columns }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	return /* @__PURE__ */ jsx(Box, {
 		gap: 2,
 		paddingX: 1,
 		children: [
@@ -123,13 +122,13 @@ function BreakpointIndicator({ width, columns }) {
 			}
 		].map((bp) => {
 			const isActive = bp.cols === columns;
-			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			return /* @__PURE__ */ jsxs(Box, {
 				gap: 1,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				children: [/* @__PURE__ */ jsx(Text, {
 					color: isActive ? "green" : "gray",
 					bold: isActive,
 					children: isActive ? "●" : "○"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				}), /* @__PURE__ */ jsxs(Text, {
 					color: isActive ? "white" : "gray",
 					bold: isActive,
 					children: [
@@ -146,32 +145,32 @@ function BreakpointIndicator({ width, columns }) {
 	});
 }
 function GridLayout({ cards, columns, compact }) {
-	if (columns === 1) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	if (columns === 1) return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
 		gap: compact ? 0 : 1,
 		flexGrow: 1,
-		children: cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+		children: cards.map((card) => /* @__PURE__ */ 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, {
+	return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
 		gap: 1,
 		flexGrow: 1,
-		children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs(Box, {
 			flexDirection: "row",
 			gap: 1,
-			children: [row.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			children: [row.map((card) => /* @__PURE__ */ jsx(Box, {
 				flexGrow: 1,
 				flexBasis: 0,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+				children: /* @__PURE__ */ jsx(MetricCard, {
 					card,
 					compact: false
 				})
-			}, card.title)), row.length < columns && Array.from({ length: columns - row.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			}, card.title)), row.length < columns && Array.from({ length: columns - row.length }, (_, i) => /* @__PURE__ */ jsx(Box, {
 				flexGrow: 1,
 				flexBasis: 0
 			}, `spacer-${i}`))]
@@ -179,29 +178,29 @@ function GridLayout({ cards, columns, compact }) {
 	});
 }
 function CodeSnippet({ width }) {
-	if (!(width >= 60)) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	if (!(width >= 60)) return /* @__PURE__ */ jsx(Box, {
 		paddingX: 1,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		children: /* @__PURE__ */ jsx(Text, {
 			dim: true,
 			italic: true,
 			children: "(Widen terminal to see the code that powers this)"
 		})
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		borderStyle: "single",
 		borderColor: "$border",
 		paddingX: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+			/* @__PURE__ */ jsx(H1, {
 				color: "yellow",
 				children: "How it works:"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			/* @__PURE__ */ jsxs(Text, {
 				color: "gray",
 				children: [
 					"  ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: "magenta",
 						children: "const"
 					}),
@@ -210,25 +209,25 @@ function CodeSnippet({ width }) {
 					" width ",
 					"}",
 					" = ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: "cyan",
 						children: "useBoxRect"
 					}),
 					"()"
 				]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			/* @__PURE__ */ jsxs(Text, {
 				color: "gray",
 				children: [
 					"  ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: "magenta",
 						children: "const"
 					}),
 					" columns = width ",
 					">",
 					" 100 ? ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: "green",
 						children: "3"
 					}),
@@ -236,18 +235,18 @@ function CodeSnippet({ width }) {
 					">",
 					" 60 ?",
 					" ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: "green",
 						children: "2"
 					}),
 					" : ",
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: "green",
 						children: "1"
 					})
 				]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			/* @__PURE__ */ jsxs(Text, {
 				dim: true,
 				italic: true,
 				children: ["  ", "// No useEffect, no layout thrashing. Synchronous."]
@@ -262,40 +261,40 @@ function LiveResize() {
 	useInput$1(useCallback((input, key) => {
 		if (input === "q" || key.escape || key.ctrl && input === "c") return "exit";
 	}, []));
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		width: "100%",
 		height: "100%",
 		padding: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreakpointIndicator, {
+			/* @__PURE__ */ jsx(BreakpointIndicator, {
 				width,
 				columns
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				flexGrow: 1,
 				flexDirection: "column",
 				marginTop: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLayout, {
+				children: /* @__PURE__ */ jsx(GridLayout, {
 					cards: CARDS,
 					columns,
 					compact
 				})
 			}),
-			!compact && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeSnippet, { width }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			!compact && /* @__PURE__ */ jsx(CodeSnippet, { width }),
+			/* @__PURE__ */ 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"] })]
+				children: [/* @__PURE__ */ jsx(Muted, { children: "Resize your terminal to see the layout reflow" }), /* @__PURE__ */ jsxs(Muted, { children: [/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }), " quit"] })]
 			})
 		]
 	});
 }
 async function main() {
-	await (await run(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+	await (await run(/* @__PURE__ */ jsx(ExampleBanner, {
 		meta,
 		controls: "Resize terminal to see reflow  Esc/q quit",
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LiveResize, {})
+		children: /* @__PURE__ */ jsx(LiveResize, {})
 	}))).waitUntilExit();
 }
 if (import.meta.main) await main();

package/dist/layout/overflow.mjs

@@ -1,10 +1,9 @@
 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 { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
 import "react";
 import { Box, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region layout/overflow.tsx
-var import_jsx_runtime = require_jsx_runtime();
 const meta = {
 	name: "Overflow",
 	description: "overflow=\"hidden\" content clipping demonstration",
@@ -15,34 +14,34 @@ function OverflowApp() {
 	useInput((input, key) => {
 		if (input === "q" || key.escape) exit();
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		padding: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			/* @__PURE__ */ jsx(Text, {
 				color: "yellow",
 				children: "Title"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				borderStyle: "single",
 				borderColor: "$primary",
 				height: 5,
 				overflow: "hidden",
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				children: /* @__PURE__ */ 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__ */ jsx(Text, { children: "Line 1" }),
+						/* @__PURE__ */ jsx(Text, { children: "Line 2" }),
+						/* @__PURE__ */ jsx(Text, { children: "Line 3" }),
+						/* @__PURE__ */ jsx(Text, { children: "Line 4" }),
+						/* @__PURE__ */ jsx(Text, { children: "Line 5" }),
+						/* @__PURE__ */ jsx(Text, { children: "Line 6 - should NOT appear" }),
+						/* @__PURE__ */ jsx(Text, { children: "Line 7 - should NOT appear" })
 					]
 				})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			/* @__PURE__ */ jsx(Text, {
 				color: "$success",
 				children: "This should NOT be corrupted"
 			})
@@ -53,10 +52,10 @@ 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, {
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
 			meta,
 			controls: "Esc/q quit",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverflowApp, {})
+			children: /* @__PURE__ */ jsx(OverflowApp, {})
 		}), term);
 		await waitUntilExit();
 	} catch (_) {

package/dist/layout/text-layout.mjs

@@ -1,7 +1,7 @@
-import { t as require_jsx_runtime } from "../jsx-runtime-dMs_8fNu.mjs";
-import { t as ExampleBanner } from "../_banner-DLPxCqVy.mjs";
+import { t as ExampleBanner } from "../_banner-A70_y2Vi.mjs";
 import { useCallback, useState } from "react";
 import { Box, Divider, H2, Kbd, Muted, Small, Text } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { run, useInput as useInput$1 } from "silvery/runtime";
 //#region layout/text-layout.tsx
 /**
@@ -19,7 +19,6 @@ import { run, useInput as useInput$1 } from "silvery/runtime";
 *   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",
@@ -56,16 +55,16 @@ const CHAT_MESSAGES = [
 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, {
+	return /* @__PURE__ */ 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, {
+		children: [/* @__PURE__ */ jsxs(Small, { children: [" ", sender] }), /* @__PURE__ */ jsx(Box, {
 			width,
 			borderStyle: "round",
 			borderColor: "$border",
 			paddingX: 1,
 			maxWidth: 48,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			children: /* @__PURE__ */ jsx(Text, {
 				wrap: wrap ?? "wrap",
 				children: text
 			})
@@ -74,22 +73,22 @@ function Bubble({ sender, text, width, wrap, align }) {
 }
 /** Column of chat bubbles with a label. */
 function BubbleColumn({ label, sublabel, width, wrap }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
 		flexBasis: 0,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			/* @__PURE__ */ 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, {
+			/* @__PURE__ */ jsx(Muted, { children: sublabel }),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsx(Box, {
 				flexDirection: "column",
 				gap: 1,
-				children: CHAT_MESSAGES.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bubble, {
+				children: CHAT_MESSAGES.map((msg, i) => /* @__PURE__ */ jsx(Bubble, {
 					sender: msg.sender,
 					text: msg.text,
 					width,
@@ -102,24 +101,24 @@ function BubbleColumn({ label, sublabel, width, wrap }) {
 }
 /** Side-by-side paragraph comparison. */
 function ParagraphComparison({ label, sublabel, wrap }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
 		flexBasis: 0,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			/* @__PURE__ */ 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, {
+			/* @__PURE__ */ jsx(Muted, { children: sublabel }),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsx(Box, {
 				width: 52,
 				borderStyle: "single",
 				borderColor: "$border",
 				paddingX: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				children: /* @__PURE__ */ jsx(Text, {
 					wrap,
 					children: PARAGRAPH
 				})
@@ -128,22 +127,22 @@ function ParagraphComparison({ label, sublabel, wrap }) {
 	});
 }
 function Demo1Bubbles() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ 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, {
+			/* @__PURE__ */ jsx(H2, { children: "Chat Bubbles: fit-content vs snug-content" }),
+			/* @__PURE__ */ jsxs(Muted, { children: ["  ", "fit-content sizes to the widest wrapped line (dead space on short lines)."] }),
+			/* @__PURE__ */ jsxs(Muted, { children: ["  ", "snug-content binary-searches for the tightest width with the same line count."] }),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "row",
 				gap: 3,
 				paddingX: 1,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleColumn, {
+				children: [/* @__PURE__ */ jsx(BubbleColumn, {
 					label: "width=\"fit-content\"",
 					sublabel: "CSS default — dead space",
 					width: "fit-content"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BubbleColumn, {
+				}), /* @__PURE__ */ jsx(BubbleColumn, {
 					label: "width=\"snug-content\"",
 					sublabel: "Pretext shrinkwrap — tight",
 					width: "snug-content"
@@ -153,22 +152,22 @@ function Demo1Bubbles() {
 	});
 }
 function Demo2EvenWrap() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ 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, {
+			/* @__PURE__ */ jsx(H2, { children: "Paragraph Layout: greedy vs even wrapping" }),
+			/* @__PURE__ */ jsxs(Muted, { children: ["  ", "Greedy fills each line left-to-right, leaving a ragged right edge."] }),
+			/* @__PURE__ */ jsxs(Muted, { children: ["  ", "Even uses minimum-raggedness DP to distribute words across all lines."] }),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "row",
 				gap: 3,
 				paddingX: 1,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParagraphComparison, {
+				children: [/* @__PURE__ */ jsx(ParagraphComparison, {
 					label: "wrap=\"wrap\"",
 					sublabel: "Greedy — ragged right edge",
 					wrap: "wrap"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParagraphComparison, {
+				}), /* @__PURE__ */ jsx(ParagraphComparison, {
 					label: "wrap=\"even\"",
 					sublabel: "Min-raggedness — balanced lines",
 					wrap: "even"
@@ -178,86 +177,86 @@ function Demo2EvenWrap() {
 	});
 }
 function Demo3Combined() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ 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, {
+			/* @__PURE__ */ jsx(H2, { children: "Combined: snug-content + even wrapping" }),
+			/* @__PURE__ */ jsxs(Muted, { children: ["  ", "The tightest, most beautiful text layout — both features together."] }),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "row",
 				gap: 3,
 				paddingX: 1,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				children: [/* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
 					flexGrow: 1,
 					flexBasis: 0,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						/* @__PURE__ */ 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, {
+						/* @__PURE__ */ jsx(Muted, { children: "Widest line sets width, lines fill greedily" }),
+						/* @__PURE__ */ jsx(Text, { children: " " }),
+						/* @__PURE__ */ jsxs(Box, {
 							flexDirection: "column",
 							gap: 1,
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+							children: [/* @__PURE__ */ jsx(Box, {
 								width: "fit-content",
 								borderStyle: "round",
 								borderColor: "$border",
 								paddingX: 1,
 								maxWidth: 48,
-								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								children: /* @__PURE__ */ 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, {
+							}), /* @__PURE__ */ jsx(Box, {
 								width: "fit-content",
 								borderStyle: "round",
 								borderColor: "$border",
 								paddingX: 1,
 								maxWidth: 48,
-								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								children: /* @__PURE__ */ jsx(Text, {
 									wrap: "wrap",
 									children: "Silvery brings Pretext-inspired layout to the terminal with two simple props."
 								})
 							})]
 						})
 					]
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				}), /* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
 					flexGrow: 1,
 					flexBasis: 0,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						/* @__PURE__ */ 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, {
+						/* @__PURE__ */ jsx(Muted, { children: "Tightest width, balanced line lengths" }),
+						/* @__PURE__ */ jsx(Text, { children: " " }),
+						/* @__PURE__ */ jsxs(Box, {
 							flexDirection: "column",
 							gap: 1,
-							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+							children: [/* @__PURE__ */ jsx(Box, {
 								width: "snug-content",
 								borderStyle: "round",
 								borderColor: "$primary",
 								paddingX: 1,
 								maxWidth: 48,
-								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								children: /* @__PURE__ */ 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, {
+							}), /* @__PURE__ */ jsx(Box, {
 								width: "snug-content",
 								borderStyle: "round",
 								borderColor: "$primary",
 								paddingX: 1,
 								maxWidth: 48,
-								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+								children: /* @__PURE__ */ jsx(Text, {
 									wrap: "even",
 									children: "Silvery brings Pretext-inspired layout to the terminal with two simple props."
 								})
@@ -290,14 +289,14 @@ function PretextDemo() {
 		if (input === "3") setDemoIndex(2);
 	}, []));
 	const Demo = DEMOS[demoIndex];
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		padding: 1,
 		gap: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				gap: 2,
-				children: DEMO_LABELS.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+				children: DEMO_LABELS.map((label, i) => /* @__PURE__ */ jsxs(Text, {
 					bold: i === demoIndex,
 					color: i === demoIndex ? "$primary" : "$muted",
 					children: [
@@ -308,26 +307,26 @@ function PretextDemo() {
 					]
 				}, 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__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(Demo, {}),
+			/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Muted, { children: [
 				"  ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "j/k" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
 				" or ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "1-3" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "1-3" }),
 				" switch demo",
 				"  ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
 				" quit"
 			] }) })
 		]
 	});
 }
 async function main() {
-	await (await run(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExampleBanner, {
+	await (await run(/* @__PURE__ */ jsx(ExampleBanner, {
 		meta,
 		controls: "j/k switch demo  1-3 jump  Esc/q quit",
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PretextDemo, {})
+		children: /* @__PURE__ */ jsx(PretextDemo, {})
 	}))).waitUntilExit();
 }
 if (import.meta.main) await main();