@silvery/examples 0.17.4 → 0.17.5

package/dist/apps/theme.mjs

@@ -1,9 +1,9 @@
 import { d as ansi16LightTheme, f as builtinPalettes, h as deriveTheme, t as init_src, u as ansi16DarkTheme } from "../src-CUUOuRH6.mjs";
 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 { Badge, Blockquote, Box, Code, Divider, H1, H2, H3, Kbd, Lead, Link, Muted, P, ProgressBar, Small, Spinner, Strong, Text, ThemeProvider, Toggle, createTerm, detectTheme, render, useApp, useInput } from "silvery";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region apps/theme.tsx
 /**
 * Theme Explorer Example
@@ -15,7 +15,6 @@ import { Badge, Blockquote, Box, Code, Divider, H1, H2, H3, Kbd, Lead, Link, Mut
 * semantic tokens, ANSI 16-color table, surfaces, components, and typography.
 */
 init_src();
-var import_jsx_runtime = require_jsx_runtime();
 const meta = {
 	name: "Theme Explorer",
 	description: "Browse built-in palettes with live color preview",
@@ -31,27 +30,27 @@ const meta = {
 let allEntries = [];
 /** Small color swatch: 2 colored block chars */
 function Swatch({ color }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+	return /* @__PURE__ */ jsx(Text, {
 		color,
 		children: "██"
 	});
 }
 /** Mini swatch: 4 colored blocks showing palette character */
 function MiniSwatch({ palette }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+	return /* @__PURE__ */ jsxs(Text, { children: [
+		/* @__PURE__ */ jsx(Text, {
 			color: palette.red,
 			children: "█"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		/* @__PURE__ */ jsx(Text, {
 			color: palette.green,
 			children: "█"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		/* @__PURE__ */ jsx(Text, {
 			color: palette.blue,
 			children: "█"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		/* @__PURE__ */ jsx(Text, {
 			color: palette.yellow,
 			children: "█"
 		})
@@ -59,20 +58,20 @@ function MiniSwatch({ palette }) {
 }
 /** Mini swatch from theme tokens (for detected theme without a palette) */
 function ThemeMiniSwatch({ theme }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { children: [
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+	return /* @__PURE__ */ jsxs(Text, { children: [
+		/* @__PURE__ */ jsx(Text, {
 			color: theme.error,
 			children: "█"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		/* @__PURE__ */ jsx(Text, {
 			color: theme.success,
 			children: "█"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		/* @__PURE__ */ jsx(Text, {
 			color: theme.info,
 			children: "█"
 		}),
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+		/* @__PURE__ */ jsx(Text, {
 			color: theme.primary,
 			children: "█"
 		})
@@ -80,33 +79,33 @@ function ThemeMiniSwatch({ theme }) {
 }
 /** Left panel: theme list with color swatches */
 function ThemeList({ entries, selectedIndex }) {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		width: 30,
 		borderStyle: "single",
 		overflow: "scroll",
 		scrollTo: selectedIndex,
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			/* @__PURE__ */ jsxs(Box, {
 				paddingX: 1,
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+				children: [/* @__PURE__ */ jsx(Text, {
 					bold: true,
 					color: "$primary",
 					children: "Palettes"
-				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+				}), /* @__PURE__ */ jsxs(Muted, { children: [
 					" (",
 					entries.length,
 					")"
 				] })]
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(Box, {
 				flexDirection: "column",
 				paddingX: 1,
 				children: entries.map((entry, i) => {
 					const isSelected = i === selectedIndex;
-					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+					return /* @__PURE__ */ jsxs(Box, { children: [
+						/* @__PURE__ */ jsxs(Text, {
 							inverse: isSelected,
 							children: [
 								isSelected ? "▸" : " ",
@@ -114,8 +113,8 @@ function ThemeList({ entries, selectedIndex }) {
 								entry.name.padEnd(18)
 							]
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: " " }),
-						entry.palette ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MiniSwatch, { palette: entry.palette }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeMiniSwatch, { theme: entry.theme })
+						/* @__PURE__ */ jsx(Text, { children: " " }),
+						entry.palette ? /* @__PURE__ */ jsx(MiniSwatch, { palette: entry.palette }) : /* @__PURE__ */ jsx(ThemeMiniSwatch, { theme: entry.theme })
 					] }, entry.name);
 				})
 			})
@@ -124,9 +123,9 @@ function ThemeList({ entries, selectedIndex }) {
 }
 /** Semantic token showcase row */
 function SemanticTokens() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Semantic Tokens" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		children: [/* @__PURE__ */ jsx(H2, { children: "Semantic Tokens" }), /* @__PURE__ */ jsx(Box, {
 			flexDirection: "row",
 			flexWrap: "wrap",
 			gap: 1,
@@ -172,7 +171,7 @@ function SemanticTokens() {
 					token: "$link",
 					icon: "🔗"
 				}
-			].map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, {
+			].map((t) => /* @__PURE__ */ jsxs(Text, {
 				color: t.token,
 				children: [
 					t.icon,
@@ -205,19 +204,19 @@ function AnsiColorTable({ palette }) {
 		palette.brightCyan,
 		palette.brightWhite
 	];
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "ANSI 16 Colors" }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(H2, { children: "ANSI 16 Colors" }),
+			/* @__PURE__ */ jsx(Box, {
 				paddingX: 1,
 				gap: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "0-7 " }), normal.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Swatch, { color: c }, i))] })
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "0-7 " }), normal.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				paddingX: 1,
 				gap: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "8-15 " }), bright.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Swatch, { color: c }, i))] })
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "8-15 " }), bright.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
 			})
 		]
 	});
@@ -226,138 +225,138 @@ function AnsiColorTable({ palette }) {
 function ThemeAnsiColorTable({ palette }) {
 	const normal = palette.slice(0, 8);
 	const bright = palette.slice(8, 16);
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "ANSI 16 Colors" }),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(H2, { children: "ANSI 16 Colors" }),
+			/* @__PURE__ */ jsx(Box, {
 				paddingX: 1,
 				gap: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "0-7 " }), normal.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Swatch, { color: c }, i))] })
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "0-7 " }), normal.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
 			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+			/* @__PURE__ */ jsx(Box, {
 				paddingX: 1,
 				gap: 1,
-				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "8-15 " }), bright.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Swatch, { color: c }, i))] })
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "8-15 " }), bright.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
 			})
 		]
 	});
 }
 /** Component showcase — real silvery components using theme tokens */
 function ComponentShowcase() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Components" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: [/* @__PURE__ */ jsx(H2, { children: "Components" }), /* @__PURE__ */ jsxs(Box, {
 			flexDirection: "column",
 			paddingX: 1,
 			gap: 1,
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 2,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+						/* @__PURE__ */ jsx(Link, {
 							href: "https://silvery.dev",
 							children: "silvery.dev"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+						/* @__PURE__ */ jsx(Link, {
 							href: "https://example.com",
 							color: "$primary",
 							children: "primary link"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+						/* @__PURE__ */ jsx(Link, {
 							href: "https://example.com",
 							dim: true,
 							children: "dim link"
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 1,
 					flexWrap: "wrap",
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						/* @__PURE__ */ jsx(Badge, {
 							label: "default",
 							variant: "default"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						/* @__PURE__ */ jsx(Badge, {
 							label: "success",
 							variant: "success"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						/* @__PURE__ */ jsx(Badge, {
 							label: "error",
 							variant: "error"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						/* @__PURE__ */ jsx(Badge, {
 							label: "warning",
 							variant: "warning"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Badge, {
+						/* @__PURE__ */ jsx(Badge, {
 							label: "primary",
 							variant: "primary"
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 2,
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					children: [/* @__PURE__ */ jsxs(Box, {
 						gap: 1,
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Progress:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						children: [/* @__PURE__ */ jsx(Muted, { children: "Progress:" }), /* @__PURE__ */ jsx(Box, {
 							width: 16,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProgressBar, { value: .65 })
+							children: /* @__PURE__ */ jsx(ProgressBar, { value: .65 })
 						})]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+					}), /* @__PURE__ */ jsxs(Box, {
 						gap: 1,
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Loading..." })]
+						children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx(Muted, { children: "Loading..." })]
 					})]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 2,
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					children: [/* @__PURE__ */ jsx(Box, {
 						gap: 1,
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+						children: /* @__PURE__ */ jsx(Toggle, {
 							value: true,
 							onChange: () => {},
 							label: "Enabled"
 						})
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+					}), /* @__PURE__ */ jsx(Box, {
 						gap: 1,
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toggle, {
+						children: /* @__PURE__ */ jsx(Toggle, {
 							value: false,
 							onChange: () => {},
 							label: "Disabled"
 						})
 					})]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					borderStyle: "round",
 					paddingX: 1,
 					flexDirection: "column",
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+						/* @__PURE__ */ jsx(Text, {
 							bold: true,
 							color: "$primary",
 							children: "Dialog Title"
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Body text with default colors." }),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Muted secondary info" })
+						/* @__PURE__ */ jsx(Text, { children: "Body text with default colors." }),
+						/* @__PURE__ */ jsx(Muted, { children: "Muted secondary info" })
 					]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				/* @__PURE__ */ jsx(Box, {
 					borderStyle: "single",
 					borderColor: "$inputborder",
 					paddingX: 1,
 					width: 30,
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					children: /* @__PURE__ */ jsx(Text, {
 						color: "$disabledfg",
 						children: "Search..."
 					})
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+				/* @__PURE__ */ jsx(Box, {
 					borderStyle: "single",
 					borderColor: "$focusborder",
 					paddingX: 1,
 					width: 30,
-					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "Focused input" })
+					children: /* @__PURE__ */ jsx(Text, { children: "Focused input" })
 				})
 			]
 		})]
@@ -365,121 +364,121 @@ function ComponentShowcase() {
 }
 /** Typography samples */
 function TypographySamples() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Typography" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: [/* @__PURE__ */ jsx(H2, { children: "Typography" }), /* @__PURE__ */ jsxs(Box, {
 			flexDirection: "column",
 			paddingX: 1,
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: "Heading 1" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Heading 2" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H3, { children: "Heading 3" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Strong, { children: "Strong text" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Lead, { children: "Lead text (italic)" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(P, { children: "Normal paragraph text" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "Muted text" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Small, { children: "Small text" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsx(H1, { children: "Heading 1" }),
+				/* @__PURE__ */ jsx(H2, { children: "Heading 2" }),
+				/* @__PURE__ */ jsx(H3, { children: "Heading 3" }),
+				/* @__PURE__ */ jsx(Strong, { children: "Strong text" }),
+				/* @__PURE__ */ jsx(Lead, { children: "Lead text (italic)" }),
+				/* @__PURE__ */ jsx(P, { children: "Normal paragraph text" }),
+				/* @__PURE__ */ jsx(Muted, { children: "Muted text" }),
+				/* @__PURE__ */ jsx(Small, { children: "Small text" }),
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 1,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Kbd" }),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "⌘K" }),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Enter" })
+						/* @__PURE__ */ jsx(Kbd, { children: "Kbd" }),
+						/* @__PURE__ */ jsx(Kbd, { children: "⌘K" }),
+						/* @__PURE__ */ jsx(Kbd, { children: "Enter" })
 					]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { children: "inline code" }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Blockquote, { children: "Blockquote text" })
+				/* @__PURE__ */ jsx(Code, { children: "inline code" }),
+				/* @__PURE__ */ jsx(Blockquote, { children: "Blockquote text" })
 			]
 		})]
 	});
 }
 /** Surface pairs showcase */
 function SurfacePairs() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Surfaces" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: [/* @__PURE__ */ jsx(H2, { children: "Surfaces" }), /* @__PURE__ */ jsxs(Box, {
 			flexDirection: "column",
 			paddingX: 1,
 			gap: 0,
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 1,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$surfacebg",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$surface",
 								children: "surface"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$inversebg",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$inverse",
 								children: "inverse"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$mutedbg",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { children: "muted bg" })
