@silvery/examples 0.17.4 → 0.17.5

package/dist/apps/gallery.mjs

@@ -1,11 +1,10 @@
 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 { useMemo, useState } from "react";
 import { Box, H2, Image, Kbd, Muted, Tab, TabList, TabPanel, Tabs, Text, createTerm, render, useApp, useBoxRect, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { deflateSync } from "node:zlib";
 //#region apps/gallery.tsx
-var import_jsx_runtime = require_jsx_runtime();
 const meta = {
 	name: "Gallery",
 	description: "Kitty images, pixel art, and truecolor rendering",
@@ -244,22 +243,22 @@ function ImagesTab() {
 		if (input === "j" || key.downArrow || input === "n") setIndex((i) => (i + 1) % images.length);
 		if (input === "k" || key.upArrow || input === "p") setIndex((i) => (i - 1 + images.length) % images.length);
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
 		gap: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				paddingX: 1,
 				gap: 2,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						bold: true,
 						color: "$primary",
 						children: img.name
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: img.description }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+					/* @__PURE__ */ jsx(Muted, { children: img.description }),
+					/* @__PURE__ */ jsxs(Muted, { children: [
 						"(",
 						index + 1,
 						"/",
@@ -268,20 +267,20 @@ function ImagesTab() {
 					] })
 				]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				flexGrow: 1,
 				justifyContent: "center",
 				paddingX: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Image, {
+				children: /* @__PURE__ */ jsx(Image, {
 					src: img.png,
 					width: w,
 					height: imgH,
 					fallback: `[${img.name} — graphics protocol not available. Run in Kitty/WezTerm/Ghostty for images.]`
 				})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+			/* @__PURE__ */ jsxs(Muted, { children: [
 				" ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "j/k" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
 				" navigate images"
 			] })
 		]
@@ -416,30 +415,30 @@ function PaintTab() {
 		for (let col = 0; col < canvasW; col++) {
 			const top = row * 2 < pixels.length ? pixels[row * 2]?.[col] ?? null : null;
 			const bot = row * 2 + 1 < pixels.length ? pixels[row * 2 + 1]?.[col] ?? null : null;
-			if (top === null && bot === null) cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }, col));
-			else if (top !== null && bot === null) cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			if (top === null && bot === null) cells.push(/* @__PURE__ */ jsx(Text, { children: " " }, col));
+			else if (top !== null && bot === null) cells.push(/* @__PURE__ */ jsx(Text, {
 				color: `rgb(${top[0]},${top[1]},${top[2]})`,
 				children: UPPER_HALF
 			}, col));
-			else if (top === null && bot !== null) cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			else if (top === null && bot !== null) cells.push(/* @__PURE__ */ jsx(Text, {
 				color: `rgb(${bot[0]},${bot[1]},${bot[2]})`,
 				children: LOWER_HALF
 			}, col));
-			else if (top !== null && top[0] === bot?.[0] && top[1] === bot[1] && top[2] === bot[2]) cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			else if (top !== null && top[0] === bot?.[0] && top[1] === bot[1] && top[2] === bot[2]) cells.push(/* @__PURE__ */ jsx(Text, {
 				color: `rgb(${top[0]},${top[1]},${top[2]})`,
 				children: FULL_BLOCK
 			}, col));
-			else cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			else cells.push(/* @__PURE__ */ jsx(Text, {
 				color: `rgb(${top[0]},${top[1]},${top[2]})`,
 				backgroundColor: `rgb(${bot[0]},${bot[1]},${bot[2]})`,
 				children: UPPER_HALF
 			}, col));
 		}
