@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/theme.mjs

@@ -0,0 +1,660 @@
+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 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
+*
+* Browse all built-in palettes with live color preview.
+* First entry is always the detected terminal theme.
+* Left panel: scrollable list with mini color swatches.
+* Right panel: live preview wrapped in ThemeProvider showing
+* semantic tokens, ANSI 16-color table, surfaces, components, and typography.
+*/
+init_src();
+const meta = {
+	name: "Theme Explorer",
+	description: "Browse built-in palettes with live color preview",
+	demo: true,
+	features: [
+		"ThemeProvider",
+		"builtinThemes",
+		"detectTheme",
+		"semantic tokens",
+		"components"
+	]
+};
+let allEntries = [];
+/** Small color swatch: 2 colored block chars */
+function Swatch({ color }) {
+	return /* @__PURE__ */ jsx(Text, {
+		color,
+		children: "██"
+	});
+}
+/** Mini swatch: 4 colored blocks showing palette character */
+function MiniSwatch({ palette }) {
+	return /* @__PURE__ */ jsxs(Text, { children: [
+		/* @__PURE__ */ jsx(Text, {
+			color: palette.red,
+			children: "█"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: palette.green,
+			children: "█"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: palette.blue,
+			children: "█"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: palette.yellow,
+			children: "█"
+		})
+	] });
+}
+/** Mini swatch from theme tokens (for detected theme without a palette) */
+function ThemeMiniSwatch({ theme }) {
+	return /* @__PURE__ */ jsxs(Text, { children: [
+		/* @__PURE__ */ jsx(Text, {
+			color: theme.error,
+			children: "█"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: theme.success,
+			children: "█"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: theme.info,
+			children: "█"
+		}),
+		/* @__PURE__ */ jsx(Text, {
+			color: theme.primary,
+			children: "█"
+		})
+	] });
+}
+/** Left panel: theme list with color swatches */
+function ThemeList({ entries, selectedIndex }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		width: 30,
+		borderStyle: "single",
+		overflow: "scroll",
+		scrollTo: selectedIndex,
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				paddingX: 1,
+				children: [/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					color: "$primary",
+					children: "Palettes"
+				}), /* @__PURE__ */ jsxs(Muted, { children: [
+					" (",
+					entries.length,
+					")"
+				] })]
+			}),
+			/* @__PURE__ */ jsx(Divider, {}),
+			/* @__PURE__ */ jsx(Box, {
+				flexDirection: "column",
+				paddingX: 1,
+				children: entries.map((entry, i) => {
+					const isSelected = i === selectedIndex;
+					return /* @__PURE__ */ jsxs(Box, { children: [
+						/* @__PURE__ */ jsxs(Text, {
+							inverse: isSelected,
+							children: [
+								isSelected ? "▸" : " ",
+								" ",
+								entry.name.padEnd(18)
+							]
+						}),
+						/* @__PURE__ */ jsx(Text, { children: " " }),
+						entry.palette ? /* @__PURE__ */ jsx(MiniSwatch, { palette: entry.palette }) : /* @__PURE__ */ jsx(ThemeMiniSwatch, { theme: entry.theme })
+					] }, entry.name);
+				})
+			})
+		]
+	});
+}
+/** Semantic token showcase row */
+function SemanticTokens() {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsx(H2, { children: "Semantic Tokens" }), /* @__PURE__ */ jsx(Box, {
+			flexDirection: "row",
+			flexWrap: "wrap",
+			gap: 1,
+			paddingX: 1,
+			children: [
+				{
+					name: "primary",
+					token: "$primary",
+					icon: "●"
+				},
+				{
+					name: "success",
+					token: "$success",
+					icon: "✓"
+				},
+				{
+					name: "warning",
+					token: "$warning",
+					icon: "⚠"
+				},
+				{
+					name: "error",
+					token: "$error",
+					icon: "✗"
+				},
+				{
+					name: "info",
+					token: "$info",
+					icon: "ℹ"
+				},
+				{
+					name: "accent",
+					token: "$accent",
+					icon: "◆"
+				},
+				{
+					name: "muted",
+					token: "$muted",
+					icon: "○"
+				},
+				{
+					name: "link",
+					token: "$link",
+					icon: "🔗"
+				}
+			].map((t) => /* @__PURE__ */ jsxs(Text, {
+				color: t.token,
+				children: [
+					t.icon,
+					" ",
+					t.name
+				]
+			}, t.name))
+		})]
+	});
+}
+/** ANSI 16-color table */
+function AnsiColorTable({ palette }) {
+	const normal = [
+		palette.black,
+		palette.red,
+		palette.green,
+		palette.yellow,
+		palette.blue,
+		palette.magenta,
+		palette.cyan,
+		palette.white
+	];
+	const bright = [
+		palette.brightBlack,
+		palette.brightRed,
+		palette.brightGreen,
+		palette.brightYellow,
+		palette.brightBlue,
+		palette.brightMagenta,
+		palette.brightCyan,
+		palette.brightWhite
+	];
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(H2, { children: "ANSI 16 Colors" }),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				gap: 1,
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "0-7 " }), normal.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				gap: 1,
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "8-15 " }), bright.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
+			})
+		]
+	});
+}
+/** ANSI 16-color table from theme palette array (for detected theme) */
+function ThemeAnsiColorTable({ palette }) {
+	const normal = palette.slice(0, 8);
+	const bright = palette.slice(8, 16);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(H2, { children: "ANSI 16 Colors" }),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				gap: 1,
+				children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Muted, { children: "0-7 " }), normal.map((c, i) => /* @__PURE__ */ jsx(Swatch, { color: c }, i))] })
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 1,
+				gap: 1,
+				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__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsx(H2, { children: "Components" }), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			gap: 1,
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 2,
+					children: [
+						/* @__PURE__ */ jsx(Link, {
+							href: "https://silvery.dev",
+							children: "silvery.dev"
+						}),
+						/* @__PURE__ */ jsx(Link, {
+							href: "https://example.com",
+							color: "$primary",
+							children: "primary link"
+						}),
+						/* @__PURE__ */ jsx(Link, {
+							href: "https://example.com",
+							dim: true,
+							children: "dim link"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 1,
+					flexWrap: "wrap",
+					children: [
+						/* @__PURE__ */ jsx(Badge, {
+							label: "default",
+							variant: "default"
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							label: "success",
+							variant: "success"
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							label: "error",
+							variant: "error"
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							label: "warning",
+							variant: "warning"
+						}),
+						/* @__PURE__ */ jsx(Badge, {
+							label: "primary",
+							variant: "primary"
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 2,
+					children: [/* @__PURE__ */ jsxs(Box, {
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Muted, { children: "Progress:" }), /* @__PURE__ */ jsx(Box, {
+							width: 16,
+							children: /* @__PURE__ */ jsx(ProgressBar, { value: .65 })
+						})]
+					}), /* @__PURE__ */ jsxs(Box, {
+						gap: 1,
+						children: [/* @__PURE__ */ jsx(Spinner, {}), /* @__PURE__ */ jsx(Muted, { children: "Loading..." })]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 2,
+					children: [/* @__PURE__ */ jsx(Box, {
+						gap: 1,
+						children: /* @__PURE__ */ jsx(Toggle, {
+							value: true,
+							onChange: () => {},
+							label: "Enabled"
+						})
+					}), /* @__PURE__ */ jsx(Box, {
+						gap: 1,
+						children: /* @__PURE__ */ jsx(Toggle, {
+							value: false,
+							onChange: () => {},
+							label: "Disabled"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					borderStyle: "round",
+					paddingX: 1,
+					flexDirection: "column",
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							bold: true,
+							color: "$primary",
+							children: "Dialog Title"
+						}),
+						/* @__PURE__ */ jsx(Text, { children: "Body text with default colors." }),
+						/* @__PURE__ */ jsx(Muted, { children: "Muted secondary info" })
+					]
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					borderStyle: "single",
+					borderColor: "$inputborder",
+					paddingX: 1,
+					width: 30,
+					children: /* @__PURE__ */ jsx(Text, {
+						color: "$disabledfg",
+						children: "Search..."
+					})
+				}),
+				/* @__PURE__ */ jsx(Box, {
+					borderStyle: "single",
+					borderColor: "$focusborder",
+					paddingX: 1,
+					width: 30,
+					children: /* @__PURE__ */ jsx(Text, { children: "Focused input" })
+				})
+			]
+		})]
+	});
+}
+/** Typography samples */
+function TypographySamples() {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsx(H2, { children: "Typography" }), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			children: [
+				/* @__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__ */ jsx(Kbd, { children: "Kbd" }),
+						/* @__PURE__ */ jsx(Kbd, { children: "⌘K" }),
+						/* @__PURE__ */ jsx(Kbd, { children: "Enter" })
+					]
+				}),
+				/* @__PURE__ */ jsx(Code, { children: "inline code" }),
+				/* @__PURE__ */ jsx(Blockquote, { children: "Blockquote text" })
+			]
+		})]
+	});
+}
+/** Surface pairs showcase */
+function SurfacePairs() {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsx(H2, { children: "Surfaces" }), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			gap: 0,
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 1,
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$surfacebg",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$surface",
+								children: "surface"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$inversebg",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$inverse",
+								children: "inverse"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$mutedbg",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, { children: "muted bg" })
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 1,
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$primary",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$primaryfg",
+								children: "primary"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$error",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$errorfg",
+								children: "error"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$success",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$successfg",
+								children: "success"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					gap: 1,
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$selectionbg",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$selection",
+								children: "selection"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$popoverbg",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$popover",
+								children: "popover"
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							backgroundColor: "$accent",
+							paddingX: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								color: "$accentfg",
+								children: "accent"
+							})
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+/** Contrast adjustments made during derivation */
+function AdjustmentLog({ adjustments = [] }) {
+	if (adjustments.length === 0) return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsx(H2, { children: "Contrast Adjustments" }), /* @__PURE__ */ jsx(Box, {
+			paddingX: 1,
+			children: /* @__PURE__ */ jsx(Text, {
+				color: "$success",
+				children: "✓ No adjustments needed — all tokens meet contrast targets"
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsxs(H2, { children: [
+			"Contrast Adjustments (",
+			adjustments.length,
+			")"
+		] }), /* @__PURE__ */ jsx(Box, {
+			flexDirection: "column",
+			paddingX: 1,
+			children: adjustments.map((adj, i) => /* @__PURE__ */ jsxs(Box, {
+				gap: 1,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						bold: true,
+						children: adj.token.padEnd(12)
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						color: adj.from,
+						children: "██"
+					}),
+					/* @__PURE__ */ jsx(Muted, { children: "→" }),
+					/* @__PURE__ */ jsx(Text, {
+						color: adj.to,
+						children: "██"
+					}),
+					/* @__PURE__ */ jsxs(Muted, { children: [
+						adj.ratioBefore.toFixed(1),
+						"→",
+						adj.ratioAfter.toFixed(1),
+						":1 (target ",
+						adj.target,
+						":1)"
+					] })
+				]
+			}, i))
+		})]
+	});
+}
+/** Right panel: live preview wrapped in selected ThemeProvider */
+function ThemePreview({ entry }) {
+	const label = entry.detected ? "(detected)" : entry.palette?.dark === false ? "(light)" : "(dark)";
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: entry.theme,
+		children: /* @__PURE__ */ jsxs(Box, {
+			theme: entry.theme,
+			flexDirection: "column",
+			flexGrow: 1,
+			borderStyle: "single",
+			overflow: "scroll",
+			children: [
+				/* @__PURE__ */ jsxs(Box, {
+					paddingX: 1,
+					gap: 1,
+					children: [/* @__PURE__ */ jsx(H1, { children: entry.name }), /* @__PURE__ */ jsx(Muted, { children: label })]
+				}),
+				/* @__PURE__ */ jsx(Divider, {}),
+				/* @__PURE__ */ jsxs(Box, {
+					flexDirection: "column",
+					gap: 1,
+					children: [
+						/* @__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 })
+					]
+				})
+			]
+		})
+	});
+}
+function HelpBar() {
+	return /* @__PURE__ */ jsxs(Muted, { children: [
+		" ",
+		/* @__PURE__ */ jsx(Kbd, { children: "j/k" }),
+		" navigate ",
+		/* @__PURE__ */ jsx(Kbd, { children: "Esc/q" }),
+		" quit"
+	] });
+}
+function ThemeExplorer({ entries }) {
+	const { exit } = useApp();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	useInput((input, key) => {
+		if (input === "q" || key.escape) exit();
+		if (key.downArrow || input === "j") setSelectedIndex((i) => Math.min(i + 1, entries.length - 1));
+		if (key.upArrow || input === "k") setSelectedIndex((i) => Math.max(i - 1, 0));
+	});
+	const entry = entries[selectedIndex];
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		height: "100%",
+		padding: 1,
+		children: [/* @__PURE__ */ jsxs(Box, {
+			flexGrow: 1,
+			flexDirection: "row",
+			gap: 1,
+			overflow: "hidden",
+			children: [/* @__PURE__ */ jsx(ThemeList, {
+				entries,
+				selectedIndex
+			}), /* @__PURE__ */ jsx(ThemePreview, { entry })]
+		}), /* @__PURE__ */ jsx(HelpBar, {})]
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const detectedTheme = await detectTheme();
+		const builtinEntries = Object.entries(builtinPalettes).map(([name, palette]) => {
+			const adjustments = [];
+			return {
+				name,
+				palette,
+				theme: deriveTheme(palette, "truecolor", adjustments),
+				adjustments
+			};
+		});
+		allEntries = [
+			{
+				name: "Detected",
+				palette: null,
+				theme: detectedTheme,
+				adjustments: [],
+				detected: true
+			},
+			{
+				name: "ANSI 16 Dark",
+				palette: null,
+				theme: ansi16DarkTheme,
+				adjustments: []
+			},
+			{
+				name: "ANSI 16 Light",
+				palette: null,
+				theme: ansi16LightTheme,
+				adjustments: []
+			},
+			...builtinEntries
+		];
+		const term = _usingCtx$1.u(createTerm());
+		const { waitUntilExit } = await render(/* @__PURE__ */ jsx(ExampleBanner, {
+			meta,
+			controls: "j/k navigate  Esc/q quit",
+			children: /* @__PURE__ */ jsx(ThemeExplorer, { entries: allEntries })
+		}), term);
+		await waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+//#endregion
+export { ThemeExplorer, main, meta };