+							children: /* @__PURE__ */ jsx(Text, { children: "muted bg" })
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 1,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$primary",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$primaryfg",
 								children: "primary"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$error",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$errorfg",
 								children: "error"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$success",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$successfg",
 								children: "success"
 							})
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					gap: 1,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$selectionbg",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$selection",
 								children: "selection"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$popoverbg",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$popover",
 								children: "popover"
 							})
 						}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+						/* @__PURE__ */ jsx(Box, {
 							backgroundColor: "$accent",
 							paddingX: 1,
-							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+							children: /* @__PURE__ */ jsx(Text, {
 								color: "$accentfg",
 								children: "accent"
 							})
@@ -492,42 +491,42 @@ function SurfacePairs() {
 }
 /** Contrast adjustments made during derivation */
 function AdjustmentLog({ adjustments = [] }) {
-	if (adjustments.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	if (adjustments.length === 0) return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H2, { children: "Contrast Adjustments" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		children: [/* @__PURE__ */ jsx(H2, { children: "Contrast Adjustments" }), /* @__PURE__ */ jsx(Box, {
 			paddingX: 1,
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+			children: /* @__PURE__ */ jsx(Text, {
 				color: "$success",
 				children: "✓ No adjustments needed — all tokens meet contrast targets"
 			})
 		})]
 	});
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(H2, { children: [
+		children: [/* @__PURE__ */ jsxs(H2, { children: [
 			"Contrast Adjustments (",
 			adjustments.length,
 			")"
-		] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Box, {
+		] }), /* @__PURE__ */ jsx(Box, {
 			flexDirection: "column",
 			paddingX: 1,
-			children: adjustments.map((adj, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+			children: adjustments.map((adj, i) => /* @__PURE__ */ jsxs(Box, {
 				gap: 1,
 				children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						bold: true,
 						children: adj.token.padEnd(12)
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Text, {
 						color: adj.from,
 						children: "██"
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: "→" }),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, {
+					/* @__PURE__ */ jsx(Muted, { children: "→" }),
+					/* @__PURE__ */ jsx(Text, {
 						color: adj.to,
 						children: "██"
 					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+					/* @__PURE__ */ jsxs(Muted, { children: [
 						adj.ratioBefore.toFixed(1),
 						"→",
 						adj.ratioAfter.toFixed(1),
@@ -543,31 +542,31 @@ function AdjustmentLog({ adjustments = [] }) {
 /** Right panel: live preview wrapped in selected ThemeProvider */
 function ThemePreview({ entry }) {
 	const label = entry.detected ? "(detected)" : entry.palette?.dark === false ? "(light)" : "(dark)";
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeProvider, {
+	return /* @__PURE__ */ jsx(ThemeProvider, {
 		theme: entry.theme,
-		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: /* @__PURE__ */ jsxs(Box, {
 			theme: entry.theme,
 			flexDirection: "column",
 			flexGrow: 1,
 			borderStyle: "single",
 			overflow: "scroll",
 			children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsxs(Box, {
 					paddingX: 1,
 					gap: 1,
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(H1, { children: entry.name }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Muted, { children: label })]
+					children: [/* @__PURE__ */ jsx(H1, { children: entry.name }), /* @__PURE__ */ jsx(Muted, { children: label })]
 				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+				/* @__PURE__ */ jsx(Divider, {}),
+				/* @__PURE__ */ jsxs(Box, {
 					flexDirection: "column",
 					gap: 1,
 					children: [
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SemanticTokens, {}),
-						entry.palette ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnsiColorTable, { palette: entry.palette }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeAnsiColorTable, { palette: entry.theme.palette }),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SurfacePairs, {}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentShowcase, {}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypographySamples, {}),
-						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdjustmentLog, { adjustments: entry.adjustments })
+						/* @__PURE__ */ jsx(SemanticTokens, {}),
+						entry.palette ? /* @__PURE__ */ jsx(AnsiColorTable, { palette: entry.palette }) : /* @__PURE__ */ jsx(ThemeAnsiColorTable, { palette: entry.theme.palette }),
+						/* @__PURE__ */ jsx(SurfacePairs, {}),
+						/* @__PURE__ */ jsx(ComponentShowcase, {}),
+						/* @__PURE__ */ jsx(TypographySamples, {}),
+						/* @__PURE__ */ jsx(AdjustmentLog, { adjustments: entry.adjustments })
 					]
 				})
 			]
@@ -575,11 +574,11 @@ function ThemePreview({ entry }) {
 	});
 }
 function HelpBar() {
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Muted, { children: [
+	return /* @__PURE__ */ jsxs(Muted, { children: [
 		" ",
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "j/k" }),
+		/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
 		" navigate ",
-		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "Esc/q" }),
+		/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
 		" quit"
 	] });
 }
@@ -592,20 +591,20 @@ function ThemeExplorer({ entries }) {
 		if (key.upArrow || input === "k") setSelectedIndex((i) => Math.max(i - 1, 0));
 	});
 	const entry = entries[selectedIndex];
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+	return /* @__PURE__ */ jsxs(Box, {
 		flexDirection: "column",
 		height: "100%",
 		padding: 1,
-		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Box, {
+		children: [/* @__PURE__ */ jsxs(Box, {
 			flexGrow: 1,
 			flexDirection: "row",
 			gap: 1,
 			overflow: "hidden",
-			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeList, {
+			children: [/* @__PURE__ */ jsx(ThemeList, {
 				entries,
 				selectedIndex
-			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemePreview, { entry })]
-		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HelpBar, {})]
+			}), /* @__PURE__ */ jsx(ThemePreview, { entry })]
+		}), /* @__PURE__ */ jsx(HelpBar, {})]
 	});
 }
 async function main() {
@@ -644,10 +643,10 @@ async function main() {
 			...builtinEntries
 		];
 		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: "j/k navigate  Esc/q quit",
-			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeExplorer, { entries: allEntries })
+			children: /* @__PURE__ */ jsx(ThemeExplorer, { entries: allEntries })
 		}), term);
 		await waitUntilExit();
 	} catch (_) {