-		canvasLines.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { children: cells }, row));
+		canvasLines.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
 	}
 	const paletteItems = PAINT_PRESETS.map((p, i) => {
 		const selected = i === colorIndex;
-		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		return /* @__PURE__ */ jsx(Text, {
 			backgroundColor: `rgb(${p.color[0]},${p.color[1]},${p.color[2]})`,
 			color: p.color[0] + p.color[1] + p.color[2] > 384 ? "black" : "white",
 			bold: selected,
@@ -448,24 +447,24 @@ function PaintTab() {
 	});
 	const toolLabel = tool === "pen" ? "Pen" : "Eraser";
 	const [cr, cg, cb] = currentColor;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				paddingX: 1,
 				gap: 2,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						bold: true,
 						color: `rgb(${cr},${cg},${cb})`,
 						children: toolLabel
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						backgroundColor: `rgb(${cr},${cg},${cb})`,
 						children: "    "
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+					/* @__PURE__ */ jsxs(Muted, { children: [
 						"rgb(",
 						cr,
 						",",
@@ -476,28 +475,28 @@ function PaintTab() {
 					] })
 				]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				flexDirection: "column",
 				flexGrow: 1,
 				borderStyle: "round",
 				marginX: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				children: /* @__PURE__ */ jsx(Box, {
 					flexDirection: "column",
 					children: canvasLines
 				})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				paddingX: 1,
 				gap: 0,
 				children: paletteItems
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+			/* @__PURE__ */ jsxs(Muted, { children: [
 				" ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "1-0" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "1-0" }),
 				" color ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "e" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "e" }),
 				" eraser ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "c" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "c" }),
 				" clear (click canvas in Kitty/Ghostty for mouse paint)"
 			] })
 		]
@@ -515,12 +514,12 @@ function TruecolorTab() {
 		const cells = [];
 		for (let col = 0; col < w; col++) {
 			const [r, g, b] = hslToRgb(col / w * 360, 1, .35 + row / Math.max(1, hueBarH - 1) * .3);
-			cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			cells.push(/* @__PURE__ */ jsx(Text, {
 				backgroundColor: `rgb(${r},${g},${b})`,
 				children: " "
 			}, col));
 		}
-		hueBar.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { children: cells }, row));
+		hueBar.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
 	}
 	const gradient = [];
 	for (let row = 0; row < gradientH; row++) {
@@ -528,12 +527,12 @@ function TruecolorTab() {
 		const sat = 1 - row / Math.max(1, gradientH - 1) * .8;
 		for (let col = 0; col < w; col++) {
 			const [r, g, b] = hsvToRgb(col / w * 360, sat, .95);
-			cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			cells.push(/* @__PURE__ */ jsx(Text, {
 				backgroundColor: `rgb(${r},${g},${b})`,
 				children: " "
 			}, col));
 		}
-		gradient.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { children: cells }, row));
+		gradient.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
 	}
 	const paletteCols = 16;
 	const paletteRows = Math.min(paletteH, Math.ceil(256 / paletteCols));
@@ -547,55 +546,55 @@ function TruecolorTab() {
 			const [r, g, b] = ansi256toRgb(idx);
 			const label = idx.toString().padStart(3);
 			const textColor = r + g + b > 384 ? "black" : "white";
-			cells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			cells.push(/* @__PURE__ */ jsx(Box, {
 				width: cellW,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				children: /* @__PURE__ */ jsx(Text, {
 					backgroundColor: `rgb(${r},${g},${b})`,
 					color: textColor,
 					children: label.slice(0, cellW)
 				})
 			}, col));
 		}
-		palette.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { children: cells }, row));
+		palette.push(/* @__PURE__ */ jsx(Box, { children: cells }, row));
 	}
 	const grayCells = [];
 	for (let col = 0; col < w; col++) {
 		const v = Math.round(col / Math.max(1, w - 1) * 255);
-		grayCells.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		grayCells.push(/* @__PURE__ */ jsx(Text, {
 			backgroundColor: `rgb(${v},${v},${v})`,
 			children: " "
 		}, col));
 	}
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
 		gap: 1,
 		paddingX: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "HSL Rainbow" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				children: [/* @__PURE__ */ jsx(H2, { children: "HSL Rainbow" }), /* @__PURE__ */ jsx(Box, {
 					flexDirection: "column",
 					children: hueBar
 				})]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Saturation Gradient" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				children: [/* @__PURE__ */ jsx(H2, { children: "Saturation Gradient" }), /* @__PURE__ */ jsx(Box, {
 					flexDirection: "column",
 					children: gradient
 				})]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "256-Color Palette" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				children: [/* @__PURE__ */ jsx(H2, { children: "256-Color Palette" }), /* @__PURE__ */ jsx(Box, {
 					flexDirection: "column",
 					children: palette
 				})]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "column",
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Grayscale Ramp" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, { children: grayCells })]
+				children: [/* @__PURE__ */ jsx(H2, { children: "Grayscale Ramp" }), /* @__PURE__ */ jsx(Box, { children: grayCells })]
 			})
 		]
 	});
@@ -708,38 +707,38 @@ function Gallery() {
 	useInput((input, key) => {
 		if (input === "q" || key.escape) exit();
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, {
+		children: /* @__PURE__ */ jsxs(Tabs, {
 			value: activeTab,
 			onChange: setActiveTab,
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabList, { children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tab, {
+				/* @__PURE__ */ jsxs(TabList, { children: [
+					/* @__PURE__ */ jsx(Tab, {
 						value: "images",
 						children: "Images"
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tab, {
+					/* @__PURE__ */ jsx(Tab, {
 						value: "paint",
 						children: "Paint"
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tab, {
+					/* @__PURE__ */ jsx(Tab, {
 						value: "truecolor",
 						children: "Truecolor"
 					})
 				] }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabPanel, {
+				/* @__PURE__ */ jsx(TabPanel, {
 					value: "images",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImagesTab, {})
+					children: /* @__PURE__ */ jsx(ImagesTab, {})
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabPanel, {
+				/* @__PURE__ */ jsx(TabPanel, {
 					value: "paint",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaintTab, {})
+					children: /* @__PURE__ */ jsx(PaintTab, {})
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabPanel, {
+				/* @__PURE__ */ jsx(TabPanel, {
 					value: "truecolor",
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TruecolorTab, {})
+					children: /* @__PURE__ */ jsx(TruecolorTab, {})
 				})
 			]
 		})
@@ -749,10 +748,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: "h/l tab  j/k navigate  Esc/q quit",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gallery, {})
+			children: /* @__PURE__ */ jsx(Gallery, {})
 		}), term);
 		await waitUntilExit();
 	} catch (_) {

package/dist/apps/inline-bench.mjs

@@ -1,4 +1,4 @@
-import { D as TerminalBuffer, N as init_buffer, i as outputPhase, r as createOutputPhase } from "../ansi-CCE2pVS0.mjs";
+import { D as TerminalBuffer, N as init_buffer, i as outputPhase, r as createOutputPhase } from "../ansi-0VXlUmNn.mjs";
 //#region apps/inline-bench.tsx
 init_buffer();
 const RUNS = 500;

package/dist/apps/kanban.mjs

@@ -1,8 +1,8 @@
 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 { useState } from "react";
 import { Box, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region apps/kanban.tsx
 /**
 * Kanban Board Example
@@ -13,7 +13,6 @@ import { Box, Text, createTerm, render, useApp, useInput } from "silvery";
 * - Each column uses native overflow="scroll" for scrolling
 * - Flexbox layout for proportional sizing
 */
-var import_jsx_runtime = require_jsx_runtime();
 const meta = {
 	name: "Kanban Board",
 	description: "3-column kanban with card movement and independent scroll",
@@ -130,54 +129,54 @@ const tagColors = {
 	security: "$error"
 };
 function Tag({ name }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+	return /* @__PURE__ */ jsxs(Text, {
 		color: tagColors[name] ?? "$muted",
 		dim: true,
 		children: ["#", name]
 	});
 }
 function CardComponent({ card, isSelected }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		borderStyle: "round",
 		borderColor: isSelected ? "$primary" : "$border",
-		children: [isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		children: [isSelected ? /* @__PURE__ */ jsx(Box, {
 			backgroundColor: "$primary",
 			paddingX: 1,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			children: /* @__PURE__ */ jsx(Text, {
 				color: "$primary-fg",
 				bold: true,
 				wrap: "truncate",
 				children: card.title
 			})
-		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		}) : /* @__PURE__ */ jsx(Box, {
 			paddingX: 1,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			children: /* @__PURE__ */ jsx(Text, {
 				wrap: "truncate",
 				children: card.title
 			})
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		}), /* @__PURE__ */ jsx(Box, {
 			gap: 1,
 			paddingX: 1,
-			children: card.tags.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { name: tag }, tag))
+			children: card.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { name: tag }, tag))
 		})]
 	});
 }
 function ColumnComponent({ column, isSelected, selectedCardIndex }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		flexGrow: 1,
 		flexBasis: 0,
 		borderStyle: "single",
 		borderColor: isSelected ? "$primary" : "$border",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: [/* @__PURE__ */ jsxs(Box, {
 			backgroundColor: isSelected ? "$primary" : void 0,
 			paddingX: 1,
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			children: [/* @__PURE__ */ jsx(Text, {
 				bold: true,
 				color: isSelected ? "$primary-fg" : "$text",
 				children: column.title
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			}), /* @__PURE__ */ jsxs(Text, {
 				color: isSelected ? "$primary-fg" : "$muted",
 				children: [
 					" (",
@@ -185,16 +184,16 @@ function ColumnComponent({ column, isSelected, selectedCardIndex }) {
 					")"
 				]
 			})]
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		}), /* @__PURE__ */ jsxs(Box, {
 			flexDirection: "column",
 			paddingX: 1,
 			overflow: "scroll",
 			scrollTo: isSelected ? selectedCardIndex : void 0,
 			flexGrow: 1,
-			children: [column.cards.map((card, cardIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardComponent, {
+			children: [column.cards.map((card, cardIndex) => /* @__PURE__ */ jsx(CardComponent, {
 				card,
 				isSelected: isSelected && cardIndex === selectedCardIndex
-			}, card.id)), column.cards.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			}, card.id)), column.cards.length === 0 && /* @__PURE__ */ jsx(Text, {
 				dim: true,
 				italic: true,
 				children: "No cards"
@@ -242,16 +241,16 @@ function KanbanBoard() {
 		setSelectedColumn(targetColumnIndex);
 		setSelectedCard(columns[targetColumnIndex].cards.length);
 	}
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	return /* @__PURE__ */ jsx(Box, {
 		flexDirection: "column",
 		padding: 1,
 		height: "100%",
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		children: /* @__PURE__ */ jsx(Box, {
 			flexGrow: 1,
 			flexDirection: "row",
 			gap: 1,
 			overflow: "hidden",
-			children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnComponent, {
+			children: columns.map((column, colIndex) => /* @__PURE__ */ jsx(ColumnComponent, {
 				column,
 				isSelected: colIndex === selectedColumn,
 				selectedCardIndex: colIndex === selectedColumn ? boundedSelectedCard : -1
@@ -263,10 +262,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: "h/l column  j/k card  </> move  Esc/q quit",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KanbanBoard, {})
+			children: /* @__PURE__ */ jsx(KanbanBoard, {})
 		}), term);
 		await waitUntilExit();
 	} catch (_) {

package/dist/apps/layout-ref.mjs

@@ -1,8 +1,8 @@
 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 { useRef, useState } from "react";
 import { Box, H1, Kbd, Muted, Text, createTerm, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region apps/layout-ref.tsx
 /**
 * Layout Ref Example
@@ -12,7 +12,6 @@ import { Box, H1, Kbd, Muted, Text, createTerm, render, useApp, useInput } from
 * - BoxHandle for accessing layout info imperatively
 * - onLayout callback for responding to size changes
 */
-var import_jsx_runtime = require_jsx_runtime();
 const meta = {
 	name: "Layout Ref",
 	description: "useBoxRect + useScrollRect for imperative layout measurement",
@@ -24,14 +23,14 @@ const meta = {
 	]
 };
 function ResizablePane({ title, color, onLayoutChange }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+	return /* @__PURE__ */ jsx(Box, {
 		ref: useRef(null),
 		flexGrow: 1,
 		borderStyle: "round",
 		borderColor: color,
 		padding: 1,
 		onLayout: (layout) => onLayoutChange(layout),
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+		children: /* @__PURE__ */ jsx(H1, {
 			color,
 			children: title
 		})
@@ -50,23 +49,23 @@ function ImperativeAccessDemo() {
 		const node = boxRef.current.getNode();
 		setInfo(`Content: ${content?.width}x${content?.height} at (${content?.x},${content?.y})\nScreen: ${screen?.width}x${screen?.height} at (${screen?.x},${screen?.y})\nNode: ${node ? "available" : "null"}`);
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		ref: boxRef,
 		flexDirection: "column",
 		borderStyle: "double",
 		borderColor: "$accent",
 		padding: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, {
+			/* @__PURE__ */ jsx(H1, {
 				color: "$accent",
 				children: "Imperative Access (BoxHandle)"
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Press 'i' to inspect this box" }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Muted, { children: "Press 'i' to inspect this box" }),
+			/* @__PURE__ */ jsx(Box, {
 				marginTop: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: info })
+				children: /* @__PURE__ */ jsx(Text, { children: info })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(InspectTrigger, { onInspect: inspect })
+			/* @__PURE__ */ jsx(InspectTrigger, { onInspect: inspect })
 		]
 	});
 }
@@ -88,46 +87,46 @@ function LayoutRefApp() {
 			[pane]: info
 		}));
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		padding: 1,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				flexDirection: "row",
 				gap: 1,
 				height: 8,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizablePane, {
+					/* @__PURE__ */ jsx(ResizablePane, {
 						title: "Pane A",
 						color: "$success",
 						onLayoutChange: handleLayoutChange("a")
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizablePane, {
+					/* @__PURE__ */ jsx(ResizablePane, {
 						title: "Pane B",
 						color: "$info",
 						onLayoutChange: handleLayoutChange("b")
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizablePane, {
+					/* @__PURE__ */ jsx(ResizablePane, {
 						title: "Pane C",
 						color: "$primary",
 						onLayoutChange: handleLayoutChange("c")
 					})
 				]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				marginTop: 1,
 				borderStyle: "single",
 				borderColor: "$border",
 				padding: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				children: /* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						/* @__PURE__ */ jsx(Text, {
 							bold: true,
 							dim: true,
 							children: "onLayout Results:"
 						}),
-						Object.entries(layouts).map(([pane, info]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+						Object.entries(layouts).map(([pane, info]) => /* @__PURE__ */ jsxs(Text, {
 							dim: true,
 							children: [
 								"Pane ",
@@ -143,7 +142,7 @@ function LayoutRefApp() {
 								")"
 							]
 						}, pane)),
-						Object.keys(layouts).length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						Object.keys(layouts).length === 0 && /* @__PURE__ */ jsx(Text, {
 							dim: true,
 							italic: true,
 							children: "Waiting for layout..."
@@ -151,16 +150,16 @@ function LayoutRefApp() {
 					]
 				})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				flexGrow: 1,
 				marginTop: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImperativeAccessDemo, {})
+				children: /* @__PURE__ */ jsx(ImperativeAccessDemo, {})
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+			/* @__PURE__ */ jsxs(Muted, { children: [
 				" ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "i" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "i" }),
 				" inspect ",
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }),
+				/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
 				" quit"
 			] })
 		]
@@ -170,10 +169,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: "i inspect  Esc/q quit",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LayoutRefApp, {})
+			children: /* @__PURE__ */ jsx(LayoutRefApp, {})
 		}), term);
 		await waitUntilExit();
 	} catch (_) {